@adia-ai/web-components 0.8.39 → 0.8.40

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.40] — 2026-08-15
+
+### Changed
+- **BREAKING (ships in 0.8.40, no deprecation alias): `toggle-group-ui` drops the legacy `data-selected` parallel stamp on `toggle-option-ui` children, per [ADR-0056](../../docs/adr/adr-0056-selection-item-selected-convention.md) (gh#1303).** The additive half of ADR-0056 (`0.8.39`) shipped `toggle-option-ui`'s declared, reflected `selected` prop alongside the pre-existing `data-selected` stamp, scoped that way pending operator sign-off on when the breaking removal would ride. That removal now lands: `toggle-group.class.js`'s render pass no longer sets/clears `data-selected`; `selected` (already the only prop `toggle-group.css` styled) is the sole current-state surface, matching `segment-ui`'s convention. The `DEPRECATED` markers in `toggle-option.yaml`/`toggle-group.yaml` are removed along with the attribute they described. `toggle-group.test.js`'s named deprecation case (`'DEPRECATED — still stamps data-selected in parallel'`) flips to assert the stamp is gone. See the migration guide's [§ Upcoming — `toggle-option-ui` drops the legacy `data-selected` stamp](../../.claude/docs/MIGRATION%20GUIDE.md#upcoming--toggle-option-ui-drops-the-legacy-data-selected-stamp-0840-adr-0056).
+- **`table-ui[density]` converges onto the global attribute grammar (ADR-0054, gh#1300).** The component-local `compact | standard | comfortable` enum is removed (`table.yaml`, the reflected `density` prop + `getState()`/`setState()` persistence in `table.class.js`, the `:scope[density="…"]` CSS overrides in `table.css`) — `[density]` on `table-ui` is now the ordinary ambient global attribute (`compact | spacious`, unset = the middle), which `--table-py`/`--table-px` already read via `--a-space-*` (no CSS change needed beyond removing the now-redundant local override). **Breaking, no deprecation alias:** `density="compact"` is unchanged, `density="standard"` becomes the absent attribute, `density="comfortable"` becomes `density="spacious"`. Rides the ratified **0.8.40** breaking wave.
+- **`chart-ui[radius]` renamed to `chart-ui[corner-radius]` (ADR-0054, gh#1300).** Same `Number` type, same `default: null` (falls back to `--a-radius`), same behavior — the collision was with the global preset-enum `[radius]` (`sharp`/`rounded`/`round`), which a numeric px value can't share a name with. **Breaking, no deprecation alias**, rides the ratified **0.8.40** breaking wave.
+- **BREAKING (ships in 0.8.40): `qr-code-ui`'s reflected `[margin]` attribute is renamed `[quiet-zone]` (property `quietZone`), per [ADR-0053](../../docs/adr/adr-0053-no-shadowing-global-attributes.md) (gh#1299).** `qr-code-ui[margin]` silently collided with the framework's global `[margin]` Scale attribute — both accepted the identical `margin="4"` syntax but resolved to unrelated meanings (QR quiet zone in grid cells vs. global box-model spacing) with no error surfaced. Same type/default/reflection; only the name changes. No deprecation alias — `margin` on `qr-code-ui` now means the global Scale attribute. See the migration guide's [§ Upcoming — qr-code-ui quiet-zone rename](../../.claude/docs/MIGRATION%20GUIDE.md#upcoming--qr-code-ui-quiet-zone-rename-adr-0053).
+- **BREAKING (ships in 0.8.40): the legacy `--a-leading-*` line-height token family is retired; `--a-font-leading-*` is the single canonical leading scale, per [ADR-0052](../../docs/adr/adr-0052-leading-scale-consolidation.md) (gh#1298).** Two leading families coexisted in `styles/type/scale.css` with the same step names resolving to different values (`--a-leading-snug` = `1.3` vs. `--a-font-leading-snug` = `1.2`) — no obviously-correct token choice, which is why 55 component files had reached for a bare numeric literal instead. `--a-font-leading-*` gains a `none: 1` step to close its only gap; the 4 in-repo `--a-leading-*` consumers (`button`, `chat-thread`, `inline-message`, `segment`) are migrated by value-nearest judgment (no name-preserving aliases: `snug`→`normal`, `normal`→`relaxed`). The same sweep tokenized every other hardcoded typography literal in `components/*/*.css`: bare numeric `line-height` (56 files; `1.3`/`1.4` → `--a-font-leading-normal`, escape-valve `--a-font-leading-relaxed` for multi-line body copy), `em`-literal `letter-spacing` (12 files; `0.05em` → `--a-font-tracking-wide`), numeric `font-weight` (7 files, on-scale). New `npm run check:typography-tokens` gate (mirrors the brand-chrome/foundation-layer audit gates) fails on any of the three literal classes reappearing. See the migration guide's [§ Upcoming — leading-scale consolidation](../../.claude/docs/MIGRATION%20GUIDE.md#upcoming--leading-scale-consolidation-adr-0052).
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (6 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.39] — 2026-08-15
 
 ### Changed

package/MIGRATION.md

@@ -54,6 +54,14 @@ Version cuts and migration scope:
 
 - **`0.8.37`** — PATCH lockstep cut. **BREAKING: the a2ui / gen-ui estate split (ADR-0048).** Six published package names (`a2ui-runtime`, `a2ui-compose`, `a2ui-corpus`, `a2ui-retrieval`, `a2ui-validator`, `a2ui-mcp`) are replaced by four (`a2ui`, `gen-ui`, `gen-ui-mcp`, `a2ui-protocol-mcp`). **A patch-shaped version number does not make this non-breaking** — every old name is renamed. One-cycle re-export shims bridge the gap; the cut AFTER `0.8.37` retires them. See [§ 0.8.37 — the a2ui / gen-ui estate split](#0837--the-a2ui--gen-ui-estate-split-adr-0048).
 
+- **Upcoming (`0.8.40` — attribute-grammar reconciliation, ADR-0054)** — **BREAKING, no deprecation alias:** `table-ui[density]` converges onto the ambient global `[density]` attribute — the component-local `compact`/`standard`/`comfortable` enum is removed. Migration: `density="compact"` stays `density="compact"`; `density="standard"` → drop the attribute (unset is the default); `density="comfortable"` → `density="spacious"`. `chart-ui[radius]` renames to `chart-ui[corner-radius]` (same `Number`/`null` semantics, same `--a-radius` fallback) — a mechanical attribute-name rename, no value-shape change. `swatch-ui[color]` and `noodles-ui[color]` are ratified exceptions and are unaffected. See [§ Upcoming — 0.8.40 attribute-grammar reconciliation](#upcoming-0840-attribute-grammar-reconciliation-adr-0054).
+
+- **Upcoming (`qr-code-ui` quiet-zone rename, `0.8.40`)** — **BREAKING:** `<qr-code-ui>`'s reflected `[margin]` attribute is renamed `[quiet-zone]` (property `quietZone`) — same type, default (`4`), and reflection; only the name changes, per [ADR-0053](../../docs/adr/adr-0053-no-shadowing-global-attributes.md). `margin` on `qr-code-ui` now means the framework's **global** `[margin]` Scale attribute (box-model spacing), not the QR quiet zone — the two grammars silently collided on the same syntax with unrelated meanings. **No deprecation alias** — keeping `margin` as an alias would preserve the collision the rename exists to remove. Audit existing usages: `<qr-code-ui margin="4">` intending a quiet zone must become `<qr-code-ui quiet-zone="4">`. Ships in `0.8.40`. See [§ Upcoming — qr-code-ui quiet-zone rename](#upcoming--qr-code-ui-quiet-zone-rename-adr-0053).
+
+- **Upcoming (leading-scale consolidation, `0.8.40`)** — **BREAKING, no aliases:** the legacy `--a-leading-*` token family is removed per [ADR-0052](../../docs/adr/adr-0052-leading-scale-consolidation.md) — `--a-font-leading-*` (+ new `--a-font-leading-none: 1` step) is now the single canonical leading scale. Value-nearest replacement table: `none→--a-font-leading-none` (1), `tight→--a-font-leading-snug` (1.2), `snug→--a-font-leading-normal` (1.35), `normal→--a-font-leading-relaxed` (1.5). The same gh#1298 sweep also tokenized every hardcoded `line-height`/`letter-spacing`/`font-weight` literal across `packages/web-components/components/*/*.css` (1.3 and 1.4 both → `--a-font-leading-normal`; 0.05em → `--a-font-tracking-wide`) and added a mechanized `npm run check:typography-tokens` gate. See [§ Upcoming — leading-scale consolidation](#upcoming--leading-scale-consolidation-adr-0052).
+
+- **Upcoming (`toggle-option-ui` drops `data-selected`, `0.8.40`)** — **BREAKING, no deprecation alias:** `<toggle-group-ui>`'s legacy `data-selected` parallel stamp on its `<toggle-option-ui>` children is removed per [ADR-0056](../../docs/adr/adr-0056-selection-item-selected-convention.md) — the declared, reflected `selected` prop (shipped additively in `0.8.39`) is now the only current-state surface, matching `<segment-ui>`'s convention. Migration: any `[data-selected]` CSS or script targeting `toggle-option-ui` moves to `[selected]`. See [§ Upcoming — `toggle-option-ui` drops the legacy `data-selected` stamp](#upcoming--toggle-option-ui-drops-the-legacy-data-selected-stamp-0840-adr-0056).
+
 Live demos and per-component docs at [ui-kit.exe.xyz/site/](https://ui-kit.exe.xyz/site/). The `adia-ui-migration` skill (in `.agents/skills/`) automates most of the mechanical sweeps in this guide.
 
 ---
@@ -384,6 +392,238 @@ npm run check   # in-repo consumers; downstream: your app's build + a visual pas
 
 ---
 
+## Upcoming — `0.8.40` attribute-grammar reconciliation (ADR-0054)
+
+**BREAKING, no deprecation alias.** [ADR-0054](../../docs/adr/adr-0054-attribute-grammar-reconciliation.md)
+resolves two component-local attributes that shadowed the [global attribute
+grammar](../../.claude/docs/specs/attribute-api-system.md) with divergent vocabularies —
+`table-ui[density]` **converges** onto the global mechanism (it already did
+the job), `chart-ui[radius]` **renames** (a numeric px value is a genuinely
+different shape than the global preset enum). Per [ADR-0053](../../docs/adr/adr-0053-no-shadowing-global-attributes.md),
+neither collision is exempted — `swatch-ui[color]` / `noodles-ui[color]` are
+the only two ratified exceptions (documented in
+[§11 of attribute-api-system.md](../../.claude/docs/specs/attribute-api-system.md#11-global-attribute-exemption-list)),
+and neither is touched by this cut.
+
+### `table-ui[density]` converges onto the global grammar
+
+The component-local `compact | standard | comfortable` enum is removed —
+`table-ui` no longer reflects a `density` prop or JS property at all.
+`[density]` on `table-ui` is now the ordinary ambient global attribute
+(`compact | spacious`, unset = the middle) — `--table-py`/`--table-px`
+already derive from `--a-space-*` steps, which the global `[density]`
+attribute already scales via `--a-density`.
+
+**Value migration** (apply wherever `<table-ui density="…">` appears):
+
+| Old value | New value |
+|---|---|
+| `density="compact"` | `density="compact"` (unchanged) |
+| `density="standard"` | drop the attribute entirely (unset is the default) |
+| `density="comfortable"` | `density="spacious"` |
+
+```bash
+# find every table-ui density usage in your tree
+git grep -nE '<table-ui[^>]*\bdensity='
+
+# comfortable → spacious (mechanical)
+git grep -lz '<table-ui[^>]*density="comfortable"' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/(<table-ui[^>]*density=")comfortable(")/${1}spacious${2}/g' "$f"
+done
+
+# standard → drop the attribute (review each hit; not always a safe blind sed
+# across multi-line tags)
+git grep -nE '<table-ui[^>]*density="standard"'
+```
+
+If you read/write a table's `density` as a JS property (`el.density`) or
+persisted it via `table-ui`'s `getState()`/`setState()`, switch to
+`getAttribute('density')`/`setAttribute('density', …)` — the reflected
+property and the `getState()`/`setState()` `density` key are both gone.
+Composites that forward density to an embedded `table-ui` (own component,
+own vocabulary) must translate through the same table above before setting
+the child's attribute — see `invoice-history.class.js`'s `mapDensity()` for
+the pattern.
+
+### `chart-ui[radius]` renames to `chart-ui[corner-radius]`
+
+Same `Number` type, same `default: null` (falls back to `--a-radius`), same
+behavior — only the attribute name changes.
+
+```bash
+git grep -nE '<chart-ui[^>]*\bradius='
+git grep -lz '<chart-ui[^>]*radius="' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/(<chart-ui[^>]*)\bradius=/${1}corner-radius=/g' "$f"
+done
+```
+
+If you set it via JS, `chart.radius = 8` → `chart.cornerRadius = 8`.
+
+### Verify
+
+```bash
+git grep -nE '<table-ui[^>]*\bdensity="(standard|comfortable)"'  # must be 0
+git grep -nE '<chart-ui[^>]*\bradius='                           # must be 0
+npm run check
+```
+
+---
+
+## Upcoming — qr-code-ui quiet-zone rename (ADR-0053)
+
+**BREAKING, ships in `0.8.40`.** `<qr-code-ui>`'s reflected `[margin]` attribute is
+renamed `[quiet-zone]` (property `quietZone`) — same `number` type, same default (`4`), same
+reflection; only the name changes.
+
+**Why:** the framework's global attribute grammar (`styles/api/*.css`) is a pitch — one
+grammar, inferable: `margin="4"` means the same thing on every element, resolving through one
+Scale mechanism (`--a-margin`). `qr-code-ui` declared its own reflected `margin` meaning the QR
+"quiet zone" in grid cells. Both grammars accepted the identical syntax with no error surfaced,
+so an author reaching for `<qr-code-ui margin="4">` expecting global spacing silently got a
+quiet-zone resize instead, and vice versa. [ADR-0053](../../docs/adr/adr-0053-no-shadowing-global-attributes.md)
+rules that no component-local attribute may shadow a global one; this is the first instance
+resolved under that policy (gh#1299).
+
+**No deprecation alias.** Keeping `margin` as an alias on `qr-code-ui` would preserve the exact
+collision the rename exists to remove — `margin` on `qr-code-ui` reverts to meaning what it
+means everywhere: the global Scale attribute.
+
+### Mechanical sweep
+
+```bash
+git grep -nE '<qr-code-ui[^>]*\smargin='
+```
+
+Every hit intending the QR quiet zone becomes `quiet-zone`:
+
+```html
+<!-- before -->  <qr-code-ui value="…" margin="4"></qr-code-ui>
+<!-- after  -->  <qr-code-ui value="…" quiet-zone="4"></qr-code-ui>
+```
+
+**Programmatic setters** (JS render paths — the grep above misses these):
+
+```bash
+git grep -rnE "setAttribute\('margin', |\.margin\s*="
+```
+
+Filter to `qr-code-ui` hosts only — `margin` is a legitimate global attribute on every other
+element, so only rewrite a hit that is actually a `<qr-code-ui>` reference:
+`setAttribute('margin', …)` → `setAttribute('quiet-zone', …)`; `el.margin = …` → `el.quietZone
+= …`.
+
+### Verify
+
+```bash
+git grep -nE '<qr-code-ui[^>]*\smargin='   # must be 0
+npm run check                              # in-repo consumers; downstream: your app's build
+```
+
+---
+
+## Upcoming — leading-scale consolidation (ADR-0052)
+
+**BREAKING, no aliases, ships in `0.8.40`.** [ADR-0052](../../docs/adr/adr-0052-leading-scale-consolidation.md)
+retires the legacy `--a-leading-*` family. `--a-font-leading-*` is now the
+single canonical line-height scale.
+
+**Why:** two leading-token families coexisted in `scale.css` with the same
+step names resolving to *different* values (`--a-leading-snug` = `1.3` vs.
+`--a-font-leading-snug` = `1.2`). A component author reaching for a leading
+token had no obviously-correct choice — which is why a corpus-wide sweep
+(gh#1298) found 55 component files reaching for a bare numeric literal
+instead of either family. `--a-font-leading-*` is what the L2 role layer
+already consumes and its shape (tightening as size grows) is the design
+intent on record. One step closes its only gap: `--a-font-leading-none: 1`.
+
+**No value-preserving aliases.** `snug`/`normal` name different values
+across the two families — aliasing one name to the other would silently
+restyle every consumer of the alias. Replacement table (value-nearest, not
+name-preserving):
+
+| Removed | Value | Replacement | Value |
+|---|---|---|---|
+| `--a-leading-none` | `1` | `--a-font-leading-none` | `1` |
+| `--a-leading-tight` | `1.2` | `--a-font-leading-snug` | `1.2` |
+| `--a-leading-snug` | `1.3` | `--a-font-leading-normal` | `1.35` |
+| `--a-leading-normal` | `1.5` | `--a-font-leading-relaxed` | `1.5` |
+
+A surviving `var(--a-leading-*)` reference goes invalid-at-computed-value-time
+→ inherit (same failure shape as the `--a-font` alias removal in `0.8.23`).
+
+### The same sweep also tokenized every other hardcoded typography literal
+
+Beyond the legacy family, gh#1298's corpus sweep found — and tokenized —
+every bare numeric `line-height`, `em`-literal `letter-spacing`, and numeric
+`font-weight` in `packages/web-components/components/*/*.css`:
+
+- **`line-height`** — mapped to the nearest `--a-font-leading-*` step. Both
+  `1.3` and `1.4` map to `--a-font-leading-normal` (`1.35`) — no new step was
+  minted (at the 12–14px sizes where these values appeared, ±0.05
+  line-height is below visual significance). A handful of `1.4` hits on
+  genuinely multi-line body/description copy were mapped up to
+  `--a-font-leading-relaxed` (`1.5`) instead, case-by-case — see the sweep
+  PR description for the enumerated list. `line-height: 0` (the
+  icon/line-box-collapse idiom used by `icon.css`, `swatch.css`,
+  `qr-code.css`, etc.) is **not** a typographic leading value and was left
+  untouched.
+- **`letter-spacing`** — mapped to the nearest `--a-font-tracking-*` step;
+  `0.05em` (off-scale) maps to `--a-font-tracking-wide` (`0.04em`), same
+  nearest-step logic as the leading family.
+- **`font-weight`** — all hits were already on-scale and map mechanically to
+  `--a-weight-*` (`500`→medium, `600`→semibold, `700`→bold).
+
+### A mechanized gate follows the sweep
+
+`npm run check:typography-tokens` (wired into the `npm run check` aggregate)
+fails on any bare numeric `line-height`, `em`-literal `letter-spacing`, or
+numeric `font-weight` reappearing in `packages/web-components/components/*/*.css`
+— mirroring the existing brand-chrome/foundation-layer audit gates — so the
+parallel scale (and the literal-reaching it caused) cannot silently
+reaccumulate.
+
+### Mechanical sweep
+
+```bash
+git grep -nE -- '--a-leading-(none|tight|snug|normal)\b'
+```
+
+Apply the replacement table above at each hit — do not blind-`sed`, since
+`snug`/`normal` map to *different* replacement names than their own name
+would suggest.
+
+### Verify
+
+```bash
+git grep -nE -- '--a-leading-(none|tight|snug|normal)\b'   # must be 0
+npm run check:typography-tokens                              # must exit 0
+npm run check
+```
+
+---
+
+## Upcoming — `toggle-option-ui` drops the legacy `data-selected` stamp (`0.8.40`, ADR-0056)
+
+**BREAKING, no deprecation alias.** [ADR-0056](../../docs/adr/adr-0056-selection-item-selected-convention.md)'s
+breaking half removes `<toggle-group-ui>`'s legacy `data-selected` attribute
+stamp on its `<toggle-option-ui>` children. The declared, reflected `selected`
+prop (shipped additively in `0.8.39`) is now the *only* current-state surface
+— matching `<segment-ui>`'s existing convention.
+
+**Migration:** any external CSS or script targeting `[data-selected]` on
+`toggle-option-ui` must move to `[selected]` — same semantics, same timing,
+just the attribute name. `toggle-group.css` itself already styled
+`[selected]`; the removed stamp was a parallel, undocumented hook with no
+declared API surface (invisible to the yaml SoT, the catalog, and the A2UI
+grammar).
+
+```bash
+git grep -n "data-selected" -- '*.css' '*.js' '*.html' | grep -i toggle   # must be 0
+npm run check
+```
+
+---
+
 ## Migrating to `@adia-ai/*@v0.8.23` (2026-07-30)
 
 - **Removed: the `--a-font` alias** (pre-ADR-0035 name, DEPRECATED since the 0.8.x line). Any surviving `font-family: var(--a-font)` goes invalid-at-computed-value-time → `inherit` → UA **serif** — the visible symptom is Times-faced labels on an otherwise-correct page.

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

@@ -80,7 +80,7 @@
      uppercase kind reads as a tag, not a label. */
   [data-artifact-kind] {
     flex-shrink: 0;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--a-font-tracking-wide);
   }
 
   [data-artifact-actions] {

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

@@ -171,7 +171,7 @@
     display: grid;
     grid-template-columns: subgrid;
     align-items: center;
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     color: var(--agent-reasoning-fg-muted);
     animation: _ar-fade var(--agent-reasoning-duration) var(--agent-reasoning-easing);
   }
@@ -199,7 +199,7 @@
     font-size: var(--agent-reasoning-font);
     color: var(--agent-reasoning-fg-subtle);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--a-font-tracking-wide);
     font-weight: var(--agent-reasoning-weight-heading);
   }
 

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

@@ -167,7 +167,7 @@
   [data-trace-header] {
     font-size: calc(var(--agent-trace-font) * 0.85);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     font-weight: var(--a-weight-medium);
     color: var(--agent-trace-fg-subtle);
   }
@@ -289,7 +289,7 @@
     font-size: calc(var(--agent-trace-label-font) * 0.85);
     font-weight: var(--a-weight-medium);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     padding-block-end: var(--a-space-1);
   }
 
@@ -301,7 +301,7 @@
     grid-template-columns: 1em 1fr;
     column-gap: var(--agent-trace-inline-gap);
     align-items: baseline;
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     font-size: var(--agent-trace-font);
     color: var(--agent-trace-fg);
   }

package/components/alert/alert.css

@@ -207,7 +207,7 @@
   :scope[pattern="dunning"] [data-dunning-amount] {
     font-family: var(--alert-amount-font);
     font-variant-numeric: tabular-nums;
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     /* Inherit color from the variant; tabular-nums + monospace make
        the amount the scannable focal datum. */
   }

package/components/avatar/avatar.css

@@ -46,7 +46,7 @@
   [slot="initials"] {
     user-select: none;
     text-transform: uppercase;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* ── Icon (non-person avatar) ──

package/components/badge/badge.css

@@ -89,7 +89,7 @@
     font-family: var(--badge-font-family);
     font-size: var(--badge-font-size);
     font-weight: var(--badge-weight);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     /* ── Register (issue 845) — uppercase + tracking + tabular numerals is the
        badge/tag differentiator now that geometry is shared (see the
        --badge-radius note above). Tag stays proportional sentence-case at

package/components/button/button.css

@@ -89,10 +89,11 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
        blocks), but the label's ::after clips to its own line box, so
        inheriting 1 makes half-leading negative and shears descenders
        (g/j/p/q/y, parentheses) by ~0.93px at the default size — gh#906.
-       Snug (1.3) contains the font's content box at every [size]; the
+       Normal (1.35) contains the font's content box at every [size]; the
        precedent is stat.css:174,198 setting leading on the truncating
-       box rather than on the component root. */
-    --button-label-line-height: var(--a-leading-snug);
+       box rather than on the component root. Value-nearest migration from
+       the retired --a-leading-snug (1.3) — ADR-0052. */
+    --button-label-line-height: var(--a-font-leading-normal);
     --button-gap:              var(--a-space-1);
     --button-bg-hover:         var(--a-bg-strong);   /* neutral fill → neutral -strong surface on hover */
     --button-fg-hover:         var(--a-ui-text-hover);
@@ -160,7 +161,7 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
     font-family: var(--button-font-family);
     font-size: var(--button-font-size);
     font-weight: var(--button-font-weight);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     user-select: none;
     transition:
@@ -211,7 +212,7 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
     border: 1px solid var(--button-trailing-border);
     border-radius: var(--button-trailing-radius);
     padding: 0 var(--button-trailing-px);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     /* Recolor a <kbd-ui slot="trailing"> pill via kbd's OWN tokens so it tracks
        the button label color on every variant (primary white, ghost subtle,
        colored fills). kbd-ui's `:scope { color: var(--kbd-fg) }` wins over the

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

@@ -141,7 +141,7 @@
     border-radius: var(--calendar-picker-trigger-radius);
     background: var(--calendar-picker-trigger-bg);
     color: var(--calendar-picker-trigger-fg);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     transition:
       border-color var(--calendar-picker-duration) var(--calendar-picker-easing),

package/components/card/card.css

@@ -271,7 +271,7 @@
   & > header > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
   & > header > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
     grid-row: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
   }
   /* Heading slot is a flex container — can hold title + inline badges/metadata.
@@ -304,7 +304,7 @@
   & > header > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
     grid-row: 2;
     grid-column: 1 / -1;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
     margin: 0;
   }
   & > header:has(> [slot="icon"]) > :is([slot="description"], p, small) { grid-column: 2 / -1; }
@@ -489,7 +489,7 @@
     font-size: var(--card-font-size);
     font-weight: var(--a-weight-medium);
     color: var(--card-heading-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
     flex: 0 0 auto;
   }

package/components/chart/chart.a2ui.json

@@ -53,6 +53,11 @@
     "component": {
       "const": "Chart"
     },
+    "cornerRadius": {
+      "description": "Bar corner radius in px (null = let CSS tokens decide)",
+      "type": "number",
+      "default": null
+    },
     "data": {
       "description": "JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x=\"month\" y=\"revenue\">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute.",
       "$ref": "common_types.json#/$defs/DynamicObjectList"
@@ -99,11 +104,6 @@
       "type": "boolean",
       "default": false
     },
-    "radius": {
-      "description": "Bar corner radius (null = let CSS tokens decide)",
-      "type": "number",
-      "default": null
-    },
     "seriesEmphasis": {
       "description": "Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior.",
       "type": "string",

package/components/chart/chart.class.js

@@ -25,7 +25,7 @@
  *   color        — accent/success/warning/danger/info
  *   hide-grid    — hide gridlines
  *   hide-values  — hide value labels
- *   radius       — bar corner radius (default: 4)
+ *   corner-radius — bar corner radius in px (default: null, falls back to --a-radius)
  *   dots         — line/multi-line marker visibility: all|none|hover|last (default: all)
  *   series-emphasis — multi-line: series key that keeps full area+line treatment; others render line-only, dimmed
  *
@@ -219,7 +219,7 @@ export class UIChart extends UIElement {
     color:       { type: String,  default: '',       reflect: true },
     hideGrid:    { type: Boolean, default: false,    reflect: true, attribute: 'hide-grid' },
     hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
-    radius:      { type: Number,  default: null,     reflect: true },
+    cornerRadius: { type: Number, default: null,     reflect: true, attribute: 'corner-radius' },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
     size:        { type: String,  default: '',       reflect: true },
     format:      { type: String,  default: 'abbr',   reflect: true },
@@ -255,11 +255,11 @@ export class UIChart extends UIElement {
      re-render without a full DOM query. */
   #activeDotEl = null;
 
-  /** Resolves the corner radius: the `radius` prop if explicitly set,
+  /** Resolves the corner radius: the `cornerRadius` prop if explicitly set,
    *  otherwise `--a-radius` from the host's computed style. Falls back
    *  to 6 if the token is unset (should not happen in practice). */
   #resolveRadius() {
-    if (this.radius != null) return this.radius;
+    if (this.cornerRadius != null) return this.cornerRadius;
     const val = getComputedStyle(this).getPropertyValue('--a-radius').trim();
     const parsed = parseFloat(val);
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 6;

package/components/chart/chart.css

@@ -176,7 +176,7 @@
 
   [data-value] {
     font-size: var(--chart-font-size);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     fill: var(--chart-value);
     font-family: var(--chart-font);
   }
@@ -265,7 +265,7 @@
   [data-avg-label] {
     fill: var(--chart-avg);
     font-family: var(--chart-font);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
   }
 
   /* ── Radar ── */
@@ -388,7 +388,7 @@
   /* ── Donut center text ── */
 
   [data-donut-total] {
-    font-weight: 700;
+    font-weight: var(--a-weight-bold);
     fill: var(--chart-fg);
     font-family: var(--chart-font);
     /* font-size set by JS on the element — scales with donut radius */
@@ -719,7 +719,7 @@
   color: var(--chart-tooltip-fg);
   font-family: var(--a-font-family);
   font-size: var(--a-ui-sm);
-  line-height: 1.35;
+  line-height: var(--a-font-leading-normal);
   border: none;
   border-radius: var(--chart-tooltip-radius);
   box-shadow: var(--chart-tooltip-shadow);
@@ -741,11 +741,11 @@
   font-size: var(--a-ui-tiny);
   opacity: 0.75;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: var(--a-font-tracking-wide);
 }
 
 .chart-tooltip-popup [data-tip-role="label"] {
-  font-weight: 500;
+  font-weight: var(--a-weight-medium);
 }
 
 .chart-tooltip-popup [data-tip-role="value"] {

package/components/chart/chart.d.ts

@@ -22,6 +22,8 @@ export class UIChart extends UIElement {
   type: 'bar' | 'line' | 'pie' | 'donut' | 'radar' | 'sparkline' | 'segments' | 'area' | 'scatter' | 'radial-bar' | 'gauge' | 'stacked-bar' | 'grouped-bar' | 'multi-line' | 'funnel' | 'treemap' | 'sankey' | 'composed';
   /** Color scheme */
   color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
+  /** Bar corner radius in px (null = let CSS tokens decide) */
+  cornerRadius: number;
   /** JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x="month" y="revenue">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute. */
   data: string;
   /** Marker (dot) visibility for line and multi-line series. `all` draws a circle[data-dot] on every datum (default — matches pre-gh#561 behavior). `none` hides all dots so a dense series reads as a clean line. `hover` shows only the currently-hovered datum's dot. `last` shows only the terminal point per series (sparkline convention). Tooltip hit targets ([data-hit]) are a separate always-rendered layer — every mode keeps hover/click working along the whole line. */
@@ -36,8 +38,6 @@ export class UIChart extends UIElement {
   hideValues: boolean;
   /** Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27). */
   loading: boolean;
-  /** Bar corner radius (null = let CSS tokens decide) */
-  radius: number;
   /** Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior. */
   seriesEmphasis: string;
   /** Chart size */

package/components/chart/chart.yaml

@@ -76,10 +76,11 @@ props:
     type: boolean
     default: false
     attribute: hide-values
-  radius:
-    description: Bar corner radius (null = let CSS tokens decide)
+  cornerRadius:
+    description: Bar corner radius in px (null = let CSS tokens decide)
     type: number
     default: null
+    attribute: corner-radius
   size:
     description: Chart size
     type: string

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

@@ -50,7 +50,7 @@
     --chat-msg-avatar-size-font:  var(--a-ui-sm);
     --chat-msg-avatar-weight:     var(--a-weight-semibold);
     --chat-bubble-font-size:      var(--a-body-size);
-    --chat-bubble-line-height:    var(--a-leading-normal);
+    --chat-bubble-line-height:    var(--a-font-leading-relaxed);
   }
 
   :scope {

package/components/code/code.css

@@ -107,9 +107,9 @@
   }
 
   & > header [slot="label"] {
-    font-weight: 500;
+    font-weight: var(--a-weight-medium);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: var(--a-font-tracking-wide);
   }
 
   /* Copy button — ghost style */
@@ -141,7 +141,7 @@
     overflow-x: auto;
     font-family: var(--code-font);
     font-size: var(--code-font-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     scrollbar-width: none;
   }
   & > pre::-webkit-scrollbar {
@@ -312,7 +312,7 @@
     color: var(--code-fg);
     font-family: var(--code-font);
     font-size: var(--code-font-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
   }
 
   :scope .cm-scroller {
@@ -377,7 +377,7 @@
 
   /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
   :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
-  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
+  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: var(--a-weight-medium); }
   :scope .tok-string      { color: var(--code-tok-string); }
   :scope .tok-number      { color: var(--code-tok-number); }
   :scope .tok-boolean     { color: var(--code-tok-boolean); }
@@ -385,7 +385,7 @@
   :scope .tok-punctuation { color: var(--code-tok-punctuation); }
   :scope .tok-function    { color: var(--code-tok-function); }
   :scope .tok-variable    { color: var(--code-tok-variable); }
-  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
+  :scope .tok-type        { color: var(--code-tok-type); font-weight: var(--a-weight-medium); }
   :scope .tok-property    { color: var(--code-tok-property); }
   :scope .tok-tag         { color: var(--code-tok-tag); }
   :scope .tok-attribute   { color: var(--code-tok-attribute); }