@ds-mo/ui 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -45,6 +45,10 @@
       "types": "./src/wc/nav/index.ts",
       "import": "./src/wc/nav/index.ts"
     },
+    "./utils": {
+      "types": "./src/wc/utils/index.ts",
+      "import": "./src/wc/utils/index.ts"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
@@ -55,6 +59,7 @@
     "!src/wc/components/**/*.stories.ts",
     "!src/wc/components/**/*.stories.tsx",
     "src/wc/nav",
+    "src/wc/utils",
     "src/angular",
     "src/react"
   ],
@@ -63,7 +68,8 @@
     "pretypecheck": "node scripts/generate-icon-catalog.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
+    "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",

package/src/angular/index.ts

@@ -29,7 +29,6 @@ export const DIRECTIVES = [
   d.DsRadioGroup,
   d.DsScrollbar,
   d.DsSelect,
-  d.DsSidebar,
   d.DsSkeleton,
   d.DsSlider,
   d.DsSurface,

package/src/angular/proxies.ts

@@ -767,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

@@ -31,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/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;

package/src/wc/components/Tooltip/Tooltip.tsx

@@ -1,13 +1,9 @@
 import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';
+import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 
-const HOVER_DELAY_MS = 600;
-const INSTANT_REOPEN_MS = 300;
-const FADE_OUT_MS = 200;
-const VP_PAD = 4;
-
 let lastDismissedAt = 0;
 let tooltipIdCounter = 0;
 
@@ -22,9 +18,12 @@ export class Tooltip {
   @Prop() label!: string;
   @Prop() side: TooltipSide = 'top';
   @Prop() align: TooltipAlign = 'center';
-  @Prop() sideOffset: number = 4;
-  @Prop() alignOffset: number = 0;
-  @Prop() delay: number = HOVER_DELAY_MS;
+  /** Gap between anchor and tooltip — number (px) or TokoMo length. */
+  @Prop() sideOffset: number | string = TOKEN_DEFAULTS.space050;
+  /** Cross-axis offset — number (px) or TokoMo length. */
+  @Prop() alignOffset: number | string = 0;
+  /** Show delay — number (ms) or TokoMo time token / `var(--effect-animation-delay-*)`. */
+  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium1;
   @Prop() shortcutKey: string | undefined;
   @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';
 
@@ -54,10 +53,47 @@ export class Tooltip {
   @Watch('label')
   @Watch('side')
   @Watch('align')
+  @Watch('sideOffset')
+  @Watch('alignOffset')
   onPositionPropsChange() {
     if (this.visible) 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 hoverDelayMs(): number {
+    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium1);
+  }
+
+  private get instantReopenMs(): number {
+    return resolveCssTimeMs(
+      TOKEN_DEFAULTS.animationDurationMedium1,
+      TOKEN_DEFAULTS.animationDurationMedium1,
+    );
+  }
+
+  private get fadeOutMs(): number {
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+  }
+
+  private get tooltipFallbackWidthPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);
+  }
+
+  private get tooltipFallbackHeightPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.size300, TOKEN_DEFAULTS.size300);
+  }
+
   private bindAnchor() {
     const slot = this.el.querySelector('slot') as HTMLSlotElement | null;
     const slotted = slot?.assignedElements?.() ?? [];
@@ -88,7 +124,7 @@ export class Tooltip {
 
   private show() {
     this.clearTimers();
-    const instant = Date.now() - lastDismissedAt < INSTANT_REOPEN_MS;
+    const instant = Date.now() - lastDismissedAt < this.instantReopenMs;
     if (instant) {
       this.closing = false;
       this.visible = true;
@@ -100,7 +136,7 @@ export class Tooltip {
       this.closing = false;
       this.visible = true;
       requestAnimationFrame(() => this.calculatePosition());
-    }, this.delay);
+    }, this.hoverDelayMs);
   }
 
   private hide() {
@@ -112,7 +148,7 @@ export class Tooltip {
       this.closeTimer = null;
       this.visible = false;
       this.closing = false;
-    }, FADE_OUT_MS);
+    }, this.fadeOutMs);
   }
 
   private calculatePosition() {
@@ -120,40 +156,43 @@ export class Tooltip {
     const tip = this.el.querySelector('.tooltip-popup') as HTMLElement | null;
     if (!tip) return;
     const a = this.anchor.getBoundingClientRect();
-    const tw = tip.offsetWidth || 80;
-    const th = tip.offsetHeight || 24;
+    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;
+    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;
+    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 - th - this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - tw + this.alignOffset
-          : a.left + a.width / 2 - tw / 2 + this.alignOffset;
+        y = a.top - th - sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - tw + alignOffset
+          : a.left + a.width / 2 - tw / 2 + alignOffset;
         break;
       case 'bottom':
-        y = a.bottom + this.sideOffset;
-        x = this.align === 'start' ? a.left + this.alignOffset
-          : this.align === 'end' ? a.right - tw + this.alignOffset
-          : a.left + a.width / 2 - tw / 2 + this.alignOffset;
+        y = a.bottom + sideOffset;
+        x = this.align === 'start' ? a.left + alignOffset
+          : this.align === 'end' ? a.right - tw + alignOffset
+          : a.left + a.width / 2 - tw / 2 + alignOffset;
         break;
       case 'left':
-        x = a.left - tw - this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - th + this.alignOffset
-          : a.top + a.height / 2 - th / 2 + this.alignOffset;
+        x = a.left - tw - sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - th + alignOffset
+          : a.top + a.height / 2 - th / 2 + alignOffset;
         break;
       case 'right':
-        x = a.right + this.sideOffset;
-        y = this.align === 'start' ? a.top + this.alignOffset
-          : this.align === 'end' ? a.bottom - th + this.alignOffset
-          : a.top + a.height / 2 - th / 2 + this.alignOffset;
+        x = a.right + sideOffset;
+        y = this.align === 'start' ? a.top + alignOffset
+          : this.align === 'end' ? a.bottom - th + alignOffset
+          : a.top + a.height / 2 - th / 2 + alignOffset;
         break;
     }
 
     this.pos = {
-      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - tw - VP_PAD),
-      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - th - VP_PAD),
+      x: Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad),
+      y: Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad),
     };
   }