@adia-ai/web-components 0.7.23 → 0.7.25

package/components/spinner/spinner.yaml

@@ -1,4 +1,4 @@
-# Hand-authored per SPEC-001 (docs/specs/implementation-ready/SPEC-001-spinner-loader.md).
+# Hand-authored per SPEC-001 (.claude/docs/specs/implementation-ready/SPEC-001-spinner-loader.md).
 # Edit this file; run `npm run build:components` to regenerate spinner.a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISpinner

package/components/table/table.class.js

@@ -240,6 +240,10 @@ export class UITable extends UIElement {
   // ── Public API: expansion ──
 
   toggleExpand(index) {
+    // A row gated out by `rowExpandable` cannot be toggled — but always allow
+    // collapsing one that is already open (e.g. the predicate flipped while a
+    // detail pane was showing), so it can't get stuck expanded.
+    if (!this.#isRowExpandable(index) && !this.#expanded.has(index)) return;
     if (this.#expanded.has(index)) {
       this.#expanded.delete(index);
       this.dispatchEvent(new CustomEvent('row-collapse', { detail: { index, row: this.#data[index] }, bubbles: true }));
@@ -255,6 +259,27 @@ export class UITable extends UIElement {
   /** @type {((row: object, index: number) => HTMLElement)|null} */
   expandRenderer = null;
 
+  /**
+   * Per-row expand gate. When `expandable` is on and this is set, a row shows
+   * the expand caret (and can open a detail pane) only when the predicate
+   * returns truthy for that row. Lets heterogeneous rows opt out of the
+   * uniform affordance — e.g. `rowExpandable: r => r.status === 'failed'` so a
+   * succeeded row carries no caret while a failed one does. The reserved
+   * expand column is kept either way, so column alignment never shifts.
+   * `null` (default) = every row is expandable (legacy behavior).
+   * @type {((row: object, index: number) => boolean)|null}
+   */
+  rowExpandable = null;
+
+  /** True when `expandable` is on AND this row passes the per-row gate. */
+  #isRowExpandable(dataIndex) {
+    if (!this.expandable) return false;
+    if (typeof this.rowExpandable === 'function') {
+      return !!this.rowExpandable(this.#data[dataIndex], dataIndex);
+    }
+    return true;
+  }
+
   // ── Public API: state persistence ──
 
   getState() {
@@ -601,16 +626,18 @@ export class UITable extends UIElement {
       if (existing) this.#updateRow(existing, idx, visCols);
 
       // Expand toggle in first cell
-      if (this.expandable) {
+      if (this.#isRowExpandable(idx)) {
         const isExpanded = this.#expanded.has(idx);
         if (isExpanded) row.setAttribute('data-expanded', '');
         else row.removeAttribute('data-expanded');
+      } else {
+        row.removeAttribute('data-expanded');
       }
 
       bodyChildren.push(row);
 
       // Detail row (expansion)
-      if (this.expandable && this.#expanded.has(idx)) {
+      if (this.#isRowExpandable(idx) && this.#expanded.has(idx)) {
         let detail = body.querySelector(`:scope > [data-detail-row][data-for="${idx}"]`);
         if (!detail) {
           detail = document.createElement('div');
@@ -779,19 +806,23 @@ export class UITable extends UIElement {
 
     const cells = [];
 
-    // Expand toggle cell
+    // Expand toggle cell. The reserved column cell is always emitted (so the
+    // grid stays aligned), but the caret button is stamped only when this row
+    // passes the per-row expand gate — non-expandable rows show an empty cell.
     if (this.expandable) {
       const cell = document.createElement('div');
       cell.setAttribute('role', 'gridcell');
       cell.setAttribute('data-expand-col', '');
-      const btn = document.createElement('button');
-      btn.setAttribute('data-expand-toggle', '');
-      btn.setAttribute('aria-label', 'Expand row');
-      const icon = document.createElement('icon-ui');
-      icon.setAttribute('name', 'caret-right');
-      icon.setAttribute('size', 'xs');
-      btn.appendChild(icon);
-      cell.appendChild(btn);
+      if (this.#isRowExpandable(dataIndex)) {
+        const btn = document.createElement('button');
+        btn.setAttribute('data-expand-toggle', '');
+        btn.setAttribute('aria-label', 'Expand row');
+        const icon = document.createElement('icon-ui');
+        icon.setAttribute('name', 'caret-right');
+        icon.setAttribute('size', 'xs');
+        btn.appendChild(icon);
+        cell.appendChild(btn);
+      }
       cells.push(cell);
     }
 

package/components/table/table.test.js

@@ -336,3 +336,56 @@ describe('table-ui — raw mode passthrough (FB-53 §2)', () => {
     expect(el.querySelector(':scope > [data-body]')).not.toBeNull();
   });
 });
+
+// ── F6 (upstream): per-row expand gate via `rowExpandable` ───────────────────
+describe('table-ui — F6 per-row expand suppression (rowExpandable)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  const bodyRows = (el) =>
+    el.querySelectorAll(':scope > [data-body] > [role="row"]:not([data-detail-row])');
+
+  it('default (no predicate): every row carries an expand caret', async () => {
+    const el = mount('<table-ui expandable></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    const rows = bodyRows(el);
+    expect(rows.length).toBe(2);
+    for (const row of rows) {
+      expect(row.querySelector('[data-expand-toggle]')).not.toBeNull();
+    }
+  });
+
+  it('predicate suppresses the caret on gated rows but keeps the reserved cell', async () => {
+    const el = mount('<table-ui expandable></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    el.rowExpandable = (row) => row.id === 2;   // only Bob expandable
+    await raf();
+    const rows = bodyRows(el);
+
+    // Alice (id 1) — reserved cell present, NO caret button.
+    expect(rows[0].querySelector(':scope > [data-expand-col]')).not.toBeNull();
+    expect(rows[0].querySelector('[data-expand-toggle]')).toBeNull();
+
+    // Bob (id 2) — caret button present.
+    expect(rows[1].querySelector('[data-expand-toggle]')).not.toBeNull();
+  });
+
+  it('toggleExpand is a no-op on a gated row (no detail row renders)', async () => {
+    const el = mount('<table-ui expandable></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    el.rowExpandable = (row) => row.id === 2;
+    await raf();
+
+    el.toggleExpand(0);   // Alice — gated out
+    await raf();
+    expect(el.querySelector('[data-detail-row][data-for="0"]')).toBeNull();
+    expect(el.expanded).not.toContain(0);
+
+    el.toggleExpand(1);   // Bob — allowed
+    await raf();
+    expect(el.expanded).toContain(1);
+  });
+});

package/components/toast/toast.class.js

@@ -14,7 +14,7 @@
 /**
  * <toast-ui> — Thin facade over `<feed-ui>` / `UIFeed.post()`.
  *
- * Phase 4 of `docs/specs/feed-channel.md` (SPEC-FEED-CHANNEL-001) —
+ * Phase 4 of `.claude/docs/specs/feed-channel.md` (SPEC-FEED-CHANNEL-001) —
  * toast-ui no longer owns its own per-position container. Both
  * declarative `<toast-ui>` and imperative `UIToast.show()` paths
  * route through `UIFeed`. The element exists for back-compat:

package/core/icons.js

@@ -135,6 +135,20 @@ let registryReady = false;
 let resolveRegistryReady;
 export const whenIconRegistryReady = new Promise((r) => { resolveRegistryReady = r; });
 
+/**
+ * True when NO icons are registered AND no loaders were ever installed — i.e.
+ * the icon subsystem was never wired. The usual cause: the zero-config
+ * `icons-phosphor.js` `import.meta.glob('/node_modules/...')` path is a
+ * build-time macro that does not transform from inside a published dependency
+ * under Vite 8 / rolldown, so `installIconLoaders` never ran and the registry
+ * stays empty. Distinct from a single bad icon name (registry non-empty, that
+ * one name absent). `<icon-ui>` uses this to fail loud once rather than render
+ * blank silently. See `USAGE.md` § Icons.
+ */
+export function iconRegistryUnwired() {
+  return registry.size === 0 && !registryReady;
+}
+
 /**
  * Install a per-weight loader map and mark the registry ready. The map
  * shape matches `import.meta.glob` output: `{ '/path/to/star.svg': loader }`.