@ds-mo/ui 1.2.0 → 1.4.0

package/src/wc/components/Chip/Chip.tsx

@@ -0,0 +1,127 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type ChipIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type ChipContrast   = 'strong' | 'bold' | 'medium' | 'faint';
+export type ChipElevation  = 'none' | 'flat' | 'elevated';
+export type ChipSize       = 'md' | 'sm' | 'xs';
+export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+const TEXT_VARIANT: Record<ChipSize, string> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};
+
+const ICON_SIZE: Record<ChipSize, number> = { md: 20, sm: 16, xs: 12 };
+
+@Component({
+  tag: 'ds-chip',
+  styleUrl: 'Chip.css',
+  scoped: true,
+})
+export class Chip {
+  @Prop() label!: string;
+  @Prop() intent: ChipIntent = 'neutral';
+  @Prop() contrast: ChipContrast = 'faint';
+  @Prop() elevation: ChipElevation = 'none';
+  @Prop() size: ChipSize = 'md';
+  @Prop() rounded: boolean = false;
+  @Prop() removable: boolean = false;
+  @Prop() maxWidth: string | number | undefined;
+  @Prop() inactive: boolean = false;
+  @Prop() background: ChipBackground | undefined;
+  @Prop({ mutable: true }) pressed: boolean = false;
+
+  /** Fired when the remove button is clicked. */
+  @Event() dsRemove!: EventEmitter<void>;
+  /** Fired when an interactive chip is clicked. */
+  @Event() dsClick!: EventEmitter<void>;
+  /** Fired when the pressed state toggles. */
+  @Event() dsPressedChange!: EventEmitter<boolean>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.pressed = !this.pressed;
+    this.dsPressedChange.emit(this.pressed);
+    this.dsClick.emit();
+  };
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (this.inactive) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  private handleRemove = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dsRemove.emit();
+  };
+
+  render() {
+    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+
+    const maxWidthStyle = this.maxWidth != null
+      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }
+      : undefined;
+
+    const hostCls: Record<string, boolean> = {
+      'tag': true,
+      [`tag--intent-${this.intent}`]: true,
+      [`tag--contrast-${this.contrast}`]: true,
+      [`tag--elevation-${this.elevation}`]: true,
+      [`tag--size-${this.size}`]: true,
+      'tag--rounded': this.rounded,
+      'tag--rounded-no-icon-left': this.rounded,
+      'tag--rounded-no-remove-right': this.rounded && !this.removable,
+      [`tag--icon-left-${sz}`]: false,
+      [`tag--icon-right-${sz}`]: this.removable,
+      'tag--removable': this.removable,
+      'tag--interactive': true,
+      'tag--inactive': this.inactive,
+      'tag--pressed': this.pressed,
+      'tag--on-medium':      this.background === 'medium',
+      'tag--on-bold':        this.background === 'bold',
+      'tag--on-strong':      this.background === 'strong',
+      'tag--on-always-dark': this.background === 'always-dark',
+    };
+
+    return (
+      <Host
+        class={hostCls}
+        style={maxWidthStyle}
+        onClick={this.handleClick}
+        onKeyDown={this.handleKeyDown}
+        role="button"
+        tabIndex={this.inactive ? -1 : 0}
+        aria-pressed={String(this.pressed)}
+        aria-disabled={this.inactive || undefined}
+      >
+        <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+          <slot name="icon" />
+        </span>
+        <span class={{ 'tag__label': true, [textVariant]: true }}>
+          {this.label}
+        </span>
+        {this.removable && (
+          <button
+            type="button"
+            class="tag__remove"
+            onClick={this.handleRemove}
+            aria-label={`Remove ${this.label}`}
+            tabIndex={-1}
+          >
+            <slot name="remove-icon">
+              <span class="tag__remove-x" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+                ✕
+              </span>
+            </slot>
+          </button>
+        )}
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { ChipIntent, ChipContrast, ChipElevation, ChipSize, ChipBackground } from './Chip';

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

@@ -1,30 +1,110 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
 export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
+export type FadeSurface =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'navigation'
+  | 'media'
+  | 'always-dark'
+  | 'inverted';
+export type FadeSizeToken =
+  | 'size-000'
+  | 'size-050'
+  | 'size-075'
+  | 'size-100'
+  | 'size-150'
+  | 'size-200'
+  | 'size-250'
+  | 'size-300'
+  | 'size-400'
+  | 'size-500'
+  | 'size-600'
+  | 'size-800';
+export type FadeSize = FadeSizeToken | (string & {});
+
+const SIZE_VALUE: Record<FadeSizeToken, string> = {
+  'size-000': 'var(--dimension-size-000)',
+  'size-050': 'var(--dimension-size-050)',
+  'size-075': 'var(--dimension-size-075)',
+  'size-100': 'var(--dimension-size-100)',
+  'size-150': 'var(--dimension-size-150)',
+  'size-200': 'var(--dimension-size-200)',
+  'size-250': 'var(--dimension-size-250)',
+  'size-300': 'var(--dimension-size-300)',
+  'size-400': 'var(--dimension-size-400)',
+  'size-500': 'var(--dimension-size-500)',
+  'size-600': 'var(--dimension-size-600)',
+  'size-800': 'var(--dimension-size-800)',
+};
+
+const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
+  default: 'var(--color-background-secondary)',
+  primary: 'var(--color-background-primary)',
+  secondary: 'var(--color-background-secondary)',
+  navigation: 'var(--color-navigation-background)',
+  media: 'var(--color-media-background)',
+  'always-dark': 'var(--color-always-dark-background)',
+  inverted: 'var(--color-inverted-background)',
+};
 
 @Component({
   tag: 'ds-fade',
   styleUrl: 'Fade.css',
-  shadow: true,
+  scoped: true,
 })
 export class Fade {
-  @Prop() side!: FadeSide;
-  /** Height (or width for left/right) of the fade overlay — any CSS value. */
+  /** Edge where the fade is anchored. */
+  @Prop() side: FadeSide = 'bottom';
+
+  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
+  @Prop() size: FadeSize = 'size-600';
+
+  /**
+   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
+   * Prefer `size`.
+   */
   @Prop() height: string | undefined;
-  /** Background color to fade from. Defaults to var(--color-background-secondary). */
+
+  /** Surface context used to choose the fade target background token. */
+  @Prop() surface: FadeSurface = 'default';
+
+  /** Direct background override for contexts that already expose a resolved surface var. */
   @Prop() background: string = 'var(--color-background-secondary)';
 
+  /** Controls visibility without removing the element from layout/positioning. */
+  @Prop() visible: boolean = true;
+
+  private resolveSize(): string {
+    if (this.height) return this.height;
+
+    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)
+      ? SIZE_VALUE[this.size as FadeSizeToken]
+      : this.size;
+  }
+
+  private resolveBackground(): string {
+    if (this.background !== 'var(--color-background-secondary)') return this.background;
+    return SURFACE_BACKGROUND[this.surface];
+  }
+
   render() {
+    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';
+
     return (
       <Host
         aria-hidden="true"
         class={{
           fade: true,
+          'fade--hidden': !this.visible,
+          'fade--vertical-edge': isVerticalEdge,
+          'fade--horizontal-edge': !isVerticalEdge,
           [`fade--${this.side}`]: true,
         }}
         style={{
-          height: this.height,
-          '--ds-fade-bg': this.background,
+          '--ds-fade-size': this.resolveSize(),
+          '--ds-fade-bg': this.resolveBackground(),
         } as Record<string, string>}
       />
     );

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

@@ -1 +1 @@
-export type { FadeSide } from './Fade';
+export type { FadeSide, FadeSize, FadeSizeToken, FadeSurface } from './Fade';

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);
     }
   }
 
@@ -517,7 +473,15 @@ export class PanelNav {
           </ds-text>
         </span>
       </span>,
-      item.dot && <span class="panel-nav__item-dot" aria-hidden="true" />,
+      item.dot && (
+        <ds-badge
+          class="panel-nav__item-dot"
+          variant="dot"
+          background="var(--_nav-bg)"
+          label=""
+          aria-hidden="true"
+        />
+      ),
     ];
 
     const sharedProps = {
@@ -538,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,
@@ -553,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">
@@ -604,15 +568,23 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
-            {/* Left icon button — Gear in dashboard, Dashboard in settings */}
+            <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"
               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[];
+}