@ds-mo/ui 13.11.0 → 13.12.0

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/ShellApp/shell-app-types.d.ts

@@ -5,6 +5,7 @@ import type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';
 import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from '../PanelNav/panel-nav-types';
 import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem } from '../PanelTools/panel-tools-types';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
+import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
 /**
  * Router-owned application navigation supplied to managed ShellApp.
@@ -67,7 +68,9 @@ export interface ShellPageChromeConfig {
     mobileActions?: PanelToolsHeaderAction[];
     actionsAriaLabel?: string;
     tone?: MobileHeaderTone;
-    contentInset?: 'default' | 'none';
+    contentInset?: ShellPageContentInset;
+    /** Canvas surface painted by ShellPage around and beneath routed content. */
+    contentSurface?: ShellPageContentSurface;
 }
 /**
  * Product-owned global tools supplied to managed ShellApp. Tool view content

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

@@ -1,5 +1,5 @@
 import type { ShellResponsiveMode } from '../../shell/shell-responsive';
-import type { ShellPageCapacity, ShellPageContentInset, ShellPageHeaderPresentation } from './shell-page-types';
+import type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from './shell-page-types';
 export declare class ShellPage {
     private static readonly MAX_HEADER_REVEAL_FRAMES;
     private static readonly MAX_HEADER_GEOMETRY_FRAMES;
@@ -10,6 +10,8 @@ export declare class ShellPage {
     headerCapacity?: ShellPageCapacity;
     /** Standard page gutters, or no inset for full-bleed page content. */
     contentInset: ShellPageContentInset;
+    /** Canvas surface painted around and beneath routed page content. */
+    contentSurface: ShellPageContentSurface;
     /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */
     responsiveMode: ShellResponsiveMode;
     private pageTopVisible;

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

@@ -1,3 +1,3 @@
 export { ShellPage } from './ShellPage';
-export type { ShellPageCapacity, ShellPageContentInset, ShellPageHeaderPresentation, } from './shell-page-types';
+export type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation, } from './shell-page-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/ShellPage/shell-page-types.d.ts

@@ -1,5 +1,6 @@
 import type { BarTitleVariant } from '../BarTitle/bar-title-types';
 export type ShellPageHeaderPresentation = 'auto' | BarTitleVariant;
 export type ShellPageContentInset = 'default' | 'none';
+export type ShellPageContentSurface = 'primary' | 'secondary';
 export type ShellPageCapacity = 'roomy' | 'compact' | 'constrained';
 //# sourceMappingURL=shell-page-types.d.ts.map

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,115 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, 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>;
+    private overflowStart;
+    private overflowEnd;
+    private scrollable;
+    private intersectionSupported;
+    private announcement;
+    private viewportEl;
+    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 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 resetLoadRequest;
+    private disconnectIntersectionObserver;
+    private connectIntersectionObserver;
+    private requestLoadMore;
+    private emitSort;
+    private sortButtonLabel;
+    private emitRowSelection;
+    private emitAllSelection;
+    private renderSelectionControl;
+    private renderColumnHeader;
+    private renderCellValue;
+    private renderRow;
+    private renderDataBodies;
+    private renderSkeletonBody;
+    private renderStateBody;
+    private renderLazyBody;
+    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, TableColumnWidth, TableGroup, TableHeaderSegment, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TableRow, 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,178 @@
+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 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;
+    header: 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;
+}
+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;
+}
+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 {};
+//# 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. */