@adia-ai/web-components 0.7.19 → 0.7.20

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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

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);
+  });
 });