@adia-ai/web-components 0.8.16 → 0.8.17

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.17] — 2026-07-27
+
+### Added
+- **`button-ui` gains `variant="tonal"`** (`components/button/`; gh#434) — the filled-tonal emphasis tier between `solid` and `outline`: a translucent `<family>-container` fill with scheme-flipped in-family text, deepening one container step on hover. Default rides the primary family (the classic soft brand button beside a solid CTA); composes with `[color]` exactly like `solid` (`variant="tonal" color="danger"` → the danger container fill). Deliberately **not** named `secondary`: `secondary` is a color family in this system, and an unset variant already IS the secondary-rank look (compose-constitution) — `tonal` names the tier without colliding with the hue.
+- **8 new `on-<family>-container` color roles** (`styles/colors/material-static.css`) — Material's own missing on-container text role: `light-dark(<family>-950, <family>-200)`. Neither naive pairing works alone (the `-950` leg fails dark at 1.4–2.8:1; the `-200` leg fails light at ~1.0:1); the scheme-split composition measures 5.6–15.2:1 everywhere. `verify:contrast` grows 90 → **138 pairs**: the 48 new on-container × composited-container pairs (containers are alpha-ladder stops, so unlike opaque fills they are composited over the page background before measuring) were rostered and green **before** the variant's CSS existed — the gate-first discipline gh#427 established.
+
+### Changed
+- **`select-ui` single-select options carry a radio indicator** (`components/select/`; operator ruling 2026-07-27) — the sibling of SPEC-040's multi-select checkbox: every single-select option row now renders a leading radio (bordered circle; primary ring + center dot when selected), and selection is carried by the indicator instead of a row tint. `--select-bg-selected` / `--select-fg-selected` remain consumer-overridable API but their DEFAULTS move to the plain row colors (`transparent` / `--select-fg`) — set `--select-bg-selected` to re-enable a tinted selected row. Hover/focus feedback restated on the selected row (the 2-attribute selected rule outweighed the plain `:hover` rule). Multi-select is unchanged — its checkbox treatment already carried the signal.
+
+- **Selected surfaces ride the plain `-container` stop — the same tier as `variant="tonal"`'s rest fill** (`styles/colors/semantics/core.css`; operator ruling 2026-07-27). `--a-bg-selected` and `--a-canvas-selected` move from `neutral-container-active` (40%) to `neutral-container` (20%), so "selected" and "tonal" speak one surface language and the interaction ladder reads hover `container-low` (10%) → selected / tonal rest `container` (20%) → tonal hover `container-hover` (30%). Reaches every selected-state consumer through the alias: `nav-item-ui`, table row selection, table-toolbar menus, and `--a-ui-bg-selected` (select/combobox options). Verified live: selected measures α0.2 against tonal's α0.2, hover α0.1.
+
+### Fixed
+- **Nav rails no longer render as section headings** (`styles/type/roles.css`) — the typographic role grammar's `[variant="section"]` selector matches *any* element, and the nav family (`nav-ui`, `nav-item-ui`, `nav-group-ui`) uses `variant="section"` **structurally** for the flat subnav-rail tier. The whole heading treatment — family, weight, size, tracking, case, color — landed on the rail and inherited into every item, so under any `[theme]` the subnav rendered in the theme's display face at heading weight (velour: Playfair Display w600). The role rule now excludes the three nav elements. The exclusion must live in the role rule: it sits in `@layer utilities` while component sheets load in the earlier `@layer components` (`styles/index.css` order), so a later-layer match beats anything a component declares about itself. `text-ui` is deliberately *not* excluded — its variant enum aligns with the role grammar on purpose. Scanned all 125 primitives + modules for other structural collisions with the 13 role names: the nav family is the only one.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (6 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.16] — 2026-07-26
 
 ### Fixed

package/components/button/button.a2ui.json

@@ -78,7 +78,7 @@
       "$ref": "common_types.json#/$defs/DynamicString"
     },
     "variant": {
-      "description": "Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside.\nFor **inline navigation** (Terms of Service, Privacy Policy, footer links, \"Sign in\" / \"Sign up\" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces \"link\" instead of \"button\". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction.",
+      "description": "Visual style — `solid` (default fill), `tonal` (soft container fill with in-family text — the emphasis tier between solid and outline; default rides the primary family), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color=\"…\"] alongside (`variant=\"tonal\" color=\"danger\"` = the danger family's container fill). There is deliberately no `variant=\"secondary\"`: `secondary` names a color family in this system, and an unset variant already IS the secondary-rank look (compose-constitution); `tonal` is the named tier for a softer-than-solid filled action.\nFor **inline navigation** (Terms of Service, Privacy Policy, footer links, \"Sign in\" / \"Sign up\" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces \"link\" instead of \"button\". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction.",
       "type": "string",
       "enum": [
         "default",

package/components/button/button.css

@@ -34,6 +34,15 @@ button-ui[color="info"]:not([disabled]):hover       { --button-bg: var(--a-info-
    -20 tint (--a-warning-bg) for clean contrast. (dogfood-audit: warning-strong-vs-bg) */
 button-ui[color="warning"]:not([disabled]):hover    { --button-bg: var(--a-warning-bg); }
 
+/* Tonal — the fill deepens one container step (container → container-hover).
+   Text stays on-<family>-container (gh#434; scheme-flipped in-family text);
+   every on-container × container-hover pair is AA-gated in verify:contrast. */
+button-ui[variant="tonal"]:not([disabled]):hover { --button-bg: var(--md-sys-color-primary-container-hover); }
+button-ui[variant="tonal"][color="danger"]:not([disabled]):hover  { --button-bg: var(--md-sys-color-danger-container-hover); }
+button-ui[variant="tonal"][color="success"]:not([disabled]):hover { --button-bg: var(--md-sys-color-success-container-hover); }
+button-ui[variant="tonal"][color="info"]:not([disabled]):hover    { --button-bg: var(--md-sys-color-info-container-hover); }
+button-ui[variant="tonal"][color="warning"]:not([disabled]):hover { --button-bg: var(--md-sys-color-warning-container-hover); }
+
 /* Outline / ghost — no fill on hover; fg goes rest-color → `-strong`.
    Ghost reads --button-fg-ghost-hover (default --a-fg-strong) so consumers
    like alert.css can retint the ghost-hover label, and --button-bg/border-
@@ -220,6 +229,20 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
     --button-border: var(--button-border-outline);
   }
 
+  /* Tonal (gh#434) — the filled-tonal tier between solid and outline:
+     a translucent container fill with dark in-family text. Default rides
+     the PRIMARY family (the classic soft brand button beside a solid CTA);
+     [color] swaps the family below. Named `tonal`, never `secondary`:
+     `secondary` is a color family in this system, and the compose-
+     constitution keeps "unset = the secondary rank". Text role is
+     on-<family>-container = light-dark(950, 200) — every pair over
+     container/-hover/-active is AA-gated in verify:contrast (48 pairs). */
+  :scope[variant="tonal"] {
+    --button-bg: var(--md-sys-color-primary-container);
+    --button-fg: var(--md-sys-color-primary-on-primary-container);
+    --button-border: transparent;
+  }
+
   :scope[variant="ghost"] {
     --button-bg: var(--button-bg-ghost);
     --button-fg: var(--button-fg-ghost);
@@ -279,6 +302,13 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
   :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--md-sys-color-success-on-surface); }
   :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--md-sys-color-warning-on-surface); }
 
+  /* Tonal × color — same 0,3,0 override pattern as outline/ghost above:
+     the intent family's container fill + its own on-container text. */
+  :scope[variant="tonal"][color="danger"]   { --button-bg: var(--md-sys-color-danger-container);  --button-fg: var(--md-sys-color-danger-on-danger-container); }
+  :scope[variant="tonal"][color="info"]      { --button-bg: var(--md-sys-color-info-container);     --button-fg: var(--md-sys-color-info-on-info-container); }
+  :scope[variant="tonal"][color="success"]   { --button-bg: var(--md-sys-color-success-container);  --button-fg: var(--md-sys-color-success-on-success-container); }
+  :scope[variant="tonal"][color="warning"]   { --button-bg: var(--md-sys-color-warning-container);  --button-fg: var(--md-sys-color-warning-on-warning-container); }
+
   /* Hover rules moved outside @scope — see Safari 17.x bug note at
      top of file. */
 

package/components/button/button.d.ts

@@ -31,7 +31,7 @@ export class UIButton extends UIElement {
   text: string;
   /** Button label. Renderer routes this to the `text` attribute, which is rendered via CSS attr(text) on ::after and mirrored to aria-label. */
   textContent: string;
-  /** Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside.
+  /** Visual style — `solid` (default fill), `tonal` (soft container fill with in-family text — the emphasis tier between solid and outline; default rides the primary family), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside (`variant="tonal" color="danger"` = the danger family's container fill). There is deliberately no `variant="secondary"`: `secondary` names a color family in this system, and an unset variant already IS the secondary-rank look (compose-constitution); `tonal` is the named tier for a softer-than-solid filled action.
 For **inline navigation** (Terms of Service, Privacy Policy, footer links, "Sign in" / "Sign up" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces "link" instead of "button". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction. */
   variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary';
 

package/components/button/button.yaml

@@ -59,10 +59,17 @@ props:
     dynamic: true
   variant:
     description: >-
-      Visual style — `solid` (default fill), `outline`, `ghost`.
+      Visual style — `solid` (default fill), `tonal` (soft container
+      fill with in-family text — the emphasis tier between solid and
+      outline; default rides the primary family), `outline`, `ghost`.
       `default` / `primary` are aliases of `solid`. Style is independent
       of semantic intent — to express destructive / success / info /
-      warning intent, set [color="…"] alongside.
+      warning intent, set [color="…"] alongside (`variant="tonal"
+      color="danger"` = the danger family's container fill). There is
+      deliberately no `variant="secondary"`: `secondary` names a color
+      family in this system, and an unset variant already IS the
+      secondary-rank look (compose-constitution); `tonal` is the named
+      tier for a softer-than-solid filled action.
 
       For **inline navigation** (Terms of Service, Privacy Policy,
       footer links, "Sign in" / "Sign up" cross-page affordances) use

package/components/combobox/combobox.a2ui.json

@@ -143,8 +143,8 @@
         "wrong": "{\"component\": \"Combobox\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n"
       },
       {
-        "fix": "{\"component\": \"MultiSelect\", \"options\": [...]}\n",
-        "why": "Combobox is single-select. Multi-select goes through MultiSelect.\n",
+        "fix": "{\"component\": \"Select\", \"multiple\": true, \"options\": [...]}\n",
+        "why": "Combobox is single-select. Multi-select goes through Select with\nmultiple:true — \"MultiSelect\" is not a registered component.\n",
         "wrong": "{\"component\": \"Combobox\", \"multiple\": true, \"options\": [...]}\n"
       }
     ],

package/components/combobox/combobox.yaml

@@ -277,8 +277,9 @@ a2ui:
       footer affordance + `create` event. Consumer wires the create
       event to a backend flow.
     - >-
-      Multi-select goes through <multi-select-ui> (SPEC-040), not
-      combobox. Combobox is single-select.
+      Multi-select goes through <select-ui multiple> (chips in the
+      trigger, checkbox-style option rows), not combobox. Combobox is
+      single-select; there is no <multi-select-ui> tag.
 anti_patterns:
   - wrong: |
       {"component": "Combobox", "value": "xx", "options": [{"value": "us", "label": "United States"}]}
@@ -296,9 +297,10 @@ anti_patterns:
   - wrong: |
       {"component": "Combobox", "multiple": true, "options": [...]}
     why: |
-      Combobox is single-select. Multi-select goes through MultiSelect.
+      Combobox is single-select. Multi-select goes through Select with
+      multiple:true — "MultiSelect" is not a registered component.
     fix: |
-      {"component": "MultiSelect", "options": [...]}
+      {"component": "Select", "multiple": true, "options": [...]}
 examples:
   - name: country-picker
     description: Country picker — canonical declarative <option> children inside a <field-ui>.

package/components/nav-item/nav-item.css

@@ -46,11 +46,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-icon-fg:         var(--a-ui-text-muted);
     --nav-item-icon-fg-selected: var(--nav-item-accent);
     /* Two real container roles, one mechanism — no opacity synth.
-       hover    = --a-bg-muted    (--md-sys-color-neutral-container-low),
+       hover    = --a-bg-muted    (--md-sys-color-neutral-container-low, 10%),
                   matching nav-group-ui's own --nav-group-bg-hover exactly.
-       selected = --a-bg-selected (--md-sys-color-neutral-container-active),
-                  a visibly deeper fill so selected still reads as selected
-                  under the cursor.
+       selected = --a-bg-selected (--md-sys-color-neutral-container, 20% —
+                  the same tier as variant="tonal"'s rest fill, operator
+                  ruling 2026-07-27), one ladder step deeper than hover so
+                  selected still reads as selected under the cursor.
        Hover was --a-ui-bg-hover (--a-canvas-0-scrim, an opacity synth the
        token laws forbid); that is what v0.8.14 removed. Collapsing BOTH to
        container-low made hover and selected pixel-identical wherever no

package/components/select/select.class.js

@@ -783,10 +783,20 @@ export class UISelect extends UIFormElement {
         if (lead) label.innerHTML = `${lead}${escapeHTML(opt.label)}`;
         else label.textContent = opt.label;
         el.appendChild(label);
-      } else if (lead) {
-        el.innerHTML = `${lead}${escapeHTML(opt.label)}`;
       } else {
-        el.textContent = opt.label;
+        // Single-select mirrors the multi structure with a RADIO indicator
+        // (operator ruling 2026-07-27) — selection is carried by the
+        // indicator, not a row tint; CSS keys off [data-single-option].
+        el.setAttribute('data-single-option', '');
+        const dot = document.createElement('span');
+        dot.setAttribute('data-radio', '');
+        dot.setAttribute('aria-hidden', 'true');
+        el.appendChild(dot);
+        const label = document.createElement('span');
+        label.setAttribute('data-option-label', '');
+        if (lead) label.innerHTML = `${lead}${escapeHTML(opt.label)}`;
+        else label.textContent = opt.label;
+        el.appendChild(label);
       }
       if (isSelected) el.setAttribute('aria-selected', 'true');
       if (opt.disabled) el.setAttribute('aria-disabled', 'true');

package/components/select/select.css

@@ -14,7 +14,12 @@
 
     /* ── Colors ── */
     --select-bg:                var(--a-ui-bg);
-    --select-bg-selected:       var(--a-ui-bg-selected);
+    /* Selected option rows are indicator-carried (operator ruling
+       2026-07-27): the radio (single) / checkbox (multi) shows selection,
+       the row itself stays untinted — so these DEFAULT to the plain row
+       colors. Both tokens remain consumer-overridable API; set
+       --select-bg-selected to re-enable a tinted selected row. */
+    --select-bg-selected:       transparent;
     --select-bg-hover:          var(--a-ui-bg-hover);
     --select-border:            var(--a-ui-border);
     --select-border-hover:      var(--a-ui-border-hover);
@@ -25,7 +30,7 @@
     --select-caret-fg:          var(--a-ui-text-muted);
     --select-fg:                var(--a-ui-text);
     --select-fg-hover:          var(--a-ui-text-hover);
-    --select-fg-selected:       var(--a-ui-text-selected);
+    --select-fg-selected:       var(--select-fg); /* indicator-carried — see --select-bg-selected note */
     --select-fg-subtle:         var(--a-ui-text-subtle);
     --select-fg-muted:          var(--a-ui-text-muted);
     --select-fg-disabled:       var(--a-ui-text-disabled);
@@ -323,6 +328,13 @@ select-ui [role="option"][aria-selected="true"] {
   background: var(--select-bg-selected);
   font-weight: var(--a-ui-weight);
 }
+/* Hover/focus feedback must survive on the selected row: the 2-attribute
+   selected rule above outweighs the plain :hover rule, so restate it (the
+   multi block below does the same for [data-multi-option]). */
+select-ui [role="option"][aria-selected="true"]:hover,
+select-ui [role="option"][aria-selected="true"][data-focused] {
+  background: var(--select-option-bg-hover);
+}
 select-ui [role="option"][aria-disabled="true"] {
   color: var(--select-option-fg-disabled);
   cursor: not-allowed;
@@ -435,11 +447,50 @@ select-ui [slot="listbox"] [data-select-all-btn] {
 
 /* Multi-select option rows — leading checkbox indicator + label.
    The check icon is hidden by default and revealed at aria-selected. */
-select-ui [role="option"][data-multi-option] {
+select-ui [role="option"][data-multi-option],
+select-ui [role="option"][data-single-option] {
   display: flex;
   align-items: center;
   gap: var(--a-space-2);
 }
+
+/* Single-select option rows — leading RADIO indicator (operator ruling
+   2026-07-27, sibling of SPEC-040's multi checkbox): selection is carried
+   by the control indicator, not a row tint. Rest = bordered circle on the
+   overlay surface; selected = primary ring with a primary center dot
+   (the dot is a ::after circle, scaled in — same transition length as
+   the checkbox's fill). */
+select-ui [role="option"][data-single-option] [data-radio] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--a-ui-border);
+  border-radius: 50%;
+  background: var(--md-sys-color-neutral-surface-bright);
+  transition: border-color var(--a-duration-fast) var(--a-easing);
+}
+select-ui [role="option"][data-single-option] [data-radio]::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  transform: scale(0);
+  transition: transform var(--a-duration-fast) var(--a-easing);
+}
+select-ui [role="option"][data-single-option][aria-selected="true"] [data-radio] {
+  border-color: var(--md-sys-color-primary);
+}
+select-ui [role="option"][data-single-option][aria-selected="true"] [data-radio]::after {
+  transform: scale(1);
+}
+select-ui [role="option"][data-single-option] [data-option-label] {
+  flex: 1;
+  min-width: 0;
+}
 select-ui [role="option"][data-multi-option] [data-checkbox] {
   flex-shrink: 0;
   display: inline-flex;