@ponchia/ui 0.6.5 → 0.6.7

package/css/clamp.css

@@ -0,0 +1,92 @@
+/* ==========================================================================
+   clamp — opt-in bounded excerpt + reveal.
+
+   For source excerpts, claim basis, caveats, and evidence text that should
+   scan as a bounded block but remain reachable. Bronto owns the visual clamp
+   and optional CSS-only reveal affordance; the host owns content, IDs, and
+   whether truncation is appropriate. Not imported by core.css.
+   ========================================================================== */
+
+.ui-clamp {
+  --clamp-lines: 4;
+
+  display: grid;
+  gap: var(--space-2xs);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.ui-clamp__body {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--clamp-lines);
+  display: -webkit-box;
+  line-clamp: var(--clamp-lines);
+  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
+  overflow: hidden;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__body {
+  -webkit-line-clamp: unset;
+  display: block;
+  line-clamp: none;
+  mask-image: none;
+}
+
+.ui-clamp__toggle {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.ui-clamp__control {
+  color: var(--accent-text);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inline-size: max-content;
+  letter-spacing: var(--tracking-wide);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  text-underline-offset: 0.2rem;
+  text-transform: uppercase;
+}
+
+.ui-clamp__toggle:focus-visible + .ui-clamp__body + .ui-clamp__control {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-clamp__less {
+  display: none;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__more {
+  display: none;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__less {
+  display: inline;
+}
+
+@media (hover: hover) {
+  .ui-clamp__control:hover {
+    text-decoration-color: currentColor;
+  }
+}
+
+@media print {
+  .ui-clamp__body {
+    -webkit-line-clamp: unset;
+    display: block;
+    line-clamp: none;
+    mask-image: none;
+  }
+
+  .ui-clamp__toggle,
+  .ui-clamp__control {
+    display: none;
+  }
+}

package/css/figure.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   figure — opt-in analytical/report figure stage.
+
+   A frame for chart/diagram/media evidence: caption, stable stage, optional
+   overlay, key, and fallback data. Bronto owns only the layout grammar. The
+   host still owns data, scales, chart rendering, annotation content, and the
+   fallback table. Not imported by core.css.
+   ========================================================================== */
+
+.ui-figure {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.ui-figure > *,
+.ui-figure__body > *,
+.ui-figure__stage > * {
+  min-inline-size: 0;
+}
+
+.ui-figure__caption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.ui-figure__body {
+  align-items: start;
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.ui-figure__body--key-right {
+  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 10rem), var(--figure-key-width, 14rem));
+}
+
+.ui-figure__stage {
+  --figure-max-inline: 42rem;
+  --figure-min-block: 0px;
+
+  display: grid;
+  inline-size: min(100%, var(--figure-max-inline));
+  margin-inline: auto;
+  min-block-size: var(--figure-min-block);
+  place-items: center;
+  position: relative;
+}
+
+.ui-figure__media {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.ui-figure__stage > :is(canvas, img, picture, svg):not(.ui-figure__overlay) {
+  display: block;
+  max-inline-size: 100%;
+}
+
+.ui-figure__overlay {
+  block-size: 100%;
+  inline-size: 100%;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ui-figure__key,
+.ui-figure__data {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.ui-figure__data {
+  margin-block-start: var(--space-xs);
+}
+
+@media (max-width: 44rem) {
+  .ui-figure__body--key-right {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media print {
+  .ui-figure {
+    break-inside: avoid;
+  }
+
+  .ui-figure__body {
+    display: block;
+  }
+
+  .ui-figure__body > * + * {
+    margin-block-start: var(--space-sm);
+  }
+}

package/css/highlights.css

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   highlights — opt-in CSS Custom Highlight API paint.
+
+   Named text ranges for cited evidence, search hits, and current match. The
+   HOST creates Range objects and registers Highlight instances in CSS.highlights
+   under the documented names. Bronto only paints the registered ranges. Not
+   imported by core.css.
+   ========================================================================== */
+
+.ui-highlights {
+  --highlight-evidence: var(--accent-soft);
+  --highlight-search: var(--warning-soft);
+  --highlight-current: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.ui-highlights::highlight(bronto-evidence) {
+  background-color: var(--highlight-evidence);
+  color: inherit;
+  text-decoration-color: var(--accent);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.18em;
+}
+
+.ui-highlights::highlight(bronto-search) {
+  background-color: var(--highlight-search);
+  color: inherit;
+}
+
+.ui-highlights::highlight(bronto-current) {
+  background-color: var(--highlight-current);
+  color: var(--text);
+}
+
+@media (forced-colors: active) {
+  .ui-highlights::highlight(bronto-evidence),
+  .ui-highlights::highlight(bronto-search),
+  .ui-highlights::highlight(bronto-current) {
+    background-color: Highlight;
+    color: HighlightText;
+    text-decoration-color: HighlightText;
+  }
+}
+
+@media print {
+  .ui-highlights {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/interval.css

@@ -0,0 +1,90 @@
+/* ==========================================================================
+   interval — opt-in low/high uncertainty span.
+
+   A compact report primitive for "the value is somewhere in this range" —
+   confidence intervals, estimates, budget windows, and measured uncertainty.
+   Boundary: the HOST normalises `--lo`, `--hi`, and optional `--v` to 0..1 and
+   writes the accessible label. Bronto only paints geometry. Not imported by
+   core.css.
+   ========================================================================== */
+
+.ui-interval {
+  --lo: 0;
+  --hi: 1;
+
+  display: grid;
+  gap: 0.35rem;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-interval__track {
+  background: var(--surface-4);
+  block-size: 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  min-inline-size: 8rem;
+  position: relative;
+}
+
+.ui-interval__range {
+  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
+  border-radius: var(--radius-pill);
+  inline-size: max(2px, calc((var(--hi) - var(--lo)) * 100%));
+  inset-block: 18%;
+  inset-inline-start: calc(var(--lo) * 100%);
+  position: absolute;
+}
+
+.ui-interval__point {
+  background: var(--text);
+  border: 2px solid var(--panel);
+  border-radius: 50%;
+  block-size: 0.72rem;
+  box-shadow: 0 0 0 1px var(--line-strong);
+  inline-size: 0.72rem;
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--v, var(--lo)) * 100%);
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.ui-interval__label,
+.ui-interval__bounds {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+}
+
+.ui-interval__label {
+  color: var(--text-soft);
+}
+
+.ui-interval__bounds {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+@media (forced-colors: active) {
+  .ui-interval__track,
+  .ui-interval__range,
+  .ui-interval__point {
+    border-color: CanvasText;
+  }
+
+  .ui-interval__range,
+  .ui-interval__point {
+    background: CanvasText;
+  }
+}
+
+@media print {
+  .ui-interval__range,
+  .ui-interval__point {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/primitives.css

@@ -569,9 +569,8 @@
 }
 
 .ui-chip--accent {
-  /* accent-strong, not accent: chip text is small uppercase mono and must
-     clear WCAG AA 4.5:1 — same rule as .ui-eyebrow above. */
-  color: var(--accent-text);
+  /* Tone rides the border + hover tint; text stays neutral-readable. */
+  color: var(--text-soft);
   border-color: var(--accent);
 }
 

package/css/report-kit.css

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   report-kit — convenience roll-up for static/PDF report consumers.
+
+   Import the default bundle first, then this opt-in kit:
+
+     @import '@ponchia/ui';
+     @import '@ponchia/ui/css/report-kit.css';
+
+   This file deliberately excludes app workbench/command surfaces. Reports can
+   still import narrower leaves one by one; this roll-up is the no-build,
+   copy-paste path for complete static reports.
+   ========================================================================== */
+
+@import url('./report.css') layer(bronto);
+@import url('./dataviz.css') layer(bronto);
+@import url('./figure.css') layer(bronto);
+@import url('./annotations.css') layer(bronto);
+@import url('./legend.css') layer(bronto);
+@import url('./marks.css') layer(bronto);
+@import url('./connectors.css') layer(bronto);
+@import url('./spotlight.css') layer(bronto);
+@import url('./crosshair.css') layer(bronto);
+@import url('./selection.css') layer(bronto);
+@import url('./sources.css') layer(bronto);
+@import url('./generated.css') layer(bronto);
+@import url('./state.css') layer(bronto);
+@import url('./interval.css') layer(bronto);
+@import url('./clamp.css') layer(bronto);
+@import url('./highlights.css') layer(bronto);
+@import url('./diff.css') layer(bronto);
+@import url('./code.css') layer(bronto);
+@import url('./spark.css') layer(bronto);
+@import url('./bullet.css') layer(bronto);
+@import url('./sidenote.css') layer(bronto);
+@import url('./textref.css') layer(bronto);
+@import url('./term.css') layer(bronto);
+@import url('./toc.css') layer(bronto);
+@import url('./tree.css') layer(bronto);

package/css/report.css

@@ -274,7 +274,7 @@
 
 .ui-report__finding-title {
   color: var(--text);
-  font-size: var(--text-md);
+  font-size: var(--text-base);
   font-weight: 650;
   line-height: 1.25;
 }
@@ -480,7 +480,7 @@
 
 .ui-evidence-item__value {
   color: var(--text);
-  font-size: var(--text-md);
+  font-size: var(--text-base);
   font-weight: 650;
 }
 
@@ -510,13 +510,20 @@
   padding-block: var(--space-sm);
 }
 
+.ui-report__action > :not(.ui-report__action-status) {
+  grid-column: 1;
+}
+
 .ui-report__action-status {
-  align-self: start;
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
+  grid-column: 2;
+  grid-row: 1;
   letter-spacing: var(--tracking-wide);
+  place-self: start end;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .ui-report__action-title,
@@ -556,6 +563,12 @@
   .ui-report__action {
     grid-template-columns: 1fr;
   }
+
+  .ui-report__action-status {
+    grid-column: 1;
+    grid-row: auto;
+    place-self: auto start;
+  }
 }
 
 .ui-report__sources,
@@ -693,6 +706,36 @@
     min-block-size: auto;
   }
 
+  /* Chromium-class print engines overprint grid rows across page breaks
+     (fragmented grid tracks restart at the page top, on top of the running
+     content). Demote ONLY the vertical document-flow wrappers to block flow
+     and emulate their gap with margins; multi-column grids (.ui-compare,
+     .ui-meter__row, .ui-report__decision-item, .ui-evidence-grid, …) keep
+     grid — their content is break-inside-avoided as a unit instead. */
+  .ui-report,
+  .ui-report__section,
+  .ui-report__figure,
+  .ui-report__actions,
+  .ui-evidence-ledger {
+    display: block;
+  }
+
+  .ui-report > * + * {
+    margin-block-start: var(--report-gap);
+  }
+
+  .ui-report__section > * + * {
+    margin-block-start: var(--space-md);
+  }
+
+  .ui-report__figure > * + *,
+  .ui-evidence-ledger > * + * {
+    margin-block-start: var(--space-sm);
+  }
+
+  /* Stat tiles and table rows are guarded at the item level (the tile / the
+     row), not the container — a long statgrid or table may legitimately span
+     pages, but a sliced tile or row is unreadable. */
   .ui-report__cover,
   .ui-report__head,
   .ui-report__decision,
@@ -700,9 +743,13 @@
   .ui-report__finding,
   .ui-report__evidence,
   .ui-report__figure,
+  .ui-report__toc,
   .ui-claim,
   .ui-evidence-item,
-  .ui-report__action {
+  .ui-report__action,
+  .ui-stat,
+  .ui-statgrid > *,
+  tr {
     break-inside: avoid;
   }
 

package/css/sidenote.css

@@ -14,11 +14,21 @@
    same breakpoint. Place each note in the DOM right after its `.ui-sidenote__ref`.
    ========================================================================== */
 
-.ui-sidenote,
-.ui-marginnote {
+/* The two knobs are ROOT-scoped on purpose: the documented host contract has
+   the CONTAINER reserve the gutter with
+   `padding-inline-end: calc(var(--sidenote-width) + var(--sidenote-gap))`,
+   and custom properties do not flow upward — declared only on the notes,
+   that calc is invalid on any ancestor and silently resolves to NO gutter
+   (the floated notes then spill past the page edge). Root scope makes the
+   documented calc work anywhere, and overriding either var on the container
+   re-sizes the notes and the gutter together. */
+:root {
   --sidenote-width: 12rem;
   --sidenote-gap: 2rem;
+}
 
+.ui-sidenote,
+.ui-marginnote {
   border-inline-start: 2px solid var(--line);
   color: var(--text-dim);
   display: block;

package/css/site.css

@@ -318,10 +318,11 @@
   padding: 0.28rem 0.6rem;
 }
 
+/* Tone rides the tint + border; text stays neutral-readable. */
 .ui-tag--accent {
   background: var(--accent-soft);
   border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
-  color: var(--accent-text);
+  color: var(--text-soft);
 }
 
 /* --- Meta row — date · author · read-time, dot-separated --- */

package/css/sources.css

@@ -236,4 +236,9 @@
   .ui-citation[href]::after {
     content: none !important;
   }
+
+  .ui-source-card,
+  .ui-source-list__item {
+    break-inside: avoid;
+  }
 }

package/css/state.css

@@ -4,7 +4,8 @@
    Serious apps spend a lot of time in states like saving, saved, queued,
    offline, stale, conflicted, locked, and reviewed — usually improvised per
    product, so even good apps feel inconsistent. This is the canonical set:
-   a labelled state object with a rationed tone, plus a page/document sync bar.
+   a labelled state object with a rationed tone, a page/document sync bar, and
+   a persistent background-job row.
 
    The state is carried by a tone dot AND an author-written label, never colour
    alone (WCAG 1.4.1) — the label is the canonical wording (see docs/state.md).
@@ -112,10 +113,128 @@
   padding-block: var(--space-xs);
 }
 
+/* Background job — persistent progress/status for asynchronous work. The host
+   owns polling, retries, cancellation, and partial-failure semantics; Bronto
+   paints the durable row so long-running work is not hidden in a toast. */
+.ui-job {
+  --job-progress: 0%;
+  --job-tone: var(--text-dim);
+
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--job-tone);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-job__head {
+  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-md);
+  justify-content: space-between;
+}
+
+.ui-job__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-job__meta {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-job__body {
+  color: var(--text-soft);
+  margin: 0;
+}
+
+.ui-job__progress {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+}
+
+.ui-job__bar {
+  background: var(--job-tone);
+  block-size: 100%;
+  display: block;
+  inline-size: clamp(0%, var(--job-progress), 100%);
+  min-inline-size: 1px;
+  print-color-adjust: exact;
+  transition: inline-size var(--duration-base) var(--ease-standard);
+}
+
+.ui-job__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
+.ui-job--compact {
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+}
+
+.ui-job--queued {
+  --job-tone: var(--text-dim);
+}
+
+.ui-job--running {
+  --job-tone: var(--accent);
+}
+
+.ui-job--blocked {
+  --job-tone: var(--warning);
+}
+
+.ui-job--failed {
+  --job-tone: var(--danger);
+}
+
+.ui-job--complete {
+  --job-tone: var(--success);
+}
+
+.ui-job--running .ui-job__bar {
+  background-image: linear-gradient(
+    90deg,
+    var(--job-tone),
+    color-mix(in srgb, var(--job-tone) 62%, var(--panel))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-job__bar {
+    transition: none;
+  }
+}
+
 /* Forced colours: the tone dot collapses to a system colour, so the
    author-written label remains the state channel (it already must be). */
 @media (forced-colors: active) {
   .ui-state::before {
     background: CanvasText;
   }
+
+  .ui-job {
+    border-inline-start-color: CanvasText;
+  }
+
+  .ui-job__bar {
+    background: CanvasText;
+  }
 }

package/css/table.css

@@ -85,6 +85,10 @@
   overflow-wrap: anywhere;
 }
 
+.ui-table--break-anywhere {
+  table-layout: fixed;
+}
+
 /* Numeric / right-aligned cells. */
 .ui-table .is-num,
 .ui-table th.is-num {