@adia-ai/web-components 0.0.18 → 0.0.20

package/components/table-toolbar/table-toolbar.js

@@ -31,10 +31,10 @@ class AdiaTableToolbar extends AdiaElement {
     for:         { type: String,  default: '',         reflect: true },
     text:        { type: String,  default: '',         reflect: false },
     count:       { type: String,  default: '',         reflect: false },
-    filterable:  { type: Boolean, default: true,       reflect: true },
-    sortable:    { type: Boolean, default: true,       reflect: true },
-    columns:     { type: Boolean, default: true,       reflect: true },
-    searchable:  { type: Boolean, default: true,       reflect: true },
+    noFilter:    { type: Boolean, default: false,      reflect: true, attribute: 'no-filter' },
+    noSort:      { type: Boolean, default: false,      reflect: true, attribute: 'no-sort' },
+    noColumns:   { type: Boolean, default: false,      reflect: true, attribute: 'no-columns' },
+    noSearch:    { type: Boolean, default: false,      reflect: true, attribute: 'no-search' },
     placeholder: { type: String,  default: 'Search...', reflect: false },
     variant:     { type: String,  default: 'default',  reflect: true },
   };
@@ -43,9 +43,10 @@ class AdiaTableToolbar extends AdiaElement {
 
   #target = null;
   #targetListeners = [];
-  #searchTimer = null;
   #activePopover = null;       // { btn, panel, cleanup }
   #docListenersBound = false;
+  #docListenerRaf = null;
+  #sortIndicatorRafs = new Set();
 
   // ── Lifecycle ────────────────────────────────────────────────────────────
 
@@ -57,8 +58,12 @@ class AdiaTableToolbar extends AdiaElement {
   }
 
   disconnected() {
-    clearTimeout(this.#searchTimer);
-    this.#searchTimer = null;
+    if (this.#docListenerRaf != null) {
+      cancelAnimationFrame(this.#docListenerRaf);
+      this.#docListenerRaf = null;
+    }
+    for (const id of this.#sortIndicatorRafs) cancelAnimationFrame(id);
+    this.#sortIndicatorRafs.clear();
     this.#closePopover();
     this.#detachTarget();
   }
@@ -139,13 +144,16 @@ class AdiaTableToolbar extends AdiaElement {
     controls.appendChild(this.#mkButton('sort', 'Sort', 'arrows-down-up'));
     controls.appendChild(this.#mkButton('columns', 'Columns', 'columns'));
 
-    // Search
-    const search = document.createElement('input-ui');
+    // Search — compose <search-ui>, which already stamps input-ui with
+    // the magnifying-glass prefix + clear suffix and debounces a `search`
+    // event. Rolling our own from input-ui would re-derive that wiring
+    // and (as discovered) hit a first-paint timing race where the icon
+    // name renders as literal text before the icon registry resolves.
+    const search = document.createElement('search-ui');
     search.setAttribute('data-search', '');
-    search.setAttribute('type', 'search');
-    search.setAttribute('prefix', 'magnifying-glass');
     search.setAttribute('placeholder', this.placeholder);
-    search.addEventListener('input', this.#onSearchInput);
+    search.setAttribute('debounce', String(SEARCH_DEBOUNCE));
+    search.addEventListener('search', this.#onSearch);
 
     // Actions slot passthrough — we move any pre-existing [slot="actions"] children here
     const actionsSlot = document.createElement('div');
@@ -227,15 +235,15 @@ class AdiaTableToolbar extends AdiaElement {
       if (el) el.hidden = hidden;
     };
 
-    setHidden('[data-toolbar-btn="filter"]',  !this.filterable);
-    setHidden('[data-toolbar-btn="sort"]',    !this.sortable);
-    setHidden('[data-toolbar-btn="columns"]', !this.columns);
-    setHidden('[data-search]',                !this.searchable);
+    setHidden('[data-toolbar-btn="filter"]',  this.noFilter);
+    setHidden('[data-toolbar-btn="sort"]',    this.noSort);
+    setHidden('[data-toolbar-btn="columns"]', this.noColumns);
+    setHidden('[data-search]',                this.noSearch);
   }
 
   // Re-run on attribute changes for boolean flags.
   attributeChanged(name) {
-    if (['filterable', 'sortable', 'columns', 'searchable'].includes(name)) {
+    if (['no-filter', 'no-sort', 'no-columns', 'no-search'].includes(name)) {
       this.#updateControlVisibility();
     }
     if (name === 'placeholder') {
@@ -246,16 +254,13 @@ class AdiaTableToolbar extends AdiaElement {
 
   // ── Search ───────────────────────────────────────────────────────────────
 
-  #onSearchInput = (e) => {
-    const value = e.target?.value ?? '';
-    clearTimeout(this.#searchTimer);
-    this.#searchTimer = setTimeout(() => {
-      if (this.#target) this.#target.search = value;
-      this.dispatchEvent(new CustomEvent('search', {
-        bubbles: true,
-        detail: { value },
-      }));
-    }, SEARCH_DEBOUNCE);
+  #onSearch = (e) => {
+    const value = e.detail?.value ?? '';
+    if (this.#target) this.#target.search = value;
+    this.dispatchEvent(new CustomEvent('search', {
+      bubbles: true,
+      detail: { value },
+    }));
   };
 
   // ── Sync from target (initial paint) ─────────────────────────────────────
@@ -296,7 +301,9 @@ class AdiaTableToolbar extends AdiaElement {
 
     if (!this.#docListenersBound) {
       this.#docListenersBound = true;
-      requestAnimationFrame(() => {
+      this.#docListenerRaf = requestAnimationFrame(() => {
+        this.#docListenerRaf = null;
+        if (!this.isConnected || !this.#docListenersBound) return;
         document.addEventListener('pointerdown', this.#onDocDown, true);
         document.addEventListener('keydown', this.#onDocKey, true);
       });
@@ -344,40 +351,78 @@ class AdiaTableToolbar extends AdiaElement {
     }
     const filters = target.filters || {};
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Filter rows';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Filter rows'));
 
     const list = document.createElement('div');
     list.setAttribute('data-popover-list', '');
 
+    const data = target.data || [];
     for (const col of target.columns) {
       if (col.hidden) continue;
-      const row = document.createElement('label');
+      // <field-ui inline label="…"><…control…></…></field-ui> — canonical
+      // label-binds-to-control pair, mints id + [for]. The CONTROL is
+      // chosen per-column from the column's filter shape:
+      //   • 'select' → <select-ui multiple searchable> populated from data
+      //   • 'text'   → <input-ui type="text"> (contains match)
+      // Shape comes from col.filter when set, otherwise auto-detected
+      // from the data (id-like keys → text; ≤ 50 distinct values → select).
+      const row = document.createElement('field-ui');
       row.setAttribute('data-filter-row', '');
+      row.setAttribute('inline', '');
+      row.setAttribute('label', col.label || col.key);
+
+      const shape = detectFilterShape(col, data);
+      const current = filters[col.key];
+
+      if (shape === 'select') {
+        const sel = document.createElement('select-ui');
+        sel.setAttribute('data-filter-input', '');
+        sel.setAttribute('multiple', '');
+        sel.setAttribute('placeholder', '—');
+
+        const uniqueValues = collectUniqueValues(col, data);
+        // Searchable kicks in at 12+ options — below that the listbox is
+        // fully scannable and a search field is overhead.
+        if (uniqueValues.length >= 12) sel.setAttribute('searchable', '');
+
+        for (const val of uniqueValues) {
+          const opt = document.createElement('option');
+          opt.setAttribute('value', val);
+          opt.textContent = val;
+          sel.appendChild(opt);
+        }
+        if (current?.op === 'select' && current.value) {
+          sel.value = current.value;
+        }
+        sel.addEventListener('change', () => {
+          const v = sel.value || '';
+          if (v) target.setFilter(col.key, v, 'select');
+          else target.setFilter(col.key, null);
+          this.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            detail: { filters: target.filters },
+          }));
+        });
+        row.appendChild(sel);
+      } else {
+        const input = document.createElement('input-ui');
+        input.setAttribute('type', 'text');
+        input.setAttribute('size', 'sm');
+        input.setAttribute('data-filter-input', '');
+        input.setAttribute('placeholder', '—');
+        if (current?.op === 'contains') input.value = current.value ?? '';
+        input.addEventListener('input', () => {
+          const v = input.value;
+          if (v) target.setFilter(col.key, v, 'contains');
+          else target.setFilter(col.key, null);
+          this.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            detail: { filters: target.filters },
+          }));
+        });
+        row.appendChild(input);
+      }
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-filter-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
-      const input = document.createElement('input-ui');
-      input.setAttribute('type', 'text');
-      input.setAttribute('size', 'sm');
-      input.setAttribute('data-filter-input', '');
-      input.setAttribute('placeholder', '—');
-      input.value = filters[col.key]?.value ?? '';
-      input.addEventListener('input', () => {
-        const v = input.value;
-        if (v) target.setFilter(col.key, v, 'contains');
-        else target.setFilter(col.key, null);
-        this.dispatchEvent(new CustomEvent('filter-change', {
-          bubbles: true,
-          detail: { filters: target.filters },
-        }));
-      });
-      row.appendChild(input);
       list.appendChild(row);
     }
 
@@ -412,10 +457,7 @@ class AdiaTableToolbar extends AdiaElement {
       return;
     }
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Sort by';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Sort by'));
 
     const sortState = target.sortState || [];
     const dirByKey = new Map(sortState.map((s) => [s.key, s.dir]));
@@ -427,29 +469,33 @@ class AdiaTableToolbar extends AdiaElement {
       if (col.hidden) continue;
       if (col.sortable === false) continue;
 
-      const row = document.createElement('button');
-      row.type = 'button';
+      // <menu-item-ui> is the canonical action-row primitive (role="menuitem",
+      // built-in icon + text slots, hover/focus tokens, danger variant). Append
+      // a trailing <icon-ui> after the auto-stamped [slot="text"] — its flex:1
+      // pushes any later child to the trailing edge.
+      const dir = dirByKey.get(col.key);
+      const row = document.createElement('menu-item-ui');
       row.setAttribute('data-sort-row', '');
+      row.setAttribute('text', col.label || col.key);
       row.dataset.key = col.key;
-
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-sort-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
-      const dir = dirByKey.get(col.key);
-      const indicator = document.createElement('icon-ui');
-      indicator.setAttribute('data-sort-indicator', '');
-      indicator.setAttribute('size', 'xs');
-      indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
       if (dir) row.dataset.active = dir;
-      row.appendChild(indicator);
+
+      // Trailing direction indicator — append AFTER menu-item-ui's connected()
+      // has run its #stamp() (defers via rAF so the [slot="text"] span exists).
+      const rafId = requestAnimationFrame(() => {
+        this.#sortIndicatorRafs.delete(rafId);
+        if (!this.isConnected) return;
+        const indicator = document.createElement('icon-ui');
+        indicator.setAttribute('data-sort-indicator', '');
+        indicator.setAttribute('size', 'xs');
+        indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
+        row.appendChild(indicator);
+      });
+      this.#sortIndicatorRafs.add(rafId);
 
       row.addEventListener('click', (e) => {
-        // Multi-sort with shift: forward to the table by simulating a header click
-        // (the table already owns the asc / desc / clear cycle). Falls back to no-op
-        // when the table is not present — same defensive shape as chart-legend's
-        // [for] target check.
+        // Forward to the bound table by simulating a header click — the table
+        // already owns the asc / desc / clear cycle, so we don't duplicate state.
         const headerCell = target.querySelector(`:scope > [data-header] [data-sort-key="${col.key}"]`);
         if (!headerCell) return;
         const evt = new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: e.shiftKey });
@@ -512,17 +558,19 @@ class AdiaTableToolbar extends AdiaElement {
       return;
     }
 
-    const head = document.createElement('div');
-    head.setAttribute('data-popover-head', '');
-    head.textContent = 'Visible columns';
-    panel.appendChild(head);
+    panel.appendChild(popoverHead('Visible columns'));
 
     const list = document.createElement('div');
     list.setAttribute('data-popover-list', '');
 
     for (const col of target.columns) {
-      const row = document.createElement('label');
+      // <field-ui inline label="…"><check-ui></check-ui></field-ui> —
+      // canonical label-binds-to-control pair, mints id + [for] so clicking
+      // the label toggles the check. Same primitive used for filter rows.
+      const row = document.createElement('field-ui');
       row.setAttribute('data-columns-row', '');
+      row.setAttribute('inline', '');
+      row.setAttribute('label', col.label || col.key);
 
       const check = document.createElement('check-ui');
       if (!col.hidden) check.setAttribute('checked', '');
@@ -539,11 +587,6 @@ class AdiaTableToolbar extends AdiaElement {
       });
       row.appendChild(check);
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-columns-label', '');
-      labelEl.textContent = col.label || col.key;
-      row.appendChild(labelEl);
-
       list.appendChild(row);
     }
 
@@ -560,6 +603,96 @@ function emptyHint(text) {
   return el;
 }
 
+function popoverHead(text) {
+  // <text-ui variant="kicker"> renders the uppercase + tracked + muted-color
+  // section-marker typography role — exactly what a popover head needs. No
+  // bespoke styling required, no [data-popover-head] CSS rule.
+  const el = document.createElement('text-ui');
+  el.setAttribute('data-popover-head', '');
+  el.setAttribute('variant', 'kicker');
+  el.setAttribute('color', 'subtle');
+  el.textContent = text;
+  return el;
+}
+
+// ── Filter shape detection ─────────────────────────────────────────────────
+
+const SELECT_THRESHOLD = 50;       // ≤ N distinct values → multi-select
+const SAMPLE_LIMIT     = 500;      // cap data scan for cardinality detection
+
+/**
+ * Resolve a cell value for a column. Mirrors table.js getCellValue —
+ * supports col.accessor (function) and dot-notation col.key paths.
+ */
+function getCellValue(row, col) {
+  if (typeof col?.accessor === 'function') return col.accessor(row);
+  const path = col?.key;
+  if (!path || row == null) return undefined;
+  const parts = String(path).split('.');
+  let cur = row;
+  for (const p of parts) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
+/**
+ * Heuristic: id-like keys (`id`, `userId`, `worker_id`, `uuid`, `guid`)
+ * are searched as free text — picking from a 10k-entry listbox is worse
+ * UX than typing a known value.
+ */
+function looksLikeIdKey(key) {
+  if (!key) return false;
+  const k = String(key);
+  if (k === 'id' || k === 'ID' || k === 'uuid' || k === 'guid') return true;
+  if (/[a-z](Id|ID)$/.test(k)) return true;   // camelCase: workerId, userId
+  if (/_id$/i.test(k)) return true;           // snake_case: worker_id
+  return false;
+}
+
+/**
+ * Choose the right filter primitive for a column.
+ *   col.filter = 'select' | 'text'   — explicit override (table-ui contract)
+ *   col.type   = 'number' | 'currency' | 'percent' → 'text' (numeric range
+ *                support is a future addition; falls back to contains for now)
+ *   id-like key → 'text'
+ *   ≤ SELECT_THRESHOLD distinct values in the sample → 'select'
+ *   otherwise → 'text'
+ */
+function detectFilterShape(col, data) {
+  if (col?.filter === 'select' || col?.filter === 'text') return col.filter;
+  if (looksLikeIdKey(col?.key)) return 'text';
+
+  const values = [];
+  const limit = Math.min(data?.length ?? 0, SAMPLE_LIMIT);
+  const unique = new Set();
+  for (let i = 0; i < limit; i++) {
+    const v = getCellValue(data[i], col);
+    if (v == null || v === '') continue;
+    values.push(v);
+    unique.add(String(v));
+    if (unique.size > SELECT_THRESHOLD) return 'text';
+  }
+  if (!values.length) return 'text';
+  return 'select';
+}
+
+/**
+ * Collect distinct stringified values for the column from data, sorted.
+ * Used to populate select-ui options when filter shape === 'select'.
+ */
+function collectUniqueValues(col, data) {
+  const set = new Set();
+  const limit = Math.min(data?.length ?? 0, SAMPLE_LIMIT);
+  for (let i = 0; i < limit; i++) {
+    const v = getCellValue(data[i], col);
+    if (v == null || v === '') continue;
+    set.add(String(v));
+  }
+  return [...set].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+}
+
 customElements.define('table-toolbar-ui', AdiaTableToolbar);
 
 export { AdiaTableToolbar };

package/components/table-toolbar/table-toolbar.yaml

@@ -10,6 +10,11 @@ description: >-
   target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding
   pattern. Drop next to (or above) any table-ui to add the standard data-grid
   toolbar without re-implementing search, filter, sort, or column visibility.
+  Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi-
+  select (searchable above 12 options), id-like keys → free-text contains. The
+  column descriptor's `filter` field overrides the auto-detect: `'select'`
+  forces multi-select even on high-cardinality columns; `'text'` forces a
+  contains input even on small enums.
 props:
   for:
     description: id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.
@@ -24,26 +29,30 @@ props:
     description: Optional count badge value shown next to the title. When unset, falls back to the row count of the bound table.
     type: string
     default: ""
-  filterable:
-    description: Show the Filter popover button.
+  noFilter:
+    description: Hide the Filter popover button. Filter is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  sortable:
-    description: Show the Sort popover button.
+    attribute: no-filter
+  noSort:
+    description: Hide the Sort popover button. Sort is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  columns:
-    description: Show the Columns visibility popover button.
+    attribute: no-sort
+  noColumns:
+    description: Hide the Columns visibility popover button. Columns control is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
-  searchable:
-    description: Show the search input.
+    attribute: no-columns
+  noSearch:
+    description: Hide the search input. Search is shown by default; set to opt out.
     type: boolean
-    default: true
+    default: false
     reflect: true
+    attribute: no-search
   placeholder:
     description: Placeholder text for the search input.
     type: string

package/components/tabs/tabs.css

@@ -30,8 +30,9 @@
     --tabs-focus-radius:    var(--a-radius-sm);
 
     /* ── Vertical strip min-width ── */
-    /* Component-intrinsic visual constant; no --a-space-* equivalent */
-    --tabs-vertical-strip-min-width: 140px;
+    /* Component-intrinsic visual constant; no --a-space-* equivalent
+       (8.75rem ≈ 140px at 1rem=16px). */
+    --tabs-vertical-strip-min-width: 8.75rem;
   }
 
   :scope {

package/components/tabs/tabs.js

@@ -27,6 +27,7 @@ class AdiaTabs extends AdiaElement {
 
   #strip = null;
   #indicator = null;
+  #transitionRaf = null;
 
   connected() {
     this.setAttribute('role', 'tablist');
@@ -42,6 +43,10 @@ class AdiaTabs extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#transitionRaf != null) {
+      cancelAnimationFrame(this.#transitionRaf);
+      this.#transitionRaf = null;
+    }
     this.removeEventListener('click', this.#handleClick);
     this.removeEventListener('keydown', this.#handleKeydown);
     this.#strip = null;
@@ -175,7 +180,8 @@ class AdiaTabs extends AdiaElement {
     if (isNew) {
       this.#indicator.style.transition = 'none';
       apply();
-      requestAnimationFrame(() => {
+      this.#transitionRaf = requestAnimationFrame(() => {
+        this.#transitionRaf = null;
         if (this.#indicator) this.#indicator.style.transition = '';
       });
     } else {

package/components/tag/tag.a2ui.json

@@ -41,14 +41,14 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual style variant with semantic colors.",
+      "description": "Semantic variant — `default | info | success | warning | danger`.",
       "type": "string",
       "enum": [
         "default",
         "info",
         "success",
         "warning",
-        "error"
+        "danger"
       ],
       "default": "default"
     }

package/components/tag/tag.yaml

@@ -29,7 +29,7 @@ props:
     type: string
     default: ""
   variant:
-    description: Visual style variant with semantic colors.
+    description: Semantic variant — `default | info | success | warning | danger`.
     type: string
     default: default
     enum:
@@ -37,7 +37,7 @@ props:
       - info
       - success
       - warning
-      - error
+      - danger
 events:
   remove:
     description: Fired when the dismiss button is activated.