@ds-mo/ui 12.6.2 → 12.8.0

package/dist/mcp-data/registry/toast.json

@@ -307,7 +307,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -330,7 +330,7 @@
     },
     {
       "path": "src/wc/components/Toast/Toast.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  resolveMotionTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport {\n  toastManager as defaultToastManager,\n  type ToastActionEventDetail,\n  type ToastCloseContext,\n  type ToastCloseEventDetail,\n  type ToastEventDetail,\n  type ToastManager,\n  type ToastRecord,\n  type ToastSwipeDirection,\n} from '../../toast';\nimport { computeTooltipPosition } from '../Tooltip/tooltip-position';\n\ninterface ToastTimer {\n  timerKey: number;\n  remaining: number;\n  startedAt: number;\n  handle: ReturnType<typeof setTimeout> | null;\n}\n\ninterface SwipeState {\n  id: string;\n  x: number;\n  y: number;\n  direction?: ToastSwipeDirection;\n}\n\ninterface AnchoredPosition {\n  x: number;\n  y: number;\n  side: 'top' | 'right' | 'bottom' | 'left';\n}\n\ninterface ActiveSwipe {\n  id: string;\n  pointerId: number;\n  pointerType: string;\n  startX: number;\n  startY: number;\n  maxDistance: number;\n  cancelled: boolean;\n  axis: 'x' | 'y' | null;\n}\n\nconst SWIPE_THRESHOLD = 40;\nconst SWIPE_REVERSE_CANCEL_THRESHOLD = 10;\nconst GLOBAL_STACK_HOVER = '__global-stack__';\nconst INTERACTIVE_SWIPE_SELECTOR =\n  'button,a,input,textarea,select,[role=\"button\"],[data-ds-toast-swipe-ignore]';\n\nconst attachedManagers = new WeakMap<ToastManager, Toast>();\nconst connectedToastRegions = new Set<Toast>();\nlet activeToastRegion: Toast | null = null;\nlet toastInstanceCounter = 0;\n\n@Component({\n  tag: 'ds-toast',\n  styleUrl: 'Toast.css',\n  scoped: true,\n})\nexport class Toast {\n  @Element() el!: HTMLElement;\n\n  /** Manager that supplies toast records. Assign as a JavaScript property. */\n  @Prop() manager: ToastManager = defaultToastManager;\n  /** Maximum visible global-stack records. Limited records remain mounted and inert. */\n  @Prop() limit: number = 3;\n  /** Default auto-dismiss delay. Use 0 for persistent records. */\n  @Prop() timeout: number | string = TOKEN_DEFAULTS.animationDelayLong2;\n  /** Accessible label for the notification region. */\n  @Prop() label: string = 'Notifications';\n  /** Localized accessible label for every toast close action. */\n  @Prop() closeLabel: string = 'Close notification';\n  /** Keep the global stack 16px above the persistent mobile shell bar below 768px. */\n  @Prop({ attribute: 'avoid-mobile-shell-bar', reflect: true })\n  avoidMobileShellBar: boolean = false;\n  /** Allowed swipe-to-dismiss directions. Assign as a JavaScript property. */\n  @Prop() swipeDirections: ToastSwipeDirection[] = ['down', 'right'];\n\n  @State() private records: readonly ToastRecord[] = [];\n  @State() private expanded = false;\n  @State() private keyboardActive = false;\n  @State() private swipe: SwipeState | null = null;\n  @State() private layoutVersion = 0;\n\n  @Event() dsToastClose!: EventEmitter<ToastCloseEventDetail>;\n  @Event() dsToastRemove!: EventEmitter<ToastEventDetail>;\n  @Event() dsToastAction!: EventEmitter<ToastActionEventDetail>;\n\n  private readonly instanceId = ++toastInstanceCounter;\n  private readonly domIds = new Map<string, number>();\n  private readonly timers = new Map<string, ToastTimer>();\n  private readonly closeWatchdogs = new Map<string, ReturnType<typeof setTimeout>>();\n  private readonly closeFrames = new Map<string, number>();\n  private readonly closeEvents = new Set<string>();\n  private readonly activationFrames = new Map<string, number>();\n  private readonly pauseReasons = new Set<string>();\n  private readonly hoveredIds = new Set<string>();\n  private readonly heights = new Map<string, number>();\n  private readonly measuredUpdateKeys = new Map<string, number>();\n  private readonly anchoredPositions = new Map<string, AnchoredPosition>();\n  private readonly dismissedSwipeDirections = new Map<string, ToastSwipeDirection>();\n  private readonly observedElements = new Set<Element>();\n  private readonly pendingRemovals: Array<{\n    manager: ToastManager;\n    context: ToastCloseContext;\n  }> = [];\n\n  private unsubscribe: (() => void) | null = null;\n  private attachedManager: ToastManager | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private layoutFrame: number | null = null;\n  private activeSwipe: ActiveSwipe | null = null;\n  private nextDomId = 0;\n  private connected = false;\n  private pendingHoverLeave = false;\n\n  connectedCallback() {\n    this.connect();\n  }\n\n  componentDidLoad() {\n    this.connect();\n  }\n\n  private connect() {\n    if (this.connected) return;\n    this.connected = true;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleLayout());\n    this.mutationObserver ??= new MutationObserver(() => this.scheduleLayout());\n    this.mutationObserver.observe(document.body, { childList: true, subtree: true });\n    if (!this.unsubscribe) this.attachManager(this.manager);\n    window.addEventListener('blur', this.handleWindowBlur);\n    window.addEventListener('focus', this.handleWindowFocus);\n    window.addEventListener('resize', this.handleWindowResize);\n    window.addEventListener('scroll', this.scheduleLayout, true);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('visibilitychange', this.handleVisibilityChange);\n    connectedToastRegions.add(this);\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator tracks the active connected viewport\n    if (!activeToastRegion) activeToastRegion = this;\n  }\n\n  componentDidRender() {\n    this.syncObservedElements();\n    this.flushPendingRemovals();\n    this.scheduleLayout();\n  }\n\n  disconnectedCallback() {\n    this.connected = false;\n    this.flushPendingRemovals();\n    this.detachManager();\n    this.resetManagerState();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = null;\n    this.observedElements.clear();\n    if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame);\n    this.layoutFrame = null;\n    window.removeEventListener('blur', this.handleWindowBlur);\n    window.removeEventListener('focus', this.handleWindowFocus);\n    window.removeEventListener('resize', this.handleWindowResize);\n    window.removeEventListener('scroll', this.scheduleLayout, true);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('visibilitychange', this.handleVisibilityChange);\n    connectedToastRegions.delete(this);\n    if (activeToastRegion === this) {\n      const remaining = Array.from(connectedToastRegions);\n      activeToastRegion = remaining[remaining.length - 1] ?? null;\n    }\n  }\n\n  @Watch('manager')\n  onManagerChange(next: ToastManager) {\n    this.detachManager();\n    this.resetManagerState();\n    if (this.connected) this.attachManager(next);\n  }\n\n  @Watch('timeout')\n  onTimeoutChange() {\n    for (const timer of this.timers.values()) {\n      if (timer.handle) clearTimeout(timer.handle);\n    }\n    this.timers.clear();\n    this.syncTimers();\n  }\n\n  private attachManager(manager: ToastManager) {\n    const attached = attachedManagers.get(manager);\n    if (attached && attached !== this) {\n      console.warn('[ds-toast] A manager can control only one connected ds-toast instance.');\n      return;\n    }\n    attachedManagers.set(manager, this);\n    this.attachedManager = manager;\n    this.unsubscribe = manager.subscribe(records => {\n      this.records = records;\n      this.syncLifecycle(records);\n      this.scheduleLayout();\n    });\n  }\n\n  private detachManager() {\n    this.unsubscribe?.();\n    this.unsubscribe = null;\n    if (this.attachedManager && attachedManagers.get(this.attachedManager) === this) {\n      attachedManagers.delete(this.attachedManager);\n    }\n    this.attachedManager = null;\n  }\n\n  private resetManagerState() {\n    this.flushPendingRemovals();\n    if (this.el.contains(document.activeElement)) this.restorePreviousFocus();\n    this.clearAllTimers();\n    for (const frame of this.activationFrames.values()) cancelAnimationFrame(frame);\n    for (const frame of this.closeFrames.values()) cancelAnimationFrame(frame);\n    this.activationFrames.clear();\n    this.closeFrames.clear();\n    this.closeEvents.clear();\n    this.pauseReasons.clear();\n    this.hoveredIds.clear();\n    this.pendingHoverLeave = false;\n    this.heights.clear();\n    this.measuredUpdateKeys.clear();\n    this.anchoredPositions.clear();\n    this.dismissedSwipeDirections.clear();\n    this.domIds.clear();\n    this.activeSwipe = null;\n    this.swipe = null;\n    this.expanded = false;\n    this.keyboardActive = false;\n    this.records = [];\n    this.resizeObserver?.disconnect();\n    this.observedElements.clear();\n  }\n\n  private syncObservedElements() {\n    const next = new Set<Element>(\n      this.el.querySelectorAll<HTMLElement>('.toast-positioner'),\n    );\n    for (const record of this.records) {\n      if (!record.positioner) continue;\n      const anchor = this.resolveAnchor(record.positioner.anchor);\n      if (anchor) next.add(anchor);\n    }\n\n    for (const element of this.observedElements) {\n      if (!next.has(element)) {\n        this.resizeObserver?.unobserve(element);\n        this.observedElements.delete(element);\n      }\n    }\n    for (const element of next) {\n      if (this.observedElements.has(element)) continue;\n      this.resizeObserver?.observe(element);\n      this.observedElements.add(element);\n    }\n  }\n\n  private flushPendingRemovals() {\n    for (const pending of this.pendingRemovals.splice(0)) {\n      pending.manager.notifyRemove(pending.context);\n      this.dsToastRemove.emit({\n        id: pending.context.id,\n        toast: pending.context.toast,\n      });\n    }\n  }\n\n  private syncLifecycle(records: readonly ToastRecord[]) {\n    const recordIds = new Set(records.map(record => record.id));\n    for (const id of this.hoveredIds) {\n      if (id !== GLOBAL_STACK_HOVER && !recordIds.has(id)) this.hoveredIds.delete(id);\n    }\n    const hasEndingRecords = records.some(\n      record => record.transitionStatus === 'ending',\n    );\n    if (this.pendingHoverLeave && !hasEndingRecords && !this.hoveredIds.size) {\n      this.pendingHoverLeave = false;\n      this.expanded = false;\n      this.resumeTimers('hover');\n    } else if (!this.hoveredIds.size && !this.pendingHoverLeave) {\n      this.resumeTimers('hover');\n    }\n\n    for (const [id, timer] of this.timers) {\n      if (recordIds.has(id)) continue;\n      if (timer.handle) clearTimeout(timer.handle);\n      this.timers.delete(id);\n    }\n\n    for (const [id, watchdog] of this.closeWatchdogs) {\n      if (recordIds.has(id)) continue;\n      clearTimeout(watchdog);\n      this.closeWatchdogs.delete(id);\n    }\n\n    for (const [id, frame] of this.activationFrames) {\n      if (recordIds.has(id)) continue;\n      cancelAnimationFrame(frame);\n      this.activationFrames.delete(id);\n    }\n\n    for (const [id, frame] of this.closeFrames) {\n      if (recordIds.has(id)) continue;\n      cancelAnimationFrame(frame);\n      this.closeFrames.delete(id);\n    }\n\n    for (const id of this.domIds.keys()) {\n      if (recordIds.has(id)) continue;\n      this.closeEvents.delete(id);\n      this.domIds.delete(id);\n      this.heights.delete(id);\n      this.measuredUpdateKeys.delete(id);\n      this.anchoredPositions.delete(id);\n      this.dismissedSwipeDirections.delete(id);\n    }\n\n    for (const record of records) {\n      this.ensureDomId(record.id);\n      if (\n        record.transitionStatus === 'starting' &&\n        !this.activationFrames.has(record.id)\n      ) {\n        const manager = this.attachedManager;\n        const frame = requestAnimationFrame(() => {\n          this.activationFrames.delete(record.id);\n          manager?.activate(record.id);\n        });\n        this.activationFrames.set(record.id, frame);\n      }\n\n      if (record.transitionStatus === 'ending') {\n        this.clearToastTimer(record.id);\n        this.beginRemoval(record);\n      } else {\n        const watchdog = this.closeWatchdogs.get(record.id);\n        if (watchdog) clearTimeout(watchdog);\n        this.closeWatchdogs.delete(record.id);\n        const closeFrame = this.closeFrames.get(record.id);\n        if (closeFrame) cancelAnimationFrame(closeFrame);\n        this.closeFrames.delete(record.id);\n        this.closeEvents.delete(record.id);\n      }\n    }\n\n    this.syncTimers();\n  }\n\n  private syncTimers() {\n    const activeIds = new Set<string>();\n    for (const record of this.records) {\n      if (record.transitionStatus !== 'active') continue;\n      activeIds.add(record.id);\n      const duration = this.resolveToastTimeout(record);\n      if (duration <= 0) {\n        this.clearToastTimer(record.id);\n        continue;\n      }\n\n      const existing = this.timers.get(record.id);\n      if (!existing || existing.timerKey !== record.timerKey) {\n        this.clearToastTimer(record.id);\n        this.timers.set(record.id, {\n          timerKey: record.timerKey,\n          remaining: duration,\n          startedAt: 0,\n          handle: null,\n        });\n      }\n      if (!this.isPaused) this.startToastTimer(record.id);\n    }\n\n    for (const id of this.timers.keys()) {\n      if (!activeIds.has(id)) this.clearToastTimer(id);\n    }\n  }\n\n  private resolveToastTimeout(record: ToastRecord): number {\n    const value = record.timeout ?? this.timeout;\n    if (typeof value === 'number') return Math.max(0, value);\n    return resolveCssTimeMs(value, TOKEN_DEFAULTS.animationDelayLong2);\n  }\n\n  private startToastTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (!timer || timer.handle || timer.remaining <= 0) return;\n    timer.startedAt = Date.now();\n    timer.handle = setTimeout(() => {\n      timer.handle = null;\n      timer.remaining = 0;\n      this.manager.close(id, 'timeout');\n    }, timer.remaining);\n  }\n\n  private pauseTimers(reason: string) {\n    const wasPaused = this.isPaused;\n    this.pauseReasons.add(reason);\n    if (wasPaused) return;\n    const now = Date.now();\n    for (const timer of this.timers.values()) {\n      if (!timer.handle) continue;\n      clearTimeout(timer.handle);\n      timer.handle = null;\n      timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));\n    }\n  }\n\n  private resumeTimers(reason: string) {\n    this.pauseReasons.delete(reason);\n    if (this.isPaused) return;\n    for (const id of this.timers.keys()) this.startToastTimer(id);\n  }\n\n  private get isPaused(): boolean {\n    return this.pauseReasons.size > 0;\n  }\n\n  private clearToastTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (timer?.handle) clearTimeout(timer.handle);\n    this.timers.delete(id);\n  }\n\n  private clearAllTimers() {\n    for (const timer of this.timers.values()) {\n      if (timer.handle) clearTimeout(timer.handle);\n    }\n    for (const watchdog of this.closeWatchdogs.values()) clearTimeout(watchdog);\n    this.timers.clear();\n    this.closeWatchdogs.clear();\n  }\n\n  private beginRemoval(record: ToastRecord) {\n    if (!this.closeEvents.has(record.id)) {\n      this.closeEvents.add(record.id);\n      this.dsToastClose.emit({\n        id: record.id,\n        reason: record.closeReason ?? 'programmatic',\n        toast: record,\n      });\n      this.moveFocusAfterClose(record.id);\n    }\n    if (\n      this.closeWatchdogs.has(record.id) ||\n      this.closeFrames.has(record.id)\n    ) return;\n\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort3,\n      TOKEN_DEFAULTS.animationDurationShort3,\n    );\n    if (duration <= 0) {\n      queueMicrotask(() => this.completeRemoval(record));\n      return;\n    }\n    const frame = requestAnimationFrame(() => {\n      this.closeFrames.delete(record.id);\n      const current = this.records.find(candidate => candidate.id === record.id);\n      if (!current || current.transitionStatus !== 'ending') return;\n      this.closeWatchdogs.set(\n        record.id,\n        setTimeout(() => this.completeRemoval(current), duration),\n      );\n    });\n    this.closeFrames.set(record.id, frame);\n  }\n\n  private completeRemoval(record: ToastRecord) {\n    const current = this.records.find(candidate => candidate.id === record.id);\n    if (!current || current.transitionStatus !== 'ending') return;\n    const watchdog = this.closeWatchdogs.get(record.id);\n    if (watchdog) clearTimeout(watchdog);\n    this.closeWatchdogs.delete(record.id);\n    const closeFrame = this.closeFrames.get(record.id);\n    if (closeFrame) cancelAnimationFrame(closeFrame);\n    this.closeFrames.delete(record.id);\n    const manager = this.attachedManager;\n    const context = manager?.remove(record.id);\n    if (manager && context) this.pendingRemovals.push({ manager, context });\n  }\n\n  private handleAnimationComplete(record: ToastRecord) {\n    if (record.transitionStatus === 'ending') this.completeRemoval(record);\n  }\n\n  private bindAnimationCancel(element: HTMLDivElement | undefined, id: string) {\n    if (!element || element.dataset['cancelBound'] === 'true') return;\n    element.dataset['cancelBound'] = 'true';\n    element.addEventListener('animationcancel', () => {\n      const record = this.records.find(candidate => candidate.id === id);\n      if (record) this.handleAnimationComplete(record);\n    });\n  }\n\n  private handleWindowBlur = () => this.pauseTimers('window');\n  private handleWindowFocus = () => this.resumeTimers('window');\n  private handleVisibilityChange = () => {\n    if (document.hidden) this.pauseTimers('document');\n    else this.resumeTimers('document');\n  };\n\n  private handlePointerEnter(id: string) {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- pointer interaction selects the viewport that receives F6\n    activeToastRegion = this;\n    this.pendingHoverLeave = false;\n    this.hoveredIds.add(id);\n    this.expanded = true;\n    this.pauseTimers('hover');\n  }\n\n  private handlePointerLeave(id: string) {\n    this.hoveredIds.delete(id);\n    if (this.hoveredIds.size) return;\n    if (this.records.some(record => record.transitionStatus === 'ending')) {\n      this.pendingHoverLeave = true;\n      return;\n    }\n    this.expanded = false;\n    this.resumeTimers('hover');\n  }\n\n  private handleFocusIn = () => {\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !active.matches(':focus-visible')) return;\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator routes F6 to the last focused viewport\n    activeToastRegion = this;\n    this.keyboardActive = true;\n    this.expanded = true;\n    this.pauseTimers('focus');\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    if (!this.keyboardActive) return;\n    this.keyboardActive = false;\n    this.expanded = this.hoveredIds.size > 0;\n    this.resumeTimers('focus');\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'F6') return;\n    const eligible = Array.from(connectedToastRegions).filter(\n      region => region.activeRecords.length > 0,\n    );\n    const target =\n      activeToastRegion && activeToastRegion.activeRecords.length\n        ? activeToastRegion\n        : eligible[eligible.length - 1];\n    if (target !== this) return;\n    event.preventDefault();\n    if (!this.el.contains(document.activeElement)) {\n      this.previousFocus = document.activeElement as HTMLElement | null;\n    }\n    this.keyboardActive = true;\n    this.regionElement?.focus();\n  };\n\n  private handleRegionKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      const target = event.target as HTMLElement;\n      const positioner = target.closest<HTMLElement>('.toast-positioner');\n      const id = positioner?.dataset['toastId'] ?? this.activeRecords[0]?.id;\n      if (id) {\n        event.preventDefault();\n        this.manager.close(id, 'escape');\n      }\n      return;\n    }\n\n    if (event.key === 'Tab' && event.shiftKey && event.target === this.regionElement) {\n      event.preventDefault();\n      this.restorePreviousFocus();\n    }\n  };\n\n  private get regionElement(): HTMLElement | null {\n    return this.el.querySelector<HTMLElement>('.toast-region');\n  }\n\n  private restorePreviousFocus() {\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.keyboardActive = false;\n  }\n\n  private moveFocusAfterClose(id: string) {\n    const active = document.activeElement;\n    const closing = this.positionerElement(id);\n    if (!active || !closing?.contains(active)) return;\n    requestAnimationFrame(() => {\n      const next = this.activeRecords.find(record => record.id !== id);\n      const control = next\n        ? this.positionerElement(next.id)?.querySelector<\n            HTMLElement & { setFocus?: () => Promise<void> }\n          >('ds-button-unfilled')\n        : null;\n      if (control?.setFocus) void control.setFocus();\n      else if (next) this.regionElement?.focus();\n      else this.restorePreviousFocus();\n    });\n  }\n\n  private handleAction(record: ToastRecord, event: CustomEvent<MouseEvent>) {\n    const detail: ToastActionEventDetail = {\n      id: record.id,\n      toast: record,\n      originalEvent: event.detail,\n    };\n    this.dsToastAction.emit(detail);\n    record.action?.onAction?.({\n      id: record.id,\n      data: record.data,\n      manager: this.manager,\n      originalEvent: event.detail,\n    });\n  }\n\n  private handlePointerDown(record: ToastRecord, event: PointerEvent) {\n    if (event.button !== 0) return;\n    const target = event.target as Element;\n    if (target.closest(INTERACTIVE_SWIPE_SELECTOR)) return;\n\n    const surface = event.currentTarget as HTMLElement;\n    surface.setPointerCapture(event.pointerId);\n    this.activeSwipe = {\n      id: record.id,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType,\n      startX: event.clientX,\n      startY: event.clientY,\n      maxDistance: 0,\n      cancelled: false,\n      axis: null,\n    };\n    this.swipe = { id: record.id, x: 0, y: 0 };\n    if (event.pointerType === 'touch') this.pauseTimers('swipe');\n  }\n\n  private handlePointerMove(event: PointerEvent) {\n    const active = this.activeSwipe;\n    if (!active || active.pointerId !== event.pointerId || active.cancelled) return;\n    const dx = event.clientX - active.startX;\n    const dy = event.clientY - active.startY;\n    if (!active.axis && Math.max(Math.abs(dx), Math.abs(dy)) > 1) {\n      active.axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';\n    }\n    if (!active.axis) return;\n    const horizontal = active.axis === 'x';\n    const direction: ToastSwipeDirection = horizontal\n      ? dx >= 0 ? 'right' : 'left'\n      : dy >= 0 ? 'down' : 'up';\n    const allowed = this.swipeDirections.includes(direction);\n    const rawDistance = horizontal ? Math.abs(dx) : Math.abs(dy);\n    const distance = allowed ? rawDistance : Math.sqrt(rawDistance);\n    const signed = (horizontal ? dx : dy) < 0 ? -distance : distance;\n    const x = horizontal ? signed : 0;\n    const y = horizontal ? 0 : signed;\n\n    if (active.maxDistance - distance >= SWIPE_REVERSE_CANCEL_THRESHOLD) {\n      active.cancelled = true;\n      this.cancelSwipe();\n      return;\n    }\n    active.maxDistance = Math.max(active.maxDistance, distance);\n    if (rawDistance > 1) event.preventDefault();\n    this.swipe = { id: active.id, x, y, direction: allowed ? direction : undefined };\n  }\n\n  private handlePointerUp(event: PointerEvent) {\n    const active = this.activeSwipe;\n    if (!active || active.pointerId !== event.pointerId) return;\n    const swipe = this.swipe;\n    const distance = swipe ? Math.max(Math.abs(swipe.x), Math.abs(swipe.y)) : 0;\n    const shouldDismiss =\n      !active.cancelled &&\n      !!swipe?.direction &&\n      distance >= SWIPE_THRESHOLD;\n    const id = active.id;\n    const wasTouch = active.pointerType === 'touch';\n    this.activeSwipe = null;\n    this.swipe = null;\n    if (wasTouch) this.resumeTimers('swipe');\n    if (shouldDismiss && swipe.direction) {\n      this.dismissedSwipeDirections.set(id, swipe.direction);\n      this.manager.close(id, 'swipe');\n    }\n  }\n\n  private handlePointerCancel(event: PointerEvent) {\n    if (this.activeSwipe?.pointerId !== event.pointerId) return;\n    this.cancelSwipe();\n  }\n\n  private cancelSwipe() {\n    const wasTouch = this.activeSwipe?.pointerType === 'touch';\n    this.activeSwipe = null;\n    this.swipe = null;\n    if (wasTouch) this.resumeTimers('swipe');\n  }\n\n  private get touchAction(): string {\n    const horizontal =\n      this.swipeDirections.includes('left') || this.swipeDirections.includes('right');\n    const vertical =\n      this.swipeDirections.includes('up') || this.swipeDirections.includes('down');\n    if (horizontal && vertical) return 'none';\n    if (horizontal) return 'pan-y';\n    if (vertical) return 'pan-x';\n    return 'auto';\n  }\n\n  private handleWindowResize = () => {\n    this.heights.clear();\n    this.measuredUpdateKeys.clear();\n    this.layoutVersion += 1;\n    this.scheduleLayout();\n  };\n\n  private scheduleLayout = () => {\n    if (this.layoutFrame !== null) return;\n    this.layoutFrame = requestAnimationFrame(() => {\n      this.layoutFrame = null;\n      this.measureLayout();\n    });\n  };\n\n  private measureNaturalHeight(element: HTMLElement, expandedWidth: boolean): number {\n    const surface = element.querySelector<HTMLElement>('.toast-surface');\n    if (!surface) return 0;\n    const previousWidth = element.style.width;\n    const previousTransition = element.style.transition;\n    const previousHeight = surface.style.height;\n\n    if (expandedWidth) {\n      element.style.transition = 'none';\n      element.style.width = '100%';\n    }\n    surface.style.height = 'auto';\n    const height = surface.getBoundingClientRect().height;\n\n    surface.style.height = previousHeight;\n    if (expandedWidth) {\n      element.style.width = previousWidth;\n      element.getBoundingClientRect();\n      element.style.transition = previousTransition;\n    }\n    return height;\n  }\n\n  private measureLayout() {\n    let changed = false;\n    for (const record of this.records) {\n      const element = this.positionerElement(record.id);\n      if (!element) continue;\n      let height = this.heights.get(record.id) ?? 0;\n      const needsHeightMeasurement =\n        height <= 0 || this.measuredUpdateKeys.get(record.id) !== record.updateKey;\n      if (needsHeightMeasurement) {\n        height = this.measureNaturalHeight(element, !record.positioner);\n        if (height > 0) {\n          if (this.heights.get(record.id) !== height) changed = true;\n          this.heights.set(record.id, height);\n          this.measuredUpdateKeys.set(record.id, record.updateKey);\n        }\n      }\n\n      if (!record.positioner) continue;\n      const anchor = this.resolveAnchor(record.positioner.anchor);\n      if (!anchor || height <= 0) {\n        if (this.anchoredPositions.delete(record.id)) changed = true;\n        continue;\n      }\n      const rect = element.getBoundingClientRect();\n      const sideOffset = resolveCssLengthPx(\n        record.positioner.sideOffset,\n        TOKEN_DEFAULTS.space050,\n      );\n      const alignOffset = resolveCssLengthPx(record.positioner.alignOffset, 0);\n      const position = computeTooltipPosition({\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: rect.width,\n        popupHeight: height,\n        side: record.positioner.side ?? 'top',\n        align: record.positioner.align ?? 'center',\n        sideOffsetPx: sideOffset,\n        alignOffsetPx: alignOffset,\n        viewportPadPx: resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      });\n      const current = this.anchoredPositions.get(record.id);\n      if (\n        !current ||\n        current.x !== position.x ||\n        current.y !== position.y ||\n        current.side !== position.resolvedSide\n      ) {\n        this.anchoredPositions.set(record.id, {\n          x: position.x,\n          y: position.y,\n          side: position.resolvedSide,\n        });\n        changed = true;\n      }\n    }\n    if (changed) this.layoutVersion += 1;\n  }\n\n  private resolveAnchor(anchor: HTMLElement | string): HTMLElement | null {\n    return typeof anchor === 'string' ? document.getElementById(anchor) : anchor;\n  }\n\n  private positionerElement(id: string): HTMLElement | null {\n    return (\n      Array.from(this.el.querySelectorAll<HTMLElement>('.toast-positioner'))\n        .find(element => element.dataset['toastId'] === id) ?? null\n    );\n  }\n\n  private ensureDomId(id: string): number {\n    const current = this.domIds.get(id);\n    if (current) return current;\n    const next = ++this.nextDomId;\n    this.domIds.set(id, next);\n    return next;\n  }\n\n  private get activeRecords(): ToastRecord[] {\n    return this.records.filter(record => record.transitionStatus !== 'ending');\n  }\n\n  private globalLayout() {\n    const globalRecords = this.records.filter(record => !record.positioner);\n    let offset = 0;\n    let visibleIndex = 0;\n    const gap = resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200);\n    const layouts = new Map<string, { index: number; offset: number; limited: boolean }>();\n\n    globalRecords.forEach((record, domIndex) => {\n      if (record.transitionStatus === 'ending') {\n        layouts.set(record.id, { index: domIndex, offset, limited: false });\n        return;\n      }\n\n      const limited = visibleIndex >= Math.max(1, this.limit);\n      layouts.set(record.id, { index: visibleIndex, offset, limited });\n      offset += (this.heights.get(record.id) ?? 0) + gap;\n      visibleIndex += 1;\n    });\n    return layouts;\n  }\n\n  private renderToast(\n    record: ToastRecord,\n    layout: { index: number; offset: number; limited: boolean },\n  ) {\n    const domId = this.ensureDomId(record.id);\n    const titleId = `ds-toast-${this.instanceId}-${domId}-title`;\n    const descriptionId = `ds-toast-${this.instanceId}-${domId}-description`;\n    const swipe = this.swipe?.id === record.id ? this.swipe : null;\n    const swipeDirection = swipe?.direction ?? this.dismissedSwipeDirections.get(record.id);\n    const anchored = !!record.positioner;\n    const anchoredPosition = this.anchoredPositions.get(record.id);\n    const hiddenHighPriority = record.priority === 'high' && !this.keyboardActive;\n    const focusTabIndex = this.keyboardActive && !layout.limited ? 0 : -1;\n    const toastHeight = this.heights.get(record.id);\n\n    return (\n      <div\n        ref={(element?: HTMLDivElement) => this.bindAnimationCancel(element, record.id)}\n        class={{\n          'toast-positioner': true,\n          'toast-positioner--anchored': anchored,\n          'toast-positioner--ending': record.transitionStatus === 'ending',\n        }}\n        data-toast-id={record.id}\n        data-behind={!anchored && layout.index > 0 ? '' : undefined}\n        data-limited={layout.limited ? '' : undefined}\n        data-positioned={anchored ? String(!!anchoredPosition) : undefined}\n        data-side={anchoredPosition?.side}\n        inert={layout.limited ? true : undefined}\n        aria-hidden={layout.limited ? 'true' : undefined}\n        style={{\n          '--toast-index': String(layout.index),\n          '--toast-offset-y': `${layout.offset}px`,\n          '--toast-height': toastHeight ? `${toastHeight}px` : undefined,\n          zIndex: String(this.records.length - layout.index),\n          left: anchoredPosition ? `${anchoredPosition.x}px` : undefined,\n          top: anchoredPosition ? `${anchoredPosition.y}px` : undefined,\n        }}\n        onAnimationEnd={() => this.handleAnimationComplete(record)}\n      >\n        <div\n          class={{\n            'toast-surface': true,\n            'toast-surface--swiping': !!swipe,\n          }}\n          role={record.priority === 'high' ? 'alertdialog' : 'dialog'}\n          aria-modal=\"false\"\n          aria-labelledby={\n            record.title ? titleId : record.description ? descriptionId : undefined\n          }\n          aria-describedby={record.title && record.description ? descriptionId : undefined}\n          aria-hidden={hiddenHighPriority ? 'true' : undefined}\n          data-type={record.type}\n          data-priority={record.priority}\n          data-transition-status={record.transitionStatus}\n          data-swiping={swipe ? '' : undefined}\n          data-swipe-direction={swipeDirection}\n          style={{\n            '--toast-swipe-movement-x': `${swipe?.x ?? 0}px`,\n            '--toast-swipe-movement-y': `${swipe?.y ?? 0}px`,\n            touchAction: this.touchAction,\n          }}\n          onPointerDown={(event: PointerEvent) => this.handlePointerDown(record, event)}\n          onPointerMove={(event: PointerEvent) => this.handlePointerMove(event)}\n          onPointerUp={(event: PointerEvent) => this.handlePointerUp(event)}\n          onPointerCancel={(event: PointerEvent) => this.handlePointerCancel(event)}\n          onPointerEnter={\n            anchored ? () => this.handlePointerEnter(record.id) : undefined\n          }\n          onPointerLeave={\n            anchored ? () => this.handlePointerLeave(record.id) : undefined\n          }\n        >\n          <div class=\"toast-content\">\n            <div class=\"toast-copy\">\n              {record.title && (\n                <ds-text\n                  class=\"toast-title\"\n                  as=\"div\"\n                  variant=\"text-title-small\"\n                  color=\"primary\"\n                  textId={titleId}\n                >\n                  {record.title}\n                </ds-text>\n              )}\n              {record.description && (\n                <ds-text\n                  class=\"toast-description\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  textId={descriptionId}\n                >\n                  {record.description}\n                </ds-text>\n              )}\n            </div>\n            {record.action && (\n              <ds-button-unfilled\n                class=\"toast-action\"\n                variant=\"label\"\n                size=\"md\"\n                type=\"button\"\n                label={record.action.label}\n                aria-label={record.action.ariaLabel}\n                hasBorder\n                focusTabIndex={focusTabIndex}\n                aria-hidden={!this.keyboardActive ? 'true' : undefined}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.handleAction(record, event)\n                }\n              />\n            )}\n          </div>\n          <ds-button-unfilled\n            class=\"toast-close\"\n            variant=\"icon\"\n            size=\"md\"\n            type=\"button\"\n            icon=\"Cross\"\n            aria-label={this.closeLabel}\n            hasBorder={false}\n            activeFill={false}\n            focusTabIndex={focusTabIndex}\n            aria-hidden={!this.keyboardActive ? 'true' : undefined}\n            onDsClick={() => this.manager.close(record.id, 'close-button')}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    void this.layoutVersion;\n    const globalLayouts = this.globalLayout();\n    const globalRecords = this.records.filter(record => !record.positioner);\n    const anchoredRecords = this.records.filter(record => !!record.positioner);\n    const highPriority = this.records.filter(\n      record =>\n        record.priority === 'high' &&\n        record.transitionStatus !== 'ending' &&\n        !globalLayouts.get(record.id)?.limited,\n    );\n\n    return (\n      <Host>\n        <section\n          class=\"toast-region\"\n          role=\"region\"\n          aria-label={this.label}\n          aria-live=\"polite\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n          tabIndex={-1}\n          onFocusin={this.handleFocusIn}\n          onFocusout={(event: FocusEvent) => this.handleFocusOut(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleRegionKeyDown(event)}\n        >\n          <div\n            class=\"toast-viewport\"\n            data-expanded={this.expanded ? '' : undefined}\n            onPointerEnter={() => this.handlePointerEnter(GLOBAL_STACK_HOVER)}\n            onPointerLeave={() => this.handlePointerLeave(GLOBAL_STACK_HOVER)}\n          >\n            {globalRecords.map(record =>\n              this.renderToast(\n                record,\n                globalLayouts.get(record.id) ?? { index: 0, offset: 0, limited: false },\n              )\n            )}\n          </div>\n          <div class=\"toast-anchored-layer\">\n            {anchoredRecords.map(record =>\n              this.renderToast(record, { index: 0, offset: 0, limited: false })\n            )}\n          </div>\n          <div class=\"toast-assertive-announcer ds-visually-hidden\">\n            {highPriority.map(record => (\n              <div role=\"alert\" aria-atomic=\"true\">\n                {[record.title, record.description].filter(Boolean).join('. ')}\n              </div>\n            ))}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  resolveMotionTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport {\n  toastManager as defaultToastManager,\n  type ToastActionEventDetail,\n  type ToastCloseContext,\n  type ToastCloseEventDetail,\n  type ToastEventDetail,\n  type ToastManager,\n  type ToastRecord,\n  type ToastSwipeDirection,\n} from '../../toast';\nimport { computeAnchoredPosition } from '../../utils/anchored-position';\n\ninterface ToastTimer {\n  timerKey: number;\n  remaining: number;\n  startedAt: number;\n  handle: ReturnType<typeof setTimeout> | null;\n}\n\ninterface SwipeState {\n  id: string;\n  x: number;\n  y: number;\n  direction?: ToastSwipeDirection;\n}\n\ninterface AnchoredPosition {\n  x: number;\n  y: number;\n  side: 'top' | 'right' | 'bottom' | 'left';\n}\n\ninterface ActiveSwipe {\n  id: string;\n  pointerId: number;\n  pointerType: string;\n  startX: number;\n  startY: number;\n  maxDistance: number;\n  cancelled: boolean;\n  axis: 'x' | 'y' | null;\n}\n\nconst SWIPE_THRESHOLD = 40;\nconst SWIPE_REVERSE_CANCEL_THRESHOLD = 10;\nconst GLOBAL_STACK_HOVER = '__global-stack__';\nconst INTERACTIVE_SWIPE_SELECTOR =\n  'button,a,input,textarea,select,[role=\"button\"],[data-ds-toast-swipe-ignore]';\n\nconst attachedManagers = new WeakMap<ToastManager, Toast>();\nconst connectedToastRegions = new Set<Toast>();\nlet activeToastRegion: Toast | null = null;\nlet toastInstanceCounter = 0;\n\n@Component({\n  tag: 'ds-toast',\n  styleUrl: 'Toast.css',\n  scoped: true,\n})\nexport class Toast {\n  @Element() el!: HTMLElement;\n\n  /** Manager that supplies toast records. Assign as a JavaScript property. */\n  @Prop() manager: ToastManager = defaultToastManager;\n  /** Maximum visible global-stack records. Limited records remain mounted and inert. */\n  @Prop() limit: number = 3;\n  /** Default auto-dismiss delay. Use 0 for persistent records. */\n  @Prop() timeout: number | string = TOKEN_DEFAULTS.animationDelayLong2;\n  /** Accessible label for the notification region. */\n  @Prop() label: string = 'Notifications';\n  /** Localized accessible label for every toast close action. */\n  @Prop() closeLabel: string = 'Close notification';\n  /** Keep the global stack 16px above the persistent mobile shell bar below 768px. */\n  @Prop({ attribute: 'avoid-mobile-shell-bar', reflect: true })\n  avoidMobileShellBar: boolean = false;\n  /** Allowed swipe-to-dismiss directions. Assign as a JavaScript property. */\n  @Prop() swipeDirections: ToastSwipeDirection[] = ['down', 'right'];\n\n  @State() private records: readonly ToastRecord[] = [];\n  @State() private expanded = false;\n  @State() private keyboardActive = false;\n  @State() private swipe: SwipeState | null = null;\n  @State() private layoutVersion = 0;\n\n  @Event() dsToastClose!: EventEmitter<ToastCloseEventDetail>;\n  @Event() dsToastRemove!: EventEmitter<ToastEventDetail>;\n  @Event() dsToastAction!: EventEmitter<ToastActionEventDetail>;\n\n  private readonly instanceId = ++toastInstanceCounter;\n  private readonly domIds = new Map<string, number>();\n  private readonly timers = new Map<string, ToastTimer>();\n  private readonly closeWatchdogs = new Map<string, ReturnType<typeof setTimeout>>();\n  private readonly closeFrames = new Map<string, number>();\n  private readonly closeEvents = new Set<string>();\n  private readonly activationFrames = new Map<string, number>();\n  private readonly pauseReasons = new Set<string>();\n  private readonly hoveredIds = new Set<string>();\n  private readonly heights = new Map<string, number>();\n  private readonly measuredUpdateKeys = new Map<string, number>();\n  private readonly anchoredPositions = new Map<string, AnchoredPosition>();\n  private readonly dismissedSwipeDirections = new Map<string, ToastSwipeDirection>();\n  private readonly observedElements = new Set<Element>();\n  private readonly pendingRemovals: Array<{\n    manager: ToastManager;\n    context: ToastCloseContext;\n  }> = [];\n\n  private unsubscribe: (() => void) | null = null;\n  private attachedManager: ToastManager | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n  private layoutFrame: number | null = null;\n  private activeSwipe: ActiveSwipe | null = null;\n  private nextDomId = 0;\n  private connected = false;\n  private pendingHoverLeave = false;\n\n  connectedCallback() {\n    this.connect();\n  }\n\n  componentDidLoad() {\n    this.connect();\n  }\n\n  private connect() {\n    if (this.connected) return;\n    this.connected = true;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleLayout());\n    this.mutationObserver ??= new MutationObserver(() => this.scheduleLayout());\n    this.mutationObserver.observe(document.body, { childList: true, subtree: true });\n    if (!this.unsubscribe) this.attachManager(this.manager);\n    window.addEventListener('blur', this.handleWindowBlur);\n    window.addEventListener('focus', this.handleWindowFocus);\n    window.addEventListener('resize', this.handleWindowResize);\n    window.addEventListener('scroll', this.scheduleLayout, true);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('visibilitychange', this.handleVisibilityChange);\n    connectedToastRegions.add(this);\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator tracks the active connected viewport\n    if (!activeToastRegion) activeToastRegion = this;\n  }\n\n  componentDidRender() {\n    this.syncObservedElements();\n    this.flushPendingRemovals();\n    this.scheduleLayout();\n  }\n\n  disconnectedCallback() {\n    this.connected = false;\n    this.flushPendingRemovals();\n    this.detachManager();\n    this.resetManagerState();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = null;\n    this.observedElements.clear();\n    if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame);\n    this.layoutFrame = null;\n    window.removeEventListener('blur', this.handleWindowBlur);\n    window.removeEventListener('focus', this.handleWindowFocus);\n    window.removeEventListener('resize', this.handleWindowResize);\n    window.removeEventListener('scroll', this.scheduleLayout, true);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('visibilitychange', this.handleVisibilityChange);\n    connectedToastRegions.delete(this);\n    if (activeToastRegion === this) {\n      const remaining = Array.from(connectedToastRegions);\n      activeToastRegion = remaining[remaining.length - 1] ?? null;\n    }\n  }\n\n  @Watch('manager')\n  onManagerChange(next: ToastManager) {\n    this.detachManager();\n    this.resetManagerState();\n    if (this.connected) this.attachManager(next);\n  }\n\n  @Watch('timeout')\n  onTimeoutChange() {\n    for (const timer of this.timers.values()) {\n      if (timer.handle) clearTimeout(timer.handle);\n    }\n    this.timers.clear();\n    this.syncTimers();\n  }\n\n  private attachManager(manager: ToastManager) {\n    const attached = attachedManagers.get(manager);\n    if (attached && attached !== this) {\n      console.warn('[ds-toast] A manager can control only one connected ds-toast instance.');\n      return;\n    }\n    attachedManagers.set(manager, this);\n    this.attachedManager = manager;\n    this.unsubscribe = manager.subscribe(records => {\n      this.records = records;\n      this.syncLifecycle(records);\n      this.scheduleLayout();\n    });\n  }\n\n  private detachManager() {\n    this.unsubscribe?.();\n    this.unsubscribe = null;\n    if (this.attachedManager && attachedManagers.get(this.attachedManager) === this) {\n      attachedManagers.delete(this.attachedManager);\n    }\n    this.attachedManager = null;\n  }\n\n  private resetManagerState() {\n    this.flushPendingRemovals();\n    if (this.el.contains(document.activeElement)) this.restorePreviousFocus();\n    this.clearAllTimers();\n    for (const frame of this.activationFrames.values()) cancelAnimationFrame(frame);\n    for (const frame of this.closeFrames.values()) cancelAnimationFrame(frame);\n    this.activationFrames.clear();\n    this.closeFrames.clear();\n    this.closeEvents.clear();\n    this.pauseReasons.clear();\n    this.hoveredIds.clear();\n    this.pendingHoverLeave = false;\n    this.heights.clear();\n    this.measuredUpdateKeys.clear();\n    this.anchoredPositions.clear();\n    this.dismissedSwipeDirections.clear();\n    this.domIds.clear();\n    this.activeSwipe = null;\n    this.swipe = null;\n    this.expanded = false;\n    this.keyboardActive = false;\n    this.records = [];\n    this.resizeObserver?.disconnect();\n    this.observedElements.clear();\n  }\n\n  private syncObservedElements() {\n    const next = new Set<Element>(\n      this.el.querySelectorAll<HTMLElement>('.toast-positioner'),\n    );\n    for (const record of this.records) {\n      if (!record.positioner) continue;\n      const anchor = this.resolveAnchor(record.positioner.anchor);\n      if (anchor) next.add(anchor);\n    }\n\n    for (const element of this.observedElements) {\n      if (!next.has(element)) {\n        this.resizeObserver?.unobserve(element);\n        this.observedElements.delete(element);\n      }\n    }\n    for (const element of next) {\n      if (this.observedElements.has(element)) continue;\n      this.resizeObserver?.observe(element);\n      this.observedElements.add(element);\n    }\n  }\n\n  private flushPendingRemovals() {\n    for (const pending of this.pendingRemovals.splice(0)) {\n      pending.manager.notifyRemove(pending.context);\n      this.dsToastRemove.emit({\n        id: pending.context.id,\n        toast: pending.context.toast,\n      });\n    }\n  }\n\n  private syncLifecycle(records: readonly ToastRecord[]) {\n    const recordIds = new Set(records.map(record => record.id));\n    for (const id of this.hoveredIds) {\n      if (id !== GLOBAL_STACK_HOVER && !recordIds.has(id)) this.hoveredIds.delete(id);\n    }\n    const hasEndingRecords = records.some(\n      record => record.transitionStatus === 'ending',\n    );\n    if (this.pendingHoverLeave && !hasEndingRecords && !this.hoveredIds.size) {\n      this.pendingHoverLeave = false;\n      this.expanded = false;\n      this.resumeTimers('hover');\n    } else if (!this.hoveredIds.size && !this.pendingHoverLeave) {\n      this.resumeTimers('hover');\n    }\n\n    for (const [id, timer] of this.timers) {\n      if (recordIds.has(id)) continue;\n      if (timer.handle) clearTimeout(timer.handle);\n      this.timers.delete(id);\n    }\n\n    for (const [id, watchdog] of this.closeWatchdogs) {\n      if (recordIds.has(id)) continue;\n      clearTimeout(watchdog);\n      this.closeWatchdogs.delete(id);\n    }\n\n    for (const [id, frame] of this.activationFrames) {\n      if (recordIds.has(id)) continue;\n      cancelAnimationFrame(frame);\n      this.activationFrames.delete(id);\n    }\n\n    for (const [id, frame] of this.closeFrames) {\n      if (recordIds.has(id)) continue;\n      cancelAnimationFrame(frame);\n      this.closeFrames.delete(id);\n    }\n\n    for (const id of this.domIds.keys()) {\n      if (recordIds.has(id)) continue;\n      this.closeEvents.delete(id);\n      this.domIds.delete(id);\n      this.heights.delete(id);\n      this.measuredUpdateKeys.delete(id);\n      this.anchoredPositions.delete(id);\n      this.dismissedSwipeDirections.delete(id);\n    }\n\n    for (const record of records) {\n      this.ensureDomId(record.id);\n      if (\n        record.transitionStatus === 'starting' &&\n        !this.activationFrames.has(record.id)\n      ) {\n        const manager = this.attachedManager;\n        const frame = requestAnimationFrame(() => {\n          this.activationFrames.delete(record.id);\n          manager?.activate(record.id);\n        });\n        this.activationFrames.set(record.id, frame);\n      }\n\n      if (record.transitionStatus === 'ending') {\n        this.clearToastTimer(record.id);\n        this.beginRemoval(record);\n      } else {\n        const watchdog = this.closeWatchdogs.get(record.id);\n        if (watchdog) clearTimeout(watchdog);\n        this.closeWatchdogs.delete(record.id);\n        const closeFrame = this.closeFrames.get(record.id);\n        if (closeFrame) cancelAnimationFrame(closeFrame);\n        this.closeFrames.delete(record.id);\n        this.closeEvents.delete(record.id);\n      }\n    }\n\n    this.syncTimers();\n  }\n\n  private syncTimers() {\n    const activeIds = new Set<string>();\n    for (const record of this.records) {\n      if (record.transitionStatus !== 'active') continue;\n      activeIds.add(record.id);\n      const duration = this.resolveToastTimeout(record);\n      if (duration <= 0) {\n        this.clearToastTimer(record.id);\n        continue;\n      }\n\n      const existing = this.timers.get(record.id);\n      if (!existing || existing.timerKey !== record.timerKey) {\n        this.clearToastTimer(record.id);\n        this.timers.set(record.id, {\n          timerKey: record.timerKey,\n          remaining: duration,\n          startedAt: 0,\n          handle: null,\n        });\n      }\n      if (!this.isPaused) this.startToastTimer(record.id);\n    }\n\n    for (const id of this.timers.keys()) {\n      if (!activeIds.has(id)) this.clearToastTimer(id);\n    }\n  }\n\n  private resolveToastTimeout(record: ToastRecord): number {\n    const value = record.timeout ?? this.timeout;\n    if (typeof value === 'number') return Math.max(0, value);\n    return resolveCssTimeMs(value, TOKEN_DEFAULTS.animationDelayLong2);\n  }\n\n  private startToastTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (!timer || timer.handle || timer.remaining <= 0) return;\n    timer.startedAt = Date.now();\n    timer.handle = setTimeout(() => {\n      timer.handle = null;\n      timer.remaining = 0;\n      this.manager.close(id, 'timeout');\n    }, timer.remaining);\n  }\n\n  private pauseTimers(reason: string) {\n    const wasPaused = this.isPaused;\n    this.pauseReasons.add(reason);\n    if (wasPaused) return;\n    const now = Date.now();\n    for (const timer of this.timers.values()) {\n      if (!timer.handle) continue;\n      clearTimeout(timer.handle);\n      timer.handle = null;\n      timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));\n    }\n  }\n\n  private resumeTimers(reason: string) {\n    this.pauseReasons.delete(reason);\n    if (this.isPaused) return;\n    for (const id of this.timers.keys()) this.startToastTimer(id);\n  }\n\n  private get isPaused(): boolean {\n    return this.pauseReasons.size > 0;\n  }\n\n  private clearToastTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (timer?.handle) clearTimeout(timer.handle);\n    this.timers.delete(id);\n  }\n\n  private clearAllTimers() {\n    for (const timer of this.timers.values()) {\n      if (timer.handle) clearTimeout(timer.handle);\n    }\n    for (const watchdog of this.closeWatchdogs.values()) clearTimeout(watchdog);\n    this.timers.clear();\n    this.closeWatchdogs.clear();\n  }\n\n  private beginRemoval(record: ToastRecord) {\n    if (!this.closeEvents.has(record.id)) {\n      this.closeEvents.add(record.id);\n      this.dsToastClose.emit({\n        id: record.id,\n        reason: record.closeReason ?? 'programmatic',\n        toast: record,\n      });\n      this.moveFocusAfterClose(record.id);\n    }\n    if (\n      this.closeWatchdogs.has(record.id) ||\n      this.closeFrames.has(record.id)\n    ) return;\n\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort3,\n      TOKEN_DEFAULTS.animationDurationShort3,\n    );\n    if (duration <= 0) {\n      queueMicrotask(() => this.completeRemoval(record));\n      return;\n    }\n    const frame = requestAnimationFrame(() => {\n      this.closeFrames.delete(record.id);\n      const current = this.records.find(candidate => candidate.id === record.id);\n      if (!current || current.transitionStatus !== 'ending') return;\n      this.closeWatchdogs.set(\n        record.id,\n        setTimeout(() => this.completeRemoval(current), duration),\n      );\n    });\n    this.closeFrames.set(record.id, frame);\n  }\n\n  private completeRemoval(record: ToastRecord) {\n    const current = this.records.find(candidate => candidate.id === record.id);\n    if (!current || current.transitionStatus !== 'ending') return;\n    const watchdog = this.closeWatchdogs.get(record.id);\n    if (watchdog) clearTimeout(watchdog);\n    this.closeWatchdogs.delete(record.id);\n    const closeFrame = this.closeFrames.get(record.id);\n    if (closeFrame) cancelAnimationFrame(closeFrame);\n    this.closeFrames.delete(record.id);\n    const manager = this.attachedManager;\n    const context = manager?.remove(record.id);\n    if (manager && context) this.pendingRemovals.push({ manager, context });\n  }\n\n  private handleAnimationComplete(record: ToastRecord) {\n    if (record.transitionStatus === 'ending') this.completeRemoval(record);\n  }\n\n  private bindAnimationCancel(element: HTMLDivElement | undefined, id: string) {\n    if (!element || element.dataset['cancelBound'] === 'true') return;\n    element.dataset['cancelBound'] = 'true';\n    element.addEventListener('animationcancel', () => {\n      const record = this.records.find(candidate => candidate.id === id);\n      if (record) this.handleAnimationComplete(record);\n    });\n  }\n\n  private handleWindowBlur = () => this.pauseTimers('window');\n  private handleWindowFocus = () => this.resumeTimers('window');\n  private handleVisibilityChange = () => {\n    if (document.hidden) this.pauseTimers('document');\n    else this.resumeTimers('document');\n  };\n\n  private handlePointerEnter(id: string) {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- pointer interaction selects the viewport that receives F6\n    activeToastRegion = this;\n    this.pendingHoverLeave = false;\n    this.hoveredIds.add(id);\n    this.expanded = true;\n    this.pauseTimers('hover');\n  }\n\n  private handlePointerLeave(id: string) {\n    this.hoveredIds.delete(id);\n    if (this.hoveredIds.size) return;\n    if (this.records.some(record => record.transitionStatus === 'ending')) {\n      this.pendingHoverLeave = true;\n      return;\n    }\n    this.expanded = false;\n    this.resumeTimers('hover');\n  }\n\n  private handleFocusIn = () => {\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !active.matches(':focus-visible')) return;\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator routes F6 to the last focused viewport\n    activeToastRegion = this;\n    this.keyboardActive = true;\n    this.expanded = true;\n    this.pauseTimers('focus');\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    if (!this.keyboardActive) return;\n    this.keyboardActive = false;\n    this.expanded = this.hoveredIds.size > 0;\n    this.resumeTimers('focus');\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'F6') return;\n    const eligible = Array.from(connectedToastRegions).filter(\n      region => region.activeRecords.length > 0,\n    );\n    const target =\n      activeToastRegion && activeToastRegion.activeRecords.length\n        ? activeToastRegion\n        : eligible[eligible.length - 1];\n    if (target !== this) return;\n    event.preventDefault();\n    if (!this.el.contains(document.activeElement)) {\n      this.previousFocus = document.activeElement as HTMLElement | null;\n    }\n    this.keyboardActive = true;\n    this.regionElement?.focus();\n  };\n\n  private handleRegionKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      const target = event.target as HTMLElement;\n      const positioner = target.closest<HTMLElement>('.toast-positioner');\n      const id = positioner?.dataset['toastId'] ?? this.activeRecords[0]?.id;\n      if (id) {\n        event.preventDefault();\n        this.manager.close(id, 'escape');\n      }\n      return;\n    }\n\n    if (event.key === 'Tab' && event.shiftKey && event.target === this.regionElement) {\n      event.preventDefault();\n      this.restorePreviousFocus();\n    }\n  };\n\n  private get regionElement(): HTMLElement | null {\n    return this.el.querySelector<HTMLElement>('.toast-region');\n  }\n\n  private restorePreviousFocus() {\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.keyboardActive = false;\n  }\n\n  private moveFocusAfterClose(id: string) {\n    const active = document.activeElement;\n    const closing = this.positionerElement(id);\n    if (!active || !closing?.contains(active)) return;\n    requestAnimationFrame(() => {\n      const next = this.activeRecords.find(record => record.id !== id);\n      const control = next\n        ? this.positionerElement(next.id)?.querySelector<\n            HTMLElement & { setFocus?: () => Promise<void> }\n          >('ds-button-unfilled')\n        : null;\n      if (control?.setFocus) void control.setFocus();\n      else if (next) this.regionElement?.focus();\n      else this.restorePreviousFocus();\n    });\n  }\n\n  private handleAction(record: ToastRecord, event: CustomEvent<MouseEvent>) {\n    const detail: ToastActionEventDetail = {\n      id: record.id,\n      toast: record,\n      originalEvent: event.detail,\n    };\n    this.dsToastAction.emit(detail);\n    record.action?.onAction?.({\n      id: record.id,\n      data: record.data,\n      manager: this.manager,\n      originalEvent: event.detail,\n    });\n  }\n\n  private handlePointerDown(record: ToastRecord, event: PointerEvent) {\n    if (event.button !== 0) return;\n    const target = event.target as Element;\n    if (target.closest(INTERACTIVE_SWIPE_SELECTOR)) return;\n\n    const surface = event.currentTarget as HTMLElement;\n    surface.setPointerCapture(event.pointerId);\n    this.activeSwipe = {\n      id: record.id,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType,\n      startX: event.clientX,\n      startY: event.clientY,\n      maxDistance: 0,\n      cancelled: false,\n      axis: null,\n    };\n    this.swipe = { id: record.id, x: 0, y: 0 };\n    if (event.pointerType === 'touch') this.pauseTimers('swipe');\n  }\n\n  private handlePointerMove(event: PointerEvent) {\n    const active = this.activeSwipe;\n    if (!active || active.pointerId !== event.pointerId || active.cancelled) return;\n    const dx = event.clientX - active.startX;\n    const dy = event.clientY - active.startY;\n    if (!active.axis && Math.max(Math.abs(dx), Math.abs(dy)) > 1) {\n      active.axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';\n    }\n    if (!active.axis) return;\n    const horizontal = active.axis === 'x';\n    const direction: ToastSwipeDirection = horizontal\n      ? dx >= 0 ? 'right' : 'left'\n      : dy >= 0 ? 'down' : 'up';\n    const allowed = this.swipeDirections.includes(direction);\n    const rawDistance = horizontal ? Math.abs(dx) : Math.abs(dy);\n    const distance = allowed ? rawDistance : Math.sqrt(rawDistance);\n    const signed = (horizontal ? dx : dy) < 0 ? -distance : distance;\n    const x = horizontal ? signed : 0;\n    const y = horizontal ? 0 : signed;\n\n    if (active.maxDistance - distance >= SWIPE_REVERSE_CANCEL_THRESHOLD) {\n      active.cancelled = true;\n      this.cancelSwipe();\n      return;\n    }\n    active.maxDistance = Math.max(active.maxDistance, distance);\n    if (rawDistance > 1) event.preventDefault();\n    this.swipe = { id: active.id, x, y, direction: allowed ? direction : undefined };\n  }\n\n  private handlePointerUp(event: PointerEvent) {\n    const active = this.activeSwipe;\n    if (!active || active.pointerId !== event.pointerId) return;\n    const swipe = this.swipe;\n    const distance = swipe ? Math.max(Math.abs(swipe.x), Math.abs(swipe.y)) : 0;\n    const shouldDismiss =\n      !active.cancelled &&\n      !!swipe?.direction &&\n      distance >= SWIPE_THRESHOLD;\n    const id = active.id;\n    const wasTouch = active.pointerType === 'touch';\n    this.activeSwipe = null;\n    this.swipe = null;\n    if (wasTouch) this.resumeTimers('swipe');\n    if (shouldDismiss && swipe.direction) {\n      this.dismissedSwipeDirections.set(id, swipe.direction);\n      this.manager.close(id, 'swipe');\n    }\n  }\n\n  private handlePointerCancel(event: PointerEvent) {\n    if (this.activeSwipe?.pointerId !== event.pointerId) return;\n    this.cancelSwipe();\n  }\n\n  private cancelSwipe() {\n    const wasTouch = this.activeSwipe?.pointerType === 'touch';\n    this.activeSwipe = null;\n    this.swipe = null;\n    if (wasTouch) this.resumeTimers('swipe');\n  }\n\n  private get touchAction(): string {\n    const horizontal =\n      this.swipeDirections.includes('left') || this.swipeDirections.includes('right');\n    const vertical =\n      this.swipeDirections.includes('up') || this.swipeDirections.includes('down');\n    if (horizontal && vertical) return 'none';\n    if (horizontal) return 'pan-y';\n    if (vertical) return 'pan-x';\n    return 'auto';\n  }\n\n  private handleWindowResize = () => {\n    this.heights.clear();\n    this.measuredUpdateKeys.clear();\n    this.layoutVersion += 1;\n    this.scheduleLayout();\n  };\n\n  private scheduleLayout = () => {\n    if (this.layoutFrame !== null) return;\n    this.layoutFrame = requestAnimationFrame(() => {\n      this.layoutFrame = null;\n      this.measureLayout();\n    });\n  };\n\n  private measureNaturalHeight(element: HTMLElement, expandedWidth: boolean): number {\n    const surface = element.querySelector<HTMLElement>('.toast-surface');\n    if (!surface) return 0;\n    const previousWidth = element.style.width;\n    const previousTransition = element.style.transition;\n    const previousHeight = surface.style.height;\n\n    if (expandedWidth) {\n      element.style.transition = 'none';\n      element.style.width = '100%';\n    }\n    surface.style.height = 'auto';\n    const height = surface.getBoundingClientRect().height;\n\n    surface.style.height = previousHeight;\n    if (expandedWidth) {\n      element.style.width = previousWidth;\n      element.getBoundingClientRect();\n      element.style.transition = previousTransition;\n    }\n    return height;\n  }\n\n  private measureLayout() {\n    let changed = false;\n    for (const record of this.records) {\n      const element = this.positionerElement(record.id);\n      if (!element) continue;\n      let height = this.heights.get(record.id) ?? 0;\n      const needsHeightMeasurement =\n        height <= 0 || this.measuredUpdateKeys.get(record.id) !== record.updateKey;\n      if (needsHeightMeasurement) {\n        height = this.measureNaturalHeight(element, !record.positioner);\n        if (height > 0) {\n          if (this.heights.get(record.id) !== height) changed = true;\n          this.heights.set(record.id, height);\n          this.measuredUpdateKeys.set(record.id, record.updateKey);\n        }\n      }\n\n      if (!record.positioner) continue;\n      const anchor = this.resolveAnchor(record.positioner.anchor);\n      if (!anchor || height <= 0) {\n        if (this.anchoredPositions.delete(record.id)) changed = true;\n        continue;\n      }\n      const rect = element.getBoundingClientRect();\n      const sideOffset = resolveCssLengthPx(\n        record.positioner.sideOffset,\n        TOKEN_DEFAULTS.space050,\n      );\n      const alignOffset = resolveCssLengthPx(record.positioner.alignOffset, 0);\n      const position = computeAnchoredPosition({\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: rect.width,\n        popupHeight: height,\n        side: record.positioner.side ?? 'top',\n        align: record.positioner.align ?? 'center',\n        sideOffsetPx: sideOffset,\n        alignOffsetPx: alignOffset,\n        viewportPadPx: resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      });\n      const current = this.anchoredPositions.get(record.id);\n      if (\n        !current ||\n        current.x !== position.x ||\n        current.y !== position.y ||\n        current.side !== position.resolvedSide\n      ) {\n        this.anchoredPositions.set(record.id, {\n          x: position.x,\n          y: position.y,\n          side: position.resolvedSide,\n        });\n        changed = true;\n      }\n    }\n    if (changed) this.layoutVersion += 1;\n  }\n\n  private resolveAnchor(anchor: HTMLElement | string): HTMLElement | null {\n    return typeof anchor === 'string' ? document.getElementById(anchor) : anchor;\n  }\n\n  private positionerElement(id: string): HTMLElement | null {\n    return (\n      Array.from(this.el.querySelectorAll<HTMLElement>('.toast-positioner'))\n        .find(element => element.dataset['toastId'] === id) ?? null\n    );\n  }\n\n  private ensureDomId(id: string): number {\n    const current = this.domIds.get(id);\n    if (current) return current;\n    const next = ++this.nextDomId;\n    this.domIds.set(id, next);\n    return next;\n  }\n\n  private get activeRecords(): ToastRecord[] {\n    return this.records.filter(record => record.transitionStatus !== 'ending');\n  }\n\n  private globalLayout() {\n    const globalRecords = this.records.filter(record => !record.positioner);\n    let offset = 0;\n    let visibleIndex = 0;\n    const gap = resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200);\n    const layouts = new Map<string, { index: number; offset: number; limited: boolean }>();\n\n    globalRecords.forEach((record, domIndex) => {\n      if (record.transitionStatus === 'ending') {\n        layouts.set(record.id, { index: domIndex, offset, limited: false });\n        return;\n      }\n\n      const limited = visibleIndex >= Math.max(1, this.limit);\n      layouts.set(record.id, { index: visibleIndex, offset, limited });\n      offset += (this.heights.get(record.id) ?? 0) + gap;\n      visibleIndex += 1;\n    });\n    return layouts;\n  }\n\n  private renderToast(\n    record: ToastRecord,\n    layout: { index: number; offset: number; limited: boolean },\n  ) {\n    const domId = this.ensureDomId(record.id);\n    const titleId = `ds-toast-${this.instanceId}-${domId}-title`;\n    const descriptionId = `ds-toast-${this.instanceId}-${domId}-description`;\n    const swipe = this.swipe?.id === record.id ? this.swipe : null;\n    const swipeDirection = swipe?.direction ?? this.dismissedSwipeDirections.get(record.id);\n    const anchored = !!record.positioner;\n    const anchoredPosition = this.anchoredPositions.get(record.id);\n    const hiddenHighPriority = record.priority === 'high' && !this.keyboardActive;\n    const focusTabIndex = this.keyboardActive && !layout.limited ? 0 : -1;\n    const toastHeight = this.heights.get(record.id);\n\n    return (\n      <div\n        ref={(element?: HTMLDivElement) => this.bindAnimationCancel(element, record.id)}\n        class={{\n          'toast-positioner': true,\n          'toast-positioner--anchored': anchored,\n          'toast-positioner--ending': record.transitionStatus === 'ending',\n        }}\n        data-toast-id={record.id}\n        data-behind={!anchored && layout.index > 0 ? '' : undefined}\n        data-limited={layout.limited ? '' : undefined}\n        data-positioned={anchored ? String(!!anchoredPosition) : undefined}\n        data-side={anchoredPosition?.side}\n        inert={layout.limited ? true : undefined}\n        aria-hidden={layout.limited ? 'true' : undefined}\n        style={{\n          '--toast-index': String(layout.index),\n          '--toast-offset-y': `${layout.offset}px`,\n          '--toast-height': toastHeight ? `${toastHeight}px` : undefined,\n          zIndex: String(this.records.length - layout.index),\n          left: anchoredPosition ? `${anchoredPosition.x}px` : undefined,\n          top: anchoredPosition ? `${anchoredPosition.y}px` : undefined,\n        }}\n        onAnimationEnd={() => this.handleAnimationComplete(record)}\n      >\n        <div\n          class={{\n            'toast-surface': true,\n            'toast-surface--swiping': !!swipe,\n          }}\n          role={record.priority === 'high' ? 'alertdialog' : 'dialog'}\n          aria-modal=\"false\"\n          aria-labelledby={\n            record.title ? titleId : record.description ? descriptionId : undefined\n          }\n          aria-describedby={record.title && record.description ? descriptionId : undefined}\n          aria-hidden={hiddenHighPriority ? 'true' : undefined}\n          data-type={record.type}\n          data-priority={record.priority}\n          data-transition-status={record.transitionStatus}\n          data-swiping={swipe ? '' : undefined}\n          data-swipe-direction={swipeDirection}\n          style={{\n            '--toast-swipe-movement-x': `${swipe?.x ?? 0}px`,\n            '--toast-swipe-movement-y': `${swipe?.y ?? 0}px`,\n            touchAction: this.touchAction,\n          }}\n          onPointerDown={(event: PointerEvent) => this.handlePointerDown(record, event)}\n          onPointerMove={(event: PointerEvent) => this.handlePointerMove(event)}\n          onPointerUp={(event: PointerEvent) => this.handlePointerUp(event)}\n          onPointerCancel={(event: PointerEvent) => this.handlePointerCancel(event)}\n          onPointerEnter={\n            anchored ? () => this.handlePointerEnter(record.id) : undefined\n          }\n          onPointerLeave={\n            anchored ? () => this.handlePointerLeave(record.id) : undefined\n          }\n        >\n          <div class=\"toast-content\">\n            <div class=\"toast-copy\">\n              {record.title && (\n                <ds-text\n                  class=\"toast-title\"\n                  as=\"div\"\n                  variant=\"text-title-small\"\n                  color=\"primary\"\n                  textId={titleId}\n                >\n                  {record.title}\n                </ds-text>\n              )}\n              {record.description && (\n                <ds-text\n                  class=\"toast-description\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  textId={descriptionId}\n                >\n                  {record.description}\n                </ds-text>\n              )}\n            </div>\n            {record.action && (\n              <ds-button-unfilled\n                class=\"toast-action\"\n                variant=\"label\"\n                size=\"md\"\n                type=\"button\"\n                label={record.action.label}\n                aria-label={record.action.ariaLabel}\n                hasBorder\n                focusTabIndex={focusTabIndex}\n                aria-hidden={!this.keyboardActive ? 'true' : undefined}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.handleAction(record, event)\n                }\n              />\n            )}\n          </div>\n          <ds-button-unfilled\n            class=\"toast-close\"\n            variant=\"icon\"\n            size=\"md\"\n            type=\"button\"\n            icon=\"Cross\"\n            aria-label={this.closeLabel}\n            hasBorder={false}\n            activeFill={false}\n            focusTabIndex={focusTabIndex}\n            aria-hidden={!this.keyboardActive ? 'true' : undefined}\n            onDsClick={() => this.manager.close(record.id, 'close-button')}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    void this.layoutVersion;\n    const globalLayouts = this.globalLayout();\n    const globalRecords = this.records.filter(record => !record.positioner);\n    const anchoredRecords = this.records.filter(record => !!record.positioner);\n    const highPriority = this.records.filter(\n      record =>\n        record.priority === 'high' &&\n        record.transitionStatus !== 'ending' &&\n        !globalLayouts.get(record.id)?.limited,\n    );\n\n    return (\n      <Host>\n        <section\n          class=\"toast-region\"\n          role=\"region\"\n          aria-label={this.label}\n          aria-live=\"polite\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n          tabIndex={-1}\n          onFocusin={this.handleFocusIn}\n          onFocusout={(event: FocusEvent) => this.handleFocusOut(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleRegionKeyDown(event)}\n        >\n          <div\n            class=\"toast-viewport\"\n            data-expanded={this.expanded ? '' : undefined}\n            onPointerEnter={() => this.handlePointerEnter(GLOBAL_STACK_HOVER)}\n            onPointerLeave={() => this.handlePointerLeave(GLOBAL_STACK_HOVER)}\n          >\n            {globalRecords.map(record =>\n              this.renderToast(\n                record,\n                globalLayouts.get(record.id) ?? { index: 0, offset: 0, limited: false },\n              )\n            )}\n          </div>\n          <div class=\"toast-anchored-layer\">\n            {anchoredRecords.map(record =>\n              this.renderToast(record, { index: 0, offset: 0, limited: false })\n            )}\n          </div>\n          <div class=\"toast-assertive-announcer ds-visually-hidden\">\n            {highPriority.map(record => (\n              <div role=\"alert\" aria-atomic=\"true\">\n                {[record.title, record.description].filter(Boolean).join('. ')}\n              </div>\n            ))}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/tooltip-data-viz.json

@@ -51,6 +51,8 @@
         "The owning chart mounts the callout when a local interaction starts and unmounts it when that interaction ends.",
         "Coordinate updates track within one mounted interaction session without restarting the show delay.",
         "Placement flips horizontally or vertically when the rendered callout approaches a viewport edge.",
+        "Placement is chosen as a quadrant rather than computed as coordinates: the component measures its own rendered rect and flips its side and align props, which CSS consumes. It therefore does not use the shared anchored-position utilities, which resolve an anchor element into x and y.",
+        "This separation is deliberate. The callout follows the pointer instead of an element, so it has no anchor rect to resolve; adopting the shared geometry would mean rewriting its CSS to consume coordinates for no behavioral gain.",
         "Reduced motion preserves the final visible state without an opacity transition."
       ],
       "responsiveBehavior": [
@@ -193,7 +195,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/tooltip.json

@@ -89,7 +89,7 @@
         },
         {
           "label": "Positioning unit coverage",
-          "path": "tests/tooltip-position.test.ts"
+          "path": "tests/anchored-position.test.ts"
         }
       ]
     },
@@ -277,7 +277,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -299,12 +299,7 @@
     },
     {
       "path": "src/wc/components/Tooltip/Tooltip.tsx",
-      "content": "import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\nimport { computeTooltipPosition } from './tooltip-position';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n  as: string;\n  variant: TextVariant;\n  emphasis: boolean;\n  color: string;\n  wrap: string;\n};\n\nfunction createDsText(opts: {\n  variant: TextVariant;\n  emphasis?: boolean;\n  color?: string;\n  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n  text: string;\n}): DsTextEl {\n  const el = document.createElement('ds-text') as DsTextEl;\n  el.as = 'span';\n  el.variant = opts.variant;\n  el.emphasis = opts.emphasis ?? false;\n  el.color = opts.color ?? 'inherit';\n  if (opts.wrap) el.wrap = opts.wrap;\n  el.textContent = opts.text;\n  return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n  el.style.flexShrink = '0';\n  el.style.minWidth = 'max-content';\n  el.style.maxWidth = 'none';\n  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n  el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n   */\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private positionObserver: ResizeObserver | null = null;\n  private anchorObserver: MutationObserver | null = null;\n  private positionFrame: number | null = null;\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private lastInteractionWasKeyboard = false;\n  private pointerEnterHandler = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.show();\n  };\n  private pointerLeaveHandler = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.hide();\n  };\n  private pointerDownHandler = (event: PointerEvent) => {\n    this.lastInteractionWasKeyboard = false;\n    if (event.pointerType === 'touch' && (this.isOpen || this.popupEl)) this.hideInstant();\n  };\n  private keyDownHandler = () => {\n    this.lastInteractionWasKeyboard = true;\n  };\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler = () => {\n    if (this.lastInteractionWasKeyboard || this.anchor?.matches(':focus-visible')) this.show();\n  };\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n  private scrollResizeHandler = () => {\n    if (this.positionFrame !== null) return;\n    this.positionFrame = requestAnimationFrame(() => {\n      this.positionFrame = null;\n      this.calculatePosition();\n    });\n  };\n  private escapeHandler = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape' || !this.isOpen) return;\n    event.preventDefault();\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n    this.anchorObserver = new MutationObserver(() => this.handleSlotChange());\n    this.anchorObserver.observe(this.el, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.anchorObserver?.disconnect();\n    this.anchorObserver = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.label?.trim()) {\n      if (this.isOpen || this.popupEl) this.hideInstant();\n      return;\n    }\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.schedulePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child || child === this.anchor) return;\n    this.anchor = child;\n    child.addEventListener('pointerenter', this.pointerEnterHandler);\n    child.addEventListener('pointerleave', this.pointerLeaveHandler);\n    child.addEventListener('pointerdown', this.pointerDownHandler);\n    child.addEventListener('keydown', this.keyDownHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.unlinkDescribedBy();\n    this.anchor.removeEventListener('pointerenter', this.pointerEnterHandler);\n    this.anchor.removeEventListener('pointerleave', this.pointerLeaveHandler);\n    this.anchor.removeEventListener('pointerdown', this.pointerDownHandler);\n    this.anchor.removeEventListener('keydown', this.keyDownHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private linkDescribedBy() {\n    if (!this.anchor || !this.popupEl) return;\n    const ids = new Set((this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean));\n    ids.add(this.tooltipId);\n    this.anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));\n  }\n\n  private unlinkDescribedBy() {\n    if (!this.anchor) return;\n    const ids = (this.anchor.getAttribute('aria-describedby') ?? '')\n      .split(/\\s+/)\n      .filter(id => id && id !== this.tooltipId);\n    if (ids.length) this.anchor.setAttribute('aria-describedby', ids.join(' '));\n    else this.anchor.removeAttribute('aria-describedby');\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const next = (slot?.assignedElements?.()[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (next === this.anchor) return;\n    if (this.isOpen || this.popupEl) this.hideInstant();\n    this.unbindAnchor();\n    this.bindAnchor();\n  };\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private setupOpenListeners() {\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n    document.addEventListener('keydown', this.escapeHandler);\n  }\n\n  private teardownOpenListeners() {\n    window.removeEventListener('scroll', this.scrollResizeHandler, true);\n    window.removeEventListener('resize', this.scrollResizeHandler);\n    document.removeEventListener('keydown', this.escapeHandler);\n    if (this.positionFrame !== null) {\n      cancelAnimationFrame(this.positionFrame);\n      this.positionFrame = null;\n    }\n  }\n\n  private destroyPopup() {\n    this.teardownOpenListeners();\n    this.positionObserver?.disconnect();\n    this.positionObserver = null;\n    this.unlinkDescribedBy();\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /**\n   * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n   */\n  private schedulePosition() {\n    if (!this.popupEl) return;\n\n    const reapplyLabelStyles = () => {\n      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n      if (label instanceof HTMLElement) styleTooltipLabel(label);\n    };\n\n    requestAnimationFrame(() => {\n      reapplyLabelStyles();\n      this.calculatePosition();\n      requestAnimationFrame(() => {\n        reapplyLabelStyles();\n        this.calculatePosition();\n      });\n    });\n\n    this.positionObserver?.disconnect();\n    this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n    this.positionObserver.observe(this.popupEl);\n    if (this.anchor) this.positionObserver.observe(this.anchor);\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n    // but no tip should appear.\n    if (!this.label?.trim()) return;\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      if (!this.label?.trim()) return;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    if (this.fadeOutMs === 0) {\n      if (activeTooltip === this) activeTooltip = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n      return;\n    }\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      if (activeTooltip === this) activeTooltip = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.setupOpenListeners();\n    this.linkDescribedBy();\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.schedulePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const inner = document.createElement('div');\n    inner.className = `tooltip-inner ${density} ${sc}`;\n\n    const appendShortcut = (position: 'start' | 'end') => {\n      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n      const group = document.createElement('span');\n      group.className = `key-hint-group ${sc}`;\n      group.setAttribute('aria-hidden', 'true');\n\n      for (const label of shortcutKeyLabels(this.shortcutKey)) {\n        const hint = document.createElement('span');\n        const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n        hint.className = `key-hint${wide} ${sc}`;\n        const text = document.createElement('span');\n        text.className = `key-hint__label ${sc}`;\n        text.textContent = label;\n        hint.appendChild(text);\n        group.appendChild(hint);\n      }\n      inner.appendChild(group);\n    };\n\n    appendShortcut('start');\n\n    // ds-text is the layout box (metric-box + 2px control label-inset).\n    // Inline styles required — see styleTooltipLabel.\n    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n    styleTooltipLabel(label);\n    inner.appendChild(label);\n\n    appendShortcut('end');\n\n    this.popupEl.replaceChildren(inner);\n  }\n\n  private calculatePosition() {\n    if (!this.anchor || !this.popupEl) return;\n    const tip = this.popupEl;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n    const { x, y, resolvedSide } = computeTooltipPosition({\n      anchorRect: a,\n      popupWidth: tw,\n      popupHeight: th,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: this.alignOffsetPx,\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    tip.dataset.side = resolvedSide;\n    tip.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot onSlotchange={this.handleSlotChange} />\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/Tooltip/tooltip-position.ts",
-      "content": "import type { TooltipAlign, TooltipSide } from './Tooltip';\n\nexport interface TooltipPositionInput {\n  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n  popupWidth: number;\n  popupHeight: number;\n  side: TooltipSide;\n  align: TooltipAlign;\n  sideOffsetPx: number;\n  alignOffsetPx: number;\n  viewportPadPx: number;\n  viewportWidth: number;\n  viewportHeight: number;\n}\n\nexport interface TooltipPosition {\n  x: number;\n  y: number;\n  resolvedSide: TooltipSide;\n}\n\nconst OPPOSITE_SIDE: Record<TooltipSide, TooltipSide> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\nfunction rawPosition(\n  input: TooltipPositionInput,\n  side: TooltipSide,\n): Pick<TooltipPosition, 'x' | 'y'> {\n  const {\n    anchorRect: anchor,\n    popupWidth,\n    popupHeight,\n    align,\n    sideOffsetPx,\n    alignOffsetPx,\n  } = input;\n\n  if (side === 'top' || side === 'bottom') {\n    return {\n      x:\n        align === 'start'\n          ? anchor.left + alignOffsetPx\n          : align === 'end'\n            ? anchor.right - popupWidth + alignOffsetPx\n            : anchor.left + anchor.width / 2 - popupWidth / 2 + alignOffsetPx,\n      y: side === 'top'\n        ? anchor.top - popupHeight - sideOffsetPx\n        : anchor.bottom + sideOffsetPx,\n    };\n  }\n\n  return {\n    x: side === 'left'\n      ? anchor.left - popupWidth - sideOffsetPx\n      : anchor.right + sideOffsetPx,\n    y:\n      align === 'start'\n        ? anchor.top + alignOffsetPx\n        : align === 'end'\n          ? anchor.bottom - popupHeight + alignOffsetPx\n          : anchor.top + anchor.height / 2 - popupHeight / 2 + alignOffsetPx,\n  };\n}\n\nfunction mainAxisOverflow(\n  input: TooltipPositionInput,\n  side: TooltipSide,\n  position: Pick<TooltipPosition, 'x' | 'y'>,\n): number {\n  const {\n    popupWidth,\n    popupHeight,\n    viewportPadPx,\n    viewportWidth,\n    viewportHeight,\n  } = input;\n\n  if (side === 'top' || side === 'bottom') {\n    return Math.max(viewportPadPx - position.y, 0) +\n      Math.max(position.y + popupHeight - (viewportHeight - viewportPadPx), 0);\n  }\n\n  return Math.max(viewportPadPx - position.x, 0) +\n    Math.max(position.x + popupWidth - (viewportWidth - viewportPadPx), 0);\n}\n\n/** Flip on the preferred axis when needed, then clamp within the viewport. */\nexport function computeTooltipPosition(input: TooltipPositionInput): TooltipPosition {\n  const preferred = rawPosition(input, input.side);\n  const oppositeSide = OPPOSITE_SIDE[input.side];\n  const opposite = rawPosition(input, oppositeSide);\n  const preferredOverflow = mainAxisOverflow(input, input.side, preferred);\n  const oppositeOverflow = mainAxisOverflow(input, oppositeSide, opposite);\n  const useOpposite = preferredOverflow > 0 && oppositeOverflow < preferredOverflow;\n  const resolvedSide = useOpposite ? oppositeSide : input.side;\n  const position = useOpposite ? opposite : preferred;\n  const maxX = Math.max(input.viewportPadPx, input.viewportWidth - input.popupWidth - input.viewportPadPx);\n  const maxY = Math.max(input.viewportPadPx, input.viewportHeight - input.popupHeight - input.viewportPadPx);\n\n  return {\n    x: Math.min(Math.max(position.x, input.viewportPadPx), maxX),\n    y: Math.min(Math.max(position.y, input.viewportPadPx), maxY),\n    resolvedSide,\n  };\n}\n",
+      "content": "import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n  as: string;\n  variant: TextVariant;\n  emphasis: boolean;\n  color: string;\n  wrap: string;\n};\n\nfunction createDsText(opts: {\n  variant: TextVariant;\n  emphasis?: boolean;\n  color?: string;\n  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n  text: string;\n}): DsTextEl {\n  const el = document.createElement('ds-text') as DsTextEl;\n  el.as = 'span';\n  el.variant = opts.variant;\n  el.emphasis = opts.emphasis ?? false;\n  el.color = opts.color ?? 'inherit';\n  if (opts.wrap) el.wrap = opts.wrap;\n  el.textContent = opts.text;\n  return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n  el.style.flexShrink = '0';\n  el.style.minWidth = 'max-content';\n  el.style.maxWidth = 'none';\n  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n  el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n   */\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private anchorObserver: MutationObserver | null = null;\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.anchor,\n    getPopup: () => this.popupEl,\n    measure: (anchor, tip) => ({\n      anchorRect: anchor.getBoundingClientRect(),\n      // Fall back to token metrics until `ds-text` upgrades and reports a width.\n      popupWidth: tip.offsetWidth || this.tooltipFallbackWidthPx,\n      popupHeight: tip.offsetHeight || this.tooltipFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: this.alignOffsetPx,\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    }),\n    apply: ({ x, y, resolvedSide }) => {\n      if (!this.popupEl) return;\n      this.popupEl.dataset.side = resolvedSide;\n      this.popupEl.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;\n    },\n    liveUpdate: 'frame',\n    observeResize: true,\n  });\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private lastInteractionWasKeyboard = false;\n  private pointerEnterHandler = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.show();\n  };\n  private pointerLeaveHandler = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.hide();\n  };\n  private pointerDownHandler = (event: PointerEvent) => {\n    this.lastInteractionWasKeyboard = false;\n    if (event.pointerType === 'touch' && (this.isOpen || this.popupEl)) this.hideInstant();\n  };\n  private keyDownHandler = () => {\n    this.lastInteractionWasKeyboard = true;\n  };\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler = () => {\n    if (this.lastInteractionWasKeyboard || this.anchor?.matches(':focus-visible')) this.show();\n  };\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n  private escapeHandler = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape' || !this.isOpen) return;\n    event.preventDefault();\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n    this.anchorObserver = new MutationObserver(() => this.handleSlotChange());\n    this.anchorObserver.observe(this.el, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.anchorObserver?.disconnect();\n    this.anchorObserver = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.label?.trim()) {\n      if (this.isOpen || this.popupEl) this.hideInstant();\n      return;\n    }\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.schedulePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child || child === this.anchor) return;\n    this.anchor = child;\n    child.addEventListener('pointerenter', this.pointerEnterHandler);\n    child.addEventListener('pointerleave', this.pointerLeaveHandler);\n    child.addEventListener('pointerdown', this.pointerDownHandler);\n    child.addEventListener('keydown', this.keyDownHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.unlinkDescribedBy();\n    this.anchor.removeEventListener('pointerenter', this.pointerEnterHandler);\n    this.anchor.removeEventListener('pointerleave', this.pointerLeaveHandler);\n    this.anchor.removeEventListener('pointerdown', this.pointerDownHandler);\n    this.anchor.removeEventListener('keydown', this.keyDownHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private linkDescribedBy() {\n    if (!this.anchor || !this.popupEl) return;\n    const ids = new Set((this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean));\n    ids.add(this.tooltipId);\n    this.anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));\n  }\n\n  private unlinkDescribedBy() {\n    if (!this.anchor) return;\n    const ids = (this.anchor.getAttribute('aria-describedby') ?? '')\n      .split(/\\s+/)\n      .filter(id => id && id !== this.tooltipId);\n    if (ids.length) this.anchor.setAttribute('aria-describedby', ids.join(' '));\n    else this.anchor.removeAttribute('aria-describedby');\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const next = (slot?.assignedElements?.()[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (next === this.anchor) return;\n    if (this.isOpen || this.popupEl) this.hideInstant();\n    this.unbindAnchor();\n    this.bindAnchor();\n  };\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private setupOpenListeners() {\n    // Binds scroll/resize + the resize observer; placement itself is scheduled\n    // by schedulePosition() so the label restyle stays interleaved.\n    this.position.observe();\n    document.addEventListener('keydown', this.escapeHandler);\n  }\n\n  private teardownOpenListeners() {\n    this.position.unobserve();\n    document.removeEventListener('keydown', this.escapeHandler);\n  }\n\n  private destroyPopup() {\n    this.teardownOpenListeners();\n    this.unlinkDescribedBy();\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /**\n   * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n   */\n  private schedulePosition() {\n    if (!this.popupEl) return;\n\n    const reapplyLabelStyles = () => {\n      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n      if (label instanceof HTMLElement) styleTooltipLabel(label);\n    };\n\n    requestAnimationFrame(() => {\n      reapplyLabelStyles();\n      this.position.update();\n      requestAnimationFrame(() => {\n        reapplyLabelStyles();\n        this.position.update();\n      });\n    });\n\n    // The popup remounts on every show, so re-target the observer bound in start().\n    this.position.observeResizeTargets();\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n    // but no tip should appear.\n    if (!this.label?.trim()) return;\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      if (!this.label?.trim()) return;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    if (this.fadeOutMs === 0) {\n      if (activeTooltip === this) activeTooltip = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n      return;\n    }\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      if (activeTooltip === this) activeTooltip = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.setupOpenListeners();\n    this.linkDescribedBy();\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.schedulePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const inner = document.createElement('div');\n    inner.className = `tooltip-inner ${density} ${sc}`;\n\n    const appendShortcut = (position: 'start' | 'end') => {\n      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n      const group = document.createElement('span');\n      group.className = `key-hint-group ${sc}`;\n      group.setAttribute('aria-hidden', 'true');\n\n      for (const label of shortcutKeyLabels(this.shortcutKey)) {\n        const hint = document.createElement('span');\n        const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n        hint.className = `key-hint${wide} ${sc}`;\n        const text = document.createElement('span');\n        text.className = `key-hint__label ${sc}`;\n        text.textContent = label;\n        hint.appendChild(text);\n        group.appendChild(hint);\n      }\n      inner.appendChild(group);\n    };\n\n    appendShortcut('start');\n\n    // ds-text is the layout box (metric-box + 2px control label-inset).\n    // Inline styles required — see styleTooltipLabel.\n    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n    styleTooltipLabel(label);\n    inner.appendChild(label);\n\n    appendShortcut('end');\n\n    this.popupEl.replaceChildren(inner);\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot onSlotchange={this.handleSlotChange} />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/typing-indicator.json

@@ -98,7 +98,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/react/components.d.ts

@@ -18,6 +18,7 @@ export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
+export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
 export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";

package/dist/react/components.js

@@ -19,6 +19,7 @@ export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
+export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
 export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";

package/dist/react/ds-card-overview.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsCardOverviewCustomEvent, type OverviewMetric } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardOverview as DsCardOverviewElement } from "@ds-mo/ui/dist/components/ds-card-overview.js";
+export type DsCardOverviewEvents = {
+    onDsMetricSelect: EventName<DsCardOverviewCustomEvent<OverviewMetric>>;
+};
+export declare const DsCardOverview: StencilReactComponent<DsCardOverviewElement, DsCardOverviewEvents, Components.DsCardOverview>;

package/dist/react/ds-card-overview.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsCardOverview as DsCardOverviewElement, defineCustomElement as defineDsCardOverview } from "@ds-mo/ui/dist/components/ds-card-overview.js";
+export const DsCardOverview = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-overview',
+    elementClass: DsCardOverviewElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsMetricSelect: 'dsMetricSelect' },
+    defineCustomElement: defineDsCardOverview
+});

package/dist/styles/control-elevation.css

@@ -3,16 +3,26 @@
  * the inset highlight in a combined `--effect-elevation-*` box shadow.
  *
  * Import `@ds-mo/ui/control-elevation.css`, apply `.ds-control-elevation`, and
- * select one level modifier. The owner still supplies layout, radius, surface,
- * and any backdrop blur. Keep wrapped controls' optional resting borders off.
+ * select one level modifier. Add `--press-scale` when the wrapper contains an
+ * approved press-scaling button so its surface and elevation move as one unit.
+ * The owner still supplies layout, radius, surface, and any backdrop blur.
+ * Keep wrapped controls' optional resting borders off.
+ *
+ * Both `:host(.ds-control-elevation)` and `.ds-control-elevation` are listed so
+ * Stencil scoped components work whether the class sits on the host (a component
+ * that is itself the elevated surface) or on an inner wrapper. Scoped builds
+ * suffix host and child classes differently, so a plain class alone silently
+ * misses the host.
  */
 
+:host(.ds-control-elevation),
 .ds-control-elevation {
   position: relative;
   overflow: visible;
   box-shadow: var(--ds-control-elevation-shadow, none);
 }
 
+:host(.ds-control-elevation)::after,
 .ds-control-elevation::after {
   content: '';
   position: absolute;
@@ -24,17 +34,43 @@
   pointer-events: none;
 }
 
+:host(.ds-control-elevation--sm),
 .ds-control-elevation--sm {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-sm);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-sm);
 }
 
+:host(.ds-control-elevation--md),
 .ds-control-elevation--md {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-md);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-md);
 }
 
+:host(.ds-control-elevation--floating),
 .ds-control-elevation--floating {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);
 }
+
+/*
+ * Transfer an approved button's physical press feedback to the elevated
+ * wrapper. The inherited override keeps the nested native button at rest so
+ * the wrapper and control do not compound their scale.
+ */
+.ds-control-elevation--press-scale {
+  --ds-control-press-active-scale: var(--dimension-scale-default);
+
+  transition: scale var(--effect-motion-short-2);
+}
+
+.ds-control-elevation--press-scale[data-ds-press-active] {
+  scale: var(--dimension-scale-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-control-elevation--press-scale,
+  .ds-control-elevation--press-scale[data-ds-press-active] {
+    scale: none;
+    transition: none;
+  }
+}

package/dist/types/components/ButtonFilled/ButtonFilled.d.ts

@@ -5,8 +5,9 @@ export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warn
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 export type ButtonFilledBackground = ChoiceBackground;
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
-export type ButtonFilledSize = 'md' | 'sm' | 'xs';
+export type ButtonFilledSize = 'lg' | 'md' | 'sm' | 'xs';
 export type ButtonFilledWidth = ControlWidth;
+export type ButtonFilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export declare class ButtonFilled {
     el: HTMLElement;
     /**
@@ -38,6 +39,11 @@ export declare class ButtonFilled {
     background: ButtonFilledBackground | undefined;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
+    /**
+     * Scale down during a physical pointer press.
+     * Disable when an owning composite requires fixed child or background geometry.
+     */
+    pressScale: boolean;
     /** Disables interaction. */
     isInactive: boolean;
     /** Shows an inline loader and prevents interaction without applying inactive opacity. */
@@ -46,12 +52,38 @@ export declare class ButtonFilled {
     type: 'button' | 'submit' | 'reset';
     /** Accessible name override. Required for icon-only buttons. */
     ariaLabel: string | null;
+    /** ID of the popup this button controls. */
+    controls: string | undefined;
+    /**
+     * Controlled open state of the popup this button triggers. Holds the pressed
+     * wash for the popup's rendered lifecycle. ButtonFilled has no selected state,
+     * so an open popup never promotes to an active treatment.
+     */
+    expanded: boolean | undefined;
+    /** Popup type exposed to assistive technology. */
+    haspopup: ButtonFilledPopup | undefined;
+    /** Pressed semantics for a toggle command that reports state elsewhere. */
+    pressed: boolean | undefined;
+    /**
+     * This action *has* a menu: implies `aria-haspopup="menu"` and adds the trailing
+     * chevron that carries the affordance.
+     *
+     * Only `label` and `icon-label` are supported. A filled button is never the
+     * overflow / more-options control — that role belongs to ButtonUnfilled with an
+     * `Ellipses` glyph, which conveys the menu without a chevron.
+     *
+     * Use `haspopup` directly for non-menu popups.
+     */
+    hasMenu: boolean;
     dsClick: EventEmitter<MouseEvent>;
     private buttonEl;
     setFocus(): Promise<void>;
     private handleClick;
     private get showIcon();
     private get showLabel();
+    /** Icon-only triggers rely on their own glyph, so the chevron is label-bound. */
+    private get showChevron();
+    private get resolvedHaspopup();
     private get accessibleName();
     render(): any;
 }

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -32,6 +32,11 @@ export declare class ButtonUnfilled {
     hasBorder: boolean;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
+    /**
+     * Scale down during a physical pointer press.
+     * Disable when an owning composite requires fixed child or background geometry.
+     */
+    pressScale: boolean;
     /** Show a notification dot at the top-right of the icon zone (icon variant only). */
     dot: boolean;
     /** Disables interaction. */
@@ -48,6 +53,18 @@ export declare class ButtonUnfilled {
     expanded: boolean | undefined;
     haspopup: ButtonUnfilledPopup | undefined;
     pressed: boolean | undefined;
+    /**
+     * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers
+     * both menu-button shapes:
+     *
+     * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries
+     *   the affordance.
+     * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.
+     *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.
+     *
+     * Use `haspopup` directly for non-menu popups.
+     */
+    hasMenu: boolean;
     /**
      * Native `tabindex` for roving keyboard groups in shell chrome.
      * Omit for the default button tab stop (`0`).
@@ -61,6 +78,9 @@ export declare class ButtonUnfilled {
     private get showIcon();
     private get showLabel();
     private get showDot();
+    /** Icon-only triggers rely on their own glyph, so the chevron is label-bound. */
+    private get showChevron();
+    private get resolvedHaspopup();
     /** An expanded popup trigger is visually active even when selection is controlled separately. */
     private get visuallyActive();
     /** Knock-out ring: selected fill → active wash; otherwise surface token. */