@ponchia/ui 0.7.0 → 0.8.1

package/dist/css/workbench.css

@@ -1 +1 @@
-@layer bronto{.ui-inspector{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-toolstrip{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;flex-wrap: wrap;gap: var(--space-xs);min-inline-size: 0;padding: 0.35rem}.ui-toolstrip--floating{box-shadow: var(--shadow-raised)}.ui-toolstrip--compact{gap: var(--space-2xs);padding: 0.25rem}.ui-toolstrip__brand{align-items: baseline;display: inline-flex;flex: 0 1 auto;gap: var(--space-xs);min-inline-size: 0;padding-inline: var(--space-xs)}.ui-toolstrip__brand strong{color: var(--text);font-size: var(--text-sm)}.ui-toolstrip__context{color: var(--text-dim);font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__group,.ui-toolstrip__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-2xs)}.ui-toolstrip__group{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);padding: 0.16rem}.ui-toolstrip__search{flex: 1 1 14rem;min-inline-size: min(100%,11rem)}.ui-toolstrip__actions{margin-inline-start: auto}.ui-segmented-buttons{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: inline-flex;flex-wrap: wrap;gap: 0.16rem;padding: 0.16rem}.ui-segmented-buttons__button{background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--mono);font-size: var(--text-xs);font-weight: 700;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 1.9rem;padding: 0.48rem 0.7rem;text-transform: uppercase}.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: var(--accent);border-color: var(--accent);color: var(--button-text)}.ui-segmented-buttons__button:disabled,.ui-segmented-buttons__button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(6rem,38%) 1fr}.ui-property__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--mono);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}@media (hover: hover){.ui-segmented-buttons__button:hover:not(:disabled,[aria-disabled='true'],[aria-pressed='true'],.is-active){background: var(--panel);border-color: var(--line-strong);color: var(--text)}}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: -2px}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: Highlight;border-color: Highlight;color: HighlightText}.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}
+@layer bronto{.ui-inspector{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-toolstrip{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;flex-wrap: wrap;gap: var(--space-xs);min-inline-size: 0;padding: 0.35rem}.ui-toolstrip--floating{box-shadow: var(--shadow-raised)}.ui-toolstrip--compact{gap: var(--space-2xs);padding: 0.25rem}.ui-toolstrip--pane{background: none;border: 0;border-block-end: 1px solid var(--line);border-radius: 0;flex-wrap: nowrap;gap: var(--space-2xs);overflow-x: auto;padding: 0.3rem var(--space-xs);scrollbar-width: thin}.ui-toolstrip__fill{flex: 1 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__brand{align-items: baseline;display: inline-flex;flex: 0 1 auto;gap: var(--space-xs);min-inline-size: 0;padding-inline: var(--space-xs)}.ui-toolstrip__brand strong{color: var(--text);font-size: var(--text-sm)}.ui-toolstrip__context{color: var(--text-dim);font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__group,.ui-toolstrip__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-2xs)}.ui-toolstrip__group{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);padding: 0.16rem}.ui-toolstrip__search{flex: 1 1 14rem;min-inline-size: min(100%,11rem)}.ui-toolstrip__actions{margin-inline-start: auto}.ui-segmented-buttons{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: inline-flex;flex-wrap: wrap;gap: 0.16rem;padding: 0.16rem}.ui-segmented-buttons__button{background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--mono);font-size: var(--text-xs);font-weight: 700;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 1.9rem;padding: 0.48rem 0.7rem;text-transform: uppercase}.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: var(--accent);border-color: var(--accent);color: var(--button-text)}.ui-segmented-buttons__button:disabled,.ui-segmented-buttons__button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(6rem,38%) 1fr}.ui-property__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0}.ui-pane{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: flex;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: hidden}.ui-pane__head{align-items: center;background: var(--bg-elevated);border-block-end: 1px solid var(--line);cursor: grab;display: flex;flex: none;gap: var(--space-2xs);min-block-size: var(--pane-head,2.5rem);padding: var(--space-2xs) var(--space-xs)}.ui-pane__head:active{cursor: grabbing}.ui-pane__title{flex: 1 1 auto;font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-pane__title-input{background: var(--bg-elevated);border: 1px solid var(--accent);border-radius: var(--radius-sm);color: inherit;font: inherit;letter-spacing: inherit;margin-block: -1px;max-inline-size: 100%;min-inline-size: 0;padding: 0 0.25rem}.ui-pane__actions{display: flex;flex: 0 1 auto;flex-wrap: nowrap;gap: var(--space-2xs);min-inline-size: 0;overflow-x: auto;scrollbar-width: thin}.ui-pane__actions:empty{display: none}.ui-pane__body{display: flex;flex: 1;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: auto}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--mono);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-selectionbar--anchored,.ui-toolstrip--anchored{--anchor-offset: var(--space-sm);inset-inline-start: 50%;max-inline-size: calc(100% - 2 * var(--space-md));position: absolute;transform: translateX(-50%)}.ui-selectionbar--anchored,.ui-toolstrip--anchored,.ui-selectionbar--anchor-block-end,.ui-toolstrip--anchor-block-end{inset-block: auto max(var(--anchor-offset),var(--safe-area-bottom))}.ui-selectionbar--anchor-block-start,.ui-toolstrip--anchor-block-start{inset-block: max(var(--anchor-offset),var(--safe-area-top)) auto}@media (hover: hover){.ui-segmented-buttons__button:hover:not(:disabled,[aria-disabled='true'],[aria-pressed='true'],.is-active){background: var(--panel);border-color: var(--line-strong);color: var(--text)}}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: -2px}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: Highlight;border-color: Highlight;color: HighlightText}.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}

package/docs/adr/0001-color-system.md

@@ -165,13 +165,42 @@ Hard acceptance criteria for every step below:
    var(--accent) …)` declared on `:root` and only re-evaluates against the new
    accent on the element that carries it; a skin on a subtree would leave that
    family stale, so the selectors are `:root`-anchored and a subtree skin
-   no-ops. Each skin re-points only `--accent` (+ a dark `--dotmatrix-glow`);
-   the family + dot-matrix + glyphs follow automatically. Single-hue per skin →
+   no-ops. Each skin re-points `--accent` (+ a dark `--dotmatrix-glow`); the
+   family + dot-matrix + glyphs follow automatically. Single-hue per skin →
    keeps the one-accent discipline while unlocking range across skins. No
    multi-hue palette. (A future per-subtree skin would need to re-declare the
    derived family — deferred; whole-page is the natural colorway scope.) Skins
    inherit the existing `forced-colors` + `print` behavior in `css/base.css` /
-   `css/forms.css` (they touch only the accent, never the canvas).
+   `css/forms.css`.
+
+   **Amended in 0.8.0 — a colorway also owns the neutral canvas.** The original
+   rule was accent-only, on the reasoning that the canvas is identity and the
+   accent is expression. A downstream consumer disproved it in the most direct
+   way available: offering these three as pickable looks, it found that
+   "Amber CRT" left the surface grey, and shipped a hand-written amber canvas of
+   its own — raw hex, dark theme only, outside OKLCH, outside `check-contrast`,
+   with `e-ink` silently un-tinted because a partial canvas has no failing edge.
+   Every one of those defects is a consequence of the rule, not of the consumer.
+   A look named after a phosphor display that renders on neutral grey is not a
+   colorway; it is an accent swatch with a colorway's name.
+
+   The amendment keeps the discipline that made the original rule right:
+
+   - The canvas is **derived, not picked**. Each of the ten neutrals
+     (`SKIN_CANVAS_TOKENS` in `tokens/skins.js`) keeps the core token's OKLCH
+     *lightness* exactly, adopts the skin accent's *hue*, and takes a small
+     role-scaled chroma. Contrast tracks relative luminance, which OKLCH L
+     tracks closely, so holding L fixed holds every pairing's ratio.
+   - It is **proven, not asserted**. `gen-contrast.mjs` widens a canvas-moving
+     skin's audit from the accent subset to the *full* 24-pair table, so all 21
+     gated pairings are re-measured per skin per theme on every run.
+   - The canvas is **all-or-nothing**, in both directions: `check-skins.mjs`
+     rejects a skin that re-points some neutrals but not others, and one that
+     re-points them in one theme but not the other. Those are exactly the two
+     shapes the consumer's hand-written version had.
+   - **Status colours stay locked.** They are not in `SKIN_CANVAS_TOKENS`: a
+     warning must look like a warning in every skin. Deriving status from a
+     colorway remains rejected (see Rejected alternatives).
 5. **OKLCH for new work first.** *(done for colorways — accents authored in
    OKLCH in `tokens/skins.js`; the contrast tooling now parses `oklch()` →
    sRGB, so skin accents are gated, not eyeballed.)* The core ramp followed in

package/docs/contrast.md

@@ -111,36 +111,73 @@ palette untouched). Accents are authored in OKLCH; `--accent-text` is the
 
 | 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 78.9 | ✅ pass |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 17.97:1 | Lc 99.0 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.84:1 | Lc 105.8 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.77:1 | Lc 94.4 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.20:1 | Lc 91.3 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.37:1 | Lc 98.1 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.45:1 | Lc 86.8 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.11:1 | Lc 71.4 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.64:1 | Lc 78.2 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.77:1 | Lc 66.9 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.73:1 | Lc 78.7 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 7.44:1 | Lc 85.6 | ✅ pass |
-| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 9.13:1 | Lc 78.7 | ✅ pass |
+| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 9.19:1 | Lc 78.7 | ✅ pass |
 | `--accent-text` | `--accent-soft` | Accent text on an accent tint | Advisory (translucent tint — not gated) | 6.48:1 | Lc 76.1 | ℹ️ not gated |
 | `--accent-text` | `--bg-accent` | Accent text on an accent-tinted surface | Advisory (translucent tint — not gated) | 6.85:1 | Lc 79.9 | ℹ️ not gated |
 | `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.66:1 | Lc 83.3 | ✅ pass |
 | `--on-accent` | `--accent` | Ink on an accent fill | AA text (4.5:1) | 5.66:1 | Lc 83.3 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.14:1 | Lc 71.4 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 5.13:1 | Lc 71.2 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.66:1 | Lc 78.0 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.14:1 | Lc 71.4 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 5.13:1 | Lc 71.2 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | Lc 74.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | Lc 77.8 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | Lc 78.9 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | Lc 78.3 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.41:1 | Lc 47.4 | ℹ️ not gated |
 
 ### Amber CRT — dark
 
 | 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.0 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 13.64:1 | Lc 90.0 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 12.43:1 | Lc 88.9 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.19:1 | Lc 72.7 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 10.18:1 | Lc 71.7 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.27:1 | Lc 70.5 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 7.16:1 | Lc 50.2 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 6.51:1 | Lc 49.2 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 5.93:1 | Lc 48.1 | ✅ pass |
 | `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 11.84:1 | Lc 76.1 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 10.77:1 | Lc 75.1 | ✅ pass |
-| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.83:1 | Lc 65.5 | ✅ pass |
+| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.82:1 | Lc 65.4 | ✅ pass |
 | `--accent-text` | `--accent-soft` | Accent text on an accent tint | Advisory (translucent tint — not gated) | 1.46:1 | Lc 20.8 | ℹ️ not gated |
 | `--accent-text` | `--bg-accent` | Accent text on an accent-tinted surface | Advisory (translucent tint — not gated) | 1.51:1 | Lc 23.2 | ℹ️ not gated |
 | `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 11.88:1 | Lc 71.6 | ✅ pass |
 | `--on-accent` | `--accent` | Ink on an accent fill | AA text (4.5:1) | 11.88:1 | Lc 71.6 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 10.60:1 | Lc 69.9 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 10.60:1 | Lc 69.8 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 9.64:1 | Lc 68.9 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 10.60:1 | Lc 69.9 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 10.60:1 | Lc 69.8 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 7.58:1 | Lc 56.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 9.29:1 | Lc 66.6 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 5.23:1 | Lc 41.5 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 7.33:1 | Lc 54.8 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.28:1 | Lc 14.5 | ℹ️ not gated |
 
 ### E-ink — light
 
 | 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.2 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.79:1 | Lc 105.8 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.73:1 | Lc 94.5 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.16:1 | Lc 91.4 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.29:1 | Lc 98.0 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.39:1 | Lc 86.7 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.09:1 | Lc 71.4 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.61:1 | Lc 78.0 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.74:1 | Lc 66.7 | ✅ pass |
 | `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 12.23:1 | Lc 93.3 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 13.47:1 | Lc 99.9 | ✅ pass |
 | `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 8.78:1 | Lc 76.3 | ✅ pass |
@@ -151,51 +188,98 @@ palette untouched). Accents are authored in OKLCH; `--accent-text` is the
 | `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 10.66:1 | Lc 90.4 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 11.74:1 | Lc 97.0 | ✅ pass |
 | `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 10.66:1 | Lc 90.4 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | Lc 74.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | Lc 77.8 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | Lc 78.9 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | Lc 78.3 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.39:1 | Lc 47.1 | ℹ️ not gated |
 
 ### E-ink — dark
 
 | Foreground | Background | Role | Held to | Ratio | APCA _(advisory)_ | Verdict |
 | --- | --- | --- | --- | --- | --- | --- |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 15.02:1 | Lc 91.1 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 13.66:1 | Lc 90.1 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 12.45:1 | Lc 89.0 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.20:1 | Lc 72.8 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 10.19:1 | Lc 71.8 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.29:1 | Lc 70.6 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 7.17:1 | Lc 50.3 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 6.52:1 | Lc 49.3 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 5.94:1 | Lc 48.2 | ✅ pass |
 | `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 12.72:1 | Lc 80.3 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 11.57:1 | Lc 79.3 | ✅ pass |
-| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.66:1 | Lc 65.0 | ✅ pass |
+| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.67:1 | Lc 65.0 | ✅ pass |
 | `--accent-text` | `--accent-soft` | Accent text on an accent tint | Advisory (translucent tint — not gated) | 1.38:1 | Lc 18.0 | ℹ️ not gated |
 | `--accent-text` | `--bg-accent` | Accent text on an accent-tinted surface | Advisory (translucent tint — not gated) | 1.42:1 | Lc 19.9 | ℹ️ not gated |
 | `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 12.86:1 | Lc 75.6 | ✅ pass |
 | `--on-accent` | `--accent` | Ink on an accent fill | AA text (4.5:1) | 12.86:1 | Lc 75.6 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 11.48:1 | Lc 74.1 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 11.47:1 | Lc 74.1 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 10.44:1 | Lc 73.1 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 11.48:1 | Lc 74.1 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 11.47:1 | Lc 74.1 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 7.58:1 | Lc 56.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 9.29:1 | Lc 66.6 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 5.23:1 | Lc 41.5 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 7.33:1 | Lc 54.8 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.29:1 | Lc 14.6 | ℹ️ not gated |
 
 ### 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 76.6 | ✅ pass |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 18.02:1 | Lc 99.5 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 19.72:1 | Lc 105.8 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 16.67:1 | Lc 94.4 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.10:1 | Lc 91.5 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 12.14:1 | Lc 97.7 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 10.26:1 | Lc 86.4 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 5.06:1 | Lc 71.4 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 5.53:1 | Lc 77.7 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 4.68:1 | Lc 66.3 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 6.26:1 | Lc 77.1 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 6.85:1 | Lc 83.3 | ✅ pass |
-| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 9.16:1 | Lc 78.9 | ✅ pass |
+| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 9.05:1 | Lc 78.5 | ✅ pass |
 | `--accent-text` | `--accent-soft` | Accent text on an accent tint | Advisory (translucent tint — not gated) | 5.98:1 | Lc 74.1 | ℹ️ not gated |
 | `--accent-text` | `--bg-accent` | Accent text on an accent-tinted surface | Advisory (translucent tint — not gated) | 6.32:1 | Lc 77.7 | ℹ️ not gated |
 | `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 5.19:1 | Lc 80.7 | ✅ pass |
 | `--on-accent` | `--accent` | Ink on an accent fill | AA text (4.5:1) | 5.19:1 | Lc 80.7 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.71:1 | Lc 68.6 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 4.74:1 | Lc 69.1 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 5.19:1 | Lc 75.3 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.71:1 | Lc 68.6 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 4.74:1 | Lc 69.1 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 5.04:1 | Lc 74.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 5.60:1 | Lc 77.8 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 6.21:1 | Lc 78.9 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 5.77:1 | Lc 78.3 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.35:1 | Lc 46.4 | ℹ️ not gated |
 
 ### 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) | 13.18:1 | Lc 82.8 | ✅ pass |
+| `--text` | `--bg` | Body text on page background | AA text (4.5:1) | 15.11:1 | Lc 91.8 | ✅ pass |
+| `--text` | `--surface` | Body text on a card/panel | AA text (4.5:1) | 13.80:1 | Lc 90.8 | ✅ pass |
+| `--text` | `--surface-muted` | Body text on a muted panel | AA text (4.5:1) | 12.57:1 | Lc 89.6 | ✅ pass |
+| `--text-soft` | `--bg` | Secondary text on page background | AA text (4.5:1) | 11.28:1 | Lc 73.3 | ✅ pass |
+| `--text-soft` | `--surface` | Secondary text on a card | AA text (4.5:1) | 10.30:1 | Lc 72.4 | ✅ pass |
+| `--text-soft` | `--surface-muted` | Secondary text on a muted panel | AA text (4.5:1) | 9.38:1 | Lc 71.2 | ✅ pass |
+| `--text-dim` | `--bg` | Dim/meta text on page background | AA text (4.5:1) | 7.22:1 | Lc 50.8 | ✅ pass |
+| `--text-dim` | `--surface` | Dim/meta text on a card | AA text (4.5:1) | 6.60:1 | Lc 49.8 | ✅ pass |
+| `--text-dim` | `--surface-muted` | Dim/meta text on a muted panel | AA text (4.5:1) | 6.01:1 | Lc 48.7 | ✅ pass |
+| `--accent-text` | `--bg` | Accent text on page background | AA text (4.5:1) | 13.13:1 | Lc 82.8 | ✅ pass |
 | `--accent-text` | `--surface` | Accent text on a card | AA text (4.5:1) | 11.99:1 | Lc 81.8 | ✅ pass |
-| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.66:1 | Lc 65.0 | ✅ pass |
+| `--text-soft` | `--accent-soft` over `--surface-muted` | Neutral tag/badge text on an accent tint | AA text (4.5:1) | 6.74:1 | Lc 65.6 | ✅ pass |
 | `--accent-text` | `--accent-soft` | Accent text on an accent tint | Advisory (translucent tint — not gated) | 1.33:1 | Lc 15.3 | ℹ️ not gated |
 | `--accent-text` | `--bg-accent` | Accent text on an accent-tinted surface | Advisory (translucent tint — not gated) | 1.37:1 | Lc 17.3 | ℹ️ not gated |
 | `--button-text` | `--accent` | Label on the primary button | AA text (4.5:1) | 13.75:1 | Lc 79.7 | ✅ pass |
 | `--on-accent` | `--accent` | Ink on an accent fill | AA text (4.5:1) | 13.75:1 | Lc 79.7 | ✅ pass |
-| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 12.27:1 | Lc 78.5 | ✅ pass |
+| `--focus-ring` | `--bg` | Focus ring vs page background | UI / large (3:1) | 12.22:1 | Lc 78.5 | ✅ pass |
 | `--focus-ring` | `--surface` | Focus ring vs a card | UI / large (3:1) | 11.16:1 | Lc 77.5 | ✅ pass |
-| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 12.27:1 | Lc 78.5 | ✅ pass |
+| `--accent` | `--bg` | Accent fill vs page background | UI / large (3:1) | 12.22:1 | Lc 78.5 | ✅ pass |
+| `--success` | `--surface` | Success indicator vs a card | UI / large (3:1) | 7.58:1 | Lc 56.6 | ✅ pass |
+| `--warning` | `--surface` | Warning indicator vs a card | UI / large (3:1) | 9.29:1 | Lc 66.6 | ✅ pass |
+| `--danger` | `--surface` | Danger indicator vs a card | UI / large (3:1) | 5.23:1 | Lc 41.5 | ✅ pass |
+| `--info` | `--surface` | Info indicator vs a card | UI / large (3:1) | 7.33:1 | Lc 54.8 | ✅ pass |
+| `--line-strong` | `--surface` | Strong hairline vs a card | Decorative (1.4.11-exempt) | 2.33:1 | Lc 15.1 | ℹ️ not gated |
 
 ## Data-viz palette (advisory)
 

package/docs/migrations/0.7-to-0.8.md

@@ -0,0 +1,216 @@
+# Migrating 0.7 to 0.8
+
+Machine-readable migration graph: [`MIGRATIONS.json`](../../MIGRATIONS.json) —
+it has no entry for this pair, because nothing was renamed or removed. Every
+class, token, attribute, and export valid in 0.7 is still valid.
+
+0.8.0 comes from auditing one real consumer's stylesheet in full. It repairs an
+accessibility floor, adds three surfaces that consumer had to hand-write, and
+changes what a colorway does. Only the last of those needs a decision from you.
+
+## 1. Decide what your skins should look like — the one breaking change
+
+**Only affects you if you set `data-bronto-skin`.** If you don't, skip to §2.
+
+Until 0.7, a colorway moved `--accent` and nothing else; the neutral canvas
+stayed grey, and ADR-0001 step 4 said so. From 0.8 a colorway also re-points ten
+canvas tokens per theme:
+
+```
+--bg  --bg-elevated  --panel  --panel-strong  --panel-soft
+--line  --line-strong  --text  --text-soft  --text-dim
+```
+
+So "Amber CRT" now actually renders amber. Nothing in your source changes and no
+checker will flag anything — the break is purely visual, which is why it is
+worth reading rather than discovering.
+
+**Contrast is not a regression risk.** Each neutral keeps the core token's OKLCH
+*lightness* exactly and moves only hue plus a small chroma, and `check-contrast`
+re-measures all 21 gated pairings per skin per theme. Status colours
+(`--success` / `--warning` / `--danger` / `--info`) are untouched by design: a
+warning must look like a warning in every skin.
+
+### If you already hand-wrote a canvas for a skin
+
+Delete it. That workaround is what motivated this change, and a hand-rolled
+version is almost certainly not contrast-gated, probably covers one theme, and
+probably misses whichever skin nobody opened.
+
+### If you want the 0.7 look back
+
+Re-declare the ten tokens after the skin import. They are ordinary custom
+properties on a `:root[data-bronto-skin=…]` selector inside `@layer bronto`, so
+un-layered app CSS wins without a specificity fight:
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/skins.css';
+
+/* Keep the neutral canvas grey under every colorway. */
+:root[data-bronto-skin] {
+  --bg: #f4f4f2;
+  --bg-elevated: #fbfbfa;
+  --panel: #ffffff;
+  --panel-strong: #ffffff;
+  --panel-soft: #ececea;
+  --line: #d8d8d4;
+  --line-strong: #a8a8a2;
+  --text: #0a0a0a;
+  --text-soft: #353533;
+  --text-dim: #686863;
+}
+```
+
+(Those are the 0.7 light values; take the dark set from `tokens/resolved.json`
+and repeat under `:root[data-theme='dark'][data-bronto-skin]`.)
+
+## 2. Delete your tap-target workaround
+
+The coarse-pointer floor was written as a bare `2.9rem`, and `css/base.css` sets
+`html { font-size: 0.9375rem }` — so it resolved to **43.5px**, half a pixel
+under the 44 that WCAG 2.5.5 and both platform HIGs require, and less than that
+under any host with a smaller root. If you noticed and declared your own 44px
+floor, you can now drop it:
+
+```diff
+-:root { --touch-target: 44px; }
+-
+-@media (pointer: coarse) {
+-  .my-control { min-block-size: var(--touch-target); }
+-}
+```
+
+Bronto's controls float to `var(--tap-target)` — `max(44px, 2.9rem)` — on their
+own. For your *own* controls, consume the token rather than a literal:
+
+```css
+@media (pointer: coarse) {
+  .my-control {
+    min-block-size: var(--tap-target); /* 44px floor, WCAG 2.5.5 */
+  }
+}
+```
+
+`--tap-target-min` is the WCAG 2.5.8 AA 24px floor, for controls that only have
+to clear the smaller bar. Both clamp in px on purpose: **keep the clamp if you
+override them.** A bare rem is how a 44px floor quietly becomes 43.5px.
+
+## 3. Delete your safe-area declarations
+
+0.7 had no `env()` awareness at all. If you declared your own insets, drop them —
+the same four names now ship:
+
+```diff
+-:root {
+-  --safe-area-top: env(safe-area-inset-top, 0px);
+-  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+-}
+```
+
+Eight viewport-anchored surfaces now read them: the app rail and topbar, a
+sticky site header, the skip link, both toast stacks, the drawer modal, and the
+lightbox. Every rule uses `max(<authored>, var(--safe-area-*))`, so **desktop
+rendering is unchanged**.
+
+They are indirected through custom properties rather than calling `env()` at the
+point of use, which matters twice: a desktop test runner cannot emulate `env()`
+but can override a property, and a host running inside its own chrome (an
+embedded webview, a kiosk frame) can declare the real insets. Follow the same
+convention for your own floating chrome:
+
+```css
+.my-floating-bar {
+  inset-block-end: max(1rem, var(--safe-area-bottom));
+}
+```
+
+## 4. Two new opt-in ergonomics
+
+Neither is required; both replace a common workaround.
+
+**`ui-button__label`** — an icon button can keep its words for the accessible
+name and for text-based test selectors while giving back the pixels. One markup
+shape serves both forms, and no `aria-label` can drift out of sync with the
+visible wording:
+
+```html
+<button class="ui-button ui-button--icon">
+  <span class="ui-icon" style="--icon-mask: …"></span>
+  <span class="ui-button__label">Delete</span>
+</button>
+```
+
+Drop `--icon` and the same markup renders glyph + word. The slot ellipsises
+rather than wrapping, so a labelled button in a tight bar shrinks instead of
+pushing its neighbours out.
+
+**`ui-button--dense`** — for bars whose *height* is the constraint: a pane title
+bar, a packed toolbar, a table row's actions. It lowers only the visual floor,
+to `--tap-target-min`. The coarse-pointer block still floats it to the full
+`--tap-target`, so a control you shrink for a mouse is never shrunk for a
+finger. `ui.button({ size: 'dense' })` in the recipe API.
+
+## 5. Retire your own severity vocabulary
+
+Nothing forces this, but it is the reason most likely to have produced
+divergent code. Bronto shipped the tones without the **scale**, so consumers
+invented tier names — and inside one app they drift, because each surface was
+written on a different day. If you have more than one, `css/state.css` now
+publishes the canonical ladder:
+
+```
+critical › error › warning › notice › ok      (+ unknown, outside the order)
+```
+
+```js
+import { severity, SEVERITY_LEVELS } from '@ponchia/ui/classes';
+
+severity('critical');                  // { class: 'ui-severity', 'data-level': 'critical' }
+severity('warning', { part: 'row' });  // { class: 'ui-severity-row', … }
+SEVERITY_LEVELS;                       // sort and filter from this, not a local copy
+```
+
+The level travels on `data-level` — one attribute name — so a chip, a row, a
+dot, and your own element all read the same selector, and your own element can
+take `var(--severity-tone)` without copying a colour table.
+
+Map your existing tiers onto it rather than keeping both. `unknown` is the
+landing spot for anything unmeasured or stale; do **not** map it to `ok`, which
+is an assertion of health and is how a dead collector reads as a healthy system.
+
+## 6. Other surfaces you may be hand-rolling
+
+Each of these replaced something a real consumer had built locally. None is
+required.
+
+- **`.ui-pane`** — a grab header, an in-place rename input, and an actions slot
+  that scrolls rather than pushing its last control past the clipped edge. If
+  you have a node/window/panel with a draggable title bar, this is it.
+  `.ui-panel` is still just a padded card.
+- **`.ui-toolstrip--pane`** — a control bar belonging to one pane rather than to
+  the app: no frame of its own, and it refuses to wrap so a second row cannot
+  resize live content underneath. Mark the shrinking element with
+  `.ui-toolstrip__fill`.
+- **`.ui-selectionbar--anchored`** (and the same on `.ui-toolstrip`) — viewport
+  anchoring for a floating bar, safe-area aware. Use
+  `--anchor-block-start` for the bar that must *not* sit under the thumb.
+- **`.ui-empty-state__glyph/__lead/__hint`** and **`--invite`** — the three
+  parts every empty surface re-invents, plus the distinction between reporting
+  absence and offering the next action.
+
+## 7. If you read `tokens.dtcg.json`
+
+Six new scale tokens are **deliberately absent** from it, listed in the root
+extension's `omittedCssVariables`: the two tap-target floors are `max()`
+comparisons and the four safe-area insets are `env()` reads, and neither has a
+conforming DTCG shape. Emitting one arm of a clamp, or the 0px fallback of an
+`env()`, would publish a value that is wrong everywhere it matters. Read
+`tokens.json` for the authored CSS. This is the same treatment `--shadow` and
+the em trackings already get.
+
+## Nothing else changed
+
+No class was renamed or removed. No export moved. `bronto-ui-check` will not
+report anything new for a 0.7-clean consumer — which is worth stating plainly,
+because the one breaking change in this release is invisible to it.

package/docs/package-contract.md

@@ -299,6 +299,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
 | `docs/migrations/0.4-to-0.5.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.5-to-0.6.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.6-to-0.7.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
+| `docs/migrations/0.7-to-0.8.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/adr/0001-color-system.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/adr/0002-scope-and-2026-baseline.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/adr/0003-theme-model.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |

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).
 
-- 644 classes across 179 component groups
+- 669 classes across 183 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Validate markup as data (no JS/TS): `@ponchia/ui/classes.json` — the same
   vocabulary as language-neutral JSON (`groups`, `classes`, `states`,
@@ -268,7 +268,9 @@ each one matches a real selector in the stylesheet.
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.button` | `ui-button` | base |
+| `cls.buttonLabel` | `ui-button__label` | part |
 | `cls.buttonDanger` | `ui-button--danger` | modifier |
+| `cls.buttonDense` | `ui-button--dense` | modifier |
 | `cls.buttonGhost` | `ui-button--ghost` | modifier |
 | `cls.buttonIcon` | `ui-button--icon` | modifier |
 | `cls.buttonLg` | `ui-button--lg` | modifier |
@@ -577,6 +579,10 @@ each one matches a real selector in the stylesheet.
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.emptyState` | `ui-empty-state` | base |
+| `cls.emptyStateGlyph` | `ui-empty-state__glyph` | part |
+| `cls.emptyStateHint` | `ui-empty-state__hint` | part |
+| `cls.emptyStateLead` | `ui-empty-state__lead` | part |
+| `cls.emptyStateInvite` | `ui-empty-state--invite` | modifier |
 
 ### `.ui-error-summary`
 
@@ -952,6 +958,17 @@ each one matches a real selector in the stylesheet.
 | `cls.pagination` | `ui-pagination` | base |
 | `cls.paginationItem` | `ui-pagination__item` | part |
 
+### `.ui-pane`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.pane` | `ui-pane` | base |
+| `cls.paneActions` | `ui-pane__actions` | part |
+| `cls.paneBody` | `ui-pane__body` | part |
+| `cls.paneHead` | `ui-pane__head` | part |
+| `cls.paneTitle` | `ui-pane__title` | part |
+| `cls.paneTitleInput` | `ui-pane__title-input` | part |
+
 ### `.ui-panel`
 
 | Registry key | Class | Kind |
@@ -1160,6 +1177,29 @@ each one matches a real selector in the stylesheet.
 | `cls.selectionbar` | `ui-selectionbar` | base |
 | `cls.selectionbarActions` | `ui-selectionbar__actions` | part |
 | `cls.selectionbarCount` | `ui-selectionbar__count` | part |
+| `cls.selectionbarAnchorBlockEnd` | `ui-selectionbar--anchor-block-end` | modifier |
+| `cls.selectionbarAnchorBlockStart` | `ui-selectionbar--anchor-block-start` | modifier |
+| `cls.selectionbarAnchored` | `ui-selectionbar--anchored` | modifier |
+
+### `.ui-severity`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.severity` | `ui-severity` | base |
+
+### `.ui-severity-dot`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.severityDot` | `ui-severity-dot` | base |
+
+### `.ui-severity-row`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.severityRow` | `ui-severity-row` | base |
+| `cls.severityRowMeta` | `ui-severity-row__meta` | part |
+| `cls.severityRowTitle` | `ui-severity-row__title` | part |
 
 ### `.ui-shortcut`
 
@@ -1511,10 +1551,15 @@ each one matches a real selector in the stylesheet.
 | `cls.toolstripActions` | `ui-toolstrip__actions` | part |
 | `cls.toolstripBrand` | `ui-toolstrip__brand` | part |
 | `cls.toolstripContext` | `ui-toolstrip__context` | part |
+| `cls.toolstripFill` | `ui-toolstrip__fill` | part |
 | `cls.toolstripGroup` | `ui-toolstrip__group` | part |
 | `cls.toolstripSearch` | `ui-toolstrip__search` | part |
+| `cls.toolstripAnchorBlockEnd` | `ui-toolstrip--anchor-block-end` | modifier |
+| `cls.toolstripAnchorBlockStart` | `ui-toolstrip--anchor-block-start` | modifier |
+| `cls.toolstripAnchored` | `ui-toolstrip--anchored` | modifier |
 | `cls.toolstripCompact` | `ui-toolstrip--compact` | modifier |
 | `cls.toolstripFloating` | `ui-toolstrip--floating` | modifier |
+| `cls.toolstripPane` | `ui-toolstrip--pane` | modifier |
 
 ### `.ui-tooltip`
 
@@ -1672,6 +1717,12 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--space-lg` | `1.35rem` |
 | `--space-xl` | `1.75rem` |
 | `--space-2xl` | `2.5rem` |
+| `--tap-target` | `max(44px, 2.9rem)` |
+| `--tap-target-min` | `max(24px, 1.6rem)` |
+| `--safe-area-top` | `env(safe-area-inset-top, 0px)` |
+| `--safe-area-right` | `env(safe-area-inset-right, 0px)` |
+| `--safe-area-bottom` | `env(safe-area-inset-bottom, 0px)` |
+| `--safe-area-left` | `env(safe-area-inset-left, 0px)` |
 | `--mono` | `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace` |
 | `--sans` | `'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif` |
 | `--dot-font` | `'Doto', var(--mono)` |

package/docs/reporting.md

@@ -54,18 +54,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
 changes ship in the minor (see [stability.md](./stability.md)):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/css/report-kit.css" />
 ```
 
 Leaf-by-leaf CDN imports use the same `dist/css/` paths:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/dist/css/legend.css" />
 ```
 
 The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -879,7 +879,7 @@ or validation runtime.
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.8.1/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [