@ds-mo/ui 1.3.0 → 1.5.0

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

@@ -0,0 +1,25 @@
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+export declare class AppShell {
+    /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
+    navStyle: NavChromeStyle;
+    /** When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds. */
+    gradient: boolean;
+    /**
+     * Optional custom gradient for `background-image` (e.g. SVG URL).
+     * When set, overrides the built-in radial wash.
+     */
+    gradientSrc: string;
+    el: HTMLElement;
+    private resizeObserver;
+    componentDidLoad(): void;
+    private scheduleGradientVars;
+    disconnectedCallback(): void;
+    onShellPropsChange(): void;
+    private connectMetricsObserver;
+    private applyGradientVars;
+    private clearGradientVars;
+    private syncSlottedNavStyle;
+    private updateGradientVars;
+    render(): any;
+}
+//# sourceMappingURL=AppShell.d.ts.map

package/dist/types/{.stencil → components}/BarNav/BarNav.d.ts

@@ -1,19 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TabItem } from '../TabGroup/tab-item-utils';
-export type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-/** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */
-export type BarNavTab = TabItem;
-export interface BarNavActionItem {
-    id: string;
-    /** Icon name for <ds-icon>. */
-    icon: string;
-    /** Whether this action button is currently pressed/active. */
-    selected?: boolean;
-    /** Show a notification dot. */
-    dot?: boolean;
-    inactive?: boolean;
-    ariaLabel?: string;
-}
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 export declare class BarNav {
     /**
      * Tab items for the left section.
@@ -36,8 +23,9 @@ export declare class BarNav {
      * When tabs are present the heading is hidden.
      */
     heading: string | undefined;
-    /** Surface background variant. */
-    background: BarNavBackground;
+    /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.
+     *  Property: `navStyle`. HTML attribute: `nav-style`. */
+    navStyle: NavChromeStyle;
     /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */
     basePath: string;
     /** Current route URL. When set with `basePath`, the active tab is derived automatically. */
@@ -107,6 +95,7 @@ export declare class BarNav {
     private handleActionChange;
     private toggleTabMenu;
     private handleTriggerKeyDown;
+    private get tabSurface();
     render(): any;
 }
 //# sourceMappingURL=BarNav.d.ts.map

package/dist/types/components/BarNav/bar-nav-types.d.ts

@@ -0,0 +1,14 @@
+import type { TabItem } from '../TabGroup/tab-item-utils';
+export type BarNavTab = TabItem;
+export interface BarNavActionItem {
+    id: string;
+    /** Icon name for <ds-icon>. */
+    icon: string;
+    /** Whether this action button is currently pressed/active. */
+    selected?: boolean;
+    /** Show a notification dot. */
+    dot?: boolean;
+    inactive?: boolean;
+    ariaLabel?: string;
+}
+//# sourceMappingURL=bar-nav-types.d.ts.map

package/dist/types/{.stencil → components}/BarNav/bar-nav-utils.d.ts

@@ -1,4 +1,4 @@
-import type { BarNavActionItem, BarNavTab } from './BarNav';
+import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 export interface BarNavUrlState {
     /** Tab id derived from the URL, or empty when none applies. */
     value: string;

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

@@ -0,0 +1,3 @@
+export type { BarNavTab, BarNavActionItem } from './bar-nav-types';
+export type { NavChromeStyle } from '../../nav/nav-chrome';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/{.stencil → components}/BarNavAction/BarNavAction.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
 export declare class BarNavAction {
     /** Icon name passed to <ds-icon>. */
     icon: string;

package/dist/types/{.stencil → components}/PanelNav/PanelNav.d.ts

@@ -1,26 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type PanelNavVariant = 'dashboard' | 'settings';
-export type PanelNavRouterMode = 'anchor' | 'event';
-export interface PanelNavItem {
-    id: string;
-    icon: string;
-    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;
-}
-export interface PanelNavGroup {
-    id?: string;
-    label?: string;
-    items: PanelNavItem[];
-}
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+import type { PanelNavGroup, PanelNavRouterMode } from './panel-nav-types';
 export declare class PanelNav {
-    /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */
-    variant: PanelNavVariant;
-    /** When `true`, the component does not run its own View Transition on variant
+    /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.
+     *  Property: `navStyle`. HTML attribute: `nav-style`. */
+    navStyle: NavChromeStyle;
+    /** When `true`, the component does not run its own View Transition on style
      *  change — it just updates the rendered surface synchronously. Use this when
      *  the host app orchestrates the page transition itself (e.g. Angular Router's
      *  `withViewTransitions`), so the two don't fight or nest. */
@@ -60,9 +45,9 @@ export declare class PanelNav {
     /** Emitted when the footer user button is clicked. */
     dsNavUserAction: EventEmitter<void>;
     el: HTMLElement;
-    /** Mirrors `variant` but is only updated inside the VT callback so the
+    /** Mirrors `style` but is only updated inside the VT callback so the
      *  View Transition captures a clean before/after snapshot. */
-    private renderedVariant;
+    private renderedStyle;
     private parsedGroups;
     private atBottom;
     private isAnimating;
@@ -90,7 +75,7 @@ export declare class PanelNav {
     onGroupsChange(val: string | PanelNavGroup[]): void;
     onActiveIdChange(): void;
     onCurrentUrlChange(): void;
-    onVariantChange(newVal: PanelNavVariant): Promise<void>;
+    onNavStyleChange(newVal: NavChromeStyle): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
@@ -103,8 +88,8 @@ export declare class PanelNav {
     private syncActiveFromUrl;
     /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
     private syncHostPropsIfNeeded;
-    /** Align `renderedVariant` with `variant` when host bindings land after first paint. */
-    private syncRenderedVariantIfNeeded;
+    /** Align `renderedStyle` with `style` when host bindings land after first paint. */
+    private syncRenderedStyleIfNeeded;
     /** Poll across animation frames — host props may land without triggering @Watch. */
     private scheduleDeferredHostPropSync;
     /** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set

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

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

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

@@ -0,0 +1,20 @@
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+export type { NavChromeStyle };
+export type PanelNavRouterMode = 'anchor' | 'event';
+export interface PanelNavItem {
+    id: string;
+    icon: string;
+    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;
+}
+export interface PanelNavGroup {
+    id?: string;
+    label?: string;
+    items: PanelNavItem[];
+}
+//# sourceMappingURL=panel-nav-types.d.ts.map

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

@@ -0,0 +1,26 @@
+import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
+import { NAV_STYLE_HINT_ATTR, clearNavStyleHint, readNavStyleAttr, resolveNavChromeStyle, setNavStyleHint, shouldResyncNavChromeStyle } from '../../nav/nav-chrome';
+import { ensureShellNavVtStyle } from '../../nav/shell-view-transition';
+export type { NavChromeStyle } from '../../nav/nav-chrome';
+export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle as resolvePanelNavStyle, shouldResyncNavChromeStyle as shouldResyncPanelNavStyle, };
+/** @deprecated Use `setNavStyleHint` */
+export declare const setPanelNavStyleHint: typeof setNavStyleHint;
+/** @deprecated Use `clearNavStyleHint` */
+export declare const clearPanelNavStyleHint: typeof clearNavStyleHint;
+/** @deprecated Use `NAV_STYLE_HINT_ATTR` */
+export declare const PANEL_NAV_STYLE_HINT_ATTR = "data-nav-style";
+/** @deprecated Use `ensureShellNavVtStyle` */
+export declare const ensurePanelNavVtStyle: typeof ensureShellNavVtStyle;
+/** Whether `path` matches `href` at a segment boundary (exact or child path). */
+export declare function hrefMatchesPath(path: string, href: string): boolean;
+/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
+export declare function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string;
+/** Total nav item count across all groups. */
+export declare function countPanelNavItems(groups: PanelNavGroup[]): number;
+/** Parse `groups` from either a JSON attribute string or a JS property array. */
+export declare function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[];
+/** Resolve whether VT is disabled from prop and/or host attribute. */
+export declare function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean;
+/** True when host `groups` has items but internal parsed state is still empty. */
+export declare function shouldResyncPanelNavGroups(parsedGroups: PanelNavGroup[], groups: string | unknown): boolean;
+//# sourceMappingURL=panel-nav-utils.d.ts.map

package/dist/types/{.stencil → components}/TabGroupNav/TabGroupNav.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type TabItem } from '../TabGroup/tab-item-utils';
-export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
 export declare class TabGroupNav {
     el: HTMLElement;
     value: string;

package/dist/types/components.d.ts

@@ -6,9 +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, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -23,7 +24,7 @@ import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
 import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 import { ModalWidth } from "./components/Modal/Modal";
-import { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+import { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -41,9 +42,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, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -58,7 +60,7 @@ export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
 export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 export { ModalWidth } from "./components/Modal/Modal";
-export { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
+export { PanelNavGroup, PanelNavRouterMode } from "./components/PanelNav/panel-nav-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -91,6 +93,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.
@@ -169,11 +188,6 @@ export namespace Components {
           * @default ''
          */
         "actionsJson": string;
-        /**
-          * Surface background variant.
-          * @default 'secondary'
-         */
-        "background": BarNavBackground;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -188,6 +202,11 @@ export namespace Components {
           * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
          */
         "heading": string | undefined;
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'default'
+         */
+        "navStyle": NavChromeStyle;
         /**
           * Tab items for the left section. Set via JS property: `el.tabs = [...]`. Replace the array reference to update.
           * @default []
@@ -619,7 +638,7 @@ export namespace Components {
          */
         "currentUrl": string;
         /**
-          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
           * @default false
          */
         "disableViewTransition": boolean;
@@ -628,6 +647,11 @@ export namespace Components {
           * @default '[]'
          */
         "groups": string | PanelNavGroup[];
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'navigation'
+         */
+        "navStyle": NavChromeStyle;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'
@@ -648,11 +672,6 @@ export namespace Components {
           * @default ''
          */
         "userName": string;
-        /**
-          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
-          * @default 'dashboard'
-         */
-        "variant": PanelNavVariant;
     }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
@@ -1167,6 +1186,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: {
@@ -1669,6 +1694,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-app-shell": HTMLDsAppShellElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
@@ -1729,6 +1755,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.
@@ -1808,11 +1851,6 @@ declare namespace LocalJSX {
           * @default ''
          */
         "actionsJson"?: string;
-        /**
-          * Surface background variant.
-          * @default 'secondary'
-         */
-        "background"?: BarNavBackground;
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
           * @default ''
@@ -1827,6 +1865,11 @@ declare namespace LocalJSX {
           * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
          */
         "heading"?: string | undefined;
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'default'
+         */
+        "navStyle"?: NavChromeStyle;
         /**
           * Emitted when an action button is toggled. Detail = { id, selected }.
          */
@@ -2296,7 +2339,7 @@ declare namespace LocalJSX {
          */
         "currentUrl"?: string;
         /**
-          * When `true`, the component does not run its own View Transition on variant change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
           * @default false
          */
         "disableViewTransition"?: boolean;
@@ -2305,6 +2348,11 @@ declare namespace LocalJSX {
           * @default '[]'
          */
         "groups"?: string | PanelNavGroup[];
+        /**
+          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
+          * @default 'navigation'
+         */
+        "navStyle"?: NavChromeStyle;
         /**
           * Emitted when the footer left button (gear / dashboard) is clicked.
          */
@@ -2341,11 +2389,6 @@ declare namespace LocalJSX {
           * @default ''
          */
         "userName"?: string;
-        /**
-          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
-          * @default 'dashboard'
-         */
-        "variant"?: PanelNavVariant;
     }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
@@ -2772,6 +2815,11 @@ declare namespace LocalJSX {
         "multiple": boolean;
         "expandedIds": string;
     }
+    interface DsAppShellAttributes {
+        "navStyle": NavChromeStyle;
+        "gradient": boolean;
+        "gradientSrc": string;
+    }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
         "count": number;
@@ -2795,7 +2843,7 @@ declare namespace LocalJSX {
         "value": string;
         "actionsJson": string;
         "heading": string | undefined;
-        "background": BarNavBackground;
+        "navStyle": NavChromeStyle;
         "basePath": string;
         "currentUrl": string;
     }
@@ -2933,7 +2981,7 @@ declare namespace LocalJSX {
         "inactive": boolean;
     }
     interface DsPanelNavAttributes {
-        "variant": PanelNavVariant;
+        "navStyle": NavChromeStyle;
         "disableViewTransition": boolean;
         "groups": string | PanelNavGroup[];
         "routerMode": PanelNavRouterMode;
@@ -3078,6 +3126,7 @@ declare namespace LocalJSX {
 
     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] };
@@ -3124,6 +3173,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>;

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

@@ -0,0 +1,7 @@
+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/nav-chrome.d.ts

@@ -0,0 +1,14 @@
+/** Visual chrome family for primary/secondary navigation surfaces. */
+export type NavChromeStyle = 'navigation' | 'default';
+/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */
+export declare const NAV_STYLE_HINT_ATTR = "data-nav-style";
+/** Parse `nav-style` from a host or document hint attribute value. */
+export declare function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined;
+/** Set a document-level style hint before nav custom elements upgrade (hard reload). */
+export declare function setNavStyleHint(style: NavChromeStyle): void;
+export declare function clearNavStyleHint(): void;
+/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */
+export declare function resolveNavChromeStyle(styleProp: NavChromeStyle, styleAttr: string | null, documentStyleAttr?: string | null): NavChromeStyle;
+/** True when internal rendered surface lags the host `style` prop. */
+export declare function shouldResyncNavChromeStyle(renderedStyle: NavChromeStyle, style: NavChromeStyle): boolean;
+//# sourceMappingURL=nav-chrome.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

@@ -0,0 +1,21 @@
+/** `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;
+/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
+export declare function ensureShellNavVtStyle(): void;
+export interface ShellNavRevealOrigin {
+    x: number;
+    y: number;
+    maxRadius: number;
+}
+/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
+export declare function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin;
+export declare function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void;
+/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
+export declare function animateShellNavRadialReveal(origin: ShellNavRevealOrigin, durationMs?: number): void;
+/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
+export declare function runShellNavStyleRevealOnReady(transition: {
+    ready: Promise<void>;
+}, originEl?: HTMLElement | null): void;
+//# sourceMappingURL=shell-view-transition.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -41,6 +41,10 @@
       "types": "./src/wc/components.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./nav": {
+      "types": "./src/wc/nav/index.ts",
+      "import": "./src/wc/nav/index.ts"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
@@ -50,6 +54,7 @@
     "src/wc/components/**/*.tsx",
     "!src/wc/components/**/*.stories.ts",
     "!src/wc/components/**/*.stories.tsx",
+    "src/wc/nav",
     "src/angular",
     "src/react"
   ],
@@ -57,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/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/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,