@ds-mo/ui 3.0.0 → 3.1.0

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

@@ -1,125 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';
-import { categoryColor } from '../../utils/chart-colors';
-import { formatCompactNumber } from '../../utils';
-import type { ChartLegendItem } from '../../utils/chart-types';
-
-export type ChartLegendDirection = 'vertical' | 'horizontal';
-
-const DIMMED_OPACITY = 0.25;
-
-/**
- * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style
- * legends differently (list w/ values, compact chips, bare swatches, external
- * stat callouts) — this covers the common "swatch + label + optional value" case.
- * Consumers who need a different treatment skip this component entirely and
- * render their own markup against the same `ChartDatum[]` data.
- */
-@Component({
-  tag: 'ds-chart-legend',
-  styleUrl: 'ChartLegend.css',
-  scoped: true,
-})
-export class ChartLegend {
-  /** Legend entries. Set as a JS property (not an HTML attribute). */
-  @Prop() items: ChartLegendItem[] = [];
-  @Prop() direction: ChartLegendDirection = 'vertical';
-  /** Show each item's share of the total (of items with a `value`) alongside its count. */
-  @Prop() showPercentage: boolean = true;
-  /**
-   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
-   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other
-   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,
-   * since that's reserved for a real pointer/keyboard interaction on this row.
-   */
-  @Prop() activeLabel: string | null = null;
-
-  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a "you can
-   * click here" affordance) never shows just because an external row was synced in. */
-  @State() private hoveredLabel: string | null = null;
-
-  /** Fires on row hover/focus with the item, or `null` on leave/blur. */
-  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;
-  /** Fires when a deep-linkable row (`item.href` set) is activated. */
-  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;
-
-  private handleHover(item: ChartLegendItem | null) {
-    this.hoveredLabel = item?.label ?? null;
-    this.dsItemHover.emit(item);
-  }
-
-  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {
-    this.dsItemClick.emit({ item, originalEvent });
-  };
-
-  render() {
-    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);
-    // Highlight/dim from either this component's own hover or an externally-synced label
-    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.
-    const highlightLabel = this.activeLabel ?? this.hoveredLabel;
-
-    return (
-      <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>
-        {/* mouseleave lives on the list, not each row — the row-gap between items is still
-            inside the list's box, so crossing it while moving between rows never fires this.
-            Only actually leaving the whole list does, and that clears with no delay. */}
-        <ul class="chart-legend__list" onMouseLeave={() => this.handleHover(null)}>
-          {this.items.map((item, i) => {
-            const isDimmed = highlightLabel != null && item.label !== highlightLabel;
-            const RowTag = item.href ? 'a' : 'div';
-
-            return (
-              <li class="chart-legend__list-item" key={item.label}>
-                <RowTag
-                  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}
-                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}
-                  onMouseEnter={() => this.handleHover(item)}
-                  onFocus={() => this.handleHover(item)}
-                  onBlur={() => this.handleHover(null)}
-                >
-                  <span class="chart-legend__swatch-box">
-                    <span class="chart-legend__swatch" style={{ backgroundColor: item.color ?? categoryColor(i) }} />
-                  </span>
-                  <ds-text
-                    class="chart-legend__label"
-                    as="span"
-                    variant="text-body-medium"
-                    color="secondary"
-                    lineTruncation={1}
-                    title={item.label}
-                  >
-                    {item.label}
-                  </ds-text>
-                  {item.value != null && (
-                    <ds-text
-                      class="chart-legend__value"
-                      as="span"
-                      variant="text-body-medium"
-                      color="primary"
-                      lineTruncation={1}
-                      title={String(item.value)}
-                    >
-                      {formatCompactNumber(item.value)}
-                    </ds-text>
-                  )}
-                  {item.value != null && this.showPercentage && (
-                    <ds-text class="chart-legend__percentage" as="span" variant="text-body-medium" color="primary">
-                      {(total ? (item.value / total) * 100 : 0).toFixed(1)}%
-                    </ds-text>
-                  )}
-                </RowTag>
-              </li>
-            );
-          })}
-        </ul>
-      </Host>
-    );
-  }
-}

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

@@ -1,2 +0,0 @@
-export type { ChartLegendDirection } from './ChartLegend';
-export type { ChartLegendItem } from '../../utils/chart-types';

package/src/wc/components/ChartLine/ChartLine.tsx

@@ -1,102 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import { line as lineShape } from 'd3-shape';
-import { scaleLinear, scalePoint } from 'd3-scale';
-import { max } from 'd3-array';
-import { categoryColor } from '../../utils/chart-colors';
-import type { ChartSeries } from '../../utils/chart-types';
-
-const MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };
-
-@Component({
-  tag: 'ds-chart-line',
-  styleUrl: 'ChartLine.css',
-  scoped: true,
-})
-export class ChartLine {
-  /** One or more series to plot. Set as a JS property (not an HTML attribute). */
-  @Prop() series: ChartSeries[] = [];
-  /** X-axis labels — must match each series' `data` length. Set as a JS property. */
-  @Prop() categories: string[] = [];
-  @Prop() width: number = 480;
-  @Prop() height: number = 240;
-  @Prop() showPoints: boolean = true;
-
-  render() {
-    const innerWidth = this.width - MARGIN.left - MARGIN.right;
-    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;
-
-    const allValues = this.series.flatMap(s => s.data);
-    const yMax = max(allValues) ?? 0;
-
-    const xScale = scalePoint<number>()
-      .domain(this.categories.map((_, i) => i))
-      .range([0, innerWidth]);
-
-    const yScale = scaleLinear()
-      .domain([0, yMax || 1])
-      .range([innerHeight, 0])
-      .nice();
-
-    const lineGenerator = lineShape<number>()
-      .x((_, i) => xScale(i) ?? 0)
-      .y(d => yScale(d));
-
-    const yTicks = yScale.ticks(4);
-
-    return (
-      <Host class="chart-line">
-        <svg
-          class="chart-line__svg"
-          viewBox={`0 0 ${this.width} ${this.height}`}
-          width={this.width}
-          height={this.height}
-          role="img"
-          aria-label={this.series.map(s => s.name).join(', ')}
-        >
-          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>
-            {yTicks.map(tick => (
-              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>
-                <line class="chart-line__gridline" x1={0} x2={innerWidth} />
-                <text class="chart-line__axis-label" x={-8} text-anchor="end" dominant-baseline="middle">
-                  {tick}
-                </text>
-              </g>
-            ))}
-
-            {this.categories.map((label, i) => (
-              <text
-                key={`x-${label}`}
-                class="chart-line__axis-label"
-                x={xScale(i) ?? 0}
-                y={innerHeight + 16}
-                text-anchor="middle"
-              >
-                {label}
-              </text>
-            ))}
-
-            {this.series.map((s, si) => {
-              const color = s.color ?? categoryColor(si);
-              return (
-                <g key={s.name}>
-                  <path class="chart-line__path" d={lineGenerator(s.data) ?? undefined} stroke={color} />
-                  {this.showPoints &&
-                    s.data.map((d, i) => (
-                      <circle
-                        key={`${s.name}-${i}`}
-                        class="chart-line__point"
-                        cx={xScale(i) ?? 0}
-                        cy={yScale(d)}
-                        r={3}
-                        fill={color}
-                      />
-                    ))}
-                </g>
-              );
-            })}
-          </g>
-        </svg>
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { ChartSeries } from '../../utils/chart-types';

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

@@ -1,60 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-let idCounter = 0;
-
-@Component({
-  tag: 'ds-checkbox',
-  styleUrl: 'Checkbox.css',
-  scoped: true,
-})
-export class Checkbox {
-  private labelId = `ds-checkbox-label-${++idCounter}`;
-
-  @Prop() label!: string;
-  @Prop({ mutable: true }) checked: boolean = false;
-  @Prop() indeterminate: boolean = false;
-  @Prop() isInactive: boolean = false;
-
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private handleActivate = () => {
-    if (this.isInactive) return;
-    this.checked = !this.checked;
-    this.dsChange.emit(this.checked);
-  };
-
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      this.handleActivate();
-    }
-  };
-
-  render() {
-    const isMarked = this.checked || this.indeterminate;
-
-    return (
-      <Host
-        role="checkbox"
-        aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}
-        aria-disabled={this.isInactive || undefined}
-        aria-labelledby={this.labelId}
-        tabIndex={this.isInactive ? -1 : 0}
-        class={{ checkbox: true, 'ds-control-inactive': this.isInactive }}
-        onClick={this.handleActivate}
-        onKeyDown={this.handleKeyDown}
-      >
-        <span class={{ box: true, 'box--marked': isMarked }}>
-          {isMarked && (
-            <span class="checkmark" aria-hidden="true">
-              {this.indeterminate ? '−' : '✓'}
-            </span>
-          )}
-        </span>
-        <ds-text class="checkbox__label" as="span" variant="text-body-medium" textId={this.labelId}>
-          {this.label}
-        </ds-text>
-      </Host>
-    );
-  }
-}

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

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

package/src/wc/components/Chip/Chip.tsx

@@ -1,104 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-import { CONTROL_TEXT_VARIANT } from '../../utils';
-
-/**
- * Semantic chip state — replaces Tag’s intent × contrast matrix.
- * - `default` — neutral faint
- * - `active` — brand faint
- * - `error` — negative faint
- * - `caution` — caution faint
- */
-export type ChipState = 'default' | 'active' | 'error' | 'caution';
-export type ChipSize = 'md' | 'sm' | 'xs';
-export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */
-const ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {
-  md: 'md',
-  sm: 'sm',
-  xs: 'xs',
-};
-
-/**
- * Removable chip — same density recipe as Tag, but colored by semantic `state`
- * (not intent × contrast). Not a toggle/select control; the only intentional
- * action is remove.
- */
-@Component({
-  tag: 'ds-chip',
-  styleUrl: 'Chip.css',
-  scoped: true,
-})
-export class Chip {
-  @Prop() label!: string;
-  /** Semantic color state. @default 'default' */
-  @Prop() state: ChipState = 'default';
-  @Prop() size: ChipSize = 'md';
-  @Prop() rounded: boolean = false;
-  /** When true (default), shows the trailing dismiss control. */
-  @Prop() removable: boolean = true;
-  @Prop() maxWidth: string | number | undefined;
-  @Prop() isInactive: boolean = false;
-  /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */
-  @Prop() background: ChipBackground | undefined;
-
-  /** Fired when the remove button is clicked. */
-  @Event() dsRemove!: EventEmitter<void>;
-
-  private handleRemove = (e: MouseEvent) => {
-    e.stopPropagation();
-    if (this.isInactive) return;
-    this.dsRemove.emit();
-  };
-
-  render() {
-    const textVariant = CONTROL_TEXT_VARIANT[this.size];
-    const iconSize = ICON_SIZE[this.size];
-
-    const maxWidthStyle = this.maxWidth != null
-      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }
-      : undefined;
-
-    return (
-      <Host
-        class={{
-          'tag': true,
-          'chip': true,
-          [`chip--${this.state}`]: true,
-          [`tag--size-${this.size}`]: true,
-          'ds-control--md': this.size === 'md',
-          'ds-control--sm': this.size === 'sm',
-          'ds-control--xs': this.size === 'xs',
-          'tag--rounded': this.rounded,
-          'tag--removable': this.removable,
-          /* Hover overlay on the chip surface — dismiss is the only action. */
-          'ds-interaction-fill': !this.isInactive && this.removable,
-          'ds-interaction-fill--on-medium': this.background === 'medium',
-          'ds-interaction-fill--on-bold': this.background === 'bold',
-          'ds-interaction-fill--on-strong': this.background === 'strong',
-          'ds-interaction-fill--on-always-dark': this.background === 'always-dark',
-          'ds-control-inactive': this.isInactive,
-        }}
-        style={maxWidthStyle}
-        aria-disabled={this.isInactive || undefined}
-      >
-        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
-          {this.label}
-        </ds-text>
-        {this.removable && (
-          <button
-            type="button"
-            class="tag__remove ds-focus-ring-inset"
-            onClick={this.handleRemove}
-            aria-label={`Remove ${this.label}`}
-            disabled={this.isInactive || undefined}
-          >
-            <slot name="remove-icon">
-              <ds-icon class="tag__remove-x" name="Cross" size={iconSize} color="inherit"></ds-icon>
-            </slot>
-          </button>
-        )}
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { ChipState, ChipSize, ChipBackground } from './Chip';

package/src/wc/components/Divider/Divider.tsx

@@ -1,107 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type DividerOrientation = 'horizontal' | 'vertical';
-export type DividerSurface =
-  | 'default'
-  | 'on-bold-background'
-  | 'on-strong-background'
-  | 'on-medium-background'
-  | 'on-translucent-background'
-  | 'navigation'
-  | 'media'
-  | 'always-dark'
-  | 'inverted';
-export type DividerInsetToken =
-  | 'space-000'
-  | 'space-012'
-  | 'space-025'
-  | 'space-050'
-  | 'space-075'
-  | 'space-100'
-  | 'space-125'
-  | 'space-150'
-  | 'space-175'
-  | 'space-200'
-  | 'space-250'
-  | 'space-300'
-  | 'space-400'
-  | 'space-600'
-  | 'space-800';
-export type DividerInset = 'none' | DividerInsetToken | (string & {});
-export type DividerLength = 'auto' | 'full' | (string & {});
-
-const INSET_VALUE: Record<'none' | DividerInsetToken, string> = {
-  none: '0',
-  'space-000': 'var(--dimension-space-000)',
-  'space-012': 'var(--dimension-space-012)',
-  'space-025': 'var(--dimension-space-025)',
-  'space-050': 'var(--dimension-space-050)',
-  'space-075': 'var(--dimension-space-075)',
-  'space-100': 'var(--dimension-space-100)',
-  'space-125': 'var(--dimension-space-125)',
-  'space-150': 'var(--dimension-space-150)',
-  'space-175': 'var(--dimension-space-175)',
-  'space-200': 'var(--dimension-space-200)',
-  'space-250': 'var(--dimension-space-250)',
-  'space-300': 'var(--dimension-space-300)',
-  'space-400': 'var(--dimension-space-400)',
-  'space-600': 'var(--dimension-space-600)',
-  'space-800': 'var(--dimension-space-800)',
-};
-
-@Component({
-  tag: 'ds-divider',
-  styleUrl: 'Divider.css',
-  scoped: true,
-})
-export class Divider {
-  /** Direction of the divider line. Defaults to 'horizontal'. */
-  @Prop() orientation: DividerOrientation = 'horizontal';
-
-  /** Surface context so the divider uses the right TokoMo divider token. */
-  @Prop() surface: DividerSurface = 'default';
-
-  /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */
-  @Prop() inset: DividerInset = 'none';
-
-  /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */
-  @Prop() length: DividerLength = 'auto';
-
-  /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */
-  @Prop() semantic: boolean = false;
-
-  private resolveInset(): string {
-    return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)
-      ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]
-      : this.inset;
-  }
-
-  private resolveLength(): string {
-    return this.length === 'auto' || this.length === 'full'
-      ? '100%'
-      : this.length;
-  }
-
-  render() {
-    const isVertical = this.orientation === 'vertical';
-    const hasCustomLength = this.length !== 'auto' && this.length !== 'full';
-
-    return (
-      <Host
-        role={this.semantic ? 'separator' : undefined}
-        aria-orientation={this.semantic ? this.orientation : undefined}
-        aria-hidden={this.semantic ? undefined : 'true'}
-        class={{
-          divider: true,
-          'divider--vertical': isVertical,
-          'divider--custom-length': hasCustomLength,
-          [`divider--surface-${this.surface}`]: true,
-        }}
-        style={{
-          '--_divider-inset': this.resolveInset(),
-          '--_divider-length': this.resolveLength(),
-        }}
-      />
-    );
-  }
-}

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

@@ -1,2 +0,0 @@
-export type { DividerOrientation } from './Divider';
-

package/src/wc/components/EmptyState/EmptyState.tsx

@@ -1,30 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';
-
-const DEFAULT_MESSAGES: Record<EmptyStateType, string> = {
-  'no-content': 'No page contents to display.',
-  'no-results': 'No results found.',
-  'no-results-filter': 'No results found. Please update search criteria.',
-  'no-access': "You don't have access to this page.",
-};
-
-@Component({
-  tag: 'ds-empty-state',
-  styleUrl: 'EmptyState.css',
-  scoped: true,
-})
-export class EmptyState {
-  @Prop() type: EmptyStateType = 'no-content';
-  @Prop() message: string | undefined;
-
-  render() {
-    return (
-      <Host>
-        <ds-text class="empty-state" as="p" variant="text-body-medium" color="secondary">
-          {this.message || DEFAULT_MESSAGES[this.type]}
-        </ds-text>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Field/Field.tsx

@@ -1,30 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-let fieldCounter = 0;
-
-@Component({
-  tag: 'ds-field',
-  styleUrl: 'Field.css',
-  scoped: true,
-})
-export class Field {
-  @Prop() label!: string;
-  /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */
-  @Prop() fieldId: string | undefined;
-
-  private resolvedId = `ds-field-${++fieldCounter}`;
-
-  render() {
-    const id = this.fieldId || this.resolvedId;
-    return (
-      <Host>
-        <div class="field">
-          <ds-text as="label" variant="text-body-small" emphasis for={id}>
-            {this.label}
-          </ds-text>
-          <slot />
-        </div>
-      </Host>
-    );
-  }
-}