@ponchia/ui 0.10.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 +37 -0
- package/MIGRATIONS.json +28 -9
- package/README.md +1 -1
- package/classes/classes.json +31 -2
- package/classes/index.d.ts +12 -0
- package/classes/index.js +13 -0
- package/css/annotations.css +2 -2
- package/css/app.css +3 -1
- package/css/command.css +4 -4
- package/css/discussion.css +150 -0
- package/css/figure.css +6 -4
- package/css/generated.css +19 -12
- package/css/legend.css +13 -5
- package/css/report.css +25 -11
- package/css/sources.css +1 -1
- 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/command.css +1 -1
- package/dist/css/discussion.css +1 -0
- package/dist/css/figure.css +1 -1
- package/dist/css/generated.css +1 -1
- package/dist/css/legend.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/docs/compositions.md +23 -2
- package/docs/discussion.md +64 -0
- package/docs/figure.md +10 -1
- package/docs/migrations/0.10-to-0.11.md +61 -0
- package/docs/package-contract.md +7 -1
- package/docs/reference.md +18 -1
- package/docs/reporting.md +8 -8
- package/docs/stability.md +2 -1
- package/llms.txt +1 -1
- package/package.json +10 -4
package/dist/css/sources.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer bronto{.ui-citation,.ui-source-card,.ui-provenance{--src-tone: var(--text-dim)}.ui-src{--src-tone: var(--text-dim);align-items: center;background: var(--panel-soft);border: 1px solid color-mix(in srgb,var(--src-tone) 45%,var(--line));border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-src::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';flex: none;inline-size: 0.45rem;print-color-adjust: exact}.ui-src--verified{--src-tone: var(--success)}.ui-src--reviewed{--src-tone: var(--accent)}.ui-src--generated{--src-tone: var(--info)}.ui-src--unverified{--src-tone: var(--text-dim)}.ui-src--stale{--src-tone: var(--warning)}.ui-src--conflict{--src-tone: var(--danger)}.ui-citation{color: var(--accent-text);font-family: var(--mono);font-size: 0.72em;font-weight: 600;text-decoration: none;vertical-align: super}.ui-citation:hover{text-decoration: underline}.ui-citation--chip{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-citation--chip::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}.ui-source-list{display: grid;gap: var(--space-sm);list-style: none;margin: 0;min-inline-size: 0;padding: 0}.ui-source-list__item{margin: 0;min-inline-size: 0}.ui-source-card{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--src-tone);border-radius: var(--radius-md);display: grid;gap: 0.3rem;min-inline-size: 0;padding: 0.75rem 0.9rem;print-color-adjust: exact}.ui-source-card:target,.ui-source-card.is-source-active{box-shadow: 0 0 0 3px color-mix(in srgb,var(--src-tone) 22%,transparent);outline: 2px solid var(--src-tone);outline-offset: 2px}.ui-source-card > *{min-inline-size: 0}.ui-source-card__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0;overflow-wrap: break-word}.ui-source-card__origin{color: var(--text-soft);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);overflow-wrap: anywhere}.ui-source-card__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);overflow-wrap: anywhere}.ui-source-card__excerpt{color: var(--text-soft);margin: 0;overflow-wrap: anywhere}.ui-source-card__actions{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-block-start: 0.2rem}.ui-provenance{align-items: center;color: var(--text-dim);display: inline-flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.3rem 0.75rem;letter-spacing: var(--tracking-wide)}.ui-provenance__item{align-items: center;display: inline-flex;gap: 0.35rem}.ui-provenance__item::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}@media (forced-colors: active){.ui-citation--chip::before,.ui-provenance__item::before,.ui-src::before{background: CanvasText}.ui-source-card{border-inline-start-color: CanvasText}}@media print{.ui-prose .ui-citation[href]::after,.ui-citation[href]::after{content: none}.ui-source-card,.ui-source-list__item{break-inside: avoid}}}
|
|
1
|
+
@layer bronto{.ui-citation,.ui-source-card,.ui-provenance{--src-tone: var(--text-dim)}.ui-src{--src-tone: var(--text-dim);align-items: center;background: var(--panel-soft);border: 1px solid color-mix(in srgb,var(--src-tone) 45%,var(--line));border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-src::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';flex: none;inline-size: 0.45rem;print-color-adjust: exact}.ui-src--verified{--src-tone: var(--success)}.ui-src--reviewed{--src-tone: var(--accent)}.ui-src--generated{--src-tone: var(--info)}.ui-src--unverified{--src-tone: var(--text-dim)}.ui-src--stale{--src-tone: var(--warning)}.ui-src--conflict{--src-tone: var(--danger)}.ui-citation{color: var(--accent-text);font-family: var(--mono);font-size: max(0.72em,var(--text-2xs));font-weight: 600;text-decoration: none;vertical-align: super}.ui-citation:hover{text-decoration: underline}.ui-citation--chip{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);color: var(--text-soft);display: inline-flex;font-size: var(--text-2xs);gap: 0.35rem;padding: 0.08rem 0.55rem;vertical-align: baseline}.ui-citation--chip::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}.ui-source-list{display: grid;gap: var(--space-sm);list-style: none;margin: 0;min-inline-size: 0;padding: 0}.ui-source-list__item{margin: 0;min-inline-size: 0}.ui-source-card{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--src-tone);border-radius: var(--radius-md);display: grid;gap: 0.3rem;min-inline-size: 0;padding: 0.75rem 0.9rem;print-color-adjust: exact}.ui-source-card:target,.ui-source-card.is-source-active{box-shadow: 0 0 0 3px color-mix(in srgb,var(--src-tone) 22%,transparent);outline: 2px solid var(--src-tone);outline-offset: 2px}.ui-source-card > *{min-inline-size: 0}.ui-source-card__title{color: var(--text);font-size: var(--text-sm);font-weight: 600;margin: 0;overflow-wrap: break-word}.ui-source-card__origin{color: var(--text-soft);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);overflow-wrap: anywhere}.ui-source-card__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);overflow-wrap: anywhere}.ui-source-card__excerpt{color: var(--text-soft);margin: 0;overflow-wrap: anywhere}.ui-source-card__actions{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-block-start: 0.2rem}.ui-provenance{align-items: center;color: var(--text-dim);display: inline-flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.3rem 0.75rem;letter-spacing: var(--tracking-wide)}.ui-provenance__item{align-items: center;display: inline-flex;gap: 0.35rem}.ui-provenance__item::before{background: var(--src-tone);border-radius: 50%;block-size: 0.45rem;content: '';inline-size: 0.45rem;print-color-adjust: exact}@media (forced-colors: active){.ui-citation--chip::before,.ui-provenance__item::before,.ui-src::before{background: CanvasText}.ui-source-card{border-inline-start-color: CanvasText}}@media print{.ui-prose .ui-citation[href]::after,.ui-citation[href]::after{content: none}.ui-source-card,.ui-source-list__item{break-inside: avoid}}}
|
package/docs/compositions.md
CHANGED
|
@@ -22,6 +22,11 @@ states; do not present missing observations as success.
|
|
|
22
22
|
|
|
23
23
|
The complete specimen is [service.html](https://ponchia.github.io/bronto-ui/demo/service.html). On a phone,
|
|
24
24
|
navigation wraps and the compact metrics leave room for the work queue.
|
|
25
|
+
The specimen owns deterministic loading, empty, error and stale scenarios,
|
|
26
|
+
search/environment filtering and a local sample-job dialog. Unknown observations
|
|
27
|
+
hide operational health claims; stale ones stay visibly qualified. Use Sync to
|
|
28
|
+
recover. These behaviors are sample host logic, not package state management.
|
|
29
|
+
|
|
25
30
|
Check the main action, every navigation destination, and a long account name
|
|
26
31
|
at 360px and with a coarse pointer. A data table may scroll in its own region.
|
|
27
32
|
|
|
@@ -69,8 +74,8 @@ Use the core stylesheet plus `report-kit.css` for a standalone HTML report.
|
|
|
69
74
|
Use real asset URLs in HTML; package specifiers resolve only in build tools.
|
|
70
75
|
|
|
71
76
|
```html
|
|
72
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
73
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
77
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/bronto.css" />
|
|
78
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.11.0/dist/css/report-kit.css" />
|
|
74
79
|
<article class="ui-report">
|
|
75
80
|
<header class="ui-report__cover ui-report__cover--compact">
|
|
76
81
|
<h1 class="ui-report__title">Keep the current configuration</h1>
|
|
@@ -108,3 +113,19 @@ look technical.
|
|
|
108
113
|
Use one dominant action per local task. Separate navigation, action, severity,
|
|
109
114
|
and evidence status semantically even when they share a color family. Test
|
|
110
115
|
light and dark together, and keep keyboard focus and reduced motion visible.
|
|
116
|
+
|
|
117
|
+
## Embedded evidence
|
|
118
|
+
|
|
119
|
+
Constrain the figure, decision grid or action list inside a wide page. Each
|
|
120
|
+
uses its own available width. A two-up comparison wraps intrinsically even
|
|
121
|
+
outside `ui-report`. Keep value columns readable and source links reachable;
|
|
122
|
+
page overflow is an incomplete test. The container regression suite checks
|
|
123
|
+
280/320/480px parents and a wide layout.
|
|
124
|
+
|
|
125
|
+
Review long action status, legend names and citation markers. Keep chart
|
|
126
|
+
annotations in their `viewBox` or supply an equivalent narrow fallback. Print
|
|
127
|
+
uses document flow instead of size containment.
|
|
128
|
+
|
|
129
|
+
For an existing application, review explicit typography overrides with the
|
|
130
|
+
[0.11 migration recipe](migrations/0.10-to-0.11.md). A dependency pin does not
|
|
131
|
+
remove consumer CSS that overrides the shared layer.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Discussions
|
|
2
|
+
|
|
3
|
+
Use the opt-in discussion leaf for readable thread lists, messages, quotations,
|
|
4
|
+
and composers in a host application:
|
|
5
|
+
|
|
6
|
+
```css
|
|
7
|
+
@import '@ponchia/ui';
|
|
8
|
+
@import '@ponchia/ui/css/discussion.css';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
BrontoUI supplies the visual structure. The host owns storage, identity,
|
|
12
|
+
thread resolution, text anchoring, unread state, and posting behavior. This leaf
|
|
13
|
+
adds no JavaScript or editor dependency.
|
|
14
|
+
|
|
15
|
+
## Thread structure
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<section class="ui-discussion" aria-labelledby="thread-title">
|
|
19
|
+
<header class="ui-discussion__header">
|
|
20
|
+
<div>
|
|
21
|
+
<h2 id="thread-title">Discussion</h2>
|
|
22
|
+
<p>Release notes</p>
|
|
23
|
+
</div>
|
|
24
|
+
</header>
|
|
25
|
+
<p class="ui-discussion__state">Open · passage attached</p>
|
|
26
|
+
<blockquote class="ui-discussion__quote">The selected passage.</blockquote>
|
|
27
|
+
<ol class="ui-discussion__messages">
|
|
28
|
+
<li class="ui-discussion__message">
|
|
29
|
+
<p class="ui-discussion__meta"><strong>Reviewer</strong> · today</p>
|
|
30
|
+
<p>Can we clarify this sentence?</p>
|
|
31
|
+
</li>
|
|
32
|
+
</ol>
|
|
33
|
+
<form class="ui-discussion__composer">
|
|
34
|
+
<label for="reply">Reply</label>
|
|
35
|
+
<textarea id="reply" name="reply" rows="4"></textarea>
|
|
36
|
+
<div class="ui-discussion__actions">
|
|
37
|
+
<button class="ui-button" type="submit">Post reply</button>
|
|
38
|
+
</div>
|
|
39
|
+
</form>
|
|
40
|
+
</section>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Wire the form to the host's posting mechanism. Keep the draft when posting
|
|
44
|
+
fails, disable duplicate submissions while a request is pending, and announce
|
|
45
|
+
success only after confirmation. Use native buttons for actions and real links
|
|
46
|
+
for navigation. A modal host must supply focus management and focus return.
|
|
47
|
+
|
|
48
|
+
## Reading and recovery
|
|
49
|
+
|
|
50
|
+
The styles use sentence case and sans-serif prose, wrap long text, and allow
|
|
51
|
+
action rows to wrap in narrow panels. Keep secondary actions visually quiet
|
|
52
|
+
with `ui-button--ghost`; posting is normally the primary action. The quote
|
|
53
|
+
should remain visible when its anchor disappears, with a clear status and a
|
|
54
|
+
host-owned way to choose a new target. Anchor status and thread resolution
|
|
55
|
+
answer different questions and should be labelled separately.
|
|
56
|
+
|
|
57
|
+
`ui-discussion__list` and `ui-discussion__item` style a host-owned thread index.
|
|
58
|
+
Keep the list bounded and offer more results explicitly. If a canvas uses pins,
|
|
59
|
+
provide the same discussions in a keyboard-accessible list. Pins, positions,
|
|
60
|
+
and annotation geometry are outside this CSS leaf.
|
|
61
|
+
|
|
62
|
+
The [discussion specimen](https://ponchia.github.io/bronto-ui/demo/discussion.html) includes a narrow-container
|
|
63
|
+
example and a local reply/resolve demonstration. Its state lasts only until
|
|
64
|
+
the page reloads.
|
package/docs/figure.md
CHANGED
|
@@ -61,7 +61,7 @@ when the same stage appears in a dashboard, doc page, or generated artifact.
|
|
|
61
61
|
| --- | --- | --- |
|
|
62
62
|
| `--figure-max-inline` | `.ui-figure__stage` | Maximum stage width, default `42rem`. |
|
|
63
63
|
| `--figure-min-block` | `.ui-figure__stage` | Reserved stage height for late-rendered media. |
|
|
64
|
-
| `--figure-key-width` | `.ui-figure__body--key-right` | Right key column width before
|
|
64
|
+
| `--figure-key-width` | `.ui-figure__body--key-right` | Right key column width before the figure container stacks. |
|
|
65
65
|
|
|
66
66
|
## Boundary
|
|
67
67
|
|
|
@@ -76,3 +76,12 @@ when the same stage appears in a dashboard, doc page, or generated artifact.
|
|
|
76
76
|
|
|
77
77
|
- [Usage](usage.md#static-reports) shows report figure composition.
|
|
78
78
|
- [Reference](reference.md) lists the generated figure and report classes.
|
|
79
|
+
|
|
80
|
+
## Narrow containers
|
|
81
|
+
|
|
82
|
+
The figure establishes the named `bronto-figure` inline-size container. Its
|
|
83
|
+
right-hand key stacks below 44rem of figure width, even in a wide browser.
|
|
84
|
+
Print disables size containment and uses document flow. Keep annotation text
|
|
85
|
+
and strokes within the authored `viewBox`; container layout does not reposition
|
|
86
|
+
chart geometry. Verify a 280px parent with long legend names and a fallback
|
|
87
|
+
table, not just a narrow viewport.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# Upgrade from 0.10 to 0.11
|
|
2
|
+
|
|
3
|
+
0.11 completes the readable composition direction. The structured visual
|
|
4
|
+
changes are in [`MIGRATIONS.json`](../../MIGRATIONS.json). JavaScript exports,
|
|
5
|
+
classes, and tokens remain available. If you are coming from 0.9, apply the
|
|
6
|
+
[0.10 migration](0.9-to-0.10.md) first, including the retired adapters/modal.
|
|
7
|
+
|
|
8
|
+
## Review reusable layouts
|
|
9
|
+
|
|
10
|
+
Figures use their own inline-size container to stack a right-hand key below
|
|
11
|
+
44rem. Decision grids and action lists stack their rows below 32rem of their
|
|
12
|
+
own width, including inside an otherwise wide report. Keep the documented
|
|
13
|
+
`ui-report__decision-grid` and `ui-report__actions` wrappers. Two-up comparisons
|
|
14
|
+
need no wrapper: they keep at most two columns, with a 16rem reading floor.
|
|
15
|
+
|
|
16
|
+
Test a 280px and 320px parent inside a 1440px browser. Check that charts have
|
|
17
|
+
useful drawing width, text columns remain readable, long labels wrap and all
|
|
18
|
+
sources are reachable. Zero page overflow alone does not prove those things.
|
|
19
|
+
Keep authored SVG labels and annotations inside the drawing's `viewBox`, or
|
|
20
|
+
provide a narrow fallback with the same information. Bronto does not own chart
|
|
21
|
+
geometry. Named size containment is disabled in print; review your PDF too.
|
|
22
|
+
|
|
23
|
+
## Review typography overrides by role
|
|
24
|
+
|
|
25
|
+
Figure captions, legends, generated labels and command groups use sans and
|
|
26
|
+
sentence case. Technical log bodies and identifiers keep mono. Inline citation
|
|
27
|
+
markers have a 12px floor at a default 16px root. Do not globally replace `Doto`:
|
|
28
|
+
keep intentional hero/display and readout roles.
|
|
29
|
+
|
|
30
|
+
1. Find explicit `font-family: var(--display)` and `var(--dot-font)` declarations
|
|
31
|
+
in your loaded consumer styles, plus old root-size and control-height rules.
|
|
32
|
+
2. Classify each use: display identity, numeric readout, heading, instruction,
|
|
33
|
+
control label or metadata. Check grouped selectors individually.
|
|
34
|
+
3. Remove overrides that recreate old generic styles. Use `var(--sans)` for
|
|
35
|
+
local explanatory headings and labels; keep intentional display roles.
|
|
36
|
+
4. Inspect complete tasks, not just the homepage. Include setup, result,
|
|
37
|
+
filtering, error/retry, source details and an empty state where applicable.
|
|
38
|
+
5. Compare long names and translated text at narrow, laptop, and desktop widths,
|
|
39
|
+
in both themes, with keyboard and touch input.
|
|
40
|
+
|
|
41
|
+
Consumer CSS outside a layer takes precedence over the package's `bronto` layer.
|
|
42
|
+
Updating the package alone cannot change those explicit overrides. A prepared
|
|
43
|
+
patch from an older application revision must be reintegrated and checked
|
|
44
|
+
against current source before it can count as migration evidence.
|
|
45
|
+
|
|
46
|
+
## Verify the package and consumer together
|
|
47
|
+
|
|
48
|
+
Install the packed candidate into an isolated consumer checkout before changing
|
|
49
|
+
production pins. Record the exact package version, consumer revision and screens
|
|
50
|
+
checked. Update the dependency and registry lock file together after publication;
|
|
51
|
+
do not commit a task-local tarball path into a production lock file.
|
|
52
|
+
|
|
53
|
+
Use the [composition guide](../compositions.md) for the service's local state
|
|
54
|
+
scenarios, container boundaries and report reading/print checks. Existing package
|
|
55
|
+
checks remain necessary; real consumer tasks provide additional evidence.
|
|
56
|
+
|
|
57
|
+
## Optional discussion UI
|
|
58
|
+
|
|
59
|
+
Import `@ponchia/ui/css/discussion.css` for thread lists, quotations, messages,
|
|
60
|
+
and composers. The new `ui-discussion` vocabulary is additive. It carries no
|
|
61
|
+
posting behavior, storage, or editor dependency; see [Discussions](../discussion.md).
|
package/docs/package-contract.md
CHANGED
|
@@ -222,6 +222,10 @@ semantic versioning contract for the surfaces listed here.
|
|
|
222
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
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
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. |
|
|
225
229
|
|
|
226
230
|
## Shipped Files Allowlist
|
|
227
231
|
|
|
@@ -264,6 +268,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
|
|
|
264
268
|
| `docs/vega.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
265
269
|
| `docs/figure.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
266
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. |
|
|
267
272
|
| `docs/legends.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
268
273
|
| `docs/marks.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
269
274
|
| `docs/connectors.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
@@ -304,6 +309,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
|
|
|
304
309
|
| `docs/adr/0005-productive-tools-and-editorial-reports.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
305
310
|
| `docs/migrations/0.9-to-0.10.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
|
|
306
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. |
|
|
307
313
|
|
|
308
314
|
## Artifact Provenance
|
|
309
315
|
|
|
@@ -316,7 +322,7 @@ result. The listed gates are part of `npm run check`.
|
|
|
316
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. |
|
|
317
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. |
|
|
318
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. |
|
|
319
|
-
| 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. |
|
|
320
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. |
|
|
321
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. |
|
|
322
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`,
|
|
@@ -487,6 +487,23 @@ each one matches a real selector in the stylesheet.
|
|
|
487
487
|
| `cls.diffRowRemove` | `ui-diff__row--remove` | modifier |
|
|
488
488
|
| `cls.diffSplit` | `ui-diff--split` | modifier |
|
|
489
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
|
+
|
|
490
507
|
### `.ui-display`
|
|
491
508
|
|
|
492
509
|
| Registry key | Class | Kind |
|
package/docs/reporting.md
CHANGED
|
@@ -60,18 +60,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
|
|
|
60
60
|
changes ship in the minor (see [stability.md](./stability.md)):
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
64
|
-
<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" />
|
|
65
65
|
```
|
|
66
66
|
|
|
67
67
|
Leaf-by-leaf CDN imports use the same `dist/css/` paths:
|
|
68
68
|
|
|
69
69
|
```html
|
|
70
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
71
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
72
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
73
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.
|
|
74
|
-
<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" />
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
|
|
@@ -885,7 +885,7 @@ or validation runtime.
|
|
|
885
885
|
|
|
886
886
|
```json
|
|
887
887
|
{
|
|
888
|
-
"$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",
|
|
889
889
|
"schemaVersion": "bronto-report-claims.v1",
|
|
890
890
|
"report": { "title": "Decision readiness", "type": "decision" },
|
|
891
891
|
"claims": [
|
package/docs/stability.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
|
|
@@ -100,6 +100,7 @@ current public-surface matrix and the release policy above still applies.
|
|
|
100
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. |
|
|
101
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. |
|
|
102
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. |
|
|
103
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. |
|
|
104
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. |
|
|
105
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. |
|
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
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ponchia/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "CSS-first identity and UI layer for services, tools, sites, and reports
|
|
5
|
+
"description": "CSS-first identity and UI layer for services, tools, sites, and reports \u2014 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": [
|
|
7
7
|
"css",
|
|
8
8
|
"ui",
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
"docs/vega.md",
|
|
79
79
|
"docs/figure.md",
|
|
80
80
|
"docs/annotations.md",
|
|
81
|
+
"docs/discussion.md",
|
|
81
82
|
"docs/legends.md",
|
|
82
83
|
"docs/marks.md",
|
|
83
84
|
"docs/connectors.md",
|
|
@@ -117,7 +118,8 @@
|
|
|
117
118
|
"docs/compositions.md",
|
|
118
119
|
"docs/adr/0005-productive-tools-and-editorial-reports.md",
|
|
119
120
|
"docs/migrations/0.9-to-0.10.md",
|
|
120
|
-
"docs/adr/0006-trusted-publishing.md"
|
|
121
|
+
"docs/adr/0006-trusted-publishing.md",
|
|
122
|
+
"docs/migrations/0.10-to-0.11.md"
|
|
121
123
|
],
|
|
122
124
|
"style": "./dist/bronto.css",
|
|
123
125
|
"scripts": {
|
|
@@ -526,7 +528,11 @@
|
|
|
526
528
|
"./docs/compositions.md": "./docs/compositions.md",
|
|
527
529
|
"./docs/adr/0005-productive-tools-and-editorial-reports.md": "./docs/adr/0005-productive-tools-and-editorial-reports.md",
|
|
528
530
|
"./docs/migrations/0.9-to-0.10.md": "./docs/migrations/0.9-to-0.10.md",
|
|
529
|
-
"./docs/adr/0006-trusted-publishing.md": "./docs/adr/0006-trusted-publishing.md"
|
|
531
|
+
"./docs/adr/0006-trusted-publishing.md": "./docs/adr/0006-trusted-publishing.md",
|
|
532
|
+
"./docs/migrations/0.10-to-0.11.md": "./docs/migrations/0.10-to-0.11.md",
|
|
533
|
+
"./css/discussion.css": "./dist/css/discussion.css",
|
|
534
|
+
"./css/unlayered/discussion.css": "./css/discussion.css",
|
|
535
|
+
"./docs/discussion.md": "./docs/discussion.md"
|
|
530
536
|
},
|
|
531
537
|
"overrides": {
|
|
532
538
|
"adm-zip": "0.6.0",
|