@adia-ai/web-components 0.8.18 → 0.8.20

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.20] — 2026-07-28
+
+### Fixed
+- **The npm tarball no longer ships `*.test.js`** (gh#462) — the `files` roster excluded examples/html but never unit tests, so 108 test file(s) rode the 0.8.19 tarball. `!**/*.test.js` appended as the roster's LAST entry (npm's files globbing is order-sensitive — a leading exclude is overridden by later directory includes). Proof: `npm pack --dry-run` → 0 test files, runtime files intact.
+
+### Changed
+- **`nav-group-ui`: the selected-look header color also keys on `[selected]`** — the CSS half of the gh#459 ruling (PR #460 corrected the icon weight, but the `--nav-group-fg-selected` header treatment still keyed on `[open]`, so an expanded-but-inactive group read as the active section while a collapsed-but-active one read plain — the exact screenshot that reopened this). The `[open]` indent rail stays structural.
+- **`nav-group-ui`: the filled header glyph tracks `[selected]`, not `[open]`** (gh#459, operator ruling) — the fill marks the group containing the selected route; a merely-expanded group stays regular, and a collapsed-but-active one fills. `selected` becomes a declared reflected prop (yaml + types); `[open]` keeps driving `aria-expanded` only. Consumers that already set `[selected]` from active-route logic (the adiav2 admin shell does) get the corrected behavior with no changes.
+
+### Maintenance
+- **`components/` touched in this release window** (6 file(s), e.g. `nav-group/nav-group.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
+## [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/nav-group/nav-group.a2ui.json

@@ -36,6 +36,11 @@
       "type": "boolean",
       "default": false
     },
+    "selected": {
+      "description": "Marks the group containing the selected route (consumers set it from active-route logic). Drives the filled header glyph — selection, never mere expansion (gh#459).",
+      "type": "boolean",
+      "default": false
+    },
     "text": {
       "description": "Visible group label.",
       "type": "string",

package/components/nav-group/nav-group.class.js

@@ -35,6 +35,10 @@ export class UINavGroup extends UIElement {
     icon:        { type: String,  default: '',    reflect: true },
     badge:       { type: String,  default: '',    reflect: true },
     open:        { type: Boolean, default: false, reflect: true },
+    // gh#459: marks the group that CONTAINS the selected route — drives the
+    // filled header glyph (selection, never mere expansion) and the CSS
+    // selected treatment. Consumers set it from their active-route logic.
+    selected:    { type: Boolean, default: false, reflect: true },
     collapsible: { type: Boolean, default: true,  reflect: true },
     variant:     { type: String,  default: '',    reflect: true },
   };
@@ -87,13 +91,17 @@ export class UINavGroup extends UIElement {
 
     this.setAttribute('aria-expanded', String(this.open));
 
-    // Mirrors nav-item-ui's selected → fill convention: an open group
-    // reads as the active section via the same filled-glyph treatment
-    // [open] already drives (nav-group.css's [open] > [slot=header] color
-    // rule) — a state-driven weight swap, not a CSS color change, since
-    // Phosphor ships filled/regular as distinct SVGs.
+    // Mirrors nav-item-ui's selected → fill convention: the filled glyph
+    // marks SELECTION, not expansion (gh#459, operator ruling 2026-07-27) —
+    // the group CONTAINING the selected route fills (consumers set [selected]
+    // on it), while a merely-expanded group stays regular. Keyed on the
+    // attribute so it works whether or not a consumer uses the property
+    // path; [open] keeps driving aria-expanded only. A state-driven weight
+    // swap, not a CSS color change, since Phosphor ships filled/regular as
+    // distinct SVGs.
     const iconEl = this.querySelector('[slot="header"] [slot="icon"] icon-ui');
-    if (iconEl) iconEl.setAttribute('weight', this.open ? 'fill' : 'regular');
+    if (iconEl)
+      iconEl.setAttribute('weight', this.hasAttribute('selected') ? 'fill' : 'regular');
   }
 
   showPopover() {

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

@@ -49,8 +49,11 @@
     background: var(--nav-group-indent-rail-bg);
     pointer-events: none;
   }
-  :scope[open] > [slot="header"],
- :scope[open] > [slot="header"] [slot="icon"] {
+  /* 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. */
+  :scope[selected] > [slot="header"],
+  :scope[selected] > [slot="header"] [slot="icon"] {
     color: var(--nav-group-fg-selected);
   }
 

package/components/nav-group/nav-group.d.ts

@@ -38,6 +38,8 @@ export class UINavGroup extends UIElement {
   icon: string;
   /** Inline-expanded state. Toggled by header click when [collapsible]. */
   open: boolean;
+  /** Marks the group containing the selected route (consumers set it from active-route logic). Drives the filled header glyph — selection, never mere expansion (gh#459). */
+  selected: boolean;
   /** Visible group label. */
   text: string;
   /** Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant="section", this group inherits it via CSS cascade unless an explicit variant is set on the group. */

package/components/nav-group/nav-group.yaml

@@ -37,6 +37,10 @@ props:
     type: boolean
     default: false
     description: "Inline-expanded state. Toggled by header click when [collapsible]."
+  selected:
+    type: boolean
+    default: false
+    description: "Marks the group containing the selected route (consumers set it from active-route logic). Drives the filled header glyph — selection, never mere expansion (gh#459)."
   collapsible:
     type: boolean
     default: true

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.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