navigation — wyrd.component.pagination

Pagination

Paged navigation control with deterministic page-window rendering.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/pagination.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Pagination  tag: wyrd-pagination  package: wyrd.component.pagination  title: Pagination  summary: Paged navigation control with deterministic page-window rendering.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: navigation  composition: collection  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: page      type:        kind: integer      required: false      controlled: true      serializable: true      summary: Controlled current 1-based page.    - name: default-page      type:        kind: integer      required: false      default: 1      serializable: true      summary: Initial uncontrolled 1-based page.    - name: page-count      type:        kind: integer        minimum: 1      required: true      serializable: true      summary: Total number of pages.  slots: []  events:    - name: page-change      payload:        page:          kind: integer      bubbles: true      composed: true      cancelable: true      summary: Emitted when the user requests a different page.  states:    - name: default      source: platform      summary: Page navigation with previous, windowed page items, and next.    - name: current      source: property      summary: Current page derived from page or default-page.    - name: boundary      source: property      summary: Previous or next is disabled at the first or last page.  parts:    - name: root      summary: Navigation landmark root.    - name: list      summary: Page item list.    - name: item      summary: Repeated page item.    - name: button      summary: Previous, page, or next button.    - name: ellipsis      summary: Hidden decorative gap marker.  tokens:    item:      background: color.surface      foreground: color.primary      background-hover: color.secondary      current-background: color.primary      current-foreground: color.on-primary      disabled-foreground: color.on-disabled    radius: rounded.md    padding-x: spacing.sm    padding-y: spacing.xs    gap: spacing.xs    text: typography.label-mdmessages:  - key: pagination.navigation    description: Accessible name of the pagination navigation landmark.  - key: pagination.previous    description: Accessible label for the previous page button.  - key: pagination.next    description: Accessible label for the next page button.obligations:  accessibility:    role: navigation    name: Component-owned localized navigation message labels the landmark.    keyboard:      - Tab moves through enabled pagination buttons in document order.      - Enter or Space activates a focused pagination button.    semantics:      - Current page buttons expose aria-current=page on web.      - Previous is disabled on the first page; Next is disabled on the last page.      - Ellipsis markers are hidden from the accessibility tree.      - Previous and Next are named by component-owned localized messages.  behavior:    model: input    interactions:      - page ?? default-page determines the effective page in Flutter and other controlled-capable targets.      - If page-count is 7 or fewer, all pages render.      - If page-count is greater than 7, render first, last, current-1, current, current+1, and ellipsis markers between gaps.    hostEffects:      - Dispatch page-change when the user requests a different page.  conditions:    - rtl    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - page      - default-page      - page-count    serializableSlots: []    eventBindings:      - page-change    notes: Pagination serializes controlled and default page inputs plus page count; hosts own route/data changes.examples:  - name: single    state: boundary    properties:      default-page: 1      page-count: 1    slots: {}  - name: seven    state: default    properties:      default-page: 4      page-count: 7    slots: {}  - name: windowed    state: current    properties:      default-page: 10      page-count: 20    slots: {}

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

single state: boundary

Usage

import { WyrdPagination } from "@wyrd-company/react";

<WyrdPagination defaultPage={1} pageCount={1} />

// events: onPageChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdPagination(
  defaultPage: 1,
  pageCount: 1,
)

// events: onPageChange

seven state: default

Usage

import { WyrdPagination } from "@wyrd-company/react";

<WyrdPagination defaultPage={4} pageCount={7} />

// events: onPageChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdPagination(
  defaultPage: 4,
  pageCount: 7,
)

// events: onPageChange

windowed state: current

Usage

import { WyrdPagination } from "@wyrd-company/react";

<WyrdPagination defaultPage={10} pageCount={20} />

// events: onPageChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdPagination(
  defaultPage: 10,
  pageCount: 20,
)

// events: onPageChange

Properties

Name	Type	Default	Summary
`page`	`integer`	`undefined`	Controlled current 1-based page.
`default-page`	`integer`	`1`	Initial uncontrolled 1-based page.
`page-count`	`integer`	`undefined`	Total number of pages.

Slots & events

Event	Payload	Summary
`page-change`	`page`	Emitted when the user requests a different page.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`item.background`	`color.surface`
`item.foreground`	`color.primary`
`item.background-hover`	`color.secondary`
`item.current-background`	`color.primary`
`item.current-foreground`	`color.on-primary`
`item.disabled-foreground`	`color.on-disabled`
`radius`	`rounded.md`
`padding-x`	`spacing.sm`
`padding-y`	`spacing.xs`
`gap`	`spacing.xs`
`text`	`typography.label-md`

States

State	Source	Summary
`default`	platform	Page navigation with previous, windowed page items, and next.
`current`	property	Current page derived from page or default-page.
`boundary`	property	Previous or next is disabled at the first or last page.

SDUI

Status: serializable. Pagination serializes controlled and default page inputs plus page count; hosts own route/data changes.

Serializable	Members
Properties	`page, default-page, page-count`
Slots	`—`
Events	`page-change`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI