Pagination

---
// src/components/ui/navigation/pagination/Pagination.astro — headless primitive (see ../../README.md).
// Static pager (<nav> + <ul>). Compose PaginationItem / PaginationLink / PaginationEllipsis.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"nav">;

const { class: className, ...rest } = Astro.props;
---

<nav aria-label="Pagination" data-slot="pagination" {...rest}>
  <ul class={className}>
    <slot />
  </ul>
</nav>

---
// src/components/ui/navigation/pagination/PaginationEllipsis.astro — Pagination compound part (see ../../README.md).
// The "…" gap in a pager. The visible glyph is aria-hidden and the real text is announced instead —
// structure.css visually hides that text, because "announced but not seen" is an accessibility
// mechanism, not a look, and a consumer who styles nothing should still not read "More pages" twice.
//
// Renders its own <li>, like PaginationPrevNext: it is composed bare inside <Pagination> (a <ul>),
// and a <span> child of a <ul> is invalid HTML that axe reports as a serious violation. Blocks
// shipped that composition before this was an <li> — the primitive is the shared fix.
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="pagination-ellipsis" {...rest}>
  <span aria-hidden="true">&hellip;</span>
  <span data-slot="pagination-ellipsis-text">More pages</span>
</li>

---
// src/components/ui/navigation/pagination/PaginationItem.astro — Pagination compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="pagination-item" {...rest}>
  <slot />
</li>

---
// src/components/ui/navigation/pagination/PaginationLink.astro — Pagination compound part (see ../../README.md).
// Set `isActive` on the current page; give prev/next links an aria-label. The current page is
// announced with the native `aria-current="page"` — a theme styles the active state off that, not
// off a data attribute, because ARIA already carries it.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & { href?: string; isActive?: boolean };

const { href, isActive = false, class: className, ...rest } = Astro.props;
---

<a
  href={href}
  aria-current={isActive ? "page" : undefined}
  data-slot="pagination-link"
  class={className}
  {...rest}
>
  <slot />
</a>

---
// src/components/ui/navigation/pagination/PaginationPrevNext.astro — Pagination compound part (see ../../README.md).
// The prev/next-only pager a cursor API needs. PaginationLink assumes numbered pages, and a cursor
// API has none: there is no "page 7" to link to and no total to count towards, only "is there
// another cursor in this direction". So the whole state of this control is whether `href` is set.
//
//   <Pagination>
//     <PaginationPrevNext direction="previous" href={prevCursor && `?before=${prevCursor}`} />
//     <PaginationPrevNext direction="next" href={nextCursor && `?after=${nextCursor}`} />
//   </Pagination>
//
// With no `href` it renders the same disabled-link shape BreadcrumbPage uses — `role="link"` +
// `aria-disabled="true"` — rather than vanishing. An end-of-list control that disappears moves every
// other control under the user's pointer, and a screen reader user loses the landmark entirely.
//
// The inner element carries `data-slot="pagination-link"`, deliberately: it IS a pagination link,
// and a theme that has already styled one should not have to style it twice. `data-direction` on the
// <li> is the hook for which side the chevron goes on.
//
// The visible text is the accessible name. For an icon-only control, pass `aria-label` — the same
// note PaginationLink carries, for the same reason.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & { direction?: "previous" | "next"; href?: string };

const { direction = "next", href, class: className, ...rest } = Astro.props;
const label = direction === "previous" ? "Previous page" : "Next page";
const Tag = href ? "a" : "span";
---

<li data-slot="pagination-prev-next" data-direction={direction}>
  <Tag
    href={href}
    rel={href ? (direction === "previous" ? "prev" : "next") : undefined}
    role={href ? undefined : "link"}
    aria-disabled={href ? undefined : "true"}
    class={className}
    data-slot="pagination-link"
    {...rest}
  >
    <slot>{label}</slot>
  </Tag>
</li>

import Pagination from "./Pagination.astro";
import PaginationEllipsis from "./PaginationEllipsis.astro";
import PaginationItem from "./PaginationItem.astro";
import PaginationLink from "./PaginationLink.astro";
import PaginationPrevNext from "./PaginationPrevNext.astro";

export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationPrevNext };
export default Pagination;