@ds-mo/ui 13.6.1 → 13.8.0

package/dist/mcp-data/registry/scroll-overlay.json

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

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

@@ -741,7 +741,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/shell-app.json

@@ -560,7 +560,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: navigation, pageChrome, tools.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/shell-page.json

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

package/dist/mcp-data/registry/shell-tools.json

@@ -390,7 +390,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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; control atoms inherit the selected control density's default radius.",
+        "Text, icon, and control variants are atomic metric canvases aligned to their corresponding design-system recipes. Text bars occupy 75% of their line-height canvas, while icon shapes occupy 75% of their square canvas; both remain centered with a proportional 12.5% inset per applicable edge. 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.",
@@ -255,7 +255,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -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__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\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\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: 0;\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: 75%;\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: 0;\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: 75%;\n  height: 75%;\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\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -629,7 +629,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: formatOptions, valueTexts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/swatch-picker.json

@@ -199,7 +199,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

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

package/dist/mcp-data/registry/tab-group.json

@@ -218,7 +218,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

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

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

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

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

@@ -307,7 +307,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

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

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

@@ -37,8 +37,8 @@
         },
         {
           "when": "A chart needs a cursor- or data-point-positioned value callout.",
-          "component": "component:ds-tooltip-data-viz",
-          "reason": "TooltipDataViz accepts chart coordinates and is designed for data visualization hover feedback."
+          "component": "component:ds-tooltip-chart",
+          "reason": "TooltipChart accepts chart coordinates and is designed for data visualization hover feedback."
         }
       ],
       "commonlyComposedWith": [
@@ -277,7 +277,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.1",
+          "@ds-mo/tokens ^5.1.2",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

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

package/dist/react/components.d.ts

@@ -16,13 +16,11 @@ export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
-export { DsCardDataViz } from "./ds-card-data-viz.js";
+export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
-export { DsChartBar } from "./ds-chart-bar.js";
-export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
-export { DsChartLine } from "./ds-chart-line.js";
+export { DsChart } from "./ds-chart.js";
 export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
 export { DsCodeBlock } from "./ds-code-block.js";
@@ -66,6 +64,6 @@ export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsToast } from "./ds-toast.js";
-export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
+export { DsTooltipChart } from "./ds-tooltip-chart.js";
 export { DsTooltip } from "./ds-tooltip.js";
 export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/components.js

@@ -17,13 +17,11 @@ export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
-export { DsCardDataViz } from "./ds-card-data-viz.js";
+export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
-export { DsChartBar } from "./ds-chart-bar.js";
-export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
-export { DsChartLine } from "./ds-chart-line.js";
+export { DsChart } from "./ds-chart.js";
 export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
 export { DsCodeBlock } from "./ds-code-block.js";
@@ -67,6 +65,6 @@ export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsToast } from "./ds-toast.js";
-export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
+export { DsTooltipChart } from "./ds-tooltip-chart.js";
 export { DsTooltip } from "./ds-tooltip.js";
 export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/ds-card-chart.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 './react-runtime.js';
+import { type DsCardChartCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardChart as DsCardChartElement } from "@ds-mo/ui/dist/components/ds-card-chart.js";
+export type DsCardChartEvents = {
+    onDsFilterClick: EventName<DsCardChartCustomEvent<void>>;
+};
+export declare const DsCardChart: StencilReactComponent<DsCardChartElement, DsCardChartEvents, Components.DsCardChart, 'heading'>;

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

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsCardChart as DsCardChartElement, defineCustomElement as defineDsCardChart } from "@ds-mo/ui/dist/components/ds-card-chart.js";
+export const DsCardChart = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-chart',
+    elementClass: DsCardChartElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsFilterClick: 'dsFilterClick' },
+    defineCustomElement: defineDsCardChart
+});

package/dist/react/ds-chart.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 './react-runtime.js';
+import { type ChartFocusChangeDetail, type DsChartCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsChart as DsChartElement } from "@ds-mo/ui/dist/components/ds-chart.js";
+export type DsChartEvents = {
+    onDsChartFocusChange: EventName<DsChartCustomEvent<ChartFocusChangeDetail>>;
+};
+export declare const DsChart: StencilReactComponent<DsChartElement, DsChartEvents, Components.DsChart, 'definition' | 'label'>;

package/dist/react/ds-chart.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsChart as DsChartElement, defineCustomElement as defineDsChart } from "@ds-mo/ui/dist/components/ds-chart.js";
+export const DsChart = /*@__PURE__*/ createComponent({
+    tagName: 'ds-chart',
+    elementClass: DsChartElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChartFocusChange: 'dsChartFocusChange' },
+    defineCustomElement: defineDsChart
+});

package/dist/react/{ds-chart-bar.d.ts → ds-tooltip-chart.d.ts}

@@ -4,6 +4,6 @@
  */
 import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
-import { DsChartBar as DsChartBarElement } from "@ds-mo/ui/dist/components/ds-chart-bar.js";
-export type DsChartBarEvents = NonNullable<unknown>;
-export declare const DsChartBar: StencilReactComponent<DsChartBarElement, DsChartBarEvents, Components.DsChartBar>;
+import { DsTooltipChart as DsTooltipChartElement } from "@ds-mo/ui/dist/components/ds-tooltip-chart.js";
+export type DsTooltipChartEvents = NonNullable<unknown>;
+export declare const DsTooltipChart: StencilReactComponent<DsTooltipChartElement, DsTooltipChartEvents, Components.DsTooltipChart>;

package/dist/react/ds-tooltip-chart.js

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