@ds-mo/ui 2.12.0 → 2.13.0

package/dist/types/utils/control-width.d.ts

@@ -0,0 +1,5 @@
+/** Shared width fit for interactive controls (buttons, select, …). */
+export type ControlWidth = 'hug' | 'fill';
+/** Host / control class map for `width="hug" | "fill"`. */
+export declare function controlWidthClass(width: ControlWidth): Record<string, boolean>;
+//# sourceMappingURL=control-width.d.ts.map

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

@@ -7,4 +7,6 @@ export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdg
 export type { ScrollEdgeFadeEdge, ScrollEdgeFadeOptions, ScrollEdgeFadeSize, ScrollEdgeFadeSizeToken, } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
+export { controlWidthClass } from './control-width';
+export type { ControlWidth } from './control-width';
 //# sourceMappingURL=index.d.ts.map

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

@@ -33,6 +33,10 @@ export declare const TOKEN_DEFAULTS: {
     readonly menuFallbackHeight: "calc(var(--dimension-size-base) * 20)";
     /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
     readonly tooltipFallbackWidth: "calc(var(--dimension-size-800) + var(--dimension-size-200))";
+    /** Fill-mode donut diameter floor: 16× size-base (128px). */
+    readonly donutFillMin: "calc(var(--dimension-size-base) * 16)";
+    /** Fill-mode donut diameter ceiling: 24× size-base (192px). */
+    readonly donutFillMax: "calc(var(--dimension-size-base) * 24)";
 };
 export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;
 /** Valid CSS length strings for overlay offset props — bind on `sideOffset` / `alignOffset` in hosts. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -67,7 +67,7 @@
     "prebuild": "node scripts/generate-icon-catalog.mjs",
     "pretypecheck": "node scripts/generate-icon-catalog.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
-    "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/patch-components-d-exports.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs",
+    "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
     "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
     "test:e2e": "npm run build && playwright test",

package/src/angular/index.ts

@@ -8,7 +8,8 @@ export const DIRECTIVES = [
   d.DsBarNav,
   d.DsButtonFilled,
   d.DsButtonUnfilled,
-  d.DsCardDataViz,
+  d.DsCard,
+  d.DsCardDataVizDonut,
   d.DsCardSetting,
   d.DsChartBar,
   d.DsChartDonut,
@@ -19,7 +20,6 @@ export const DIRECTIVES = [
   d.DsDivider,
   d.DsEmptyState,
   d.DsField,
-  d.DsHeader,
   d.DsIcon,
   d.DsInput,
   d.DsLoader,
@@ -29,7 +29,6 @@ export const DIRECTIVES = [
   d.DsPanelNav,
   d.DsPanelTools,
   d.DsRadioGroup,
-  d.DsScrollbar,
   d.DsSelect,
   d.DsShellGradientPicker,
   d.DsShellGradientSwatch,

package/src/angular/proxies.ts

@@ -112,7 +112,7 @@ export declare interface DsBarNav extends Components.DsBarNav {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant'],
+  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant', 'width'],
   methods: ['setFocus']
 })
 @Component({
@@ -120,7 +120,7 @@ export declare interface DsBarNav extends Components.DsBarNav {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant'],
+  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant', 'width'],
   outputs: ['dsClick'],
   standalone: false
 })
@@ -141,7 +141,7 @@ export declare interface DsButtonFilled extends Components.DsButtonFilled {
 
 
 @ProxyCmp({
-  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
   methods: ['setFocus']
 })
 @Component({
@@ -149,7 +149,7 @@ export declare interface DsButtonFilled extends Components.DsButtonFilled {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
   outputs: ['dsClick', 'dsChange'],
   standalone: false
 })
@@ -172,19 +172,44 @@ export declare interface DsButtonUnfilled extends Components.DsButtonUnfilled {
 }
 
 
+@ProxyCmp({
+  inputs: ['appearance', 'cardWidth', 'heading']
+})
+@Component({
+  selector: 'ds-card',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['appearance', 'cardWidth', { name: 'heading', required: true }],
+  standalone: false
+})
+export class DsCard {
+  protected el: HTMLDsCardElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsCard extends Components.DsCard {}
+
+
 @ProxyCmp({
   inputs: ['cardWidth', 'heading']
 })
 @Component({
-  selector: 'ds-card-data-viz',
+  selector: 'ds-card-data-viz-donut',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['cardWidth', { name: 'heading', required: true }],
+  outputs: ['dsFilterClick'],
   standalone: false
 })
-export class DsCardDataViz {
-  protected el: HTMLDsCardDataVizElement;
+export class DsCardDataVizDonut {
+  protected el: HTMLDsCardDataVizDonutElement;
+  @Output() dsFilterClick = new EventEmitter<CustomEvent<void>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -192,7 +217,12 @@ export class DsCardDataViz {
 }
 
 
-export declare interface DsCardDataViz extends Components.DsCardDataViz {}
+export declare interface DsCardDataVizDonut extends Components.DsCardDataVizDonut {
+  /**
+   * Emits when the header filter control is activated.
+   */
+  dsFilterClick: EventEmitter<CustomEvent<void>>;
+}
 
 
 @ProxyCmp({
@@ -467,29 +497,6 @@ export class DsField {
 export declare interface DsField extends Components.DsField {}
 
 
-@ProxyCmp({
-  inputs: ['background', 'heading']
-})
-@Component({
-  selector: 'ds-header',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['background', 'heading'],
-  standalone: false
-})
-export class DsHeader {
-  protected el: HTMLDsHeaderElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsHeader extends Components.DsHeader {}
-
-
 @ProxyCmp({
   inputs: ['color', 'flag', 'label', 'name', 'size']
 })
@@ -791,37 +798,14 @@ export declare interface DsRadioGroup extends Components.DsRadioGroup {
 
 
 @ProxyCmp({
-  inputs: ['showTrackOnHover', 'variant']
-})
-@Component({
-  selector: 'ds-scrollbar',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['showTrackOnHover', 'variant'],
-  standalone: false
-})
-export class DsScrollbar {
-  protected el: HTMLDsScrollbarElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsScrollbar extends Components.DsScrollbar {}
-
-
-@ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'isInactive', 'options', 'placeholder', 'value']
+  inputs: ['activeFill', 'ariaLabel', 'ariaLabelledby', 'hasBorder', 'isInactive', 'options', 'placeholder', 'size', 'value', 'width']
 })
 @Component({
   selector: 'ds-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'isInactive', 'options', 'placeholder', 'value'],
+  inputs: ['activeFill', 'ariaLabel', 'ariaLabelledby', 'hasBorder', 'isInactive', 'options', 'placeholder', 'size', 'value', 'width'],
   outputs: ['dsChange'],
   standalone: false
 })

package/src/react/components.ts

@@ -10,8 +10,9 @@ export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
-export { DsCardDataViz } from "./ds-card-data-viz.js";
+export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.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";
@@ -21,7 +22,6 @@ export { DsChip } from "./ds-chip.js";
 export { DsDivider } from "./ds-divider.js";
 export { DsEmptyState } from "./ds-empty-state.js";
 export { DsField } from "./ds-field.js";
-export { DsHeader } from "./ds-header.js";
 export { DsIcon } from "./ds-icon.js";
 export { DsInput } from "./ds-input.js";
 export { DsLoader } from "./ds-loader.js";
@@ -31,7 +31,6 @@ export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadioGroup } from "./ds-radio-group.js";
-export { DsScrollbar } from "./ds-scrollbar.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";

package/src/react/ds-card-data-viz-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 DsCardDataVizDonutCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataVizDonut as DsCardDataVizDonutElement, defineCustomElement as defineDsCardDataVizDonut } from "@ds-mo/ui/dist/components/ds-card-data-viz-donut.js";
+
+export type DsCardDataVizDonutEvents = { onDsFilterClick: EventName<DsCardDataVizDonutCustomEvent<void>> };
+
+export const DsCardDataVizDonut: StencilReactComponent<DsCardDataVizDonutElement, DsCardDataVizDonutEvents, Components.DsCardDataVizDonut> = /*@__PURE__*/ createComponent<DsCardDataVizDonutElement, DsCardDataVizDonutEvents, Components.DsCardDataVizDonut>({
+    tagName: 'ds-card-data-viz-donut',
+    elementClass: DsCardDataVizDonutElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsFilterClick: 'dsFilterClick' } as DsCardDataVizDonutEvents,
+    defineCustomElement: defineDsCardDataVizDonut
+});

package/src/react/{ds-header.ts → ds-card.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 { DsHeader as DsHeaderElement, defineCustomElement as defineDsHeader } from "@ds-mo/ui/dist/components/ds-header.js";
+import { DsCard as DsCardElement, defineCustomElement as defineDsCard } from "@ds-mo/ui/dist/components/ds-card.js";
 
-export type DsHeaderEvents = NonNullable<unknown>;
+export type DsCardEvents = NonNullable<unknown>;
 
-export const DsHeader: StencilReactComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader> = /*@__PURE__*/ createComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader>({
-    tagName: 'ds-header',
-    elementClass: DsHeaderElement,
+export const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard> = /*@__PURE__*/ createComponent<DsCardElement, DsCardEvents, Components.DsCard>({
+    tagName: 'ds-card',
+    elementClass: DsCardElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as DsHeaderEvents,
-    defineCustomElement: defineDsHeader
+    events: {} as DsCardEvents,
+    defineCustomElement: defineDsCard
 });

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
 
 export type ButtonFilledIntent =
   | 'neutral'
@@ -17,6 +18,8 @@ export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
 
 export type ButtonFilledSize = 'md' | 'sm' | 'xs';
 
+export type ButtonFilledWidth = ControlWidth;
+
 /** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
 const TEXT_VARIANT: Record<ButtonFilledSize, string> = {
   md: 'text-body-medium-emphasis',
@@ -51,6 +54,9 @@ export class ButtonFilled {
   /** Control density (height, padding, icon, type). */
   @Prop() size: ButtonFilledSize = 'md';
 
+  /** Width fit — hug content (default) or fill the parent. */
+  @Prop() width: ButtonFilledWidth = 'hug';
+
   /** Visible text for `label` / `icon-label` variants. */
   @Prop() label: string = '';
 
@@ -135,6 +141,7 @@ export class ButtonFilled {
           'ds-control--md': this.size === 'md',
           'ds-control--sm': this.size === 'sm',
           'ds-control--xs': this.size === 'xs',
+          ...controlWidthClass(this.width),
         }}
         tabIndex={-1}
       >

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

@@ -3,4 +3,5 @@ export type {
   ButtonFilledIntent,
   ButtonFilledSize,
   ButtonFilledVariant,
+  ButtonFilledWidth,
 } from './ButtonFilled';

package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx

@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
 
 export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
 
@@ -8,6 +9,8 @@ export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
 
 export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
 
+export type ButtonUnfilledWidth = ControlWidth;
+
 /** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
 const TEXT_VARIANT: Record<ButtonUnfilledSize, string> = {
   md: 'text-body-medium-emphasis',
@@ -42,23 +45,26 @@ export class ButtonUnfilled {
   /** Control density (height, padding, icon, type). */
   @Prop() size: ButtonUnfilledSize = 'md';
 
+  /** Width fit — hug content (default) or fill the parent. */
+  @Prop() width: ButtonUnfilledWidth = 'hug';
+
   /** Visible text for `label` / `icon-label` variants. */
   @Prop() label: string = '';
 
   /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
   @Prop() icon: string = '';
 
-  /** Active/selected visual state. */
+  /** Active/selected visual state. Always promotes foreground to primary. */
   @Prop() isActive: boolean = false;
 
   /**
    * When active, render the selected interaction fill.
    * Default `true` for general UI. Shell chrome (nav / tool rails) should pass
-   * `false` so selection is foreground-only.
+   * `false` so selection is foreground-only (primary color, no fill).
    */
   @Prop() activeFill: boolean = true;
 
-  /** Show a 1px tertiary inset border. Default on; shell chrome can pass `false`. */
+  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */
   @Prop() hasBorder: boolean = true;
 
   /** Show a notification dot at the top-right of the icon zone (icon variant only). */
@@ -179,6 +185,7 @@ export class ButtonUnfilled {
           'ds-control--md': this.size === 'md',
           'ds-control--sm': this.size === 'sm',
           'ds-control--xs': this.size === 'xs',
+          ...controlWidthClass(this.width),
         }}
         tabIndex={-1}
       >

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

@@ -3,4 +3,5 @@ export type {
   ButtonUnfilledOnBackgroundContrast,
   ButtonUnfilledSize,
   ButtonUnfilledVariant,
+  ButtonUnfilledWidth,
 } from './ButtonUnfilled';

package/src/wc/components/Card/Card.tsx

@@ -0,0 +1,79 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+export type CardWidth = 'sm' | 'md' | 'lg';
+
+/** Visual chrome recipe — default app surface, or settings edit wash. */
+export type CardAppearance = 'default' | 'editing';
+
+const CARD_WIDTH_VARS: Record<CardWidth, string> = {
+  sm: 'var(--dimension-card-width-sm)',
+  md: 'var(--dimension-card-width-md)',
+  lg: 'var(--dimension-card-width-lg)',
+};
+
+const CARD_HEIGHT_VARS: Record<CardWidth, string> = {
+  sm: 'var(--dimension-card-height-sm)',
+  md: 'var(--dimension-card-height-md)',
+  lg: 'var(--dimension-card-height-lg)',
+};
+
+const FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';
+
+/**
+ * Shared card chrome — width + matching min-height tokens, header (title + actions),
+ * and a flex body that fills leftover space. Compose this from settings / data-viz cards.
+ */
+@Component({
+  tag: 'ds-card',
+  styleUrl: 'Card.css',
+  scoped: true,
+})
+export class Card {
+  /** Section heading shown in the card header. */
+  @Prop() heading!: string;
+
+  /**
+   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
+   * matching `--dimension-card-height-*` so empty bodies still fill the card.
+   */
+  @Prop() cardWidth: CardWidth = 'md';
+
+  /** Chrome recipe — `editing` applies the settings edit wash. */
+  @Prop() appearance: CardAppearance = 'default';
+
+  render() {
+    const editing = this.appearance === 'editing';
+
+    return (
+      <Host
+        class={{
+          card: true,
+          'card--editing': editing,
+        }}
+        style={{
+          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],
+          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],
+        }}
+      >
+        <header class="card__header">
+          <div class="card__title-wrap">
+            <ds-text
+              class="card__title"
+              variant="text-title-small"
+              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
+              as="h2"
+            >
+              {this.heading}
+            </ds-text>
+          </div>
+          <div class="card__actions">
+            <slot name="actions" />
+          </div>
+        </header>
+        <div class="card__body">
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { CardWidth, CardAppearance } from './Card';

package/src/wc/components/{CardDataViz/CardDataViz.tsx → CardDataVizDonut/CardDataVizDonut.tsx}

@@ -1,6 +1,7 @@
-import { Component, Element, State, h, Host, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';
+import type { CardWidth } from '../Card/Card';
 
-export type CardDataVizWidth = 'sm' | 'md' | 'lg';
+export type CardDataVizDonutWidth = CardWidth;
 
 /** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */
 type HoveredDatum = { label: string } | null;
@@ -8,30 +9,26 @@ 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> = {
-  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.
+ * Donut data-viz card — shared `ds-card` chrome with a fill chart region and
+ * content-sized legend. Hover sync between chart and legend stays here.
  */
 @Component({
-  tag: 'ds-card-data-viz',
-  styleUrl: 'CardDataViz.css',
+  tag: 'ds-card-data-viz-donut',
+  styleUrl: 'CardDataVizDonut.css',
   scoped: true,
 })
-export class CardDataViz {
+export class CardDataVizDonut {
   @Element() el!: HTMLElement;
 
   /** Widget heading shown in the card header. */
   @Prop() heading!: string;
 
-  /** Card width token. */
-  @Prop() cardWidth: CardDataVizWidth = 'md';
+  /** Card width token — also sets matching min-height. */
+  @Prop() cardWidth: CardDataVizDonutWidth = 'md';
+
+  /** Emits when the header filter control is activated. */
+  @Event() dsFilterClick!: EventEmitter<void>;
 
   // 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
@@ -40,13 +37,16 @@ export class CardDataViz {
   @State() private hasLegendSlot = false;
 
   componentWillRender() {
-    this.hasChartSlot = !!this.el.querySelector(':scope > [slot="chart"]');
-    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot="legend"]');
+    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into
+    // region wrappers (and here into nested `ds-card`), so they may not stay direct
+    // host children across renders.
+    this.hasChartSlot = !!this.el.querySelector('[slot="chart"]');
+    this.hasLegendSlot = !!this.el.querySelector('[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
+    // ds-chart-donut + 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);
@@ -60,8 +60,8 @@ export class CardDataViz {
 
   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.
+    // slotted children into an inner 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;
@@ -73,28 +73,35 @@ export class CardDataViz {
     chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
   };
 
+  private handleFilterClick = () => {
+    this.dsFilterClick.emit();
+  };
+
   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>
+      <Host class="card-data-viz-donut">
+        <ds-card heading={this.heading} cardWidth={this.cardWidth}>
+          <ds-button-unfilled
+            slot="actions"
+            variant="icon"
+            type="button"
+            icon="Filters"
+            aria-label="Filter"
+            onDsClick={this.handleFilterClick}
+          />
+          <div class="card-data-viz-donut__layout">
+            {this.hasChartSlot && (
+              <div class="card-data-viz-donut__chart-region">
+                <slot name="chart" />
+              </div>
+            )}
+            {this.hasLegendSlot && (
+              <div class="card-data-viz-donut__legend-region">
+                <slot name="legend" />
+              </div>
+            )}
           </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>
+        </ds-card>
       </Host>
     );
   }

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

@@ -0,0 +1 @@
+export type { CardDataVizDonutWidth } from './CardDataVizDonut';