@adia-ai/web-components 0.8.43 → 0.8.45

package/components/nav/nav.yaml

@@ -38,7 +38,7 @@ props:
   heading:
     type: string
     default: ''
-    description: "Optional kicker label. Section variant renders it via ::before; primary uses it as aria-label only."
+    description: "Optional kicker label. Section variant renders it via ::before; primary uses it as aria-label only. For a VISIBLE kicker inside a primary-variant rail — or more than one kicker per <nav-ui> — hand-place <span data-nav-label> in the default slot instead; see slots below."
   multiExpand:
     type: boolean
     default: false
@@ -62,7 +62,7 @@ events:
 
 slots:
   default:
-    description: "Primary slot — accepts <nav-group-ui> + <nav-item-ui> children, plus <hr data-nav-divider> for hand-placed dividers."
+    description: "Primary slot — accepts <nav-group-ui> + <nav-item-ui> children, plus <hr data-nav-divider> for hand-placed dividers and <span data-nav-label> for hand-placed group-label kickers (titled runs of items/groups that aren't wrapped in a <nav-group-ui>). <span data-nav-label> renders with the same uppercase/tracking/muted kicker treatment as the [heading] ::before kicker, and is hidden alongside dividers whenever the primary-variant rail collapses ([collapsed] or ≤96px container width)."
 
 states:
   - name: idle
@@ -79,7 +79,18 @@ a2ui:
       wrapped in <section-ui> for app sidebars; inside an
       <aside data-subnav> with variant="section" for section / subnav
       rails; standalone on docs / auth pages. Children: <nav-group-ui>,
-      <nav-item-ui>, optional <hr data-nav-divider>.
+      <nav-item-ui>, optional <hr data-nav-divider>, optional
+      <span data-nav-label> (hand-placed titled section header).
+    - >-
+      Titled nav-item groups: hand-place <span data-nav-label>Text</span>
+      directly in the default slot, before a run of <nav-item-ui> /
+      <nav-group-ui> children, to render a section-header kicker — the
+      same uppercase/tracking/muted treatment as the [heading] ::before
+      kicker on variant="section", but usable anywhere in the child list
+      (not limited to one kicker per <nav-ui>) and always visually
+      rendered, unlike [heading] which is aria-only on variant="primary".
+      Hidden automatically whenever the primary-variant rail collapses
+      ([collapsed] or ≤96px container width), same as <hr data-nav-divider>.
     - >-
       Variants: variant="primary" (default) — app sidebar; ResizeObserver
       collapses to icon-only ≤96px; collapsible groups open as a popover

package/components/nav-group/nav-group.css

@@ -17,13 +17,31 @@
          selected — bg container · icon + text ON-SURFACE
        The selected icon no longer takes primary (supersedes gh#522's
        glyph ruling); Figma's neutral/surfaceBright was considered for the
-       selected fill and RULED OUT — container stays (gh#795's mirror). */
-    --nav-group-fg:            var(--md-sys-color-neutral-high);
+       selected fill and RULED OUT — container stays (gh#795's mirror).
+       gh#968's ladder above is about ROUTE selection (hover/selected);
+       it says nothing about the group's own open/closed disclosure state,
+       which --nav-group-fg left pinned unconditionally to one role
+       (neutral-high) regardless of [open]. gh#1740 (operator ruling,
+       2026-08-19) supersedes that unconditional pin with a second,
+       orthogonal axis — the header text and caret glyph now also shift
+       role by [open], the same way they already shift by [selected]/
+       hover; the two ladders compose (a selected-route header still wins
+       its --nav-group-fg-selected treatment regardless of open state —
+       see the :scope[open] rule below, kept lower-precedence than
+       :scope[selected] by source order). */
+    --nav-group-fg:            var(--md-sys-color-neutral);
+    --nav-group-fg-active:     var(--md-sys-color-neutral-high);
     --nav-group-fg-hover:      var(--a-fg-strong);
     --nav-group-fg-muted:      var(--a-fg-muted);
     --nav-group-fg-selected:   var(--a-fg-strong);
     --nav-group-icon-fg:       var(--md-sys-color-neutral);
     --nav-group-icon-fg-selected: var(--a-fg-strong);
+    /* Caret role ladder (gh#1740) — idle/closed: NEUTRAL-LOW (one step
+       quieter than the muted badge/kicker role); open: NEUTRAL, matching
+       the icon's own idle role so the caret doesn't outshine the icon
+       once the group is expanded. */
+    --nav-group-caret-fg:        var(--md-sys-color-neutral-low);
+    --nav-group-caret-fg-active: var(--md-sys-color-neutral);
     --nav-group-bg-hover:      var(--a-bg-muted);
     --nav-group-bg-selected:   var(--a-bg-selected); /* mirrors --nav-item-bg-selected (gh#795) */
     --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
@@ -71,6 +89,20 @@
     background: var(--nav-group-indent-rail-bg, var(--md-sys-color-neutral-outline-variant));
     pointer-events: none;
   }
+  /* Disclosure-state ladder (gh#1740, operator ruling 2026-08-19): the
+     header text and caret glyph step UP a role when the group is open —
+     idle/closed reads NEUTRAL, expanded reads NEUTRAL-HIGH. Placed BEFORE
+     the [selected]/[data-selected-within] block below so an equal-
+     specificity (0,3,0) tie always resolves to the route-selection color:
+     a selected-route group keeps its existing --nav-group-fg-selected
+     treatment regardless of its own open/closed state — this rule only
+     ever wins when the group is open AND not selected. */
+  :scope[open] > [slot="header"] {
+    color: var(--nav-group-fg-active);
+  }
+  :scope[open] > [slot="header"] [slot="caret"] {
+    color: var(--nav-group-caret-fg-active);
+  }
   /* Selected-look header treatment keys on [selected] — the CSS half of
      gh issue 459 (PR 460 corrected the icon weight): the group CONTAINING
      the selected route reads strong; a merely-expanded group does not.
@@ -174,7 +206,9 @@
 
   [slot="header"] [slot="caret"] {
     /*--a-icon-size: 0.5rem;*/
-    color: var(--nav-group-fg-muted);
+    /* idle/closed caret = NEUTRAL-LOW (gh#1740 role ladder); steps up to
+       --nav-group-caret-fg-active via the :scope[open] rule above. */
+    color: var(--nav-group-caret-fg);
     transition:
       transform var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);

package/components/noodles/noodles.a2ui.json

@@ -41,11 +41,6 @@
       "type": "boolean",
       "default": false
     },
-    "port-size": {
-      "description": "Port indicator dot size in pixels",
-      "type": "number",
-      "default": 10
-    },
     "portSize": {
       "description": "Port indicator size",
       "type": "number",
@@ -56,21 +51,11 @@
       "type": "boolean",
       "default": false
     },
-    "show-ports": {
-      "description": "Show port indicator dots. Defaults to true when editable",
-      "type": "boolean",
-      "default": false
-    },
     "showPorts": {
       "description": "Show port indicators",
       "type": "boolean",
       "default": false
     },
-    "stroke-width": {
-      "description": "Stroke width in pixels",
-      "type": "number",
-      "default": 2
-    },
     "strokeWidth": {
       "description": "Line stroke width",
       "type": "number",

package/components/noodles/noodles.yaml

@@ -30,10 +30,6 @@ props:
     description: Allow interactive creation/deletion of connections via drag
     type: boolean
     default: false
-  port-size:
-    description: Port indicator dot size in pixels
-    type: number
-    default: 10
   portSize:
     description: Port indicator size
     type: number
@@ -44,19 +40,11 @@ props:
     type: boolean
     default: false
     reflect: true
-  show-ports:
-    description: Show port indicator dots. Defaults to true when editable
-    type: boolean
-    default: false
   showPorts:
     description: Show port indicators
     type: boolean
     default: false
     attribute: show-ports
-  stroke-width:
-    description: Stroke width in pixels
-    type: number
-    default: 2
   strokeWidth:
     description: Line stroke width
     type: number

package/components/number-format/number-format.class.js

@@ -87,6 +87,16 @@ export class UINumberFormat extends UIElement {
     this.textContent = text;
     // Mirror raw value via aria-label so screen readers can read the
     // underlying number alongside the formatted glyphs.
+    //
+    // gh#1647 judgment call (triage-corrections comment, 2026-08-18):
+    // this aria-label is intentional component-owned chrome, not a
+    // consumer-overridable name — it mirrors the RAW underlying value
+    // ("42% (raw: 0.42)") specifically for a11y clarity, so a consumer
+    // override would likely defeat that purpose. Deliberately NOT ported
+    // to the value-tracking `#lastAutoAriaLabel` guard (core/a11y.js)
+    // that the other five gh#1647 primitives got — kept unconditional,
+    // auto-deriving on every render. Revisit only if a stated consumer
+    // need for overriding it surfaces.
     if (text && Number.isFinite(Number(this.value))) {
       this.setAttribute('aria-label', `${text} (raw: ${this.value})`);
     } else {

package/components/pagination/pagination.class.js

@@ -22,6 +22,33 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { KEY_MAP } from '../../core/template.js';
+
+// ── SSR idempotent-write guard (gh#1755, follow-up to table-ui's gh#1678) ──
+//
+// Local copies of table.class.js's own setAttrIfChanged()/removeAttrIfPresent()
+// — module-local there too (not exported), so a shared-utility extraction for
+// two call sites would be a premature abstraction; these mirror that shape.
+//
+/**
+ * Idempotent attribute set — skip the DOM write entirely when the value
+ * already matches. `setAttribute` mutates (and queues a MutationObserver
+ * record) even when the new value is byte-identical to the old one, so a
+ * per-item attribute this render path sets on EVERY call (`aria-current`,
+ * `variant`, `disabled`, `tabindex`, `text`, `aria-label`, `data-value`,
+ * `size`) must compare-before-write to let a byte-identical adopted SSR
+ * `<nav>` (gh#1687) survive re-render with zero mutations — bare
+ * `setAttribute` cannot give that guarantee even when the value never
+ * actually changes.
+ */
+function setAttrIfChanged(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+
+/** Idempotent attribute removal — same rationale as setAttrIfChanged. */
+function removeAttrIfPresent(el, name) {
+  if (el.hasAttribute(name)) el.removeAttribute(name);
+}
 
 export class UIPagination extends UIElement {
   static properties = {
@@ -48,10 +75,32 @@ export class UIPagination extends UIElement {
 
   connected() {
     if (!this.#nav) {
-      this.#nav = document.createElement('nav');
-      this.#nav.setAttribute('slot', 'nav');
-      this.#nav.setAttribute('aria-label', 'Pagination');
-      this.appendChild(this.#nav);
+      // Adopt a pre-existing server-rendered <nav slot="nav"> instead of
+      // unconditionally appending a fresh one — first-connect adoption
+      // (gh#1687). Steady-state reconcile is unaffected; this only guards
+      // the construction-time #nav field being null on upgrade.
+      this.#nav = this.querySelector(':scope > nav[slot="nav"]');
+      if (this.#nav) {
+        // Adopting an existing nav is only half the fix — reconcile()'s
+        // own keyed-diff (element.js) keys off a WeakMap-shaped
+        // `parent[KEY_MAP]` populated by THIS element's own prior render
+        // calls, which a freshly-parsed SSR fragment never has. Without
+        // seeding it here, the very first render treats every adopted
+        // child as unrecognized, stamps a full set of BRAND NEW nodes
+        // alongside them, and never removes the orphaned originals —
+        // silently doubling the button count inside the (correctly
+        // singular) adopted <nav>. Positionally zip the adopted
+        // children against the SAME key order #buildRange would
+        // produce right now; a shape mismatch (stale/hand-edited SSR
+        // markup) is left unseeded so reconcile falls back to its
+        // normal rebuild-from-scratch behavior instead of miskeying.
+        this.#seedKeyMapFromAdoptedNav();
+      } else {
+        this.#nav = document.createElement('nav');
+        this.#nav.setAttribute('slot', 'nav');
+        this.#nav.setAttribute('aria-label', 'Pagination');
+        this.appendChild(this.#nav);
+      }
     }
 
     if (!this.#bound) {
@@ -69,6 +118,67 @@ export class UIPagination extends UIElement {
     this.#bound = false;
   }
 
+  // Review finding (PR #1692) — the tag/marker a given item.type produces
+  // via #createItem(): ellipsis is a bare <span data-ellipsis>; prev/next/
+  // page are all <button-ui> distinguished by their own data-* marker
+  // (page additionally carries data-value). A same-LENGTH adopted child
+  // that doesn't match this shape (e.g. a plain <span> standing in for a
+  // page-cell <button-ui>) would still get SEEDED by a count-only check,
+  // then #updateItem() — which only sets attributes, never replaces the
+  // element — leaves it permanently the wrong tag. Checking shape here
+  // is what makes the fallback in #seedKeyMapFromAdoptedNav trustworthy.
+  #childMatchesItem(el, item) {
+    if (item.type === 'ellipsis') {
+      return el.tagName === 'SPAN' && el.hasAttribute('data-ellipsis');
+    }
+    if (el.tagName !== 'BUTTON-UI') return false;
+    if (item.type === 'prev') return el.hasAttribute('data-prev');
+    if (item.type === 'next') return el.hasAttribute('data-next');
+    return el.hasAttribute('data-page') && el.dataset.value === String(item.value);
+  }
+
+  // gh#1687 — see the call site's comment in connected(). Positionally
+  // zips the adopted nav's existing children against the key order the
+  // very next render() will compute, seeding reconcile()'s own
+  // `parent[KEY_MAP]` (element.js) so that render finds every item
+  // already present instead of stamping a duplicate full set.
+  #seedKeyMapFromAdoptedNav() {
+    const page = Math.max(1, Math.min(this.page, this.total));
+    const total = Math.max(1, this.total);
+    const siblings = Math.max(0, this.siblings);
+    const range = this.#buildRange(page, total, siblings);
+    const children = [...this.#nav.children];
+    const shapeMatches = children.length === range.length
+      && range.every((item, i) => this.#childMatchesItem(children[i], item));
+    if (!shapeMatches) {
+      // Review finding (PR #1692, two rounds) — a bare return here left
+      // the mismatch case worse off than doing nothing: reconcile()'s
+      // own cleanup loop only removes entries it finds IN
+      // `parent[KEY_MAP]`, so an unseeded map means every existing
+      // child is invisible to it — the next render() then stamps a
+      // full fresh set AND the stale adopted children survive alongside
+      // it (reproduced: 3 stale placeholder buttons + a correct fresh
+      // 9-item render = 12 nodes). Length alone isn't a reliable
+      // correlation signal either — a same-length fixture with the
+      // WRONG tag/marker per position (e.g. N bare <span>s standing in
+      // for N <button-ui> page-cells) would pass a count-only check and
+      // get seeded, then #updateItem() — attribute-only, never a tag
+      // swap — leaves it permanently wrong. Either kind of mismatch
+      // means the adopted markup can't be trusted to correlate with the
+      // next render's key order at all — abandon adoption for real:
+      // clear the stale children so the fallback is an actual clean
+      // rebuild, the same shape #nav would be in if it had just been
+      // freshly created.
+      this.#nav.replaceChildren();
+      return;
+    }
+    const map = new Map();
+    for (let i = 0; i < range.length; i++) {
+      map.set(range[i].key, children[i]);
+    }
+    this.#nav[KEY_MAP] = map;
+  }
+
   render() {
     if (!this.#nav) return;
 
@@ -167,21 +277,21 @@ export class UIPagination extends UIElement {
     }
 
     const btn = document.createElement('button-ui');
-    btn.setAttribute('size', this.size);
+    setAttrIfChanged(btn, 'size', this.size);
 
     if (item.type === 'prev') {
       btn.setAttribute('data-prev', '');
-      btn.setAttribute('icon', 'caret-left');
-      btn.setAttribute('aria-label', 'Previous page');
+      setAttrIfChanged(btn, 'icon', 'caret-left');
+      setAttrIfChanged(btn, 'aria-label', 'Previous page');
     } else if (item.type === 'next') {
       btn.setAttribute('data-next', '');
-      btn.setAttribute('icon', 'caret-right');
-      btn.setAttribute('aria-label', 'Next page');
+      setAttrIfChanged(btn, 'icon', 'caret-right');
+      setAttrIfChanged(btn, 'aria-label', 'Next page');
     } else {
       btn.setAttribute('data-page', '');
-      btn.dataset.value = String(item.value);
-      btn.setAttribute('text', String(item.value));
-      btn.setAttribute('aria-label', `Page ${item.value}`);
+      setAttrIfChanged(btn, 'data-value', String(item.value));
+      setAttrIfChanged(btn, 'text', String(item.value));
+      setAttrIfChanged(btn, 'aria-label', `Page ${item.value}`);
     }
 
     this.#updateItem(btn, item, page);
@@ -192,32 +302,36 @@ export class UIPagination extends UIElement {
     if (item.type === 'ellipsis') return;
 
     // Keep size in sync \u2014 the host's [size] may change between renders.
-    el.setAttribute('size', this.size);
+    // gh#1755 \u2014 compare-before-write: this runs on EVERY render pass
+    // (including one triggered by an unrelated reactive dependency), so a
+    // bare setAttribute() would re-mutate an already-correct adopted
+    // gh#1687 SSR `<nav>` child even when nothing here actually changed.
+    setAttrIfChanged(el, 'size', this.size);
 
     if (item.type === 'prev') {
-      el.setAttribute('variant', this.#restVariant());
-      if (page <= 1) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
+      setAttrIfChanged(el, 'variant', this.#restVariant());
+      if (page <= 1) { setAttrIfChanged(el, 'disabled', ''); setAttrIfChanged(el, 'tabindex', '-1'); }
+      else { removeAttrIfPresent(el, 'disabled'); setAttrIfChanged(el, 'tabindex', '0'); }
     } else if (item.type === 'next') {
-      el.setAttribute('variant', this.#restVariant());
-      if (page >= this.total) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
+      setAttrIfChanged(el, 'variant', this.#restVariant());
+      if (page >= this.total) { setAttrIfChanged(el, 'disabled', ''); setAttrIfChanged(el, 'tabindex', '-1'); }
+      else { removeAttrIfPresent(el, 'disabled'); setAttrIfChanged(el, 'tabindex', '0'); }
     } else {
-      el.dataset.value = String(item.value);
-      el.setAttribute('text', String(item.value));
-      el.setAttribute('aria-label', `Page ${item.value}`);
+      setAttrIfChanged(el, 'data-value', String(item.value));
+      setAttrIfChanged(el, 'text', String(item.value));
+      setAttrIfChanged(el, 'aria-label', `Page ${item.value}`);
       if (item.value === page) {
         // Active page reads as `variant="primary"` so the filled-accent
         // state comes from button-ui's primary surface matrix (the
         // canonical token chain) \u2014 not a pagination-tier re-impl.
-        el.setAttribute('variant', 'primary');
+        setAttrIfChanged(el, 'variant', 'primary');
         // aria-current="page" alone carries the active-page state — no
         // private data-active mirror (gh#1332 Category A; admin-roster's
         // aria-checked precedent from PR #1438).
-        el.setAttribute('aria-current', 'page');
+        setAttrIfChanged(el, 'aria-current', 'page');
       } else {
-        el.setAttribute('variant', this.#restVariant());
-        el.removeAttribute('aria-current');
+        setAttrIfChanged(el, 'variant', this.#restVariant());
+        removeAttrIfPresent(el, 'aria-current');
       }
     }
   }

package/components/popover/popover.d.ts

@@ -13,6 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIPopover extends UIElement {
+  /** Size the content panel to the trigger's width instead of max-content. Opt-in — the default (unset) keeps every existing consumer's content-sized panel unchanged. */
+  matchWidth: boolean;
   /** Pixel offset between the anchor and the popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053). */
   offset: number;
   /** Controls visibility via showPopover()/hidePopover() */

package/components/progress/progress.class.js

@@ -28,6 +28,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { syncAutoAriaLabel } from '../../core/a11y.js';
 
 export class UIProgress extends UIElement {
   static properties = {
@@ -42,6 +43,10 @@ export class UIProgress extends UIElement {
   #fill = null;
   #labelEl = null;
   #metaEl = null;
+  // gh#1647: tracks the aria-label VALUE this element itself last derived
+  // from `label`/`meta` (undefined when none) — value-tracking guard
+  // ported from tag.class.js/select.class.js (gh#1644/#1646).
+  #lastAutoAriaLabel = undefined;
 
   connected() {
     this.setAttribute('role', 'progressbar');
@@ -111,12 +116,12 @@ export class UIProgress extends UIElement {
       }
     }
 
-    // ARIA: label the control so screen readers announce "CPU, 42 percent".
-    if (this.label) {
-      this.setAttribute('aria-label', this.meta ? `${this.label}, ${this.meta}` : this.label);
-    } else {
-      this.removeAttribute('aria-label');
-    }
+    // ARIA: label the control so screen readers announce "CPU, 42 percent"
+    // — never clobbering a consumer's own aria-label (gh#1647,
+    // value-tracking guard ported from tag.class.js/select.class.js,
+    // gh#1644/#1646).
+    const ariaSource = this.label ? (this.meta ? `${this.label}, ${this.meta}` : this.label) : '';
+    this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, ariaSource);
   }
 
   disconnected() {

package/components/range/range.class.js

@@ -25,6 +25,7 @@
  */
 
 import { UIFormElement } from '../../core/form.js';
+import { syncAutoAriaLabel } from '../../core/a11y.js';
 
 export class UIRange extends UIFormElement {
   // Opt out of UIFormElement's per-control `label` deprecation warning.
@@ -52,6 +53,10 @@ export class UIRange extends UIFormElement {
   #dragging = false;
   #startX = 0;
   #startVal = 0;
+  // gh#1647: tracks the aria-label VALUE this element itself last derived
+  // from `label` (undefined when none) — value-tracking guard ported from
+  // tag.class.js/select.class.js (gh#1644/#1646).
+  #lastAutoAriaLabel = undefined;
 
   connected() {
     super.connected();
@@ -96,7 +101,10 @@ export class UIRange extends UIFormElement {
     this.setAttribute('aria-valuemax', this.max);
     this.setAttribute('aria-valuenow', this.value);
     this.setAttribute('aria-valuetext', `${this.value}${this.suffix ? ' ' + this.suffix : ''}`);
-    this.setAttribute('aria-label', this.label || '');
+
+    // A11y (gh#1647): never clobber a consumer's own aria-label
+    // (value-tracking guard, gh#1644/#1646).
+    this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, this.label || '');
 
     this.syncValue(String(this.value));
   }

package/components/search/search.class.js

@@ -22,6 +22,30 @@
 
 import { UIFormElement } from '../../core/form.js';
 
+// ── SSR idempotent-write guard (gh#1755, follow-up to table-ui's gh#1678) ──
+//
+// Local copies of table.class.js's own setAttrIfChanged()/removeAttrIfPresent()
+// — module-local there too (not exported), so a shared-utility extraction for
+// two call sites would be a premature abstraction; these mirror that shape.
+//
+/**
+ * Idempotent attribute set — skip the DOM write entirely when the value
+ * already matches. `setAttribute` mutates (and queues a MutationObserver
+ * record) even when the new value is byte-identical to the old one, so a
+ * host/child attribute this render path sets on EVERY call (`placeholder`,
+ * `value`) must compare-before-write to let a byte-identical SSR-rendered
+ * `<input-ui>` survive upgrade with zero mutations — bare `setAttribute`
+ * cannot give that guarantee even when the value never actually changes.
+ */
+function setAttrIfChanged(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+
+/** Idempotent attribute removal — same rationale as setAttrIfChanged. */
+function removeAttrIfPresent(el, name) {
+  if (el.hasAttribute(name)) el.removeAttribute(name);
+}
+
 export class UISearch extends UIFormElement {
   static properties = {
     ...UIFormElement.properties,
@@ -37,7 +61,10 @@ export class UISearch extends UIFormElement {
 
   connected() {
     super.connected();
-    this.setAttribute('role', 'search');
+    // gh#1755 — a byte-identical SSR-rendered host already carries this
+    // attribute; an unconditional setAttribute() here would still queue a
+    // mutation record even though the value never actually changes.
+    setAttrIfChanged(this, 'role', 'search');
 
     if (!this.querySelector('input-ui')) {
       const size = this.getAttribute('size');
@@ -69,12 +96,19 @@ export class UISearch extends UIFormElement {
   render() {
     if (!this.#inputEl) return;
 
-    this.#inputEl.setAttribute('placeholder', this.placeholder);
-    if (this.disabled) this.#inputEl.setAttribute('disabled', '');
-    else this.#inputEl.removeAttribute('disabled');
+    // gh#1755 — this render effect re-runs on ANY of this element's
+    // reactive properties changing (element.js's connectedCallback effect
+    // reads every signal unconditionally), not only placeholder/disabled/
+    // value themselves — so a bare setAttribute() here would re-mutate an
+    // already-correct adopted `<input-ui>` (or this host's own `value`
+    // attribute) on every unrelated re-render, defeating SSR zero-mutation
+    // upgrade even when nothing this pass actually cares about changed.
+    setAttrIfChanged(this.#inputEl, 'placeholder', this.placeholder);
+    if (this.disabled) setAttrIfChanged(this.#inputEl, 'disabled', '');
+    else removeAttrIfPresent(this.#inputEl, 'disabled');
 
     // Reflect value for CSS (clear button visibility)
-    this.setAttribute('value', this.value || '');
+    setAttrIfChanged(this, 'value', this.value || '');
   }
 
   #onInput = () => {

package/components/select/select.a2ui.json

@@ -66,6 +66,11 @@
       "type": "string",
       "default": ""
     },
+    "label-hidden": {
+      "description": "When true, [label] still sets the accessible name (aria-label) but the visible `::before` text is suppressed via the canonical sr-only technique (gh#1748, mirrors check-ui's [label-hidden], gh#1010). Use when a sibling/ancestor composition already conveys the same name visually (e.g. a scope/view-switcher select in a table-toolbar-ui [slot=\"scope\"], where the toolbar's own title already names the view) and a second visible \"Scope\"-style label would paint it twice.",
+      "type": "boolean",
+      "default": false
+    },
     "mark": {
       "description": "Renders the Adia brand mark (`<adia-mark-ui>`) as the leading visual — takes precedence over avatar and icon. Token-driven (light/dark handled internally), so it fits a scheme-switching workspace/app switcher where a static logo URL can't invert. Per-option `mark` on an `<option>`/options-array entry works the same way, scoped to that row.",
       "type": "boolean",
@@ -301,7 +306,11 @@
       ]
     },
     "tag": "select-ui",
-    "tokens": {},
+    "tokens": {
+      "--select-min-width": {
+        "description": "Intrinsic min-width floor on the host (default `20ch`, matching input-ui's own `--input-min-width` UA-baseline derivation) so a select in a shrinking flex/grid cell doesn't crush to unusable width. Set to `0` to opt back into full collapse (gh#1633)."
+      }
+    },
     "traits": [],
     "version": 1
   }