@ds-mo/ui 1.0.2 → 1.2.0

package/src/wc/components/Text/Text.tsx

@@ -0,0 +1,103 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type TextVariant =
+  | 'text-display-medium'
+  | 'text-display-small'
+  | 'text-title-large'
+  | 'text-title-medium'
+  | 'text-title-small'
+  | 'text-body-large'
+  | 'text-body-large-emphasis'
+  | 'text-body-medium'
+  | 'text-body-medium-emphasis'
+  | 'text-body-small'
+  | 'text-body-small-emphasis'
+  | 'text-caption'
+  | 'text-caption-emphasis';
+
+export type TextColorToken =
+  | 'primary' | 'secondary' | 'tertiary'
+  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'
+  | 'on-strong' | 'on-bold' | 'inherit';
+
+export type TextColor = TextColorToken | `var(--${string})`;
+export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
+export type TextAlign = 'left' | 'center' | 'right';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextFontFeature = 'normal' | 'tabular-nums';
+
+@Component({
+  tag: 'ds-text',
+  styleUrl: 'Text.css',
+  scoped: true,
+})
+export class Text {
+  @Prop() variant: TextVariant = 'text-body-medium';
+  @Prop() color: TextColor | undefined;
+  @Prop() decoration: TextDecoration | undefined;
+  @Prop() italic: boolean = false;
+  @Prop() align: TextAlign | undefined;
+  @Prop() lineTruncation: LineTruncation = 'none';
+  @Prop() wrap: TextWrap | undefined;
+  @Prop() fontFeature: TextFontFeature = 'normal';
+  @Prop() as: TextElement = 'p';
+  /** Maps to `for` attribute on <label> elements. */
+  @Prop() for: string | undefined;
+
+  render() {
+    // Polymorphic element: TSX treats a variable tag as a component, so a
+    // dynamic intrinsic element name must be cast to `any` to render.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Tag = this.as as any;
+    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');
+
+    const cls: Record<string, boolean> = {
+      [this.variant]: true,
+      'text': true,
+      'text--nowrap': this.wrap === 'nowrap',
+      'text--balance': this.wrap === 'balance',
+      'text--pretty': this.wrap === 'pretty',
+      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',
+      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',
+      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',
+      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',
+      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',
+      'text--color-primary':   this.color === 'primary',
+      'text--color-secondary': this.color === 'secondary',
+      'text--color-tertiary':  this.color === 'tertiary',
+      'text--color-brand':     this.color === 'brand',
+      'text--color-negative':  this.color === 'negative',
+      'text--color-positive':  this.color === 'positive',
+      'text--color-warning':   this.color === 'warning',
+      'text--color-caution':   this.color === 'caution',
+      'text--color-ai':        this.color === 'ai',
+      'text--color-on-strong': this.color === 'on-strong',
+      'text--color-on-bold':   this.color === 'on-bold',
+      'text--color-inherit':   this.color === 'inherit',
+      'text--decoration-underline':        this.decoration === 'underline',
+      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',
+      'text--italic': this.italic,
+      'text--align-left':   this.align === 'left',
+      'text--align-center': this.align === 'center',
+      'text--align-right':  this.align === 'right',
+      'text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
+    };
+
+    const style = this.color && isCustomColor(this.color)
+      ? { color: this.color as string }
+      : undefined;
+
+    const extraProps: Record<string, string> = {};
+    if (this.as === 'label' && this.for) extraProps['for'] = this.for;
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <Tag class={cls} style={style} {...extraProps}>
+          <slot />
+        </Tag>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { TextVariant, TextColor, TextColorToken, TextDecoration, TextAlign, LineTruncation, TextWrap, TextElement } from './Text';

package/src/wc/components/Toast/Toast.tsx

@@ -0,0 +1,174 @@
+import { Component, Prop, State, h, Host } from '@stencil/core';
+import { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';
+
+export type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
+
+const INTENT_BG: Record<ToastIntent, string> = {
+  neutral:  'var(--color-background-bold-neutral)',
+  brand:    'var(--color-background-bold-brand)',
+  positive: 'var(--color-background-bold-positive)',
+  negative: 'var(--color-background-bold-negative)',
+  warning:  'var(--color-background-bold-warning)',
+  caution:  'var(--color-background-bold-caution)',
+};
+
+interface ToastItemState {
+  data: ToastData;
+  exiting: boolean;
+  timer: ReturnType<typeof setTimeout> | null;
+  remaining: number;
+  startedAt: number;
+  paused: boolean;
+}
+
+@Component({
+  tag: 'ds-toast-provider',
+  styleUrl: 'Toast.css',
+  scoped: true,
+})
+export class ToastProvider {
+  @Prop() position: ToastPosition = 'top-center';
+
+  @State() private items: ToastItemState[] = [];
+
+  private unsubscribe: (() => void) | null = null;
+
+  connectedCallback() {
+    this.unsubscribe = subscribeToToasts(() => this.syncFromStore());
+    this.syncFromStore();
+  }
+
+  disconnectedCallback() {
+    this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });
+    this.unsubscribe?.();
+  }
+
+  private syncFromStore() {
+    const storeToasts = getToasts();
+    const existingIds = new Set(this.items.map(i => i.data.id));
+    const storeIds = new Set(storeToasts.map(t => t.id));
+
+    // Remove items no longer in store (instant, no animation since dismiss() already fires animation)
+    const kept = this.items.filter(i => storeIds.has(i.data.id));
+
+    // Add new items
+    const newItems: ToastItemState[] = storeToasts
+      .filter(t => !existingIds.has(t.id))
+      .map(data => {
+        const state: ToastItemState = {
+          data,
+          exiting: false,
+          timer: null,
+          remaining: data.duration,
+          startedAt: 0,
+          paused: false,
+        };
+        if (data.duration > 0) {
+          state.startedAt = Date.now();
+          state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);
+        }
+        return state;
+      });
+
+    this.items = [...kept, ...newItems];
+  }
+
+  private dismissItem(id: string) {
+    this.items = this.items.map(i =>
+      i.data.id === id ? { ...i, exiting: true, timer: null } : i
+    );
+    setTimeout(() => {
+      this.items = this.items.filter(i => i.data.id !== id);
+      toastService.dismiss(id);
+    }, 200);
+  }
+
+  private pauseItem(id: string) {
+    this.items = this.items.map(i => {
+      if (i.data.id !== id || i.paused || !i.timer) return i;
+      clearTimeout(i.timer);
+      const elapsed = Date.now() - i.startedAt;
+      return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };
+    });
+  }
+
+  private resumeItem(id: string) {
+    this.items = this.items.map(i => {
+      if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;
+      const timer = setTimeout(() => this.dismissItem(id), i.remaining);
+      return { ...i, paused: false, timer, startedAt: Date.now() };
+    });
+  }
+
+  private getPositionStyle(): Record<string, string> {
+    const base: Record<string, string> = {
+      position: 'fixed',
+      zIndex: '9999',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--dimension-space-075)',
+      pointerEvents: 'none',
+      padding: 'var(--dimension-space-100)',
+      maxWidth: '480px',
+      width: '100%',
+      boxSizing: 'border-box',
+    };
+    switch (this.position) {
+      case 'top-center':
+        return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };
+      case 'top-right':
+        return { ...base, top: '0', right: '0', alignItems: 'flex-end' };
+      case 'bottom-center':
+        return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };
+      case 'bottom-right':
+        return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };
+    }
+  }
+
+  render() {
+    return (
+      <Host style={{ display: 'contents' }}>
+        <div
+          class="toast-container"
+          role="region"
+          aria-label="Notifications"
+          aria-live="polite"
+          style={this.getPositionStyle()}
+        >
+          {this.items.map(item => (
+            <div
+              key={item.data.id}
+              class={{ toast: true, 'toast--exit': item.exiting }}
+              role={item.data.intent === 'negative' ? 'alert' : 'status'}
+              style={{
+                backgroundColor: INTENT_BG[item.data.intent],
+                borderRadius: 'var(--dimension-radius-125)',
+                boxShadow: 'var(--effect-elevation-elevated-floating)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--dimension-space-075)',
+                padding: 'var(--dimension-space-075) var(--dimension-space-100)',
+                minHeight: 'var(--dimension-size-400)',
+                pointerEvents: 'auto',
+                color: 'var(--color-foreground-on-bold-background-primary)',
+                boxSizing: 'border-box',
+              }}
+              onMouseEnter={() => this.pauseItem(item.data.id)}
+              onMouseLeave={() => this.resumeItem(item.data.id)}
+            >
+              <span class="text-body-medium" style={{ flex: '1' }}>{item.data.message}</span>
+              <button
+                type="button"
+                class="toast-dismiss"
+                onClick={() => this.dismissItem(item.data.id)}
+                aria-label="Dismiss"
+              >
+                &times;
+              </button>
+            </div>
+          ))}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Toast/toast-service.ts

@@ -0,0 +1,60 @@
+export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';
+
+export interface ToastData {
+  id: string;
+  message: string;
+  intent: ToastIntent;
+  duration: number;
+}
+
+export interface ToastOptions {
+  message: string;
+  intent?: ToastIntent;
+  duration?: number;
+}
+
+let toasts: ToastData[] = [];
+const listeners = new Set<() => void>();
+let idCounter = 0;
+
+function emit() {
+  listeners.forEach(fn => fn());
+}
+
+export function subscribeToToasts(fn: () => void): () => void {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+export function getToasts(): ToastData[] {
+  return toasts;
+}
+
+export const toast = {
+  show(options: ToastOptions): string {
+    const id = `ds-toast-${++idCounter}`;
+    toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];
+    emit();
+    return id;
+  },
+  success(message: string, options?: Partial<ToastOptions>): string {
+    return toast.show({ message, intent: 'positive', ...options });
+  },
+  error(message: string, options?: Partial<ToastOptions>): string {
+    return toast.show({ message, intent: 'negative', ...options });
+  },
+  warning(message: string, options?: Partial<ToastOptions>): string {
+    return toast.show({ message, intent: 'warning', ...options });
+  },
+  info(message: string, options?: Partial<ToastOptions>): string {
+    return toast.show({ message, intent: 'neutral', ...options });
+  },
+  dismiss(id: string) {
+    toasts = toasts.filter(t => t.id !== id);
+    emit();
+  },
+  dismissAll() {
+    toasts = [];
+    emit();
+  },
+};

package/src/wc/components/Toggle/Toggle.tsx

@@ -0,0 +1,43 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'ds-toggle',
+  styleUrl: 'Toggle.css',
+  shadow: true,
+})
+export class Toggle {
+  @Prop({ mutable: true }) checked: boolean = false;
+  @Prop() inactive: boolean = false;
+
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.checked = !this.checked;
+    this.dsChange.emit(this.checked);
+  };
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (this.inactive) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  render() {
+    return (
+      <Host
+        role="switch"
+        aria-checked={String(this.checked)}
+        aria-disabled={this.inactive || undefined}
+        tabIndex={this.inactive ? -1 : 0}
+        class={{ toggle: true, checked: this.checked, inactive: this.inactive }}
+        onClick={this.handleClick}
+        onKeyDown={this.handleKeyDown}
+      >
+        <span class="thumb" />
+      </Host>
+    );
+  }
+}

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

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

package/src/wc/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,120 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import type { IconSize } from '../Icon/Icon';
+
+export type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';
+export type ToggleButtonSize       = 'md' | 'sm' | 'xs';
+export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+const ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };
+
+// Pixel size reference for internal layout (icon span font-size)
+const ICON_PX: Record<ToggleButtonSize, number> = { md: 20, sm: 16, xs: 12 };
+
+const TEXT_CLASS: Record<ToggleButtonSize, string> = {
+  md: 'text-body-medium-emphasis',
+  sm: 'text-body-small-emphasis',
+  xs: 'text-caption-emphasis',
+};
+
+@Component({
+  tag: 'ds-toggle-button',
+  styleUrl: 'ToggleButton.css',
+  scoped: true,
+})
+export class ToggleButton {
+  /**
+   * Chrome level.
+   *   none     — ghost (transparent, no border, no shadow)
+   *   flat     — border only, transparent bg
+   *   elevated — bg-primary + shadow  [default]
+   *   floating — bg-primary + FAB-strength shadow
+   */
+  @Prop() elevation: ToggleButtonElevation = 'elevated';
+
+  /** Label text. */
+  @Prop() label: string | undefined;
+
+  /**
+   * Icon name for <ds-icon>. Set via JS property.
+   * @example el.icon = 'GridView';
+   */
+  @Prop() icon: string | undefined;
+
+  /** Size: md (32px), sm (24px), xs (16px). */
+  @Prop() size: ToggleButtonSize = 'md';
+
+  /** Pill shape. */
+  @Prop() rounded: boolean = false;
+
+  /** Parent surface context — adjusts hover tokens for colored backgrounds. */
+  @Prop() background: ToggleButtonBackground | undefined;
+
+  /** Controlled pressed state. */
+  @Prop({ mutable: true }) pressed: boolean = false;
+
+  /** Disables interaction. */
+  @Prop() inactive: boolean = false;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+
+  /** Emits the new pressed value (!pressed) on click. */
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.dsChange.emit(!this.pressed);
+  };
+
+  render() {
+    const size = this.size;
+    const iconSize = ICON_SIZE[size];
+    const iconPx = ICON_PX[size];
+    const textClass = TEXT_CLASS[size];
+    const hasIcon = !!this.icon;
+    const hasLabel = !!this.label;
+    const isIconOnly = hasIcon && !hasLabel;
+    const isLabelOnly = hasLabel && !hasIcon;
+    const isIconAndLabel = hasIcon && hasLabel;
+    const bg = this.background;
+    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);
+
+    const cls: Record<string, boolean> = {
+      'toggle-btn': true,
+      [`elevation${elevKey}`]: true,
+      sizeSM: size === 'sm',
+      sizeXS: size === 'xs',
+      rounded: this.rounded,
+      inactive: this.inactive,
+      pressed: this.pressed,
+      iconOnly: isIconOnly,
+      labelOnly: isLabelOnly,
+      iconAndLabel: isIconAndLabel,
+      onMedium: bg === 'medium',
+      onBold: bg === 'bold',
+      onStrong: bg === 'strong',
+      onAlwaysDark: bg === 'always-dark',
+    };
+
+    return (
+      <Host>
+        <button
+          type="button"
+          class={cls}
+          disabled={this.inactive}
+          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}
+          aria-pressed={this.pressed}
+          onClick={this.handleClick}
+        >
+          {hasIcon && (
+            <span class="toggle-btn__icon" style={{ fontSize: `${iconPx}px` }}>
+              <ds-icon name={this.icon} size={iconSize} />
+            </span>
+          )}
+          {hasLabel && (
+            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>
+          )}
+        </button>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,118 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type ToggleGroupElevation  = 'none' | 'flat' | 'elevated' | 'floating';
+export type ToggleGroupSize       = 'md' | 'sm' | 'xs';
+export type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+export interface ToggleGroupItem {
+  id: string;
+  label?: string;
+  /** Icon name for <ds-icon>. */
+  icon?: string;
+  inactive?: boolean;
+}
+
+@Component({
+  tag: 'ds-toggle-button-group',
+  styleUrl: 'ToggleButtonGroup.css',
+  scoped: true,
+})
+export class ToggleButtonGroup {
+  /**
+   * Array of item descriptors. Set via JS property.
+   * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
+   */
+  @Prop() items: ToggleGroupItem[] = [];
+
+  /** ID of the currently selected / pressed item. */
+  @Prop({ mutable: true }) value: string = '';
+
+  /** Chrome level for the group container. */
+  @Prop() elevation: ToggleGroupElevation = 'elevated';
+
+  /** Size passed to each ds-toggle-button. */
+  @Prop() size: ToggleGroupSize = 'md';
+
+  /** Pill shape for group + buttons. */
+  @Prop() rounded: boolean = false;
+
+  /** Parent surface context. */
+  @Prop() background: ToggleGroupBackground | undefined;
+
+  /** Emits the id of the newly selected item. */
+  @Event() dsChange!: EventEmitter<string>;
+
+  private handleItemChange(id: string) {
+    if (id === this.value) return;
+    this.value = id;
+    this.dsChange.emit(id);
+  }
+
+  render() {
+    const items = this.items;
+    const count = items.length;
+    const elev = this.elevation;
+    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
+    const bg = this.background;
+    const isGhost = elev === 'none';
+
+    const groupCls: Record<string, boolean> = {
+      group: true,
+      [`group${elevKey}`]: true,
+      groupRounded: this.rounded,
+    };
+
+    return (
+      <Host>
+        <div class={groupCls} role="group">
+          {items.map((item, i) => {
+            const isFirst = i === 0;
+            const isLast = i === count - 1;
+            const isMid = !isFirst && !isLast;
+            const isPressed = item.id === this.value;
+            const isIconOnly = !!item.icon && !item.label;
+            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
+            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
+
+            const itemCls: Record<string, boolean> = {
+              item: true,
+              first: isFirst,
+              last: isLast,
+              middle: isMid,
+              itemShort: isGhost,
+              itemPressed: isGhost && isPressed,
+              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
+              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
+              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
+            };
+
+            const dividerCls: Record<string, boolean> = {
+              divider: true,
+              dividerGhost: isGhost,
+              dividerGhostXS: isGhost && this.size === 'xs',
+              dividerGhostSM: isGhost && this.size === 'sm',
+            };
+
+            return [
+              i > 0 && (
+                <div class={dividerCls} aria-hidden="true" />
+              ),
+              <ds-toggle-button
+                class={itemCls}
+                elevation={elev}
+                size={this.size}
+                label={item.label}
+                icon={item.icon}
+                rounded={this.rounded}
+                background={bg}
+                pressed={isPressed}
+                inactive={item.inactive}
+                onDsChange={() => this.handleItemChange(item.id)}
+              />,
+            ];
+          })}
+        </div>
+      </Host>
+    );
+  }
+}