@adia-ai/web-components 0.8.2 → 0.8.4

package/CHANGELOG.md

@@ -1,4 +1,24 @@
 # Changelog — @adia-ai/web-components
+
+## [Unreleased]
+
+### Fixed
+- **Focus rings pair with transparent borders** (operator ruling 2026-07-16): a control showing its `--a-focus-ring` box-shadow sets `border-color: transparent` in the same rule — border + gap + ring double-drew the edge (visible on the chat composer). Applied to the 21 ring-bearing controls with visible borders (input, textarea, select, combobox, check, radio, switch, range, tag[tone=outline], tags-input's missing invalid-state half, time/calendar/date-range pickers, upload dropzone, option-card, accordion[contained], agent-artifact header, button, toggle-group, chat-input); the pairing law is stated in `styles/colors/semantics/features.css` and the component-token contract.
+- **Sidebar carets read the universal `--a-caret-size` (14px)**: tree carets were an 8px outlier (`--a-space-2`), accordion carets rode the 1rem icon default, select's trigger caret rode the ambient icon size (admin-shell's 18px bump), timeline's outcomes toggle likewise, and nav-group's collapsed block carried two `var()`-less declarations whose value was the literal token name (silently invalid — removed).
+- **`agent-reasoning-ui` connector spine ~2px right of the dot centers**: the spine read `--timeline-marker-w` from outside timeline-ui's scope (unreachable — always the 1.25rem fallback) while the composed `size="sm"` dots center in a 1rem column; now keyed to the component's own `--agent-reasoning-marker-w`. Probe: 0px delta.
+- **`theme-provider.min.js` inlined a stale foundation sheet**: the bundle embeds the GENERATED `dist/web-components.sheet.js`, and building JS before CSS baked the previous iteration in. `npm run build:bundles` now encodes the css→js order.
+
+### Changed
+- **No native `<button>` in stamped component DOM (gh#276)**: `select-ui` (clear-all / select-all / +N overflow), `tag-ui` (dismiss), `swatch-ui` (copy), `timeline-item-ui` (outcomes toggle), `chat-input-ui` (attachment remove), and `combobox-ui` (clear x) stamp `<button-ui variant="ghost" size="xs">` with token re-points — shape, semantic intent, theme tokens, and focus-ring discipline come from the primitive. Data-hooks, aria-labels, and event wiring unchanged. Parked with reasons (in `scripts/dev/audit-stamped-native-buttons.mjs`, the new CI gate): table, agent-questions option cards, swiper dots, calendar day grids.
+- **`button-ui` respects a consumer-authored `tabindex`** instead of clobbering it with `0` on connect — enables mouse-only affordances (combobox's clear keeps `tabindex="-1"`) and roving-tabindex composition.
+
+### Maintenance
+- **`dist/` bundles rebuilt** (focus-ring/caret/button-ui payloads across `web-components.min.{css,js}`, `web-components.sheet.js`, `theme-provider.min.js`).
+
+## [0.8.3] — 2026-07-16
+
+### Maintenance
+- **Lockstep version bump only.** No source changes in this package; bumped to maintain the 11-package version coherence enforced by `scripts/release/check-lockstep.mjs`. Substantive v0.8.3 work shipped in the two Claude Code plugins — the adia-tokens knowledge pack + command refresh (adia-ui-factory) and the release-tooling invariant-3 reconciliation (adia-ui-forge); see `packages/plugins/adia-ui-factory/CHANGELOG.md#083--2026-07-16`.
 ## [0.8.2] — 2026-07-16
 
 ### Fixed

package/components/accordion/accordion.css

@@ -113,6 +113,7 @@
   :scope[variant="contained"]:has(> :focus-visible),
   :where(accordion-ui[variant="contained"]) > :scope:not([variant="flat"]):has(> :focus-visible) {
     box-shadow: var(--accordion-item-focus-ring);
+    border-color: transparent;
   }
 
   /* ── Header ── */
@@ -172,6 +173,10 @@
   /* ── Caret icon ── */
   :scope [slot="caret"] {
     flex-shrink: 0;
+    /* Universal caret size (14px default) — one caret size across
+       nav-group / tree / accordion (ruling 2026-07-16); unset, the icon
+       rendered at the 1rem icon default and read oversized in sidebars. */
+    --a-icon-size: var(--a-caret-size);
     color: var(--accordion-item-caret-fg);
     transition:
       transform var(--accordion-item-duration) var(--accordion-item-easing),

package/components/agent-artifact/agent-artifact.css

@@ -57,6 +57,7 @@
   [data-artifact-header]:focus-visible {
     outline: none;
     box-shadow: var(--a-focus-ring) inset;
+    border-color: transparent;
   }
 
   [data-artifact-icon] {

package/components/agent-reasoning/agent-reasoning.css

@@ -132,14 +132,18 @@
      the last, bridging plan / thought / iteration interstitials so the run
      reads as one timeline rather than fragmented per-block stubs. Endpoints are
      JS-measured into --reasoning-spine-top / -h (#layoutSpine) — interstitial
-     heights are dynamic, so pure CSS can't place them. The x matches the step
-     dot center (timeline-item uses var(--timeline-marker-w, 1.25rem) for its
-     dot math). Sits behind the dots (z-index 0 < the dots' z-index 1). The
-     per-item timeline connectors are suppressed below so they don't double-draw. */
+     heights are dynamic, so pure CSS can't place them. The x is half the
+     component's OWN marker column (--agent-reasoning-marker-w, 1rem — matched
+     by the composed <timeline-ui size="sm">, whose dots center in that same
+     column). NOT --timeline-marker-w: that token lives inside timeline-ui's
+     scope, a DESCENDANT — unreachable here, so reading it silently took the
+     1.25rem fallback and drew the spine ~2px right of the dot centers.
+     Sits behind the dots (z-index 0 < the dots' z-index 1). The per-item
+     timeline connectors are suppressed below so they don't double-draw. */
   [data-reasoning-body][data-spine]::before {
     content: '';
     position: absolute;
-    left: calc(var(--timeline-marker-w, 1.25rem) / 2 - var(--agent-reasoning-line-w, 1.5px) / 2);
+    left: calc(var(--agent-reasoning-marker-w, 1rem) / 2 - var(--agent-reasoning-line-w, 1.5px) / 2);
     top: var(--reasoning-spine-top, 0);
     height: var(--reasoning-spine-h, 0);
     width: var(--agent-reasoning-line-w, 1.5px);

package/components/button/button.class.js

@@ -51,7 +51,10 @@ export class UIButton extends UIElement {
 
   connected() {
     this.setAttribute('role', 'button');
-    this.setAttribute('tabindex', '0');
+    // Respect a consumer-authored tabindex (e.g. a mouse-only tabindex="-1"
+    // affordance like combobox's clear x, or a roving-tabindex composite) —
+    // only default the focusable state when the author said nothing.
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
     this.addEventListener('click', this.#onClick);
     this.addEventListener('keydown', this.#onKey);
   }

package/components/button/button.css

@@ -198,7 +198,7 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
   }
 
   /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
-  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
+  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); border-color: transparent; }
 
   /* ── Variants (rest state) ──
      Variant/state blocks re-point the component tokens (--button-bg etc.);

package/components/calendar-picker/calendar-picker.css

@@ -156,10 +156,12 @@
   :scope:focus-visible [slot="trigger"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     box-shadow: var(--calendar-picker-trigger-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
     box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
+    border-color: transparent;
   }
 
   [slot="display"] {

package/components/chat-thread/chat-input.a2ui.json

@@ -59,7 +59,9 @@
       }
     ],
     "category": "agent",
-    "composes": [],
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "submit": {
         "description": "Fires when the user presses Enter (without Shift) in the textarea OR clicks the built-in send button. Unconditional — there is no [submit-on-enter] opt-in or opt-out attribute; Enter→submit is delegated from the inner <textarea-ui> which always emits a `submit` event on Enter without Shift. The composer suppresses submission while `[loading]` is set.",

package/components/chat-thread/chat-input.css

@@ -122,10 +122,12 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
      ─────────────────────────────────────────────────────────────── */
   :scope:focus-within {
     box-shadow: var(--chat-input-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-within,
   :scope[error]:focus-within {
     box-shadow: var(--chat-input-focus-ring-invalid);
+    border-color: transparent;
   }
 
   /* ── Nested-control color isolation ─────────────────────────────────
@@ -239,23 +241,20 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     border: 1px solid var(--chat-input-image-border);
   }
 
+  /* Attachment-remove — a stamped <button-ui variant="ghost" size="xs"
+     icon="x"> (gh issue 276: no native <button> in stamped DOM); the
+     floating filled-circle look rides button token re-points. */
   [slot="preview"] [data-preview-remove] {
     position: absolute;
     top: calc(-1 * var(--chat-input-remove-offset));
     right: calc(-1 * var(--chat-input-remove-offset));
-    width: var(--chat-input-remove-size);
-    height: var(--chat-input-remove-size);
-    border-radius: 50%;
-    border: none;
-    background: var(--chat-input-remove-bg);
-    color: var(--chat-input-remove-fg);
-    font-size: var(--chat-input-remove-font);
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+    --button-height: var(--chat-input-remove-size);
+    --button-radius: var(--a-radius-full);
+    --button-bg: var(--chat-input-remove-bg);
+    --button-fg: var(--chat-input-remove-fg);
+    --button-bg-ghost-hover: var(--chat-input-remove-bg);
+    --button-fg-ghost-hover: var(--chat-input-remove-fg);
+    --a-icon-size: var(--chat-input-remove-font);
   }
 
   /* Disabled / streaming — host-level chrome. `color` cascades to the

package/components/chat-thread/chat-input.js

@@ -228,8 +228,12 @@ class UIChatInput extends UIElement {
       const img = document.createElement('img');
       img.src = a.dataUrl;
       img.alt = a.name || 'attachment';
-      const btn = document.createElement('button');
-      btn.textContent = '×';
+      // button-ui, not a native <button> (gh issue 276).
+      const btn = document.createElement('button-ui');
+      btn.setAttribute('variant', 'ghost');
+      btn.setAttribute('size', 'xs');
+      btn.setAttribute('icon', 'x');
+      btn.setAttribute('aria-label', `Remove ${a.name || 'attachment'}`);
       btn.setAttribute('data-preview-remove', '');
       btn.addEventListener('click', () => this.#removeAttachment(i));
       wrap.appendChild(img);

package/components/chat-thread/chat-input.yaml

@@ -61,6 +61,9 @@ description: |
   autocomplete, trailing/leading controls), wrap inside
   `<chat-composer>` — see ChatComposer for the module-tier shape.
 
+composes:
+  - button-ui # send button + attachment-remove (gh issue 276 — no native <button> in stamped DOM)
+
 props:
   disabled:
     description: |

package/components/check/check.css

@@ -123,7 +123,7 @@ check-ui[indeterminate] {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); }
+  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); border-color: transparent; }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/combobox/combobox.a2ui.json

@@ -150,7 +150,9 @@
     ],
     "category": "input",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "button-ui",
+      "spinner-ui"
     ],
     "events": {
       "change": {

package/components/combobox/combobox.class.js

@@ -241,9 +241,7 @@ export class UICombobox extends UIFormElement {
               aria-controls="${listboxId}"
               aria-labelledby="${labelId}"
               data-placeholder="${escapeHTML(this.placeholder || '')}"></span>
-        <button type="button" data-clear aria-label="Clear" tabindex="-1" style="display:none">
-          <icon-ui name="x-circle"></icon-ui>
-        </button>
+        <button-ui variant="ghost" size="xs" data-clear aria-label="Clear" tabindex="-1" style="display:none"><icon-ui slot="icon" name="x-circle"></icon-ui></button-ui>
         <span data-suffix>
           <icon-ui name="caret-down"></icon-ui>
         </span>

package/components/combobox/combobox.css

@@ -102,10 +102,12 @@
 
   :scope:focus-within [data-field] {
     box-shadow: var(--combobox-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-within [data-field],
   :scope[error]:focus-within [data-field] {
     box-shadow: var(--combobox-focus-ring-invalid);
+    border-color: transparent;
   }
 
   [data-prefix],
@@ -159,20 +161,15 @@
     align-items: center;
   }
 
+  /* Clear x — a stamped <button-ui variant="ghost" size="xs"> kept
+     mouse-only via tabindex="-1" (gh issue 276: no native <button> in
+     stamped DOM); colors/geometry ride button token re-points. */
   [data-clear] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: var(--combobox-fg-muted);
-    cursor: pointer;
+    --button-fg: var(--combobox-fg-muted);
+    --button-fg-ghost-hover: var(--combobox-fg);
+    --button-height: calc(var(--combobox-font-size) + var(--a-space-1));
     --a-icon-size: var(--combobox-font-size);
-  }
-  [data-clear]:hover {
-    color: var(--combobox-fg);
+    flex-shrink: 0;
   }
 }
 

package/components/combobox/combobox.yaml

@@ -20,6 +20,8 @@ description: |
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
   - icon-ui  # caret-down / x / magnifying-glass affixes (created in render)
+  - button-ui # clear-x affordance, mouse-only via tabindex=-1 (gh issue 276 — no native <button> in stamped DOM)
+  - spinner-ui # loading row in the stamped listbox
 props:
   name:
     description: Form control name for form data submission

package/components/date-range-picker/date-range-picker.css

@@ -130,6 +130,7 @@
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     box-shadow: var(--date-range-picker-trigger-focus-ring);
+    border-color: transparent;
   }
 
   /* States */

package/components/input/input.css

@@ -107,14 +107,18 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
-       which aliases --a-focus-ring. Border stays stable; the ring
-       is the focus affordance (WCAG 2.2 SC 2.4.11/2.4.13). */
+       which aliases --a-focus-ring. The border goes transparent while
+       the ring paints (operator ruling 2026-07-16): the ring alone is
+       the focus affordance; contrast obligations move to the ring
+       (--a-focus-color) rather than the border (WCAG 2.2 SC 2.4.11/2.4.13). */
     box-shadow: var(--input-focus-ring);
     color: var(--input-fg-focus);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:not([disabled]):focus-within [slot="field"],
   :scope[error]:not([disabled]):focus-within [slot="field"] {
     box-shadow: var(--input-focus-ring-invalid);
+    border-color: transparent;
   }
 
   /* Text (contenteditable span) */

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

@@ -182,12 +182,11 @@
       justify-content: center;
       padding: 0;
     }
-    [slot="icon"] icon-ui {
-      --a-icon-size: --a-icon-size;
-    }
-    [slot="caret"] icon-ui {
-      --a-icon-size: --a-caret-size;
-    }
+    /* (Removed two `--a-icon-size: --a-icon-size/--a-caret-size` lines —
+       both were missing var() so the value was the literal token NAME,
+       invalid at the icon's var() site: a silent no-op. The caret is
+       display:none in collapsed mode anyway; the icon keeps the
+       inherited --a-icon-size.) */
     :scope {
       align-self: stretch;
     }

package/components/option-card/option-card.css

@@ -237,5 +237,6 @@ option-card-ui[checked] [slot="icon"] {
   /* ── Focus ── */
   :scope:focus-visible {
     box-shadow: var(--option-card-focus-ring);
+    border-color: transparent;
   }
 }

package/components/radio/radio.css

@@ -100,7 +100,7 @@ radio-ui[checked] [slot="dot"]::after {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring); }
+  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring); border-color: transparent; }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/range/range.css

@@ -79,10 +79,12 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   :scope:focus-visible [slot="field"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     box-shadow: var(--range-focus-ring);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-visible [slot="field"],
   :scope[error]:focus-visible [slot="field"] {
     box-shadow: var(--range-focus-ring-invalid);
+    border-color: transparent;
   }
 
   /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */

package/components/select/select.a2ui.json

@@ -169,7 +169,8 @@
     "category": "input",
     "composes": [
       "icon-ui",
-      "tag-ui"
+      "tag-ui",
+      "button-ui"
     ],
     "events": {
       "change": {

package/components/select/select.class.js

@@ -442,9 +442,7 @@ export class UISelect extends UIFormElement {
           ${leading}
           <span data-chips></span>
           ${displayMarkup}
-          <button type="button" data-clear-all aria-label="Clear all" hidden>
-            <icon-ui name="x"></icon-ui>
-          </button>
+          <button-ui variant="ghost" size="xs" icon="x" aria-label="Clear all" data-clear-all hidden></button-ui>
           <icon-ui name="caret-down" slot="caret"></icon-ui>
         </span>
         ${hintMarkup}
@@ -725,10 +723,11 @@ export class UISelect extends UIFormElement {
     if (this.multiple && this.selectAll) {
       const header = document.createElement('div');
       header.setAttribute('data-select-all', '');
-      const btn = document.createElement('button');
-      btn.type = 'button';
+      const btn = document.createElement('button-ui');
+      btn.setAttribute('variant', 'ghost');
+      btn.setAttribute('size', 'xs');
       btn.dataset.selectAllBtn = '';
-      btn.textContent = this.#allSelected() ? 'Clear' : 'Select all';
+      btn.setAttribute('text', this.#allSelected() ? 'Clear' : 'Select all');
       btn.addEventListener('click', this.#onSelectAllClick);
       header.appendChild(btn);
       this.#listbox.appendChild(header);
@@ -854,10 +853,11 @@ export class UISelect extends UIFormElement {
       slot.appendChild(tag);
     }
     if (overflow > 0) {
-      const more = document.createElement('button');
-      more.type = 'button';
+      const more = document.createElement('button-ui');
+      more.setAttribute('variant', 'ghost');
+      more.setAttribute('size', 'xs');
       more.dataset.more = '';
-      more.textContent = `+${overflow} more`;
+      more.setAttribute('text', `+${overflow} more`);
       more.addEventListener('click', this.#onMoreClick);
       slot.appendChild(more);
     }

package/components/select/select.css

@@ -108,10 +108,12 @@
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     box-shadow: var(--select-focus-ring);
     color: var(--select-fg);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
     box-shadow: var(--select-focus-ring-invalid);
+    border-color: transparent;
   }
   :scope:focus-visible::before {
     color: var(--select-fg-subtle);
@@ -167,6 +169,11 @@
   :scope [slot="trigger"] [slot="caret"] {
     color: var(--select-caret-fg);
     flex-shrink: 0;
+    /* Universal caret size (14px default) — without this the caret rides
+       the ambient icon size instead (admin-shell's global 18px bump made
+       sidebar workspace-select carets outsized; ruling 2026-07-16: carets
+       read --a-caret-size everywhere, like nav-group / tree / accordion). */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
 
@@ -218,41 +225,31 @@
     /* 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="xs">
+     (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] {
-    appearance: none;
-    border: 1px solid var(--select-border);
-    background: var(--select-bg-hover);
-    color: var(--select-fg-muted);
-    border-radius: var(--a-radius-full);
-    padding: 0 var(--a-space-2);
-    font: inherit;
-    font-size: var(--a-ui-tiny);
-    line-height: calc(var(--a-size) - var(--a-space-3));
-    cursor: pointer;
-  }
-  :scope[data-multi-chips] [data-chips] [data-more]:hover {
-    background: var(--a-bg-hover);
+    --button-radius: var(--a-radius-full);
+    --button-height: calc(var(--a-size) - var(--a-space-3));
+    --button-fg: var(--select-fg-muted);
+
+    flex-shrink: 0;
   }
 
-  /* Clear-all `x` affordance. Visible only when [clearable] AND chips. */
+  /* Clear-all `x` affordance — stamped <button-ui variant="ghost" size="xs"
+     icon="x"> (gh issue 276). Visible only when [clearable] AND chips. */
   :scope[data-multi-chips] [data-clear-all] {
-    appearance: none;
-    background: transparent;
-    border: none;
-    padding: var(--a-space-0);
-    margin-inline-start: var(--a-space-1);
-    color: var(--select-fg-muted);
-    cursor: pointer;
-    border-radius: var(--a-radius-full);
+    --button-radius: var(--a-radius-full);
+    --button-height: calc(var(--a-size) - var(--a-space-3));
+    --button-fg: var(--select-fg-muted);
     --a-icon-size: var(--a-ui-sm);
-    display: inline-flex;
-    align-items: center;
+
+    margin-inline-start: var(--a-space-1);
+    flex-shrink: 0;
   }
+  /* 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[data-multi-chips] [data-clear-all]:hover {
-    color: var(--select-fg);
-    background: var(--a-bg-hover);
-  }
 
   /* 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. */
@@ -429,19 +426,11 @@ select-ui [slot="listbox"] [data-select-all] {
   border-bottom: 1px solid var(--md-sys-color-neutral-outline-variant);
   margin-bottom: var(--a-space-1);
 }
+/* Select-all / Clear — stamped <button-ui variant="ghost" size="xs">
+   (gh issue 276); link-colored via the button fg token, chrome is button-ui's. */
 select-ui [slot="listbox"] [data-select-all-btn] {
-  appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
-  font-size: var(--a-ui-xs);
-  color: var(--md-sys-color-primary);
-  cursor: pointer;
-  padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius-sm);
-}
-select-ui [slot="listbox"] [data-select-all-btn]:hover {
-  background: var(--a-bg-hover);
+  --button-fg: var(--md-sys-color-primary);
+  --button-radius: var(--a-radius-sm);
 }
 
 /* Multi-select option rows — leading checkbox indicator + label.

package/components/select/select.test.js

@@ -272,7 +272,9 @@ describe('select-ui', () => {
     expect(chips.length).toBe(2);
     const more = s.querySelector('[slot="trigger"] [data-more]');
     expect(more).toBeTruthy();
-    expect(more.textContent).toBe('+2 more');
+    // Stamped as <button-ui> (gh issue 276) — label rides the text attr.
+    expect(more.tagName).toBe('BUTTON-UI');
+    expect(more.getAttribute('text')).toBe('+2 more');
   });
 
   it('multi-select: [clearable] reveals the clear-all button when chips present', async () => {
@@ -300,7 +302,9 @@ describe('select-ui', () => {
     expect(header).toBeTruthy();
     const btn = header.querySelector('[data-select-all-btn]');
     expect(btn).toBeTruthy();
-    expect(btn.textContent).toBe('Select all');
+    // Stamped as <button-ui> (gh issue 276) — label rides the text attr.
+    expect(btn.tagName).toBe('BUTTON-UI');
+    expect(btn.getAttribute('text')).toBe('Select all');
   });
 
   it('multi-select: chip remove event empties that selection from value', async () => {

package/components/select/select.yaml

@@ -25,6 +25,7 @@ description: |
 composes:
   - icon-ui   # caret + option-row affixes (created in render)
   - tag-ui    # multi-select chip per selected option in the trigger
+  - button-ui # clear-all / select-all / +N-overflow affordances (gh issue 276 — no native <button> in stamped DOM)
 props:
   name:
     description: Form control name for form data submission

package/components/swatch/swatch.a2ui.json

@@ -100,7 +100,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
-    "composes": [],
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "select": {
         "description": "Fired when a selectable swatch is activated (click / Enter / Space). detail carries the swatch's value, color, and label.",

package/components/swatch/swatch.class.js

@@ -63,7 +63,7 @@
  *   <span data-badge></span>           gamut / contrast marker (optional)
  *   <span data-label></span>           label text
  *   <span data-detail></span>          secondary line (optional)
- *   <button data-copy></button>        copy-to-clipboard (optional)
+ *   <button-ui data-copy></button-ui>  copy-to-clipboard (optional)
  *
  * Accessibility:
  *   - When [selectable], host is role="button" + tabindex="0";
@@ -380,12 +380,15 @@ export class UISwatch extends UIElement {
     this.#detailEl.setAttribute('hidden', '');
     this.appendChild(this.#detailEl);
 
-    this.#copyEl = document.createElement('button');
+    // button-ui, not a native <button> (gh issue 276) — the ⧉/✓/⚠ glyph
+    // rides the text attribute (button-ui renders it via attr(text)).
+    this.#copyEl = document.createElement('button-ui');
     this.#copyEl.setAttribute('data-copy', '');
-    this.#copyEl.setAttribute('type', 'button');
+    this.#copyEl.setAttribute('variant', 'ghost');
+    this.#copyEl.setAttribute('size', 'xs');
     this.#copyEl.setAttribute('aria-label', 'Copy value');
     this.#copyEl.setAttribute('hidden', '');
-    this.#copyEl.textContent = '⧉';
+    this.#copyEl.setAttribute('text', '⧉');
     this.appendChild(this.#copyEl);
 
     this.#stamped = true;
@@ -610,8 +613,11 @@ export class UISwatch extends UIElement {
     this.#onHostKey = (e) => {
       if (!this.selectable) return;
       if (e.key !== 'Enter' && e.key !== ' ') return;
-      // Don't steal Space when focus is in the copy button.
-      if (e.target === this.#copyEl) return;
+      // Don't steal Space when focus is in the copy button (the focused
+      // element is button-ui's INNER control, so identity-compare via the
+      // event path, not e.target).
+      const keyPath = e.composedPath ? e.composedPath() : [e.target];
+      if (keyPath.includes(this.#copyEl)) return;
       e.preventDefault();
       this.#activate();
     };
@@ -660,11 +666,11 @@ export class UISwatch extends UIElement {
     if (!this.#copyEl) return;
     if (this.#copyResetTimer != null) clearTimeout(this.#copyResetTimer);
     this.#copyEl.setAttribute('data-copy-state', ok ? 'ok' : 'fail');
-    this.#copyEl.textContent = ok ? '✓' : '⚠';
+    this.#copyEl.setAttribute('text', ok ? '✓' : '⚠');
     this.#copyResetTimer = setTimeout(() => {
       if (!this.#copyEl) return;
       this.#copyEl.removeAttribute('data-copy-state');
-      this.#copyEl.textContent = '⧉';
+      this.#copyEl.setAttribute('text', '⧉');
       this.#copyResetTimer = null;
     }, 1200);
   }