@ponchia/ui 0.6.9 → 0.6.11

package/docs/highlights.md

@@ -12,6 +12,9 @@ DOM.
 Bronto only paints the names below. The host owns range discovery, search,
 source mapping, current-match state, and cleanup.
 
+Because highlights are paint only, mirror search and current-match state in
+host-owned controls or text when users need to navigate it.
+
 | Highlight name | Use |
 | --- | --- |
 | `bronto-evidence` | Cited evidence or selected proof text. |
@@ -50,3 +53,9 @@ if (CSS.highlights) {
 
 Check `CSS.highlights` before registering ranges. Without support, the page
 falls back to plain text; no wrapper spans or extra cleanup are required.
+
+## Related
+
+`highlights.css` is part of
+[`analytical.css`](./reporting.md#the-analytical-toolbox-in-a-report). Use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/interval.md

@@ -53,3 +53,9 @@ and optional point estimate.
 Pair each interval with a written label or `role="img"` plus `aria-label`. The
 range is not the data of record: under forced-colors or print, the readable
 label and bounds must still explain the value.
+
+## Related
+
+Use the [reporting toolbox](./reporting.md#the-analytical-toolbox-in-a-report)
+to place `interval.css` in report surfaces, and use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/mermaid.md

@@ -71,8 +71,10 @@ below):
 > an `http(s)` origin the `import`/`fetch` forms both work.
 
 The result is monochrome surfaces and lines with the rationed accent reserved
-for notes — a diagram that looks like the rest of a bronto surface and
-**re-skins for free** when you change `--accent`, exactly like the chart palette.
+for notes — a diagram that looks like the rest of a bronto surface. The accent is
+**resolved into the theme map** you pass to `initialize`, not read live from
+`--accent`: to change it you re-`initialize` with the new palette and re-render;
+an already-drawn diagram does not live-reskin (see below).
 
 ### Why resolved colours, not `var(--x)`
 
@@ -90,7 +92,7 @@ switch, re-`initialize` with the other palette and re-render.
 - **Chart-like** diagrams carry a categorical series palette — **pie**
   (`pie1`…`pie12`), **git** (`git0`…`git7`), and **user-journey**
   (`fillType0`…`fillType7`) are wired to the CVD-safe
-  [charts palette](./legends.md) (series 1 = the live accent).
+  [charts palette](./legends.md) (series 1 = the resolved accent).
 - **Structural** diagrams — flowchart, sequence, class, ER, state — use the
   monochrome node/edge/cluster grammar and spend the accent only on notes.
 - **Not themed: `gantt` and `timeline`.** Their colours come from

package/docs/package-contract.md

@@ -25,7 +25,7 @@ semantic versioning contract for the surfaces listed here.
 
 | Export | Target | Group | Stability | Contract |
 | --- | --- | --- | --- | --- |
-| `.` | style: `./dist/bronto.css`<br>default: `./dist/bronto.css` | CSS root bundle | Stable | CSS-only package root. Supported as a CSS side-effect import in CSS-aware bundlers; not a Node/runtime JS entrypoint. |
+| `.` | types: `./index.d.ts`<br>style: `./dist/bronto.css`<br>default: `./dist/bronto.css` | CSS root bundle | Stable | CSS-only package root. Supported as a CSS side-effect import in CSS-aware bundlers; not a Node/runtime JS entrypoint. |
 | `./dist/bronto.css` | `./dist/bronto.css` | Flattened CSS bundle | Stable path | The prebuilt default stylesheet. Generated from css/core.css and byte-checked by check:dist. |
 | `./tailwind` | `./tailwind.css` | Tailwind CSS bridge | Stable additive | CSS-only Tailwind v4 theme/variant bridge. It maps Bronto tokens into Tailwind namespaces; it does not import component CSS. |
 | `./tailwind.css` | `./tailwind.css` | Tailwind CSS bridge | Stable additive | CSS-only Tailwind v4 theme/variant bridge. It maps Bronto tokens into Tailwind namespaces; it does not import component CSS. |
@@ -180,6 +180,28 @@ semantic versioning contract for the surfaces listed here.
 | `./classes` | types: `./classes/index.d.ts`<br>default: `./classes/index.js` | Class recipes JS | Stable | ESM class registry, recipes, attrs helpers, and cx joiner. The emitted class vocabulary is public. |
 | `./classes.json` | `./classes/classes.json` | Machine-readable data | Stable additive | JSON package data for non-JS/tooling consumers. Shape is public unless the paired doc marks a field internal. |
 | `./behaviors` | types: `./behaviors/index.d.ts`<br>default: `./behaviors/index.js` | Vanilla behavior JS | Stable | ESM, SSR-safe, cleanup-returning behavior initializers. Behavior internals are not public. |
+| `./behaviors/carousel` | types: `./behaviors/carousel.d.ts`<br>default: `./behaviors/carousel.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/combobox` | types: `./behaviors/combobox.d.ts`<br>default: `./behaviors/combobox.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/command` | types: `./behaviors/command.d.ts`<br>default: `./behaviors/command.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/connectors` | types: `./behaviors/connectors.d.ts`<br>default: `./behaviors/connectors.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/crosshair` | types: `./behaviors/crosshair.d.ts`<br>default: `./behaviors/crosshair.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/dialog` | types: `./behaviors/dialog.d.ts`<br>default: `./behaviors/dialog.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/disclosure` | types: `./behaviors/disclosure.d.ts`<br>default: `./behaviors/disclosure.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/dismissible` | types: `./behaviors/dismissible.d.ts`<br>default: `./behaviors/dismissible.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/forms` | types: `./behaviors/forms.d.ts`<br>default: `./behaviors/forms.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/glyph` | types: `./behaviors/glyph.d.ts`<br>default: `./behaviors/glyph.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/inert` | types: `./behaviors/inert.d.ts`<br>default: `./behaviors/inert.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/legend` | types: `./behaviors/legend.d.ts`<br>default: `./behaviors/legend.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/menu` | types: `./behaviors/menu.d.ts`<br>default: `./behaviors/menu.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/modal` | types: `./behaviors/modal.d.ts`<br>default: `./behaviors/modal.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/popover` | types: `./behaviors/popover.d.ts`<br>default: `./behaviors/popover.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/sources` | types: `./behaviors/sources.d.ts`<br>default: `./behaviors/sources.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/splitter` | types: `./behaviors/splitter.d.ts`<br>default: `./behaviors/splitter.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/spotlight` | types: `./behaviors/spotlight.d.ts`<br>default: `./behaviors/spotlight.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/table` | types: `./behaviors/table.d.ts`<br>default: `./behaviors/table.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/tabs` | types: `./behaviors/tabs.d.ts`<br>default: `./behaviors/tabs.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/theme` | types: `./behaviors/theme.d.ts`<br>default: `./behaviors/theme.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
+| `./behaviors/toast` | types: `./behaviors/toast.d.ts`<br>default: `./behaviors/toast.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
 | `./glyphs` | types: `./glyphs/glyphs.d.ts`<br>default: `./glyphs/glyphs.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
 | `./annotations` | types: `./annotations/index.d.ts`<br>default: `./annotations/index.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
 | `./connectors` | types: `./connectors/index.d.ts`<br>default: `./connectors/index.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
@@ -210,6 +232,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
 | `css` | Source CSS directory | Public source leaves. Mostly hand-authored; generated exceptions are called out in the provenance table. |
 | `dist` | Generated CSS directory | Prebuilt layered bundle and leaves. Never hand-edit. |
 | `tailwind.css` | Tailwind CSS bridge | CSS-only Tailwind v4 theme/variant bridge; hand-authored and not part of the default Bronto bundle. |
+| `index.d.ts` | Package file | Included in the npm files allowlist. |
 | `fonts` | Vendored assets | Doto woff2 files plus OFL license. |
 | `tokens` | Mixed source/generated data | Token source plus generated JSON, declarations, and renderer theme data. |
 | `classes` | Mixed source/generated data | Class recipe source plus generated JSON/declarations/custom-data. |

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).
 
-- 634 classes across 177 component groups
+- 644 classes across 179 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`,
@@ -1131,6 +1131,13 @@ each one matches a real selector in the stylesheet.
 | `cls.segmented` | `ui-segmented` | base |
 | `cls.segmentedOption` | `ui-segmented__option` | part |
 
+### `.ui-segmented-buttons`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.segmentedButtons` | `ui-segmented-buttons` | base |
+| `cls.segmentedButtonsButton` | `ui-segmented-buttons__button` | part |
+
 ### `.ui-sel`
 
 | Registry key | Class | Kind |
@@ -1496,6 +1503,19 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.toolLog` | `ui-tool-log` | base |
 
+### `.ui-toolstrip`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.toolstrip` | `ui-toolstrip` | base |
+| `cls.toolstripActions` | `ui-toolstrip__actions` | part |
+| `cls.toolstripBrand` | `ui-toolstrip__brand` | part |
+| `cls.toolstripContext` | `ui-toolstrip__context` | part |
+| `cls.toolstripGroup` | `ui-toolstrip__group` | part |
+| `cls.toolstripSearch` | `ui-toolstrip__search` | part |
+| `cls.toolstripCompact` | `ui-toolstrip--compact` | modifier |
+| `cls.toolstripFloating` | `ui-toolstrip--floating` | modifier |
+
 ### `.ui-tooltip`
 
 | Registry key | Class | Kind |

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.6.9/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/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.6.9/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/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.6.9/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.11/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [

package/docs/selection.md

@@ -34,7 +34,16 @@ logic — Bronto only styles them. `--off` uses `opacity` (which survives
 forced-colors), and `--on` falls back to the system `Highlight` color in
 forced-colors so the selection stays visible.
 
+Pair the visual classes with host-owned selection semantics, such as
+`aria-selected`, native checked state, or a visible selected-count label.
+
 > **Why no brush behavior?** A rectangular brush or lasso must translate a
 > dragged region into a data domain (or test points against a polygon), which
 > requires owning the chart's scales/geometry — across Bronto's line. Bring your
 > own selection logic; use these classes to render the result.
+
+## Related
+
+`selection.css` is part of
+[`analytical.css`](./reporting.md#the-analytical-toolbox-in-a-report). Use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/sources.md

@@ -167,3 +167,8 @@ ui.provenance({ state: 'reviewed' }); // "ui-provenance ui-src--reviewed"
   `CanvasText`, so the label remains the channel.
 - Tone dots and the card's tone border carry `print-color-adjust: exact`, so
   they survive printing; expand citation URLs in print where it helps the reader.
+
+## Related
+
+- [Usage](usage.md#static-reports) shows where citations fit in reports.
+- [Reference](reference.md) lists the generated source and citation classes.

package/docs/state.md

@@ -140,3 +140,9 @@ CSS only — there is no JS yet. Auto-updating elapsed time ("2m ago"), live
 progress text, polling, cancellation, retry, and conflict-resolution affordances
 are the host's job. A small optional behavior may come later if a real consumer
 needs it.
+
+## Related
+
+Use the [reporting toolbox](./reporting.md#the-analytical-toolbox-in-a-report)
+to place `state.css` in report surfaces, and use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/textref.md

@@ -3,10 +3,11 @@
 `@ponchia/ui/css/textref.css` is an opt-in **deep-link-to-the-cited-sentence**
 provenance primitive. A citation whose `href` is a URL [Text
 Fragment](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)
-(`#…:~:text=`): the browser scrolls to the exact quoted text and highlights it,
-and Bronto owns the on-brand `::target-text` paint. It is the inline counterpart
-to the static `ui-src` / `ui-citation` trust layer (`sources.css`), which can
-label a source but cannot point *inside* it.
+(`#section:~:text=`): supporting browsers scroll to the exact quoted text and
+highlight it, while the leading `#section` gives older engines a stable landing.
+Bronto owns the on-brand `::target-text` paint. It is the inline counterpart to
+the static `ui-src` / `ui-citation` trust layer (`sources.css`), which can label
+a source but cannot point *inside* it.
 
 ```css
 @import '@ponchia/ui';
@@ -15,12 +16,13 @@ label a source but cannot point *inside* it.
 
 ## How it behaves
 
-- The link navigates to the document and the browser scrolls to + highlights the
-  first match of the quoted text — no script, no anchors to pre-place.
+- In Chrome/Edge 80+, Safari 16.1+, and Firefox 131+, the browser scrolls to
+  and highlights the first match of the quoted text — no script.
 - Bronto repaints that browser highlight (`::target-text`) in the rationed
   accent wash so it matches the rest of the trust layer.
-- On engines without Text Fragments the link still navigates to the page (or its
-  `#section` anchor); the highlight is purely additive, so nothing breaks.
+- On engines without Text Fragments, the `:~:text=` directive is ignored. Use a
+  real `#section:~:text=...` URL when you own the target page; a bare `#section`
+  can land only at the section, not at the quoted sentence.
 
 ## Wiring — the host builds the fragment URL
 
@@ -30,11 +32,12 @@ runtime for it. Build the `href` with a three-line pure helper and drop it on th
 
 ```js
 // Encode a quote as a URL Text Fragment directive.
-// encodeTextFragment('p95 latency fell 38%') -> '#:~:text=p95%20latency%20fell%2038%25'
-export function encodeTextFragment(quote, { prefix } = {}) {
+// encodeTextFragment('p95 latency fell 38%', { section: 'incident-summary' })
+// -> '#incident-summary:~:text=p95%20latency%20fell%2038%25'
+export function encodeTextFragment(quote, { prefix, section } = {}) {
   const enc = (s) => encodeURIComponent(s).replace(/-/g, '%2D');
   const text = prefix ? `${enc(prefix)}-,${enc(quote)}` : enc(quote);
-  return `#:~:text=${text}`;
+  return `${section ? `#${encodeURIComponent(section)}` : '#'}:~:text=${text}`;
 }
 ```
 
@@ -43,7 +46,7 @@ export function encodeTextFragment(quote, { prefix } = {}) {
   The migration cut p95 latency by 38%
   <a
     class="ui-textref"
-    href="https://example.com/incident-review#:~:text=p95%20latency%20fell%2038%25"
+    href="https://example.com/incident-review#incident-summary:~:text=p95%20latency%20fell%2038%25"
     >jump to the source</a
   >.
 </p>
@@ -56,12 +59,14 @@ Notes for an autonomous author:
 - Keep the quote short and verbatim; a fuzzy or paraphrased quote won't match.
 - Use the optional `prefix` (a `prefix-,` directive) to disambiguate a quote that
   appears more than once on the target page.
+- Firefox support starts at 131. The project floor includes Firefox 129, so make
+  the leading section fallback meaningful when exact quote landing matters.
 
 ## Class reference
 
 | Class         | Role                                                                |
 | ------------- | ------------------------------------------------------------------- |
-| `.ui-textref` | A citation link whose `href` is a `#:~:text=` fragment; dotted underline + quote-jump cue. |
+| `.ui-textref` | A citation link whose `href` is a `#section:~:text=` fragment; dotted underline + quote-jump cue. |
 
 | Custom property        | On            | Meaning                                                                   |
 | ---------------------- | ------------- | ------------------------------------------------------------------------- |

package/docs/theming.md

@@ -26,8 +26,15 @@ So a full re-brand is one declaration **at `:root` (or a theme root)**:
 :root[data-theme='dark'] { --accent: #6ea8ff; } /* per-theme tuning */
 ```
 
-Everything — buttons, focus rings, dot motifs, accent borders, soft
-fills — follows automatically, in both light and dark.
+Core DOM accent surfaces — buttons, focus rings, dot motifs, accent borders,
+soft fills — follow automatically, in both light and dark.
+
+That scope matters. `--accent` is the core action/emphasis hue, not the whole
+color system. Status colors (`--success`, `--warning`, `--danger`, `--info`),
+neutral surface tiers, display-expression tokens, and the opt-in data-viz
+palette stay separate governed tiers. Mermaid, D2, and Vega bridges emit
+resolved renderer theme data; a rendered SVG or canvas does not live-reskin when
+you change CSS `--accent` later.
 
 > **Re-branding a subtree (not `:root`) is only a *partial* re-brand.**
 > The derived family (`--accent-soft`, `--accent-strong`, `--accent-text`,
@@ -53,6 +60,8 @@ fills — follows automatically, in both light and dark.
 > When in doubt, re-brand at `:root`/`[data-theme]` — that path re-derives
 > the whole family for you.
 
+### Re-brand obligations
+
 > **Two contrast obligations when you change `--accent`:**
 >
 > 1. **Buttons** — pick an `--accent` with ≥ 4.5:1 against `--button-text`
@@ -106,7 +115,7 @@ fills — follows automatically, in both light and dark.
   set `accent-color` yourself on them — this is the one accent surface
   the framework can't tune for you.
 
-## Beyond accent: a full re-skin (the knob really works)
+## Beyond accent: full re-skins
 
 The "Nothing" look is the **default skin, not the architecture**. It is
 a handful of token declarations deep — no selector hardcodes the
@@ -142,11 +151,12 @@ no fork:
 ```
 
 That changes buttons, cards, inputs, badges, focus rings, the display
-type and the dot motif together, because every component consumes those
-tokens — not because there is a per-component theme file. This is the
-difference between a *system* and a *skin*: the skin is swappable, the
-system (rationed colour, density, classless prose, minimal JS) is what
-you are actually adopting.
+type and the dot motif together, because those surfaces consume the token
+contract — not because there is a per-component theme file. It does not
+rewrite status semantics or chart palettes; those are governed by their own
+tiers. This is the difference between a *system* and a *skin*: the skin is
+swappable, the system (rationed colour, density, classless prose, minimal JS)
+is what you are actually adopting.
 
 Caveat, restated: a custom `--accent` is **your** contrast obligation —
 the shipped palettes are CI-gated ([contrast.md](contrast.md)), a re-skin

package/docs/toc.md

@@ -81,3 +81,9 @@ for (const id of links.keys()) {
   navigation landmark.
 - Without the optional observer the rail is a normal anchored list — every link
   still jumps to its section.
+
+## Related
+
+Use the [reporting toolbox](./reporting.md#the-analytical-toolbox-in-a-report)
+to place `toc.css` in report surfaces, and use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/tree.md

@@ -38,8 +38,9 @@ open/close animation come from the platform. This leaf is the hierarchy *layer*
 ```
 
 Add `name="…"` to sibling `<details class="ui-tree__branch">` to make them an
-exclusive-accordion group (only one open at a time) — a platform behaviour, no
-script.
+exclusive-accordion group (only one open at a time) — a platform behaviour in
+Chrome 120+, Safari 17.2+, and Firefox 130+. If Firefox 129 must enforce
+exclusivity, add a host-owned JS fallback or leave the branches independent.
 
 ## A11y honesty — disclosure group, not an ARIA tree
 
@@ -72,3 +73,9 @@ honest as-is.
   open-branch accent cue is re-asserted with the system highlight.
 - The chevron spin and the auto-height animation both respect
   `prefers-reduced-motion`.
+
+## Related
+
+Use the [reporting toolbox](./reporting.md#the-analytical-toolbox-in-a-report)
+to place `tree.css` in report surfaces, and use
+[reference.md](./reference.md) for the generated class catalog.

package/docs/usage.md

@@ -404,7 +404,7 @@ infinite-clone track). It's a gallery: the user drives it.
 
 ## Display glyphs: when (and when not)
 
-`@ponchia/ui/glyphs` is a 48-glyph dot-matrix icon set — navigation
+`@ponchia/ui/glyphs` is a 71-glyph dot-matrix icon set — navigation
 (`arrow-*`, `chevron-*`), actions (`check`, `close`, `plus`, `minus`,
 `search`, `menu`, `gear`), status (`info`, `warning`, `bell`, `lock`) and
 common marks (`home`, `user`, `heart`, `star`, `spark`, circle-family marks) — rendered on the
@@ -624,7 +624,6 @@ HTML, print/PDF, and before any hydration:
 | Accordion | native `<details>` / `<summary>` |
 | Segmented control (`ui-segmented`) | `:has(input:checked)` over a radio group |
 | Scroll-reveal (`ui-scroll-reveal`) | scroll-driven animation, zero JS |
-| Modal via native `<dialog>` | the element brings focus-trap + Escape; `initDialog` only adds open-triggers + focus-return |
 
 **Behavior-required — a CSS skin that needs its `init*` to be interactive.**
 These are JS widgets wearing the Bronto look; without the behavior they are inert
@@ -640,6 +639,7 @@ These are JS widgets wearing the Bronto look; without the behavior they are iner
 | Table sort/select (`[data-bronto-sortable]`) | `initTableSort` | a static table (still readable) |
 | 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`) | `initModal` | 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 |

package/docs/vega.md

@@ -143,8 +143,10 @@ series needs the redundant second channel, drive the mark's fill from the
 
 ### Spending the accent
 
-Series 1 of `range.category` **is** the live accent, so a single-series chart and
-the first category re-skin for free with `--accent`. To emphasise one mark in a
+Series 1 of `range.category` resolves to the accent (per theme), so a single-series
+chart and the first category carry the accent automatically — baked into the
+generated `config`, so regenerate the config and re-render to change it (Vega output
+does not live-reskin from `--accent`). To emphasise one mark in a
 multi-series chart, paint just that mark with the accent and leave the rest
 neutral — the same "reserve the accent for the one thing a reader must not miss"
 rule the rest of the system follows. Two small helpers hand you the exact
@@ -169,7 +171,7 @@ const spec = {
 };
 ```
 
-`brontoVegaAccent(theme)` is `range.category[0]` (the live accent) and
+`brontoVegaAccent(theme)` is `range.category[0]` (the resolved accent) and
 `brontoVegaNeutral(theme)` is the last category (the quiet neutral); re-read both
 when the theme toggles. Prefer them over digging the hex out of
 `tokens/resolved.json` — they are guaranteed to match the palette the config

package/docs/workbench.md

@@ -1,10 +1,11 @@
-# Workbench — split panes, inspector, properties, selection bar
+# Workbench — split panes, toolstrips, inspector, properties, selection bar
 
 `@ponchia/ui/css/workbench.css` is an opt-in set of primitives for **real
-tools**: resizable split panes, an inspector panel, property rows for a selected
-object, and a bar of actions on the current selection. Generic kits stop at
-cards/tables/forms, so every app builds its own half-consistent workbench. This
-is the low-risk core — layout, resize affordance, and ARIA value sync.
+tools**: resizable split panes, compact toolstrips, button-mode segmented
+controls, an inspector panel, property rows for a selected object, and a bar of
+actions on the current selection. Generic kits stop at cards/tables/forms, so
+every app builds its own half-consistent workbench. This is the low-risk core —
+layout, dense controls, resize affordance, and ARIA value sync.
 
 ```css
 @import '@ponchia/ui';
@@ -20,6 +21,51 @@ initSplitter();
 Not in the core bundle. Import the CSS leaf where the workbench appears and run
 `initSplitter()` only if the page includes `[data-bronto-splitter]`.
 
+## Toolstrip — `.ui-toolstrip`
+
+A compact row of controls for a tool surface or viewport. Use
+`.ui-toolstrip--floating` when the strip sits over a canvas, chart, map, media
+stage, or preview. The CSS owns density, wrapping, grouping, and raised/floating
+treatment; the host owns commands, search behavior, active mode, responsive
+hiding, and placement.
+
+```html
+<header class="ui-toolstrip ui-toolstrip--floating" aria-label="View controls">
+  <div class="ui-toolstrip__brand">
+    <strong>Repository</strong>
+    <span class="ui-toolstrip__context">main branch</span>
+  </div>
+  <div class="ui-toolstrip__group" aria-label="Mode">
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="true">Map</button>
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Flow</button>
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Risk</button>
+  </div>
+  <label class="ui-toolstrip__search">
+    <span class="ui-visually-hidden">Filter items</span>
+    <input class="ui-input" type="search" placeholder="Filter by path, owner, or tag" />
+  </label>
+  <div class="ui-toolstrip__actions" aria-label="Viewport actions">
+    <button class="ui-button ui-button--ghost ui-button--icon ui-button--sm" type="button">
+      Fit
+    </button>
+  </div>
+</header>
+```
+
+## Button segmented control — `.ui-segmented-buttons`
+
+Use `.ui-segmented-buttons` when each option is a real command button and the
+current mode is exposed with `aria-pressed`. For form values submitted with the
+page, keep using the core `.ui-segmented` radio-input pattern.
+
+```html
+<div class="ui-segmented-buttons" aria-label="Density">
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="true">Dense</button>
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Comfort</button>
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Wide</button>
+</div>
+```
+
 ## Splitter — `.ui-splitter`
 
 Two panes separated by a focusable ARIA separator handle. The CSS owns the grid
@@ -113,7 +159,8 @@ A raised bar of actions on the current selection: a `__count` on one side,
 ## Scope
 
 No recipes — these are structural containers and rows; apply the classes
-directly (or read them from `cls.splitter`, `cls.inspector`, `cls.property`, …).
-Pair the selection bar with the cross-cutting [`ui-sel`](./selection.md) states
-on the selected items themselves. Bronto styles both and wires the splitter
-affordance; the host owns hit-testing, persistence, pane contents, and commands.
+directly (or read them from `cls.toolstrip`, `cls.splitter`, `cls.inspector`,
+`cls.property`, …). Pair the selection bar with the cross-cutting
+[`ui-sel`](./selection.md) states on the selected items themselves. Bronto styles
+the chrome and wires the splitter affordance; the host owns hit-testing,
+persistence, pane contents, viewport semantics, and commands.

package/glyphs/glyphs.js

@@ -1396,14 +1396,18 @@ export function findGlyphs(query) {
 
 const TONE = { '#': 'hot', '*': 'accent' };
 
+function glyphRows(name) {
+  return Object.hasOwn(GLYPHS, name) ? GLYPHS[name] : undefined;
+}
+
 /** The raw bitmap rows for a glyph, or `undefined` if the name is unknown. */
 export function glyph(name) {
-  return GLYPHS[name];
+  return glyphRows(name);
 }
 
 /** GLYPH_SIZE² cell descriptors (row-major), or `[]` if the name is unknown. */
 export function glyphCells(name) {
-  const rows = GLYPHS[name];
+  const rows = glyphRows(name);
   if (!rows) return [];
   const cells = [];
   for (const row of rows) {
@@ -1425,7 +1429,7 @@ export function glyphCells(name) {
  * @returns {string}
  */
 export function glyphMask(name) {
-  const rows = GLYPHS[name];
+  const rows = glyphRows(name);
   return rows ? maskUrl(rows) : '';
 }
 
@@ -1446,13 +1450,63 @@ function esc(s) {
     .replace(/"/g, '"');
 }
 
+const CSS_LENGTH_UNITS =
+  '(?:px|r?em|ch|ex|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|' +
+  'svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|' +
+  'dvw|dvh|dvi|dvb|dvmin|dvmax|cm|mm|q|in|pc|pt|%)';
+const CSS_NUMBER = '[-+]?(?:\\d*\\.\\d+|\\d+)';
+const CSS_LENGTH_RE = new RegExp(`^(?:0|${CSS_NUMBER}${CSS_LENGTH_UNITS})$`, 'i');
+const CSS_CALC_VALUE_RE = new RegExp(`^${CSS_NUMBER}(?:${CSS_LENGTH_UNITS})?`, 'i');
+
+function isCalcLength(expr) {
+  let rest = expr.trim();
+  let depth = 0;
+  let sawLength = false;
+  let expectValue = true;
+
+  while (rest) {
+    if (expectValue) {
+      if (rest[0] === '(') {
+        depth += 1;
+        rest = rest.slice(1).trim();
+        continue;
+      }
+      const token = rest.match(CSS_CALC_VALUE_RE)?.[0];
+      if (!token) return false;
+      if (CSS_LENGTH_RE.test(token)) sawLength = true;
+      rest = rest.slice(token.length).trim();
+      expectValue = false;
+      continue;
+    }
+
+    if (rest[0] === ')') {
+      depth -= 1;
+      if (depth < 0) return false;
+      rest = rest.slice(1).trim();
+      continue;
+    }
+
+    const op = rest.match(/^[+\-*/]/)?.[0];
+    if (!op) return false;
+    rest = rest.slice(op.length).trim();
+    expectValue = true;
+  }
+
+  if (!sawLength) return false;
+  if (expectValue) return false;
+  return depth === 0;
+}
+
 // `dot`, `gap`, and `size` land in an inline-CSS context (`style="…"`), where
 // HTML-escaping a `"` stops attribute breakout but a `;` would still open a
-// second CSS declaration (overlay/clickjacking, selector exfil). So restrict
-// them to length/calc syntax — digits, units, %, whitespace and `()+-*/.,` for
-// calc()/clamp()/var() — and drop anything else rather than emit it.
+// second CSS declaration. Accept only concrete CSS lengths or calc() expressions.
 function cssLen(v) {
-  return /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
+  const value = String(v ?? '').trim();
+  if (CSS_LENGTH_RE.test(value)) return value;
+  if (value.toLowerCase().startsWith('calc(') && value.endsWith(')')) {
+    return isCalcLength(value.slice(5, -1)) ? value : '';
+  }
+  return '';
 }
 
 /**
@@ -1514,7 +1568,7 @@ function maskUrl(rows) {
  * Needs `@ponchia/ui/css` (the `.ui-icon` rule).
  */
 export function renderGlyph(name, options = {}) {
-  const rows = GLYPHS[name];
+  const rows = glyphRows(name);
   if (!rows) return '';
   const { grid = true, solid = false, anim, label, dot, gap, render, size } = options;
 

package/index.d.ts

@@ -0,0 +1 @@
+export {};