@ponchia/ui 0.3.6 → 0.4.1

package/docs/contrast.md

@@ -38,63 +38,182 @@ Overall: **all contractual pairings meet their floor ✅**.
 
 ## Light theme
 
-| Foreground | Background | Role | Held to | Ratio | Verdict |
-| --- | --- | --- | --- | --- | --- |
-| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 17.98:1 | ✅ pass |
-| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.80:1 | ✅ pass |
-| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.74:1 | ✅ pass |
-| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.16:1 | ✅ pass |
-| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.29:1 | ✅ pass |
-| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.39:1 | ✅ pass |
-| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.09:1 | ✅ pass |
-| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.60:1 | ✅ pass |
-| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.74:1 | ✅ pass |
-| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.32:1 | ✅ pass |
-| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.96:1 | ✅ pass |
-| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.18:1 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.71:1 | ✅ pass |
-| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.18:1 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.71:1 | ✅ pass |
-| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | ✅ pass |
-| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | ✅ pass |
-| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | ✅ pass |
-| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | ✅ pass |
-| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.39:1 | ℹ️ not gated |
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 17.98:1 | Lc 99 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.80:1 | Lc 106 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.74:1 | Lc 94 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.16:1 | Lc 91 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.29:1 | Lc 98 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.39:1 | Lc 87 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.09:1 | Lc 71 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.60:1 | Lc 78 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.74:1 | Lc 67 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.32:1 | Lc 75 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.96:1 | Lc 82 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.18:1 | Lc 79 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.71:1 | Lc 67 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.18:1 | Lc 73 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.71:1 | Lc 67 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | Lc 75 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | Lc 78 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | Lc 79 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | Lc 78 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.39:1 | Lc 47 | ℹ️ not gated |
 
 ## Dark theme
 
-| Foreground | Background | Role | Held to | Ratio | Verdict |
-| --- | --- | --- | --- | --- | --- |
-| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 18.76:1 | ✅ pass |
-| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 17.47:1 | ✅ pass |
-| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 15.55:1 | ✅ pass |
-| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 12.04:1 | ✅ pass |
-| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 11.22:1 | ✅ pass |
-| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.98:1 | ✅ pass |
-| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.69:1 | ✅ pass |
-| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.30:1 | ✅ pass |
-| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.72:1 | ✅ pass |
-| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.88:1 | ✅ pass |
-| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.41:1 | ✅ pass |
-| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.95:1 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.95:1 | ✅ pass |
-| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.55:1 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.95:1 | ✅ pass |
-| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 8.70:1 | ✅ pass |
-| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 10.66:1 | ✅ pass |
-| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.00:1 | ✅ pass |
-| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 8.41:1 | ✅ pass |
-| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.01:1 | ℹ️ not gated |
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 15.01:1 | Lc 91 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 13.65:1 | Lc 90 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 12.44:1 | Lc 89 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.20:1 | Lc 73 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 10.19:1 | Lc 72 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.28:1 | Lc 71 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 7.16:1 | Lc 50 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 6.52:1 | Lc 49 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 5.94:1 | Lc 48 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.14:1 | Lc 45 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 5.58:1 | Lc 44 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.95:1 | Lc 43 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.31:1 | Lc 40 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 4.83:1 | Lc 39 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.31:1 | Lc 40 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 7.58:1 | Lc 57 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 9.29:1 | Lc 67 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 5.23:1 | Lc 42 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 7.33:1 | Lc 55 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.29:1 | Lc 15 | ℹ️ not gated |
+
+## Display colorways (skins)
+
+The opt-in `data-bronto-skin` colorways (`@ponchia/ui/css/skins.css`,
+authored in `tokens/skins.js`) re-point the one accent to a different single
+hue. Because a shipped colorway is part of the framework — not an arbitrary
+consumer re-brand — **its accent is gated to the same floors as the core**:
+the primary-button label, accent-as-text, and the focus ring/accent fill. Only
+the accent-touching pairings are shown (a skin leaves the canvas and status
+palette untouched). Accents are authored in OKLCH; `--accent-text` is the
+`color-mix`-derived `--accent-strong`, exactly as in the core palette.
+
+### Amber CRT — light
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.75:1 | Lc 79 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 7.44:1 | Lc 86 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.66:1 | Lc 83 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.14:1 | Lc 71 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.66:1 | Lc 78 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.14:1 | Lc 71 | ✅ pass |
+
+### Amber CRT — dark
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 11.57:1 | Lc 75 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 10.52:1 | Lc 74 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 11.88:1 | Lc 72 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 10.60:1 | Lc 70 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 9.64:1 | Lc 69 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 10.60:1 | Lc 70 | ✅ pass |
+
+### E-ink — light
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 12.23:1 | Lc 93 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 13.47:1 | Lc 100 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 11.74:1 | Lc 101 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 10.66:1 | Lc 90 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 11.74:1 | Lc 97 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 10.66:1 | Lc 90 | ✅ pass |
+
+### E-ink — dark
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 12.47:1 | Lc 79 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 11.35:1 | Lc 78 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 12.86:1 | Lc 76 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 11.48:1 | Lc 74 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 10.44:1 | Lc 73 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 11.48:1 | Lc 74 | ✅ pass |
+
+### Phosphor Green — light
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.22:1 | Lc 77 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.85:1 | Lc 83 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.19:1 | Lc 81 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.71:1 | Lc 69 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.19:1 | Lc 75 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.71:1 | Lc 69 | ✅ pass |
+
+### Phosphor Green — dark
+
+| Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
+| --- | --- | --- | --- | --- | --- | --- |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 12.97:1 | Lc 82 | ✅ pass |
+| `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 11.80:1 | Lc 81 | ✅ pass |
+| `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 13.75:1 | Lc 80 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 12.27:1 | Lc 79 | ✅ pass |
+| `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 11.16:1 | Lc 78 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 12.27:1 | Lc 79 | ✅ pass |
+
+## Data-viz palette (advisory)
+
+The opt-in Tier-4 chart palette (`@ponchia/ui/css/dataviz.css`, authored in
+`tokens/charts.js`) is gated differently: categorical series are held to
+**mutual distinguishability under normal + simulated protan/deutan/tritan
+vision** (`check:charts`, OKLab ΔE), and colour is **never the sole signal** —
+each series ships a matching `--chart-pattern-*` dot-matrix fill. So the
+WCAG ratios below are **advisory** (a chart fill is not body text); use them to
+pick a darker series for thin lines/points, or rely on the pattern. Series 1 is
+the brand accent.
+
+### Light theme — categorical vs `--bg`
+
+| Series | Colour | Ratio _(advisory)_ | APCA _(advisory)_ |
+| --- | --- | --- | --- |
+| 1 _(accent)_ | `#d71921` | 4.71:1 | Lc 67 |
+| 2 | `#e69f00` | 2.05:1 | Lc 37 |
+| 3 | `#56b4e9` | 2.10:1 | Lc 39 |
+| 4 | `#009e73` | 3.11:1 | Lc 54 |
+| 5 | `#f0e442` | 1.20:1 | Lc 9 |
+| 6 | `#0072b2` | 4.71:1 | Lc 68 |
+| 7 | `#cc79a7` | 2.78:1 | Lc 51 |
+| 8 | `#4d5358` | 7.08:1 | Lc 80 |
+
+### Dark theme — categorical vs `--bg`
+
+| Series | Colour | Ratio _(advisory)_ | APCA _(advisory)_ |
+| --- | --- | --- | --- |
+| 1 _(accent)_ | `#ff3b41` | 5.31:1 | Lc 40 |
+| 2 | `#e69f00` | 8.32:1 | Lc 58 |
+| 3 | `#56b4e9` | 8.12:1 | Lc 56 |
+| 4 | `#009e73` | 5.48:1 | Lc 40 |
+| 5 | `#f0e442` | 14.17:1 | Lc 87 |
+| 6 | `#0072b2` | 3.61:1 | Lc 26 |
+| 7 | `#cc79a7` | 6.12:1 | Lc 44 |
+| 8 | `#4d5358` | 2.40:1 | Lc 14 |
 
 ## Scope & caveats
 
-- This gates the **framework token contract**, not arbitrary consumer
-  re-brands. Re-accenting via `--accent` is your contrast obligation
-  (see [theming.md](theming.md) → "Re-brand obligations"); this table is
-  the guarantee for the *shipped* palettes only.
+- This gates the **framework token contract** (core palette **and** every
+  shipped colorway), not arbitrary consumer re-brands. Re-accenting via
+  `--accent` yourself is your contrast obligation (see [theming.md](theming.md)
+  → "Re-brand obligations"); this table is the guarantee for the *shipped*
+  palettes and skins only.
 - Status colours (`--success` / `--warning` / `--danger`) are gated
   as **indicators** (3:1). If you set status text *as body copy* on a
   surface, verify 4.5:1 yourself or pair it with an icon/label.
-- Ratios are sRGB WCAG 2.1. The newer APCA model is intentionally not
-  used — WCAG 2.1 AA is the testable legal/again-axe baseline the e2e
-  suite already asserts.
+- The gated **Ratio** is sRGB WCAG 2.1 AA — the testable legal / axe-compatible
+  baseline the e2e suite also asserts. The **APCA** column (APCA-W3 0.1.9 `Lc`)
+  is **advisory only**: a perceptual cross-check that, unlike WCAG 2.1's
+  symmetric ratio, accounts for polarity and is the WCAG 3 candidate. It does
+  **not** gate the build while WCAG 3 is a Working Draft — use it to tune
+  quality, not to override the WCAG 2.1 floor. As a rough read, body text wants
+  `Lc` ≥ 75 and non-text/large ≥ 45–60.

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 262 classes across 109 component groups
+- 303 classes across 121 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -179,6 +179,18 @@ each one matches a real selector in the stylesheet.
 | `cls.breadcrumb` | `ui-breadcrumb` | base |
 | `cls.breadcrumbItem` | `ui-breadcrumb__item` | part |
 
+### `.ui-break-after`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.breakAfter` | `ui-break-after` | base |
+
+### `.ui-break-before`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.breakBefore` | `ui-break-before` | base |
+
 ### `.ui-button`
 
 | Registry key | Class | Kind |
@@ -226,6 +238,21 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.center` | `ui-center` | base |
 
+### `.ui-chart`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.chart` | `ui-chart` | base |
+| `cls.chartBar` | `ui-chart__bar` | part |
+| `cls.chartCaption` | `ui-chart__caption` | part |
+| `cls.chartFallback` | `ui-chart__fallback` | part |
+| `cls.chartFill` | `ui-chart__fill` | part |
+| `cls.chartLabel` | `ui-chart__label` | part |
+| `cls.chartLegend` | `ui-chart__legend` | part |
+| `cls.chartPlot` | `ui-chart__plot` | part |
+| `cls.chartSwatch` | `ui-chart__swatch` | part |
+| `cls.chartTrack` | `ui-chart__track` | part |
+
 ### `.ui-check`
 
 | Registry key | Class | Kind |
@@ -393,6 +420,12 @@ each one matches a real selector in the stylesheet.
 | `cls.hint` | `ui-hint` | base |
 | `cls.hintError` | `ui-hint--error` | modifier |
 
+### `.ui-icon`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.icon` | `ui-icon` | base |
+
 ### `.ui-input`
 
 | Registry key | Class | Kind |
@@ -420,6 +453,12 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.kbd` | `ui-kbd` | base |
 
+### `.ui-keep`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.keep` | `ui-keep` | base |
+
 ### `.ui-key-value`
 
 | Registry key | Class | Kind |
@@ -547,6 +586,18 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.popover` | `ui-popover` | base |
 
+### `.ui-print-exact`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.printExact` | `ui-print-exact` | base |
+
+### `.ui-print-only`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.printOnly` | `ui-print-only` | base |
+
 ### `.ui-progress`
 
 | Registry key | Class | Kind |
@@ -581,12 +632,56 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.ratio` | `ui-ratio` | base |
 
+### `.ui-report`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.report` | `ui-report` | base |
+| `cls.reportAppendix` | `ui-report__appendix` | part |
+| `cls.reportCaption` | `ui-report__caption` | part |
+| `cls.reportCover` | `ui-report__cover` | part |
+| `cls.reportCoverCompact` | `ui-report__cover--compact` | modifier |
+| `cls.reportEvidence` | `ui-report__evidence` | part |
+| `cls.reportFigure` | `ui-report__figure` | part |
+| `cls.reportFinding` | `ui-report__finding` | part |
+| `cls.reportFootnotes` | `ui-report__footnotes` | part |
+| `cls.reportHeader` | `ui-report__header` | part |
+| `cls.reportMeta` | `ui-report__meta` | part |
+| `cls.reportSection` | `ui-report__section` | part |
+| `cls.reportSectionUnnumbered` | `ui-report__section--unnumbered` | modifier |
+| `cls.reportSectionHead` | `ui-report__section-head` | part |
+| `cls.reportSources` | `ui-report__sources` | part |
+| `cls.reportSubtitle` | `ui-report__subtitle` | part |
+| `cls.reportSummary` | `ui-report__summary` | part |
+| `cls.reportTitle` | `ui-report__title` | part |
+| `cls.reportToc` | `ui-report__toc` | part |
+| `cls.reportCompact` | `ui-report--compact` | modifier |
+| `cls.reportNumbered` | `ui-report--numbered` | modifier |
+
 ### `.ui-reveal`
 
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.reveal` | `ui-reveal` | base |
 
+### `.ui-screen-only`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.screenOnly` | `ui-screen-only` | base |
+
+### `.ui-scroll-progress`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.scrollProgress` | `ui-scroll-progress` | base |
+
+### `.ui-scroll-reveal`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.scrollReveal` | `ui-scroll-reveal` | base |
+
 ### `.ui-search`
 
 | Registry key | Class | Kind |
@@ -826,6 +921,12 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.visuallyHidden` | `ui-visually-hidden` | base |
 
+### `.ui-vt`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.vt` | `ui-vt` | base |
+
 ## Table-local state classes
 
 Not in `cls` by design — these are plain `is-*` state hooks scoped to
@@ -913,10 +1014,10 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--z-overlay` | `30` |
 | `--z-popover` | `50` |
 | `--z-toast` | `60` |
-| `--accent-1` | `color-mix(in srgb, var(--accent) 8%, var(--bg))` |
-| `--accent-2` | `color-mix(in srgb, var(--accent) 16%, var(--bg))` |
-| `--accent-3` | `color-mix(in srgb, var(--accent) 32%, var(--bg))` |
-| `--accent-4` | `color-mix(in srgb, var(--accent) 60%, var(--bg))` |
+| `--accent-1` | `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))` |
+| `--accent-2` | `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))` |
+| `--accent-3` | `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))` |
+| `--accent-4` | `color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))` |
 | `--accent-5` | `var(--accent)` |
 | `--accent-6` | `var(--accent-strong)` |
 | `--surface-1` | `var(--bg)` |
@@ -961,6 +1062,7 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--text-soft` | `#353533` |
 | `--text-dim` | `#686863` |
 | `--accent` | `#d71921` |
+| `--accent-ramp-end` | `#ffffff` |
 | `--accent-strong` | `color-mix(in srgb, var(--accent) 83%, #000)` |
 | `--accent-text` | `var(--accent-strong)` |
 | `--accent-soft` | `color-mix(in srgb, var(--accent) 10%, transparent)` |
@@ -968,8 +1070,6 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--success-soft` | `rgb(47, 125, 79, 0.12)` |
 | `--warning` | `#806414` |
 | `--warning-soft` | `rgb(128, 100, 20, 0.13)` |
-| `--orange` | `#a85f32` |
-| `--orange-soft` | `rgb(168, 95, 50, 0.13)` |
 | `--danger` | `#c01622` |
 | `--danger-soft` | `rgb(192, 22, 34, 0.1)` |
 | `--info` | `#1f63c4` |
@@ -987,18 +1087,19 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 
 | Token | Value |
 | --- | --- |
-| `--bg` | `#000000` |
-| `--bg-elevated` | `#0a0a0a` |
+| `--bg` | `#121212` |
+| `--bg-elevated` | `#181818` |
 | `--bg-accent` | `color-mix(in srgb, var(--accent) 8%, transparent)` |
-| `--panel` | `#0c0c0c` |
-| `--panel-strong` | `#141414` |
-| `--panel-soft` | `#1a1a1a` |
-| `--line` | `#2a2a2a` |
-| `--line-strong` | `#444444` |
-| `--text` | `#f2f2f2` |
-| `--text-soft` | `#c4c4c4` |
-| `--text-dim` | `#858585` |
+| `--panel` | `#1c1c1c` |
+| `--panel-strong` | `#222222` |
+| `--panel-soft` | `#242424` |
+| `--line` | `#383838` |
+| `--line-strong` | `#555555` |
+| `--text` | `#e6e6e6` |
+| `--text-soft` | `#c8c8c8` |
+| `--text-dim` | `#a0a0a0` |
 | `--accent` | `#ff3b41` |
+| `--accent-ramp-end` | `#000000` |
 | `--accent-strong` | `color-mix(in srgb, var(--accent) 84%, #fff)` |
 | `--accent-text` | `var(--accent-strong)` |
 | `--accent-soft` | `color-mix(in srgb, var(--accent) 14%, transparent)` |
@@ -1006,8 +1107,6 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--success-soft` | `rgb(78, 194, 126, 0.14)` |
 | `--warning` | `#d8bd72` |
 | `--warning-soft` | `rgb(216, 189, 114, 0.14)` |
-| `--orange` | `#d08c5b` |
-| `--orange-soft` | `rgb(208, 140, 91, 0.15)` |
 | `--danger` | `#ff4d54` |
 | `--danger-soft` | `rgb(255, 77, 84, 0.15)` |
 | `--info` | `#6fb0e6` |