@ds-mo/ui 14.2.0 → 14.3.0

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

@@ -0,0 +1,295 @@
+{
+  "$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.",
+  "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 page-size, 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, 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.",
+        "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.",
+        "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."
+      ],
+      "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."
+      ],
+      "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": {
+        "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."
+        },
+        "pageSizeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "page-size-label",
+          "default": "'Items per page'",
+          "required": false,
+          "mutable": false,
+          "description": "Visible page-size control label."
+        },
+        "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": {
+      "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."
+      },
+      "pageSizeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "page-size-label",
+        "default": "'Items per page'",
+        "required": false,
+        "mutable": false,
+        "description": "Visible page-size control label."
+      },
+      "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  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",
+      "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",
+      "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",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -5931,6 +5931,123 @@
         "tooltip"
       ]
     },
+    {
+      "name": "pagination",
+      "title": "Pagination",
+      "description": "Controlled page-size, 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 page-size, 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, 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.",
+            "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.",
+            "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."
+          ],
+          "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."
+          ],
+          "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"
+            }
+          ]
+        },
+        "props": {
+          "itemLabel": {
+            "type": "string",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "loading": {
+            "type": "boolean",
+            "required": false
+          },
+          "pageIndex": {
+            "type": "number",
+            "required": false
+          },
+          "pageSize": {
+            "type": "number",
+            "required": false
+          },
+          "pageSizeLabel": {
+            "type": "string",
+            "required": false
+          },
+          "pageSizeOptions": {
+            "type": "number[]",
+            "required": false
+          },
+          "totalItems": {
+            "type": "number",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "PaginationChangeDetail"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-pagination",
+          "react": "DsPagination",
+          "angular": "DsPagination"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "select",
+        "text"
+      ]
+    },
     {
       "name": "panel-nav",
       "title": "PanelNav",
@@ -8669,7 +8786,7 @@
     {
       "name": "table",
       "title": "Table",
-      "description": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+      "description": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, and top-level pagination.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -8680,22 +8797,23 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+          "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, and top-level pagination.",
           "useWhen": [
             "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
-            "An application needs controlled sorting, loaded-row selection, or lazy loading while retaining ownership of the data query and transformations.",
+            "An application needs controlled sorting, loaded-row selection, infinite loading, or pagination while retaining ownership of the data query and transformations.",
             "A product table needs a token-backed recipe whose individual header, group, row, cell, selection, state, and load-more layers remain easy to restyle."
           ],
           "avoidWhen": [
             "Content is primarily editorial prose; use semantic product-owned markup with the prose recipe instead.",
             "A small label/value set reads more clearly as a list, description list, or card.",
-            "The interface requires tree-grid behavior, nested grouping, inline cell editing, row reordering, multiple pinned columns per edge, or virtualization; those are outside this first contract.",
-            "The application expects the component to fetch, paginate, sort, group, or mutate records internally."
+            "The interface requires tree-grid behavior, nested grouping, inline cell editing, row reordering, multiple pinned columns per edge, or virtualization; those remain outside the contract.",
+            "The application expects the component to fetch, slice pages, sort, group, or mutate records internally."
           ],
           "commonlyComposedWith": [
             "component:ds-empty-state",
             "component:ds-skeleton",
             "component:ds-loader",
+            "component:ds-pagination",
             "component:ds-bar-action",
             "component:ds-button-unfilled",
             "component:ds-tag",
@@ -8708,15 +8826,15 @@
             "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection or action controls.",
             "Scrollable table regions become keyboard focusable and named only when overflow exists.",
             "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
-            "An optional result summary footer appears below the table frame when both displayedCount and totalCount are finite, formatting Displaying {displayed} of {total} in text-body-medium secondary. The footer slot can replace that copy, while footer-leading and footer-trailing compose actions into the same compact-bar anatomy. Authored footer content can also opt into the 48px footer without controlled counts."
+            "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Pagination mode instead renders a named Pagination control, whose range changes are announced independently. The footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy."
           ],
           "states": [
-            "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, displayedCount, totalCount, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one full-width composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns all internal layout, controls, labels, filtering behavior, and action handling. The footer retains its compact-bar composition: application-owned leading status sits left while the controlled result summary aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
-            "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a rounded sm Tag containing only the numeric count. The Tag uses the group's faint intent surface (neutral when intent is absent) and a small-elevation, button-hugging wrapper; a localized countLabel remains available to assistive technology. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background; the final collapsed section does not duplicate the terminal table edge. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group remains expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
+            "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one full-width composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns all internal layout, controls, labels, filtering behavior, and action handling. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
+            "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
             "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
             "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
-            "Initial loading uses row-shaped skeletons that preserve the standard single-line cell padding, row dividers, column dividers, selection lane, and sticky-lane boundaries. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; the global bottom-of-table loader is not rendered.",
-            "Lazy loading replaces pagination. The application owns requests, cancellation, cursors, deduplication, appended records, and query identity. Ungrouped requests use loadIdentity and dsLoadMore. Grouped requests use each TableGroup's hasMore, loadingMore, loadMoreError, and loadIdentity state and emit dsGroupLoadMore with the group ID; authoritative totalCount remains stable while member rows append.",
+            "Initial loading uses row-shaped skeletons that preserve the standard single-line cell padding, row dividers, column dividers, selection lane, and sticky-lane boundaries. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
+            "dataMode selects the top-level window: infinite appends ungrouped rows through dsLoadMore when hasMore is true, and pagination renders the controlled page supplied by the application and emits dsPaginationChange. Infinite mode also covers fixed result sets by leaving hasMore false. In a grouped paginated table, pagination counts and windows only parent groups; each expanded parent can still append its own members through dsGroupLoadMore. The application owns requests, cancellation, cursors, deduplication, slicing, and query identity.",
             "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
             "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
             "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; dual-primary copy keeps both tracks primary unless explicitly colored. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Tag cells use the double-inset Tag recipe; the md tag-only recipe is 24px inside 8px padding, while compound tag tracks preserve their peer text alignment. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 48px-high 16:9 bordered preview inside 8px outer padding, establishing a 64px row and a 102px column recipe, and fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
@@ -8734,16 +8852,16 @@
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
-              "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, and dsGroupLoadMore; route dsRowActivate in the application owner."
+              "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
+              "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, dsGroupLoadMore, and dsPaginationChange; route dsRowActivate in the application owner."
             ],
             "react": [
               "Pass new array and state-object references when the controlled data or query state changes.",
-              "Apply emitted sort, collapse, selection, action, or global/group loading detail to application state and perform data transformations in the owning layer."
+              "Apply emitted sort, collapse, selection, action, pagination, or global/group loading detail to application state and perform data transformations in the owning layer."
             ],
             "angular": [
               "Bind complex table inputs as properties and update the controlled values from the corresponding output events.",
-              "Keep server cursor, query lifecycle, and cell-action handling in the owning service or container."
+              "Keep server cursor, page slicing, query lifecycle, and cell-action handling in the owning service or container."
             ]
           },
           "references": [
@@ -8774,6 +8892,10 @@
             "type": "TableColumn[]",
             "required": false
           },
+          "dataMode": {
+            "type": "TableDataMode",
+            "required": false
+          },
           "displayedCount": {
             "type": "number | undefined",
             "required": false
@@ -8850,10 +8972,6 @@
             "type": "string | number | undefined",
             "required": false
           },
-          "lazyLoading": {
-            "type": "boolean",
-            "required": false
-          },
           "loadIdentity": {
             "type": "string | number",
             "required": false
@@ -8890,6 +9008,10 @@
             "type": "string | number | undefined",
             "required": false
           },
+          "pagination": {
+            "type": "TablePaginationState | null",
+            "required": false
+          },
           "resultSummaryLabel": {
             "type": "string",
             "required": false
@@ -8960,6 +9082,10 @@
             "name": "dsLoadMore",
             "detail": "TableLoadMoreDetail"
           },
+          {
+            "name": "dsPaginationChange",
+            "detail": "PaginationChangeDetail"
+          },
           {
             "name": "dsRowActivate",
             "detail": "TableRowActivateDetail"
@@ -8991,6 +9117,7 @@
         "empty-state",
         "icon",
         "loader",
+        "pagination",
         "skeleton",
         "tag",
         "text"
@@ -9548,6 +9675,7 @@
             "The first hover or keyboard focus waits for delay; moving to another tooltip shortly after dismissal opens it immediately.",
             "An empty or whitespace-only label suppresses the popup while preserving the wrapper.",
             "Only one tooltip remains active globally; warm handoff removes the previous popup before showing the next.",
+            "Disconnecting and reinserting the tooltip host rebinds the current slotted trigger.",
             "The preferred side flips when it cannot fit, then alignment is clamped to viewport padding.",
             "Reduced motion removes enter and exit fades while retaining the final visible or hidden state."
           ],