@ponchia/ui 0.4.1 → 0.5.0

package/css/generated.css

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   generated — opt-in trust surfaces for AI / system-generated content.
+
+   AI interfaces are becoming common, but most UI systems ship chat bubbles or
+   nothing. Bronto is not a chat framework — it owns the *trust* surfaces around
+   generated content: a marked region, an origin label, and quiet collapsible
+   reasoning / tool-call logs. Pairs with the source/citation layer
+   (css/sources.css). The host owns model metadata, reasoning-visibility policy,
+   tool execution, traces, redaction, and safety. Not imported by core.css.
+   ========================================================================== */
+
+/* --- Generated region — a marked wrapper for machine-authored content. --- */
+.ui-generated {
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--accent);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: 0.85rem 1rem;
+  print-color-adjust: exact;
+}
+
+.ui-generated__label {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- Origin label — "AI assisted" / "model output" / "human reviewed". --- */
+.ui-origin-label {
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.35rem;
+  letter-spacing: var(--tracking-wide);
+  padding: 0.08rem 0.55rem;
+  text-transform: uppercase;
+}
+
+.ui-origin-label--ai {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+/* --- Reasoning — a quiet, collapsible "how this was produced" block. --- */
+.ui-reasoning {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+}
+
+.ui-reasoning > summary {
+  color: var(--text-soft);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-reasoning__body {
+  margin-block-start: var(--space-xs);
+}
+
+/* --- Tool log — a quiet, document-grade record of tool invocations. --- */
+.ui-tool-log {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.ui-tool-call {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
+.ui-tool-call > summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+}
+
+.ui-tool-call__name {
+  color: var(--text);
+}
+
+.ui-tool-call__status {
+  color: var(--text-dim);
+  margin-inline-start: auto;
+}
+
+.ui-tool-call__body {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-soft);
+  margin: 0;
+  overflow-x: auto;
+  padding: 0.5rem 0.6rem;
+  white-space: pre-wrap;
+}
+
+@media (forced-colors: active) {
+  .ui-generated {
+    border-inline-start-color: CanvasText;
+  }
+}

package/css/legend.css

@@ -0,0 +1,268 @@
+/* ==========================================================================
+   legend — opt-in data keys for charts, reports, and analytical figures.
+
+   A standalone, portable successor to the report kit's inline chart legend:
+   `.ui-legend` reads the Tier-4 `--chart-*` tokens and pairs with any chart
+   (Bronto's own `.ui-chart` bars, an SVG/canvas figure, or an external chart
+   engine). Not imported by core.css — import it beside css/dataviz.css.
+
+   Bronto paints and positions; it owns no scales, data mapping, or series
+   state. Colour is never the sole channel: a swatch mirrors its chart mark
+   (its colour, plus a `--chart-pattern-*` where the mark uses one) and is
+   always read out by its text label (WCAG 1.4.1). An interactive,
+   series-toggling legend is an optional behavior; the host owns what a
+   toggle hides and announces.
+   ========================================================================== */
+
+.ui-legend {
+  color: var(--text-soft);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: var(--space-2xs) var(--space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-legend--vertical {
+  flex-direction: column;
+}
+
+.ui-legend--compact {
+  font-size: var(--text-2xs);
+  gap: var(--space-2xs) var(--space-sm);
+}
+
+.ui-legend__title {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-legend__item {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  gap: 0.45rem;
+}
+
+.ui-legend__label {
+  color: inherit;
+}
+
+.ui-legend__value {
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  margin-inline-start: auto;
+}
+
+.ui-legend__caption {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+/* Swatch — same token contract as the chart fill: set `--chart-color` (and,
+   where the mark is patterned, `--chart-pattern`) inline, or use a `--N` index
+   helper for the categorical palette. */
+.ui-legend__swatch {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, none);
+  background-size: var(--chart-pattern-size, 8px);
+  block-size: 0.8rem;
+  border: 1px solid var(--line-strong);
+  flex: 0 0 auto;
+  inline-size: 0.8rem;
+}
+
+.ui-legend__swatch--circle {
+  border-radius: 50%;
+}
+
+.ui-legend__swatch--line {
+  block-size: 0.2rem;
+  border: 0;
+  inline-size: 1.1rem;
+}
+
+/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. */
+.ui-legend__symbol {
+  block-size: 0.95rem;
+  color: var(--chart-color, var(--accent));
+  flex: 0 0 auto;
+  inline-size: 0.95rem;
+}
+
+/* Categorical index helpers: exactly one per palette series (gated against
+   tokens/charts.js by check-legend). They set only the colour, so a swatch
+   stays a faithful key — add `--chart-pattern` (inline, or from dataviz.css)
+   only where the chart mark itself is patterned. */
+.ui-legend__swatch--1 {
+  --chart-color: var(--chart-1);
+}
+
+.ui-legend__swatch--2 {
+  --chart-color: var(--chart-2);
+}
+
+.ui-legend__swatch--3 {
+  --chart-color: var(--chart-3);
+}
+
+.ui-legend__swatch--4 {
+  --chart-color: var(--chart-4);
+}
+
+.ui-legend__swatch--5 {
+  --chart-color: var(--chart-5);
+}
+
+.ui-legend__swatch--6 {
+  --chart-color: var(--chart-6);
+}
+
+.ui-legend__swatch--7 {
+  --chart-color: var(--chart-7);
+}
+
+.ui-legend__swatch--8 {
+  --chart-color: var(--chart-8);
+}
+
+/* Continuous colour ramp. Author supplies the min/mid/max tick *text*; the
+   track interpolates the sequential ramp in OKLCH (a single perceptual hue,
+   so no banding and no muddy midpoint). `--diverging` swaps in the 7-stop
+   diverging ramp around its neutral centre. */
+.ui-legend--gradient {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.ui-legend__track {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--chart-seq-1),
+    var(--chart-seq-2),
+    var(--chart-seq-3),
+    var(--chart-seq-4),
+    var(--chart-seq-5),
+    var(--chart-seq-6)
+  );
+  block-size: 0.7rem;
+  border: 1px solid var(--line);
+}
+
+.ui-legend--diverging .ui-legend__track {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--chart-div-1),
+    var(--chart-div-2),
+    var(--chart-div-3),
+    var(--chart-div-4),
+    var(--chart-div-5),
+    var(--chart-div-6),
+    var(--chart-div-7)
+  );
+}
+
+.ui-legend__ticks {
+  color: var(--text-dim);
+  display: flex;
+  font-size: var(--text-2xs);
+  justify-content: space-between;
+}
+
+.ui-legend__tick {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Threshold / binned key — a `swatch | range-label` grid. Author the swatch
+   and label as direct children (no `__item` wrapper) so the columns align. */
+.ui-legend--threshold {
+  align-items: center;
+  display: grid;
+  gap: 0.35rem var(--space-sm);
+  grid-template-columns: auto 1fr;
+}
+
+/* With-values — align swatch | label | value columns across every row. */
+.ui-legend--with-values {
+  display: grid;
+  gap: 0.35rem var(--space-md);
+  grid-template-columns: auto 1fr auto;
+}
+
+.ui-legend--with-values .ui-legend__item {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.ui-legend--with-values .ui-legend__value {
+  margin-inline-start: 0;
+}
+
+/* Interactive entries are real <button aria-pressed> controls. Bronto styles
+   the control + the inactive state; behaviors/legend.js (optional) flips
+   aria-pressed and emits an event. The host hides the series and announces it. */
+.ui-legend--interactive .ui-legend__item {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding-block: 0.15rem;
+  padding-inline: 0.3rem;
+  text-align: start;
+}
+
+.ui-legend--interactive .ui-legend__item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.ui-legend__item.is-inactive,
+.ui-legend__item[aria-pressed='false'] {
+  opacity: 0.45;
+}
+
+.ui-legend__item.is-inactive .ui-legend__label,
+.ui-legend__item[aria-pressed='false'] .ui-legend__label {
+  text-decoration: line-through;
+}
+
+/* Forced colours: keep the real swatch hue (it mirrors the chart mark) behind
+   a system-coloured border so it survives, and drop the opacity dim (it does
+   not read) — the line-through still marks an inactive series. */
+@media (forced-colors: active) {
+  .ui-legend__swatch {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+  }
+
+  /* Keep the ramp's hues instead of collapsing to one system colour (the tick
+     labels still carry the scale either way). */
+  .ui-legend__track {
+    forced-color-adjust: none;
+  }
+
+  .ui-legend__item.is-inactive,
+  .ui-legend__item[aria-pressed='false'] {
+    opacity: 1;
+  }
+}
+
+/* Print: meaning-carrying colour must survive the "economy" default. */
+@media print {
+  .ui-legend__swatch,
+  .ui-legend__track {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/marks.css

@@ -0,0 +1,144 @@
+/* ==========================================================================
+   marks — opt-in evidence/emphasis marks for running text.
+
+   The prose counterpart to the SVG annotations layer: annotations call out a
+   figure, marks call out a sentence. Sober, report-grade highlights for docs,
+   audits, and generated (LLM) reports — not a hand-drawn Rough-Notation look.
+   Not imported by core.css.
+
+   `.ui-mark` is an inline highlight (put it on a `<mark>`); `.ui-bracket-note`
+   brackets a whole passage. Monochrome by default — the rationed accent is
+   opt-in via `--accent`; status tones are only for status-bearing emphasis.
+   ========================================================================== */
+
+.ui-mark {
+  --mark-color: var(--line-strong);
+
+  background-image: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--mark-color) 30%, transparent),
+    color-mix(in srgb, var(--mark-color) 30%, transparent)
+  );
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.12em;
+  box-decoration-break: clone;
+  color: inherit;
+  padding-block: 0.05em;
+  padding-inline: 0.18em;
+}
+
+/* Tones set the mark colour. Default is neutral ink; `--accent` is the
+   rationed accent; status tones only for status-bearing emphasis. */
+.ui-mark--accent {
+  --mark-color: var(--accent);
+}
+
+.ui-mark--success {
+  --mark-color: var(--success);
+}
+
+.ui-mark--warning {
+  --mark-color: var(--warning);
+}
+
+.ui-mark--danger {
+  --mark-color: var(--danger);
+}
+
+.ui-mark--info {
+  --mark-color: var(--info);
+}
+
+.ui-mark--muted {
+  --mark-color: var(--text-dim);
+}
+
+/* Styles change how the mark is drawn (no highlight fill). They wrap across
+   lines natively (text-decoration) or with the cloned box (border). */
+.ui-mark--underline {
+  background: none;
+  padding: 0;
+  text-decoration-color: var(--mark-color);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.12em;
+  text-underline-offset: 0.18em;
+}
+
+.ui-mark--box {
+  background: none;
+  border: 1px solid var(--mark-color);
+  border-radius: var(--radius-sm);
+}
+
+.ui-mark--strike {
+  background: none;
+  padding: 0;
+  text-decoration-color: var(--mark-color);
+  text-decoration-line: line-through;
+}
+
+/* Draw-on highlight sweep. Only the highlight fill animates, and only when
+   motion is welcome — reduced-motion keeps the resting full highlight. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-mark--draw {
+    animation: ui-mark-draw 0.6s var(--ease, ease) both;
+  }
+}
+
+@keyframes ui-mark-draw {
+  from {
+    background-size: 0% 100%;
+  }
+
+  to {
+    background-size: 100% 100%;
+  }
+}
+
+/* A passage bracket: a tick down the inline-start with an optional label.
+   The prose analogue of `ui-annotation--bracket`. */
+.ui-bracket-note {
+  --mark-color: var(--line-strong);
+
+  border-inline-start: 2px solid var(--mark-color);
+  display: block;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-bracket-note__label {
+  color: var(--mark-color);
+  display: block;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  margin-block-end: var(--space-2xs);
+  text-transform: uppercase;
+}
+
+.ui-bracket-note--accent {
+  --mark-color: var(--accent);
+}
+
+.ui-bracket-note--warning {
+  --mark-color: var(--warning);
+}
+
+.ui-bracket-note--danger {
+  --mark-color: var(--danger);
+}
+
+.ui-bracket-note--info {
+  --mark-color: var(--info);
+}
+
+/* Forced colours: only the highlight `background` is dropped, so add an
+   underline to the plain highlight mark to keep it visible. The styled marks
+   already carry a surviving channel — `--underline`/`--strike` use
+   text-decoration and `--box` a border — so they're excluded (otherwise the
+   underline would overwrite `--strike`'s line-through and lose its meaning). */
+@media (forced-colors: active) {
+  .ui-mark:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
+    text-decoration-line: underline;
+  }
+}

package/css/primitives.css

@@ -649,6 +649,24 @@
   padding: 0.18rem 0.4rem;
 }
 
+/* --- Shortcut hint — one or more .ui-kbd keys as a chord or sequence, with a
+   connective __sep ("+" for a chord, "then" for a sequence). The reusable
+   keyboard-hint primitive (menu items, buttons, tooltips, command lists). --- */
+
+.ui-shortcut {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.25rem;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ui-shortcut__sep {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
 /* --- Timeline — vertical event list on a hairline spine. Use an <ol>;
    each <li> is a __item with an optional __time label. aria-current marks
    the live/most-recent event (accent marker). --- */

package/css/report.css

@@ -224,34 +224,9 @@
   padding: var(--space-md);
 }
 
-.ui-chart__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ui-chart__legend > * {
-  align-items: center;
-  color: var(--text-soft);
-  display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-xs);
-  gap: 0.45rem;
-}
-
-.ui-chart__swatch {
-  background: var(--chart-color, var(--chart-1, var(--accent)));
-  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
-  background-size: var(--chart-pattern-size, 8px);
-  border: 1px solid var(--line-strong);
-  block-size: 0.8rem;
-  flex: 0 0 auto;
-  inline-size: 0.8rem;
-}
-
+/* The chart's data key lives in the standalone, portable `.ui-legend`
+   (css/legend.css), not here — import it beside this kit when a chart needs
+   a legend. The chart owns only its plot + bars + fallback below. */
 .ui-chart__plot {
   display: grid;
   gap: var(--space-xs);
@@ -264,6 +239,13 @@
   gap: 0.35rem;
 }
 
+/* An author `display` outranks the UA `[hidden]` rule, so re-assert it: a host
+   toggling a series (e.g. from a `bronto:legend:toggle` event) expects
+   `bar.hidden = true` to actually hide the bar. */
+.ui-chart__bar[hidden] {
+  display: none;
+}
+
 .ui-chart__label {
   align-items: center;
   color: var(--text-soft);
@@ -334,9 +316,8 @@
   /* Meaning-carrying chart fills must survive the print "economy" default
      (which drops backgrounds) without relying on a `.ui-print-exact`
      ancestor. The accent on `.ui-report__summary` is a border, so it already
-     prints. */
-  .ui-chart__fill,
-  .ui-chart__swatch {
+     prints. (Legend swatches print-protect themselves in css/legend.css.) */
+  .ui-chart__fill {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }

package/css/selection.css

@@ -0,0 +1,46 @@
+/* ==========================================================================
+   selection — opt-in, cross-cutting selection-emphasis vocabulary.
+
+   The carve-out from "brush/lasso": Bronto does NOT do region selection or
+   hit-testing (that needs the host's scales/geometry). It ships only the
+   *states* an item can be in once the host has decided — reusable on a chart
+   mark, a table row, a list item, a map region. The host adds/removes these
+   classes from its own brush/filter logic. Not imported by core.css.
+
+     in the selection → .ui-sel--on   ·   excluded → .ui-sel--off
+     would-be-selected (live brush) → .ui-sel--maybe
+   ========================================================================== */
+
+.ui-sel {
+  transition:
+    opacity 0.12s ease,
+    outline-color 0.12s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-sel {
+    transition: none;
+  }
+}
+
+.ui-sel--on {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.ui-sel--off {
+  /* opacity survives forced-colors, so an excluded item stays dimmer than the
+     selected/candidate items (which carry a solid/dashed outline). */
+  opacity: 0.35;
+}
+
+.ui-sel--maybe {
+  outline: 1px dashed var(--accent);
+  outline-offset: 1px;
+}
+
+@media (forced-colors: active) {
+  .ui-sel--on {
+    outline-color: Highlight;
+  }
+}