@ponchia/ui 0.6.12 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,216 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.8.0 — 2026-08-11
+
+A single-consumer release. A full-surface audit of the largest downstream
+consumer — a Yjs-collaborative spatial canvas workspace with roughly ten
+thousand lines of its own CSS — found it using 26 of the 646 published classes
+and hand-rebuilding much of the rest. Everything here comes from what that
+consumer had to write because the framework did not provide it, or got wrong.
+
+### BREAKING
+
+- **A colorway now re-points the neutral canvas, so every skinned surface
+  changes appearance.** No class, token, attribute, or export was removed or
+  renamed, and `bronto-ui-check` will report nothing — the break is *visual*,
+  which is why it is called out here rather than left in Changed. Until 0.7,
+  `data-bronto-skin` moved `--accent` and nothing else, and ADR-0001 step 4 said
+  so explicitly; a consumer could reasonably have relied on the canvas staying
+  neutral. From 0.8 the ten `SKIN_CANVAS_TOKENS` (`--bg`, `--bg-elevated`,
+  `--panel`, `--panel-strong`, `--panel-soft`, `--line`, `--line-strong`,
+  `--text`, `--text-soft`, `--text-dim`) are re-pointed per skin per theme.
+  - **If you want the old look**, re-declare those ten tokens after the skin
+    import; they are ordinary custom properties on `:root[data-bronto-skin=…]`
+    and un-layered app CSS wins.
+  - **If you already hand-wrote a canvas** for a skin — the case this change
+    exists to serve — delete it and check the result; yours was almost certainly
+    not contrast-gated, and this one is.
+  - **Contrast is not a regression risk.** Each neutral keeps the core token's
+    OKLCH lightness exactly, and `check-contrast` re-measures all 21 gated
+    pairings per skin per theme. Status colours are untouched by design.
+
+### Fixed
+
+- **The coarse-pointer tap target was 43.5px, not 44px.** The floor was written
+  as a bare `2.9rem` at 23 sites across 8 stylesheets, and `css/base.css` sets
+  `html { font-size: 0.9375rem }` — so every control the framework floats on
+  touch landed half a pixel under WCAG 2.5.5 and both platform HIGs, and drifted
+  further under any host that shrank the root. Several comments asserted
+  "≈ 44px". Both floors are now published tokens clamped in px
+  (`--tap-target: max(44px, 2.9rem)`, `--tap-target-min: max(24px, 1.6rem)`) —
+  the same `max()` shape the 24px floor already used correctly in five places.
+  The e2e that should have caught this was derived from the token (`2.9 * rem`),
+  so it agreed with the bug; it now asserts the external 44px standard, and a
+  unit gate walks every `@media (pointer: coarse)` block and fails on any floor
+  written as a bare length. That gate immediately found one more:
+  `.ui-table__sort`.
+
+### Added
+
+- **`.ui-button__label`** — the label slot for icon buttons. Wrap a button's
+  text in it and `--icon` decides whether the words are painted; they stay in
+  the accessible name and in text-based test selectors either way. One markup
+  shape serves both the labelled and icon-only forms, and no `aria-label` can
+  drift out of sync with the visible wording. The slot also ellipsises rather
+  than wrapping, so a labelled button in a tight bar shrinks instead of pushing
+  its neighbours out. `ui.button()` is unchanged; `cls.buttonLabel` is new.
+- **`.ui-button--dense`** — a size tier for bars whose *height* is the
+  constraint (a pane title bar, a packed toolbar, a table row's actions). It
+  lowers only the visual floor, to `--tap-target-min`; the coarse-pointer block
+  still floats it to the full `--tap-target`, so a control shrunk for a mouse is
+  never shrunk for a finger. `ui.button({ size: 'dense' })`.
+- **A canonical severity ladder** (`css/state.css`, opt-in). Bronto shipped the
+  *tones* long ago but never the *scale* — the tier names, their order, and the
+  attribute carrying them — so every consumer invented the ladder and it drifted
+  inside a single app: one surface saying `critical|error|warning|note`, the
+  next `bad|warn`, a third `critical|warning|info|ok`, under two different
+  attribute names, so findings did not sort against alerts. The ladder is
+  `critical` › `error` › `warning` › `notice` › `ok`, carried on **one**
+  attribute (`data-level`) across `.ui-severity`, `.ui-severity-dot` and
+  `.ui-severity-row`, with `SEVERITY_LEVELS` and `severity()` exported so a host
+  drives filters and sorts from the same list the CSS paints. `unknown` sits
+  deliberately *outside* the ordering: it means "not measured", and collapsing
+  it into `ok` is how a dead collector reads as a healthy system.
+- **`.ui-pane`** (`css/workbench.css`, opt-in) — the window that `.ui-panel`
+  (a padded card) and `.ui-inspector` (head plus body) are not: a grab header,
+  a title that renames in place via `__title-input` without moving layout, and
+  an `__actions` slot that **scrolls rather than pushing** its last control past
+  the pane's clipped edge — the failure that leaves a Focus or Disconnect button
+  present, in the a11y tree, and unreachable.
+- **`.ui-toolstrip--pane`** — the app has one toolstrip; a workbench full of
+  panes has one *per pane*, and those need different framing (no frame of their
+  own, a rule against the content below) and must not wrap, since a second row
+  would resize live content on every state change. `.ui-toolstrip__fill` marks
+  the element that absorbs slack and gives it back first.
+- **`--anchored` / `--anchor-block-start` / `--anchor-block-end`** on
+  `.ui-selectionbar` and `.ui-toolstrip`. Both `--floating` bars were raised but
+  position-less, so every consumer re-derived the placement — including the
+  `max(offset, inset)` shape that keeps a bar out from under the home indicator.
+- **Empty-state slots and an invite variant.** `.ui-empty-state` was a dashed
+  box that styled a `<p>`, so every empty surface in an app re-invented the same
+  three parts under a different name and they drifted. `__glyph` / `__lead` /
+  `__hint` name them, and `--invite` is the different job: an empty state
+  *reports absence*, an invite *offers the next action*, so it drops the dashed
+  frame and centres in the space it is given.
+- **Safe-area tokens** — `--safe-area-top / -right / -bottom / -left`, defaulting
+  to `env(safe-area-inset-*, 0px)`. The framework had **no** `env()` awareness
+  while shipping eight viewport-anchored surfaces; all eight now read them: the
+  app rail and topbar, a sticky site header, the skip link, both toast stacks,
+  the drawer modal and the lightbox. Every rule uses
+  `max(<authored>, var(--safe-area-*))`, so desktop rendering is unchanged. The
+  values are indirected through custom properties rather than called at the
+  point of use because `env()` cannot be emulated by a desktop test runner —
+  and because a host inside its own chrome (embedded webview, kiosk frame) needs
+  to declare the real insets.
+
+### Changed
+
+- **ADR-0001 step 4 amended** to permit the canvas re-point above (see
+  BREAKING). "Amber CRT" used to leave the surface grey, which is what drove the
+  consumer to hand-write an amber canvas in raw hex — dark theme only, outside
+  OKLCH, outside the contrast gate, with `e-ink` silently un-tinted. The canvas
+  is **derived rather than picked**: every neutral keeps the core token's OKLCH
+  *lightness* exactly and moves only hue and a small role-scaled chroma.
+  `check-skins` now rejects a partial canvas and a one-theme-only canvas, the
+  two shapes the hand-written version had.
+- **`check:recipe-types` no longer mis-attributes options.** It sliced the
+  factory body to end-of-file, so the *last* recipe's chunk swallowed everything
+  declared after the `ui` object — an unrelated helper exported below it had its
+  string branches blamed on whichever recipe happened to be last. It now stops
+  at the object's own closing brace.
+- `docs/stability.md` records the audit and the correction it forces on this
+  project's adoption model: "no inspected consumer imports the surface" has been
+  measuring **discoverability, not demand**. Those thirteen zero-use primitives
+  were never rejected; they were never found. Non-adoption of a leaf the
+  consumer never imported is not evidence for retiring it at 1.0.
+
+### Notes
+
+- Anything that reads `tokens.dtcg.json` should know that six new scale tokens
+  are **deliberately absent** from it, listed in the root extension's
+  `omittedCssVariables`: the two tap-target floors are `max()` comparisons and
+  the four safe-area insets are `env()` reads, neither of which has a conforming
+  DTCG shape. `tokens.json` carries the authored CSS. This is the same treatment
+  `--shadow` and the em trackings already get.
+
+## 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-~92kB%20%2F%20~16kB%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.8.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 (~92 kB raw / ~16 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', () => {