@adia-ai/web-components 0.0.27 → 0.0.28

package/components/agent-questions/agent-questions.css

@@ -63,7 +63,13 @@
 
   [data-questions-option] {
     display: flex;
-    align-items: center;
+    /* Top-align so the leading icon stays with the label's first line
+       when a description wraps below; we restore visual centering on
+       the icon and check by nudging them to the label's first-line
+       center via margin-top. Centering the whole row dragged the icon
+       down to the body's vertical midpoint, which sat between label
+       and description rather than on the label. */
+    align-items: start;
     gap: var(--agent-questions-option-gap);
     padding: var(--agent-questions-option-padding);
     border: 1px solid var(--agent-questions-option-border);
@@ -101,6 +107,16 @@
 
   [data-questions-option-icon] {
     flex-shrink: 0;
+    /* Align the leading icon's center with the label's first-line
+       center. `1.5em` matches the label's effective line-height
+       (label is `font-size:` only — line-height inherits as 1.5).
+       `var(--a-icon-size)` is icon-ui's rendered height. Centering
+       the icon inside one line-box of the label's height puts its
+       midpoint on the label's first-line midpoint. We use em on the
+       icon's own font-size (which icon-ui keeps at the option's
+       font-size) so the offset scales with whatever the consumer
+       sets `--agent-questions-label-size` to. */
+    margin-top: calc((1.5em - var(--a-icon-size, 1em)) / 2);
   }
 
   [data-questions-option-body] {
@@ -134,6 +150,9 @@
     background: transparent;
     opacity: 0;
     transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
+    /* Match the leading-icon offset so a row of [icon · label · check]
+       reads as one horizontal line aligned to the label's first line. */
+    margin-top: calc((1.5em - var(--agent-questions-check-size)) / 2);
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] {

package/components/agent-trace/agent-trace.css

@@ -106,35 +106,40 @@
     margin-block-start: var(--agent-trace-block-gap);
   }
 
-  /* Rows container — a stack; each row owns its own grid. This makes
-     expandable details elements play well, since <details> can't be a
-     grid item spanning multiple tracks cleanly. */
+  /* Rows container — one grid, every row participates via subgrid.
+     This is the only way to get score + detail to land on the same X
+     across all rows; per-row grids let `max-content` widen the score
+     track row-by-row, and "94/100" pushes its row's detail column ~16px
+     right of "7%"'s detail column. Subgrid pulls the track widths up
+     to the parent so every row sees the same column stops. */
   [data-trace-rows] {
     --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: var(--trace-row-cols);
+    column-gap: var(--agent-trace-block-gap);
   }
 
   [data-trace-rows][data-has-details] {
     --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
   }
 
-  /* Each row's summary lays out the columns. For non-expandable rows
-     (plain divs), the row itself is the grid. For expandable rows
-     (<details>), the summary is the grid; the body is a block below. */
+  /* Each row + the headers row + each <details>'s <summary> all use
+     subgrid so they inherit the parent's column stops. <details> itself
+     is also a grid child so its open-state body can span all columns. */
   [data-trace-headers],
   div[data-trace-row],
+  details[data-trace-row],
   details[data-trace-row] > summary {
     display: grid;
-    grid-template-columns: var(--trace-row-cols);
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
     column-gap: var(--agent-trace-block-gap);
     align-items: baseline;
     min-width: 0;
   }
 
-  details[data-trace-row] {
-    display: block;
-    min-width: 0;
+  details[data-trace-row] > [data-trace-row-body] {
+    grid-column: 1 / -1;
   }
 
   /* Column headers — small caps with subtle underline */

package/components/badge/badge.js

@@ -36,7 +36,15 @@ class AdiaBadge extends AdiaElement {
   static template = () => null;
 
   connected() {
-    this.setAttribute('role', 'status');
+    /* Default role is `status` (matches badge's "passive callout" semantic
+       — a screen reader announces the badge text as a state without
+       interrupting). Consumers that wire interactivity (e.g.
+       `<chart-legend-ui>` toggling series) are free to set
+       `role="button"` (or any other role) before connection — we don't
+       overwrite an explicit consumer choice. */
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'status');
+    }
   }
 
   render() {

package/components/breadcrumb/breadcrumb.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Breadcrumb.json",
   "title": "Breadcrumb",
-  "description": "Breadcrumb trail with auto-inserted separators.",
+  "description": "Breadcrumb trail with auto-inserted separators. Supports a leading icon (first child) and an overflow popover that collapses middle crumbs into a `…` menu.",
   "type": "object",
   "allOf": [
     {
@@ -13,6 +13,21 @@
     }
   ],
   "properties": {
+    "collapse": {
+      "description": "Collapse middle crumbs into a `…` overflow popover when there are 4+ items.",
+      "type": "boolean",
+      "default": false
+    },
+    "collapseKeepLeading": {
+      "description": "Number of leading items to keep visible when [collapse] is active. The first item (often a home/icon link) sits before the overflow popover.",
+      "type": "number",
+      "default": 1
+    },
+    "collapseKeepTrailing": {
+      "description": "Number of trailing items to keep visible when [collapse] is active. The last item is always the current page.",
+      "type": "number",
+      "default": 2
+    },
     "component": {
       "const": "Breadcrumb"
     },

package/components/breadcrumb/breadcrumb.css

@@ -75,4 +75,31 @@
     pointer-events: none;
     text-decoration: none;
   }
+
+  /* Items moved into the overflow popover are kept in the light DOM
+     so the consumer's order of truth stays intact; we only hide them
+     visually when [collapse] is active. */
+  [data-collapsed] {
+    display: none;
+  }
+
+  /* Overflow trigger — `<menu-ui data-overflow>` stamped between
+     the leading and trailing visible groups. Layout-wise it behaves
+     like any other [data-item], but the trigger button inside it
+     handles its own padding/focus, so we strip the item max-width to
+     let the `…` glyph size to its content. The popover surface and
+     the menu-item-ui rows inherit menu-ui's canonical styling — no
+     visual overrides needed here. */
+  [data-overflow] {
+    max-width: none;
+    overflow: visible;
+  }
+
+  /* Icon-leading shape — a `<icon-ui>` (or a link wrapping one) as
+     the first child should optical-center on the text baseline of
+     the rest of the row without inheriting the text-truncate cap. */
+  [data-item] > icon-ui:only-child,
+  a[data-item]:has(> icon-ui:only-child) {
+    max-width: none;
+  }
 }

package/components/breadcrumb/breadcrumb.js

@@ -1,8 +1,32 @@
+/**
+ * <breadcrumb-ui separator="/">
+ *   <a href="/"><icon-ui name="house"></icon-ui></a>
+ *   <a href="#">Workspace</a>
+ *   <span>Current page</span>
+ * </breadcrumb-ui>
+ *
+ * Trail with auto-inserted separators. Items can be plain elements or
+ * `<a href>` links; the last item is marked `aria-current="page"`.
+ *
+ * Variants:
+ *   • Default — text-only crumbs
+ *   • Icon-leading — first child is `<icon-ui>` (or a link wrapping one)
+ *   • Collapsed — `[collapse]` hides middle crumbs into a `…` overflow
+ *     popover; keeps `[collapse-keep-leading]` (default 1) and
+ *     `[collapse-keep-trailing]` (default 2) visible at the edges.
+ *
+ * The overflow uses `<popover-ui>` so it rides the top-layer (no
+ * z-index battles inside scrolling containers).
+ */
+
 import { AdiaElement } from '../../core/element.js';
 
 class AdiaBreadcrumb extends AdiaElement {
   static properties = {
-    separator: { type: String, default: '/', reflect: true },
+    separator:            { type: String,  default: '/', reflect: true },
+    collapse:             { type: Boolean, default: false, reflect: true },
+    collapseKeepLeading:  { type: Number,  default: 1, attribute: 'collapse-keep-leading', reflect: true },
+    collapseKeepTrailing: { type: Number,  default: 2, attribute: 'collapse-keep-trailing', reflect: true },
   };
 
   static template = () => null;
@@ -13,30 +37,84 @@ class AdiaBreadcrumb extends AdiaElement {
   }
 
   render() {
-    // Remove old separators
-    this.querySelectorAll('[data-sep]').forEach(el => el.remove());
+    // Strip prior chrome so render is idempotent across attribute changes.
+    this.querySelectorAll('[data-sep], [data-overflow]').forEach(el => el.remove());
 
-    const items = Array.from(this.children).filter(c => !c.hasAttribute('data-sep'));
+    const items = Array.from(this.children).filter(c =>
+      !c.hasAttribute('data-sep') && !c.hasAttribute('data-overflow')
+    );
     const last = items.length - 1;
 
+    // Reset per-item chrome
     items.forEach((child, i) => {
-      child.removeAttribute('data-separator');
       child.setAttribute('data-item', '');
+      child.removeAttribute('data-collapsed');
+      if (i === last) child.setAttribute('aria-current', 'page');
+      else child.removeAttribute('aria-current');
+    });
+
+    const keepLeading  = Math.max(0, this.collapseKeepLeading | 0);
+    const keepTrailing = Math.max(0, this.collapseKeepTrailing | 0);
+    const minLen = keepLeading + keepTrailing + 1;
+    const shouldCollapse = this.collapse && items.length >= Math.max(minLen, 4);
 
-      if (i === last) {
-        child.setAttribute('aria-current', 'page');
-      } else {
-        child.removeAttribute('aria-current');
-        // Insert separator span after this item (before next sibling)
-        if (!child.nextElementSibling?.hasAttribute('data-sep')) {
-          const sep = document.createElement('span');
-          sep.setAttribute('data-sep', '');
-          sep.setAttribute('aria-hidden', 'true');
-          sep.textContent = this.separator;
-          child.after(sep);
-        }
+    if (shouldCollapse) {
+      const collapsed = items.slice(keepLeading, items.length - keepTrailing);
+      collapsed.forEach(el => el.setAttribute('data-collapsed', ''));
+
+      const overflow = this.#buildOverflow(collapsed);
+      if (keepLeading > 0) items[keepLeading - 1].after(overflow);
+      else this.prepend(overflow);
+    }
+
+    // Stamp separators between every consecutive visible sibling.
+    const visible = Array.from(this.children).filter(c =>
+      !c.hasAttribute('data-sep') && !c.hasAttribute('data-collapsed')
+    );
+    for (let i = 0; i < visible.length - 1; i++) {
+      const sep = document.createElement('span');
+      sep.setAttribute('data-sep', '');
+      sep.setAttribute('aria-hidden', 'true');
+      sep.textContent = this.separator;
+      visible[i].after(sep);
+    }
+  }
+
+  #buildOverflow(collapsedItems) {
+    // Use <menu-ui> as the canonical popover-list primitive — same surface
+    // tokens as select-ui's listbox + menu-ui's action menu, with keyboard
+    // nav, top-layer rendering, and anchor positioning for free.
+    const menu = document.createElement('menu-ui');
+    menu.setAttribute('data-overflow', '');
+    menu.setAttribute('data-item', '');
+    menu.setAttribute('placement', 'bottom-start');
+
+    const trigger = document.createElement('button-ui');
+    trigger.setAttribute('slot', 'trigger');
+    trigger.setAttribute('text', '…');
+    trigger.setAttribute('variant', 'ghost');
+    trigger.setAttribute('size', 'sm');
+    trigger.setAttribute('aria-label', 'Show collapsed crumbs');
+    menu.appendChild(trigger);
+
+    for (const item of collapsedItems) {
+      const mi = document.createElement('menu-item-ui');
+      mi.setAttribute('text', item.textContent.trim());
+      // Encode the link target as the menu-item value; navigated on action.
+      if (item.tagName === 'A' && item.hasAttribute('href')) {
+        mi.setAttribute('value', item.getAttribute('href'));
       }
+      menu.appendChild(mi);
+    }
+
+    // menu-ui dispatches `action` with `detail: { value, text }` on item
+    // activation. Navigate to the encoded href; ignore placeholder `#`.
+    menu.addEventListener('action', (e) => {
+      const href = e.detail?.value;
+      if (href && href !== '#') window.location.href = href;
     });
+
+    return menu;
   }
 }
 

package/components/breadcrumb/breadcrumb.yaml

@@ -6,12 +6,26 @@ tag: breadcrumb-ui
 component: Breadcrumb
 category: navigation
 version: 1
-description: Breadcrumb trail with auto-inserted separators.
+description: Breadcrumb trail with auto-inserted separators. Supports a leading icon (first child) and an overflow popover that collapses middle crumbs into a `…` menu.
 props:
   separator:
     description: Character or string rendered between breadcrumb items via CSS ::before.
     type: string
     default: /
+  collapse:
+    description: Collapse middle crumbs into a `…` overflow popover when there are 4+ items.
+    type: boolean
+    default: false
+  collapseKeepLeading:
+    description: Number of leading items to keep visible when [collapse] is active. The first item (often a home/icon link) sits before the overflow popover.
+    type: number
+    default: 1
+    attribute: collapse-keep-leading
+  collapseKeepTrailing:
+    description: Number of trailing items to keep visible when [collapse] is active. The last item is always the current page.
+    type: number
+    default: 2
+    attribute: collapse-keep-trailing
 events: {}
 slots: {}
 states:

package/components/chart/chart.css

@@ -463,24 +463,31 @@
   /* ── Radial bar ──
      Concentric rings — each ring stroked with bandwidth. Track is the
      faint backing, filled arc is accent. Stroke-linecap:round in the path
-     gives rounded end-caps on the arcs. */
-  [data-radial-track] {
+     gives rounded end-caps on the arcs.
+
+     Element-qualified `circle[data-radial-*]` selectors (specificity 0,1,1)
+     are required to override the generic `circle[data-slice="N"] { fill }`
+     rule above, which would otherwise fill the ring circles solid and
+     produce a solid-disc render. The inline `fill="none"` attribute on the
+     SVG element loses to any CSS rule that names `fill`. */
+  circle[data-radial-track] {
     stroke: var(--a-border-subtle);
     fill: none;
   }
-  [data-radial-bar] {
+  circle[data-radial-bar] {
     stroke: var(--chart-bar);
+    fill: none;
   }
-  [data-radial-bar][data-slice="0"] { stroke: var(--chart-0); }
-  [data-radial-bar][data-slice="1"] { stroke: var(--chart-1); }
-  [data-radial-bar][data-slice="2"] { stroke: var(--chart-2); }
-  [data-radial-bar][data-slice="3"] { stroke: var(--chart-3); }
-  [data-radial-bar][data-slice="4"] { stroke: var(--chart-4); }
-  [data-radial-bar][data-slice="5"] { stroke: var(--chart-5); }
-  [data-radial-bar][data-slice="6"] { stroke: var(--chart-6); }
-  [data-radial-bar][data-slice="7"] { stroke: var(--chart-7); }
-  [data-radial-bar][data-slice="8"] { stroke: var(--chart-8); }
-  [data-radial-bar][data-slice="9"] { stroke: var(--chart-9); }
+  circle[data-radial-bar][data-slice="0"] { stroke: var(--chart-0); }
+  circle[data-radial-bar][data-slice="1"] { stroke: var(--chart-1); }
+  circle[data-radial-bar][data-slice="2"] { stroke: var(--chart-2); }
+  circle[data-radial-bar][data-slice="3"] { stroke: var(--chart-3); }
+  circle[data-radial-bar][data-slice="4"] { stroke: var(--chart-4); }
+  circle[data-radial-bar][data-slice="5"] { stroke: var(--chart-5); }
+  circle[data-radial-bar][data-slice="6"] { stroke: var(--chart-6); }
+  circle[data-radial-bar][data-slice="7"] { stroke: var(--chart-7); }
+  circle[data-radial-bar][data-slice="8"] { stroke: var(--chart-8); }
+  circle[data-radial-bar][data-slice="9"] { stroke: var(--chart-9); }
 
   /* ── Gauge ──
      Half-donut — track is faint backing, fill reads as primary accent. */

package/components/chart/chart.js

@@ -173,6 +173,20 @@ function smoothAreaPath(points, baselineY, t = 0.4) {
   return `${line} L${last.x},${baselineY} L${first.x},${baselineY} Z`;
 }
 
+/** Build a column-bar path with only the TOP corners rounded so the bar
+ *  sits flush on its baseline axis. Used for bar / grouped-bar / composed
+ *  bar series / stacked-bar single + top segments — the value end gets a
+ *  cap, the axis end stays square. r is clamped to (w/2, h) to handle
+ *  short bars without the arcs overlapping or escaping the rect. */
+function topRoundedBarPath(x, y, w, h, r = 0) {
+  if (h <= 0 || w <= 0) return '';
+  const rr = Math.max(0, Math.min(r, w / 2, h));
+  if (rr === 0) {
+    return `M${x},${y} H${x + w} V${y + h} H${x} Z`;
+  }
+  return `M${x},${y + h} V${y + rr} Q${x},${y} ${x + rr},${y} H${x + w - rr} Q${x + w},${y} ${x + w},${y + rr} V${y + h} Z`;
+}
+
 /* ── Aspect ratios ─────────────────────────────────────────────── */
 
 const ASPECTS = {
@@ -263,6 +277,22 @@ class AdiaChart extends AdiaElement {
     if (!this.hasAttribute('role'))       this.setAttribute('role', 'img');
     if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', this.heading || `${this.type} chart`);
 
+    /* Hydrate from inline `data="[…]"` HTML attribute. The canonical
+       entry point is the `.data` property (set programmatically), but
+       consumers commonly try the same declarative attribute shape that
+       every other chart prop accepts — `<chart-ui data='[…]' x="m"
+       y="v">`. AdiaElement's property system doesn't deserialize JSON
+       array attributes, so a static-HTML chart authored that way would
+       otherwise render empty. JSON-parse once at connect; malformed
+       payloads are ignored silently and a property assignment later
+       still wins. */
+    if (this.#data.length === 0 && this.hasAttribute('data')) {
+      try {
+        const parsed = JSON.parse(this.getAttribute('data'));
+        if (Array.isArray(parsed)) this.data = parsed;
+      } catch (_) { /* malformed JSON — leave empty, render() bails on no data */ }
+    }
+
     /* Listen for canonical `toggle` events bubbled from external
        chart-legend-ui[for=self] descendants. The handler filters by
        target so other components dispatching `toggle` (accordion-ui,
@@ -1004,7 +1034,7 @@ class AdiaChart extends AdiaElement {
       const bx = pad.left + barW * i + barGap;
       const by = pad.top + plotH - barH;
 
-      svg += `<rect data-bar${tip({ label: labels[i], value: v })} x="${bx}" y="${by}" width="${barInner}" height="${barH}" rx="${this.#resolveRadius()}"/>`;
+      svg += `<path data-bar${tip({ label: labels[i], value: v })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
 
       if (showValues) {
         svg += `<text data-value x="${bx + barInner / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
@@ -1450,6 +1480,12 @@ class AdiaChart extends AdiaElement {
     const cy = height * 0.68;
     const outerR = Math.max(40, Math.min(width * 0.45, height * 0.6));
     const innerR = outerR * 0.72;
+    /* End-cap radius — fully-rounded pill ends matching the
+       progress-ui convention (--progress-radius: var(--a-radius-full)).
+       donutArcPath clamps the corner radius to (outerR - innerR) / 2,
+       so passing the ring half-thickness gives full pill caps on both
+       ends of the arc. */
+    const capR = (outerR - innerR) / 2;
 
     let svg = '';
 
@@ -1457,14 +1493,14 @@ class AdiaChart extends AdiaElement {
        clockwise through 12 o'clock (3π/2) to 3 o'clock (2π). donutArcPath
        produces a filled ring wedge; with start=π, end=2π the sliceAngle
        equals π so large-arc-flag=0 and the arc passes over the top. */
-    svg += `<path data-radial-track d="${donutArcPath(cx, cy, outerR, innerR, Math.PI, 2 * Math.PI, 0)}"/>`;
+    svg += `<path data-radial-track d="${donutArcPath(cx, cy, outerR, innerR, Math.PI, 2 * Math.PI, capR)}"/>`;
 
     /* Filled portion — 0..180° proportional to pct. pct=0 draws nothing;
        pct=1 overlays the full backing arc. */
     if (pct > 0) {
       const fillEnd = Math.PI + Math.PI * pct;
       const tipAttrs = tip({ label: data[0]?.[this.x] ?? 'Value', value: primary, pct: (pct * 100).toFixed(1) });
-      svg += `<path data-slice="0"${tipAttrs} data-gauge-fill d="${donutArcPath(cx, cy, outerR, innerR, Math.PI, fillEnd, 0)}"/>`;
+      svg += `<path data-slice="0"${tipAttrs} data-gauge-fill d="${donutArcPath(cx, cy, outerR, innerR, Math.PI, fillEnd, capR)}"/>`;
     }
 
     /* Center value label */
@@ -1807,7 +1843,7 @@ class AdiaChart extends AdiaElement {
         const barH = maxVal ? (v / maxVal) * plotH : 0;
         const bx = pad.left + barW * i + barGap;
         const by = pad.top + plotH - barH;
-        svg += `<rect${this.#seriesFill(0, barKey)}${tip({ label: labels[i], value: v, series: barKey })} x="${bx}" y="${by}" width="${barInner}" height="${barH}" rx="${this.#resolveRadius()}"/>`;
+        svg += `<path${this.#seriesFill(0, barKey)}${tip({ label: labels[i], value: v, series: barKey })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
       }
     }
 
@@ -1943,22 +1979,18 @@ class AdiaChart extends AdiaElement {
         const by = stackY;
         const bh = segH;
         const isTop = k === segCount - 1;
-        const isBottom = k === 0;
-        const r = Math.min(this.#resolveRadius(), barInner / 2, bh / 2);
+        const r = this.#resolveRadius();
 
         const attrs = `${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
 
-        if (isTop && isBottom) {
-          // Single segment — round top + bottom
-          svg += `<path${attrs} d="M${bx + r},${by} H${bx + barInner - r} Q${bx + barInner},${by} ${bx + barInner},${by + r} V${by + bh - r} Q${bx + barInner},${by + bh} ${bx + barInner - r},${by + bh} H${bx + r} Q${bx},${by + bh} ${bx},${by + bh - r} V${by + r} Q${bx},${by} ${bx + r},${by} Z"/>`;
-        } else if (isTop) {
-          // Top segment — round top corners only
-          svg += `<path${attrs} d="M${bx},${by + bh} V${by + r} Q${bx},${by} ${bx + r},${by} H${bx + barInner - r} Q${bx + barInner},${by} ${bx + barInner},${by + r} V${by + bh} Z"/>`;
-        } else if (isBottom) {
-          // Bottom segment — round bottom corners only
-          svg += `<path${attrs} d="M${bx},${by} H${bx + barInner} V${by + bh - r} Q${bx + barInner},${by + bh} ${bx + barInner - r},${by + bh} H${bx + r} Q${bx},${by + bh} ${bx},${by + bh - r} Z"/>`;
+        if (isTop) {
+          // Top segment (or single segment) — round top corners only.
+          // Bottom edge sits on the next segment OR the axis baseline; either
+          // way it should be flush, so we never round the bottom corners.
+          svg += `<path${attrs} d="${topRoundedBarPath(bx, by, barInner, bh, r)}"/>`;
         } else {
-          // Middle segment — no radius
+          // Middle and bottom segments — flush on both ends. Bottom sits on
+          // the axis baseline; middle sits between segments.
           svg += `<rect${attrs} x="${bx}" y="${by}" width="${barInner}" height="${bh}"/>`;
         }
       }
@@ -1999,7 +2031,7 @@ class AdiaChart extends AdiaElement {
         const barH = maxVal ? (v / maxVal) * plotH : 0;
         const bx = pad.left + groupW * i + groupPad + (subBarW + barGap) * k;
         const by = pad.top + plotH - barH;
-        svg += `<rect${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} x="${bx}" y="${by}" width="${subBarW}" height="${barH}" rx="${this.#resolveRadius()}"/>`;
+        svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${topRoundedBarPath(bx, by, subBarW, barH, this.#resolveRadius())}"/>`;
 
         if (!this.hideValues) {
           svg += `<text data-value x="${bx + subBarW / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;

package/components/chart-legend/chart-legend.css

@@ -48,77 +48,53 @@
     align-items: flex-start;
   }
 
-  /* Rows — both <button> (interactive) and <span> (static) variants */
-  [data-row] {
-    all: unset;
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--chart-legend-row-gap);
-    padding: var(--chart-legend-py) var(--a-space-1);
-    border-radius: var(--chart-legend-row-radius);
+  /* Rows are <badge-ui> chips. We override badge-ui's default tokens
+     to give them a quieter, click-to-toggle appearance — transparent
+     bg by default (so they read as inline text not chips), highlighted
+     on hover when interactive. The pill chrome (radius, padding,
+     font-size, line-height) comes from badge-ui itself. */
+  badge-ui[data-row] {
+    --badge-bg: transparent;
+    --badge-fg: var(--chart-legend-fg);
+    --badge-radius: var(--chart-legend-row-radius);
+    --badge-px: var(--a-space-1);
+    --badge-py: var(--chart-legend-py);
+    --badge-gap: var(--chart-legend-row-gap);
+    --badge-font-size: var(--chart-legend-font-size);
     cursor: pointer;
-    color: inherit;
-    line-height: 1.2;
     transition: background var(--a-duration-fast) var(--a-easing),
                 color var(--a-duration-fast) var(--a-easing);
   }
 
   /* Static rows — no interaction */
-  :scope[static] [data-row] {
+  :scope[static] badge-ui[data-row] {
     cursor: default;
   }
 
-  button[data-row]:hover {
-    background: var(--chart-legend-row-hover);
-    color: var(--chart-legend-row-fg-hover);
+  badge-ui[data-row][role="button"]:hover {
+    --badge-bg: var(--chart-legend-row-hover);
+    --badge-fg: var(--chart-legend-row-fg-hover);
   }
 
-  button[data-row]:focus-visible {
+  badge-ui[data-row][role="button"]:focus-visible {
     outline: none;
     box-shadow: var(--chart-legend-focus-ring);
   }
 
-  /* Inactive (toggled-off) rows — dim the swatch + fade label */
-  [data-row]:not([data-active]) {
-    color: var(--chart-legend-fg-inactive);
+  /* Inactive (toggled-off) rows — dim the swatch + fade label. Drives
+     badge-ui's --badge-fg so the label fades alongside the swatch. */
+  badge-ui[data-row]:not([data-active]) {
+    --badge-fg: var(--chart-legend-fg-inactive);
   }
-  [data-row]:not([data-active]) [data-swatch] {
+  badge-ui[data-row]:not([data-active]) swatch-ui {
     opacity: 0.4;
   }
 
-  /* Swatch — dedicated span per row, styled by the legend's [shape] attr.
-     --swatch-color is set inline per-row from --color-{key} with a
-     --chart-{slot} fallback; overrides cascade through atomically. */
-  [data-swatch] {
-    display: inline-block;
-    flex-shrink: 0;
-    background: var(--swatch-color, var(--chart-0));
-    line-height: 0;
-  }
-
-  :scope[shape="dot"] [data-swatch] {
-    width: var(--chart-legend-swatch-size);
-    height: var(--chart-legend-swatch-size);
-    border-radius: 50%;
-  }
-
-  :scope[shape="square"] [data-swatch] {
-    width: var(--chart-legend-swatch-size);
-    height: var(--chart-legend-swatch-size);
-    border-radius: var(--a-radius-sm);
-  }
-
-  :scope[shape="line"] [data-swatch] {
-    width: calc(var(--chart-legend-swatch-size) * 1.75);
-    height: var(--chart-legend-line-w);
-    border-radius: var(--chart-legend-line-w);
-  }
-
-  :scope[shape="dashed"] [data-swatch] {
-    width: calc(var(--chart-legend-swatch-size) * 1.75);
-    height: 0;
-    background: transparent;
-    border-top: var(--chart-legend-line-w) dashed var(--swatch-color, var(--chart-0));
-  }
+  /* Swatch is composed via <swatch-ui shape="…">; per-shape styling
+     lives in swatch.css. The legend just hands its [shape] attr through
+     and writes --swatch-color inline. Pre-2026-05-01 this file owned a
+     `<span data-swatch>` element + dot/square/line/dashed CSS rules,
+     which collided with the docs-shell's `[data-swatch]` token-demo
+     rule (cascade leak). Composing the primitive moves the styling to
+     one place. */
 }