@ds-mo/ui 14.2.1 → 14.4.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/styles/table.css

@@ -1290,6 +1290,17 @@
   pointer-events: none;
 }
 
+:where(.ds-table__skeleton-image) {
+  border: 0;
+}
+
+:where(.ds-table__skeleton-image-shape) {
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  --ds-control-height: 100%;
+}
+
 :where(.ds-table__skeleton-row:last-child .ds-table__cell),
 :where(.ds-table__load-body .ds-table__load-row:last-child .ds-table__load-cell),
 :where(.ds-table__group:last-child > .ds-table__group-load-row:last-child .ds-table__load-cell),

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

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PaginationChangeDetail, PaginationPageSizeMode } 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;
+    /** Whether pageSize is a fixed choice or a measured Fit snapshot. */
+    pageSizeMode: PaginationPageSizeMode;
+    /** Controlled total number of top-level items across every page. */
+    totalItems: number;
+    /** Available page sizes. Assign arrays through JavaScript. */
+    pageSizeOptions: number[];
+    /** Include the Fit to page choice. */
+    fitToPage: boolean;
+    /** Effective whole-item capacity to request when Fit is selected. */
+    fitPageSize: number | undefined;
+    /** Full choice-list label for Fit. */
+    fitPageSizeLabel: string;
+    /** Compact closed-trigger label while Fit is selected. */
+    fitPageSizeTriggerLabel: string;
+    /** Localized plural noun used by assistive range announcements. */
+    itemLabel: string;
+    /** Visible page-size control label. */
+    pageSizeLabel: string;
+    /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */
+    pageSizeAriaLabel: string | undefined;
+    /** 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 handleKeyDown;
+    private get resolvedFitPageSize();
+    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, PaginationPageSizeMode, PaginationState, } from './pagination-types';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,37 @@
+export type PaginationChangeReason = 'page' | 'page-size' | 'fit';
+export type PaginationPageSizeMode = 'fixed' | 'fit';
+/** 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;
+    /** Whether pageSize is a chosen fixed value or a measured Fit snapshot. */
+    pageSizeMode?: PaginationPageSizeMode;
+    /** Total number of top-level items across every page. */
+    totalItems: number;
+    /** Available page sizes. Defaults to 25, 50, 100, and 200. */
+    pageSizeOptions?: number[];
+    /** Include a Fit to page option. The owner supplies the effective fitted size. */
+    fitToPage?: boolean;
+    /** Effective page size proposed when Fit to page is selected. */
+    fitPageSize?: number;
+    /** Full option label for Fit in the open choice list. */
+    fitPageSizeLabel?: string;
+    /** Compact trigger label while Fit is selected. */
+    fitPageSizeTriggerLabel?: string;
+    /** 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;
+    previousPageSizeMode: PaginationPageSizeMode;
+    reason: PaginationChangeReason;
+}
+//# sourceMappingURL=pagination-types.d.ts.map

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

@@ -8,6 +8,7 @@ export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';
 export type SelectWidth = ControlWidth;
 export type SelectPopupAlign = 'start' | 'end';
 export type SelectValue = string | string[];
+export type SelectIndicator = 'down' | 'up-down';
 export interface SelectOptionActionDetail {
     value: string;
     anchorId: string;
@@ -58,6 +59,8 @@ export declare class Select {
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */
     icon: string | undefined;
+    /** Trailing choice indicator. Use up-down for compact value steppers such as page size. */
+    indicator: SelectIndicator;
     /** Show the clear footer action when a value exists. */
     allowClear: boolean;
     /** Localized clear action label. */

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

@@ -1,2 +1,2 @@
-export type { SelectBackground, SelectOption, SelectSection, SelectSize, SelectValue, SelectWidth, } from './Select';
+export type { SelectBackground, SelectIndicator, SelectOption, SelectSection, SelectSize, SelectValue, SelectWidth, } from './Select';
 //# sourceMappingURL=index.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. */
@@ -44,6 +45,7 @@ export declare class Table {
     selectedRowIds: string[];
     /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */
     loading: boolean;
+    /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */
     skeletonRows: number;
     emptyHeading: string;
     emptyBody: string;
@@ -52,8 +54,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 +88,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;
@@ -93,6 +98,7 @@ export declare class Table {
     private activeStickyGroupId;
     private viewportFitSettled;
     private headerPresent;
+    private fitPageSize;
     private rootEl;
     private viewportEl;
     private frameEl;
@@ -101,12 +107,17 @@ export declare class Table {
     private stickyHeaderTableEl;
     private tableEl;
     private sentinelEl;
+    private incrementalWindowActive;
     private readonly groupSentinelEls;
     private previousModelWarning;
     private hasLoaded;
     private renderedModel;
     private stickyGroupConnected;
     private headerSlotObserver;
+    private fitResizeObserver;
+    private fitObservedViewport;
+    private fitObservedTable;
+    private fitMeasurementPending;
     private readonly layoutController;
     private readonly loadController;
     private readonly groupLoadController;
@@ -126,15 +137,21 @@ export declare class Table {
     handleDataChange(): void;
     handleLoadIdentityChange(): void;
     handleLazyConfigurationChange(): void;
+    handleDataModeChange(): void;
+    handlePaginationChange(pagination: TablePaginationState | null, previous: TablePaginationState | null): 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();
     private get boundedComposition();
     private get containedScroll();
+    private connectFitObserver;
+    private disconnectFitObserver;
+    private readonly syncFitPageSize;
     private currentLoadedRows;
     private currentLoadedRowCount;
     private createRenderModel;
@@ -166,6 +183,8 @@ export declare class Table {
     private renderStickyGroup;
     private renderDataBodies;
     private renderSkeletonBody;
+    private renderSkeletonCell;
+    private renderSkeletonCellContent;
     private renderStateBody;
     private renderLazyBody;
     private renderDocumentStickyHeader;

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, TableCellSkeleton, TableCellText, TableCellTag, TableCellTagVariant, TableCellValue, TableSkeletonWidth, 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-pagination-fit.d.ts

@@ -0,0 +1,8 @@
+export interface TableFitPageSizeInput {
+    viewportBlockSize: number;
+    headerBlockSize: number;
+    itemBlockSize: number;
+}
+/** Resolve how many complete top-level rows or group headers fit below the column header. */
+export declare function resolveTableFitPageSize(input: TableFitPageSizeInput): number | undefined;
+//# sourceMappingURL=table-pagination-fit.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). */
@@ -119,6 +121,30 @@ export type TableCellTag = TableCellTagBase & ({
     text: string;
 });
 export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
+export type TableSkeletonWidth = string | number;
+/** Representative loading geometry for one table column. */
+export type TableCellSkeleton = {
+    kind: 'text';
+    /** One track for scalar content, two for primary and secondary copy. */
+    lines?: 1 | 2;
+    primaryWidth?: TableSkeletonWidth;
+    secondaryWidth?: TableSkeletonWidth;
+} | {
+    kind: 'image';
+} | {
+    kind: 'tag';
+    width?: TableSkeletonWidth;
+} | {
+    kind: 'icon';
+    rounded?: boolean;
+} | {
+    kind: 'action';
+    /** Icon actions use a square control canvas; labeled actions may provide a wider width. */
+    variant?: 'icon' | 'label' | 'icon-label';
+    width?: TableSkeletonWidth;
+} | {
+    kind: 'blank';
+};
 export interface TableColumn {
     /** Stable column identity. */
     id: string;
@@ -145,6 +171,8 @@ export interface TableColumn {
      * geometry and may host grouped table-level controls in their header.
      */
     kind?: 'data' | 'action';
+    /** Representative loading geometry for this column. Defaults to one text line. */
+    skeleton?: TableCellSkeleton;
 }
 export interface TableRow {
     /** Stable identity, unique across all groups. */
@@ -217,5 +245,10 @@ export interface TableGroupCollapseChangeDetail {
 export interface TableRowActivateDetail {
     rowId: string;
 }
+/** Controlled top-level pagination state. Rows or groups contain only the active page. */
+export interface TablePaginationState extends PaginationState {
+    /** Change to request one fresh fitted-capacity snapshot for the current query shape. */
+    fitIdentity?: string | number;
+}
 export {};
 //# sourceMappingURL=table-types.d.ts.map