@ds-mo/ui 6.0.0 → 7.0.0

package/dist/types/components.d.ts

@@ -11,13 +11,13 @@ import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
-import { ButtonUnfilledBackground, ButtonUnfilledOnBackgroundContrast, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
+import { ButtonUnfilledBackground, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 import { CardAppearance, CardWidth } from "./components/Card/Card";
 import { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
 import { CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 import { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
-import { ChipBackground, ChipSize, ChipState } from "./components/Chip/Chip";
+import { ChipSize, ChipState } from "./components/Chip/Chip";
 import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { IconColor, IconSize } from "./components/Icon/Icon";
@@ -28,6 +28,8 @@ import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { ChromeTransitionDetail } from "./nav/chrome-transition";
+import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
+import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
@@ -37,9 +39,8 @@ import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 import { IconSize as IconSize1 } from "./components/Icon/Icon";
 import { ControlSize } from "./utils/control-text";
 import { SwitchSize } from "./components/Switch/Switch";
-import { TabItem } from "./components/TabGroup/tab-item-utils";
+import { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
-import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -49,13 +50,13 @@ export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
-export { ButtonUnfilledBackground, ButtonUnfilledOnBackgroundContrast, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
+export { ButtonUnfilledBackground, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 export { CardAppearance, CardWidth } from "./components/Card/Card";
 export { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
 export { CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 export { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
-export { ChipBackground, ChipSize, ChipState } from "./components/Chip/Chip";
+export { ChipSize, ChipState } from "./components/Chip/Chip";
 export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { IconColor, IconSize } from "./components/Icon/Icon";
@@ -66,6 +67,8 @@ export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { ChromeTransitionDetail } from "./nav/chrome-transition";
+export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
+export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { SelectOption, SelectSize, SelectWidth } from "./components/Select/Select";
@@ -75,9 +78,8 @@ export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 export { IconSize as IconSize1 } from "./components/Icon/Icon";
 export { ControlSize } from "./utils/control-text";
 export { SwitchSize } from "./components/Switch/Switch";
-export { TabItem } from "./components/TabGroup/tab-item-utils";
+export { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
-export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -231,6 +233,11 @@ export namespace Components {
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Shows an inline loader and prevents interaction without applying inactive opacity.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Visible text for `label` / `icon-label` variants.
           * @default ''
@@ -269,13 +276,9 @@ export namespace Components {
          */
         "ariaLabel": string | null;
         /**
-          * Parent surface context for navigation and always-dark chrome.
+          * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background": ButtonUnfilledBackground | undefined;
-        /**
-          * Foreground and interaction tokens when the button sits on a contrasting parent background (default, medium, bold, or strong).
-         */
-        "backgroundContrast"?: ButtonUnfilledOnBackgroundContrast;
         "controls": string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -308,6 +311,11 @@ export namespace Components {
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Shows an inline loader and prevents interaction without applying inactive opacity.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Visible text for `label` / `icon-label` variants.
           * @default ''
@@ -553,21 +561,12 @@ export namespace Components {
      * action is remove.
      */
     interface DsChip {
-        /**
-          * Surface context for interaction-fill tokens when the chip sits on a non-default surface.
-         */
-        "background": ChipBackground | undefined;
         /**
           * @default false
          */
         "isInactive": boolean;
         "label": string;
         "maxWidth": string | number | undefined;
-        /**
-          * When true (default), shows the trailing dismiss control.
-          * @default true
-         */
-        "removable": boolean;
         /**
           * Accessible remove action. Use `{label}` as the chip-label placeholder.
           * @default 'Remove {label}'
@@ -908,6 +907,27 @@ export namespace Components {
          */
         "userName": string;
     }
+    interface DsPanelSubNav {
+        /**
+          * @default null
+         */
+        "ariaLabel": string | null;
+        "ariaLabelledby": string | undefined;
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background": PanelSubNavBackground | undefined;
+        /**
+          * Local panel tabs. Assign this array through the JavaScript property. Replace the array reference when items change.
+          * @default []
+         */
+        "items": PanelSubNavItem[];
+        /**
+          * Required selected item id when enabled items exist. Keep synchronized with the visible panel.
+          * @default ''
+         */
+        "value": string;
+    }
     interface DsPanelTools {
         /**
           * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
@@ -1208,47 +1228,10 @@ export namespace Components {
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
         "background": TabBackground | undefined;
-        /**
-          * @default 'horizontal'
-         */
-        "orientation": 'horizontal' | 'vertical';
-        /**
-          * @default []
-         */
-        "tabs": TabItem[];
-        /**
-          * @default ''
-         */
-        "value": string;
-    }
-    interface DsTabGroupNav {
-        /**
-          * @default null
-         */
-        "ariaLabel": string | null;
-        "ariaLabelledby": string | undefined;
-        "background": TabGroupNavBackground | undefined;
-        "focusFirstTab": () => Promise<void>;
-        "focusLastTab": () => Promise<void>;
-        "focusTab": (id: string) => Promise<void>;
-        /**
-          * @default 'horizontal'
-         */
-        "orientation": 'horizontal' | 'vertical';
-        /**
-          * When `false`, every tab uses `tabindex="-1"` (another chrome control owns the tab stop).
-          * @default true
-         */
-        "rovingEnabled": boolean;
-        /**
-          * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection. Used by bar nav where each tab is a full page transition.
-          * @default true
-         */
-        "selectionFollowsFocus": boolean;
         /**
           * @default []
          */
-        "tabs": TabItem[];
+        "tabs": TabGroupItem[];
         /**
           * @default ''
          */
@@ -1511,6 +1494,10 @@ export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelNavElement;
 }
+export interface DsPanelSubNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPanelSubNavElement;
+}
 export interface DsPanelToolsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelToolsElement;
@@ -1543,10 +1530,6 @@ export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
 }
-export interface DsTabGroupNavCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsTabGroupNavElement;
-}
 export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
@@ -1897,6 +1880,23 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelSubNavElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsPanelSubNavElement extends Components.DsPanelSubNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPanelSubNavElementEventMap>(type: K, listener: (this: HTMLDsPanelSubNavElement, ev: DsPanelSubNavCustomEvent<HTMLDsPanelSubNavElementEventMap[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 HTMLDsPanelSubNavElementEventMap>(type: K, listener: (this: HTMLDsPanelSubNavElement, ev: DsPanelSubNavCustomEvent<HTMLDsPanelSubNavElementEventMap[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 HTMLDsPanelSubNavElement: {
+        prototype: HTMLDsPanelSubNavElement;
+        new (): HTMLDsPanelSubNavElement;
+    };
     interface HTMLDsPanelToolsElementEventMap {
         "dsToolChange": {
     id: PanelToolsToolId;
@@ -2048,24 +2048,6 @@ declare global {
         prototype: HTMLDsTabGroupElement;
         new (): HTMLDsTabGroupElement;
     };
-    interface HTMLDsTabGroupNavElementEventMap {
-        "dsChange": string;
-        "dsRovingExit": 'start' | 'end';
-    }
-    interface HTMLDsTabGroupNavElement extends Components.DsTabGroupNav, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElement: {
-        prototype: HTMLDsTabGroupNavElement;
-        new (): HTMLDsTabGroupNavElement;
-    };
     interface HTMLDsTableElementEventMap {
         "dsSort": { columnId: string };
         "dsRowClick": { row: unknown; rowIndex: number };
@@ -2154,6 +2136,7 @@ declare global {
         "ds-modal": HTMLDsModalElement;
         "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
+        "ds-panel-sub-nav": HTMLDsPanelSubNavElement;
         "ds-panel-tools": HTMLDsPanelToolsElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-select": HTMLDsSelectElement;
@@ -2163,7 +2146,6 @@ declare global {
         "ds-slider": HTMLDsSliderElement;
         "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
-        "ds-tab-group-nav": HTMLDsTabGroupNavElement;
         "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
@@ -2328,6 +2310,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Shows an inline loader and prevents interaction without applying inactive opacity.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Visible text for `label` / `icon-label` variants.
           * @default ''
@@ -2366,13 +2353,9 @@ declare namespace LocalJSX {
          */
         "ariaLabel"?: string | null;
         /**
-          * Parent surface context for navigation and always-dark chrome.
+          * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background"?: ButtonUnfilledBackground | undefined;
-        /**
-          * Foreground and interaction tokens when the button sits on a contrasting parent background (default, medium, bold, or strong).
-         */
-        "backgroundContrast"?: ButtonUnfilledOnBackgroundContrast;
         "controls"?: string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -2405,6 +2388,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Shows an inline loader and prevents interaction without applying inactive opacity.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Visible text for `label` / `icon-label` variants.
           * @default ''
@@ -2676,10 +2664,6 @@ declare namespace LocalJSX {
      * action is remove.
      */
     interface DsChip {
-        /**
-          * Surface context for interaction-fill tokens when the chip sits on a non-default surface.
-         */
-        "background"?: ChipBackground | undefined;
         /**
           * @default false
          */
@@ -2690,11 +2674,6 @@ declare namespace LocalJSX {
           * Fired when the remove button is clicked.
          */
         "onDsRemove"?: (event: DsChipCustomEvent<void>) => void;
-        /**
-          * When true (default), shows the trailing dismiss control.
-          * @default true
-         */
-        "removable"?: boolean;
         /**
           * Accessible remove action. Use `{label}` as the chip-label placeholder.
           * @default 'Remove {label}'
@@ -3065,6 +3044,28 @@ declare namespace LocalJSX {
          */
         "userName"?: string;
     }
+    interface DsPanelSubNav {
+        /**
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        "ariaLabelledby"?: string | undefined;
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background"?: PanelSubNavBackground | undefined;
+        /**
+          * Local panel tabs. Assign this array through the JavaScript property. Replace the array reference when items change.
+          * @default []
+         */
+        "items"?: PanelSubNavItem[];
+        "onDsChange"?: (event: DsPanelSubNavCustomEvent<string>) => void;
+        /**
+          * Required selected item id when enabled items exist. Keep synchronized with the visible panel.
+          * @default ''
+         */
+        "value"?: string;
+    }
     interface DsPanelTools {
         /**
           * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
@@ -3387,49 +3388,10 @@ declare namespace LocalJSX {
         "ariaLabelledby"?: string | undefined;
         "background"?: TabBackground | undefined;
         "onDsChange"?: (event: DsTabGroupCustomEvent<string>) => void;
-        /**
-          * @default 'horizontal'
-         */
-        "orientation"?: 'horizontal' | 'vertical';
         /**
           * @default []
          */
-        "tabs"?: TabItem[];
-        /**
-          * @default ''
-         */
-        "value"?: string;
-    }
-    interface DsTabGroupNav {
-        /**
-          * @default null
-         */
-        "ariaLabel"?: string | null;
-        "ariaLabelledby"?: string | undefined;
-        "background"?: TabGroupNavBackground | undefined;
-        "onDsChange"?: (event: DsTabGroupNavCustomEvent<string>) => void;
-        /**
-          * Fired when arrow navigation reaches the first/last tab in manual selection mode.
-         */
-        "onDsRovingExit"?: (event: DsTabGroupNavCustomEvent<'start' | 'end'>) => void;
-        /**
-          * @default 'horizontal'
-         */
-        "orientation"?: 'horizontal' | 'vertical';
-        /**
-          * When `false`, every tab uses `tabindex="-1"` (another chrome control owns the tab stop).
-          * @default true
-         */
-        "rovingEnabled"?: boolean;
-        /**
-          * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection. Used by bar nav where each tab is a full page transition.
-          * @default true
-         */
-        "selectionFollowsFocus"?: boolean;
-        /**
-          * @default []
-         */
-        "tabs"?: TabItem[];
+        "tabs"?: TabGroupItem[];
         /**
           * @default ''
          */
@@ -3676,6 +3638,7 @@ declare namespace LocalJSX {
         "intent": ButtonFilledIntent;
         "contrast": ButtonFilledContrast;
         "isInactive": boolean;
+        "isLoading": boolean;
         "type": 'button' | 'submit' | 'reset';
         "ariaLabel": string | null;
     }
@@ -3690,8 +3653,8 @@ declare namespace LocalJSX {
         "hasBorder": boolean;
         "dot": boolean;
         "isInactive": boolean;
+        "isLoading": boolean;
         "type": 'button' | 'submit' | 'reset';
-        "backgroundContrast": ButtonUnfilledOnBackgroundContrast;
         "background": ButtonUnfilledBackground | undefined;
         "ariaLabel": string | null;
         "controls": string | undefined;
@@ -3760,10 +3723,8 @@ declare namespace LocalJSX {
         "state": ChipState;
         "size": ChipSize;
         "rounded": boolean;
-        "removable": boolean;
         "maxWidth": string;
         "isInactive": boolean;
-        "background": ChipBackground | undefined;
         "removeLabel": string;
     }
     interface DsDividerAttributes {
@@ -3858,6 +3819,12 @@ declare namespace LocalJSX {
         "expandNavigationLabel": string;
         "collapseNavigationLabel": string;
     }
+    interface DsPanelSubNavAttributes {
+        "value": string;
+        "background": PanelSubNavBackground | undefined;
+        "ariaLabel": string | null;
+        "ariaLabelledby": string | undefined;
+    }
     interface DsPanelToolsAttributes {
         "open": boolean;
         "activeTool": PanelToolsToolId | '';
@@ -3941,16 +3908,6 @@ declare namespace LocalJSX {
         "background": TabBackground | undefined;
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
-        "orientation": 'horizontal' | 'vertical';
-    }
-    interface DsTabGroupNavAttributes {
-        "value": string;
-        "background": TabGroupNavBackground | undefined;
-        "ariaLabel": string | null;
-        "ariaLabelledby": string | undefined;
-        "orientation": 'horizontal' | 'vertical';
-        "selectionFollowsFocus": boolean;
-        "rovingEnabled": boolean;
     }
     interface DsTableAttributes {
         "loading": boolean;
@@ -4032,6 +3989,7 @@ declare namespace LocalJSX {
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
+        "ds-panel-sub-nav": Omit<DsPanelSubNav, keyof DsPanelSubNavAttributes> & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes]?: DsPanelSubNav[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `attr:${K}`]?: DsPanelSubNavAttributes[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `prop:${K}`]?: DsPanelSubNav[K] };
         "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
@@ -4041,7 +3999,6 @@ declare namespace LocalJSX {
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
         "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-tab-group-nav": Omit<DsTabGroupNav, keyof DsTabGroupNavAttributes> & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes]?: DsTabGroupNav[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `attr:${K}`]?: DsTabGroupNavAttributes[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `prop:${K}`]?: DsTabGroupNav[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] };
         "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] };
@@ -4098,6 +4055,7 @@ declare module "@stencil/core" {
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
+            "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
             "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             /**
@@ -4111,7 +4069,6 @@ declare module "@stencil/core" {
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-switch": LocalJSX.IntrinsicElements["ds-switch"] & JSXBase.HTMLAttributes<HTMLDsSwitchElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
-            "ds-tab-group-nav": LocalJSX.IntrinsicElements["ds-tab-group-nav"] & JSXBase.HTMLAttributes<HTMLDsTabGroupNavElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -70,7 +70,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs && node scripts/build-framework-exports.mjs && node scripts/build-registry.mjs && node scripts/build-agent-manifest.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
-    "test": "node --import tsx/esm --test tests/component-inventory.test.ts tests/agent-contract.test.ts tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/stylelint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/tooltip-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
+    "test": "node --import tsx/esm --test tests/component-inventory.test.ts tests/agent-contract.test.ts tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/stylelint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/tooltip-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium firefox webkit",
     "build:docs": "stencil build --docs",
@@ -97,7 +97,7 @@
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
     "@ds-mo/icons": "^6.2.0",
-    "@ds-mo/tokens": "^3.0.0",
+    "@ds-mo/tokens": "^3.1.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -122,7 +122,7 @@
     "@angular/forms": "^22.0.4",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^6.2.0",
-    "@ds-mo/tokens": "^3.0.0",
+    "@ds-mo/tokens": "^3.1.0",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.9",
     "@modelcontextprotocol/sdk": "^1.29.0",

package/dist/angular/ds-tab-group-nav.d.ts

@@ -1,20 +0,0 @@
-import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
-import type { Components } from '@ds-mo/ui/components';
-import type { DsTabGroupNavCustomEvent } from '@ds-mo/ui/components';
-import * as i0 from "@angular/core";
-export declare class DsTabGroupNav {
-    protected z: NgZone;
-    protected el: HTMLDsTabGroupNavElement;
-    dsChange: EventEmitter<DsTabGroupNavCustomEvent<string>>;
-    dsRovingExit: EventEmitter<DsTabGroupNavCustomEvent<"start" | "end">>;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsTabGroupNav, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsTabGroupNav, "ds-tab-group-nav", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "rovingEnabled": { "alias": "rovingEnabled"; "required": false; }; "selectionFollowsFocus": { "alias": "selectionFollowsFocus"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; "dsRovingExit": "dsRovingExit"; }, never, ["*"], true, never>;
-}
-export declare interface DsTabGroupNav extends Components.DsTabGroupNav {
-    dsChange: EventEmitter<DsTabGroupNavCustomEvent<string>>;
-    /**
-     * Fired when arrow navigation reaches the first/last tab in manual selection mode.
-     */
-    dsRovingExit: EventEmitter<DsTabGroupNavCustomEvent<'start' | 'end'>>;
-}

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +0,0 @@
-import{T as o,d as s}from"./p-CxOQaZ4f.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
-//# sourceMappingURL=ds-tab-group-nav.js.map

package/dist/components/ds-tab-group-nav.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/p-B-cWYMqs.js

@@ -1,2 +0,0 @@
-import{p as i,H as e,c as s,h as n,a as t,t as o}from"./index.js";import{d as r}from"./p-cgo-rgl4.js";import{d as a}from"./p-DkIbxCpi.js";import{d as c}from"./p-_OGE_E6L.js";import{d}from"./p-DhgDNluD.js";import{d as l}from"./p-CWd8L7Fk.js";import{a as u,T as h}from"./p-drBA73M_.js";import{r as m}from"./p-BWUTr_XN.js";import{r as f}from"./p-BHtg1fh3.js";function v(i){const{anchorRect:e,popupWidth:s,popupHeight:n,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:c,viewportWidth:d,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-n-r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"left":u=e.left-s-r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break}return{x:Math.min(Math.max(u,c),d-s-c),y:Math.min(Math.max(h,c),l-n-c)}}function p(i){return"variant"in i&&i.variant==="gradient-picker"}const g=()=>`.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.menu-popup.sc-ds-menu{animation:none;opacity:1}.menu-popup--closing.sc-ds-menu{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.section-header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   );text-align:start;-webkit-user-select:none;user-select:none}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__subtext.sc-ds-menu,ds-text.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__dot-box.sc-ds-menu{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0}`;const b=8;const w=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.dsGradientSelect=s(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=u.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;const i=this.closeAnimationMs;if(i<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),i)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return m(h.space050,h.space050)}get sideOffsetPx(){return m(this.sideOffset,h.space050)}get alignOffsetPx(){return m(this.alignOffset,0)}get popupFallbackWidthPx(){return m(h.menuWidthXs,h.menuWidthXs)}get popupFallbackHeightPx(){return m(h.menuFallbackHeight,h.menuFallbackHeight)}get closeAnimationMs(){return f(h.motionShort2,h.animationDurationShort3)}finishClose(){this.shouldRender=false;this.closing=false}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>p(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=b;const s=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(s)}};this.positionRetryRaf=requestAnimationFrame(s)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=v({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const s=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:s>=0?s:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(e)||n?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const s=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const t=n<0?0:n;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return n(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return n(t,{style:{display:"contents"}},n("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":this.menuLabel,"aria-orientation":"vertical"},i.map(((s,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":p(s)},role:s.header?"group":undefined,"aria-label":s.header},s.header&&n("ds-text",{class:"section-header ds-control--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},s.header),p(s)?n("ds-shell-gradient-picker",{value:s.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):s.items.map((i=>{const s=e++;const t=this.focusedIndex===s;return n("button",{key:s,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:i.showSwitch?"menuitemcheckbox":"menuitem","aria-checked":i.showSwitch?String(!!i.switchValue):undefined,"aria-current":!i.showSwitch&&i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=s}},n("div",{class:"menu-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label",as:"span",variant:"text-body-medium",color:i.isSelected?"primary":"secondary"},i.label),i.subtext&&n("ds-text",{class:"menu-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},i.subtext)),i.dot&&n("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},n("ds-badge",{class:"menu-item__dot",variant:"dot",background:i.isSelected&&!i.isInactive?"var(--ds-interaction-active)":"var(--color-background-primary)",label:""})),i.showSwitch&&n("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:"sm",checked:!!i.switchValue,presentation:true}))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return g()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-badge","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),w)}break;case"ds-badge":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){c()}break;case"ds-switch":if(!customElements.get(o(i))){d()}break;case"ds-text":if(!customElements.get(o(i))){l()}break}}))}x();export{w as M,x as d};
-//# sourceMappingURL=p-B-cWYMqs.js.map