@ds-mo/ui 2.11.2 → 2.13.0

package/src/wc/components/Scrollbar/Scrollbar.tsx

@@ -1,189 +0,0 @@
-import { Component, Prop, State, Element, h, Host } from '@stencil/core';
-
-export type ScrollbarVariant = 'default' | 'thick';
-
-@Component({
-  tag: 'ds-scrollbar',
-  styleUrl: 'Scrollbar.css',
-  scoped: true,
-})
-export class Scrollbar {
-  @Element() el!: HTMLElement;
-
-  @Prop() variant: ScrollbarVariant = 'default';
-  @Prop() showTrackOnHover: boolean = true;
-
-  @State() private thumbHeight: number = 0;
-  @State() private thumbTop: number = 0;
-  @State() private thumbWidth: number = 0;
-  @State() private thumbLeft: number = 0;
-  @State() private isDragging: boolean = false;
-  @State() private isDraggingH: boolean = false;
-  @State() private isPointerInside: boolean = false;
-
-  private contentEl: HTMLElement | null = null;
-  private resizeObserver: ResizeObserver | null = null;
-  private scrollHandler: (() => void) | null = null;
-
-  // Drag state (not reactive — no re-render needed)
-  private dragStartY = 0;
-  private dragStartScrollTop = 0;
-  private dragStartX = 0;
-  private dragStartScrollLeft = 0;
-
-  componentDidLoad() {
-    this.contentEl = this.el.querySelector('.scrollbar-content') as HTMLElement | null;
-    if (!this.contentEl) return;
-
-    this.scrollHandler = () => this.updateThumb();
-    this.contentEl.addEventListener('scroll', this.scrollHandler);
-
-    this.resizeObserver = new ResizeObserver(() => this.updateThumb());
-    this.resizeObserver.observe(this.contentEl);
-    window.addEventListener('resize', this.scrollHandler);
-
-    this.updateThumb();
-  }
-
-  disconnectedCallback() {
-    if (this.contentEl && this.scrollHandler) {
-      this.contentEl.removeEventListener('scroll', this.scrollHandler);
-    }
-    if (this.scrollHandler) {
-      window.removeEventListener('resize', this.scrollHandler);
-    }
-    this.resizeObserver?.disconnect();
-  }
-
-  private updateThumb() {
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement | null;
-    const content = this.contentEl;
-    if (!container || !content) return;
-
-    const cH = container.clientHeight;
-    const cW = container.clientWidth;
-    const sH = content.scrollHeight;
-    const sW = content.scrollWidth;
-    const st = content.scrollTop;
-    const sl = content.scrollLeft;
-
-    if (sH <= cH) {
-      this.thumbHeight = 0;
-    } else {
-      const h = Math.max(20, cH * (cH / sH));
-      this.thumbHeight = h;
-      this.thumbTop = (st / (sH - cH)) * (cH - h);
-    }
-
-    if (sW <= cW) {
-      this.thumbWidth = 0;
-    } else {
-      const w = Math.max(20, cW * (cW / sW));
-      this.thumbWidth = w;
-      this.thumbLeft = (sl / (sW - cW)) * (cW - w);
-    }
-  }
-
-  private handleThumbMouseDown(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = this.contentEl;
-    if (!content) return;
-
-    this.isDragging = true;
-    this.dragStartY = e.clientY;
-    this.dragStartScrollTop = content.scrollTop;
-
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
-
-    const onMove = (ev: MouseEvent) => {
-      const deltaY = ev.clientY - this.dragStartY;
-      const scrollable = content.scrollHeight - container.clientHeight;
-      const ratio = scrollable / (container.clientHeight - this.thumbHeight);
-      content.scrollTop = Math.max(0, Math.min(scrollable, this.dragStartScrollTop + deltaY * ratio));
-    };
-    const onUp = () => {
-      this.isDragging = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }
-
-  private handleThumbHMouseDown(e: MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = this.contentEl;
-    if (!content) return;
-
-    this.isDraggingH = true;
-    this.dragStartX = e.clientX;
-    this.dragStartScrollLeft = content.scrollLeft;
-
-    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
-
-    const onMove = (ev: MouseEvent) => {
-      const deltaX = ev.clientX - this.dragStartX;
-      const scrollable = content.scrollWidth - container.clientWidth;
-      const ratio = scrollable / (container.clientWidth - this.thumbWidth);
-      content.scrollLeft = Math.max(0, Math.min(scrollable, this.dragStartScrollLeft + deltaX * ratio));
-    };
-    const onUp = () => {
-      this.isDraggingH = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }
-
-  render() {
-    const showThumb  = this.thumbHeight > 0;
-    const showThumbH = this.thumbWidth > 0;
-    const isScrollable = showThumb || showThumbH;
-    const showTrack = this.showTrackOnHover && (this.isPointerInside || this.isDragging || this.isDraggingH);
-
-    return (
-      <Host style={{ display: 'contents' }}>
-        <div
-          class={{
-            'scrollbar-container': true,
-            'scrollbar-container--thick': this.variant === 'thick',
-          }}
-          data-show-track={showTrack ? 'true' : 'false'}
-          data-dragging={this.isDragging || this.isDraggingH}
-          onMouseEnter={() => { if (this.showTrackOnHover) this.isPointerInside = true; }}
-          onMouseLeave={() => { this.isPointerInside = false; }}
-        >
-          <div
-            class="scrollbar-content"
-            tabIndex={isScrollable ? 0 : undefined}
-          >
-            <slot />
-          </div>
-
-          {showThumb && (
-            <div class="scrollbar-track" aria-hidden="true">
-              <div
-                class="scrollbar-thumb"
-                style={{ height: `${this.thumbHeight}px`, top: `${this.thumbTop}px` }}
-                onMouseDown={(e: MouseEvent) => this.handleThumbMouseDown(e)}
-              />
-            </div>
-          )}
-
-          {showThumbH && (
-            <div class="scrollbar-track-h" aria-hidden="true">
-              <div
-                class="scrollbar-thumb-h"
-                style={{ width: `${this.thumbWidth}px`, left: `${this.thumbLeft}px` }}
-                onMouseDown={(e: MouseEvent) => this.handleThumbHMouseDown(e)}
-              />
-            </div>
-          )}
-        </div>
-      </Host>
-    );
-  }
-}

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

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

@@ -1,67 +0,0 @@
-import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
-
-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;
-}
-
-function defaultToastDurationMs(): number {
-  return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);
-}
-
-export const toast = {
-  show(options: ToastOptions): string {
-    const id = `ds-toast-${++idCounter}`;
-    const duration = options.duration ?? defaultToastDurationMs();
-    toasts = [...toasts, { id, intent: 'neutral', ...options, duration }];
-    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();
-  },
-};