@ds-mo/ui 13.13.0 → 13.14.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
+import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
     /** Stable column definitions. Assign through JavaScript. */
     columns: TableColumn[];
@@ -11,9 +11,20 @@ export declare class Table {
     grouping: TableGroupingState | null;
     /** Controlled member-row sort state. */
     sort: TableSortState | null;
-    /** Required accessible table name, rendered as a native caption. */
+    /** Controlled collapsed group identities. Groups not listed remain expanded. */
+    collapsedGroupIds: string[];
+    /** Required accessible table name, retained as a native caption. */
     caption: string;
+    /** Shows a matching presentational title bar above the native table frame. */
     captionVisibility: TableCaptionVisibility;
+    /**
+     * Optional result summary footer. When both `displayedCount` and `totalCount`
+     * are finite numbers, the table shows “Displaying {displayed} of {total}”.
+     */
+    displayedCount: number | undefined;
+    totalCount: number | undefined;
+    /** Supports {displayed} and {total} placeholders. */
+    resultSummaryLabel: string;
     stickyHeader: boolean;
     /** Maximum scroll-region height. Numbers resolve to CSS pixels. */
     maxHeight: string | number | undefined;
@@ -50,6 +61,7 @@ export declare class Table {
     rowsLoadedLabel: string;
     dsSortChange: EventEmitter<TableSortChangeDetail>;
     dsGroupingChange: EventEmitter<TableGroupingChangeDetail>;
+    dsGroupCollapseChange: EventEmitter<TableGroupCollapseChangeDetail>;
     dsSelectionChange: EventEmitter<TableSelectionChangeDetail>;
     dsLoadMore: EventEmitter<TableLoadMoreDetail>;
     dsCellAction: EventEmitter<TableCellActionDetail>;
@@ -57,21 +69,19 @@ export declare class Table {
     private overflowStart;
     private overflowEnd;
     private scrollable;
-    private intersectionSupported;
     private announcement;
     private viewportEl;
+    private frameEl;
+    private interactiveHeadEl;
+    private collapseAllOverlayEl;
     private stickyHeaderTableEl;
     private tableEl;
     private sentinelEl;
-    private resizeObserver;
-    private intersectionObserver;
-    private observedSentinel;
-    private requestPending;
-    private requestedRowCount;
-    private previousLoadedRowCount;
     private previousModelWarning;
     private hasLoaded;
-    private reconnectFrame;
+    private renderedModel;
+    private readonly layoutController;
+    private readonly loadController;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
@@ -87,40 +97,38 @@ export declare class Table {
     private get grouped();
     private get selectable();
     private get documentStickyHeader();
-    private get loadedRows();
-    private get hasData();
-    private get totalColumns();
-    private get selectedSet();
-    private get selectionState();
+    private currentLoadedRows;
+    private currentLoadedRowCount;
+    private createRenderModel;
     private get resolvedMaxHeight();
-    private get tableStyle();
     private warnModelIssues;
-    private connectViewportObserver;
-    private syncOverflow;
-    private syncStickyHeaderPosition;
-    private resetLoadRequest;
-    private disconnectIntersectionObserver;
-    private connectIntersectionObserver;
-    private requestLoadMore;
     private emitSort;
     private sortButtonLabel;
     private emitRowSelection;
     private emitAllSelection;
+    private emitGroupSelection;
     private rowEventOwnsActivation;
     private emitRowActivation;
     private handleRowKeydown;
     private renderSelectionControl;
     private renderStickyEdge;
+    private renderCollapseAllButton;
+    private renderFloatingCollapseAll;
     private renderColumnHeader;
     private renderColgroup;
     private renderHeader;
     private renderCellValue;
     private renderRow;
+    private emitGroupCollapse;
+    private emitAllGroupsCollapse;
     private renderDataBodies;
     private renderSkeletonBody;
     private renderStateBody;
     private renderLazyBody;
     private renderDocumentStickyHeader;
+    private get resultSummary();
+    private renderResultFooter;
+    private renderCaptionBar;
     render(): any;
 }
 //# sourceMappingURL=Table.d.ts.map

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, TableHeaderSegment, TableGroupingChangeDetail, 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, TableGroup, TableGroupCollapseChangeDetail, TableGroupIntent, TableHeaderSegment, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,44 @@
+import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn } from './table-types';
+export interface ResolvedTableCellText {
+    primary: string | number;
+    secondary?: string | number;
+    wrap?: boolean;
+    fontFeature?: 'normal' | 'tabular-nums';
+}
+export type TableCellPresentation = {
+    kind: 'blank';
+    cellType: 'blank';
+    value: TableCellBlank;
+} | {
+    kind: 'empty';
+    cellType: 'empty';
+    value: TableCellEmpty | null | undefined;
+} | {
+    kind: 'icon';
+    cellType: 'icon';
+    value: TableCellIcon;
+} | {
+    kind: 'image';
+    cellType: 'image';
+    value: TableCellImage;
+} | {
+    kind: 'action';
+    cellType: 'action';
+    value: TableCellAction;
+} | {
+    kind: 'tag';
+    cellType: 'tag';
+    value: TableCellTag;
+    variant: TableCellTagVariant;
+} | {
+    kind: 'text';
+    cellType: 'text' | 'primary-text';
+    value: ResolvedTableCellText;
+    primaryText: boolean;
+    singleLine: boolean;
+    variant: 'single' | 'multi' | 'primary-pair';
+    wraps: boolean;
+};
+/** Resolve a cell's semantic and visual recipe once for both markup and classes. */
+export declare function resolveTableCellPresentation(value: TableCellValue, column: TableColumn): TableCellPresentation;
+//# sourceMappingURL=table-cell-model.d.ts.map

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

@@ -0,0 +1,65 @@
+export interface TableLayoutElements {
+    viewport: HTMLElement | null;
+    table: HTMLTableElement | null;
+    stickyHeaderTable: HTMLTableElement | null;
+    collapseAllOverlay: HTMLElement | null;
+    frame: HTMLElement | null;
+    interactiveHead: HTMLTableSectionElement | null;
+}
+export interface TableLayoutMode {
+    documentStickyHeader: boolean;
+    floatingCollapseAll: boolean;
+}
+export interface TableOverflowState {
+    start: boolean;
+    end: boolean;
+    scrollable: boolean;
+}
+export interface TableLayoutControllerOptions {
+    elements: () => TableLayoutElements;
+    mode: () => TableLayoutMode;
+    overflowChanged: (state: TableOverflowState) => void;
+}
+export interface TableLayoutMetricInput {
+    viewportInlineSize: number;
+    viewportBlockSize: number;
+    scrollInlineSize: number;
+    scrollBlockSize: number;
+    scrollInlineOffset: number;
+    tableInlineSize: number;
+    collapseHeadBlockStart?: number;
+    collapseFrameBlockStart?: number;
+}
+export interface TableLayoutMetrics {
+    visibleInlineSize: number;
+    overflow: TableOverflowState;
+    inlineOffset: number;
+    maxInlineOffset: number;
+    collapseBlockOffset: number | null;
+}
+/** Pure geometry resolution shared by the controller and focused tests. */
+export declare function resolveTableLayoutMetrics(input: TableLayoutMetricInput): TableLayoutMetrics;
+/**
+ * Owns table viewport observation. It resolves newly rendered geometry
+ * immediately so the first paint has the correct viewport-width chrome, then
+ * batches observer-driven scroll and resize reads/writes into one animation frame.
+ * The component remains responsible only for refs and reactive overflow state.
+ */
+export declare class TableLayoutController {
+    private readonly options;
+    private connected;
+    private connectedViewport;
+    private observedTable;
+    private resizeObserver;
+    private frame;
+    private overflow;
+    constructor(options: TableLayoutControllerOptions);
+    connect(): void;
+    disconnect(): void;
+    /** Reconcile newly rendered refs, observers, and pending geometry. */
+    refresh(): void;
+    private schedule;
+    private sync;
+    private setProperty;
+}
+//# sourceMappingURL=table-layout-controller.d.ts.map

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

@@ -0,0 +1,49 @@
+import type { TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason } from './table-types';
+export interface TableLoadControllerState {
+    lazyLoading: boolean;
+    loadMoreMode: TableLoadMoreMode;
+    hasMore: boolean;
+    loadingMore: boolean;
+    loadMoreError: string | undefined;
+    loadIdentity: string | number;
+    loadMoreThreshold: number;
+    containedScroll: boolean;
+    loadingMoreLabel: string;
+    endOfResultsLabel: string;
+    rowsLoadedLabel: string;
+    loadedRowCount: number;
+    viewport: HTMLElement | null;
+    sentinel: HTMLElement | null;
+}
+export interface TableLoadControllerOptions {
+    state: () => TableLoadControllerState;
+    announce: (message: string) => void;
+    request: (detail: TableLoadMoreDetail) => void;
+}
+/** Owns incremental-loading request guards, announcements, and observation. */
+export declare class TableLoadController {
+    private readonly options;
+    readonly intersectionSupported: boolean;
+    private connected;
+    private intersectionObserver;
+    private observedSentinel;
+    private requestPending;
+    private requestedRowCount;
+    private previousLoadedRowCount;
+    constructor(options: TableLoadControllerOptions);
+    initialize(): void;
+    connect(): void;
+    disconnect(): void;
+    refresh(): void;
+    structureChanged(): void;
+    dataChanged(): void;
+    identityChanged(): void;
+    configurationChanged(): void;
+    loadingChanged(loading: boolean): void;
+    errorChanged(error: string | undefined): void;
+    hasMoreChanged(hasMore: boolean, hadMore: boolean): void;
+    request(reason: TableLoadMoreReason): void;
+    private resetRequest;
+    private disconnectObserver;
+}
+//# sourceMappingURL=table-load-controller.d.ts.map

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

@@ -17,13 +17,38 @@ export declare function tableCellPrimary(value: TableCellValue): string | number
 export declare function tableRowSelectionLabel(row: TableRow, columns: TableColumn[]): string;
 export declare function nextTableSortState(current: TableSortState | null | undefined, columnId: string): TableSortState;
 export declare function nextTableGroupOrder(grouping: TableGroupingState): TableGroupingState;
+export declare function toggleTableGroupCollapsed(collapsedGroupIds: string[], groupId: string): string[];
+export declare function nextTableGroupsCollapsed(collapsedGroupIds: string[], groupIds: string[]): string[];
+/** Host for grouped collapse-all: the trailing action lane or a scrollport-owned overlay. */
+export type TableCollapseAllHost = {
+    columnId: string;
+    mode: 'action';
+} | {
+    mode: 'floating';
+};
+export declare function tableCollapseAllHost(columns: TableColumn[]): TableCollapseAllHost | undefined;
 export declare function clampTableColumnSize(column: TableColumn): number | undefined;
 export declare function tableColumnSize(column: TableColumn): string | undefined;
+/**
+ * When every column has an explicit width, one ordinary lane must absorb spare
+ * table width so fixed selection and action lanes are not expanded by the
+ * native fixed-table layout algorithm.
+ */
+export declare function tableFlexibleColumnId(columns: TableColumn[]): string | undefined;
 export declare function tableExplicitMinWidth(columns: TableColumn[]): string | undefined;
 export declare function tableRows(rows: TableRow[], groups: TableGroup[], grouped: boolean): TableRow[];
 export declare function deriveTableSelectionState(rows: TableRow[], selectedRowIds: readonly string[]): TableSelectionState;
 export declare function toggleTableRowSelection(selectedRowIds: readonly string[], row: TableRow): string[];
 export declare function toggleAllLoadedTableRows(selectedRowIds: readonly string[], loadedRows: TableRow[]): string[];
+/** Toggle every selectable loaded row that belongs to a group. */
+export declare function toggleTableGroupSelection(selectedRowIds: readonly string[], groupRows: TableRow[]): string[];
 export declare function resolvedTableGroupCount(group: TableGroup): number;
+export declare const TABLE_GROUP_INTENTS: readonly ["brand", "neutral", "negative", "warning", "caution", "positive"];
+export declare function isTableGroupIntent(value: unknown): value is (typeof TABLE_GROUP_INTENTS)[number];
+export declare function tableGroupIntentClass(intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined): string | undefined;
+/** Title color for an intentful group label; defaults to primary when unset. */
+export declare function tableGroupLabelColor(intent: (typeof TABLE_GROUP_INTENTS)[number] | undefined): 'primary' | 'brand' | 'negative' | 'warning' | 'caution' | 'positive' | `var(--${string})`;
+/** Formats the optional table result footer. Returns null when either count is missing. */
+export declare function formatTableResultSummary(displayed: number | null | undefined, total: number | null | undefined, label?: string, locale?: string): string | null;
 export declare function tableModelIssues(columns: TableColumn[], rows: TableRow[], groups: TableGroup[], grouped: boolean): string[];
 //# sourceMappingURL=table-model.d.ts.map

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

@@ -0,0 +1,41 @@
+import { tableGroupLabelColor, type TableCollapseAllHost, type TableSelectionState } from './table-model';
+import type { TableColumn, TableGroup, TableGroupIntent, TableRow, TableSelectionMode } from './table-types';
+export interface TableGroupRenderModel {
+    group: TableGroup;
+    count: number;
+    countLabel: string;
+    countIntent: TableGroupIntent;
+    intent: TableGroupIntent | undefined;
+    intentClass: string | undefined;
+    labelColor: ReturnType<typeof tableGroupLabelColor>;
+    collapsed: boolean;
+    selection: TableSelectionState | null;
+}
+export interface TableRenderModel {
+    grouped: boolean;
+    selectable: boolean;
+    loadedRows: TableRow[];
+    hasData: boolean;
+    selectedRowIds: ReadonlySet<string>;
+    selection: TableSelectionState;
+    collapsedGroupIds: ReadonlySet<string>;
+    groups: TableGroupRenderModel[];
+    totalColumns: number;
+    allGroupsCollapsed: boolean;
+    showCollapseAll: boolean;
+    collapseAllHost: TableCollapseAllHost | undefined;
+    flexibleColumnId: string | undefined;
+    tableStyle: Record<string, string> | undefined;
+}
+export interface TableRenderModelInput {
+    columns: TableColumn[];
+    rows: TableRow[];
+    groups: TableGroup[];
+    grouped: boolean;
+    selectionMode: TableSelectionMode;
+    selectedRowIds: string[];
+    collapsedGroupIds: string[];
+}
+/** Create one immutable snapshot of all derived state consumed during a render. */
+export declare function createTableRenderModel(input: TableRenderModelInput): TableRenderModel;
+//# sourceMappingURL=table-render-model.d.ts.map

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

@@ -8,6 +8,8 @@ export type TableCaptionVisibility = 'visible' | 'hidden';
 export type TableLoadMoreMode = 'auto' | 'manual';
 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). */
+export type TableGroupIntent = 'brand' | 'neutral' | 'negative' | 'warning' | 'caution' | 'positive';
 /** Independently sortable label within a compound column header. */
 export interface TableHeaderSegment {
     label: string;
@@ -135,6 +137,11 @@ export interface TableColumn {
     wrap?: boolean;
     /** Pin one application column to either inline edge during horizontal scrolling. */
     sticky?: TableColumnSticky;
+    /**
+     * Declare a trailing application-action lane. Action columns keep fixed
+     * geometry and may host grouped table-level controls in their header.
+     */
+    kind?: 'data' | 'action';
 }
 export interface TableRow {
     /** Stable identity, unique across all groups. */
@@ -156,8 +163,13 @@ export interface TableGroup {
     value?: string | number;
     /** Total server-side member count; may exceed the currently loaded row count. */
     totalCount?: number;
-    /** Optional localized, display-ready count such as “18 vehicles”. */
+    /** Optional localized accessible count phrase such as “18 vehicles”; the visible tag remains numeric. */
     countLabel?: string;
+    /**
+     * Optional semantic intent for the group section header. Applies a faint
+     * intent background and bold intent title color.
+     */
+    intent?: TableGroupIntent;
     rows: TableRow[];
 }
 export interface TableSortChangeDetail {
@@ -168,8 +180,10 @@ export interface TableGroupingChangeDetail {
 }
 export interface TableSelectionChangeDetail {
     selectedRowIds: string[];
-    scope: 'row' | 'all-loaded';
+    scope: 'row' | 'all-loaded' | 'group';
     changedRowId?: string;
+    /** Present when scope is `group`. */
+    groupId?: string;
     selected?: boolean;
 }
 export interface TableLoadMoreDetail {
@@ -182,6 +196,13 @@ export interface TableCellActionDetail {
     rowId: string;
     columnId: string;
 }
+export interface TableGroupCollapseChangeDetail {
+    scope: 'group' | 'all';
+    /** Present when a single group was toggled. */
+    groupId?: string;
+    collapsed: boolean;
+    collapsedGroupIds: string[];
+}
 export interface TableRowActivateDetail {
     rowId: string;
 }

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlInsetDepth } from '../../utils';
 export type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
 export type TagSize = 'md' | 'sm' | 'xs';
@@ -11,6 +12,8 @@ export declare class Tag {
     size: TagSize;
     /** Use the reduced outer geometry when nested inside a control of the same size. */
     isInset: boolean;
+    /** Single removes 4px overall; double removes 8px overall (xs stays single). */
+    insetDepth: ControlInsetDepth;
     rounded: boolean;
     maxWidth: string | number | undefined;
     /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */