@ds-mo/ui 1.0.2 → 1.1.0

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>
+    );
+  }
+}