@ds-mo/ui 6.0.1 → 8.0.0

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

@@ -1,7 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
-export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
-export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
+export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 export type ButtonUnfilledWidth = ControlWidth;
@@ -34,15 +33,13 @@ export declare class ButtonUnfilled {
     dot: boolean;
     /** Disables interaction. */
     isInactive: boolean;
+    /** Shows an inline loader and prevents interaction without applying inactive opacity. */
+    isLoading: boolean;
     /** Native button type. */
     type: 'button' | 'submit' | 'reset';
-    /**
-     * Foreground and interaction tokens when the button sits on a contrasting parent
-     * background (default, medium, bold, or strong).
-     */
-    backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
-    /** Parent surface context for navigation and always-dark chrome. */
+    /** Actual parent surface context. Omit on primary and secondary surfaces. */
     background: ButtonUnfilledBackground | undefined;
+    /** Accessible name override. Required for icon-only buttons. */
     ariaLabel: string | null;
     controls: string | undefined;
     expanded: boolean | undefined;
@@ -58,7 +55,6 @@ export declare class ButtonUnfilled {
     private buttonEl;
     setFocus(): Promise<void>;
     private handleClick;
-    private effectiveContrast;
     private get showIcon();
     private get showLabel();
     private get showDot();

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

@@ -1,2 +1,2 @@
-export type { ButtonUnfilledBackground, ButtonUnfilledOnBackgroundContrast, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth, } from './ButtonUnfilled';
+export type { ButtonUnfilledBackground, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth, } from './ButtonUnfilled';
 //# sourceMappingURL=index.d.ts.map

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

@@ -8,7 +8,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export type ChipState = 'default' | 'active' | 'error' | 'caution';
 export type ChipSize = 'md' | 'sm' | 'xs';
-export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 /**
  * Removable chip — same density recipe as Tag, but colored by semantic `state`
  * (not intent × contrast). Not a toggle/select control; the only intentional
@@ -20,12 +19,8 @@ export declare class Chip {
     state: ChipState;
     size: ChipSize;
     rounded: boolean;
-    /** When true (default), shows the trailing dismiss control. */
-    removable: boolean;
     maxWidth: string | number | undefined;
     isInactive: boolean;
-    /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */
-    background: ChipBackground | undefined;
     /** Accessible remove action. Use `{label}` as the chip-label placeholder. */
     removeLabel: string;
     /** Fired when the remove button is clicked. */

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

@@ -1,2 +1,2 @@
-export type { ChipState, ChipSize, ChipBackground } from './Chip';
+export type { ChipState, ChipSize } from './Chip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,13 +1,13 @@
 export type DividerOrientation = 'horizontal' | 'vertical';
-export type DividerSurface = 'default' | 'on-bold-background' | 'on-strong-background' | 'on-medium-background' | 'on-translucent-background' | 'navigation' | 'media' | 'always-dark' | 'inverted';
+export type DividerBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'navigation' | 'always-dark';
 export type DividerInsetToken = 'space-000' | 'space-012' | 'space-025' | 'space-050' | 'space-075' | 'space-100' | 'space-125' | 'space-150' | 'space-175' | 'space-200' | 'space-250' | 'space-300' | 'space-400' | 'space-600' | 'space-800';
 export type DividerInset = 'none' | DividerInsetToken | (string & {});
 export type DividerLength = 'auto' | 'full' | (string & {});
 export declare class Divider {
     /** Direction of the divider line. Defaults to 'horizontal'. */
     orientation: DividerOrientation;
-    /** Surface context so the divider uses the right TokoMo divider token. */
-    surface: DividerSurface;
+    /** 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. */
     inset: DividerInset;
     /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */

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

@@ -1,2 +1,2 @@
-export type { DividerOrientation } from './Divider';
+export type { DividerBackground, DividerInset, DividerInsetToken, DividerLength, DividerOrientation, } from './Divider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -3,16 +3,14 @@ export type IconColorToken = 'primary' | 'secondary' | 'tertiary' | 'quaternary'
 export type IconColor = IconColorToken | `var(--${string})`;
 export declare class Icon {
     el: HTMLElement;
-    /** 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. */
     name: string;
     /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
     size: IconSize;
     /** Semantic foreground color token, or a raw CSS var reference. */
-    color: IconColor | undefined;
+    color: IconColor;
     /** Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons. */
     label: string | undefined;
-    /** Set `true` to look up from the flag icon set instead of the system icon set. */
-    flag: boolean;
     /** Resolved SVG markup — set synchronously on cache hit, async after a lazy load. */
     private svg;
     /** Guards against out-of-order async resolutions when `name`/`flag` change quickly. */

package/dist/types/components/Icon/icon-cache.d.ts

@@ -8,11 +8,11 @@ export declare function iconCache(): IconCacheMap;
  *
  * ```ts
  * import { Bell } from '@ds-mo/icons/svg/Bell';
- * import { US } from '@ds-mo/icons/svg/flags/US';
+ * import { FlagUnitedStates } from '@ds-mo/icons/svg/flags/FlagUnitedStates';
  * import { registerIcons } from '@ds-mo/ui/utils';
  *
  * registerIcons({ Bell });
- * registerIcons({ US }, { flag: true });
+ * registerIcons({ FlagUnitedStates });
  * ```
  *
  * Icons that are not registered still work — they lazy-load on first render

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

@@ -5,7 +5,7 @@ export declare class Loader {
     /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
     size: LoaderSize;
     /** Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`. */
-    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

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type MenuAlign, type MenuSide } from './menu-position';
 import type { MenuItemData, MenuSection } from './menu-types';
-import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
+import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';
 export declare class Menu {
     el: HTMLElement;
     open: boolean;

package/dist/types/components/Menu/menu-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 { MenuAlign, MenuSide } from './menu-position';
 export { PANEL_NAV_USER_MENU_PLACEMENT, type MenuPlacement, } from './menu-placement';
 export interface MenuItemData {

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
-import type { NavChromeStyle } from '../../nav/nav-chrome';
+import type { ChromeTransitionDetail } from '../../shell/chrome-transition';
+import type { NavChromeStyle } from '../../shell/nav-chrome';
 import { type PanelNavGroup, type PanelNavRouterMode, type PanelNavUserActionDetail } from './panel-nav-types';
 export declare class PanelNav {
     /** Style slot: `dashboard` or `settings`. Colors match for now;

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

@@ -1,5 +1,5 @@
 export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup, PanelNavUserActionDetail, } from './panel-nav-types';
 export { PANEL_NAV_USER_MENU_ANCHOR_ID, PANEL_NAV_USER_MENU_PLACEMENT } from './panel-nav-types';
-export type { NavChromeStyle } from '../../nav/nav-chrome';
+export type { NavChromeStyle } from '../../shell/nav-chrome';
 export { NAV_STYLE_HINT_ATTR, setNavStyleHint, clearNavStyleHint, resolvePanelNavStyle, shouldResyncPanelNavStyle, deriveActiveIdFromUrl, parsePanelNavGroups, } from './panel-nav-utils';
 //# sourceMappingURL=index.d.ts.map

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/PanelSubNav/PanelSubNav.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PanelSubNavItem } from './panel-sub-nav-types';
+export type PanelSubNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
+export declare class PanelSubNav {
+    el: HTMLElement;
+    /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */
+    value: string;
+    /**
+     * Local panel tabs. Assign this array through the JavaScript property.
+     * Replace the array reference when items change.
+     */
+    items: PanelSubNavItem[];
+    /** Actual parent surface context. Omit on primary and secondary surfaces. */
+    background: PanelSubNavBackground | undefined;
+    ariaLabel: string | null;
+    ariaLabelledby: string | undefined;
+    dsChange: EventEmitter<string>;
+    private get enabledItems();
+    private get focusableId();
+    private selectItem;
+    private focusItem;
+    onValueChange(next: string, previous: string | undefined): void;
+    private findEnabled;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}
+//# sourceMappingURL=PanelSubNav.d.ts.map

package/dist/types/components/PanelSubNav/panel-sub-nav-types.d.ts

@@ -0,0 +1,10 @@
+export interface PanelSubNavItem {
+    /** Unique tab id. Also used by the controlled panel's aria-labelledby. */
+    id: string;
+    label: string;
+    /** ID of the tabpanel controlled by this item. */
+    panelId: string;
+    /** Prevent selection and remove the item from keyboard navigation. */
+    isInactive?: boolean;
+}
+//# sourceMappingURL=panel-sub-nav-types.d.ts.map

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/TabGroup/TabGroup.d.ts

@@ -1,14 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TabItem } from './tab-item-utils';
-export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+import { type TabGroupItem } from './tab-item-utils';
+export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export declare class TabGroup {
     el: HTMLElement;
     value: string;
-    tabs: TabItem[];
+    tabs: TabGroupItem[];
     background: TabBackground | undefined;
     ariaLabel: string | null;
     ariaLabelledby: string | undefined;
-    orientation: 'horizontal' | 'vertical';
     dsChange: EventEmitter<string>;
     private get selectableTabs();
     private selectTab;

package/dist/types/components/TabGroup/tab-item-utils.d.ts

@@ -12,6 +12,20 @@ export interface TabItemTab {
     dot?: boolean;
 }
 export type TabItem = TabItemTab | TabItemDivider;
+export type TabGroupItemVariant = 'label' | 'icon' | 'icon-label';
+export interface TabGroupItemLabel extends TabItemTab {
+    variant?: 'label';
+    icon?: never;
+}
+export interface TabGroupItemIcon extends TabItemTab {
+    variant: 'icon';
+    icon: string;
+}
+export interface TabGroupItemIconLabel extends TabItemTab {
+    variant: 'icon-label';
+    icon: string;
+}
+export type TabGroupItem = TabGroupItemLabel | TabGroupItemIcon | TabGroupItemIconLabel | TabItemDivider;
 export declare function isTabDivider(item: TabItem): item is TabItemDivider;
 /** Tab entries that participate in selection, keyboard nav, and URL matching. */
 export declare function getSelectableTabs(tabs: TabItem[]): TabItemTab[];

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';