Migrating 0.6 to 0.7

Machine-readable migration graph: MIGRATIONS.json.

0.7.0 repairs public contracts found by auditing ten real consumers. It does not add another component family. The only immediate breaking change is the value shape of tokens.dtcg.json.

1. Update DTCG readers

@ponchia/ui/tokens.dtcg.json now follows the DTCG 2025.10 typed-value format. Colors and dimensions are structured values instead of CSS strings, and the file contains no null placeholders.

Before 0.7:

const accent = tokens.color.light.accent.DEFAULT.$value; // '#d71921'

From 0.7:

const accent = tokens.color.light.accent.DEFAULT.$value;
// { colorSpace: 'srgb', components: [0.843137, 0.098039, 0.129412], alpha: 1, hex: '#d71921' }

Dimensions now use the same structured form:

tokens.scale.space.md.$value; // { value: 1, unit: 'rem' }

Derived var() and color-mix() colors are resolved separately for the light and dark groups. Their authored CSS expression remains available under $extensions["com.ponchia.css"].authoredValue.

If your tool needs every raw CSS expression, including CSS-only shadows and em-based letter-spacing, read @ponchia/ui/tokens.json instead. If it only needs static values for rendering, @ponchia/ui/tokens/resolved.json remains the simpler flat projection. The DTCG root extension lists the deliberately omitted CSS variables.

2. Add a non-drag splitter path

Keep the existing separator for pointer dragging and keyboard operation. Add normal buttons inside the splitter so a pointer user can resize without a drag:

<button type="button" data-bronto-splitter-adjust="-10">Narrow first pane</button>
<button type="button" data-bronto-splitter-adjust="10">Widen first pane</button>

The value is a signed percentage-point delta. initSplitter() clamps it to the separator's aria-valuemin and aria-valuemax, updates --splitter-pos, and emits the existing bronto:splitter:resize event.

3. Replace deprecated package-only adapters

The React, Solid, Qwik, Svelte, and Vue adapter subpaths remain compatible in 0.7, but are deprecated for removal no earlier than 0.8. No inspected real consumer uses them. Initialize the framework-agnostic behavior in the framework's normal client lifecycle and retain its cleanup function.

The controlled non-<dialog> initModal() path follows the same deprecation window. Prefer a native <dialog class="ui-modal"> with initDialog().

4. Check consumer literals

Run the package's zero-dependency checker after upgrading:

npx --no-install bronto-ui-check src

It reports literal ui-* classes absent from the shipped registry and unresolved Bronto-like var(--*) references. Use --allow-class or --allow-token only for an intentional consumer-owned exception.

Re-pin

// package.json — 0.7 is a breaking minor under the pre-1.0 policy
"@ponchia/ui": "~0.7.0"