@ponchia/ui 0.6.7 → 0.6.8
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 +70 -0
- package/README.md +3 -3
- package/annotations/index.d.ts.map +1 -1
- package/annotations/index.js +21 -3
- package/behaviors/carousel.d.ts.map +1 -1
- package/behaviors/carousel.js +91 -35
- package/behaviors/combobox.d.ts.map +1 -1
- package/behaviors/combobox.js +117 -43
- package/behaviors/command.d.ts.map +1 -1
- package/behaviors/command.js +74 -14
- package/behaviors/connectors.d.ts.map +1 -1
- package/behaviors/connectors.js +92 -9
- package/behaviors/crosshair.d.ts.map +1 -1
- package/behaviors/crosshair.js +47 -1
- package/behaviors/dialog.d.ts.map +1 -1
- package/behaviors/dialog.js +24 -9
- package/behaviors/disclosure.d.ts.map +1 -1
- package/behaviors/disclosure.js +33 -3
- package/behaviors/dismissible.d.ts.map +1 -1
- package/behaviors/dismissible.js +3 -2
- package/behaviors/forms.d.ts.map +1 -1
- package/behaviors/forms.js +67 -0
- package/behaviors/glyph.d.ts.map +1 -1
- package/behaviors/glyph.js +17 -2
- package/behaviors/inert.js +3 -2
- package/behaviors/internal.d.ts.map +1 -1
- package/behaviors/internal.js +2 -1
- package/behaviors/legend.d.ts +0 -5
- package/behaviors/legend.d.ts.map +1 -1
- package/behaviors/legend.js +45 -13
- package/behaviors/menu.d.ts.map +1 -1
- package/behaviors/menu.js +13 -8
- package/behaviors/modal.d.ts.map +1 -1
- package/behaviors/modal.js +77 -19
- package/behaviors/popover.d.ts +4 -3
- package/behaviors/popover.d.ts.map +1 -1
- package/behaviors/popover.js +89 -9
- package/behaviors/sources.d.ts.map +1 -1
- package/behaviors/sources.js +14 -2
- package/behaviors/splitter.d.ts.map +1 -1
- package/behaviors/splitter.js +149 -110
- package/behaviors/spotlight.d.ts.map +1 -1
- package/behaviors/spotlight.js +28 -2
- package/behaviors/table.d.ts.map +1 -1
- package/behaviors/table.js +103 -11
- package/behaviors/tabs.d.ts.map +1 -1
- package/behaviors/tabs.js +82 -18
- package/behaviors/theme.d.ts.map +1 -1
- package/behaviors/theme.js +25 -5
- package/classes/index.d.ts +15 -2
- package/classes/index.js +0 -1
- package/connectors/index.d.ts +39 -6
- package/connectors/index.d.ts.map +1 -1
- package/connectors/index.js +67 -9
- package/css/annotations.css +12 -0
- package/css/crosshair.css +27 -2
- package/css/feedback.css +2 -30
- package/css/navigation.css +12 -0
- package/css/tokens.css +16 -0
- package/dist/bronto.css +1 -1
- package/dist/css/analytical.css +1 -1
- package/dist/css/annotations.css +1 -1
- package/dist/css/crosshair.css +1 -1
- package/dist/css/feedback.css +1 -1
- package/dist/css/navigation.css +1 -1
- package/dist/css/report-kit.css +1 -1
- package/dist/css/tokens.css +1 -1
- package/docs/adr/0001-color-system.md +3 -2
- package/docs/annotations.md +12 -1
- package/docs/architecture.md +46 -13
- package/docs/command.md +4 -1
- package/docs/connectors.md +16 -0
- package/docs/crosshair.md +1 -1
- package/docs/dots.md +4 -1
- package/docs/glyphs.md +11 -0
- package/docs/migrations/0.2-to-0.3.md +1 -1
- package/docs/package-contract.md +5 -5
- package/docs/reporting.md +23 -12
- package/docs/stability.md +18 -2
- package/docs/theming.md +2 -2
- package/docs/usage.md +16 -2
- package/docs/vega.md +4 -4
- package/llms.txt +10 -5
- package/package.json +20 -4
- package/svelte/index.d.ts +71 -45
- package/svelte/index.d.ts.map +1 -1
- package/svelte/index.js +29 -2
- package/vue/index.d.ts +42 -5
- package/vue/index.d.ts.map +1 -1
- package/vue/index.js +32 -1
package/docs/glyphs.md
CHANGED
|
@@ -49,6 +49,17 @@ the same as a hot `#` cell (both become opaque mask regions).
|
|
|
49
49
|
| `render` | `'mask'` | — | the one-node `.ui-icon` path |
|
|
50
50
|
| `size` | CSS length | `1em` | with `render: 'mask'`, the icon size (`--icon-size`) |
|
|
51
51
|
|
|
52
|
+
## Registry and lower-level helpers
|
|
53
|
+
|
|
54
|
+
The public registry is intentionally plain data:
|
|
55
|
+
|
|
56
|
+
- `GLYPH_SIZE` is the grid edge length.
|
|
57
|
+
- `GLYPHS` is the frozen name → bitmap registry.
|
|
58
|
+
- `GLYPH_NAMES` is the sorted, frozen name list.
|
|
59
|
+
- `glyph(name)` returns the raw bitmap rows or `undefined`.
|
|
60
|
+
- `glyphCells(name)` returns the 256 row-major cell descriptors.
|
|
61
|
+
- `glyphMask(name)` returns the CSS `url(...)` value used by the mask renderer.
|
|
62
|
+
|
|
52
63
|
## Big numeric readout — `renderReadout`
|
|
53
64
|
|
|
54
65
|
Compose digits and punctuation into a row of dot-matrix glyphs — the
|
|
@@ -74,7 +74,7 @@ declarations are literal unions.
|
|
|
74
74
|
## Deprecation policy
|
|
75
75
|
|
|
76
76
|
From 0.3.1 onward, removals follow the policy in
|
|
77
|
-
[
|
|
77
|
+
[stability.md](../stability.md#deprecation-policy): a class is
|
|
78
78
|
deprecated for **one minor** (kept working, marked in CHANGELOG +
|
|
79
79
|
`MIGRATIONS.json`) before it is removed. 0.2 → 0.3 predates this policy,
|
|
80
80
|
which is why it was a hard cut.
|
package/docs/package-contract.md
CHANGED
|
@@ -282,15 +282,15 @@ result. The listed gates are part of `npm run check`.
|
|
|
282
282
|
|
|
283
283
|
| Surface | Source of truth | Generated outputs | Generator | Gate | Note |
|
|
284
284
|
| --- | --- | --- | --- | --- | --- |
|
|
285
|
-
| Package manifest | `package.json` | docs/package-contract.md | `npm run package-contract:build` | check:fresh | The complete export/file matrix in this document is generated from the manifest. |
|
|
285
|
+
| 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. |
|
|
286
286
|
| 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. |
|
|
287
287
|
| 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. |
|
|
288
|
-
| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (46 layered outputs) | `npm run dist:build` | check:dist; check:exports | Default bundle and direct layered leaf imports are generated from authored CSS and
|
|
289
|
-
| JSDoc-authored public JS | `behaviors/; annotations/; connectors/; react/; solid/; qwik/` | adjacent *.d.ts and *.d.ts.map files | `npm run dts:emit` | check:dts-emit; check:types; check:attw; check:publint | Declarations are emitted from the shipped JS,
|
|
290
|
-
| Glyph registry | `glyphs/glyphs.js` | glyphs/glyphs.d.ts | `npm run glyphs:build` | check:glyphs;
|
|
288
|
+
| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (46 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. |
|
|
289
|
+
| 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. |
|
|
290
|
+
| 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. |
|
|
291
291
|
| 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. |
|
|
292
292
|
| Chart palette | `tokens/charts.js` | css/dataviz.css; tokens/charts.json; tokens/charts.d.ts | `npm run charts:build` | check:charts | Data-viz colors are opt-in, CVD-gated, and never UI chrome. |
|
|
293
|
-
| External renderer themes | `tokens/mermaid.js; tokens/d2.js; tokens/vega.js` | tokens/{mermaid,d2,vega}.{js,json,d.ts} | `npm run mermaid:build; d2:build; vega:build` | check:mermaid; check:d2; check:vega | Renderer configs use resolved colors because the external renderers cannot consume CSS variables directly. |
|
|
293
|
+
| External renderer themes | `tokens/mermaid.js; tokens/d2.js; tokens/vega.js` | tokens/{mermaid,d2,vega}.{js,json,d.ts} | `npm run mermaid:build; d2:build; vega:build` | check:mermaid; check:d2; check:vega; check:unit | Renderer configs use resolved colors because the external renderers cannot consume CSS variables directly; unit tests prove helper defaults and Vega render landing. |
|
|
294
294
|
| Contrast report | `tokens/resolved.json; tokens/skins.js; tokens/charts.js` | docs/contrast.md | `npm run contrast:build` | check:contrast | WCAG floors are hard-gated; APCA is reported as advisory. |
|
|
295
295
|
|
|
296
296
|
## Internal Paths
|
package/docs/reporting.md
CHANGED
|
@@ -54,18 +54,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
|
|
|
54
54
|
changes ship in the minor (see [stability.md](./stability.md)):
|
|
55
55
|
|
|
56
56
|
```html
|
|
57
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
58
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
57
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/bronto.css" />
|
|
58
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/report-kit.css" />
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
Leaf-by-leaf CDN imports use the same `dist/css/` paths:
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
65
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
66
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
67
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
68
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
64
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/bronto.css" />
|
|
65
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/report.css" />
|
|
66
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/dataviz.css" />
|
|
67
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/annotations.css" />
|
|
68
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/legend.css" />
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
|
|
@@ -87,8 +87,8 @@ the default bundle — add the leaves a given report actually needs.
|
|
|
87
87
|
`@ponchia/ui/css/analytical.css` is a convenience roll-up of the **nine
|
|
88
88
|
figure/evidence-layer leaves only** (figure, annotations, legends, marks,
|
|
89
89
|
connectors, spotlight, crosshair, selection, highlights) — sources, generated,
|
|
90
|
-
state, interval, clamp, and the prose/evidence leaves below
|
|
91
|
-
must be linked individually. Reach for:
|
|
90
|
+
state, interval, clamp, workbench, command, and the prose/evidence leaves below
|
|
91
|
+
are NOT in it and must be linked individually. Reach for:
|
|
92
92
|
|
|
93
93
|
| Layer | Import | Reach for it when… |
|
|
94
94
|
| --- | --- | --- |
|
|
@@ -98,12 +98,20 @@ must be linked individually. Reach for:
|
|
|
98
98
|
| **Interval** (`.ui-interval*`) | `css/interval.css` | Evidence is a low/high estimate, confidence window, target band, or uncertain reading. The host normalises `--lo`, `--hi`, and optional `--v`; Bronto only paints the range and point. See [interval.md](./interval.md). |
|
|
99
99
|
| **Clamp** (`.ui-clamp*`) | `css/clamp.css` | A source excerpt, claim basis, or caveat should scan as a bounded text block but remain reachable through explicit "Show more" / "Show less" labels and print expansion. See [clamp.md](./clamp.md). |
|
|
100
100
|
| **Highlights** (`.ui-highlights`) | `css/highlights.css` | The host registers CSS Custom Highlight API ranges for cited evidence, search hits, or the current match without wrapping DOM text nodes. See [highlights.md](./highlights.md). |
|
|
101
|
+
| **Chart palette** (`--chart-*`) | `css/dataviz.css` | A figure needs categorical, sequential, or diverging chart colours. The palette is opt-in, CVD-gated, and never UI chrome. See [theming.md](./theming.md#data-viz-palette). |
|
|
101
102
|
| **Annotations** (`.ui-annotation*`) | `css/annotations.css` | A figure needs an explicit callout — a peak, a limit, a watched region — or a small decorative margin mark. SVG only. See [annotations.md](./annotations.md) and the [off-chart + scaling notes](./annotations.md#using-annotations-off-chart) before you size one. |
|
|
103
|
+
| **Connectors** (`.ui-connector*`) | `css/connectors.css` | A note, card, or region needs a leader line to another DOM element. Bronto supplies overlay styling plus pure SVG path geometry; the host owns layout and meaning. See [connectors.md](./connectors.md). |
|
|
102
104
|
| **Legends / data keys** (`.ui-legend*`) | `css/legend.css` | A chart figure needs a colour key. WCAG 1.4.1 by construction. See [legends.md](./legends.md). |
|
|
105
|
+
| **Spotlight** (`.ui-spotlight*`, `.ui-tour-note*`) | `css/spotlight.css` | A screen report or guided workflow needs a visual focus cutout and callout note. It is not a tour engine; the host owns step order, persistence, and focus movement. See [spotlight.md](./spotlight.md). |
|
|
106
|
+
| **Crosshair / readout** (`.ui-crosshair*`, `.ui-readout`) | `css/crosshair.css` | A plot needs pointer-tracking ruler lines and a readout chip. Bronto reports pixels/fractions; the host maps those to data values with its own scales. See [crosshair.md](./crosshair.md). |
|
|
107
|
+
| **Selection emphasis** (`.ui-sel*`) | `css/selection.css` | Host-owned brush, filter, or selection logic needs a shared visual state vocabulary for selected / excluded / candidate items. See [selection.md](./selection.md). |
|
|
103
108
|
| **Mermaid theme** (`@ponchia/ui/mermaid`) | _(JS/JSON, no CSS)_ | The report embeds a [Mermaid](https://mermaid.js.org) diagram (flowchart, sequence, pie…) and you want it on-brand instead of generic. A resolved `base` theme projected from the same tokens as `charts.json`; annotate the rendered SVG with the annotation layer. See [mermaid.md](./mermaid.md). |
|
|
104
109
|
| **D2 theme** (`@ponchia/ui/d2`) | _(JS/JSON, no CSS)_ | The report embeds a [D2](https://d2lang.com) diagram and you want it on-brand. Resolved theme-override slots (monochrome base + one rationed accent) projected from the same tokens; annotate the rendered SVG. See [d2.md](./d2.md). |
|
|
110
|
+
| **Vega theme** (`@ponchia/ui/vega`) | _(JS/JSON, no CSS)_ | The report embeds a live or generated Vega-Lite chart and you want token-matched axes, text, legends, and ramps. See [vega.md](./vega.md). |
|
|
105
111
|
| **Generated-content trust** (`.ui-generated`, `.ui-origin-label`, `.ui-reasoning`, `.ui-tool-log`) | `css/generated.css` | The report (or a section of it) is AI/system-authored and should _say so_ — an origin label plus quiet, collapsible reasoning / tool-call logs. Pairs with the sources layer. See [generated.md](./generated.md). |
|
|
106
112
|
| **Lifecycle / system state** (`.ui-state`, `.ui-syncbar`) | `css/state.css` | A status report needs to show the state a thing is in — saving / queued / stale / conflict / reviewed — as a labelled object, not a bare coloured dot. See [state.md](./state.md). |
|
|
113
|
+
| **Workbench surfaces** (`.ui-inspector`, `.ui-property`, `.ui-selectionbar`, `.ui-splitter`) | `css/workbench.css` | A screen report or analytical tool needs an inspector, property rows, selected-item actions, or resizable panes. Not in `report-kit.css`; pair splitters with `initSplitter`. See [workbench.md](./workbench.md). |
|
|
114
|
+
| **Command palette** (`.ui-command*`) | `css/command.css` | A screen report or analytical tool needs a searchable command shell. Not in `report-kit.css`; pair with `initCommand` and a host-owned opener/action registry. See [command.md](./command.md). |
|
|
107
115
|
| **Spark** (`.ui-spark*`) | `css/spark.css` | A trend belongs _inside a sentence or table cell_ — a word-sized inline microchart, the inline counterpart to `ui-delta`/`ui-num`/`ui-stat`. See [spark.md](./spark.md). |
|
|
108
116
|
| **Bullet graph** (`.ui-bullet*`) | `css/bullet.css` | A measure needs "inside budget? vs target?" at a glance — the canonical SLO / error-budget figure that `ui-meter` structurally cannot express. See [bullet.md](./bullet.md). |
|
|
109
117
|
| **Diff** (`.ui-diff*`) | `css/diff.css` | The report shows what _changed_ — code review, changelogs, version history, config diffs. Marks call out a sentence; diff calls out a line. See [diff.md](./diff.md). |
|
|
@@ -117,8 +125,11 @@ must be linked individually. Reach for:
|
|
|
117
125
|
|
|
118
126
|
These compose with the report-native primitives already called out in
|
|
119
127
|
[Composition rules](#composition-rules): `ui-statgrid`, `ui-alert`, `ui-table`,
|
|
120
|
-
`ui-timeline`, `ui-meter`, and `ui-num`.
|
|
121
|
-
they are
|
|
128
|
+
`ui-timeline`, `ui-meter`, and `ui-num`. The static leaves do not require
|
|
129
|
+
behavior JS, so they are safe in the PDF-first report path. `workbench.css` and
|
|
130
|
+
`command.css` are deliberately screen-tool leaves: they stay out of
|
|
131
|
+
`report-kit.css` and only become interactive when the host imports the matching
|
|
132
|
+
behavior JS.
|
|
122
133
|
|
|
123
134
|
## Canonical skeleton
|
|
124
135
|
|
|
@@ -868,7 +879,7 @@ or validation runtime.
|
|
|
868
879
|
|
|
869
880
|
```json
|
|
870
881
|
{
|
|
871
|
-
"$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
882
|
+
"$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/schemas/report-claims.v1.schema.json",
|
|
872
883
|
"schemaVersion": "bronto-report-claims.v1",
|
|
873
884
|
"report": { "title": "Decision readiness", "type": "decision" },
|
|
874
885
|
"claims": [
|
package/docs/stability.md
CHANGED
|
@@ -16,7 +16,7 @@ shipped `files` entry, and the generated artifact provenance map — see
|
|
|
16
16
|
| CSS package root (`@ponchia/ui`) | Stable | CSS-only entrypoint. CSS side-effect imports are supported in CSS-aware bundlers; Node/runtime JS root imports are not. |
|
|
17
17
|
| JS module format | Stable | JS subpaths are ESM-only. CommonJS consumers use dynamic `import()`. |
|
|
18
18
|
| CSS class names (`.ui-*`) | Stable | Names and documented modifier semantics are public. Internal selector structure and leaf-file boundaries may change. |
|
|
19
|
-
| Class recipes (`@ponchia/ui/classes`) | Stable | Exported `cls`, `ui`, `cx`, recipe names, and option unions are public. |
|
|
19
|
+
| Class recipes (`@ponchia/ui/classes`) | Stable | Exported `cls`, `ui`, `cx`, `attrs`, recipe names, ARIA attribute helper names, and option unions are public. |
|
|
20
20
|
| Class vocabulary as data (`@ponchia/ui/classes.json`) | Stable additive | The JSON shape (`groups`/`classes`/`states`/`customProperties`) and its entries are public — for validating markup from a non-JS/non-TS host. Generated from `cls` (the `classes` list cannot drift from the CSS); `states`/`customProperties` are gated against the stylesheet. New classes/hooks are additive. |
|
|
21
21
|
| Design tokens | Stable names/roles | Token names and documented roles are public. Exact values and generated colour math outputs may change for visual tuning before 1.0. |
|
|
22
22
|
| `--accent-1..6` | Stable names/roles | A subtle-to-bold accent ramp derived from `--accent`. Exact resolved values are visual tuning; algorithm changes require release-note visibility and resolver/browser checks. |
|
|
@@ -44,12 +44,28 @@ shipped `files` entry, and the generated artifact provenance map — see
|
|
|
44
44
|
| 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. |
|
|
45
45
|
| 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. |
|
|
46
46
|
| 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. |
|
|
47
|
-
| Command palette (`css/command.css`, `.ui-command*`, `initCommand`, `useCommand`) | 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, plus the
|
|
47
|
+
| Command palette (`css/command.css`, `.ui-command*`, `initCommand`, `useCommand` / `command` / `vCommand`) | 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, plus the framework binding adapters. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. |
|
|
48
48
|
| Controlled-modal focus trap (`initModal`, `useModal`, `data-bronto-modal`) | Stable additive | For the `.ui-modal.is-open` (non-`<dialog>`) path: the `data-bronto-modal` opt-in marker, the `inert`-based focus trap + focus-return, and the cancelable `bronto:modal:close` (`detail: { reason }`) event are public. The consumer still owns the `is-open` class; the behavior never changes visibility. The native `<dialog>` path (`initDialog`) is the default and gets the trap for free. |
|
|
49
49
|
| 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). |
|
|
50
50
|
| Generated docs shipped in npm | Stable paths | `llms.txt` and 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. |
|
|
51
51
|
| Demo, examples, tests, scripts | Internal | Useful for learning and verification, but not shipped runtime API unless a path is explicitly exported in `package.json`. |
|
|
52
52
|
|
|
53
|
+
## Deprecation Policy
|
|
54
|
+
|
|
55
|
+
Public surface (`.ui-*` classes, `data-bronto-*` attributes, `cls`/token keys,
|
|
56
|
+
behavior signatures, and exported schema values) is removed on a
|
|
57
|
+
**deprecate-one-minor** cycle:
|
|
58
|
+
|
|
59
|
+
1. **Deprecate** in minor _N_: the surface keeps working unchanged, is marked
|
|
60
|
+
deprecated in `CHANGELOG.md`, and, for renames, gets an entry in
|
|
61
|
+
[`MIGRATIONS.json`](../MIGRATIONS.json).
|
|
62
|
+
2. **Remove** no earlier than minor _N+1_, with a **BREAKING** changelog entry
|
|
63
|
+
and migration note.
|
|
64
|
+
|
|
65
|
+
A token/class/attribute that is provably referenced by no shipped CSS,
|
|
66
|
+
component, behavior, or doc may skip that window and be removed with a BREAKING
|
|
67
|
+
entry plus migration note; there is no working call-site to keep alive.
|
|
68
|
+
|
|
53
69
|
## Trust Boundary
|
|
54
70
|
|
|
55
71
|
Behaviors assume trusted application markup. If a delegated root includes
|
package/docs/theming.md
CHANGED
|
@@ -223,7 +223,7 @@ you have, so the one-accent discipline holds.
|
|
|
223
223
|
colorways". (Your _own_ `--accent` re-brand is still your obligation; the
|
|
224
224
|
guarantee covers the shipped palettes and skins.)
|
|
225
225
|
|
|
226
|
-
## Data-viz palette
|
|
226
|
+
## Data-viz palette
|
|
227
227
|
|
|
228
228
|
Opt-in Tier-4 chart colours for dashboards — **charts only, never UI chrome**
|
|
229
229
|
(a build gate fails on `var(--chart-*)` in component CSS), and never in the
|
|
@@ -275,7 +275,7 @@ semantics — the CSS can't add ARIA for you:
|
|
|
275
275
|
content use `.ui-popover` + `initPopover()` (collision-aware).
|
|
276
276
|
|
|
277
277
|
> **Verify a rebrand:** open
|
|
278
|
-
> [
|
|
278
|
+
> [the theme playground](https://ponchia.github.io/bronto-ui/demo/theme-playground.html) — paste
|
|
279
279
|
> your `--accent`, see the derived family and the computed WCAG ratios
|
|
280
280
|
> for `--accent-text` / `--accent` against the surface, and copy the CSS
|
|
281
281
|
> + DTCG override. This is the instrument for the "verify your hue"
|
package/docs/usage.md
CHANGED
|
@@ -191,6 +191,12 @@ destructive action).
|
|
|
191
191
|
| toast | transient, out-of-flow, system-initiated. Danger toasts route to an assertive live region; everything else polite. |
|
|
192
192
|
| tooltip | supplemental, hover/focus, never essential info (it's not announced reliably; don't hide required content in it). |
|
|
193
193
|
|
|
194
|
+
For dismissible in-flow alerts, mark the host with `data-bronto-dismissible`,
|
|
195
|
+
put `data-bronto-dismiss` on the close button, and wire `dismissible()` from
|
|
196
|
+
`@ponchia/ui/behaviors`. With no attribute value, the button removes the nearest
|
|
197
|
+
dismissible host; with a selector value, it removes the nearest matching
|
|
198
|
+
ancestor and dispatches a cancelable `bronto:dismiss` event first.
|
|
199
|
+
|
|
194
200
|
The CSS `ui-tooltip` is hover/focus-only and CSS can't wire it to assistive
|
|
195
201
|
tech for you — associate the bubble with its trigger yourself, or it conveys
|
|
196
202
|
nothing to a screen reader: give `.ui-tooltip__bubble` an `id`, point the
|
|
@@ -222,6 +228,8 @@ Both are a thin horizontal bar; they mean different things.
|
|
|
222
228
|
zero bar — so the helper returns just `role="progressbar"` + `aria-busy="true"`
|
|
223
229
|
(no `aria-valuenow`, no `--value`). Pair it with the class:
|
|
224
230
|
`<div class={ui.progress({ indeterminate: true })} {...attrs.progress()}>`.
|
|
231
|
+
The segmented `.ui-dotbar` uses the same accessibility contract through
|
|
232
|
+
`attrs.dotbar(value)` or `attrs.dotbar()` for the indeterminate sweep.
|
|
225
233
|
|
|
226
234
|
Rule of thumb: *something is happening* → progress; *something measures
|
|
227
235
|
this much* → meter.
|
|
@@ -589,7 +597,9 @@ one of these a screen reader announces nothing while the user waits.
|
|
|
589
597
|
carries the native `popover` attribute (never clipped by `overflow`/stacking);
|
|
590
598
|
without it, it falls back to an `is-open` class that a clipping ancestor can cut
|
|
591
599
|
off. Add `popover` to the panel for the robust path — the `is-open` form is a
|
|
592
|
-
fallback, not the default to copy.
|
|
600
|
+
fallback, not the default to copy. Placement flips to the roomier vertical side,
|
|
601
|
+
keeps the panel on-screen, and scrolls tall content inside the available viewport
|
|
602
|
+
space.
|
|
593
603
|
|
|
594
604
|
It is a **non-modal** dialog by design: the panel gets `role="dialog"` and focus
|
|
595
605
|
moves into it, but there is **no focus trap** and the rest of the page stays
|
|
@@ -610,7 +620,7 @@ HTML, print/PDF, and before any hydration:
|
|
|
610
620
|
|
|
611
621
|
| Component | How it works without JS |
|
|
612
622
|
| --- | --- |
|
|
613
|
-
| Tooltip (`ui-tooltip`) | `:hover` / `:focus-within`
|
|
623
|
+
| Tooltip (`ui-tooltip`) | `:hover` / `:focus-within` for short local labels |
|
|
614
624
|
| Accordion | native `<details>` / `<summary>` |
|
|
615
625
|
| Segmented control (`ui-segmented`) | `:has(input:checked)` over a radio group |
|
|
616
626
|
| Scroll-reveal (`ui-scroll-reveal`) | scroll-driven animation, zero JS |
|
|
@@ -622,6 +632,7 @@ These are JS widgets wearing the Bronto look; without the behavior they are iner
|
|
|
622
632
|
|
|
623
633
|
| Component | Behavior | With the behavior absent |
|
|
624
634
|
| --- | --- | --- |
|
|
635
|
+
| Disclosure trigger (`[data-bronto-disclosure]`) | `initDisclosure` | a button with stale `aria-expanded`; the controlled panel never toggles |
|
|
625
636
|
| Tabs (`ui-tabs`) | `initTabs` | **author panels visible** — ship `hidden` panels and if `initTabs` never runs the content is unreachable |
|
|
626
637
|
| Combobox (`ui-combobox`) | `initCombobox` | a plain text input beside an unfiltered list |
|
|
627
638
|
| Command palette (`ui-command`) | `initCommand` | a static, unfiltered list |
|
|
@@ -631,12 +642,15 @@ These are JS widgets wearing the Bronto look; without the behavior they are iner
|
|
|
631
642
|
| Carousel (`ui-carousel`) | `initCarousel` | a native scroll-snap track (usable, no controls) |
|
|
632
643
|
| Controlled modal (`ui-modal.is-open`) | `initModal` | open skin only — no inert trap, focus-return, or Escape close signal |
|
|
633
644
|
| Menu (`data-bronto-menu`) | `initMenu` | a button next to a list with no open/close, outside-click, or Escape |
|
|
645
|
+
| Dismissible alert/callout (`data-bronto-dismissible`) | `dismissible` | the close affordance is just a button; nothing is removed |
|
|
634
646
|
| Toast | `toast()` | nothing — it is imperative-only |
|
|
635
647
|
|
|
636
648
|
One cross-cutting guard, not tied to a single component:
|
|
637
649
|
|
|
638
650
|
| Concern | Behavior | With the behavior absent |
|
|
639
651
|
| --- | --- | --- |
|
|
652
|
+
| Theme persistence before first paint | `applyStoredTheme` | the token layer follows OS preference until client code sets `data-theme`, so a stored preference can flash |
|
|
653
|
+
| Theme toggle controls | `initThemeToggle` | the button is inert and does not persist `data-theme` |
|
|
640
654
|
| `aria-disabled="true"` controls | `initDisabledGuard` | dimmed + pointer-inert via CSS, but still **keyboard**-activatable on Enter/Space (native `disabled` is already fully inert) |
|
|
641
655
|
|
|
642
656
|
Rule of thumb: if a component needs ARIA-state sync, focus management, a keyboard
|
package/docs/vega.md
CHANGED
|
@@ -137,7 +137,7 @@ one chromatic default (series 1 / the lone mark), never the chrome:
|
|
|
137
137
|
| `range.diverging` | − … neutral … + ramp | `charts.json` diverging |
|
|
138
138
|
|
|
139
139
|
The palette is the same CVD-safe, pattern-paired set documented in
|
|
140
|
-
[theming](./theming.md#data-viz) — colour is never the sole channel. When a
|
|
140
|
+
[theming](./theming.md#data-viz-palette) — colour is never the sole channel. When a
|
|
141
141
|
series needs the redundant second channel, drive the mark's fill from the
|
|
142
142
|
`--chart-pattern-*` tokens or pair a [legend](./legends.md) swatch.
|
|
143
143
|
|
|
@@ -237,8 +237,8 @@ contract**, so pin your Vega version and key off the data, not generated ids.
|
|
|
237
237
|
|
|
238
238
|
bronto owns the theme config — gated structurally by `check:vega` (every colour
|
|
239
239
|
slot resolves, both themes, no `var()` leaks, every `range.*` ramp populated),
|
|
240
|
-
and
|
|
241
|
-
|
|
242
|
-
|
|
240
|
+
and by the unit suite (`check:unit`, via the `vega`/`vega-lite` dev deps) which
|
|
241
|
+
asserts the colours actually land on a rendered chart — and the annotation
|
|
242
|
+
geometry. It does not own Vega's grammar, its rendering, or its internal SVG —
|
|
243
243
|
those stay Vega's, and the chart is a documented composition, not a shipped
|
|
244
244
|
runtime binding.
|
package/llms.txt
CHANGED
|
@@ -44,7 +44,7 @@ the path changes from source `css/` to built `dist/css/`:
|
|
|
44
44
|
<!-- installed locally -->
|
|
45
45
|
<link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
|
|
46
46
|
<!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
|
|
47
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/<leaf>.css" />
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
The flattened default bundle is `dist/bronto.css` (bundler shorthand
|
|
@@ -84,13 +84,17 @@ matching `.ui-source-card`, seed lightweight preview metadata, and emit
|
|
|
84
84
|
`bronto:source:focus`; the host still owns numbering, fetching, trust decisions,
|
|
85
85
|
and any rich preview popover.
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
deps `react` / `solid-js` /
|
|
87
|
+
Optional lifecycle adapters wrap those behaviors without owning markup or state.
|
|
88
|
+
React/Solid/Qwik use hook bindings (peer deps `react` / `solid-js` /
|
|
89
|
+
`@builder.io/qwik`, optional — core stays zero-dep); Svelte uses dependency-free
|
|
90
|
+
actions, and Vue uses dependency-free directives/plugin helpers:
|
|
89
91
|
|
|
90
92
|
```js
|
|
91
93
|
import { useDialog, useToast } from '@ponchia/ui/react'; // or '@ponchia/ui/solid' or '@ponchia/ui/qwik'
|
|
92
94
|
// React: scope with { root: reactRef } or a resolver, not { root: ref.current } during render.
|
|
93
95
|
// Qwik: hooks run in useVisibleTask$; scope with a Qwik signal — useDialog({ root: useSignal() }).
|
|
96
|
+
// Svelte: import { dialog, toast } from '@ponchia/ui/svelte'.
|
|
97
|
+
// Vue: import { vDialog, useToast } from '@ponchia/ui/vue', or app.use(brontoVue).
|
|
94
98
|
```
|
|
95
99
|
|
|
96
100
|
Optional display glyphs — dot-matrix bitmaps on the `.ui-dotmatrix` primitive
|
|
@@ -618,7 +622,8 @@ behavior. Filter + keyboard-navigate a DOM-authored command list:
|
|
|
618
622
|
Enter→`bronto:command:select` ({value,label}) and Escape→`bronto:command:close`.
|
|
619
623
|
The HOST owns the action registry + execution; NO global Cmd/Ctrl+K (open it
|
|
620
624
|
yourself, e.g. a <dialog> via initDialog). Pairs with `ui-shortcut`. Binding:
|
|
621
|
-
`useCommand()` (
|
|
625
|
+
`useCommand()` (React/Solid/Qwik), `command` / `useCommand` (Svelte), and
|
|
626
|
+
`vCommand` / `brontoVue` (Vue). Details: `docs/command.md`.
|
|
622
627
|
|
|
623
628
|
Optional static report layer for LLM-authored HTML reports — opt-in, never in
|
|
624
629
|
the default bundle. Pair it with the normal bundle, and add data-viz only when
|
|
@@ -777,7 +782,7 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
|
|
|
777
782
|
|
|
778
783
|
- Live kitchen-sink demo (every component, light/dark, RTL): https://ponchia.github.io/bronto-ui/
|
|
779
784
|
- Architecture & the CSS-first decision: https://github.com/Ponchia/bronto-ui/blob/main/docs/architecture.md
|
|
780
|
-
- Framework integration guides (Astro / SvelteKit / React-Solid-Qwik / vanilla):
|
|
785
|
+
- Framework integration guides (Astro / SvelteKit / Vue / React-Solid-Qwik / vanilla):
|
|
781
786
|
https://github.com/Ponchia/bronto-ui/tree/main/docs/getting-started
|
|
782
787
|
|
|
783
788
|
## Rules an agent should respect
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ponchia/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "CSS-first identity and UI layer for services, tools, sites, and reports — works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
|
|
6
6
|
"keywords": [
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
"check:fresh": "node scripts/check-fresh.mjs",
|
|
147
147
|
"check:classes": "node scripts/check-classes.mjs",
|
|
148
148
|
"check:recipe-types": "node scripts/check-recipe-types.mjs",
|
|
149
|
-
"check:dead": "knip",
|
|
149
|
+
"check:dead": "knip --treat-config-hints-as-errors",
|
|
150
150
|
"check:chain": "node scripts/check-chain.mjs",
|
|
151
151
|
"check:dts-emit": "node scripts/check-dts-emit.mjs",
|
|
152
152
|
"check:glyphs": "node scripts/check-glyphs.mjs",
|
|
@@ -159,37 +159,53 @@
|
|
|
159
159
|
"check:report": "node scripts/check-report.mjs",
|
|
160
160
|
"check:legend": "node scripts/check-legend.mjs",
|
|
161
161
|
"check:types": "tsc -p tsconfig.json",
|
|
162
|
+
"check:unit": "npm test",
|
|
162
163
|
"check:shiki": "node scripts/check-shiki.mjs",
|
|
163
164
|
"check:dist": "node scripts/check-dist.mjs",
|
|
164
165
|
"check:pack": "node scripts/check-pack.mjs",
|
|
166
|
+
"check:consumer-surface": "node scripts/check-consumer-surface.mjs",
|
|
167
|
+
"check:consumer-types": "node scripts/check-consumer-types.mjs",
|
|
168
|
+
"check:component-matrix": "node scripts/check-component-matrix.mjs",
|
|
169
|
+
"check:behavior-matrix": "node scripts/check-behavior-matrix.mjs",
|
|
170
|
+
"check:helper-matrix": "node scripts/check-helper-matrix.mjs",
|
|
171
|
+
"check:binding-matrix": "node scripts/check-binding-matrix.mjs",
|
|
165
172
|
"check:examples": "node scripts/check-examples.mjs",
|
|
173
|
+
"check:visual-baselines": "node scripts/check-visual-baselines.mjs",
|
|
174
|
+
"check:playwright-container": "node scripts/check-playwright-container.mjs",
|
|
175
|
+
"check:schemas": "node scripts/check-schemas.mjs",
|
|
166
176
|
"check:release": "node scripts/check-release.mjs",
|
|
167
177
|
"check:versions": "node scripts/check-versions.mjs",
|
|
168
178
|
"check:migrations": "node scripts/check-migrations.mjs",
|
|
169
179
|
"check:public-metadata": "node scripts/check-public-metadata.mjs",
|
|
170
180
|
"check:public-hygiene": "node scripts/check-public-hygiene.mjs",
|
|
181
|
+
"check:doc-links": "node scripts/check-doc-links.mjs",
|
|
171
182
|
"check:doc-recipes": "node scripts/check-doc-recipes.mjs",
|
|
172
183
|
"check:contract": "node scripts/check-contract.mjs",
|
|
173
184
|
"check:variables": "node scripts/check-variables.mjs",
|
|
174
185
|
"check:contrast": "node scripts/check-contrast.mjs",
|
|
175
186
|
"check:publint": "publint --strict",
|
|
176
187
|
"check:attw": "attw --pack --ignore-rules no-resolution cjs-resolves-to-esm",
|
|
177
|
-
"check": "
|
|
188
|
+
"check:workflows": "github-actionlint .github/workflows/*.yml",
|
|
189
|
+
"check": "npm run lint && npm run check:format && npm run check:exports && npm run check:fresh && npm run check:classes && npm run check:recipe-types && npm run check:dead && npm run check:types && npm run check:unit && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:consumer-surface && npm run check:consumer-types && npm run check:component-matrix && npm run check:behavior-matrix && npm run check:helper-matrix && npm run check:binding-matrix && npm run check:examples && npm run check:visual-baselines && npm run check:playwright-container && npm run check:schemas && npm run check:publint && npm run check:attw && npm run check:workflows && npm run check:release && npm run check:versions && npm run check:migrations && npm run check:public-metadata && npm run check:public-hygiene && npm run check:doc-links && npm run check:doc-recipes && npm run check:contract && npm run check:variables && npm run check:contrast && npm run check:dts-emit && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:report && npm run check:legend && npm run check:chain",
|
|
178
190
|
"test": "node --test \"test/*.test.mjs\"",
|
|
179
191
|
"test:e2e": "playwright test",
|
|
180
192
|
"test:e2e:chromium": "playwright test --project=chromium",
|
|
181
193
|
"test:e2e:nonpixel": "node scripts/test-e2e-nonpixel.mjs",
|
|
194
|
+
"test:e2e:visual:container": "node scripts/test-visual-container.mjs",
|
|
182
195
|
"test:examples": "node scripts/test-examples.mjs",
|
|
196
|
+
"test:examples:cross-browser": "node scripts/test-examples.mjs --browsers=chromium,firefox,webkit",
|
|
197
|
+
"test:examples:visual": "node scripts/test-examples.mjs --visual",
|
|
183
198
|
"build:artifacts": "npm run tokens:css:build && npm run tokens:build && npm run dtcg:build && npm run resolved:build && npm run figma:variables:build && npm run dts:build && npm run dts:emit && npm run reference:build && npm run package-contract:build && npm run classes:json:build && npm run contrast:build && npm run vscode:build && npm run skins:build && npm run charts:build && npm run mermaid:build && npm run d2:build && npm run vega:build && npm run dist:build && npm run glyphs:build",
|
|
184
199
|
"verify:artifacts": "npm run check:fresh && npm run check:dist && npm run check:dts-emit && npm run check:glyphs && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:pack",
|
|
185
200
|
"prepack": "npm run build:artifacts && npm run verify:artifacts",
|
|
186
|
-
"prepublishOnly": "npm run build:artifacts && npm run check
|
|
201
|
+
"prepublishOnly": "npm run build:artifacts && npm run check"
|
|
187
202
|
},
|
|
188
203
|
"devDependencies": {
|
|
189
204
|
"@arethetypeswrong/cli": "^0.18.3",
|
|
190
205
|
"@axe-core/playwright": "^4.11.3",
|
|
191
206
|
"@builder.io/qwik": "^1.20.0",
|
|
192
207
|
"@playwright/test": "1.60.0",
|
|
208
|
+
"github-actionlint": "^1.7.12",
|
|
193
209
|
"jsdom": "^29.1.1",
|
|
194
210
|
"knip": "^6.16.1",
|
|
195
211
|
"pdfjs-dist": "^6.0.227",
|
package/svelte/index.d.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* Create a Svelte action from any Bronto delegated behavior initializer.
|
|
3
3
|
*
|
|
4
4
|
* @param {(opts?: DelegateOpts) => Cleanup | void} init
|
|
5
|
-
* @returns {
|
|
5
|
+
* @returns {BrontoAction}
|
|
6
6
|
*/
|
|
7
|
-
export function createBrontoAction(init: (opts?: DelegateOpts) => Cleanup | void):
|
|
7
|
+
export function createBrontoAction(init: (opts?: DelegateOpts) => Cleanup | void): BrontoAction;
|
|
8
8
|
/**
|
|
9
9
|
* Generic escape hatch for custom behavior initializers.
|
|
10
10
|
*
|
|
@@ -21,49 +21,70 @@ export function brontoBehavior(node: Element, params: BrontoBehaviorParams | nul
|
|
|
21
21
|
* @returns {SvelteActionReturn}
|
|
22
22
|
*/
|
|
23
23
|
export function useBrontoBehavior(node: Element, params: BrontoBehaviorParams | null | undefined): SvelteActionReturn;
|
|
24
|
-
/** @type {
|
|
25
|
-
export const themeToggle:
|
|
26
|
-
|
|
27
|
-
export const
|
|
28
|
-
|
|
29
|
-
export const
|
|
30
|
-
|
|
31
|
-
export const
|
|
32
|
-
|
|
33
|
-
export const
|
|
34
|
-
|
|
35
|
-
export const
|
|
36
|
-
|
|
37
|
-
export const
|
|
38
|
-
|
|
39
|
-
export const
|
|
40
|
-
|
|
41
|
-
export const
|
|
42
|
-
|
|
43
|
-
export const
|
|
44
|
-
|
|
45
|
-
export const
|
|
46
|
-
|
|
47
|
-
export const
|
|
48
|
-
|
|
49
|
-
export const
|
|
50
|
-
|
|
51
|
-
export const
|
|
52
|
-
|
|
53
|
-
export const
|
|
54
|
-
|
|
55
|
-
export const
|
|
56
|
-
|
|
57
|
-
export const
|
|
58
|
-
|
|
59
|
-
export const
|
|
60
|
-
|
|
61
|
-
export const
|
|
62
|
-
|
|
63
|
-
export const
|
|
64
|
-
|
|
65
|
-
export const
|
|
66
|
-
|
|
24
|
+
/** @type {BrontoThemeAction} */
|
|
25
|
+
export const themeToggle: BrontoThemeAction;
|
|
26
|
+
/** @type {BrontoAction} */
|
|
27
|
+
export const dismissible: BrontoAction;
|
|
28
|
+
/** @type {BrontoAction} */
|
|
29
|
+
export const disabledGuard: BrontoAction;
|
|
30
|
+
/** @type {BrontoAction} */
|
|
31
|
+
export const disclosure: BrontoAction;
|
|
32
|
+
/** @type {BrontoAction} */
|
|
33
|
+
export const menu: BrontoAction;
|
|
34
|
+
/** @type {BrontoAction} */
|
|
35
|
+
export const formValidation: BrontoAction;
|
|
36
|
+
/** @type {BrontoAction} */
|
|
37
|
+
export const combobox: BrontoAction;
|
|
38
|
+
/** @type {BrontoAction} */
|
|
39
|
+
export const popover: BrontoAction;
|
|
40
|
+
/** @type {BrontoAction} */
|
|
41
|
+
export const tableSort: BrontoAction;
|
|
42
|
+
/** @type {BrontoAction} */
|
|
43
|
+
export const tabs: BrontoAction;
|
|
44
|
+
/** @type {BrontoAction} */
|
|
45
|
+
export const dialog: BrontoAction;
|
|
46
|
+
/** @type {BrontoAction} */
|
|
47
|
+
export const modal: BrontoAction;
|
|
48
|
+
/** @type {BrontoAction} */
|
|
49
|
+
export const carousel: BrontoAction;
|
|
50
|
+
/** @type {BrontoAction} */
|
|
51
|
+
export const dotGlyph: BrontoAction;
|
|
52
|
+
/** @type {BrontoAction} */
|
|
53
|
+
export const legend: BrontoAction;
|
|
54
|
+
/** @type {BrontoAction} */
|
|
55
|
+
export const connectors: BrontoAction;
|
|
56
|
+
/** @type {BrontoAction} */
|
|
57
|
+
export const spotlight: BrontoAction;
|
|
58
|
+
/** @type {BrontoAction} */
|
|
59
|
+
export const crosshair: BrontoAction;
|
|
60
|
+
/** @type {BrontoAction} */
|
|
61
|
+
export const command: BrontoAction;
|
|
62
|
+
/** @type {BrontoAction} */
|
|
63
|
+
export const sources: BrontoAction;
|
|
64
|
+
/** @type {BrontoAction} */
|
|
65
|
+
export const splitter: BrontoAction;
|
|
66
|
+
/** @type {BrontoThemeAction} */
|
|
67
|
+
export const useThemeToggle: BrontoThemeAction;
|
|
68
|
+
export const useDismissible: BrontoAction;
|
|
69
|
+
export const useDisabledGuard: BrontoAction;
|
|
70
|
+
export const useDisclosure: BrontoAction;
|
|
71
|
+
export const useMenu: BrontoAction;
|
|
72
|
+
export const useFormValidation: BrontoAction;
|
|
73
|
+
export const useCombobox: BrontoAction;
|
|
74
|
+
export const usePopover: BrontoAction;
|
|
75
|
+
export const useTableSort: BrontoAction;
|
|
76
|
+
export const useTabs: BrontoAction;
|
|
77
|
+
export const useDialog: BrontoAction;
|
|
78
|
+
export const useModal: BrontoAction;
|
|
79
|
+
export const useCarousel: BrontoAction;
|
|
80
|
+
export const useDotGlyph: BrontoAction;
|
|
81
|
+
export const useLegend: BrontoAction;
|
|
82
|
+
export const useConnectors: BrontoAction;
|
|
83
|
+
export const useSpotlight: BrontoAction;
|
|
84
|
+
export const useCrosshair: BrontoAction;
|
|
85
|
+
export const useCommand: BrontoAction;
|
|
86
|
+
export const useSources: BrontoAction;
|
|
87
|
+
export const useSplitter: BrontoAction;
|
|
67
88
|
export function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
|
|
68
89
|
export type Cleanup = import("../behaviors/index.js").Cleanup;
|
|
69
90
|
export type DelegateOpts = import("../behaviors/index.js").DelegateOpts;
|
|
@@ -73,10 +94,15 @@ export type BrontoActionRoot = Document | Element | null | undefined;
|
|
|
73
94
|
export type BrontoActionOpts = Omit<DelegateOpts, "root"> & {
|
|
74
95
|
root?: BrontoActionRoot;
|
|
75
96
|
};
|
|
97
|
+
export type BrontoThemeActionOpts = Omit<ThemeStorageOpts & DelegateOpts, "root"> & {
|
|
98
|
+
root?: BrontoActionRoot;
|
|
99
|
+
};
|
|
76
100
|
export type BrontoBehaviorParams = {
|
|
77
101
|
init: (opts?: DelegateOpts) => Cleanup | void;
|
|
78
102
|
opts?: BrontoActionOpts | null | undefined;
|
|
79
103
|
};
|
|
104
|
+
export type BrontoAction = (node: Element, opts?: BrontoActionOpts | null | undefined) => SvelteActionReturn;
|
|
105
|
+
export type BrontoThemeAction = (node: Element, opts?: BrontoThemeActionOpts | null | undefined) => SvelteActionReturn;
|
|
80
106
|
export type SvelteActionReturn = {
|
|
81
107
|
update?: (next?: unknown) => void;
|
|
82
108
|
destroy: () => void;
|
package/svelte/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"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"}
|