@ds-mo/ui 14.15.1 → 14.17.0

package/dist/types/components.d.ts

@@ -66,6 +66,7 @@ import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPick
 import { SwitchSize } from "./components/Switch/Switch";
 import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
 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 { FilterMenuChangeDetail as FilterMenuChangeDetail1, FilterMenuFilter as FilterMenuFilter1, FilterMenuValues as FilterMenuValues1 } from "./components/FilterMenu/FilterMenu";
 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";
@@ -132,6 +133,7 @@ export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPick
 export { SwitchSize } from "./components/Switch/Switch";
 export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
 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 { FilterMenuChangeDetail as FilterMenuChangeDetail1, FilterMenuFilter as FilterMenuFilter1, FilterMenuValues as FilterMenuValues1 } from "./components/FilterMenu/FilterMenu";
 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";
@@ -674,6 +676,11 @@ export namespace Components {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background": ButtonUnfilledBackground | undefined;
+        /**
+          * Collapse the visible label and chevron to an icon-only control when the owning `ds-table` caption is narrower than 900px. The trigger omits those parts rather than clipping them.
+          * @default false
+         */
+        "collapseLabel": boolean;
         "controls": string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -694,7 +701,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. 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.
+          * 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   `Table` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu": boolean;
@@ -1222,6 +1229,11 @@ export namespace Components {
           * @default 'Clear'
          */
         "clearLabel": string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel": boolean;
         /**
           * Product-owned filter categories and option definitions.
           * @default []
@@ -2305,6 +2317,11 @@ export namespace Components {
           * @default 'Clear'
          */
         "clearLabel": string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel": boolean;
         /**
           * Native disabled state.
           * @default false
@@ -3135,6 +3152,52 @@ export namespace Components {
          */
         "virtualModeLabel": string;
     }
+    interface DsTableFilter {
+        /**
+          * Controlled category shown in the option pane.
+         */
+        "activeFilterId": string | undefined;
+        /**
+          * Accessible name for the trigger. Defaults to Filter table.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Accessible name for the category tab list.
+          * @default 'Filter categories'
+         */
+        "categoriesLabel": string;
+        /**
+          * Footer action and date-clear accessible label.
+          * @default 'Clear'
+         */
+        "clearLabel": string;
+        /**
+          * Product-owned filter categories and option definitions.
+          * @default []
+         */
+        "filters": FilterMenuFilter1[];
+        /**
+          * Visible trigger label.
+          * @default 'Filter'
+         */
+        "label": string;
+        /**
+          * Accessible name for the non-modal filter dialog. Defaults to the trigger name.
+          * @default null
+         */
+        "menuLabel": string | null;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Controlled values keyed by filter id.
+          * @default {}
+         */
+        "values": FilterMenuValues1;
+    }
     interface DsTableSavedViews {
         /**
           * Footer action label that opens the create-view dialog.
@@ -3177,6 +3240,24 @@ export namespace Components {
          */
         "views": TableSavedView[];
     }
+    interface DsTableSort {
+        /**
+          * Accessible name for the trigger and menu.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Catalog used to derive sortable fields, including compound header segments.
+          * @default []
+         */
+        "columns": TableColumn[];
+        "setFocus": () => Promise<void>;
+        /**
+          * Controlled table sort. Header sorting and this menu share the same value.
+          * @default null
+         */
+        "sort": TableSortState | null;
+    }
     interface DsTableToolbar {
         /**
           * Accessible name for the grouped table controls.
@@ -3627,10 +3708,18 @@ export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
 }
+export interface DsTableFilterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableFilterElement;
+}
 export interface DsTableSavedViewsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableSavedViewsElement;
 }
+export interface DsTableSortCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableSortElement;
+}
 export interface DsTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTagElement;
@@ -4644,6 +4733,28 @@ declare global {
         prototype: HTMLDsTableElement;
         new (): HTMLDsTableElement;
     };
+    interface HTMLDsTableFilterElementEventMap {
+        "dsChange": FilterMenuChangeDetail1;
+        "dsClear": void;
+        "dsActiveFilterChange": string;
+        "dsClose": void;
+        "dsOpenChange": boolean;
+        "dsAfterClose": void;
+    }
+    interface HTMLDsTableFilterElement extends Components.DsTableFilter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableFilterElementEventMap>(type: K, listener: (this: HTMLDsTableFilterElement, ev: DsTableFilterCustomEvent<HTMLDsTableFilterElementEventMap[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 HTMLDsTableFilterElementEventMap>(type: K, listener: (this: HTMLDsTableFilterElement, ev: DsTableFilterCustomEvent<HTMLDsTableFilterElementEventMap[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 HTMLDsTableFilterElement: {
+        prototype: HTMLDsTableFilterElement;
+        new (): HTMLDsTableFilterElement;
+    };
     interface HTMLDsTableSavedViewsElementEventMap {
         "dsViewChange": TableSavedViewChangeDetail;
         "dsViewCreate": TableSavedViewCreateDetail;
@@ -4666,6 +4777,23 @@ declare global {
         prototype: HTMLDsTableSavedViewsElement;
         new (): HTMLDsTableSavedViewsElement;
     };
+    interface HTMLDsTableSortElementEventMap {
+        "dsSortChange": TableSortChangeDetail;
+    }
+    interface HTMLDsTableSortElement extends Components.DsTableSort, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableSortElementEventMap>(type: K, listener: (this: HTMLDsTableSortElement, ev: DsTableSortCustomEvent<HTMLDsTableSortElementEventMap[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 HTMLDsTableSortElementEventMap>(type: K, listener: (this: HTMLDsTableSortElement, ev: DsTableSortCustomEvent<HTMLDsTableSortElementEventMap[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 HTMLDsTableSortElement: {
+        prototype: HTMLDsTableSortElement;
+        new (): HTMLDsTableSortElement;
+    };
     interface HTMLDsTableToolbarElement extends Components.DsTableToolbar, HTMLStencilElement {
     }
     var HTMLDsTableToolbarElement: {
@@ -4818,7 +4946,9 @@ declare global {
         "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
         "ds-table": HTMLDsTableElement;
+        "ds-table-filter": HTMLDsTableFilterElement;
         "ds-table-saved-views": HTMLDsTableSavedViewsElement;
+        "ds-table-sort": HTMLDsTableSortElement;
         "ds-table-toolbar": HTMLDsTableToolbarElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
@@ -5418,6 +5548,11 @@ declare namespace LocalJSX {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background"?: ButtonUnfilledBackground | undefined;
+        /**
+          * Collapse the visible label and chevron to an icon-only control when the owning `ds-table` caption is narrower than 900px. The trigger omits those parts rather than clipping them.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         "controls"?: string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -5438,7 +5573,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. 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.
+          * 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   `Table` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu"?: boolean;
@@ -6004,6 +6139,11 @@ declare namespace LocalJSX {
           * @default 'Clear'
          */
         "clearLabel"?: string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         /**
           * Product-owned filter categories and option definitions.
           * @default []
@@ -7188,6 +7328,11 @@ declare namespace LocalJSX {
           * @default 'Clear'
          */
         "clearLabel"?: string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         /**
           * Native disabled state.
           * @default false
@@ -8111,6 +8256,76 @@ declare namespace LocalJSX {
          */
         "virtualModeLabel"?: string;
     }
+    interface DsTableFilter {
+        /**
+          * Controlled category shown in the option pane.
+         */
+        "activeFilterId"?: string | undefined;
+        /**
+          * Accessible name for the trigger. Defaults to Filter table.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Accessible name for the category tab list.
+          * @default 'Filter categories'
+         */
+        "categoriesLabel"?: string;
+        /**
+          * Footer action and date-clear accessible label.
+          * @default 'Clear'
+         */
+        "clearLabel"?: string;
+        /**
+          * Product-owned filter categories and option definitions.
+          * @default []
+         */
+        "filters"?: FilterMenuFilter1[];
+        /**
+          * Visible trigger label.
+          * @default 'Filter'
+         */
+        "label"?: string;
+        /**
+          * Accessible name for the non-modal filter dialog. Defaults to the trigger name.
+          * @default null
+         */
+        "menuLabel"?: string | null;
+        /**
+          * Requests a controlled active-category replacement.
+         */
+        "onDsActiveFilterChange"?: (event: DsTableFilterCustomEvent<string>) => void;
+        /**
+          * Emitted after exit motion and rendered popup removal complete.
+         */
+        "onDsAfterClose"?: (event: DsTableFilterCustomEvent<void>) => void;
+        /**
+          * Requests a controlled value replacement without closing the popup.
+         */
+        "onDsChange"?: (event: DsTableFilterCustomEvent<FilterMenuChangeDetail1>) => void;
+        /**
+          * Requests that the consumer clear every filter value.
+         */
+        "onDsClear"?: (event: DsTableFilterCustomEvent<void>) => void;
+        /**
+          * Requests that the controlled popup close.
+         */
+        "onDsClose"?: (event: DsTableFilterCustomEvent<void>) => void;
+        /**
+          * Emitted whenever trigger activation changes popup visibility.
+         */
+        "onDsOpenChange"?: (event: DsTableFilterCustomEvent<boolean>) => void;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Controlled values keyed by filter id.
+          * @default {}
+         */
+        "values"?: FilterMenuValues1;
+    }
     interface DsTableSavedViews {
         /**
           * Footer action label that opens the create-view dialog.
@@ -8177,6 +8392,24 @@ declare namespace LocalJSX {
          */
         "views"?: TableSavedView[];
     }
+    interface DsTableSort {
+        /**
+          * Accessible name for the trigger and menu.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Catalog used to derive sortable fields, including compound header segments.
+          * @default []
+         */
+        "columns"?: TableColumn[];
+        "onDsSortChange"?: (event: DsTableSortCustomEvent<TableSortChangeDetail>) => void;
+        /**
+          * Controlled table sort. Header sorting and this menu share the same value.
+          * @default null
+         */
+        "sort"?: TableSortState | null;
+    }
     interface DsTableToolbar {
         /**
           * Accessible name for the grouped table controls.
@@ -8589,6 +8822,7 @@ declare namespace LocalJSX {
         "expanded": boolean | undefined;
         "haspopup": ButtonUnfilledPopup | undefined;
         "pressed": boolean | undefined;
+        "collapseLabel": boolean;
         "hasMenu": boolean;
         "focusTabIndex": number;
     }
@@ -8707,6 +8941,7 @@ declare namespace LocalJSX {
         "width": FilterMenuWidth;
         "hasBorder": boolean;
         "activeFill": boolean;
+        "collapseLabel": boolean;
         "inputId": string | undefined;
         "ariaLabel": string | null;
         "activeFilterId": string | undefined;
@@ -8976,6 +9211,7 @@ declare namespace LocalJSX {
         "isInactive": boolean;
         "isLoading": boolean;
         "activeFill": boolean;
+        "collapseLabel": boolean;
         "hasBorder": boolean;
         "icon": string | undefined;
         "indicator": SelectIndicator;
@@ -9140,6 +9376,15 @@ declare namespace LocalJSX {
         "groupEndOfResultsLabel": string;
         "groupRowsLoadedLabel": string;
     }
+    interface DsTableFilterAttributes {
+        "open": boolean;
+        "activeFilterId": string | undefined;
+        "label": string;
+        "ariaLabel": string | null;
+        "menuLabel": string | null;
+        "categoriesLabel": string;
+        "clearLabel": string;
+    }
     interface DsTableSavedViewsAttributes {
         "value": string;
         "dirty": boolean;
@@ -9149,6 +9394,9 @@ declare namespace LocalJSX {
         "triggerLabel": string;
         "createLabel": string;
     }
+    interface DsTableSortAttributes {
+        "ariaLabel": string | null;
+    }
     interface DsTableToolbarAttributes {
         "label": string;
     }
@@ -9280,7 +9528,9 @@ 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-filter": Omit<DsTableFilter, keyof DsTableFilterAttributes> & { [K in keyof DsTableFilter & keyof DsTableFilterAttributes]?: DsTableFilter[K] } & { [K in keyof DsTableFilter & keyof DsTableFilterAttributes as `attr:${K}`]?: DsTableFilterAttributes[K] } & { [K in keyof DsTableFilter & keyof DsTableFilterAttributes as `prop:${K}`]?: DsTableFilter[K] };
         "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-sort": Omit<DsTableSort, keyof DsTableSortAttributes> & { [K in keyof DsTableSort & keyof DsTableSortAttributes]?: DsTableSort[K] } & { [K in keyof DsTableSort & keyof DsTableSortAttributes as `attr:${K}`]?: DsTableSortAttributes[K] } & { [K in keyof DsTableSort & keyof DsTableSortAttributes as `prop:${K}`]?: DsTableSort[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] };
@@ -9375,7 +9625,9 @@ 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-filter": LocalJSX.IntrinsicElements["ds-table-filter"] & JSXBase.HTMLAttributes<HTMLDsTableFilterElement>;
             "ds-table-saved-views": LocalJSX.IntrinsicElements["ds-table-saved-views"] & JSXBase.HTMLAttributes<HTMLDsTableSavedViewsElement>;
+            "ds-table-sort": LocalJSX.IntrinsicElements["ds-table-sort"] & JSXBase.HTMLAttributes<HTMLDsTableSortElement>;
             "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>;

package/dist/types/utils/table-caption-compact.d.ts

@@ -0,0 +1,6 @@
+/** Matches `@container ds-table (max-width: 899px)` on caption Filter/Group/Sort. */
+export declare const TABLE_CAPTION_COMPACT_MAX_PX = 899;
+export declare function isTableCaptionCompact(width: number): boolean;
+export declare function tableCaptionInlineSize(entry: ResizeObserverEntry): number;
+export declare function observeTableCaptionCompact(host: HTMLElement, onChange: (compact: boolean) => void): () => void;
+//# sourceMappingURL=table-caption-compact.d.ts.map

package/dist/vue/components.d.ts

@@ -67,7 +67,9 @@ export { DsSwatchPicker } from './ds-swatch-picker.js';
 export { DsSwitch } from './ds-switch.js';
 export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
+export { DsTableFilter } from './ds-table-filter.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
+export { DsTableSort } from './ds-table-sort.js';
 export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';

package/dist/vue/components.js

@@ -69,7 +69,9 @@ export { DsSwatchPicker } from './ds-swatch-picker.js';
 export { DsSwitch } from './ds-switch.js';
 export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
+export { DsTableFilter } from './ds-table-filter.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
+export { DsTableSort } from './ds-table-sort.js';
 export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';

package/dist/vue/ds-button-unfilled.js

@@ -26,6 +26,7 @@ export const DsButtonUnfilled = /*@__PURE__*/ defineContainer('ds-button-unfille
     'expanded',
     'haspopup',
     'pressed',
+    'collapseLabel',
     'hasMenu',
     'focusTabIndex',
     'dsClick',

package/dist/vue/ds-filter-menu.js

@@ -11,6 +11,7 @@ export const DsFilterMenu = /*@__PURE__*/ defineContainer('ds-filter-menu', defi
     'width',
     'hasBorder',
     'activeFill',
+    'collapseLabel',
     'inputId',
     'ariaLabel',
     'filters',

package/dist/vue/ds-select.js

@@ -23,6 +23,7 @@ export const DsSelect = /*@__PURE__*/ defineContainer('ds-select', defineDsSelec
     'isInactive',
     'isLoading',
     'activeFill',
+    'collapseLabel',
     'hasBorder',
     'icon',
     'indicator',

package/dist/vue/ds-table-filter.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTableFilter: StencilVueComponent<JSX.DsTableFilter>;

package/dist/vue/ds-table-filter.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTableFilter } from '@ds-mo/ui/components/ds-table-filter.js';
+export const DsTableFilter = /*@__PURE__*/ defineContainer('ds-table-filter', defineDsTableFilter, [
+    'open',
+    'filters',
+    'values',
+    'activeFilterId',
+    'label',
+    'ariaLabel',
+    'menuLabel',
+    'categoriesLabel',
+    'clearLabel',
+    'dsChange',
+    'dsClear',
+    'dsActiveFilterChange',
+    'dsClose',
+    'dsOpenChange',
+    'dsAfterClose'
+], [
+    'dsChange',
+    'dsClear',
+    'dsActiveFilterChange',
+    'dsClose',
+    'dsOpenChange',
+    'dsAfterClose'
+]);

package/dist/vue/ds-table-sort.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTableSort: StencilVueComponent<JSX.DsTableSort>;

package/dist/vue/ds-table-sort.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTableSort } from '@ds-mo/ui/components/ds-table-sort.js';
+export const DsTableSort = /*@__PURE__*/ defineContainer('ds-table-sort', defineDsTableSort, [
+    'columns',
+    'sort',
+    'ariaLabel',
+    'dsSortChange'
+], [
+    'dsSortChange'
+]);

package/package.json

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

package/dist/components/p-BzLnSwG9.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as t,h as o,a as i,t as n}from"./index.js";import{p as r}from"./p-NdahPypA.js";import{d as a}from"./p-vWK5faWZ.js";import{d as l}from"./p-C7rzVotG.js";import{d}from"./p-BFfLvMZd.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-Dsn1RCS5.js";import{d as f}from"./p-DZFilC--.js";import{d as u}from"./p-BXPQmp7q.js";const p=["search","messages","agents","stacks","activity","help"];const m={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const g={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const v=[{id:"search",icon:"MagnifyingGlass",label:m.search,railPlacement:"header",order:0,shortcutKey:g.search,mobileDestination:"search"},{id:"messages",icon:"MessageBubbleStack",label:m.messages,order:1,shortcutKey:g.messages,mobileDestination:"messages"},{id:"agents",icon:"AI",label:m.agents,order:2,shortcutKey:g.agents,mobileDestination:"agents"},{id:"stacks",icon:"ViewMenu",label:m.stacks,order:3,shortcutKey:g.stacks,mobileDestination:"inbox"},{id:"activity",icon:"Bell",label:m.activity,order:4,shortcutKey:g.activity,mobileDestination:"inbox"},{id:"help",icon:"CircleQuestion",label:m.help,railPlacement:"footer",order:5,shortcutKey:g.help,mobileDestination:"help"}];function b(e){const s=new Map;for(const t of e){if(t.id.trim()&&!s.has(t.id))s.set(t.id,t)}const t={header:0,body:1,footer:2};return Array.from(s.values()).sort(((e,s)=>{const o=y(e);const i=y(s);const n=t[o]-t[i];if(n!==0)return n;const r=p.findIndex((s=>s===e.id));const a=p.findIndex((e=>e===s.id));const l=e.order??(r<0?Number.MAX_SAFE_INTEGER:r);const d=s.order??(a<0?Number.MAX_SAFE_INTEGER:a);return l-d}))}function w(e){return typeof e==="string"&&e.trim().length>0}function y(e){if(e.railPlacement)return e.railPlacement;if(e.id==="search")return"header";if(e.id==="help")return"footer";return"body"}function _(e,s,t){if(!t||e.some((e=>e.id===t))){return{open:s,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function x(e){const s=e.transitionProperty.split(",").map((e=>e.trim()));const t=e.transitionDuration.split(",").map((e=>r(e.trim(),0)));const o=e.transitionDelay.split(",").map((e=>r(e.trim(),0)));return s.reduce(((e,s,i)=>{if(s!=="all"&&s!=="max-width")return e;const n=t[i%t.length]??0;const r=o[i%o.length]??0;return Math.max(e,n+r,0)}),0)}function k(e,s){return!e&&s==="idle"}function T(e,s,t){if(t==="closing")return e<=.5;if(t==="opening")return s>0&&e>=s-.5;return true}function C(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const A=()=>`.ds-control--lg,:host(.ds-control--lg),:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--lg),.ds-control--lg{--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)}:host(.ds-control--md),.ds-control--md{--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)}:host(.ds-control--sm),.ds-control--sm{--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)}:host(.ds-control--xs),.ds-control--xs{--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}:host(.ds-chrome-space--sm),.ds-chrome-space--sm{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}:host(.ds-chrome-space--md),.ds-chrome-space--md{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}:host(.ds-chrome-space--lg),.ds-chrome-space--lg{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}:host(.ds-chrome-row),.ds-chrome-row,:host(.ds-chrome-column),.ds-chrome-column,:host(.ds-chrome-grid),.ds-chrome-grid{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}:host(.ds-chrome-row),.ds-chrome-row{flex-direction:row;align-items:center}:host(.ds-chrome-column),.ds-chrome-column{flex-direction:column}:host(.ds-chrome-grid),.ds-chrome-grid{display:grid;align-items:center}@media (forced-colors: active){:root,:host,.ds-forced-colors-scope{--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}}:host{--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)}:host(.ds-focus-ring),.ds-focus-ring,:host(.ds-focus-ring-inset),.ds-focus-ring-inset{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::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){:host{--ds-focus-ring-color:var(--ds-forced-color-selected)}}:host(.ds-scrollbar-hidden),.ds-scrollbar-hidden{scrollbar-width:none}:host(.ds-scrollbar-hidden)::-webkit-scrollbar,.ds-scrollbar-hidden::-webkit-scrollbar{display:none}:host{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}:host(.panel-tools--ready) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in-out, ease)}:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}:host(.panel-tools--open) .panel-tools__drawer{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views,.panel-tools__full-view{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view{height:100%}.panel-tools__full-view{display:none}.panel-tools__full-view--active{display:block}:host([presentation='fullscreen']){height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}:host([presentation='fullscreen']) .panel-tools__rail{display:none}:host([presentation='fullscreen']) .panel-tools__drawer{max-width:100vw;transition:none;width:100vw}:host([presentation='fullscreen']) .panel-tools__drawer--visible{border-left:none}:host([presentation='fullscreen']) .panel-tools__drawer-surface{background-color:transparent;width:100vw}:host([presentation='fullscreen']:not(.panel-tools--fullscreen)) .panel-tools__drawer-surface,:host(.panel-tools--fullscreen:not([presentation='fullscreen'])) .panel-tools__drawer-surface{visibility:hidden}:host(.panel-tools--presentation-snap) .panel-tools__drawer{transition:none}.panel-tools__body{flex:1 1 auto;min-height:0;overflow:auto;position:relative}:host(.panel-tools--drawer-resting) .panel-tools__body{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view ::slotted(*){margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active{display:block}.panel-tools__rail{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer{transition:none}}`;const z=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.railBodyScrollable=false;this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=e=>{const s=e.detail;if(!this.activeTool||!s?.id)return;e.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:s.id})};this.handleTransitionEnd=e=>{const s=this.renderRoot.querySelector(".panel-tools__drawer");if(e.target!==s)return;if(e.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(e.type==="transitioncancel")return;if(s&&!this.drawerTransitionAtTerminal(s,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=e=>{const s=C(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return b(this.railItems)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null;this.disconnectRailBodyObserver()}presentationChanged(e,t){if(e===t)return;if(this.el.getAttribute("presentation")!==e){this.el.setAttribute("presentation",e)}const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(e==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof s?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const e=this.focusBeforeFullscreen;const s=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(e?.isConnected){e.focus({preventScroll:true})}const t=e?document.activeElement===e||e.contains(document.activeElement):false;if(!t&&s)await this.focusHeaderAction(s);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:e})}handleFullscreenEscape(e){if(this.presentation!=="fullscreen"||e.key!=="Escape")return;e.preventDefault();e.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(e,s){if(e)this.drawerSurfaceRetained=true;if(this.readyForMotion&&s!==undefined&&s!==e){this.startDrawerTransition(e?"opening":"closing")}else if(!e){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.connectRailBodyObserver();this.updateRailBodyScrollable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}componentDidRender(){this.updateRailBodyScrollable()}connectRailBodyObserver(){this.disconnectRailBodyObserver();if(!this.railBodyEl||typeof ResizeObserver==="undefined")return;this.railBodyObserver=new ResizeObserver((()=>this.updateRailBodyScrollable()));this.railBodyObserver.observe(this.railBodyEl)}disconnectRailBodyObserver(){this.railBodyObserver?.disconnect();this.railBodyObserver=undefined}updateRailBodyScrollable(){const e=Boolean(this.railBodyEl&&this.railBodyEl.scrollHeight>this.railBodyEl.clientHeight+1);if(e!==this.railBodyScrollable)this.railBodyScrollable=e}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(w(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=_(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}startDrawerTransition(e){const s=this.renderRoot.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=e;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==e)return;if(!s){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(s,e)){this.finishDrawerTransition();return}const o=x(getComputedStyle(s));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(e,s){const t=e.getBoundingClientRect().width;const o=e.querySelector(".panel-tools__drawer-surface");const i=o?.getBoundingClientRect().width??0;return T(t,i,s)}finishDrawerTransition(){const e=this.motion;const s=e!=="idle";this.clearTransitionCompletion();if(!s)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(e==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}hasFullView(e){return this.fullViewToolIds.includes(e)}syncFullViewTools(){const e=this.orderedRailItems.map((e=>e.id));const s=e.filter((e=>Boolean(this.el.querySelector(`[slot="${e}-view"]`))));if(s.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=s}get renderRoot(){return this.el.shadowRoot??this.el}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const e=this.railItems.find((e=>e.id===this.activeTool));return e?.label??m[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}async focusHeaderAction(e){const s=this.renderRoot.querySelector(`[data-header-action-id="${CSS.escape(e)}"]`);await(s?.setFocus?.())}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.renderRoot.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??e.label??m[e.id]??e.id;return o("ds-tooltip",{key:e.id,label:t,shortcutKey:e.shortcutKey??g[e.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,pressScale:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.activeHeader();const t=s.title?.trim()||e;const n=s.actions??[];const r=this.orderedRailItems;const a=r.filter((e=>y(e)==="header"));const l=r.filter((e=>y(e)==="body"));const d=r.filter((e=>y(e)==="footer"));const c=a.length;const h=c+l.length;const f=this.isDrawerPresent();const u=k(this.open,this.motion);const p=Boolean(f&&this.activeTool&&this.hasFullView(this.activeTool));const m=r.map((e=>e.id));return o(i,{key:"2e78cd4ee2f8458fdb5ad465aeb2e0501cd72951",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":u,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"df58b6f1d89ed84b096c7f6fbb025ea5eabe19fa",class:"panel-tools__layout"},o("nav",{key:"e44b4f7c35f914871bad6fc6907992cdb479b06c",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},a.length?o("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},a.map(((e,s)=>this.renderRailAction(e,s)))):null,o("div",{key:"1c2bd85b45f3883313cf9b0cc218068902a33ca3",class:{"panel-tools__rail-body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.railBodyScrollable},ref:e=>{const s=e??undefined;if(s===this.railBodyEl)return;this.railBodyEl=s;this.connectRailBodyObserver()},role:this.railBodyScrollable?"region":undefined,"aria-label":this.railBodyScrollable?this.toolShortcutsLabel:undefined,tabIndex:this.railBodyScrollable?0:undefined},o("div",{key:"5be836263e97f79b8f7d22691b5f68200fe9e96e",class:"panel-tools__rail-actions"},l.map(((e,s)=>this.renderRailAction(e,c+s))))),d.length?o("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((e,s)=>this.renderRailAction(e,h+s)))):null),o("div",{key:"d4cbf04d2c78cb98250dec248f11d2f96955576a",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":f},"aria-hidden":f?null:"true",inert:f?undefined:true},o("div",{key:"b89f164dbeb59a100fc2650377209eaffc8fb02f",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:s.showBack??false,backIcon:s.backIcon||"ChevronLeft",backAriaLabel:s.backAriaLabel||"Back",showMenu:false,ref:e=>{const s=e;if(s)s.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"5271e06e9f7e4058893d67c4cb7b0fe805e0a90f",class:"panel-tools__body",hidden:p},m.map((e=>{const s=this.isViewActive(e);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":s},hidden:!s},o("slot",{name:e}))}))),o("div",{key:"4ce1fc1594dc2c0380187f4adfb54d3fc28efe66",class:"panel-tools__full-views",hidden:!p},m.map((e=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(e)&&this.hasFullView(e)},hidden:!(this.isViewActive(e)&&this.hasFullView(e))},o("slot",{name:`${e}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}}static get style(){return A()}},[257,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],railBodyScrollable:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}]);function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(n(e))){customElements.define(n(e),z)}break;case"ds-badge":if(!customElements.get(n(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){l()}break;case"ds-icon":if(!customElements.get(n(e))){d()}break;case"ds-loader":if(!customElements.get(n(e))){c()}break;case"ds-panel-tool-header":if(!customElements.get(n(e))){h()}break;case"ds-text":if(!customElements.get(n(e))){f()}break;case"ds-tooltip":if(!customElements.get(n(e))){u()}break}}))}S();export{z as P,m as a,C as b,v as c,S as d,b as o,_ as r};
-//# sourceMappingURL=p-BzLnSwG9.js.map