@ds-mo/ui 1.7.4 → 1.8.0

package/src/react/components.ts

@@ -28,6 +28,7 @@ export { DsMenu } from "./ds-menu.js";
 export { DsModal } from "./ds-modal.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
+export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadioGroup } from "./ds-radio-group.js";
 export { DsScrollbar } from "./ds-scrollbar.js";
 export { DsSelect } from "./ds-select.js";

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

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+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 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,
+    defineCustomElement: defineDsPanelTools
+});

package/src/wc/components/AppShell/AppShell.tsx

@@ -169,8 +169,13 @@ export class AppShell {
             <div class="app-shell__bar">
               <slot name="bar" />
             </div>
-            <div class="app-shell__content">
-              <slot />
+            <div class="app-shell__workspace">
+              <div class="app-shell__content">
+                <slot />
+              </div>
+              <div class="app-shell__tools">
+                <slot name="tools" />
+              </div>
             </div>
           </div>
         </div>

package/src/wc/components/BarNav/BarNav.tsx

@@ -105,6 +105,10 @@ export class BarNav {
   private resizeObserver: ResizeObserver | null = null;
   private overflowCheckScheduled = false;
   private intrinsicWidthRetryCount = 0;
+  /** Matches `basePath` once tabs + URL are reconciled for the active section. */
+  @State() private committedSection = '';
+  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */
+  @State() private pendingSection = '';
 
   private get effectiveValue(): string {
     if (this.currentUrl && this.basePath) {
@@ -125,23 +129,10 @@ export class BarNav {
   @Watch('tabsJson')
   @Watch('actions')
   @Watch('actionsJson')
-  onPropsChange() {
-    this.resolvedTabs = this.tabsJson
-      ? parseJsonArrayProp(this.tabsJson, [])
-      : (this.tabs ?? []);
-    this.resolvedActions = this.actionsJson
-      ? parseJsonArrayProp(this.actionsJson, [])
-      : (this.actions ?? []);
-    this.syncValueFromUrl();
-    this.intrinsicWidthRetryCount = 0;
-    this.scheduleOverflowCheck();
-  }
-
   @Watch('currentUrl')
   @Watch('basePath')
-  onUrlChange() {
-    this.syncValueFromUrl();
-    this.scheduleOverflowCheck();
+  onHostPropsChange() {
+    this.applyHostProps();
   }
 
   @Watch('value')
@@ -179,7 +170,7 @@ export class BarNav {
   }
 
   componentWillLoad() {
-    this.onPropsChange();
+    this.applyHostProps();
   }
 
   componentDidLoad() {
@@ -215,7 +206,7 @@ export class BarNav {
         this.actionsJson,
       )
     ) {
-      this.onPropsChange();
+      this.applyHostProps();
     } else if (this.currentUrl && this.basePath) {
       this.syncValueFromUrl();
     }
@@ -367,22 +358,81 @@ export class BarNav {
     this.menuOpen = false;
   }
 
+  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */
+  private incomingTabs(): BarNavTab[] {
+    return this.tabsJson
+      ? parseJsonArrayProp(this.tabsJson, [])
+      : (this.tabs ?? []);
+  }
+
+  private incomingActions(): BarNavActionItem[] {
+    return this.actionsJson
+      ? parseJsonArrayProp(this.actionsJson, [])
+      : (this.actions ?? []);
+  }
+
+  private applyHostProps() {
+    const nextBasePath = this.basePath;
+    const sectionChanged =
+      nextBasePath !== '' &&
+      this.committedSection !== '' &&
+      nextBasePath !== this.committedSection;
+
+    if (sectionChanged) {
+      this.urlDerivedValue = '';
+      this.committedSection = '';
+      this.pendingSection = nextBasePath;
+      this.resolvedTabs = [];
+      this.resolvedActions = this.incomingActions();
+      return;
+    }
+
+    if (this.pendingSection) {
+      if (!nextBasePath || nextBasePath !== this.pendingSection) {
+        return;
+      }
+      if (!this.currentUrl.startsWith(this.pendingSection)) {
+        return;
+      }
+      const tabs = this.incomingTabs();
+      if (tabs.length === 0) {
+        return;
+      }
+      this.pendingSection = '';
+    }
+
+    this.resolvedTabs = this.incomingTabs();
+    this.resolvedActions = this.incomingActions();
+    this.syncValueFromUrl();
+    this.committedSection = nextBasePath;
+    this.intrinsicWidthRetryCount = 0;
+    this.scheduleOverflowCheck();
+  }
+
   private syncMenuSections() {
     if (!this.menuEl) return;
     this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);
   }
 
   private syncValueFromUrl() {
+    const tabs = this.incomingTabs();
+
     if (!this.currentUrl || !this.basePath) {
       this.urlDerivedValue = '';
       this.hideTabsForDetailRoute = false;
       return;
     }
 
+    if (!this.currentUrl.startsWith(this.basePath)) {
+      this.urlDerivedValue = '';
+      this.hideTabsForDetailRoute = false;
+      return;
+    }
+
     const { value, hideTabs } = deriveBarNavValueFromUrl(
       this.currentUrl,
       this.basePath,
-      this.resolvedTabs,
+      tabs,
     );
     this.urlDerivedValue = value;
     this.hideTabsForDetailRoute = hideTabs;
@@ -449,8 +499,12 @@ export class BarNav {
   }
 
   render() {
-    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;
+    const sectionReady =
+      this.basePath !== '' && this.committedSection === this.basePath;
+    const hasTabs =
+      sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;
     const tabSurface = this.tabSurface;
+    const tabGroupKey = this.basePath || 'no-section';
 
     return (
       <Host>
@@ -472,6 +526,7 @@ export class BarNav {
             {hasTabs && (
               <div class="bar-nav__tabs-probe" aria-hidden="true" inert>
                 <ds-tab-group-nav
+                  key={`probe-${tabGroupKey}`}
                   ref={el => {
                     this.probeTabGroupEl = el ?? null;
                     if (el) {
@@ -489,6 +544,7 @@ export class BarNav {
             {hasTabs && !this.tabsCollapsed && (
               <div class="bar-nav__left">
                 <ds-tab-group-nav
+                  key={`visible-${tabGroupKey}`}
                   class="bar-nav__tabs-visible"
                   ref={el => {
                     this.visibleTabGroupEl = el ?? null;

package/src/wc/components/Fade/Fade.tsx

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Host } from '@stencil/core';
+import { Component, Prop, Element, State, h, Host } from '@stencil/core';
+import { isShellGradientActive } from '../../nav/badge-gradient-ring';
 
 export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
 export type FadeSurface =
@@ -55,6 +56,11 @@ const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
   scoped: true,
 })
 export class Fade {
+  @Element() el!: HTMLElement;
+
+  /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */
+  @State() private shellGradientChrome: 'panel' | 'bar' | null = null;
+
   /** Edge where the fade is anchored. */
   @Prop() side: FadeSide = 'bottom';
 
@@ -76,6 +82,18 @@ export class Fade {
   /** Controls visibility without removing the element from layout/positioning. */
   @Prop() visible: boolean = true;
 
+  componentDidLoad() {
+    this.syncShellGradient();
+  }
+
+  private syncShellGradient() {
+    if (!isShellGradientActive(this.el)) {
+      this.shellGradientChrome = null;
+      return;
+    }
+    this.shellGradientChrome = this.el.closest('ds-bar-nav') ? 'bar' : 'panel';
+  }
+
   private resolveSize(): string {
     if (this.height) return this.height;
 
@@ -100,6 +118,9 @@ export class Fade {
           'fade--hidden': !this.visible,
           'fade--vertical-edge': isVerticalEdge,
           'fade--horizontal-edge': !isVerticalEdge,
+          'fade--shell-gradient': this.shellGradientChrome !== null,
+          'fade--shell-gradient-panel': this.shellGradientChrome === 'panel',
+          'fade--shell-gradient-bar': this.shellGradientChrome === 'bar',
           [`fade--${this.side}`]: true,
         }}
         style={{

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -37,6 +37,7 @@ const vtResolvers = new WeakMap<object, () => void>();
 @Component({
   tag: 'ds-panel-nav',
   styleUrl: 'PanelNav.css',
+  styleUrls: ['../../utils/scroll-edge-fade.css'],
   scoped: true,
 })
 export class PanelNav {
@@ -550,7 +551,15 @@ export class PanelNav {
           </div>
 
           {/* ── Scrollable body ── */}
-          <div class="panel-nav__body" onScroll={e => this.handleBodyScroll(e)}>
+          <div
+            class={{
+              'panel-nav__body': true,
+              'scroll-edge-fade': true,
+              'scroll-edge-fade--bottom': true,
+              'scroll-edge-fade--at-end': this.atBottom,
+            }}
+            onScroll={e => this.handleBodyScroll(e)}
+          >
             {(() => {
               let flatIdx = 0;
               return this.parsedGroups.map(group => (
@@ -572,14 +581,6 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
-            <ds-fade
-              class="panel-nav__footer-fade"
-              side="bottom"
-              size="size-600"
-              background="var(--_nav-bg)"
-              visible={!this.atBottom}
-            />
-
             {/* Left icon button — Gear in navigation style, Dashboard in default style */}
             <button
               type="button"

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -0,0 +1,163 @@
+import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
+import {
+  PANEL_TOOLS_LABELS,
+  type PanelToolsToolId,
+} from './panel-tools-types';
+
+@Component({
+  tag: 'ds-panel-tools',
+  styleUrl: 'PanelTools.css',
+  scoped: true,
+})
+export class PanelTools {
+  @Element() el!: HTMLElement;
+
+  /** When false, width animates to 0. */
+  @Prop({ reflect: true }) open: boolean = false;
+
+  /** Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`. */
+  @Prop({ attribute: 'active-tool', reflect: true }) activeTool: PanelToolsToolId | '' = '';
+
+  /** Stays true until the close width transition finishes. */
+  @State() private expanded = false;
+
+  /** Suppresses width transition until the host has painted its initial open state. */
+  @State() private readyForMotion = false;
+
+  private motionEnableGeneration = 0;
+
+  componentWillLoad() {
+    if (this.open) this.expanded = true;
+  }
+
+  componentDidLoad() {
+    this.deferMotionEnable();
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('transitionend', this.handleTransitionEnd);
+    this.motionEnableGeneration += 1;
+  }
+
+  /** Two rAFs after the last pre-ready prop change — host bindings may land late on refresh. */
+  private deferMotionEnable() {
+    if (this.readyForMotion) return;
+    const generation = ++this.motionEnableGeneration;
+    requestAnimationFrame(() => {
+      if (generation !== this.motionEnableGeneration) return;
+      requestAnimationFrame(() => {
+        if (generation !== this.motionEnableGeneration) return;
+        this.readyForMotion = true;
+      });
+    });
+  }
+
+  connectedCallback() {
+    this.el.addEventListener('transitionend', this.handleTransitionEnd);
+  }
+
+  @Watch('open')
+  openChanged(isOpen: boolean) {
+    if (isOpen) this.expanded = true;
+    this.deferMotionEnable();
+  }
+
+  @Watch('activeTool')
+  activeToolChanged() {
+    this.deferMotionEnable();
+  }
+
+  private handleTransitionEnd = (event: TransitionEvent) => {
+    if (event.target !== this.el) return;
+    if (event.propertyName !== 'max-width') return;
+    if (!this.open) this.expanded = false;
+  };
+
+  private isShowingContent(): boolean {
+    return this.open || this.expanded;
+  }
+
+  private isActiveTool(id: PanelToolsToolId): boolean {
+    return this.isShowingContent() && this.activeTool === id;
+  }
+
+  private headerLabel(): string {
+    if (!this.activeTool) return '';
+    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';
+  }
+
+  render() {
+    const showingContent = this.isShowingContent();
+
+    return (
+      <Host
+        class={{
+          'panel-tools': true,
+          'panel-tools--open': this.open,
+          'panel-tools--ready': this.readyForMotion,
+        }}
+        role="complementary"
+        aria-label={this.headerLabel() || 'Tools'}
+        aria-hidden={showingContent ? null : 'true'}
+      >
+        <div class="panel-tools__inner">
+          <header class="panel-tools__header">
+            <span class="text-body-medium-emphasis">{this.headerLabel()}</span>
+          </header>
+          <div class="panel-tools__body">
+            <div
+              class={{
+                'panel-tools__view': true,
+                'panel-tools__view--active': this.isActiveTool('search'),
+                'text-body-medium': true,
+              }}
+              hidden={!this.isActiveTool('search')}
+            >
+              <slot name="search" />
+            </div>
+            <div
+              class={{
+                'panel-tools__view': true,
+                'panel-tools__view--active': this.isActiveTool('messages'),
+                'text-body-medium': true,
+              }}
+              hidden={!this.isActiveTool('messages')}
+            >
+              <slot name="messages" />
+            </div>
+            <div
+              class={{
+                'panel-tools__view': true,
+                'panel-tools__view--active': this.isActiveTool('stacks'),
+                'text-body-medium': true,
+              }}
+              hidden={!this.isActiveTool('stacks')}
+            >
+              <slot name="stacks" />
+            </div>
+            <div
+              class={{
+                'panel-tools__view': true,
+                'panel-tools__view--active': this.isActiveTool('activity'),
+                'text-body-medium': true,
+              }}
+              hidden={!this.isActiveTool('activity')}
+            >
+              <slot name="activity" />
+            </div>
+            <div
+              class={{
+                'panel-tools__view': true,
+                'panel-tools__view--active': this.isActiveTool('agents'),
+                'text-body-medium': true,
+              }}
+              hidden={!this.isActiveTool('agents')}
+            >
+              <slot name="agents" />
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/PanelTools/index.ts

@@ -0,0 +1,2 @@
+export type { PanelToolsToolId } from './panel-tools-types';
+export { PANEL_TOOLS_LABELS, PANEL_TOOLS_TOOL_IDS } from './panel-tools-types';

package/src/wc/components/PanelTools/panel-tools-types.ts

@@ -0,0 +1,18 @@
+/** Bar-nav tool ids that map to `ds-panel-tools` views. */
+export type PanelToolsToolId = 'search' | 'messages' | 'stacks' | 'activity' | 'agents';
+
+export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
+  'search',
+  'messages',
+  'stacks',
+  'activity',
+  'agents',
+];
+
+export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
+  search: 'Search',
+  messages: 'Messages',
+  stacks: 'Stacks',
+  activity: 'Activity',
+  agents: 'Agents',
+};

package/src/wc/components.d.ts

@@ -26,6 +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 { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -62,6 +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 { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -680,6 +682,18 @@ export namespace Components {
          */
         "userName": string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool": PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open": boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
@@ -1465,6 +1479,12 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelToolsElement extends Components.DsPanelTools, HTMLStencilElement {
+    }
+    var HTMLDsPanelToolsElement: {
+        prototype: HTMLDsPanelToolsElement;
+        new (): HTMLDsPanelToolsElement;
+    };
     interface HTMLDsRadioGroupElementEventMap {
         "dsChange": string;
     }
@@ -1687,6 +1707,7 @@ declare global {
         "ds-modal": HTMLDsModalElement;
         "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
+        "ds-panel-tools": HTMLDsPanelToolsElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
@@ -2366,6 +2387,18 @@ declare namespace LocalJSX {
          */
         "userName"?: string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool"?: PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open"?: boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
         "ariaLabelledby"?: string | undefined;
@@ -2953,6 +2986,10 @@ declare namespace LocalJSX {
         "userName": string;
         "userInitial": string;
     }
+    interface DsPanelToolsAttributes {
+        "open": boolean;
+        "activeTool": PanelToolsToolId | '';
+    }
     interface DsRadioGroupAttributes {
         "value": string;
         "direction": 'vertical' | 'horizontal';
@@ -3103,6 +3140,7 @@ declare namespace LocalJSX {
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
+        "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
         "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] };
@@ -3149,6 +3187,7 @@ declare module "@stencil/core" {
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
+            "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "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>;

package/src/wc/nav/index.ts

@@ -9,6 +9,8 @@ export {
 } from './nav-chrome';
 export {
   SHELL_BAR_NAV_VT_NAME,
+  SHELL_NAV_REVEAL_DURATION_VAR,
+  SHELL_NAV_REVEAL_EASING_VAR,
   parseCssTimeMs,
   ensureShellNavVtStyle,
   resolveShellNavRevealOrigin,

package/src/wc/nav/shell-gradient.ts

@@ -10,14 +10,14 @@ export const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';
 /** Layer opacity for the nav gradient wash. */
 export const SHELL_GRADIENT_OPACITY = '0.1';
 
-const GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';
+const GRADIENT_GEOMETRY = '100% 100% at 0% 0%';
 
 /**
  * Unified shell radial — same wash for all nav chrome styles.
  * Tokens follow `data-theme` (light/dark blue intent).
  */
 export function buildShellRadialGradient(): string {
-  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;
+  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;
 }
 
 /** Built-in radial image (optional `gradientSrc` on shell overrides). */

package/src/wc/nav/shell-view-transition.ts

@@ -7,6 +7,19 @@ export { parseCssTimeMs };
 
 const VT_STYLE_ID = 'ds-shell-nav-vt-style';
 
+/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
+export const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';
+export const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';
+
+const SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;
+const SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';
+
+function readCssCustomProperty(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
 /** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
 export function ensureShellNavVtStyle(): void {
   if (typeof document === 'undefined') return;
@@ -53,10 +66,16 @@ export function animateShellNavRadialReveal(
   origin: ShellNavRevealOrigin,
   durationMs?: number,
 ): void {
-  const durToken = getComputedStyle(document.documentElement)
-    .getPropertyValue('--effect-animation-duration-long-1')
-    .trim();
-  const duration = durationMs ?? parseCssTimeMs(durToken, 750);
+  const duration =
+    durationMs ??
+    parseCssTimeMs(
+      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),
+      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,
+    );
+  const easing = readCssCustomProperty(
+    SHELL_NAV_REVEAL_EASING_VAR,
+    SHELL_NAV_REVEAL_EASING_FALLBACK,
+  );
   const keyframes = {
     clipPath: [
       `circle(0px at ${origin.x}px ${origin.y}px)`,
@@ -65,7 +84,7 @@ export function animateShellNavRadialReveal(
   };
   const options = {
     duration,
-    easing: 'ease-in-out',
+    easing,
     fill: 'forwards' as const,
   };