@ds-mo/ui 1.8.1 → 1.9.1

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

@@ -2,7 +2,7 @@ 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. */
+    /** When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools. */
     gradient: boolean;
     /**
      * Optional custom gradient for `background-image` (e.g. SVG URL).
@@ -12,14 +12,16 @@ export declare class AppShell {
     el: HTMLElement;
     private resizeObserver;
     componentDidLoad(): void;
-    private scheduleGradientVars;
+    private scheduleChromeSync;
     disconnectedCallback(): void;
     onShellPropsChange(): void;
+    private syncSlottedNavStyle;
     private connectMetricsObserver;
     private applyGradientVars;
-    private clearGradientVars;
-    private syncSlottedNavStyle;
-    private updateGradientVars;
+    private clearGradientPaintVars;
+    /** Panel/bar wash offsets for scroll fades and badge rings. */
+    private syncChromeLayoutVars;
+    private syncChrome;
     render(): any;
 }
 //# sourceMappingURL=AppShell.d.ts.map

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

@@ -2,6 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 export declare class BarNav {
+    /** Style slot: `dashboard` or `settings`. Colors match for now. */
+    navStyle: NavChromeStyle;
     el: HTMLElement;
     /**
      * Tab items for the left section.
@@ -24,9 +26,6 @@ export declare class BarNav {
      * 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`. */
-    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. */
@@ -103,7 +102,6 @@ export declare class BarNav {
     private handleActionChange;
     private toggleTabMenu;
     private handleTriggerKeyDown;
-    private get tabSurface();
     render(): any;
 }
 //# sourceMappingURL=BarNav.d.ts.map

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

@@ -2,13 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
 import { type PanelNavGroup, type PanelNavRouterMode, type PanelNavUserActionDetail } from './panel-nav-types';
 export declare class PanelNav {
-    /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.
-     *  Property: `navStyle`. HTML attribute: `nav-style`. */
+    /** Style slot: `dashboard` or `settings`. Colors match for now;
+     *  class hooks reserved for texture/glyph layers. Property: `navStyle`. 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. */
+    /** When `true`, style changes apply synchronously — host app owns view transitions. */
     disableViewTransition: boolean;
     /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */
     groups: string | PanelNavGroup[];
@@ -43,8 +40,6 @@ export declare class PanelNav {
     /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */
     dsNavUserAction: EventEmitter<PanelNavUserActionDetail>;
     el: HTMLElement;
-    /** Mirrors `style` but is only updated inside the VT callback so the
-     *  View Transition captures a clean before/after snapshot. */
     private renderedStyle;
     private parsedGroups;
     private atBottom;
@@ -66,17 +61,15 @@ export declare class PanelNav {
     /** The ID that should be treated as active. `currentUrl` matching takes precedence
      *  over `activeId` when both are present. */
     private get effectiveActiveId();
-    /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */
     private get effectiveDisableViewTransition();
     onCollapsedChange(): void;
     onBreakpointChange(): void;
     onGroupsChange(val: string | PanelNavGroup[]): void;
     onActiveIdChange(): void;
     onCurrentUrlChange(): void;
-    onNavStyleChange(newVal: NavChromeStyle): Promise<void>;
+    onNavStyleChange(newVal: NavChromeStyle): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    componentDidRender(): void;
     disconnectedCallback(): void;
     private startCollapseAnimation;
     private connectResizeObserver;
@@ -86,8 +79,6 @@ export declare class PanelNav {
     private syncActiveFromUrl;
     /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
     private syncHostPropsIfNeeded;
-    /** 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: updates `collapsed`, emits `dsNavToggle`, optionally persists. */

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 } 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';
+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-utils.d.ts

@@ -1,16 +1,7 @@
 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. */

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

@@ -1,27 +1,45 @@
-import { type PanelToolsToolId } from './panel-tools-types';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
 export declare class PanelTools {
     el: HTMLElement;
-    /** When false, width animates to 0. */
+    /** When false, only the icon rail is shown. */
     open: boolean;
-    /** Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`. */
+    /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */
     activeTool: PanelToolsToolId | '';
-    /** Stays true until the close width transition finishes. */
-    private expanded;
+    /**
+     * Rail items rendered in the right column.
+     * Set via JS property: `el.items = [...]`. Replace the array reference to update.
+     */
+    items: PanelToolsItem[];
+    /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */
+    itemsJson: string;
+    /** Emitted when a rail button is toggled. Detail = { id, selected }. */
+    dsToolChange: EventEmitter<{
+        id: PanelToolsToolId;
+        selected: boolean;
+    }>;
+    /** Arms open vs close easing for the in-flight width transition. */
+    private motion;
     /** Suppresses width transition until the host has painted its initial open state. */
     private readyForMotion;
     private motionEnableGeneration;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    private get railItems();
     disconnectedCallback(): void;
-    /** Two rAFs after the last pre-ready prop change — host bindings may land late on refresh. */
     private deferMotionEnable;
     connectedCallback(): void;
-    openChanged(isOpen: boolean): void;
+    openChanged(isOpen: boolean, wasOpen?: boolean): void;
     activeToolChanged(): void;
+    componentDidLoad(): void;
+    itemsChanged(): void;
     private handleTransitionEnd;
-    private isShowingContent;
-    private isActiveTool;
+    /** Rail selection follows `open` immediately — independent of the slide animation. */
+    private isRailSelected;
+    /** Drawer body stays mounted while the clip frame animates closed. */
+    private isDrawerPresent;
+    private isViewActive;
     private headerLabel;
+    private handleToolChange;
+    private renderRailAction;
     render(): any;
 }
 //# sourceMappingURL=PanelTools.d.ts.map

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

@@ -1,3 +1,3 @@
-export type { PanelToolsToolId } from './panel-tools-types';
-export { PANEL_TOOLS_LABELS, PANEL_TOOLS_TOOL_IDS } from './panel-tools-types';
+export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
+export { PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -1,5 +1,18 @@
-/** Bar-nav tool ids that map to `ds-panel-tools` views. */
-export type PanelToolsToolId = 'search' | 'messages' | 'stacks' | 'activity' | 'agents';
+/** Tool ids for the `ds-panel-tools` rail and drawer views. */
+export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';
 export declare const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[];
+/** Rail header slot — mirrors panel-nav M logo row. */
+export declare const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId;
 export declare const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string>;
+export interface PanelToolsItem {
+    id: PanelToolsToolId;
+    /** Icon name for <ds-icon>. */
+    icon: string;
+    /** Whether this rail button is currently pressed/active. */
+    selected?: boolean;
+    /** Show a notification dot. */
+    dot?: boolean;
+    inactive?: boolean;
+    ariaLabel?: string;
+}
 //# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components/PanelTools/panel-tools-utils.d.ts

@@ -0,0 +1,4 @@
+import type { PanelToolsItem } from './panel-tools-types';
+export declare function parsePanelToolsItems(items: PanelToolsItem[], itemsJson: string): PanelToolsItem[];
+export declare function shouldResyncPanelToolsItems(prev: PanelToolsItem[], next: PanelToolsItem[]): boolean;
+//# sourceMappingURL=panel-tools-utils.d.ts.map

package/dist/types/components.d.ts

@@ -26,7 +26,7 @@ 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 { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -63,7 +63,7 @@ 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 { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -97,7 +97,7 @@ export namespace Components {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
           * @default false
          */
         "gradient": boolean;
@@ -108,7 +108,7 @@ export namespace Components {
         "gradientSrc": string;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'navigation'
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
     }
@@ -210,8 +210,8 @@ export namespace Components {
          */
         "heading": string | undefined;
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'default'
+          * Style slot: `dashboard` or `settings`. Colors match for now.
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
         /**
@@ -647,7 +647,7 @@ export namespace Components {
          */
         "currentUrl": string;
         /**
-          * 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.
+          * When `true`, style changes apply synchronously — host app owns view transitions.
           * @default false
          */
         "disableViewTransition": boolean;
@@ -657,8 +657,8 @@ export namespace Components {
          */
         "groups": string | PanelNavGroup[];
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'navigation'
+          * Style slot: `dashboard` or `settings`. Colors match for now; class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`.
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
         /**
@@ -684,12 +684,22 @@ export namespace Components {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
           * @default ''
          */
         "activeTool": PanelToolsToolId | '';
         /**
-          * When false, width animates to 0.
+          * Rail items rendered in the right column. Set via JS property: `el.items = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "items": PanelToolsItem[];
+        /**
+          * JSON fallback for `items` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "itemsJson": string;
+        /**
+          * When false, only the icon rail is shown.
           * @default false
          */
         "open": boolean;
@@ -1134,6 +1144,10 @@ export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelNavElement;
 }
+export interface DsPanelToolsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPanelToolsElement;
+}
 export interface DsRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsRadioGroupElement;
@@ -1479,7 +1493,21 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelToolsElementEventMap {
+        "dsToolChange": {
+    id: PanelToolsToolId;
+    selected: boolean;
+  };
+    }
     interface HTMLDsPanelToolsElement extends Components.DsPanelTools, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPanelToolsElementEventMap>(type: K, listener: (this: HTMLDsPanelToolsElement, ev: DsPanelToolsCustomEvent<HTMLDsPanelToolsElementEventMap[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 HTMLDsPanelToolsElementEventMap>(type: K, listener: (this: HTMLDsPanelToolsElement, ev: DsPanelToolsCustomEvent<HTMLDsPanelToolsElementEventMap[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 HTMLDsPanelToolsElement: {
         prototype: HTMLDsPanelToolsElement;
@@ -1747,7 +1775,7 @@ declare namespace LocalJSX {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
           * @default false
          */
         "gradient"?: boolean;
@@ -1758,7 +1786,7 @@ declare namespace LocalJSX {
         "gradientSrc"?: string;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'navigation'
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
     }
@@ -1861,8 +1889,8 @@ declare namespace LocalJSX {
          */
         "heading"?: string | undefined;
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'default'
+          * Style slot: `dashboard` or `settings`. Colors match for now.
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
         /**
@@ -2336,7 +2364,7 @@ declare namespace LocalJSX {
          */
         "currentUrl"?: string;
         /**
-          * 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.
+          * When `true`, style changes apply synchronously — host app owns view transitions.
           * @default false
          */
         "disableViewTransition"?: boolean;
@@ -2346,8 +2374,8 @@ declare namespace LocalJSX {
          */
         "groups"?: string | PanelNavGroup[];
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'navigation'
+          * Style slot: `dashboard` or `settings`. Colors match for now; class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`.
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
         /**
@@ -2389,12 +2417,29 @@ declare namespace LocalJSX {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
           * @default ''
          */
         "activeTool"?: PanelToolsToolId | '';
         /**
-          * When false, width animates to 0.
+          * Rail items rendered in the right column. Set via JS property: `el.items = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "items"?: PanelToolsItem[];
+        /**
+          * JSON fallback for `items` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "itemsJson"?: string;
+        /**
+          * Emitted when a rail button is toggled. Detail = { id, selected }.
+         */
+        "onDsToolChange"?: (event: DsPanelToolsCustomEvent<{
+    id: PanelToolsToolId;
+    selected: boolean;
+  }>) => void;
+        /**
+          * When false, only the icon rail is shown.
           * @default false
          */
         "open"?: boolean;
@@ -2832,11 +2877,11 @@ declare namespace LocalJSX {
         "dismissLabel": string;
     }
     interface DsBarNavAttributes {
+        "navStyle": NavChromeStyle;
         "tabsJson": string;
         "value": string;
         "actionsJson": string;
         "heading": string | undefined;
-        "navStyle": NavChromeStyle;
         "basePath": string;
         "currentUrl": string;
     }
@@ -2989,6 +3034,7 @@ declare namespace LocalJSX {
     interface DsPanelToolsAttributes {
         "open": boolean;
         "activeTool": PanelToolsToolId | '';
+        "itemsJson": string;
     }
     interface DsRadioGroupAttributes {
         "value": string;

package/dist/types/nav/badge-gradient-ring.d.ts

@@ -22,7 +22,7 @@ export declare function parseCssBackgroundPosition(value: string): ParsedPositio
 export declare function badgeGradientPosition(badgeHost: HTMLElement, surface: GradientSurface, shellPosition: string): string;
 /** Resolve shell gradient position from chrome host custom properties. */
 export declare function readShellGradientPosition(surface: GradientSurface): string;
-/** Stamp `--_badge-gradient-position` on the badge host. */
+/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */
 export declare function syncBadgeGradientPosition(badgeHost: HTMLElement): void;
 export {};
 //# sourceMappingURL=badge-gradient-ring.d.ts.map

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

@@ -2,7 +2,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, SHELL_NAV_REVEAL_DURATION_VAR, SHELL_NAV_REVEAL_EASING_VAR, 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 { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSITION_PANEL_VAR, SHELL_GRADIENT_POSITION_BAR_VAR, SHELL_GRADIENT_OPACITY_VAR, SHELL_CHROME_SURFACE_POSITION_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, } from './shell-gradient';
 export type { ShellGradientLayout } from './shell-gradient';
 export { BADGE_GRADIENT_POSITION_VAR, badgeGradientPosition, findGradientSurface, isShellGradientActive, parseCssBackgroundPosition, readShellGradientPosition, syncBadgeGradientPosition, } from './badge-gradient-ring';
 export type { GradientSurface } from './badge-gradient-ring';

package/dist/types/nav/nav-chrome.d.ts

@@ -1,14 +1,10 @@
-/** Visual chrome family for primary/secondary navigation surfaces. */
-export type NavChromeStyle = 'navigation' | 'default';
-/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */
+/** Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. */
+export type NavChromeStyle = 'dashboard' | 'settings';
+/** Document hint for first paint before framework props land. */
 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 resolveNavChromeStyle(styleProp: NavChromeStyle, hostAttr: string | null, docHint?: string | null): NavChromeStyle;
 export declare function shouldResyncNavChromeStyle(renderedStyle: NavChromeStyle, style: NavChromeStyle): boolean;
 //# sourceMappingURL=nav-chrome.d.ts.map

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

@@ -1,19 +1,20 @@
-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";
+/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */
+export declare const SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
 /** 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.
+ * Shell radial wash — same for panel and bar nav.
  * 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 declare function shellGradientImage(): string;
 export interface ShellGradientLayout {
     width: number;
     height: number;
@@ -22,4 +23,6 @@ export interface ShellGradientLayout {
 export declare function shellGradientSize(layout: ShellGradientLayout): string;
 export declare function shellGradientPositionPanel(): string;
 export declare function shellGradientPositionBar(panelWidth: number): string;
+/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */
+export declare function shellChromeSurfacePosition(leftPx: number, topPx: number): string;
 //# sourceMappingURL=shell-gradient.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/angular/proxies.ts

@@ -689,18 +689,20 @@ export declare interface DsPanelNav extends Components.DsPanelNav {
 
 
 @ProxyCmp({
-  inputs: ['activeTool', 'open']
+  inputs: ['activeTool', 'items', 'itemsJson', 'open']
 })
 @Component({
   selector: 'ds-panel-tools',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeTool', 'open'],
+  inputs: ['activeTool', 'items', 'itemsJson', 'open'],
+  outputs: ['dsToolChange'],
   standalone: false
 })
 export class DsPanelTools {
   protected el: HTMLDsPanelToolsElement;
+  @Output() dsToolChange = new EventEmitter<CustomEvent<{ id: IDsPanelToolsPanelToolsToolId; selected: boolean; }>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -708,7 +710,14 @@ export class DsPanelTools {
 }
 
 
-export declare interface DsPanelTools extends Components.DsPanelTools {}
+import type { PanelToolsToolId as IDsPanelToolsPanelToolsToolId } from '@ds-mo/ui';
+
+export declare interface DsPanelTools extends Components.DsPanelTools {
+  /**
+   * Emitted when a rail button is toggled. Detail = { id, selected }.
+   */
+  dsToolChange: EventEmitter<CustomEvent<{ id: IDsPanelToolsPanelToolsToolId; selected: boolean; }>>;
+}
 
 
 @ProxyCmp({

package/src/react/ds-panel-tools.ts

@@ -7,20 +7,21 @@
 
 /* eslint-disable */
 
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
+import { type DsPanelToolsCustomEvent, type PanelToolsToolId } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsPanelTools as DsPanelToolsElement, defineCustomElement as defineDsPanelTools } from "@ds-mo/ui/dist/components/ds-panel-tools.js";
 
-export type DsPanelToolsEvents = NonNullable<unknown>;
+export type DsPanelToolsEvents = { onDsToolChange: EventName<DsPanelToolsCustomEvent<{ id: PanelToolsToolId; selected: boolean; }>> };
 
 export const DsPanelTools: StencilReactComponent<DsPanelToolsElement, DsPanelToolsEvents, Components.DsPanelTools> = /*@__PURE__*/ createComponent<DsPanelToolsElement, DsPanelToolsEvents, Components.DsPanelTools>({
     tagName: 'ds-panel-tools',
     elementClass: DsPanelToolsElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as DsPanelToolsEvents,
+    events: { onDsToolChange: 'dsToolChange' } as DsPanelToolsEvents,
     defineCustomElement: defineDsPanelTools
 });