@ponchia/ui 0.9.0 → 0.10.0

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).
 
-- 677 classes across 184 component groups
+- 683 classes across 186 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`,
@@ -324,6 +324,7 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.chip` | `ui-chip` | base |
 | `cls.chipAccent` | `ui-chip--accent` | modifier |
+| `cls.chipDense` | `ui-chip--dense` | modifier |
 
 ### `.ui-citation`
 
@@ -1214,6 +1215,12 @@ each one matches a real selector in the stylesheet.
 | `cls.severityRowMeta` | `ui-severity-row__meta` | part |
 | `cls.severityRowTitle` | `ui-severity-row__title` | part |
 
+### `.ui-severity-tone`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.severityTone` | `ui-severity-tone` | base |
+
 ### `.ui-shortcut`
 
 | Registry key | Class | Kind |
@@ -1512,6 +1519,15 @@ each one matches a real selector in the stylesheet.
 | `cls.timelineItem` | `ui-timeline__item` | part |
 | `cls.timelineTime` | `ui-timeline__time` | part |
 
+### `.ui-timestrip`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.timestrip` | `ui-timestrip` | base |
+| `cls.timestripAxis` | `ui-timestrip__axis` | part |
+| `cls.timestripEvent` | `ui-timestrip__event` | part |
+| `cls.timestripNow` | `ui-timestrip__now` | part |
+
 ### `.ui-toast`
 
 | Registry key | Class | Kind |
@@ -1664,13 +1680,9 @@ works in any framework without a binding layer:
   families (`ui-alert`/`ui-toast`/`ui-meter`/`ui-dot`); the builders warn on an
   out-of-set tone (see usage.md). Mapping an app's own variant
   vocabulary onto a tone is application logic, not a framework class.
-- **Modal** — native `<dialog>` gets backdrop + top-layer + focus-trap
-  free. For a controlled/portal modal, add `is-open`
-  (`ui.modal({ open: true })`) for the same skin/layout, mark the overlay
-  `data-bronto-modal`, and run `initModal()` for the inert focus trap,
-  focus-return, and Escape close signal. You still own the `is-open` state,
-  backdrop, and top-layer stacking (`.is-open` is a bare grid — it does not
-  float or stack on its own).
+- **Modal** — style a native `<dialog>` with `ui-modal`; use
+  `initDialog()` for open/close triggers and focus return. Call
+  `showModal()` to open the top layer; a CSS class is not an open state.
 - **Current page** — mark the active link with `aria-current="page"`; it is
   the programmatic cue the navs honour (`ui-sitenav`, `ui-app-nav`). The
   `.is-active` class is the visual-only equivalent on `ui-app-nav`/`ui-tab`;
@@ -1718,10 +1730,10 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 
 | Token | Value |
 | --- | --- |
-| `--radius-xl` | `4px` |
-| `--radius-lg` | `3px` |
-| `--radius-md` | `2px` |
-| `--radius-sm` | `1px` |
+| `--radius-xl` | `8px` |
+| `--radius-lg` | `6px` |
+| `--radius-md` | `4px` |
+| `--radius-sm` | `2px` |
 | `--radius-pill` | `999px` |
 | `--space-2xs` | `0.25rem` |
 | `--space-xs` | `0.5rem` |
@@ -1742,12 +1754,12 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--display` | `var(--dot-font)` |
 | `--display-weight` | `700` |
 | `--display-weight-strong` | `800` |
-| `--text-2xs` | `0.72rem` |
-| `--text-xs` | `0.76rem` |
-| `--text-sm` | `0.86rem` |
-| `--text-base` | `0.95rem` |
-| `--text-lg` | `1.15rem` |
-| `--text-xl` | `1.45rem` |
+| `--text-2xs` | `0.75rem` |
+| `--text-xs` | `0.8125rem` |
+| `--text-sm` | `0.875rem` |
+| `--text-base` | `1rem` |
+| `--text-lg` | `1.125rem` |
+| `--text-xl` | `1.5rem` |
 | `--tracking-wide` | `0.14em` |
 | `--tracking-wider` | `0.22em` |
 | `--ease-standard` | `cubic-bezier(0.2, 0.8, 0.2, 1)` |

package/docs/reporting.md

@@ -1,5 +1,11 @@
 # Static reports
 
+Reports use readable screen prose, a 68ch measure, sentence-case headings, and
+an independent print treatment. Put the decision before navigation. Use
+`details.ui-report__toc` for collapsed contents and `nav.ui-report__toc` for
+always-visible contents. See [composition recipes](compositions.md).
+
+
 `@ponchia/ui` can dress static, LLM-authored HTML reports without a component
 runtime. Load the normal bundle, then either opt in to the complete report kit
 or import only the leaves a narrow report actually uses.
@@ -54,18 +60,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.9.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/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.9.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/css/legend.css" />
 ```
 
 The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -579,7 +585,7 @@ raster).
 > origin. A static report **opened from disk (`file://`) cannot import the module
 > nor fetch `vega.json`** (CORS) — load Vega + Vega-Lite + vega-embed from pinned
 > `/build/*.min.js` CDN tags and **inline the resolved `config` object**
-> (generate it with `npm run emit:theme vega light`), the file://-safe recipe in
+> (generate it with `npm run emit:theme vega light`), the `file://`-safe recipe in
 > [vega.md](./vega.md#from-a-cdn-no-bundler). For a report
 > you intend to **print/PDF**, prefer the frozen inline `<svg>` below — it has no
 > runtime, prints exactly, and sidesteps all of this.
@@ -879,7 +885,7 @@ or validation runtime.
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [

package/docs/stability.md

@@ -1,11 +1,11 @@
 # Public API stability
 
 `@ponchia/ui` is pre-1.0. Breaking changes ship in the minor (`0.x.0`), and
-patches are non-breaking. In practical terms: **PATCH releases (`0.9.x`) are
+patches are non-breaking. In practical terms: **PATCH releases (`0.10.x`) are
 non-breaking bug-fixes and additive changes — safe to upgrade without review;
 MINOR releases (`0.x.0`) may include breaking changes and consumers should
 review the CHANGELOG before upgrading.** Pin `~0.x` (tilde) to accept only
-patches, or `^0.x` only if you accept minor-level churn. This policy holds
+patches, or `^0.x` for the same compatible pre-1.0 minor. This policy holds
 until `1.0.0` is tagged. This matrix defines what counts as public API.
 For the exhaustive package-manifest inventory — every `exports` key, every
 shipped `files` entry, and the generated artifact provenance map — see
@@ -53,56 +53,22 @@ enough.
 
 ### Adoption evidence for 1.0
 
-This snapshot records product evidence as of 2026-07-20. Use three evidence
-classes:
-
-- **Downstream-proven:** A non-example app, site, report generator, or tool
-  imports the published surface and passes its own build or checks.
-- **Package-proven:** Packed examples, unit tests, browser tests, and type tests
-  prove compatibility, but no inspected non-example consumer imports the
-  surface.
-- **Speculative:** Neither downstream use nor a package-level executable proof
-  justifies freezing the surface into 1.0.
-
-Package-proven is necessary but does not establish demand. During the catalog
-freeze, do not expand package-only surfaces. Recheck this table against real
-consumer upgrades before the 1.0 release candidate.
-
-> **The 0.8.0 consumer audit — read this before trusting the table below.** A
-> full-surface audit of the largest downstream consumer (a Yjs-collaborative
-> spatial canvas workspace: React, Vite, ~10k lines of its own CSS) found it
-> using **26 of the 646 published classes**, and hand-rebuilding much of the
-> rest — 10 bespoke empty states, 15 error surfaces, 17 control bars, three
-> parallel severity vocabularies, its own Markdown prose layer, its own diff
-> rows, its own meters, and two copies of visually-hidden text. Thirteen
-> primitives that map almost exactly onto what it built return **zero** uses:
-> `ui-state`, `ui-prose`, `ui-diff`, `ui-code`, `ui-meter`, `ui-progress`,
-> `ui-toolstrip`, `ui-dot`, `ui-chip`, `ui-tag`, `ui-timeline`, `ui-steps`,
-> `ui-job`.
->
-> The lesson for this document is not about that consumer. It is that **"no
-> inspected consumer imports the surface" has been measuring discoverability,
-> not demand.** Those surfaces were not rejected; they were never found. The
-> opt-in leaf model is right, but nothing tells a consumer which leaf it is
-> about to reimplement — and `bronto-ui-check`, which catches part of it, was
-> installed in that consumer and had never been run. Before any 1.0 decision
-> retires a package-proven surface for lack of adoption, confirm the surface was
-> *reachable*: named in the consumer's imports, or at least in a leaf it
-> imports. Non-adoption of an unimported leaf is not evidence.
->
-> The same audit produced this release's four consumer-driven changes (the tap
-> target floor, the safe-area tokens, `ui-button__label`, and the dense tier)
-> and the ADR-0001 canvas amendment. That is the intended loop: the consumer's
-> local classes are the backlog, resolving either to a deletion there or an
-> addition here.
-
-| Surface family | Current evidence | 1.0 disposition |
-| --- | --- | --- |
-| Core CSS, class recipes, vanilla behaviors, tokens, and Tailwind bridge | Downstream-proven across five inspected non-example app, site, and service consumers. | Stabilize names and behavior contracts. Use consumer upgrades as the release-candidate proof. |
-| Report, provenance, analytical CSS, annotations, glyphs, skins, workbench CSS, chart data, and Vega theme | Downstream-proven across four inspected report, site, dashboard, and tool consumers. | Keep opt-in. Stabilize the consumed paths; do not broaden the catalog during the freeze. |
-| Controlled non-`<dialog>` modal | Package-proven by stack, portal, late-node, focus, and cleanup regressions. None of ten inspected non-example consumers initializes `initModal`. | Deprecated in 0.7; remove no earlier than 0.8 unless a real consumer adopts it. Native `<dialog>` + `initDialog` is the stable path. |
-| React, Solid, Qwik, Svelte, and Vue lifecycle adapters | Package-proven by packed examples, types, and lifecycle tests. None of ten inspected non-example consumers imports an adapter entrypoint. | Deprecated in 0.7; remove no earlier than 0.8 unless a real consumer adopts one. Vanilla behaviors remain stable. |
-| Mermaid, D2, Shiki, Figma Variables, and the report-claims schema | Package-proven by generated-data, render, schema, and drift checks. No inspected non-example consumer currently supplies downstream proof for every path. | Keep compatible through 0.8.x, but decide each 1.0 contract from adoption evidence rather than generator coverage alone. |
+Separate downstream proof from package proof. An example build verifies the
+published contract; a real application or report upgrade verifies that it is
+useful. Record the candidate version, imported surface, visual/input checks,
+and remaining consumer-specific overrides with the release.
+
+The 0.10 direction is defined by
+[ADR-0005](adr/0005-productive-tools-and-editorial-reports.md). The active
+packed examples cover vanilla, Astro, SvelteKit, React, Tailwind, and static
+reports. The unadopted framework adapters and controlled modal were removed
+following their 0.7 deprecation; see the
+[migration](migrations/0.9-to-0.10.md).
+
+Do not maximize a consumer's fraction of the class catalog. Measure repeated
+design decisions avoided and complete tasks improved. Check discoverability
+before interpreting non-adoption, and keep legitimate domain-specific CSS in
+the consumer.
 
 After 1.0, breaking changes move to majors. Until then, the table below is the
 current public-surface matrix and the release policy above still applies.
@@ -126,7 +92,6 @@ current public-surface matrix and the release policy above still applies.
 | Consumer checker (`bronto-ui-check`) | Stable additive | The installed binary lexically validates literal `ui-*` classes and unresolved reserved-token references in supported code, style, and template sources after stripping comments; Markdown prose and generated/vendor directories are excluded. Exit 0 means no findings, exit 1 means contract findings, and exit 2 means invocation/input failure. New checks may be additive; an existing valid literal cannot become an error within a patch unless the corresponding public contract was already invalid. |
 | Glyph registry/renderers (`@ponchia/ui/glyphs`) | Stable additive | Existing glyph names stay valid. New glyphs are additive. Renderer option names and accessibility defaults are public. |
 | `.ui-icon` mask renderer | Stable | Class name, `--icon-size`, currentColor inheritance, and `--icon-mask` contract are public. The internal data URL encoding is not. |
-| Framework lifecycle adapters (`react`/`solid`/`qwik`/`svelte`/`vue`) | Deprecated in 0.7 | Hook/action/directive names, optional peer behavior, root resolver support, and cleanup remain compatible through 0.7. Scheduled for removal no earlier than 0.8 under ADR-0004. Use vanilla behaviors in framework lifecycle code. |
 | Skins (`@ponchia/ui/skins`, `css/skins.css`) | Stable additive | Existing skin names stay valid. New skins are additive. Skins are root-level choices. Skin CSS is opt-in, not in the default bundle. |
 | Charts (`@ponchia/ui/charts`, `charts.json`, `css/dataviz.css`) | Stable additive | Token names, JSON shape, and 8 categorical slots are public. `css/dataviz.css` is opt-in, not in the default bundle. Exact palette values may tune if gates and release notes justify it. |
 | External renderer themes (`@ponchia/ui/mermaid`, `@ponchia/ui/mermaid.json`, `@ponchia/ui/d2`, `@ponchia/ui/d2.json`, `@ponchia/ui/vega`, `@ponchia/ui/vega.json`) | Stable additive | Theme helper names, JSON shapes, and supported renderer theme slots are public. Values are resolved colours because Mermaid, D2, and Vega cannot consume Bronto CSS variables directly. Exact colours may tune with token changes, but `check:mermaid`, `check:d2`, and `check:vega` must prove every exported theme resolves with no `var()` leaks. No renderer runtime ships. |
@@ -150,7 +115,7 @@ current public-surface matrix and the release policy above still applies.
 | Lifecycle state (`css/state.css`, `.ui-state*`, `.ui-syncbar`) | Stable additive | The `.ui-state`/`__label`/`__detail`/`--busy` classes, the canonical lifecycle state modifiers, `.ui-syncbar`, and the `ui.state` recipe are public. Opt-in, not in the default bundle. |
 | Generated / AI-trust (`css/generated.css`, `.ui-generated*`, `.ui-origin-label*`, `.ui-reasoning*`, `.ui-tool-log`, `.ui-tool-call*`) | Stable additive | The generated-content, origin-label (incl. `--ai`), reasoning-trace and tool-log/tool-call class names and the `ui.originLabel` recipe are public. Opt-in, not in the default bundle. Not a chat kit; no confidence widget. |
 | Workbench (`css/workbench.css`, `.ui-splitter*`, `.ui-inspector*`, `.ui-property*`, `.ui-selectionbar*`, `initSplitter`) | Stable additive | Splitter, inspector, property-row and selection-bar class + BEM part names are public (no recipe). `data-bronto-splitter`, `--splitter-pos`, `bronto:splitter:resize`, and the `initSplitter` cleanup contract are public. Opt-in, not in the default bundle. The host owns pane content, persistence, collapse policy, and selection state. |
-| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. The deprecated framework bindings remain compatible only for the 0.7 migration window. |
+| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. |
 | Spark microcharts (`css/spark.css`, `.ui-spark*`) | Stable additive | Spark class names and inline sizing/label slots are public. Opt-in, not in the default bundle. The host owns data reduction and accessible surrounding text. |
 | Bullet graphs (`css/bullet.css`, `.ui-bullet*`) | Stable additive | Bullet class names and measure/target/range custom-property slots are public. Opt-in, not in the default bundle. The host owns thresholds, units, and data mapping. |
 | Diffs (`css/diff.css`, `.ui-diff*`) | Stable additive | Diff container/line/gutter class names and add/remove/highlight state modifiers are public. Opt-in, not in the default bundle. Bronto styles evidence; it does not compute diffs. |
@@ -160,7 +125,6 @@ current public-surface matrix and the release policy above still applies.
 | Terms / glossary (`css/term.css`, `.ui-term`, `.ui-glossary`) | Stable additive | Term and glossary class names plus native-popover definition hooks are public. Opt-in, not in the default bundle. The host owns glossary content and terminology policy. |
 | Contents rail (`css/toc.css`, `.ui-toc*`) | Stable additive | TOC rail class/part names and current-section state classes are public. Opt-in, not in the default bundle. The host owns section observation and active-state updates. |
 | Tree outlines (`css/tree.css`, `.ui-tree*`) | Stable additive | Tree outline class names, depth styling, and native `<details>` composition are public. Opt-in, not in the default bundle. The host owns tree data, lazy loading, and selection state. |
-| Controlled-modal focus trap (`initModal`, adapter `useModal`, `data-bronto-modal`) | Deprecated in 0.7 | The controlled non-`<dialog>` path remains compatible through 0.7 and is scheduled for removal no earlier than 0.8 under ADR-0004. Use native `<dialog>` with `initDialog()`; it remains stable. |
 | Keyboard-shortcut hint (`.ui-shortcut`, `.ui-shortcut__sep`) | Stable additive | Class names for the chord/sequence hint over `.ui-kbd` are public. Ships in the core layer (class-only, no recipe). |
 | Agent and migration data (`llms.txt`, `MIGRATIONS.json`) | Stable additive | `llms.txt` stays shipped as the offline agent entrypoint. `MIGRATIONS.json` stays a machine-readable migration map for breaking renames/removals. New migration entries are additive; removal of a migration record requires the same breaking-change discipline as the surface it describes. |
 | Generated docs shipped in npm | Stable paths | Exported docs paths stay shipped and resolvable within a compatible minor. Markdown/text assets are for reading unless your runtime has a loader. Generated content may change with the source contract. |

package/docs/state.md

@@ -165,6 +165,52 @@ Colour is never the only channel (WCAG 1.4.1): `.ui-severity` carries an
 author-written label, and `.ui-severity-dot` is only for rows that **also** name
 their level in text.
 
+### Painting a mark Bronto does not ship — `.ui-severity-tone`
+
+The three classes above all draw something: a chip, a ruled row, a background
+dot. A host painting its own mark — an SVG shape, a gradient stop, a canvas —
+needs the tone as a **value** with none of that. `.ui-severity-tone` paints
+nothing and only resolves `--severity-tone` from `data-level`:
+
+```html
+<circle class="ui-severity-tone" data-level="critical" fill="var(--severity-tone)" />
+```
+
+Reach for it when `background` is not the property you need. An SVG shape
+ignores `background` entirely, so without this a consumer restates the whole
+tier table in `fill` — and then it can drift from the rows beside it.
+
+## Timestrip — `.ui-timestrip`
+
+A status list answers *what*. The strip answers **when**, on one axis, at a
+glance: a cluster of marks at the leading edge is a fresh incident, a lone mark
+pinned to the trailing edge has been wrong for a while. It takes the same
+`data-level` as the ladder, so a strip cannot disagree with the rows under it.
+
+```html
+<div class="ui-timestrip" role="img" aria-label="When these alerts started, last 24 hours">
+  <span class="ui-timestrip__axis"></span>
+  <span class="ui-timestrip__now"></span>
+  <span class="ui-timestrip__event" data-level="critical" style="--at: 0.92"></span>
+  <span class="ui-timestrip__event" data-level="warning" style="--at: 0.4"></span>
+  <span class="ui-timestrip__event" data-level="ok" data-outside style="--at: 0"></span>
+</div>
+```
+
+**This is geometry, not a chart.** The host owns the window, the clock, and the
+arithmetic: it normalises each event to a position in `0..1` and writes it as
+`--at`, where `0` is the oldest edge and `1` is now. Bronto owns the rail, the
+now marker, and the mark. There are no scales, no ticks, no axis labels, and no
+time parsing — a surface that wants those wants a chart, and Bronto
+[refuses chart scales](./frontier-primitives.md).
+
+`data-outside` marks an event older than the window. It stays at the edge at
+reduced weight rather than vanishing, because a strip reading "quiet" while a
+row says "failing for three days" is worse than one reading crowded.
+
+The strip is decorative on its own: give it an `aria-label` naming what it
+plots, and let the rows beneath it name each level in words.
+
 ## Recipe
 
 ```js
@@ -180,6 +226,7 @@ ui.job({ state: 'running' }); // "ui-job ui-job--running"
 severity('critical'); // { class: 'ui-severity', 'data-level': 'critical' }
 severity('warning', { part: 'row' }); // { class: 'ui-severity-row', … }
 severity('nope'); // { class: 'ui-severity', 'data-level': 'unknown' }
+severity('critical', { part: 'tone' }); // { class: 'ui-severity-tone', … }
 
 SEVERITY_LEVELS; // ['critical','error','warning','notice','ok'] — sort/filter from this
 ```

package/docs/usage.md

@@ -137,8 +137,8 @@ one column inside a slim panel even when the window is wide (island-safe; it
 nests). Two thresholds are built in: `ui-grid` drops to a single column at
 **34rem** and `ui-statgrid`/`ui-app-metrics` at **30rem**, measured on the `ui-cq`
 box. Note `rem` in a container query resolves against the **root** font size, not
-16px — at Bronto's 15px root that's ≈**510px** and ≈**450px**, ~6% tighter than a
-16px mental model. And be aware `ui-grid` already collapses on its own via an
+a fixed device pixel size. At the default 16px root these are **544px** and
+**480px**; they follow the browser text-size preference. And be aware `ui-grid` already collapses on its own via an
 intrinsic `auto-fit` minmax, so `ui-cq` barely changes it — the primitive that
 genuinely *needs* `ui-cq` to collapse by container (not viewport) is
 `ui-statgrid`/`ui-app-metrics`. The container is named `bronto` (hardcoded — there
@@ -255,8 +255,8 @@ sentences at the same weight, a third is a bare `<p>`.
 
 ## Link vs link--cta
 
-Plain `ui-link` for in-flow links. `ui-link--cta` is the eyebrow-faced
-action link (accent · display · uppercase + arrow) — a *navigational
+Plain `ui-link` for in-flow links. `ui-link--cta` is the accent
+action link with an arrow — a *navigational
 call to action*, not a substitute for a button (no form submit, no
 destructive action).
 
@@ -373,7 +373,7 @@ without it these widgets are unlabelled or unannounced:
   ```
 
   Drop `--icon` and the same markup renders glyph + word. The slot also
-  ellipsises rather than wrapping, so a labelled button in a width-constrained
+  ellipsis rather than wrapping, so a labelled button in a width-constrained
   bar shrinks instead of pushing its neighbours out.
 - **`ui-button--dense`** is for bars whose height is the constraint — a pane
   title bar, a packed toolbar, a table row's actions. It lowers only the
@@ -468,28 +468,9 @@ convey identity to AT. Keep initials to ~2 characters — the box is
 
 Prefer the **native `<dialog>`** path — you get top-layer, backdrop and
 focus-trap free (wire it with `initDialog` for open-triggers + focus-return).
-The older `ui-modal.is-open` + `data-bronto-modal` + `initModal()` path remains
-compatible throughout 0.7, but is deprecated for removal no earlier than 0.8.
-It duplicates platform focus, stacking, and inert ownership and no inspected
-real consumer uses it. Migrate portals to a native `<dialog>` where possible;
-if a framework must retain the controlled path during 0.7, keep the existing
-accessible name and `bronto:modal:close` handling unchanged.
-
-Controlled modals share one document-level stack. Opening a sibling portal
-modal makes the previous modal inert and keeps only the new top modal
-interactive; closing it restores focus into the previous modal. An
-`initPopover()` trigger inside the top modal may target a panel portaled
-elsewhere in the document: while that panel is open, it joins the live modal
-tree and owns Escape without releasing unrelated background content. Background
-nodes added after the modal opens are trapped too. If a controlled parent modal
-closes while a descendant still carries `is-open`, the descendant is suspended
-with the parent and resumes if the parent reopens.
-
-**Scroll-lock is not automatic.** A native `<dialog>` does not freeze background
-scroll — the page behind an open modal can
-still scroll. If that matters, toggle a lock yourself while the modal is open
-(`document.documentElement.style.overflow = 'hidden'`, restored on close), or add
-`html:has(dialog[open]) { overflow: hidden }` for the native path.
+Use a native `<dialog>` with `initDialog()` for focus, stacking, and close
+behavior. Application frameworks own the mount/cleanup lifecycle. The removed
+controlled-modal path is covered by the [0.10 migration](migrations/0.9-to-0.10.md).
 
 ## Carousel & lightbox: one primitive, two skins
 
@@ -665,7 +646,7 @@ authoring engine.
   code — so put the human label in the `<li>` text and the code in `data-value`.
   The `.ui-combobox__empty` ("No matches") is hidden until a filter empties the
   list. Two intentional single-select APG deviations: ArrowDown on a closed list
-  filters rather than pre-selecting the first option, and Tab closes without
+  filters rather than preselecting the first option, and Tab closes without
   committing a merely-highlighted option (Enter/click commits).
 - **Validation** is opt-in via `data-bronto-validate` on the form plus
   `initFormValidation()`; it surfaces messages into a `ui-error-summary` you
@@ -757,7 +738,7 @@ moves into it, but there is **no focus trap** and the rest of the page stays
 interactive — Tab moves *out* of the panel (it does not cycle), and it closes on
 Escape or outside-click. Don't assume `<dialog>`-modal semantics; if you need a
 trap and an inert backdrop, use a real modal (`<dialog>` + `initDialog`). The
-deprecated `initModal()` path remains available only for 0.7 migration. And the
+controlled-modal path was removed in 0.10. And the
 `is-open` fallback is a plain stacked element, so it sits
 *under* any open native `<dialog>`'s top layer — another reason to prefer the
 native `popover` attribute when a popover and a dialog can be open together.
@@ -792,7 +773,6 @@ These are JS widgets wearing the Bronto look; without the behavior they are iner
 | Popover (`ui-popover`) | `initPopover` | no placement/ARIA — prefer the native `popover` attribute |
 | Carousel (`ui-carousel`) | `initCarousel` | a native scroll-snap track (usable, no controls) |
 | Native dialog/lightbox (`<dialog>`, `ui-lightbox`) | `initDialog` | closed markup stays closed; `data-bronto-open`/close buttons do nothing. Do not use `open` as a modal fallback: it is non-modal and has no trigger/focus-return path |
-| Controlled modal (`ui-modal.is-open`, deprecated) | `initModal` (deprecated) | open skin only — no inert trap, focus-return, or Escape close signal |
 | Menu (`data-bronto-menu`) | `initMenu` | a button next to a list with no open/close, outside-click, or Escape |
 | Dismissible alert/callout (`data-bronto-dismissible`) | `dismissible` | the close affordance is just a button; nothing is removed |
 | Toast | `toast()` | nothing — it is imperative-only |
@@ -826,3 +806,11 @@ the shipped palettes are gated (see [contrast.md](contrast.md)); your
 custom accent is not. Verify primary-button label, `--accent-text`, and
 the focus ring against their backgrounds. Full contract:
 [theming.md](theming.md).
+
+## Dense labels
+
+Use `ui-chip--dense` for a static label in a short pane header.
+`ui.chip({ dense: true })` returns that class. Buttons and links carrying it
+retain pointer target floors; use an actual button for an action.
+
+For complete tool/report layouts, use [composition recipes](compositions.md).

package/llms.txt

@@ -45,7 +45,7 @@ the path changes from source `css/` to built `dist/css/`:
 <!-- installed locally -->
 <link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
 <!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.9.0/dist/css/<leaf>.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.10.0/dist/css/<leaf>.css" />
 ```
 
 The flattened default bundle is `dist/bronto.css` (bundler shorthand
@@ -74,9 +74,7 @@ import { applyStoredTheme } from '@ponchia/ui/behaviors';
 
 Notable behaviors beyond the obvious: `initMenu()` adds close affordances to a
 native `<details data-bronto-menu>` dropdown (outside-click/Escape/select-close);
-`initModal()` wires the controlled `.ui-modal.is-open` path (inert focus-trap +
-role/aria-modal), but is deprecated in 0.7 for removal no earlier than 0.8;
-prefer native `<dialog>` + `initDialog()`. `initDisabledGuard()` makes every `aria-disabled` control
+Native `<dialog>` with `initDialog()` owns modal interaction. `initDisabledGuard()` makes every `aria-disabled` control
 keyboard-inert (CSS alone is only pointer-inert). For the value-bearing fills,
 `attrs.meter(value)` / `attrs.progress(value)` from `@ponchia/ui/classes` return
 `role`+`aria-valuenow/min/max`+the `--value` style to spread onto the host.
@@ -86,20 +84,11 @@ matching `.ui-source-card`, seed lightweight preview metadata, and emit
 `bronto:source:focus`; the host still owns numbering, fetching, trust decisions,
 and any rich preview popover.
 
-Optional lifecycle adapters wrap those behaviors without owning markup or state.
-They remain compatible in 0.7 but are deprecated for removal no earlier than
-0.8; prefer vanilla behavior initialization in the host lifecycle.
-React/Solid/Qwik use hook bindings (peer deps `react` / `solid-js` /
-`@builder.io/qwik`, optional — core stays zero-dep); Svelte uses dependency-free
-actions, and Vue uses dependency-free directives/plugin helpers:
-
-```js
-import { useDialog, useToast } from '@ponchia/ui/react'; // or '@ponchia/ui/solid' or '@ponchia/ui/qwik'
-// React: scope with { root: reactRef } or a resolver, not { root: ref.current } during render.
-// Qwik: hooks run in useVisibleTask$; scope with a Qwik signal — useDialog({ root: useSignal() }).
-// Svelte: import { dialog, toast } from '@ponchia/ui/svelte'.
-// Vue: import { vDialog, useToast } from '@ponchia/ui/vue', or app.use(brontoVue).
-```
+Initialize behaviors in the host framework's mount/cleanup lifecycle. Framework
+adapter subpaths are removed in 0.10. Read `docs/compositions.md` before selecting
+primitives: tools use sans headings and labels, reports prioritize reading,
+and `ui-display` is an explicit brand treatment. The catalog is a lookup, not a
+checklist of components to place on a page.
 
 Optional display glyphs — dot-matrix bitmaps on the `.ui-dotmatrix` primitive
 (decorative by default; `renderGlyph` is SSR-safe, `initDotGlyph` is the DOM form).

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
-  "description": "CSS-first identity and UI layer for services, tools, sites, and reports \u2014 works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
+  "description": "CSS-first identity and UI layer for services, tools, sites, and reports — works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
   "keywords": [
     "css",
     "ui",
@@ -58,11 +58,6 @@
     "schemas",
     "annotations",
     "connectors",
-    "react",
-    "solid",
-    "qwik",
-    "svelte",
-    "vue",
     "shiki",
     "llms.txt",
     "CHANGELOG.md",
@@ -118,7 +113,11 @@
     "docs/adr/0001-color-system.md",
     "docs/adr/0002-scope-and-2026-baseline.md",
     "docs/adr/0003-theme-model.md",
-    "docs/adr/0004-prune-unused-adapters.md"
+    "docs/adr/0004-prune-unused-adapters.md",
+    "docs/compositions.md",
+    "docs/adr/0005-productive-tools-and-editorial-reports.md",
+    "docs/migrations/0.9-to-0.10.md",
+    "docs/adr/0006-trusted-publishing.md"
   ],
   "style": "./dist/bronto.css",
   "scripts": {
@@ -181,7 +180,6 @@
     "check:component-matrix": "node scripts/check-component-matrix.mjs",
     "check:behavior-matrix": "node scripts/check-behavior-matrix.mjs",
     "check:helper-matrix": "node scripts/check-helper-matrix.mjs",
-    "check:binding-matrix": "node scripts/check-binding-matrix.mjs",
     "check:examples": "node scripts/check-examples.mjs",
     "check:visual-baselines": "node scripts/check-visual-baselines.mjs",
     "check:playwright-container": "node scripts/check-playwright-container.mjs",
@@ -200,7 +198,7 @@
     "check:publint": "publint --strict",
     "check:attw": "attw --pack --ignore-rules no-resolution cjs-resolves-to-esm",
     "check:workflows": "github-actionlint .github/workflows/*.yml",
-    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:fresh && npm run check:classes && npm run check:recipe-types && npm run check:dead && npm run check:complexity && npm run check:types && npm run check:unit && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:consumer-surface && npm run check:consumer-types && npm run check:component-matrix && npm run check:behavior-matrix && npm run check:helper-matrix && npm run check:binding-matrix && npm run check:examples && npm run check:visual-baselines && npm run check:playwright-container && npm run check:schemas && npm run check:publint && npm run check:attw && npm run check:workflows && npm run check:release && npm run check:versions && npm run check:migrations && npm run check:public-metadata && npm run check:public-hygiene && npm run check:doc-links && npm run check:doc-recipes && npm run check:contract && npm run check:variables && npm run check:contrast && npm run check:dtcg && npm run check:dts-emit && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:report && npm run check:legend && npm run check:chain",
+    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:fresh && npm run check:classes && npm run check:recipe-types && npm run check:dead && npm run check:complexity && npm run check:types && npm run check:unit && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:consumer-surface && npm run check:consumer-types && npm run check:component-matrix && npm run check:behavior-matrix && npm run check:helper-matrix && npm run check:examples && npm run check:visual-baselines && npm run check:playwright-container && npm run check:schemas && npm run check:publint && npm run check:attw && npm run check:workflows && npm run check:release && npm run check:versions && npm run check:migrations && npm run check:public-metadata && npm run check:public-hygiene && npm run check:doc-links && npm run check:doc-recipes && npm run check:contract && npm run check:variables && npm run check:contrast && npm run check:dtcg && npm run check:dts-emit && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:report && npm run check:legend && npm run check:chain",
     "test": "node --test \"test/*.test.mjs\"",
     "test:e2e": "playwright test",
     "test:e2e:chromium": "playwright test --project=chromium",
@@ -217,7 +215,6 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@axe-core/playwright": "^4.11.3",
-    "@builder.io/qwik": "^1.20.0",
     "@playwright/test": "1.60.0",
     "github-actionlint": "^1.7.12",
     "jsdom": "^30.0.1",
@@ -225,9 +222,6 @@
     "pdfjs-dist": "^6.2.108",
     "prettier": "^3.9.6",
     "publint": "^0.3.23",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "solid-js": "^1.9.14",
     "stylelint": "^17.14.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-use-logical": "^2.1.3",
@@ -235,22 +229,6 @@
     "vega": "^6.3.1",
     "vega-lite": "^6.4.3"
   },
-  "peerDependencies": {
-    "@builder.io/qwik": ">=1.5",
-    "react": ">=18",
-    "solid-js": ">=1.6"
-  },
-  "peerDependenciesMeta": {
-    "@builder.io/qwik": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "solid-js": {
-      "optional": true
-    }
-  },
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -476,10 +454,6 @@
       "types": "./behaviors/menu.d.ts",
       "default": "./behaviors/menu.js"
     },
-    "./behaviors/modal": {
-      "types": "./behaviors/modal.d.ts",
-      "default": "./behaviors/modal.js"
-    },
     "./behaviors/popover": {
       "types": "./behaviors/popover.d.ts",
       "default": "./behaviors/popover.js"
@@ -524,26 +498,6 @@
       "types": "./connectors/index.d.ts",
       "default": "./connectors/index.js"
     },
-    "./react": {
-      "types": "./react/index.d.ts",
-      "default": "./react/index.js"
-    },
-    "./solid": {
-      "types": "./solid/index.d.ts",
-      "default": "./solid/index.js"
-    },
-    "./qwik": {
-      "types": "./qwik/index.d.ts",
-      "default": "./qwik/index.js"
-    },
-    "./svelte": {
-      "types": "./svelte/index.d.ts",
-      "default": "./svelte/index.js"
-    },
-    "./vue": {
-      "types": "./vue/index.d.ts",
-      "default": "./vue/index.js"
-    },
     "./skins": {
       "types": "./tokens/skins.d.ts",
       "default": "./tokens/skins.js"
@@ -568,7 +522,11 @@
       "default": "./tokens/vega.js"
     },
     "./vega.json": "./tokens/vega.json",
-    "./fonts/*": "./fonts/*"
+    "./fonts/*": "./fonts/*",
+    "./docs/compositions.md": "./docs/compositions.md",
+    "./docs/adr/0005-productive-tools-and-editorial-reports.md": "./docs/adr/0005-productive-tools-and-editorial-reports.md",
+    "./docs/migrations/0.9-to-0.10.md": "./docs/migrations/0.9-to-0.10.md",
+    "./docs/adr/0006-trusted-publishing.md": "./docs/adr/0006-trusted-publishing.md"
   },
   "overrides": {
     "adm-zip": "0.6.0",