# Pagination Numbered pager with ellipsis truncation (D63). Standalone rather than a Table family member: `table-pagination` composes it as a Toolbar sibling of the page-size Select. ## Props | Prop | Type | Default | Required | Description | |---|---|---|---|---| | `page` | `number` | — | yes | Current page, 1-based. A value outside `[1, pageCount]` (including non-finite values like `NaN`) is clamped for rendering and logs a `console.warn` in development. `pageCount < 1` renders no page buttons. | | `pageCount` | `number` | — | yes | Total number of pages. | | `onPageChange` | `(page: number) => void` | — | yes | Called with the requested page. Required — unlike Table's `onSortChange`/ `onSelectionChange`, which are optional because `sortable`/`selectable` gate whether they're meaningful, `Pagination` has no such gating boolean: the prop is unconditionally meaningful, so a `Pagination` without it is a dead control (final review finding, D62). | | `siblingCount` | `number` | 1 | no | Pages shown either side of the current one before truncating. | | `aria-label` | `string` | Pagination | no | Accessible name for the nav landmark. | | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. | ## Theming This component has no `--psi-pagination-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings. ## Rules - One accent per visual group; everything else neutral or ghost. - danger only for actions with real consequences. - Sizes are px numbers (24|32|40|48), never S/M/L. - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}. - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming. - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono). - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows. - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.