@arclux/arc-ui 1.0.0

package/src/input/combobox.js

@@ -0,0 +1,295 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../shared/option.js';
+
+export class ArcCombobox extends LitElement {
+  static properties = {
+    value:        { type: String, reflect: true },
+    placeholder:  { type: String },
+    label:        { type: String },
+    disabled:     { type: Boolean, reflect: true },
+    _query:       { state: true },
+    _open:        { state: true },
+    _activeIndex: { state: true },
+    _options:     { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        font-family: var(--font-body);
+      }
+
+      :host([disabled]) {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .combobox__label {
+        display: block;
+        font-size: var(--text-xs);
+        font-weight: 600;
+        color: var(--text-secondary);
+        margin-bottom: var(--space-xs);
+        letter-spacing: 0.5px;
+      }
+
+      .combobox__wrapper {
+        position: relative;
+      }
+
+      .combobox__input {
+        width: 100%;
+        box-sizing: border-box;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-sm) var(--space-md);
+        outline: none;
+        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      .combobox__input::placeholder {
+        color: var(--text-muted);
+      }
+
+      .combobox__input:focus {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      .combobox__listbox {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        right: 0;
+        max-height: 220px;
+        overflow-y: auto;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-overlay);
+        z-index: 1000;
+        padding: var(--space-xs) 0;
+        display: none;
+      }
+
+      .combobox__listbox--open {
+        display: block;
+      }
+
+      .combobox__option {
+        display: block;
+        width: 100%;
+        text-align: left;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+        background: none;
+        border: none;
+        padding: var(--space-sm) var(--space-md);
+        cursor: pointer;
+        transition: background var(--transition-fast);
+      }
+
+      .combobox__option:hover,
+      .combobox__option--active {
+        background: rgba(var(--accent-primary-rgb), 0.1);
+      }
+
+      .combobox__option--selected {
+        color: var(--accent-primary);
+      }
+
+      .combobox__option:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .combobox__empty {
+        padding: var(--space-sm) var(--space-md);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .combobox__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;
+        }
+      }
+    `,
+  ];
+
+  static _idCounter = 0;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.placeholder = '';
+    this.label = '';
+    this.disabled = false;
+    this._query = '';
+    this._open = false;
+    this._activeIndex = -1;
+    this._options = [];
+    this._comboId = `combobox-${++ArcCombobox._idCounter}`;
+    this._onDocClick = this._onDocClick.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this._onDocClick, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onDocClick, true);
+  }
+
+  _onSlotChange(e) {
+    this._options = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-OPTION');
+  }
+
+  _onDocClick(e) {
+    if (!e.composedPath().includes(this)) {
+      this._open = false;
+    }
+  }
+
+  get _normalizedItems() {
+    return this._options.map(opt => ({ label: opt.label, value: opt.value }));
+  }
+
+  get _filteredItems() {
+    const q = this._query.toLowerCase();
+    if (!q) return this._normalizedItems;
+    return this._normalizedItems.filter(item =>
+      item.label.toLowerCase().includes(q)
+    );
+  }
+
+  _onInput(e) {
+    this._query = e.target.value;
+    this._open = true;
+    this._activeIndex = -1;
+  }
+
+  _onFocus() {
+    this._open = true;
+  }
+
+  _selectItem(item) {
+    this.value = item.value;
+    this._query = item.label;
+    this._open = false;
+    this._activeIndex = -1;
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: item.value, item },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onKeyDown(e) {
+    const items = this._filteredItems;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!this._open) { this._open = true; return; }
+        this._activeIndex = Math.min(this._activeIndex + 1, items.length - 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this._activeIndex = Math.max(this._activeIndex - 1, 0);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (this._activeIndex >= 0 && items[this._activeIndex]) {
+          this._selectItem(items[this._activeIndex]);
+        }
+        break;
+      case 'Escape':
+        this._open = false;
+        this._activeIndex = -1;
+        break;
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('value') && !this._open) {
+      const item = this._normalizedItems.find(i => i.value === this.value);
+      if (item) this._query = item.label;
+    }
+  }
+
+  render() {
+    const filtered = this._filteredItems;
+    const listboxId = `${this._comboId}-listbox`;
+    const activeId = this._activeIndex >= 0 ? `${this._comboId}-opt-${this._activeIndex}` : undefined;
+
+    return html`
+      <div class="combobox__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      ${this.label ? html`<label class="combobox__label" for="${this._comboId}-input" part="label">${this.label}</label>` : ''}
+      <div class="combobox__wrapper" part="wrapper">
+        <input
+          id="${this._comboId}-input"
+          class="combobox__input"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          .value=${this._query}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          aria-expanded=${String(this._open)}
+          aria-controls=${listboxId}
+          aria-activedescendant=${activeId || ''}
+          aria-autocomplete="list"
+          @input=${this._onInput}
+          @focus=${this._onFocus}
+          @keydown=${this._onKeyDown}
+          part="input"
+        />
+        <div
+          id=${listboxId}
+          class="combobox__listbox ${this._open ? 'combobox__listbox--open' : ''}"
+          role="listbox"
+          part="listbox"
+        >
+          ${filtered.length > 0
+            ? filtered.map((item, i) => html`
+                <button
+                  id="${this._comboId}-opt-${i}"
+                  class="combobox__option ${i === this._activeIndex ? 'combobox__option--active' : ''} ${item.value === this.value ? 'combobox__option--selected' : ''}"
+                  role="option"
+                  aria-selected=${item.value === this.value ? 'true' : 'false'}
+                  @click=${() => this._selectItem(item)}
+                  part="option"
+                >${item.label}</button>
+              `)
+            : html`<div class="combobox__empty">No results found</div>`
+          }
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-combobox', ArcCombobox);

package/src/input/copy-button.js

@@ -0,0 +1,144 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcCopyButton extends LitElement {
+  static properties = {
+    value:    { type: String },
+    disabled: { type: Boolean, reflect: true },
+    _copied:  { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .copy-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-xs);
+        background: rgba(var(--black-rgb), 0.6);
+        -webkit-backdrop-filter: blur(8px);
+        backdrop-filter: blur(8px);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        cursor: pointer;
+        padding: var(--touch-pad) var(--space-sm);
+        min-height: var(--touch-min);
+        font-family: var(--font-body);
+        font-size: var(--text-xs);
+        line-height: 1;
+        transition:
+          background var(--transition-fast),
+          border-color var(--transition-fast),
+          color var(--transition-fast),
+          box-shadow var(--transition-fast);
+      }
+
+      .copy-btn:hover {
+        border-color: var(--border-bright);
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .copy-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .copy-btn.is-copied {
+        border-color: var(--color-success);
+        color: var(--color-success);
+      }
+
+      .copy-btn__icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+      }
+
+      .copy-btn__label {
+        user-select: 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.value = '';
+    this.disabled = false;
+    this._copied = false;
+    this._timeout = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._timeout) {
+      clearTimeout(this._timeout);
+    }
+  }
+
+  async _copy() {
+    if (this.disabled || this._copied) return;
+
+    try {
+      await navigator.clipboard.writeText(this.value);
+      this._copied = true;
+
+      this.dispatchEvent(new CustomEvent('arc-copy', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }));
+
+      this._timeout = setTimeout(() => {
+        this._copied = false;
+      }, 2000);
+    } catch {
+      // Clipboard API may fail in non-secure contexts
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        class="copy-btn ${this._copied ? 'is-copied' : ''}"
+        @click=${this._copy}
+        ?disabled=${this.disabled}
+        aria-label=${this._copied ? 'Copied' : 'Copy to clipboard'}
+        part="button"
+      >
+        <span class="copy-btn__icon" part="icon">
+          ${this._copied ? html`
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06l2.5 2.5 6.72-6.72a.75.75 0 011.06 0z"/>
+            </svg>
+          ` : html`
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
+              <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
+            </svg>
+          `}
+        </span>
+        <span class="copy-btn__label" part="label">${this._copied ? 'Copied!' : 'Copy'}</span>
+      </button>
+    `;
+  }
+}
+
+customElements.define('arc-copy-button', ArcCopyButton);