@ds-mo/ui 10.0.0 → 11.1.0

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

@@ -54,7 +54,7 @@
         "The owner preserves focus and meaningful reading order when replacing placeholders with real content."
       ],
       "states": [
-        "Text, icon, and control variants are atomic metric canvases aligned to their corresponding design-system recipes.",
+        "Text, icon, and control variants are atomic metric canvases aligned to their corresponding design-system recipes; control atoms inherit the selected control density's default radius.",
         "Compose approximate line count, hierarchy, widths, and control placement without simulating actual values.",
         "Shimmer is on by default and may be disabled for a static placeholder. Reduced motion always produces the static final shape.",
         "Rounded is an optional visual treatment for icon and control atoms rather than a semantic state.",
@@ -270,7 +270,7 @@
   "files": [
     {
       "path": "src/wc/components/Skeleton/Skeleton.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small)  { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large)    { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large)     { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium)    { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small)     { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption)        { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm)  { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md)  { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg)  { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small)  { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large)    { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large)     { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium)    { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small)     { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption)        { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n  height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm)  { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md)  { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg)  { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl)  { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -2,15 +2,79 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tooltip-data-viz",
   "title": "TooltipDataViz",
-  "description": "Positioned value/label callout for chart hover interactions (bar, line point, …).\nDonut charts skip this — legend sync already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
+  "description": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
     "distribution": "npm",
     "storybook": "https://zainadeel.github.io/compomo/?path=/story/tooltip-data-viz",
     "source": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
-    "intentStatus": "migration-pending",
-    "intent": null,
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
+      "useWhen": [
+        "A chart needs immediate visual value feedback for a genuinely hovered or keyboard-focused mark.",
+        "The anchor lives inside SVG or chart coordinates rather than on a slotted HTML trigger.",
+        "The owning chart can mount the callout for one interaction session and update its coordinates while tracking."
+      ],
+      "avoidWhen": [
+        "A normal control or text trigger needs supplemental explanation; use Tooltip.",
+        "The content needs links, actions, focus, or touch-primary disclosure.",
+        "An externally synchronized highlight has no genuine local pointer or keyboard interaction.",
+        "The callout would be the only accessible source of an essential value."
+      ],
+      "alternatives": [
+        {
+          "when": "A slotted control or text trigger needs a conventional tooltip.",
+          "component": "component:ds-tooltip",
+          "reason": "Tooltip owns trigger semantics, focus behavior, and anchored overlay lifecycle."
+        },
+        {
+          "when": "Donut details should remain continuously visible beside the chart.",
+          "component": "component:ds-chart-legend",
+          "reason": "A visible legend avoids redundant transient slice callouts."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-chart-bar",
+        "component:ds-chart-line",
+        "component:ds-chart-donut"
+      ],
+      "accessibility": [
+        "The callout is presentation-only and never replaces the owning chart mark's accessible label or an adjacent data summary.",
+        "Keyboard-focused marks receive the same visual feedback as pointer-hovered marks.",
+        "The callout never receives focus or contains interactive descendants."
+      ],
+      "states": [
+        "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.",
+        "Reduced motion preserves the final visible state without an opacity transition."
+      ],
+      "responsiveBehavior": [
+        "Render inside a positioned chart wrapper and pass coordinates relative to that wrapper.",
+        "Keep labels concise enough for the single-line callout; persistent or long explanations belong outside the chart."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "The owning chart computes coordinates and conditionally mounts the component; applications should not use it as a standalone overlay."
+        ],
+        "react": [
+          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
+        ],
+        "angular": [
+          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook example",
+          "path": "src/wc/components/TooltipDataViz/TooltipDataViz.stories.ts"
+        }
+      ]
+    },
     "api": {
       "props": {
         "delay": {
@@ -151,7 +215,7 @@
     },
     {
       "path": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\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-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\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: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = '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: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = 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\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * standalone donut slice, …). Donut compositions suppress it when a visible\n * legend already surfaces the hovered slice.\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-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\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: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = '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: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = 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\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typing-indicator",
+  "title": "TypingIndicator",
+  "description": "Dedicated transient status for another participant actively composing a message.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/typing-indicator",
+    "source": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Dedicated transient status for another participant actively composing a message.",
+      "useWhen": [
+        "An agent or person-to-person conversation needs to show that another participant is currently typing."
+      ],
+      "avoidWhen": [
+        "An operation is loading or streaming a response; use Loader or the owning region's busy state.",
+        "The status represents persisted message content; use Message and MessageBubble."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message",
+        "component:ds-message-scroller"
+      ],
+      "patterns": [
+        "pattern:conversation"
+      ],
+      "accessibility": [
+        "Provide concise localized status text that names the participant when that context is not otherwise clear.",
+        "The polite atomic status announces typing without representing it as a message bubble."
+      ],
+      "states": [
+        "TypingIndicator is transient conversation status, never persisted message content.",
+        "Its body-small secondary text may shimmer, while reduced-motion preferences retain a static readable status."
+      ],
+      "responsiveBehavior": [
+        "The indicator fills the message content width and wraps only when localized status text requires it."
+      ],
+      "references": [
+        {
+          "label": "Storybook example",
+          "path": "src/wc/components/TypingIndicator/TypingIndicator.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Typing…'",
+          "required": false,
+          "mutable": false,
+          "description": "Concise localized status text, ideally naming the participant who is typing."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Typing…'",
+        "required": false,
+        "mutable": false,
+        "description": "Concise localized status text, ideally naming the participant who is typing."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-typing-indicator",
+      "react": "DsTypingIndicator",
+      "angular": "DsTypingIndicator"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-typing-indicator.js';",
+        "example": "<ds-typing-indicator></ds-typing-indicator>"
+      },
+      "react": {
+        "import": "import { DsTypingIndicator } from '@ds-mo/ui/react';",
+        "example": "<DsTypingIndicator />"
+      },
+      "angular": {
+        "import": "import { DsTypingIndicator } from '@ds-mo/ui/angular/ds-typing-indicator';",
+        "example": "<ds-typing-indicator></ds-typing-indicator>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.3.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/TypingIndicator/TypingIndicator.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized status text, ideally naming the participant who is typing. */\n  @Prop() label: string = 'Typing…';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/react/components.d.ts

@@ -59,3 +59,4 @@ export { DsText } from "./ds-text.js";
 export { DsToast } from "./ds-toast.js";
 export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";
+export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/components.js

@@ -60,3 +60,4 @@ export { DsText } from "./ds-text.js";
 export { DsToast } from "./ds-toast.js";
 export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";
+export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/ds-typing-indicator.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTypingIndicator as DsTypingIndicatorElement } from "@ds-mo/ui/dist/components/ds-typing-indicator.js";
+export type DsTypingIndicatorEvents = NonNullable<unknown>;
+export declare const DsTypingIndicator: StencilReactComponent<DsTypingIndicatorElement, DsTypingIndicatorEvents, Components.DsTypingIndicator>;

package/dist/react/ds-typing-indicator.js

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

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

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
+import type { ChoiceBackground } from '../../utils/choice-list';
 export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive' | 'guide' | 'walkthrough';
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
+export type ButtonFilledBackground = ChoiceBackground;
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonFilledSize = 'md' | 'sm' | 'xs';
 export type ButtonFilledWidth = ControlWidth;
@@ -27,6 +29,13 @@ export declare class ButtonFilled {
      * bold → faint, strong → medium, medium → strong, faint → bold.
      */
     contrast: ButtonFilledContrast;
+    /** Show a 1px secondary inset border. */
+    hasBorder: boolean;
+    /**
+     * Actual parent surface context for the optional inset border color only.
+     * Omit on primary and secondary surfaces.
+     */
+    background: ButtonFilledBackground | undefined;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
     /** Disables interaction. */

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

@@ -1,2 +1,2 @@
-export type { ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth, } from './ButtonFilled';
+export type { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth, } from './ButtonFilled';
 //# sourceMappingURL=index.d.ts.map

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

@@ -18,6 +18,7 @@ export declare class CardDataVizDonut {
     private hasLegendSlot;
     componentWillRender(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     private handleChartHover;
     private handleLegendHover;

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

@@ -19,6 +19,11 @@ export declare class ChartDonut {
     cornerRadius: number | string;
     /** Gap between slices, in degrees. */
     gap: number;
+    /**
+     * Show a chart-owned value callout for genuine pointer or keyboard focus.
+     * Disable when a visible legend already owns persistent label and value detail.
+     */
+    showTooltip: boolean;
     /** Primary center value; defaults to the sum of `data` values (e.g. "187", "40.9%"). */
     centerValue: string | undefined;
     /** Secondary caption below the center value (e.g. "Total", "Normal"). Rendered uppercase. */
@@ -27,8 +32,8 @@ export declare class ChartDonut {
      * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
      * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
      * Falls back to this component's own pointer/focus hover when unset.
-     * Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz
-     * tooltip (the legend already surfaces label/value).
+     * Slice hover dims peer slices and emits `dsSliceHover` for legend sync. External
+     * highlight never opens the local tooltip.
      */
     activeLabel: string | null;
     private hoveredLabel;
@@ -37,6 +42,8 @@ export declare class ChartDonut {
     private displayedCaptionText;
     /** Measured fill diameter when `size` is unset. */
     private measuredSize;
+    private tooltipX;
+    private tooltipY;
     /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
     dsSliceHover: EventEmitter<ChartDatum | null>;
     private valueTextEl?;
@@ -56,6 +63,9 @@ export declare class ChartDonut {
     private applyAvailableSize;
     private teardownResizeObserver;
     private handleHover;
+    private get tooltipDatum();
+    private updateTooltipFromPointer;
+    private updateTooltipFromSvgPoint;
     componentDidRender(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-export type MessageBubbleVariant = 'primary' | 'secondary' | 'ghost';
+export type MessageBubbleVariant = 'user' | 'received';
 export declare class MessageBubble {
     variant: MessageBubbleVariant;
     render(): any;

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

@@ -1,8 +1,9 @@
 export type TooltipDataVizSide = 'left' | 'right';
 export type TooltipDataVizAlign = 'top' | 'bottom';
 /**
- * Positioned value/label callout for chart hover interactions (bar, line point, …).
- * Donut charts skip this — legend sync already surfaces the hovered slice.
+ * Positioned value/label callout for chart hover interactions (bar, line point,
+ * standalone donut slice, …). Donut compositions suppress it when a visible
+ * legend already surfaces the hovered slice.
  * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
  * charts hover-highlight data that lives inside an SVG, so the chart itself computes
  * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.

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

@@ -0,0 +1,6 @@
+export declare class TypingIndicator {
+    /** Concise localized status text, ideally naming the participant who is typing. */
+    label: string;
+    render(): any;
+}
+//# sourceMappingURL=TypingIndicator.d.ts.map