@ds-mo/ui 2.12.0 → 2.13.0

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

@@ -1,14 +1,7 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import type { CardWidth } from '../Card/Card';
 
-export type CardSettingWidth = 'sm' | 'md' | 'lg';
-
-const CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {
-  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',
@@ -19,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. */
@@ -40,41 +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 variant="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 variant="icon"
+            <div slot="actions" class="card-setting__actions">
+              <ds-button-unfilled
+                variant="icon"
                 type="button"
                 icon="Cross"
                 backgroundContrast="bold"
                 aria-label="Cancel"
                 onDsClick={this.exitEdit}
               />
-              <ds-button-filled variant="icon"
+              <ds-button-filled
+                variant="icon"
                 type="button"
                 icon="Check"
                 intent="brand"
@@ -84,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,8 @@ 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;
@@ -22,9 +24,17 @@ type DonutTooltipState = {
   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). */
@@ -50,6 +60,8 @@ export class ChartDonut {
   /** 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>;
@@ -57,6 +69,79 @@ export class ChartDonut {
   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);
+  }
+
+  /** 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;
@@ -76,14 +161,21 @@ export class ChartDonut {
   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 : this.size / 2;
-    const y = event ? event.clientY - rect.top : this.size / 2;
+    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;
@@ -105,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;
@@ -146,21 +239,29 @@ export class ChartDonut {
     const fullValueText = this.centerValue ?? formatCompactNumber(total);
     const fullCaptionText = this.centerCaption ?? '';
     const tip = this.tooltip;
+    const fill = this.isFillMode;
 
     return (
-      <Host class="chart-donut">
+      <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={{ width: `${this.size}px`, height: `${this.size}px` }}
+          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 ? (

package/src/wc/components/Select/Select.tsx

@@ -1,4 +1,6 @@
 import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
 import type { MenuItemData } from '../Menu/menu-types';
 
 export interface SelectOption {
@@ -6,6 +8,28 @@ export interface SelectOption {
   value: string;
 }
 
+export type SelectSize = 'md' | 'sm' | 'xs';
+
+export type SelectWidth = ControlWidth;
+
+/** Regular (non-emphasis) type per density — selects stay visually lighter than buttons. */
+const TEXT_VARIANT: Record<SelectSize, string> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};
+
+/** `ds-icon` size matching control-density icon metrics. */
+const ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {
+  md: 'md',
+  sm: 'sm',
+  xs: 'xs',
+};
+
+/**
+ * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
+ * control-density sizes, with `ds-menu` for the option list.
+ */
 @Component({
   tag: 'ds-select',
   styleUrl: 'Select.css',
@@ -24,11 +48,28 @@ export class Select {
   @Prop({ mutable: true }) value: string = '';
 
   /** Placeholder shown when no value is selected. */
-  @Prop() placeholder: string = 'Select option';
+  @Prop() placeholder: string = 'Select';
+
+  /** Control density (height, padding, icon, type). */
+  @Prop() size: SelectSize = 'md';
+
+  /** Width fit — fill the parent (default) or hug content. */
+  @Prop() width: SelectWidth = 'fill';
 
   /** Disables interaction (25% opacity via ds-control-inactive). */
   @Prop() isInactive: boolean = false;
 
+  /**
+   * When a value is selected, render the selected interaction fill (same recipe
+   * as unfilled-button `activeFill`). Default `true`. Pass `false` for
+   * foreground-only selection (primary label, no fill).
+   * Selected/open promotes the label to primary; chevron stays secondary.
+   */
+  @Prop() activeFill: boolean = true;
+
+  /** Show a 1px secondary inset border. Default on (matches unfilled button). */
+  @Prop() hasBorder: boolean = true;
+
   @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
   @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
 
@@ -39,32 +80,28 @@ export class Select {
 
   private triggerEl: HTMLButtonElement | null = null;
   private menuEl: HTMLDsMenuElement | null = null;
+  /** True when the open was keyboard-driven — menu shows initial focus ring. */
+  private openWithFocusVisible = false;
 
   componentDidLoad() {
-    // Wire up the menu anchor to the trigger button
     if (this.menuEl && this.triggerEl) {
       this.menuEl.anchor = this.triggerEl;
     }
-    // Listen for menu selection events
-    this.menuEl?.addEventListener('dsSelect', (e: Event) => {
-      const detail = (e as CustomEvent<MenuItemData>).detail;
-      if (detail?.value !== undefined) {
-        this.value = String(detail.value);
-        this.dsChange.emit(this.value);
-      }
-      this.isOpen = false;
-    });
-    // Listen for menu close event
-    this.menuEl?.addEventListener('dsClose', () => {
-      this.isOpen = false;
-    });
+    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);
+    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);
+    this.syncMenuItems();
+  }
+
+  disconnectedCallback() {
+    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);
+    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);
   }
 
   @Watch('isOpen')
   onIsOpenChange(open: boolean) {
-    if (this.menuEl) {
-      this.menuEl.open = open;
-    }
+    if (!this.menuEl) return;
+    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;
+    this.menuEl.open = open;
   }
 
   @Watch('options')
@@ -77,6 +114,19 @@ export class Select {
     this.syncMenuItems();
   }
 
+  private handleMenuSelect = (e: Event) => {
+    const detail = (e as CustomEvent<MenuItemData>).detail;
+    if (detail?.value !== undefined) {
+      this.value = String(detail.value);
+      this.dsChange.emit(this.value);
+    }
+    this.close();
+  };
+
+  private handleMenuClose = () => {
+    this.close();
+  };
+
   private syncMenuItems() {
     if (!this.menuEl) return;
     this.menuEl.items = this.options.map(opt => ({
@@ -86,32 +136,46 @@ export class Select {
     }));
   }
 
-  private open() {
+  /**
+   * Size/place the menu so option labels line up with the select label.
+   * Menu section padding insets items; we expand min-width by that chrome and
+   * shift left by the same amount (`alignOffset`). Menu can grow wider than
+   * the field (left-bottom / `align="start"`) when labels need more room.
+   */
+  private syncMenuLayout() {
+    if (!this.menuEl || !this.triggerEl) return;
+    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);
+    const triggerW = this.triggerEl.offsetWidth;
+    // Prefer min-width over fixed width so long options can grow the menu.
+    this.menuEl.menuWidth = '';
+    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;
+    this.menuEl.alignOffset = -sectionPadPx;
+    this.menuEl.anchor = this.triggerEl;
+  }
+
+  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {
     if (this.isInactive || !this.options.length) return;
-    // Sync menu width to trigger width
-    if (this.menuEl && this.triggerEl) {
-      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;
-      this.menuEl.anchor = this.triggerEl;
-    }
+    this.openWithFocusVisible = opts.focusVisible;
+    this.syncMenuLayout();
     this.syncMenuItems();
     this.isOpen = true;
   }
 
   private close() {
     this.isOpen = false;
+    this.openWithFocusVisible = false;
   }
 
-  private toggle() {
+  private toggle(opts: { focusVisible: boolean }) {
     if (this.isOpen) {
       this.close();
     } else {
-      this.open();
+      this.open(opts);
     }
   }
 
   @Listen('keydown')
   handleKeyDown(e: KeyboardEvent) {
-    // Only handle keydown on the trigger button
     if (document.activeElement !== this.triggerEl) return;
 
     if (!this.isOpen) {
@@ -121,67 +185,84 @@ export class Select {
         case 'Enter':
         case ' ':
           e.preventDefault();
-          this.open();
+          this.open({ focusVisible: true });
           break;
       }
-    } else {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.close();
-        this.triggerEl?.focus();
-      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.close();
+      this.triggerEl?.focus();
     }
   }
 
   private get selectedLabel(): string {
-    const found = this.options.find(o => o.value === this.value);
-    return found?.label ?? '';
+    return this.options.find(o => o.value === this.value)?.label ?? '';
   }
 
   private get hasSelection(): boolean {
-    return !!this.options.find(o => o.value === this.value);
+    return this.options.some(o => o.value === this.value);
   }
 
   render() {
-    const label = this.hasSelection ? this.selectedLabel : this.placeholder;
     const showPlaceholder = !this.hasSelection;
+    const hasValue = !showPlaceholder;
+    const label = showPlaceholder ? this.placeholder : this.selectedLabel;
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+    const density = `ds-control--${this.size}`;
+    // Selected fill when a value is set (or while open), gated by `activeFill`.
+    const showSelectedFill =
+      !this.isInactive && this.activeFill && (hasValue || this.isOpen);
 
     return (
-      <Host class={{ 'select-host': true, 'ds-control-inactive': this.isInactive }}>
+      <Host
+        class={{
+          'select-host': true,
+          'ds-control-inactive': this.isInactive,
+          'ds-control--md': this.size === 'md',
+          'ds-control--sm': this.size === 'sm',
+          'ds-control--xs': this.size === 'xs',
+          ...controlWidthClass(this.width),
+        }}
+      >
         <button
           ref={el => {
             this.triggerEl = (el as HTMLButtonElement) ?? null;
           }}
           type="button"
-          class={{ trigger: true, 'trigger--open': this.isOpen }}
+          class={{
+            trigger: true,
+            'ds-focus-ring-inset': true,
+            'ds-interaction-fill': true,
+            'ds-interaction-fill--selected': showSelectedFill,
+            'trigger--open': this.isOpen,
+            'trigger--bordered': this.hasBorder,
+            'trigger--placeholder': showPlaceholder,
+            'trigger--has-value': hasValue,
+            [density]: true,
+          }}
           disabled={this.isInactive}
           role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={this.isOpen}
+          aria-haspopup="menu"
+          aria-expanded={String(this.isOpen)}
           aria-label={this.ariaLabel}
           aria-labelledby={this.ariaLabelledby}
-          onClick={() => this.toggle()}
+          onClick={() => this.toggle({ focusVisible: false })}
         >
-          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>
+          <span
+            class={{
+              'trigger__label': true,
+              [textVariant]: true,
+              'ds-interaction-fill__content': true,
+            }}
+          >
             {label}
           </span>
-          <svg
-            class="trigger__chevron"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            aria-hidden="true"
-          >
-            <path
-              d="M4 6L8 10L12 6"
-              stroke="currentColor"
-              stroke-width="1.25"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+          <span class="trigger__chevron ds-interaction-fill__content" aria-hidden="true">
+            <ds-icon name="ChevronDown" size={iconSize} color="inherit" />
+          </span>
         </button>
+        {/* bottom + start: left-aligned under the field; wider menus grow right. */}
         <ds-menu
           ref={el => {
             this.menuEl = (el as HTMLDsMenuElement) ?? null;

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

@@ -0,0 +1 @@
+export type { SelectOption, SelectSize, SelectWidth } from './Select';