@ds-mo/ui 2.11.2 → 2.12.0

package/src/wc/components/Accordion/Accordion.tsx

@@ -1,144 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
-
-export interface AccordionItemData {
-  id: string;
-  label: string;
-  content?: string;
-  inactive?: boolean;
-}
-
-let idCounter = 0;
-
-@Component({
-  tag: 'ds-accordion',
-  styleUrl: 'Accordion.css',
-  scoped: true,
-})
-export class Accordion {
-  @Element() el!: HTMLElement;
-
-  @Prop() items: AccordionItemData[] = [];
-  @Prop() multiple: boolean = false;
-  /** Comma-separated list of expanded item IDs for controlled mode. */
-  @Prop({ mutable: true }) expandedIds: string = '';
-
-  @State() private internalIds: string[] = [];
-  @State() private heights: Record<string, number> = {};
-
-  @Event() dsExpandedChange!: EventEmitter<string[]>;
-
-  private instanceId = ++idCounter;
-  private resizeObservers: Map<string, ResizeObserver> = new Map();
-
-  private get activeIds(): string[] {
-    if (this.expandedIds) return this.expandedIds.split(',').map(s => s.trim()).filter(Boolean);
-    return this.internalIds;
-  }
-
-  componentDidLoad() {
-    this.bindResizeObservers();
-  }
-
-  disconnectedCallback() {
-    this.resizeObservers.forEach(ro => ro.disconnect());
-    this.resizeObservers.clear();
-  }
-
-  @Watch('items')
-  onItemsChange() {
-    requestAnimationFrame(() => {
-      this.bindResizeObservers();
-      this.measureAll();
-    });
-  }
-
-  private bindResizeObservers() {
-    this.resizeObservers.forEach(ro => ro.disconnect());
-    this.resizeObservers.clear();
-
-    this.items.forEach(item => {
-      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
-      if (!inner) return;
-      const ro = new ResizeObserver(() => {
-        this.heights = { ...this.heights, [item.id]: inner.scrollHeight };
-      });
-      ro.observe(inner);
-      this.resizeObservers.set(item.id, ro);
-    });
-  }
-
-  private measureAll() {
-    const next: Record<string, number> = { ...this.heights };
-    this.items.forEach(item => {
-      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
-      if (inner) next[item.id] = inner.scrollHeight;
-    });
-    this.heights = next;
-  }
-
-  private toggle(id: string) {
-    const current = this.activeIds;
-    let next: string[];
-    if (current.includes(id)) {
-      next = current.filter(x => x !== id);
-    } else {
-      next = this.multiple ? [...current, id] : [id];
-    }
-    this.internalIds = next;
-    this.dsExpandedChange.emit(next);
-  }
-
-  render() {
-    const activeIds = this.activeIds;
-
-    return (
-      <Host class="accordion">
-        {this.items.map(item => {
-          const isExpanded = activeIds.includes(item.id);
-          const triggerId = `ds-accordion-${this.instanceId}-trigger-${item.id}`;
-          const panelId = `ds-accordion-${this.instanceId}-panel-${item.id}`;
-          const bodyHeight = this.heights[item.id] ?? 0;
-
-          return (
-            <div
-              key={item.id}
-              class={{ item: true, 'item--inactive': !!item.inactive }}
-            >
-              <button
-                type="button"
-                id={triggerId}
-                class="trigger"
-                onClick={() => !item.inactive && this.toggle(item.id)}
-                aria-expanded={isExpanded}
-                aria-controls={panelId}
-                aria-disabled={item.inactive || undefined}
-                tabIndex={item.inactive ? -1 : 0}
-              >
-                <span class="text-body-medium-emphasis">{item.label}</span>
-                <span
-                  class={{ chevron: true, 'chevron--open': isExpanded }}
-                  aria-hidden="true"
-                >&#x203A;</span>
-              </button>
-              <div
-                id={panelId}
-                role="region"
-                aria-labelledby={triggerId}
-                class="body"
-                style={{ height: isExpanded ? `${bodyHeight}px` : '0' }}
-                aria-hidden={!isExpanded}
-              >
-                <div class="body-inner" data-inner={item.id}>
-                  {item.content
-                    ? <span class="text-body-medium">{item.content}</span>
-                    : <slot name={item.id} />
-                  }
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </Host>
-    );
-  }
-}

package/src/wc/components/Breadcrumb/Breadcrumb.tsx

@@ -1,61 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-@Component({
-  tag: 'ds-breadcrumb',
-  styleUrl: 'Breadcrumb.css',
-  scoped: true,
-})
-export class Breadcrumb {
-  @Prop() items: BreadcrumbItem[] = [];
-  @Prop() separator: string = '/';
-
-  @Event() dsNavigate!: EventEmitter<{ item: BreadcrumbItem; index: number }>;
-
-  private handleClick(item: BreadcrumbItem, index: number, e: MouseEvent) {
-    if (!item.href) {
-      e.preventDefault();
-    }
-    this.dsNavigate.emit({ item, index });
-  }
-
-  render() {
-    return (
-      <Host>
-        <nav aria-label="Breadcrumb" class="breadcrumb">
-          <ol class="list">
-            {this.items.map((item, i) => {
-              const isLast = i === this.items.length - 1;
-              return (
-                <li class="item" key={i}>
-                  {isLast ? (
-                    <span class="text-body-medium-emphasis current" aria-current="page">
-                      {item.label}
-                    </span>
-                  ) : (
-                    <span class="item-inner">
-                      <a
-                        href={item.href ?? '#'}
-                        class="link text-body-medium"
-                        onClick={e => this.handleClick(item, i, e)}
-                      >
-                        {item.label}
-                      </a>
-                      <span class="separator text-body-small" aria-hidden="true">
-                        {this.separator}
-                      </span>
-                    </span>
-                  )}
-                </li>
-              );
-            })}
-          </ol>
-        </nav>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx

@@ -1,129 +0,0 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-
-export type ButtonUnfilledIconOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
-
-export type ButtonUnfilledIconBackground = 'always-dark' | 'navigation';
-
-@Component({
-  tag: 'ds-button-unfilled-icon',
-  styleUrl: 'ButtonUnfilledIcon.css',
-  scoped: true,
-})
-export class ButtonUnfilledIcon {
-  @Element() el!: HTMLElement;
-
-  /** Icon name passed to <ds-icon>. */
-  @Prop() icon: string = '';
-
-  /** Active/selected visual state. */
-  @Prop() isActive: boolean = false;
-
-  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */
-  @Prop() activeFill: boolean = true;
-
-  /** Show a 1px tertiary border without changing the interaction model. */
-  @Prop() hasBorder: boolean = false;
-
-  /** Show a notification dot at the top-right of the icon zone. */
-  @Prop() dot: boolean = false;
-
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
-
-  /** Native button type. */
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-
-  /**
-   * Foreground and interaction tokens when the button sits on a contrasting parent
-   * background (default, medium, bold, or strong).
-   */
-  @Prop({ attribute: 'on-background-contrast' })
-  backgroundContrast?: ButtonUnfilledIconOnBackgroundContrast;
-
-  /** Parent surface context for navigation and always-dark chrome. */
-  @Prop() background: ButtonUnfilledIconBackground | undefined;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
-  @Prop() controls: string | undefined;
-  @Prop() expanded: boolean | undefined;
-  @Prop() haspopup: string | undefined;
-  @Prop() pressed: boolean | undefined;
-
-  /**
-   * Native `tabindex` for roving keyboard groups in shell chrome.
-   * Omit for the default button tab stop (`0`).
-   */
-  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private buttonEl: HTMLButtonElement | null = null;
-
-  @Method()
-  async setFocus() {
-    this.buttonEl?.focus();
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    if (this.inactive) return;
-    this.dsClick.emit(event);
-    this.dsChange.emit(!this.isActive);
-  };
-
-  private effectiveContrast(): ButtonUnfilledIconOnBackgroundContrast {
-    return this.backgroundContrast ?? 'default';
-  }
-
-  render() {
-    const bg = this.background;
-    const contrast = this.effectiveContrast();
-
-    const cls: Record<string, boolean> = {
-      'button-icon': true,
-      'ds-focus-ring-inset': true,
-      'button-icon--active': this.isActive,
-      'button-icon--active-fill': this.isActive && this.activeFill,
-      'button-icon--bordered': this.hasBorder,
-      'button-icon--inactive': this.inactive,
-      'button-icon--contrast-medium': contrast === 'medium',
-      'button-icon--contrast-bold': contrast === 'bold',
-      'button-icon--contrast-strong': contrast === 'strong',
-      'button-icon--on-always-dark': bg === 'always-dark',
-      'button-icon--on-navigation': bg === 'navigation',
-    };
-
-    return (
-      <Host tabIndex={-1}>
-        <button
-          ref={el => {
-            this.buttonEl = el ?? null;
-          }}
-          type={this.type}
-          class={cls}
-          disabled={this.inactive}
-          tabIndex={this.focusTabIndex ?? 0}
-          aria-label={this.ariaLabel}
-          aria-controls={this.controls}
-          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}
-          aria-haspopup={this.haspopup}
-          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}
-          onClick={this.handleClick}
-        >
-          <span class="button-icon__icon-wrap">
-            <ds-icon name={this.icon} size="md" color="inherit" />
-            {this.dot && (
-              <ds-badge
-                class="button-icon__dot"
-                variant="dot"
-                background="var(--ds-button-unfilled-icon-dot-ring)"
-                label=""
-                aria-hidden="true"
-              />
-            )}
-          </span>
-        </button>
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { ButtonUnfilledIconBackground, ButtonUnfilledIconOnBackgroundContrast } from './ButtonUnfilledIcon';

package/src/wc/components/Fade/Fade.tsx

@@ -1,58 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import {
-  scrollEdgeFadeClassMap,
-  scrollEdgeFadeSizeStyle,
-  type ScrollEdgeFadeEdge,
-  type ScrollEdgeFadeSize,
-  type ScrollEdgeFadeSizeToken,
-} from '../../utils/scroll-edge-fade';
-
-/** @deprecated Use `ScrollEdgeFadeEdge` from `@ds-mo/ui/utils`. */
-export type FadeSide = ScrollEdgeFadeEdge;
-
-/** @deprecated Use `ScrollEdgeFadeSizeToken` from `@ds-mo/ui/utils`. */
-export type FadeSizeToken = ScrollEdgeFadeSizeToken;
-
-/** @deprecated Use `ScrollEdgeFadeSize` from `@ds-mo/ui/utils`. */
-export type FadeSize = ScrollEdgeFadeSize;
-
-@Component({
-  tag: 'ds-fade',
-  styleUrl: 'Fade.css',
-  scoped: true,
-})
-export class Fade {
-  /** Edge where content fades as it approaches the scroll boundary. */
-  @Prop() side: FadeSide = 'bottom';
-
-  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
-  @Prop() size: FadeSize = 'size-600';
-
-  /**
-   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
-   * Prefer `size`.
-   */
-  @Prop() height: string | undefined;
-
-  /** Controls the mask without removing the scroll container from layout. */
-  @Prop() visible: boolean = true;
-
-  render() {
-    return (
-      <Host>
-        <div
-          class={{
-            'fade__scroll': true,
-            ...scrollEdgeFadeClassMap({
-              edges: this.side,
-              hidden: !this.visible,
-            }),
-          }}
-          style={scrollEdgeFadeSizeStyle(this.size, this.height) as Record<string, string>}
-        >
-          <slot />
-        </div>
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { FadeSide, FadeSize, FadeSizeToken } from './Fade';

package/src/wc/components/Surface/Surface.tsx

@@ -1,81 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type SurfaceIntent =
-  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'
-  | 'ai' | 'neutral' | 'walkthrough' | 'guide';
-export type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-export type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';
-export type SurfaceElevation =
-  | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'
-  | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';
-export type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';
-export type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});
-export type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';
-
-const RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);
-
-@Component({
-  tag: 'ds-surface',
-  styleUrl: 'Surface.css',
-  scoped: true,
-})
-export class Surface {
-  @Prop() background: SurfaceBackground = 'transparent';
-  @Prop() intent: SurfaceIntent | undefined;
-  @Prop() contrast: SurfaceContrast = 'faint';
-  @Prop() elevation: SurfaceElevation = 'none';
-  /** Space-separated list of edges: "top bottom" etc. Only applies when elevation='none'. */
-  @Prop() edge: string | undefined;
-  @Prop() radius: SurfaceRadius | undefined;
-  @Prop() interactive: boolean = false;
-  @Prop() selected: boolean = false;
-  @Prop() inactive: boolean = false;
-  @Prop() as: SurfaceElement = 'div';
-
-  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 intentClass = this.intent
-      ? `intent-${this.intent}-${this.contrast}`
-      : `bg-${this.background}`;
-
-    const elevClass = `elevation-${this.elevation}`;
-
-    const edgeClasses = this.edge && this.elevation === 'none'
-      ? this.edge.trim().split(/\s+/).map(e => `edge-${e}`)
-      : [];
-
-    const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)
-      ? `radius-${this.radius}`
-      : '';
-
-    const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)
-      ? this.radius
-      : undefined;
-
-    const cls = [
-      'surface',
-      intentClass,
-      elevClass,
-      ...edgeClasses,
-      radiusClass,
-      this.interactive ? 'interactive' : '',
-      this.selected ? 'selected' : '',
-      this.inactive ? 'inactive' : '',
-    ].filter(Boolean).join(' ');
-
-    return (
-      <Host style={{ display: 'contents' }}>
-        <Tag
-          class={cls}
-          style={customRadius ? { borderRadius: customRadius } : undefined}
-        >
-          <slot />
-        </Tag>
-      </Host>
-    );
-  }
-}

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

@@ -1,179 +0,0 @@
-import { Component, Prop, State, h, Host } from '@stencil/core';
-import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
-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;
-
-  private get fadeOutMs(): number {
-    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
-  }
-
-  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);
-    }, this.fadeOutMs);
-  }
-
-  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: `var(${TOKEN_DEFAULTS.panelWidthMd})`,
-      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>
-    );
-  }
-}