@ds-mo/ui 14.2.1 → 14.4.0

package/dist/mcp-data/registry/pagination.json

@@ -0,0 +1,401 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "title": "Pagination",
+  "description": "Controlled fixed or fitted page-size, compact range, and first/previous/next/last navigation for application-owned data windows.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/pagination",
+    "source": "src/wc/components/Pagination/Pagination.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Controlled fixed or fitted page-size, compact range, and first/previous/next/last navigation for application-owned data windows.",
+      "useWhen": [
+        "A result set is divided into discrete pages and the application owns fetching or slicing each page.",
+        "A table or list needs a compact page-size selector, result range, and boundary-aware navigation."
+      ],
+      "avoidWhen": [
+        "More results append to one continuous list; use the owning component's incremental-loading behavior instead.",
+        "Only previous and next navigation is meaningful and the total result count is unknown."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-select",
+        "component:ds-button-unfilled"
+      ],
+      "accessibility": [
+        "The component renders a named navigation region, gives its compact page-size noun a complete accessible label, and gives every icon-only boundary control an explicit page action name.",
+        "The visible range and page position use compact slash notation with tabular numerals. A polite atomic status update retains complete ‘of’ and ‘Page’ phrasing with the localized item noun.",
+        "Left and Right Arrow request the adjacent page while focus is within pagination navigation controls. The page-size combobox retains its own arrow-key behavior.",
+        "Inactive boundary controls and every control during loading remain non-interactive while retaining their accessible names."
+      ],
+      "states": [
+        "pageIndex, numeric effective pageSize, pageSizeMode, totalItems, and pageSizeOptions are controlled inputs. dsChange reports the complete next pagination state, previous index, size, and mode, and whether the request changed the page, page size, or fitted capacity; it never mutates controlled inputs.",
+        "Page-size changes request the first page. Out-of-range page indexes and invalid numeric inputs normalize only for presentation; the owner remains authoritative.",
+        "Zero results display 0–0 of 0 and Page 1 of 1. A partial final page caps the visible range at totalItems.",
+        "loading preserves the full pagination surface, applies aria-busy to the navigation region, and prevents page or page-size requests.",
+        "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while the range continues to expose the resulting count. Pagination does not measure layouts itself."
+      ],
+      "responsiveBehavior": [
+        "The compact controls remain on one line with noun, range, and page slash notation. When inline space is still insufficient, the pagination surface scrolls horizontally rather than wrapping labels away from their controls."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign pageSizeOptions through the JavaScript property and replace controlled values in response to dsChange."
+        ],
+        "react": [
+          "Replace pageIndex and pageSize from the emitted detail before supplying the requested data window."
+        ],
+        "angular": [
+          "Bind numeric inputs as properties and update the owning signals from the dsChange output."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review states",
+          "path": "src/wc/components/Pagination/Pagination.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "fitPageSize": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "fit-page-size",
+          "required": false,
+          "mutable": false,
+          "description": "Effective whole-item capacity to request when Fit is selected."
+        },
+        "fitPageSizeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "fit-page-size-label",
+          "default": "'Fit to page'",
+          "required": false,
+          "mutable": false,
+          "description": "Full choice-list label for Fit."
+        },
+        "fitPageSizeTriggerLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "fit-page-size-trigger-label",
+          "default": "'Fit'",
+          "required": false,
+          "mutable": false,
+          "description": "Compact closed-trigger label while Fit is selected."
+        },
+        "fitToPage": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "fit-to-page",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Include the Fit to page choice."
+        },
+        "itemLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "item-label",
+          "default": "'items'",
+          "required": false,
+          "mutable": false,
+          "description": "Localized plural noun used by assistive range announcements."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Pagination'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the pagination navigation region."
+        },
+        "loading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Prevent interaction while the owner replaces the current data page."
+        },
+        "pageIndex": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "page-index",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled zero-based page index."
+        },
+        "pageSize": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "page-size",
+          "default": "25",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled number of top-level items on a full page."
+        },
+        "pageSizeAriaLabel": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "page-size-aria-label",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible page-size control label. Defaults to “{pageSizeLabel} per page”."
+        },
+        "pageSizeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "page-size-label",
+          "default": "'Items'",
+          "required": false,
+          "mutable": false,
+          "description": "Visible page-size control label."
+        },
+        "pageSizeMode": {
+          "type": "PaginationPageSizeMode",
+          "resolvedType": "\"fit\" | \"fixed\"",
+          "attribute": "page-size-mode",
+          "default": "'fixed'",
+          "required": false,
+          "mutable": false,
+          "description": "Whether pageSize is a fixed choice or a measured Fit snapshot."
+        },
+        "pageSizeOptions": {
+          "type": "number[]",
+          "resolvedType": "number[]",
+          "default": "[25, 50, 100, 200]",
+          "required": false,
+          "mutable": false,
+          "description": "Available page sizes. Assign arrays through JavaScript."
+        },
+        "totalItems": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "total-items",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled total number of top-level items across every page."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "PaginationChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emits the complete next controlled state after a page or page-size request."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "fitPageSize": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "fit-page-size",
+        "required": false,
+        "mutable": false,
+        "description": "Effective whole-item capacity to request when Fit is selected."
+      },
+      "fitPageSizeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "fit-page-size-label",
+        "default": "'Fit to page'",
+        "required": false,
+        "mutable": false,
+        "description": "Full choice-list label for Fit."
+      },
+      "fitPageSizeTriggerLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "fit-page-size-trigger-label",
+        "default": "'Fit'",
+        "required": false,
+        "mutable": false,
+        "description": "Compact closed-trigger label while Fit is selected."
+      },
+      "fitToPage": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "fit-to-page",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Include the Fit to page choice."
+      },
+      "itemLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "item-label",
+        "default": "'items'",
+        "required": false,
+        "mutable": false,
+        "description": "Localized plural noun used by assistive range announcements."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Pagination'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the pagination navigation region."
+      },
+      "loading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Prevent interaction while the owner replaces the current data page."
+      },
+      "pageIndex": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "page-index",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled zero-based page index."
+      },
+      "pageSize": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "page-size",
+        "default": "25",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled number of top-level items on a full page."
+      },
+      "pageSizeAriaLabel": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "page-size-aria-label",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible page-size control label. Defaults to “{pageSizeLabel} per page”."
+      },
+      "pageSizeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "page-size-label",
+        "default": "'Items'",
+        "required": false,
+        "mutable": false,
+        "description": "Visible page-size control label."
+      },
+      "pageSizeMode": {
+        "type": "PaginationPageSizeMode",
+        "resolvedType": "\"fit\" | \"fixed\"",
+        "attribute": "page-size-mode",
+        "default": "'fixed'",
+        "required": false,
+        "mutable": false,
+        "description": "Whether pageSize is a fixed choice or a measured Fit snapshot."
+      },
+      "pageSizeOptions": {
+        "type": "number[]",
+        "resolvedType": "number[]",
+        "default": "[25, 50, 100, 200]",
+        "required": false,
+        "mutable": false,
+        "description": "Available page sizes. Assign arrays through JavaScript."
+      },
+      "totalItems": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "total-items",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled total number of top-level items across every page."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "PaginationChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emits the complete next controlled state after a page or page-size request."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-pagination",
+      "react": "DsPagination",
+      "angular": "DsPagination"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-pagination.js';",
+        "example": "<ds-pagination></ds-pagination>"
+      },
+      "react": {
+        "import": "import { DsPagination } from '@ds-mo/ui/react';",
+        "example": "<DsPagination />"
+      },
+      "angular": {
+        "import": "import { DsPagination } from '@ds-mo/ui/angular/ds-pagination';",
+        "example": "<ds-pagination></ds-pagination>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: pageSizeOptions.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.2.2",
+          "@ds-mo/icons ^7.0.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "select",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Pagination/Pagination.css",
+      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n:host::-webkit-scrollbar {\n  display: none;\n}\n\n.pagination,\n.pagination__page-size,\n.pagination__navigation {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.pagination {\n  width: max-content;\n  min-width: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.pagination__page-size,\n.pagination__navigation {\n  flex: 0 0 auto;\n}\n\n.pagination__page-size {\n  gap: var(--dimension-space-100);\n}\n\n.pagination__navigation {\n  gap: var(--dimension-space-050);\n}\n\n.pagination__range,\n.pagination__page,\n.pagination__label {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.pagination__page {\n  justify-content: center;\n  min-inline-size: calc(var(--dimension-size-800) + var(--dimension-space-200));\n  padding-inline: var(--dimension-space-050);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Pagination/Pagination.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolvePaginationState } from './pagination-model';\nimport type {\n  PaginationChangeDetail,\n  PaginationPageSizeMode,\n} from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  /** Controlled zero-based page index. */\n  @Prop() pageIndex: number = 0;\n  /** Controlled number of top-level items on a full page. */\n  @Prop() pageSize: number = 25;\n  /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n  @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n  /** Controlled total number of top-level items across every page. */\n  @Prop() totalItems: number = 0;\n  /** Available page sizes. Assign arrays through JavaScript. */\n  @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n  /** Include the Fit to page choice. */\n  @Prop() fitToPage: boolean = false;\n  /** Effective whole-item capacity to request when Fit is selected. */\n  @Prop() fitPageSize: number | undefined;\n  /** Full choice-list label for Fit. */\n  @Prop() fitPageSizeLabel: string = 'Fit to page';\n  /** Compact closed-trigger label while Fit is selected. */\n  @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items';\n  /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n  @Prop() pageSizeAriaLabel: string | undefined;\n  /** Accessible name for the pagination navigation region. */\n  @Prop() label: string = 'Pagination';\n  /** Prevent interaction while the owner replaces the current data page. */\n  @Prop() loading: boolean = false;\n\n  /** Emits the complete next controlled state after a page or page-size request. */\n  @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n  private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n\n  private requestPage(pageIndex: number): void {\n    const state = this.resolvedState;\n    if (this.loading || pageIndex === state.pageIndex || pageIndex < 0 || pageIndex >= state.totalPages) {\n      return;\n    }\n    this.dsChange.emit({\n      pageIndex,\n      pageSize: state.pageSize,\n      pageSizeMode: state.pageSizeMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (this.loading || typeof value !== 'string') return;\n    const state = this.resolvedState;\n    const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n    const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n    if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      pageSizeMode: nextMode,\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      fitToPage: this.fitToPage,\n      fitPageSize: this.resolvedFitPageSize,\n      fitPageSizeLabel: this.fitPageSizeLabel,\n      fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      previousPageSizeMode: state.pageSizeMode,\n      reason: 'page-size',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n      return;\n    }\n    const fromChoiceControl = event.composedPath().some(node =>\n      node instanceof HTMLElement &&\n      (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)),\n    );\n    if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n    const state = this.resolvedState;\n    const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n    if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n    event.preventDefault();\n    this.requestPage(pageIndex);\n  }\n\n  private get resolvedFitPageSize(): number | undefined {\n    return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n      ? Math.trunc(Number(this.fitPageSize))\n      : undefined;\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\n      pageSizeMode: this.pageSizeMode,\n      totalItems: this.totalItems,\n      pageSizeOptions: this.pageSizeOptions,\n    });\n  }\n\n  render() {\n    const state = this.resolvedState;\n    const atStart = state.pageIndex === 0;\n    const atEnd = state.pageIndex === state.totalPages - 1;\n    const range = `${state.firstItem}–${state.lastItem} / ${state.totalItems}`;\n    const page = `${state.pageIndex + 1} / ${state.totalPages}`;\n    const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n    const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n    const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n    const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n      state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n    if (this.fitToPage) {\n      options.push({\n        label: this.fitPageSizeLabel,\n        value: 'fit',\n        isInactive: this.resolvedFitPageSize === undefined,\n      });\n    }\n\n    return (\n      <Host>\n        <nav\n          class=\"pagination\"\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : undefined}\n          onKeyDown={event => this.handleKeyDown(event)}\n        >\n          <div class=\"pagination__page-size\">\n            <ds-text\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              aria-hidden=\"true\"\n            >\n              {this.pageSizeLabel}:\n            </ds-text>\n            <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n              {pageSizeAriaLabel}\n            </span>\n            <ds-select\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={options}\n              value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n              triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n              indicator=\"up-down\"\n              allowClear={false}\n              activeFill={false}\n              isInactive={this.loading}\n              onDsChange={event => {\n                event.stopPropagation();\n                this.requestPageSize(event.detail);\n              }}\n            />\n          </div>\n          <ds-text\n            class=\"pagination__range\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"secondary\"\n            fontFeature=\"tabular-nums\"\n          >\n            {range}\n          </ds-text>\n          <div class=\"pagination__navigation\">\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeftDouble\"\n              ariaLabel=\"First page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(0)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronLeft\"\n              ariaLabel=\"Previous page\"\n              hasBorder={false}\n              isInactive={this.loading || atStart}\n              onDsClick={() => this.requestPage(state.pageIndex - 1)}\n            />\n            <ds-text\n              class=\"pagination__page\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n              fontFeature=\"tabular-nums\"\n            >\n              {page}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRight\"\n              ariaLabel=\"Next page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.pageIndex + 1)}\n            />\n            <ds-button-unfilled\n              variant=\"icon\"\n              size=\"md\"\n              icon=\"ChevronRightDouble\"\n              ariaLabel=\"Last page\"\n              hasBorder={false}\n              isInactive={this.loading || atEnd}\n              onDsClick={() => this.requestPage(state.totalPages - 1)}\n            />\n          </div>\n          <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {announcedRange} {this.itemLabel}. {announcedPage}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Pagination/pagination-model.ts",
+      "content": "import type { PaginationPageSizeMode, PaginationState } from './pagination-types';\n\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;\n\nexport interface ResolvedPaginationState {\n  pageIndex: number;\n  pageSize: number;\n  pageSizeMode: PaginationPageSizeMode;\n  totalItems: number;\n  totalPages: number;\n  firstItem: number;\n  lastItem: number;\n  pageSizeOptions: number[];\n}\n\nfunction nonNegativeInteger(value: number): number {\n  return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;\n}\n\nfunction positiveInteger(value: number, fallback: number): number {\n  return Number.isFinite(value) && value > 0 ? Math.trunc(value) : fallback;\n}\n\nexport function resolvePaginationState(\n  state: Pick<\n    PaginationState,\n    'pageIndex' | 'pageSize' | 'pageSizeMode' | 'totalItems' | 'pageSizeOptions'\n  >,\n): ResolvedPaginationState {\n  const pageSize = positiveInteger(state.pageSize, DEFAULT_PAGE_SIZE_OPTIONS[0]);\n  const pageSizeMode = state.pageSizeMode === 'fit' ? 'fit' : 'fixed';\n  const totalItems = nonNegativeInteger(state.totalItems);\n  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));\n  const pageIndex = Math.min(nonNegativeInteger(state.pageIndex), totalPages - 1);\n  const options = (state.pageSizeOptions?.length\n    ? state.pageSizeOptions\n    : DEFAULT_PAGE_SIZE_OPTIONS\n  )\n    .map(value => positiveInteger(value, 0))\n    .filter(value => value > 0);\n  const pageSizeOptions = [\n    ...new Set(pageSizeMode === 'fixed' ? [...options, pageSize] : options),\n  ].sort((left, right) => left - right);\n  const firstItem = totalItems === 0 ? 0 : pageIndex * pageSize + 1;\n  const lastItem = totalItems === 0 ? 0 : Math.min(totalItems, firstItem + pageSize - 1);\n\n  return {\n    pageIndex,\n    pageSize,\n    pageSizeMode,\n    totalItems,\n    totalPages,\n    firstItem,\n    lastItem,\n    pageSizeOptions,\n  };\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Pagination/pagination-types.ts",
+      "content": "export type PaginationChangeReason = 'page' | 'page-size' | 'fit';\nexport type PaginationPageSizeMode = 'fixed' | 'fit';\n\n/** Controlled pagination state shared by Pagination and pagination-aware consumers. */\nexport interface PaginationState {\n  /** Zero-based page index. */\n  pageIndex: number;\n  /** Number of top-level items on a full page. */\n  pageSize: number;\n  /** Whether pageSize is a chosen fixed value or a measured Fit snapshot. */\n  pageSizeMode?: PaginationPageSizeMode;\n  /** Total number of top-level items across every page. */\n  totalItems: number;\n  /** Available page sizes. Defaults to 25, 50, 100, and 200. */\n  pageSizeOptions?: number[];\n  /** Include a Fit to page option. The owner supplies the effective fitted size. */\n  fitToPage?: boolean;\n  /** Effective page size proposed when Fit to page is selected. */\n  fitPageSize?: number;\n  /** Full option label for Fit in the open choice list. */\n  fitPageSizeLabel?: string;\n  /** Compact trigger label while Fit is selected. */\n  fitPageSizeTriggerLabel?: string;\n  /** Localized plural noun used by assistive range announcements. */\n  itemLabel?: string;\n  /** Visible label for the page-size selector. */\n  pageSizeLabel?: string;\n  /** Accessible name for the pagination navigation region. */\n  ariaLabel?: string;\n}\n\n/** Complete next controlled state emitted for a page or page-size request. */\nexport interface PaginationChangeDetail extends PaginationState {\n  previousPageIndex: number;\n  previousPageSize: number;\n  previousPageSizeMode: PaginationPageSizeMode;\n  reason: PaginationChangeReason;\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}