@adia-ai/web-components 0.8.3 → 0.8.5

package/components/fields/fields.class.js

@@ -51,19 +51,22 @@ export class UIFields extends UIElement {
 
   connected() {
     this.#syncInline();
-    this.#mo = new MutationObserver((records) => {
-      // Only re-sync on childList changes that involve direct <field-ui>
-      // children — attribute mutations on grandchildren aren't ours to
-      // care about.
-      for (const r of records) {
-        if (r.type !== 'childList') continue;
-        if (this.#hasFieldChild(r.addedNodes) || this.#hasFieldChild(r.removedNodes)) {
-          this.#syncInline();
-          return;
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mo = new MutationObserver((records) => {
+        // Only re-sync on childList changes that involve direct <field-ui>
+        // children — attribute mutations on grandchildren aren't ours to
+        // care about.
+        for (const r of records) {
+          if (r.type !== 'childList') continue;
+          if (this.#hasFieldChild(r.addedNodes) || this.#hasFieldChild(r.removedNodes)) {
+            this.#syncInline();
+            return;
+          }
         }
-      }
-    });
-    this.#mo.observe(this, { childList: true });
+      });
+      this.#mo.observe(this, { childList: true });
+    }
   }
 
   disconnected() {

package/components/icon/icon.class.js

@@ -30,13 +30,17 @@ function warnIfIconRegistryUnwired() {
     // eslint-disable-next-line no-console
     console.error(
       `[icon-ui] No icons are registered and no icon loaders were installed — every <icon-ui> renders blank.\n` +
-      `  The zero-config import.meta.glob path does not work from inside a published dependency under Vite 8 / rolldown.\n` +
-      `  Fix — from your APP entry (where import.meta.glob is transformed):\n` +
+      `  Two known causes (gh#287): (1) Vite's dev-server optimizeDeps pre-bundled this package, which empties\n` +
+      `  the auto-discovery glob — add to your Vite config:\n` +
+      `    optimizeDeps: { exclude: ['@adia-ai/web-components', '@adia-ai/web-modules'] }\n` +
+      `  (2) @phosphor-icons/core is missing or this file was re-nested by a packaging step (Yarn PnP, a custom\n` +
+      `  bundler). If neither applies, install loaders manually with plain imports from your APP entry:\n` +
       `    npm i @phosphor-icons/core\n` +
       `    import { installIconLoaders } from '@adia-ai/web-components/core/icons';\n` +
-      `    installIconLoaders({ regular: import.meta.glob(\n` +
-      `      '/node_modules/@phosphor-icons/core/assets/regular/*.svg',\n` +
-      `      { query: '?raw', import: 'default', eager: true }) });\n` +
+      `    import caretRight from '@phosphor-icons/core/assets/regular/caret-right.svg?raw';\n` +
+      `    installIconLoaders({ regular: {\n` +
+      `      '/node_modules/@phosphor-icons/core/assets/regular/caret-right.svg': caretRight,\n` +
+      `    } });\n` +
       `  See USAGE.md § Icons.`,
     );
   }, 0);

package/components/index.js

@@ -58,6 +58,7 @@ export { UISwiper } from './swiper/swiper.js';
 export { UIUpload } from './upload/upload.js';
 export { UICard } from './card/card.js';
 export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
+export { UIAdiaMark } from './adia-mark/adia-mark.js';
 export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';

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/nav.class.js

@@ -61,7 +61,8 @@ export class UINav extends UIElement {
     this.addEventListener('click', this.#onClick);
 
     // ResizeObserver only meaningful for primary variant — section is static.
-    if (this.variant !== 'section') {
+    // gh#285 — SSR DOM shims (linkedom) have no ResizeObserver global.
+    if (this.variant !== 'section' && typeof ResizeObserver !== 'undefined') {
       this.#ro = new ResizeObserver(() => this.#updateTooltips());
       this.#ro.observe(this);
     }

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/noodles/noodles.class.js

@@ -108,19 +108,23 @@ export class UINoodles extends UIElement {
     this.#svg.setAttribute('data-noodle-svg', '');
     this.prepend(this.#svg);
 
-    // Observers for child layout changes
-    this.#resizeObs = new ResizeObserver(() => this.#scheduleUpdate());
-    this.#mutationObs = new MutationObserver(() => {
-      this.#rebuildPortIndicators();
-      this.#scheduleUpdate();
-    });
-
-    this.#resizeObs.observe(this);
+    // Observers for child layout changes.
+    // gh#285 — SSR DOM shims (linkedom) have neither observer global.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObs = new ResizeObserver(() => this.#scheduleUpdate());
+      this.#resizeObs.observe(this);
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mutationObs = new MutationObserver(() => {
+        this.#rebuildPortIndicators();
+        this.#scheduleUpdate();
+      });
+    }
     this.#observeMutations();
 
     // Observe each port-bearing child
     for (const child of this.#getPortChildren()) {
-      this.#resizeObs.observe(child);
+      this.#resizeObs?.observe(child);
     }
 
     this.#rebuildPortIndicators();
@@ -181,7 +185,7 @@ export class UINoodles extends UIElement {
     // Sync resize observer with current port children
     const portChildren = this.#getPortChildren();
     for (const child of portChildren) {
-      this.#resizeObs.observe(child);
+      this.#resizeObs?.observe(child);
     }
 
     // Update port indicator positions

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/page/page.class.js

@@ -78,13 +78,14 @@ export class UIPage extends UIElement {
       header.insertAdjacentElement('beforebegin', this.#sentinel);
     }
 
-    if (!this.#observer) {
+    // gh#285 — SSR DOM shims (linkedom) have no IntersectionObserver global.
+    if (!this.#observer && typeof IntersectionObserver !== 'undefined') {
       this.#observer = new IntersectionObserver((entries) => {
         this.toggleAttribute('data-header-stuck', !entries[0].isIntersecting);
       }, { threshold: 0 });
     }
 
-    this.#observer.observe(this.#sentinel);
+    this.#observer?.observe(this.#sentinel);
   }
 
   #teardownSticky() {

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

@@ -381,7 +381,8 @@ export class UISelect extends UIFormElement {
     // options are already parsed/set, and skip unless there's a real
     // <option>/<optgroup> to parse — so the component's own listbox/empty-state
     // renders (and #parseOptions's own option removals) don't re-enter or loop.
-    if (!this.#optionObserver) {
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (!this.#optionObserver && typeof MutationObserver !== 'undefined') {
       this.#optionObserver = new MutationObserver(() => {
         if (this.#options.length) return;
         const kids = this.#logicalOptionChildren();
@@ -394,7 +395,7 @@ export class UISelect extends UIFormElement {
         }
       });
     }
-    this.#optionObserver.observe(this, { childList: true, subtree: true });
+    this.#optionObserver?.observe(this, { childList: true, subtree: true });
   }
 
   render() {
@@ -442,9 +443,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 +724,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 +854,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";
@@ -208,31 +208,34 @@ export class UISwatch extends UIElement {
     // the canonical post-tile region. MutationObserver closes this gap for
     // every arrival path: single-template ordering skew, separate render
     // cycle, or imperative host.appendChild().
-    this.#chromeObserver = new MutationObserver((mutations) => {
-      let hasChrome = false;
-      for (const m of mutations) {
-        for (const n of m.addedNodes) {
-          if (n.nodeType !== 1) continue;
-          // Direct chrome child OR a display:contents wrapper-span carrying chrome.
-          if (n.getAttribute?.('slot') === 'chrome') { hasChrome = true; break; }
-          if (
-            n.tagName === 'SPAN' &&
-            n.style?.display === 'contents' &&
-            n.querySelector?.('[slot="chrome"]')
-          ) { hasChrome = true; break; }
+    // gh#285 — SSR DOM shims (linkedom) have no MutationObserver global.
+    if (typeof MutationObserver !== 'undefined') {
+      this.#chromeObserver = new MutationObserver((mutations) => {
+        let hasChrome = false;
+        for (const m of mutations) {
+          for (const n of m.addedNodes) {
+            if (n.nodeType !== 1) continue;
+            // Direct chrome child OR a display:contents wrapper-span carrying chrome.
+            if (n.getAttribute?.('slot') === 'chrome') { hasChrome = true; break; }
+            if (
+              n.tagName === 'SPAN' &&
+              n.style?.display === 'contents' &&
+              n.querySelector?.('[slot="chrome"]')
+            ) { hasChrome = true; break; }
+          }
+          if (hasChrome) break;
         }
-        if (hasChrome) break;
-      }
-      if (!hasChrome) return;
-      // Re-entrancy guard: #absorbChromeSlot() calls insertBefore() which itself
-      // generates childList mutations on the host. Without this guard, every
-      // absorb pass would re-trigger the observer indefinitely. takeRecords()
-      // drains the queue without dispatch so the next observation cycle starts
-      // clean.
-      this.#absorbChromeSlot();
-      this.#chromeObserver.takeRecords();
-    });
-    this.#chromeObserver.observe(this, { childList: true });
+        if (!hasChrome) return;
+        // Re-entrancy guard: #absorbChromeSlot() calls insertBefore() which itself
+        // generates childList mutations on the host. Without this guard, every
+        // absorb pass would re-trigger the observer indefinitely. takeRecords()
+        // drains the queue without dispatch so the next observation cycle starts
+        // clean.
+        this.#absorbChromeSlot();
+        this.#chromeObserver.takeRecords();
+      });
+      this.#chromeObserver.observe(this, { childList: true });
+    }
   }
 
   render() {
@@ -380,12 +383,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 +616,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 +669,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);
   }

package/components/swatch/swatch.css

@@ -288,29 +288,24 @@
     color: color-mix(in oklab, var(--a-chrome-dark, #111) 70%, transparent);
   }
 
-  /* ═══════ Copy button ═══════ */
+  /* ═══════ Copy button — a stamped <button-ui variant="ghost" size="xs">
+     (gh issue 276: no native <button> in stamped DOM). Geometry/colors
+     ride button token re-points; focus ring is button-ui's own. ═══════ */
   :scope > [data-copy] {
-    appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
-    border: 0;
-    padding: 2px 4px;
+    --button-fg: var(--swatch-copy-fg);
+    --button-fg-ghost-hover: var(--md-sys-color-neutral-on-surface);
+    --button-bg-ghost-hover: var(--a-bg-muted);
+    --button-radius: var(--a-radius-xs);
+    --button-height: calc(var(--a-ui-sm) + var(--a-space-1));
+
     margin-inline-start: var(--a-space-1);
-    color: var(--swatch-copy-fg);
     font-size: var(--a-ui-sm);
-    line-height: 1;
-    cursor: pointer;
-    border-radius: var(--a-radius-xs);
-    transition: color var(--a-duration-fast) var(--a-easing-out), background var(--a-duration-fast) var(--a-easing-out);
-  }
-  :scope > [data-copy]:hover { color: var(--md-sys-color-neutral-on-surface); background: var(--a-bg-muted); }
-  :scope > [data-copy]:focus-visible {
-    outline: var(--swatch-select-ring-width) solid var(--swatch-select-ring);
-    outline-offset: 1px;
+    flex-shrink: 0;
   }
+  /* button-ui's own :scope display wins over the UA [hidden] rule. */
   :scope > [data-copy][hidden] { display: none; }
-  :scope > [data-copy][data-copy-state="ok"]   { color: var(--swatch-copy-fg-ok); }
-  :scope > [data-copy][data-copy-state="fail"] { color: var(--swatch-copy-fg-fail); }
+  :scope > [data-copy][data-copy-state="ok"]   { --button-fg: var(--swatch-copy-fg-ok); }
+  :scope > [data-copy][data-copy-state="fail"] { --button-fg: var(--swatch-copy-fg-fail); }
 
   /* ═══════ Selectable + selected states ═══════
      [selectable] makes the whole host focusable; ring on :focus-visible.

package/components/swatch/swatch.yaml

@@ -11,6 +11,8 @@ description: |
   shape; pairs with an optional label slot or attribute. Composed by chart-
   legend-ui's per-row swatch and consumed directly by the token-colors /
   spacing demo pages.
+composes:
+  - button-ui # [copyable] copy affordance (gh issue 276 — no native <button> in stamped DOM)
 props:
   shape:
     description: Visual shape — block (filled tile), dot (small circle), square (small filled square), line (solid hairline), dashed (dashed hairline).

package/components/swiper/swiper.class.js

@@ -436,7 +436,10 @@ export class UISwiper extends UIElement {
     if (dots.children.length !== desired) {
       while (dots.firstChild) dots.removeChild(dots.firstChild);
       for (let i = 0; i < desired; i++) {
-        const dot = document.createElement('button');
+        // button-ui, not a native <button> (gh issue 276 wave 4) — it
+        // respects the consumer-set role, so the tab semantics survive.
+        const dot = document.createElement('button-ui');
+        dot.setAttribute('variant', 'ghost');
         dot.setAttribute('role', 'tab');
         dot.setAttribute('aria-label', `Page ${i + 1}`);
         dot.addEventListener('click', () => this.goTo(this.#pageToSlideIndex(i)));