@ds-mo/ui 13.11.1 → 13.13.0

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

@@ -17,6 +17,8 @@ export declare class ButtonFilled {
     variant: ButtonFilledVariant;
     /** Control density (height, padding, icon, type). */
     size: ButtonFilledSize;
+    /** Use reduced outer geometry when nested inside a control of the same size. */
+    isInset: boolean;
     /** Width fit — hug content (default) or fill the parent. */
     width: ButtonFilledWidth;
     /** Visible text for `label` / `icon-label` variants. */

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

@@ -14,6 +14,8 @@ export declare class ButtonUnfilled {
     variant: ButtonUnfilledVariant;
     /** Control density (height, padding, icon, type). */
     size: ButtonUnfilledSize;
+    /** Use reduced outer geometry when nested inside a control of the same size. */
+    isInset: boolean;
     /** Width fit — hug content (default) or fill the parent. */
     width: ButtonUnfilledWidth;
     /** Visible text for `label` / `icon-label` variants. */

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

@@ -1,17 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TabItem } from '../TabGroup/tab-item-utils';
-import type { MobileHeaderHeadingLevel, MobileHeaderTone } from './mobile-header-types';
+import { type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';
+import type { TabGroupSize } from '../TabGroup/TabGroup';
+import type { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from './mobile-header-types';
 export declare class MobileHeader {
     /** Static title used when no peer sections are supplied. */
     heading: string;
     /** Semantic heading level for the active mobile screen. */
     headingLevel: MobileHeaderHeadingLevel;
     /** Controlled peer sections. Their selected label replaces the static title. */
-    sections: TabItem[];
+    sections: TabGroupItem[];
     /** Controlled selected section id. */
     value: string;
     /** Accessible name for the section chooser. */
     sectionsAriaLabel: string;
+    /** Popup switcher or an inline segmented TabGroup for peer sections. */
+    sectionsPresentation: MobileHeaderSectionsPresentation;
+    /** Density for the segmented sections presentation. */
+    sectionsSize: TabGroupSize;
     /** Controlled child sections within the selected page or detail screen. */
     subsections: TabItem[];
     /** Controlled selected child-section id. */

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

@@ -1,2 +1,2 @@
-export type { MobileHeaderHeadingLevel, MobileHeaderSectionItem, MobileHeaderTone, } from './mobile-header-types';
+export type { MobileHeaderHeadingLevel, MobileHeaderSectionItem, MobileHeaderSectionsPresentation, MobileHeaderTone, } from './mobile-header-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/MobileHeader/mobile-header-types.d.ts

@@ -1,5 +1,6 @@
-import type { TabItem } from '../TabGroup/tab-item-utils';
+import type { TabGroupItem } from '../TabGroup/tab-item-utils';
 export type MobileHeaderTone = 'default' | 'brand';
 export type MobileHeaderHeadingLevel = 'h1' | 'h2';
-export type MobileHeaderSectionItem = TabItem;
+export type MobileHeaderSectionsPresentation = 'switcher' | 'segmented';
+export type MobileHeaderSectionItem = TabGroupItem;
 //# sourceMappingURL=mobile-header-types.d.ts.map

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

@@ -7,6 +7,7 @@ import { type MobileDestination, type ShellResponsiveMode } from '../../shell/sh
 import type { PanelNavUserActionDetail } from '../PanelNav/panel-nav-types';
 import type { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from './shell-app-types';
 export declare class ShellApp {
+    private static readonly FOREGROUND_REFRESH_MS;
     /** Managed renders the complete responsive chrome; slotted exposes the advanced composition. */
     composition: ShellAppComposition;
     /** Router-owned navigation data used by managed composition. */
@@ -80,6 +81,7 @@ export declare class ShellApp {
     private managedBrowseContext;
     private resizeObserver;
     private hasLoaded;
+    private foregroundRefreshTimer;
     private readonly panelNavTransition;
     private readonly chromeSyncCoalescer;
     private panelWidthTokens;
@@ -113,6 +115,12 @@ export declare class ShellApp {
     private connectMetricsObserver;
     private connectViewportListeners;
     private disconnectViewportListeners;
+    private connectPageLifecycleListeners;
+    private disconnectPageLifecycleListeners;
+    private onDocumentVisibilityChange;
+    private onPageShow;
+    private cancelForegroundRefresh;
+    private refreshAfterForegroundRestore;
     private cachePanelWidthTokens;
     private applyGradientVars;
     private clearGradientPaintVars;

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

@@ -1,10 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type TabGroupItem } from './tab-item-utils';
 export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
+export type TabGroupSize = 'sm' | 'md' | 'lg';
 export declare class TabGroup {
     el: HTMLElement;
     value: string;
     tabs: TabGroupItem[];
+    /** Control density: 24px small, 32px medium, or 40px large track. */
+    size: TabGroupSize;
     background: TabBackground | undefined;
     ariaLabel: string | null;
     ariaLabelledby: string | undefined;

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

@@ -0,0 +1,126 @@
+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';
+export declare class Table {
+    /** Stable column definitions. Assign through JavaScript. */
+    columns: TableColumn[];
+    /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */
+    rows: TableRow[];
+    /** One level of application-owned grouped data. Assign through JavaScript. */
+    groups: TableGroup[];
+    /** Controlled grouping column and group-order direction. */
+    grouping: TableGroupingState | null;
+    /** Controlled member-row sort state. */
+    sort: TableSortState | null;
+    /** Required accessible table name, rendered as a native caption. */
+    caption: string;
+    captionVisibility: TableCaptionVisibility;
+    stickyHeader: boolean;
+    /** Maximum scroll-region height. Numbers resolve to CSS pixels. */
+    maxHeight: string | number | undefined;
+    /** Optional explicit label for the horizontal/vertical scroll region. */
+    scrollLabel: string | undefined;
+    selectionMode: TableSelectionMode;
+    /** Controlled selected row identities. IDs outside the loaded rows are preserved. */
+    selectedRowIds: string[];
+    /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */
+    loading: boolean;
+    skeletonRows: number;
+    emptyHeading: string;
+    emptyBody: string;
+    /** Initial error state. Existing rows stay visible; incremental failures use loadMoreError. */
+    error: boolean;
+    errorHeading: string;
+    errorBody: string;
+    emptyCellLabel: string;
+    /** Enable application-owned incremental loading without pagination. */
+    lazyLoading: boolean;
+    loadMoreMode: TableLoadMoreMode;
+    hasMore: boolean;
+    loadingMore: boolean;
+    loadMoreError: string | undefined;
+    /** Reset key for a new query/group/sort dataset. */
+    loadIdentity: string | number;
+    /** IntersectionObserver root margin in CSS pixels. */
+    loadMoreThreshold: number;
+    loadMoreLabel: string;
+    retryLabel: string;
+    loadingMoreLabel: string;
+    endOfResultsLabel: string;
+    /** Supports {count} and {total} placeholders. */
+    rowsLoadedLabel: string;
+    dsSortChange: EventEmitter<TableSortChangeDetail>;
+    dsGroupingChange: EventEmitter<TableGroupingChangeDetail>;
+    dsSelectionChange: EventEmitter<TableSelectionChangeDetail>;
+    dsLoadMore: EventEmitter<TableLoadMoreDetail>;
+    dsCellAction: EventEmitter<TableCellActionDetail>;
+    dsRowActivate: EventEmitter<TableRowActivateDetail>;
+    private overflowStart;
+    private overflowEnd;
+    private scrollable;
+    private intersectionSupported;
+    private announcement;
+    private viewportEl;
+    private stickyHeaderTableEl;
+    private tableEl;
+    private sentinelEl;
+    private resizeObserver;
+    private intersectionObserver;
+    private observedSentinel;
+    private requestPending;
+    private requestedRowCount;
+    private previousLoadedRowCount;
+    private previousModelWarning;
+    private hasLoaded;
+    private reconnectFrame;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleStructureChange(): void;
+    handleDataChange(): void;
+    handleLoadIdentityChange(): void;
+    handleLazyConfigurationChange(): void;
+    handleLoadingMoreChange(loading: boolean): void;
+    handleLoadMoreErrorChange(error: string | undefined): void;
+    handleHasMoreChange(hasMore: boolean, hadMore: boolean): void;
+    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 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 rowEventOwnsActivation;
+    private emitRowActivation;
+    private handleRowKeydown;
+    private renderSelectionControl;
+    private renderStickyEdge;
+    private renderColumnHeader;
+    private renderColgroup;
+    private renderHeader;
+    private renderCellValue;
+    private renderRow;
+    private renderDataBodies;
+    private renderSkeletonBody;
+    private renderStateBody;
+    private renderLazyBody;
+    private renderDocumentStickyHeader;
+    render(): any;
+}
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,29 @@
+import type { TableCellBlank, TableCellAction, TableCellEmpty, TableCellIcon, TableCellImage, TableCellPrimaryText, TableCellText, TableCellTag, TableCellValue, TableColumn, TableGroup, TableGroupingState, TableRow, TableSortState } from './table-types';
+export interface TableSelectionState {
+    selectableRowIds: string[];
+    selectedLoadedCount: number;
+    allSelected: boolean;
+    indeterminate: boolean;
+}
+export declare function isTableCellText(value: TableCellValue): value is TableCellText;
+export declare function isTableCellPrimaryText(value: TableCellValue): value is TableCellPrimaryText;
+export declare function isTableCellTag(value: TableCellValue): value is TableCellTag;
+export declare function isTableCellIcon(value: TableCellValue): value is TableCellIcon;
+export declare function isTableCellImage(value: TableCellValue): value is TableCellImage;
+export declare function isTableCellAction(value: TableCellValue): value is TableCellAction;
+export declare function isTableCellEmpty(value: TableCellValue): value is TableCellEmpty;
+export declare function isTableCellBlank(value: TableCellValue): value is TableCellBlank;
+export declare function tableCellPrimary(value: TableCellValue): string | number | null;
+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 clampTableColumnSize(column: TableColumn): number | undefined;
+export declare function tableColumnSize(column: 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[];
+export declare function resolvedTableGroupCount(group: TableGroup): number;
+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-types.d.ts

@@ -0,0 +1,189 @@
+import type { TagContrast, TagIntent } from '../Tag/Tag';
+import type { IconColor } from '../Icon/Icon';
+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 TableLoadMoreReason = 'auto' | 'manual' | 'retry';
+export type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Independently sortable label within a compound column header. */
+export interface TableHeaderSegment {
+    label: string;
+    /** Stable key emitted through TableSortState.columnId. */
+    sortKey: string;
+    /** Visible separator rendered after this label when another segment follows. */
+    separator?: string;
+}
+/** Controlled member-row sort state. Group order is controlled separately. */
+export interface TableSortState {
+    columnId: string;
+    direction: TableSortDirection;
+}
+/** One controlled grouping level plus the supplied group-order direction. */
+export interface TableGroupingState {
+    columnId: string;
+    direction: TableSortDirection;
+}
+/** Standard two-line cell content owned by the table renderer. */
+export interface TableCellText {
+    primary: string | number;
+    secondary?: string;
+    /** Allow this cell to wrap even when its column truncates by default. */
+    wrap?: boolean;
+    fontFeature?: 'normal' | 'tabular-nums';
+}
+/** Two-line text content where both tracks use primary body text. */
+export interface TableCellPrimaryText {
+    kind: 'primary-text';
+    primary: string | number;
+    secondary: string | number;
+    /** Allow this cell to wrap even when its column truncates by default. */
+    wrap?: boolean;
+    fontFeature?: 'normal' | 'tabular-nums';
+}
+/** Applicable data point whose value is currently unavailable. */
+export interface TableCellEmpty {
+    kind: 'empty';
+}
+/** Data point that is intentionally not applicable to this row. */
+export interface TableCellBlank {
+    kind: 'blank';
+}
+/** Declarative icon-only content rendered by the table's standard cell primitive. */
+export interface TableCellIcon {
+    kind: 'icon';
+    /** Exact canonical IcoMo export name. */
+    icon: string;
+    color?: IconColor;
+    /** Accessible label for informative icons. Omit only when the icon is decorative. */
+    label?: string;
+    /** Application-owned value used when this icon column participates in sorting. */
+    sortValue?: string | number | boolean;
+}
+/** Declarative 16:9 image preview rendered by the table's standard cell primitive. */
+export interface TableCellImage {
+    kind: 'image';
+    /** Optional image source. Omit it to render the standard bordered placeholder. */
+    src?: string;
+    /** Accessible description for either the image or its placeholder. */
+    alt: string;
+}
+interface TableCellActionBase {
+    kind: 'action';
+    /** Stable application-owned action identity emitted with dsCellAction. */
+    actionId: string;
+    /** Add the ButtonUnfilled resting border. Action cells are unbordered by default. */
+    hasBorder?: boolean;
+    isInactive?: boolean;
+    isLoading?: boolean;
+}
+/** Declarative ButtonUnfilled content rendered by the table's standard action cell. */
+export type TableCellAction = TableCellActionBase & ({
+    variant?: 'label';
+    label: string;
+    icon?: never;
+    ariaLabel?: string;
+} | {
+    variant: 'icon-label';
+    label: string;
+    icon: string;
+    ariaLabel?: string;
+} | {
+    variant: 'icon';
+    label?: never;
+    icon: string;
+    ariaLabel: string;
+});
+/** Declarative Tag content rendered by the table's standard cell primitive. */
+export type TableCellTagVariant = 'tag-only' | 'tag-with-text' | 'text-with-tag';
+interface TableCellTagBase {
+    kind: 'tag';
+    label: string;
+    intent?: TagIntent;
+    contrast?: TagContrast;
+    icon?: string;
+    rounded?: boolean;
+}
+export type TableCellTag = TableCellTagBase & ({
+    variant?: 'tag-only';
+    text?: never;
+} | {
+    variant: Exclude<TableCellTagVariant, 'tag-only'>;
+    text: string;
+});
+export type TableCellValue = string | number | null | undefined | TableCellText | TableCellPrimaryText | TableCellTag | TableCellIcon | TableCellImage | TableCellAction | TableCellEmpty | TableCellBlank;
+export interface TableColumn {
+    /** Stable column identity. */
+    id: string;
+    /** Visible column label. May be empty when headerLabel supplies a non-visual name. */
+    header: string;
+    /** Screen-reader-only column name for an intentionally blank visual header. */
+    headerLabel?: string;
+    /** Optional labels for columns that present and sort multiple related data points. */
+    headerSegments?: TableHeaderSegment[];
+    align?: TableCellAlign;
+    sortable?: boolean;
+    /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */
+    size?: TableColumnWidth | number;
+    /** Minimum accepted preferred width in CSS pixels. */
+    minSize?: number;
+    /** Maximum accepted preferred width in CSS pixels. */
+    maxSize?: number;
+    /** Wrap cell text instead of truncating it to one line. */
+    wrap?: boolean;
+    /** Pin one application column to either inline edge during horizontal scrolling. */
+    sticky?: TableColumnSticky;
+}
+export interface TableRow {
+    /** Stable identity, unique across all groups. */
+    id: string;
+    cells: Record<string, TableCellValue>;
+    /** Accessible row name used by its selection control. Falls back to the first cell. */
+    selectionLabel?: string;
+    /** Exclude this row from selection without muting its content. */
+    selectable?: boolean;
+    /** Keep the row visible while disabling its selection control and styling it as inactive. */
+    disabled?: boolean;
+    /** Make the complete row a keyboard- and pointer-activatable application target. */
+    interactive?: boolean;
+}
+export interface TableGroup {
+    /** Stable group identity. */
+    id: string;
+    label: string;
+    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”. */
+    countLabel?: string;
+    rows: TableRow[];
+}
+export interface TableSortChangeDetail {
+    sort: TableSortState | null;
+}
+export interface TableGroupingChangeDetail {
+    grouping: TableGroupingState;
+}
+export interface TableSelectionChangeDetail {
+    selectedRowIds: string[];
+    scope: 'row' | 'all-loaded';
+    changedRowId?: string;
+    selected?: boolean;
+}
+export interface TableLoadMoreDetail {
+    reason: TableLoadMoreReason;
+    loadIdentity: string | number;
+    loadedRowCount: number;
+}
+export interface TableCellActionDetail {
+    actionId: string;
+    rowId: string;
+    columnId: string;
+}
+export interface TableRowActivateDetail {
+    rowId: string;
+}
+export {};
+//# sourceMappingURL=table-types.d.ts.map

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

@@ -9,6 +9,8 @@ export declare class Tag {
     intent: TagIntent;
     contrast: TagContrast;
     size: TagSize;
+    /** Use the reduced outer geometry when nested inside a control of the same size. */
+    isInset: boolean;
     rounded: boolean;
     maxWidth: string | number | undefined;
     /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */