@adia-ai/web-components 0.0.1

package/components/select/select.css

@@ -0,0 +1,277 @@
+@scope (select-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --select-gap:               var(--a-space-2);
+    --select-trigger-gap:       var(--a-space-1);
+    --select-height:            var(--a-size);
+    --select-px:                var(--a-ui-px);
+    --select-radius:            var(--a-radius);
+    --select-leading-radius:    var(--a-radius-full);
+
+    /* ── Typography ── */
+    --select-font-size:         var(--a-ui-size);
+    --select-label-size:        var(--a-label-size);
+
+    /* ── Colors ── */
+    --select-bg:                var(--a-ui-bg);
+    --select-bg-selected:       var(--a-ui-bg-selected);
+    --select-bg-hover:          var(--a-ui-bg-hover);
+    --select-border:            var(--a-ui-border);
+    --select-border-hover:      var(--a-ui-border-hover);
+    --select-border-focus:      var(--a-ui-border-active);
+    --select-label-fg:          var(--a-ui-text-muted);
+    --select-placeholder-fg:    var(--a-ui-text-placeholder);
+    --select-caret-fg:          var(--a-ui-text-muted);
+    --select-fg:                var(--a-ui-text);
+    --select-fg-selected:       var(--a-ui-text-selected);
+    --select-fg-subtle:         var(--a-ui-text-subtle);
+    --select-fg-muted:          var(--a-ui-text-muted);
+    --select-fg-disabled:       var(--a-ui-text-disabled);
+    --select-ghost-bg-hover:    var(--a-bg-muted);
+
+    /* ── Transition ── */
+    --select-duration:          var(--a-duration-fast);
+    --select-easing:            var(--a-easing);
+
+    /* ── Listbox ── */
+    --select-option-px:         var(--a-ui-px);
+    --select-option-py:         var(--a-ui-py);
+    --select-option-bg-hover:   var(--a-bg-hover);
+    --select-option-fg-active:  var(--a-fg);
+    --select-option-fg-disabled: var(--a-ui-text-disabled);
+    --select-group-label-size:  var(--a-ui-size);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--select-gap);
+    min-width: 0;
+    font-size: var(--select-font-size);
+  }
+
+  :scope[data-direction="row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled); }
+
+  /* Label */
+  :scope::before {
+    content: attr(label);
+    font-size: var(--select-label-size);
+    color: var(--select-label-fg);
+  }
+  :scope:not([label])::before,
+  :scope[label=""]::before { display: none; }
+
+  /* Trigger */
+  [slot="trigger"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--select-trigger-gap);
+    min-width: 0;
+    min-height: var(--select-height);
+    padding: 0 var(--select-px);
+    border: 1px solid var(--select-border);
+    border-radius: var(--select-radius);
+    background: var(--select-bg);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      border-color var(--select-duration) var(--select-easing),
+      background   var(--select-duration) var(--select-easing);
+  }
+  [slot="trigger"]:hover {
+    border-color: var(--select-border-hover);
+    background: var(--select-bg-hover);
+    color: var(--select-fg);
+  }
+  [slot="trigger"]:hover [slot="caret"] {
+    color: var(--select-fg-subtle);
+  }
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible [slot="trigger"] {
+    border-color: var(--select-border-focus);
+    color: var(--select-fg);
+  }
+  :scope:focus-visible::before {
+    color: var(--select-fg-subtle);
+  }
+
+  /* Leading icon / avatar */
+  [slot="leading"] {
+    flex-shrink: 0;
+    --a-icon-size: var(--select-font-size);
+    color: var(--select-fg-muted);
+  }
+
+  img[slot="leading"] {
+    width: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
+    height: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
+    border-radius: var(--select-leading-radius);
+    object-fit: cover;
+  }
+
+  [slot="display"] {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--select-fg);
+  }
+  input[slot="display"] {
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--select-fg);
+    min-width: 0;
+    width: 100%;
+  }
+  input[slot="display"]::placeholder {
+    color: var(--select-placeholder-fg);
+  }
+  :scope:not([value]) [slot="display"],
+  :scope[value=""] [slot="display"] {
+    color: var(--select-placeholder-fg);
+  }
+
+  [slot="caret"] {
+    color: var(--select-caret-fg) !important;
+    flex-shrink: 0;
+  }
+
+  /* Size handled by universal [size] attribute system. */
+
+  /* Ghost variant */
+  :scope[variant="ghost"] {
+    --select-bg: transparent;
+    --select-border: transparent;
+    --select-border-hover: transparent;
+    --select-border-focus: transparent;
+  }
+  :scope[variant="ghost"] [slot="trigger"]:hover {
+    background: var(--select-ghost-bg-hover);
+    color: var(--select-fg);
+  }
+  :scope[variant="ghost"] [slot="trigger"]:hover [slot="caret"] {
+    color: var(--select-fg-subtle) !important;
+  }
+}
+
+/* ── Top-layer: cannot inherit component tokens ── */
+
+select-ui [slot="listbox"] {
+  margin: 0;
+  padding: var(--a-space-1);
+  border: 1px solid var(--a-ui-border);
+  border-radius: var(--a-radius);
+  background: var(--a-bg-subtle);
+  box-shadow: var(--a-shadow-lg);
+  max-height: 15rem;
+  overflow-y: auto;
+  font-family: inherit;
+  font-size: var(--a-ui-size);
+  color: var(--a-fg);
+
+  /* Positioned by JS (#positionListbox) — fixed to viewport */
+  width: max-content;
+}
+
+select-ui [role="option"] {
+  padding: var(--a-space-1) var(--a-ui-px);
+  border-radius: var(--a-radius-sm);
+  white-space: nowrap;
+  color: var(--a-fg-subtle);
+  cursor: pointer;
+  transition:
+    background var(--a-duration-fast) var(--a-easing),
+    color var(--a-duration-fast) var(--a-easing);
+}
+select-ui [role="option"]:hover,
+select-ui [role="option"][data-focused] {
+  background: var(--a-bg-hover);
+  color: var(--a-fg);
+}
+select-ui [role="option"][aria-selected="true"] {
+  color: var(--select-fg-selected);
+  background: var(--select-bg-selected);
+  font-weight: var(--a-ui-weight);
+}
+select-ui [role="option"][aria-disabled="true"] {
+  color: var(--a-fg-muted);
+  cursor: not-allowed;
+}
+select-ui [role="option"][aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+/* Option with icon */
+select-ui [role="option"] icon-ui {
+  --a-icon-size: var(--a-ui-size);
+  color: var(--a-fg-muted);
+  margin-inline-end: var(--a-space-1);
+  vertical-align: -0.125em;
+}
+
+/* Separator */
+select-ui [data-separator] {
+  height: 1px;
+  background: var(--a-border-subtle);
+  margin: var(--a-space-1) 0;
+  border: none;
+}
+
+/* Menu header (avatar + name + description) */
+select-ui [data-menu-header] {
+  display: flex;
+  align-items: center;
+  gap: var(--a-space-2);
+  padding: var(--a-space-2) var(--a-ui-px);
+}
+
+select-ui [data-menu-header] img {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-radius-full);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+select-ui [data-menu-header] strong {
+  display: block;
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+  font-size: var(--a-ui-size);
+}
+
+select-ui [data-menu-header] span {
+  display: block;
+  font-size: var(--a-ui-sm);
+  color: var(--a-fg-muted);
+}
+
+select-ui [role="group"] [slot="group-label"] {
+  padding: var(--a-space-1) var(--a-ui-px);
+  font-size: var(--a-ui-tiny);
+  font-weight: var(--a-ui-weight);
+  color: var(--a-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+/* Divider between groups — enabled by <select-ui divider>. */
+select-ui[divider] [role="group"] + [role="group"] {
+  border-top: 1px solid var(--a-border-subtle);
+  margin-top: var(--a-space-1);
+  padding-top: var(--a-space-1);
+}

package/components/select/select.js

@@ -0,0 +1,388 @@
+import { AdiaFormElement } from '@core/form.js';
+import { anchorPopover } from '@core/anchor.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+class AdiaSelect extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    placeholder: { type: String,  default: 'Select...', reflect: true },
+    open:        { type: Boolean, default: false, reflect: true },
+    label:       { type: String,  default: '', reflect: true },
+    icon:        { type: String,  default: '', reflect: true },
+    avatar:      { type: String,  default: '', reflect: true },
+    multiple:    { type: Boolean, default: false, reflect: true },
+    searchable:  { type: Boolean, default: false, reflect: true },
+    freeText:    { type: Boolean, default: false, reflect: true, attribute: 'free-text' },
+    divider:     { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #options = [];
+  #listbox = null;
+  #anchorCleanup = null;
+  #query = '';
+  #searchInput = null;
+
+  #onSearchFocus = () => { if (!this.disabled) this.open = true; };
+  #onSearchClick = (e) => { e.stopPropagation(); if (!this.disabled) this.open = true; };
+
+  #onOptionClick = (e) => {
+    const el = e.currentTarget;
+    e.stopPropagation();
+    const opt = el.__adiaOption;
+    if (!opt) return;
+    if (opt.disabled) return;
+    if (opt.action) {
+      this.open = false;
+      this.dispatchEvent(new CustomEvent('action', { bubbles: true, detail: { action: opt.action } }));
+      return;
+    }
+    this.value = opt.value;
+    this.open = false;
+    this.#query = '';
+    this.syncValue(opt.value);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'combobox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+    // Only parse declarative <option>/<optgroup> children if options
+    // weren't already set programmatically (e.g. via .options = [...])
+    if (this.#options.length === 0) {
+      this.#parseOptions();
+    }
+  }
+
+  render() {
+    // Stamp default trigger if none provided
+    if (!this.querySelector('[slot="trigger"]')) {
+      // Detach listbox before innerHTML wipe so it isn't destroyed
+      const lb = this.#listbox;
+      if (lb?.parentNode === this) this.removeChild(lb);
+
+      const leading = this.avatar
+        ? `<img slot="leading" src="${this.avatar}" alt="" />`
+        : this.icon
+          ? `<icon-ui slot="leading" name="${this.icon}"></icon-ui>`
+          : '';
+      const displayMarkup = this.searchable
+        ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
+        : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
+      this.innerHTML = `
+        <span slot="trigger">
+          ${leading}
+          ${displayMarkup}
+          <icon-ui name="caret-up-down" slot="caret"></icon-ui>
+        </span>
+      `;
+
+      if (this.searchable) {
+        // Detach from previous search input if any
+        if (this.#searchInput) {
+          this.#searchInput.removeEventListener('input', this.#onSearchInput);
+          this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
+          this.#searchInput.removeEventListener('click', this.#onSearchClick);
+        }
+        this.#searchInput = this.querySelector('input[slot="display"]');
+        if (this.#searchInput) {
+          this.#searchInput.addEventListener('input', this.#onSearchInput);
+          this.#searchInput.addEventListener('focus', this.#onSearchFocus);
+          this.#searchInput.addEventListener('click', this.#onSearchClick);
+        }
+      }
+
+      // Re-attach listbox after trigger is stamped
+      if (lb) this.appendChild(lb);
+    } else {
+      const display = this.querySelector('[slot="display"]');
+      if (display) {
+        if (display.tagName === 'INPUT') {
+          // Only update value when not actively editing (no active query)
+          if (!this.#query) display.value = this.#displayText() === this.placeholder ? '' : this.#displayText();
+        } else {
+          display.textContent = this.#displayText();
+        }
+      }
+    }
+
+    // Ensure listbox exists (regardless of trigger source)
+    if (!this.#listbox) {
+      this.#listbox = this.querySelector('[slot="listbox"]');
+      if (!this.#listbox) {
+        this.#listbox = document.createElement('div');
+        this.#listbox.setAttribute('slot', 'listbox');
+        this.#listbox.setAttribute('role', 'listbox');
+        this.#listbox.setAttribute('popover', 'manual');
+        this.appendChild(this.#listbox);
+      }
+      this.#renderOptions();
+    }
+
+    // Sync aria-selected when value changes
+    if (this.#listbox) {
+      for (const opt of this.#listbox.querySelectorAll('[role="option"]')) {
+        const selected = opt.getAttribute('data-value') === this.value;
+        if (selected) opt.setAttribute('aria-selected', 'true');
+        else opt.removeAttribute('aria-selected');
+      }
+    }
+
+    this.setAttribute('aria-expanded', String(this.open));
+
+    // Toggle popover
+    if (this.open) {
+      this.#listbox?.showPopover?.();
+      const trigger = this.querySelector('[slot="trigger"]') || this;
+      this.#listbox.style.minWidth = `${trigger.getBoundingClientRect().width}px`;
+      this.#listbox.style.width = 'max-content';
+      this.#anchorCleanup = anchorPopover(trigger, this.#listbox, {
+        placement: this.getAttribute('placement') || 'bottom-start', gap: 4, matchWidth: false,
+      });
+      // Dismiss on outside click (next frame so current click doesn't trigger it)
+      requestAnimationFrame(() => {
+        document.addEventListener('pointerdown', this.#onOutside, { once: true });
+      });
+    } else {
+      this.#anchorCleanup?.();
+      this.#anchorCleanup = null;
+      this.#listbox?.hidePopover?.();
+      document.removeEventListener('pointerdown', this.#onOutside);
+    }
+  }
+
+  /** Parse <option> and <optgroup> children into internal model. */
+  #parseOptions() {
+    this.#options = [];
+    for (const child of this.children) {
+      if (child.tagName === 'OPTGROUP') {
+        const group = { label: child.label || child.getAttribute('label') || '', options: [] };
+        for (const opt of child.querySelectorAll('option')) {
+          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled });
+        }
+        this.#options.push(group);
+      } else if (child.tagName === 'OPTION') {
+        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled });
+      }
+    }
+    for (const child of [...this.querySelectorAll('option, optgroup')]) child.remove();
+  }
+
+  set options(list) {
+    this.#options = list;
+    // Ensure listbox exists before rendering (may be called before first render)
+    if (!this.#listbox) {
+      this.#listbox = this.querySelector('[slot="listbox"]');
+      if (!this.#listbox) {
+        this.#listbox = document.createElement('div');
+        this.#listbox.setAttribute('slot', 'listbox');
+        this.#listbox.setAttribute('role', 'listbox');
+        this.#listbox.setAttribute('popover', 'manual');
+        this.appendChild(this.#listbox);
+      }
+    }
+    this.#renderOptions();
+    const display = this.querySelector('[slot="display"]');
+    if (display) display.textContent = this.#displayText();
+  }
+
+  get options() { return this.#options; }
+
+  #renderOptions() {
+    if (!this.#listbox) return;
+    this.#listbox.innerHTML = '';
+
+    const renderOpt = (opt) => {
+      if (opt.separator) {
+        const hr = document.createElement('hr');
+        hr.setAttribute('data-separator', '');
+        return hr;
+      }
+      const el = document.createElement('div');
+      el.setAttribute('role', 'option');
+      el.setAttribute('data-value', opt.value || '');
+      if (opt.icon) el.innerHTML = `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>${escapeHTML(opt.label)}`;
+      else el.textContent = opt.label;
+      if (opt.value === this.value) el.setAttribute('aria-selected', 'true');
+      if (opt.disabled) el.setAttribute('aria-disabled', 'true');
+      if (opt.action) el.dataset.action = opt.action;
+      el.__adiaOption = opt;
+      el.addEventListener('click', this.#onOptionClick);
+      return el;
+    };
+
+    for (const item of this.#options) {
+      if (item.separator) {
+        this.#listbox.appendChild(renderOpt(item));
+      } else if (item.header) {
+        const hdr = document.createElement('div');
+        hdr.setAttribute('data-menu-header', '');
+        hdr.innerHTML = item.avatar
+          ? `<img src="${item.avatar}" alt="" /><div><strong>${escapeHTML(item.label)}</strong><span>${escapeHTML(item.description || '')}</span></div>`
+          : `<div><strong>${escapeHTML(item.label)}</strong><span>${escapeHTML(item.description || '')}</span></div>`;
+        this.#listbox.appendChild(hdr);
+      } else if (item.options) {
+        const group = document.createElement('div');
+        group.setAttribute('role', 'group');
+        group.innerHTML = `<div slot="group-label">${escapeHTML(item.label)}</div>`;
+        for (const opt of item.options) group.appendChild(renderOpt(opt));
+        this.#listbox.appendChild(group);
+      } else {
+        this.#listbox.appendChild(renderOpt(item));
+      }
+    }
+    if (this.#query) this.#applyFilter();
+  }
+
+  #displayText() {
+    const flat = this.#options.flatMap(o => o.options || [o]);
+    const selected = flat.find(o => o.value === this.value || (o.header && o.label === this.value));
+    return selected?.label || this.value || this.placeholder;
+  }
+
+  #onClick = (e) => {
+    if (this.disabled) return;
+    // Ignore clicks inside the popover listbox
+    if (this.#listbox && e.composedPath().includes(this.#listbox)) return;
+    this.open = !this.open;
+  };
+
+  #onOutside = (e) => {
+    // Close if click is outside the select and outside the popover
+    if (!this.contains(e.target) && !(this.#listbox && e.composedPath().includes(this.#listbox))) {
+      this.open = false;
+    }
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Escape') {
+      if (this.searchable && this.#query) {
+        // First Escape: clear query
+        this.#query = '';
+        const input = this.querySelector('input[slot="display"]');
+        if (input) input.value = '';
+        this.#applyFilter();
+        return;
+      }
+      this.open = false;
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (this.open) {
+        const focused = this.#listbox?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');
+        if (focused) {
+          focused.click();
+        } else if (this.searchable && this.freeText && this.#query) {
+          // Commit free-text
+          const q = this.#query;
+          this.value = q;
+          this.#query = '';
+          this.open = false;
+          this.syncValue?.(q);
+          this.dispatchEvent(new Event('change', { bubbles: true }));
+        } else {
+          this.open = false;
+        }
+      } else {
+        this.open = true;
+      }
+      return;
+    }
+    if (e.key === ' ' && !this.searchable) {
+      e.preventDefault();
+      if (this.open) {
+        const focused = this.#listbox?.querySelector('[role="option"][data-focused]');
+        if (focused) focused.click();
+        else this.open = false;
+      } else {
+        this.open = true;
+      }
+      return;
+    }
+    if (e.key === 'ArrowDown' && this.open) {
+      e.preventDefault();
+      this.#focusOption(1);
+    }
+    if (e.key === 'ArrowUp' && this.open) {
+      e.preventDefault();
+      this.#focusOption(-1);
+    }
+  };
+
+  #onSearchInput = (e) => {
+    this.#query = e.target.value || '';
+    if (!this.open) this.open = true;
+    this.#applyFilter();
+  };
+
+  #applyFilter() {
+    if (!this.#listbox) return;
+    const q = this.#query.toLowerCase();
+    const opts = this.#listbox.querySelectorAll('[role="option"]');
+    let anyVisible = false;
+    for (const opt of opts) {
+      const label = (opt.textContent || '').toLowerCase();
+      const match = !q || label.includes(q);
+      if (match) {
+        opt.removeAttribute('data-filtered-out');
+        opt.style.display = '';
+        anyVisible = true;
+      } else {
+        opt.setAttribute('data-filtered-out', '');
+        opt.style.display = 'none';
+      }
+    }
+    // Hide empty groups
+    for (const grp of this.#listbox.querySelectorAll('[role="group"]')) {
+      const visible = grp.querySelectorAll('[role="option"]:not([data-filtered-out])').length;
+      grp.style.display = visible ? '' : 'none';
+    }
+    // Clear focus if filtered-out
+    const focused = this.#listbox.querySelector('[role="option"][data-focused]');
+    if (focused && focused.hasAttribute('data-filtered-out')) {
+      focused.removeAttribute('data-focused');
+    }
+  }
+
+  #focusOption(dir) {
+    if (!this.#listbox) return;
+    const opts = [...this.#listbox.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];
+    if (!opts.length) return;
+    const current = this.#listbox.querySelector('[role="option"][data-focused]');
+    const i = current ? opts.indexOf(current) : -1;
+    const next = opts[(i + dir + opts.length) % opts.length];
+    if (current) current.removeAttribute('data-focused');
+    if (next) {
+      next.setAttribute('data-focused', '');
+      next.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    document.removeEventListener('pointerdown', this.#onOutside);
+    if (this.#searchInput) {
+      this.#searchInput.removeEventListener('input', this.#onSearchInput);
+      this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
+      this.#searchInput.removeEventListener('click', this.#onSearchClick);
+      this.#searchInput = null;
+    }
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+    this.#listbox?.hidePopover?.();
+    this.#listbox = null;
+  }
+}
+customElements.define('select-ui', AdiaSelect);
+
+export { AdiaSelect };