@ds-mo/ui 14.2.1 → 14.3.0

package/dist/react/components.d.ts

@@ -48,6 +48,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
 export { DsPanelToolHeader } from "./ds-panel-tool-header.js";

package/dist/react/components.js

@@ -49,6 +49,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
 export { DsPanelToolHeader } from "./ds-panel-tool-header.js";

package/dist/react/ds-pagination.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsPaginationCustomEvent, type PaginationChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsPagination as DsPaginationElement } from "@ds-mo/ui/dist/components/ds-pagination.js";
+export type DsPaginationEvents = {
+    onDsChange: EventName<DsPaginationCustomEvent<PaginationChangeDetail>>;
+};
+export declare const DsPagination: StencilReactComponent<DsPaginationElement, DsPaginationEvents, Components.DsPagination>;

package/dist/react/ds-pagination.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsPagination as DsPaginationElement, defineCustomElement as defineDsPagination } from "@ds-mo/ui/dist/components/ds-pagination.js";
+export const DsPagination = /*@__PURE__*/ createComponent({
+    tagName: 'ds-pagination',
+    elementClass: DsPaginationElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsPagination
+});

package/dist/react/ds-table.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableCustomEvent, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
+import { type DsTableCustomEvent, type PaginationChangeDetail, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
@@ -12,6 +12,7 @@ export type DsTableEvents = {
     onDsSelectionChange: EventName<DsTableCustomEvent<TableSelectionChangeDetail>>;
     onDsLoadMore: EventName<DsTableCustomEvent<TableLoadMoreDetail>>;
     onDsGroupLoadMore: EventName<DsTableCustomEvent<TableGroupLoadMoreDetail>>;
+    onDsPaginationChange: EventName<DsTableCustomEvent<PaginationChangeDetail>>;
     onDsCellAction: EventName<DsTableCustomEvent<TableCellActionDetail>>;
     onDsRowActivate: EventName<DsTableCustomEvent<TableRowActivateDetail>>;
 };

package/dist/react/ds-table.js

@@ -13,6 +13,7 @@ export const DsTable = /*@__PURE__*/ createComponent({
         onDsSelectionChange: 'dsSelectionChange',
         onDsLoadMore: 'dsLoadMore',
         onDsGroupLoadMore: 'dsGroupLoadMore',
+        onDsPaginationChange: 'dsPaginationChange',
         onDsCellAction: 'dsCellAction',
         onDsRowActivate: 'dsRowActivate'
     },

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PaginationChangeDetail } from './pagination-types';
+export declare class Pagination {
+    /** Controlled zero-based page index. */
+    pageIndex: number;
+    /** Controlled number of top-level items on a full page. */
+    pageSize: number;
+    /** Controlled total number of top-level items across every page. */
+    totalItems: number;
+    /** Available page sizes. Assign arrays through JavaScript. */
+    pageSizeOptions: number[];
+    /** Localized plural noun used by assistive range announcements. */
+    itemLabel: string;
+    /** Visible page-size control label. */
+    pageSizeLabel: string;
+    /** Accessible name for the pagination navigation region. */
+    label: string;
+    /** Prevent interaction while the owner replaces the current data page. */
+    loading: boolean;
+    /** Emits the complete next controlled state after a page or page-size request. */
+    dsChange: EventEmitter<PaginationChangeDetail>;
+    private readonly pageSizeControlId;
+    private requestPage;
+    private requestPageSize;
+    private get resolvedState();
+    render(): any;
+}
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export type { PaginationChangeDetail, PaginationChangeReason, PaginationState, } from './pagination-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Pagination/pagination-model.d.ts

@@ -0,0 +1,13 @@
+import type { PaginationState } from './pagination-types';
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: readonly [25, 50, 100, 200];
+export interface ResolvedPaginationState {
+    pageIndex: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+    firstItem: number;
+    lastItem: number;
+    pageSizeOptions: number[];
+}
+export declare function resolvePaginationState(state: Pick<PaginationState, 'pageIndex' | 'pageSize' | 'totalItems' | 'pageSizeOptions'>): ResolvedPaginationState;
+//# sourceMappingURL=pagination-model.d.ts.map

package/dist/types/components/Pagination/pagination-types.d.ts

@@ -0,0 +1,25 @@
+export type PaginationChangeReason = 'page' | 'page-size';
+/** Controlled pagination state shared by Pagination and pagination-aware consumers. */
+export interface PaginationState {
+    /** Zero-based page index. */
+    pageIndex: number;
+    /** Number of top-level items on a full page. */
+    pageSize: number;
+    /** Total number of top-level items across every page. */
+    totalItems: number;
+    /** Available page sizes. Defaults to 25, 50, 100, and 200. */
+    pageSizeOptions?: number[];
+    /** Localized plural noun used by assistive range announcements. */
+    itemLabel?: string;
+    /** Visible label for the page-size selector. */
+    pageSizeLabel?: string;
+    /** Accessible name for the pagination navigation region. */
+    ariaLabel?: string;
+}
+/** Complete next controlled state emitted for a page or page-size request. */
+export interface PaginationChangeDetail extends PaginationState {
+    previousPageIndex: number;
+    previousPageSize: number;
+    reason: PaginationChangeReason;
+}
+//# sourceMappingURL=pagination-types.d.ts.map

package/dist/types/components/Table/Table.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
+import type { PaginationChangeDetail } from '../Pagination/pagination-types';
+import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
     el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
@@ -52,8 +53,10 @@ export declare class Table {
     errorHeading: string;
     errorBody: string;
     emptyCellLabel: string;
-    /** Enable application-owned incremental loading without pagination. */
-    lazyLoading: boolean;
+    /** Top-level data-window strategy. Group member loading remains group-owned. */
+    dataMode: TableDataMode;
+    /** Controlled top-level pagination state. Required when dataMode is pagination. */
+    pagination: TablePaginationState | null;
     loadMoreMode: TableLoadMoreMode;
     hasMore: boolean;
     loadingMore: boolean;
@@ -84,6 +87,7 @@ export declare class Table {
     dsSelectionChange: EventEmitter<TableSelectionChangeDetail>;
     dsLoadMore: EventEmitter<TableLoadMoreDetail>;
     dsGroupLoadMore: EventEmitter<TableGroupLoadMoreDetail>;
+    dsPaginationChange: EventEmitter<PaginationChangeDetail>;
     dsCellAction: EventEmitter<TableCellActionDetail>;
     dsRowActivate: EventEmitter<TableRowActivateDetail>;
     private overflowStart;
@@ -101,6 +105,7 @@ export declare class Table {
     private stickyHeaderTableEl;
     private tableEl;
     private sentinelEl;
+    private incrementalWindowActive;
     private readonly groupSentinelEls;
     private previousModelWarning;
     private hasLoaded;
@@ -126,10 +131,12 @@ export declare class Table {
     handleDataChange(): void;
     handleLoadIdentityChange(): void;
     handleLazyConfigurationChange(): void;
+    handleDataModeChange(): void;
     handleLoadingMoreChange(loading: boolean): void;
     handleLoadMoreErrorChange(error: string | undefined): void;
     handleHasMoreChange(hasMore: boolean, hadMore: boolean): void;
     private get grouped();
+    private get hasIncrementalState();
     private get selectable();
     private get documentStickyHeader();
     private get fixedHeight();

package/dist/types/components/Table/index.d.ts

@@ -1,2 +1,2 @@
-export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn, TableColumnSticky, TableColumnWidth, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
+export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn, TableColumnSticky, TableColumnWidth, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Table/table-types.d.ts

@@ -1,12 +1,14 @@
 import type { TagContrast, TagIntent } from '../Tag/Tag';
 import type { IconColor } from '../Icon/Icon';
 import type { TextColor } from '../Text/text-types';
+import type { PaginationState } from '../Pagination/pagination-types';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableSelectionMode = 'none' | 'multiple';
 export type TableCellAlign = 'start' | 'center' | 'end';
 export type TableColumnSticky = 'start' | 'end';
 export type TableCaptionVisibility = 'visible' | 'hidden';
 export type TableLoadMoreMode = 'auto' | 'manual';
+export type TableDataMode = 'infinite' | 'pagination';
 export type TableLoadMoreReason = 'auto' | 'manual' | 'retry';
 export type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Semantic color for a group section header (faint surface + bold title). */
@@ -217,5 +219,7 @@ export interface TableGroupCollapseChangeDetail {
 export interface TableRowActivateDetail {
     rowId: string;
 }
+/** Controlled top-level pagination state. Rows or groups contain only the active page. */
+export type TablePaginationState = PaginationState;
 export {};
 //# sourceMappingURL=table-types.d.ts.map

package/dist/types/components.d.ts

@@ -47,6 +47,7 @@ import { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeade
 import { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
 import { TabGroupSize } from "./components/TabGroup/TabGroup";
 import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
+import { PaginationChangeDetail } from "./components/Pagination/pagination-types";
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
 import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -63,7 +64,7 @@ import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
 import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -110,6 +111,7 @@ export { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeade
 export { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
 export { TabGroupSize } from "./components/TabGroup/TabGroup";
 export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
+export { PaginationChangeDetail } from "./components/Pagination/pagination-types";
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
 export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -126,7 +128,7 @@ export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
 export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -1805,6 +1807,48 @@ export namespace Components {
          */
         "open": boolean;
     }
+    interface DsPagination {
+        /**
+          * Localized plural noun used by assistive range announcements.
+          * @default 'items'
+         */
+        "itemLabel": string;
+        /**
+          * Accessible name for the pagination navigation region.
+          * @default 'Pagination'
+         */
+        "label": string;
+        /**
+          * Prevent interaction while the owner replaces the current data page.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Controlled zero-based page index.
+          * @default 0
+         */
+        "pageIndex": number;
+        /**
+          * Controlled number of top-level items on a full page.
+          * @default 25
+         */
+        "pageSize": number;
+        /**
+          * Visible page-size control label.
+          * @default 'Items per page'
+         */
+        "pageSizeLabel": string;
+        /**
+          * Available page sizes. Assign arrays through JavaScript.
+          * @default [25, 50, 100, 200]
+         */
+        "pageSizeOptions": number[];
+        /**
+          * Controlled total number of top-level items across every page.
+          * @default 0
+         */
+        "totalItems": number;
+    }
     interface DsPanelNav {
         /**
           * @default 'Account'
@@ -2787,6 +2831,11 @@ export namespace Components {
           * @default []
          */
         "columns": TableColumn[];
+        /**
+          * Top-level data-window strategy. Group member loading remains group-owned.
+          * @default 'infinite'
+         */
+        "dataMode": TableDataMode;
         /**
           * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
          */
@@ -2872,11 +2921,6 @@ export namespace Components {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height": string | number | undefined;
-        /**
-          * Enable application-owned incremental loading without pagination.
-          * @default false
-         */
-        "lazyLoading": boolean;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -2913,6 +2957,11 @@ export namespace Components {
           * Maximum scroll-region height. Numbers resolve to CSS pixels.
          */
         "maxHeight": string | number | undefined;
+        /**
+          * Controlled top-level pagination state. Required when dataMode is pagination.
+          * @default null
+         */
+        "pagination": TablePaginationState | null;
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -3331,6 +3380,10 @@ export interface DsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsModalElement;
 }
+export interface DsPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPaginationElement;
+}
 export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelNavElement;
@@ -4048,6 +4101,23 @@ declare global {
         prototype: HTMLDsModalElement;
         new (): HTMLDsModalElement;
     };
+    interface HTMLDsPaginationElementEventMap {
+        "dsChange": PaginationChangeDetail;
+    }
+    interface HTMLDsPaginationElement extends Components.DsPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsPaginationElement: {
+        prototype: HTMLDsPaginationElement;
+        new (): HTMLDsPaginationElement;
+    };
     interface HTMLDsPanelNavElementEventMap {
         "dsNavSelect": string;
         "dsNavToggle": boolean;
@@ -4359,6 +4429,7 @@ declare global {
         "dsSelectionChange": TableSelectionChangeDetail;
         "dsLoadMore": TableLoadMoreDetail;
         "dsGroupLoadMore": TableGroupLoadMoreDetail;
+        "dsPaginationChange": PaginationChangeDetail;
         "dsCellAction": TableCellActionDetail;
         "dsRowActivate": TableRowActivateDetail;
     }
@@ -4503,6 +4574,7 @@ declare global {
         "ds-mobile-section-switcher": HTMLDsMobileSectionSwitcherElement;
         "ds-mobile-sheet-nav": HTMLDsMobileSheetNavElement;
         "ds-modal": HTMLDsModalElement;
+        "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
         "ds-panel-sub-nav": HTMLDsPanelSubNavElement;
         "ds-panel-tool-header": HTMLDsPanelToolHeaderElement;
@@ -6354,6 +6426,52 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface DsPagination {
+        /**
+          * Localized plural noun used by assistive range announcements.
+          * @default 'items'
+         */
+        "itemLabel"?: string;
+        /**
+          * Accessible name for the pagination navigation region.
+          * @default 'Pagination'
+         */
+        "label"?: string;
+        /**
+          * Prevent interaction while the owner replaces the current data page.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * Emits the complete next controlled state after a page or page-size request.
+         */
+        "onDsChange"?: (event: DsPaginationCustomEvent<PaginationChangeDetail>) => void;
+        /**
+          * Controlled zero-based page index.
+          * @default 0
+         */
+        "pageIndex"?: number;
+        /**
+          * Controlled number of top-level items on a full page.
+          * @default 25
+         */
+        "pageSize"?: number;
+        /**
+          * Visible page-size control label.
+          * @default 'Items per page'
+         */
+        "pageSizeLabel"?: string;
+        /**
+          * Available page sizes. Assign arrays through JavaScript.
+          * @default [25, 50, 100, 200]
+         */
+        "pageSizeOptions"?: number[];
+        /**
+          * Controlled total number of top-level items across every page.
+          * @default 0
+         */
+        "totalItems"?: number;
+    }
     interface DsPanelNav {
         /**
           * @default 'Account'
@@ -7447,6 +7565,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "columns"?: TableColumn[];
+        /**
+          * Top-level data-window strategy. Group member loading remains group-owned.
+          * @default 'infinite'
+         */
+        "dataMode"?: TableDataMode;
         /**
           * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
          */
@@ -7532,11 +7655,6 @@ declare namespace LocalJSX {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height"?: string | number | undefined;
-        /**
-          * Enable application-owned incremental loading without pagination.
-          * @default false
-         */
-        "lazyLoading"?: boolean;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -7577,9 +7695,15 @@ declare namespace LocalJSX {
         "onDsGroupCollapseChange"?: (event: DsTableCustomEvent<TableGroupCollapseChangeDetail>) => void;
         "onDsGroupLoadMore"?: (event: DsTableCustomEvent<TableGroupLoadMoreDetail>) => void;
         "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
+        "onDsPaginationChange"?: (event: DsTableCustomEvent<PaginationChangeDetail>) => void;
         "onDsRowActivate"?: (event: DsTableCustomEvent<TableRowActivateDetail>) => void;
         "onDsSelectionChange"?: (event: DsTableCustomEvent<TableSelectionChangeDetail>) => void;
         "onDsSortChange"?: (event: DsTableCustomEvent<TableSortChangeDetail>) => void;
+        /**
+          * Controlled top-level pagination state. Required when dataMode is pagination.
+          * @default null
+         */
+        "pagination"?: TablePaginationState | null;
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -8305,6 +8429,15 @@ declare namespace LocalJSX {
         "modalWidth": ModalWidth | string;
         "ariaDescribedby": string | undefined;
     }
+    interface DsPaginationAttributes {
+        "pageIndex": number;
+        "pageSize": number;
+        "totalItems": number;
+        "itemLabel": string;
+        "pageSizeLabel": string;
+        "label": string;
+        "loading": boolean;
+    }
     interface DsPanelNavAttributes {
         "navStyle": NavChromeStyle;
         "disableViewTransition": boolean;
@@ -8535,7 +8668,7 @@ declare namespace LocalJSX {
         "errorHeading": string;
         "errorBody": string;
         "emptyCellLabel": string;
-        "lazyLoading": boolean;
+        "dataMode": TableDataMode;
         "loadMoreMode": TableLoadMoreMode;
         "hasMore": boolean;
         "loadingMore": boolean;
@@ -8661,6 +8794,7 @@ declare namespace LocalJSX {
         "ds-mobile-section-switcher": Omit<DsMobileSectionSwitcher, keyof DsMobileSectionSwitcherAttributes> & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes]?: DsMobileSectionSwitcher[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `attr:${K}`]?: DsMobileSectionSwitcherAttributes[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `prop:${K}`]?: DsMobileSectionSwitcher[K] };
         "ds-mobile-sheet-nav": Omit<DsMobileSheetNav, keyof DsMobileSheetNavAttributes> & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes]?: DsMobileSheetNav[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `attr:${K}`]?: DsMobileSheetNavAttributes[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `prop:${K}`]?: DsMobileSheetNav[K] };
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
+        "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
         "ds-panel-sub-nav": Omit<DsPanelSubNav, keyof DsPanelSubNavAttributes> & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes]?: DsPanelSubNav[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `attr:${K}`]?: DsPanelSubNavAttributes[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `prop:${K}`]?: DsPanelSubNav[K] };
         "ds-panel-tool-header": Omit<DsPanelToolHeader, keyof DsPanelToolHeaderAttributes> & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes]?: DsPanelToolHeader[K] } & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes as `attr:${K}`]?: DsPanelToolHeaderAttributes[K] } & { [K in keyof DsPanelToolHeader & keyof DsPanelToolHeaderAttributes as `prop:${K}`]?: DsPanelToolHeader[K] };
@@ -8752,6 +8886,7 @@ declare module "@stencil/core" {
             "ds-mobile-section-switcher": LocalJSX.IntrinsicElements["ds-mobile-section-switcher"] & JSXBase.HTMLAttributes<HTMLDsMobileSectionSwitcherElement>;
             "ds-mobile-sheet-nav": LocalJSX.IntrinsicElements["ds-mobile-sheet-nav"] & JSXBase.HTMLAttributes<HTMLDsMobileSheetNavElement>;
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
+            "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
             "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
             "ds-panel-tool-header": LocalJSX.IntrinsicElements["ds-panel-tool-header"] & JSXBase.HTMLAttributes<HTMLDsPanelToolHeaderElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.2.1",
+  "version": "14.3.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",