@ds-mo/ui 12.7.0 → 12.9.0

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

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

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

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

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

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

package/dist/react/components.d.ts

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

package/dist/react/components.js

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

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

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsCardOverviewCustomEvent, type OverviewMetric } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardOverview as DsCardOverviewElement } from "@ds-mo/ui/dist/components/ds-card-overview.js";
+export type DsCardOverviewEvents = {
+    onDsMetricSelect: EventName<DsCardOverviewCustomEvent<OverviewMetric>>;
+};
+export declare const DsCardOverview: StencilReactComponent<DsCardOverviewElement, DsCardOverviewEvents, Components.DsCardOverview>;

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

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

package/dist/styles/control-elevation.css

@@ -7,14 +7,22 @@
  * approved press-scaling button so its surface and elevation move as one unit.
  * The owner still supplies layout, radius, surface, and any backdrop blur.
  * Keep wrapped controls' optional resting borders off.
+ *
+ * Both `:host(.ds-control-elevation)` and `.ds-control-elevation` are listed so
+ * Stencil scoped components work whether the class sits on the host (a component
+ * that is itself the elevated surface) or on an inner wrapper. Scoped builds
+ * suffix host and child classes differently, so a plain class alone silently
+ * misses the host.
  */
 
+:host(.ds-control-elevation),
 .ds-control-elevation {
   position: relative;
   overflow: visible;
   box-shadow: var(--ds-control-elevation-shadow, none);
 }
 
+:host(.ds-control-elevation)::after,
 .ds-control-elevation::after {
   content: '';
   position: absolute;
@@ -26,16 +34,19 @@
   pointer-events: none;
 }
 
+:host(.ds-control-elevation--sm),
 .ds-control-elevation--sm {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-sm);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-sm);
 }
 
+:host(.ds-control-elevation--md),
 .ds-control-elevation--md {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-md);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-md);
 }
 
+:host(.ds-control-elevation--floating),
 .ds-control-elevation--floating {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore } from './card-overview-types';
+export declare class CardOverview {
+    el: HTMLElement;
+    /** Full summary card, or the condensed 48px summary bar. */
+    variant: CardOverviewVariant;
+    /** Intrinsic responsive layout, or a page-owned single-column stack. */
+    layout: CardOverviewLayout;
+    /** Leading summary block. Omit to render the bar without a headline figure. */
+    score: OverviewScore | undefined;
+    /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */
+    periodLabel: string;
+    /** Comparison caption, for example `vs Previous period`. */
+    comparisonLabel: string;
+    /** Measures rendered in the responsive grid. Only the first six are shown. */
+    metrics: OverviewMetric[];
+    /**
+     * Width a metric cell may shrink to before the grid drops a column. The grid
+     * reflows and then stacks from this alone, so no measurement is required.
+     */
+    metricMinWidth: string;
+    /** Replace the score and metrics with skeletons while data resolves. */
+    isLoading: boolean;
+    /** Message shown in place of the score when its figure cannot be resolved. */
+    scoreErrorMessage: string | undefined;
+    /** Accessible name for the region. */
+    overviewLabel: string;
+    /** Emitted when a metric that is not inactive is activated. */
+    dsMetricSelect: EventEmitter<OverviewMetric>;
+    /** Roving tab stop across selectable metrics. */
+    private focusedMetricIndex;
+    private get hasScore();
+    private get visibleMetrics();
+    /** Index of the roving tab stop, skipping inactive metrics. */
+    private get rovingIndex();
+    private selectMetric;
+    /** Move the roving tab stop, wrapping and skipping inactive metrics. */
+    private moveFocus;
+    private handleMetricKeyDown;
+    /**
+     * A skeleton bar matching the type metrics of the text it stands in for, so the
+     * loading state holds the same shape and rhythm as the resolved content.
+     *
+     * `background` is always passed: the default base is the theme's quaternary
+     * foreground, which is black and therefore invisible on this permanently dark
+     * surface.
+     */
+    private bar;
+    /**
+     * Arrow and change in one text node.
+     *
+     * The arrow is a typeface glyph rather than an icon so it inherits the exact
+     * size, weight, and baseline of the value beside it; an icon would need its
+     * own size scale and would drift whenever the type scale changed.
+     *
+     * Tone is supplied by the caller and never inferred here.
+     */
+    private renderTrend;
+    private renderScore;
+    private renderMetric;
+    private renderMetrics;
+    render(): any;
+}
+//# sourceMappingURL=CardOverview.d.ts.map

package/dist/types/components/CardOverview/card-overview-types.d.ts

@@ -0,0 +1,34 @@
+import type { MetricTrend } from '../../utils/metric-change';
+export type CardOverviewVariant = 'default' | 'compact';
+export type CardOverviewLayout = 'auto' | 'stacked';
+/**
+ * Leading summary block — the headline figure the rest of the bar contextualises.
+ *
+ * Derive `trend` with `resolveMetricTrend` so whether a rise reads well stays a
+ * product decision rather than a design-system one.
+ */
+export interface OverviewScore {
+    /** Category above the figure, for example `Safety score`. */
+    label: string;
+    /** Display-ready headline figure. */
+    value: string | number;
+    /** Change against the comparison period. Omit when there is nothing to report. */
+    trend?: MetricTrend;
+    /** Qualitative band beneath the figure, for example `Good (67–83)`. */
+    band?: string;
+}
+/** One measure in the overview grid. */
+export interface OverviewMetric {
+    /** Stable identity for keyed rendering and selection events. */
+    id: string;
+    label: string;
+    /** Display-ready value; format compactly before passing it in. */
+    value: string | number;
+    /** Change against the comparison period. Omit when there is nothing to report. */
+    trend?: MetricTrend;
+    /** Present the measure without making it selectable. */
+    isInactive?: boolean;
+    /** Supplementary explanation for the label. */
+    labelTooltip?: string;
+}
+//# sourceMappingURL=card-overview-types.d.ts.map

package/dist/types/components/CardOverview/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore, } from './card-overview-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -2,8 +2,19 @@ import type { ChartDatum } from '../../utils/chart-types';
 export declare class ChartBar {
     /** Bars to render. Set as a JS property (not an HTML attribute). */
     data: ChartDatum[];
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     render(): any;
 }
 //# sourceMappingURL=ChartBar.d.ts.map

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

@@ -6,8 +6,19 @@ export declare class ChartBarStacked {
     /** X-axis labels — must match each series' `data` length. Set as a JS property. */
     categories: string[];
     variant: ChartBarStackedVariant;
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     private valuesForCategory;
     private accessibleLabel;
     render(): any;

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

@@ -4,9 +4,20 @@ export declare class ChartLine {
     series: ChartSeries[];
     /** X-axis labels — must match each series' `data` length. Set as a JS property. */
     categories: string[];
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
     showPoints: boolean;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     render(): any;
 }
 //# sourceMappingURL=ChartLine.d.ts.map

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ChoicePopupAnchorAlignment, type ControlSize } from '../../utils';
-import { type MenuAlign, type MenuSide } from './menu-position';
+import type { MenuAlign, MenuSide } from './menu-position';
 import type { MenuItemData, MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
@@ -48,15 +48,17 @@ export declare class Menu {
     /** Emitted when a generic `swatch-picker` section option is chosen. */
     dsSwatchSelect: EventEmitter<string>;
     private clickOutsideHandler;
-    private scrollResizeHandler;
     private closeTimer;
-    private positionRetryRaf;
-    private livePositionRaf;
+    /**
+     * Anchored placement. The choice-cell measurement stays here on purpose: the
+     * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu
+     * semantics, not shared geometry.
+     */
+    private readonly position;
     /** Last content actually painted while open; retained unchanged through exit motion. */
     private lastRenderedSections;
     private closingSections;
     componentDidLoad(): void;
-    componentDidRender(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
     onAnchorChange(): void;

package/dist/types/components/Menu/menu-position.d.ts

@@ -1,7 +1,7 @@
-import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
-export type MenuSide = AnchoredPopupSide;
-export type MenuAlign = AnchoredPopupAlign;
-export type MenuPositionInput = AnchoredPopupPositionInput;
-/** Backward-compatible menu alias for the shared anchored-popup layout math. */
-export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;
+import { computeAnchoredPosition, type AnchoredAlign, type AnchoredPositionInput, type AnchoredSide } from '../../utils/anchored-position';
+export type MenuSide = AnchoredSide;
+export type MenuAlign = AnchoredAlign;
+export type MenuPositionInput = AnchoredPositionInput;
+/** Backward-compatible menu alias for the shared anchored-position layout math. */
+export declare const computeMenuPosition: typeof computeAnchoredPosition;
 //# sourceMappingURL=menu-position.d.ts.map

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

@@ -39,6 +39,7 @@ export declare class ShellPage {
     private handleScroll;
     private findHeader;
     private get compactHeaderHeight();
+    private syncHeaderDividerInset;
     private setHeaderTravel;
     private measureHeaderTravel;
     private captureExpandedHeaderGeometry;

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

@@ -37,9 +37,8 @@ export declare class Tooltip {
     private closeTimer;
     private anchor;
     private popupEl;
-    private positionObserver;
     private anchorObserver;
-    private positionFrame;
+    private readonly position;
     private skipEnterAnimation;
     private isOpen;
     private lastInteractionWasKeyboard;
@@ -50,7 +49,6 @@ export declare class Tooltip {
     /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
     private focusHandler;
     private blurHandler;
-    private scrollResizeHandler;
     private escapeHandler;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -83,7 +81,6 @@ export declare class Tooltip {
     private hide;
     private mountPopup;
     private renderPopupContent;
-    private calculatePosition;
     render(): any;
 }
 //# sourceMappingURL=Tooltip.d.ts.map