@adia-ai/web-components 0.8.18 → 0.8.19

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.19] — 2026-07-27
+
+### Added
+- **`select-ui[summary-label]` — multi-select trigger as one text line, not chips** (gh#442, ruled from the adiav2 admin dashboard filter bar). With the attribute set, a single selection shows its own label and N > 1 shows "Label (N)" ("Organizations (2)"); none shows the placeholder. The popover's checkbox rows, Backspace-removes-last, the comma-separated form value, `[select-all]`, and `[clearable]` semantics are unchanged, and chip mode stays the default when the attribute is absent (`[data-multi-chips]` is simply not set in summary mode, so the trigger keeps the plain single-line layout). Motivation: in a narrow filter-bar trigger, three selected organizations wrapped into a vertically ballooning chip stack; `max-chips` still renders chips and could not express the ruling. Entry re-homed from the root CHANGELOG (package-local change; PR #445 filed it there mid-flight while #452's re-home was landing).
+
+### Fixed
+- **Row hover no longer goes near-black — `--a-bg-hover`/`--a-bg-active` (and the `--a-canvas-*` twins) move off the fill ladder onto the container alpha ladder** (`styles/colors/semantics/core.css`; operator directive 2026-07-27). The roles pointed at `neutral-hover`/`neutral-active` — the FILLED-BUTTON stops, opaque 650/700 — so all ten row/option/cell consumers (list, tree, select, command, calendar-grid, calendar-picker, date-range-picker, tag, agent-artifact) tinted toward black on hover, while the adjacent `--a-bg-selected` note already prescribed "hover = container-low". Now: hover = `container-low` (10%), active = `container` (20%, the selected/tonal tier). The fill ladder itself is untouched — filled buttons keep 600/650/700.
+- **The unit suite can no longer touch real network** (`test-setup.js`) — happy-dom's `fetch` does real I/O against its default `http://localhost:3000` base URL, so test outcomes depended on which dev servers happened to be running (the v0.8.17 cut lost a gate run to an ECONNREFUSED flake in `onboarding-checklist.test.js`). A fast-rejecting guard now replaces `globalThis.fetch`; tests exercising fetch paths keep installing their own per-file mocks, which override it.
+
+### Maintenance
+- **`components/` touched in this release window** (6 file(s), e.g. `select/select.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (6 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.18] — 2026-07-27
 
 ### Maintenance

package/components/select/select.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Select.json",
   "title": "Select",
-  "description": "Single- and multi-select dropdown primitive — the canonical AdiaUI\nselect control. Form-bearing via UIFormElement: [name], [value],\n[required], [disabled], fires `change`. Options via native\n<option> / <optgroup> children, programmatic `.options` array, or\nJSON [data-options] (hydrated by <editor-shell>'s wireSelects).\nUse for single-select with > 4 options; for ≤ 4 options use\n<segmented-ui> or <radio-ui>. Multi-select via [multiple]: trigger\nrenders <tag-ui> chips per selection, popover shows checkbox-style\noption list, Backspace removes the last chip, [select-all] adds\nbulk controls, [max-chips] caps the visible chip count with a\n\"+N more\" pill. Form value stays a comma-separated string under\n[name] for native <form> compatibility (parse with .split(',')).\n",
+  "description": "Single- and multi-select dropdown primitive — the canonical AdiaUI\nselect control. Form-bearing via UIFormElement: [name], [value],\n[required], [disabled], fires `change`. Options via native\n<option> / <optgroup> children, programmatic `.options` array, or\nJSON [data-options] (hydrated by <editor-shell>'s wireSelects).\nUse for single-select with > 4 options; for ≤ 4 options use\n<segmented-ui> or <radio-ui>. Multi-select via [multiple]: trigger\nrenders <tag-ui> chips per selection, popover shows checkbox-style\noption list, Backspace removes the last chip, [select-all] adds\nbulk controls, [max-chips] caps the visible chip count with a\n\"+N more\" pill, and [summary-label] swaps the chip trigger for one\ntext line — the single selection's label, or \"Label (N)\" for more.\nForm value stays a comma-separated string under\n[name] for native <form> compatibility (parse with .split(',')).\n",
   "type": "object",
   "allOf": [
     {
@@ -150,6 +150,11 @@
       ],
       "default": "md"
     },
+    "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
+    },
     "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).",
       "type": "string",

package/components/select/select.class.js

@@ -60,6 +60,10 @@ export class UISelect extends UIFormElement {
     // These are no-ops without [multiple] but reflect so [maxChips]
     // selectors etc. work in CSS even when authored declaratively.
     maxChips:    { type: Number,  default: 0, reflect: true, attribute: 'max-chips' },
+    // gh#442: summary trigger for [multiple] — when set, the trigger shows
+    // one text line (a single selection's own label, or "Label (N)" for
+    // N > 1) instead of tag-ui chips. Absent = chip mode, unchanged.
+    summaryLabel: { type: String, default: '', reflect: true, attribute: 'summary-label' },
     min:         { type: Number,  default: 0, reflect: true },
     max:         { type: Number,  default: 0, reflect: true },
     selectAll:   { type: Boolean, default: false, reflect: true, attribute: 'select-all' },
@@ -404,7 +408,9 @@ export class UISelect extends UIFormElement {
     // 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.
-    if (this.multiple) this.setAttribute('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
@@ -859,17 +865,18 @@ export class UISelect extends UIFormElement {
   #stampChips() {
     const slot = this.querySelector('[slot="trigger"] [data-chips]');
     if (!slot) return;
+    // gh#442 — summary mode renders no chips; clear any stamped ones so a
+    // dynamic switch out of chip mode leaves no stale tag-ui behind.
+    if (this.summaryLabel) {
+      while (slot.firstChild) slot.removeChild(slot.firstChild);
+      return;
+    }
     const values = this.#values();
     const cap = Number(this.maxChips) || 0;
     const cappedValues = cap > 0 && values.length > cap ? values.slice(0, cap) : values;
     const overflow = cap > 0 && values.length > cap ? values.length - cap : 0;
     // Label lookup from internal options model (handles grouped form too).
-    const flat = this.#options.flatMap((o) => o.options || [o])
-      .filter((o) => !o.separator && !o.header && o.value != null);
-    const labelOf = (v) => {
-      const found = flat.find((o) => String(o.value) === String(v));
-      return found ? found.label : String(v);
-    };
+    const labelOf = (v) => this.#labelOf(v);
     // Rebuild — chips are cheap and reconciliation gets us correct order
     // + correct labels with no per-chip tracking state.
     while (slot.firstChild) slot.removeChild(slot.firstChild);
@@ -893,8 +900,28 @@ export class UISelect extends UIFormElement {
     }
   }
 
+  /**
+   * Label for one value from the internal options model (grouped form
+   * included); falls back to the raw value string. Shared by the chip
+   * stamper and the gh#442 summary trigger.
+   */
+  #labelOf(v) {
+    const flat = this.#options.flatMap((o) => o.options || [o])
+      .filter((o) => !o.separator && !o.header && o.value != null);
+    const found = flat.find((o) => String(o.value) === String(v));
+    return found ? found.label : String(v);
+  }
+
   #displayText() {
     if (this.multiple) {
+      // gh#442 — [summary-label]: one selection shows its own label, more
+      // show "Label (N)", none shows the placeholder.
+      if (this.summaryLabel) {
+        const values = this.#values();
+        if (values.length === 0) return this.placeholder;
+        if (values.length === 1) return this.#labelOf(values[0]);
+        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]).
       return this.value ? '' : this.placeholder;

package/components/select/select.d.ts

@@ -58,6 +58,8 @@ export class UISelect extends UIFormElement {
   divider: boolean;
   /** SPEC-040 — cap visible chips in multi-select trigger. 0 = unlimited. */
   maxChips: number;
+  /** gh#442 — multi-select summary trigger: one selection shows its label, N > 1 shows "Label (N)"; empty string = chip mode. */
+  summaryLabel: string;
   /** SPEC-040 — minimum required selections in multi-select mode. */
   min: number;
   /** SPEC-040 — maximum allowed selections in multi-select mode. 0 = unlimited. */

package/components/select/select.test.js

@@ -139,6 +139,34 @@ describe('select-ui', () => {
     expect(chipValues).toContain('c');
   });
 
+  it('multi-select: [summary-label] renders a text summary instead of chips (gh#442)', async () => {
+    const s = mount(`
+      <select-ui multiple summary-label="Organizations" value="a,c">
+        <option value="a">Riverside Health System</option>
+        <option value="b">Bay Area Health Group</option>
+        <option value="c">Greenfield Medical Group</option>
+      </select-ui>
+    `);
+    await tick();
+    expect(s.hasAttribute('data-multi-chips')).toBe(false);
+    expect(s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui').length).toBe(0);
+    expect(s.querySelector('[slot="display"]').textContent).toBe('Organizations (2)');
+  });
+
+  it('multi-select summary: one selection shows its own label; none shows the placeholder (gh#442)', async () => {
+    const s = mount(`
+      <select-ui multiple summary-label="Organizations" placeholder="All organizations" value="a">
+        <option value="a">Riverside Health System</option>
+        <option value="b">Bay Area Health Group</option>
+      </select-ui>
+    `);
+    await tick();
+    expect(s.querySelector('[slot="display"]').textContent).toBe('Riverside Health System');
+    s.value = '';
+    await tick();
+    expect(s.querySelector('[slot="display"]').textContent).toBe('All organizations');
+  });
+
   it('multi-select: aria-multiselectable=true is set on the listbox', async () => {
     const s = mount(`
       <select-ui multiple open>

package/components/select/select.yaml

@@ -18,7 +18,9 @@ description: |
   renders <tag-ui> chips per selection, popover shows checkbox-style
   option list, Backspace removes the last chip, [select-all] adds
   bulk controls, [max-chips] caps the visible chip count with a
-  "+N more" pill. Form value stays a comma-separated string under
+  "+N more" pill, and [summary-label] swaps the chip trigger for one
+  text line — the single selection's label, or "Label (N)" for more.
+  Form value stays a comma-separated string under
   [name] for native <form> compatibility (parse with .split(',')).
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
@@ -120,6 +122,19 @@ props:
     type: number
     default: 0
     reflect: true
+  summary-label:
+    description: |
+      Multi-select only (gh#442). Replaces the chip trigger with one
+      text line: a single selection shows its own label; N > 1 shows
+      "<summary-label> (N)" — e.g. "Organizations (2)"; none shows the
+      placeholder. Popover checkbox rows, Backspace-removes-last, the
+      comma-separated form value, [select-all], and [clearable] are
+      unchanged. Absent (default) = tag-ui chip trigger. Prefer this
+      form for narrow triggers (filter bars) where wrapping chips
+      would balloon the control.
+    type: string
+    default: null
+    reflect: true
   min:
     description: |
       Multi-select only. Minimum required selections. Below this floor