@adia-ai/web-components 0.8.40 → 0.8.41

package/components/segmented/segmented.class.js

@@ -18,8 +18,19 @@
  *   <segment-ui value="tab3" text="Tab 3"></segment-ui>
  * </segmented-ui>
  *
- * Mutually exclusive toggle group with animated indicator pill.
- * Indicator uses CSS transform (GPU-accelerated).
+ * Mutually exclusive (single-select) toggle group with animated indicator
+ * pill. Indicator uses CSS transform (GPU-accelerated).
+ *
+ * <segmented-ui multiple value="bold,italic">
+ *   <segment-ui value="bold" text="B"></segment-ui>
+ *   <segment-ui value="italic" text="I"></segment-ui>
+ * </segmented-ui>
+ *
+ * [multiple] (gh#1369, #1363 C1): multi-select mode — `value` is a
+ * comma-separated set, no sliding indicator (each selected segment carries
+ * its own background instead), Space/Enter toggles instead of arrow-move.
+ * Absorbs <toggle-group-ui>/<toggle-option-ui>'s role, which are deprecated
+ * in favor of this axis.
  */
 
 import { UIFormElement } from '../../core/form.js';
@@ -28,6 +39,13 @@ import '../segment/segment.js';
 export class UISegmented extends UIFormElement {
   static properties = {
     ...UIFormElement.properties,
+    // gh#1369 (#1363 C1): multi-select axis, positive polarity matching
+    // <select-ui multiple> — not toggle-group's inverted `single`. Under
+    // [multiple], `value` becomes a comma-separated set (same encoding
+    // toggle-group-ui and select-ui[multiple] already use); the sliding
+    // indicator is suppressed and each selected segment carries its own
+    // background instead (segment.css).
+    multiple: { type: Boolean, default: false, reflect: true },
     value: { type: String, default: '', reflect: true },
     // gh#693: absent (default false) preserves the original self-select
     // behavior below. A path-bound consumer whose bound value can be a
@@ -55,7 +73,7 @@ export class UISegmented extends UIFormElement {
 
   connected() {
     super.connected();
-    this.setAttribute('role', 'radiogroup');
+    this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
 
     if (!this.#bound) {
       this.#bound = true;
@@ -65,8 +83,10 @@ export class UISegmented extends UIFormElement {
 
     // Default to first segment if no value — unless allow-empty opts out
     // (a falsy path-bound value must render as truly empty, not silently
-    // pick one, gh#693).
-    if (!this.value && !this.allowEmpty) {
+    // pick one, gh#693). Multi-select never self-selects: an empty
+    // [multiple] value legitimately means "nothing chosen yet", the same
+    // default toggle-group-ui always had.
+    if (!this.multiple && !this.value && !this.allowEmpty) {
       const first = this.querySelector('segment-ui:not([disabled])');
       if (first) this.value = first.value || first.getAttribute('value') || '';
     }
@@ -112,7 +132,19 @@ export class UISegmented extends UIFormElement {
     return this.#segments.filter(s => !s.disabled);
   }
 
+  // [multiple] value encoding — comma-separated, matching toggle-group-ui
+  // and select-ui[multiple] (gh#1369).
+  get #valueSet() {
+    return new Set(this.value ? this.value.split(',').map(v => v.trim()).filter(Boolean) : []);
+  }
+
   render() {
+    // gh#1369 review: connected() only sets the host role ONCE — if
+    // `multiple` flips after connect, that one-shot value goes stale while
+    // children's roles (below) already update reactively every render.
+    // Keep the host role synchronized here too, every render.
+    this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
+
     // FEEDBACK-23: flag a non-<segment-ui> direct child once per element.
     // Runs before the empty-guard so an all-bare-<segment> group still warns.
     if (!UISegmented.#warnedNonSegment.has(this)) {
@@ -137,11 +169,14 @@ export class UISegmented extends UIFormElement {
     const segs = this.#segments;
     if (!segs.length) return;
 
-    // Sync selection state
+    // Sync selection state — [multiple] checks Set membership (comma-
+    // separated value), single-select checks direct string equality.
+    const selectedSet = this.multiple ? this.#valueSet : null;
     let anyActive = false;
     for (const seg of segs) {
       const segVal = seg.value || seg.getAttribute('value') || '';
-      const isActive = segVal === this.value;
+      const isActive = this.multiple ? selectedSet.has(segVal) : segVal === this.value;
+      seg.setAttribute('role', this.multiple ? 'checkbox' : 'radio');
       if (isActive) {
         seg.setAttribute('selected', '');
         anyActive = true;
@@ -152,6 +187,8 @@ export class UISegmented extends UIFormElement {
     }
     // allow-empty's "nothing selected" state must still be keyboard
     // reachable — mirrors list-ui's roving-tabindex fallback (list.class.js).
+    // [multiple] can legitimately have nothing selected at all times, same
+    // fallback applies.
     if (!anyActive) {
       const firstEnabled = segs.find((s) => !s.disabled);
       firstEnabled?.setAttribute('tabindex', '0');
@@ -159,10 +196,33 @@ export class UISegmented extends UIFormElement {
 
     if (this.label) this.setAttribute('aria-label', this.label);
 
+    // Sliding indicator is a single-select-only affordance — exactly one
+    // pill can slide to exactly one position. [multiple] relies on each
+    // segment's own [selected] background instead (segment.css).
+    // #updateIndicator itself guards on `this.multiple` (gh#1369 review) —
+    // call it unconditionally so this is the one call site, same as every
+    // other caller (ResizeObserver, document.fonts.ready).
     this.#updateIndicator(segs);
   }
 
   #updateIndicator(segs) {
+    // gh#1369 review: render() only skips this call in [multiple] mode —
+    // the ResizeObserver (connected()) and document.fonts.ready callbacks
+    // call #updateIndicator directly and asynchronously, bypassing that
+    // guard entirely. Without a guard HERE, a multiple-mode instance with
+    // exactly one segment selected (this.value has no comma, so it can
+    // exactly match a segment's own value) can grow a spurious sliding
+    // indicator after a late resize or font-load event. Guard the method
+    // itself so every call site — sync or async — is covered.
+    if (this.multiple) {
+      for (const stale of this.querySelectorAll(':scope > [data-indicator]')) {
+        stale.remove();
+      }
+      this.#indicator = null;
+      this.removeAttribute('data-indicator-ready');
+      return;
+    }
+
     const selectedIdx = segs.findIndex(s => (s.value || s.getAttribute('value') || '') === this.value);
 
     if (selectedIdx < 0) {
@@ -205,7 +265,18 @@ export class UISegmented extends UIFormElement {
 
   #select(seg) {
     if (seg.disabled) return;
-    this.value = seg.value;
+    const segVal = seg.value || seg.getAttribute('value') || '';
+
+    if (this.multiple) {
+      if (!segVal) return;
+      const selected = this.#valueSet;
+      if (selected.has(segVal)) selected.delete(segVal);
+      else selected.add(segVal);
+      this.value = [...selected].join(',');
+    } else {
+      this.value = segVal;
+    }
+
     this.syncValue();
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   }
@@ -215,26 +286,46 @@ export class UISegmented extends UIFormElement {
     if (seg && this.contains(seg)) this.#select(seg);
   };
 
+  // Shared roving-focus navigation — Home/End/Arrow keys move focus among
+  // enabled segments. Selection semantics diverge below: single-select is
+  // a radiogroup (arrow-move selects, native radio behavior); [multiple]
+  // is a checkbox toolbar (arrow-move only focuses, Space/Enter toggles).
+  #nextFocusTarget(current, key) {
+    const segs = this.#enabledSegments;
+    const idx = segs.indexOf(current);
+    if (idx < 0) return null; // current isn't an enabled segment — nothing to do
+    switch (key) {
+      case 'ArrowRight': case 'ArrowDown':
+        return segs[idx < segs.length - 1 ? idx + 1 : 0];
+      case 'ArrowLeft': case 'ArrowUp':
+        return segs[idx > 0 ? idx - 1 : segs.length - 1];
+      case 'Home': return segs[0];
+      case 'End': return segs[segs.length - 1];
+      default: return null; // key not handled
+    }
+  }
+
   #handleKeydown = (e) => {
     const target = e.target;
     if (target.tagName !== 'SEGMENT-UI') return;
-    const segs = this.#enabledSegments;
-    const idx = segs.indexOf(target);
-    if (idx < 0) return;
 
-    let next;
-    switch (e.key) {
-      case 'ArrowRight': case 'ArrowDown':
-        next = idx < segs.length - 1 ? idx + 1 : 0; break;
-      case 'ArrowLeft': case 'ArrowUp':
-        next = idx > 0 ? idx - 1 : segs.length - 1; break;
-      case 'Home': next = 0; break;
-      case 'End': next = segs.length - 1; break;
-      default: return;
+    if (this.multiple) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        this.#select(target);
+        return;
+      }
+      const next = this.#nextFocusTarget(target, e.key);
+      if (!next) return;
+      e.preventDefault();
+      next.focus();
+      return;
     }
 
+    const next = this.#nextFocusTarget(target, e.key);
+    if (!next) return;
     e.preventDefault();
-    segs[next].focus();
-    this.#select(segs[next]);
+    next.focus();
+    this.#select(next);
   };
 }

package/components/segmented/segmented.css

@@ -68,6 +68,9 @@
     display: none;
   }
 
+  /* [multiple] never sets data-indicator-ready (segmented.class.js render())
+     — the indicator span is never created/prepended in multi-select mode,
+     so it stays display:none via the rule above. */
   :scope[data-indicator-ready] > [data-indicator] {
     display: block;
     position: absolute;

package/components/segmented/segmented.d.ts

@@ -12,8 +12,10 @@ export interface SegmentedChangeEventDetail<V extends string = string> {
 export type SegmentedChangeEvent<V extends string = string> = CustomEvent<SegmentedChangeEventDetail<V>>;
 
 export class UISegmented extends UIFormElement {
-  /** Selected segment's value. */
+  /** Selected segment's value. Under `multiple`, a comma-separated set. */
   value: string;
+  /** Enables multi-select — comma-separated `value`, no sliding indicator, Space/Enter toggles (gh#1369). */
+  multiple: boolean;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/segmented/segmented.yaml

@@ -5,14 +5,19 @@ status: stable
 component: Segmented
 category: navigation
 version: 1
-description: Single-select toggle group with an animated sliding indicator. Children must be segment-ui elements.
+description: Toggle group with an animated sliding indicator (single-select) or independently-toggleable segments (multi-select via [multiple]). Children must be segment-ui elements.
 props:
   value:
-    description: Value of the currently selected segment.
+    description: Value of the currently selected segment. Under [multiple], a comma-separated set of selected values (same encoding as select-ui[multiple]).
     type: string
     default: ''
+  multiple:
+    description: "Enables multi-select — value becomes a comma-separated set, the sliding indicator is suppressed (each selected segment carries its own background instead), and Space/Enter toggles a focused segment instead of arrow-move selecting it. Positive polarity, matching select-ui[multiple]. Absorbs the role of the deprecated <toggle-group-ui> + <toggle-option-ui> pair (gh#1369, #1363 C1). Unlike <toggle-group-ui single>, re-clicking an already-selected segment does NOT clear the selection — segmented-ui's single-select is standard radiogroup semantics (always exactly one selected once a value is set)."
+    type: boolean
+    default: false
+    reflect: true
   allowEmpty:
-    description: Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state.
+    description: Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state. No effect under [multiple] — multi-select never self-selects (empty value already means "nothing chosen").
     type: boolean
     default: false
     attribute: allow-empty
@@ -22,20 +27,27 @@ events:
 slots:
   default:
     description: Child segment-ui elements that form the toggle group. Children MUST be segment-ui — bare segment tags render text but are silently ignored for the sliding indicator and role/aria-checked state.
+parts:
   indicator:
-    description: Auto-created sliding indicator element prepended on first render.
+    description: >-
+      Auto-created sliding indicator element prepended on first render —
+      template-owned anatomy part, not a light-DOM insertion point
+      (gh#1454). Lazily created once via an internal-field guard, never
+      adopted from a consumer-authored element.
 states:
 - name: idle
   description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
+  allowedChildren:
+    - Segment
   rules:
-    - rule: 'Single-select segmented control. Hosts <segment-ui> children; exactly one selected at a time.'
+    - rule: 'Single-select by default. Hosts <segment-ui> children; exactly one selected at a time.'
       reason: 'Single-select cluster contract.'
-    - rule: 'For multi-select use <toggle-group-ui> + <toggle-option-ui> instead.'
-      reason: 'Selection model boundary.'
-    - rule: 'Use for view-mode switches (grid/list, light/dark) or short filter sets (3-5 options); for longer sets use <tabs-ui> or <select-ui>.'
+    - rule: 'For multi-select (filter chips, multi-flag toggles, day-of-week pickers), set [multiple] instead of using a separate component — value becomes a comma-separated set of selected segment values. <toggle-group-ui>/<toggle-option-ui> are deprecated; use <segmented-ui multiple> + <segment-ui> instead (gh#1369, #1363 C1).'
+      reason: 'Selection model axis — multiple absorbs the deprecated multi-select pair.'
+    - rule: 'Use for view-mode switches (grid/list, light/dark) or short filter sets (3-5 options); for longer sets use <tabs-ui> or <select-ui multiple>.'
       reason: 'Capacity guidance.'
 anti_patterns: []
 examples:
@@ -86,6 +98,54 @@ examples:
         "text": "Monthly"
       }
     ]
+- name: multi-select-filter-chips
+  description: Multi-select segmented control (gh#1369) for filter chips — [multiple] set, value is a comma-separated set of active segments.
+  a2ui: >-
+    [
+      {
+        "id": "root",
+        "component": "Card",
+        "children": [
+          "sec"
+        ]
+      },
+      {
+        "id": "sec",
+        "component": "Section",
+        "children": [
+          "comp"
+        ]
+      },
+      {
+        "id": "comp",
+        "component": "Segmented",
+        "multiple": true,
+        "value": "bold,italic",
+        "children": [
+          "s1",
+          "s2",
+          "s3"
+        ]
+      },
+      {
+        "id": "s1",
+        "component": "Segment",
+        "value": "bold",
+        "text": "Bold"
+      },
+      {
+        "id": "s2",
+        "component": "Segment",
+        "value": "italic",
+        "text": "Italic"
+      },
+      {
+        "id": "s3",
+        "component": "Segment",
+        "value": "underline",
+        "text": "Underline"
+      }
+    ]
 keywords:
 - segmented
 - options
@@ -95,6 +155,9 @@ keywords:
 - tab
 - tabs
 - button-group
+- filter
+- multi-select
+- filter-chips
 synonyms:
   button-group:
   - toolbar
@@ -125,11 +188,20 @@ synonyms:
   - segmented
   - radio
   - settings
+  filter:
+  - segmented
+  - toggle-group
+  - filter-chips
+  multi-select:
+  - segmented
+  - toggle-group
+  - select
   tags:
   - SegmentedControl
   - Segmented
 related:
   - Segment
   - ToggleGroup
+  - ToggleOption
   - Tabs
   - Radio

package/components/select/select.a2ui.json

@@ -83,7 +83,10 @@
     },
     "maxlength": {
       "description": "Maximum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "min": {
@@ -93,7 +96,10 @@
     },
     "minlength": {
       "description": "Minimum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "multiple": {
@@ -158,7 +164,7 @@
     "summary-label": {
       "description": "Multi-select only (gh#442). Replaces the chip trigger with one\ntext line: a single selection shows its own label; N > 1 shows\n\"<summary-label> (N)\" — e.g. \"Organizations (2)\"; none shows the\nplaceholder. Popover checkbox rows, Backspace-removes-last, the\ncomma-separated form value, [select-all], and [clearable] are\nunchanged. Absent (default) = tag-ui chip trigger. Prefer this\nform for narrow triggers (filter bars) where wrapping chips\nwould balloon the control.\n",
       "type": "string",
-      "default": null
+      "default": ""
     },
     "value": {
       "description": "Currently selected option value. With declarative <option> children, a child carrying the native `selected` attribute sets the initial value when this attribute is absent (native <select> parity).",
@@ -226,6 +232,14 @@
       "picker"
     ],
     "name": "UISelect",
+    "parts": {
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the trigger at body-subtle typography. Mutually exclusive with [hint] per this description, but template-owned in practice (gh#1454): the trigger stamp is an unconditional `this.innerHTML = …` with no capture-before-wipe for `hint` (unlike `leading`/`trailing` on input-ui), so any pre-existing [slot=\"hint\"] content is discarded, not adopted, on first render."
+      },
+      "listbox": {
+        "description": "Popover container for options (role=listbox) — template-owned anatomy part, not a light-DOM insertion point (gh#1454). Its contents are always wiped (`innerHTML = ''`) and rebuilt wholesale from `.options`/ parsed `<option>` children on every options render."
+      }
+    },
     "related": [
       "image",
       "button",
@@ -234,17 +248,8 @@
       "upload"
     ],
     "slots": {
-      "hint": {
-        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the trigger at body-subtle typography. Mutually exclusive with [hint]."
-      },
-      "label": {
-        "description": "Label element above the trigger"
-      },
-      "listbox": {
-        "description": "Popover container for options (role=listbox)"
-      },
       "trigger": {
-        "description": "Button that opens the listbox"
+        "description": "Button that opens the listbox. Stamped only if no consumer-authored [slot=\"trigger\"] is already present at first render (adopt-or-stamp) — a genuine light-DOM insertion point."
       }
     },
     "states": [

package/components/select/select.class.js

@@ -399,8 +399,7 @@ export class UISelect extends UIFormElement {
         this.#parseOptions();
         if (this.#options.length) {
           this.#renderOptions();
-          const display = this.querySelector('[slot="display"]');
-          if (display) display.textContent = this.#displayText();
+          this.#syncDisplayText();
         }
       });
     }
@@ -410,12 +409,13 @@ export class UISelect extends UIFormElement {
   render() {
     // SPEC-040 — in multi-select mode the trigger needs to host chips +
     // optional clear-x + optional "+N more" pill alongside the usual
-    // leading / display / caret. We toggle host attribute [data-multi-chips]
-    // so CSS can switch layout from single-line text to flex-wrap chip row.
+    // leading / display / caret. CSS switches layout from single-line
+    // text to flex-wrap chip row off the compound selector
+    // [multiple]:not([summary-label]) — both already-declared, reflected
+    // props, so no private data-* mirror is needed here (gh#1332
+    // Category A; dropped [data-multi-chips]).
     // gh#442 — [summary-label] keeps the single-line text layout: the
     // summary renders through [slot="display"], no chip row.
-    if (this.multiple && !this.summaryLabel) this.setAttribute('data-multi-chips', '');
-    else this.removeAttribute('data-multi-chips');
 
     // A11y (FB-88): name a placeholder-only select from its placeholder, like
     // input-ui, so it isn't unnamed for assistive tech (WCAG 4.1.2).
@@ -495,34 +495,7 @@ export class UISelect extends UIFormElement {
       // Re-attach listbox after trigger is stamped
       if (lb) this.appendChild(lb);
     } else {
-      const display = this.querySelector('[slot="display"]');
-      if (display && !this.multiple) {
-        // Single-select: keep the canonical text-rendering path.
-        if (display.hasAttribute('contenteditable')) {
-          // Only update text when not actively editing (no active query)
-          if (!this.#query) {
-            const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
-            display.textContent = text;
-            display.toggleAttribute('data-empty', !text);
-          }
-        } else {
-          display.textContent = this.#displayText();
-        }
-      } else if (display && this.multiple) {
-        // Multi-select: display element holds the placeholder ONLY when
-        // no chips are present (otherwise the chip row IS the display).
-        const hasChips = this.#values().length > 0;
-        if (display.hasAttribute('contenteditable')) {
-          // search input — keep placeholder; never inject the value text.
-          display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
-          if (!this.#query) {
-            display.textContent = '';
-            display.toggleAttribute('data-empty', true);
-          }
-        } else {
-          display.textContent = hasChips ? '' : (this.placeholder || '');
-        }
-      }
+      this.#syncDisplayText();
     }
 
     // Reflect the selected option's mark/avatar/icon in the trigger leading.
@@ -597,6 +570,57 @@ export class UISelect extends UIFormElement {
     }
   }
 
+  /**
+   * Reconcile the trigger's text with its [data-empty] flag — ALWAYS together.
+   *
+   * ADIA2-8927. For a searchable trigger the placeholder paints from
+   * `[slot="display"][contenteditable][data-empty]::before` (select.css), so
+   * text and flag are two halves of ONE state, not two independent writes:
+   * set the text and leave the flag and the label renders on top of the
+   * placeholder in the same box. `#displayText()` also falls back to
+   * `placeholder` when nothing is selected, and that string must never land in
+   * the editable surface as real content — the pseudo owns it, so writing it
+   * paints the placeholder twice, over itself.
+   *
+   * This lived inline in render()'s else-branch while `set options` and the
+   * FB-98 observer kept their own text-only writes, which is exactly how both
+   * drifted: a programmatically populated searchable select showed the overlap
+   * until the first click re-entered render() and repaired it. One caller-
+   * agnostic method is what keeps a third write site from repeating it.
+   */
+  #syncDisplayText() {
+    const display = this.querySelector('[slot="display"]');
+    if (!display) return;                                        // trigger not stamped yet
+
+    if (!this.multiple) {
+      // Single-select: keep the canonical text-rendering path.
+      if (display.hasAttribute('contenteditable')) {
+        // Only update text when not actively editing (no active query)
+        if (!this.#query) {
+          const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
+          display.textContent = text;
+          display.toggleAttribute('data-empty', !text);
+        }
+      } else {
+        display.textContent = this.#displayText();
+      }
+    } else {
+      // Multi-select: display element holds the placeholder ONLY when
+      // no chips are present (otherwise the chip row IS the display).
+      const hasChips = this.#values().length > 0;
+      if (display.hasAttribute('contenteditable')) {
+        // search input — keep placeholder; never inject the value text.
+        display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
+        if (!this.#query) {
+          display.textContent = '';
+          display.toggleAttribute('data-empty', true);
+        }
+      } else {
+        display.textContent = hasChips ? '' : (this.placeholder || '');
+      }
+    }
+  }
+
   /** Parse <option> and <optgroup> children into internal model. */
   // FB-98: collect declarative <option>/<optgroup> children — direct OR nested
   // inside the template engine's display:contents wrapper spans (which carry
@@ -689,8 +713,7 @@ export class UISelect extends UIFormElement {
         }
       }
       this.#renderOptions();
-      const display = this.querySelector('[slot="display"]');
-      if (display) display.textContent = this.#displayText();
+      this.#syncDisplayText();
       // Pre-existing gap surfaced while adding mark (gh#339): #renderOptions()
       // only rebuilds the LISTBOX rows — the trigger's leading visual
       // (icon/avatar/mark) was only ever reconciled from render()'s call to
@@ -975,7 +998,8 @@ export class UISelect extends UIFormElement {
         return `${this.summaryLabel} (${values.length})`;
       }
       // SPEC-040 — chips render the selection; display element holds the
-      // placeholder when empty and is otherwise empty (CSS sees [data-multi-chips]).
+      // placeholder when empty and is otherwise empty (CSS sees
+      // [multiple]:not([summary-label])).
       return this.value ? '' : this.placeholder;
     }
     const flat = this.#options.flatMap(o => o.options || [o]);

package/components/select/select.css

@@ -215,11 +215,13 @@
   }
 
   /* ── SPEC-040 — Multi-select chip trigger ──
-     [data-multi-chips] is set on the host by render() when [multiple] is
-     active. Layout switches from inline-text trigger to wrap-flex chip row.
-     Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
-     the +more pill is a CSS-only button styled to match. */
-  :scope[data-multi-chips] [slot="trigger"] {
+     [multiple]:not([summary-label]) — both already-declared, reflected
+     props; no private stamp needed (dropped the redundant [data-multi-chips]
+     mirror, gh#1332 Category A). Layout switches from inline-text trigger
+     to wrap-flex chip row. Tag-ui chips inside [data-chips] inherit the
+     host's tag-ui token set; the +more pill is a CSS-only button styled
+     to match. */
+  :scope[multiple]:not([summary-label]) [slot="trigger"] {
     flex-wrap: wrap;
     align-items: center;
     /* Pack chips left with a small gap — override the base trigger's
@@ -232,17 +234,17 @@
        it to grow as chips overflow. */
     padding-block: calc(var(--select-py, var(--a-space-1)));
   }
-  :scope[data-multi-chips] [data-chips] {
+  :scope[multiple]:not([summary-label]) [data-chips] {
     display: contents; /* let chips participate in the trigger's flex line */
   }
-  :scope[data-multi-chips] [data-chips] tag-ui {
+  :scope[multiple]:not([summary-label]) [data-chips] tag-ui {
     /* Chip styling tracks the active variant via tag-ui's own tokens. */
     --tag-size: var(--a-ui-tiny);
   }
   /* "+N more" overflow pill — a stamped <button-ui variant="ghost" size="sm">
      (gh issue 276: no native <button> in stamped DOM); pill shape + chip-row
      height via button token re-points, chrome stays button-ui's own. */
-  :scope[data-multi-chips] [data-chips] [data-more] {
+  :scope[multiple]:not([summary-label]) [data-chips] [data-more] {
     --button-radius: var(--a-radius-full);
     --button-height: calc(var(--a-size) - var(--a-space-3));
     --button-fg: var(--select-fg-muted);
@@ -252,7 +254,7 @@
 
   /* Clear-all `x` affordance — stamped <button-ui variant="ghost" size="sm"
      icon="x"> (gh issue 276). Visible only when [clearable] AND chips. */
-  :scope[data-multi-chips] [data-clear-all] {
+  :scope[multiple]:not([summary-label]) [data-clear-all] {
     --button-radius: var(--a-radius-full);
     --button-height: calc(var(--a-size) - var(--a-space-3));
     --button-fg: var(--select-fg-muted);
@@ -263,16 +265,16 @@
   }
   /* button-ui's own :scope display wins over the UA [hidden] rule —
      keep the explicit guard. */
-  :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
+  :scope[multiple]:not([summary-label]) [data-clear-all][hidden] { display: none; }
 
   /* In multi-select with chips present, the trigger display element is
      the rest-of-row slot — make it flex-grow but not push chips off. */
-  :scope[data-multi-chips] [slot="display"] {
+  :scope[multiple]:not([summary-label]) [slot="display"] {
     flex: 1;
     min-width: 4ch;
   }
   /* Hide the display when empty in multi-mode (chips fill the slot). */
-  :scope[data-multi-chips] [slot="display"]:empty {
+  :scope[multiple]:not([summary-label]) [slot="display"]:empty {
     flex: 0 0 0;
     padding: 0;
   }
@@ -432,7 +434,7 @@ select-ui [slot="hint"] {
   margin-top: var(--select-hint-mt, var(--a-space-1));
   font-size: var(--select-hint-size, var(--a-ui-xs));
   color: var(--select-hint-fg, var(--select-fg-muted));
-  line-height: var(--select-hint-lh, 1.4);
+  line-height: var(--select-hint-lh, var(--a-font-leading-normal));
 }
 
 /* ── SPEC-040 — Multi-select popover affordances ──