@adia-ai/web-components 0.7.18 → 0.7.20

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.20] — 2026-06-10
+
+### Fixed
+- **`field-ui` (`components/field/`) — control binding survives junk siblings.** `#findControl()` bound the *first slot-less child* as the control; generated markup that lands a `text-ui` "label" or a `<small>` error inside `field-ui` (the 2026-06-10 gen-UI contact-form incident) stole the `id`/`for` wiring from the real input. Binding now prefers a known form-control tag (timing-independent), then a focusable-containing child, then the old first-slot-less fallback. Regression test with the exact incident markup. `dist/web-components.min.js` regenerated.
+
+## [0.7.19] — 2026-06-10
+
+### Fixed
+- **`icon-ui` — glyphs always paint on the standalone import path.** Importing `components/icon` directly (or a demo page loading only `./icon.js`) never loaded `core/icons-phosphor.js`, so the weight-loader map stayed empty and every `getIcon()` returned `''` — **silently** (the not-ready guard suppressed the warning): blank icons, zero console errors. Two fixes: `icon.js` now imports the Phosphor loader as a side-effect (the barrel paths already did), and `icon.class.js` gains a signal-reactive retry (`#rev` bumped by `whenIconRegistryReady`, aborted symmetrically in `disconnected()`) so elements that connect *after* the loaders install — e.g. fetched-and-injected demo markup — re-render once the registry is ready. Production (barrel-served) was never affected; the docs/demo single-component path was. Regression probe: `scripts/dev/icon-paint-probe.mjs`. `dist/web-components.min.js` (and the web-modules kitchen-sink bundle) regenerated to carry the fix.
+
 ## [0.7.18] — 2026-06-09
 
 ### Changed

package/components/field/field.class.js

@@ -246,12 +246,41 @@ export class UIField extends UIElement {
   /** The default-slot control — first child without a `slot` attribute. */
   #findControl() {
     // wrapper-trap-ok: field control is always a single literal child (one <input>/<textarea>/<select>); interpolating the control via .map() is not a documented field pattern
+    //
+    // Prefer the first slot-less child that is actually a CONTROL (focusable
+    // itself or containing a focusable). Generated markup sometimes lands
+    // junk siblings inside field-ui (a text-ui "label", a <small> error —
+    // the gen-UI contact-form incident, 2026-06-10): first-slot-less-child
+    // bound the label as the control, stealing the id/for wiring from the
+    // real input. Fall back to the old first-slot-less rule so a not-yet-
+    // upgraded custom control (no focusable stamped yet) still binds.
+    let fallback = null;
+    let focusableHit = null;
     for (const ch of this.children) {
-      if (!ch.hasAttribute('slot')) return ch;
+      if (ch.hasAttribute('slot')) continue;
+      if (fallback === null) fallback = ch;
+      // Deterministic first: a known form-control tag wins regardless of
+      // upgrade timing (its internal focusable may not be stamped yet at
+      // field-ui's connect, and the childList observer can't see grandchild
+      // stamps).
+      if (UIField.#CONTROL_TAGS.has(ch.localName)) return ch;
+      if (focusableHit === null && this.#firstFocusable(ch)) focusableHit = ch;
     }
-    return null;
+    return focusableHit ?? fallback;
   }
 
+  /** Form-control tags field-ui binds to by name (timing-independent).
+   *  Source: the form-bearing primitives (UIFormElement subclasses + native
+   *  wrappers); extend when a new control primitive lands. */
+  static #CONTROL_TAGS = new Set([
+    'input-ui', 'textarea-ui', 'select-ui', 'combobox-ui', 'search-ui',
+    'check-ui', 'radio-ui', 'switch-ui', 'slider-ui', 'range-ui',
+    'otp-input-ui', 'tags-input-ui', 'chat-input-ui', 'autocomplete-input-ui',
+    'datetime-picker-ui', 'date-range-picker-ui', 'calendar-picker-ui',
+    'color-picker-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
+    'input', 'textarea', 'select',
+  ]);
+
   /** First focusable descendant (or self) of `root`. Looks for native
    *  `<input>`, `<textarea>`, `<select>`, `<button>`, `[contenteditable]`,
    *  and any `[tabindex]` ≥ 0. Light DOM only. */

package/components/field/field.test.js

@@ -237,4 +237,24 @@ describe('field-ui', () => {
       /:scope:has\((?:>\s*)?\[slot="hint"\]\s*,\s*(?:>\s*)?\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap[,)]/
     );
   });
+
+  it('binds the CONTROL (not junk label/error siblings) — the gen-UI contact-form incident', async () => {
+    // Generated markup sometimes lands a text-ui "label" + a <small> error
+    // INSIDE field-ui (the 2026-06-10 canvas incident). The old first-slot-less
+    // rule bound the text-ui as the control, stealing the id/for wiring.
+    const el = mount(`
+      <field-ui label="Full Name">
+        <text-ui variant="label" weight="semibold">Full Name</text-ui>
+        <input-ui type="text" name="name" placeholder="Enter your full name"></input-ui>
+        <small color="danger">Name is required</small>
+      </field-ui>
+    `);
+    await tick(); await tick();
+    const input = el.querySelector('input-ui');
+    const textUi = el.querySelector('text-ui');
+    const label = el.querySelector('[data-field-label]');
+    expect(input.id).toMatch(/^field-ctl-/);          // the real control got the binding
+    expect(textUi.id || '').not.toMatch(/^field-ctl-/); // the junk label did NOT
+    expect(label.getAttribute('for')).toBe(input.id);
+  });
 });

package/components/icon/icon.class.js

@@ -11,8 +11,8 @@
  * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement, signal, html } from '../../core/element.js';
-import { getIcon } from '../../core/icons.js';
+import { UIElement } from '../../core/element.js';
+import { getIcon, whenIconRegistryReady } from '../../core/icons.js';
 
 export class UIIcon extends UIElement {
   static properties = {
@@ -23,12 +23,42 @@ export class UIIcon extends UIElement {
     weight: { type: String, default: 'regular', reflect: true },
   };
 
+  // Incremented when the icon registry becomes ready so the reactive
+  // render() re-runs automatically after the loader map arrives.
+  // Declared as a private field (not a static property) to keep it out
+  // of the attribute reflection loop — it is a purely internal trigger.
+  #rev = this.signal(0);
+
+  // Abort controller for the registry-ready subscription. Cancelled on
+  // disconnectedCallback so elements removed before the registry resolves
+  // do not attempt a render on a detached host.
+  #readyCtrl = null;
+
   connected() {
     this.setAttribute('role', this.label ? 'img' : 'presentation');
     if (!this.label) this.setAttribute('aria-hidden', 'true');
+
+    // Subscribe to the registry-ready promise ONCE per connect cycle.
+    // When installIconLoaders() fires (could be before or after connect),
+    // bump #rev so the reactive render() reruns and picks up the SVG.
+    // Guard: if the registry was already ready (e.g. warm page reload),
+    // the .then() fires in a microtask — still safe, just a no-op repaint.
+    this.#readyCtrl = new AbortController();
+    const ctrl = this.#readyCtrl;
+    whenIconRegistryReady.then(() => {
+      if (!ctrl.signal.aborted) this.#rev.value++;
+    });
+  }
+
+  disconnected() {
+    this.#readyCtrl?.abort();
+    this.#readyCtrl = null;
   }
 
   render() {
+    // Read #rev so this render() is tracked as a dependent of the registry
+    // arrival. The value itself is not used — the read is the tracking hook.
+    void this.#rev.value;
     if (this.label) this.setAttribute('aria-label', this.label);
     const svg = getIcon(this.name, this.weight || 'regular');
     if (svg && this.innerHTML !== svg) this.innerHTML = svg;

package/components/icon/icon.js

@@ -12,6 +12,17 @@
 import { defineIfFree } from '../../core/register.js';
 import { UIIcon } from './icon.class.js';
 
+// Side-effect: wires the full @phosphor-icons/core asset tree into the icon
+// registry so that any Phosphor name resolves without pre-registration.
+// icon-ui is a glyph renderer — the icon loader is required for it to paint.
+// The barrel (components/index.js) and core barrel both carry this import
+// already; this import ensures standalone usage of the icon component
+// (e.g. `import '@adia-ai/web-components/components/icon'`) also works.
+// Apps with bundle-size SLOs that manage their own icon registration should
+// import the class subpath directly and call installIconLoaders() themselves:
+//   import { UIIcon } from '@adia-ai/web-components/components/icon/class';
+import '../../core/icons-phosphor.js';
+
 defineIfFree('icon-ui', UIIcon);
 
 export { UIIcon };