@ds-mo/ui 3.0.0 → 3.1.0

package/src/wc/utils/chart-colors.ts

@@ -1,7 +0,0 @@
-/** Categorical data-viz palette from `@ds-mo/tokens` (`--color-data-category-1..12`). Cycles if a chart has more series than swatches. */
-const CATEGORY_TOKEN_COUNT = 12;
-
-export function categoryColor(index: number): string {
-  const slot = (index % CATEGORY_TOKEN_COUNT) + 1;
-  return `var(--color-data-category-${slot})`;
-}

package/src/wc/utils/chart-types.ts

@@ -1,25 +0,0 @@
-/** 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;
-}

package/src/wc/utils/control-density.css

@@ -1,43 +0,0 @@
-/**
- * Control density recipes — shared metrics for md / sm / xs interactive controls
- * (Tag, PanelNav items, BarNav tabs, Menu items, Chip, etc.).
- *
- * Apply `.ds-control--md|sm|xs` on the control (host or inner row). Then use the
- * `--ds-control-*` vars for height, padding, icon box, label inset, gap, and radius.
- * Text line-height belongs exclusively to the selected `ds-text` variant.
- *
- * Both `:host(.ds-control--*)` and `.ds-control--*` are listed so Stencil scoped
- * components work whether the class is on the host (Tag) or an inner item (PanelNav).
- *
- * @see AGENTS.md — "Control density recipes"
- */
-
-:host(.ds-control--md),
-.ds-control--md {
-  --ds-control-height: var(--dimension-size-400);
-  --ds-control-icon: var(--dimension-iconography-md);
-  --ds-control-padding-inline: var(--dimension-space-075);
-  --ds-control-label-inset: var(--dimension-space-025);
-  --ds-control-gap: var(--dimension-space-050);
-  --ds-control-radius: var(--dimension-radius-025);
-}
-
-:host(.ds-control--sm),
-.ds-control--sm {
-  --ds-control-height: var(--dimension-size-300);
-  --ds-control-icon: var(--dimension-iconography-sm);
-  --ds-control-padding-inline: var(--dimension-space-050);
-  --ds-control-label-inset: var(--dimension-space-025);
-  --ds-control-gap: var(--dimension-space-025);
-  --ds-control-radius: var(--dimension-radius-025);
-}
-
-:host(.ds-control--xs),
-.ds-control--xs {
-  --ds-control-height: var(--dimension-size-200);
-  --ds-control-icon: var(--dimension-iconography-xs);
-  --ds-control-padding-inline: var(--dimension-space-025);
-  --ds-control-label-inset: var(--dimension-space-025);
-  --ds-control-gap: var(--dimension-space-025);
-  --ds-control-radius: var(--dimension-radius-025);
-}

package/src/wc/utils/control-inactive.css

@@ -1,20 +0,0 @@
-/**
- * Control inactive — shared disabled/inactive visual for interactive controls.
- *
- * Apply `.ds-control-inactive` when the control’s `isInactive` prop (or item
- * `isInactive` field) is true. Opacity is 25% so inactive chrome stays
- * recognizable but clearly non-interactive.
- *
- * Both `:host(.ds-control-inactive)` and `.ds-control-inactive` are listed so
- * Stencil scoped components work whether the class is on the host (Chip) or an
- * inner control (button, menu item, tab).
- *
- * @see AGENTS.md — "Control inactive"
- */
-
-:host(.ds-control-inactive),
-.ds-control-inactive {
-  opacity: 0.25;
-  pointer-events: none;
-  cursor: not-allowed;
-}

package/src/wc/utils/control-text.ts

@@ -1,11 +0,0 @@
-import type { TextVariant } from '../components/Text/text-types';
-
-/** Shared public control sizes. Typography is derived; it is not a separate density API. */
-export type ControlSize = 'md' | 'sm' | 'xs';
-
-/** Complete text variant selected internally by each control size. */
-export const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant> = {
-  md: 'text-body-medium',
-  sm: 'text-body-small',
-  xs: 'text-caption',
-};

package/src/wc/utils/control-width.css

@@ -1,28 +0,0 @@
-/**
- * Control width fit — hug content or fill the parent.
- *
- * Apply `.ds-control-width--hug|fill` on the host (and optionally the inner
- * control). Defaults: buttons hug; form fields (Select, Input) fill.
- *
- * Hug uses `fit-content` + `align-self: flex-start` so column flex parents
- * with `align-items: stretch` don't force the control full-width.
- *
- * @see AGENTS.md — control density / shared control recipes
- */
-
-:host(.ds-control-width--hug),
-.ds-control-width--hug {
-  width: fit-content;
-  max-width: 100%;
-  flex: 0 0 auto;
-  align-self: flex-start;
-}
-
-:host(.ds-control-width--fill),
-.ds-control-width--fill {
-  width: 100%;
-  min-width: 0;
-  /* Grow when the parent is a flex row; still 100% in block layouts. */
-  flex: 1 1 auto;
-  align-self: stretch;
-}

package/src/wc/utils/control-width.ts

@@ -1,10 +0,0 @@
-/** Shared width fit for interactive controls (buttons, select, …). */
-export type ControlWidth = 'hug' | 'fill';
-
-/** Host / control class map for `width="hug" | "fill"`. */
-export function controlWidthClass(width: ControlWidth): Record<string, boolean> {
-  return {
-    'ds-control-width--hug': width === 'hug',
-    'ds-control-width--fill': width === 'fill',
-  };
-}

package/src/wc/utils/focus-ring.css

@@ -1,33 +0,0 @@
-:host {
-  --ds-focus-ring-width: var(--dimension-stroke-width-025, 2px);
-  --ds-focus-ring-offset: var(--dimension-space-025, 2px);
-  --ds-focus-ring-color: var(--color-interaction-focus);
-}
-
-.ds-focus-ring:focus-visible {
-  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
-  outline-offset: var(--ds-focus-ring-offset);
-}
-
-.ds-focus-ring.ds-focus-ring--visible {
-  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
-  outline-offset: var(--ds-focus-ring-offset);
-}
-
-.ds-focus-ring-inset:focus-visible {
-  outline: none;
-}
-
-.ds-focus-ring-inset:focus-visible::after {
-  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
-  outline-offset: calc(-1 * var(--ds-focus-ring-width));
-}
-
-.ds-focus-ring-inset.ds-focus-ring--visible {
-  outline: none;
-}
-
-.ds-focus-ring-inset.ds-focus-ring--visible::after {
-  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
-  outline-offset: calc(-1 * var(--ds-focus-ring-width));
-}

package/src/wc/utils/format-compact-number.ts

@@ -1,27 +0,0 @@
-const COMPACT_UNITS: { threshold: number; suffix: string }[] = [
-  { threshold: 1_000_000_000, suffix: 'b' },
-  { threshold: 1_000_000, suffix: 'm' },
-  { threshold: 1_000, suffix: 'k' },
-];
-
-/** Compact large numbers for display: 1000 -> "1k", 1500 -> "1.5k", 110100 -> "110.1k", 1000000 -> "1m". */
-export function formatCompactNumber(value: number): string {
-  const sign = value < 0 ? '-' : '';
-  const abs = Math.abs(value);
-  if (abs < 1000) return String(value);
-
-  for (let i = 0; i < COMPACT_UNITS.length; i++) {
-    const unit = COMPACT_UNITS[i];
-    if (abs < unit.threshold) continue;
-
-    let scaled = Math.round((abs / unit.threshold) * 10) / 10;
-    // Carry over, e.g. 999.96k rounds to "1000k" — bump to the next unit instead.
-    if (scaled >= 1000 && i > 0) {
-      const next = COMPACT_UNITS[i - 1];
-      scaled = Math.round((abs / next.threshold) * 10) / 10;
-      return `${sign}${scaled}${next.suffix}`;
-    }
-    return `${sign}${scaled}${unit.suffix}`;
-  }
-  return String(value);
-}

package/src/wc/utils/index.ts

@@ -1,27 +0,0 @@
-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';
-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';
-export { CONTROL_TEXT_VARIANT } from './control-text';
-export type { ControlSize } from './control-text';

package/src/wc/utils/interaction-fill.css

@@ -1,162 +0,0 @@
-/**
- * Interaction fill — selected (`::before`) + hover/press (`::after`) overlays.
- *
- * Paint translucent interaction tokens *over* the control’s own background —
- * never by swapping `background-color` on `:hover` / `:active`, and never via
- * `color-mix(bg, fg)` for control chrome.
- *
- * Paint order (bottom → top):
- *   1. Element background (intent / surface)
- *   2. `::before` — selected / active (opt-in via `.ds-interaction-fill--selected`)
- *   3. Label / icon / badge content (`.ds-interaction-fill__content` or z-index: 2)
- *   4. `::after` — hover / press wash + optional inset border + inset focus ring
- *
- * Apply `.ds-interaction-fill` on the interactive element (host or inner row).
- * Omit `.ds-interaction-fill--selected` when chrome wants icon-color-only
- * selection (`activeFill={false}` on unfilled icon buttons).
- *
- * Fills use positive z-index so they paint *above* an opaque host background
- * (Chip, ButtonFilled). Content sits under the hover wash so badge dots are
- * covered; raise label/icon with `.ds-interaction-fill__content` (z-index: 2)
- * — never above `::after` (z-index: 3).
- *
- * Inset borders must paint on `::after` (not the element’s own `box-shadow`)
- * so the stroke stays visible above selected / hover washes. Set
- * `--ds-interaction-border-*` or use `.ds-interaction-fill--bordered`.
- * Do not use a layout `border` on interaction targets.
- *
- * If the control uses `all: unset`, re-assert `position: relative; z-index: 0`
- * after the unset so this util’s stacking context still applies.
- *
- * Surface helpers remap tokens + `--ds-focus-ring-color`:
- *   `.ds-interaction-fill--on-medium|bold|strong|always-dark|navigation`
- *
- * Override hooks: `--ds-interaction-hover`, `--ds-interaction-pressed`,
- * `--ds-interaction-active`, `--ds-interaction-border-color`,
- * `--ds-interaction-border-width`.
- *
- * @see AGENTS.md — "Interaction fill"
- */
-
-:host(.ds-interaction-fill),
-.ds-interaction-fill {
-  position: relative;
-  z-index: 0;
-  --ds-interaction-hover: var(--color-interaction-hover);
-  --ds-interaction-pressed: var(--color-interaction-pressed);
-  --ds-interaction-active: var(--color-interaction-active);
-  /* Inset stroke on ::after — default off (transparent / zero width). */
-  --ds-interaction-border-width: 0px;
-  --ds-interaction-border-color: transparent;
-}
-
-:host(.ds-interaction-fill)::before,
-.ds-interaction-fill::before,
-:host(.ds-interaction-fill)::after,
-.ds-interaction-fill::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: transparent;
-  pointer-events: none;
-  transition: none;
-}
-
-/* Layer stack (bottom → top): selected → content → hover/press + border (topmost). */
-:host(.ds-interaction-fill)::before,
-.ds-interaction-fill::before {
-  z-index: 1;
-}
-
-:host(.ds-interaction-fill)::after,
-.ds-interaction-fill::after {
-  z-index: 3;
-  /* Border above selected (::before) and this pseudo’s own hover wash. */
-  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);
-}
-
-/* Opt-in secondary inset border (override color via `--ds-interaction-border-color`). */
-:host(.ds-interaction-fill--bordered),
-.ds-interaction-fill--bordered {
-  --ds-interaction-border-width: var(--dimension-stroke-width-012);
-  --ds-interaction-border-color: var(--color-border-secondary);
-}
-
-:host(.ds-interaction-fill--selected)::before,
-.ds-interaction-fill--selected::before {
-  background: var(--ds-interaction-active);
-}
-
-/*
- * Notification-dot halo: when selected fill is on, set `--ds-interaction-dot-ring`
- * to the active wash so rings can match. Prefer also remapping the consumer’s
- * surface ring token (e.g. `--ds-button-unfilled-dot-ring`) or passing
- * `background="var(--ds-interaction-active)"` from the parent when selected —
- * custom-property fallbacks through nested scoped hosts are easy to miss.
- * Omit `--selected` (chrome `activeFill={false}`) to keep the surface ring.
- */
-:host(.ds-interaction-fill--selected),
-.ds-interaction-fill--selected {
-  --ds-interaction-dot-ring: var(--ds-interaction-active);
-}
-
-:host(.ds-interaction-fill:hover:not(:disabled))::after,
-.ds-interaction-fill:hover:not(:disabled)::after {
-  background: var(--ds-interaction-hover);
-}
-
-:host(.ds-interaction-fill:active:not(:disabled))::after,
-.ds-interaction-fill:active:not(:disabled)::after {
-  background: var(--ds-interaction-pressed);
-}
-
-/* Content under the hover wash (so badge dots are covered by ::after). */
-:host(.ds-interaction-fill) > .ds-interaction-fill__content,
-.ds-interaction-fill > .ds-interaction-fill__content,
-.ds-interaction-fill__content {
-  position: relative;
-  z-index: 2;
-}
-
-/* ── Surface context ─────────────────────────────────────────────────────── */
-
-:host(.ds-interaction-fill--on-medium),
-.ds-interaction-fill--on-medium {
-  --ds-interaction-hover: var(--color-interaction-on-medium-background-hover);
-  --ds-interaction-pressed: var(--color-interaction-on-medium-background-pressed);
-  --ds-interaction-active: var(--color-interaction-on-medium-background-active);
-  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);
-}
-
-:host(.ds-interaction-fill--on-bold),
-.ds-interaction-fill--on-bold {
-  --ds-interaction-hover: var(--color-interaction-on-bold-background-hover);
-  --ds-interaction-pressed: var(--color-interaction-on-bold-background-pressed);
-  --ds-interaction-active: var(--color-interaction-on-bold-background-active);
-  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);
-}
-
-:host(.ds-interaction-fill--on-strong),
-.ds-interaction-fill--on-strong {
-  --ds-interaction-hover: var(--color-interaction-on-strong-background-hover);
-  --ds-interaction-pressed: var(--color-interaction-on-strong-background-pressed);
-  --ds-interaction-active: var(--color-interaction-on-strong-background-active);
-  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);
-}
-
-:host(.ds-interaction-fill--on-always-dark),
-.ds-interaction-fill--on-always-dark {
-  --ds-interaction-hover: var(--color-always-dark-interaction-hover);
-  --ds-interaction-pressed: var(--color-always-dark-interaction-pressed);
-  --ds-interaction-active: var(--color-always-dark-interaction-active);
-  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);
-}
-
-:host(.ds-interaction-fill--on-navigation),
-.ds-interaction-fill--on-navigation {
-  --ds-interaction-hover: var(--color-navigation-interaction-hover);
-  --ds-interaction-pressed: var(--color-navigation-interaction-pressed);
-  --ds-interaction-active: var(--color-navigation-interaction-active);
-  --ds-focus-ring-color: var(--color-navigation-interaction-focus);
-}

package/src/wc/utils/resolve-css-length-px.ts

@@ -1,66 +0,0 @@
-const lengthPxCache = new Map<string, number>();
-
-let probeEl: HTMLElement | null = null;
-
-function getProbeElement(): HTMLElement | null {
-  if (typeof document === 'undefined') return null;
-
-  if (!probeEl) {
-    probeEl = document.createElement('div');
-    probeEl.setAttribute('aria-hidden', 'true');
-    probeEl.style.cssText =
-      'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';
-    document.documentElement.appendChild(probeEl);
-  }
-
-  return probeEl;
-}
-
-/** Clear session cache (tests only). */
-export function clearCssLengthPxCache(): void {
-  lengthPxCache.clear();
-}
-
-/**
- * Resolve a CSS length to pixels for layout math.
- * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.
- */
-export function resolveCssLengthPx(
-  value: number | string | undefined,
-  fallback: number | string,
-): number {
-  const resolved = value === undefined || value === null || value === '' ? fallback : value;
-  if (typeof resolved === 'number') return resolved;
-
-  const trimmed = resolved.trim();
-  if (!trimmed) return resolveCssLengthPx(fallback, 0);
-
-  const cached = lengthPxCache.get(trimmed);
-  if (cached !== undefined) return cached;
-
-  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
-    const n = Number(trimmed);
-    lengthPxCache.set(trimmed, n);
-    return n;
-  }
-
-  const pxMatch = trimmed.match(/^(-?\d+(\.\d+)?)px$/);
-  if (pxMatch) {
-    const px = parseFloat(pxMatch[1]);
-    lengthPxCache.set(trimmed, px);
-    return px;
-  }
-
-  const cssLength = /^--[\w-]+$/.test(trimmed) ? `var(${trimmed})` : trimmed;
-
-  const probe = getProbeElement();
-  if (!probe) {
-    return typeof fallback === 'number' ? fallback : 0;
-  }
-
-  probe.style.width = cssLength;
-  const px = probe.getBoundingClientRect().width;
-  probe.style.width = '';
-  lengthPxCache.set(trimmed, px);
-  return px;
-}

package/src/wc/utils/resolve-css-time-ms.ts

@@ -1,46 +0,0 @@
-/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */
-export function parseCssTimeMs(value: string, fallback: number): number {
-  const firstToken = value.trim().split(/\s+/)[0] ?? '';
-  const num = parseFloat(firstToken);
-  if (Number.isNaN(num)) return fallback;
-  if (/ms\s*$/.test(firstToken)) return num;
-  if (/s\s*$/.test(firstToken)) return num * 1000;
-  return num;
-}
-
-function extractCssCustomProp(ref: string): string | null {
-  const varMatch = ref.match(/^var\(\s*(--[^),]+)/);
-  if (varMatch) return varMatch[1].trim();
-  if (ref.startsWith('--')) return ref.trim();
-  return null;
-}
-
-function readTokenTimeMs(token: string, fallback: number): number {
-  if (typeof document === 'undefined') return fallback;
-
-  const prop = extractCssCustomProp(token);
-  if (!prop) return parseCssTimeMs(token, fallback);
-
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
-  return parseCssTimeMs(raw, fallback);
-}
-
-/**
- * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.
- * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.
- */
-export function resolveCssTimeMs(
-  value: number | string | undefined,
-  fallbackToken: string,
-): number {
-  if (typeof value === 'number') return value;
-
-  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;
-  const prop = extractCssCustomProp(token);
-
-  if (prop) {
-    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));
-  }
-
-  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));
-}

package/src/wc/utils/scroll-edge-fade.css

@@ -1,80 +0,0 @@
-/**
- * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.
- * Masks scrolling content to transparent so flat surfaces, shell gradients, and
- * images show through. Pair with `.scroll-edge-fade--at-end` when flush.
- *
- * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.
- */
-
-.scroll-edge-fade {
-  --ds-scroll-edge-fade-size: var(--dimension-size-600);
-}
-
-/* Mask gradients use #000 / transparent as luminance stops — not theme colors. */
-/* stylelint-disable color-no-hex */
-
-.scroll-edge-fade--top {
-  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
-  mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
-.scroll-edge-fade--bottom {
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
-.scroll-edge-fade--left {
-  -webkit-mask-image: linear-gradient(
-    to right,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
-.scroll-edge-fade--right {
-  -webkit-mask-image: linear-gradient(
-    to left,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to left,
-    #000 0,
-    #000 calc(100% - var(--ds-scroll-edge-fade-size)),
-    transparent 100%
-  );
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
-.scroll-edge-fade--at-end,
-.scroll-edge-fade--hidden {
-  -webkit-mask-image: none;
-  mask-image: none;
-}
-
-/* stylelint-enable color-no-hex */