@ds-mo/ui 14.6.0 → 14.8.0

package/dist/types/components.d.ts

@@ -35,7 +35,7 @@ import { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 import { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 import { InputSize, InputType, InputWidth } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
-import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+import { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 import { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
@@ -54,7 +54,7 @@ import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 import { PanelToolsHeaderAction, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
-import { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
+import { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
 import { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 import { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
@@ -64,7 +64,8 @@ import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
 import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableDataModeChangeDetail, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+import { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDetail, TableSavedViewDiscardDetail, TableSavedViewRemoveDetail, TableSavedViewRenameDetail, TableSavedViewSaveDetail } from "./components/TableSavedViews/table-saved-views-types";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -99,7 +100,7 @@ export { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 export { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 export { InputSize, InputType, InputWidth } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
-export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+export { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 export { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
@@ -118,7 +119,7 @@ export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 export { PanelToolsHeaderAction, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
-export { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
+export { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
 export { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 export { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
@@ -128,7 +129,8 @@ export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
 export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableDataModeChangeDetail, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+export { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDetail, TableSavedViewDiscardDetail, TableSavedViewRemoveDetail, TableSavedViewRenameDetail, TableSavedViewSaveDetail } from "./components/TableSavedViews/table-saved-views-types";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -690,7 +692,7 @@ export namespace Components {
          */
         "hasBorder": boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Preferences` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu": boolean;
@@ -2859,6 +2861,16 @@ export namespace Components {
           * @default []
          */
         "collapsedGroupIds": string[];
+        /**
+          * Opt in to the table-owned column customizer. The `columns` prop remains the catalog; hidden and ordered columns are controlled separately. The trigger opens the shared Menu of live show/hide switch rows.
+          * @default false
+         */
+        "columnCustomizer": boolean;
+        /**
+          * Controlled data-column identities in display order. Omitted ids append in catalog order.
+          * @default []
+         */
+        "columnOrder": string[];
         /**
           * Stable column definitions. Assign through JavaScript.
           * @default []
@@ -2869,6 +2881,19 @@ export namespace Components {
           * @default 'infinite'
          */
         "dataMode": TableDataMode;
+        /**
+          * @default 'Table variation'
+         */
+        "dataModeMenuLabel": string;
+        /**
+          * Opt in to the table-owned control for choosing between supported data modes.
+          * @default false
+         */
+        "dataModeSwitcher": boolean;
+        /**
+          * @default 'Change table variation'
+         */
+        "dataModeSwitcherLabel": string;
         /**
           * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
          */
@@ -2954,6 +2979,15 @@ export namespace Components {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height": string | number | undefined;
+        /**
+          * Controlled hidden data-column identities. Action ids are ignored.
+          * @default []
+         */
+        "hiddenColumnIds": string[];
+        /**
+          * @default 'Infinite scroll'
+         */
+        "infiniteModeLabel": string;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -2995,6 +3029,10 @@ export namespace Components {
           * @default null
          */
         "pagination": TablePaginationState | null;
+        /**
+          * @default 'Pagination + Infinite groups'
+         */
+        "paginationModeLabel": string;
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -3053,6 +3091,55 @@ export namespace Components {
          */
         "viewportInsetBlockStart": string | number;
     }
+    interface DsTableSavedViews {
+        /**
+          * Footer action label that opens the create-view dialog.
+          * @default 'New view'
+         */
+        "createLabel": string;
+        /**
+          * ID used for the built-in default view.
+          * @default '__default__'
+         */
+        "defaultViewId": string;
+        /**
+          * Label used for the built-in default view.
+          * @default 'Default'
+         */
+        "defaultViewLabel": string;
+        /**
+          * Whether the current table state differs from the selected view.
+          * @default false
+         */
+        "dirty": boolean;
+        /**
+          * Accessible name for the saved-views select.
+          * @default 'Saved views'
+         */
+        "label": string;
+        /**
+          * Trigger label shown while the default view is selected.
+          * @default 'Views'
+         */
+        "triggerLabel": string;
+        /**
+          * ID of the controlled active view, including the default view ID.
+          * @default '__default__'
+         */
+        "value": string;
+        /**
+          * Application-owned custom saved views. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "views": TableSavedView[];
+    }
+    interface DsTableToolbar {
+        /**
+          * Accessible name for the grouped table controls.
+          * @default 'Table controls'
+         */
+        "label": string;
+    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -3496,6 +3583,10 @@ export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
 }
+export interface DsTableSavedViewsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableSavedViewsElement;
+}
 export interface DsTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTagElement;
@@ -3982,6 +4073,7 @@ declare global {
         "dsAfterClose": void;
         "dsSelect": MenuItemData;
         "dsSwatchSelect": string;
+        "dsReorder": MenuReorderDetail;
     }
     interface HTMLDsMenuElement extends Components.DsMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsMenuElementEventMap>(type: K, listener: (this: HTMLDsMenuElement, ev: DsMenuCustomEvent<HTMLDsMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4319,6 +4411,7 @@ declare global {
         "dsOpenChange": boolean;
         "dsFooterAction": void;
         "dsOptionAction": SelectOptionActionDetail;
+        "dsOptionSubtextAction": SelectOptionSubtextActionDetail;
     }
     interface HTMLDsSelectElement extends Components.DsSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsSelectElementEventMap>(type: K, listener: (this: HTMLDsSelectElement, ev: DsSelectCustomEvent<HTMLDsSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4484,6 +4577,8 @@ declare global {
         "dsPaginationChange": PaginationChangeDetail;
         "dsCellAction": TableCellActionDetail;
         "dsRowActivate": TableRowActivateDetail;
+        "dsColumnsConfigChange": TableColumnsConfigChangeDetail;
+        "dsDataModeChange": TableDataModeChangeDetail;
     }
     interface HTMLDsTableElement extends Components.DsTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4499,6 +4594,34 @@ declare global {
         prototype: HTMLDsTableElement;
         new (): HTMLDsTableElement;
     };
+    interface HTMLDsTableSavedViewsElementEventMap {
+        "dsViewChange": TableSavedViewChangeDetail;
+        "dsViewCreate": TableSavedViewCreateDetail;
+        "dsViewRename": TableSavedViewRenameDetail;
+        "dsViewRemove": TableSavedViewRemoveDetail;
+        "dsViewSave": TableSavedViewSaveDetail;
+        "dsViewDiscard": TableSavedViewDiscardDetail;
+    }
+    interface HTMLDsTableSavedViewsElement extends Components.DsTableSavedViews, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableSavedViewsElementEventMap>(type: K, listener: (this: HTMLDsTableSavedViewsElement, ev: DsTableSavedViewsCustomEvent<HTMLDsTableSavedViewsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsTableSavedViewsElementEventMap>(type: K, listener: (this: HTMLDsTableSavedViewsElement, ev: DsTableSavedViewsCustomEvent<HTMLDsTableSavedViewsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsTableSavedViewsElement: {
+        prototype: HTMLDsTableSavedViewsElement;
+        new (): HTMLDsTableSavedViewsElement;
+    };
+    interface HTMLDsTableToolbarElement extends Components.DsTableToolbar, HTMLStencilElement {
+    }
+    var HTMLDsTableToolbarElement: {
+        prototype: HTMLDsTableToolbarElement;
+        new (): HTMLDsTableToolbarElement;
+    };
     interface HTMLDsTagElementEventMap {
         "dsClick": MouseEvent;
     }
@@ -4644,6 +4767,8 @@ declare global {
         "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
         "ds-table": HTMLDsTableElement;
+        "ds-table-saved-views": HTMLDsTableSavedViewsElement;
+        "ds-table-toolbar": HTMLDsTableToolbarElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
         "ds-toast": HTMLDsToastElement;
@@ -5262,7 +5387,7 @@ declare namespace LocalJSX {
          */
         "hasBorder"?: boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Preferences` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu"?: boolean;
@@ -6105,6 +6230,10 @@ declare namespace LocalJSX {
          */
         "onDsAfterClose"?: (event: DsMenuCustomEvent<void>) => void;
         "onDsClose"?: (event: DsMenuCustomEvent<void>) => void;
+        /**
+          * Emitted after a pointer drop or keyboard move; Menu never mutates item order.
+         */
+        "onDsReorder"?: (event: DsMenuCustomEvent<MenuReorderDetail>) => void;
         "onDsSelect"?: (event: DsMenuCustomEvent<MenuItemData>) => void;
         /**
           * Emitted when a generic `swatch-picker` section option is chosen.
@@ -7078,6 +7207,10 @@ declare namespace LocalJSX {
           * Emitted when an option's contextual ellipsis action is activated.
          */
         "onDsOptionAction"?: (event: DsSelectCustomEvent<SelectOptionActionDetail>) => void;
+        /**
+          * Emitted when an option's supporting text action is activated.
+         */
+        "onDsOptionSubtextAction"?: (event: DsSelectCustomEvent<SelectOptionSubtextActionDetail>) => void;
         /**
           * Controlled popup visibility.
           * @default false
@@ -7645,6 +7778,16 @@ declare namespace LocalJSX {
           * @default []
          */
         "collapsedGroupIds"?: string[];
+        /**
+          * Opt in to the table-owned column customizer. The `columns` prop remains the catalog; hidden and ordered columns are controlled separately. The trigger opens the shared Menu of live show/hide switch rows.
+          * @default false
+         */
+        "columnCustomizer"?: boolean;
+        /**
+          * Controlled data-column identities in display order. Omitted ids append in catalog order.
+          * @default []
+         */
+        "columnOrder"?: string[];
         /**
           * Stable column definitions. Assign through JavaScript.
           * @default []
@@ -7655,6 +7798,19 @@ declare namespace LocalJSX {
           * @default 'infinite'
          */
         "dataMode"?: TableDataMode;
+        /**
+          * @default 'Table variation'
+         */
+        "dataModeMenuLabel"?: string;
+        /**
+          * Opt in to the table-owned control for choosing between supported data modes.
+          * @default false
+         */
+        "dataModeSwitcher"?: boolean;
+        /**
+          * @default 'Change table variation'
+         */
+        "dataModeSwitcherLabel"?: string;
         /**
           * Optional result summary footer. When both `displayedCount` and `totalCount` are finite numbers, the table shows “Displaying {displayed} of {total}”.
          */
@@ -7740,6 +7896,15 @@ declare namespace LocalJSX {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height"?: string | number | undefined;
+        /**
+          * Controlled hidden data-column identities. Action ids are ignored.
+          * @default []
+         */
+        "hiddenColumnIds"?: string[];
+        /**
+          * @default 'Infinite scroll'
+         */
+        "infiniteModeLabel"?: string;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -7777,6 +7942,8 @@ declare namespace LocalJSX {
          */
         "maxHeight"?: string | number | undefined;
         "onDsCellAction"?: (event: DsTableCustomEvent<TableCellActionDetail>) => void;
+        "onDsColumnsConfigChange"?: (event: DsTableCustomEvent<TableColumnsConfigChangeDetail>) => void;
+        "onDsDataModeChange"?: (event: DsTableCustomEvent<TableDataModeChangeDetail>) => void;
         "onDsGroupCollapseChange"?: (event: DsTableCustomEvent<TableGroupCollapseChangeDetail>) => void;
         "onDsGroupLoadMore"?: (event: DsTableCustomEvent<TableGroupLoadMoreDetail>) => void;
         "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
@@ -7789,6 +7956,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "pagination"?: TablePaginationState | null;
+        /**
+          * @default 'Pagination + Infinite groups'
+         */
+        "paginationModeLabel"?: string;
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -7847,6 +8018,79 @@ declare namespace LocalJSX {
          */
         "viewportInsetBlockStart"?: string | number;
     }
+    interface DsTableSavedViews {
+        /**
+          * Footer action label that opens the create-view dialog.
+          * @default 'New view'
+         */
+        "createLabel"?: string;
+        /**
+          * ID used for the built-in default view.
+          * @default '__default__'
+         */
+        "defaultViewId"?: string;
+        /**
+          * Label used for the built-in default view.
+          * @default 'Default'
+         */
+        "defaultViewLabel"?: string;
+        /**
+          * Whether the current table state differs from the selected view.
+          * @default false
+         */
+        "dirty"?: boolean;
+        /**
+          * Accessible name for the saved-views select.
+          * @default 'Saved views'
+         */
+        "label"?: string;
+        /**
+          * Emitted when a view selection is requested.
+         */
+        "onDsViewChange"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewChangeDetail>) => void;
+        /**
+          * Emitted after a valid create-view name is submitted.
+         */
+        "onDsViewCreate"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewCreateDetail>) => void;
+        /**
+          * Emitted when the active custom view's stored payload should be restored.
+         */
+        "onDsViewDiscard"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewDiscardDetail>) => void;
+        /**
+          * Emitted when a custom view removal is requested.
+         */
+        "onDsViewRemove"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewRemoveDetail>) => void;
+        /**
+          * Emitted after a valid renamed view name is submitted.
+         */
+        "onDsViewRename"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewRenameDetail>) => void;
+        /**
+          * Emitted when changes to the active custom view should replace its stored payload.
+         */
+        "onDsViewSave"?: (event: DsTableSavedViewsCustomEvent<TableSavedViewSaveDetail>) => void;
+        /**
+          * Trigger label shown while the default view is selected.
+          * @default 'Views'
+         */
+        "triggerLabel"?: string;
+        /**
+          * ID of the controlled active view, including the default view ID.
+          * @default '__default__'
+         */
+        "value"?: string;
+        /**
+          * Application-owned custom saved views. Assign arrays through the JavaScript property.
+          * @default []
+         */
+        "views"?: TableSavedView[];
+    }
+    interface DsTableToolbar {
+        /**
+          * Accessible name for the grouped table controls.
+          * @default 'Table controls'
+         */
+        "label"?: string;
+    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -8752,6 +8996,7 @@ declare namespace LocalJSX {
     interface DsTableAttributes {
         "caption": string;
         "captionVisibility": TableCaptionVisibility;
+        "columnCustomizer": boolean;
         "displayedCount": number | undefined;
         "totalCount": number | undefined;
         "resultSummaryLabel": string;
@@ -8772,6 +9017,11 @@ declare namespace LocalJSX {
         "errorBody": string;
         "emptyCellLabel": string;
         "dataMode": TableDataMode;
+        "dataModeSwitcher": boolean;
+        "dataModeSwitcherLabel": string;
+        "dataModeMenuLabel": string;
+        "infiniteModeLabel": string;
+        "paginationModeLabel": string;
         "loadMoreMode": TableLoadMoreMode;
         "hasMore": boolean;
         "loadingMore": boolean;
@@ -8790,6 +9040,18 @@ declare namespace LocalJSX {
         "groupEndOfResultsLabel": string;
         "groupRowsLoadedLabel": string;
     }
+    interface DsTableSavedViewsAttributes {
+        "value": string;
+        "dirty": boolean;
+        "defaultViewId": string;
+        "defaultViewLabel": string;
+        "label": string;
+        "triggerLabel": string;
+        "createLabel": string;
+    }
+    interface DsTableToolbarAttributes {
+        "label": string;
+    }
     interface DsTagAttributes {
         "label": string;
         "icon": string;
@@ -8917,6 +9179,8 @@ declare namespace LocalJSX {
         "ds-switch": Omit<DsSwitch, keyof DsSwitchAttributes> & { [K in keyof DsSwitch & keyof DsSwitchAttributes]?: DsSwitch[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `attr:${K}`]?: DsSwitchAttributes[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `prop:${K}`]?: DsSwitch[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
         "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] } & OneOf<"caption", DsTable["caption"], DsTableAttributes["caption"]>;
+        "ds-table-saved-views": Omit<DsTableSavedViews, keyof DsTableSavedViewsAttributes> & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes]?: DsTableSavedViews[K] } & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes as `attr:${K}`]?: DsTableSavedViewsAttributes[K] } & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes as `prop:${K}`]?: DsTableSavedViews[K] };
+        "ds-table-toolbar": Omit<DsTableToolbar, keyof DsTableToolbarAttributes> & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes]?: DsTableToolbar[K] } & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes as `attr:${K}`]?: DsTableToolbarAttributes[K] } & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes as `prop:${K}`]?: DsTableToolbar[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
         "ds-toast": Omit<DsToast, keyof DsToastAttributes> & { [K in keyof DsToast & keyof DsToastAttributes]?: DsToast[K] } & { [K in keyof DsToast & keyof DsToastAttributes as `attr:${K}`]?: DsToastAttributes[K] } & { [K in keyof DsToast & keyof DsToastAttributes as `prop:${K}`]?: DsToast[K] };
@@ -9009,6 +9273,8 @@ declare module "@stencil/core" {
             "ds-switch": LocalJSX.IntrinsicElements["ds-switch"] & JSXBase.HTMLAttributes<HTMLDsSwitchElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
+            "ds-table-saved-views": LocalJSX.IntrinsicElements["ds-table-saved-views"] & JSXBase.HTMLAttributes<HTMLDsTableSavedViewsElement>;
+            "ds-table-toolbar": LocalJSX.IntrinsicElements["ds-table-toolbar"] & JSXBase.HTMLAttributes<HTMLDsTableToolbarElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;
             "ds-toast": LocalJSX.IntrinsicElements["ds-toast"] & JSXBase.HTMLAttributes<HTMLDsToastElement>;

package/dist/types/utils/choice-list-parts.d.ts

@@ -43,6 +43,7 @@ interface ChoiceOptionRowProps {
     focusRingVisible: boolean;
     usesSubtext: boolean;
     leading?: VNode;
+    supporting?: VNode;
     action?: VNode;
     actionOpen?: boolean;
     popupRole?: 'listbox' | 'grid';

package/dist/types/utils/choice-list.d.ts

@@ -7,6 +7,13 @@ export interface ChoiceOption {
     isInactive?: boolean;
     /** Optional contextual action shown at the trailing edge of this option. */
     action?: ChoiceOptionAction;
+    /** Optional compact actions rendered as supporting content beneath the option label. */
+    subtextActions?: ChoiceOptionSubtextAction[];
+}
+export interface ChoiceOptionSubtextAction {
+    label: string;
+    value: string;
+    tone?: 'action' | 'negative';
 }
 export interface ChoiceOptionAction {
     /** Accessible name for the fixed ellipsis action. */
@@ -26,7 +33,7 @@ export declare function resolveChoiceSections(options: ChoiceOption[], sections:
 export declare function flattenChoiceSections(sections: ChoiceSection[]): ChoiceOption[];
 /** A choice list has one stable row layout: every option has an icon, or none do. */
 export declare function choiceListUsesIcons(options: ChoiceOption[]): boolean;
-/** Once one option needs supporting text, every row keeps the same two-line structure. */
+/** Descriptive subtext gives the complete list one stable two-line row layout. */
 export declare function choiceListUsesSubtext(options: ChoiceOption[]): boolean;
 export declare function filterChoiceSections(sections: ChoiceSection[], searchTerm: string): ChoiceSection[];
 export declare function enabledChoiceIndexes(options: ChoiceOption[]): number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.6.0",
+  "version": "14.8.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",