@adia-ai/web-components 0.4.6 → 0.4.8

package/components/select/select.js

@@ -1,398 +1,17 @@
-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;');
-}
-
-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;
-  }
-}
-customElements.define('select-ui', UISelect);
+/**
+ * `<select-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISelect } from '@adia-ai/web-components/components/select/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UISelect } from './class.js';
+
+defineIfFree('select-ui', UISelect);
 
 export { UISelect };

package/components/select/select.yaml

@@ -7,6 +7,10 @@ component: Select
 category: input
 version: 1
 description: Alias for ChoicePicker. Dropdown select with options.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui  # chevron + option-row affixes (created in render)
 props:
   name:
     description: Form control name for form data submission

package/components/skeleton/class.js

@@ -0,0 +1,52 @@
+/**
+ * Non-side-effect class export for `<skeleton-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/skeleton`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
+ * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
+ *
+ * Placeholder shimmer for loading states.
+ * Purely presentational — no DOM stamping needed.
+ *
+ * Props (attributes):
+ *   static — suppress the shimmer animation (default: false — shimmer on)
+ *
+ * Radius: none, sm (default), md, lg, full
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UISkeleton extends UIElement {
+  static properties = {
+    width:  { type: String,  default: '100%',  reflect: true },
+    height: { type: String,  default: '1.2em', reflect: true },
+    radius: { type: String,  default: 'sm',    reflect: true },
+    static: { type: Boolean, default: false,   reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('aria-hidden', 'true');
+    this.#applySize();
+  }
+
+  render() {
+    this.#applySize();
+  }
+
+  #applySize() {
+    this.style.width  = this.width;
+    this.style.height = this.height;
+  }
+}

package/components/skeleton/skeleton.a2ui.json

@@ -51,6 +51,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/skeleton/skeleton.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<skeleton-ui>` — Placeholder shimmer for loading states. Purely presentational.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/skeleton
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UISkeleton extends UIElement {
+  /** Height of the placeholder. */
+  height: string;
+  /** Border radius */
+  radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  /** When true, suppress the shimmer animation. */
+  static: boolean;
+  /** Width of the placeholder. */
+  width: string;
+}

package/components/skeleton/skeleton.js

@@ -1,43 +1,17 @@
 /**
- * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
- * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
+ * `<skeleton-ui>` — auto-registers the tag on import.
  *
- * Placeholder shimmer for loading states.
- * Purely presentational — no DOM stamping needed.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Props (attributes):
- *   static — suppress the shimmer animation (default: false — shimmer on)
+ *   import { UISkeleton } from '@adia-ai/web-components/components/skeleton/class';
  *
- * Radius: none, sm (default), md, lg, full
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UISkeleton } from './class.js';
 
-class UISkeleton extends UIElement {
-  static properties = {
-    width:  { type: String,  default: '100%',  reflect: true },
-    height: { type: String,  default: '1.2em', reflect: true },
-    radius: { type: String,  default: 'sm',    reflect: true },
-    static: { type: Boolean, default: false,   reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('aria-hidden', 'true');
-    this.#applySize();
-  }
-
-  render() {
-    this.#applySize();
-  }
-
-  #applySize() {
-    this.style.width  = this.width;
-    this.style.height = this.height;
-  }
-}
-
-customElements.define('skeleton-ui', UISkeleton);
+defineIfFree('skeleton-ui', UISkeleton);
 
 export { UISkeleton };