@adia-ai/web-components 0.0.26 → 0.0.28

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/calendar-picker/calendar-picker.css

@@ -180,6 +180,23 @@ calendar-picker-ui [slot="popover"] {
   font-family: inherit;
   font-size: var(--calendar-picker-font-size);
   color: var(--calendar-picker-popover-fg);
+  /* Fade + lift in on first paint via @starting-style. Same pattern
+     as menu/select/popover surfaces — see journal 2026-04-29 §18. */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+}
+
+calendar-picker-ui [slot="popover"]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  calendar-picker-ui [slot="popover"] { transition: none; }
 }
 
 /* Header row */

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. */
 }

package/components/chart-legend/chart-legend.js

@@ -14,14 +14,17 @@
  *                override when both are provided.)
  *   items      — JSON array of {key, label, slot?, pct?} legend items.
  *                Takes precedence over [for] if both are provided.
- *   shape      — dot | square | line | dashed. Default: dot. Maps to
- *                badge-ui's icon slot (dot = phosphor 'dot', square =
- *                'square-fill', line/dashed = custom CSS swatches).
+ *   shape      — dot | square | line | dashed. Default: dot. The swatch is
+ *                a `[data-swatch]` span inside each badge-ui row, styled by
+ *                the legend's [shape] attr. Custom span (rather than badge-
+ *                ui's [icon] slot) is required because line/dashed shapes
+ *                aren't representable as icon glyphs.
  *   position   — top | bottom | left | right. Layout hint; actual placement
  *                is where the element is placed in the DOM. Drives
  *                flex-direction.
- *   static     — when set, rows render as non-interactive <span>s. Default
- *                is interactive <button>s that toggle.
+ *   static     — when set, rows render as non-interactive badges (no
+ *                role/tabindex/handlers). Default is interactive
+ *                `role="button"` badges that toggle on click + Enter/Space.
  *   on-toggle  — hide | opacity. Default hide. Escape hatch per OD-CHART-09.
  *                Reported via the `toggle` event detail; chart-ui reads it
  *                when wired via [for].
@@ -127,45 +130,59 @@ class AdiaChartLegend extends AdiaElement {
       const slot = item.slot != null ? item.slot : 0;
       const active = !this.#hiddenKeys.has(key);
 
-      const row = this.static
-        ? document.createElement('span')
-        : document.createElement('button');
-
+      /* Each row is a <badge-ui> chip — the canonical AdiaUI primitive for
+         legend pills (per badge.yaml's documented "chart-legend" example).
+         badge-ui carries the pill chrome (radius, padding, font-size, hover
+         affordance), the legend layers shape-specific swatch CSS + the
+         click-to-toggle behavior on top. Interactive rows get
+         role="button" + tabindex="0" + Enter/Space handlers so they're
+         keyboard-operable without a wrapping <button>. */
+      const row = document.createElement('badge-ui');
       row.setAttribute('data-row', '');
-      row.setAttribute('role', 'listitem');
+      row.setAttribute('role', this.static ? 'listitem' : 'button');
+      row.setAttribute('text', label);
       if (key) row.setAttribute('data-key', key);
       if (active) row.setAttribute('data-active', '');
-      if (!this.static) row.setAttribute('type', 'button');
-
-      /* Swatch + label. A dedicated `[data-swatch]` span lets shape-specific
-         CSS handle dot/square/line/dashed variants without fighting badge-
-         ui's icon slot (which is shadow-DOM-less and doesn't expose an
-         `icon` part — previous badge-ui compose produced visual artifacts
-         for line/dashed shapes). Color resolves via --color-{key} with a
-         chart-{slot} fallback, mirroring chart-ui's per-series CSS var
-         injection so ancestor overrides cascade through atomically. */
-      const swatch = document.createElement('span');
-      swatch.setAttribute('data-swatch', '');
+      if (!this.static) {
+        row.setAttribute('tabindex', '0');
+        row.setAttribute('aria-pressed', active ? 'true' : 'false');
+      }
+
+      /* Swatch — composed via `<swatch-ui>` with the legend's [shape] attr
+         passed through. Pre-2026-05-01 this was a hand-rolled `<span
+         data-swatch>` plus per-shape CSS in this file; that drift caused
+         a cascade-leak collision with the docs-shell's `[data-swatch]`
+         demo rule (token-colors page). Compose the primitive instead and
+         the swatch's dot / square / line / dashed variants live in one
+         place. Color resolves via --color-{key} with a --a-data-{slot}
+         fallback; the legend can render standalone (without a chart-ui
+         ancestor) so the fallback must reference the global data palette
+         directly, not chart-ui's scoped --chart-{N} alias. */
+      const swatchShape = this.shape || 'dot';
+      const swatch = document.createElement('swatch-ui');
+      swatch.setAttribute('shape', swatchShape);
+      swatch.setAttribute('size', 'sm');
       const swatchColor = key
-        ? `var(--color-${key}, var(--chart-${slot}))`
-        : `var(--chart-${slot})`;
+        ? `var(--color-${key}, var(--a-data-${slot}))`
+        : `var(--a-data-${slot})`;
       swatch.style.setProperty('--swatch-color', swatchColor);
       row.appendChild(swatch);
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-label', '');
-      labelEl.textContent = label;
-      row.appendChild(labelEl);
-
       if (!this.static) {
-        row.addEventListener('click', (e) => this.#onRowClick(e, key));
+        row.addEventListener('click', (e) => this.#onRowToggle(e, key));
+        row.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.#onRowToggle(e, key);
+          }
+        });
       }
 
       this.appendChild(row);
     }
   }
 
-  #onRowClick(e, key) {
+  #onRowToggle(e, key) {
     if (!key) return;
     const currentlyActive = !this.#hiddenKeys.has(key);
     const newActive = !currentlyActive;
@@ -175,6 +192,7 @@ class AdiaChartLegend extends AdiaElement {
     const row = e.currentTarget;
     if (newActive) row.setAttribute('data-active', '');
     else row.removeAttribute('data-active');
+    row.setAttribute('aria-pressed', newActive ? 'true' : 'false');
 
     this.dispatchEvent(new CustomEvent('toggle', {
       bubbles: true,

package/components/code/code.css

@@ -156,6 +156,47 @@
     color: inherit;
   }
 
+  /* ── Diff line states (static path) ──
+     Active when the block uses `language="diff"` (auto-parse +/- prefix)
+     or carries `data-line-states="..."` (explicit per-line). Each line is
+     a `[data-line-state]` row whose bg picks up the state token. The
+     CodeMirror path doesn't use these markers; line decorations there go
+     through CM extensions instead. */
+  > pre > code[data-line-state-mode] {
+    display: block;
+  }
+  > pre > code[data-line-state-mode] > [data-line-state] {
+    display: grid;
+    grid-template-columns: 1fr;
+    /* Bleed the row tint to the pre's padding edges so it reads as a
+       full-width line, not a gap-margined pill. */
+    margin-inline: calc(-1 * var(--code-px));
+    padding-inline: var(--code-px);
+  }
+  > pre > code[data-line-numbers] > [data-line-state] {
+    grid-template-columns: auto 1fr;
+    column-gap: var(--a-space-3);
+  }
+  > pre > code[data-line-state-mode] [data-line-num] {
+    color: var(--a-fg-subtle);
+    text-align: end;
+    user-select: none;
+    min-width: 1.5ch;
+  }
+  > pre > code[data-line-state-mode] [data-line-body] {
+    white-space: pre;
+  }
+  /* Empty lines still need height so the diff column counts line up. */
+  > pre > code[data-line-state-mode] [data-line-body]:empty::before {
+    content: " ";
+  }
+  > pre > code [data-line-state="added"] {
+    background: var(--a-success-muted);
+  }
+  > pre > code [data-line-state="removed"] {
+    background: var(--a-danger-muted);
+  }
+
   /* Footer — optional chrome band below the code block
      (line counts, byte size, language family, etc.) */
   > footer {

package/components/code/code.js

@@ -90,9 +90,12 @@ class AdiaCode extends AdiaElement {
     // Mount CodeMirror when the language is supported OR the element is
     // editable (editable plain-text is still useful). Inline instances
     // stay on the static <code> path. Mount failures leave the static
-    // fallback in place — it's already visible.
+    // fallback in place — it's already visible. Diff line-state mode
+    // (auto via `language="diff"` or explicit `data-line-states`) also
+    // stays on the static path — bg tinting lives on the wrapper spans.
     const lang = canonicalLanguage(this.language);
-    const shouldMount = !this.inline && (SUPPORTED_LANGUAGES.has(lang) || this.editable);
+    const useLineState = this.hasAttribute('data-line-states') || lang === 'diff';
+    const shouldMount = !this.inline && !useLineState && (SUPPORTED_LANGUAGES.has(lang) || this.editable);
     if (shouldMount) {
       this.#mountEditor();
     }
@@ -145,7 +148,45 @@ class AdiaCode extends AdiaElement {
     // Pre > Code — direct semantic elements, no slot attr
     const pre = document.createElement('pre');
     const code = document.createElement('code');
-    code.textContent = raw;
+
+    // Diff line-state mode — wrap each line so it can carry a state-driven
+    // bg tint and (when [line-numbers]) a leading line-number gutter.
+    // Triggered by `language="diff"` (auto-parses +/- prefix) or by an
+    // explicit `data-line-states` CSV that maps positionally onto lines.
+    const lang = canonicalLanguage(this.language);
+    const explicit = this.getAttribute('data-line-states');
+    const useLineState = explicit != null || lang === 'diff';
+    if (useLineState) {
+      code.setAttribute('data-line-state-mode', '');
+      if (this.lineNumbers) code.setAttribute('data-line-numbers', '');
+      const states = explicit?.split(',').map((s) => s.trim()) ?? null;
+      const lines = raw.split('\n');
+      lines.forEach((line, i) => {
+        let state = 'unchanged';
+        if (states && states[i]) {
+          state = states[i];
+        } else if (lang === 'diff') {
+          const head = line.charAt(0);
+          if (head === '+') state = 'added';
+          else if (head === '-') state = 'removed';
+        }
+        const row = document.createElement('span');
+        row.setAttribute('data-line-state', state);
+        if (this.lineNumbers) {
+          const num = document.createElement('span');
+          num.setAttribute('data-line-num', '');
+          num.textContent = String(i + 1);
+          row.appendChild(num);
+        }
+        const body = document.createElement('span');
+        body.setAttribute('data-line-body', '');
+        body.textContent = line;
+        row.appendChild(body);
+        code.appendChild(row);
+      });
+    } else {
+      code.textContent = raw;
+    }
     pre.appendChild(code);
 
     this.appendChild(pre);