@ds-mo/ui 3.0.0 → 3.1.0

package/src/wc/components/RadioGroup/RadioGroup.tsx

@@ -1,130 +0,0 @@
-import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';
-
-export interface RadioOption {
-  label: string;
-  value: string;
-  isInactive?: boolean;
-}
-
-@Component({
-  tag: 'ds-radio-group',
-  styleUrl: 'RadioGroup.css',
-  scoped: true,
-})
-export class RadioGroup {
-  @Element() el!: HTMLElement;
-
-  @Prop() options: RadioOption[] = [];
-  @Prop({ mutable: true }) value: string = '';
-  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';
-  @Prop() isInactive: boolean = false;
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
-
-  @Event() dsChange!: EventEmitter<string>;
-
-  private get activeItems(): HTMLElement[] {
-    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));
-  }
-
-  @Listen('keydown')
-  handleKeyDown(e: KeyboardEvent) {
-    const items = this.activeItems;
-    if (!items.length) return;
-
-    const focused = items.find(item => item === document.activeElement);
-    if (!focused) return;
-
-    const idx = items.indexOf(focused);
-    let next = -1;
-
-    switch (e.key) {
-      case 'ArrowDown':
-      case 'ArrowRight':
-        e.preventDefault();
-        next = (idx + 1) % items.length;
-        break;
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        e.preventDefault();
-        next = (idx - 1 + items.length) % items.length;
-        break;
-      case 'Home':
-        e.preventDefault();
-        next = 0;
-        break;
-      case 'End':
-        e.preventDefault();
-        next = items.length - 1;
-        break;
-    }
-
-    if (next >= 0) {
-      items[next].focus();
-      const nextValue = items[next].dataset['value'];
-      if (nextValue && nextValue !== this.value) {
-        this.value = nextValue;
-        this.dsChange.emit(nextValue);
-      }
-    }
-  }
-
-  private selectItem(optValue: string) {
-    if (this.isInactive) return;
-    if (optValue !== this.value) {
-      this.value = optValue;
-      this.dsChange.emit(optValue);
-    }
-  }
-
-  render() {
-    const selectedIdx = this.options.findIndex(o => o.value === this.value);
-    const firstActiveIdx = this.options.findIndex(o => !this.isInactive && !o.isInactive);
-    const focusableIdx = selectedIdx >= 0 && !this.isInactive && !this.options[selectedIdx]?.isInactive
-      ? selectedIdx
-      : firstActiveIdx;
-
-    return (
-      <Host
-        role="radiogroup"
-        aria-label={this.ariaLabel}
-        aria-labelledby={this.ariaLabelledby}
-        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}
-      >
-        {this.options.map((opt, i) => {
-          const isItemInactive = this.isInactive || !!opt.isInactive;
-          const isChecked = opt.value === this.value;
-          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);
-
-          return (
-            <div
-              key={opt.value}
-              role="radio"
-              aria-checked={String(isChecked)}
-              aria-disabled={isItemInactive || undefined}
-              tabIndex={tabIdx}
-              data-radio-item
-              data-value={opt.value}
-              data-inactive={isItemInactive || undefined}
-              class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}
-              onClick={() => !isItemInactive && this.selectItem(opt.value)}
-              onKeyDown={(e: KeyboardEvent) => {
-                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {
-                  e.preventDefault();
-                  this.selectItem(opt.value);
-                }
-              }}
-            >
-              <span class={{ circle: true, 'circle--checked': isChecked }}>
-                {isChecked && <span class="dot" />}
-              </span>
-              <ds-text class="radio-label" as="span" variant="text-body-medium">
-                {opt.label}
-              </ds-text>
-            </div>
-          );
-        })}
-      </Host>
-    );
-  }
-}

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

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

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

@@ -1,274 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
-import {
-  controlWidthClass,
-  CONTROL_TEXT_VARIANT,
-  resolveCssLengthPx,
-  TOKEN_DEFAULTS,
-  type ControlWidth,
-} from '../../utils';
-import type { MenuItemData } from '../Menu/menu-types';
-
-export interface SelectOption {
-  label: string;
-  value: string;
-}
-
-export type SelectSize = 'md' | 'sm' | 'xs';
-
-export type SelectWidth = ControlWidth;
-
-/** `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',
-  scoped: true,
-})
-export class Select {
-  @Element() el!: HTMLElement;
-
-  /**
-   * Array of options. Set via JS property.
-   * @example el.options = [{ label: 'Apple', value: 'apple' }];
-   */
-  @Prop() options: SelectOption[] = [];
-
-  /** Currently selected value. */
-  @Prop({ mutable: true }) value: string = '';
-
-  /** Placeholder shown when no value is selected. */
-  @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;
-
-  /** Emits the selected value string. */
-  @Event() dsChange!: EventEmitter<string>;
-
-  @State() private isOpen: boolean = false;
-
-  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() {
-    if (this.menuEl && this.triggerEl) {
-      this.menuEl.anchor = this.triggerEl;
-    }
-    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) return;
-    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;
-    this.menuEl.open = open;
-  }
-
-  @Watch('options')
-  onOptionsChange() {
-    this.syncMenuItems();
-  }
-
-  @Watch('value')
-  onValueChange() {
-    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 => ({
-      label: opt.label,
-      value: opt.value,
-      isSelected: opt.value === this.value,
-    }));
-  }
-
-  /**
-   * 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;
-    this.openWithFocusVisible = opts.focusVisible;
-    this.syncMenuLayout();
-    this.syncMenuItems();
-    this.isOpen = true;
-  }
-
-  private close() {
-    this.isOpen = false;
-    this.openWithFocusVisible = false;
-  }
-
-  private toggle(opts: { focusVisible: boolean }) {
-    if (this.isOpen) {
-      this.close();
-    } else {
-      this.open(opts);
-    }
-  }
-
-  @Listen('keydown')
-  handleKeyDown(e: KeyboardEvent) {
-    if (document.activeElement !== this.triggerEl) return;
-
-    if (!this.isOpen) {
-      switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowUp':
-        case 'Enter':
-        case ' ':
-          e.preventDefault();
-          this.open({ focusVisible: true });
-          break;
-      }
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.close();
-      this.triggerEl?.focus();
-    }
-  }
-
-  private get selectedLabel(): string {
-    return this.options.find(o => o.value === this.value)?.label ?? '';
-  }
-
-  private get hasSelection(): boolean {
-    return this.options.some(o => o.value === this.value);
-  }
-
-  render() {
-    const showPlaceholder = !this.hasSelection;
-    const hasValue = !showPlaceholder;
-    const label = showPlaceholder ? this.placeholder : this.selectedLabel;
-    const textVariant = CONTROL_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,
-          '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,
-            '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="menu"
-          aria-expanded={String(this.isOpen)}
-          aria-label={this.ariaLabel}
-          aria-labelledby={this.ariaLabelledby}
-          onClick={() => this.toggle({ focusVisible: false })}
-        >
-          <ds-text
-            class="trigger__label ds-interaction-fill__content"
-            as="span"
-            variant={textVariant}
-            color="inherit"
-            lineTruncation={1}
-          >
-            {label}
-          </ds-text>
-          <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;
-          }}
-          side="bottom"
-          align="start"
-        />
-      </Host>
-    );
-  }
-}

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

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

package/src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx

@@ -1,55 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-import {
-  SHELL_GRADIENT_WASH_PRESETS,
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  type ShellGradientPreset,
-} from '../ShellGradientSwatch/shell-gradient-swatch-types';
-
-@Component({
-  tag: 'ds-shell-gradient-picker',
-  styleUrl: 'ShellGradientPicker.css',
-  scoped: true,
-})
-export class ShellGradientPicker {
-  /** Active shell wash preset. */
-  @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =
-    DEFAULT_SHELL_GRADIENT_PRESET;
-
-  @Event() dsChange!: EventEmitter<ShellGradientPreset>;
-
-  private handleSwatchSelect = (preset: ShellGradientPreset) => {
-    if (preset === this.value) return;
-    this.value = preset;
-    this.dsChange.emit(preset);
-  };
-
-  private renderSwatch(preset: ShellGradientPreset) {
-    return (
-      <ds-shell-gradient-swatch
-        key={preset}
-        preset={preset}
-        selected={this.value === preset}
-        onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {
-          e.stopPropagation();
-          this.handleSwatchSelect(e.detail);
-        }}
-      />
-    );
-  }
-
-  render() {
-    return (
-      <Host>
-        <div
-          class="shell-gradient-picker"
-          role="radiogroup"
-          aria-label="Shell gradient theme"
-        >
-          {this.renderSwatch('none')}
-          <div class="shell-gradient-picker__divider" aria-hidden="true" />
-          {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx

@@ -1,69 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-import {
-  SHELL_GRADIENT_PRESET_LABELS,
-  buildShellRadialGradientForPreset,
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  type ShellGradientPreset,
-} from './shell-gradient-swatch-types';
-import { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';
-
-@Component({
-  tag: 'ds-shell-gradient-swatch',
-  styleUrl: 'ShellGradientSwatch.css',
-  scoped: true,
-})
-export class ShellGradientSwatch {
-  /** Wash preset this orb previews. */
-  @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;
-
-  /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
-  @Prop({ reflect: true }) selected = false;
-
-  @Prop() isInactive = false;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-
-  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;
-
-  private handleClick = () => {
-    if (this.isInactive) return;
-    this.dsSelect.emit(this.preset);
-  };
-
-  render() {
-    const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];
-
-    return (
-      <Host>
-        <button
-          type="button"
-          class={{
-            'shell-gradient-swatch': true,
-            'ds-focus-ring-inset': true,
-            'ds-control-inactive': this.isInactive,
-            'shell-gradient-swatch--selected': this.selected,
-            'shell-gradient-swatch--none': this.preset === 'none',
-          }}
-          style={
-            this.preset === 'none'
-              ? undefined
-              : {
-                  '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),
-                  '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,
-                }
-          }
-          aria-label={label}
-          aria-pressed={this.selected ? 'true' : 'false'}
-          disabled={this.isInactive}
-          onClick={this.handleClick}
-        >
-          <span class="shell-gradient-swatch__fill" aria-hidden="true" />
-          <span class="shell-gradient-swatch__border" aria-hidden="true" />
-          <span class="shell-gradient-swatch__interaction" aria-hidden="true" />
-          <span class="shell-gradient-swatch__halo" aria-hidden="true" />
-          <span class="shell-gradient-swatch__stroke" aria-hidden="true" />
-        </button>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts

@@ -1,17 +0,0 @@
-import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
-import {
-  SHELL_GRADIENT_PRESET_LABELS,
-  buildShellRadialGradientForPreset,
-} from '../../nav/shell-gradient-presets';
-
-export type { ShellGradientPreset };
-
-export {
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  SHELL_GRADIENT_PRESETS,
-  SHELL_GRADIENT_WASH_PRESETS,
-  SHELL_GRADIENT_PRESET_LABELS,
-  buildShellRadialGradientForPreset,
-  isShellGradientPreset,
-  shellGradientPresetStopToken,
-} from '../../nav/shell-gradient-presets';

package/src/wc/components/Skeleton/Skeleton.tsx

@@ -1,64 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
-
-@Component({
-  tag: 'ds-skeleton',
-  styleUrl: 'Skeleton.css',
-  shadow: true,
-})
-export class Skeleton {
-  @Prop() variant: SkeletonVariant = 'text';
-  /** Width as a CSS value string (e.g. '200px', '100%') or number (px). */
-  @Prop() width: string | number | undefined;
-  /** Height as a CSS value string or number (px). */
-  @Prop() height: string | number | undefined;
-  /** Number of text lines. Only used when variant is 'text'. */
-  @Prop() lines: number = 1;
-  /** Whether to show the shimmer animation. */
-  @Prop() shimmer: boolean = true;
-
-  private get widthCss() {
-    const v = this.width;
-    if (v == null) return undefined;
-    return typeof v === 'number' ? `${v}px` : v;
-  }
-
-  private get heightCss() {
-    const v = this.height;
-    if (v == null) return undefined;
-    return typeof v === 'number' ? `${v}px` : v;
-  }
-
-  render() {
-    if (this.variant === 'text' && this.lines > 1) {
-      return (
-        <Host aria-hidden="true" style={{ width: this.widthCss }}>
-          <div class="text-group">
-            {Array.from({ length: this.lines }, (_, lineIdx) => (
-              <div
-                class={{ skeleton: true, text: true, animate: this.shimmer }}
-                style={{
-                  width: lineIdx === this.lines - 1 ? '60%' : '100%',
-                  height: this.heightCss,
-                }}
-              />
-            ))}
-          </div>
-        </Host>
-      );
-    }
-
-    return (
-      <Host
-        aria-hidden="true"
-        class={{
-          skeleton: true,
-          [this.variant]: true,
-          animate: this.shimmer,
-        }}
-        style={{ width: this.widthCss, height: this.heightCss }}
-      />
-    );
-  }
-}

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

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

package/src/wc/components/Slider/Slider.tsx

@@ -1,76 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-let idCounter = 0;
-
-@Component({
-  tag: 'ds-slider',
-  styleUrl: 'Slider.css',
-  scoped: true,
-})
-export class Slider {
-  private generatedId = `ds-slider-${++idCounter}`;
-
-  @Prop() value: number = 0;
-  @Prop() min: number = 0;
-  @Prop() max: number = 100;
-  @Prop() step: number = 1;
-  @Prop() label!: string;
-  @Prop() isInactive: boolean = false;
-  @Prop() valueText: string | undefined;
-  /** Associates with an external <label>. Defaults to an auto-generated ID. */
-  @Prop() inputId: string | undefined;
-
-  @Event() dsChange!: EventEmitter<number>;
-
-  private handleInput = (e: Event) => {
-    this.dsChange.emit(Number((e.target as HTMLInputElement).value));
-  };
-
-  private get pct() {
-    const range = this.max - this.min;
-    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);
-  }
-
-  render() {
-    const finalId = this.inputId ?? this.generatedId;
-    const pct = this.pct;
-
-    return (
-      <Host class="field">
-        <div class="label-row">
-          <ds-text as="label" variant="text-body-small" emphasis for={finalId}>
-            {this.label}
-          </ds-text>
-          <ds-text as="span" variant="text-body-small" emphasis>
-            {this.value}
-          </ds-text>
-        </div>
-        <div
-          class={{
-            track: true,
-            'ds-control-inactive': this.isInactive,
-            'track--at-min': pct === 0,
-          }}
-          style={{ '--slider-pct': String(pct) } as Record<string, string>}
-        >
-          <div class="track-inner">
-            <div class="fill-track"><div class="fill" /></div>
-            <div class="thumb" />
-          </div>
-          <input
-            type="range"
-            id={finalId}
-            min={this.min}
-            max={this.max}
-            step={this.step}
-            value={this.value}
-            disabled={this.isInactive}
-            class="range-input"
-            aria-valuetext={this.valueText}
-            onInput={this.handleInput}
-          />
-        </div>
-      </Host>
-    );
-  }
-}

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

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