@adia-ai/web-components 0.0.15 → 0.0.17

package/components/alert/alert.css

@@ -65,6 +65,11 @@
   :scope [slot="leading"] {
     flex-shrink: 0;
     color: var(--alert-icon-fg);
+    /* `ensure()` appends the leading-slot icon to the host, which
+       puts it after any consumer-provided content in DOM order.
+       Force it to the visual lead via flex `order` so the icon
+       always reads first. */
+    order: -1;
   }
 
   :scope [slot="content"] {

package/components/alert/alert.js

@@ -66,9 +66,11 @@ class AdiaAlert extends AdiaElement {
       this.drop('leading');
     }
 
-    // Text
+    // Text — only write from the `text` attribute when it's set, so
+    // consumers passing rich content via `<span slot="content">…</span>`
+    // (links, <strong>, etc.) aren't clobbered with empty textContent.
     const content = this.ensure('content');
-    if (content) content.textContent = this.text;
+    if (content && this.text) content.textContent = this.text;
 
     // Close button
     if (this.closable) {

package/components/button/button.js

@@ -22,7 +22,10 @@ class AdiaButton extends AdiaElement {
   }
 
   render() {
-    this.setAttribute('aria-label', this.text || '');
+    // Don't clobber a user-provided aria-label with an empty string when
+    // text is unset (e.g. icon-only button with author-set aria-label).
+    // Only auto-set when we have meaningful text to put there.
+    if (this.text) this.setAttribute('aria-label', this.text);
     if (this.icon) {
       const existing = this.querySelector('icon-ui');
       if (!existing || existing.name !== this.icon) {

package/components/chat/chat-input.js

@@ -85,8 +85,8 @@ class AdiaChatInput extends AdiaElement {
       this.innerHTML = `
         <textarea-ui placeholder="${this.placeholder}" rows="1"></textarea-ui>
         <div slot="toolbar">
-          <select-ui slot="model" placeholder="Model" divider></select-ui>
-          <button-ui icon="paper-plane-right" variant="ghost" slot="send"></button-ui>
+          <select-ui slot="model" placeholder="Model" aria-label="Select model" divider></select-ui>
+          <button-ui icon="paper-plane-right" variant="ghost" slot="send" aria-label="Send message"></button-ui>
         </div>
       `;
     }
@@ -95,6 +95,16 @@ class AdiaChatInput extends AdiaElement {
     this.#sendEl = this.querySelector('[slot="send"]');
     this.#modelEl = this.querySelector('[slot="model"]');
 
+    // Default aria-labels on author-provided send/model when not set —
+    // these elements are screen-reader-relevant and shouldn't fall back
+    // to the icon-name announcement.
+    if (this.#sendEl && !this.#sendEl.hasAttribute('aria-label')) {
+      this.#sendEl.setAttribute('aria-label', 'Send message');
+    }
+    if (this.#modelEl && !this.#modelEl.hasAttribute('aria-label')) {
+      this.#modelEl.setAttribute('aria-label', 'Select model');
+    }
+
     // Apply models if set before connected (options first, then value)
     if (this.#models.length && this.#modelEl) {
       this.#modelEl.options = this.#models;
@@ -116,6 +126,7 @@ class AdiaChatInput extends AdiaElement {
       this.#attachBtn.setAttribute('variant', 'ghost');
       this.#attachBtn.setAttribute('slot', 'attach');
       this.#attachBtn.setAttribute('size', 'sm');
+      this.#attachBtn.setAttribute('aria-label', 'Attach image');
       const sendBtn = toolbar.querySelector('[slot="send"]');
       toolbar.insertBefore(this.#attachBtn, sendBtn);
       this.#attachBtn.addEventListener('press', this.#onAttachPress);

package/components/description-list/description-list.js

@@ -30,9 +30,10 @@ class AdiaDescriptionList extends AdiaElement {
   static template = () => null;
 
   connected() {
-    // Use the native <dl> role by wrapping or using the tag directly —
-    // since we're a custom element, we set role explicitly.
-    this.setAttribute('role', 'list');
+    // ARIA 1.2: list role requires listitem children, but <dt>/<dd>
+    // aren't listitems. group role is the accurate fit for a
+    // labeled-pairs grouping.
+    this.setAttribute('role', 'group');
   }
 
   render() {

package/components/drawer/drawer.css

@@ -296,14 +296,13 @@
   [slot="panel"] > [slot="body"][padding] { background: var(--a-canvas-0-scrim); }
 
   /* ═══════ Footer ═══════
-     Flex row for actions. [slot="description"] + [slot="action"] = space-between.
-     Mirrors card-ui footer semantics. */
+     Block default — single non-slotted child (e.g. <grid-ui>, <col-ui>, raw
+     paragraph) stretches full-width naturally. Activate flex-row only when a
+     direct slotted child is present, or there are 2+ children — that's the
+     action-row case. Mirrors card-ui footer semantics. */
 
   [slot="panel"] > [slot="footer"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--drawer-footer-gap);
+    display: block;
     padding: var(--drawer-footer-pad);
     border-top: 1px solid var(--drawer-divider);
     flex-shrink: 0;
@@ -314,6 +313,14 @@
     z-index: 1;
   }
 
+  [slot="panel"] > [slot="footer"]:has(> [slot]),
+  [slot="panel"] > [slot="footer"]:has(> :nth-child(2)) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--drawer-footer-gap);
+  }
+
   [slot="panel"] > [slot="footer"][justify="end"] {
     justify-content: flex-end;
   }

package/components/field/field.css

@@ -7,105 +7,155 @@
     --field-label-weight:    var(--a-weight-medium);
     --field-required-color:  var(--a-danger);
     --field-trailing-color:  var(--a-fg-subtle);
-    --field-trailing-size:   var(--a-ui-tiny);
+    --field-trailing-size:   var(--a-ui-sm);
     --field-hint-color:      var(--a-fg-muted);
-    --field-hint-size:       var(--a-ui-tiny);
+    --field-hint-size:       var(--a-ui-sm);
     --field-error-color:     var(--a-danger);
-    --field-error-size:      var(--a-ui-tiny);
+    --field-error-size:      var(--a-ui-sm);
+
+    /* In inline mode, the label column auto-sizes by default (each
+       field's label column is independent of its siblings). Consumers
+       that want shared label-column alignment across stacked inline
+       fields can raise this floor — e.g. 12rem in a multi-field form. */
+    --field-label-inline-min: 0;
   }
 
-  /* ── Base — stacked: three flex rows stacked vertically.
-       Each row is its own flex container so `trailing` and `action`
-       size independently (the previous single-grid shared column 2
-       across rows and made them co-sized). ── */
+  /* ── Base — single grid; children placed by [slot] attribute via
+       named grid-areas. No row wrappers; no DOM reparenting. The
+       template adapts via `:has()` to which slots are present so
+       empty tracks don't leak column-gap. ── */
   :scope {
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--field-gap);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "label"
+      "control"
+      "message";
+    column-gap: var(--field-gap);
+    row-gap: var(--field-gap);
+    align-items: center;
   }
 
-  :scope > [data-row] {
-    display: flex;
-    align-items: center;
-    gap: var(--field-gap);
-    min-width: 0;
+  /* Stacked + (trailing or action) → 2-col */
+  :scope:has(> :is([slot="trailing"], [slot="action"])) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   trailing"
+      "control action"
+      "message message";
+  }
+
+  /* Stacked + no label, no trailing → drop the empty top row. */
+  :scope:not([label]):not(:has(> [slot="trailing"])) {
+    grid-template-areas:
+      "control"
+      "message";
+  }
+  :scope:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "control action"
+      "message message";
   }
 
-  /* label-row — label grows, trailing auto-sizes and right-aligns. */
-  :scope > [data-row="label"] > [data-field-label] {
-    flex: 1 1 auto;
+  /* Hide the label cell when the label attr is absent. */
+  :scope:not([label]) > [slot="label"] { display: none; }
+
+  /* ── Slot styling ── */
+  :scope > [slot="label"] {
+    grid-area: label;
     color: var(--field-label-color);
     font-size: var(--field-label-size);
     font-weight: var(--field-label-weight);
     cursor: pointer;
     min-width: 0;
   }
-  :scope > [data-row="label"] > [data-field-label] > [data-field-required] {
+  :scope > [slot="label"] > [data-field-required] {
     color: var(--field-required-color);
     margin-inline-start: 0.15em;
     font-weight: var(--a-weight-bold);
   }
-  :scope > [data-row="label"] > [slot="trailing"] {
-    flex: 0 0 auto;
+  :scope > [slot="trailing"] {
+    grid-area: trailing;
+    justify-self: end;
     color: var(--field-trailing-color);
     font-size: var(--field-trailing-size);
   }
-
-  /* control-row — control grows, action auto-sizes. */
-  :scope > [data-row="control"] > :not([slot="action"]) {
-    flex: 1 1 auto;
+  :scope > :not([slot]) {
+    grid-area: control;
     min-width: 0;
   }
-  :scope > [data-row="control"] > [slot="action"] {
-    flex: 0 0 auto;
+  :scope > [slot="action"] {
+    grid-area: action;
+    justify-self: end;
   }
-
-  /* message-row — hint or error; collapsed via [hidden] when both empty. */
-  :scope > [data-row="message"] > [data-field-hint] {
+  :scope > [slot="hint"],
+  :scope > [slot="error"] {
+    grid-area: message;
+    line-height: 1.3;
+  }
+  :scope > [slot="hint"] {
     color: var(--field-hint-color);
     font-size: var(--field-hint-size);
-    line-height: 1.3;
   }
-  :scope > [data-row="message"] > [data-field-error] {
+  :scope > [slot="error"] {
     color: var(--field-error-color);
     font-size: var(--field-error-size);
-    line-height: 1.3;
     font-weight: var(--a-weight-medium);
   }
 
-  /* Hide the whole label-row when there's no label AND no trailing —
-     prevents an empty row stealing vertical gap. */
-  :scope:not([label]) > [data-row="label"] > [data-field-label] {
-    display: none;
+  /* ── Mode: inline — content slots on row 1, message row below
+       (aligned with the control column so hint/error sit under the
+       input, not under the label). Templates branch by which
+       optional slots are present so we don't carry zero-width
+       tracks + their gaps. ── */
+  :scope[inline] {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr);
+    grid-template-areas:
+      "label   control"
+      ".       message";
   }
-  :scope:not([label]) > [data-row="label"]:not(:has(> [slot="trailing"])) {
-    display: none;
+  :scope[inline]:has(> [slot="trailing"]):not(:has(> [slot="action"])) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr);
+    grid-template-areas:
+      "label   trailing control"
+      ".       .        message";
   }
-
-  /* ── Mode: inline — flatten label-row + control-row into a single
-       grid row. `display: contents` promotes the row wrappers' children
-       directly to :scope's grid, keeping per-cell independence. The
-       message-row stays a block row below. ── */
-  :scope[inline] {
-    display: grid;
-    grid-template-columns: auto auto 1fr auto;
-    grid-template-rows: auto auto;
-    gap: var(--field-gap);
-    align-items: center;
+  :scope[inline]:not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   control action"
+      ".       message message";
+  }
+  :scope[inline]:has(> [slot="trailing"]):has(> [slot="action"]) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   trailing control action"
+      ".       .        message message";
   }
-  :scope[inline] > [data-row="label"],
-  :scope[inline] > [data-row="control"] {
-    display: contents;
-  }
-  :scope[inline] > [data-row="label"] > [data-field-label]        { grid-column: 1; grid-row: 1; justify-self: start; }
-  :scope[inline] > [data-row="label"] > [slot="trailing"]         { grid-column: 2; grid-row: 1; justify-self: start; }
-  :scope[inline] > [data-row="control"] > :not([slot="action"])   { grid-column: 3; grid-row: 1; }
-  :scope[inline] > [data-row="control"] > [slot="action"]         { grid-column: 4; grid-row: 1; justify-self: end; }
-  :scope[inline] > [data-row="message"] {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    display: flex;
-    gap: var(--field-gap);
+  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):not(:has(> [slot="action"])) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "control"
+      "message";
+  }
+  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "control action"
+      "message message";
+  }
+
+  /* In inline mode, push compact toggle controls (switch / check /
+     radio) to the row's end edge — settings rows then render label-
+     left, control-right regardless of label length. Wide controls
+     (input / textarea / select) keep their default stretch behavior
+     so they fill the trailing column. Already in HEAD as `356a39f`
+     against the row-wrapper model; the second selector here keeps
+     the rule alive once the v2 flat-DOM refactor (§18) lands. */
+  :scope[inline]:has(:is(switch-ui, check-ui, radio-ui)) > [data-row="control"] > :not([slot="action"]),
+  :scope[inline]:has(> :is(switch-ui, check-ui, radio-ui)) > :not([slot]) {
+    justify-self: end;
   }
 }

package/components/field/field.js

@@ -11,37 +11,26 @@
  * and action regions. The host renders a real `<label for="…">` bound
  * to the slotted control's id (auto-minted when missing) so clicking
  * the label focuses the control — an affordance the previous
- * `<input-ui label="…">` pattern lacked (no `for` attr, just a shadow
- * slot).
+ * `<input-ui label="…">` pattern lacked.
  *
- * ### Layout — three internal flex rows
+ * ### Layout — single grid, slot-positioned
  *
- * field-ui owns three row wrappers inside its light DOM. Children are
- * reparented into the row that matches their role so each row's cell
- * widths are independent:
+ * field-ui is a CSS grid; children are placed by `[slot]` attribute:
  *
- *   <div data-row="label">    label [+required marker] [+trailing]  </div>
- *   <div data-row="control">  control [+action]                     </div>
- *   <div data-row="message">  hint or error                         </div>
+ *   slot="label"    → label cell      (mounted by field-ui)
+ *   slot="trailing" → row 1, right
+ *   (no slot)       → control cell
+ *   slot="action"   → adjacent to control
+ *   slot="hint"     → message row     (mounted by field-ui)
+ *   slot="error"    → message row     (mounted by field-ui)
  *
- * Per-row flex means `trailing` no longer dictates the width of
- * `action` (or vice versa). In the previous 2-column grid, column 2
- * was shared across rows, so `trailing="Required"` pushed the
- * `action` cell wider than the button needed. The three-row split
- * fixes that.
+ * The template adapts (via `:has()`) to which slots are present so empty
+ * tracks don't leak column-gap. Inline mode flattens the content slots
+ * onto a single row by retuning columns; message stays below.
  *
- * ### Inline mode
- *
- * `inline` collapses the three rows into a grid where label, trailing,
- * control, and action share one row and the message row sits below.
- * CSS uses `display: contents` on the label-row and control-row
- * wrappers in inline mode so their children flow directly into the
- * single grid row; no DOM restructure needed for the mode switch.
- *
- * A MutationObserver re-categorizes and re-parents children when the
- * slotted tree changes (e.g. the A2UI renderer swapping the control
- * during doc updates). Self-triggered mutations from our own
- * reparenting are debounced via a guard flag to prevent a loop.
+ * No DOM reparenting; CSS positions children directly. A small
+ * MutationObserver watches childList so a swapped-in control gets its
+ * `for=` and `aria-describedby` rebound.
  */
 import { AdiaElement } from '../../core/element.js';
 
@@ -60,41 +49,32 @@ class AdiaField extends AdiaElement {
   #labelMark = null;
   #hintEl = null;
   #errorEl = null;
-  #labelRow = null;
-  #controlRow = null;
-  #messageRow = null;
   #mo = null;
-  #restructuring = false;   // guard against MutationObserver self-trigger
 
-  // Label click handler — the native <label for="x"> affordance calls
-  // .focus() on the element with id "x". For a custom-element control
-  // like input-ui, that focuses the shadow/light host (tabindex=-1 by
-  // default), so focus falls through to body. Work around by finding
-  // the first focusable descendant inside the slotted control and
-  // focusing it explicitly.
+  // Label click → focus the first focusable descendant of the slotted
+  // control. The native `<label for="x">` affordance focuses the host
+  // by id, which for a custom-element control falls through to body
+  // (host typically tabindex=-1).
   #onLabelClick = (e) => {
     const ctrl = this.#findControl();
     if (!ctrl) return;
     const focusable = this.#firstFocusable(ctrl);
     if (!focusable) return;
-    e.preventDefault();  // prevent the native <label for> focus-host fallback
+    e.preventDefault();
     focusable.focus();
   };
 
   connected() {
-    this.#ensureRowWrappers();
     this.#ensureLabelElement();
     this.#ensureHintElement();
     this.#ensureErrorElement();
-    this.#restructure();
     this.#bindForToControl();
+    this.#labelEl?.addEventListener('click', this.#onLabelClick);
     this.#mo = new MutationObserver(() => {
-      if (this.#restructuring) return;
-      this.#restructure();
       this.#bindForToControl();
+      this.#wireAriaDescribedBy();
     });
-    this.#mo.observe(this, { childList: true, subtree: false });
-    this.#labelEl?.addEventListener('click', this.#onLabelClick);
+    this.#mo.observe(this, { childList: true });
   }
 
   disconnected() {
@@ -105,14 +85,12 @@ class AdiaField extends AdiaElement {
     this.#labelMark = null;
     this.#hintEl = null;
     this.#errorEl = null;
-    this.#labelRow = null;
-    this.#controlRow = null;
-    this.#messageRow = null;
   }
 
   render() {
-    // Keep label / hint / error text in sync with reactive props.
-    if (this.#labelEl) this.#labelEl.childNodes[0] && (this.#labelEl.childNodes[0].nodeValue = this.label || '');
+    if (this.#labelEl) {
+      this.#labelEl.childNodes[0] && (this.#labelEl.childNodes[0].nodeValue = this.label || '');
+    }
     if (this.#labelMark) this.#labelMark.hidden = !this.required;
     if (this.#hintEl) {
       this.#hintEl.textContent = this.hint || '';
@@ -122,50 +100,24 @@ class AdiaField extends AdiaElement {
       this.#errorEl.textContent = this.error || '';
       this.#errorEl.hidden = !this.error;
     }
-    // Collapse the message row entirely when both are empty so the
-    // field's trailing gap doesn't stick out.
-    if (this.#messageRow) {
-      this.#messageRow.hidden = !this.hint && !this.error;
-    }
     this.#wireAriaDescribedBy();
   }
 
   // ── Private ───────────────────────────────────────────────────────
 
-  #ensureRowWrappers() {
-    this.#labelRow = this.querySelector(':scope > [data-row="label"]');
-    this.#controlRow = this.querySelector(':scope > [data-row="control"]');
-    this.#messageRow = this.querySelector(':scope > [data-row="message"]');
-    if (!this.#labelRow) {
-      this.#labelRow = this.#mkRow('label');
-      this.appendChild(this.#labelRow);
-    }
-    if (!this.#controlRow) {
-      this.#controlRow = this.#mkRow('control');
-      this.appendChild(this.#controlRow);
-    }
-    if (!this.#messageRow) {
-      this.#messageRow = this.#mkRow('message');
-      this.appendChild(this.#messageRow);
-    }
-  }
-
-  #mkRow(name) {
-    const d = document.createElement('div');
-    d.setAttribute('data-row', name);
-    return d;
-  }
-
   #ensureLabelElement() {
-    this.#labelEl = this.querySelector(':scope [data-field-label]');
+    this.#labelEl = this.querySelector(':scope > [data-field-label]');
     if (!this.#labelEl) {
       const el = document.createElement('label');
+      el.setAttribute('slot', 'label');
       el.setAttribute('data-field-label', '');
       el.appendChild(document.createTextNode(this.label || ''));
+      // Prepend so source-order matches visual order (label before
+      // control). Not strictly required since CSS uses grid-area, but
+      // it keeps DevTools / a11y tree readings sensible.
+      this.prepend(el);
       this.#labelEl = el;
     }
-    // Persistent required marker — hidden when !required. Lives as the
-    // label's last child so the stream reads "<label>*</label>".
     this.#labelMark = this.#labelEl.querySelector('[data-field-required]');
     if (!this.#labelMark) {
       const mark = document.createElement('span');
@@ -179,71 +131,30 @@ class AdiaField extends AdiaElement {
   }
 
   #ensureHintElement() {
-    this.#hintEl = this.querySelector(':scope [data-field-hint]');
+    this.#hintEl = this.querySelector(':scope > [data-field-hint]');
     if (this.#hintEl) return;
     const el = document.createElement('div');
+    el.setAttribute('slot', 'hint');
     el.setAttribute('data-field-hint', '');
     el.setAttribute('id', AdiaField.#nextMsgId('hint'));
     el.hidden = true;
+    this.appendChild(el);
     this.#hintEl = el;
   }
 
   #ensureErrorElement() {
-    this.#errorEl = this.querySelector(':scope [data-field-error]');
+    this.#errorEl = this.querySelector(':scope > [data-field-error]');
     if (this.#errorEl) return;
     const el = document.createElement('div');
+    el.setAttribute('slot', 'error');
     el.setAttribute('data-field-error', '');
     el.setAttribute('id', AdiaField.#nextMsgId('err'));
     el.setAttribute('role', 'alert');
     el.hidden = true;
+    this.appendChild(el);
     this.#errorEl = el;
   }
 
-  /** Sort light-DOM children into the appropriate row wrapper.
-   *  Idempotent — no-ops when a child already sits in its target row. */
-  #restructure() {
-    this.#restructuring = true;
-    try {
-      // Collect any children that are not already row wrappers or our
-      // managed elements. `Array.from` is snapshotted — moves during
-      // iteration don't re-index.
-      const loose = [...this.children].filter(
-        (ch) => ch !== this.#labelRow && ch !== this.#controlRow && ch !== this.#messageRow,
-      );
-      for (const ch of loose) {
-        this.#moveToRow(ch);
-      }
-      // Then relocate managed elements (they may have been created in
-      // a previous tick and still sit at :scope level).
-      if (this.#labelEl && this.#labelEl.parentElement !== this.#labelRow) {
-        this.#labelRow.prepend(this.#labelEl);
-      }
-      if (this.#hintEl && this.#hintEl.parentElement !== this.#messageRow) {
-        this.#messageRow.appendChild(this.#hintEl);
-      }
-      if (this.#errorEl && this.#errorEl.parentElement !== this.#messageRow) {
-        this.#messageRow.appendChild(this.#errorEl);
-      }
-      // Ensure the row order is label → control → message even after
-      // mutations re-append things.
-      if (this.lastElementChild !== this.#messageRow) {
-        this.appendChild(this.#messageRow);
-      }
-    } finally {
-      this.#restructuring = false;
-    }
-  }
-
-  #moveToRow(ch) {
-    const slot = ch.getAttribute?.('slot');
-    const target =
-      ch.matches?.('[data-field-label]') ? this.#labelRow :
-      slot === 'trailing'                 ? this.#labelRow :
-      ch.matches?.('[data-field-hint], [data-field-error]') ? this.#messageRow :
-      /* everything else (control, slot=action) */           this.#controlRow;
-    if (ch.parentElement !== target) target.appendChild(ch);
-  }
-
   #bindForToControl() {
     if (!this.#labelEl) return;
     const control = this.#findControl();
@@ -270,20 +181,17 @@ class AdiaField extends AdiaElement {
     else ctrl.removeAttribute('aria-describedby');
   }
 
-  /** The default-slot control — first child of control-row that isn't
-   *  assigned to `[slot="action"]`. */
+  /** The default-slot control — first child without a `slot` attribute. */
   #findControl() {
-    if (!this.#controlRow) return null;
-    for (const ch of this.#controlRow.children) {
-      if (ch.getAttribute('slot') === 'action') continue;
-      return ch;
+    for (const ch of this.children) {
+      if (!ch.hasAttribute('slot')) return ch;
     }
     return null;
   }
 
   /** First focusable descendant (or self) of `root`. Looks for native
    *  `<input>`, `<textarea>`, `<select>`, `<button>`, `[contenteditable]`,
-   *  and any `[tabindex]` ≥ 0. Traverses light DOM only. */
+   *  and any `[tabindex]` ≥ 0. Light DOM only. */
   #firstFocusable(root) {
     const SEL = 'input, textarea, select, button, [contenteditable], [tabindex]:not([tabindex="-1"])';
     if (root.matches?.(SEL)) return root;
@@ -291,15 +199,9 @@ class AdiaField extends AdiaElement {
   }
 
   static #idSeq = 0;
-  static #nextId() {
-    AdiaField.#idSeq += 1;
-    return `field-ctl-${AdiaField.#idSeq}`;
-  }
+  static #nextId() { return `field-ctl-${++AdiaField.#idSeq}`; }
   static #msgSeq = 0;
-  static #nextMsgId(kind) {
-    AdiaField.#msgSeq += 1;
-    return `field-${kind}-${AdiaField.#msgSeq}`;
-  }
+  static #nextMsgId(kind) { return `field-${kind}-${++AdiaField.#msgSeq}`; }
 }
 
 customElements.define('field-ui', AdiaField);

package/components/icon/icon.a2ui.json

@@ -27,7 +27,7 @@
       "default": ""
     },
     "size": {
-      "description": "Icon size. Accepts the named scale (xs/sm/md/lg/xl) or a pixel value as a string (\"12\", \"16\", \"24\", \"32\", \"48\"). Overrides --a-icon-size.",
+      "description": "Icon size. Accepts the named scale (`xs` 12px / `sm` 14px / `md` 16px / `lg` 20px / `xl` 32px / `2xl` 48px / `3xl` 64px / `4xl` 96px / `fill` 100% of parent) or a free-form pixel / rem / em value as a string (\"48\", \"3rem\", \"1.25em\"). Overrides the inherited `--a-icon-size` from the universal `[size]` system on ancestors.",
       "type": "string",
       "default": ""
     },