@ds-mo/ui 14.19.0 → 14.19.1

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

@@ -382,12 +382,12 @@
   "files": [
     {
       "path": "src/wc/components/Tag/Tag.css",
-      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* A one-character rounded Tag resolves to a circle at every density. */\n:host {\n  min-inline-size: var(--ds-control-height);\n}\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "content": "@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/* A one-character rounded Tag resolves to a circle at every density. */\n:host {\n  min-inline-size: var(--ds-control-height);\n}\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong) {\n  background-color: var(--color-background-strong-neutral);\n  color: var(--color-foreground-medium-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-strong) {\n  background-color: var(--color-background-strong-brand);\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-strong) {\n  background-color: var(--color-background-strong-ai);\n  color: var(--color-foreground-medium-ai);\n}\n:host(.tag--intent-negative.tag--contrast-strong) {\n  background-color: var(--color-background-strong-negative);\n  color: var(--color-foreground-medium-negative);\n}\n:host(.tag--intent-warning.tag--contrast-strong) {\n  background-color: var(--color-background-strong-warning);\n  color: var(--color-foreground-medium-warning);\n}\n:host(.tag--intent-caution.tag--contrast-strong) {\n  background-color: var(--color-background-strong-caution);\n  color: var(--color-foreground-medium-caution);\n}\n:host(.tag--intent-positive.tag--contrast-strong) {\n  background-color: var(--color-background-strong-positive);\n  color: var(--color-foreground-medium-positive);\n}\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) {\n  background-color: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-brand.tag--contrast-bold) {\n  background-color: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-bold) {\n  background-color: var(--color-background-bold-ai);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-negative.tag--contrast-bold) {\n  background-color: var(--color-background-bold-negative);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-warning.tag--contrast-bold) {\n  background-color: var(--color-background-bold-warning);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-caution.tag--contrast-bold) {\n  background-color: var(--color-background-bold-caution);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n:host(.tag--intent-positive.tag--contrast-bold) {\n  background-color: var(--color-background-bold-positive);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) {\n  background-color: var(--color-background-medium-neutral);\n  color: var(--color-foreground-strong-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-medium) {\n  background-color: var(--color-background-medium-brand);\n  color: var(--color-foreground-on-medium-background-primary);\n}\n:host(.tag--intent-ai.tag--contrast-medium) {\n  background-color: var(--color-background-medium-ai);\n  color: var(--color-foreground-strong-ai);\n}\n:host(.tag--intent-negative.tag--contrast-medium) {\n  background-color: var(--color-background-medium-negative);\n  color: var(--color-foreground-strong-negative);\n}\n:host(.tag--intent-warning.tag--contrast-medium) {\n  background-color: var(--color-background-medium-warning);\n  color: var(--color-foreground-strong-warning);\n}\n:host(.tag--intent-caution.tag--contrast-medium) {\n  background-color: var(--color-background-medium-caution);\n  color: var(--color-foreground-strong-caution);\n}\n:host(.tag--intent-positive.tag--contrast-medium) {\n  background-color: var(--color-background-medium-positive);\n  color: var(--color-foreground-strong-positive);\n}\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n:host(.tag--intent-brand.tag--contrast-faint) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n:host(.tag--intent-ai.tag--contrast-faint) {\n  background-color: var(--color-background-faint-ai);\n  color: var(--color-foreground-bold-ai);\n}\n:host(.tag--intent-negative.tag--contrast-faint) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n:host(.tag--intent-warning.tag--contrast-faint) {\n  background-color: var(--color-background-faint-warning);\n  color: var(--color-foreground-bold-warning);\n}\n:host(.tag--intent-caution.tag--contrast-faint) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n:host(.tag--intent-positive.tag--contrast-faint) {\n  background-color: var(--color-background-faint-positive);\n  color: var(--color-foreground-bold-positive);\n}\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  padding: 0;\n  gap: 0;\n}\n\n.tag__button {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  border-radius: inherit;\n  color: inherit;\n  cursor: default;\n}\n\n.tag__button:disabled {\n  cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Tag/Tag.tsx",
-      "content": "import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT, type ControlInsetDepth } from '../../utils';\n\nexport type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize     = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  /** Canonical icon name rendered before the visible label. */\n  @Prop() icon: string = '';\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  /** Use the reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n  @Prop() interactive: boolean = false;\n  /** Controlled open state for the menu triggered by an interactive Tag. */\n  @Prop() expanded: boolean = false;\n  /** ID of the menu controlled by an interactive Tag. */\n  @Prop() ariaControls: string | undefined;\n  /** Disable an interactive Tag and apply the shared inactive treatment. */\n  @Prop() isInactive: boolean = false;\n\n  /** Fired when the interactive Tag button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.interactive || this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const doubleInset = this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n    const hostClass = {\n      'tag': true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !doubleInset,\n      'ds-control--inset-double': doubleInset,\n      'tag--rounded': this.rounded,\n      'tag--interactive': this.interactive,\n      'ds-control-inactive': this.interactive && this.isInactive,\n    };\n    const content = [\n      this.icon && (\n        <ds-icon\n          class=\"tag__prefix-icon\"\n          name={this.icon}\n          size={iconSize}\n          color=\"inherit\"\n        ></ds-icon>\n      ),\n      <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n        {this.label}\n      </ds-text>,\n    ];\n\n    if (!this.interactive) {\n      return <Host class={hostClass} style={maxWidthStyle}>{content}</Host>;\n    }\n\n    return (\n      <Host class={hostClass} style={maxWidthStyle}>\n        <button\n          type=\"button\"\n          class={{\n            'tag__button': true,\n            'tag__button--expanded': this.expanded,\n            'ds-interaction-fill': true,\n            'ds-focus-ring-inset': true,\n          }}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-controls={this.ariaControls}\n          disabled={this.isInactive || undefined}\n          onClick={this.handleClick}\n        >\n          {content}\n          <ds-icon\n            class=\"tag__suffix-icon\"\n            name=\"ChevronUpDown\"\n            size={iconSize}\n            color=\"inherit\"\n          ></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT, type ControlInsetDepth } from '../../utils';\n\nexport type TagIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  /** Canonical icon name rendered before the visible label. */\n  @Prop() icon: string = '';\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  /** Use the reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n  @Prop() interactive: boolean = false;\n  /** Controlled open state for the menu triggered by an interactive Tag. */\n  @Prop() expanded: boolean = false;\n  /** ID of the menu controlled by an interactive Tag. */\n  @Prop() ariaControls: string | undefined;\n  /** Disable an interactive Tag and apply the shared inactive treatment. */\n  @Prop() isInactive: boolean = false;\n\n  /** Fired when the interactive Tag button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.interactive || this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const doubleInset = this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n\n    const maxWidthStyle =\n      this.maxWidth != null\n        ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n        : undefined;\n    const hostClass = {\n      tag: true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !doubleInset,\n      'ds-control--inset-double': doubleInset,\n      'tag--rounded': this.rounded,\n      'tag--interactive': this.interactive,\n      'ds-control-inactive': this.interactive && this.isInactive,\n    };\n    const content = [\n      this.icon && (\n        <ds-icon\n          class=\"tag__prefix-icon\"\n          name={this.icon}\n          size={iconSize}\n          color=\"inherit\"\n        ></ds-icon>\n      ),\n      <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n        {this.label}\n      </ds-text>,\n    ];\n\n    if (!this.interactive) {\n      return (\n        <Host class={hostClass} style={maxWidthStyle}>\n          {content}\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={hostClass} style={maxWidthStyle}>\n        <button\n          type=\"button\"\n          class={{\n            tag__button: true,\n            'tag__button--expanded': this.expanded,\n            'ds-interaction-fill': true,\n            'ds-focus-ring-inset': true,\n          }}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-controls={this.ariaControls}\n          disabled={this.isInactive || undefined}\n          onClick={this.handleClick}\n        >\n          {content}\n          <ds-icon\n            class=\"tag__suffix-icon\"\n            name=\"ChevronUpDown\"\n            size={iconSize}\n            color=\"inherit\"\n          ></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -354,22 +354,22 @@
   "files": [
     {
       "path": "src/wc/components/Text/Text.css",
-      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family-ui);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  text-underline-offset: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n/*\n * The inherit state intentionally has no declaration. `color` inherits\n * naturally, while omitting a host rule lets an owning component apply a\n * semantic token directly to ds-text without depending on stylesheet order.\n */\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline),\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration-color: var(--ds-text-decoration-color, var(--color-foreground-tertiary));\n  text-decoration-thickness: var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));\n  text-underline-offset: var(--ds-text-decoration-offset, var(--dimension-space-025));\n}\n\n:host(.ds-text--decoration-underline) {\n  text-decoration-line: underline;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
+      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family-ui);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  text-underline-offset: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element {\n  -webkit-line-clamp: 2;\n}\n:host(.ds-text--truncate-3) .ds-text__element {\n  -webkit-line-clamp: 3;\n}\n:host(.ds-text--truncate-4) .ds-text__element {\n  -webkit-line-clamp: 4;\n}\n:host(.ds-text--truncate-5) .ds-text__element {\n  -webkit-line-clamp: 5;\n}\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element {\n  text-wrap: balance;\n}\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element {\n  text-wrap: pretty;\n}\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) {\n  color: var(--color-foreground-primary);\n}\n:host(.ds-text--color-secondary) {\n  color: var(--color-foreground-secondary);\n}\n:host(.ds-text--color-tertiary) {\n  color: var(--color-foreground-tertiary);\n}\n:host(.ds-text--color-quaternary) {\n  color: var(--color-foreground-quaternary);\n}\n:host(.ds-text--color-brand) {\n  color: var(--color-foreground-bold-brand);\n}\n:host(.ds-text--color-negative) {\n  color: var(--color-foreground-bold-negative);\n}\n:host(.ds-text--color-positive) {\n  color: var(--color-foreground-bold-positive);\n}\n:host(.ds-text--color-warning) {\n  color: var(--color-foreground-bold-warning);\n}\n:host(.ds-text--color-caution) {\n  color: var(--color-foreground-bold-caution);\n}\n:host(.ds-text--color-ai) {\n  color: var(--color-foreground-bold-ai);\n}\n:host(.ds-text--color-on-strong) {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n:host(.ds-text--color-on-bold) {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n/*\n * The inherit state intentionally has no declaration. `color` inherits\n * naturally, while omitting a host rule lets an owning component apply a\n * semantic token directly to ds-text without depending on stylesheet order.\n */\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline),\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration-color: var(--ds-text-decoration-color, var(--color-foreground-tertiary));\n  text-decoration-thickness: var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));\n  text-underline-offset: var(--ds-text-decoration-offset, var(--dimension-space-025));\n}\n\n:host(.ds-text--decoration-underline) {\n  text-decoration-line: underline;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) {\n  font-style: italic;\n}\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) {\n  text-align: left;\n}\n:host(.ds-text--align-center) {\n  text-align: center;\n}\n:host(.ds-text--align-right) {\n  text-align: right;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Text/Text.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n  TextAlign,\n  TextColor,\n  TextDecoration,\n  TextElement,\n  TextFontFeature,\n  TextVariant,\n  LineTruncation,\n  TextWrap,\n} from './text-types';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  /**\n   * Heavier weight + tighter letter-spacing for the variant.\n   * `false` (default): one step below emphasis (display semibold, title/body\n   * medium, caption medium).\n   * `true`: display bold, title/caption semibold, body medium.\n   */\n  @Prop() emphasis: boolean = false;\n  /**\n   * Semantic foreground color token or CSS variable. `tertiary` and the\n   * still-fainter `quaternary` are restricted to genuinely inactive/disabled\n   * UI content or purely decorative content; prefer the owning control's\n   * inactive state whenever one exists.\n   */\n  @Prop() color: TextColor = 'inherit';\n  /** Link underline or dotted hidden-interaction affordance; does not add semantics. */\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  /** Animate the visible glyphs with the shared loading shimmer treatment. */\n  @Prop() shimmer: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() fontFeature: TextFontFeature = 'normal';\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n  /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n  @Prop() textId: string | undefined;\n\n  render() {\n    // Polymorphic element: TSX treats a variable tag as a component, so a\n    // dynamic intrinsic element name must be cast to `any` to render.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n    const truncationLines = Number(this.lineTruncation);\n\n    const cls: Record<string, boolean> = {\n      'ds-text': true,\n      [textDisplayClass(this.as)]: true,\n      [textVariantClass(this.variant)]: true,\n      'ds-text--emphasis': this.emphasis,\n      'ds-text--regular': !this.emphasis,\n      'ds-text--nowrap': this.wrap === 'nowrap',\n      'ds-text--balance': this.wrap === 'balance',\n      'ds-text--pretty': this.wrap === 'pretty',\n      'ds-text--truncate-1': truncationLines === 1 && this.wrap !== 'nowrap',\n      'ds-text--truncate-2': truncationLines === 2 && this.wrap !== 'nowrap',\n      'ds-text--truncate-3': truncationLines === 3 && this.wrap !== 'nowrap',\n      'ds-text--truncate-4': truncationLines === 4 && this.wrap !== 'nowrap',\n      'ds-text--truncate-5': truncationLines === 5 && this.wrap !== 'nowrap',\n      'ds-text--color-primary':   this.color === 'primary',\n      'ds-text--color-secondary': this.color === 'secondary',\n      'ds-text--color-tertiary':  this.color === 'tertiary',\n      'ds-text--color-quaternary': this.color === 'quaternary',\n      'ds-text--color-brand':     this.color === 'brand',\n      'ds-text--color-negative':  this.color === 'negative',\n      'ds-text--color-positive':  this.color === 'positive',\n      'ds-text--color-warning':   this.color === 'warning',\n      'ds-text--color-caution':   this.color === 'caution',\n      'ds-text--color-ai':        this.color === 'ai',\n      'ds-text--color-on-strong': this.color === 'on-strong',\n      'ds-text--color-on-bold':   this.color === 'on-bold',\n      'ds-text--color-inherit':   this.color === 'inherit',\n      'ds-text--decoration-underline':        this.decoration === 'underline',\n      'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'ds-text--italic': this.italic,\n      'ds-text--align-left':   this.align === 'left',\n      'ds-text--align-center': this.align === 'center',\n      'ds-text--align-right':  this.align === 'right',\n      'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n    };\n\n    const style = this.color && isCustomColor(this.color)\n      ? { color: this.color as string }\n      : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n    if (this.textId) extraProps['id'] = this.textId;\n\n    return (\n      <Host class={cls} style={style}>\n        <Tag\n          class={{\n            'ds-text__element': true,\n            'ds-shimmer-text': this.shimmer,\n          }}\n          {...extraProps}\n        >\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n  TextAlign,\n  TextColor,\n  TextDecoration,\n  TextElement,\n  TextFontFeature,\n  TextVariant,\n  LineTruncation,\n  TextWrap,\n} from './text-types';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  /**\n   * Heavier weight + tighter letter-spacing for the variant.\n   * `false` (default): one step below emphasis (display semibold, title/body\n   * medium, caption medium).\n   * `true`: display bold, title/caption semibold, body medium.\n   */\n  @Prop() emphasis: boolean = false;\n  /**\n   * Semantic foreground color token or CSS variable. `tertiary` and the\n   * still-fainter `quaternary` are restricted to genuinely inactive/disabled\n   * UI content or purely decorative content; prefer the owning control's\n   * inactive state whenever one exists.\n   */\n  @Prop() color: TextColor = 'inherit';\n  /** Link underline or dotted hidden-interaction affordance; does not add semantics. */\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  /** Animate the visible glyphs with the shared loading shimmer treatment. */\n  @Prop() shimmer: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() fontFeature: TextFontFeature = 'normal';\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n  /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n  @Prop() textId: string | undefined;\n\n  render() {\n    // Polymorphic element: TSX treats a variable tag as a component, so a\n    // dynamic intrinsic element name must be cast to `any` to render.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n    const truncationLines = Number(this.lineTruncation);\n\n    const cls: Record<string, boolean> = {\n      'ds-text': true,\n      [textDisplayClass(this.as)]: true,\n      [textVariantClass(this.variant)]: true,\n      'ds-text--emphasis': this.emphasis,\n      'ds-text--regular': !this.emphasis,\n      'ds-text--nowrap': this.wrap === 'nowrap',\n      'ds-text--balance': this.wrap === 'balance',\n      'ds-text--pretty': this.wrap === 'pretty',\n      'ds-text--truncate-1': truncationLines === 1 && this.wrap !== 'nowrap',\n      'ds-text--truncate-2': truncationLines === 2 && this.wrap !== 'nowrap',\n      'ds-text--truncate-3': truncationLines === 3 && this.wrap !== 'nowrap',\n      'ds-text--truncate-4': truncationLines === 4 && this.wrap !== 'nowrap',\n      'ds-text--truncate-5': truncationLines === 5 && this.wrap !== 'nowrap',\n      'ds-text--color-primary': this.color === 'primary',\n      'ds-text--color-secondary': this.color === 'secondary',\n      'ds-text--color-tertiary': this.color === 'tertiary',\n      'ds-text--color-quaternary': this.color === 'quaternary',\n      'ds-text--color-brand': this.color === 'brand',\n      'ds-text--color-negative': this.color === 'negative',\n      'ds-text--color-positive': this.color === 'positive',\n      'ds-text--color-warning': this.color === 'warning',\n      'ds-text--color-caution': this.color === 'caution',\n      'ds-text--color-ai': this.color === 'ai',\n      'ds-text--color-on-strong': this.color === 'on-strong',\n      'ds-text--color-on-bold': this.color === 'on-bold',\n      'ds-text--color-inherit': this.color === 'inherit',\n      'ds-text--decoration-underline': this.decoration === 'underline',\n      'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'ds-text--italic': this.italic,\n      'ds-text--align-left': this.align === 'left',\n      'ds-text--align-center': this.align === 'center',\n      'ds-text--align-right': this.align === 'right',\n      'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n    };\n\n    const style =\n      this.color && isCustomColor(this.color) ? { color: this.color as string } : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n    if (this.textId) extraProps['id'] = this.textId;\n\n    return (\n      <Host class={cls} style={style}>\n        <Tag\n          class={{\n            'ds-text__element': true,\n            'ds-shimmer-text': this.shimmer,\n          }}\n          {...extraProps}\n        >\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Text/text-types.ts",
-      "content": "export type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-medium'\n  | 'text-body-small'\n  | 'text-caption';\n\nexport type TextColorToken =\n  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n  | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport type TextFontFeature = 'normal' | 'tabular-nums';\n",
+      "content": "export type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-medium'\n  | 'text-body-small'\n  | 'text-caption';\n\nexport type TextColorToken =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'warning'\n  | 'caution'\n  | 'ai'\n  | 'on-strong'\n  | 'on-bold'\n  | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport type TextFontFeature = 'normal' | 'tabular-nums';\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Text/text-utils.ts",
-      "content": "import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n  return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n  return element === 'span' || element === 'label'\n    ? 'ds-text--inline-box'\n    : 'ds-text--block-box';\n}\n",
+      "content": "import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n  return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n  return element === 'span' || element === 'label' ? 'ds-text--inline-box' : 'ds-text--block-box';\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -330,12 +330,12 @@
   "files": [
     {
       "path": "src/wc/components/Toast/Toast.css",
-      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) +\n      var(--dimension-stroke-width-012) +\n      var(--dimension-space-100) +\n      var(--dimension-size-500) +\n      max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(\n    calc(-1 * var(--toast-index) * var(--dimension-space-100))\n  );\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(\n    100% - 2 * var(--toast-index) * var(--dimension-space-100)\n  );\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(\n    var(--dimension-card-width-sm),\n    calc(100vw - 2 * var(--dimension-space-200))\n  );\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(\n    var(--toast-swipe-movement-x),\n    var(--toast-swipe-movement-y)\n  );\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(\n    var(--dimension-space-200) + var(--dimension-space-025)\n  );\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) + var(--dimension-stroke-width-012) + var(--dimension-space-100) +\n        var(--dimension-size-500) + max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(calc(-1 * var(--toast-index) * var(--dimension-space-100)));\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(100% - 2 * var(--toast-index) * var(--dimension-space-100));\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(var(--toast-swipe-movement-x), var(--toast-swipe-movement-y));\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(var(--dimension-space-200) + var(--dimension-space-025));\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "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 { computeAnchoredPosition } from '../../utils/anchored-position';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\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        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\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';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\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>(this.el.querySelectorAll<HTMLElement>('.toast-positioner'));\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(record => record.transitionStatus === 'ending');\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 (record.transitionStatus === 'starting' && !this.activationFrames.has(record.id)) {\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 (this.closeWatchdogs.has(record.id) || this.closeFrames.has(record.id)) 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\n        ? 'right'\n        : 'left'\n      : dy >= 0\n        ? 'down'\n        : '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 = !active.cancelled && !!swipe?.direction && 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 = 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(record.positioner.sideOffset, TOKEN_DEFAULTS.space050);\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        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\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')).find(\n        element => element.dataset['toastId'] === id\n      ) ?? 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={record.title ? titleId : record.description ? descriptionId : undefined}\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={anchored ? () => this.handlePointerEnter(record.id) : undefined}\n          onPointerLeave={anchored ? () => this.handlePointerLeave(record.id) : undefined}\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>) => this.handleAction(record, event)}\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-chart.json

@@ -248,12 +248,12 @@
   "files": [
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div class=\"tooltip-chart__item ds-control-frame ds-control--md\" key={`${item.label}-${index}`}>\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide =\n      rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign =\n      rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX =\n      this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY =\n      this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{\n          left: `${this.x}px`,\n          top: `${this.y}px`,\n          transform: `translate(${translateX}, ${translateY})`,\n        }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div\n              class=\"tooltip-chart__item ds-control-frame ds-control--md\"\n              key={`${item.label}-${index}`}\n            >\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -378,12 +378,12 @@
   "files": [
     {
       "path": "src/wc/components/Tooltip/Tooltip.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n@import '../../utils/forced-colors.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.tooltip-popup--wrap {\n  white-space: normal;\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n.tooltip-popup--wrap .tooltip-inner {\n  height: auto;\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n  padding-block: var(--dimension-space-050);\n  align-items: flex-start;\n}\n\n.tooltip-popup--wrap .tooltip-inner > ds-text {\n  flex: 1 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  white-space: normal;\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip-popup,\n  .tooltip-popup--instant {\n    animation: none;\n    opacity: 1;\n  }\n\n  .tooltip-popup--closing {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .tooltip-popup {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n@import '../../utils/forced-colors.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.tooltip-popup--wrap {\n  white-space: normal;\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n.tooltip-popup--wrap .tooltip-inner {\n  height: auto;\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n  padding-block: var(--dimension-space-050);\n  align-items: flex-start;\n}\n\n.tooltip-popup--wrap .tooltip-inner > ds-text {\n  flex: 1 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  white-space: normal;\n}\n\n@keyframes tooltipFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes tooltipFadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip-popup,\n  .tooltip-popup--instant {\n    animation: none;\n    opacity: 1;\n  }\n\n  .tooltip-popup--closing {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .tooltip-popup {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Tooltip/Tooltip.tsx",
-      "content": "import { Component, Prop, Element, Method, 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';\nimport {\n  resolveAnchoredOverlayBoundaryRect,\n  type AnchoredOverlayBoundary,\n} from '../../utils/anchored-overlay-boundary';\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, wrapLabel = false) {\n  el.style.flexShrink = wrapLabel ? '1' : '0';\n  el.style.minWidth = wrapLabel ? '0' : 'max-content';\n  el.style.maxWidth = wrapLabel ? '100%' : 'none';\n  el.style.whiteSpace = wrapLabel ? 'normal' : '';\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  /** Explicit collision owner, `viewport`, or the nearest data-ds-overlay-boundary ancestor. */\n  @Prop() boundary: AnchoredOverlayBoundary | undefined;\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   * Link the trigger with aria-describedby while the popup is open. Disable when\n   * the label is already in the DOM, such as a truncated table cell.\n   */\n  @Prop() describedBy = true;\n  /** Allow the label to wrap at a panel-xs max width instead of a single line. */\n  @Prop() wrapLabel = false;\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 didLoad = false;\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.anchor,\n    getPopup: () => this.popupEl,\n    getOwnerDocument: () => this.el.ownerDocument,\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      collisionRect: resolveAnchoredOverlayBoundaryRect(anchor, this.boundary),\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 programmaticAnchor = 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  connectedCallback() {\n    if (!this.didLoad) return;\n    this.connectAnchor();\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.connectAnchor();\n  }\n\n  private connectAnchor() {\n    this.bindAnchor();\n    if (this.anchorObserver) return;\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('boundary')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  @Watch('wrapLabel')\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  /**\n   * Present against an external anchor the host already measured.\n   * Does not bind hover or focus on that anchor — the owner drives show/hide.\n   */\n  @Method()\n  async presentFrom(anchor: HTMLElement, label?: string) {\n    if (label != null) this.label = label;\n    if (!this.label?.trim()) {\n      this.hide();\n      return;\n    }\n    const sameAnchor = this.anchor === anchor;\n    if (!sameAnchor) {\n      this.unbindAnchor();\n      this.anchor = anchor;\n      this.programmaticAnchor = true;\n      if (this.popupEl && this.describedBy) this.linkDescribedBy();\n    }\n    if (this.popupEl) {\n      this.renderPopupContent();\n      this.schedulePosition();\n      return;\n    }\n    if (this.delayTimer && sameAnchor) return;\n    this.show();\n  }\n\n  /** Dismiss a popup opened through presentFrom or the slotted trigger. */\n  @Method()\n  async dismiss() {\n    this.hide();\n  }\n\n  private bindAnchor() {\n    if (this.programmaticAnchor) return;\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.tagName === 'SLOT' || 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    if (!this.programmaticAnchor) {\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    }\n    this.anchor = null;\n    this.programmaticAnchor = false;\n  }\n\n  private linkDescribedBy() {\n    if (!this.describedBy || !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    if (this.programmaticAnchor) return;\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 || next?.tagName === 'SLOT') 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, this.wrapLabel);\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 ds-forced-colors-scope 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.toggle('tooltip-popup--wrap', this.wrapLabel);\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    this.popupEl.classList.toggle('tooltip-popup--wrap', this.wrapLabel);\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({\n      variant: textVariant,\n      wrap: this.wrapLabel ? 'wrap' : 'nowrap',\n      text: this.label,\n    });\n    styleTooltipLabel(label, this.wrapLabel);\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",
+      "content": "import { Component, Prop, Element, Method, 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';\nimport {\n  resolveAnchoredOverlayBoundaryRect,\n  type AnchoredOverlayBoundary,\n} from '../../utils/anchored-overlay-boundary';\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, wrapLabel = false) {\n  el.style.flexShrink = wrapLabel ? '1' : '0';\n  el.style.minWidth = wrapLabel ? '0' : 'max-content';\n  el.style.maxWidth = wrapLabel ? '100%' : 'none';\n  el.style.whiteSpace = wrapLabel ? 'normal' : '';\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  /** Explicit collision owner, `viewport`, or the nearest data-ds-overlay-boundary ancestor. */\n  @Prop() boundary: AnchoredOverlayBoundary | undefined;\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   * Link the trigger with aria-describedby while the popup is open. Disable when\n   * the label is already in the DOM, such as a truncated table cell.\n   */\n  @Prop() describedBy = true;\n  /** Allow the label to wrap at a panel-xs max width instead of a single line. */\n  @Prop() wrapLabel = false;\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 didLoad = false;\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.anchor,\n    getPopup: () => this.popupEl,\n    getOwnerDocument: () => this.el.ownerDocument,\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      collisionRect: resolveAnchoredOverlayBoundaryRect(anchor, this.boundary),\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 programmaticAnchor = 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  connectedCallback() {\n    if (!this.didLoad) return;\n    this.connectAnchor();\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.connectAnchor();\n  }\n\n  private connectAnchor() {\n    this.bindAnchor();\n    if (this.anchorObserver) return;\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('boundary')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  @Watch('wrapLabel')\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(\n      TOKEN_DEFAULTS.tooltipFallbackWidth,\n      TOKEN_DEFAULTS.tooltipFallbackWidth\n    );\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  /**\n   * Present against an external anchor the host already measured.\n   * Does not bind hover or focus on that anchor — the owner drives show/hide.\n   */\n  @Method()\n  async presentFrom(anchor: HTMLElement, label?: string) {\n    if (label != null) this.label = label;\n    if (!this.label?.trim()) {\n      this.hide();\n      return;\n    }\n    const sameAnchor = this.anchor === anchor;\n    if (!sameAnchor) {\n      this.unbindAnchor();\n      this.anchor = anchor;\n      this.programmaticAnchor = true;\n      if (this.popupEl && this.describedBy) this.linkDescribedBy();\n    }\n    if (this.popupEl) {\n      this.renderPopupContent();\n      this.schedulePosition();\n      return;\n    }\n    if (this.delayTimer && sameAnchor) return;\n    this.show();\n  }\n\n  /** Dismiss a popup opened through presentFrom or the slotted trigger. */\n  @Method()\n  async dismiss() {\n    this.hide();\n  }\n\n  private bindAnchor() {\n    if (this.programmaticAnchor) return;\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.tagName === 'SLOT' || 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    if (!this.programmaticAnchor) {\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    }\n    this.anchor = null;\n    this.programmaticAnchor = false;\n  }\n\n  private linkDescribedBy() {\n    if (!this.describedBy || !this.anchor || !this.popupEl) return;\n    const ids = new Set(\n      (this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean)\n    );\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    if (this.programmaticAnchor) return;\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 || next?.tagName === 'SLOT') return;\n    if (this.isOpen || this.popupEl) this.hideInstant();\n    this.unbindAnchor();\n    this.bindAnchor();\n  };\n\n  private clearTimers() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\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, this.wrapLabel);\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 ds-forced-colors-scope 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.toggle('tooltip-popup--wrap', this.wrapLabel);\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    this.popupEl.classList.toggle('tooltip-popup--wrap', this.wrapLabel);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md'\n        ? 'ds-control--md'\n        : this.size === 'sm'\n          ? 'ds-control--sm'\n          : '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({\n      variant: textVariant,\n      wrap: this.wrapLabel ? 'wrap' : 'nowrap',\n      text: this.label,\n    });\n    styleTooltipLabel(label, this.wrapLabel);\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"
     }
   ]