@ds-mo/ui 13.6.1 → 13.7.0

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.1",
+          "@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": [

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
+});

package/dist/types/components/{CardDataViz/CardDataViz.d.ts → CardChart/CardChart.d.ts}

@@ -1,18 +1,18 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type CardDataVizWidth = 'sm' | 'md' | 'lg';
-export type CardDataVizVariant = 'custom' | 'bar' | 'line' | 'donut';
+export type CardChartWidth = 'sm' | 'md' | 'lg';
+export type CardChartVariant = 'custom' | 'chart';
 /**
- * Standard data-visualization card chrome and composition. The variant owns
+ * Standard chart card chrome and composition. The variant owns
  * only the chart/legend relationship; applications continue to own data.
  */
-export declare class CardDataViz {
+export declare class CardChart {
     el: HTMLElement;
-    /** Data-visualization heading shown in the card header. */
+    /** Chart heading shown in the card header. */
     heading: string;
     /** Chart composition behavior. */
-    variant: CardDataVizVariant;
-    /** Width token with the matching data-visualization card min-height. */
-    cardWidth: CardDataVizWidth;
+    variant: CardChartVariant;
+    /** Width token with the matching chart-card min-height. */
+    cardWidth: CardChartWidth;
     /** Renders the standard filter action before custom actions. */
     showFilter: boolean;
     filterLabel: string;
@@ -21,12 +21,8 @@ export declare class CardDataViz {
     private hasChartSlot;
     private hasLegendSlot;
     componentWillRender(): void;
-    componentDidLoad(): void;
     componentDidRender(): void;
-    disconnectedCallback(): void;
-    private handleChartHover;
-    private handleLegendHover;
     private handleFilterClick;
     render(): any;
 }
-//# sourceMappingURL=CardDataViz.d.ts.map
+//# sourceMappingURL=CardChart.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardChartVariant, CardChartWidth } from './CardChart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ChartDefinition, ChartPoint } from '../../utils/chart-grammar';
+export type ChartFocusSource = 'pointer' | 'keyboard';
+export interface ChartFocusChangeDetail {
+    primary: ChartPoint | null;
+    points: readonly ChartPoint[];
+    source: ChartFocusSource;
+}
+export declare class Chart {
+    el: HTMLElement;
+    /** Typed chart definition. Set as a JavaScript property, not an HTML attribute. */
+    definition: ChartDefinition;
+    /** Required accessible name for the visualization. */
+    label: string;
+    /** Optional longer accessible description. */
+    description?: string;
+    /** Locale used by axes and default tooltip formatters. */
+    locale?: string;
+    /** Fixed surface width. Otherwise the chart observes its container. */
+    width?: number;
+    /** Product-owned surface height. Wins over aspectRatio. */
+    height?: number;
+    /** Derives height from the current width when height is not supplied. */
+    aspectRatio?: number;
+    /** Fires whenever pointer or keyboard focus resolves to semantic chart points. */
+    dsChartFocusChange: EventEmitter<ChartFocusChangeDetail>;
+    private surfaceWidth;
+    private containerHeight?;
+    private scene?;
+    private focusState?;
+    private pointerAnchor?;
+    private resizeObserver?;
+    private resizeFrame?;
+    private compileFrame?;
+    private warnedConflictingHeight;
+    private measuredLabels;
+    private descriptionId;
+    private clipId;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    onDefinitionInputChange(): void;
+    onWidthChange(): void;
+    private get surfaceHeight();
+    private connectResizeObserver;
+    private measureHost;
+    private applyMeasuredSize;
+    private scheduleCompile;
+    private compile;
+    private waitForFonts;
+    private measureRenderedLabels;
+    private resolveFocus;
+    private clearFocus;
+    private onPointerMove;
+    private onPointerLeave;
+    private keyboardPoints;
+    private onKeyDown;
+    private renderNode;
+    private renderMarkLayers;
+    private focusedDotPoints;
+    private tooltipContent;
+    private statusText;
+    render(): any;
+}
+//# sourceMappingURL=Chart.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { ChartFocusChangeDetail, ChartFocusSource } from './Chart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -7,7 +7,7 @@ export type ChartLegendPercentageDecimals = 1 | 2;
  * legends differently (list w/ values, compact chips, bare swatches, external
  * stat callouts) — this covers the common "swatch + label + optional value" case.
  * Consumers who need a different treatment skip this component entirely and
- * render their own markup against the same `ChartDatum[]` data.
+ * render their own markup against the same `ChartLegendItem[]` data.
  */
 export declare class ChartLegend {
     locale: string | undefined;

package/dist/types/components/{TooltipDataViz/TooltipDataViz.d.ts → TooltipChart/TooltipChart.d.ts}

@@ -1,9 +1,14 @@
-export type TooltipDataVizSide = 'left' | 'right';
-export type TooltipDataVizAlign = 'top' | 'bottom';
+export type TooltipChartSide = 'left' | 'right';
+export type TooltipChartAlign = 'top' | 'bottom';
+export interface TooltipChartItem {
+    label: string;
+    value: string | number;
+    color?: string;
+}
 /**
  * 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.
+ * polar arc, …). A composition may suppress it when a visible legend already
+ * surfaces the same value.
  * 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`.
@@ -16,10 +21,14 @@ export type TooltipDataVizAlign = 'top' | 'bottom';
  * Mount (or remount) when a hover session starts so `delay` applies once per hover;
  * keep the instance mounted while the cursor moves so tracking stays instant.
  */
-export declare class TooltipDataViz {
+export declare class TooltipChart {
     el: HTMLElement;
     value: string | number;
     label: string;
+    /** Optional heading for grouped chart focus. */
+    heading?: string;
+    /** Multi-row content. When supplied, this replaces the legacy label/value row. */
+    items?: TooltipChartItem[];
     /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */
     x: number;
     y: number;
@@ -45,4 +54,4 @@ export declare class TooltipDataViz {
     private calculatePlacement;
     render(): any;
 }
-//# sourceMappingURL=TooltipDataViz.d.ts.map
+//# sourceMappingURL=TooltipChart.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { TooltipChartSide, TooltipChartAlign, TooltipChartItem, } from './TooltipChart';
+//# sourceMappingURL=index.d.ts.map