@ds-mo/ui 14.3.0 → 14.4.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-19T01:48:34",
+  "timestamp": "2026-08-19T03:44:17",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -15771,6 +15771,119 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "fitPageSize",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number | undefined",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-page-size",
+          "reflectToAttr": false,
+          "docs": "Effective whole-item capacity to request when Fit is selected.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "fitPageSizeLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-page-size-label",
+          "reflectToAttr": false,
+          "docs": "Full choice-list label for Fit.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Fit to page'"
+            }
+          ],
+          "default": "'Fit to page'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "fitPageSizeTriggerLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-page-size-trigger-label",
+          "reflectToAttr": false,
+          "docs": "Compact closed-trigger label while Fit is selected.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Fit'"
+            }
+          ],
+          "default": "'Fit'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "fitToPage",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-to-page",
+          "reflectToAttr": false,
+          "docs": "Include the Fit to page choice.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "itemLabel",
           "type": "string",
@@ -15916,6 +16029,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "pageSizeAriaLabel",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "page-size-aria-label",
+          "reflectToAttr": false,
+          "docs": "Accessible page-size control label. Defaults to “{pageSizeLabel} per page”.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "pageSizeLabel",
           "type": "string",
@@ -15931,10 +16070,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "'Items per page'"
+              "text": "'Items'"
             }
           ],
-          "default": "'Items per page'",
+          "default": "'Items'",
           "values": [
             {
               "type": "string"
@@ -15945,6 +16084,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "pageSizeMode",
+          "type": "\"fit\" | \"fixed\"",
+          "complexType": {
+            "original": "PaginationPageSizeMode",
+            "resolved": "\"fit\" | \"fixed\"",
+            "references": {
+              "PaginationPageSizeMode": {
+                "location": "import",
+                "path": "./pagination-types",
+                "id": "src/wc/components/Pagination/pagination-types.ts::PaginationPageSizeMode",
+                "referenceLocation": "PaginationPageSizeMode"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "page-size-mode",
+          "reflectToAttr": false,
+          "docs": "Whether pageSize is a fixed choice or a measured Fit snapshot.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'fixed'"
+            }
+          ],
+          "default": "'fixed'",
+          "values": [
+            {
+              "value": "fit",
+              "type": "string"
+            },
+            {
+              "value": "fixed",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "pageSizeOptions",
           "type": "number[]",
@@ -19572,6 +19752,46 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "indicator",
+          "type": "\"down\" | \"up-down\"",
+          "complexType": {
+            "original": "SelectIndicator",
+            "resolved": "\"down\" | \"up-down\"",
+            "references": {
+              "SelectIndicator": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/Select/Select.tsx",
+                "id": "src/wc/components/Select/Select.tsx::SelectIndicator"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "indicator",
+          "reflectToAttr": false,
+          "docs": "Trailing choice indicator. Use up-down for compact value steppers such as page size.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'down'"
+            }
+          ],
+          "default": "'down'",
+          "values": [
+            {
+              "value": "down",
+              "type": "string"
+            },
+            {
+              "value": "up-down",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "inputId",
           "type": "string | undefined",
@@ -25571,10 +25791,10 @@
         },
         {
           "name": "pagination",
-          "type": "PaginationState | null",
+          "type": "TablePaginationState | null",
           "complexType": {
             "original": "TablePaginationState | null",
-            "resolved": "PaginationState | null",
+            "resolved": "TablePaginationState | null",
             "references": {
               "TablePaginationState": {
                 "location": "import",
@@ -25596,7 +25816,7 @@
           "default": "null",
           "values": [
             {
-              "type": "PaginationState"
+              "type": "TablePaginationState"
             },
             {
               "type": "null"
@@ -25835,14 +26055,14 @@
           "mutable": false,
           "attr": "skeleton-rows",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport.",
           "docsTags": [
             {
               "name": "default",
-              "text": "5"
+              "text": "10"
             }
           ],
-          "default": "5",
+          "default": "10",
           "values": [
             {
               "type": "number"
@@ -29030,6 +29250,11 @@
       "docstring": "",
       "path": "src/wc/components/Select/Select.tsx"
     },
+    "src/wc/components/Select/Select.tsx::SelectIndicator": {
+      "declaration": "export type SelectIndicator = 'down' | 'up-down';",
+      "docstring": "",
+      "path": "src/wc/components/Select/Select.tsx"
+    },
     "src/wc/components/Select/Select.tsx::SelectBackground": {
       "declaration": "export type ChoiceBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';",
       "docstring": "",
@@ -29360,8 +29585,13 @@
       "docstring": "",
       "path": "src/wc/components/PanelNav/panel-nav-types.ts"
     },
+    "src/wc/components/Pagination/pagination-types.ts::PaginationPageSizeMode": {
+      "declaration": "export type PaginationPageSizeMode = 'fixed' | 'fit';",
+      "docstring": "",
+      "path": "src/wc/components/Pagination/pagination-types.ts"
+    },
     "src/wc/components/Pagination/pagination-types.ts::PaginationChangeDetail": {
-      "declaration": "export interface PaginationChangeDetail extends PaginationState {\n  previousPageIndex: number;\n  previousPageSize: number;\n  reason: PaginationChangeReason;\n}",
+      "declaration": "export interface PaginationChangeDetail extends PaginationState {\n  previousPageIndex: number;\n  previousPageSize: number;\n  previousPageSizeMode: PaginationPageSizeMode;\n  reason: PaginationChangeReason;\n}",
       "docstring": "Complete next controlled state emitted for a page or page-size request.",
       "path": "src/wc/components/Pagination/pagination-types.ts"
     },
@@ -29456,7 +29686,7 @@
       "path": "src/wc/components/SwatchPicker/swatch-picker-types.ts"
     },
     "src/wc/components/Table/table-types.ts::TableColumn": {
-      "declaration": "export interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n}",
+      "declaration": "export interface TableColumn {\n  /** Stable column identity. */\n  id: string;\n  /** Visible column label. May be empty when headerLabel supplies a non-visual name. */\n  header: string;\n  /** Screen-reader-only column name for an intentionally blank visual header. */\n  headerLabel?: string;\n  /** Optional labels for columns that present and sort multiple related data points. */\n  headerSegments?: TableHeaderSegment[];\n  align?: TableCellAlign;\n  sortable?: boolean;\n  /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */\n  size?: TableColumnWidth | number;\n  /** Minimum accepted preferred width in CSS pixels. */\n  minSize?: number;\n  /** Maximum accepted preferred width in CSS pixels. */\n  maxSize?: number;\n  /** Wrap cell text instead of truncating it to one line. */\n  wrap?: boolean;\n  /** Pin one application column to either inline edge during horizontal scrolling. */\n  sticky?: TableColumnSticky;\n  /**\n   * Declare a trailing application-action lane. Action columns keep fixed\n   * geometry and may host grouped table-level controls in their header.\n   */\n  kind?: 'data' | 'action';\n  /** Representative loading geometry for this column. Defaults to one text line. */\n  skeleton?: TableCellSkeleton;\n}",
       "docstring": "",
       "path": "src/wc/components/Table/table-types.ts"
     },
@@ -29496,8 +29726,8 @@
       "path": "src/wc/components/Table/table-types.ts"
     },
     "src/wc/components/Table/table-types.ts::TablePaginationState": {
-      "declaration": "export interface PaginationState {\n  /** Zero-based page index. */\n  pageIndex: number;\n  /** Number of top-level items on a full page. */\n  pageSize: number;\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  /** 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}",
-      "docstring": "Controlled pagination state shared by Pagination and pagination-aware consumers.",
+      "declaration": "export interface TablePaginationState extends PaginationState {\n  /** Change to request one fresh fitted-capacity snapshot for the current query shape. */\n  fitIdentity?: string | number;\n}",
+      "docstring": "Controlled top-level pagination state. Rows or groups contain only the active page.",
       "path": "src/wc/components/Table/table-types.ts"
     },
     "src/wc/components/Table/table-types.ts::TableLoadMoreMode": {

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "pagination",
   "title": "Pagination",
-  "description": "Controlled page-size, range, and first/previous/next/last navigation for application-owned data windows.",
+  "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",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Controlled page-size, range, and first/previous/next/last navigation for application-owned data windows.",
+      "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."
@@ -28,18 +28,20 @@
         "component:ds-button-unfilled"
       ],
       "accessibility": [
-        "The component renders a named navigation region, labels its page-size combobox, and gives every icon-only boundary control an explicit page action name.",
-        "The visible range and page position use tabular numerals and are repeated in a polite atomic status update with the localized item noun.",
+        "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, pageSize, totalItems, and pageSizeOptions are controlled inputs. dsChange reports the complete next pagination state, previous index and size, and whether the request changed the page or page size; it never mutates controlled inputs.",
+        "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."
+        "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. When inline space is insufficient, the pagination surface scrolls horizontally rather than wrapping labels away from their controls."
+        "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": [
@@ -61,6 +63,41 @@
     },
     "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",
@@ -106,15 +143,32 @@
           "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 per page'",
+          "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[]",
@@ -147,6 +201,41 @@
       "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",
@@ -192,15 +281,32 @@
         "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 per page'",
+        "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[]",
@@ -273,22 +379,22 @@
   "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  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",
+      "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 { PaginationChangeDetail } 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  /** 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  /** Localized plural noun used by assistive range announcements. */\n  @Prop() itemLabel: string = 'items';\n  /** Visible page-size control label. */\n  @Prop() pageSizeLabel: string = 'Items per page';\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      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      reason: 'page',\n    });\n  }\n\n  private requestPageSize(value: string | string[]): void {\n    if (this.loading || typeof value !== 'string') return;\n    const pageSize = Number(value);\n    const state = this.resolvedState;\n    if (!Number.isFinite(pageSize) || pageSize <= 0 || pageSize === state.pageSize) return;\n    this.dsChange.emit({\n      pageIndex: 0,\n      pageSize: Math.trunc(pageSize),\n      totalItems: state.totalItems,\n      pageSizeOptions: state.pageSizeOptions,\n      itemLabel: this.itemLabel,\n      pageSizeLabel: this.pageSizeLabel,\n      ariaLabel: this.label,\n      previousPageIndex: state.pageIndex,\n      previousPageSize: state.pageSize,\n      reason: 'page-size',\n    });\n  }\n\n  private get resolvedState() {\n    return resolvePaginationState({\n      pageIndex: this.pageIndex,\n      pageSize: this.pageSize,\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} of ${state.totalItems}`;\n    const page = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n\n    return (\n      <Host>\n        <nav class=\"pagination\" aria-label={this.label} aria-busy={this.loading ? 'true' : undefined}>\n          <div class=\"pagination__page-size\">\n            <ds-text\n              id={`${this.pageSizeControlId}-label`}\n              class=\"pagination__label\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {this.pageSizeLabel}\n            </ds-text>\n            <ds-select\n              size=\"md\"\n              inputId={this.pageSizeControlId}\n              ariaLabelledby={`${this.pageSizeControlId}-label`}\n              options={state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }))}\n              value={String(state.pageSize)}\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            {range} {this.itemLabel}. {page}.\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "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 { 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  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<PaginationState, 'pageIndex' | 'pageSize' | 'totalItems' | 'pageSizeOptions'>,\n): ResolvedPaginationState {\n  const pageSize = positiveInteger(state.pageSize, DEFAULT_PAGE_SIZE_OPTIONS[0]);\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 = [...new Set([...options, pageSize])].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    totalItems,\n    totalPages,\n    firstItem,\n    lastItem,\n    pageSizeOptions,\n  };\n}\n",
+      "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';\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  /** 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  /** 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  reason: PaginationChangeReason;\n}\n",
+      "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"
     }
   ]