@ds-mo/ui 13.17.0 → 13.18.0

package/dist/types/components.d.ts

@@ -30,6 +30,8 @@ import { CheckboxSize } from "./components/Checkbox/Checkbox";
 import { ChipSize, ChipState } from "./components/Chip/Chip";
 import { ConversationListActionLayout } from "./components/ConversationList/ConversationList";
 import { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
+import { FilterMenuChangeDetail, FilterMenuFilter, FilterMenuSize, FilterMenuValues, FilterMenuWidth } from "./components/FilterMenu/FilterMenu";
+import { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 import { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 import { InputSize, InputType, InputWidth } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
@@ -51,7 +53,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, SelectOption, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
+import { SelectBackground, SelectOption, SelectOptionActionDetail, 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";
@@ -91,6 +93,8 @@ export { CheckboxSize } from "./components/Checkbox/Checkbox";
 export { ChipSize, ChipState } from "./components/Chip/Chip";
 export { ConversationListActionLayout } from "./components/ConversationList/ConversationList";
 export { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
+export { FilterMenuChangeDetail, FilterMenuFilter, FilterMenuSize, FilterMenuValues, FilterMenuWidth } from "./components/FilterMenu/FilterMenu";
+export { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 export { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 export { InputSize, InputType, InputWidth } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
@@ -112,7 +116,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, SelectOption, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
+export { SelectBackground, SelectOption, SelectOptionActionDetail, 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";
@@ -1147,6 +1151,119 @@ export namespace Components {
          */
         "label": string;
     }
+    interface DsFilterMenu {
+        /**
+          * Show selected interaction fill when one or more criteria are active.
+          * @default false
+         */
+        "activeFill": boolean;
+        /**
+          * Controlled category shown in the option pane.
+         */
+        "activeFilterId": string | undefined;
+        /**
+          * Cross-axis alignment against the trigger.
+          * @default 'end'
+         */
+        "align": AnchoredAlign;
+        /**
+          * Cross-axis offset — number in px or a TokoMo length.
+          * @default 0
+         */
+        "alignOffset": number | string;
+        /**
+          * External trigger element to position against.
+         */
+        "anchor": HTMLElement | undefined;
+        /**
+          * ID of the external trigger element used for positioning and focus return.
+         */
+        "anchorId": string | undefined;
+        /**
+          * Direct accessible name for the internal select trigger.
+          * @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": FilterMenuFilter[];
+        /**
+          * Show the surface-aware inset border around the select trigger.
+          * @default true
+         */
+        "hasBorder": boolean;
+        /**
+          * Optional select trigger prefix icon name.
+          * @default 'Filters'
+         */
+        "icon": string | undefined;
+        /**
+          * Show a visible focus ring on initial entry after keyboard activation.
+          * @default false
+         */
+        "initialFocusVisible": boolean;
+        /**
+          * ID applied to the internal select trigger.
+         */
+        "inputId": string | undefined;
+        /**
+          * Accessible name for the non-modal filter dialog.
+          * @default 'Filters'
+         */
+        "menuLabel": string;
+        /**
+          * Popup width. It remains clamped to the viewport by the component recipe.
+          * @default TOKEN_CSS_LENGTHS.menuWidthLg
+         */
+        "menuWidth": string;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Preferred popup side; collision handling may flip it.
+          * @default 'bottom'
+         */
+        "side": AnchoredSide;
+        /**
+          * Gap between trigger and popup — number in px or a TokoMo length.
+          * @default TOKEN_CSS_LENGTHS.space050
+         */
+        "sideOffset": number | string;
+        /**
+          * Select trigger density.
+          * @default 'md'
+         */
+        "size": FilterMenuSize;
+        /**
+          * Select trigger text. The selected count is appended automatically.
+          * @default 'Filters'
+         */
+        "triggerLabel": string;
+        /**
+          * Controlled values keyed by filter id.
+          * @default {}
+         */
+        "values": FilterMenuValues;
+        /**
+          * Select trigger width fit.
+          * @default 'hug'
+         */
+        "width": FilterMenuWidth;
+    }
     interface DsIcon {
         /**
           * Semantic foreground color token, or a raw CSS var reference. `tertiary` and the still-fainter `quaternary` are restricted to icons inside genuinely inactive/disabled UI or to purely decorative icons; informative icons must retain sufficient contrast.
@@ -2061,6 +2178,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Show a supplemental notification dot beside the trigger label.
+          * @default false
+         */
+        "dot": boolean;
         /**
           * Show invalid visual state.
           * @default false
@@ -2070,6 +2192,10 @@ export namespace Components {
           * Error text rendered below the trigger when error is true.
          */
         "errorMessage": string | undefined;
+        /**
+          * Optional text action shown in the popup footer instead of the clear action.
+         */
+        "footerActionLabel": string | undefined;
         /**
           * Show the surface-aware inset border, including focused and invalid strokes.
           * @default true
@@ -2127,6 +2253,11 @@ export namespace Components {
           * @default 'Select'
          */
         "placeholder": string;
+        /**
+          * Align the popup's choice edge to the trigger start or end edge.
+          * @default 'start'
+         */
+        "popupAlign": SelectPopupAlign;
         /**
           * Require one valid selected value.
           * @default false
@@ -2163,6 +2294,15 @@ export namespace Components {
           * @default 'md'
          */
         "size": SelectSize;
+        /**
+          * Optional scalar-mode trigger text that does not change the selected option label.
+         */
+        "triggerLabel": string | undefined;
+        /**
+          * Present triggerLabel with placeholder emphasis while preserving the selected value.
+          * @default false
+         */
+        "triggerLabelPlaceholder": boolean;
         /**
           * Selected scalar or array value according to `multiple`.
           * @default ''
@@ -3077,6 +3217,10 @@ export interface DsConversationListItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsConversationListItemElement;
 }
+export interface DsFilterMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsFilterMenuElement;
+}
 export interface DsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsInputElement;
@@ -3583,6 +3727,28 @@ declare global {
         prototype: HTMLDsFieldElement;
         new (): HTMLDsFieldElement;
     };
+    interface HTMLDsFilterMenuElementEventMap {
+        "dsChange": FilterMenuChangeDetail;
+        "dsClear": void;
+        "dsActiveFilterChange": string;
+        "dsClose": void;
+        "dsOpenChange": boolean;
+        "dsAfterClose": void;
+    }
+    interface HTMLDsFilterMenuElement extends Components.DsFilterMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsFilterMenuElementEventMap>(type: K, listener: (this: HTMLDsFilterMenuElement, ev: DsFilterMenuCustomEvent<HTMLDsFilterMenuElementEventMap[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 HTMLDsFilterMenuElementEventMap>(type: K, listener: (this: HTMLDsFilterMenuElement, ev: DsFilterMenuCustomEvent<HTMLDsFilterMenuElementEventMap[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 HTMLDsFilterMenuElement: {
+        prototype: HTMLDsFilterMenuElement;
+        new (): HTMLDsFilterMenuElement;
+    };
     interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
     }
     var HTMLDsIconElement: {
@@ -3942,6 +4108,8 @@ declare global {
         "dsChange": SelectValue;
         "dsClear": void;
         "dsOpenChange": boolean;
+        "dsFooterAction": void;
+        "dsOptionAction": SelectOptionActionDetail;
     }
     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;
@@ -4231,6 +4399,7 @@ declare global {
         "ds-divider": HTMLDsDividerElement;
         "ds-empty-state": HTMLDsEmptyStateElement;
         "ds-field": HTMLDsFieldElement;
+        "ds-filter-menu": HTMLDsFilterMenuElement;
         "ds-icon": HTMLDsIconElement;
         "ds-input": HTMLDsInputElement;
         "ds-loader": HTMLDsLoaderElement;
@@ -5378,6 +5547,143 @@ declare namespace LocalJSX {
          */
         "label": string;
     }
+    interface DsFilterMenu {
+        /**
+          * Show selected interaction fill when one or more criteria are active.
+          * @default false
+         */
+        "activeFill"?: boolean;
+        /**
+          * Controlled category shown in the option pane.
+         */
+        "activeFilterId"?: string | undefined;
+        /**
+          * Cross-axis alignment against the trigger.
+          * @default 'end'
+         */
+        "align"?: AnchoredAlign;
+        /**
+          * Cross-axis offset — number in px or a TokoMo length.
+          * @default 0
+         */
+        "alignOffset"?: number | string;
+        /**
+          * External trigger element to position against.
+         */
+        "anchor"?: HTMLElement | undefined;
+        /**
+          * ID of the external trigger element used for positioning and focus return.
+         */
+        "anchorId"?: string | undefined;
+        /**
+          * Direct accessible name for the internal select trigger.
+          * @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"?: FilterMenuFilter[];
+        /**
+          * Show the surface-aware inset border around the select trigger.
+          * @default true
+         */
+        "hasBorder"?: boolean;
+        /**
+          * Optional select trigger prefix icon name.
+          * @default 'Filters'
+         */
+        "icon"?: string | undefined;
+        /**
+          * Show a visible focus ring on initial entry after keyboard activation.
+          * @default false
+         */
+        "initialFocusVisible"?: boolean;
+        /**
+          * ID applied to the internal select trigger.
+         */
+        "inputId"?: string | undefined;
+        /**
+          * Accessible name for the non-modal filter dialog.
+          * @default 'Filters'
+         */
+        "menuLabel"?: string;
+        /**
+          * Popup width. It remains clamped to the viewport by the component recipe.
+          * @default TOKEN_CSS_LENGTHS.menuWidthLg
+         */
+        "menuWidth"?: string;
+        /**
+          * Requests a controlled active-category replacement.
+         */
+        "onDsActiveFilterChange"?: (event: DsFilterMenuCustomEvent<string>) => void;
+        /**
+          * Emitted after exit motion and rendered popup removal complete.
+         */
+        "onDsAfterClose"?: (event: DsFilterMenuCustomEvent<void>) => void;
+        /**
+          * Requests a controlled value replacement without closing the popup.
+         */
+        "onDsChange"?: (event: DsFilterMenuCustomEvent<FilterMenuChangeDetail>) => void;
+        /**
+          * Requests that the consumer clear every filter value.
+         */
+        "onDsClear"?: (event: DsFilterMenuCustomEvent<void>) => void;
+        /**
+          * Requests that the controlled popup close.
+         */
+        "onDsClose"?: (event: DsFilterMenuCustomEvent<void>) => void;
+        /**
+          * Emitted whenever internal select-trigger activation changes popup visibility.
+         */
+        "onDsOpenChange"?: (event: DsFilterMenuCustomEvent<boolean>) => void;
+        /**
+          * Controlled popup visibility.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Preferred popup side; collision handling may flip it.
+          * @default 'bottom'
+         */
+        "side"?: AnchoredSide;
+        /**
+          * Gap between trigger and popup — number in px or a TokoMo length.
+          * @default TOKEN_CSS_LENGTHS.space050
+         */
+        "sideOffset"?: number | string;
+        /**
+          * Select trigger density.
+          * @default 'md'
+         */
+        "size"?: FilterMenuSize;
+        /**
+          * Select trigger text. The selected count is appended automatically.
+          * @default 'Filters'
+         */
+        "triggerLabel"?: string;
+        /**
+          * Controlled values keyed by filter id.
+          * @default {}
+         */
+        "values"?: FilterMenuValues;
+        /**
+          * Select trigger width fit.
+          * @default 'hug'
+         */
+        "width"?: FilterMenuWidth;
+    }
     interface DsIcon {
         /**
           * Semantic foreground color token, or a raw CSS var reference. `tertiary` and the still-fainter `quaternary` are restricted to icons inside genuinely inactive/disabled UI or to purely decorative icons; informative icons must retain sufficient contrast.
@@ -6361,6 +6667,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Show a supplemental notification dot beside the trigger label.
+          * @default false
+         */
+        "dot"?: boolean;
         /**
           * Show invalid visual state.
           * @default false
@@ -6370,6 +6681,10 @@ declare namespace LocalJSX {
           * Error text rendered below the trigger when error is true.
          */
         "errorMessage"?: string | undefined;
+        /**
+          * Optional text action shown in the popup footer instead of the clear action.
+         */
+        "footerActionLabel"?: string | undefined;
         /**
           * The `id` of a `<form>` element to associate this element with.
          */
@@ -6424,10 +6739,18 @@ declare namespace LocalJSX {
           * Emitted after the footer clear action.
          */
         "onDsClear"?: (event: DsSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when the optional popup footer action is activated.
+         */
+        "onDsFooterAction"?: (event: DsSelectCustomEvent<void>) => void;
         /**
           * Emitted whenever popup visibility changes.
          */
         "onDsOpenChange"?: (event: DsSelectCustomEvent<boolean>) => void;
+        /**
+          * Emitted when an option's contextual ellipsis action is activated.
+         */
+        "onDsOptionAction"?: (event: DsSelectCustomEvent<SelectOptionActionDetail>) => void;
         /**
           * Controlled popup visibility.
           * @default false
@@ -6443,6 +6766,11 @@ declare namespace LocalJSX {
           * @default 'Select'
          */
         "placeholder"?: string;
+        /**
+          * Align the popup's choice edge to the trigger start or end edge.
+          * @default 'start'
+         */
+        "popupAlign"?: SelectPopupAlign;
         /**
           * Require one valid selected value.
           * @default false
@@ -6478,6 +6806,15 @@ declare namespace LocalJSX {
           * @default 'md'
          */
         "size"?: SelectSize;
+        /**
+          * Optional scalar-mode trigger text that does not change the selected option label.
+         */
+        "triggerLabel"?: string | undefined;
+        /**
+          * Present triggerLabel with placeholder emphasis while preserving the selected value.
+          * @default false
+         */
+        "triggerLabelPlaceholder"?: boolean;
         /**
           * Selected scalar or array value according to `multiple`.
           * @default ''
@@ -7641,6 +7978,28 @@ declare namespace LocalJSX {
         "error": boolean;
         "errorMessage": string | undefined;
     }
+    interface DsFilterMenuAttributes {
+        "open": boolean;
+        "triggerLabel": string;
+        "icon": string | undefined;
+        "size": FilterMenuSize;
+        "width": FilterMenuWidth;
+        "hasBorder": boolean;
+        "activeFill": boolean;
+        "inputId": string | undefined;
+        "ariaLabel": string | null;
+        "activeFilterId": string | undefined;
+        "anchorId": string | undefined;
+        "side": AnchoredSide;
+        "align": AnchoredAlign;
+        "sideOffset": string;
+        "alignOffset": string;
+        "menuWidth": string;
+        "menuLabel": string;
+        "categoriesLabel": string;
+        "clearLabel": string;
+        "initialFocusVisible": boolean;
+    }
     interface DsIconAttributes {
         "name": string;
         "size": IconSize;
@@ -7866,8 +8225,12 @@ declare namespace LocalJSX {
         "required": boolean;
         "requiredMessage": string;
         "placeholder": string;
+        "triggerLabel": string | undefined;
+        "triggerLabelPlaceholder": boolean;
+        "dot": boolean;
         "size": SelectSize;
         "width": SelectWidth;
+        "popupAlign": SelectPopupAlign;
         "isInactive": boolean;
         "isLoading": boolean;
         "activeFill": boolean;
@@ -7876,6 +8239,7 @@ declare namespace LocalJSX {
         "allowClear": boolean;
         "clearLabel": string;
         "selectedLabel": string;
+        "footerActionLabel": string | undefined;
         "searchable": boolean;
         "searchPlaceholder": string;
         "noResultsText": string;
@@ -8107,6 +8471,7 @@ declare namespace LocalJSX {
         "ds-divider": Omit<DsDivider, keyof DsDividerAttributes> & { [K in keyof DsDivider & keyof DsDividerAttributes]?: DsDivider[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `attr:${K}`]?: DsDividerAttributes[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `prop:${K}`]?: DsDivider[K] };
         "ds-empty-state": Omit<DsEmptyState, keyof DsEmptyStateAttributes> & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes]?: DsEmptyState[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `attr:${K}`]?: DsEmptyStateAttributes[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `prop:${K}`]?: DsEmptyState[K] };
         "ds-field": Omit<DsField, keyof DsFieldAttributes> & { [K in keyof DsField & keyof DsFieldAttributes]?: DsField[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `attr:${K}`]?: DsFieldAttributes[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `prop:${K}`]?: DsField[K] } & OneOf<"label", DsField["label"], DsFieldAttributes["label"]>;
+        "ds-filter-menu": Omit<DsFilterMenu, keyof DsFilterMenuAttributes> & { [K in keyof DsFilterMenu & keyof DsFilterMenuAttributes]?: DsFilterMenu[K] } & { [K in keyof DsFilterMenu & keyof DsFilterMenuAttributes as `attr:${K}`]?: DsFilterMenuAttributes[K] } & { [K in keyof DsFilterMenu & keyof DsFilterMenuAttributes as `prop:${K}`]?: DsFilterMenu[K] };
         "ds-icon": Omit<DsIcon, keyof DsIconAttributes> & { [K in keyof DsIcon & keyof DsIconAttributes]?: DsIcon[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `attr:${K}`]?: DsIconAttributes[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `prop:${K}`]?: DsIcon[K] };
         "ds-input": Omit<DsInput, keyof DsInputAttributes> & { [K in keyof DsInput & keyof DsInputAttributes]?: DsInput[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `attr:${K}`]?: DsInputAttributes[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `prop:${K}`]?: DsInput[K] };
         "ds-loader": Omit<DsLoader, keyof DsLoaderAttributes> & { [K in keyof DsLoader & keyof DsLoaderAttributes]?: DsLoader[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `attr:${K}`]?: DsLoaderAttributes[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `prop:${K}`]?: DsLoader[K] };
@@ -8196,6 +8561,7 @@ declare module "@stencil/core" {
             "ds-divider": LocalJSX.IntrinsicElements["ds-divider"] & JSXBase.HTMLAttributes<HTMLDsDividerElement>;
             "ds-empty-state": LocalJSX.IntrinsicElements["ds-empty-state"] & JSXBase.HTMLAttributes<HTMLDsEmptyStateElement>;
             "ds-field": LocalJSX.IntrinsicElements["ds-field"] & JSXBase.HTMLAttributes<HTMLDsFieldElement>;
+            "ds-filter-menu": LocalJSX.IntrinsicElements["ds-filter-menu"] & JSXBase.HTMLAttributes<HTMLDsFilterMenuElement>;
             "ds-icon": LocalJSX.IntrinsicElements["ds-icon"] & JSXBase.HTMLAttributes<HTMLDsIconElement>;
             "ds-input": LocalJSX.IntrinsicElements["ds-input"] & JSXBase.HTMLAttributes<HTMLDsInputElement>;
             "ds-loader": LocalJSX.IntrinsicElements["ds-loader"] & JSXBase.HTMLAttributes<HTMLDsLoaderElement>;

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

@@ -20,9 +20,20 @@ interface ChoiceFooterProps {
     size?: ControlSize;
     clearLabel: string;
     summary?: string;
+    compactSummary?: string;
+    useCompactSummary?: boolean;
+    contentRef?: (element: HTMLDivElement | null) => void;
+    summaryMeasureRef?: (element: HTMLElement | null) => void;
+    clearRef?: (element: HTMLButtonElement | null) => void;
     onClear: (event: MouseEvent) => void;
 }
 export declare const ChoiceFooter: FunctionalComponent<ChoiceFooterProps>;
+interface ChoiceActionFooterProps {
+    size?: ControlSize;
+    label: string;
+    onAction: (event: MouseEvent) => void;
+}
+export declare const ChoiceActionFooter: FunctionalComponent<ChoiceActionFooterProps>;
 interface ChoiceOptionRowProps {
     size?: ControlSize;
     id: string;
@@ -32,6 +43,12 @@ interface ChoiceOptionRowProps {
     focusRingVisible: boolean;
     usesSubtext: boolean;
     leading?: VNode;
+    action?: VNode;
+    actionOpen?: boolean;
+    popupRole?: 'listbox' | 'grid';
+    tabIndex?: number;
+    onFocus?: () => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
     onHover: () => void;
     onSelect: () => void;
 }

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

@@ -5,6 +5,16 @@ export interface ChoiceOption {
     /** Rendered only when every option in the complete list supplies an icon. */
     icon?: string;
     isInactive?: boolean;
+    /** Optional contextual action shown at the trailing edge of this option. */
+    action?: ChoiceOptionAction;
+}
+export interface ChoiceOptionAction {
+    /** Accessible name for the fixed ellipsis action. */
+    label: string;
+    /** ID of the popup controlled by the action. */
+    controls?: string;
+    /** Keep the action visible and expose its controlled popup state. */
+    expanded?: boolean;
 }
 export interface ChoiceSection {
     header?: string;

package/dist/types/utils/select-controller.d.ts

@@ -11,6 +11,7 @@ export interface SelectControllerState<T extends ChoiceOption> {
     readonly isLoading: boolean;
     readonly isDisabled: boolean;
     readonly preferredIndex: number;
+    readonly popupAlign: 'start' | 'end';
     open: boolean;
     activeIndex: number;
     searchTerm: string;
@@ -46,6 +47,7 @@ export declare class SelectController<T extends ChoiceOption> {
     setFocus(): void;
     optionsChanged(): void;
     loadingChanged(): void;
+    positionChanged(): void;
     openChanged(open: boolean): void;
     searchChanged(): void;
     activeIndexChanged(): void;

package/dist/types/utils/token-defaults.d.ts

@@ -21,6 +21,7 @@ export declare const TOKEN_DEFAULTS: {
     readonly panelWidthMd: "--dimension-panel-width-md";
     readonly panelWidthLg: "--dimension-panel-width-lg";
     readonly menuWidthXs: "--dimension-menu-width-xs";
+    readonly menuWidthLg: "--dimension-menu-width-lg";
     readonly lineheightLg: "--typography-lineheight-lg";
     readonly lineheightMd: "--typography-lineheight-md";
     readonly lineheightSm: "--typography-lineheight-sm";
@@ -50,5 +51,6 @@ export declare const TOKEN_CSS_LENGTHS: {
     readonly space050: "var(--dimension-space-050)";
     readonly space200: "var(--dimension-space-200)";
     readonly menuWidthXs: "var(--dimension-menu-width-xs)";
+    readonly menuWidthLg: "var(--dimension-menu-width-lg)";
 };
 //# sourceMappingURL=token-defaults.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "13.17.0",
+  "version": "13.18.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -141,6 +141,7 @@
     "@ds-mo/icons": "^6.6.0",
     "@ds-mo/tokens": "^6.2.1",
     "@eslint/js": "^10.0.1",
+    "@fontsource-variable/inter": "^5.3.0",
     "@fontsource/fira-code": "^5.3.0",
     "@modelcontextprotocol/client": "^2.0.0",
     "@modelcontextprotocol/server": "^2.0.0",

package/dist/components/p-B2SoinWf.js

@@ -1,2 +0,0 @@
-import{p as o,H as t,h as s,a as i,t as r}from"./index.js";import{d as e}from"./p-Dhx_3_tf.js";import{T as c,r as a}from"./p-CXduurfd.js";import{C as n,a as d}from"./p-CuwopElg.js";const l=()=>`.ds-control--lg.sc-ds-tooltip-chart,.ds-control--lg.sc-ds-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart,.ds-control--sm.sc-ds-tooltip-chart-h,.ds-control--sm.sc-ds-tooltip-chart,.ds-control--xs.sc-ds-tooltip-chart-h,.ds-control--xs.sc-ds-tooltip-chart{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-chart-h,.ds-control--lg.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--sm.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--xs.sc-ds-tooltip-chart{--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-control-frame.sc-ds-tooltip-chart{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-tooltip-chart{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-tooltip-chart{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-tooltip-chart{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-chrome-space--sm.sc-ds-tooltip-chart-h,.ds-chrome-space--sm.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-tooltip-chart-h,.ds-chrome-space--md.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-tooltip-chart-h,.ds-chrome-space--lg.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-tooltip-chart-h,.ds-chrome-row.sc-ds-tooltip-chart,.ds-chrome-column.sc-ds-tooltip-chart-h,.ds-chrome-column.sc-ds-tooltip-chart,.ds-chrome-grid.sc-ds-tooltip-chart-h,.ds-chrome-grid.sc-ds-tooltip-chart{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-tooltip-chart-h,.ds-chrome-row.sc-ds-tooltip-chart{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-tooltip-chart-h,.ds-chrome-column.sc-ds-tooltip-chart{flex-direction:column}.ds-chrome-grid.sc-ds-tooltip-chart-h,.ds-chrome-grid.sc-ds-tooltip-chart{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-tooltip-chart:root,.sc-ds-tooltip-chart-h,.ds-forced-colors-scope.sc-ds-tooltip-chart{--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-tooltip-chart-h{position:absolute;z-index:var(--dimension-z-index-tooltip);background-color:var(--color-translucent-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-chart--visible.sc-ds-tooltip-chart-h{animation:tooltip-chart-fade-in var(--effect-motion-short-2) forwards}.tooltip-chart__item.sc-ds-tooltip-chart{width:100%;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.tooltip-chart__items.sc-ds-tooltip-chart{display:contents}.tooltip-chart__swatch-box.sc-ds-tooltip-chart{pointer-events:none}.tooltip-chart__swatch.sc-ds-tooltip-chart{width:var(--dimension-size-100);height:var(--dimension-size-100);flex:none;border-radius:var(--dimension-radius-half);background:var(--ds-tooltip-chart-swatch)}.tooltip-chart__value.sc-ds-tooltip-chart{margin-inline-start:auto;text-align:end}.tooltip-chart__label.sc-ds-tooltip-chart,.tooltip-chart__value.sc-ds-tooltip-chart{flex:none}@keyframes tooltip-chart-fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tooltip-chart--visible.sc-ds-tooltip-chart-h{animation:none;opacity:1}}@media (forced-colors: active){.sc-ds-tooltip-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const h=12;const p=8;const m=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=c.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return a(this.delay,c.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const o=this.showDelayMs;if(o<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),o)}calculatePlacement(){const o=this.el.getBoundingClientRect();if(!o.width||!o.height)return;const t=o.right>window.innerWidth-p?"left":"right";const s=o.bottom>window.innerHeight-p?"top":"bottom";if(t!==this.side)this.side=t;if(s!==this.align)this.align=s}render(){const o=this.side==="right"?`${h}px`:`calc(-100% - ${h}px)`;const t=this.align==="bottom"?`${h}px`:`calc(-100% - ${h}px)`;const r=this.items??[{label:this.label,value:this.value}];const e=r.some((o=>Boolean(o.color)));return s(i,{key:"61f006cddc134d6ff8b2b899483bacd3de8f82c1",class:{"tooltip-chart":true,"tooltip-chart--visible":this.visible,"ds-chrome-column":true,"ds-chrome-space--sm":true},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${o}, ${t})`}},this.heading&&s("ds-text",{key:"eb622d67c7a577f3e34df44140dd37a77145c6ae",class:"tooltip-chart__heading ds-control-section-heading ds-control--md",as:"span",variant:d.md,emphasis:true,color:"var(--color-foreground-primary)"},this.heading),s("div",{key:"c4448830cd43bdc77fe6c87da9b0fa83f988f9f1",class:"tooltip-chart__items"},r.map(((o,t)=>s("div",{class:"tooltip-chart__item ds-control-frame ds-control--md",key:`${o.label}-${t}`},e&&s("span",{class:"tooltip-chart__swatch-box ds-control-icon-box","aria-hidden":"true"},o.color&&s("span",{class:"tooltip-chart__swatch",style:{"--ds-tooltip-chart-swatch":o.color}})),s("ds-text",{class:"tooltip-chart__label ds-control-label-box",as:"span",variant:n.md,color:"var(--color-foreground-secondary)"},o.label),s("ds-text",{class:"tooltip-chart__value ds-control-label-box",as:"span",variant:n.md,emphasis:true,color:"var(--color-foreground-primary)"},o.value))))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return l()}},[2,"ds-tooltip-chart",{value:[8],label:[1],heading:[1],items:[16],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-tooltip-chart","ds-text"];o.forEach((o=>{switch(o){case"ds-tooltip-chart":if(!customElements.get(r(o))){customElements.define(r(o),m)}break;case"ds-text":if(!customElements.get(r(o))){e()}break}}))}g();export{m as T,g as d};
-//# sourceMappingURL=p-B2SoinWf.js.map