@ponchia/ui 0.4.0 → 0.5.0

package/css/report.css

@@ -0,0 +1,363 @@
+/* ==========================================================================
+   report — opt-in static/PDF-first report layer.
+
+   This leaf is deliberately not imported by core.css. It gives LLM-authored
+   and hand-authored reports a small document grammar without turning the
+   framework into a report renderer or chart engine.
+   ========================================================================== */
+
+.ui-report {
+  --report-gap: var(--space-lg);
+  --report-measure: 74ch;
+  --report-page-margin: 18mm;
+
+  color: var(--text-soft);
+  display: grid;
+  gap: var(--report-gap);
+  inline-size: min(100%, var(--report-width, 72rem));
+  margin-inline: auto;
+  padding: var(--report-padding-block, var(--space-2xl)) var(--space-md);
+}
+
+.ui-report--compact {
+  --report-gap: var(--space-md);
+  --report-padding-block: var(--space-xl);
+}
+
+.ui-report--numbered {
+  counter-reset: report-section;
+}
+
+.ui-report__cover {
+  align-content: end;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-md);
+  min-block-size: min(62vh, 34rem);
+  padding-block-end: var(--space-xl);
+}
+
+.ui-report__cover--compact {
+  min-block-size: auto;
+  padding-block: var(--space-xl) var(--space-lg);
+}
+
+.ui-report__header {
+  align-items: end;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block-end: var(--space-md);
+}
+
+.ui-report__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: calc(var(--text-xl) * 1.35);
+  letter-spacing: 0;
+  line-height: 1.05;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report__subtitle {
+  color: var(--text-dim);
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report__meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__meta > * {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-report__meta > :not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}
+
+.ui-report__toc {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-md);
+}
+
+.ui-report__toc ol,
+.ui-report__toc ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-report__toc a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  text-underline-offset: 0.2rem;
+}
+
+.ui-report__summary,
+.ui-report__finding,
+.ui-report__evidence {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-report__summary {
+  border-inline-start: 2px solid var(--accent);
+}
+
+.ui-report__finding {
+  border-inline-start: 2px solid var(--line-strong);
+}
+
+.ui-report__evidence {
+  background: var(--panel-soft);
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) {
+  padding: 0;
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap {
+  border: 0;
+  border-radius: var(--radius-md);
+}
+
+.ui-report__section {
+  display: grid;
+  gap: var(--space-md);
+  scroll-margin-block-start: 6rem;
+}
+
+.ui-report__section + .ui-report__section {
+  border-block-start: 1px solid var(--line);
+  padding-block-start: var(--space-xl);
+}
+
+.ui-report__section-head {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  letter-spacing: 0;
+  line-height: 1.1;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report--numbered .ui-report__section-head::before {
+  color: var(--accent-text);
+  content: counter(report-section, decimal-leading-zero) ' / ';
+  counter-increment: report-section;
+}
+
+.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before {
+  content: none;
+  counter-increment: none;
+}
+
+.ui-report__figure {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.ui-report__caption,
+.ui-chart__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-report__sources,
+.ui-report__appendix,
+.ui-report__footnotes {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-dim);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: var(--space-sm);
+  padding-block-start: var(--space-md);
+}
+
+.ui-chart {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+/* 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);
+}
+
+.ui-chart__bar {
+  --chart-value: 0%;
+
+  display: grid;
+  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);
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+.ui-chart__track {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  block-size: 0.8rem;
+  min-inline-size: 0;
+}
+
+.ui-chart__fill {
+  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);
+  block-size: 100%;
+  inline-size: clamp(0%, var(--chart-value), 100%);
+}
+
+.ui-chart__fallback {
+  margin-block-start: var(--space-sm);
+}
+
+.ui-print-only {
+  display: none !important;
+}
+
+.ui-print-exact {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+@media print {
+  /* Re-tokenises the base 18mm default (base.css) so report margins stay
+     themeable via --report-page-margin. */
+  @page {
+    margin: var(--report-page-margin);
+  }
+
+  .ui-report {
+    --report-padding-block: 0;
+
+    /* Force an ink-on-white document regardless of the on-screen theme: the
+       palette tokens are [data-theme]-scoped raw values, so `color-scheme`
+       alone can't flip them. Re-point the handful the report renders with to
+       neutral (achromatic) ink/paper values so a dark-theme report doesn't
+       print light-grey text on white. */
+    color-scheme: light;
+
+    --text: #111;
+    --text-soft: #2a2a2a;
+    --text-dim: #555;
+    --panel: #fff;
+    --panel-soft: #f7f7f7;
+    --line: #d9d9d9;
+    --line-strong: #b3b3b3;
+
+    inline-size: auto;
+    padding: 0;
+  }
+
+  /* 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. (Legend swatches print-protect themselves in css/legend.css.) */
+  .ui-chart__fill {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .ui-report__cover {
+    min-block-size: auto;
+  }
+
+  .ui-report__cover,
+  .ui-report__header,
+  .ui-report__section,
+  .ui-report__summary,
+  .ui-report__finding,
+  .ui-report__evidence,
+  .ui-report__figure,
+  .ui-chart {
+    break-inside: avoid;
+  }
+
+  .ui-report__section-head {
+    break-after: avoid;
+  }
+
+  .ui-print-only {
+    display: var(--print-display, block) !important;
+  }
+
+  .ui-screen-only {
+    display: none !important;
+  }
+
+  .ui-break-before {
+    break-before: page;
+  }
+
+  .ui-break-after {
+    break-after: page;
+  }
+
+  .ui-keep {
+    break-inside: avoid;
+  }
+}

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;
+  }
+}

package/css/sources.css

@@ -0,0 +1,179 @@
+/* ==========================================================================
+   sources — opt-in source, citation & provenance grammar (the trust layer).
+
+   For generated reports, AI output, audits and docs that must answer "where
+   did this come from?". Bronto owns the visual grammar + the trust states; the
+   host owns fetching, citation numbering, and whether a source is trustworthy.
+   The state is carried by a rationed tone dot/border AND an author-written
+   label, so it never relies on colour alone (WCAG 1.4.1). Not imported by
+   core.css.
+
+   States (cross-cutting `.ui-src--*`, set the tone): verified · reviewed ·
+   generated · unverified · stale · conflict.
+   ========================================================================== */
+
+/* One tone, shared by citation / source-card / provenance via `--src-tone`. */
+.ui-citation,
+.ui-source-card,
+.ui-provenance {
+  --src-tone: var(--text-dim);
+}
+
+.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);
+}
+
+/* --- Inline citation — a reference marker on an <a> or <button>. --- */
+.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;
+}
+
+/* Named-source pill — full size, with a leading tone dot. */
+.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;
+}
+
+/* --- Source list — a references section. --- */
+.ui-source-list {
+  display: grid;
+  gap: var(--space-sm);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-source-list__item {
+  margin: 0;
+}
+
+/* --- Source card — a single source preview. --- */
+.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;
+  padding: 0.75rem 0.9rem;
+  print-color-adjust: exact;
+}
+
+.ui-source-card__title {
+  color: var(--text);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ui-source-card__origin {
+  color: var(--text-soft);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+}
+
+.ui-source-card__time {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
+.ui-source-card__excerpt {
+  color: var(--text-soft);
+  margin: 0;
+}
+
+.ui-source-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-start: 0.2rem;
+}
+
+/* --- Provenance — compact metadata beside generated content. --- */
+.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;
+}
+
+/* Forced colours: the tone dot/border collapses to a system colour, so the
+   author-written label is the surviving state channel (it already must be —
+   1.4.1). Keep the marks visible as CanvasText rather than letting them vanish. */
+@media (forced-colors: active) {
+  .ui-citation--chip::before,
+  .ui-provenance__item::before {
+    background: CanvasText;
+  }
+
+  .ui-source-card {
+    border-inline-start-color: CanvasText;
+  }
+}

package/css/spotlight.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   spotlight — opt-in guided-focus overlay (the visual language of a tour).
+
+   A dimming overlay with a cutout over a target element, an optional target
+   ring, and a callout note. Bronto owns the *look* and (via `initSpotlight`)
+   positions the cutout over a target; it is NOT a tour engine — step order,
+   advancing, and persistence are the host's. Not imported by core.css.
+
+   The cutout is a single box-shadow hole driven by JS-set custom properties
+   (`--spot-x/y/w/h`, viewport coordinates). The overlay is non-blocking
+   (`pointer-events: none`) — a visual highlight, not a modal trap.
+   ========================================================================== */
+
+.ui-spotlight {
+  --spot-x: 50%;
+  --spot-y: 50%;
+  --spot-w: 0px;
+  --spot-h: 0px;
+  --spot-pad: 8px;
+  --spot-radius: var(--radius-md);
+  --spot-backdrop: color-mix(in srgb, #000 55%, transparent);
+
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: var(--z-overlay, 1000);
+}
+
+.ui-spotlight__hole {
+  background: transparent;
+  block-size: calc(var(--spot-h) + var(--spot-pad) * 2);
+  border-radius: var(--spot-radius);
+  box-shadow: 0 0 0 100vmax var(--spot-backdrop);
+  inline-size: calc(var(--spot-w) + var(--spot-pad) * 2);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  transform: translate(
+    calc(var(--spot-x) - var(--spot-pad)),
+    calc(var(--spot-y) - var(--spot-pad))
+  );
+  transition:
+    transform 0.2s ease,
+    inline-size 0.2s ease,
+    block-size 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-spotlight__hole {
+    transition: none;
+  }
+}
+
+.ui-spotlight--ring .ui-spotlight__hole {
+  outline: 2px solid var(--accent);
+  outline-offset: 0;
+}
+
+/* The callout. Place it near the target (the host positions it); it re-enables
+   pointer events so its controls work inside the non-interactive overlay. */
+.ui-tour-note {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  color: var(--text);
+  display: grid;
+  gap: var(--space-sm);
+  max-inline-size: 22rem;
+  padding: var(--space-md);
+  pointer-events: auto;
+}
+
+.ui-tour-note__step {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-tour-note__title {
+  color: var(--text);
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ui-tour-note__body {
+  color: var(--text-soft);
+  margin: 0;
+}
+
+.ui-tour-note__actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+}
+
+@media (forced-colors: active) {
+  .ui-spotlight__hole {
+    outline: 2px solid CanvasText;
+  }
+}