@ds-mo/ui 1.4.0 → 1.6.0

package/src/angular/proxies.ts

@@ -35,6 +35,29 @@ export declare interface DsAccordion extends Components.DsAccordion {
 }
 
 
+@ProxyCmp({
+  inputs: ['gradient', 'gradientSrc', 'navStyle']
+})
+@Component({
+  selector: 'ds-app-shell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['gradient', 'gradientSrc', 'navStyle'],
+  standalone: false
+})
+export class DsAppShell {
+  protected el: HTMLDsAppShellElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsAppShell extends Components.DsAppShell {}
+
+
 @ProxyCmp({
   inputs: ['background', 'count', 'isSelected', 'label', 'max', 'surface', 'variant']
 })
@@ -744,39 +767,6 @@ export declare interface DsSelect extends Components.DsSelect {
 }
 
 
-@ProxyCmp({
-  inputs: ['collapsed', 'mobile', 'resizable', 'width']
-})
-@Component({
-  selector: 'ds-sidebar',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['collapsed', 'mobile', 'resizable', 'width'],
-  outputs: ['dsToggle', 'dsWidthChange'],
-  standalone: false
-})
-export class DsSidebar {
-  protected el: HTMLDsSidebarElement;
-  @Output() dsToggle = new EventEmitter<CustomEvent<void>>();
-  @Output() dsWidthChange = new EventEmitter<CustomEvent<IDsSidebarSidebarWidth>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-import type { SidebarWidth as IDsSidebarSidebarWidth } from '@ds-mo/ui';
-
-export declare interface DsSidebar extends Components.DsSidebar {
-
-  dsToggle: EventEmitter<CustomEvent<void>>;
-
-  dsWidthChange: EventEmitter<CustomEvent<IDsSidebarSidebarWidth>>;
-}
-
-
 @ProxyCmp({
   inputs: ['height', 'lines', 'shimmer', 'variant', 'width']
 })

package/src/react/components.ts

@@ -5,6 +5,7 @@
 
 /* eslint-disable */
 export { DsAccordion } from "./ds-accordion.js";
+export { DsAppShell } from "./ds-app-shell.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
 export { DsBarNavAction } from "./ds-bar-nav-action.js";
@@ -30,7 +31,6 @@ export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsRadioGroup } from "./ds-radio-group.js";
 export { DsScrollbar } from "./ds-scrollbar.js";
 export { DsSelect } from "./ds-select.js";
-export { DsSidebar } from "./ds-sidebar.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSurface } from "./ds-surface.js";

package/src/react/ds-app-shell.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 { DsAppShell as DsAppShellElement, defineCustomElement as defineDsAppShell } from "@ds-mo/ui/dist/components/ds-app-shell.js";
+
+export type DsAppShellEvents = NonNullable<unknown>;
+
+export const DsAppShell: StencilReactComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell> = /*@__PURE__*/ createComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell>({
+    tagName: 'ds-app-shell',
+    elementClass: DsAppShellElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsAppShellEvents,
+    defineCustomElement: defineDsAppShell
+});

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

@@ -0,0 +1,180 @@
+import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+import {
+  SHELL_GRADIENT_IMAGE_VAR,
+  SHELL_GRADIENT_OPACITY,
+  SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_GRADIENT_POSITION_BAR_VAR,
+  SHELL_GRADIENT_POSITION_PANEL_VAR,
+  SHELL_GRADIENT_SIZE_VAR,
+  shellGradientImageForStyle,
+  shellGradientPositionBar,
+  shellGradientPositionPanel,
+  shellGradientSize,
+} from '../../nav/shell-gradient';
+
+@Component({
+  tag: 'ds-app-shell',
+  styleUrl: 'AppShell.css',
+  scoped: true,
+})
+export class AppShell {
+  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';
+
+  /** When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds. */
+  @Prop({ reflect: true }) gradient: boolean = false;
+
+  /**
+   * Optional custom gradient for `background-image` (e.g. SVG URL).
+   * When set, overrides the built-in radial wash.
+   */
+  @Prop() gradientSrc: string = '';
+
+  @Element() el!: HTMLElement;
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  componentDidLoad() {
+    this.syncSlottedNavStyle();
+    this.connectMetricsObserver();
+    this.scheduleGradientVars();
+  }
+
+  private scheduleGradientVars() {
+    this.updateGradientVars();
+    requestAnimationFrame(() => this.updateGradientVars());
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  @Watch('navStyle')
+  @Watch('gradient')
+  @Watch('gradientSrc')
+  onShellPropsChange() {
+    this.syncSlottedNavStyle();
+    this.scheduleGradientVars();
+  }
+
+  private connectMetricsObserver() {
+    this.resizeObserver = new ResizeObserver(() => this.scheduleGradientVars());
+    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();
+  }
+
+  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {
+    const style = target.style;
+    for (const [name, value] of Object.entries(vars)) {
+      if (value === null) style.removeProperty(name);
+      else style.setProperty(name, value);
+    }
+  }
+
+  private clearGradientVars(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) {
+      for (const key of keys) target.style.removeProperty(key);
+    }
+  }
+
+  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 updateGradientVars() {
+    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);
+
+    if (!this.gradient) {
+      this.clearGradientVars(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;
+
+    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) {
+      if (target === this.el) {
+        this.applyGradientVars(target, {
+          [SHELL_GRADIENT_IMAGE_VAR]: image,
+          [SHELL_GRADIENT_SIZE_VAR]: size,
+          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,
+          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,
+          [SHELL_GRADIENT_OPACITY_VAR]: opacity,
+        });
+        continue;
+      }
+
+      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';
+      this.applyGradientVars(target, {
+        [SHELL_GRADIENT_IMAGE_VAR]: image,
+        [SHELL_GRADIENT_SIZE_VAR]: size,
+        [SHELL_GRADIENT_OPACITY_VAR]: opacity,
+        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,
+        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,
+      });
+    }
+  }
+
+  render() {
+    const shellCls: Record<string, boolean> = {
+      'app-shell': true,
+      'app-shell--gradient': this.gradient,
+    };
+
+    return (
+      <Host class={shellCls}>
+        <div class="app-shell__row">
+          <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__content">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Banner/Banner.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';
+import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 
 export type BannerIntent =
   | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'
@@ -6,9 +7,6 @@ export type BannerIntent =
 
 export type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';
 
-const FADE_OUT_MS = 200;
-const AUTO_DISMISS_MS = 4000;
-
 @Component({
   tag: 'ds-banner',
   styleUrl: 'Banner.css',
@@ -32,6 +30,14 @@ export class Banner {
   private dismissTimer: ReturnType<typeof setTimeout> | null = null;
   private closeTimer: ReturnType<typeof setTimeout> | null = null;
 
+  private get fadeOutMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
+  private get autoDismissMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);
+  }
+
   componentDidLoad() {
     if (this.floating && this.message) this.scheduleDismiss();
   }
@@ -58,7 +64,7 @@ export class Banner {
     this.dismissTimer = setTimeout(() => {
       this.dismissTimer = null;
       this.beginClose();
-    }, AUTO_DISMISS_MS);
+    }, this.autoDismissMs);
   }
 
   private beginClose() {
@@ -69,7 +75,7 @@ export class Banner {
         this.closing = false;
         this.closeTimer = null;
         this.dsDismiss.emit();
-      }, FADE_OUT_MS);
+      }, this.fadeOutMs);
     } else {
       this.dsDismiss.emit();
     }

package/src/wc/components/Loader/Loader.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, h } from '@stencil/core';
+import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
 
 @Component({
   tag: 'ds-loader',
@@ -6,8 +7,8 @@ import { Component, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class Loader {
-  /** Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally. */
-  @Prop() size: number = 20;
+  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */
+  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;
   /**
    * Accessible label for standalone usage. Wraps the spinner in a live region
    * and renders the label visually-hidden. Omit when the host element already
@@ -15,8 +16,12 @@ export class Loader {
    */
   @Prop() label: string | undefined;
 
+  private get sizePx(): number {
+    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);
+  }
+
   render() {
-    const px = `${this.size}px`;
+    const px = `${this.sizePx}px`;
     const svg = (
       <svg
         style={{ width: px, height: px }}

package/src/wc/components/Menu/Menu.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
+import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 
 export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
 export type MenuAlign = 'start' | 'center' | 'end';
@@ -19,9 +20,6 @@ export interface MenuSection {
   items: MenuItemData[];
 }
 
-const CLOSE_ANIMATION_MS = 220;
-const VP_PAD = 4;
-
 @Component({
   tag: 'ds-menu',
   styleUrl: 'Menu.css',
@@ -35,8 +33,10 @@ export class Menu {
   @Prop() sections: MenuSection[] = [];
   @Prop() side: MenuSide = 'bottom';
   @Prop() align: MenuAlign = 'start';
-  @Prop() sideOffset: number = 4;
-  @Prop() alignOffset: number = 0;
+  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */
+  @Prop() sideOffset: number | string = TOKEN_DEFAULTS.space050;
+  /** Cross-axis offset — number (px) or TokoMo length. */
+  @Prop() alignOffset: number | string = 0;
   @Prop() menuWidth: string | undefined;
   @Prop() minWidth: string | undefined;
   /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */
@@ -85,10 +85,42 @@ export class Menu {
         this.shouldRender = false;
         this.closing = false;
         this.closeTimer = null;
-      }, CLOSE_ANIMATION_MS);
+      }, this.closeAnimationMs);
     }
   }
 
+  @Watch('side')
+  @Watch('align')
+  @Watch('sideOffset')
+  @Watch('alignOffset')
+  onPositionPropsChange() {
+    if (this.open) this.calculatePosition();
+  }
+
+  private get viewportPadPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);
+  }
+
+  private get sideOffsetPx(): number {
+    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);
+  }
+
+  private get alignOffsetPx(): number {
+    return resolveCssLengthPx(this.alignOffset, 0);
+  }
+
+  private get popupFallbackWidthPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);
+  }
+
+  private get popupFallbackHeightPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);
+  }
+
+  private get closeAnimationMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
   private get resolvedAnchor(): HTMLElement | null {
     if (this.anchor) return this.anchor;
     if (this.anchorId) return document.getElementById(this.anchorId);
@@ -112,40 +144,43 @@ export class Menu {
     if (!popup) return;
 
     const a = anchorEl.getBoundingClientRect();
-    const pw = popup.offsetWidth || 200;
-    const ph = popup.offsetHeight || 160;
+    const pw = popup.offsetWidth || this.popupFallbackWidthPx;
+    const ph = popup.offsetHeight || this.popupFallbackHeightPx;
+    const sideOffset = this.sideOffsetPx;
+    const alignOffset = this.alignOffsetPx;
+    const vpPad = this.viewportPadPx;
     let x = 0, y = 0;
 
     switch (this.side) {
       case 'top':
-        y = a.top - ph - this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - pw + this.alignOffset
-          : a.left + a.width / 2 - pw / 2 + this.alignOffset;
+        y = a.top - ph - sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - pw + alignOffset
+          : a.left + a.width / 2 - pw / 2 + alignOffset;
         break;
       case 'bottom':
-        y = a.bottom + this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - pw + this.alignOffset
-          : a.left + a.width / 2 - pw / 2 + this.alignOffset;
+        y = a.bottom + sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - pw + alignOffset
+          : a.left + a.width / 2 - pw / 2 + alignOffset;
         break;
       case 'left':
-        x = a.left - pw - this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - ph + this.alignOffset
-          : a.top + a.height / 2 - ph / 2 + this.alignOffset;
+        x = a.left - pw - sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - ph + alignOffset
+          : a.top + a.height / 2 - ph / 2 + alignOffset;
         break;
       case 'right':
-        x = a.right + this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - ph + this.alignOffset
-          : a.top + a.height / 2 - ph / 2 + this.alignOffset;
+        x = a.right + sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - ph + alignOffset
+          : a.top + a.height / 2 - ph / 2 + alignOffset;
         break;
     }
 
     this.pos = {
-      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),
-      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),
+      x: Math.min(Math.max(x, vpPad), window.innerWidth - pw - vpPad),
+      y: Math.min(Math.max(y, vpPad), window.innerHeight - ph - vpPad),
     };
   }
 

package/src/wc/components/Modal/Modal.tsx

@@ -1,15 +1,14 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
+import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 
 export type ModalWidth = 'sm' | 'md' | 'lg';
 
 const WIDTH_MAP: Record<ModalWidth, string> = {
-  sm: 'var(--dimension-modal-width-sm, 400px)',
-  md: 'var(--dimension-modal-width-md, 560px)',
-  lg: 'var(--dimension-modal-width-lg, 720px)',
+  sm: 'var(--dimension-modal-width-sm)',
+  md: 'var(--dimension-modal-width-md)',
+  lg: 'var(--dimension-modal-width-lg)',
 };
 
-const CLOSE_ANIMATION_MS = 220;
-
 const FOCUSABLE_SEL = [
   'a[href]',
   'area[href]',
@@ -77,7 +76,7 @@ export class Modal {
         this.closeTimer = null;
         this.previousFocus?.focus?.();
         this.previousFocus = null;
-      }, CLOSE_ANIMATION_MS);
+      }, this.closeAnimationMs);
     }
   }
 
@@ -154,6 +153,10 @@ export class Modal {
     return this.modalWidth as string;
   }
 
+  private get closeAnimationMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
   render() {
     // Always render slots so scoped-mode slot distribution doesn't leak content.
     // The backdrop is hidden via CSS when not active.
@@ -173,7 +176,7 @@ export class Modal {
             aria-labelledby={this.titleId}
             aria-describedby={this.subtitle ? this.subtitleId : undefined}
             tabIndex={-1}
-            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 32px))` }}
+            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}
           >
             <div class="modal-header">
               <h2 id={this.titleId} class="text-title-small modal-title">{this.heading}</h2>

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

@@ -56,16 +56,14 @@ export class PanelNav {
   @Prop() activeId: string = '';
 
   /** Whether the nav is in collapsed (icon-only) state.
-   *  When `storageKey` is set the component manages this internally —
-   *  do not also bind it from outside in that mode. */
+   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */
   @Prop({ mutable: true }) collapsed: boolean = false;
 
   /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */
   @Prop() breakpoint: number = 0;
 
   /** `localStorage` key used to persist the collapsed state across page loads.
-   *  When set the component is self-managing for collapsed state; `dsNavToggle`
-   *  still fires for consumers that want to observe the change. */
+   *  When set, collapsed state is restored on mount and written on each toggle. */
   @Prop() storageKey: string = '';
 
   /** Current route URL (e.g. `window.location.pathname` or the router's active URL).
@@ -321,14 +319,13 @@ export class PanelNav {
     queueMicrotask(tick);
   }
 
-  /** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set
-   *  also mutates `collapsed` directly and persists to `localStorage`. */
+  /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */
   private applyToggle(next: boolean) {
-    this.dsNavToggle.emit(next);
+    this.collapsed = next;
     if (this.storageKey) {
-      this.collapsed = next;
       try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }
     }
+    this.dsNavToggle.emit(next);
   }
 
   private getAllItems(): PanelNavItem[] {

package/src/wc/components/Toast/Toast.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, State, h, Host } from '@stencil/core';
+import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 import { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';
 
 export type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
@@ -33,6 +34,10 @@ export class ToastProvider {
 
   private unsubscribe: (() => void) | null = null;
 
+  private get fadeOutMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
   connectedCallback() {
     this.unsubscribe = subscribeToToasts(() => this.syncFromStore());
     this.syncFromStore();
@@ -80,7 +85,7 @@ export class ToastProvider {
     setTimeout(() => {
       this.items = this.items.filter(i => i.data.id !== id);
       toastService.dismiss(id);
-    }, 200);
+    }, this.fadeOutMs);
   }
 
   private pauseItem(id: string) {
@@ -109,7 +114,7 @@ export class ToastProvider {
       gap: 'var(--dimension-space-075)',
       pointerEvents: 'none',
       padding: 'var(--dimension-space-100)',
-      maxWidth: '480px',
+      maxWidth: `var(${TOKEN_DEFAULTS.panelWidthMd})`,
       width: '100%',
       boxSizing: 'border-box',
     };

package/src/wc/components/Toast/toast-service.ts

@@ -1,3 +1,5 @@
+import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
+
 export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';
 
 export interface ToastData {
@@ -30,10 +32,15 @@ export function getToasts(): ToastData[] {
   return toasts;
 }
 
+function defaultToastDurationMs(): number {
+  return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);
+}
+
 export const toast = {
   show(options: ToastOptions): string {
     const id = `ds-toast-${++idCounter}`;
-    toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];
+    const duration = options.duration ?? defaultToastDurationMs();
+    toasts = [...toasts, { id, intent: 'neutral', ...options, duration }];
     emit();
     return id;
   },

package/src/wc/components/ToggleButton/ToggleButton.tsx

@@ -1,5 +1,6 @@
 import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 import type { IconSize } from '../Icon/Icon';
+import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
 
 export type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';
 export type ToggleButtonSize       = 'md' | 'sm' | 'xs';
@@ -7,8 +8,11 @@ export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'a
 
 const ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };
 
-// Pixel size reference for internal layout (icon span font-size)
-const ICON_PX: Record<ToggleButtonSize, number> = { md: 20, sm: 16, xs: 12 };
+const ICON_TOKEN: Record<ToggleButtonSize, string> = {
+  md: TOKEN_DEFAULTS.iconographyMd,
+  sm: TOKEN_DEFAULTS.iconographySm,
+  xs: TOKEN_DEFAULTS.iconographyXs,
+};
 
 const TEXT_CLASS: Record<ToggleButtonSize, string> = {
   md: 'text-body-medium-emphasis',
@@ -68,7 +72,7 @@ export class ToggleButton {
   render() {
     const size = this.size;
     const iconSize = ICON_SIZE[size];
-    const iconPx = ICON_PX[size];
+    const iconPx = resolveCssLengthPx(ICON_TOKEN[size], ICON_TOKEN[size]);
     const textClass = TEXT_CLASS[size];
     const hasIcon = !!this.icon;
     const hasLabel = !!this.label;