@ponchia/ui 0.5.0 → 0.6.0

package/css/report.css

@@ -7,6 +7,9 @@
    ========================================================================== */
 
 .ui-report {
+  /* Declare override-surface tokens first so authors can set them. */
+  --report-width: 72rem;
+  --report-padding-block: var(--space-2xl);
   --report-gap: var(--space-lg);
   --report-measure: 74ch;
   --report-page-margin: 18mm;
@@ -14,9 +17,9 @@
   color: var(--text-soft);
   display: grid;
   gap: var(--report-gap);
-  inline-size: min(100%, var(--report-width, 72rem));
+  inline-size: min(100%, var(--report-width));
   margin-inline: auto;
-  padding: var(--report-padding-block, var(--space-2xl)) var(--space-md);
+  padding: var(--report-padding-block) var(--space-md);
 }
 
 .ui-report--compact {
@@ -42,7 +45,7 @@
   padding-block: var(--space-xl) var(--space-lg);
 }
 
-.ui-report__header {
+.ui-report__head {
   align-items: end;
   border-block-end: 1px solid var(--line);
   display: flex;
@@ -56,6 +59,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: calc(var(--text-xl) * 1.35);
+  font-weight: var(--display-weight-strong);
   letter-spacing: 0;
   line-height: 1.05;
   margin: 0;
@@ -171,6 +175,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: var(--text-xl);
+  font-weight: var(--display-weight);
   letter-spacing: 0;
   line-height: 1.1;
   margin: 0;
@@ -195,8 +200,7 @@
   margin: 0;
 }
 
-.ui-report__caption,
-.ui-chart__caption {
+.ui-report__caption {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -216,64 +220,47 @@
   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 {
+/* --- Comparison layout ---
+   The report layer's "A vs B" / before-after grid — the side-by-side layout
+   reports lean on that the grammar was missing. Fluid-first: columns wrap to
+   a single stack on a narrow screen via auto-fit, so two panels never
+   overflow. `ui-compare__col` is one side, `ui-compare__head` labels it.
+   `ui-compare--2up` pins exactly two equal columns for a hard before/after
+   pairing (still collapsing to one column on a phone). */
+.ui-compare {
   display: grid;
-  gap: var(--space-xs);
+  gap: var(--space-md);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
 }
 
-.ui-chart__bar {
-  --chart-value: 0%;
-
-  display: grid;
-  gap: 0.35rem;
+.ui-compare--2up {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-/* 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;
+@media (max-width: 33rem) {
+  .ui-compare--2up {
+    grid-template-columns: 1fr;
+  }
 }
 
-.ui-chart__label {
-  align-items: center;
-  color: var(--text-soft);
-  display: flex;
-  font-family: var(--mono);
-  font-size: var(--text-xs);
+.ui-compare__col {
+  align-content: start;
+  display: grid;
   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-compare__head {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
 }
 
-.ui-chart__fallback {
-  margin-block-start: var(--space-sm);
-}
+/* A chart is NOT a bronto component — it needs scales + data binding, which the
+   analytical layer refuses to own. Theme Vega-Lite with `@ponchia/ui/vega`
+   (docs/vega.md), or hand-author a token-themed inline `<svg>`, and drop it in a
+   `.ui-report__figure` with a `.ui-report__caption` + a `.ui-legend` key. */
 
 .ui-print-only {
   display: none !important;
@@ -313,27 +300,17 @@
     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__head,
   .ui-report__section,
   .ui-report__summary,
   .ui-report__finding,
   .ui-report__evidence,
-  .ui-report__figure,
-  .ui-chart {
+  .ui-report__figure {
     break-inside: avoid;
   }
 

package/css/site.css

@@ -162,11 +162,11 @@
     transform var(--duration-fast) var(--ease-spring);
 }
 
-.ui-sitenav a[aria-current] {
+.ui-sitenav a[aria-current]:not([aria-current='false']) {
   color: var(--accent-text);
 }
 
-.ui-sitenav a[aria-current]::before {
+.ui-sitenav a[aria-current]:not([aria-current='false'])::before {
   opacity: 1;
   transform: scale(1);
 }
@@ -182,6 +182,13 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-sitenav a {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}
+
 /* --- Mobile menu — native <details>, no JS required --- */
 
 .ui-sitemenu {
@@ -247,6 +254,13 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-sitemenu > summary {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}
+
 /* --- Footer --- */
 
 .ui-sitefooter {

package/css/sources.css

@@ -19,6 +19,37 @@
   --src-tone: var(--text-dim);
 }
 
+/* Standalone trust pill — wears a `.ui-src--*` tone on its own, for a bare
+   "verified" / "stale" label outside a citation or source card (the tone setters
+   below only paint a `--src-tone` custom property, so without this host a lone
+   `.ui-src--verified` validates against classes.json yet renders nothing). Tone
+   is a leading dot + a tinted border AND the author's written label, never colour
+   alone (WCAG 1.4.1). Declared before the `--*` setters so their tone wins. */
+.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);
 }
@@ -169,7 +200,8 @@
    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 {
+  .ui-provenance__item::before,
+  .ui-src::before {
     background: CanvasText;
   }
 
@@ -177,3 +209,13 @@
     border-inline-start-color: CanvasText;
   }
 }
+
+/* Print: an inline citation marker points into the references list, so never
+   expand its href inline. base.css expands `.ui-prose a[href^="http"]` with a
+   trailing "(url)"; on a superscript marker that dumps a full URL mid-sentence.
+   !important + print-scoped because base's rule is more specific. */
+@media print {
+  .ui-citation[href]::after {
+    content: none !important;
+  }
+}

package/css/spotlight.css

@@ -66,7 +66,7 @@
   color: var(--text);
   display: grid;
   gap: var(--space-sm);
-  max-inline-size: 22rem;
+  max-inline-size: min(22rem, calc(100vw - 2rem));
   padding: var(--space-md);
   pointer-events: auto;
 }

package/css/tokens.css

@@ -3,7 +3,7 @@
    Single source of truth: tokens/index.js (`cssVars`). Edit token VALUES
    there, then run `npm run tokens:css:build`. The four :root blocks below are
    emitted from cssVars — the dark palette is authored ONCE (not the former two
-   CSS blocks + the JS mirror). check-tokens.mjs gates this file against cssVars.
+   CSS blocks + the JS mirror). Drift-checked by `npm run check:fresh` (scripts/check-fresh.mjs).
    The Doto @font-face lives in fonts.css; override --display / --dot-font to
    self-host. CSS-only presets (density / contrast / OLED) are hand-authored
    below the marker — they are intentionally not part of the JS token model.
@@ -31,6 +31,8 @@
   --sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --dot-font: 'Doto', var(--mono);
   --display: var(--dot-font);
+  --display-weight: 700;
+  --display-weight-strong: 800;
   --text-2xs: 0.68rem;
   --text-xs: 0.76rem;
   --text-sm: 0.86rem;
@@ -122,6 +124,7 @@
   --accent-ramp-end: #ffffff;
   --accent-strong: color-mix(in srgb, var(--accent) 83%, #000);
   --accent-text: var(--accent-strong);
+  --on-accent: var(--button-text);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
   --success: #2f7d4f;
   --success-soft: rgb(47, 125, 79, 0.12);
@@ -165,6 +168,7 @@
     --accent-ramp-end: #000000;
     --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
     --accent-text: var(--accent-strong);
+    --on-accent: var(--button-text);
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
     --success: #4ec27e;
     --success-soft: rgb(78, 194, 126, 0.14);
@@ -203,6 +207,7 @@
   --accent-ramp-end: #000000;
   --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
   --accent-text: var(--accent-strong);
+  --on-accent: var(--button-text);
   --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
   --success: #4ec27e;
   --success-soft: rgb(78, 194, 126, 0.14);
@@ -311,3 +316,33 @@
     --panel-soft: #1a1a1a;
   }
 }
+
+/* --------------------------------------------------------------------------
+   Print — 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 neutrals to achromatic ink/paper and the
+   status/accent hues to their light-theme (print-legible) values. This lifts
+   the same remap report.css scopes to `.ui-report` up to :root, so a bare
+   .ui-card / .ui-statgrid / .ui-table (the markup an external LLM emits) also
+   prints dark-on-white instead of light-grey text or a dark panel on white.
+   Lives here, in the exempt tier-definition file, because it is a token-value
+   override (ADR-0001), not component styling. CSS-only, like the presets above.
+   -------------------------------------------------------------------------- */
+@media print {
+  :root {
+    color-scheme: light;
+
+    --text: #111;
+    --text-soft: #2a2a2a;
+    --text-dim: #555;
+    --panel: #fff;
+    --panel-soft: #f7f7f7;
+    --line: #d9d9d9;
+    --line-strong: #b3b3b3;
+    --success: #2f7d4f;
+    --danger: #c01622;
+    --warning: #806414;
+    --info: #1f63c4;
+    --accent: #d71921;
+  }
+}

package/css/workbench.css

@@ -19,7 +19,7 @@
   padding: var(--space-md);
 }
 
-.ui-inspector__header {
+.ui-inspector__head {
   align-items: baseline;
   border-block-end: 1px solid var(--line);
   display: flex;