@ponchia/ui 0.6.11 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,119 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.7.0 — 2026-07-20
+
+A consumer-first contract-hardening release. Ten real applications and tools,
+plus a web-platform and design-system landscape review, found more value in
+repairing and pruning the existing surface than in adding components.
+
+### BREAKING
+
+- **DTCG 2025.10 values.** `tokens.dtcg.json` now emits portable structured
+  color, dimension, duration, numeric, and cubic-bezier values. It no longer
+  emits CSS strings for typed values or `$value: null` placeholders. Derived
+  colors are resolved per light/dark theme; the original CSS expression remains
+  under `$extensions["com.ponchia.css"].authoredValue`. CSS-only shadow
+  expressions and em-based letter-spacing remain in `tokens.json` rather than
+  pretending to be portable DTCG values; the DTCG root extension lists those
+  deliberate omissions. Update JSON readers using
+  [`docs/migrations/0.6-to-0.7.md`](docs/migrations/0.6-to-0.7.md).
+
+### Added
+
+- **Consumer contract checker.** The zero-dependency `bronto-ui-check` binary
+  scans consumer source for literal `ui-*` classes absent from `classes.json`
+  and unresolved Bronto-like `var(--*)` references. It understands local token
+  definitions, strips source comments, ignores Markdown prose and build/vendor
+  directories, supports explicit allowlists, and can emit JSON.
+- **Non-drag splitter controls.** Buttons inside a splitter can use
+  `data-bronto-splitter-adjust="-10"` / `"10"` to change the first pane by a
+  signed percentage-point delta. This gives pointer users the same resize
+  function without requiring a dragging gesture.
+- **DTCG semantic gate.** `check:dtcg` validates every emitted typed value and
+  rejects null placeholders or malformed structured values before publication.
+
+### Changed
+
+- **Meter ownership.** The already-public `ui-meter__row`, `__label`, and
+  `__value` styling moves from optional `report.css` into core `feedback.css`.
+  Core consumers now receive the layout the public class contract promised;
+  report-kit output remains visually unchanged. Together with the explicit
+  24×24px coarse-pointer utility-link floors below, this intentionally adds
+  1,121 B raw / 164 B gzip to the default bundle versus 0.6.12 (now 89.9 kB raw /
+  15.4 kB gzip) and raises the hard budget only enough to admit those contracts.
+- **Release evidence.** CI and release documentation now treat real-consumer
+  literal validation, packed-tarball upgrades, and payload reporting as the
+  evidence for 1.0 readiness.
+
+### Fixed
+
+- **Live dot composition.** `ui-dot--live` now describes motion only. A
+  standalone live dot defaults to success, while an explicit accent, success,
+  warning, danger, or info tone controls both the dot and its pulse ring,
+  including forced-colors mode.
+- **OS theme synchronization.** An OS `prefers-color-scheme` change now emits
+  the existing `bronto:themechange` event when no explicit theme is set, keeping
+  consumer-rendered charts, icons, and labels synchronized with the CSS theme.
+- **Named dialogs.** `initDialog()` now warns once when an opened native dialog
+  has no `aria-label`, `aria-labelledby`, or `title`. All shipped framework
+  examples provide a name.
+- **Touch target floors.** Breadcrumb and footer utility links reach the WCAG
+  2.5.8 24 CSS-pixel floor under a coarse pointer.
+
+### Deprecated
+
+- **Framework adapter subpaths.** `@ponchia/ui/react`, `/solid`, `/qwik`,
+  `/svelte`, and `/vue` remain compatible in 0.7 but are scheduled for removal
+  no earlier than 0.8. None of the ten inspected consumers imports them; use the
+  vanilla behavior initializers in each framework's mount/cleanup lifecycle.
+- **Controlled non-native modal.** `initModal()`, its adapter bindings, and
+  `data-bronto-modal` remain compatible in 0.7 but are scheduled for removal no
+  earlier than 0.8. Prefer native `<dialog>` with `initDialog()`.
+
+### Verified
+
+- Unit, type, generated-artifact, package, schema, DTCG, class/token contract,
+  browser, accessibility, packed-example, and real-consumer checks are release
+  gates. The release evidence records consumer classes and imported surfaces
+  without exposing private project details.
+
+## 0.6.12 — 2026-07-10
+
+A stabilization patch. It changes no public class, token name, behavior name,
+or package path.
+
+### Changed
+
+- **Small-text readability.** The `--text-2xs` value increases from `0.68rem`
+  to `0.72rem`. This raises the floor for form labels, table headings,
+  provenance metadata, report captions, and other dense secondary text without
+  changing the type scale's public names or the default CSS payload size.
+- **1.0 stabilization mode.** Public catalog growth is frozen while real
+  consumers move onto one current minor. The stability guide now distinguishes
+  downstream-proven surfaces from package-only proof and unproven 1.0
+  candidates. New public surface needs explicit maintainer approval to reopen
+  the catalog.
+
+### Fixed
+
+- **Controlled-modal ownership.** `initModal()` now reconciles one stack per
+  document instead of letting each modal own `inert` independently. Sibling
+  portal modals no longer inert the active top modal, nested stacks restore the
+  previous modal correctly, late-added background nodes join the trap, and a
+  popover opened from the top modal remains interactive when its panel is
+  portaled elsewhere. Cleanup still preserves author-owned `inert` state.
+- **Maintainer documentation.** The architecture map now identifies
+  `css/generated.css` as authored trust-surface CSS, and the roadmap reflects
+  the current release and WOFF2 font payload.
+
+### Verified
+
+- Focused unit coverage exercises sibling and nested modal stacks, portaled
+  popovers, late background nodes, focus restoration, and cleanup ownership.
+  The non-pixel browser suite carries the same sibling-stack, portal, and
+  late-node scenario.
+
 ## 0.6.11 — 2026-07-04
 
 A correctness, accessibility, and performance release drawn from a multi-pass

package/MIGRATIONS.json

@@ -101,6 +101,20 @@
         }
       ],
       "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",
+      "to": "0.7",
+      "summary": "Contract-hardening release. tokens.dtcg.json now uses conforming DTCG 2025.10 structured values instead of CSS strings/null placeholders. Splitters gain an additive non-drag pointer path. Framework adapters and initModal are deprecated, but remain compatible throughout 0.7.",
+      "safe": [],
+      "manual": [
+        {
+          "old": "tokens.dtcg.json scalar color/dimension values and $value:null CSS-expression placeholders",
+          "new": "DTCG 2025.10 structured typed values resolved per light/dark theme",
+          "note": "Update tooling to read color objects ({ colorSpace, components, alpha, optional hex }) and dimension objects ({ value, unit }). Read tokens.json when the authored CSS var()/color-mix() expression is required. CSS-only shadow expressions are not part of the portable DTCG projection."
+        }
+      ],
+      "codemod": "No source codemod. Update the DTCG reader at its JSON access boundary, then run npx --no-install bronto-ui-check against consumer source. See docs/migrations/0.6-to-0.7.md."
     }
   ]
 }

package/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/@ponchia/ui?logo=npm)](https://www.npmjs.com/package/@ponchia/ui)
 [![npm provenance](https://img.shields.io/badge/npm-provenance-blue?logo=npm)](https://www.npmjs.com/package/@ponchia/ui#provenance)
 [![runtime deps](https://img.shields.io/badge/runtime%20deps-0-brightgreen)](https://github.com/Ponchia/bronto-ui/blob/main/package.json)
-[![default CSS](https://img.shields.io/badge/default%20CSS-~89kB%20%2F%20~15kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
+[![default CSS](https://img.shields.io/badge/default%20CSS-~90kB%20%2F%20~15kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
 [![CI](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml)
 [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/Ponchia/bronto-ui/badge)](https://scorecard.dev/viewer/?uri=github.com/Ponchia/bronto-ui)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/Ponchia/bronto-ui/blob/main/LICENSE)
@@ -77,15 +77,16 @@ for the thesis.
 npm i @ponchia/ui
 ```
 
-Or drop it in with no build step, straight from a CDN:
+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.6.11/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.7.0/dist/bronto.css">
 ```
 
 ## Quick start
 
-**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~89 kB raw / ~15 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
+**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~90 kB raw / ~15 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
 
 ```css
 @import '@ponchia/ui';            /* via a bundler */
@@ -187,7 +188,13 @@ Not an afterthought — a gate. Every contractual token pairing has a declared W
 
 ## Works with anything
 
-The CSS is the framework, so it works with React, Svelte/SvelteKit, Astro, Vue, Solid, Qwik or plain HTML — there's no component runtime to adopt. The optional `classes` and `behaviors` entrypoints pull in **no** UI framework and are SSR-safe. For React, Solid and Qwik there are also **optional thin bindings** — `@ponchia/ui/react`, `@ponchia/ui/solid` and `@ponchia/ui/qwik` wrap the behaviors as hooks (`useDialog`, `useToast`, …); `react`/`solid-js`/`@builder.io/qwik` are optional peer deps. Svelte and Vue get dependency-free lifecycle adapters too: `@ponchia/ui/svelte` exports actions, and `@ponchia/ui/vue` exports directives/plugin helpers over the same behavior layer.
+The CSS is the framework, so it works with React, Svelte/SvelteKit, Astro, Vue,
+Solid, Qwik or plain HTML — there's no component runtime to adopt. The optional
+`classes` and framework-neutral `behaviors` entrypoints pull in **no** UI
+framework and are SSR-safe. The React, Solid, Qwik, Svelte, and Vue lifecycle
+adapter subpaths remain compatible in 0.7 but are deprecated for removal no
+earlier than 0.8; initialize vanilla behaviors in the framework's ordinary
+mount/cleanup lifecycle instead.
 
 Per-framework getting-started guides + runnable example apps live in the repo:
 
@@ -204,7 +211,8 @@ Per-framework getting-started guides + runnable example apps live in the repo:
 
 ## Extras
 
-- **Tokens as data** — `import tokens, { themeColor, cssVars } from '@ponchia/ui/tokens'` (plus `tokens.json`, W3C DTCG `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).
+- **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`.
 - **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; }`.

package/behaviors/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAgG3C"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA8G3C"}

package/behaviors/dialog.js

@@ -26,8 +26,21 @@ export function initDialog({ root } = {}) {
   if (!doc) return noop;
   const managedDialogs = new Set();
   const focusRestorers = new Map();
+  const warnedNameless = new WeakSet();
   const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
 
+  const warnIfNameless = (dlg) => {
+    const named =
+      dlg.hasAttribute('aria-label') ||
+      dlg.hasAttribute('aria-labelledby') ||
+      dlg.hasAttribute('title');
+    if (named || warnedNameless.has(dlg) || typeof console === 'undefined') return;
+    warnedNameless.add(dlg);
+    console.warn(
+      `[bronto] initDialog(): dialog #${dlg.id || '(without id)'} has no accessible name — add aria-label, aria-labelledby, or title so it is announced as a named dialog.`,
+    );
+  };
+
   const openFrom = (opener) => {
     const dlg = byIdInHost(host, opener.getAttribute('data-bronto-open'));
     if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return false;
@@ -47,6 +60,7 @@ export function initDialog({ root } = {}) {
     } catch {
       return false;
     }
+    warnIfNameless(dlg);
     managedDialogs.add(dlg);
     focusRestorers.set(dlg, restoreFocus);
     dlg.addEventListener('close', restoreFocus, { once: true });

package/behaviors/modal.d.ts

@@ -12,21 +12,25 @@
  *
  * Mark the overlay `[data-bronto-modal]` (opt-in). On bind it gives the modal a
  * `role="dialog"` + `aria-modal="true"` (unless the author set a role) and
- * dev-warns when it has no accessible name, so it announces as a named modal
- * dialog — parity with `initPopover`. The behavior watches its
- * `class` for `is-open`: on open it remembers the focused element, moves focus
- * into the modal (first focusable, else the panel itself), and **traps focus by
- * marking every sibling at each ancestor level `inert`** so the rest of the page
- * is non-focusable and non-interactive — the modern, robust trap. On close it
- * un-inerts exactly what it inerted and returns focus to the opener. Bronto owns
- * focus only: the **consumer still owns open/close state** (the `is-open`
- * class). Escape dispatches a cancelable `bronto:modal:close`
+ * dev-warns when it has no accessible name. While open, a document-level stack
+ * reconciler keeps only the top controlled modal interactive, marks the rest of
+ * the page `inert`, admits an open popover owned by the top modal even when the
+ * panel is portaled elsewhere, and applies the trap to background nodes added
+ * after open. Nested and sibling portal modals therefore share one ownership
+ * model instead of independently inverting each other's `inert` state.
+ *
+ * Bronto owns focus only: the **consumer still owns open/close state** (the
+ * `is-open` class). Escape dispatches a cancelable `bronto:modal:close`
  * ({@link ModalCloseDetail}) on the modal so the consumer can drop `is-open` in
- * response; the behavior never changes visibility itself.
+ * response; the behavior never changes visibility itself. Closing a parent
+ * modal temporarily suspends any still-`is-open` controlled descendants; they
+ * resume at the top of the stack if the parent reopens.
+ *
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
- * Best suited to a body-/portal-level overlay (the documented `.is-open` use
- * case); a deeply-nested modal still gets focus-into, focus-return, and the
- * Escape signal. SSR-safe, idempotent per modal; returns a cleanup function.
+ * @deprecated Use a native `<dialog>` with `initDialog()`. This controlled
+ * non-dialog path remains compatible in 0.7 and is scheduled for removal no
+ * earlier than 0.8 because no real consumer adopted it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAsDA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+G3C;;;;;YA7Ia,QAAQ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAmQA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6E3C;;;;;YA/Ga,QAAQ"}