@fairgarden/design 0.1.0-alpha.0

package/components/Pagination/Pagination.js

@@ -0,0 +1,202 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { Link } from '../Link';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './pagination.module.css';
+/*
+ * Pagination (§9.9): moving through long paged lists.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: pagination.module.css; CVA function `pagination`.
+ * - Axes: `kind` → numbered | compact | step | dots | more → numbered,
+ *   compact, kindStep, kindDots, kindMore (prefixed, because `step` is also
+ *   a part); `primary`, `secondary` → scales module classes (the secondary
+ *   reaches only the arrows, through --role-glyph).
+ * - Compound variants: none.
+ * - Defaults: kind numbered (it renders the compact form below 768 px);
+ *   color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: page numbers are Link kind="nav" (hover: the bare-text
+ *   underline) and Previous / Next are `text` Buttons rendered as anchors,
+ *   their arrows at the next tier's weight on hover; `:hover` on `step` →
+ *   the bare-text underline on `word` (--role-accent at --border-size-2,
+ *   offset --size-px-1), `:active` → the underline at --border-size-2
+ *   [D181]. Step buttons are icon-only outline Buttons, whose hover, press
+ *   and ring are Button's. aria-current="page" on `current` → the
+ *   --ds-stroke-3 bar plus --font-weight-7; aria-current="true" on the
+ *   current `dot` → solid and larger. Ends omit the control and keep its
+ *   space; nothing is ever disabled. The list region the pager drives
+ *   carries aria-busy while loading; the pager stays put.
+ * - Parts: base (the nav), list, item, page, current, gap, prev, next,
+ *   status (with statusWord and statusCount), dots, dot; plus step
+ *   (Previous and Next), word (their visible label), more (the "Show More"
+ *   Button), visuallyHidden and printLine. The arrows are the Buttons' own
+ *   glyphs.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `pagination`. Baseline:
+ *   compact Previous / Next, their words dropped below 360 px; viewport
+ *   fallback numbered from --md-n-above (1 sibling) and 2 siblings from
+ *   --lg-n-above; container from 768 px numbered with 1 sibling, from
+ *   1024 px 2 siblings (§5.10.2). The row never wraps.
+ */
+export const pagination = cva(styles.base, {
+    variants: {
+        kind: {
+            numbered: styles.numbered,
+            compact: styles.compact,
+            step: styles.kindStep,
+            dots: styles.kindDots,
+            more: styles.kindMore,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'numbered',
+    },
+});
+/** More dots than this and the dots form falls back to the plain step pager (§9.9). */
+const MAX_DOTS = 8;
+/** The pages one tier shows: first, last, the current page and its siblings, with a fixed slot count. */
+function visiblePages(page, count, siblings) {
+    const pages = new Set([1, count]);
+    const start = Math.max(Math.min(page - siblings, count - siblings * 2 - 2), 3);
+    const end = Math.min(Math.max(page + siblings, siblings * 2 + 3), count - 2);
+    // A gap that would hide a single page shows that page instead.
+    if (start <= 3 && count > 2)
+        pages.add(2);
+    if (end >= count - 2 && count > 2)
+        pages.add(count - 1);
+    for (let index = start; index <= end; index += 1)
+        pages.add(index);
+    return pages;
+}
+/** One sibling from 768 px, two from 1024 px; each slot records the tiers that show it. */
+function pageSlots(page, count) {
+    const near = visiblePages(page, count, 1);
+    const far = visiblePages(page, count, 2);
+    const union = Array.from(new Set([...near, ...far])).sort((a, b) => a - b);
+    const next = (set, from) => union.find((value) => value > from && set.has(value));
+    const slots = [];
+    for (const value of union) {
+        slots.push({ kind: 'page', page: value, near: near.has(value), far: far.has(value) });
+        const nearNext = next(near, value);
+        const farNext = next(far, value);
+        const nearGap = near.has(value) && nearNext !== undefined && nearNext > value + 1;
+        const farGap = far.has(value) && farNext !== undefined && farNext > value + 1;
+        if (nearGap || farGap)
+            slots.push({ kind: 'gap', page: value, near: nearGap, far: farGap });
+    }
+    return slots;
+}
+/** An icon-only ‹ or › step button: a link when `getHref` is given, else a button calling `onPageChange`. */
+function StepButton({ direction, target, label, getHref, onPageChange, renderLink, }) {
+    const icon = direction === 'previous' ? 'chevron_left' : 'chevron_right';
+    const className = direction === 'previous' ? styles.prev : styles.next;
+    const onClick = onPageChange ? () => onPageChange(target) : undefined;
+    if (getHref) {
+        const href = getHref(target);
+        return (React.createElement(Button, { variant: "outline", iconOnly: true, icon: icon, nativeButton: false, render: renderLink ? renderLink(href) : React.createElement("a", { href: href }), rel: direction === 'previous' ? 'prev' : 'next', onClick: onClick, className: className }, label));
+    }
+    return (React.createElement(Button, { variant: "outline", iconOnly: true, icon: icon, onClick: onClick, className: className }, label));
+}
+/**
+ * A `nav` named "Pagination". `numbered` and `compact`: Previous at the
+ * start, the page numbers (or the "Page 5 of 12" status) centered, Next at
+ * the end; Previous and Next are `type-label` caps with Material Symbols
+ * `chevron_left` / `chevron_right` at the inline tier; page numerals are
+ * mono at `type-label` size with tabular figures, so a changing count never
+ * shifts the row [D165, D174, D175]. The current page is unlinked, bold and
+ * barred. `step` and `dots`: icon-only ‹ › circles around a mono "3 of 12"
+ * (plus up to 8 dots). `more`: "Showing 20 of 54" over a "Show More"
+ * Button. At the ends a control is omitted and its space kept, never
+ * disabled. The pager is hidden in print; with `items` the linked forms
+ * print one state line instead.
+ */
+export function Pagination(props) {
+    const { page: pageProp, count, getHref, onPageChange, renderLink, kind, primary, secondary, previousLabel = 'Previous', nextLabel = 'Next', items, fullListHref, moreLabel = 'Show More', className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const requestedKind = kind ?? 'numbered';
+    const total = Math.max(0, Math.floor(count));
+    const page = Math.min(Math.max(1, Math.floor(pageProp)), Math.max(1, total));
+    // The dots form shows at most 8 dots; past that it is the plain step pager.
+    const resolvedKind = requestedKind === 'dots' && total > MAX_DOTS ? 'step' : requestedKind;
+    const stepForm = resolvedKind === 'step' || resolvedKind === 'dots';
+    const anchor = (href) => (renderLink ? renderLink(href) : React.createElement("a", { href: href }));
+    // The linked forms require `getHref` in their types; only the step forms may omit it.
+    const hrefOf = (value) => getHref?.(value) ?? '#';
+    const pageLink = (value) => {
+        const href = hrefOf(value);
+        return { href, render: renderLink?.(href) };
+    };
+    // Step pagers print nothing: carousels and figures print as grids (§9.9).
+    const printLine = items != null && !stepForm ? (React.createElement("p", { className: styles.printLine },
+        "Items ",
+        items.first,
+        "\u2013",
+        items.last,
+        " of ",
+        items.total,
+        ".",
+        fullListHref != null ? (React.createElement(React.Fragment, null,
+            ' ',
+            React.createElement(Link, { href: fullListHref, render: renderLink?.(fullListHref) }, "Full list"))) : null)) : null;
+    if (total < 1)
+        return null;
+    const navProps = {
+        'aria-label': 'Pagination',
+        ...rest,
+        ...scope,
+        className: pagination({ kind: resolvedKind, primary, secondary, className }),
+    };
+    if (stepForm) {
+        return (React.createElement("nav", { ...navProps },
+            page > 1 ? (React.createElement(StepButton, { direction: "previous", target: page - 1, label: previousLabel, getHref: getHref, onPageChange: onPageChange, renderLink: renderLink })) : null,
+            resolvedKind === 'dots' ? (React.createElement("span", { className: styles.dots, "aria-hidden": "true" }, Array.from({ length: total }, (_, index) => (React.createElement("span", { key: index, className: styles.dot, "aria-current": index + 1 === page ? 'true' : undefined }))))) : null,
+            React.createElement("p", { className: styles.status, "aria-live": "polite", "aria-atomic": "true" },
+                React.createElement("span", { className: styles.statusCount },
+                    page,
+                    " of ",
+                    total)),
+            page < total ? (React.createElement(StepButton, { direction: "next", target: page + 1, label: nextLabel, getHref: getHref, onPageChange: onPageChange, renderLink: renderLink })) : null));
+    }
+    if (resolvedKind === 'more') {
+        const shown = items?.last ?? page;
+        const of = items?.total ?? total;
+        return (React.createElement("nav", { ...navProps },
+            React.createElement("p", { className: styles.status, "aria-live": "polite", "aria-atomic": "true" },
+                React.createElement("span", { className: styles.statusWord }, "Showing"),
+                ' ',
+                React.createElement("span", { className: styles.statusCount },
+                    shown,
+                    " of ",
+                    of)),
+            page < total ? (React.createElement(Button, { variant: "outline", nativeButton: false, render: anchor(hrefOf(page + 1)), rel: "next", className: styles.more }, moreLabel)) : null,
+            printLine));
+    }
+    return (React.createElement("nav", { ...navProps },
+        page > 1 ? (React.createElement(Button, { variant: "text", icon: "chevron_left", nativeButton: false, render: anchor(hrefOf(page - 1)), rel: "prev", className: cx(styles.step, styles.prev) },
+            React.createElement("span", { className: styles.word }, previousLabel))) : null,
+        resolvedKind === 'numbered' ? (React.createElement("ol", { className: styles.list }, pageSlots(page, total).map((slot) => slot.kind === 'gap' ? (React.createElement("li", { key: `gap-${slot.page}`, className: cx(styles.item, slot.near && styles.near, slot.far && styles.far), "aria-hidden": "true" },
+            React.createElement("span", { className: styles.gap }, "\u2026"))) : (React.createElement("li", { key: slot.page, className: cx(styles.item, slot.near && styles.near, slot.far && styles.far) }, slot.page === page ? (React.createElement("span", { className: styles.current, "aria-current": "page" },
+            React.createElement("span", { className: styles.visuallyHidden }, "Page "),
+            slot.page)) : (React.createElement(Link, { kind: "nav", ...pageLink(slot.page), className: styles.page },
+            React.createElement("span", { className: styles.visuallyHidden }, "Page "),
+            slot.page))))))) : null,
+        React.createElement("p", { className: styles.status, "aria-live": "polite", "aria-atomic": "true" },
+            React.createElement("span", { className: styles.statusWord }, "Page"),
+            ' ',
+            React.createElement("span", { className: styles.statusCount },
+                page,
+                " of ",
+                total)),
+        page < total ? (React.createElement(Button, { variant: "text", icon: "chevron_right", iconPosition: "end", nativeButton: false, render: anchor(hrefOf(page + 1)), rel: "next", className: cx(styles.step, styles.next) },
+            React.createElement("span", { className: styles.word }, nextLabel))) : null,
+        printLine));
+}
+//# sourceMappingURL=Pagination.js.map

package/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACzC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,IAAI,EAAE,MAAM,CAAC,QAAQ;YACrB,IAAI,EAAE,MAAM,CAAC,QAAQ;YACrB,IAAI,EAAE,MAAM,CAAC,QAAQ;SACtB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAA;AAmGF,uFAAuF;AACvF,MAAM,QAAQ,GAAG,CAAC,CAAA;AAElB,yGAAyG;AACzG,SAAS,YAAY,CAAC,IAAY,EAAE,KAAa,EAAE,QAAgB;IACjE,MAAM,KAAK,GAAG,IAAI,GAAG,CAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAA;IACzC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC9E,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;IAC5E,+DAA+D;IAC/D,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IACzC,IAAI,GAAG,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;IACvD,KAAK,IAAI,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,GAAG,EAAE,KAAK,IAAI,CAAC;QAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAClE,OAAO,KAAK,CAAA;AACd,CAAC;AASD,2FAA2F;AAC3F,SAAS,SAAS,CAAC,IAAY,EAAE,KAAa;IAC5C,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACzC,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACxC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IAC1E,MAAM,IAAI,GAAG,CAAC,GAAgB,EAAE,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAA;IACtG,MAAM,KAAK,GAAe,EAAE,CAAA;IAE5B,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QACrF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAA;QACjF,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,GAAG,KAAK,GAAG,CAAC,CAAA;QAC7E,IAAI,OAAO,IAAI,MAAM;YAAE,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAA;IAC7F,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,6GAA6G;AAC7G,SAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,GAQX;IACC,MAAM,IAAI,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAA;IACxE,MAAM,SAAS,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;IACtE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAErE,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;QAC5B,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,QACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2BAAG,IAAI,EAAE,IAAI,GAAI,EACzD,GAAG,EAAE,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC/C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACC,CACV,CAAA;IACH,CAAC;IACD,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,IAClF,KAAK,CACC,CACV,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,GAAG,UAAU,EAC1B,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,YAAY,EACZ,SAAS,GAAG,WAAW,EACvB,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,aAAa,GAAmB,IAAI,IAAI,UAAU,CAAA;IACxD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5E,4EAA4E;IAC5E,MAAM,YAAY,GAChB,aAAa,KAAK,MAAM,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAA;IACvE,MAAM,QAAQ,GAAG,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,MAAM,CAAA;IACnE,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2BAAG,IAAI,EAAE,IAAI,GAAI,CAAC,CAAA;IACpF,sFAAsF;IACtF,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA;IACzD,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;QAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAA;IAC7C,CAAC,CAAA;IAED,0EAA0E;IAC1E,MAAM,SAAS,GACb,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,2BAAG,SAAS,EAAE,MAAM,CAAC,SAAS;;QACrB,KAAK,CAAC,KAAK;;QAAG,KAAK,CAAC,IAAI;;QAAM,KAAK,CAAC,KAAK;;QAC/C,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,CACtB;YACG,GAAG;YACJ,oBAAC,IAAI,IAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,YAAY,CAAC,gBAErD,CACN,CACJ,CAAC,CAAC,CAAC,IAAI,CACN,CACL,CAAC,CAAC,CAAC,IAAI,CAAA;IAEV,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,IAAI,CAAA;IAE1B,MAAM,QAAQ,GAAG;QACf,YAAY,EAAE,YAAY;QAC1B,GAAG,IAAI;QACP,GAAG,KAAK;QACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;KAC7E,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,gCAAS,QAAQ;YACd,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CACV,oBAAC,UAAU,IACT,SAAS,EAAC,UAAU,EACpB,MAAM,EAAE,IAAI,GAAG,CAAC,EAChB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CAAC,CAAC,IAAI;YACP,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,CAGzB,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,IAC7C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,8BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,MAAM,CAAC,GAAG,kBACP,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GACrD,CACH,CAAC,CACG,CACR,CAAC,CAAC,CAAC,IAAI;YACR,2BAAG,SAAS,EAAE,MAAM,CAAC,MAAM,eAAY,QAAQ,iBAAa,MAAM;gBAChE,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;oBAChC,IAAI;;oBAAM,KAAK,CACX,CACL;YACH,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CACd,oBAAC,UAAU,IACT,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,IAAI,GAAG,CAAC,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;IACH,CAAC;IAED,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,KAAK,EAAE,IAAI,IAAI,IAAI,CAAA;QACjC,MAAM,EAAE,GAAG,KAAK,EAAE,KAAK,IAAI,KAAK,CAAA;QAChC,OAAO,CACL,gCAAS,QAAQ;YACf,2BAAG,SAAS,EAAE,MAAM,CAAC,MAAM,eAAY,QAAQ,iBAAa,MAAM;gBAChE,8BAAM,SAAS,EAAE,MAAM,CAAC,UAAU,cAAgB;gBAAC,GAAG;gBACtD,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;oBAChC,KAAK;;oBAAM,EAAE,CACT,CACL;YACH,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CACd,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAChC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,IAAI,IAErB,SAAS,CACH,CACV,CAAC,CAAC,CAAC,IAAI;YACP,SAAS,CACN,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,gCAAS,QAAQ;QACd,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CACV,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,cAAc,EACnB,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAChC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC;YAEvC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,aAAa,CAAQ,CAC7C,CACV,CAAC,CAAC,CAAC,IAAI;QAEP,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,CAC7B,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IACvB,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACnC,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CACpB,4BACE,GAAG,EAAE,OAAO,IAAI,CAAC,IAAI,EAAE,EACvB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,iBAChE,MAAM;YAElB,8BAAM,SAAS,EAAE,MAAM,CAAC,GAAG,aAAU,CAClC,CACN,CAAC,CAAC,CAAC,CACF,4BACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,IAE3E,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CACpB,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,kBAAe,MAAM;YAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAc;YACnD,IAAI,CAAC,IAAI,CACL,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,IAAI,EAAC,KAAK,KAAK,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;YAC9D,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAc;YACnD,IAAI,CAAC,IAAI,CACL,CACR,CACE,CACN,CACF,CACE,CACN,CAAC,CAAC,CAAC,IAAI;QAER,2BAAG,SAAS,EAAE,MAAM,CAAC,MAAM,eAAY,QAAQ,iBAAa,MAAM;YAChE,8BAAM,SAAS,EAAE,MAAM,CAAC,UAAU,WAAa;YAAC,GAAG;YACnD,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBAChC,IAAI;;gBAAM,KAAK,CACX,CACL;QAEH,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CACd,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,eAAe,EACpB,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAChC,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC;YAEvC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,SAAS,CAAQ,CACzC,CACV,CAAC,CAAC,CAAC,IAAI;QAEP,SAAS,CACN,CACP,CAAA;AACH,CAAC"}

package/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.d.ts.map

package/components/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/components/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.js.map

package/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/components/Pagination/pagination.module.css

@@ -0,0 +1,400 @@
+/*
+ * Pagination (§9.9). CVA function `pagination` in Pagination.tsx. Parts:
+ * base (the nav, the `pagination` container), list, item, page (a number:
+ * Link kind="nav"), current, gap ("…"), step / prev / next (Previous and
+ * Next: `text` Buttons; on the step pager, icon-only outline Buttons), word
+ * (their label), status (statusWord + statusCount), dots / dot (the step
+ * pager's position dots), more (the "Show More" Button), visuallyHidden,
+ * printLine. Colors follow the §9.9 Color roles table through role
+ * variables only; the arrows' --role-glyph, the page numbers' hover and the
+ * step buttons' states come from Button and Link. Local custom properties
+ * carry dimensions only:
+ *   --pagination-dot          a dot's diameter (10 px)
+ *   --pagination-dot-current  the current dot's diameter (12 px)
+ *
+ * Tier classes: `near` marks what the 1-sibling row shows, `far` what the
+ * 2-sibling row shows; the media and container rules below pick one.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. Previous and Next are caps
+ * wayfinding (`type-label`) [D165]; the figures take `type-data`'s mono face
+ * and tabular numerals at `type-label` size [D174, D175]. */
+.step {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.page {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.current {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.gap {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusCount {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusWord {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.printLine {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* Previous at the start, Next at the end, the numbers centered; an omitted
+     end keeps its column, so the row stays put. --ds-space-40 above. */
+  .base {
+    container: pagination / inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--ds-space-12);
+    margin-block-start: var(--ds-space-40);
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  .prev {
+    grid-row: 1;
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  .next {
+    grid-row: 1;
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  .list {
+    display: none;
+    grid-row: 1;
+    grid-column: 2;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .item {
+    display: none;
+  }
+
+  /* "Page 5 of 12": the word in `type-caption`, the count mono (§9.9). */
+  .status {
+    display: block;
+    grid-row: 1;
+    grid-column: 2;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Current: unlinked, on the same --ds-size-hit cell as a page link. */
+  .current {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ds-size-hit);
+    min-block-size: var(--ds-size-hit);
+    color: var(--primary12);
+  }
+
+  /* The current bar: --ds-stroke-3, --size-px-4 wide, under the numeral. A
+     border, so it survives forced colors. Physical offsets: centering is
+     direction-agnostic with the translate. */
+  .current::after {
+    content: '';
+    position: absolute;
+    bottom: var(--ds-space-12);
+    left: 50%;
+    display: none;
+    inline-size: var(--size-px-4);
+    border-block-end: var(--ds-stroke-3) solid var(--primary12);
+    translate: -50% 0;
+  }
+
+  /* Gap "…": --role-muted, not focusable, on a --ds-size-hit cell. */
+  .gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ds-size-hit);
+    min-block-size: var(--ds-size-hit);
+    color: var(--role-muted);
+  }
+
+  /*
+   * Previous and Next words: pagination is bare text, so their hover is the
+   * bare-text underline, as a page number's, not the `text` Button's ink
+   * (§9.9) [D181]. The word keeps --primary12 and, as an inline block,
+   * carries its own underline instead of the Button label's.
+   */
+  .word {
+    display: inline-block;
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* The step pager's dots: 10 px --ds-stroke-1-5 --primary12 outlines, --size-px-2 apart. */
+  .dots {
+    --pagination-dot: var(--ds-size-pager-dot);
+    --pagination-dot-current: var(--ds-size-pager-dot-current);
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .dot {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--pagination-dot);
+    block-size: var(--pagination-dot);
+    border: var(--ds-stroke-1-5) solid var(--primary12);
+    border-radius: var(--radius-round);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .word {
+      transition-property: text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .printLine {
+    display: none;
+    grid-column: 1 / -1;
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+@layer variants {
+  /* Figures at `type-label` size (P4) [D174]. */
+  .page,
+  .current,
+  .gap,
+  .statusCount {
+    font-size: var(--ds-font-size-label);
+  }
+
+  /* A number: a --ds-size-hit square hit area, no box, no rest underline [D80]. */
+  .page {
+    justify-content: center;
+    min-inline-size: var(--ds-size-hit);
+  }
+
+  /* Compact: "Page 5 of 12" between the steps at every width. */
+  .compact .status {
+    display: block;
+  }
+
+  /*
+   * Step pager: icon-only ‹ › circles (--ds-size-control-md) around the
+   * mono "3 of 12", centred; an omitted end keeps its column (§9.9).
+   */
+  .kindStep,
+  .kindDots {
+    grid-template-columns: var(--ds-size-control-md) auto var(--ds-size-control-md);
+    justify-content: center;
+  }
+
+  /* With dots: the dots between the circles, the count still shown under them. */
+  .kindDots .dots {
+    grid-row: 1;
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .kindDots .status {
+    grid-row: 2;
+    justify-self: center;
+    margin-block-start: var(--size-px-2);
+  }
+
+  /* Show more: "Showing 20 of 54" over the outline Button, centred. */
+  .kindMore {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: var(--size-px-3);
+  }
+
+  /* Numbered, container-first [D163]. Baseline: the compact status. Viewport
+     fallback: numbered from --md-n-above with 1 sibling, 2 from --lg-n-above. */
+  @media (min-width: 768px) {
+    .numbered .list {
+      display: flex;
+    }
+
+    .numbered .status {
+      display: none;
+    }
+
+    .near {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .item {
+      display: none;
+    }
+
+    .far {
+      display: flex;
+    }
+  }
+
+  /* Container thresholds (§5.10.2): from 768 px numbered with 1 sibling, from
+     1024 px 2 siblings. The row drops siblings; it never wraps. */
+  @container pagination (width < 768px) {
+    .numbered .list {
+      display: none;
+    }
+
+    .numbered .status {
+      display: block;
+    }
+  }
+
+  @container pagination (width >= 768px) {
+    .numbered .list {
+      display: flex;
+    }
+
+    .numbered .status {
+      display: none;
+    }
+
+    .item {
+      display: none;
+    }
+
+    .near {
+      display: flex;
+    }
+  }
+
+  @container pagination (width >= 1024px) {
+    .item {
+      display: none;
+    }
+
+    .far {
+      display: flex;
+    }
+  }
+
+  /* Stack guard: below 360 px the words drop and the chevrons stand alone on
+     their --ds-size-hit targets, still named "Previous" and "Next" [D166].
+     The Button's gap closes with the word. */
+  @media (max-width: 359.98px) {
+    .step {
+      column-gap: 0;
+    }
+
+    .word {
+      position: absolute;
+      inline-size: var(--border-size-1);
+      block-size: var(--border-size-1);
+      margin: calc(var(--border-size-1) * -1);
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+  }
+
+  @container pagination (width < 360px) {
+    .step {
+      column-gap: 0;
+    }
+
+    .word {
+      position: absolute;
+      inline-size: var(--border-size-1);
+      block-size: var(--border-size-1);
+      margin: calc(var(--border-size-1) * -1);
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+  }
+}
+
+@layer states {
+  /* Current: the --ds-stroke-3 bar in --primary12 plus --font-weight-7. */
+  .current[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  .current[aria-current='page']::after {
+    display: block;
+  }
+
+  /* The current dot: solid --primary12 and larger, so shape and size change, not only fill. */
+  .dot[aria-current='true'] {
+    inline-size: var(--pagination-dot-current);
+    block-size: var(--pagination-dot-current);
+    background-color: var(--primary12);
+  }
+
+  /* Previous / Next hover: the bare-text underline on the word [D181]. */
+  .step:hover .word {
+    text-decoration-line: underline;
+  }
+
+  /* Pressed: the underline at --border-size-2 in --primary12. */
+  .step:active .word {
+    text-decoration-line: underline;
+    text-decoration-color: var(--primary12);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The pager is hidden and its links print nothing [D80]; with `items`,
+       one state line prints in its place, the full-list URL per §7.6. */
+    .base {
+      display: block;
+      margin-block-start: 0;
+    }
+
+    .prev,
+    .next,
+    .list,
+    .status,
+    .dots,
+    .more {
+      display: none;
+    }
+
+    .printLine {
+      display: block;
+      margin-block-start: var(--size-px-3);
+    }
+  }
+}