@arclux/arc-ui 1.0.0

package/src/feedback/dialog.js

@@ -0,0 +1,298 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcDialog extends LitElement {
+  static properties = {
+    open:           { type: Boolean, reflect: true },
+    heading:        { type: String },
+    message:        { type: String },
+    'confirm-label': { type: String, attribute: 'confirm-label' },
+    'cancel-label':  { type: String, attribute: 'cancel-label' },
+    variant:        { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .dialog__backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding-top: 15vh;
+        padding-left: var(--space-lg);
+        padding-right: var(--space-lg);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity var(--transition-fast), visibility var(--transition-fast);
+      }
+
+      :host([open]) .dialog__backdrop {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .dialog__card {
+        position: relative;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
+        box-shadow: var(--shadow-overlay);
+        width: 100%;
+        max-width: 380px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transform: translateY(-8px);
+        transition: transform var(--transition-fast);
+      }
+
+      :host([open]) .dialog__card {
+        transform: translateY(0);
+      }
+
+      /* Top accent line */
+      .dialog__accent {
+        height: 3px;
+        background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
+      }
+
+      :host([variant="danger"]) .dialog__accent {
+        background: linear-gradient(90deg, var(--color-error), var(--color-warning, var(--color-error)));
+      }
+
+      :host([variant="danger"]) .dialog__card {
+        border-color: rgba(var(--color-error-rgb, 239, 68, 68), 0.25);
+        box-shadow: var(--shadow-overlay), 0 0 20px rgba(var(--color-error-rgb, 239, 68, 68), 0.12);
+      }
+
+      .dialog__header {
+        padding: var(--space-md) var(--space-lg) 0;
+      }
+
+      .dialog__heading {
+        font-size: var(--text-md);
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+      }
+
+      .dialog__body {
+        padding: var(--space-sm) var(--space-lg);
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+      }
+
+      .dialog__footer {
+        padding: var(--space-sm) var(--space-lg) var(--space-md);
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--space-sm);
+      }
+
+      .dialog__btn {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        border-radius: var(--radius-md);
+        padding: var(--space-sm) var(--space-md);
+        cursor: pointer;
+        transition: background var(--transition-fast), border-color var(--transition-fast),
+                    color var(--transition-fast), box-shadow var(--transition-fast);
+        border: 1px solid transparent;
+        line-height: 1;
+      }
+
+      .dialog__btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      .dialog__btn--cancel {
+        background: transparent;
+        border-color: var(--border-default);
+        color: var(--text-secondary);
+      }
+
+      .dialog__btn--cancel:hover {
+        background: var(--bg-hover);
+        border-color: var(--border-bright);
+        color: var(--text-primary);
+      }
+
+      .dialog__btn--confirm {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+        color: var(--text-on-accent, #fff);
+      }
+
+      .dialog__btn--confirm:hover {
+        box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.4);
+      }
+
+      :host([variant="danger"]) .dialog__btn--confirm {
+        background: var(--color-error);
+        border-color: var(--color-error);
+      }
+
+      :host([variant="danger"]) .dialog__btn--confirm:hover {
+        box-shadow: 0 0 16px rgba(var(--color-error-rgb, 239, 68, 68), 0.4);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .dialog__backdrop,
+        .dialog__card { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+    this.message = '';
+    this['confirm-label'] = 'Confirm';
+    this['cancel-label'] = 'Cancel';
+    this.variant = 'default';
+    this._handleKeydown = this._handleKeydown.bind(this);
+    this._resolvePromise = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._handleKeydown);
+    document.body.style.overflow = '';
+  }
+
+  /**
+   * Opens the dialog and returns a Promise that resolves to `true` on confirm
+   * or `false` on cancel (including Escape and backdrop click).
+   */
+  confirm() {
+    this.open = true;
+    return new Promise((resolve) => {
+      this._resolvePromise = resolve;
+    });
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Escape') {
+      this._cancel();
+      return;
+    }
+    // Focus trap
+    if (e.key === 'Tab') {
+      if (!this._focusableEls) {
+        this._focusableEls = this.shadowRoot.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+      }
+      const focusable = this._focusableEls;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = this.shadowRoot.activeElement;
+
+      if (e.shiftKey && (!active || active === first)) {
+        e.preventDefault();
+        last?.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    }
+  }
+
+  _doConfirm() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-confirm', { bubbles: true, composed: true }));
+    if (this._resolvePromise) {
+      this._resolvePromise(true);
+      this._resolvePromise = null;
+    }
+  }
+
+  _cancel() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-cancel', { bubbles: true, composed: true }));
+    if (this._resolvePromise) {
+      this._resolvePromise(false);
+      this._resolvePromise = null;
+    }
+  }
+
+  _backdropClick(e) {
+    if (e.target === e.currentTarget) {
+      this._cancel();
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        this._focusableEls = null;
+        document.addEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = 'hidden';
+        this.updateComplete.then(() => {
+          const confirmBtn = this.shadowRoot.querySelector('.dialog__btn--confirm');
+          confirmBtn?.focus();
+        });
+      } else {
+        document.removeEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = '';
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="dialog__backdrop"
+        @click=${this._backdropClick}
+        part="backdrop"
+      >
+        <div
+          class="dialog__card"
+          role="alertdialog"
+          aria-modal="true"
+          aria-label=${this.heading || 'Dialog'}
+          part="card"
+        >
+          <div class="dialog__accent" part="accent"></div>
+          ${this.heading ? html`
+            <div class="dialog__header" part="header">
+              <h2 class="dialog__heading">${this.heading}</h2>
+            </div>
+          ` : ''}
+          ${this.message ? html`
+            <div class="dialog__body" part="body">
+              ${this.message}
+            </div>
+          ` : ''}
+          <div class="dialog__footer" part="footer">
+            <button
+              class="dialog__btn dialog__btn--cancel"
+              @click=${this._cancel}
+              part="cancel"
+            >${this['cancel-label']}</button>
+            <button
+              class="dialog__btn dialog__btn--confirm"
+              @click=${this._doConfirm}
+              part="confirm"
+            >${this['confirm-label']}</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-dialog', ArcDialog);

package/src/feedback/dropdown-menu.js

@@ -0,0 +1,259 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../shared/menu-item.js';
+import '../shared/menu-divider.js';
+
+export class ArcDropdownMenu extends LitElement {
+  static properties = {
+    open:          { type: Boolean, reflect: true },
+    _focusedIndex: { state: true },
+    _children:     { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .dropdown__trigger {
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      .dropdown__panel {
+        position: absolute;
+        z-index: 100;
+        top: calc(100% + var(--space-xs));
+        left: 0;
+        min-width: 200px;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-xs) 0;
+        box-shadow: var(--shadow-overlay);
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-4px);
+        transition:
+          opacity var(--transition-base),
+          visibility var(--transition-base),
+          transform var(--transition-base);
+      }
+
+      :host([open]) .dropdown__panel {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .dropdown__item {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        width: 100%;
+        padding: var(--touch-pad) var(--space-md);
+        min-height: var(--touch-min);
+        border: none;
+        background: transparent;
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        cursor: pointer;
+        text-align: left;
+        transition: background var(--transition-fast), color var(--transition-fast);
+        outline: none;
+      }
+
+      .dropdown__item:hover,
+      .dropdown__item.is-focused {
+        background: var(--bg-hover);
+        color: var(--text-primary);
+      }
+
+      .dropdown__item:focus-visible {
+        box-shadow: inset var(--focus-glow);
+      }
+
+      .dropdown__item-label {
+        flex: 1;
+      }
+
+      .dropdown__item-shortcut {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        opacity: 0.6;
+      }
+
+      .dropdown__divider {
+        height: 1px;
+        background: var(--border-default);
+        margin: var(--space-xs) 0;
+      }
+
+      .dropdown__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this._focusedIndex = -1;
+    this._children = [];
+    this._onDocumentClick = this._onDocumentClick.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+
+  _onSlotChange(e) {
+    this._children = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-MENU-ITEM' || el.tagName === 'ARC-MENU-DIVIDER');
+  }
+
+  get _menuItems() {
+    return this._children.filter(el => el.tagName === 'ARC-MENU-ITEM');
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        this._focusedIndex = -1;
+        requestAnimationFrame(() => {
+          document.addEventListener('click', this._onDocumentClick);
+          document.addEventListener('keydown', this._onKeyDown);
+        });
+      } else {
+        document.removeEventListener('click', this._onDocumentClick);
+        document.removeEventListener('keydown', this._onKeyDown);
+        this._focusedIndex = -1;
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onDocumentClick);
+    document.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  _onDocumentClick(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._close();
+    }
+  }
+
+  _onKeyDown(e) {
+    if (!this.open) return;
+
+    const selectable = this._menuItems;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this._focusedIndex = this._focusedIndex < selectable.length - 1
+          ? this._focusedIndex + 1
+          : 0;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this._focusedIndex = this._focusedIndex > 0
+          ? this._focusedIndex - 1
+          : selectable.length - 1;
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (this._focusedIndex >= 0 && this._focusedIndex < selectable.length) {
+          this._selectItem(selectable[this._focusedIndex], this._focusedIndex);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        this._close();
+        break;
+    }
+  }
+
+  _toggle() {
+    this.open = !this.open;
+  }
+
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _selectItem(item, index) {
+    this.dispatchEvent(new CustomEvent('arc-select', {
+      detail: { item: { label: item.label, shortcut: item.shortcut }, index },
+      bubbles: true,
+      composed: true,
+    }));
+    this._close();
+  }
+
+  _renderChild(child, globalIndex) {
+    if (child.tagName === 'ARC-MENU-DIVIDER') {
+      return html`<div class="dropdown__divider" role="separator" part="divider"></div>`;
+    }
+
+    const selectableIndex = this._menuItems.indexOf(child);
+
+    return html`
+      <button
+        class="dropdown__item ${selectableIndex === this._focusedIndex ? 'is-focused' : ''}"
+        role="menuitem"
+        tabindex="-1"
+        @click=${() => this._selectItem(child, globalIndex)}
+        @mouseenter=${() => { this._focusedIndex = selectableIndex; }}
+        part="item"
+      >
+        <span class="dropdown__item-label">${child.label || ''}</span>
+        ${child.shortcut ? html`<span class="dropdown__item-shortcut" part="shortcut">${child.shortcut}</span>` : ''}
+      </button>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="dropdown__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div
+        class="dropdown__trigger"
+        @click=${this._toggle}
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        part="trigger"
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        class="dropdown__panel"
+        role="menu"
+        aria-hidden=${this.open ? 'false' : 'true'}
+        part="panel"
+      >
+        ${this._children.map((child, i) => this._renderChild(child, i))}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-dropdown-menu', ArcDropdownMenu);