@adia-ai/web-components 0.4.6 → 0.4.7

package/components/segmented/segmented.js

@@ -1,155 +1,17 @@
 /**
- * <segmented-ui value="tab1">
- *   <segment-ui value="tab1" text="Tab 1"></segment-ui>
- *   <segment-ui value="tab2" text="Tab 2"></segment-ui>
- *   <segment-ui value="tab3" text="Tab 3"></segment-ui>
- * </segmented-ui>
+ * `<segmented-ui>` — auto-registers the tag on import.
  *
- * Mutually exclusive toggle group with animated indicator pill.
- * Indicator uses CSS transform (GPU-accelerated).
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISegmented } from '@adia-ai/web-components/components/segmented/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-import '../segment/segment.js';
-
-class UISegmented extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    value: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #indicator = null;
-  #bound = false;
-  #transitionRaf = null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'radiogroup');
-
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('click', this.#handleClick);
-      this.addEventListener('keydown', this.#handleKeydown);
-    }
-
-    // Default to first segment if no value
-    if (!this.value) {
-      const first = this.querySelector('segment-ui:not([disabled])');
-      if (first) this.value = first.value || first.getAttribute('value') || '';
-    }
-  }
-
-  disconnected() {
-    super.disconnected();
-    if (this.#transitionRaf != null) {
-      cancelAnimationFrame(this.#transitionRaf);
-      this.#transitionRaf = null;
-    }
-    this.removeEventListener('click', this.#handleClick);
-    this.removeEventListener('keydown', this.#handleKeydown);
-    this.#indicator = null;
-    this.#bound = false;
-  }
-
-  get #segments() {
-    return [...this.querySelectorAll('segment-ui')];
-  }
-
-  get #enabledSegments() {
-    return this.#segments.filter(s => !s.disabled);
-  }
-
-  render() {
-    const segs = this.#segments;
-    if (!segs.length) return;
-
-    // Sync selection state
-    for (const seg of segs) {
-      const segVal = seg.value || seg.getAttribute('value') || '';
-      const isActive = segVal === this.value;
-      if (isActive) {
-        seg.setAttribute('selected', '');
-      } else {
-        seg.removeAttribute('selected');
-      }
-      seg.setAttribute('tabindex', isActive ? '0' : '-1');
-    }
-
-    if (this.label) this.setAttribute('aria-label', this.label);
-
-    this.#updateIndicator(segs);
-  }
-
-  #updateIndicator(segs) {
-    const selectedIdx = segs.findIndex(s => (s.value || s.getAttribute('value') || '') === this.value);
-
-    if (selectedIdx < 0) {
-      this.removeAttribute('data-indicator-ready');
-      return;
-    }
-
-    // Lazy-create indicator (prepend so it's behind segments in paint order)
-    const isNew = !this.#indicator;
-    if (isNew) {
-      this.#indicator = document.createElement('span');
-      this.#indicator.setAttribute('data-indicator', '');
-      this.prepend(this.#indicator);
-    }
-
-    this.style.setProperty('--_segment-count', `${segs.length}`);
-
-    if (isNew) {
-      // First render: position instantly, then enable transition next frame
-      this.#indicator.style.transition = 'none';
-      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
-      this.setAttribute('data-indicator-ready', '');
-      this.#transitionRaf = requestAnimationFrame(() => {
-        this.#transitionRaf = null;
-        if (this.#indicator) this.#indicator.style.transition = '';
-      });
-    } else {
-      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
-      this.setAttribute('data-indicator-ready', '');
-    }
-  }
-
-  #select(seg) {
-    if (seg.disabled) return;
-    this.value = seg.value;
-    this.syncValue();
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  }
-
-  #handleClick = (e) => {
-    const seg = e.target.closest('segment-ui');
-    if (seg && this.contains(seg)) this.#select(seg);
-  };
-
-  #handleKeydown = (e) => {
-    const target = e.target;
-    if (target.tagName !== 'SEGMENT-UI') return;
-    const segs = this.#enabledSegments;
-    const idx = segs.indexOf(target);
-    if (idx < 0) return;
-
-    let next;
-    switch (e.key) {
-      case 'ArrowRight': case 'ArrowDown':
-        next = idx < segs.length - 1 ? idx + 1 : 0; break;
-      case 'ArrowLeft': case 'ArrowUp':
-        next = idx > 0 ? idx - 1 : segs.length - 1; break;
-      case 'Home': next = 0; break;
-      case 'End': next = segs.length - 1; break;
-      default: return;
-    }
+import { defineIfFree } from '../../core/register.js';
+import { UISegmented } from './class.js';
 
-    e.preventDefault();
-    segs[next].focus();
-    this.#select(segs[next]);
-  };
-}
-customElements.define('segmented-ui', UISegmented);
+defineIfFree('segmented-ui', UISegmented);
 
 export { UISegmented };

package/components/segmented/segmented.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISegmented
 tag: segmented-ui
@@ -11,81 +9,65 @@ props:
   value:
     description: Value of the currently selected segment.
     type: string
-    default: ""
+    default: ''
 events:
   change:
     description: Fired when the selected segment changes. detail contains { value }.
 slots: {}
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: basic-segmented
-    description: Basic Segmented usage
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "comp"
-          ]
-        },
-        {
-          "id": "comp",
-          "component": "Segmented",
-          "value": ""
-        }
-      ]
+- name: basic-segmented
+  description: Basic Segmented usage
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"\
+    id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"value\": \"\"\n  }\n]"
 keywords:
-  - segmented
-  - options
-  - select
-  - toggle
-  - switch
-  - tab
-  - tabs
-  - button-group
+- segmented
+- options
+- select
+- toggle
+- switch
+- tab
+- tabs
+- button-group
 synonyms:
   button-group:
-    - toolbar
-    - button
-    - segmented
+  - toolbar
+  - button
+  - segmented
   options:
-    - settings
-    - radio
-    - segmented
-    - accordion
+  - settings
+  - radio
+  - segmented
+  - accordion
   select:
-    - radio
-    - segmented
-    - form
+  - radio
+  - segmented
+  - form
   switch:
-    - segmented
-    - radio
-    - settings
+  - segmented
+  - radio
+  - settings
   tab:
-    - tabs
-    - panel
-    - segmented
+  - tabs
+  - panel
+  - segmented
   tabs:
-    - tabs
-    - panel
-    - segmented
+  - tabs
+  - panel
+  - segmented
   toggle:
-    - segmented
-    - radio
-    - settings
+  - segmented
+  - radio
+  - settings
+  tags:
+  - SegmentedControl
+  - Segmented
 related: []

package/components/select/class.js

@@ -0,0 +1,408 @@
+/**
+ * Non-side-effect class export for `<select-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/select`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIFormElement } from '../../core/form.js';
+import { anchorPopover } from '../../core/anchor.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export class UISelect extends UIFormElement {
+  static properties = {
+    ...UIFormElement.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;
+  #rafId = 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 CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  };
+
+  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)
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
+        document.addEventListener('pointerdown', this.#onOutside, { once: true });
+      });
+    } else {
+      this.#anchorCleanup?.();
+      this.#anchorCleanup = null;
+      this.#listbox?.hidePopover?.();
+      if (this.#rafId != null) {
+        cancelAnimationFrame(this.#rafId);
+        this.#rafId = null;
+      }
+      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 CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+        } 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);
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    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;
+  }
+}