@ds-mo/ui 2.10.4 → 2.11.2

package/dist/types/utils/chart-types.d.ts

@@ -0,0 +1,23 @@
+/** Shared data shapes for `ds-chart-*` components — kept minimal for the initial scaffold, expect these to grow per component once design is finalized. */
+export interface ChartDatum {
+    label: string;
+    value: number;
+    /** CSS color override; defaults to the next `--color-data-category-*` token. */
+    color?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: number[];
+    /** CSS color override; defaults to the next `--color-data-category-*` token. */
+    color?: string;
+}
+/** `ds-chart-legend` entry — value is optional so a series name (no single value) can be legended too. */
+export interface ChartLegendItem {
+    label: string;
+    value?: number;
+    /** CSS color override; defaults to the next `--color-data-category-*` token. */
+    color?: string;
+    /** When set, the row renders as a link (e.g. to a filtered list page for this segment). */
+    href?: string;
+}
+//# sourceMappingURL=chart-types.d.ts.map

package/dist/types/utils/format-compact-number.d.ts

@@ -0,0 +1,3 @@
+/** Compact large numbers for display: 1000 -> "1k", 1500 -> "1.5k", 110100 -> "110.1k", 1000000 -> "1m". */
+export declare function formatCompactNumber(value: number): string;
+//# sourceMappingURL=format-compact-number.d.ts.map

package/dist/types/utils/index.d.ts

@@ -1,5 +1,7 @@
 export { registerIcons } from '../components/Icon/icon-cache';
 export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
+export { formatCompactNumber } from './format-compact-number';
+export { truncateSvgTextToWidth } from './truncate-svg-text';
 export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
 export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdge, resolveScrollEdgeFadeSize, scrollEdgeFadeClassMap, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, scrollEdgeFadeSizeStyle, } from './scroll-edge-fade';
 export type { ScrollEdgeFadeEdge, ScrollEdgeFadeOptions, ScrollEdgeFadeSize, ScrollEdgeFadeSizeToken, } from './scroll-edge-fade';

package/dist/types/utils/token-defaults.d.ts

@@ -2,6 +2,8 @@
 export declare const TOKEN_DEFAULTS: {
     readonly space050: "--dimension-space-050";
     readonly space200: "--dimension-space-200";
+    readonly radius025: "--dimension-radius-025";
+    readonly size200: "--dimension-size-200";
     readonly size300: "--dimension-size-300";
     readonly size600: "--dimension-size-600";
     readonly size800: "--dimension-size-800";
@@ -12,6 +14,11 @@ export declare const TOKEN_DEFAULTS: {
     readonly panelWidthMd: "--dimension-panel-width-md";
     readonly panelWidthLg: "--dimension-panel-width-lg";
     readonly menuWidthXs: "--dimension-menu-width-xs";
+    readonly lineheightLg: "--typography-lineheight-lg";
+    readonly lineheightMd: "--typography-lineheight-md";
+    readonly lineheightSm: "--typography-lineheight-sm";
+    readonly lineheightXl: "--typography-lineheight-xl";
+    readonly lineheightXs: "--typography-lineheight-xs";
     readonly motionShort2: "--effect-motion-short-2";
     readonly motionShort3: "--effect-motion-short-3";
     readonly animationDurationShort3: "--effect-animation-duration-short-3";

package/dist/types/utils/truncate-svg-text.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`
+ * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —
+ * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.
+ *
+ * Mutates `el.textContent` during measurement; the caller's next render (driven by the
+ * returned string going into state) overwrites it with the final value.
+ */
+export declare function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string;
+//# sourceMappingURL=truncate-svg-text.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.10.4",
+  "version": "2.11.2",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -116,9 +116,13 @@
     "@storybook/addon-docs": "^10.4.2",
     "@storybook/web-components": "^10.4.2",
     "@storybook/web-components-vite": "^10.4.2",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^10.0.3",
+    "esbuild": "^0.28.0",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.6.0",
@@ -130,8 +134,7 @@
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.1",
     "vite": "^8.0.16",
-    "zod": "^4.4.3",
-    "esbuild": "^0.28.0"
+    "zod": "^4.4.3"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
@@ -139,5 +142,10 @@
   "sideEffects": [
     "**/*.css",
     "dist/components/**/*.js"
-  ]
+  ],
+  "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0"
+  }
 }

package/src/angular/index.ts

@@ -10,8 +10,12 @@ export const DIRECTIVES = [
   d.DsBreadcrumb,
   d.DsButtonFilled,
   d.DsButtonUnfilledIcon,
-  d.DsCard,
+  d.DsCardDataViz,
   d.DsCardSetting,
+  d.DsChartBar,
+  d.DsChartDonut,
+  d.DsChartLegend,
+  d.DsChartLine,
   d.DsCheckbox,
   d.DsChip,
   d.DsDivider,
@@ -42,5 +46,6 @@ export const DIRECTIVES = [
   d.DsText,
   d.DsToastProvider,
   d.DsToggle,
-  d.DsTooltip
+  d.DsTooltip,
+  d.DsTooltipDataViz
 ];

package/src/angular/proxies.ts

@@ -231,18 +231,18 @@ export declare interface DsButtonUnfilledIcon extends Components.DsButtonUnfille
 
 
 @ProxyCmp({
-  inputs: ['elevation', 'radius']
+  inputs: ['cardWidth', 'heading']
 })
 @Component({
-  selector: 'ds-card',
+  selector: 'ds-card-data-viz',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['elevation', 'radius'],
+  inputs: ['cardWidth', { name: 'heading', required: true }],
   standalone: false
 })
-export class DsCard {
-  protected el: HTMLDsCardElement;
+export class DsCardDataViz {
+  protected el: HTMLDsCardDataVizElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -250,7 +250,7 @@ export class DsCard {
 }
 
 
-export declare interface DsCard extends Components.DsCard {}
+export declare interface DsCardDataViz extends Components.DsCardDataViz {}
 
 
 @ProxyCmp({
@@ -283,6 +283,121 @@ export declare interface DsCardSetting extends Components.DsCardSetting {
 }
 
 
+@ProxyCmp({
+  inputs: ['data', 'height', 'width']
+})
+@Component({
+  selector: 'ds-chart-bar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['data', 'height', 'width'],
+  standalone: false
+})
+export class DsChartBar {
+  protected el: HTMLDsChartBarElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsChartBar extends Components.DsChartBar {}
+
+
+@ProxyCmp({
+  inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'size', 'thickness']
+})
+@Component({
+  selector: 'ds-chart-donut',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'size', 'thickness'],
+  outputs: ['dsSliceHover'],
+  standalone: false
+})
+export class DsChartDonut {
+  protected el: HTMLDsChartDonutElement;
+  @Output() dsSliceHover = new EventEmitter<CustomEvent<IDsChartDonutChartDatum | null>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+import type { ChartDatum as IDsChartDonutChartDatum } from '@ds-mo/ui';
+
+export declare interface DsChartDonut extends Components.DsChartDonut {
+  /**
+   * Fires with the hovered/focused slice's datum, or `null` on leave/blur.
+   */
+  dsSliceHover: EventEmitter<CustomEvent<IDsChartDonutChartDatum | null>>;
+}
+
+
+@ProxyCmp({
+  inputs: ['activeLabel', 'direction', 'items', 'showPercentage']
+})
+@Component({
+  selector: 'ds-chart-legend',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['activeLabel', 'direction', 'items', 'showPercentage'],
+  outputs: ['dsItemHover', 'dsItemClick'],
+  standalone: false
+})
+export class DsChartLegend {
+  protected el: HTMLDsChartLegendElement;
+  @Output() dsItemHover = new EventEmitter<CustomEvent<IDsChartLegendChartLegendItem | null>>();
+  @Output() dsItemClick = new EventEmitter<CustomEvent<{ item: IDsChartLegendChartLegendItem; originalEvent: MouseEvent }>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+import type { ChartLegendItem as IDsChartLegendChartLegendItem } from '@ds-mo/ui';
+
+export declare interface DsChartLegend extends Components.DsChartLegend {
+  /**
+   * Fires on row hover/focus with the item, or `null` on leave/blur.
+   */
+  dsItemHover: EventEmitter<CustomEvent<IDsChartLegendChartLegendItem | null>>;
+  /**
+   * Fires when a deep-linkable row (`item.href` set) is activated.
+   */
+  dsItemClick: EventEmitter<CustomEvent<{ item: IDsChartLegendChartLegendItem; originalEvent: MouseEvent }>>;
+}
+
+
+@ProxyCmp({
+  inputs: ['categories', 'height', 'series', 'showPoints', 'width']
+})
+@Component({
+  selector: 'ds-chart-line',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['categories', 'height', 'series', 'showPoints', 'width'],
+  standalone: false
+})
+export class DsChartLine {
+  protected el: HTMLDsChartLineElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsChartLine extends Components.DsChartLine {}
+
+
 @ProxyCmp({
   inputs: ['checked', 'inactive', 'indeterminate', 'label']
 })
@@ -1169,3 +1284,26 @@ export class DsTooltip {
 export declare interface DsTooltip extends Components.DsTooltip {}
 
 
+@ProxyCmp({
+  inputs: ['label', 'value', 'x', 'y']
+})
+@Component({
+  selector: 'ds-tooltip-data-viz',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['label', 'value', 'x', 'y'],
+  standalone: false
+})
+export class DsTooltipDataViz {
+  protected el: HTMLDsTooltipDataVizElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsTooltipDataViz extends Components.DsTooltipDataViz {}
+
+

package/src/react/components.ts

@@ -12,8 +12,12 @@ export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilledIcon } from "./ds-button-unfilled-icon.js";
+export { DsCardDataViz } from "./ds-card-data-viz.js";
 export { DsCardSetting } from "./ds-card-setting.js";
-export { DsCard } from "./ds-card.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 { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
 export { DsDivider } from "./ds-divider.js";
@@ -44,4 +48,5 @@ export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsToastProvider } from "./ds-toast-provider.js";
 export { DsToggle } from "./ds-toggle.js";
+export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";

package/src/react/ds-card-data-viz.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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.
+ */
+
+/* eslint-disable */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataViz as DsCardDataVizElement, defineCustomElement as defineDsCardDataViz } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
+
+export type DsCardDataVizEvents = NonNullable<unknown>;
+
+export const DsCardDataViz: StencilReactComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz> = /*@__PURE__*/ createComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz>({
+    tagName: 'ds-card-data-viz',
+    elementClass: DsCardDataVizElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsCardDataVizEvents,
+    defineCustomElement: defineDsCardDataViz
+});

package/src/react/{ds-card.ts → ds-chart-bar.ts}

@@ -12,15 +12,15 @@ import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
 import type { Components } from "@ds-mo/ui/dist/components";
-import { DsCard as DsCardElement, defineCustomElement as defineDsCard } from "@ds-mo/ui/dist/components/ds-card.js";
+import { DsChartBar as DsChartBarElement, defineCustomElement as defineDsChartBar } from "@ds-mo/ui/dist/components/ds-chart-bar.js";
 
-export type DsCardEvents = NonNullable<unknown>;
+export type DsChartBarEvents = NonNullable<unknown>;
 
-export const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard> = /*@__PURE__*/ createComponent<DsCardElement, DsCardEvents, Components.DsCard>({
-    tagName: 'ds-card',
-    elementClass: DsCardElement,
+export const DsChartBar: StencilReactComponent<DsChartBarElement, DsChartBarEvents, Components.DsChartBar> = /*@__PURE__*/ createComponent<DsChartBarElement, DsChartBarEvents, Components.DsChartBar>({
+    tagName: 'ds-chart-bar',
+    elementClass: DsChartBarElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as DsCardEvents,
-    defineCustomElement: defineDsCard
+    events: {} as DsChartBarEvents,
+    defineCustomElement: defineDsChartBar
 });

package/src/react/ds-chart-donut.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type ChartDatum, type DsChartDonutCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsChartDonut as DsChartDonutElement, defineCustomElement as defineDsChartDonut } from "@ds-mo/ui/dist/components/ds-chart-donut.js";
+
+export type DsChartDonutEvents = { onDsSliceHover: EventName<DsChartDonutCustomEvent<ChartDatum | null>> };
+
+export const DsChartDonut: StencilReactComponent<DsChartDonutElement, DsChartDonutEvents, Components.DsChartDonut> = /*@__PURE__*/ createComponent<DsChartDonutElement, DsChartDonutEvents, Components.DsChartDonut>({
+    tagName: 'ds-chart-donut',
+    elementClass: DsChartDonutElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsSliceHover: 'dsSliceHover' } as DsChartDonutEvents,
+    defineCustomElement: defineDsChartDonut
+});

package/src/react/ds-chart-legend.ts

@@ -0,0 +1,33 @@
+'use client';
+
+/**
+ * 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.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type ChartLegendItem, type DsChartLegendCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsChartLegend as DsChartLegendElement, defineCustomElement as defineDsChartLegend } from "@ds-mo/ui/dist/components/ds-chart-legend.js";
+
+export type DsChartLegendEvents = {
+    onDsItemHover: EventName<DsChartLegendCustomEvent<ChartLegendItem | null>>,
+    onDsItemClick: EventName<DsChartLegendCustomEvent<{ item: ChartLegendItem; originalEvent: MouseEvent }>>
+};
+
+export const DsChartLegend: StencilReactComponent<DsChartLegendElement, DsChartLegendEvents, Components.DsChartLegend> = /*@__PURE__*/ createComponent<DsChartLegendElement, DsChartLegendEvents, Components.DsChartLegend>({
+    tagName: 'ds-chart-legend',
+    elementClass: DsChartLegendElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsItemHover: 'dsItemHover',
+        onDsItemClick: 'dsItemClick'
+    } as DsChartLegendEvents,
+    defineCustomElement: defineDsChartLegend
+});

package/src/react/ds-chart-line.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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.
+ */
+
+/* eslint-disable */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsChartLine as DsChartLineElement, defineCustomElement as defineDsChartLine } from "@ds-mo/ui/dist/components/ds-chart-line.js";
+
+export type DsChartLineEvents = NonNullable<unknown>;
+
+export const DsChartLine: StencilReactComponent<DsChartLineElement, DsChartLineEvents, Components.DsChartLine> = /*@__PURE__*/ createComponent<DsChartLineElement, DsChartLineEvents, Components.DsChartLine>({
+    tagName: 'ds-chart-line',
+    elementClass: DsChartLineElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsChartLineEvents,
+    defineCustomElement: defineDsChartLine
+});

package/src/react/ds-tooltip-data-viz.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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.
+ */
+
+/* eslint-disable */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTooltipDataViz as DsTooltipDataVizElement, defineCustomElement as defineDsTooltipDataViz } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
+
+export type DsTooltipDataVizEvents = NonNullable<unknown>;
+
+export const DsTooltipDataViz: StencilReactComponent<DsTooltipDataVizElement, DsTooltipDataVizEvents, Components.DsTooltipDataViz> = /*@__PURE__*/ createComponent<DsTooltipDataVizElement, DsTooltipDataVizEvents, Components.DsTooltipDataViz>({
+    tagName: 'ds-tooltip-data-viz',
+    elementClass: DsTooltipDataVizElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsTooltipDataVizEvents,
+    defineCustomElement: defineDsTooltipDataViz
+});

package/src/wc/components/CardDataViz/CardDataViz.tsx

@@ -0,0 +1,102 @@
+import { Component, Element, State, h, Host, Prop } from '@stencil/core';
+
+export type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';
+
+/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */
+type HoveredDatum = { label: string } | null;
+
+/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */
+type SyncableSlot = HTMLElement & { activeLabel?: string | null };
+
+const CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {
+  xs: 'var(--dimension-card-width-xs)',
+  sm: 'var(--dimension-card-width-sm)',
+  md: 'var(--dimension-card-width-md)',
+  lg: 'var(--dimension-card-width-lg)',
+};
+
+/**
+ * Copied from CardSetting as a starting scaffold — header edit affordance removed for now
+ * (data-viz widgets don't have an obvious "edit" action the way settings fields do); revisit
+ * once the data-viz card's real header actions (menu, caption, footer stat) are designed.
+ */
+@Component({
+  tag: 'ds-card-data-viz',
+  styleUrl: 'CardDataViz.css',
+  scoped: true,
+})
+export class CardDataViz {
+  @Element() el!: HTMLElement;
+
+  /** Widget heading shown in the card header. */
+  @Prop() heading!: string;
+
+  /** Card width token. */
+  @Prop() cardWidth: CardDataVizWidth = 'md';
+
+  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —
+  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling
+  // padded box plus a body gap next to nothing.
+  @State() private hasChartSlot = false;
+  @State() private hasLegendSlot = false;
+
+  componentWillRender() {
+    this.hasChartSlot = !!this.el.querySelector(':scope > [slot="chart"]');
+    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot="legend"]');
+  }
+
+  componentDidLoad() {
+    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any
+    // ds-chart-* + ds-chart-legend pair cross-highlights without every consumer having to
+    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted
+    // elements) since Stencil events bubble and the slot content can be swapped at runtime.
+    this.el.addEventListener('dsSliceHover', this.handleChartHover);
+    this.el.addEventListener('dsItemHover', this.handleLegendHover);
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('dsSliceHover', this.handleChartHover);
+    this.el.removeEventListener('dsItemHover', this.handleLegendHover);
+  }
+
+  private handleChartHover = (e: Event) => {
+    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates
+    // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so
+    // they're no longer direct children of the host by the time this fires.
+    const legend = this.el.querySelector('[slot="legend"]') as SyncableSlot | null;
+    if (!legend || !('activeLabel' in legend)) return;
+    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
+
+  private handleLegendHover = (e: Event) => {
+    const chart = this.el.querySelector('[slot="chart"]') as SyncableSlot | null;
+    if (!chart || !('activeLabel' in chart)) return;
+    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
+
+  render() {
+    return (
+      <Host class="card-data-viz" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>
+        <header class="card-data-viz__header">
+          <div class="card-data-viz__title-wrap">
+            <ds-text class="card-data-viz__title" variant="text-title-small" color="primary" as="h2">
+              {this.heading}
+            </ds-text>
+          </div>
+        </header>
+        <div class="card-data-viz__body">
+          {this.hasChartSlot && (
+            <div class="card-data-viz__chart-region">
+              <slot name="chart" />
+            </div>
+          )}
+          {this.hasLegendSlot && (
+            <div class="card-data-viz__legend-region">
+              <slot name="legend" />
+            </div>
+          )}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/CardDataViz/index.ts

@@ -0,0 +1 @@
+export type { CardDataVizWidth } from './CardDataViz';