@ds-mo/ui 1.4.0 → 1.6.0

package/dist/types/components.d.ts

@@ -6,10 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionItemData } from "./components/Accordion/Accordion";
+import { NavChromeStyle } from "./nav/nav-chrome";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-import { NavChromeStyle } from "./nav/nav-chrome";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -28,7 +28,6 @@ import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-n
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
-import { SidebarWidth } from "./components/Sidebar/Sidebar";
 import { SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -42,10 +41,10 @@ import { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from
 import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
+export { NavChromeStyle } from "./nav/nav-chrome";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-export { NavChromeStyle } from "./nav/nav-chrome";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -64,7 +63,6 @@ export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-n
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
-export { SidebarWidth } from "./components/Sidebar/Sidebar";
 export { SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -93,6 +91,23 @@ export namespace Components {
          */
         "multiple": boolean;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient": boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc": string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle": NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -524,10 +539,10 @@ export namespace Components {
          */
         "label": string | undefined;
         /**
-          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
-          * @default 20
+          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
+          * @default TOKEN_DEFAULTS.iconographyMd
          */
-        "size": number;
+        "size": number | string;
     }
     interface DsMenu {
         /**
@@ -535,9 +550,10 @@ export namespace Components {
          */
         "align": MenuAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset": number;
+        "alignOffset": number | string;
         /**
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
@@ -565,9 +581,10 @@ export namespace Components {
          */
         "side": MenuSide;
         /**
-          * @default 4
+          * Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.).
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset": number;
+        "sideOffset": number | string;
     }
     interface DsModal {
         "heading": string;
@@ -611,7 +628,7 @@ export namespace Components {
          */
         "breakpoint": number;
         /**
-          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * Whether the nav is in collapsed (icon-only) state. Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change.
           * @default false
          */
         "collapsed": boolean;
@@ -641,7 +658,7 @@ export namespace Components {
          */
         "routerMode": PanelNavRouterMode;
         /**
-          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * `localStorage` key used to persist the collapsed state across page loads. When set, collapsed state is restored on mount and written on each toggle.
           * @default ''
          */
         "storageKey": string;
@@ -711,24 +728,6 @@ export namespace Components {
          */
         "value": string;
     }
-    interface DsSidebar {
-        /**
-          * @default false
-         */
-        "collapsed": boolean;
-        /**
-          * @default false
-         */
-        "mobile": boolean;
-        /**
-          * @default true
-         */
-        "resizable": boolean;
-        /**
-          * @default 'default'
-         */
-        "width": SidebarWidth;
-    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -1032,13 +1031,15 @@ export namespace Components {
          */
         "align": TooltipAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset": number;
+        "alignOffset": number | string;
         /**
-          * @default HOVER_DELAY_MS
+          * Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`.
+          * @default TOKEN_DEFAULTS.animationDelayMedium1
          */
-        "delay": number;
+        "delay": number | string;
         "label": string;
         "shortcutKey": string | undefined;
         /**
@@ -1050,9 +1051,10 @@ export namespace Components {
          */
         "side": TooltipSide;
         /**
-          * @default 4
+          * Gap between anchor and tooltip — number (px) or TokoMo length.
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset": number;
+        "sideOffset": number | string;
     }
 }
 export interface DsAccordionCustomEvent<T> extends CustomEvent<T> {
@@ -1119,10 +1121,6 @@ export interface DsSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSelectElement;
 }
-export interface DsSidebarCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsSidebarElement;
-}
 export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSliderElement;
@@ -1169,6 +1167,12 @@ declare global {
         prototype: HTMLDsAccordionElement;
         new (): HTMLDsAccordionElement;
     };
+    interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
+    }
+    var HTMLDsAppShellElement: {
+        prototype: HTMLDsAppShellElement;
+        new (): HTMLDsAppShellElement;
+    };
     interface HTMLDsBadgeElement extends Components.DsBadge, HTMLStencilElement {
     }
     var HTMLDsBadgeElement: {
@@ -1494,24 +1498,6 @@ declare global {
         prototype: HTMLDsSelectElement;
         new (): HTMLDsSelectElement;
     };
-    interface HTMLDsSidebarElementEventMap {
-        "dsToggle": void;
-        "dsWidthChange": SidebarWidth;
-    }
-    interface HTMLDsSidebarElement extends Components.DsSidebar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElementEventMap>(type: K, listener: (this: HTMLDsSidebarElement, ev: DsSidebarCustomEvent<HTMLDsSidebarElementEventMap[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 HTMLDsSidebarElement: {
-        prototype: HTMLDsSidebarElement;
-        new (): HTMLDsSidebarElement;
-    };
     interface HTMLDsSkeletonElement extends Components.DsSkeleton, HTMLStencilElement {
     }
     var HTMLDsSkeletonElement: {
@@ -1671,6 +1657,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-app-shell": HTMLDsAppShellElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
@@ -1696,7 +1683,6 @@ declare global {
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
-        "ds-sidebar": HTMLDsSidebarElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
         "ds-surface": HTMLDsSurfaceElement;
@@ -1731,6 +1717,23 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "onDsExpandedChange"?: (event: DsAccordionCustomEvent<string[]>) => void;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient"?: boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc"?: string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle"?: NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -2197,10 +2200,10 @@ declare namespace LocalJSX {
          */
         "label"?: string | undefined;
         /**
-          * Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally.
-          * @default 20
+          * Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.).
+          * @default TOKEN_DEFAULTS.iconographyMd
          */
-        "size"?: number;
+        "size"?: number | string;
     }
     interface DsMenu {
         /**
@@ -2208,9 +2211,10 @@ declare namespace LocalJSX {
          */
         "align"?: MenuAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset"?: number;
+        "alignOffset"?: number | string;
         /**
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
@@ -2240,9 +2244,10 @@ declare namespace LocalJSX {
          */
         "side"?: MenuSide;
         /**
-          * @default 4
+          * Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.).
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset"?: number;
+        "sideOffset"?: number | string;
     }
     interface DsModal {
         "heading": string;
@@ -2288,7 +2293,7 @@ declare namespace LocalJSX {
          */
         "breakpoint"?: number;
         /**
-          * Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
+          * Whether the nav is in collapsed (icon-only) state. Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change.
           * @default false
          */
         "collapsed"?: boolean;
@@ -2334,7 +2339,7 @@ declare namespace LocalJSX {
          */
         "routerMode"?: PanelNavRouterMode;
         /**
-          * `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
+          * `localStorage` key used to persist the collapsed state across page loads. When set, collapsed state is restored on mount and written on each toggle.
           * @default ''
          */
         "storageKey"?: string;
@@ -2409,26 +2414,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface DsSidebar {
-        /**
-          * @default false
-         */
-        "collapsed"?: boolean;
-        /**
-          * @default false
-         */
-        "mobile"?: boolean;
-        "onDsToggle"?: (event: DsSidebarCustomEvent<void>) => void;
-        "onDsWidthChange"?: (event: DsSidebarCustomEvent<SidebarWidth>) => void;
-        /**
-          * @default true
-         */
-        "resizable"?: boolean;
-        /**
-          * @default 'default'
-         */
-        "width"?: SidebarWidth;
-    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -2747,13 +2732,15 @@ declare namespace LocalJSX {
          */
         "align"?: TooltipAlign;
         /**
+          * Cross-axis offset — number (px) or TokoMo length.
           * @default 0
          */
-        "alignOffset"?: number;
+        "alignOffset"?: number | string;
         /**
-          * @default HOVER_DELAY_MS
+          * Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`.
+          * @default TOKEN_DEFAULTS.animationDelayMedium1
          */
-        "delay"?: number;
+        "delay"?: number | string;
         "label": string;
         "shortcutKey"?: string | undefined;
         /**
@@ -2765,15 +2752,21 @@ declare namespace LocalJSX {
          */
         "side"?: TooltipSide;
         /**
-          * @default 4
+          * Gap between anchor and tooltip — number (px) or TokoMo length.
+          * @default TOKEN_DEFAULTS.space050
          */
-        "sideOffset"?: number;
+        "sideOffset"?: number | string;
     }
 
     interface DsAccordionAttributes {
         "multiple": boolean;
         "expandedIds": string;
     }
+    interface DsAppShellAttributes {
+        "navStyle": NavChromeStyle;
+        "gradient": boolean;
+        "gradientSrc": string;
+    }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
         "count": number;
@@ -2909,15 +2902,15 @@ declare namespace LocalJSX {
         "ariaDescribedby": string | undefined;
     }
     interface DsLoaderAttributes {
-        "size": number;
+        "size": string;
         "label": string | undefined;
     }
     interface DsMenuAttributes {
         "open": boolean;
         "side": MenuSide;
         "align": MenuAlign;
-        "sideOffset": number;
-        "alignOffset": number;
+        "sideOffset": string;
+        "alignOffset": string;
         "menuWidth": string | undefined;
         "minWidth": string | undefined;
         "anchorId": string | undefined;
@@ -2965,12 +2958,6 @@ declare namespace LocalJSX {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
     }
-    interface DsSidebarAttributes {
-        "collapsed": boolean;
-        "width": string;
-        "resizable": boolean;
-        "mobile": boolean;
-    }
     interface DsSkeletonAttributes {
         "variant": SkeletonVariant;
         "width": string;
@@ -3071,15 +3058,16 @@ declare namespace LocalJSX {
         "label": string;
         "side": TooltipSide;
         "align": TooltipAlign;
-        "sideOffset": number;
-        "alignOffset": number;
-        "delay": number;
+        "sideOffset": string;
+        "alignOffset": string;
+        "delay": string;
         "shortcutKey": string | undefined;
         "shortcutKeyPosition": 'start' | 'end';
     }
 
     interface IntrinsicElements {
         "ds-accordion": Omit<DsAccordion, keyof DsAccordionAttributes> & { [K in keyof DsAccordion & keyof DsAccordionAttributes]?: DsAccordion[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `attr:${K}`]?: DsAccordionAttributes[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `prop:${K}`]?: DsAccordion[K] };
+        "ds-app-shell": Omit<DsAppShell, keyof DsAppShellAttributes> & { [K in keyof DsAppShell & keyof DsAppShellAttributes]?: DsAppShell[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `attr:${K}`]?: DsAppShellAttributes[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `prop:${K}`]?: DsAppShell[K] };
         "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
         "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] };
         "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
@@ -3105,7 +3093,6 @@ declare namespace LocalJSX {
         "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-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[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] };
-        "ds-sidebar": Omit<DsSidebar, keyof DsSidebarAttributes> & { [K in keyof DsSidebar & keyof DsSidebarAttributes]?: DsSidebar[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `attr:${K}`]?: DsSidebarAttributes[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `prop:${K}`]?: DsSidebar[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
         "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-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
@@ -3126,6 +3113,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.IntrinsicElements["ds-accordion"] & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-app-shell": LocalJSX.IntrinsicElements["ds-app-shell"] & JSXBase.HTMLAttributes<HTMLDsAppShellElement>;
             "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
             "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
             "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
@@ -3151,7 +3139,6 @@ declare module "@stencil/core" {
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
-            "ds-sidebar": LocalJSX.IntrinsicElements["ds-sidebar"] & JSXBase.HTMLAttributes<HTMLDsSidebarElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;

package/dist/types/nav/index.d.ts

@@ -2,4 +2,6 @@ export type { NavChromeStyle } from './nav-chrome';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle, shouldResyncNavChromeStyle, } from './nav-chrome';
 export { SHELL_BAR_NAV_VT_NAME, parseCssTimeMs, ensureShellNavVtStyle, resolveShellNavRevealOrigin, setShellNavRevealOriginVars, animateShellNavRadialReveal, runShellNavStyleRevealOnReady, } from './shell-view-transition';
 export type { ShellNavRevealOrigin } from './shell-view-transition';
+export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSITION_PANEL_VAR, SHELL_GRADIENT_POSITION_BAR_VAR, SHELL_GRADIENT_OPACITY_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImageForStyle, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, } from './shell-gradient';
+export type { ShellGradientLayout } from './shell-gradient';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/nav/shell-gradient.d.ts

@@ -0,0 +1,25 @@
+import type { NavChromeStyle } from './nav-chrome';
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+export declare const SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
+export declare const SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
+export declare const SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
+export declare const SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-position-bar";
+export declare const SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
+/** Layer opacity for the nav gradient wash. */
+export declare const SHELL_GRADIENT_OPACITY = "0.1";
+/**
+ * Unified shell radial — same wash for all nav chrome styles.
+ * Tokens follow `data-theme` (light/dark blue intent).
+ */
+export declare function buildShellRadialGradient(): string;
+/** Built-in radial image (optional `gradientSrc` on shell overrides). */
+export declare function shellGradientImageForStyle(_style: NavChromeStyle): string;
+export interface ShellGradientLayout {
+    width: number;
+    height: number;
+    panelWidth: number;
+}
+export declare function shellGradientSize(layout: ShellGradientLayout): string;
+export declare function shellGradientPositionPanel(): string;
+export declare function shellGradientPositionBar(panelWidth: number): string;
+//# sourceMappingURL=shell-gradient.d.ts.map

package/dist/types/nav/shell-view-transition.d.ts

@@ -1,7 +1,7 @@
+import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
 /** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
 export declare const SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
-/** Parse a CSS <time> value to milliseconds. */
-export declare function parseCssTimeMs(value: string, fallback: number): number;
+export { parseCssTimeMs };
 /** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
 export declare function ensureShellNavVtStyle(): void;
 export interface ShellNavRevealOrigin {

package/dist/types/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
+export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export { TOKEN_DEFAULTS } from './token-defaults';
+export type { TokenDefaultKey } from './token-defaults';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/resolve-css-length-px.d.ts

@@ -0,0 +1,8 @@
+/** Clear session cache (tests only). */
+export declare function clearCssLengthPxCache(): void;
+/**
+ * Resolve a CSS length to pixels for layout math.
+ * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.
+ */
+export declare function resolveCssLengthPx(value: number | string | undefined, fallback: number | string): number;
+//# sourceMappingURL=resolve-css-length-px.d.ts.map

package/dist/types/utils/resolve-css-time-ms.d.ts

@@ -0,0 +1,8 @@
+/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */
+export declare function parseCssTimeMs(value: string, fallback: number): number;
+/**
+ * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.
+ * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.
+ */
+export declare function resolveCssTimeMs(value: number | string | undefined, fallbackToken: string): number;
+//# sourceMappingURL=resolve-css-time-ms.d.ts.map

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

@@ -0,0 +1,27 @@
+/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */
+export declare const TOKEN_DEFAULTS: {
+    readonly space050: "--dimension-space-050";
+    readonly space200: "--dimension-space-200";
+    readonly size300: "--dimension-size-300";
+    readonly size600: "--dimension-size-600";
+    readonly size800: "--dimension-size-800";
+    readonly iconographyMd: "--dimension-iconography-md";
+    readonly iconographySm: "--dimension-iconography-sm";
+    readonly iconographyXs: "--dimension-iconography-xs";
+    readonly panelWidth2xs: "--dimension-panel-width-2xs";
+    readonly panelWidthMd: "--dimension-panel-width-md";
+    readonly panelWidthLg: "--dimension-panel-width-lg";
+    readonly menuWidthXs: "--dimension-menu-width-xs";
+    readonly motionShort3: "--effect-motion-short-3";
+    readonly animationDurationShort3: "--effect-animation-duration-short-3";
+    readonly animationDurationMedium1: "--effect-animation-duration-medium-1";
+    readonly animationDelayMedium1: "--effect-animation-delay-medium-1";
+    readonly animationDelayShort2: "--effect-animation-delay-short-2";
+    readonly animationDelayLong2: "--effect-animation-delay-long-2";
+    /** Unmeasured menu height fallback: 20× base (160px at default scale). */
+    readonly menuFallbackHeight: "calc(var(--dimension-size-base) * 20)";
+    /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
+    readonly tooltipFallbackWidth: "calc(var(--dimension-size-800) + var(--dimension-size-200))";
+};
+export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;
+//# sourceMappingURL=token-defaults.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -62,13 +62,13 @@
     "prebuild": "node scripts/generate-icon-catalog.mjs",
     "pretypecheck": "node scripts/generate-icon-catalog.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
-    "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
+    "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",
     "dev": "node scripts/generate-icon-catalog.mjs && stencil build --watch",
-    "storybook:ui": "storybook dev -p 6006 --no-open",
+    "storybook:ui": "node scripts/storybook-ui.mjs",
     "storybook": "node scripts/storybook-dev.mjs",
     "storybook:build": "storybook build",
     "clean": "rm -rf dist",

package/src/angular/index.ts

@@ -3,6 +3,7 @@ import * as d from './proxies';
 
 export const DIRECTIVES = [
   d.DsAccordion,
+  d.DsAppShell,
   d.DsBadge,
   d.DsBanner,
   d.DsBarNav,
@@ -28,7 +29,6 @@ export const DIRECTIVES = [
   d.DsRadioGroup,
   d.DsScrollbar,
   d.DsSelect,
-  d.DsSidebar,
   d.DsSkeleton,
   d.DsSlider,
   d.DsSurface,