@ds-mo/ui 15.11.1 → 15.12.0

package/dist/mcp-data/registry/tag.json

@@ -435,8 +435,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/text.json

@@ -360,8 +360,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/textarea.json

@@ -675,8 +675,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/time-picker.json

@@ -262,8 +262,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/toast.json

@@ -335,8 +335,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tooltip-chart.json

@@ -254,8 +254,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/tooltip.json

@@ -386,8 +386,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/typing-indicator.json

@@ -108,8 +108,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^8.0.0",
-          "@ds-mo/icons ^8.1.1"
+          "@ds-mo/tokens ^8.0.1",
+          "@ds-mo/icons ^8.1.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -29,6 +29,8 @@ export declare class CardActionCenter {
     sections: ReadonlyArray<CardActionCenterSection>;
     /** Copy shown when no section contains an action. */
     emptyMessage: string;
+    /** Retain sections and rows while replacing their headings, labels, and values with skeletons. */
+    isLoading: boolean;
     /**
      * Emitted when an available row is activated. When a row has an `href`,
      * prevent this event to take over navigation with an application router.

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

@@ -16,6 +16,8 @@ export declare class CardChart {
     /** Renders the standard filter action before custom actions. */
     showFilter: boolean;
     filterLabel: string;
+    /** Skeletonize the header and chart canvas; custom body content owns its loading atoms. */
+    isLoading: boolean;
     /** Emits when the standard header filter control is activated. */
     dsFilterClick: EventEmitter<void>;
     private hasChartSlot;

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

@@ -12,6 +12,8 @@ export declare class CardNavigation {
     heading: string;
     /** Optional supporting copy shown below the heading. */
     description: string | undefined;
+    /** Preserve the card layout while its copy and navigation affordance show skeletons. */
+    isLoading: boolean;
     /**
      * `navigation-only` makes the complete card the link. `content` keeps the
      * header as the link and exposes a non-interactive body slot below it.

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

@@ -20,6 +20,8 @@ export declare class CardSetting {
     variant: CardSettingVariant;
     /** Controlled edit state — parent owns single-edit orchestration. */
     editing: boolean;
+    /** Keep the card and projected content in place while its header shows skeletons. */
+    isLoading: boolean;
     editLabel: string;
     cancelLabel: string;
     saveLabel: string;

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

@@ -27,6 +27,8 @@ export declare class CardSettingsScope {
     profileExpanded: boolean;
     /** Empty informational profile popups use dialog semantics instead of a menu. */
     profilePopup: 'menu' | 'dialog';
+    /** Replace sentence fragments and controls with skeletons inside the same card. */
+    isLoading: boolean;
     /** Requests a popup; the owner supplies choices, open state, and selection. */
     dsScopeRequest: EventEmitter<SettingsScopeRequest>;
     private request;

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

@@ -10,6 +10,8 @@ export declare class Field {
     error: boolean;
     /** Visible error associated with the slotted control while error is true. */
     errorMessage: string | undefined;
+    /** Masks field copy and its mounted control while preserving layout and form state. */
+    isLoading: boolean;
     private constraintMessage;
     private characterCount;
     private characterLimit;
@@ -54,6 +56,7 @@ export declare class Field {
     private handleFocusIn;
     private handleFocusOut;
     private handleValueChange;
+    private renderCopy;
     render(): any;
 }
 //# sourceMappingURL=Field.d.ts.map

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

@@ -1,6 +1,8 @@
 export declare class InlineBannerSettings {
     /** Authored informational copy rendered without transformation. */
     description: string;
+    /** Keep the informational row footprint while its copy is loading. */
+    isLoading: boolean;
     render(): any;
 }
 //# sourceMappingURL=InlineBannerSettings.d.ts.map

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

@@ -34,18 +34,19 @@ export declare class InputDate {
     private inputEl?;
     private controlEl?;
     private calendarButton?;
-    private closeTimer;
     private formDisabled;
     private focused;
     private touched;
     private draftText;
-    private open;
-    private shouldRender;
-    private closing;
+    private popupPhase;
     private positionReady;
     private pos;
     private readonly position;
     private readonly interaction;
+    private readonly pickerPopup;
+    private get open();
+    private get shouldRender();
+    private get closing();
     private get popupFallbackWidth();
     private get popupFallbackHeight();
     private get formInactive();
@@ -64,10 +65,8 @@ export declare class InputDate {
     private get displayValue();
     private parseDraft;
     private commitIso;
-    private teardownListeners;
     private openPicker;
     private closePicker;
-    private finishClose;
     private togglePicker;
     private handleInput;
     private handleFocus;

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

@@ -38,18 +38,19 @@ export declare class InputTime {
     private inputEl?;
     private controlEl?;
     private clockButton?;
-    private closeTimer;
     private formDisabled;
     private focused;
     private touched;
     private draftText;
-    private open;
-    private shouldRender;
-    private closing;
+    private popupPhase;
     private positionReady;
     private pos;
     private readonly position;
     private readonly interaction;
+    private readonly pickerPopup;
+    private get open();
+    private get shouldRender();
+    private get closing();
     private get popupFallbackWidth();
     private get popupFallbackHeight();
     private get formInactive();
@@ -69,10 +70,8 @@ export declare class InputTime {
     private get displayValue();
     private parseDraft;
     private commitIso;
-    private teardownListeners;
     private openPicker;
     private closePicker;
-    private finishClose;
     private togglePicker;
     private handleInput;
     private handleFocus;

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

@@ -34,6 +34,9 @@ export declare class Pagination {
     showFirstLastButtons: boolean;
     /** Prevent interaction while the owner replaces the current data page. */
     loading: boolean;
+    /** Show skeletons for the existing controls without changing their geometry. */
+    chromeLoading: boolean;
+    private get busy();
     /** Emits the complete next controlled state after a page or page-size request. */
     dsChange: EventEmitter<PaginationChangeDetail>;
     private tableCompact;

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

@@ -32,6 +32,8 @@ export declare class Radio {
     direction: 'vertical' | 'horizontal';
     /** Design-system inactive state for the complete set. */
     isInactive: boolean;
+    /** Preserve each option while replacing its circle and copy with loading atoms. */
+    isLoading: boolean;
     /** Show full-row hover and pressed feedback for choice-list presentations. */
     hasInteractionFill: boolean;
     /** Accessible name when visible group labeling is unavailable. */

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

@@ -10,6 +10,8 @@ export declare class SettingRowRadio {
     valueLabel?: string;
     /** Optional consequence or supporting copy for the saved option. */
     description?: string;
+    /** Skeletonize the row copy without changing the saved choice or edit presentation. */
+    isLoading: boolean;
     private readonly headingId;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -10,6 +10,8 @@ export declare class SettingRowToggle {
     checked: boolean;
     /** Prevent changes while the setting is unavailable. */
     disabled: boolean;
+    /** Preserve the real row geometry while replacing copy and switch with skeletons. */
+    isLoading: boolean;
     /** Typography recipe for the setting copy. */
     variant: SettingRowToggleVariant;
     /** Requests the next value; the application owns acceptance and persistence. */

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

@@ -1,8 +1,11 @@
 import type { IconSize } from '../Icon/Icon';
 import type { TextVariant } from '../Text/text-types';
-import type { ControlSize } from '../../utils/control-text';
+import { type ControlSize } from '../../utils/control-text';
 export type SkeletonVariant = 'text' | 'icon' | 'control';
+export type SkeletonControlAppearance = 'filled' | 'outlined' | 'borderless';
+export type SkeletonControlContent = 'label' | 'icon' | 'icon-label' | 'label-icon' | 'icon-label-icon';
 export type SkeletonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'navigation' | 'always-dark';
+/** @slot - Real text or a control whose footprint is retained with preserveLayout. */
 export declare class Skeleton {
     variant: SkeletonVariant;
     /** Text metric recipe whose line-height defines the text canvas. */
@@ -11,15 +14,24 @@ export declare class Skeleton {
     iconSize: IconSize;
     /** Shared control-density size whose height defines the control canvas. */
     controlSize: ControlSize;
+    /** Filled controls replace the entire shape; other appearances retain the frame and mask its contents. */
+    controlAppearance: SkeletonControlAppearance;
+    /** Content anatomy for outlined and borderless control placeholders. */
+    controlContent: SkeletonControlContent;
     /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */
     width: string | number | undefined;
     /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */
     rounded: boolean;
     /** Whether to show the shimmer animation. */
     shimmer: boolean;
+    /** Derive geometry from a projected control or text instead of estimating its footprint. */
+    preserveLayout: boolean;
+    /** With preserveLayout, reveal the same projected content when loading completes. */
+    isLoading: boolean;
     /** Actual parent surface context. Omit on primary and secondary surfaces. */
     background: SkeletonBackground | undefined;
     private get widthCss();
+    private renderControl;
     render(): any;
 }
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,2 +1,2 @@
-export type { SkeletonBackground, SkeletonVariant } from './Skeleton';
+export type { SkeletonBackground, SkeletonVariant, SkeletonControlAppearance, SkeletonControlContent, } from './Skeleton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -99,7 +99,7 @@ export declare class Table {
     surfaceOpenRowId: string | undefined;
     /** Initial loading state. Existing rows stay visible; incremental loading uses loadingMore. */
     loading: boolean;
-    /** Replace opted-in table-owned caption controls with same-size visual skeletons. */
+    /** Replace column headers and table-owned caption controls with same-size visual skeletons. */
     chromeLoading: boolean;
     /** Initial-loading rows. Defaults to ten so bounded tables retain a useful filled viewport. */
     skeletonRows: number;
@@ -173,37 +173,14 @@ export declare class Table {
     private truncateTooltipLabel;
     private captionCompact;
     private narrowViewport;
-    private columnCustomizerOpen;
-    private columnCustomizerSurfaceOpen;
-    private columnCustomizerInitialFocusVisible;
-    private dataModeSwitcherOpen;
-    private dataModeSwitcherSurfaceOpen;
-    private dataModeSwitcherInitialFocusVisible;
+    private captionMenus;
     private virtualWindow;
-    private activeCell;
-    private editingCell;
-    private editDraft;
-    private gridModelCache?;
-    private get gridEnabled();
-    private get editingEnabled();
-    private get gridModel();
-    private gridAddress;
-    private selectCell;
-    private focusCell;
-    private isEditableAddress;
-    private beginCellEdit;
-    private handleGridKeyDown;
-    private handleGridClipboard;
-    private renderCellEditor;
-    private renderCellEditTrigger;
-    private gridCellAttributes;
+    private cellInteraction;
     private readonly actionMenuElementId;
     private structureCache?;
     private get structure();
     private headerId;
     private columnBandId;
-    private readonly columnCustomizerElementId;
-    private readonly dataModeSwitcherElementId;
     private truncateTooltipEl?;
     private truncateAnchor;
     private truncateTooltipBound;
@@ -239,6 +216,8 @@ export declare class Table {
     private fitObservedTable;
     private fitMeasurementPending;
     private cardViewportQuery;
+    private readonly editingController;
+    private readonly captionController;
     private readonly bodyRenderer;
     private readonly layoutController;
     private readonly loadController;
@@ -280,16 +259,11 @@ export declare class Table {
     handleLoadingMoreChange(loading: boolean): void;
     handleLoadMoreErrorChange(error: string | undefined): void;
     handleHasMoreChange(hasMore: boolean, hadMore: boolean): void;
-    handleColumnCustomizerAvailability(): void;
-    handleDataModeSwitcherAvailability(): void;
-    handleChromeLoadingChange(loading: boolean): void;
+    handleCaptionAvailability(): void;
     private get grouped();
     private get hasIncrementalState();
     private get selectable();
     private get visibleColumns();
-    private get showsColumnCustomizer();
-    private get showsDataModeSwitcher();
-    private get showsCaptionTrailing();
     private get documentStickyHeader();
     private get fixedHeight();
     private get boundedComposition();
@@ -368,23 +342,6 @@ export declare class Table {
     private get resultSummary();
     private get hasResultFooter();
     private renderResultFooter;
-    private renderCaptionBar;
-    private renderCaptionTrailing;
-    private renderDataModeSwitcherTrigger;
-    private renderDataModeSwitcherMenu;
-    private toggleDataModeSwitcher;
-    private openDataModeSwitcher;
-    private closeDataModeSwitcher;
-    private handleDataModeSwitcherSelect;
-    private renderColumnCustomizerTrigger;
-    private renderColumnCustomizerMenu;
-    private toggleColumnCustomizer;
-    private openColumnCustomizer;
-    private closeColumnCustomizer;
-    private emitColumnsConfigChange;
-    private handleColumnCustomizerReorder;
-    private handleColumnCustomizerAction;
-    private handleColumnCustomizerSelect;
     render(): any;
 }
 //# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1,54 @@
+import type { MenuItemData } from '../Menu/menu-types';
+import type { DataFieldsConfigChangeDetail, TableCaptionVisibility, TableColumn, TableDataMode, TableDataModeChangeDetail } from './table-types';
+export interface TableCaptionState {
+    columnCustomizerOpen: boolean;
+    columnCustomizerSurfaceOpen: boolean;
+    columnCustomizerInitialFocusVisible: boolean;
+    dataModeSwitcherOpen: boolean;
+    dataModeSwitcherSurfaceOpen: boolean;
+    dataModeSwitcherInitialFocusVisible: boolean;
+}
+export declare function createTableCaptionState(): TableCaptionState;
+interface TableCaptionContext {
+    caption: string;
+    captionVisibility: TableCaptionVisibility;
+    headerPresent: boolean;
+    headerUsesToolbar: boolean;
+    captionTrailingPresent: boolean;
+    captionCompact: boolean;
+    columnCustomizer: boolean;
+    hideColumnCustomizerTrigger: boolean;
+    captionControlsBorderless: boolean;
+    chromeLoading: boolean;
+    columns: TableColumn[];
+    hiddenFieldIds: string[];
+    fieldOrder: string[];
+    pinnedFieldIds: string[];
+    customizeOptions: MenuItemData[];
+    dataModeSwitcher: boolean;
+    dataModeSwitcherLabel: string;
+    dataModeMenuLabel: string;
+    dataMode: TableDataMode;
+    infiniteModeLabel: string;
+    paginationModeLabel: string;
+    virtualModeLabel: string;
+}
+interface TableCaptionControllerOptions {
+    host: () => HTMLElement;
+    state: () => TableCaptionContext;
+    menus: () => TableCaptionState;
+    change: (patch: Partial<TableCaptionState>) => void;
+    headerSlotChange: () => void;
+    fieldsChange: (detail: DataFieldsConfigChangeDetail) => void;
+    dataModeChange: (detail: TableDataModeChangeDetail) => void;
+    customizeOptionChange: (value: string) => void;
+}
+/** Owns caption composition and menu interaction, using controlled field and mode inputs. */
+export declare function createTableCaptionController(options: TableCaptionControllerOptions): {
+    disconnect: () => void;
+    reconcile: () => void;
+    renderMenus: () => any[];
+    renderBar: () => any;
+};
+export {};
+//# sourceMappingURL=table-caption-controller.d.ts.map

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

@@ -1,4 +1,4 @@
 import type { TableCellEditor } from './table-types';
-/** Shared controls own field behavior; Table owns the draft, cell chrome and commit boundary. */
+/** Shared controls own field behavior; the editing controller owns drafts and commits. */
 export declare function renderTableCellEditor(editor: TableCellEditor, value: string, ariaLabel: string, anchor: HTMLElement | undefined, change: (value: string) => void): any;
 //# sourceMappingURL=table-cell-editor.d.ts.map

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

@@ -0,0 +1,37 @@
+import type { TableCellAddress, TableCellRange, TableCellsChangeDetail, TableColumn, TableRow } from './table-types';
+export interface TableEditingState {
+    activeCell: TableCellAddress | null;
+    editingCell: TableCellAddress | null;
+}
+interface TableEditingContext {
+    rows: TableRow[];
+    columns: TableColumn[];
+    mode: 'table' | 'edit' | 'grid';
+    loading: boolean;
+    cellRange: TableCellRange | null;
+}
+interface TableEditingControllerOptions {
+    host: () => HTMLElement;
+    state: () => TableEditingContext;
+    interaction: () => TableEditingState;
+    change: (patch: Partial<TableEditingState>) => void;
+    rangeChange: (range: TableCellRange) => void;
+    cellsChange: (detail: TableCellsChangeDetail) => void;
+    announce: (message: string) => void;
+    focusRow: (rowId: string) => void;
+    revealRow: (rowId: string) => Promise<boolean>;
+    findRow: (rowId: string) => HTMLElement | null;
+}
+/** Owns cell drafts, grid interaction and deferred focus; controlled data stays with Table. */
+export declare function createTableEditingController(options: TableEditingControllerOptions): {
+    readonly gridEnabled: boolean;
+    readonly enabled: boolean;
+    disconnect: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleClipboard: (event: ClipboardEvent) => void;
+    renderEditor: (row: TableRow, column: TableColumn) => any;
+    renderEditTrigger: (row: TableRow, column: TableColumn) => any;
+    cellAttributes: (row: TableRow, column: TableColumn) => Record<string, unknown>;
+};
+export {};
+//# sourceMappingURL=table-editing-controller.d.ts.map