@ponchia/ui 0.9.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +107 -4
- package/MIGRATIONS.json +127 -18
- package/README.md +17 -9
- package/behaviors/index.d.ts +0 -2
- package/behaviors/index.d.ts.map +1 -1
- package/behaviors/index.js +0 -2
- package/behaviors/popover.js +4 -4
- package/classes/classes.json +53 -9
- package/classes/index.d.ts +20 -3
- package/classes/index.js +33 -3
- package/classes/vscode.css-custom-data.json +10 -10
- package/css/annotations.css +2 -2
- package/css/app.css +55 -31
- package/css/base.css +10 -14
- package/css/command.css +4 -4
- package/css/content.css +23 -21
- package/css/disclosure.css +17 -17
- package/css/discussion.css +150 -0
- package/css/feedback.css +15 -15
- package/css/figure.css +6 -4
- package/css/forms.css +8 -7
- package/css/generated.css +19 -12
- package/css/legend.css +13 -5
- package/css/navigation.css +3 -3
- package/css/overlay.css +13 -29
- package/css/primitives.css +48 -28
- package/css/report.css +91 -53
- package/css/sources.css +1 -1
- package/css/state.css +95 -6
- package/css/table.css +3 -3
- package/css/tokens.css +10 -10
- package/css/workbench.css +21 -9
- package/dist/bronto.css +1 -1
- package/dist/css/analytical.css +1 -1
- package/dist/css/annotations.css +1 -1
- package/dist/css/app.css +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/command.css +1 -1
- package/dist/css/content.css +1 -1
- package/dist/css/disclosure.css +1 -1
- package/dist/css/discussion.css +1 -0
- package/dist/css/feedback.css +1 -1
- package/dist/css/figure.css +1 -1
- package/dist/css/forms.css +1 -1
- package/dist/css/generated.css +1 -1
- package/dist/css/legend.css +1 -1
- package/dist/css/navigation.css +1 -1
- package/dist/css/overlay.css +1 -1
- package/dist/css/primitives.css +1 -1
- package/dist/css/report-kit.css +1 -1
- package/dist/css/report.css +1 -1
- package/dist/css/sources.css +1 -1
- package/dist/css/state.css +1 -1
- package/dist/css/table.css +1 -1
- package/dist/css/tokens.css +1 -1
- package/dist/css/workbench.css +1 -1
- package/docs/adr/0004-prune-unused-adapters.md +5 -1
- package/docs/adr/0005-productive-tools-and-editorial-reports.md +58 -0
- package/docs/adr/0006-trusted-publishing.md +92 -0
- package/docs/architecture.md +16 -23
- package/docs/command.md +1 -2
- package/docs/compositions.md +131 -0
- package/docs/discussion.md +64 -0
- package/docs/figure.md +10 -1
- package/docs/frontier-primitives.md +1 -2
- package/docs/migrations/0.10-to-0.11.md +61 -0
- package/docs/migrations/0.9-to-0.10.md +47 -0
- package/docs/package-contract.md +16 -13
- package/docs/reference.md +47 -18
- package/docs/reporting.md +15 -9
- package/docs/stability.md +20 -55
- package/docs/state.md +47 -0
- package/docs/usage.md +18 -30
- package/llms.txt +7 -18
- package/package.json +18 -54
- package/tokens/figma.variables.json +20 -20
- package/tokens/index.js +10 -10
- package/tokens/index.json +20 -20
- package/tokens/resolved.json +10 -10
- package/tokens/tokens.dtcg.json +20 -20
- package/behaviors/modal.d.ts +0 -45
- package/behaviors/modal.d.ts.map +0 -1
- package/behaviors/modal.js +0 -373
- package/qwik/index.d.ts +0 -48
- package/qwik/index.d.ts.map +0 -1
- package/qwik/index.js +0 -227
- package/react/index.d.ts +0 -45
- package/react/index.d.ts.map +0 -1
- package/react/index.js +0 -165
- package/solid/index.d.ts +0 -75
- package/solid/index.d.ts.map +0 -1
- package/solid/index.js +0 -172
- package/svelte/index.d.ts +0 -114
- package/svelte/index.d.ts.map +0 -1
- package/svelte/index.js +0 -197
- package/vue/index.d.ts +0 -116
- package/vue/index.d.ts.map +0 -1
- package/vue/index.js +0 -266
package/docs/package-contract.md
CHANGED
|
@@ -15,7 +15,7 @@ semantic versioning contract for the surfaces listed here.
|
|
|
15
15
|
| --- | --- | --- |
|
|
16
16
|
| CSS root and `dist/bronto.css` | Stable | CSS-only default bundle. CSS side-effect imports are supported in CSS-aware bundlers; Node/runtime JS root imports are not. |
|
|
17
17
|
| CSS leaves | Stable additive | Direct leaves are generated as layered `dist/css/*.css` exports; raw unlayered source leaves are explicit escape hatches under `./css/unlayered/*`. |
|
|
18
|
-
| JS subpaths | Stable | ESM-only public subpaths. Runtime behavior is SSR-safe and dependency-free
|
|
18
|
+
| JS subpaths | Stable | ESM-only public subpaths. Runtime behavior is SSR-safe and dependency-free; framework lifecycles belong to consumers. |
|
|
19
19
|
| Machine-readable data | Stable additive | JSON/data exports are for non-JS hosts, validators, renderers, and offline agents. Additive fields are allowed within a compatible minor. |
|
|
20
20
|
| Shipped docs | Stable paths | Curated Markdown/text docs ship inside the npm tarball for offline readers. Generated docs are regenerated and drift-checked. |
|
|
21
21
|
| Fonts | Stable path pattern | Doto assets ship under `fonts/*` with their OFL license. |
|
|
@@ -197,7 +197,6 @@ semantic versioning contract for the surfaces listed here.
|
|
|
197
197
|
| `./behaviors/inert` | types: `./behaviors/inert.d.ts`<br>default: `./behaviors/inert.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
198
198
|
| `./behaviors/legend` | types: `./behaviors/legend.d.ts`<br>default: `./behaviors/legend.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
199
199
|
| `./behaviors/menu` | types: `./behaviors/menu.d.ts`<br>default: `./behaviors/menu.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
200
|
-
| `./behaviors/modal` | types: `./behaviors/modal.d.ts`<br>default: `./behaviors/modal.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
201
200
|
| `./behaviors/popover` | types: `./behaviors/popover.d.ts`<br>default: `./behaviors/popover.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
202
201
|
| `./behaviors/sources` | types: `./behaviors/sources.d.ts`<br>default: `./behaviors/sources.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
203
202
|
| `./behaviors/splitter` | types: `./behaviors/splitter.d.ts`<br>default: `./behaviors/splitter.js` | Package subpath | Public | Exported package subpath. See docs/stability.md for semantic stability. |
|
|
@@ -209,11 +208,6 @@ semantic versioning contract for the surfaces listed here.
|
|
|
209
208
|
| `./glyphs` | types: `./glyphs/glyphs.d.ts`<br>default: `./glyphs/glyphs.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
|
|
210
209
|
| `./annotations` | types: `./annotations/index.d.ts`<br>default: `./annotations/index.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
|
|
211
210
|
| `./connectors` | types: `./connectors/index.d.ts`<br>default: `./connectors/index.js` | Geometry/render helper JS | Stable additive | ESM helper surface. Function names, options, and data shapes are public; rendering heuristics may tune. |
|
|
212
|
-
| `./react` | types: `./react/index.d.ts`<br>default: `./react/index.js` | Framework binding JS | Deprecated in 0.7 | Compatibility wrapper over vanilla behaviors. Scheduled for removal no earlier than 0.8 under ADR-0004; use direct behavior lifecycle cleanup. |
|
|
213
|
-
| `./solid` | types: `./solid/index.d.ts`<br>default: `./solid/index.js` | Framework binding JS | Deprecated in 0.7 | Compatibility wrapper over vanilla behaviors. Scheduled for removal no earlier than 0.8 under ADR-0004; use direct behavior lifecycle cleanup. |
|
|
214
|
-
| `./qwik` | types: `./qwik/index.d.ts`<br>default: `./qwik/index.js` | Framework binding JS | Deprecated in 0.7 | Compatibility wrapper over vanilla behaviors. Scheduled for removal no earlier than 0.8 under ADR-0004; use direct behavior lifecycle cleanup. |
|
|
215
|
-
| `./svelte` | types: `./svelte/index.d.ts`<br>default: `./svelte/index.js` | Framework binding JS | Deprecated in 0.7 | Compatibility wrapper over vanilla behaviors. Scheduled for removal no earlier than 0.8 under ADR-0004; use direct behavior lifecycle cleanup. |
|
|
216
|
-
| `./vue` | types: `./vue/index.d.ts`<br>default: `./vue/index.js` | Framework binding JS | Deprecated in 0.7 | Compatibility wrapper over vanilla behaviors. Scheduled for removal no earlier than 0.8 under ADR-0004; use direct behavior lifecycle cleanup. |
|
|
217
211
|
| `./skins` | types: `./tokens/skins.d.ts`<br>default: `./tokens/skins.js` | Renderer/theme helper JS | Stable additive | ESM theme data/helpers for opt-in skins, chart palettes, and external renderers. |
|
|
218
212
|
| `./charts` | types: `./tokens/charts.d.ts`<br>default: `./tokens/charts.js` | Renderer/theme helper JS | Stable additive | ESM theme data/helpers for opt-in skins, chart palettes, and external renderers. |
|
|
219
213
|
| `./charts.json` | `./tokens/charts.json` | Machine-readable data | Stable additive | JSON package data for non-JS/tooling consumers. Shape is public unless the paired doc marks a field internal. |
|
|
@@ -224,6 +218,14 @@ semantic versioning contract for the surfaces listed here.
|
|
|
224
218
|
| `./vega` | types: `./tokens/vega.d.ts`<br>default: `./tokens/vega.js` | Renderer/theme helper JS | Stable additive | ESM theme data/helpers for opt-in skins, chart palettes, and external renderers. |
|
|
225
219
|
| `./vega.json` | `./tokens/vega.json` | Machine-readable data | Stable additive | JSON package data for non-JS/tooling consumers. Shape is public unless the paired doc marks a field internal. |
|
|
226
220
|
| `./fonts/*` | `./fonts/*` | Vendored font asset glob | Stable path pattern | Doto font files and license. Font file names are shipped assets, not JS APIs. |
|
|
221
|
+
| `./docs/compositions.md` | `./docs/compositions.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
222
|
+
| `./docs/adr/0005-productive-tools-and-editorial-reports.md` | `./docs/adr/0005-productive-tools-and-editorial-reports.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
223
|
+
| `./docs/migrations/0.9-to-0.10.md` | `./docs/migrations/0.9-to-0.10.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
224
|
+
| `./docs/adr/0006-trusted-publishing.md` | `./docs/adr/0006-trusted-publishing.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
225
|
+
| `./docs/migrations/0.10-to-0.11.md` | `./docs/migrations/0.10-to-0.11.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
226
|
+
| `./css/discussion.css` | `./dist/css/discussion.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
|
|
227
|
+
| `./css/unlayered/discussion.css` | `./css/discussion.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
|
|
228
|
+
| `./docs/discussion.md` | `./docs/discussion.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
|
|
227
229
|
|
|
228
230
|
## Shipped Files Allowlist
|
|
229
231
|
|
|
@@ -246,11 +248,6 @@ always includes `package.json`, `README.md`, `LICENSE`, and
|
|
|
246
248
|
| `schemas` | Machine-readable schemas | Declarative JSON schemas for package-adjacent report/tooling contracts. |
|
|
247
249
|
| `annotations` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
248
250
|
| `connectors` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
249
|
-
| `react` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
250
|
-
| `solid` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
251
|
-
| `qwik` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
252
|
-
| `svelte` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
253
|
-
| `vue` | Authored public JS directory | ESM source shipped as-is; adjacent declarations/maps are generated. |
|
|
254
251
|
| `shiki` | Theme data | Shiki theme JSON on the governed palette. |
|
|
255
252
|
| `llms.txt` | Agent entrypoint | Shipped plain-text orientation for offline LLM/agent consumers. |
|
|
256
253
|
| `CHANGELOG.md` | Release record | Shipped historical release notes. |
|
|
@@ -271,6 +268,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
|
|
|
271
268
|
| `docs/vega.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
272
269
|
| `docs/figure.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
273
270
|
| `docs/annotations.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
271
|
+
| `docs/discussion.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
274
272
|
| `docs/legends.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
275
273
|
| `docs/marks.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
276
274
|
| `docs/connectors.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
@@ -307,6 +305,11 @@ always includes `package.json`, `README.md`, `LICENSE`, and
|
|
|
307
305
|
| `docs/adr/0002-scope-and-2026-baseline.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
308
306
|
| `docs/adr/0003-theme-model.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
309
307
|
| `docs/adr/0004-prune-unused-adapters.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
308
|
+
| `docs/compositions.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
309
|
+
| `docs/adr/0005-productive-tools-and-editorial-reports.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
310
|
+
| `docs/migrations/0.9-to-0.10.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
311
|
+
| `docs/adr/0006-trusted-publishing.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
312
|
+
| `docs/migrations/0.10-to-0.11.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
310
313
|
|
|
311
314
|
## Artifact Provenance
|
|
312
315
|
|
|
@@ -319,7 +322,7 @@ result. The listed gates are part of `npm run check`.
|
|
|
319
322
|
| Package manifest | `package.json` | docs/package-contract.md | `npm run package-contract:build` | check:fresh; check:exports; check:pack; check:consumer-surface; check:consumer-types; check:publint; check:attw | The complete export/file matrix in this document is generated from the manifest; packed tarball imports, concrete file resolution, and package-level type resolution are smoke-tested in clean consumers. |
|
|
320
323
|
| Token model | `tokens/index.js` | css/tokens.css; tokens/index.json; tokens/tokens.dtcg.json; tokens/resolved.json; tokens/figma.variables.json; tokens/index.d.ts | `npm run tokens:css:build; tokens:build; dtcg:build; resolved:build; figma:variables:build; dts:build` | check:fresh; check:contrast | Token names/roles are public. Resolved and Figma handoff values are visual tuning before 1.0. |
|
|
321
324
|
| Class registry | `classes/index.js plus css/*.css selectors` | classes/classes.json; classes/index.d.ts; classes/vscode.css-custom-data.json; docs/reference.md | `npm run classes:json:build; dts:build; vscode:build; reference:build` | check:fresh; check:classes; check:contract | The typed registry, JSON vocabulary, and generated reference stay aligned with real selectors. |
|
|
322
|
-
| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (
|
|
325
|
+
| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (48 layered outputs) | `npm run dist:build` | check:dist; check:exports; check:component-matrix | Default bundle and direct layered leaf imports are generated from authored CSS, size-gated, and coverage-owned as foundation or component leaves. |
|
|
323
326
|
| JSDoc-authored public JS | `behaviors/; annotations/; connectors/; react/; solid/; qwik/; svelte/; vue/` | adjacent *.d.ts and *.d.ts.map files | `npm run dts:emit` | check:dts-emit; check:types; check:consumer-surface; check:consumer-types; check:behavior-matrix; check:attw; check:publint | Declarations are emitted from the shipped JS, package subpath imports are compiled from a packed clean consumer, and public behavior exports are docs/unit/browser owned. |
|
|
324
327
|
| Glyph registry | `glyphs/glyphs.js` | glyphs/glyphs.d.ts | `npm run glyphs:build` | check:glyphs; check:unit | Glyph names and render options are public. The registry stays sorted and type-covered. |
|
|
325
328
|
| Display colorways | `tokens/skins.js` | css/skins.css; tokens/skins.d.ts | `npm run skins:build` | check:skins; check:contrast | Skins are opt-in root-level choices and never part of dist/bronto.css. |
|
package/docs/reference.md
CHANGED
|
@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
|
|
|
9
9
|
**<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
|
|
10
10
|
contract: [docs/theming.md](theming.md).
|
|
11
11
|
|
|
12
|
-
-
|
|
12
|
+
- 695 classes across 187 component groups
|
|
13
13
|
- Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
|
|
14
14
|
- Validate markup as data (no JS/TS): `@ponchia/ui/classes.json` — the same
|
|
15
15
|
vocabulary as language-neutral JSON (`groups`, `classes`, `states`,
|
|
@@ -324,6 +324,7 @@ each one matches a real selector in the stylesheet.
|
|
|
324
324
|
| --- | --- | --- |
|
|
325
325
|
| `cls.chip` | `ui-chip` | base |
|
|
326
326
|
| `cls.chipAccent` | `ui-chip--accent` | modifier |
|
|
327
|
+
| `cls.chipDense` | `ui-chip--dense` | modifier |
|
|
327
328
|
|
|
328
329
|
### `.ui-citation`
|
|
329
330
|
|
|
@@ -486,6 +487,23 @@ each one matches a real selector in the stylesheet.
|
|
|
486
487
|
| `cls.diffRowRemove` | `ui-diff__row--remove` | modifier |
|
|
487
488
|
| `cls.diffSplit` | `ui-diff--split` | modifier |
|
|
488
489
|
|
|
490
|
+
### `.ui-discussion`
|
|
491
|
+
|
|
492
|
+
| Registry key | Class | Kind |
|
|
493
|
+
| --- | --- | --- |
|
|
494
|
+
| `cls.discussion` | `ui-discussion` | base |
|
|
495
|
+
| `cls.discussionActions` | `ui-discussion__actions` | part |
|
|
496
|
+
| `cls.discussionComposer` | `ui-discussion__composer` | part |
|
|
497
|
+
| `cls.discussionHeader` | `ui-discussion__header` | part |
|
|
498
|
+
| `cls.discussionHint` | `ui-discussion__hint` | part |
|
|
499
|
+
| `cls.discussionItem` | `ui-discussion__item` | part |
|
|
500
|
+
| `cls.discussionList` | `ui-discussion__list` | part |
|
|
501
|
+
| `cls.discussionMessage` | `ui-discussion__message` | part |
|
|
502
|
+
| `cls.discussionMessages` | `ui-discussion__messages` | part |
|
|
503
|
+
| `cls.discussionMeta` | `ui-discussion__meta` | part |
|
|
504
|
+
| `cls.discussionQuote` | `ui-discussion__quote` | part |
|
|
505
|
+
| `cls.discussionState` | `ui-discussion__state` | part |
|
|
506
|
+
|
|
489
507
|
### `.ui-display`
|
|
490
508
|
|
|
491
509
|
| Registry key | Class | Kind |
|
|
@@ -1214,6 +1232,12 @@ each one matches a real selector in the stylesheet.
|
|
|
1214
1232
|
| `cls.severityRowMeta` | `ui-severity-row__meta` | part |
|
|
1215
1233
|
| `cls.severityRowTitle` | `ui-severity-row__title` | part |
|
|
1216
1234
|
|
|
1235
|
+
### `.ui-severity-tone`
|
|
1236
|
+
|
|
1237
|
+
| Registry key | Class | Kind |
|
|
1238
|
+
| --- | --- | --- |
|
|
1239
|
+
| `cls.severityTone` | `ui-severity-tone` | base |
|
|
1240
|
+
|
|
1217
1241
|
### `.ui-shortcut`
|
|
1218
1242
|
|
|
1219
1243
|
| Registry key | Class | Kind |
|
|
@@ -1512,6 +1536,15 @@ each one matches a real selector in the stylesheet.
|
|
|
1512
1536
|
| `cls.timelineItem` | `ui-timeline__item` | part |
|
|
1513
1537
|
| `cls.timelineTime` | `ui-timeline__time` | part |
|
|
1514
1538
|
|
|
1539
|
+
### `.ui-timestrip`
|
|
1540
|
+
|
|
1541
|
+
| Registry key | Class | Kind |
|
|
1542
|
+
| --- | --- | --- |
|
|
1543
|
+
| `cls.timestrip` | `ui-timestrip` | base |
|
|
1544
|
+
| `cls.timestripAxis` | `ui-timestrip__axis` | part |
|
|
1545
|
+
| `cls.timestripEvent` | `ui-timestrip__event` | part |
|
|
1546
|
+
| `cls.timestripNow` | `ui-timestrip__now` | part |
|
|
1547
|
+
|
|
1515
1548
|
### `.ui-toast`
|
|
1516
1549
|
|
|
1517
1550
|
| Registry key | Class | Kind |
|
|
@@ -1664,13 +1697,9 @@ works in any framework without a binding layer:
|
|
|
1664
1697
|
families (`ui-alert`/`ui-toast`/`ui-meter`/`ui-dot`); the builders warn on an
|
|
1665
1698
|
out-of-set tone (see usage.md). Mapping an app's own variant
|
|
1666
1699
|
vocabulary onto a tone is application logic, not a framework class.
|
|
1667
|
-
- **Modal** — native `<dialog>`
|
|
1668
|
-
|
|
1669
|
-
(`
|
|
1670
|
-
`data-bronto-modal`, and run `initModal()` for the inert focus trap,
|
|
1671
|
-
focus-return, and Escape close signal. You still own the `is-open` state,
|
|
1672
|
-
backdrop, and top-layer stacking (`.is-open` is a bare grid — it does not
|
|
1673
|
-
float or stack on its own).
|
|
1700
|
+
- **Modal** — style a native `<dialog>` with `ui-modal`; use
|
|
1701
|
+
`initDialog()` for open/close triggers and focus return. Call
|
|
1702
|
+
`showModal()` to open the top layer; a CSS class is not an open state.
|
|
1674
1703
|
- **Current page** — mark the active link with `aria-current="page"`; it is
|
|
1675
1704
|
the programmatic cue the navs honour (`ui-sitenav`, `ui-app-nav`). The
|
|
1676
1705
|
`.is-active` class is the visual-only equivalent on `ui-app-nav`/`ui-tab`;
|
|
@@ -1718,10 +1747,10 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
|
|
|
1718
1747
|
|
|
1719
1748
|
| Token | Value |
|
|
1720
1749
|
| --- | --- |
|
|
1721
|
-
| `--radius-xl` | `
|
|
1722
|
-
| `--radius-lg` | `
|
|
1723
|
-
| `--radius-md` | `
|
|
1724
|
-
| `--radius-sm` | `
|
|
1750
|
+
| `--radius-xl` | `8px` |
|
|
1751
|
+
| `--radius-lg` | `6px` |
|
|
1752
|
+
| `--radius-md` | `4px` |
|
|
1753
|
+
| `--radius-sm` | `2px` |
|
|
1725
1754
|
| `--radius-pill` | `999px` |
|
|
1726
1755
|
| `--space-2xs` | `0.25rem` |
|
|
1727
1756
|
| `--space-xs` | `0.5rem` |
|
|
@@ -1742,12 +1771,12 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
|
|
|
1742
1771
|
| `--display` | `var(--dot-font)` |
|
|
1743
1772
|
| `--display-weight` | `700` |
|
|
1744
1773
|
| `--display-weight-strong` | `800` |
|
|
1745
|
-
| `--text-2xs` | `0.
|
|
1746
|
-
| `--text-xs` | `0.
|
|
1747
|
-
| `--text-sm` | `0.
|
|
1748
|
-
| `--text-base` | `
|
|
1749
|
-
| `--text-lg` | `1.
|
|
1750
|
-
| `--text-xl` | `1.
|
|
1774
|
+
| `--text-2xs` | `0.75rem` |
|
|
1775
|
+
| `--text-xs` | `0.8125rem` |
|
|
1776
|
+
| `--text-sm` | `0.875rem` |
|
|
1777
|
+
| `--text-base` | `1rem` |
|
|
1778
|
+
| `--text-lg` | `1.125rem` |
|
|
1779
|
+
| `--text-xl` | `1.5rem` |
|
|
1751
1780
|
| `--tracking-wide` | `0.14em` |
|
|
1752
1781
|
| `--tracking-wider` | `0.22em` |
|
|
1753
1782
|
| `--ease-standard` | `cubic-bezier(0.2, 0.8, 0.2, 1)` |
|
package/docs/reporting.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Static reports
|
|
2
2
|
|
|
3
|
+
Reports use readable screen prose, a 68ch measure, sentence-case headings, and
|
|
4
|
+
an independent print treatment. Put the decision before navigation. Use
|
|
5
|
+
`details.ui-report__toc` for collapsed contents and `nav.ui-report__toc` for
|
|
6
|
+
always-visible contents. See [composition recipes](compositions.md).
|
|
7
|
+
|
|
8
|
+
|
|
3
9
|
`@ponchia/ui` can dress static, LLM-authored HTML reports without a component
|
|
4
10
|
runtime. Load the normal bundle, then either opt in to the complete report kit
|
|
5
11
|
or import only the leaves a narrow report actually uses.
|
|
@@ -54,18 +60,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
|
|
|
54
60
|
changes ship in the minor (see [stability.md](./stability.md)):
|
|
55
61
|
|
|
56
62
|
```html
|
|
57
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
58
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
63
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/bronto.css" />
|
|
64
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/report-kit.css" />
|
|
59
65
|
```
|
|
60
66
|
|
|
61
67
|
Leaf-by-leaf CDN imports use the same `dist/css/` paths:
|
|
62
68
|
|
|
63
69
|
```html
|
|
64
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
65
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
66
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
67
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
68
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
70
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/bronto.css" />
|
|
71
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/report.css" />
|
|
72
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/dataviz.css" />
|
|
73
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/annotations.css" />
|
|
74
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/legend.css" />
|
|
69
75
|
```
|
|
70
76
|
|
|
71
77
|
The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
|
|
@@ -579,7 +585,7 @@ raster).
|
|
|
579
585
|
> origin. A static report **opened from disk (`file://`) cannot import the module
|
|
580
586
|
> nor fetch `vega.json`** (CORS) — load Vega + Vega-Lite + vega-embed from pinned
|
|
581
587
|
> `/build/*.min.js` CDN tags and **inline the resolved `config` object**
|
|
582
|
-
> (generate it with `npm run emit:theme vega light`), the file
|
|
588
|
+
> (generate it with `npm run emit:theme vega light`), the `file://`-safe recipe in
|
|
583
589
|
> [vega.md](./vega.md#from-a-cdn-no-bundler). For a report
|
|
584
590
|
> you intend to **print/PDF**, prefer the frozen inline `<svg>` below — it has no
|
|
585
591
|
> runtime, prints exactly, and sidesteps all of this.
|
|
@@ -879,7 +885,7 @@ or validation runtime.
|
|
|
879
885
|
|
|
880
886
|
```json
|
|
881
887
|
{
|
|
882
|
-
"$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
888
|
+
"$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/schemas/report-claims.v1.schema.json",
|
|
883
889
|
"schemaVersion": "bronto-report-claims.v1",
|
|
884
890
|
"report": { "title": "Decision readiness", "type": "decision" },
|
|
885
891
|
"claims": [
|
package/docs/stability.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# Public API stability
|
|
2
2
|
|
|
3
3
|
`@ponchia/ui` is pre-1.0. Breaking changes ship in the minor (`0.x.0`), and
|
|
4
|
-
patches are non-breaking. In practical terms: **PATCH releases (`0.
|
|
4
|
+
patches are non-breaking. In practical terms: **PATCH releases (`0.11.x`) are
|
|
5
5
|
non-breaking bug-fixes and additive changes — safe to upgrade without review;
|
|
6
6
|
MINOR releases (`0.x.0`) may include breaking changes and consumers should
|
|
7
7
|
review the CHANGELOG before upgrading.** Pin `~0.x` (tilde) to accept only
|
|
8
|
-
patches, or `^0.x`
|
|
8
|
+
patches, or `^0.x` for the same compatible pre-1.0 minor. This policy holds
|
|
9
9
|
until `1.0.0` is tagged. This matrix defines what counts as public API.
|
|
10
10
|
For the exhaustive package-manifest inventory — every `exports` key, every
|
|
11
11
|
shipped `files` entry, and the generated artifact provenance map — see
|
|
@@ -53,56 +53,22 @@ enough.
|
|
|
53
53
|
|
|
54
54
|
### Adoption evidence for 1.0
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
> full-surface audit of the largest downstream consumer (a Yjs-collaborative
|
|
73
|
-
> spatial canvas workspace: React, Vite, ~10k lines of its own CSS) found it
|
|
74
|
-
> using **26 of the 646 published classes**, and hand-rebuilding much of the
|
|
75
|
-
> rest — 10 bespoke empty states, 15 error surfaces, 17 control bars, three
|
|
76
|
-
> parallel severity vocabularies, its own Markdown prose layer, its own diff
|
|
77
|
-
> rows, its own meters, and two copies of visually-hidden text. Thirteen
|
|
78
|
-
> primitives that map almost exactly onto what it built return **zero** uses:
|
|
79
|
-
> `ui-state`, `ui-prose`, `ui-diff`, `ui-code`, `ui-meter`, `ui-progress`,
|
|
80
|
-
> `ui-toolstrip`, `ui-dot`, `ui-chip`, `ui-tag`, `ui-timeline`, `ui-steps`,
|
|
81
|
-
> `ui-job`.
|
|
82
|
-
>
|
|
83
|
-
> The lesson for this document is not about that consumer. It is that **"no
|
|
84
|
-
> inspected consumer imports the surface" has been measuring discoverability,
|
|
85
|
-
> not demand.** Those surfaces were not rejected; they were never found. The
|
|
86
|
-
> opt-in leaf model is right, but nothing tells a consumer which leaf it is
|
|
87
|
-
> about to reimplement — and `bronto-ui-check`, which catches part of it, was
|
|
88
|
-
> installed in that consumer and had never been run. Before any 1.0 decision
|
|
89
|
-
> retires a package-proven surface for lack of adoption, confirm the surface was
|
|
90
|
-
> *reachable*: named in the consumer's imports, or at least in a leaf it
|
|
91
|
-
> imports. Non-adoption of an unimported leaf is not evidence.
|
|
92
|
-
>
|
|
93
|
-
> The same audit produced this release's four consumer-driven changes (the tap
|
|
94
|
-
> target floor, the safe-area tokens, `ui-button__label`, and the dense tier)
|
|
95
|
-
> and the ADR-0001 canvas amendment. That is the intended loop: the consumer's
|
|
96
|
-
> local classes are the backlog, resolving either to a deletion there or an
|
|
97
|
-
> addition here.
|
|
98
|
-
|
|
99
|
-
| Surface family | Current evidence | 1.0 disposition |
|
|
100
|
-
| --- | --- | --- |
|
|
101
|
-
| Core CSS, class recipes, vanilla behaviors, tokens, and Tailwind bridge | Downstream-proven across five inspected non-example app, site, and service consumers. | Stabilize names and behavior contracts. Use consumer upgrades as the release-candidate proof. |
|
|
102
|
-
| Report, provenance, analytical CSS, annotations, glyphs, skins, workbench CSS, chart data, and Vega theme | Downstream-proven across four inspected report, site, dashboard, and tool consumers. | Keep opt-in. Stabilize the consumed paths; do not broaden the catalog during the freeze. |
|
|
103
|
-
| Controlled non-`<dialog>` modal | Package-proven by stack, portal, late-node, focus, and cleanup regressions. None of ten inspected non-example consumers initializes `initModal`. | Deprecated in 0.7; remove no earlier than 0.8 unless a real consumer adopts it. Native `<dialog>` + `initDialog` is the stable path. |
|
|
104
|
-
| React, Solid, Qwik, Svelte, and Vue lifecycle adapters | Package-proven by packed examples, types, and lifecycle tests. None of ten inspected non-example consumers imports an adapter entrypoint. | Deprecated in 0.7; remove no earlier than 0.8 unless a real consumer adopts one. Vanilla behaviors remain stable. |
|
|
105
|
-
| Mermaid, D2, Shiki, Figma Variables, and the report-claims schema | Package-proven by generated-data, render, schema, and drift checks. No inspected non-example consumer currently supplies downstream proof for every path. | Keep compatible through 0.8.x, but decide each 1.0 contract from adoption evidence rather than generator coverage alone. |
|
|
56
|
+
Separate downstream proof from package proof. An example build verifies the
|
|
57
|
+
published contract; a real application or report upgrade verifies that it is
|
|
58
|
+
useful. Record the candidate version, imported surface, visual/input checks,
|
|
59
|
+
and remaining consumer-specific overrides with the release.
|
|
60
|
+
|
|
61
|
+
The 0.10 direction is defined by
|
|
62
|
+
[ADR-0005](adr/0005-productive-tools-and-editorial-reports.md). The active
|
|
63
|
+
packed examples cover vanilla, Astro, SvelteKit, React, Tailwind, and static
|
|
64
|
+
reports. The unadopted framework adapters and controlled modal were removed
|
|
65
|
+
following their 0.7 deprecation; see the
|
|
66
|
+
[migration](migrations/0.9-to-0.10.md).
|
|
67
|
+
|
|
68
|
+
Do not maximize a consumer's fraction of the class catalog. Measure repeated
|
|
69
|
+
design decisions avoided and complete tasks improved. Check discoverability
|
|
70
|
+
before interpreting non-adoption, and keep legitimate domain-specific CSS in
|
|
71
|
+
the consumer.
|
|
106
72
|
|
|
107
73
|
After 1.0, breaking changes move to majors. Until then, the table below is the
|
|
108
74
|
current public-surface matrix and the release policy above still applies.
|
|
@@ -126,7 +92,6 @@ current public-surface matrix and the release policy above still applies.
|
|
|
126
92
|
| Consumer checker (`bronto-ui-check`) | Stable additive | The installed binary lexically validates literal `ui-*` classes and unresolved reserved-token references in supported code, style, and template sources after stripping comments; Markdown prose and generated/vendor directories are excluded. Exit 0 means no findings, exit 1 means contract findings, and exit 2 means invocation/input failure. New checks may be additive; an existing valid literal cannot become an error within a patch unless the corresponding public contract was already invalid. |
|
|
127
93
|
| Glyph registry/renderers (`@ponchia/ui/glyphs`) | Stable additive | Existing glyph names stay valid. New glyphs are additive. Renderer option names and accessibility defaults are public. |
|
|
128
94
|
| `.ui-icon` mask renderer | Stable | Class name, `--icon-size`, currentColor inheritance, and `--icon-mask` contract are public. The internal data URL encoding is not. |
|
|
129
|
-
| Framework lifecycle adapters (`react`/`solid`/`qwik`/`svelte`/`vue`) | Deprecated in 0.7 | Hook/action/directive names, optional peer behavior, root resolver support, and cleanup remain compatible through 0.7. Scheduled for removal no earlier than 0.8 under ADR-0004. Use vanilla behaviors in framework lifecycle code. |
|
|
130
95
|
| Skins (`@ponchia/ui/skins`, `css/skins.css`) | Stable additive | Existing skin names stay valid. New skins are additive. Skins are root-level choices. Skin CSS is opt-in, not in the default bundle. |
|
|
131
96
|
| Charts (`@ponchia/ui/charts`, `charts.json`, `css/dataviz.css`) | Stable additive | Token names, JSON shape, and 8 categorical slots are public. `css/dataviz.css` is opt-in, not in the default bundle. Exact palette values may tune if gates and release notes justify it. |
|
|
132
97
|
| External renderer themes (`@ponchia/ui/mermaid`, `@ponchia/ui/mermaid.json`, `@ponchia/ui/d2`, `@ponchia/ui/d2.json`, `@ponchia/ui/vega`, `@ponchia/ui/vega.json`) | Stable additive | Theme helper names, JSON shapes, and supported renderer theme slots are public. Values are resolved colours because Mermaid, D2, and Vega cannot consume Bronto CSS variables directly. Exact colours may tune with token changes, but `check:mermaid`, `check:d2`, and `check:vega` must prove every exported theme resolves with no `var()` leaks. No renderer runtime ships. |
|
|
@@ -135,6 +100,7 @@ current public-surface matrix and the release policy above still applies.
|
|
|
135
100
|
| Report kit roll-up (`css/report-kit.css`) | Stable additive | A convenience `@import` of the complete static-report vocabulary. The set of leaves it bundles may grow additively; each leaf also stays individually exported. Opt-in, not in the default bundle. |
|
|
136
101
|
| Figure stage (`css/figure.css`, `.ui-figure*`) | Stable additive | Figure class names, overlay/key/fallback-data slots, and report composition hooks are public. Opt-in, not in the default bundle. Bronto owns the figure frame, not chart rendering, scales, or data mapping. |
|
|
137
102
|
| Annotations (`@ponchia/ui/annotations`, `css/annotations.css`, `.ui-annotation*`) | Stable additive | SVG annotation class names, recipe option names, and helper function names are public. Helper internals and exact path-control heuristics may tune before 1.0. Opt-in, not in the default bundle. Rich placement, renderer, editing, and chart/diagram adapter APIs belong to the sibling `@ponchia/annotations` package; `@ponchia/ui` does not depend on it at runtime or through public declarations. |
|
|
103
|
+
| Discussions (`css/discussion.css`, `.ui-discussion*`) | Stable additive | Thread-list, message, quotation and composer class names are public. Opt-in, not in the default bundle. The host owns posting, persistence, identity, resolution, text anchors and focus management. |
|
|
138
104
|
| Legends (`css/legend.css`, `.ui-legend*`, `@ponchia/ui/behaviors` `initLegend`) | Stable additive | Legend class names, recipe option names, and the `bronto:legend:toggle` event contract (`aria-pressed="true"` ⇒ shown) are public. Opt-in, not in the default bundle; swatch colours are gated to the `--chart-*` palette. |
|
|
139
105
|
| Marks (`css/marks.css`, `.ui-mark*`, `.ui-bracket-note*`) | Stable additive | Text-mark and bracket-note class names and recipe option names are public. Opt-in, not in the default bundle. Uses semantic tones only. |
|
|
140
106
|
| Connectors (`@ponchia/ui/connectors`, `css/connectors.css`, `.ui-connector*`, `initConnectors`) | Stable additive | Connector class names, the `data-bronto-connector` attribute contract, geometry helper function names, and recipe options are public. Helper internals/heuristics may tune before 1.0. Opt-in, not in the default bundle. |
|
|
@@ -150,7 +116,7 @@ current public-surface matrix and the release policy above still applies.
|
|
|
150
116
|
| Lifecycle state (`css/state.css`, `.ui-state*`, `.ui-syncbar`) | Stable additive | The `.ui-state`/`__label`/`__detail`/`--busy` classes, the canonical lifecycle state modifiers, `.ui-syncbar`, and the `ui.state` recipe are public. Opt-in, not in the default bundle. |
|
|
151
117
|
| Generated / AI-trust (`css/generated.css`, `.ui-generated*`, `.ui-origin-label*`, `.ui-reasoning*`, `.ui-tool-log`, `.ui-tool-call*`) | Stable additive | The generated-content, origin-label (incl. `--ai`), reasoning-trace and tool-log/tool-call class names and the `ui.originLabel` recipe are public. Opt-in, not in the default bundle. Not a chat kit; no confidence widget. |
|
|
152
118
|
| Workbench (`css/workbench.css`, `.ui-splitter*`, `.ui-inspector*`, `.ui-property*`, `.ui-selectionbar*`, `initSplitter`) | Stable additive | Splitter, inspector, property-row and selection-bar class + BEM part names are public (no recipe). `data-bronto-splitter`, `--splitter-pos`, `bronto:splitter:resize`, and the `initSplitter` cleanup contract are public. Opt-in, not in the default bundle. The host owns pane content, persistence, collapse policy, and selection state. |
|
|
153
|
-
| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey.
|
|
119
|
+
| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. |
|
|
154
120
|
| Spark microcharts (`css/spark.css`, `.ui-spark*`) | Stable additive | Spark class names and inline sizing/label slots are public. Opt-in, not in the default bundle. The host owns data reduction and accessible surrounding text. |
|
|
155
121
|
| Bullet graphs (`css/bullet.css`, `.ui-bullet*`) | Stable additive | Bullet class names and measure/target/range custom-property slots are public. Opt-in, not in the default bundle. The host owns thresholds, units, and data mapping. |
|
|
156
122
|
| Diffs (`css/diff.css`, `.ui-diff*`) | Stable additive | Diff container/line/gutter class names and add/remove/highlight state modifiers are public. Opt-in, not in the default bundle. Bronto styles evidence; it does not compute diffs. |
|
|
@@ -160,7 +126,6 @@ current public-surface matrix and the release policy above still applies.
|
|
|
160
126
|
| Terms / glossary (`css/term.css`, `.ui-term`, `.ui-glossary`) | Stable additive | Term and glossary class names plus native-popover definition hooks are public. Opt-in, not in the default bundle. The host owns glossary content and terminology policy. |
|
|
161
127
|
| Contents rail (`css/toc.css`, `.ui-toc*`) | Stable additive | TOC rail class/part names and current-section state classes are public. Opt-in, not in the default bundle. The host owns section observation and active-state updates. |
|
|
162
128
|
| Tree outlines (`css/tree.css`, `.ui-tree*`) | Stable additive | Tree outline class names, depth styling, and native `<details>` composition are public. Opt-in, not in the default bundle. The host owns tree data, lazy loading, and selection state. |
|
|
163
|
-
| Controlled-modal focus trap (`initModal`, adapter `useModal`, `data-bronto-modal`) | Deprecated in 0.7 | The controlled non-`<dialog>` path remains compatible through 0.7 and is scheduled for removal no earlier than 0.8 under ADR-0004. Use native `<dialog>` with `initDialog()`; it remains stable. |
|
|
164
129
|
| Keyboard-shortcut hint (`.ui-shortcut`, `.ui-shortcut__sep`) | Stable additive | Class names for the chord/sequence hint over `.ui-kbd` are public. Ships in the core layer (class-only, no recipe). |
|
|
165
130
|
| Agent and migration data (`llms.txt`, `MIGRATIONS.json`) | Stable additive | `llms.txt` stays shipped as the offline agent entrypoint. `MIGRATIONS.json` stays a machine-readable migration map for breaking renames/removals. New migration entries are additive; removal of a migration record requires the same breaking-change discipline as the surface it describes. |
|
|
166
131
|
| Generated docs shipped in npm | Stable paths | Exported docs paths stay shipped and resolvable within a compatible minor. Markdown/text assets are for reading unless your runtime has a loader. Generated content may change with the source contract. |
|
package/docs/state.md
CHANGED
|
@@ -165,6 +165,52 @@ Colour is never the only channel (WCAG 1.4.1): `.ui-severity` carries an
|
|
|
165
165
|
author-written label, and `.ui-severity-dot` is only for rows that **also** name
|
|
166
166
|
their level in text.
|
|
167
167
|
|
|
168
|
+
### Painting a mark Bronto does not ship — `.ui-severity-tone`
|
|
169
|
+
|
|
170
|
+
The three classes above all draw something: a chip, a ruled row, a background
|
|
171
|
+
dot. A host painting its own mark — an SVG shape, a gradient stop, a canvas —
|
|
172
|
+
needs the tone as a **value** with none of that. `.ui-severity-tone` paints
|
|
173
|
+
nothing and only resolves `--severity-tone` from `data-level`:
|
|
174
|
+
|
|
175
|
+
```html
|
|
176
|
+
<circle class="ui-severity-tone" data-level="critical" fill="var(--severity-tone)" />
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
Reach for it when `background` is not the property you need. An SVG shape
|
|
180
|
+
ignores `background` entirely, so without this a consumer restates the whole
|
|
181
|
+
tier table in `fill` — and then it can drift from the rows beside it.
|
|
182
|
+
|
|
183
|
+
## Timestrip — `.ui-timestrip`
|
|
184
|
+
|
|
185
|
+
A status list answers *what*. The strip answers **when**, on one axis, at a
|
|
186
|
+
glance: a cluster of marks at the leading edge is a fresh incident, a lone mark
|
|
187
|
+
pinned to the trailing edge has been wrong for a while. It takes the same
|
|
188
|
+
`data-level` as the ladder, so a strip cannot disagree with the rows under it.
|
|
189
|
+
|
|
190
|
+
```html
|
|
191
|
+
<div class="ui-timestrip" role="img" aria-label="When these alerts started, last 24 hours">
|
|
192
|
+
<span class="ui-timestrip__axis"></span>
|
|
193
|
+
<span class="ui-timestrip__now"></span>
|
|
194
|
+
<span class="ui-timestrip__event" data-level="critical" style="--at: 0.92"></span>
|
|
195
|
+
<span class="ui-timestrip__event" data-level="warning" style="--at: 0.4"></span>
|
|
196
|
+
<span class="ui-timestrip__event" data-level="ok" data-outside style="--at: 0"></span>
|
|
197
|
+
</div>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
**This is geometry, not a chart.** The host owns the window, the clock, and the
|
|
201
|
+
arithmetic: it normalises each event to a position in `0..1` and writes it as
|
|
202
|
+
`--at`, where `0` is the oldest edge and `1` is now. Bronto owns the rail, the
|
|
203
|
+
now marker, and the mark. There are no scales, no ticks, no axis labels, and no
|
|
204
|
+
time parsing — a surface that wants those wants a chart, and Bronto
|
|
205
|
+
[refuses chart scales](./frontier-primitives.md).
|
|
206
|
+
|
|
207
|
+
`data-outside` marks an event older than the window. It stays at the edge at
|
|
208
|
+
reduced weight rather than vanishing, because a strip reading "quiet" while a
|
|
209
|
+
row says "failing for three days" is worse than one reading crowded.
|
|
210
|
+
|
|
211
|
+
The strip is decorative on its own: give it an `aria-label` naming what it
|
|
212
|
+
plots, and let the rows beneath it name each level in words.
|
|
213
|
+
|
|
168
214
|
## Recipe
|
|
169
215
|
|
|
170
216
|
```js
|
|
@@ -180,6 +226,7 @@ ui.job({ state: 'running' }); // "ui-job ui-job--running"
|
|
|
180
226
|
severity('critical'); // { class: 'ui-severity', 'data-level': 'critical' }
|
|
181
227
|
severity('warning', { part: 'row' }); // { class: 'ui-severity-row', … }
|
|
182
228
|
severity('nope'); // { class: 'ui-severity', 'data-level': 'unknown' }
|
|
229
|
+
severity('critical', { part: 'tone' }); // { class: 'ui-severity-tone', … }
|
|
183
230
|
|
|
184
231
|
SEVERITY_LEVELS; // ['critical','error','warning','notice','ok'] — sort/filter from this
|
|
185
232
|
```
|
package/docs/usage.md
CHANGED
|
@@ -137,8 +137,8 @@ one column inside a slim panel even when the window is wide (island-safe; it
|
|
|
137
137
|
nests). Two thresholds are built in: `ui-grid` drops to a single column at
|
|
138
138
|
**34rem** and `ui-statgrid`/`ui-app-metrics` at **30rem**, measured on the `ui-cq`
|
|
139
139
|
box. Note `rem` in a container query resolves against the **root** font size, not
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
a fixed device pixel size. At the default 16px root these are **544px** and
|
|
141
|
+
**480px**; they follow the browser text-size preference. And be aware `ui-grid` already collapses on its own via an
|
|
142
142
|
intrinsic `auto-fit` minmax, so `ui-cq` barely changes it — the primitive that
|
|
143
143
|
genuinely *needs* `ui-cq` to collapse by container (not viewport) is
|
|
144
144
|
`ui-statgrid`/`ui-app-metrics`. The container is named `bronto` (hardcoded — there
|
|
@@ -255,8 +255,8 @@ sentences at the same weight, a third is a bare `<p>`.
|
|
|
255
255
|
|
|
256
256
|
## Link vs link--cta
|
|
257
257
|
|
|
258
|
-
Plain `ui-link` for in-flow links. `ui-link--cta` is the
|
|
259
|
-
action link
|
|
258
|
+
Plain `ui-link` for in-flow links. `ui-link--cta` is the accent
|
|
259
|
+
action link with an arrow — a *navigational
|
|
260
260
|
call to action*, not a substitute for a button (no form submit, no
|
|
261
261
|
destructive action).
|
|
262
262
|
|
|
@@ -373,7 +373,7 @@ without it these widgets are unlabelled or unannounced:
|
|
|
373
373
|
```
|
|
374
374
|
|
|
375
375
|
Drop `--icon` and the same markup renders glyph + word. The slot also
|
|
376
|
-
|
|
376
|
+
ellipsis rather than wrapping, so a labelled button in a width-constrained
|
|
377
377
|
bar shrinks instead of pushing its neighbours out.
|
|
378
378
|
- **`ui-button--dense`** is for bars whose height is the constraint — a pane
|
|
379
379
|
title bar, a packed toolbar, a table row's actions. It lowers only the
|
|
@@ -468,28 +468,9 @@ convey identity to AT. Keep initials to ~2 characters — the box is
|
|
|
468
468
|
|
|
469
469
|
Prefer the **native `<dialog>`** path — you get top-layer, backdrop and
|
|
470
470
|
focus-trap free (wire it with `initDialog` for open-triggers + focus-return).
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
real consumer uses it. Migrate portals to a native `<dialog>` where possible;
|
|
475
|
-
if a framework must retain the controlled path during 0.7, keep the existing
|
|
476
|
-
accessible name and `bronto:modal:close` handling unchanged.
|
|
477
|
-
|
|
478
|
-
Controlled modals share one document-level stack. Opening a sibling portal
|
|
479
|
-
modal makes the previous modal inert and keeps only the new top modal
|
|
480
|
-
interactive; closing it restores focus into the previous modal. An
|
|
481
|
-
`initPopover()` trigger inside the top modal may target a panel portaled
|
|
482
|
-
elsewhere in the document: while that panel is open, it joins the live modal
|
|
483
|
-
tree and owns Escape without releasing unrelated background content. Background
|
|
484
|
-
nodes added after the modal opens are trapped too. If a controlled parent modal
|
|
485
|
-
closes while a descendant still carries `is-open`, the descendant is suspended
|
|
486
|
-
with the parent and resumes if the parent reopens.
|
|
487
|
-
|
|
488
|
-
**Scroll-lock is not automatic.** A native `<dialog>` does not freeze background
|
|
489
|
-
scroll — the page behind an open modal can
|
|
490
|
-
still scroll. If that matters, toggle a lock yourself while the modal is open
|
|
491
|
-
(`document.documentElement.style.overflow = 'hidden'`, restored on close), or add
|
|
492
|
-
`html:has(dialog[open]) { overflow: hidden }` for the native path.
|
|
471
|
+
Use a native `<dialog>` with `initDialog()` for focus, stacking, and close
|
|
472
|
+
behavior. Application frameworks own the mount/cleanup lifecycle. The removed
|
|
473
|
+
controlled-modal path is covered by the [0.10 migration](migrations/0.9-to-0.10.md).
|
|
493
474
|
|
|
494
475
|
## Carousel & lightbox: one primitive, two skins
|
|
495
476
|
|
|
@@ -665,7 +646,7 @@ authoring engine.
|
|
|
665
646
|
code — so put the human label in the `<li>` text and the code in `data-value`.
|
|
666
647
|
The `.ui-combobox__empty` ("No matches") is hidden until a filter empties the
|
|
667
648
|
list. Two intentional single-select APG deviations: ArrowDown on a closed list
|
|
668
|
-
filters rather than
|
|
649
|
+
filters rather than preselecting the first option, and Tab closes without
|
|
669
650
|
committing a merely-highlighted option (Enter/click commits).
|
|
670
651
|
- **Validation** is opt-in via `data-bronto-validate` on the form plus
|
|
671
652
|
`initFormValidation()`; it surfaces messages into a `ui-error-summary` you
|
|
@@ -757,7 +738,7 @@ moves into it, but there is **no focus trap** and the rest of the page stays
|
|
|
757
738
|
interactive — Tab moves *out* of the panel (it does not cycle), and it closes on
|
|
758
739
|
Escape or outside-click. Don't assume `<dialog>`-modal semantics; if you need a
|
|
759
740
|
trap and an inert backdrop, use a real modal (`<dialog>` + `initDialog`). The
|
|
760
|
-
|
|
741
|
+
controlled-modal path was removed in 0.10. And the
|
|
761
742
|
`is-open` fallback is a plain stacked element, so it sits
|
|
762
743
|
*under* any open native `<dialog>`'s top layer — another reason to prefer the
|
|
763
744
|
native `popover` attribute when a popover and a dialog can be open together.
|
|
@@ -792,7 +773,6 @@ These are JS widgets wearing the Bronto look; without the behavior they are iner
|
|
|
792
773
|
| Popover (`ui-popover`) | `initPopover` | no placement/ARIA — prefer the native `popover` attribute |
|
|
793
774
|
| Carousel (`ui-carousel`) | `initCarousel` | a native scroll-snap track (usable, no controls) |
|
|
794
775
|
| Native dialog/lightbox (`<dialog>`, `ui-lightbox`) | `initDialog` | closed markup stays closed; `data-bronto-open`/close buttons do nothing. Do not use `open` as a modal fallback: it is non-modal and has no trigger/focus-return path |
|
|
795
|
-
| Controlled modal (`ui-modal.is-open`, deprecated) | `initModal` (deprecated) | open skin only — no inert trap, focus-return, or Escape close signal |
|
|
796
776
|
| Menu (`data-bronto-menu`) | `initMenu` | a button next to a list with no open/close, outside-click, or Escape |
|
|
797
777
|
| Dismissible alert/callout (`data-bronto-dismissible`) | `dismissible` | the close affordance is just a button; nothing is removed |
|
|
798
778
|
| Toast | `toast()` | nothing — it is imperative-only |
|
|
@@ -826,3 +806,11 @@ the shipped palettes are gated (see [contrast.md](contrast.md)); your
|
|
|
826
806
|
custom accent is not. Verify primary-button label, `--accent-text`, and
|
|
827
807
|
the focus ring against their backgrounds. Full contract:
|
|
828
808
|
[theming.md](theming.md).
|
|
809
|
+
|
|
810
|
+
## Dense labels
|
|
811
|
+
|
|
812
|
+
Use `ui-chip--dense` for a static label in a short pane header.
|
|
813
|
+
`ui.chip({ dense: true })` returns that class. Buttons and links carrying it
|
|
814
|
+
retain pointer target floors; use an actual button for an action.
|
|
815
|
+
|
|
816
|
+
For complete tool/report layouts, use [composition recipes](compositions.md).
|
package/llms.txt
CHANGED
|
@@ -45,7 +45,7 @@ the path changes from source `css/` to built `dist/css/`:
|
|
|
45
45
|
<!-- installed locally -->
|
|
46
46
|
<link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
|
|
47
47
|
<!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
|
|
48
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
48
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/<leaf>.css" />
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
The flattened default bundle is `dist/bronto.css` (bundler shorthand
|
|
@@ -74,9 +74,7 @@ import { applyStoredTheme } from '@ponchia/ui/behaviors';
|
|
|
74
74
|
|
|
75
75
|
Notable behaviors beyond the obvious: `initMenu()` adds close affordances to a
|
|
76
76
|
native `<details data-bronto-menu>` dropdown (outside-click/Escape/select-close);
|
|
77
|
-
`
|
|
78
|
-
role/aria-modal), but is deprecated in 0.7 for removal no earlier than 0.8;
|
|
79
|
-
prefer native `<dialog>` + `initDialog()`. `initDisabledGuard()` makes every `aria-disabled` control
|
|
77
|
+
Native `<dialog>` with `initDialog()` owns modal interaction. `initDisabledGuard()` makes every `aria-disabled` control
|
|
80
78
|
keyboard-inert (CSS alone is only pointer-inert). For the value-bearing fills,
|
|
81
79
|
`attrs.meter(value)` / `attrs.progress(value)` from `@ponchia/ui/classes` return
|
|
82
80
|
`role`+`aria-valuenow/min/max`+the `--value` style to spread onto the host.
|
|
@@ -86,20 +84,11 @@ matching `.ui-source-card`, seed lightweight preview metadata, and emit
|
|
|
86
84
|
`bronto:source:focus`; the host still owns numbering, fetching, trust decisions,
|
|
87
85
|
and any rich preview popover.
|
|
88
86
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
actions, and Vue uses dependency-free directives/plugin helpers:
|
|
95
|
-
|
|
96
|
-
```js
|
|
97
|
-
import { useDialog, useToast } from '@ponchia/ui/react'; // or '@ponchia/ui/solid' or '@ponchia/ui/qwik'
|
|
98
|
-
// React: scope with { root: reactRef } or a resolver, not { root: ref.current } during render.
|
|
99
|
-
// Qwik: hooks run in useVisibleTask$; scope with a Qwik signal — useDialog({ root: useSignal() }).
|
|
100
|
-
// Svelte: import { dialog, toast } from '@ponchia/ui/svelte'.
|
|
101
|
-
// Vue: import { vDialog, useToast } from '@ponchia/ui/vue', or app.use(brontoVue).
|
|
102
|
-
```
|
|
87
|
+
Initialize behaviors in the host framework's mount/cleanup lifecycle. Framework
|
|
88
|
+
adapter subpaths are removed in 0.10. Read `docs/compositions.md` before selecting
|
|
89
|
+
primitives: tools use sans headings and labels, reports prioritize reading,
|
|
90
|
+
and `ui-display` is an explicit brand treatment. The catalog is a lookup, not a
|
|
91
|
+
checklist of components to place on a page.
|
|
103
92
|
|
|
104
93
|
Optional display glyphs — dot-matrix bitmaps on the `.ui-dotmatrix` primitive
|
|
105
94
|
(decorative by default; `renderGlyph` is SSR-safe, `initDotGlyph` is the DOM form).
|