@adia-ai/web-components 0.8.2 → 0.8.4

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/switch/switch.css

@@ -130,7 +130,7 @@ switch-ui[checked] [slot="thumb"] {
   }
 
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); }
+  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); border-color: transparent; }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/tag/tag.a2ui.json

@@ -74,7 +74,10 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
-    "composes": [],
+    "composes": [
+      "button-ui",
+      "icon-ui"
+    ],
     "events": {
       "remove": {
         "description": "Fired when the dismiss button is activated.",

package/components/tag/tag.class.js

@@ -55,7 +55,9 @@ export class UITag extends UIElement {
   };
 
   static parts = {
-    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x" weight="bold"></icon-ui></button>',
+    // button-ui, not a native <button> (gh issue 276) — the icon slots in
+    // explicitly to keep its bold weight (the icon= prop stamps regular).
+    dismiss: '<button-ui slot="dismiss" variant="ghost" size="xs" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold"></icon-ui></button-ui>',
   };
 
   static template = () => null;

package/components/tag/tag.css

@@ -196,6 +196,7 @@ tag-ui[removable]:not([disabled]):hover {
   :scope:focus-visible {
     outline: none;
     box-shadow: var(--tag-focus-ring);
+    border-color: transparent;
   }
 
   /* ── Slotted icons (leading) ──
@@ -222,28 +223,25 @@ tag-ui[removable]:not([disabled]):hover {
     gap: var(--tag-gap-icon, 0.2em);
   }
 
-  /* ── Dismiss button ── */
+  /* ── Dismiss button — a stamped <button-ui variant="ghost" size="xs">
+     (gh issue 276: no native <button> in stamped DOM); geometry + hover
+     ride button token re-points, chrome is button-ui's own. */
   [slot="dismiss"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--tag-dismiss-size);
-    height: var(--tag-dismiss-size);
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-radius: var(--tag-dismiss-radius);
-    color: var(--tag-dismiss-fg);
-    opacity: var(--tag-dismiss-opacity);
+    --button-height: var(--tag-dismiss-size);
+    --button-radius: var(--tag-dismiss-radius);
+    --button-fg: var(--tag-dismiss-fg);
+    --button-bg-ghost-hover: var(--tag-dismiss-bg-hover);
+    --button-fg-ghost-hover: var(--tag-dismiss-fg);
     --a-icon-size: 0.875rem;
+
+    opacity: var(--tag-dismiss-opacity);
     order: 1; /* push dismiss to end so layout reads [text] [×] */
-    transition: opacity var(--tag-duration) var(--tag-easing), background var(--tag-duration) var(--tag-easing);
+    flex-shrink: 0;
+    transition: opacity var(--tag-duration) var(--tag-easing);
   }
 
   [slot="dismiss"]:hover {
     opacity: var(--tag-dismiss-opacity-hover);
-    background: var(--tag-dismiss-bg-hover);
   }
 
   /* ── Disabled ── */

package/components/tag/tag.yaml

@@ -16,6 +16,9 @@ description: |
   markers — badge-ui has no remove event. For navigation grouping
   use <nav-group-ui>; for inline command actions use
   <action-list-ui>.
+composes:
+  - button-ui # dismiss affordance (gh issue 276 — no native <button> in stamped DOM)
+  - icon-ui   # the dismiss x glyph, slotted into the button-ui
 props:
   disabled:
     description: Disables interaction and dims the tag.

package/components/tags-input/tags-input.css

@@ -75,6 +75,7 @@
   :scope[aria-invalid="true"]:focus-within,
   :scope[error]:focus-within {
     box-shadow: var(--tags-input-focus-ring-invalid);
+    border-color: transparent;
   }
 
   :scope[disabled] {

package/components/textarea/textarea.css

@@ -96,10 +96,12 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     outline: none;
     box-shadow: var(--textarea-focus-ring);
     color: var(--textarea-fg-hover);
+    border-color: transparent;
   }
   :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
   :scope[error]:not([disabled]) [slot="text"]:focus {
     box-shadow: var(--textarea-focus-ring-invalid);
+    border-color: transparent;
   }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {

package/components/time-picker/time-picker.css

@@ -107,11 +107,13 @@ time-picker-ui:not([disabled]):hover {
    Canonical L3 ring; consumed via --time-picker-focus-ring (aliases --a-focus-ring). */
 time-picker-ui:not([disabled]):focus-within {
   box-shadow: var(--time-picker-focus-ring);
+  border-color: transparent;
 }
 
 time-picker-ui[aria-invalid="true"]:not([disabled]):focus-within,
 time-picker-ui[error]:not([disabled]):focus-within {
   box-shadow: var(--time-picker-focus-ring-invalid);
+  border-color: transparent;
 }
 
 /* Disabled / readonly affordance */

package/components/timeline/timeline.a2ui.json

@@ -43,7 +43,8 @@
     "anti_patterns": [],
     "category": "display",
     "composes": [
-      "icon-ui"
+      "icon-ui",
+      "button-ui"
     ],
     "events": {
       "timeline-toggle": {

package/components/timeline/timeline.class.js

@@ -154,8 +154,10 @@ export class UITimelineItem extends UIElement {
       // Toggle caret lives on the row — we stamp a button once
       let toggle = this.querySelector(':scope > [data-timeline-toggle]');
       if (!toggle) {
-        toggle = document.createElement('button');
-        toggle.type = 'button';
+        // button-ui, not a native <button> (gh issue 276).
+        toggle = document.createElement('button-ui');
+        toggle.setAttribute('variant', 'ghost');
+        toggle.setAttribute('size', 'xs');
         toggle.setAttribute('data-timeline-toggle', '');
         toggle.setAttribute('aria-label', 'Toggle details');
         toggle.addEventListener('click', (e) => {
@@ -168,12 +170,9 @@ export class UITimelineItem extends UIElement {
         });
         this.appendChild(toggle);
       }
-      toggle.innerHTML = '';
-      const caret = document.createElement('icon-ui');
-      caret.setAttribute('name', this.#expanded ? 'caret-down' : 'caret-right');
-      caret.setAttribute('color', 'muted');
-      caret.setAttribute('size', 'sm');
-      toggle.appendChild(caret);
+      // The caret rides button-ui's icon prop — flipping the attribute
+      // re-stamps the glyph; color/size are CSS token re-points.
+      toggle.setAttribute('icon', this.#expanded ? 'caret-down' : 'caret-right');
     } else {
       this.querySelector(':scope > [data-timeline-toggle]')?.remove();
       body?.remove();

package/components/timeline/timeline.css

@@ -362,32 +362,22 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* ═══════ Toggle caret (outcomes) ═══════ */
 
+  /* A stamped <button-ui variant="ghost" size="xs" icon="caret-*">
+     (gh issue 276: no native <button> in stamped DOM). Geometry/colors
+     ride button token re-points; focus ring + hover are button-ui's own. */
   :scope > [data-timeline-toggle] {
     position: absolute;
     inset-inline-end: 0;
-    /* Place the caret's icon-center on row 1's optical center.
-       The button has --a-space-0-5 vertical padding, so the icon
-       sits that much lower inside the box; we subtract that so the
-       icon (not the box) lines up with the time-slot text center. */
+    /* Place the caret's icon-center on row 1's optical center (the box
+       is --button-height tall around a 1em-line icon). */
     top: calc((1.4em - 1em) / 2 - var(--a-space-0-5));
-    background: none;
-    border: none;
-    padding: var(--a-space-0-5) var(--timeline-item-toggle-px);
-    margin: 0;
-    cursor: pointer;
-    color: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
-    border-radius: var(--a-radius-sm);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-    transition: background var(--timeline-item-duration) var(--timeline-item-easing),
-                color      var(--timeline-item-duration) var(--timeline-item-easing);
-  }
-
-  :scope > [data-timeline-toggle]:hover {
-    background: var(--a-bg-subtle);
-    color: var(--timeline-item-label-fg, var(--md-sys-color-neutral-on-surface));
+    --button-height: calc(1em + var(--a-space-1));
+    --button-radius: var(--a-radius-sm);
+    --button-fg: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
+    --button-fg-ghost-hover: var(--timeline-item-label-fg, var(--md-sys-color-neutral-on-surface));
+    --button-bg-ghost-hover: var(--a-bg-subtle);
+    /* It IS a caret — universal caret size (ruling 2026-07-16). */
+    --a-icon-size: var(--a-caret-size);
   }
 
   /* Reserve room so the time isn't overlapped by the caret */
@@ -395,10 +385,8 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     margin-inline-end: var(--timeline-item-toggle-time-margin);
   }
 
-  :scope > [data-timeline-toggle]:focus-visible {
-    outline: none;
-    box-shadow: var(--a-focus-ring);
-  }
+  /* (Focus ring is button-ui's own — the custom :focus-visible rule the
+     native button needed is gone with it, gh issue 276.) */
 }
 
 /* When size=sm on the parent, ring is 1.5px so the small dot still looks crisp.

package/components/timeline/timeline.yaml

@@ -12,6 +12,7 @@ description: "Timeline and step wizard. Two modes: timeline (per-item state) and
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
   - icon-ui
+  - button-ui # outcomes toggle (gh issue 276 — no native <button> in stamped DOM)
 props:
   orientation:
     description: Layout direction

package/components/toggle-group/toggle-group.css

@@ -90,6 +90,7 @@ toggle-option-ui:not([disabled]):hover {
   :scope:focus-visible {
     outline: none;
     box-shadow: var(--toggle-option-focus-ring);
+    border-color: transparent;
     z-index: 1;
   }
 

package/components/tree/tree.css

@@ -7,7 +7,10 @@
     --tree-row-gap:         var(--a-space-1);
     --tree-actions-gap:     var(--a-space-0-5);
     --tree-indent:          var(--a-space-4);
-    --tree-caret-size:      var(--a-space-2);
+    /* The universal caret token (14px default) — sidebar carets read one
+       size across nav-group / tree / accordion (ruling 2026-07-16); the
+       old --a-space-2 read made tree carets an 8px outlier. */
+    --tree-caret-size:      var(--a-caret-size);
     --tree-icon-size:       var(--a-space-3);
 
     /* ── Typography ── */
@@ -47,7 +50,7 @@
     --tree-item-row-gap:       var(--tree-row-gap, var(--a-space-1));
     --tree-item-actions-gap:   var(--tree-actions-gap, var(--a-space-0-5));
     --tree-item-indent:        var(--tree-indent, var(--a-space-4));
-    --tree-item-caret-size:    var(--tree-caret-size, var(--a-space-2));
+    --tree-item-caret-size:    var(--tree-caret-size, var(--a-caret-size));
     --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));
 
     --tree-item-fg:            var(--tree-fg, var(--md-sys-color-neutral-on-surface));

package/components/upload/upload.css

@@ -75,6 +75,7 @@
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     outline: none;
     box-shadow: var(--upload-focus-ring);
+    border-color: transparent;
   }
   [data-dropzone][data-dragover] {
     border-color: var(--upload-border-dragover);