@ponchia/ui 0.4.1 → 0.5.0

package/docs/command.md

@@ -0,0 +1,95 @@
+# Command palette
+
+`@ponchia/ui/css/command.css` + `initCommand` are an opt-in **command palette**:
+a filter input over a grouped listbox of commands with shortcut hints. Command
+palettes turn a product from a page collection into a tool. Existing libraries
+(cmdk, kbar) are good — Bronto owns the *design-system contract* (the shell,
+shortcuts, groups, meta) and a small navigation behavior, not the action registry.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/command.css';
+```
+
+```js
+import { initCommand, initDialog } from '@ponchia/ui/behaviors';
+initDialog(); // open/close the dialog the palette lives in
+initCommand(); // filter + keyboard-navigate the list
+```
+
+**Bronto** filters and keyboard-navigates a DOM-authored list. **The host** owns
+the action registry, permission checks, routing, async effects, and execution —
+it listens for `bronto:command:select` and runs the command. There is **no global
+Cmd/Ctrl+K**; you open the palette yourself (e.g. a `<dialog>` opened by a button
+or your own shortcut). Pairs with the [`ui-shortcut`](./reference.md) hint. Not in
+the core bundle.
+
+## Markup
+
+```html
+<dialog class="ui-modal" id="cmdk" data-bronto-dialog-light aria-label="Command palette">
+  <div class="ui-command" data-bronto-command>
+    <input class="ui-command__input" aria-label="Command" placeholder="Type a command…" />
+    <ul class="ui-command__list">
+      <li class="ui-command__group">Navigation</li>
+      <li class="ui-command__item" data-value="dashboard">
+        <span>Go to dashboard</span>
+        <span class="ui-command__shortcut"><kbd class="ui-kbd">G</kbd> <kbd class="ui-kbd">D</kbd></span>
+      </li>
+      <li class="ui-command__group">Actions</li>
+      <li class="ui-command__item" data-value="invoice">
+        <span>New invoice</span>
+        <span class="ui-command__meta">Create</span>
+      </li>
+    </ul>
+    <p class="ui-command__empty" hidden>No commands</p>
+  </div>
+</dialog>
+<button class="ui-button" data-bronto-open="cmdk" type="button">Commands</button>
+```
+
+| Class | Role |
+| --- | --- |
+| `ui-command` | The palette shell (input + list + empty). |
+| `ui-command__input` | The filter input (becomes `role="combobox"`). |
+| `ui-command__list` | The listbox of commands. |
+| `ui-command__group` | A non-selectable group label; auto-hidden when its items all filter out. |
+| `ui-command__item` | A command row (`role="option"`); optional `data-value`. |
+| `ui-command__shortcut` | A trailing shortcut hint (use `ui-kbd`). |
+| `ui-command__meta` | Trailing secondary text (category, hint). |
+| `ui-command__empty` | Shown when nothing matches. |
+
+## Behavior & events
+
+`initCommand()` owns ids, `role`/`aria-activedescendant`, a roving active item,
+substring filtering, the full keyboard (Down/Up/Home/End/Enter/Escape), and
+pointer select. It emits:
+
+- `bronto:command:select` — `{ value, label }`. The host executes and closes.
+- `bronto:command:close` — on Escape. The host closes the dialog.
+
+> **Permission boundary:** `initCommand()` owns the `hidden` attribute on items
+> (that is how it filters), so it will reveal any item you pre-hid the moment the
+> query changes. To gate a command by permission, **omit it from the DOM** —
+> don't render it hidden.
+
+```js
+const dialog = document.getElementById('cmdk');
+document.querySelector('[data-bronto-command]').addEventListener('bronto:command:select', (e) => {
+  run(e.detail.value); // YOUR action registry
+  dialog.close();
+});
+document.querySelector('[data-bronto-command]').addEventListener('bronto:command:close', () =>
+  dialog.close(),
+);
+```
+
+Framework hook: `useCommand()` in `@ponchia/ui/react` · `/solid` · `/qwik`.
+
+## Accessibility
+
+- The input is a `combobox`, the list a `listbox`, items `option`s, with
+  `aria-activedescendant` tracking the active row — standard APG listbox semantics.
+- Focus stays in the input while arrows move the active item; Enter selects it.
+- Open the palette in a focus-trapping `<dialog>` (Bronto's `initDialog`) so focus
+  returns to the trigger on close.

package/docs/connectors.md

@@ -0,0 +1,91 @@
+# Connectors (leader lines)
+
+`@ponchia/ui/css/connectors.css` + `@ponchia/ui/connectors` draw a **leader line
+between two DOM elements** — connect a note to a card, a card to a chart point,
+or two related regions. This is the page-coordinate, element-to-element cousin
+of the figure-coordinate [annotations](./annotations.md) layer.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/connectors.css';
+```
+
+Bronto computes the **geometry** (pure functions) and styles the line; the
+optional `initConnectors` behavior draws and keeps it in sync. It owns no
+layout, no scales — just the path between two rects.
+
+## Markup
+
+An `.ui-connector` is an SVG that overlays a **positioned** container. Give it
+the ids of the two elements to connect; `initConnectors` fills in the path.
+
+```html
+<div style="position: relative">
+  <div id="card-a" class="ui-card">…</div>
+  <div id="note-b" class="ui-card">…</div>
+
+  <svg
+    class="ui-connector ui-connector--accent"
+    data-bronto-connector
+    data-from="card-a"
+    data-to="note-b"
+    data-shape="elbow"
+    data-end="arrow"
+    aria-hidden="true"
+  ></svg>
+</div>
+```
+
+```js
+import { initConnectors } from '@ponchia/ui/behaviors';
+const stop = initConnectors(); // redraws on resize/scroll; returns a cleanup
+```
+
+A connector is decorative — mark it `aria-hidden="true"` and make sure the
+relationship it depicts is also clear from the content/DOM order.
+
+| Attribute | Values |
+| --- | --- |
+| `data-from` / `data-to` | ids of the elements to connect (required). |
+| `data-shape` | `straight` (default), `elbow`, `curve`. |
+| `data-from-side` / `data-to-side` | `top`/`right`/`bottom`/`left`/`center`. Omit a side to auto-pick it (set neither for fully automatic facing edges). |
+| `data-end` | `arrow` (default), `dot`, `none`. |
+
+Tones: `ui-connector--accent` / `--muted` / `--success` / `--warning` /
+`--danger` / `--info` (monochrome by default). `ui-connector--dashed` for a
+dashed line; `ui-connector--draw` strokes it in once (reduced-motion-safe).
+`ui.connector({ tone, dashed, motion })` builds the class string.
+
+## Geometry helpers (no DOM)
+
+For SSR, canvas, or your own renderer, the pure helpers return SVG strings /
+coordinates and never touch the DOM:
+
+```js
+import { connectRects, arrowHead } from '@ponchia/ui/connectors';
+
+const { d, to, angle } = connectRects({
+  fromRect: { x: 0, y: 0, width: 80, height: 32 },
+  toRect: { x: 220, y: 120, width: 80, height: 32 },
+  shape: 'curve',
+});
+const head = arrowHead(to, angle); // place at the endpoint
+```
+
+- `anchorPoint(rect, side)` — a point on a rect's edge.
+- `connectorPath({ from, to, shape, curvature, mid })` — path between two points.
+- `straightPath` / `elbowPath` / `curvePath` — the individual shapes.
+- `connectRects(opts)` → `{ d, from, to, angle }`.
+- `arrowHead(point, angle, size)` / `dotMark(point, radius)` — end markers.
+- `autoSides(fromRect, toRect)` / `angleBetween(from, to)`.
+- `endTangentAngle(from, to, shape)` — the angle the path *arrives* at `to`
+  (chord for `straight`, axis-aligned for `elbow`/`curve`); rotate an end marker
+  by this so it points along the path. `connectRects().angle` already uses it.
+
+## Coordinate model
+
+`initConnectors` measures the from/to elements relative to the connector SVG's
+own box (via `getBoundingClientRect`), so place the SVG as an overlay
+(`position: absolute; inset: 0`, which `.ui-connector` sets) inside a
+`position: relative` container that holds both endpoints. The SVG has no
+`viewBox`, so its user units are CSS pixels.

package/docs/crosshair.md

@@ -0,0 +1,63 @@
+# Crosshair & readout
+
+`@ponchia/ui/css/crosshair.css` is an opt-in **ruler + readout** for reading a
+value off a plot: pointer-tracking crosshair rules, axis value badges, and a
+pinned readout chip.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/crosshair.css';
+```
+
+Bronto draws the rules and (via `initCrosshair`) tracks the pointer — it reports
+**where** the pointer is, as pixels and 0–1 fractions. It does **not** find the
+nearest data point or map pixels to data values; that needs your scales. So this
+is the *visual + pointer* layer, not a chart engine.
+
+## Markup
+
+The plot is `[data-bronto-crosshair]` (a `position: relative` box); it contains a
+`.ui-crosshair` overlay with the rule(s) you want.
+
+```html
+<figure data-bronto-crosshair style="position: relative">
+  <!-- your chart / image / canvas -->
+  <div class="ui-crosshair" aria-hidden="true">
+    <div class="ui-crosshair__line ui-crosshair__line--x"></div>
+    <div class="ui-crosshair__line ui-crosshair__line--y"></div>
+    <div class="ui-readout" id="readout"></div>
+  </div>
+</figure>
+```
+
+```js
+import { initCrosshair } from '@ponchia/ui/behaviors';
+const stop = initCrosshair(); // returns a cleanup
+document.querySelector('[data-bronto-crosshair]').addEventListener(
+  'bronto:crosshair:move',
+  (e) => {
+    const { x, y, fx, fy } = e.detail; // px + 0..1 fractions
+    // YOU map the fraction to a data value with your scale:
+    readout.textContent = `${(fx * 100).toFixed(0)}%`;
+  },
+);
+```
+
+| Class | Role |
+| --- | --- |
+| `ui-crosshair` | The overlay. Hidden until `.is-active` (set on the first pointer move over the plot). |
+| `ui-crosshair__line` + `--x` / `--y` | Vertical / horizontal rule, positioned by `--crosshair-x` / `--crosshair-y`. |
+| `ui-crosshair__badge` | An axis value chip (you set its text + edge). |
+| `ui-readout` | A pinned readout chip; follows the crosshair point. |
+
+`ui-crosshair--muted` is a subtler neutral crosshair. `ui.crosshair({ muted })`
+builds the class string. Include only the lines you need (just `--x` for a
+vertical scrubber, etc.).
+
+## Events
+
+- `bronto:crosshair:move` — `{ x, y, fx, fy }` (px within the plot + fractions).
+- `bronto:crosshair:leave` — pointer left the plot.
+
+The crosshair is decorative (`aria-hidden`); expose the underlying values to
+assistive tech through a data table or text, not the rules.

package/docs/generated.md

@@ -0,0 +1,91 @@
+# Generated content & AI trust
+
+`@ponchia/ui/css/generated.css` is an opt-in layer of **trust surfaces for AI /
+system-generated content**. Bronto is not a chat framework — it does not ship
+chat bubbles. It ships the surfaces that make generated content legible and
+accountable: a marked region, an origin label, and quiet collapsible reasoning
+and tool-call logs. It pairs with the [source & provenance layer](./sources.md).
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/generated.css';
+```
+
+Bronto styles the disclosure, origin, and trace surfaces. The host owns model
+metadata, reasoning-visibility policy, tool execution, redaction, and safety.
+Prefer evidence and source links over decorative "AI sparkle" styling. Not in
+the core bundle.
+
+## Generated region — `.ui-generated`
+
+Wraps a block of machine-authored content with a quiet accent edge and an
+optional origin `__label`.
+
+```html
+<section class="ui-generated">
+  <p class="ui-generated__label">Model output</p>
+  <p>The migration cut p95 latency by 38% in the first hour.</p>
+</section>
+```
+
+## Origin label — `.ui-origin-label`
+
+A small tag for "AI assisted", "model output", "tool output", or "human
+reviewed". `--ai` accent-tints it for model-generated origin; the default is a
+neutral tag. The words carry the meaning — the tint is reinforcement.
+
+```html
+<span class="ui-origin-label ui-origin-label--ai">AI generated</span>
+<span class="ui-origin-label">Human reviewed</span>
+```
+
+## Reasoning — `.ui-reasoning`
+
+A quiet, collapsible "how this was produced" block on a native `<details>` (zero
+JS). Keep it closed by default; the host decides what reasoning is safe to show.
+
+```html
+<details class="ui-reasoning">
+  <summary>Reasoning</summary>
+  <p class="ui-reasoning__body">Compared the Q2 and Q3 latency tables, then…</p>
+</details>
+```
+
+## Tool log — `.ui-tool-log` / `.ui-tool-call`
+
+A document-grade record of tool invocations. Each `.ui-tool-call` is a
+collapsible `<details>`: a `__name`, an optional `__status` (put a `.ui-dot` or
+text), and a `__body` with the arguments or output.
+
+```html
+<div class="ui-tool-log">
+  <details class="ui-tool-call">
+    <summary>
+      <span class="ui-tool-call__name">search_docs(query)</span>
+      <span class="ui-tool-call__status"><span class="ui-dot ui-dot--live"></span> ok</span>
+    </summary>
+    <pre class="ui-tool-call__body">{ "query": "p95 latency", "hits": 3 }</pre>
+  </details>
+</div>
+```
+
+## Recipe
+
+```js
+import { ui } from '@ponchia/ui/classes';
+
+ui.originLabel({ ai: true }); // "ui-origin-label ui-origin-label--ai"
+```
+
+The other parts are class-only (`cls.generated`, `cls.toolCall`, …) — they have
+no options, so apply the class directly.
+
+## Accessibility
+
+- The reasoning and tool-call disclosures are native `<details>` — keyboard- and
+  screen-reader-accessible with no JS.
+- An origin label must read as text ("AI generated"); the accent tint is not the
+  only signal.
+- A confidence / verdict widget is intentionally **not** shipped: don't
+  fabricate precision. Add a confidence surface only when the product has a real
+  signal to show.

package/docs/legends.md

@@ -0,0 +1,168 @@
+# Legends & data keys
+
+`@ponchia/ui/css/legend.css` is an opt-in layer of **data keys** for charts,
+reports, and analytical figures. A legend maps a visual encoding (colour, a
+pattern, a shape, a gradient) to its meaning. It reads the same Tier-4
+`--chart-*` tokens the [data-viz palette](./reference.md) ships, so a key never
+drifts from the series it describes.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/dataviz.css';
+@import '@ponchia/ui/css/legend.css';
+```
+
+Bronto **paints and positions** the key; it owns no scales, no data→pixel
+mapping, and no series state. Pair it with Bronto's own `.ui-chart` bars, an
+SVG/canvas figure, or any external chart engine — the host owns the chart.
+
+## What it is not
+
+- Not a chart engine. It does not compute tick positions, "nice" numbers,
+  bin thresholds, or bubble radii — you supply the tick/range **text**; the
+  CSS positions the slots you give it.
+- Not a colour source. Swatch colour always comes from a `--chart-*` token
+  (enforced by `check:legend`), never a hand-rolled hex.
+
+## Accessibility: colour is never the only channel
+
+A legend that distinguishes series by **colour alone** fails
+[WCAG 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html).
+In a legend, the **text label** is the required non-colour channel — every
+entry carries its name, so the meaning survives even if colour is lost
+(`forced-colors`, monochrome print, colour-vision deficiency). Where the chart
+*mark itself* is colour-only (a bare area or line), also pair the swatch with
+its `--chart-pattern-*` so the figure — not just the legend — stays readable.
+
+Recommended structure: wrap the figure and its key in a `<figure>` with a
+`<figcaption>`, and give the legend its own group label.
+
+```html
+<figure role="group" aria-labelledby="fig-1-title">
+  <figcaption id="fig-1-title">Fig 1 — Weekly focus split</figcaption>
+
+  <!-- … the chart … -->
+
+  <ul class="ui-legend" aria-label="Series">
+    <li class="ui-legend__item">
+      <span
+        class="ui-legend__swatch"
+        style="--chart-color: var(--chart-1); --chart-pattern: var(--chart-pattern-1)"
+        aria-hidden="true"
+      ></span>
+      <span class="ui-legend__label">Research</span>
+    </li>
+    <li class="ui-legend__item">
+      <span class="ui-legend__swatch ui-legend__swatch--2" aria-hidden="true"></span>
+      <span class="ui-legend__label">Delivery</span>
+    </li>
+  </ul>
+</figure>
+```
+
+The swatch is decorative (`aria-hidden="true"`) — the meaning is the label
+text. Set its colour either inline (`--chart-color`) to mirror exactly what the
+chart mark uses, or with a `--N` index helper for the categorical palette.
+
+## Parts
+
+| Class | Role |
+| --- | --- |
+| `ui-legend` | The container (a wrapping inline row by default). |
+| `ui-legend__title` | Optional heading for the key. |
+| `ui-legend__item` | One entry — swatch + label (+ value). |
+| `ui-legend__swatch` | The colour/pattern chip. |
+| `ui-legend__symbol` | A glyph/shape chip (fill an `.ui-icon` mask). |
+| `ui-legend__label` | The series name (the non-colour channel). |
+| `ui-legend__value` | Optional trailing value/range. |
+| `ui-legend__caption` | Optional footnote (units, source). |
+| `ui-legend__track` | The gradient bar (continuous keys). |
+| `ui-legend__ticks` / `ui-legend__tick` | Tick labels under the track. |
+
+### Swatch colour
+
+| Approach | Use |
+| --- | --- |
+| `style="--chart-color: var(--chart-3)"` | Mirror any token, any order; add `--chart-pattern` to match a patterned mark. |
+| `class="… ui-legend__swatch--3"` | Categorical palette series 1–8 — sets `--chart-3` for you. |
+
+`ui-legend__swatch--circle` and `ui-legend__swatch--line` change the chip shape
+(dot series, line series).
+
+## Variants
+
+| Modifier | Effect |
+| --- | --- |
+| `ui-legend--vertical` | Stack entries instead of the wrapping row. |
+| `ui-legend--compact` | Denser type and gaps. |
+| `ui-legend--with-values` | Align a trailing `__value` column across rows. |
+| `ui-legend--gradient` | Continuous colour ramp (`__track` + `__ticks`). |
+| `ui-legend--diverging` | Use the 7-stop diverging ramp (with `--gradient`). |
+| `ui-legend--threshold` | Binned `swatch │ range-label` grid. |
+| `ui-legend--interactive` | Entries are toggle controls (see below). |
+
+The recipe mirrors this surface:
+
+```js
+import { ui } from '@ponchia/ui/classes';
+
+ui.legend({ type: 'gradient', diverging: true });
+// "ui-legend ui-legend--gradient ui-legend--diverging"
+ui.legendSwatch({ series: 3, shape: 'circle' });
+// "ui-legend__swatch ui-legend__swatch--3 ui-legend__swatch--circle"
+```
+
+### Continuous ramp
+
+Supply the min/mid/max tick **text**; the track interpolates the sequential
+ramp in OKLCH (`--diverging` swaps in the diverging ramp around its neutral
+centre).
+
+```html
+<div class="ui-legend ui-legend--gradient" role="group" aria-label="Density">
+  <span class="ui-legend__track" aria-hidden="true"></span>
+  <span class="ui-legend__ticks">
+    <span class="ui-legend__tick">0</span>
+    <span class="ui-legend__tick">50</span>
+    <span class="ui-legend__tick">100</span>
+  </span>
+</div>
+```
+
+## Interactive legends (optional)
+
+An interactive legend toggles a series on or off. Bronto ships the **control
+surface** only; the **host owns the data**. The split is deliberate (it keeps
+the legend out of chart-engine territory):
+
+- **Bronto:** each entry is a `<button aria-pressed>`. The optional
+  `initLegend` behavior flips `aria-pressed`, toggles `.is-inactive`, and
+  dispatches `bronto:legend:toggle` with `{ detail: { series, active } }`.
+- **You:** listen for the event, hide/show your own series, and announce the
+  change through an `aria-live` region you own.
+
+```html
+<ul class="ui-legend ui-legend--interactive" data-bronto-legend aria-label="Series">
+  <li>
+    <button type="button" class="ui-legend__item" aria-pressed="true" data-series="research">
+      <span class="ui-legend__swatch ui-legend__swatch--1" aria-hidden="true"></span>
+      <span class="ui-legend__label">Research</span>
+    </button>
+  </li>
+</ul>
+```
+
+```js
+import { initLegend } from '@ponchia/ui/behaviors';
+const stop = initLegend(); // returns a cleanup fn
+document.addEventListener('bronto:legend:toggle', (e) => {
+  const { series, active } = e.detail;
+  // hide/show your series, then announce it in your own aria-live region
+});
+```
+
+Convention: `aria-pressed="true"` means the series is **shown** (the default).
+The entry's label never changes on toggle — only `aria-pressed` and
+`.is-inactive` flip, so a screen reader reads a stable name with a clear
+pressed state. React/Solid/Qwik consumers can use `useLegend()` instead of
+calling `initLegend` directly.

package/docs/marks.md

@@ -0,0 +1,86 @@
+# Text marks & evidence
+
+`@ponchia/ui/css/marks.css` is an opt-in layer of **evidence and emphasis marks
+for running text** — the prose counterpart to the [SVG annotations](./annotations.md)
+layer. Annotations call out a figure; marks call out a sentence. The look is
+sober and report-grade (good for docs, audits, and generated/LLM reports), not
+a hand-drawn highlighter.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/marks.css';
+```
+
+Monochrome by default — the rationed accent is opt-in via `--accent`, and the
+status tones are only for status-bearing emphasis.
+
+## Inline marks — `.ui-mark`
+
+Put `.ui-mark` on a `<mark>` so the emphasis is semantic, not just visual.
+
+```html
+<p>
+  The migration <mark class="ui-mark ui-mark--accent">cut p95 latency by 38%</mark>,
+  but <mark class="ui-mark ui-mark--danger ui-mark--underline">error rate doubled</mark>
+  in the first hour.
+</p>
+```
+
+| Style | Effect |
+| --- | --- |
+| _(default)_ | Highlighter fill. |
+| `ui-mark--underline` | Coloured underline (no fill). |
+| `ui-mark--box` | Outlined box. |
+| `ui-mark--strike` | Strikethrough (removed/superseded text). |
+
+| Tone | Use |
+| --- | --- |
+| _(default)_ | Neutral ink emphasis (monochrome). |
+| `ui-mark--accent` | The rationed accent — "this is the proof". |
+| `ui-mark--success` / `--warning` / `--danger` / `--info` | Status-bearing emphasis only. |
+| `ui-mark--muted` | De-emphasis. |
+
+`ui-mark--draw` sweeps the highlight in once on load; it respects
+`prefers-reduced-motion` (reduced motion shows the resting full highlight). It
+applies to the highlight fill, so pair it with the default (no style modifier).
+
+## Passage bracket — `.ui-bracket-note`
+
+Brackets a whole block and optionally labels it — the prose analogue of
+`ui-annotation--bracket`. Useful for "this paragraph is the evidence/caveat".
+
+```html
+<blockquote class="ui-bracket-note ui-bracket-note--accent">
+  <span class="ui-bracket-note__label">Source</span>
+  Q3 incident review, §4 — sustained for 47 minutes before rollback.
+</blockquote>
+```
+
+Tones: `--accent` (the rationed accent), `--warning`, `--danger`, `--info`. The
+default is a neutral bracket.
+
+## Recipes
+
+```js
+import { ui } from '@ponchia/ui/classes';
+
+ui.mark({ tone: 'accent', motion: 'draw' });
+// "ui-mark ui-mark--accent ui-mark--draw"
+ui.mark({ style: 'underline', tone: 'danger' });
+// "ui-mark ui-mark--underline ui-mark--danger"
+ui.bracketNote({ tone: 'warning' });
+// "ui-bracket-note ui-bracket-note--warning"
+```
+
+## Accessibility
+
+- A `.ui-mark` is **visual emphasis**; it does not announce itself to screen
+  readers. When the emphasis carries meaning that the surrounding words don't,
+  state it in the text (a screen-reader user can't see the highlight) — the same
+  rule as colour (WCAG 1.4.1). Use a native `<mark>` so the relationship is at
+  least semantic.
+- In `forced-colors` mode a highlight `background` is dropped, so marks add an
+  underline to keep the emphasis visible; the `--box`/`--underline`/`--strike`
+  styles already survive as a system colour.
+- `.ui-bracket-note` is a plain block; wrap a quotation in `<blockquote>` (or a
+  region with its own heading/label) so its role is conveyed without the border.