@ds-mo/ui 1.3.0 → 1.5.0

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

@@ -1,18 +1,22 @@
 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,
-  ensurePanelNavVtStyle,
   parsePanelNavGroups,
   resolvePanelNavDisableVt,
-  resolvePanelNavVariant,
+  resolvePanelNavStyle,
   shouldResyncPanelNavGroups,
-  shouldResyncPanelNavVariant,
+  shouldResyncPanelNavStyle,
 } from './panel-nav-utils';
+import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from './panel-nav-types';
 
-// Module-level WeakMaps for per-instance VT state. Using WeakMaps instead of
-// class fields avoids Stencil generating getter-only property descriptors on
-// the host element for private fields, which throws in strict environments.
-// Minimal typings for the View Transitions API, which isn't in our TS lib target.
+// Module-level WeakMaps
 interface ViewTransition {
   finished: Promise<void>;
   skipTransition: () => void;
@@ -24,50 +28,17 @@ type DocumentWithViewTransition = Document & {
 const vtTransitions = new WeakMap<object, ViewTransition>();
 const vtResolvers = new WeakMap<object, () => void>();
 
-/** Parse a CSS <time> value to milliseconds. Handles `s`, `ms`, and unitless
- *  (assumed ms). Critically: `parseFloat('.75s')` is 0.75 — WAAPI treats that as
- *  0.75ms (instant/invisible), so the `s` unit must be scaled to ms. Design
- *  tokens (e.g. `--effect-animation-duration-long-1`) are authored in seconds. */
-function parseCssTimeMs(value: string, fallback: number): number {
-  const v = value.trim();
-  const num = parseFloat(v);
-  if (Number.isNaN(num)) return fallback;
-  if (/ms\s*$/.test(v)) return num;
-  if (/s\s*$/.test(v)) return num * 1000;
-  return num;
-}
-
-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[];
-}
-
 @Component({
   tag: 'ds-panel-nav',
   styleUrl: 'PanelNav.css',
   scoped: true,
 })
 export class PanelNav {
-  /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */
-  @Prop() variant: PanelNavVariant = 'dashboard';
+  /** 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 variant
+  /** 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. */
@@ -122,9 +93,9 @@ export class PanelNav {
 
   @Element() 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. */
-  @State() private renderedVariant: PanelNavVariant = 'dashboard';
+  @State() private renderedStyle: NavChromeStyle = 'navigation';
 
   @State() private parsedGroups: PanelNavGroup[] = [];
   @State() private atBottom = false;
@@ -193,44 +164,35 @@ export class PanelNav {
     this.syncActiveFromUrl();
   }
 
-  @Watch('variant')
-  async onVariantChange(newVal: PanelNavVariant) {
+  @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.renderedVariant = newVal;
+      this.renderedStyle = newVal;
       return;
     }
 
-    // Skip any in-progress transition immediately so rapid variant changes
-    // (e.g. quick dashboard → settings → dashboard) never leave the nav stuck.
+    // 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.renderedVariant = newVal;
+      this.renderedStyle = newVal;
       return;
     }
 
-    ensurePanelNavVtStyle();
-
-    const btn = this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null;
-    const rect = btn?.getBoundingClientRect();
-    const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);
-    const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);
-    const maxR = Math.ceil(Math.hypot(
-      Math.max(x, window.innerWidth - x),
-      Math.max(y, window.innerHeight - y),
-    ));
-
-    document.documentElement.style.setProperty('--vt-x', `${x}px`);
-    document.documentElement.style.setProperty('--vt-y', `${y}px`);
+    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.renderedVariant = newVal;
+        this.renderedStyle = newVal;
       })
     );
 
@@ -240,19 +202,13 @@ export class PanelNav {
       vtResolvers.delete(this);
     });
 
-    transition.ready.then(() => {
-      const durToken = getComputedStyle(document.documentElement)
-        .getPropertyValue('--effect-animation-duration-long-1').trim();
-      const duration = parseCssTimeMs(durToken, 750);
-      document.documentElement.animate(
-        { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxR}px at ${x}px ${y}px)`] },
-        { duration, easing: 'ease-in-out', fill: 'forwards', pseudoElement: '::view-transition-new(root)' },
-      );
-    }).catch(() => { /* transition was skipped or aborted */ });
+    transition.ready
+      .then(() => animateShellNavRadialReveal(origin))
+      .catch(() => { /* transition was skipped or aborted */ });
   }
 
   componentWillLoad() {
-    this.renderedVariant = resolvePanelNavVariant(this.variant, this.el.getAttribute('variant'));
+    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));
     if (this.storageKey) {
       try {
         const stored = localStorage.getItem(this.storageKey);
@@ -331,7 +287,7 @@ export class PanelNav {
 
   /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
   private syncHostPropsIfNeeded() {
-    this.syncRenderedVariantIfNeeded();
+    this.syncRenderedStyleIfNeeded();
 
     if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {
       this.onGroupsChange(this.groups);
@@ -340,16 +296,16 @@ export class PanelNav {
     }
   }
 
-  /** Align `renderedVariant` with `variant` when host bindings land after first paint. */
-  private syncRenderedVariantIfNeeded() {
-    if (!shouldResyncPanelNavVariant(this.renderedVariant, this.variant)) return;
+  /** 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.renderedVariant = this.variant;
+      this.renderedStyle = this.navStyle;
     } else {
-      void this.onVariantChange(this.variant);
+      void this.onNavStyleChange(this.navStyle);
     }
   }
 
@@ -546,14 +502,14 @@ export class PanelNav {
   }
 
   render() {
-    const isDashboard = this.renderedVariant === 'dashboard';
+    const isNavigation = this.renderedStyle === 'navigation';
     const collapsed = this.collapsed || this.viewportNarrow;
     const { userName, userInitial } = this;
 
     const navCls: Record<string, boolean> = {
       'panel-nav': true,
-      'panel-nav--dashboard': isDashboard,
-      'panel-nav--settings': !isDashboard,
+      'panel-nav--navigation': isNavigation,
+      'panel-nav--default': !isNavigation,
       'panel-nav--collapsed': collapsed,
       'panel-nav--animating': this.isAnimating,
       'panel-nav--at-bottom': this.atBottom,
@@ -561,7 +517,7 @@ export class PanelNav {
 
     return (
       <Host style={{ display: 'block', position: 'relative' }}>
-        <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>
+        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>
 
           {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}
           <div class="panel-nav__header">
@@ -620,15 +576,15 @@ export class PanelNav {
               visible={!this.atBottom}
             />
 
-            {/* Left icon button — Gear in dashboard, Dashboard in settings */}
+            {/* Left icon button — Gear in navigation style, Dashboard in default style */}
             <button
               type="button"
               class="panel-nav__footer-btn"
-              title={isDashboard ? 'Settings' : 'Dashboard'}
-              aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}
+              title={isNavigation ? 'Settings' : 'Dashboard'}
+              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}
               onClick={() => this.handleFooterAction()}
             >
-              <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size="md" color="inherit" />
+              <ds-icon name={isNavigation ? '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

@@ -1,7 +1,12 @@
-export type { PanelNavVariant, PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './PanelNav';
+export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './panel-nav-types';
+export type { NavChromeStyle } from '../../nav/nav-chrome';
 export {
-  PANEL_NAV_VARIANT_HINT_ATTR,
-  clearPanelNavVariantHint,
+  NAV_STYLE_HINT_ATTR,
+  setNavStyleHint,
+  clearNavStyleHint,
+  resolvePanelNavStyle,
+  shouldResyncPanelNavStyle,
   ensurePanelNavVtStyle,
-  setPanelNavVariantHint,
+  deriveActiveIdFromUrl,
+  parsePanelNavGroups,
 } from './panel-nav-utils';

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

@@ -0,0 +1,22 @@
+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[];
+}

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

@@ -1,4 +1,35 @@
-import type { PanelNavGroup, PanelNavItem, PanelNavVariant } from './PanelNav';
+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 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 {
@@ -42,41 +73,6 @@ export function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {
   return [];
 }
 
-/** `document.documentElement` attribute for pre-bootstrap variant hints (SPA hard reload). */
-export const PANEL_NAV_VARIANT_HINT_ATTR = 'data-panel-nav-variant';
-
-/** Parse `variant` from a host attribute value. */
-export function readPanelNavVariantAttr(attr: string | null): PanelNavVariant | undefined {
-  if (attr === 'settings' || attr === 'dashboard') return attr;
-  return undefined;
-}
-
-/** Set a document-level variant hint before the custom element upgrades (hard reload). */
-export function setPanelNavVariantHint(variant: PanelNavVariant): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.setAttribute(PANEL_NAV_VARIANT_HINT_ATTR, variant);
-}
-
-export function clearPanelNavVariantHint(): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.removeAttribute(PANEL_NAV_VARIANT_HINT_ATTR);
-}
-
-/** Resolve initial variant — host attr, then document hint, then prop default. */
-export function resolvePanelNavVariant(
-  variantProp: PanelNavVariant,
-  variantAttr: string | null,
-  documentVariantAttr: string | null = typeof document !== 'undefined'
-    ? document.documentElement.getAttribute(PANEL_NAV_VARIANT_HINT_ATTR)
-    : null,
-): PanelNavVariant {
-  return (
-    readPanelNavVariantAttr(variantAttr) ??
-    readPanelNavVariantAttr(documentVariantAttr) ??
-    variantProp
-  );
-}
-
 /** Resolve whether VT is disabled from prop and/or host attribute. */
 export function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {
   if (prop) return true;
@@ -84,14 +80,6 @@ export function resolvePanelNavDisableVt(prop: boolean, attr: string | null): bo
   return attr !== 'false';
 }
 
-/** True when internal rendered surface lags the host `variant` prop. */
-export function shouldResyncPanelNavVariant(
-  renderedVariant: PanelNavVariant,
-  variant: PanelNavVariant,
-): boolean {
-  return renderedVariant !== variant;
-}
-
 /** True when host `groups` has items but internal parsed state is still empty. */
 export function shouldResyncPanelNavGroups(
   parsedGroups: PanelNavGroup[],
@@ -102,23 +90,3 @@ export function shouldResyncPanelNavGroups(
     countPanelNavItems(parsePanelNavGroups(groups)) > 0
   );
 }
-
-let vtStyleInjected = false;
-
-/** Inject view-transition suppress styles once per document (shared by PanelNav + hosts). */
-export function ensurePanelNavVtStyle(): void {
-  if (vtStyleInjected) return;
-  const id = 'ds-panel-nav-vt-style';
-  if (document.getElementById(id)) {
-    vtStyleInjected = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = id;
-  style.textContent = [
-    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',
-    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',
-  ].join('\n');
-  document.head.appendChild(style);
-  vtStyleInjected = true;
-}

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -6,7 +6,7 @@ import {
   type TabItemTab,
 } from '../TabGroup/tab-item-utils';
 
-export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
 
 @Component({
   tag: 'ds-tab-group-nav',
@@ -119,18 +119,24 @@ export class TabGroupNav {
   private getBgClass(): string {
     if (!this.background || this.background === 'faint') return '';
     if (this.background === 'always-dark') return 'on-always-dark';
+    if (this.background === 'navigation') return 'on-navigation';
     return `on-${this.background}`;
   }
 
   render() {
     const bgClass = this.getBgClass();
     const isVertical = this.orientation === 'vertical';
+    const isNavigation = this.background === 'navigation';
 
     return (
       <Host class="tab-group-nav-host">
         <div
           role="tablist"
-          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}
+          class={{
+            'tab-list': true,
+            'tab-list--vertical': isVertical,
+            'tab-list--on-navigation': isNavigation,
+          }}
           aria-label={this.ariaLabel}
           aria-labelledby={this.ariaLabelledby}
           aria-orientation={isVertical ? 'vertical' : undefined}