@ds-mo/ui 1.0.2 → 1.2.0

package/src/wc/components/Input/Input.tsx

@@ -0,0 +1,100 @@
+import { Component, Prop, Event, EventEmitter, Element, Method, h, Host } from '@stencil/core';
+
+export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
+
+let idCounter = 0;
+
+@Component({
+  tag: 'ds-input',
+  styleUrl: 'Input.css',
+  scoped: true,
+})
+export class Input {
+  @Element() el!: HTMLElement;
+
+  private generatedId = `ds-input-${++idCounter}`;
+  private errorId = `${this.generatedId}-error`;
+
+  @Prop() value: string = '';
+  @Prop() placeholder: string | undefined;
+  @Prop() type: InputType = 'text';
+  @Prop() inactive: boolean = false;
+  @Prop() autoFocus: boolean = false;
+  @Prop() error: boolean = false;
+  @Prop() errorMessage: string | undefined;
+  /** Associates the internal input with an external <label>. */
+  @Prop() inputId: string | undefined;
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
+  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;
+
+  @Event() dsChange!: EventEmitter<string>;
+  @Event() dsClear!: EventEmitter<void>;
+
+  @Method()
+  async setFocus() {
+    this.el.querySelector('input')?.focus();
+  }
+
+  private handleInput = (e: Event) => {
+    this.dsChange.emit((e.target as HTMLInputElement).value);
+  };
+
+  private handleClear = () => {
+    this.dsChange.emit('');
+    this.dsClear.emit();
+    this.el.querySelector('input')?.focus();
+  };
+
+  render() {
+    const inputId = this.inputId ?? this.generatedId;
+    const showClear = this.type === 'search' && this.value.length > 0 && !this.inactive;
+    const showError = this.error && Boolean(this.errorMessage);
+
+    const describedBy = [
+      this.ariaDescribedby,
+      showError ? this.errorId : undefined,
+    ].filter(Boolean).join(' ') || undefined;
+
+    return (
+      <Host class="input-container">
+        <div class={{ wrapper: true, 'wrapper--error': this.error }}>
+          <div class="row">
+            <input
+              type={this.type}
+              id={inputId}
+              value={this.value}
+              placeholder={this.placeholder}
+              disabled={this.inactive}
+              autoFocus={this.autoFocus}
+              class="native-input"
+              aria-label={this.ariaLabel}
+              aria-labelledby={this.ariaLabelledby}
+              aria-describedby={describedBy}
+              aria-invalid={this.error || undefined}
+              onInput={this.handleInput}
+            />
+            {showClear && (
+              <button
+                type="button"
+                class="clear-btn"
+                onClick={this.handleClear}
+                aria-label="Clear"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            )}
+            <span class="suffix">
+              <slot name="suffix" />
+            </span>
+          </div>
+        </div>
+        {showError && (
+          <div id={this.errorId} role="alert" class="error-text">
+            {this.errorMessage}
+          </div>
+        )}
+      </Host>
+    );
+  }
+}

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

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

package/src/wc/components/Loader/Loader.tsx

@@ -0,0 +1,47 @@
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'ds-loader',
+  styleUrl: 'Loader.css',
+  shadow: true,
+})
+export class Loader {
+  /** Render size in px. Designed on a 16×16 viewBox; stroke scales proportionally. */
+  @Prop() size: number = 20;
+  /**
+   * Accessible label for standalone usage. Wraps the spinner in a live region
+   * and renders the label visually-hidden. Omit when the host element already
+   * conveys busy state via aria-busy.
+   */
+  @Prop() label: string | undefined;
+
+  render() {
+    const px = `${this.size}px`;
+    const svg = (
+      <svg
+        style={{ width: px, height: px }}
+        viewBox="0 0 16 16"
+        fill="none"
+        class="spinner"
+        aria-hidden="true"
+      >
+        <circle
+          cx="8" cy="8" r="5"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-linecap="round"
+          stroke-dasharray="23.6 7.9"
+        />
+      </svg>
+    );
+
+    if (!this.label) return svg;
+
+    return (
+      <span role="status" aria-live="polite" class="status">
+        {svg}
+        <span class="visually-hidden">{this.label}</span>
+      </span>
+    );
+  }
+}

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

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

package/src/wc/components/Menu/Menu.tsx

@@ -0,0 +1,340 @@
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
+
+export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
+export type MenuAlign = 'start' | 'center' | 'end';
+
+export interface MenuItemData {
+  label: string;
+  value?: string;
+  subtext?: string;
+  isSelected?: boolean;
+  isInactive?: boolean;
+  isDestructive?: boolean;
+  showToggle?: boolean;
+  toggleValue?: boolean;
+}
+
+export interface MenuSection {
+  header?: string;
+  items: MenuItemData[];
+}
+
+const CLOSE_ANIMATION_MS = 220;
+const VP_PAD = 4;
+
+@Component({
+  tag: 'ds-menu',
+  styleUrl: 'Menu.css',
+  scoped: true,
+})
+export class Menu {
+  @Element() el!: HTMLElement;
+
+  @Prop({ mutable: true }) open: boolean = false;
+  @Prop() items: MenuItemData[] = [];
+  @Prop() sections: MenuSection[] = [];
+  @Prop() side: MenuSide = 'bottom';
+  @Prop() align: MenuAlign = 'start';
+  @Prop() sideOffset: number = 4;
+  @Prop() alignOffset: number = 0;
+  @Prop() menuWidth: string | undefined;
+  @Prop() minWidth: string | undefined;
+  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */
+  @Prop() anchor: HTMLElement | undefined;
+  /** ID of the external trigger element for positioning */
+  @Prop() anchorId: string | undefined;
+
+  @State() private shouldRender: boolean = false;
+  @State() private closing: boolean = false;
+  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };
+  @State() private focusedIndex: number = 0;
+  @State() private positionReady: boolean = false;
+
+  @Event() dsClose!: EventEmitter<void>;
+  @Event() dsSelect!: EventEmitter<MenuItemData>;
+
+  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
+  private scrollResizeHandler: (() => void) | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+  private itemEls: HTMLElement[] = [];
+
+  componentDidLoad() {
+    if (this.open) this.onOpenChange(true);
+  }
+
+  disconnectedCallback() {
+    this.teardownListeners();
+  }
+
+  @Watch('open')
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      this.shouldRender = true;
+      this.closing = false;
+      this.positionReady = false;
+      requestAnimationFrame(() => {
+        this.calculatePosition();
+        this.positionReady = true;
+        this.focusInitialItem();
+        this.setupListeners();
+      });
+    } else if (this.shouldRender) {
+      this.closing = true;
+      this.teardownListeners();
+      this.closeTimer = setTimeout(() => {
+        this.shouldRender = false;
+        this.closing = false;
+        this.closeTimer = null;
+      }, CLOSE_ANIMATION_MS);
+    }
+  }
+
+  private get resolvedAnchor(): HTMLElement | null {
+    if (this.anchor) return this.anchor;
+    if (this.anchorId) return document.getElementById(this.anchorId);
+    return null;
+  }
+
+  private get activeSections(): MenuSection[] {
+    if (this.sections.length > 0) return this.sections;
+    if (this.items.length > 0) return [{ items: this.items }];
+    return [];
+  }
+
+  private get flatItems(): MenuItemData[] {
+    return this.activeSections.flatMap(s => s.items);
+  }
+
+  private calculatePosition() {
+    const anchorEl = this.resolvedAnchor;
+    if (!anchorEl) return;
+    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;
+    if (!popup) return;
+
+    const a = anchorEl.getBoundingClientRect();
+    const pw = popup.offsetWidth || 200;
+    const ph = popup.offsetHeight || 160;
+    let x = 0, y = 0;
+
+    switch (this.side) {
+      case 'top':
+        y = a.top - ph - this.sideOffset;
+        x = this.align === 'start' ? a.left + this.alignOffset
+          : this.align === 'end' ? a.right - pw + this.alignOffset
+          : a.left + a.width / 2 - pw / 2 + this.alignOffset;
+        break;
+      case 'bottom':
+        y = a.bottom + this.sideOffset;
+        x = this.align === 'start' ? a.left + this.alignOffset
+          : this.align === 'end' ? a.right - pw + this.alignOffset
+          : a.left + a.width / 2 - pw / 2 + this.alignOffset;
+        break;
+      case 'left':
+        x = a.left - pw - this.sideOffset;
+        y = this.align === 'start' ? a.top + this.alignOffset
+          : this.align === 'end' ? a.bottom - ph + this.alignOffset
+          : a.top + a.height / 2 - ph / 2 + this.alignOffset;
+        break;
+      case 'right':
+        x = a.right + this.sideOffset;
+        y = this.align === 'start' ? a.top + this.alignOffset
+          : this.align === 'end' ? a.bottom - ph + this.alignOffset
+          : a.top + a.height / 2 - ph / 2 + this.alignOffset;
+        break;
+    }
+
+    this.pos = {
+      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),
+      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),
+    };
+  }
+
+  /** Focus the selected item when present, otherwise the first enabled item. */
+  private focusInitialItem() {
+    const flat = this.flatItems;
+    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);
+    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);
+    this.focusedIndex = selectedIdx >= 0
+      ? selectedIdx
+      : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);
+
+    requestAnimationFrame(() => {
+      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');
+      btns[this.focusedIndex]?.focus();
+    });
+  }
+
+  private setupListeners() {
+    this.clickOutsideHandler = (e: MouseEvent) => {
+      const t = e.target as Node;
+      const popup = this.el.querySelector('.menu-popup');
+      const anchorEl = this.resolvedAnchor;
+      if (popup?.contains(t) || anchorEl?.contains(t)) return;
+      this.close();
+    };
+
+    this.scrollResizeHandler = () => this.calculatePosition();
+
+    document.addEventListener('mousedown', this.clickOutsideHandler, true);
+    window.addEventListener('scroll', this.scrollResizeHandler, true);
+    window.addEventListener('resize', this.scrollResizeHandler);
+  }
+
+  private teardownListeners() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+      this.clickOutsideHandler = null;
+    }
+    if (this.scrollResizeHandler) {
+      window.removeEventListener('scroll', this.scrollResizeHandler, true);
+      window.removeEventListener('resize', this.scrollResizeHandler);
+      this.scrollResizeHandler = null;
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+
+  private close() {
+    this.resolvedAnchor?.focus();
+    this.dsClose.emit();
+    this.open = false;
+  }
+
+  @Listen('keydown')
+  handleKeyDown(e: KeyboardEvent) {
+    if (!this.open) return;
+    const flat = this.flatItems;
+    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);
+    if (!enabled.length) return;
+
+    const cur = enabled.indexOf(this.focusedIndex);
+    const safe = cur < 0 ? 0 : cur;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault(); e.stopPropagation();
+        this.focusedIndex = enabled[(safe + 1) % enabled.length];
+        this.focusItem(this.focusedIndex);
+        break;
+      case 'ArrowUp':
+        e.preventDefault(); e.stopPropagation();
+        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];
+        this.focusItem(this.focusedIndex);
+        break;
+      case 'Home':
+        e.preventDefault(); e.stopPropagation();
+        this.focusedIndex = enabled[0];
+        this.focusItem(this.focusedIndex);
+        break;
+      case 'End':
+        e.preventDefault(); e.stopPropagation();
+        this.focusedIndex = enabled[enabled.length - 1];
+        this.focusItem(this.focusedIndex);
+        break;
+      case 'Escape':
+        e.preventDefault();
+        this.close();
+        break;
+      case 'Tab':
+        e.preventDefault();
+        this.close();
+        break;
+    }
+  }
+
+  private focusItem(idx: number) {
+    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');
+    btns[idx]?.focus();
+  }
+
+  private handleItemClick(item: MenuItemData) {
+    if (item.isInactive) return;
+    this.dsSelect.emit(item);
+    this.close();
+  }
+
+  render() {
+    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;
+
+    const sections = this.activeSections;
+    let flatIdx = 0;
+
+    const popupStyle: Record<string, string> = {
+      position: 'fixed',
+      left: '0',
+      top: '0',
+      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,
+      zIndex: '9998',
+      visibility: this.positionReady ? 'visible' : 'hidden',
+    };
+
+    if (this.menuWidth) popupStyle['width'] = this.menuWidth;
+    if (this.minWidth) popupStyle['min-width'] = this.minWidth;
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <div
+          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}
+          style={popupStyle}
+          role="menu"
+          aria-label="Menu"
+          aria-orientation="vertical"
+        >
+          {sections.map((section, si) => (
+            <div
+              key={si}
+              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}
+              role={section.header ? 'group' : undefined}
+              aria-label={section.header}
+            >
+              {section.header && (
+                <div class="section-header" aria-hidden="true">
+                  <span class="text-body-small-emphasis section-label">{section.header}</span>
+                </div>
+              )}
+              {section.items.map(item => {
+                const idx = flatIdx++;
+                const isFocused = this.focusedIndex === idx;
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    class={{
+                      'menu-item': true,
+                      'menu-item--selected': !!item.isSelected,
+                      'menu-item--inactive': !!item.isInactive,
+                      'menu-item--destructive': !!item.isDestructive,
+                      'menu-item--focused': isFocused,
+                    }}
+                    role="menuitem"
+                    aria-current={item.isSelected ? 'true' : undefined}
+                    disabled={item.isInactive}
+                    tabIndex={isFocused ? 0 : -1}
+                    onClick={() => this.handleItemClick(item)}
+                    onFocus={() => { this.focusedIndex = idx; }}
+                  >
+                    <div class="menu-item__content">
+                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>
+                        {item.label}
+                      </span>
+                      {item.subtext && (
+                        <span class="text-body-small menu-item__subtext">{item.subtext}</span>
+                      )}
+                    </div>
+                    {item.showToggle && (
+                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden="true">
+                        <div class="menu-item__toggle-thumb" />
+                      </div>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Modal/Modal.tsx

@@ -0,0 +1,197 @@
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
+
+export type ModalWidth = 'sm' | 'md' | 'lg';
+
+const WIDTH_MAP: Record<ModalWidth, string> = {
+  sm: 'var(--dimension-modal-width-sm, 400px)',
+  md: 'var(--dimension-modal-width-md, 560px)',
+  lg: 'var(--dimension-modal-width-lg, 720px)',
+};
+
+const CLOSE_ANIMATION_MS = 220;
+
+const FOCUSABLE_SEL = [
+  'a[href]',
+  'area[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'iframe',
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+let modalIdCounter = 0;
+
+@Component({
+  tag: 'ds-modal',
+  styleUrl: 'Modal.css',
+  scoped: true,
+})
+export class Modal {
+  @Element() el!: HTMLElement;
+
+  @Prop({ mutable: true }) open: boolean = false;
+  @Prop() heading!: string;
+  @Prop() subtitle: string | undefined;
+  @Prop() modalWidth: ModalWidth | string = 'md';
+
+  @State() private shouldRender: boolean = false;
+  @State() private closing: boolean = false;
+
+  @Event() dsClose!: EventEmitter<void>;
+
+  private instanceId = ++modalIdCounter;
+  private titleId = `ds-modal-title-${modalIdCounter}`;
+  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;
+  private previousFocus: HTMLElement | null = null;
+  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  private tabHandler: ((e: KeyboardEvent) => void) | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidLoad() {
+    if (this.open) this.onOpenChange(true);
+  }
+
+  disconnectedCallback() {
+    this.teardownListeners();
+  }
+
+  @Watch('open')
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      this.shouldRender = true;
+      this.closing = false;
+      this.previousFocus = document.activeElement as HTMLElement | null;
+      requestAnimationFrame(() => {
+        this.focusFirst();
+        this.setupListeners();
+      });
+    } else if (this.shouldRender) {
+      this.closing = true;
+      this.teardownListeners();
+      this.closeTimer = setTimeout(() => {
+        this.shouldRender = false;
+        this.closing = false;
+        this.closeTimer = null;
+        this.previousFocus?.focus?.();
+        this.previousFocus = null;
+      }, CLOSE_ANIMATION_MS);
+    }
+  }
+
+  private focusFirst() {
+    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;
+    if (!dialog) return;
+    const focusables = this.getFocusables(dialog);
+    (focusables[0] ?? dialog).focus();
+  }
+
+  private getFocusables(root: HTMLElement): HTMLElement[] {
+    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(
+      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'
+    );
+  }
+
+  private setupListeners() {
+    this.escapeHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+    };
+
+    this.tabHandler = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;
+      if (!dialog) return;
+      const focusables = this.getFocusables(dialog);
+      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey) {
+        if (active === first || active === dialog || !dialog.contains(active)) {
+          e.preventDefault(); last.focus();
+        }
+      } else {
+        if (active === last || !dialog.contains(active)) {
+          e.preventDefault(); first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', this.escapeHandler);
+    document.addEventListener('keydown', this.tabHandler);
+  }
+
+  private teardownListeners() {
+    if (this.escapeHandler) {
+      document.removeEventListener('keydown', this.escapeHandler);
+      this.escapeHandler = null;
+    }
+    if (this.tabHandler) {
+      document.removeEventListener('keydown', this.tabHandler);
+      this.tabHandler = null;
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+
+  private close() {
+    this.dsClose.emit();
+    this.open = false;
+  }
+
+  private handleBackdropMouseDown(e: MouseEvent) {
+    if (e.target === e.currentTarget) this.close();
+  }
+
+  private get resolvedWidth(): string {
+    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {
+      return WIDTH_MAP[this.modalWidth];
+    }
+    return this.modalWidth as string;
+  }
+
+  render() {
+    // Always render slots so scoped-mode slot distribution doesn't leak content.
+    // The backdrop is hidden via CSS when not active.
+    const hidden = !this.shouldRender && !this.closing;
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <div
+          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}
+          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}
+          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}
+        >
+          <div
+            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={this.titleId}
+            aria-describedby={this.subtitle ? this.subtitleId : undefined}
+            tabIndex={-1}
+            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 32px))` }}
+          >
+            <div class="modal-header">
+              <h2 id={this.titleId} class="text-title-small modal-title">{this.heading}</h2>
+              {this.subtitle && (
+                <div id={this.subtitleId} class="modal-subtitle text-body-medium">
+                  {this.subtitle}
+                </div>
+              )}
+            </div>
+            <div class="modal-body">
+              <slot />
+            </div>
+            <div class="modal-footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}