@ponchia/ui 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -5,6 +5,90 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.12.0 — 2026-10-01
+
+### Changed
+
+- **BREAKING: a categorical palette with no accent slot.** `--chart-1..8` are
+  now eight fixed hues — blue, orange, aqua, yellow, magenta, green, violet,
+  red — authored as measured sRGB per theme. Series 1 is no longer
+  `var(--accent)`, so an ordinary first series stops reading as an alert, and
+  the `ACCENT` export of `@ponchia/ui/charts` is removed. The 0.11 set failed
+  the measurable palette checks on the package's own surfaces (Okabe-Ito
+  yellow and the slate outside the lightness band, the slate under the chroma
+  floor). The values come from a consumer that validated and shipped them as a
+  recorded divergence. `CATEGORICAL_HUES` names the slots.
+- **BREAKING: `--chart-seq-*` is one blue hue in five steps.** `--chart-seq-6`
+  is removed. Step 1 sits nearest the surface in both themes.
+- **BREAKING: the static Vega config is frameless.** `brontoVegaConfig()` sets
+  no plot frame, draws a single series in the first categorical hue, keeps a
+  `--panel` gap between adjacent fills and sets readable label sizes. It is now
+  generated from `@ponchia/ui/renderer`'s `vegaConfig()`, so the static and
+  runtime configs share one mapping. `brontoVegaAccent()` returns `--accent`
+  and `brontoVegaNeutral()` returns `--text-dim`.
+- `check:charts` measures what a reader sees: per theme and against the panel,
+  the page and the OLED surfaces, each slot sits inside the OKLCH lightness
+  band and above the chroma floor, and adjacent slots stay apart under
+  simulated protanopia/deuteranopia (ΔE×100 ≥ 6) and normal vision (≥ 15).
+  All-pairs separation and sub-3:1 contrast are reported, not gated; the
+  pattern fill remains the second channel. ADR-0001 step 7 records the
+  amendment.
+
+### Added
+
+- **Categorical identity tokens** in `css/dataviz.css`: `--cat-1..8` (the same
+  hues), `--cat-N-tint` (a 16% wash over `--panel`, so it follows skins and
+  OLED) and `--cat-N-ink` (text that holds 4.5:1 on the panel, the page and its
+  own tint, gated). For tags, participants and user-chosen tints — never
+  status. `charts.json` gains `hues`, `tint` and `ink`.
+- **`@ponchia/ui/renderer`** — the live theme for renderers that cannot read
+  CSS. `readTokens()` resolves the bronto roles a renderer needs (surfaces,
+  inks, lines, accent, status, fonts, categorical set and ramps) to `#rrggbb`
+  or `rgba()` literals, following skins, contrast and the OLED surface.
+  `observeTokens()` calls back when one of them changed. `vegaConfig()` and
+  `xtermTheme()` map tokens to those renderers' configuration; `parseColor()`,
+  `formatColor()` and `resolveColor()` convert any CSS colour, including
+  `oklch()`, `lab()` and `color(display-p3 …)`.
+
+See [the migration guide](docs/migrations/0.11-to-0.12.md).
+
+## 0.11.0 — 2026-09-09
+
+### Changed
+
+- **BREAKING: complete the supporting typography.** Figure captions, legend
+  text, generated-content labels and command groups use sentence-case sans.
+  Technical log bodies and identifiers retain mono. Caption text is 14px at
+  the default root size; inline citations no longer shrink below 12px.
+- Figure keys and decision/action rows respond to their own available width.
+  Two-up comparisons wrap intrinsically, including outside a report. Named
+  containment on figure, decision-grid and actions wrappers is disabled for
+  print to preserve document flow.
+
+### Fixed
+
+- Narrow evidence panels no longer squeeze a chart into 40px or decision text
+  into 21px on a wide page. Long action status and legend labels wrap.
+- Long mobile navigation labels wrap while keeping every destination reachable.
+- The figure specimen's authored annotation stays inside its viewBox.
+- Generated-content disclosure summaries retain the coarse-pointer target floor.
+
+### Added
+
+- Optional `discussion.css` with thread lists, quoted passages, messages and
+  composers. State and posting remain host-owned; includes a local interactive
+  specimen and a narrow-panel example.
+
+- A working service specimen with deterministic loading, empty, error and stale
+  states, environment/search filtering, retry and native-dialog sample creation.
+  Unavailable observations never retain an operational health claim. Product
+  state stays in the specimen; no framework state machine or data dependency.
+- Narrow-parent regression checks, including a comparison outside a report,
+  annotation bounds, long action status, citation text and recovery journeys.
+- A complete-screen migration recipe for explicit consumer typography overrides.
+
+See [the migration guide](docs/migrations/0.10-to-0.11.md).
+
 ## 0.10.0 — 2026-09-08
 
 ### Changed

package/MIGRATIONS.json

@@ -83,7 +83,7 @@
         {
           "old": "hero / project-* / post-card / essay-* / page-* / home-* / signal-panel / worklog-summary",
           "new": "the ui-* content layer",
-          "note": "Long-form content: .ui-prose / .ui-quote. Cards: .ui-card. Layout: .ui-grid / .ui-stack. Site chrome: the ui-site* shell. No 1:1 mapping \u2014 re-compose with the content primitives."
+          "note": "Long-form content: .ui-prose / .ui-quote. Cards: .ui-card. Layout: .ui-grid / .ui-stack. Site chrome: the ui-site* shell. No 1:1 mapping — re-compose with the content primitives."
         },
         {
           "old": "callout",
@@ -98,7 +98,7 @@
         {
           "old": "tag-list / tag",
           "new": "ui-tags / ui-tag",
-          "note": "Compact variant .tag-list--compact \u2192 .ui-tags--compact; verify accent-on-accent contrast (see CHANGELOG 0.3.0 a11y fix)."
+          "note": "Compact variant .tag-list--compact → .ui-tags--compact; verify accent-on-accent contrast (see CHANGELOG 0.3.0 a11y fix)."
         }
       ],
       "codemod": "See docs/migrations/0.2-to-0.3.md for a ready-to-run ripgrep+sed recipe covering the 'safe' rules."
@@ -111,7 +111,7 @@
       "manual": [
         {
           "old": "--orange / --orange-soft",
-          "new": "(removed \u2014 re-declare in a consumer :root override if referenced)",
+          "new": "(removed — re-declare in a consumer :root override if referenced)",
           "note": "Orphan token pair: defined in the token mirrors but referenced by no shipped component and documented nowhere, and untiered under the new colour model. Removed under the CONTRIBUTING 'provably-unreferenced surface' exception. If you used it: :root { --orange: #a85f32; --orange-soft: rgb(168 95 50 / 0.13); }"
         }
       ],
@@ -120,7 +120,7 @@
     {
       "from": "0.4",
       "to": "0.5",
-      "summary": "Adds the analytical-primitives suite (annotations, legend, marks, connectors, spotlight, crosshair, selection + the analytical.css roll-up); all additive/opt-in. Three breaking changes: the chart data key moved out of the report kit into the standalone Legends layer (`.ui-chart__legend`/`.ui-chart__swatch` removed); annotation arrowheads now render via the shared connectors geometry kernel (a small visual path change, no API change); and the marks/bracket-note rationed-accent tone was renamed `evidence`\u2192`accent` to match the annotation/connector tone vocabulary (`.ui-annotation--evidence` stays \u2014 it's a marker variant, not a tone).",
+      "summary": "Adds the analytical-primitives suite (annotations, legend, marks, connectors, spotlight, crosshair, selection + the analytical.css roll-up); all additive/opt-in. Three breaking changes: the chart data key moved out of the report kit into the standalone Legends layer (`.ui-chart__legend`/`.ui-chart__swatch` removed); annotation arrowheads now render via the shared connectors geometry kernel (a small visual path change, no API change); and the marks/bracket-note rationed-accent tone was renamed `evidence`→`accent` to match the annotation/connector tone vocabulary (`.ui-annotation--evidence` stays — it's a marker variant, not a tone).",
       "safe": [
         {
           "old": "ui-chart__swatch",
@@ -139,12 +139,12 @@
         {
           "old": "ui.mark({ tone: 'evidence' }) / ui.bracketNote({ tone: 'evidence' })",
           "new": "tone: 'accent'",
-          "note": "The rationed-accent tone option on the mark/bracket-note recipes is now 'accent' (was 'evidence'), matching ui.connector/ui.annotation. Do NOT rewrite ui.annotation({ variant: 'evidence' }) or the 'evidence' subject marker \u2014 those are a marker shape, not a tone, and are unchanged."
+          "note": "The rationed-accent tone option on the mark/bracket-note recipes is now 'accent' (was 'evidence'), matching ui.connector/ui.annotation. Do NOT rewrite ui.annotation({ variant: 'evidence' }) or the 'evidence' subject marker — those are a marker shape, not a tone, and are unchanged."
         },
         {
           "old": "ui-chart__legend",
           "new": "ui-legend",
-          "note": "Also import '@ponchia/ui/css/legend.css' beside report.css, and wrap each entry's content as <li class=\"ui-legend__item\"> \u2026 <span class=\"ui-legend__label\">\u2026</span>. The swatch's --chart-color/--chart-pattern inline contract is unchanged; the categorical --chart-N colour is also available via .ui-legend__swatch--N. See docs/legends.md."
+          "note": "Also import '@ponchia/ui/css/legend.css' beside report.css, and wrap each entry's content as <li class=\"ui-legend__item\"> … <span class=\"ui-legend__label\">…</span>. The swatch's --chart-color/--chart-pattern inline contract is unchanged; the categorical --chart-N colour is also available via .ui-legend__swatch--N. See docs/legends.md."
         },
         {
           "old": "connectorEndArrow (annotations)",
@@ -157,16 +157,16 @@
     {
       "from": "0.5",
       "to": "0.6",
-      "summary": "Charting realignment. The local static bar-chart renderer (.ui-chart*) is removed \u2014 a chart needs scales + data binding, out of scope for the analytical layer. bronto is now a themeable target for Vega-Lite (@ponchia/ui/vega), the same tokens-as-data path as Mermaid/D2. The --chart-* data-viz palette, tokens/charts.json, and the .ui-legend layer are unchanged.",
+      "summary": "Charting realignment. The local static bar-chart renderer (.ui-chart*) is removed — a chart needs scales + data binding, out of scope for the analytical layer. bronto is now a themeable target for Vega-Lite (@ponchia/ui/vega), the same tokens-as-data path as Mermaid/D2. The --chart-* data-viz palette, tokens/charts.json, and the .ui-legend layer are unchanged.",
       "safe": [],
       "manual": [
         {
           "old": "ui-chart / ui-chart__plot / ui-chart__bar / ui-chart__label / ui-chart__track / ui-chart__fill / ui-chart__fallback / ui-chart__caption",
           "new": "a Vega-Lite chart themed with @ponchia/ui/vega, or a token-themed inline <svg>",
-          "note": "No 1:1 class mapping \u2014 the renderer is removed. For a real chart: import '@ponchia/ui/vega', pass brontoVegaConfig(theme) to vega-embed, and place the result in a <figure class=\"ui-report__figure\"> with a <figcaption class=\"ui-report__caption\"> and a <ul class=\"ui-legend\"> key (see docs/vega.md). For a frozen/print chart: hand-author an inline <svg> using the --chart-N palette tokens for fills. The --chart-value inline knob is gone; --chart-color/--chart-pattern remain on .ui-legend__swatch."
+          "note": "No 1:1 class mapping — the renderer is removed. For a real chart: import '@ponchia/ui/vega', pass brontoVegaConfig(theme) to vega-embed, and place the result in a <figure class=\"ui-report__figure\"> with a <figcaption class=\"ui-report__caption\"> and a <ul class=\"ui-legend\"> key (see docs/vega.md). For a frozen/print chart: hand-author an inline <svg> using the --chart-N palette tokens for fills. The --chart-value inline knob is gone; --chart-color/--chart-pattern remain on .ui-legend__swatch."
         }
       ],
-      "codemod": "No codemod \u2014 the .ui-chart* renderer has no replacement class. rg -l 'ui-chart\\\\b|ui-chart__' to find call sites, then rebuild each as a Vega-Lite chart (@ponchia/ui/vega) or a token-themed inline <svg>. See docs/vega.md."
+      "codemod": "No codemod — the .ui-chart* renderer has no replacement class. rg -l 'ui-chart\\\\b|ui-chart__' to find call sites, then rebuild each as a Vega-Lite chart (@ponchia/ui/vega) or a token-themed inline <svg>. See docs/vega.md."
     },
     {
       "from": "0.6",
@@ -205,6 +205,49 @@
         }
       ],
       "codemod": "See docs/migrations/0.9-to-0.10.md. Changes require consumer lifecycle and visual review; no blanket replacement is safe."
+    },
+    {
+      "from": "0.10",
+      "to": "0.11",
+      "summary": "Readable supporting typography and container-aware evidence layouts.",
+      "safe": [],
+      "manual": [
+        {
+          "old": "viewport-based figure/report layouts",
+          "new": "container-aware figure, decision-grid and actions layouts; intrinsic two-up comparisons",
+          "note": "Keep the documented wrappers, verify narrow parents on wide screens and review print. New inline-size containment can change intrinsic sizing."
+        },
+        {
+          "old": "uppercase mono explanatory labels and unconstrained superscript citations",
+          "new": "sentence-case sans supporting text and a citation size floor",
+          "note": "Review explicit consumer overrides by role, preserving intentional display and technical identifiers."
+        }
+      ],
+      "codemod": "No automatic rewrite: review complete consumer tasks and docs/migrations/0.10-to-0.11.md."
+    },
+    {
+      "from": "0.11",
+      "to": "0.12",
+      "summary": "Categorical palette with no accent slot, categorical identity tokens, runtime renderer tokens.",
+      "safe": [],
+      "manual": [
+        {
+          "old": "--chart-1 = var(--accent) / ACCENT from @ponchia/ui/charts",
+          "new": "fixed hues; paint an emphasised mark with var(--accent) or brontoVegaAccent(theme)",
+          "note": "ACCENT is removed. Charts that meant 'the brand' need an explicit accent encoding."
+        },
+        {
+          "old": "--chart-seq-6",
+          "new": "--chart-seq-1..5",
+          "note": "Re-map six-bin sequential figures to five bins."
+        },
+        {
+          "old": "brontoVegaConfig() framed plot, accent default mark",
+          "new": "frameless plot, first categorical hue as the default mark",
+          "note": "A spec's own config still wins; review dashboards that relied on the frame."
+        }
+      ],
+      "codemod": "No automatic rewrite: see docs/migrations/0.11-to-0.12.md."
     }
   ]
 }

package/README.md

@@ -93,7 +93,7 @@ Or drop it in with no build step, straight from a CDN (replace the version only
 when deliberately upgrading across a breaking pre-1.0 minor):
 
 ```html
-<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.12.0/dist/bronto.css">
 ```
 
 ## Quick start
@@ -171,7 +171,7 @@ Arrows, chevrons, check/close/plus/minus, search/menu/gear, info/warning/bell/lo
 - **Motion & dots** — the dot-matrix motif kit: dot grid, status dots, dot loaders, the orbital spinner, matrix reveal — all reduced-motion aware.
 - **Glyphs** — `@ponchia/ui/glyphs`, a 71-glyph dot-matrix icon set on the `.ui-dotmatrix` primitive (display marks + crisp `solid` inline icons + one-node `.ui-icon` mask rendering).
 - **Colorways** _(opt-in)_ — `data-bronto-skin="amber-crt | phosphor-green | e-ink"`: a root-level recolour of the one accent (OKLCH, per-theme, contrast-gated), never in the default bundle.
-- **Data-viz** _(opt-in)_ — a colourblind-safe chart palette (`--chart-*` + dot-matrix pattern fills, resolved hex in `charts.json`), gated under simulated protan/deutan/tritan vision. Charts only, never UI chrome.
+- **Categorical + data-viz** _(opt-in)_ — eight fixed hues as chart series (`--chart-*`, sequential/diverging ramps, dot-matrix pattern fills) and as categorical identity (`--cat-*` with tint and text ink), measured per theme and surface. Never UI chrome. `@ponchia/ui/renderer` resolves them, with the chrome, for canvas/WebGL/SVG renderers.
 
 Full generated catalog of every class: **[docs/reference.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/reference.md)**. The decision guide (which primitive when): **[docs/usage.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/usage.md)**.
 
@@ -221,7 +221,7 @@ Per-framework getting-started guides + runnable example apps live in the repo:
 
 - **Tokens as data** — `import tokens, { themeColor, cssVars } from '@ponchia/ui/tokens'` (plus authored `tokens.json`, a structured DTCG 2025.10 `tokens.dtcg.json`, `tokens/resolved.json` for concrete values in canvas/SVG/MapLibre, and `tokens/figma.variables.json` for local Figma Variables import/sync scripts).
 - **Consumer contract checker** — after an upgrade, run `npx --no-install bronto-ui-check src` to catch unknown literal `ui-*` classes and unresolved Bronto token references in code, style, and template sources before build or deployment. Comments, generated/vendor directories, and Markdown prose are excluded.
-- **Chart colours for dashboards** — `import charts from '@ponchia/ui/charts.json' with { type: 'json' }` in Node ESM, or the same path through a bundler JSON import (resolved hex per theme; series 1 = your accent) plus the opt-in `@ponchia/ui/css/dataviz.css`.
+- **Chart colours for dashboards** — `import charts from '@ponchia/ui/charts.json' with { type: 'json' }` in Node ESM, or the same path through a bundler JSON import (resolved hex per theme, eight fixed hues) plus the opt-in `@ponchia/ui/css/dataviz.css`; for a live page that switches skin or theme, `@ponchia/ui/renderer` resolves the same palette and chrome at runtime.
 - **Static reports for LLMs** — add `@ponchia/ui/css/report-kit.css` for the complete report vocabulary, or `@ponchia/ui/css/report.css` plus the specific leaves a smaller report needs. Sidecar claim/source contracts can validate against `@ponchia/ui/schemas/report-claims.v1.schema.json`. Full cookbook: `docs/reporting.md`.
 - **Modern-platform motion** — overlays (modal/drawer/popover), toasts and the `<details>` accordion animate **in and out** with zero JS (`@starting-style` + `allow-discrete`, `::details-content` + `interpolate-size`). Progressive-enhancement extras: `.ui-scroll-progress` / `.ui-scroll-reveal` (scroll-driven, no JS) and `.ui-vt` for View Transitions. All degrade to a static end-state and respect `prefers-reduced-motion`. For smooth **cross-document** navigations, add the document-global one-liner to your own top-level (unlayered) CSS: `@view-transition { navigation: auto; }`.
 - **Editor IntelliSense** — point VS Code at the shipped custom-data file so every token autocompletes in `var(--…)`:

package/behaviors/forms.d.ts

@@ -37,7 +37,7 @@ export type FormValidationOpts = {
     /**
      * Event-delegation root; default: `document`.
      */
-    root?: Document | Element | null | undefined;
+    root?: Element | Document | null | undefined;
     /**
      * Localized validation-summary title. A summary/form
      * `data-bronto-error-summary-title` attribute overrides it, and an authored

package/behaviors/internal.d.ts

@@ -21,6 +21,6 @@ export type DelegateOpts = {
      * Event-delegation root; also scopes which controls are queried. Default: `document`.
      * `null` means a scope was requested but is not ready yet, so the behavior no-ops.
      */
-    root?: Document | Element | null | undefined;
+    root?: Element | Document | null | undefined;
 };
 //# sourceMappingURL=internal.d.ts.map

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 683,
-    "groups": 186
+    "classes": 695,
+    "groups": 187
   },
   "groups": {
     "ui-accordion": {
@@ -465,6 +465,23 @@
         "ui-diff__row"
       ]
     },
+    "ui-discussion": {
+      "base": "ui-discussion",
+      "modifiers": [],
+      "parts": [
+        "ui-discussion__actions",
+        "ui-discussion__composer",
+        "ui-discussion__header",
+        "ui-discussion__hint",
+        "ui-discussion__item",
+        "ui-discussion__list",
+        "ui-discussion__message",
+        "ui-discussion__messages",
+        "ui-discussion__meta",
+        "ui-discussion__quote",
+        "ui-discussion__state"
+      ]
+    },
     "ui-display": {
       "base": "ui-display",
       "modifiers": [],
@@ -1799,6 +1816,18 @@
     "ui-diff__row--add",
     "ui-diff__row--context",
     "ui-diff__row--remove",
+    "ui-discussion",
+    "ui-discussion__actions",
+    "ui-discussion__composer",
+    "ui-discussion__header",
+    "ui-discussion__hint",
+    "ui-discussion__item",
+    "ui-discussion__list",
+    "ui-discussion__message",
+    "ui-discussion__messages",
+    "ui-discussion__meta",
+    "ui-discussion__quote",
+    "ui-discussion__state",
     "ui-display",
     "ui-divider",
     "ui-dot",

package/classes/index.d.ts

@@ -382,6 +382,18 @@ export declare const cls: {
   readonly legendTrack: 'ui-legend__track';
   readonly legendTicks: 'ui-legend__ticks';
   readonly legendTick: 'ui-legend__tick';
+  readonly discussion: 'ui-discussion';
+  readonly discussionHeader: 'ui-discussion__header';
+  readonly discussionActions: 'ui-discussion__actions';
+  readonly discussionQuote: 'ui-discussion__quote';
+  readonly discussionMessages: 'ui-discussion__messages';
+  readonly discussionList: 'ui-discussion__list';
+  readonly discussionMessage: 'ui-discussion__message';
+  readonly discussionMeta: 'ui-discussion__meta';
+  readonly discussionHint: 'ui-discussion__hint';
+  readonly discussionState: 'ui-discussion__state';
+  readonly discussionItem: 'ui-discussion__item';
+  readonly discussionComposer: 'ui-discussion__composer';
   readonly annotation: 'ui-annotation';
   readonly annotationSubject: 'ui-annotation__subject';
   readonly annotationConnector: 'ui-annotation__connector';

package/classes/index.js

@@ -400,6 +400,19 @@ export const cls = Object.freeze({
   legendTrack: 'ui-legend__track',
   legendTicks: 'ui-legend__ticks',
   legendTick: 'ui-legend__tick',
+  // discussions (opt-in discussion.css; host-owned state)
+  discussion: 'ui-discussion',
+  discussionHeader: 'ui-discussion__header',
+  discussionActions: 'ui-discussion__actions',
+  discussionQuote: 'ui-discussion__quote',
+  discussionMessages: 'ui-discussion__messages',
+  discussionList: 'ui-discussion__list',
+  discussionMessage: 'ui-discussion__message',
+  discussionMeta: 'ui-discussion__meta',
+  discussionHint: 'ui-discussion__hint',
+  discussionState: 'ui-discussion__state',
+  discussionItem: 'ui-discussion__item',
+  discussionComposer: 'ui-discussion__composer',
   annotation: 'ui-annotation',
   annotationSubject: 'ui-annotation__subject',
   annotationConnector: 'ui-annotation__connector',

package/css/annotations.css

@@ -14,7 +14,7 @@
   --annotation-stroke-width: 1.5;
 
   color: var(--annotation-color);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   overflow: visible;
 }
@@ -96,7 +96,7 @@
   stroke: var(--annotation-note-bg);
   stroke-linejoin: round;
   stroke-width: 3;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-annotation__label {

package/css/app.css

@@ -73,6 +73,8 @@
 }
 
 .ui-app-nav a {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   align-items: center;
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
@@ -354,7 +356,7 @@
     justify-content: center;
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .ui-app-nav a.is-active,

package/css/command.css

@@ -43,11 +43,11 @@
 
 .ui-command__group {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
   padding: 0.5rem 0.6rem 0.25rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-command__item {

package/css/dataviz.css

@@ -1,27 +1,39 @@
 /* @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
  *  Do not edit by hand; run `npm run charts:build`. Drift-checked in CI.
  *
- *  Tier-4 data-viz palette (ADR-0001). OPT-IN: import `@ponchia/ui/css/dataviz.css`
- *  on demand; never in the default bundle, never UI chrome. --chart-1 is the live
- *  accent (series 1 = brand). Pair colour N with pattern N (a 2nd, non-colour
- *  channel): background: var(--chart-3); background-image: var(--chart-pattern-3);
+ *  Tier-4 categorical + data-viz palette (ADR-0001). OPT-IN: import
+ *  `@ponchia/ui/css/dataviz.css` on demand; never in the default bundle, never
+ *  UI chrome. Eight fixed hues (blue, orange, aqua, yellow, magenta, green,
+ *  violet, red) in two namespaces:
+ *    --cat-N / --cat-N-tint / --cat-N-ink  categorical identity (a tag, a
+ *      participant, a user-chosen tint): ink holds 4.5:1 on the panel and tint.
+ *    --chart-N, --chart-seq-*, --chart-div-*  data-viz series and ramps.
+ *  Pair colour N with pattern N (a 2nd, non-colour channel):
+ *  background: var(--chart-3); background-image: var(--chart-pattern-3);
  *  background-size: var(--chart-pattern-size); --chart-pattern-ink: <contrast>. */
 
 :root {
-  --chart-1: var(--accent);
-  --chart-2: #e69f00;
-  --chart-3: #56b4e9;
-  --chart-4: #009e73;
-  --chart-5: #f0e442;
-  --chart-6: #0072b2;
-  --chart-7: #cc79a7;
-  --chart-8: #4d5358;
-  --chart-seq-1: oklch(94% 0.03 25deg);
-  --chart-seq-2: oklch(85% 0.07 25deg);
-  --chart-seq-3: oklch(74% 0.12 25deg);
-  --chart-seq-4: oklch(62% 0.16 25deg);
-  --chart-seq-5: oklch(50% 0.16 25deg);
-  --chart-seq-6: oklch(38% 0.13 25deg);
+  --cat-1: #2a78d6;
+  --cat-2: #eb6834;
+  --cat-3: #1baf7a;
+  --cat-4: #eda100;
+  --cat-5: #e87ba4;
+  --cat-6: #008300;
+  --cat-7: #4a3aa7;
+  --cat-8: #e34948;
+  --cat-1-ink: #1467c3;
+  --cat-2-ink: #bf3f00;
+  --cat-3-ink: #007d4c;
+  --cat-4-ink: #a45d00;
+  --cat-5-ink: #b04972;
+  --cat-6-ink: #007800;
+  --cat-7-ink: #4a3aa7;
+  --cat-8-ink: #c62b30;
+  --chart-seq-1: #80b0e8;
+  --chart-seq-2: #5598e7;
+  --chart-seq-3: #2a78d6;
+  --chart-seq-4: #1c5cab;
+  --chart-seq-5: #104281;
   --chart-div-1: oklch(45% 0.14 255deg);
   --chart-div-2: oklch(62% 0.1 250deg);
   --chart-div-3: oklch(82% 0.05 245deg);
@@ -30,11 +42,31 @@
   --chart-div-6: oklch(66% 0.13 55deg);
   --chart-div-7: oklch(56% 0.15 45deg);
 
+  /* Theme-independent: each series and tint follows its slot, and the tint
+     follows whichever --panel the page, a skin or the OLED preset set. */
+  --cat-1-tint: color-mix(in oklch, var(--cat-1) 16%, var(--panel));
+  --cat-2-tint: color-mix(in oklch, var(--cat-2) 16%, var(--panel));
+  --cat-3-tint: color-mix(in oklch, var(--cat-3) 16%, var(--panel));
+  --cat-4-tint: color-mix(in oklch, var(--cat-4) 16%, var(--panel));
+  --cat-5-tint: color-mix(in oklch, var(--cat-5) 16%, var(--panel));
+  --cat-6-tint: color-mix(in oklch, var(--cat-6) 16%, var(--panel));
+  --cat-7-tint: color-mix(in oklch, var(--cat-7) 16%, var(--panel));
+  --cat-8-tint: color-mix(in oklch, var(--cat-8) 16%, var(--panel));
+  --chart-1: var(--cat-1);
+  --chart-2: var(--cat-2);
+  --chart-3: var(--cat-3);
+  --chart-4: var(--cat-4);
+  --chart-5: var(--cat-5);
+  --chart-6: var(--cat-6);
+  --chart-7: var(--cat-7);
+  --chart-8: var(--cat-8);
+
   /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1).
-     Series 1 (the accent) is intentionally `none`: absence-of-pattern IS its
-     redundant channel. The colour palette is CVD-safe on its own (gated by
-     check:charts), so a colour+pattern chart stays distinguishable; a
-     pattern-ONLY chart must still give series 1 a fill or a labelled legend. */
+     Series 1 is intentionally `none`: absence-of-pattern IS its redundant
+     channel. Adjacent series are separated under simulated colour-vision
+     deficiency (gated by check:charts), so a colour+pattern chart stays
+     distinguishable; a pattern-ONLY chart must still give series 1 a fill or
+     a labelled legend. */
   --chart-pattern-size: 8px;
   --chart-pattern-ink: rgb(0 0 0 / 0.34);
   --chart-pattern-1: none;
@@ -49,20 +81,27 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --chart-1: var(--accent);
-    --chart-2: #e69f00;
-    --chart-3: #56b4e9;
-    --chart-4: #009e73;
-    --chart-5: #f0e442;
-    --chart-6: #0072b2;
-    --chart-7: #cc79a7;
-    --chart-8: #4d5358;
-    --chart-seq-1: oklch(30% 0.1 25deg);
-    --chart-seq-2: oklch(42% 0.15 25deg);
-    --chart-seq-3: oklch(55% 0.17 25deg);
-    --chart-seq-4: oklch(68% 0.15 25deg);
-    --chart-seq-5: oklch(80% 0.1 25deg);
-    --chart-seq-6: oklch(90% 0.05 25deg);
+    --cat-1: #3987e5;
+    --cat-2: #d95926;
+    --cat-3: #199e70;
+    --cat-4: #c98500;
+    --cat-5: #d55181;
+    --cat-6: #008300;
+    --cat-7: #9085e9;
+    --cat-8: #e66767;
+    --cat-1-ink: #4694f3;
+    --cat-2-ink: #e86f42;
+    --cat-3-ink: #27a677;
+    --cat-4-ink: #cb8705;
+    --cat-5-ink: #e46792;
+    --cat-6-ink: #38a433;
+    --cat-7-ink: #9187eb;
+    --cat-8-ink: #eb6c6c;
+    --chart-seq-1: #1b5298;
+    --chart-seq-2: #256abf;
+    --chart-seq-3: #3987e5;
+    --chart-seq-4: #6da7ec;
+    --chart-seq-5: #9ec5f4;
     --chart-div-1: oklch(70% 0.13 250deg);
     --chart-div-2: oklch(60% 0.12 252deg);
     --chart-div-3: oklch(48% 0.08 255deg);
@@ -75,20 +114,27 @@
 }
 
 :root[data-theme='dark'] {
-  --chart-1: var(--accent);
-  --chart-2: #e69f00;
-  --chart-3: #56b4e9;
-  --chart-4: #009e73;
-  --chart-5: #f0e442;
-  --chart-6: #0072b2;
-  --chart-7: #cc79a7;
-  --chart-8: #4d5358;
-  --chart-seq-1: oklch(30% 0.1 25deg);
-  --chart-seq-2: oklch(42% 0.15 25deg);
-  --chart-seq-3: oklch(55% 0.17 25deg);
-  --chart-seq-4: oklch(68% 0.15 25deg);
-  --chart-seq-5: oklch(80% 0.1 25deg);
-  --chart-seq-6: oklch(90% 0.05 25deg);
+  --cat-1: #3987e5;
+  --cat-2: #d95926;
+  --cat-3: #199e70;
+  --cat-4: #c98500;
+  --cat-5: #d55181;
+  --cat-6: #008300;
+  --cat-7: #9085e9;
+  --cat-8: #e66767;
+  --cat-1-ink: #4694f3;
+  --cat-2-ink: #e86f42;
+  --cat-3-ink: #27a677;
+  --cat-4-ink: #cb8705;
+  --cat-5-ink: #e46792;
+  --cat-6-ink: #38a433;
+  --cat-7-ink: #9187eb;
+  --cat-8-ink: #eb6c6c;
+  --chart-seq-1: #1b5298;
+  --chart-seq-2: #256abf;
+  --chart-seq-3: #3987e5;
+  --chart-seq-4: #6da7ec;
+  --chart-seq-5: #9ec5f4;
   --chart-div-1: oklch(70% 0.13 250deg);
   --chart-div-2: oklch(60% 0.12 252deg);
   --chart-div-3: oklch(48% 0.08 255deg);
@@ -101,20 +147,27 @@
 
 @media print {
   :root:not([data-theme='light']) {
-    --chart-1: var(--accent);
-    --chart-2: #e69f00;
-    --chart-3: #56b4e9;
-    --chart-4: #009e73;
-    --chart-5: #f0e442;
-    --chart-6: #0072b2;
-    --chart-7: #cc79a7;
-    --chart-8: #4d5358;
-    --chart-seq-1: oklch(94% 0.03 25deg);
-    --chart-seq-2: oklch(85% 0.07 25deg);
-    --chart-seq-3: oklch(74% 0.12 25deg);
-    --chart-seq-4: oklch(62% 0.16 25deg);
-    --chart-seq-5: oklch(50% 0.16 25deg);
-    --chart-seq-6: oklch(38% 0.13 25deg);
+    --cat-1: #2a78d6;
+    --cat-2: #eb6834;
+    --cat-3: #1baf7a;
+    --cat-4: #eda100;
+    --cat-5: #e87ba4;
+    --cat-6: #008300;
+    --cat-7: #4a3aa7;
+    --cat-8: #e34948;
+    --cat-1-ink: #1467c3;
+    --cat-2-ink: #bf3f00;
+    --cat-3-ink: #007d4c;
+    --cat-4-ink: #a45d00;
+    --cat-5-ink: #b04972;
+    --cat-6-ink: #007800;
+    --cat-7-ink: #4a3aa7;
+    --cat-8-ink: #c62b30;
+    --chart-seq-1: #80b0e8;
+    --chart-seq-2: #5598e7;
+    --chart-seq-3: #2a78d6;
+    --chart-seq-4: #1c5cab;
+    --chart-seq-5: #104281;
     --chart-div-1: oklch(45% 0.14 255deg);
     --chart-div-2: oklch(62% 0.1 250deg);
     --chart-div-3: oklch(82% 0.05 245deg);