@ponchia/ui 0.6.12 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,83 @@
 |> `^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,

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.12/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

@@ -28,6 +28,10 @@
  *
  * 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":"AAmQA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6E3C;;;;;YA3Ga,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"}

package/behaviors/modal.js

@@ -288,6 +288,10 @@ function targetIsOwnedPopover(target, modal, state) {
  *
  * 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/splitter.d.ts

@@ -4,6 +4,8 @@
  * (`role="separator"`). The behavior keeps `--splitter-pos` and
  * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
  * `bronto:splitter:resize` with `{ value, orientation }`.
+ * Buttons inside the splitter may set `data-bronto-splitter-adjust="-10"` or
+ * `"10"` to provide the required single-pointer, non-drag resize path.
  *
  * Bronto owns the control affordance only. The host owns pane content,
  * persistence, min/max policy, collapse behavior, and any saved layout state.

package/behaviors/splitter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AA6OA;;;;;;;;;;;;;GAaG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WAvPa,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}
+{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AAyPA;;;;;;;;;;;;;;;GAeG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WApQa,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}

package/behaviors/splitter.js

@@ -1,7 +1,8 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const SELECTOR = '[data-bronto-splitter]';
 const HANDLE_SELECTOR = '.ui-splitter__handle';
+const ADJUST_SELECTOR = '[data-bronto-splitter-adjust]';
 const DEFAULT_MIN = 20;
 const DEFAULT_MAX = 80;
 const DEFAULT_VALUE = 50;
@@ -218,11 +219,22 @@ function wireSplitter(splitter) {
       splitter.ownerDocument.addEventListener('pointercancel', onPointerUp);
     };
 
+    const onClick = (event) => {
+      const control = closestSafe(event.target, ADJUST_SELECTOR);
+      if (!control || control.closest(SELECTOR) !== splitter) return;
+      const delta = num(control.getAttribute('data-bronto-splitter-adjust'), Number.NaN);
+      if (!Number.isFinite(delta) || delta === 0) return;
+      event.preventDefault();
+      apply(value + delta);
+    };
+
     handle.addEventListener('keydown', onKeydown);
     handle.addEventListener('pointerdown', onPointerDown);
+    splitter.addEventListener('click', onClick);
     return () => {
       handle.removeEventListener('keydown', onKeydown);
       handle.removeEventListener('pointerdown', onPointerDown);
+      splitter.removeEventListener('click', onClick);
       splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
       splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
       splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
@@ -241,6 +253,8 @@ function wireSplitter(splitter) {
  * (`role="separator"`). The behavior keeps `--splitter-pos` and
  * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
  * `bronto:splitter:resize` with `{ value, orientation }`.
+ * Buttons inside the splitter may set `data-bronto-splitter-adjust="-10"` or
+ * `"10"` to provide the required single-pointer, non-drag resize path.
  *
  * Bronto owns the control affordance only. The host owns pane content,
  * persistence, min/max policy, collapse behavior, and any saved layout state.

package/behaviors/theme.d.ts

@@ -22,8 +22,9 @@ export function applyStoredTheme({ storageKey, root }?: ApplyThemeOpts): void;
  * persists to localStorage, and **always** sets `data-theme` on <html>
  * (a theme is document-global). State is reflected via `aria-pressed`
  * and a `bronto:themechange` CustomEvent ({ detail: { theme } }) is
- * dispatched on <html> so consumers can sync their own UI without
- * racing the click handler. A control may set
+ * dispatched on <html> for both explicit changes and OS preference changes,
+ * so consumers can sync their own UI without racing the click/media handler.
+ * A control may set
  * `data-bronto-theme-toggle="dark"` to force a specific theme.
  *
  * `root` scopes event delegation and which controls are queried/reflected

package/behaviors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAuBA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAgH3C;;;;;;;;;;6BAzJY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAuBA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;;GAeG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAmH3C;;;;;;;;;;6BA7JY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}

package/behaviors/theme.js

@@ -58,8 +58,9 @@ export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
  * persists to localStorage, and **always** sets `data-theme` on <html>
  * (a theme is document-global). State is reflected via `aria-pressed`
  * and a `bronto:themechange` CustomEvent ({ detail: { theme } }) is
- * dispatched on <html> so consumers can sync their own UI without
- * racing the click handler. A control may set
+ * dispatched on <html> for both explicit changes and OS preference changes,
+ * so consumers can sync their own UI without racing the click/media handler.
+ * A control may set
  * `data-bronto-theme-toggle="dark"` to force a specific theme.
  *
  * `root` scopes event delegation and which controls are queried/reflected
@@ -98,6 +99,11 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     return prefersDark() ? 'dark' : 'light';
   };
 
+  const emitThemeChange = (theme) => {
+    const ThemeEvent = doc.defaultView?.CustomEvent ?? CustomEvent;
+    docEl.dispatchEvent(new ThemeEvent('bronto:themechange', { detail: { theme }, bubbles: true }));
+  };
+
   const reflect = () => {
     const c = current();
     collectHosts(host, '[data-bronto-theme-toggle]').forEach((el) => {
@@ -134,7 +140,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
       clearSchemeListener();
       return;
     }
-    reflect();
+    emitThemeChange(current());
   }
 
   const onThemeChange = () => {
@@ -156,9 +162,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
       /* storage blocked — theme still applies for this session */
     }
     reflect();
-    docEl.dispatchEvent(
-      new CustomEvent('bronto:themechange', { detail: { theme: next }, bubbles: true }),
-    );
+    emitThemeChange(next);
   };
 
   return bindOnce(host, 'themeToggle', () => {

package/bin/bronto-ui-check.mjs

@@ -0,0 +1,286 @@
+#!/usr/bin/env node
+/** Validate literal Bronto classes and CSS custom-property references in a consumer. */
+import { readFileSync, readdirSync, realpathSync, statSync } from 'node:fs';
+import { extname, resolve, relative, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const classesManifest = JSON.parse(
+  readFileSync(resolve(packageRoot, 'classes/classes.json'), 'utf8'),
+);
+const tokensManifest = JSON.parse(readFileSync(resolve(packageRoot, 'tokens/index.json'), 'utf8'));
+
+const SOURCE_EXTENSIONS = new Set([
+  '.astro',
+  '.css',
+  '.html',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.svelte',
+  '.ts',
+  '.tsx',
+  '.vue',
+]);
+const SKIP_DIRS = new Set([
+  '.git',
+  '.astro',
+  '.next',
+  '.nuxt',
+  '.output',
+  '.pytest_cache',
+  '.svelte-kit',
+  '.tox',
+  '.vercel',
+  '.venv',
+  '.vite',
+  '__pycache__',
+  'build',
+  'coverage',
+  'dist',
+  'node_modules',
+  'out',
+  'playwright-report',
+  'public',
+  'storybook-static',
+  'test-results',
+  'vendor',
+  'venv',
+]);
+
+const knownClasses = new Set(classesManifest.classes);
+// CSS generic font-family keywords share the ui-* prefix but are never class
+// literals. Keep the scanner broad enough to catch JS-built class strings
+// while excluding these standardized non-class identifiers.
+const nonClassIdentifiers = new Set(['ui-monospace', 'ui-rounded', 'ui-sans-serif', 'ui-serif']);
+const knownTokens = new Set(
+  Object.values(tokensManifest.cssVars).flatMap((group) => Object.keys(group)),
+);
+for (const property of classesManifest.customProperties) knownTokens.add(property.name);
+for (const entry of readdirSync(resolve(packageRoot, 'dist/css'), { withFileTypes: true })) {
+  if (!entry.isFile() || extname(entry.name) !== '.css') continue;
+  const css = readFileSync(resolve(packageRoot, 'dist/css', entry.name), 'utf8');
+  for (const match of css.matchAll(/(--[a-z][\w-]*)\s*:/gi)) knownTokens.add(match[1]);
+}
+const reservedTokenPrefixes = new Set(
+  [...knownTokens].map((name) => `--${name.slice(2).split('-')[0]}`),
+);
+const LINE_COMMENT_EXTENSIONS = new Set([
+  '.astro',
+  '.html',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.svelte',
+  '.ts',
+  '.tsx',
+  '.vue',
+]);
+const HTML_COMMENT_EXTENSIONS = new Set(['.astro', '.html', '.svelte', '.vue']);
+
+const blankComment = (value) => value.replace(/[^\r\n]/g, ' ');
+
+function quoteEnd(text, start, quote) {
+  for (let index = start + 1; index < text.length; index += 1) {
+    if (text[index] === '\\') index += 1;
+    else if (text[index] === quote) return index + 1;
+  }
+  return text.length;
+}
+
+function stripSlashComments(text, lineComments) {
+  let output = '';
+  let index = 0;
+  while (index < text.length) {
+    const char = text[index];
+    const next = text[index + 1];
+    if (char === '"' || char === "'" || char === '`') {
+      const end = quoteEnd(text, index, char);
+      output += text.slice(index, end);
+      index = end;
+      continue;
+    }
+    if (char === '/' && next === '*') {
+      const close = text.indexOf('*/', index + 2);
+      const end = close === -1 ? text.length : close + 2;
+      output += blankComment(text.slice(index, end));
+      index = end;
+      continue;
+    }
+    if (lineComments && char === '/' && next === '/') {
+      const newline = text.indexOf('\n', index + 2);
+      const end = newline === -1 ? text.length : newline;
+      output += blankComment(text.slice(index, end));
+      index = end;
+      continue;
+    }
+    output += char;
+    index += 1;
+  }
+  return output;
+}
+
+function sourceText(text, extension) {
+  const withoutHtml = HTML_COMMENT_EXTENSIONS.has(extension)
+    ? text.replace(/<!--[\s\S]*?-->/g, blankComment)
+    : text;
+  return stripSlashComments(withoutHtml, LINE_COMMENT_EXTENSIONS.has(extension));
+}
+
+function lineAt(text, index) {
+  return text.slice(0, index).split('\n').length;
+}
+
+function filesUnder(input) {
+  const absolute = resolve(input);
+  const stat = statSync(absolute);
+  if (stat.isFile()) return SOURCE_EXTENSIONS.has(extname(absolute)) ? [absolute] : [];
+  if (!stat.isDirectory()) return [];
+  const files = [];
+  for (const entry of readdirSync(absolute, { withFileTypes: true })) {
+    if (entry.isSymbolicLink()) continue;
+    const child = resolve(absolute, entry.name);
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) files.push(...filesUnder(child));
+    } else if (entry.isFile() && SOURCE_EXTENSIONS.has(extname(entry.name))) {
+      files.push(child);
+    }
+  }
+  return files;
+}
+
+function tokenPrefix(name) {
+  return `--${name.slice(2).split('-')[0]}`;
+}
+
+export function checkPaths(inputs, { allowClasses = [], allowTokens = [] } = {}) {
+  const allowedClasses = new Set([...knownClasses, ...allowClasses]);
+  const allowedTokens = new Set([...knownTokens, ...allowTokens]);
+  const files = [...new Set(inputs.flatMap(filesUnder))].sort();
+  const documents = files.map((file) => {
+    const text = readFileSync(file, 'utf8');
+    return { file, text, scanned: sourceText(text, extname(file)) };
+  });
+  const locallyDefinedTokens = new Set();
+  for (const { scanned } of documents) {
+    for (const match of scanned.matchAll(/(--[a-z][\w-]*)\s*:/gi)) {
+      locallyDefinedTokens.add(match[1]);
+    }
+  }
+
+  const findings = [];
+  const seen = new Set();
+  const add = (finding) => {
+    const key = `${finding.kind}:${finding.file}:${finding.line}:${finding.name}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    findings.push(finding);
+  };
+
+  for (const { file, text, scanned } of documents) {
+    for (const match of scanned.matchAll(/(?<![/\w-])ui-[a-z0-9](?:[\w-]*[a-z0-9])?(?![\w/-])/gi)) {
+      if (!allowedClasses.has(match[0]) && !nonClassIdentifiers.has(match[0])) {
+        add({ kind: 'class', file, line: lineAt(text, match.index), name: match[0] });
+      }
+    }
+    for (const match of scanned.matchAll(/var\(\s*(--[a-z][\w-]*)/gi)) {
+      const name = match[1];
+      if (
+        reservedTokenPrefixes.has(tokenPrefix(name)) &&
+        !allowedTokens.has(name) &&
+        !locallyDefinedTokens.has(name)
+      ) {
+        add({ kind: 'token', file, line: lineAt(text, match.index), name });
+      }
+    }
+  }
+
+  return { files: files.length, findings };
+}
+
+function usage() {
+  return (
+    `Usage: bronto-ui-check [options] [path ...]\n\n` +
+    `Validate literal ui-* classes and unresolved Bronto-like var(--*) references.\n\n` +
+    `Options:\n` +
+    `  --allow-class NAME   Allow one consumer-owned ui-* class (repeatable)\n` +
+    `  --allow-token NAME   Allow one consumer-owned --* token (repeatable)\n` +
+    `  --json               Print machine-readable JSON\n` +
+    `  --help               Show this help\n`
+  );
+}
+
+function parseArgs(args) {
+  const options = { allowClasses: [], allowTokens: [], json: false, paths: [] };
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === '--help') return { ...options, help: true };
+    if (arg === '--json') options.json = true;
+    else if (arg === '--allow-class') {
+      const value = args[++index];
+      if (!/^ui-[a-z0-9][\w-]*$/i.test(value || '')) {
+        throw new Error('--allow-class requires one ui-* class name');
+      }
+      options.allowClasses.push(value);
+    } else if (arg === '--allow-token') {
+      const value = args[++index];
+      if (!/^--[a-z][\w-]*$/i.test(value || '')) {
+        throw new Error('--allow-token requires one --* custom-property name');
+      }
+      options.allowTokens.push(value);
+    } else if (arg.startsWith('--')) throw new Error(`Unknown option: ${arg}`);
+    else options.paths.push(arg);
+  }
+  return options;
+}
+
+function main() {
+  let options;
+  try {
+    options = parseArgs(process.argv.slice(2));
+  } catch (error) {
+    console.error(error.message);
+    console.error(usage());
+    process.exitCode = 2;
+    return;
+  }
+  if (options.help) {
+    console.log(usage());
+    return;
+  }
+  const paths = options.paths.length ? options.paths : ['.'];
+  let result;
+  try {
+    result = checkPaths(paths, options);
+  } catch (error) {
+    console.error(`[bronto-ui-check] ${error.message}`);
+    process.exitCode = 2;
+    return;
+  }
+  const cwd = process.cwd();
+  const output = {
+    files: result.files,
+    findings: result.findings.map((finding) => ({
+      ...finding,
+      file: relative(cwd, finding.file) || '.',
+    })),
+  };
+  if (options.json) console.log(JSON.stringify(output, null, 2));
+  else if (output.findings.length) {
+    for (const finding of output.findings) {
+      console.error(
+        `${finding.file}:${finding.line} unknown Bronto ${finding.kind} ${finding.name}`,
+      );
+    }
+    console.error(
+      `[bronto-ui-check] ${output.findings.length} finding(s) in ${output.files} source file(s)`,
+    );
+  } else {
+    console.log(`[bronto-ui-check] ${output.files} source file(s) match the shipped contract`);
+  }
+  if (output.findings.length) process.exitCode = 1;
+}
+
+// npm installs bins as symlinks in node_modules/.bin. Compare their real path
+// so the CLI runs both through that public entrypoint and by its package path.
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) main();

package/classes/classes.json

@@ -2791,6 +2791,13 @@
       "behavior": "initSplitter",
       "note": "keyboard + pointer ARIA window-splitter behavior; updates --splitter-pos and aria-valuenow, then emits bronto:splitter:resize. The host owns persistence and pane state."
     },
+    {
+      "name": "data-bronto-splitter-adjust",
+      "on": "a button inside a .ui-splitter host",
+      "value": "signed percentage-point delta, for example -10 or 10",
+      "behavior": "initSplitter",
+      "note": "single-pointer non-drag alternative to moving the separator; activation clamps to aria-valuemin/aria-valuemax and emits bronto:splitter:resize."
+    },
     {
       "name": "data-bronto-source-ref",
       "on": "a button/control that references a source card",

package/css/disclosure.css

@@ -272,6 +272,16 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-breadcrumb__item a {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: max(24px, 1.6rem);
+    min-inline-size: max(24px, 1.6rem);
+  }
+}
+
 /* --- Pagination --- */
 
 .ui-pagination {