@ds-mo/ui 14.7.0 → 14.9.0

package/dist/types/components.d.ts

@@ -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, TableColumnsConfigChangeDetail, 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";
@@ -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, TableColumnsConfigChangeDetail, 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";
@@ -2879,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}”.
          */
@@ -2969,6 +2984,10 @@ export namespace Components {
           * @default []
          */
         "hiddenColumnIds": string[];
+        /**
+          * @default 'Infinite scroll'
+         */
+        "infiniteModeLabel": string;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -3010,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}'
@@ -3068,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.
@@ -3511,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;
@@ -4335,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;
@@ -4501,6 +4578,7 @@ declare global {
         "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;
@@ -4516,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;
     }
@@ -4661,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;
@@ -7099,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
@@ -7686,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}”.
          */
@@ -7776,6 +7901,10 @@ declare namespace LocalJSX {
           * @default []
          */
         "hiddenColumnIds"?: string[];
+        /**
+          * @default 'Infinite scroll'
+         */
+        "infiniteModeLabel"?: string;
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -7814,6 +7943,7 @@ 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;
@@ -7826,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}'
@@ -7884,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.
@@ -8810,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;
@@ -8828,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;
@@ -8955,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] };
@@ -9047,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.7.0",
+  "version": "14.9.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-BAgjMUt3.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["resolveChoiceSections","options","sections","length","flattenChoiceSections","flatMap","section","choiceListUsesIcons","every","option","Boolean","icon","choiceListUsesSubtext","some","subtext","trim","filterChoiceSections","searchTerm","normalized","toLocaleLowerCase","map","sectionMatches","header","includes","filter","label","enabledChoiceIndexes","index","isInactive","moveChoiceIndex","currentIndex","direction","enabled","currentEnabledIndex","indexOf","start","findChoiceTypeaheadMatch","query","offset","Math","max","startsWith","choiceBackgroundClassMap","background"],"sources":["src/wc/utils/choice-list.ts"],"sourcesContent":["export interface ChoiceOption {\n  label: string;\n  value: string;\n  subtext?: string;\n  /** Rendered only when every option in the complete list supplies an icon. */\n  icon?: string;\n  isInactive?: boolean;\n  /** Optional contextual action shown at the trailing edge of this option. */\n  action?: ChoiceOptionAction;\n}\n\nexport interface ChoiceOptionAction {\n  /** Accessible name for the fixed ellipsis action. */\n  label: string;\n  /** ID of the popup controlled by the action. */\n  controls?: string;\n  /** Keep the action visible and expose its controlled popup state. */\n  expanded?: boolean;\n}\n\nexport interface ChoiceSection {\n  header?: string;\n  options: ChoiceOption[];\n  divider?: boolean;\n}\n\nexport type ChoiceBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport function resolveChoiceSections(\n  options: ChoiceOption[],\n  sections: ChoiceSection[],\n): ChoiceSection[] {\n  return sections.length > 0 ? sections : [{ options }];\n}\n\nexport function flattenChoiceSections(sections: ChoiceSection[]): ChoiceOption[] {\n  return sections.flatMap(section => section.options);\n}\n\n/** A choice list has one stable row layout: every option has an icon, or none do. */\nexport function choiceListUsesIcons(options: ChoiceOption[]): boolean {\n  return options.length > 0 && options.every(option => Boolean(option.icon));\n}\n\n/** Once one option needs supporting text, every row keeps the same two-line structure. */\nexport function choiceListUsesSubtext(options: ChoiceOption[]): boolean {\n  return options.some(option => Boolean(option.subtext?.trim()));\n}\n\nexport function filterChoiceSections(\n  sections: ChoiceSection[],\n  searchTerm: string,\n): ChoiceSection[] {\n  const normalized = searchTerm.trim().toLocaleLowerCase();\n  if (!normalized) return sections;\n\n  return sections\n    .map(section => {\n      const sectionMatches = section.header?.toLocaleLowerCase().includes(normalized);\n      return {\n        ...section,\n        options: sectionMatches\n          ? section.options\n          : section.options.filter(option =>\n            `${option.label} ${option.subtext ?? ''}`.toLocaleLowerCase().includes(normalized),\n          ),\n      };\n    })\n    .filter(section => section.options.length > 0);\n}\n\nexport function enabledChoiceIndexes(options: ChoiceOption[]): number[] {\n  return options\n    .map((option, index) => ({ option, index }))\n    .filter(({ option }) => !option.isInactive)\n    .map(({ index }) => index);\n}\n\nexport function moveChoiceIndex(\n  options: ChoiceOption[],\n  currentIndex: number,\n  direction: 1 | -1,\n): number {\n  const enabled = enabledChoiceIndexes(options);\n  if (!enabled.length) return -1;\n\n  const currentEnabledIndex = enabled.indexOf(currentIndex);\n  const start = currentEnabledIndex >= 0 ? currentEnabledIndex : direction === 1 ? -1 : 0;\n  return enabled[(start + direction + enabled.length) % enabled.length];\n}\n\nexport function findChoiceTypeaheadMatch(\n  options: ChoiceOption[],\n  query: string,\n  currentIndex: number,\n): number {\n  const normalized = query.toLocaleLowerCase();\n  if (!normalized) return -1;\n\n  for (let offset = 1; offset <= options.length; offset += 1) {\n    const index = (Math.max(currentIndex, -1) + offset) % options.length;\n    const option = options[index];\n    if (!option.isInactive && option.label.toLocaleLowerCase().startsWith(normalized)) return index;\n  }\n  return -1;\n}\n\nexport function choiceBackgroundClassMap(\n  background: ChoiceBackground | undefined,\n): Record<string, boolean> {\n  return {\n    'ds-interaction-fill--on-faint': background === 'faint',\n    'ds-interaction-fill--on-medium': background === 'medium',\n    'ds-interaction-fill--on-bold': background === 'bold',\n    'ds-interaction-fill--on-strong': background === 'strong',\n    'ds-interaction-fill--on-translucent': background === 'translucent',\n    'ds-interaction-fill--on-inverted': background === 'inverted',\n    'ds-interaction-fill--on-media': background === 'media',\n    'ds-interaction-fill--on-always-dark': background === 'always-dark',\n  };\n}\n"],"mappings":"AAoCM,SAAUA,EACdC,EACAC,GAEA,OAAOA,EAASC,OAAS,EAAID,EAAW,CAAC,CAAED,WAC7C,CAEM,SAAUG,EAAsBF,GACpC,OAAOA,EAASG,SAAQC,GAAWA,EAAQL,SAC7C,CAGM,SAAUM,EAAoBN,GAClC,OAAOA,EAAQE,OAAS,GAAKF,EAAQO,OAAMC,GAAUC,QAAQD,EAAOE,OACtE,CAGM,SAAUC,EAAsBX,GACpC,OAAOA,EAAQY,MAAKJ,GAAUC,QAAQD,EAAOK,SAASC,SACxD,CAEM,SAAUC,EACdd,EACAe,GAEA,MAAMC,EAAaD,EAAWF,OAAOI,oBACrC,IAAKD,EAAY,OAAOhB,EAExB,OAAOA,EACJkB,KAAId,IACH,MAAMe,EAAiBf,EAAQgB,QAAQH,oBAAoBI,SAASL,GACpE,MAAO,IACFZ,EACHL,QAASoB,EACLf,EAAQL,QACRK,EAAQL,QAAQuB,QAAOf,GACvB,GAAGA,EAAOgB,SAAShB,EAAOK,SAAW,KAAKK,oBAAoBI,SAASL,KAE5E,IAEFM,QAAOlB,GAAWA,EAAQL,QAAQE,OAAS,GAChD,CAEM,SAAUuB,EAAqBzB,GACnC,OAAOA,EACJmB,KAAI,CAACX,EAAQkB,KAAK,CAAQlB,SAAQkB,YAClCH,QAAO,EAAGf,aAAcA,EAAOmB,aAC/BR,KAAI,EAAGO,WAAYA,GACxB,C,SAEgBE,EACd5B,EACA6B,EACAC,GAEA,MAAMC,EAAUN,EAAqBzB,GACrC,IAAK+B,EAAQ7B,OAAQ,OAAO,EAE5B,MAAM8B,EAAsBD,EAAQE,QAAQJ,GAC5C,MAAMK,EAAQF,GAAuB,EAAIA,EAAsBF,IAAc,GAAI,EAAK,EACtF,OAAOC,GAASG,EAAQJ,EAAYC,EAAQ7B,QAAU6B,EAAQ7B,OAChE,C,SAEgBiC,EACdnC,EACAoC,EACAP,GAEA,MAAMZ,EAAamB,EAAMlB,oBACzB,IAAKD,EAAY,OAAO,EAExB,IAAK,IAAIoB,EAAS,EAAGA,GAAUrC,EAAQE,OAAQmC,GAAU,EAAG,CAC1D,MAAMX,GAASY,KAAKC,IAAIV,GAAc,GAAMQ,GAAUrC,EAAQE,OAC9D,MAAMM,EAASR,EAAQ0B,GACvB,IAAKlB,EAAOmB,YAAcnB,EAAOgB,MAAMN,oBAAoBsB,WAAWvB,GAAa,OAAOS,C,CAE5F,OAAO,CACT,CAEM,SAAUe,EACdC,GAEA,MAAO,CACL,gCAAiCA,IAAe,QAChD,iCAAkCA,IAAe,SACjD,+BAAgCA,IAAe,OAC/C,iCAAkCA,IAAe,SACjD,sCAAuCA,IAAe,cACtD,mCAAoCA,IAAe,WACnD,gCAAiCA,IAAe,QAChD,sCAAuCA,IAAe,cAE1D,Q","ignoreList":[]}

package/dist/components/p-BKWgofxz.js

@@ -1,2 +0,0 @@
-import{p as e,H as i,c as n,h as s,a as o,t}from"./index.js";import{A as r}from"./p-BBxcMVqk.js";import{d as c}from"./p-D8nnhQNJ.js";import{d}from"./p-BFfLvMZd.js";import{d as a}from"./p-DgWGfscR.js";import{d as l}from"./p-Btxwp4lJ.js";import{d as u}from"./p-jMCRaxQW.js";import{d as h}from"./p-DZFilC--.js";import{b as m,a as f,T as p}from"./p-NdahPypA.js";import{c as v,r as g}from"./p-DhKvqh5G.js";import{r as b}from"./p-BMc0DE59.js";import{a as x,C as w}from"./p-CuwopElg.js";function _(e){return"variant"in e&&e.variant==="swatch-picker"}function y(e){return _(e)}function k(e){return e.map((e=>{if(_(e)){return{...e,...e.options?{options:e.options.map((e=>({...e})))}:{},...e.sections?{sections:e.sections.map((e=>({...e,options:e.options.map((e=>({...e})))})))}:{}}}return{...e,items:e.items.map((e=>({...e})))}}))}function C(e,i){if(!e[i]?.reorderable)return null;let n=i;while(n>0&&e[n-1]?.reorderable)n-=1;let s=i;while(s<e.length-1&&e[s+1]?.reorderable)s+=1;return{start:n,end:s}}function P(e,i,n){const s=C(e,i);if(!s)return null;const o=Math.min(Math.max(n,s.start),s.end+1);let t=o;if(i<t)t-=1;if(t===i||t<s.start||t>s.end)return null;const r=[...e];const[c]=r.splice(i,1);r.splice(t,0,c);return r}function A(e,i,n){if(n===0)return null;return P(e,i,i+(n<0?n:n+1))}function z(e,i){let n=i;for(let i=0;i<e.length;i+=1){const s=e[i];if(y(s))continue;if(n<s.items.length){return{sectionIndex:i,itemIndex:n,items:s.items}}n-=s.items.length}return null}function I(e,i,n,s){const o=e[i];if(!o)return null;const t=n.indexOf(o);if(t<0){const e=o.value;const t=e?n.findIndex((i=>i.value===e)):-1;if(t<0)return null;return{item:o,fromIndex:i,toIndex:t,sectionIndex:s,items:n}}return{item:o,fromIndex:i,toIndex:t,sectionIndex:s,items:n}}const T=()=>`@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu-h,.ds-focus-ring.sc-ds-menu,.ds-focus-ring-inset.sc-ds-menu-h,.ds-focus-ring-inset.sc-ds-menu{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-menu-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-menu-h::after,.ds-interaction-fill--grouped.sc-ds-menu::after,.ds-interaction-fill--grouped.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-menu-h,.ds-interaction-fill--grouped.sc-ds-menu{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-menu-h,.ds-interaction-fill--on-faint.sc-ds-menu{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-menu,.ds-control--lg.sc-ds-menu-h,.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu,.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu,.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-menu-h,.ds-control--lg.sc-ds-menu{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-menu-h,.ds-chrome-space--sm.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-menu-h,.ds-chrome-space--md.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-menu-h,.ds-chrome-space--lg.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-menu-h,.ds-chrome-row.sc-ds-menu,.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu,.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-menu-h,.ds-chrome-row.sc-ds-menu{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu{flex-direction:column}.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{display:grid;align-items:center}.ds-control-frame.sc-ds-menu{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-menu{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-menu{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-menu{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-menu{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-empty-region.sc-ds-menu{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-menu{padding:var(--dimension-space-200)}.sc-ds-menu:where(.ds-text-decoration,.ds-text-action).sc-ds-menu{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-menu:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-menu{text-decoration-line:underline;text-decoration-color:currentcolor}}.ds-choice-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min(     var(--dimension-panel-width-lg),     calc(100vw - var(--dimension-space-200))   );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);color:var(--color-foreground-secondary);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-menu{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-menu{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-menu{opacity:0}}.ds-choice-list.sc-ds-menu{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-menu{text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-section--headed-after-first.sc-ds-menu{margin-block-start:var(--dimension-space-050)}.ds-choice-item.sc-ds-menu{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-menu:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-menu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-menu{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-menu,.ds-choice-item__suffix.sc-ds-menu{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-item.ds-interaction-fill--selected.sc-ds-menu .ds-choice-item__icon.sc-ds-menu{color:var(--color-foreground-primary)}.ds-choice-item__tag.sc-ds-menu{flex-shrink:0;pointer-events:none}.ds-choice-empty.sc-ds-menu,.ds-choice-loading.sc-ds-menu{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-menu{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-menu::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-menu{display:flex;align-items:center;justify-content:space-between;column-gap:var(--dimension-space-050);box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__summary-measure.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu ds-text.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu ds-text.sc-ds-menu{padding-inline:calc(     var(--dimension-space-050) +       var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__summary-measure.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu{white-space:nowrap}.ds-choice-footer__summary-measure.sc-ds-menu{position:absolute;visibility:hidden;pointer-events:none}.ds-choice-footer__clear.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;cursor:default}@media (forced-colors: active){.ds-choice-popup.sc-ds-menu{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-menu::after{box-shadow:none}.ds-choice-section--divided.sc-ds-menu{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-menu::before{background-color:var(--ds-forced-color-content)}}.ds-visually-hidden.sc-ds-menu-h,.ds-visually-hidden.sc-ds-menu{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__dot-box.sc-ds-menu{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0;margin-inline-start:calc(     var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))   )}.menu-item.sc-ds-menu>.menu-item__handle.sc-ds-menu{pointer-events:auto;cursor:grab;touch-action:none}.menu-item.sc-ds-menu>.menu-item__handle.sc-ds-menu:active,.menu-item--dragging.sc-ds-menu>.menu-item__handle.sc-ds-menu{cursor:grabbing}.menu-item--dragging.sc-ds-menu{opacity:var(--effect-opacity-medium)}.menu-item__drop-rail.sc-ds-menu{position:absolute;z-index:var(--dimension-z-index-raised);inset-inline:var(--dimension-space-050);block-size:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-half);background:var(--color-border-bold-brand);pointer-events:none}.menu-item__drop-rail--before.sc-ds-menu{inset-block-start:calc(-1 * var(--dimension-space-025));transform:translateY(-50%)}.menu-item__drop-rail--after.sc-ds-menu{inset-block-end:calc(-1 * var(--dimension-space-025));transform:translateY(50%)}@media (forced-colors: active){.menu-item__drop-rail.sc-ds-menu{background:var(--ds-forced-color-selected)}}`;const j={lg:"md",md:"sm",sm:"xs",xs:"xs"};const D=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");const F=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=n(this,"dsClose");this.dsAfterClose=n(this,"dsAfterClose");this.dsSelect=n(this,"dsSelect");this.dsSwatchSelect=n(this,"dsSwatchSelect");this.dsReorder=n(this,"dsReorder");this.open=false;this.items=[];this.size="md";this.selectionMode="none";this.sections=[];this.side="bottom";this.align="start";this.anchorAlignment="choice-cell";this.sideOffset=m.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.reorderFromFlat=null;this.reorderInsertBefore=null;this.reorderAnnouncement="";this.clickOutsideHandler=null;this.closeTimer=null;this.suppressItemClick=false;this.reorderPointer=null;this.position=new r({getAnchor:()=>this.resolvedAnchor??null,getPopup:()=>this.el.querySelector(".menu-popup"),measure:(e,i)=>{if(!this.open)return null;const n=e.getBoundingClientRect();const s=this.viewportPadPx;if(!this.minWidth){if(this.anchorAlignment==="choice-cell"&&(this.side==="top"||this.side==="bottom")){i.style.minWidth=`max(var(--dimension-menu-width-xs), ${v(n.width,s)}px)`}else{i.style.removeProperty("min-width")}}return{anchorRect:n,popupWidth:i.offsetWidth||this.popupFallbackWidthPx,popupHeight:i.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:g({align:this.align,alignOffsetPx:this.alignOffsetPx,sectionInsetPx:s,anchorAlignment:this.anchorAlignment}),viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:i})=>{this.pos={x:e,y:i}},onReady:()=>{this.positionReady=true},liveUpdate:"double-frame",topLayer:true});this.lastRenderedSections=[];this.closingSections=null;this.onReorderPointerMove=e=>{const i=this.reorderPointer;if(!i||e.pointerId!==i.pointerId)return;const n=this.activeSections[i.sectionIndex];if(!n||y(n))return;const s=this.resolveReorderInsertBefore(e.clientY,i.sectionIndex,i.fromIndex,n.items);if(s!==this.reorderInsertBefore)this.reorderInsertBefore=s};this.onReorderPointerUp=e=>{const i=this.reorderPointer;if(!i||e.pointerId!==i.pointerId)return;const n=this.activeSections[i.sectionIndex];const s=this.reorderInsertBefore;this.clearReorderPointer();queueMicrotask((()=>{this.suppressItemClick=false}));if(!n||y(n)||s===null)return;const o=P(n.items,i.fromIndex,s);if(!o)return;this.emitReorder(n.items,i.fromIndex,o,i.sectionIndex)};this.onReorderPointerCancel=e=>{if(!this.reorderPointer||e.pointerId!==this.reorderPointer.pointerId)return;this.clearReorderPointer();queueMicrotask((()=>{this.suppressItemClick=false}))}}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.cancelLivePositionUpdate();this.clearReorderPointer();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.closingSections=null;this.shouldRender=true;this.closing=false;this.positionReady=false;this.focusRingVisible=this.initialFocusVisible;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.positionReadyCallback=undefined;this.cancelPositionRetry();this.captureClosingSections();this.closing=true;this.teardownListeners();const e=this.closeAnimationMs;if(e<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),e)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return b(p.space050,p.space050)}get sideOffsetPx(){return b(this.sideOffset,p.space050)}get alignOffsetPx(){return b(this.alignOffset,0)}get popupFallbackWidthPx(){return b(p.menuWidthXs,p.menuWidthXs)}get popupFallbackHeightPx(){return b(p.menuFallbackHeight,p.menuFallbackHeight)}get closeAnimationMs(){return f(p.motionShort2,p.animationDurationShort3)}finishClose(){const e=this.el.querySelector(".menu-popup");if(e?.matches(":popover-open"))e.hidePopover();this.shouldRender=false;this.closing=false;this.lastRenderedSections=[];this.closingSections=null;this.clearReorderPointer();this.reorderAnnouncement="";this.dsAfterClose.emit()}captureClosingSections(){if(this.closingSections)return;const e=this.lastRenderedSections.length?this.lastRenderedSections:this.activeSections;this.closingSections=k(e)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get anchorFocusTarget(){const e=this.resolvedAnchor;if(!e)return null;if(e.matches(D))return e;return e.querySelector(D)??e}focusAnchor(){const e=this.resolvedAnchor;if(e?.setFocus){e.setFocus();return}this.anchorFocusTarget?.focus()}moveFocusAfterTab(e){const i=this.anchorFocusTarget;if(!i)return;if(e){i.focus();return}const n=Array.from(document.querySelectorAll(D)).filter((e=>!e.closest(".menu-popup")&&!e.closest("[inert]")&&e.getClientRects().length>0));const s=n.indexOf(i);(n[s+1]??i).focus()}compositeTabLeavesPopup(e){const i=this.el.querySelector(".menu-popup");if(!i)return true;const n=Array.from(i.querySelectorAll(D)).filter((e=>e.getClientRects().length>0));const s=n.indexOf(e.target);if(s<0)return true;return e.shiftKey?s===0:s===n.length-1}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>y(e)?[]:e.items))}get hasCompositeSections(){return this.activeSections.some(y)}cancelPositionRetry(){this.position.cancel()}cancelLivePositionUpdate(){this.position.cancel()}scheduleLivePositionUpdate(){this.position.scheduleLiveUpdate()}schedulePositionUpdate(e){if(!this.open)return;this.positionReady=false;if(e)this.positionReadyCallback=e;const i=this.positionReadyCallback;this.position.schedule((()=>{if(this.positionReadyCallback===i){this.positionReadyCallback=undefined}i?.()}))}calculatePosition(){return this.position.update()}focusInitialItem(){if(this.hasCompositeSections){requestAnimationFrame((()=>{this.el.querySelector('.menu-popup [tabindex="0"]')?.focus()}));return}const e=this.flatItems;const i=e.findIndex((e=>e.isSelected&&!e.isInactive));const n=e.findIndex((e=>!e.isInactive||!!e.reorderable));this.focusedIndex=i>=0?i:n>=0?n:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const i=e.target;const n=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(n?.contains(i)||s?.contains(i))return;this.close()};document.addEventListener("mousedown",this.clickOutsideHandler,true);this.position.observe()}teardownListeners(){this.position.unobserve();if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(e=true){this.captureClosingSections();if(e)this.focusAnchor();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;if(e.key==="Escape"){e.preventDefault();this.close();return}if(e.key==="Tab"){if(this.hasCompositeSections&&!this.compositeTabLeavesPopup(e))return;e.preventDefault();this.close(false);this.moveFocusAfterTab(e.shiftKey);return}if(this.hasCompositeSections)return;if((e.key==="ArrowUp"||e.key==="ArrowDown")&&e.altKey&&!e.ctrlKey&&!e.shiftKey){this.handleReorderKey(e);return}const i=this.flatItems;const n=i.map(((e,i)=>({it:e,i}))).filter((({it:e})=>!e.isInactive||!!e.reorderable)).map((({i:e})=>e));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const o=s<0?0:s;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(o+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(o-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break}}focusItem(e){const i=this.el.querySelectorAll(".menu-item");i[e]?.focus()}handleItemClick(e){if(this.suppressItemClick){this.suppressItemClick=false;return}if(e.isInactive)return;this.captureClosingSections();this.dsSelect.emit(e)}handleSwatchSelect(e){this.dsSwatchSelect.emit(e)}handleReorderKey(e){const i=z(this.activeSections,this.focusedIndex);if(!i||!i.items[i.itemIndex]?.reorderable)return;const n=A(i.items,i.itemIndex,e.key==="ArrowUp"?-1:1);if(!n)return;e.preventDefault();e.stopPropagation();this.emitReorder(i.items,i.itemIndex,n,i.sectionIndex)}emitReorder(e,i,n,s){const o=I(e,i,n,s);if(!o)return;this.focusedIndex=this.flatIndexFor(s,o.toIndex);this.announceReorder(o);this.dsReorder.emit(o)}flatIndexFor(e,i){let n=0;for(let s=0;s<this.activeSections.length;s+=1){const o=this.activeSections[s];if(y(o))continue;if(s===e)return n+i;n+=o.items.length}return i}announceReorder(e){const i=C(e.items,e.toIndex);const n=i?i.end-i.start+1:e.items.length;const s=i?e.toIndex-i.start+1:e.toIndex+1;this.reorderAnnouncement=`${e.item.label} moved to position ${s} of ${n}`}onReorderPointerDown(e,i,n,s){if(e.button!==0)return;const o=this.activeSections[i];if(!o||y(o))return;if(!o.items[n]?.reorderable)return;e.preventDefault();e.stopPropagation();this.suppressItemClick=true;this.focusRingVisible=false;this.focusedIndex=s;this.focusItem(s);this.reorderPointer={pointerId:e.pointerId,sectionIndex:i,fromIndex:n};this.reorderFromFlat=s;this.reorderInsertBefore=n;window.addEventListener("pointermove",this.onReorderPointerMove);window.addEventListener("pointerup",this.onReorderPointerUp);window.addEventListener("pointercancel",this.onReorderPointerCancel)}resolveReorderInsertBefore(e,i,n,s){const o=C(s,n);if(!o)return n;const t=[...this.el.querySelectorAll(".menu-item")];const r=this.flatIndexFor(i,0);let c=o.end+1;for(let i=o.start;i<=o.end;i+=1){const n=t[r+i];if(!n)continue;const s=n.getBoundingClientRect();if(e<s.top+s.height/2){c=i;break}}return Math.min(Math.max(c,o.start),o.end+1)}clearReorderPointer(){if(this.reorderPointer){window.removeEventListener("pointermove",this.onReorderPointerMove);window.removeEventListener("pointerup",this.onReorderPointerUp);window.removeEventListener("pointercancel",this.onReorderPointerCancel)}this.reorderPointer=null;this.reorderFromFlat=null;this.reorderInsertBefore=null}render(){if(!this.shouldRender)return s(o,{style:{display:"contents"}});const e=this.closing?this.closingSections??this.lastRenderedSections:this.activeSections;const i=e.some(y);if(!this.closing){this.lastRenderedSections=k(e);this.closingSections=null}let n=0;const t=this.reorderFromFlat===null?null:z(e,this.reorderFromFlat);const r=t?C(t.items,t.itemIndex):null;const c={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)c["width"]=this.menuWidth;if(this.minWidth)c["min-width"]=this.minWidth;return s(o,{style:{display:"contents"}},s("div",{popover:"manual",class:{"menu-popup":true,"menu-popup--closing":this.closing,"ds-choice-popup":true,"ds-choice-popup--closing":this.closing},style:c,role:i?"dialog":"menu","aria-label":this.menuLabel,"aria-orientation":i?undefined:"vertical"},s("div",{class:"ds-choice-list"},e.map(((o,c)=>s("div",{key:c,class:{"menu-section":true,"menu-section--divided":c<e.length-1,"menu-section--swatch-picker":y(o),"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":c<e.length-1,"ds-choice-section--headed-after-first":c>0&&Boolean(o.header)},role:o.header?"group":undefined,"aria-label":o.header},o.header&&s("ds-text",{class:`section-header ds-choice-section__header ds-control-section-heading ds-control--${this.size}`,as:"span",variant:x[this.size],emphasis:true,color:"primary","aria-hidden":"true"},s("span",{class:"ds-choice-section__header-label"},o.header)),_(o)?s("ds-swatch-picker",{value:o.value,groupLabel:o.groupLabel??o.header??"Swatch options",options:o.options??[],sections:o.sections??[],onDsChange:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}}):o.items.map(((e,d)=>{const a=n++;const l=this.focusedIndex===a;const u=!i&&this.selectionMode==="single"&&!e.showSwitch;const h=o.items.some((e=>e.reorderable||!!e.icon));const m=!!e.isInactive&&!e.reorderable;const f=this.reorderFromFlat===a;const p=t?.sectionIndex===c&&r!==null&&d<=r.end&&this.reorderInsertBefore===d;const v=t?.sectionIndex===c&&r!==null&&this.reorderInsertBefore===r.end+1&&d===r.end;return s("button",{key:e.value??`${c}-${e.label}`,type:"button",class:{"menu-item":true,"ds-choice-item":true,"ds-control-frame":true,[`ds-control--${this.size}`]:true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":l&&this.focusRingVisible,"ds-interaction-fill":!m,"ds-interaction-fill--selected":!!e.isSelected&&!m,"menu-item--selected":!!e.isSelected,"menu-item--switch":!!e.showSwitch,"ds-control-inactive":m,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":l,"menu-item--dragging":f},role:i?undefined:e.showSwitch?"menuitemcheckbox":u?"menuitemradio":"menuitem","aria-checked":!i&&e.showSwitch?String(!!e.switchValue):u?String(!!e.isSelected):undefined,"aria-pressed":i?String(e.showSwitch?!!e.switchValue:!!e.isSelected):undefined,"aria-current":!i&&!e.showSwitch&&!u&&e.isSelected?"true":undefined,"aria-description":e.reorderable?e.isInactive?"Visibility cannot be changed. Alt + Arrow Up or Alt + Arrow Down moves this row.":"Drag to reorder. Alt + Arrow Up or Alt + Arrow Down moves this row.":undefined,"aria-disabled":e.isInactive?"true":undefined,disabled:m,tabIndex:i?0:l?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=a}},(p||v)&&s("span",{class:{"menu-item__drop-rail":true,"menu-item__drop-rail--before":p,"menu-item__drop-rail--after":v},"data-menu-drop-rail":true,"aria-hidden":"true"}),e.reorderable?s("span",{class:"menu-item__handle ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","data-menu-handle":true,"aria-hidden":"true",onPointerDown:e=>this.onReorderPointerDown(e,c,d,a),onClick:e=>{e.preventDefault();e.stopPropagation()}},s("ds-icon",{name:"Drag",size:this.size,color:"inherit"})):h&&e.icon?s("span",{class:"menu-item__icon ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):h?s("span",{class:"menu-item__icon-spacer ds-choice-item__icon ds-control-icon-box","aria-hidden":"true"}):null,s("div",{class:"menu-item__content ds-choice-item__content ds-interaction-fill__content"},s("ds-text",{class:"menu-item__label ds-choice-item__label ds-control-label-box",as:"span",variant:w[this.size],color:e.isSelected?"primary":"secondary"},e.label),e.subtext&&s("ds-text",{class:"menu-item__subtext ds-choice-item__subtext ds-control-label-box",as:"span",variant:x[this.size],color:"secondary"},e.subtext)),e.tag&&s("ds-tag",{class:"ds-choice-item__tag ds-interaction-fill__content",label:e.tag.label,size:j[this.size],intent:e.tag.intent??"neutral",contrast:e.tag.contrast??"faint",rounded:e.tag.rounded??false,isInset:true}),e.dot&&s("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-badge",{class:"menu-item__dot",variant:"dot",hasRing:false,label:""})),e.showSwitch&&s("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:this.size,checked:!!e.switchValue,isInactive:!!e.isInactive,presentation:true}))}))))))),s("div",{class:"ds-visually-hidden",role:"status","aria-live":"polite"},this.reorderAnnouncement))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return T()}},[2,"ds-menu",{open:[1028],items:[16],size:[1],selectionMode:[1,"selection-mode"],sections:[16],side:[1],align:[1],anchorAlignment:[1,"anchor-alignment"],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32],reorderFromFlat:[32],reorderInsertBefore:[32],reorderAnnouncement:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-badge","ds-icon","ds-swatch-picker","ds-switch","ds-tag","ds-text"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(t(e))){customElements.define(t(e),F)}break;case"ds-badge":if(!customElements.get(t(e))){c()}break;case"ds-icon":if(!customElements.get(t(e))){d()}break;case"ds-swatch-picker":if(!customElements.get(t(e))){a()}break;case"ds-switch":if(!customElements.get(t(e))){l()}break;case"ds-tag":if(!customElements.get(t(e))){u()}break;case"ds-text":if(!customElements.get(t(e))){h()}break}}))}M();export{F as M,M as d};
-//# sourceMappingURL=p-BKWgofxz.js.map