@ds-mo/ui 1.8.0 → 1.9.0

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

@@ -7,7 +7,7 @@ import {
   SHELL_GRADIENT_POSITION_BAR_VAR,
   SHELL_GRADIENT_POSITION_PANEL_VAR,
   SHELL_GRADIENT_SIZE_VAR,
-  shellGradientImageForStyle,
+  buildShellRadialGradient,
   shellGradientPositionBar,
   shellGradientPositionPanel,
   shellGradientSize,
@@ -20,9 +20,9 @@ import {
 })
 export class AppShell {
   /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
-  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';
 
-  /** 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. */
   @Prop({ reflect: true }) gradient: boolean = false;
 
   /**
@@ -38,12 +38,12 @@ export class AppShell {
   componentDidLoad() {
     this.syncSlottedNavStyle();
     this.connectMetricsObserver();
-    this.scheduleGradientVars();
+    this.scheduleChromeSync();
   }
 
-  private scheduleGradientVars() {
-    this.updateGradientVars();
-    requestAnimationFrame(() => this.updateGradientVars());
+  private scheduleChromeSync() {
+    this.syncChrome();
+    requestAnimationFrame(() => this.syncChrome());
   }
 
   disconnectedCallback() {
@@ -56,17 +56,28 @@ export class AppShell {
   @Watch('gradientSrc')
   onShellPropsChange() {
     this.syncSlottedNavStyle();
-    this.scheduleGradientVars();
+    this.scheduleChromeSync();
+  }
+
+  private syncSlottedNavStyle() {
+    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
+    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
+    if (panel) {
+      panel.setAttribute('nav-style', this.navStyle);
+      panel.navStyle = this.navStyle;
+    }
+    if (bar) {
+      bar.setAttribute('nav-style', this.navStyle);
+      bar.navStyle = this.navStyle;
+    }
   }
 
   private connectMetricsObserver() {
-    this.resizeObserver = new ResizeObserver(() => this.scheduleGradientVars());
+    this.resizeObserver = new ResizeObserver(() => this.scheduleChromeSync());
     this.resizeObserver.observe(this.el);
     const panelWrap = this.el.querySelector('.app-shell__panel');
-    const barWrap = this.el.querySelector('.app-shell__bar');
     if (panelWrap) this.resizeObserver.observe(panelWrap);
-    if (barWrap) this.resizeObserver.observe(barWrap);
-    this.scheduleGradientVars();
+    this.scheduleChromeSync();
   }
 
   private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {
@@ -77,12 +88,10 @@ export class AppShell {
     }
   }
 
-  private clearGradientVars(targets: HTMLElement[]) {
+  private clearGradientPaintVars(targets: HTMLElement[]) {
     const keys = [
       SHELL_GRADIENT_IMAGE_VAR,
       SHELL_GRADIENT_SIZE_VAR,
-      SHELL_GRADIENT_POSITION_PANEL_VAR,
-      SHELL_GRADIENT_POSITION_BAR_VAR,
       SHELL_GRADIENT_OPACITY_VAR,
     ];
     for (const target of targets) {
@@ -90,44 +99,49 @@ export class AppShell {
     }
   }
 
-  private syncSlottedNavStyle() {
-    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
-    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
+  /** Panel/bar wash offsets for scroll fades and badge rings. */
+  private syncChromeLayoutVars(
+    panel: HTMLElement | null,
+    bar: HTMLElement | null,
+    panelPosition: string,
+    barPosition: string,
+  ) {
     if (panel) {
-      panel.setAttribute('nav-style', this.navStyle);
-      panel.navStyle = this.navStyle;
+      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);
     }
     if (bar) {
-      bar.setAttribute('nav-style', this.navStyle);
-      bar.navStyle = this.navStyle;
+      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);
     }
   }
 
-  private updateGradientVars() {
+  private syncChrome() {
     const panel = this.el.querySelector('ds-panel-nav') as HTMLElement | null;
     const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;
     const targets = [this.el, panel, bar].filter((el): el is HTMLElement => el !== null);
 
+    const shellRect = this.el.getBoundingClientRect();
+    const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;
+    const panelWidth = panelWrap?.getBoundingClientRect().width ?? 0;
+
+    const panelPosition = shellGradientPositionPanel();
+    const barPosition = shellGradientPositionBar(panelWidth);
+
+    this.syncChromeLayoutVars(panel, bar, panelPosition, barPosition);
+
     if (!this.gradient) {
-      this.clearGradientVars(targets);
+      this.clearGradientPaintVars(targets);
       return;
     }
 
     const image = this.gradientSrc.trim()
       ? `url(${this.gradientSrc.trim()})`
-      : shellGradientImageForStyle(this.navStyle);
-
-    const shellRect = this.el.getBoundingClientRect();
-    const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;
-    const panelWidth = panelWrap?.getBoundingClientRect().width ?? 0;
+      : buildShellRadialGradient();
 
     const size = shellGradientSize({
       width: shellRect.width,
       height: shellRect.height,
       panelWidth,
     });
-    const panelPosition = shellGradientPositionPanel();
-    const barPosition = shellGradientPositionBar(panelWidth);
     const opacity = SHELL_GRADIENT_OPACITY;
 
     for (const target of targets) {
@@ -157,25 +171,27 @@ export class AppShell {
     const shellCls: Record<string, boolean> = {
       'app-shell': true,
       'app-shell--gradient': this.gradient,
+      [`app-shell--${this.navStyle}`]: true,
     };
 
     return (
       <Host class={shellCls}>
         <div class="app-shell__row">
+          {this.gradient ? <div class="app-shell__chrome" aria-hidden="true" /> : null}
           <div class="app-shell__panel">
             <slot name="panel" />
           </div>
           <div class="app-shell__main">
-            <div class="app-shell__bar">
-              <slot name="bar" />
-            </div>
-            <div class="app-shell__workspace">
+            <div class="app-shell__stack">
+              <div class="app-shell__bar">
+                <slot name="bar" />
+              </div>
               <div class="app-shell__content">
                 <slot />
               </div>
-              <div class="app-shell__tools">
-                <slot name="tools" />
-              </div>
+            </div>
+            <div class="app-shell__tools">
+              <slot name="tools" />
             </div>
           </div>
         </div>

package/src/wc/components/Badge/Badge.tsx

@@ -1,10 +1,7 @@
 import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
 import {
   BADGE_GRADIENT_POSITION_VAR,
-  badgeGradientPosition,
-  findGradientSurface,
   isShellGradientActive,
-  readShellGradientPosition,
 } from '../../nav/badge-gradient-ring';
 
 export type BadgeVariant = 'counter' | 'dot';
@@ -137,16 +134,10 @@ export class Badge {
     void this.gradientLayoutVersion;
 
     const style: Record<string, string> = { '--_badge-ring': ring };
-    if (!this.gradientBackground) return style;
+    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;
 
-    const surface = findGradientSurface(this.el);
-    if (!surface) return style;
-
-    style[BADGE_GRADIENT_POSITION_VAR] = badgeGradientPosition(
-      this.el,
-      surface,
-      readShellGradientPosition(surface),
-    );
+    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */
+    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';
     return style;
   }
 

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

@@ -9,10 +9,8 @@ import {
   h,
   Host,
 } from '@stencil/core';
-import type { MenuItemData } from '../Menu/menu-types';
-import type { BarNavActionBackground } from '../BarNavAction/BarNavAction';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
-import { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';
+import type { MenuItemData } from '../Menu/menu-types';
 import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 import {
   deriveBarNavValueFromUrl,
@@ -37,6 +35,9 @@ import {
   scoped: true,
 })
 export class BarNav {
+  /** Style slot: `dashboard` or `settings`. Colors match for now. */
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';
+
   @Element() el!: HTMLElement;
 
   /**
@@ -66,10 +67,6 @@ export class BarNav {
    */
   @Prop() heading: string | undefined;
 
-  /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.
-   *  Property: `navStyle`. HTML attribute: `nav-style`. */
-  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'default';
-
   /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */
   @Prop() basePath: string = '';
 
@@ -494,16 +491,11 @@ export class BarNav {
     }
   }
 
-  private get tabSurface(): BarNavActionBackground | undefined {
-    return this.navStyle === 'navigation' ? 'navigation' : undefined;
-  }
-
   render() {
     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 (
@@ -511,11 +503,10 @@ export class BarNav {
         <header
           class={{
             'bar-nav': true,
-            'bar-nav--navigation': this.navStyle === 'navigation',
-            'bar-nav--default': this.navStyle === 'default',
+            'bar-nav--dashboard': this.navStyle === 'dashboard',
+            'bar-nav--settings': this.navStyle === 'settings',
             'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,
           }}
-          style={{ viewTransitionName: SHELL_BAR_NAV_VT_NAME }}
           ref={el => {
             this.headerEl = el as HTMLElement;
             if (el && !this.resizeObserver) {
@@ -536,7 +527,6 @@ export class BarNav {
                   }}
                   tabs={this.resolvedTabs}
                   value={this.effectiveValue}
-                  background={tabSurface}
                 />
               </div>
             )}
@@ -551,7 +541,6 @@ export class BarNav {
                   }}
                   tabs={this.resolvedTabs}
                   value={this.effectiveValue}
-                  background={tabSurface}
                   onDsChange={(e: Event) => this.handleTabChange(e)}
                 />
               </div>
@@ -634,7 +623,6 @@ export class BarNav {
                   dot={action.dot ?? false}
                   inactive={action.inactive}
                   aria-label={action.ariaLabel ?? action.id}
-                  background={tabSurface}
                   onDsChange={(e: Event) => this.handleActionChange(action.id, e)}
                 />
               ))}

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

@@ -1,11 +1,5 @@
 import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';
 import type { NavChromeStyle } from '../../nav/nav-chrome';
-import {
-  animateShellNavRadialReveal,
-  ensureShellNavVtStyle,
-  resolveShellNavRevealOrigin,
-  setShellNavRevealOriginVars,
-} from '../../nav/shell-view-transition';
 import {
   deriveActiveIdFromUrl,
   parsePanelNavGroups,
@@ -22,18 +16,6 @@ import {
   type PanelNavUserActionDetail,
 } from './panel-nav-types';
 
-// Module-level WeakMaps
-interface ViewTransition {
-  finished: Promise<void>;
-  skipTransition: () => void;
-}
-type DocumentWithViewTransition = Document & {
-  startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;
-};
-
-const vtTransitions = new WeakMap<object, ViewTransition>();
-const vtResolvers = new WeakMap<object, () => void>();
-
 @Component({
   tag: 'ds-panel-nav',
   styleUrl: 'PanelNav.css',
@@ -41,14 +23,11 @@ const vtResolvers = new WeakMap<object, () => void>();
   scoped: true,
 })
 export class PanelNav {
-  /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.
-   *  Property: `navStyle`. HTML attribute: `nav-style`. */
-  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';
-
-  /** 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. */
+  /** Style slot: `dashboard` or `settings`. Colors match for now;
+   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';
+
+  /** When `true`, style changes apply synchronously — host app owns view transitions. */
   @Prop() disableViewTransition: boolean = false;
 
   /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */
@@ -98,10 +77,7 @@ export class PanelNav {
 
   @Element() el!: HTMLElement;
 
-  /** Mirrors `style` but is only updated inside the VT callback so the
-   *  View Transition captures a clean before/after snapshot. */
-  @State() private renderedStyle: NavChromeStyle = 'navigation';
-
+  @State() private renderedStyle: NavChromeStyle = 'dashboard';
   @State() private parsedGroups: PanelNavGroup[] = [];
   @State() private atBottom = false;
   @State() private isAnimating = false;
@@ -131,7 +107,6 @@ export class PanelNav {
     return this.urlDerivedActiveId || this.activeId;
   }
 
-  /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */
   private get effectiveDisableViewTransition(): boolean {
     return resolvePanelNavDisableVt(
       this.disableViewTransition,
@@ -170,46 +145,8 @@ export class PanelNav {
   }
 
   @Watch('navStyle')
-  async onNavStyleChange(newVal: NavChromeStyle) {
-    // Host app drives the transition (e.g. Angular Router withViewTransitions):
-    // just reflect the new surface so the app's transition captures it.
-    if (this.effectiveDisableViewTransition) {
-      this.renderedStyle = newVal;
-      return;
-    }
-
-    // Skip any in-progress transition immediately so rapid style changes never leave the nav stuck.
-    vtTransitions.get(this)?.skipTransition();
-    vtTransitions.delete(this);
-
-    const doc = document as DocumentWithViewTransition;
-    if (typeof doc.startViewTransition !== 'function') {
-      this.renderedStyle = newVal;
-      return;
-    }
-
-    ensureShellNavVtStyle();
-    const origin = resolveShellNavRevealOrigin(
-      this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null,
-    );
-    setShellNavRevealOriginVars(origin);
-
-    const transition = doc.startViewTransition(() =>
-      new Promise<void>(resolve => {
-        vtResolvers.set(this, resolve);
-        this.renderedStyle = newVal;
-      })
-    );
-
-    vtTransitions.set(this, transition);
-    transition.finished.finally(() => {
-      if (vtTransitions.get(this) === transition) vtTransitions.delete(this);
-      vtResolvers.delete(this);
-    });
-
-    transition.ready
-      .then(() => animateShellNavRadialReveal(origin))
-      .catch(() => { /* transition was skipped or aborted */ });
+  onNavStyleChange(newVal: NavChromeStyle) {
+    this.renderedStyle = newVal;
   }
 
   componentWillLoad() {
@@ -231,16 +168,6 @@ export class PanelNav {
     if (this.breakpoint > 0) this.connectResizeObserver();
   }
 
-  componentDidRender() {
-    // If a view transition callback is waiting for the render to complete,
-    // resolve it now so the "after" snapshot is taken at exactly the right moment.
-    const resolve = vtResolvers.get(this);
-    if (resolve) {
-      vtResolvers.delete(this);
-      resolve();
-    }
-  }
-
   disconnectedCallback() {
     this.disconnectResizeObserver();
     this.clearEdgeOverlayTimer();
@@ -292,7 +219,9 @@ export class PanelNav {
 
   /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
   private syncHostPropsIfNeeded() {
-    this.syncRenderedStyleIfNeeded();
+    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {
+      this.renderedStyle = this.navStyle;
+    }
 
     if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {
       this.onGroupsChange(this.groups);
@@ -301,19 +230,6 @@ export class PanelNav {
     }
   }
 
-  /** Align `renderedStyle` with `style` when host bindings land after first paint. */
-  private syncRenderedStyleIfNeeded() {
-    if (!shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) return;
-
-    if (this.effectiveDisableViewTransition) {
-      vtTransitions.get(this)?.skipTransition();
-      vtTransitions.delete(this);
-      this.renderedStyle = this.navStyle;
-    } else {
-      void this.onNavStyleChange(this.navStyle);
-    }
-  }
-
   /** Poll across animation frames — host props may land without triggering @Watch. */
   private scheduleDeferredHostPropSync() {
     let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;
@@ -507,14 +423,16 @@ export class PanelNav {
   }
 
   render() {
-    const isNavigation = this.renderedStyle === 'navigation';
+    const chromeStyle = this.renderedStyle;
+    const isDashboardChrome = chromeStyle === 'dashboard';
+    const isDashboard = this.navStyle === 'dashboard';
     const collapsed = this.collapsed || this.viewportNarrow;
     const { userName, userInitial } = this;
 
     const navCls: Record<string, boolean> = {
       'panel-nav': true,
-      'panel-nav--navigation': isNavigation,
-      'panel-nav--default': !isNavigation,
+      'panel-nav--dashboard': isDashboard,
+      'panel-nav--settings': !isDashboard,
       'panel-nav--collapsed': collapsed,
       'panel-nav--animating': this.isAnimating,
       'panel-nav--at-bottom': this.atBottom,
@@ -522,7 +440,10 @@ export class PanelNav {
 
     return (
       <Host style={{ display: 'block', position: 'relative' }}>
-        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>
+        <nav
+          class={navCls}
+          aria-label={isDashboardChrome ? 'Dashboard navigation' : 'Settings navigation'}
+        >
 
           {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}
           <div class="panel-nav__header">
@@ -581,15 +502,14 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
-            {/* Left icon button — Gear in navigation style, Dashboard in default style */}
             <button
               type="button"
               class="panel-nav__footer-btn"
-              title={isNavigation ? 'Settings' : 'Dashboard'}
-              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}
+              title={isDashboardChrome ? 'Settings' : 'Dashboard'}
+              aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}
               onClick={() => this.handleFooterAction()}
             >
-              <ds-icon name={isNavigation ? 'Gear' : 'Dashboard'} size="md" color="inherit" />
+              <ds-icon name={isDashboardChrome ? 'Gear' : 'Dashboard'} size="md" color="inherit" />
             </button>
 
             {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}

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

@@ -12,7 +12,6 @@ export {
   clearNavStyleHint,
   resolvePanelNavStyle,
   shouldResyncPanelNavStyle,
-  ensurePanelNavVtStyle,
   deriveActiveIdFromUrl,
   parsePanelNavGroups,
 } from './panel-nav-utils';

package/src/wc/components/PanelNav/panel-nav-utils.ts

@@ -7,7 +7,6 @@ import {
   setNavStyleHint,
   shouldResyncNavChromeStyle,
 } from '../../nav/nav-chrome';
-import { ensureShellNavVtStyle } from '../../nav/shell-view-transition';
 
 export type { NavChromeStyle } from '../../nav/nav-chrome';
 export {
@@ -19,18 +18,6 @@ export {
   shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,
 };
 
-/** @deprecated Use `setNavStyleHint` */
-export const setPanelNavStyleHint = setNavStyleHint;
-
-/** @deprecated Use `clearNavStyleHint` */
-export const clearPanelNavStyleHint = clearNavStyleHint;
-
-/** @deprecated Use `NAV_STYLE_HINT_ATTR` */
-export const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;
-
-/** @deprecated Use `ensureShellNavVtStyle` */
-export const ensurePanelNavVtStyle = ensureShellNavVtStyle;
-
 /** Whether `path` matches `href` at a segment boundary (exact or child path). */
 export function hrefMatchesPath(path: string, href: string): boolean {
   return path === href || path.startsWith(`${href}/`);