@ds-mo/ui 2.11.2 → 2.13.0

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 = 'xs' | '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,31 +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> = {
-  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.
+ * 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
@@ -41,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);
@@ -61,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;
@@ -74,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';

package/src/wc/components/CardSetting/CardSetting.tsx

@@ -1,15 +1,7 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import type { CardWidth } from '../Card/Card';
 
-export type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';
-
-const CARD_WIDTH_VARS: Record<CardSettingWidth, 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)',
-};
-
-const FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';
+export type CardSettingWidth = CardWidth;
 
 @Component({
   tag: 'ds-card-setting',
@@ -20,7 +12,11 @@ export class CardSetting {
   /** Section heading shown in the card header. */
   @Prop() heading!: string;
 
-  /** Card width token. */
+  /**
+   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
+   * matching `--dimension-card-height-*` so the body fills available space
+   * even when the slot is empty.
+   */
   @Prop() cardWidth: CardSettingWidth = 'md';
 
   /** Controlled edit state — parent owns single-edit orchestration. */
@@ -41,42 +37,33 @@ export class CardSetting {
     const editing = this.editing;
 
     return (
-      <Host
-        class={{
-          'card-setting': true,
-          'card-setting--editing': editing,
-        }}
-        style={{ '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth] }}
-      >
-        <header class="card-setting__header">
-          <div class="card-setting__title-wrap">
-            <ds-text
-              class="card-setting__title"
-              variant="text-title-small"
-              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
-              as="h2"
-            >
-              {this.heading}
-            </ds-text>
-          </div>
+      <Host class="card-setting">
+        <ds-card
+          heading={this.heading}
+          cardWidth={this.cardWidth}
+          appearance={editing ? 'editing' : 'default'}
+        >
           {!editing ? (
-            <ds-button-unfilled-icon
+            <ds-button-unfilled
+              slot="actions"
+              variant="icon"
               type="button"
               icon="Pencil"
               aria-label="Edit"
               onDsClick={this.enterEdit}
             />
           ) : (
-            <div class="card-setting__actions">
-              <ds-button-unfilled-icon
+            <div slot="actions" class="card-setting__actions">
+              <ds-button-unfilled
+                variant="icon"
                 type="button"
                 icon="Cross"
                 backgroundContrast="bold"
-                has-border
                 aria-label="Cancel"
                 onDsClick={this.exitEdit}
               />
               <ds-button-filled
+                variant="icon"
                 type="button"
                 icon="Check"
                 intent="brand"
@@ -86,10 +73,8 @@ export class CardSetting {
               />
             </div>
           )}
-        </header>
-        <div class="card-setting__body">
           <slot />
-        </div>
+        </ds-card>
       </Host>
     );
   }

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
 import { arc, pie } from 'd3-shape';
 import { categoryColor } from '../../utils/chart-colors';
 import { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';
@@ -9,6 +9,14 @@ const DIMMED_OPACITY = 0.25;
 const CENTER_GAP_PX = 0;
 /** Fraction of the inner-circle diameter center text is allowed to use before truncating. */
 const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
+/** Fallback when filling before the first ResizeObserver measurement (matches fill min). */
+const FILL_FALLBACK_PX = 128;
+
+type DonutTooltipState = {
+  datum: ChartDatum;
+  x: number;
+  y: number;
+};
 
 @Component({
   tag: 'ds-chart-donut',
@@ -16,9 +24,17 @@ const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
   scoped: true,
 })
 export class ChartDonut {
+  @Element() el!: HTMLElement;
+
   /** Slices to render. Set as a JS property (not an HTML attribute). */
   @Prop() data: ChartDatum[] = [];
-  @Prop() size: number = 175;
+  /**
+   * Explicit diameter in px. When unset, the donut sizes to its container
+   * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and
+   * `* 24` (192px), and stays centered in the leftover space. Prefer unset
+   * inside card layouts.
+   */
+  @Prop() size: number | undefined;
   /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */
   @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;
   /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */
@@ -33,27 +49,133 @@ export class ChartDonut {
    * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
    * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
    * Falls back to this component's own pointer/focus hover when unset.
+   * External sync dims slices only — the data-viz tooltip is reserved for this
+   * component's own pointer/keyboard interaction.
    */
   @Prop() activeLabel: string | null = null;
 
   @State() private hoveredLabel: string | null = null;
+  /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */
+  @State() private tooltip: DonutTooltipState | null = null;
   /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
   @State() private displayedValueText: string = '';
   @State() private displayedCaptionText: string = '';
+  /** Measured fill diameter when `size` is unset. */
+  @State() private measuredSize: number = FILL_FALLBACK_PX;
 
   /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
   @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;
 
   private valueTextEl?: SVGTextElement;
   private captionTextEl?: SVGTextElement;
+  private wrapperEl?: HTMLDivElement;
+  private resizeObserver: ResizeObserver | null = null;
+
+  private get isFillMode(): boolean {
+    return this.size == null || !Number.isFinite(this.size) || this.size <= 0;
+  }
+
+  private get fillMinPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMin, FILL_FALLBACK_PX);
+  }
+
+  private get fillMaxPx(): number {
+    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMax, 192);
+  }
 
-  private handleHover(datum: ChartDatum | null) {
+  /** Clamp available square side into the fill min/max band. */
+  private clampFillSize(availablePx: number): number {
+    const minPx = this.fillMinPx;
+    const maxPx = this.fillMaxPx;
+    if (!(availablePx > 0)) return minPx;
+    return Math.round(Math.min(maxPx, Math.max(minPx, availablePx)));
+  }
+
+  private get resolvedSize(): number {
+    if (!this.isFillMode) return this.size as number;
+    return this.clampFillSize(this.measuredSize);
+  }
+
+  componentDidLoad() {
+    this.syncResizeObserver();
+  }
+
+  @Watch('size')
+  onSizePropChange() {
+    this.syncResizeObserver();
+  }
+
+  disconnectedCallback() {
+    this.teardownResizeObserver();
+  }
+
+  private syncResizeObserver() {
+    this.teardownResizeObserver();
+    if (!this.isFillMode) return;
+    // Observe the host (which fills its parent), not the wrapper — the wrapper
+    // only wraps the SVG and would collapse to the clamped size, locking fill at min.
+    const target = this.el;
+    if (!target || typeof ResizeObserver === 'undefined') return;
+
+    this.resizeObserver = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) return;
+      this.applyAvailableSize(entry.contentRect.width, entry.contentRect.height);
+    });
+    this.resizeObserver.observe(target);
+    this.measureHost();
+  }
+
+  private measureHost() {
+    const rect = this.el.getBoundingClientRect();
+    this.applyAvailableSize(rect.width, rect.height);
+  }
+
+  private applyAvailableSize(width: number, height: number) {
+    const available = Math.floor(Math.min(width, height));
+    if (available > 0 && available !== this.measuredSize) {
+      this.measuredSize = available;
+    }
+  }
+
+  private teardownResizeObserver() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  private handleHover(datum: ChartDatum | null, event?: MouseEvent) {
     this.hoveredLabel = datum?.label ?? null;
     this.dsSliceHover.emit(datum);
+    if (!datum) {
+      this.tooltip = null;
+      return;
+    }
+    this.updateTooltip(datum, event);
+  }
+
+  private handleSliceMove(datum: ChartDatum, event: MouseEvent) {
+    if (this.hoveredLabel !== datum.label) return;
+    this.updateTooltip(datum, event);
+  }
+
+  private updateTooltip(datum: ChartDatum, event?: MouseEvent) {
+    const wrapper = this.wrapperEl;
+    if (!wrapper) return;
+    const size = this.resolvedSize;
+    const rect = wrapper.getBoundingClientRect();
+    const x = event ? event.clientX - rect.left : size / 2;
+    const y = event ? event.clientY - rect.top : size / 2;
+    this.tooltip = { datum, x, y };
   }
 
   componentDidRender() {
-    const radius = this.size / 2;
+    // Re-bind after HMR when DidLoad's observer was dropped.
+    if (this.isFillMode && !this.resizeObserver) {
+      this.syncResizeObserver();
+    }
+
+    const size = this.resolvedSize;
+    const radius = size / 2;
     const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
     const innerRadius = radius - thicknessPx;
     const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;
@@ -75,7 +197,8 @@ export class ChartDonut {
   }
 
   render() {
-    const radius = this.size / 2;
+    const size = this.resolvedSize;
+    const radius = size / 2;
     const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
     const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);
     const innerRadius = radius - thicknessPx;
@@ -115,15 +238,30 @@ export class ChartDonut {
     // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
     const fullValueText = this.centerValue ?? formatCompactNumber(total);
     const fullCaptionText = this.centerCaption ?? '';
+    const tip = this.tooltip;
+    const fill = this.isFillMode;
 
     return (
-      <Host class="chart-donut">
-        <div class="chart-donut__wrapper" style={{ width: `${this.size}px`, height: `${this.size}px` }}>
+      <Host
+        class={{
+          'chart-donut': true,
+          'chart-donut--fill': fill,
+          'chart-donut--fixed': !fill,
+        }}
+        style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
+      >
+        <div
+          class="chart-donut__wrapper"
+          style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
+          ref={el => {
+            this.wrapperEl = (el as HTMLDivElement) ?? undefined;
+          }}
+        >
           <svg
             class="chart-donut__svg"
-            viewBox={`0 0 ${this.size} ${this.size}`}
-            width={this.size}
-            height={this.size}
+            viewBox={`0 0 ${size} ${size}`}
+            width={size}
+            height={size}
           >
             <g transform={`translate(${radius}, ${radius})`}>
               {isEmpty ? (
@@ -141,7 +279,8 @@ export class ChartDonut {
                       tabindex={0}
                       role="img"
                       aria-label={`${datum.label}: ${datum.value}`}
-                      onMouseEnter={() => this.handleHover(datum)}
+                      onMouseEnter={(e: MouseEvent) => this.handleHover(datum, e)}
+                      onMouseMove={(e: MouseEvent) => this.handleSliceMove(datum, e)}
                       onMouseLeave={() => this.handleHover(null)}
                       onFocus={() => this.handleHover(datum)}
                       onBlur={() => this.handleHover(null)}
@@ -177,6 +316,15 @@ export class ChartDonut {
               </text>
             )}
           </svg>
+          {tip && (
+            <ds-tooltip-data-viz
+              key={tip.datum.label}
+              label={tip.datum.label}
+              value={formatCompactNumber(tip.datum.value)}
+              x={tip.x}
+              y={tip.y}
+            />
+          )}
         </div>
       </Host>
     );

package/src/wc/components/ChartLegend/ChartLegend.tsx

@@ -73,6 +73,9 @@ export class ChartLegend {
                   class={{
                     'chart-legend__item': true,
                     'chart-legend__item--interactive': !!item.href,
+                    'ds-control--md': true,
+                    'ds-interaction-fill': true,
+                    'ds-focus-ring-inset': !!item.href,
                   }}
                   style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}
                   href={item.href}

package/src/wc/components/Checkbox/Checkbox.tsx

@@ -13,12 +13,12 @@ export class Checkbox {
   @Prop() label!: string;
   @Prop({ mutable: true }) checked: boolean = false;
   @Prop() indeterminate: boolean = false;
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   @Event() dsChange!: EventEmitter<boolean>;
 
   private handleActivate = () => {
-    if (this.inactive) return;
+    if (this.isInactive) return;
     this.checked = !this.checked;
     this.dsChange.emit(this.checked);
   };
@@ -37,10 +37,10 @@ export class Checkbox {
       <Host
         role="checkbox"
         aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}
-        aria-disabled={this.inactive || undefined}
+        aria-disabled={this.isInactive || undefined}
         aria-labelledby={this.labelId}
-        tabIndex={this.inactive ? -1 : 0}
-        class={{ checkbox: true, inactive: this.inactive }}
+        tabIndex={this.isInactive ? -1 : 0}
+        class={{ checkbox: true, 'ds-control-inactive': this.isInactive }}
         onClick={this.handleActivate}
         onKeyDown={this.handleKeyDown}
       >