@ds-mo/ui 6.0.1 → 8.0.0

package/dist/types/components.d.ts

@@ -5,20 +5,20 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { NavChromeStyle } from "./nav/nav-chrome";
-import { ShellGradientPreset } from "./nav/shell-gradient-presets";
+import { NavChromeStyle } from "./shell/nav-chrome";
+import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 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 { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
+import { ChipSize, ChipState } from "./components/Chip/Chip";
+import { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
@@ -27,36 +27,37 @@ import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 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 { ChromeTransitionDetail } from "./shell/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";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-import { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 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";
-export { NavChromeStyle } from "./nav/nav-chrome";
-export { ShellGradientPreset } from "./nav/shell-gradient-presets";
+export { NavChromeStyle } from "./shell/nav-chrome";
+export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 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 { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
+export { ChipSize, ChipState } from "./components/Chip/Chip";
+export { DividerBackground, DividerInset, DividerLength, DividerOrientation } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
@@ -65,19 +66,20 @@ export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 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 { ChromeTransitionDetail } from "./shell/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";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-export { SkeletonSurface, SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 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";
@@ -115,17 +117,17 @@ export namespace Components {
          */
         "gradientBackground": boolean;
         /**
-          * Accessible label. Defaults to the count as a string.
+          * Contextual supplemental text. Omit when the owner hides the badge from assistive technology.
          */
         "label": string | undefined;
         /**
-          * Highest count shown before compacting to "+".
+          * Highest count shown before compacting to "{max}+".
           * @default 9
          */
         "max": number;
         /**
-          * Surface context for the ring around dots.
-          * @default 'default'
+          * Immediate backing surface matched by the ring around either variant.
+          * @default 'primary'
          */
         "surface": BadgeSurface;
         /**
@@ -208,6 +210,7 @@ export namespace Components {
     }
     interface DsButtonFilled {
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel": string | null;
@@ -231,6 +234,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 ''
@@ -265,17 +273,14 @@ export namespace Components {
          */
         "activeFill": boolean;
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "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 +313,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 +563,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}'
@@ -588,6 +589,10 @@ export namespace Components {
         "state": ChipState;
     }
     interface DsDivider {
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background": DividerBackground | undefined;
         /**
           * Insets the divider from its start/end edges. Accepts spacing token names or any CSS length.
           * @default 'none'
@@ -608,11 +613,6 @@ export namespace Components {
           * @default false
          */
         "semantic": boolean;
-        /**
-          * Surface context so the divider uses the right TokoMo divider token.
-          * @default 'default'
-         */
-        "surface": DividerSurface;
     }
     interface DsEmptyState {
         "message": string | undefined;
@@ -636,19 +636,15 @@ export namespace Components {
     interface DsIcon {
         /**
           * Semantic foreground color token, or a raw CSS var reference.
+          * @default 'inherit'
          */
-        "color": IconColor | undefined;
-        /**
-          * Set `true` to look up from the flag icon set instead of the system icon set.
-          * @default false
-         */
-        "flag": boolean;
+        "color": IconColor;
         /**
           * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
          */
         "label": string | undefined;
         /**
-          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * Exact canonical IcoMo export name, including the `Flag` prefix for flags.
           * @default ''
          */
         "name": string;
@@ -713,8 +709,9 @@ export namespace Components {
     interface DsLoader {
         /**
           * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+          * @default 'inherit'
          */
-        "color": LoaderColor | undefined;
+        "color": LoaderColor;
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
          */
@@ -908,6 +905,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.
@@ -1084,6 +1102,10 @@ export namespace Components {
         "selected": boolean;
     }
     interface DsSkeleton {
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background": SkeletonBackground | undefined;
         /**
           * Shared control-density size whose height defines the control canvas.
           * @default 'md'
@@ -1104,11 +1126,6 @@ export namespace Components {
           * @default true
          */
         "shimmer": boolean;
-        /**
-          * Surface context used to select the matching foreground base and shimmer tokens.
-          * @default 'default'
-         */
-        "surface": SkeletonSurface;
         /**
           * Text metric recipe whose line-height defines the text canvas.
           * @default 'text-body-medium'
@@ -1208,47 +1225,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 ''
          */
@@ -1305,14 +1285,38 @@ export namespace Components {
         "sortState": SortState | undefined;
     }
     interface DsTag {
+        /**
+          * ID of the menu controlled by an interactive Tag.
+         */
+        "ariaControls": string | undefined;
         /**
           * @default 'faint'
          */
         "contrast": TagContrast;
+        /**
+          * Controlled open state for the menu triggered by an interactive Tag.
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * Canonical icon name rendered before the visible label.
+          * @default ''
+         */
+        "icon": string;
         /**
           * @default 'neutral'
          */
         "intent": TagIntent;
+        /**
+          * Render a menu-trigger button with a fixed ChevronUpDown suffix.
+          * @default false
+         */
+        "interactive": boolean;
+        /**
+          * Disable an interactive Tag and apply the shared inactive treatment.
+          * @default false
+         */
+        "isInactive": boolean;
         "label": string;
         "maxWidth": string | number | undefined;
         /**
@@ -1330,7 +1334,10 @@ export namespace Components {
           * @default 'p'
          */
         "as": TextElement;
-        "color": TextColor | undefined;
+        /**
+          * @default 'inherit'
+         */
+        "color": TextColor;
         "decoration": TextDecoration | undefined;
         /**
           * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
@@ -1511,6 +1518,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,14 +1554,14 @@ 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;
 }
+export interface DsTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTagElement;
+}
 declare global {
     interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
     }
@@ -1897,6 +1908,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 +2076,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 };
@@ -2085,7 +2095,18 @@ declare global {
         prototype: HTMLDsTableElement;
         new (): HTMLDsTableElement;
     };
+    interface HTMLDsTagElementEventMap {
+        "dsClick": MouseEvent;
+    }
     interface HTMLDsTagElement extends Components.DsTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElement: {
         prototype: HTMLDsTagElement;
@@ -2154,6 +2175,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 +2185,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;
@@ -2207,17 +2228,17 @@ declare namespace LocalJSX {
          */
         "gradientBackground"?: boolean;
         /**
-          * Accessible label. Defaults to the count as a string.
+          * Contextual supplemental text. Omit when the owner hides the badge from assistive technology.
          */
         "label"?: string | undefined;
         /**
-          * Highest count shown before compacting to "+".
+          * Highest count shown before compacting to "{max}+".
           * @default 9
          */
         "max"?: number;
         /**
-          * Surface context for the ring around dots.
-          * @default 'default'
+          * Immediate backing surface matched by the ring around either variant.
+          * @default 'primary'
          */
         "surface"?: BadgeSurface;
         /**
@@ -2305,6 +2326,7 @@ declare namespace LocalJSX {
     }
     interface DsButtonFilled {
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel"?: string | null;
@@ -2328,6 +2350,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 ''
@@ -2362,17 +2389,14 @@ declare namespace LocalJSX {
          */
         "activeFill"?: boolean;
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "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 +2429,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 +2705,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 +2715,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}'
@@ -2715,6 +2735,10 @@ declare namespace LocalJSX {
         "state"?: ChipState;
     }
     interface DsDivider {
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background"?: DividerBackground | undefined;
         /**
           * Insets the divider from its start/end edges. Accepts spacing token names or any CSS length.
           * @default 'none'
@@ -2735,11 +2759,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "semantic"?: boolean;
-        /**
-          * Surface context so the divider uses the right TokoMo divider token.
-          * @default 'default'
-         */
-        "surface"?: DividerSurface;
     }
     interface DsEmptyState {
         "message"?: string | undefined;
@@ -2763,19 +2782,15 @@ declare namespace LocalJSX {
     interface DsIcon {
         /**
           * Semantic foreground color token, or a raw CSS var reference.
+          * @default 'inherit'
          */
-        "color"?: IconColor | undefined;
-        /**
-          * Set `true` to look up from the flag icon set instead of the system icon set.
-          * @default false
-         */
-        "flag"?: boolean;
+        "color"?: IconColor;
         /**
           * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
          */
         "label"?: string | undefined;
         /**
-          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * Exact canonical IcoMo export name, including the `Flag` prefix for flags.
           * @default ''
          */
         "name"?: string;
@@ -2845,8 +2860,9 @@ declare namespace LocalJSX {
     interface DsLoader {
         /**
           * Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`.
+          * @default 'inherit'
          */
-        "color"?: LoaderColor | undefined;
+        "color"?: LoaderColor;
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
          */
@@ -3065,6 +3081,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`.
@@ -3260,6 +3298,10 @@ declare namespace LocalJSX {
         "selected"?: boolean;
     }
     interface DsSkeleton {
+        /**
+          * Actual parent surface context. Omit on primary and secondary surfaces.
+         */
+        "background"?: SkeletonBackground | undefined;
         /**
           * Shared control-density size whose height defines the control canvas.
           * @default 'md'
@@ -3280,11 +3322,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "shimmer"?: boolean;
-        /**
-          * Surface context used to select the matching foreground base and shimmer tokens.
-          * @default 'default'
-         */
-        "surface"?: SkeletonSurface;
         /**
           * Text metric recipe whose line-height defines the text canvas.
           * @default 'text-body-medium'
@@ -3387,49 +3424,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 ''
          */
@@ -3489,16 +3487,44 @@ declare namespace LocalJSX {
         "sortState"?: SortState | undefined;
     }
     interface DsTag {
+        /**
+          * ID of the menu controlled by an interactive Tag.
+         */
+        "ariaControls"?: string | undefined;
         /**
           * @default 'faint'
          */
         "contrast"?: TagContrast;
+        /**
+          * Controlled open state for the menu triggered by an interactive Tag.
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * Canonical icon name rendered before the visible label.
+          * @default ''
+         */
+        "icon"?: string;
         /**
           * @default 'neutral'
          */
         "intent"?: TagIntent;
+        /**
+          * Render a menu-trigger button with a fixed ChevronUpDown suffix.
+          * @default false
+         */
+        "interactive"?: boolean;
+        /**
+          * Disable an interactive Tag and apply the shared inactive treatment.
+          * @default false
+         */
+        "isInactive"?: boolean;
         "label": string;
         "maxWidth"?: string | number | undefined;
+        /**
+          * Fired when the interactive Tag button is activated.
+         */
+        "onDsClick"?: (event: DsTagCustomEvent<MouseEvent>) => void;
         /**
           * @default false
          */
@@ -3514,7 +3540,10 @@ declare namespace LocalJSX {
           * @default 'p'
          */
         "as"?: TextElement;
-        "color"?: TextColor | undefined;
+        /**
+          * @default 'inherit'
+         */
+        "color"?: TextColor;
         "decoration"?: TextDecoration | undefined;
         /**
           * Heavier weight + tighter letter-spacing for the variant. `false` (default): one step below emphasis (display semibold, title/body medium, caption medium). `true`: display bold, title/caption semibold, body medium.
@@ -3676,6 +3705,7 @@ declare namespace LocalJSX {
         "intent": ButtonFilledIntent;
         "contrast": ButtonFilledContrast;
         "isInactive": boolean;
+        "isLoading": boolean;
         "type": 'button' | 'submit' | 'reset';
         "ariaLabel": string | null;
     }
@@ -3690,8 +3720,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,15 +3790,13 @@ declare namespace LocalJSX {
         "state": ChipState;
         "size": ChipSize;
         "rounded": boolean;
-        "removable": boolean;
         "maxWidth": string;
         "isInactive": boolean;
-        "background": ChipBackground | undefined;
         "removeLabel": string;
     }
     interface DsDividerAttributes {
         "orientation": DividerOrientation;
-        "surface": DividerSurface;
+        "background": DividerBackground | undefined;
         "inset": DividerInset;
         "length": DividerLength;
         "semantic": boolean;
@@ -3784,9 +3812,8 @@ declare namespace LocalJSX {
     interface DsIconAttributes {
         "name": string;
         "size": IconSize;
-        "color": IconColor | undefined;
+        "color": IconColor;
         "label": string | undefined;
-        "flag": boolean;
     }
     interface DsInputAttributes {
         "value": string;
@@ -3808,7 +3835,7 @@ declare namespace LocalJSX {
     }
     interface DsLoaderAttributes {
         "size": LoaderSize;
-        "color": LoaderColor | undefined;
+        "color": LoaderColor;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
@@ -3858,6 +3885,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 | '';
@@ -3910,7 +3943,7 @@ declare namespace LocalJSX {
         "width": string;
         "rounded": boolean;
         "shimmer": boolean;
-        "surface": SkeletonSurface;
+        "background": SkeletonBackground | undefined;
     }
     interface DsSliderAttributes {
         "value": number;
@@ -3941,16 +3974,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;
@@ -3966,16 +3989,21 @@ declare namespace LocalJSX {
     }
     interface DsTagAttributes {
         "label": string;
+        "icon": string;
         "intent": TagIntent;
         "contrast": TagContrast;
         "size": TagSize;
         "rounded": boolean;
         "maxWidth": string;
+        "interactive": boolean;
+        "expanded": boolean;
+        "ariaControls": string | undefined;
+        "isInactive": boolean;
     }
     interface DsTextAttributes {
         "variant": TextVariant;
         "emphasis": boolean;
-        "color": TextColor | undefined;
+        "color": TextColor;
         "decoration": TextDecoration | undefined;
         "italic": boolean;
         "shimmer": boolean;
@@ -4032,6 +4060,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 +4070,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 +4126,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 +4140,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>;