@ds-mo/ui 7.0.0 → 8.0.0

package/dist/types/components/PanelNav/panel-nav-types.d.ts

@@ -1,6 +1,6 @@
 import type { MenuPlacement } from '../Menu/menu-placement';
 import { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';
-import type { NavChromeStyle } from '../../nav/nav-chrome';
+import type { NavChromeStyle } from '../../shell/nav-chrome';
 export type { NavChromeStyle };
 export type PanelNavRouterMode = 'anchor' | 'event';
 export interface PanelNavItem {
@@ -9,7 +9,6 @@ export interface PanelNavItem {
     label: string;
     /** Show a notification dot badge on the item */
     dot?: boolean;
-    flag?: boolean;
     /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.
      *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */
     href?: string;

package/dist/types/components/PanelNav/panel-nav-utils.d.ts

@@ -1,6 +1,6 @@
 import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
-import { NAV_STYLE_HINT_ATTR, clearNavStyleHint, readNavStyleAttr, resolveNavChromeStyle, setNavStyleHint, shouldResyncNavChromeStyle } from '../../nav/nav-chrome';
-export type { NavChromeStyle } from '../../nav/nav-chrome';
+import { NAV_STYLE_HINT_ATTR, clearNavStyleHint, readNavStyleAttr, resolveNavChromeStyle, setNavStyleHint, shouldResyncNavChromeStyle } from '../../shell/nav-chrome';
+export type { NavChromeStyle } from '../../shell/nav-chrome';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle as resolvePanelNavStyle, shouldResyncNavChromeStyle as shouldResyncPanelNavStyle, };
 /** Whether `path` matches `href` at a segment boundary (exact or child path). */
 export declare function hrefMatchesPath(path: string, href: string): boolean;

package/dist/types/components/PanelTools/PanelTools.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
+import type { ChromeTransitionDetail } from '../../shell/chrome-transition';
 import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
 export declare class PanelTools {
     el: HTMLElement;

package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts

@@ -1,4 +1,4 @@
-import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
+import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';
 export type { ShellGradientPreset };
-export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_WASH_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from '../../nav/shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_WASH_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from '../../shell/shell-gradient-presets';
 //# sourceMappingURL=shell-gradient-swatch-types.d.ts.map

package/dist/types/components/Skeleton/Skeleton.d.ts

@@ -2,7 +2,7 @@ import type { IconSize } from '../Icon/Icon';
 import type { TextVariant } from '../Text/text-types';
 import type { ControlSize } from '../../utils/control-text';
 export type SkeletonVariant = 'text' | 'icon' | 'control';
-export type SkeletonSurface = 'default' | 'on-bold-background' | 'on-strong-background' | 'on-medium-background' | 'on-translucent-background' | 'navigation' | 'media' | 'always-dark' | 'inverted';
+export type SkeletonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'navigation' | 'always-dark';
 export declare class Skeleton {
     variant: SkeletonVariant;
     /** Text metric recipe whose line-height defines the text canvas. */
@@ -17,8 +17,8 @@ export declare class Skeleton {
     rounded: boolean;
     /** Whether to show the shimmer animation. */
     shimmer: boolean;
-    /** Surface context used to select the matching foreground base and shimmer tokens. */
-    surface: SkeletonSurface;
+    /** Actual parent surface context. Omit on primary and secondary surfaces. */
+    background: SkeletonBackground | undefined;
     private get widthCss();
     render(): any;
 }

package/dist/types/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export type { SkeletonSurface, SkeletonVariant } from './Skeleton';
+export type { SkeletonBackground, SkeletonVariant } from './Skeleton';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Tag/Tag.d.ts

@@ -1,13 +1,27 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
 export type TagSize = 'md' | 'sm' | 'xs';
 export declare class Tag {
     label: string;
+    /** Canonical icon name rendered before the visible label. */
+    icon: string;
     intent: TagIntent;
     contrast: TagContrast;
     size: TagSize;
     rounded: boolean;
     maxWidth: string | number | undefined;
+    /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */
+    interactive: boolean;
+    /** Controlled open state for the menu triggered by an interactive Tag. */
+    expanded: boolean;
+    /** ID of the menu controlled by an interactive Tag. */
+    ariaControls: string | undefined;
+    /** Disable an interactive Tag and apply the shared inactive treatment. */
+    isInactive: boolean;
+    /** Fired when the interactive Tag button is activated. */
+    dsClick: EventEmitter<MouseEvent>;
+    private handleClick;
     render(): any;
 }
 //# sourceMappingURL=Tag.d.ts.map

package/dist/types/components/Text/Text.d.ts

@@ -8,7 +8,7 @@ export declare class Text {
      * `true`: display bold, title/caption semibold, body medium.
      */
     emphasis: boolean;
-    color: TextColor | undefined;
+    color: TextColor;
     decoration: TextDecoration | undefined;
     italic: boolean;
     /** Animate the visible glyphs with the shared loading shimmer treatment. */

package/dist/types/components/Text/text-types.d.ts

@@ -3,7 +3,7 @@ export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'n
 export type TextColor = TextColorToken | `var(--${string})`;
 export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
 export type TextAlign = 'left' | 'center' | 'right';
-export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | 'none';
 export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
 export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type TextFontFeature = 'normal' | 'tabular-nums';

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * 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";
@@ -18,7 +18,7 @@ import { CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 import { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
 import { ChipSize, ChipState } from "./components/Chip/Chip";
-import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
+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,14 +27,14 @@ 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";
@@ -44,8 +44,8 @@ import { TabBackground } from "./components/TabGroup/TabGroup";
 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";
@@ -57,7 +57,7 @@ export { CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
 export { ChartLegendDirection } from "./components/ChartLegend/ChartLegend";
 export { ChipSize, ChipState } from "./components/Chip/Chip";
-export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
+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";
@@ -66,14 +66,14 @@ 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";
@@ -117,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;
         /**
@@ -210,6 +210,7 @@ export namespace Components {
     }
     interface DsButtonFilled {
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel": string | null;
@@ -272,6 +273,7 @@ export namespace Components {
          */
         "activeFill": boolean;
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel": string | null;
@@ -587,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'
@@ -607,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;
@@ -635,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;
@@ -712,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.
          */
@@ -1104,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'
@@ -1124,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'
@@ -1288,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;
         /**
@@ -1313,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.
@@ -1534,6 +1558,10 @@ 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 {
     }
@@ -2067,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;
@@ -2189,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;
         /**
@@ -2287,6 +2326,7 @@ declare namespace LocalJSX {
     }
     interface DsButtonFilled {
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel"?: string | null;
@@ -2349,6 +2389,7 @@ declare namespace LocalJSX {
          */
         "activeFill"?: boolean;
         /**
+          * Accessible name override. Required for icon-only buttons.
           * @default null
          */
         "ariaLabel"?: string | null;
@@ -2694,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'
@@ -2714,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;
@@ -2742,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;
@@ -2824,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.
          */
@@ -3261,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'
@@ -3281,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'
@@ -3451,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
          */
@@ -3476,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.
@@ -3729,7 +3796,7 @@ declare namespace LocalJSX {
     }
     interface DsDividerAttributes {
         "orientation": DividerOrientation;
-        "surface": DividerSurface;
+        "background": DividerBackground | undefined;
         "inset": DividerInset;
         "length": DividerLength;
         "semantic": boolean;
@@ -3745,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;
@@ -3769,7 +3835,7 @@ declare namespace LocalJSX {
     }
     interface DsLoaderAttributes {
         "size": LoaderSize;
-        "color": LoaderColor | undefined;
+        "color": LoaderColor;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
@@ -3877,7 +3943,7 @@ declare namespace LocalJSX {
         "width": string;
         "rounded": boolean;
         "shimmer": boolean;
-        "surface": SkeletonSurface;
+        "background": SkeletonBackground | undefined;
     }
     interface DsSliderAttributes {
         "value": number;
@@ -3923,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -49,9 +49,9 @@
       "types": "./dist/types/components.d.ts",
       "import": "./dist/components/index.js"
     },
-    "./nav": {
-      "types": "./dist/lib/nav/index.d.ts",
-      "import": "./dist/lib/nav/index.js"
+    "./shell": {
+      "types": "./dist/lib/shell/index.d.ts",
+      "import": "./dist/lib/shell/index.js"
     },
     "./utils": {
       "types": "./dist/lib/utils/index.d.ts",

package/dist/components/p-C7yzdJNM.js

@@ -1,2 +0,0 @@
-import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-qawuX6gT.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a!==null&&a.getAttribute("gradient-preset")!=="none"}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
-//# sourceMappingURL=p-C7yzdJNM.js.map