@ponchia/ui 0.6.3 → 0.6.5

package/css/dots.css

@@ -348,6 +348,177 @@
   animation-delay: 0.63s;
 }
 
+/* ==========================================================================
+   Data-bound dot surfaces — the reporting/dashboard family. Each is a thin,
+   token-driven leaf over the same lit/dim/accent dot vocabulary: the HOST
+   normalises the data (lights `is-on`, sets `data-level`, or writes `--v`
+   0..1) and the leaf only lays out + tones. None compute a scale, bin, or
+   threshold — that stays with the host (the spark/meter boundary).
+
+   a11y: every one is opaque to assistive tech, so the container MUST carry a
+   host-written `role="img"` + `aria-label` with the exact value/meaning
+   (rounding to whole cells is presentation-only; keep the figure in the label).
+   ========================================================================== */
+
+/* Waffle / unit chart — part-to-whole as an N×N field of lit dots ("73 of
+   100"). Host marks the lit cells with `is-on`. */
+.ui-waffle {
+  display: grid;
+  gap: var(--waffle-gap, 0.18em);
+  grid-template-columns: repeat(var(--waffle-cols, 10), 1fr);
+  inline-size: var(--waffle-size, 7em);
+}
+
+.ui-waffle i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 50%);
+}
+
+.ui-waffle i.is-on {
+  background: var(--field-dot-accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-accent);
+}
+
+/* Activity / contribution grid — density-over-time. A flat list of day cells
+   flows down each weekday column via grid-auto-flow; intensity is a 5-step
+   ramp on `data-level="0..4"` (the host bins data → level). */
+.ui-activity {
+  display: grid;
+  gap: var(--activity-gap, 0.18em);
+  grid-auto-columns: var(--activity-cell, 0.82em);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--activity-rows, 7), 1fr);
+}
+
+.ui-activity i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 2px);
+}
+
+.ui-activity i[data-level='1'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 30%, var(--field-dot));
+}
+
+.ui-activity i[data-level='2'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 55%, var(--field-dot));
+}
+
+.ui-activity i[data-level='3'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 78%, var(--field-dot));
+}
+
+.ui-activity i[data-level='4'] {
+  background: var(--field-dot-accent);
+}
+
+/* LED level meter — a column of discrete segments lit to a threshold (signal /
+   load / VU). Fills from the bottom; host marks lit segments with `is-on`.
+   `--warn`/`--danger` re-point the lit colour for the whole meter when the host
+   crosses a threshold (the host owns the threshold, not the leaf). */
+.ui-level {
+  block-size: var(--level-height, 4em);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--level-gap, 2px);
+  inline-size: var(--level-size, 0.7em);
+}
+
+.ui-level i {
+  background: var(--field-dot);
+  border-radius: var(--radius-sm);
+  flex: 1;
+}
+
+.ui-level i.is-on {
+  background: var(--accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--accent);
+}
+
+.ui-level--warn i.is-on {
+  background: var(--warning);
+}
+
+.ui-level--danger i.is-on {
+  background: var(--danger);
+}
+
+/* Dot gauge — a 0..1 reading (`--v`) as a ring of dots filling along an arc.
+   A conic-gradient sweep (accent up to --v, dim beyond) intersected with a
+   donut-ring × dot-pattern mask, so the lit arc reads as discrete dots. */
+.ui-dotgauge {
+  --_v: var(--v, 0);
+  --_sweep: var(--gauge-sweep, 270deg);
+
+  aspect-ratio: 1;
+  background: conic-gradient(
+    from var(--gauge-from, 135deg),
+    var(--field-dot-accent) calc(var(--_v) * var(--_sweep)),
+    var(--field-dot) calc(var(--_v) * var(--_sweep)) var(--_sweep),
+    transparent var(--_sweep)
+  );
+  border-radius: 50%;
+  inline-size: var(--gauge-size, 5em);
+
+  /* ring (donut) ∩ dot lattice → a ring of dots */
+  /* stylelint-disable property-no-vendor-prefix -- Safari still needs the prefixed mask props. */
+  -webkit-mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  -webkit-mask-composite: source-in;
+  /* stylelint-enable property-no-vendor-prefix */
+  mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  mask-composite: intersect;
+}
+
+/* Readout — a row of dot-matrix glyphs forming a big numeric (renderReadout).
+   The glyphs are decorative; the row carries role=img + the value as its name. */
+.ui-readout {
+  align-items: flex-end;
+  display: inline-flex;
+  gap: var(--readout-gap, 0.12em);
+}
+
+.ui-readout__spacer {
+  display: inline-block;
+  inline-size: var(--readout-space, 0.5em);
+}
+
+/* Halftone — render host content (an <img> or a box with its own background)
+   through a dot lattice so a thumbnail/cover takes on the dot look. A style
+   filter, NOT a data viz: the dots are a fixed lattice, not value-modulated. */
+.ui-halftone {
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+  mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+}
+
+/* Density wrapper — make any dot surface inside respond to the CARD it sits in,
+   not the viewport, so the same component reads well in a wide hero and a
+   narrow tile. Opt-in: wrap the surface and the breakpoint below densifies it. */
+.ui-dotfit {
+  container: dotfit / inline-size;
+}
+
+@container dotfit (width < 18rem) {
+  .ui-dotfit .ui-dotgrid {
+    --dot-gap: 8px;
+  }
+
+  .ui-dotfit .ui-activity {
+    --activity-cell: 0.6em;
+  }
+
+  .ui-dotfit .ui-waffle {
+    --waffle-size: 5em;
+  }
+}
+
 /* Matrix-reveal wrapper — content wipes in left→right on .is-in. Gate the
    clipped from-state on `scripting: enabled`: with JS off, `.is-in` is never
    toggled, so without the gate the content stays permanently clipped away and
@@ -443,16 +614,52 @@
     forced-color-adjust: none;
     background: LinkText;
   }
+
+  /* The data-bound dot surfaces encode their value via background-color, which
+     HCM flattens. Opt out and pin the lit state to a system colour so the
+     reading survives. The activity ramp's 5 steps can't all stay distinct under
+     HCM — collapse to present (CanvasText) vs absent (the unstyled track). */
+  .ui-waffle i.is-on,
+  .ui-level i.is-on {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-level--warn i.is-on {
+    background: Mark;
+  }
+
+  .ui-level--danger i.is-on {
+    background: Highlight;
+  }
+
+  .ui-activity i[data-level='1'],
+  .ui-activity i[data-level='2'],
+  .ui-activity i[data-level='3'],
+  .ui-activity i[data-level='4'] {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  /* The gauge is a masked gradient; keep its paint rather than let HCM drop it. */
+  .ui-dotgauge {
+    forced-color-adjust: none;
+  }
 }
 
 /* Print: the dot surfaces carry data (heatmap cells, the segmented meter, the
-   status dot, the masked glyph), so their painted fills must survive the print
-   "economy" default that drops backgrounds. */
+   status dot, the masked glyph, the waffle/activity/level/gauge readings), so
+   their painted fills must survive the print "economy" default that drops
+   backgrounds. */
 @media print {
   .ui-dotmatrix__cell,
   .ui-dotbar i,
   .ui-dot,
-  .ui-icon {
+  .ui-icon,
+  .ui-waffle i,
+  .ui-activity i,
+  .ui-level i,
+  .ui-dotgauge {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }

package/css/report.css

@@ -12,7 +12,6 @@
   --report-padding-block: var(--space-2xl);
   --report-gap: var(--space-lg);
   --report-measure: 74ch;
-  --report-page-margin: 18mm;
 
   color: var(--text-soft);
   display: grid;
@@ -31,6 +30,24 @@
   counter-reset: report-section;
 }
 
+.ui-report > *,
+.ui-report__cover > *,
+.ui-report__head > *,
+.ui-report__toc > *,
+.ui-report__summary > *,
+.ui-report__decision > *,
+.ui-report__finding > *,
+.ui-report__evidence > *,
+.ui-report__section > *,
+.ui-report__figure > *,
+.ui-claim > *,
+.ui-evidence-grid > *,
+.ui-evidence-ledger > *,
+.ui-compare > *,
+.ui-compare__col > * {
+  min-inline-size: 0;
+}
+
 .ui-report__cover {
   align-content: end;
   border-block-end: 1px solid var(--line);
@@ -143,8 +160,204 @@
   border-inline-start: 2px solid var(--accent);
 }
 
+.ui-report__decision {
+  background: var(--panel);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+  border-inline-start: 3px solid var(--accent);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-report__decision-kicker {
+  color: var(--accent-text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__decision-title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-lg);
+  font-weight: var(--display-weight);
+  letter-spacing: 0;
+  line-height: 1.18;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report__decision-body {
+  color: var(--text-soft);
+  line-height: 1.6;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report__decision-meta {
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.45rem 0.75rem;
+  letter-spacing: 0;
+}
+
+.ui-report__decision-grid {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: 0;
+}
+
+.ui-report__decision-item {
+  align-items: start;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-xs);
+  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
+  padding-block: var(--space-xs);
+}
+
+.ui-report__decision-label,
+.ui-report__decision-value {
+  margin: 0;
+}
+
+.ui-report__decision-label {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-report__decision-value {
+  color: var(--text-soft);
+  line-height: 1.5;
+}
+
 .ui-report__finding {
-  border-inline-start: 2px solid var(--line-strong);
+  --report-finding-tone: var(--line-strong);
+
+  border-inline-start: 2px solid var(--report-finding-tone);
+}
+
+.ui-report__finding--critical {
+  --report-finding-tone: var(--danger);
+}
+
+.ui-report__finding--major {
+  --report-finding-tone: var(--warning);
+}
+
+.ui-report__finding--minor {
+  --report-finding-tone: var(--info);
+}
+
+.ui-report__finding--resolved {
+  --report-finding-tone: var(--success);
+}
+
+.ui-report__finding-title,
+.ui-report__finding-claim,
+.ui-report__finding-impact,
+.ui-report__finding-remediation,
+.ui-report__finding-evidence,
+.ui-report__finding-caveat {
+  margin: 0;
+}
+
+.ui-report__finding-title {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.ui-report__finding-claim {
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.ui-report__finding-impact,
+.ui-report__finding-remediation,
+.ui-report__finding-evidence {
+  color: var(--text-soft);
+  line-height: 1.55;
+}
+
+.ui-report__finding-caveat {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+.ui-claim {
+  --claim-tone: var(--accent);
+
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--claim-tone);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+}
+
+.ui-claim--supported {
+  --claim-tone: var(--success);
+}
+
+.ui-claim--partial {
+  --claim-tone: var(--warning);
+}
+
+.ui-claim--disputed,
+.ui-claim--unsupported {
+  --claim-tone: var(--danger);
+}
+
+.ui-claim--unknown {
+  --claim-tone: var(--info);
+}
+
+.ui-claim__statement,
+.ui-claim__status,
+.ui-claim__scope,
+.ui-claim__basis,
+.ui-claim__limits,
+.ui-claim__refs,
+.ui-claim__caveat {
+  margin: 0;
+}
+
+.ui-claim__statement {
+  color: var(--text);
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.ui-claim__status,
+.ui-claim__scope,
+.ui-claim__refs {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-claim__basis,
+.ui-claim__limits,
+.ui-claim__caveat {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.55;
 }
 
 .ui-report__evidence {
@@ -209,6 +422,142 @@
   text-transform: uppercase;
 }
 
+.ui-evidence-grid {
+  display: grid;
+  gap: var(--space-sm);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.ui-evidence-item {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: 0.35rem;
+  padding: var(--space-sm);
+}
+
+.ui-evidence-item__title {
+  color: var(--text);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ui-evidence-item__meta {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+}
+
+.ui-evidence-item__body {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.ui-evidence-item__kind,
+.ui-evidence-item__method,
+.ui-evidence-item__window,
+.ui-evidence-item__value,
+.ui-evidence-item__source,
+.ui-evidence-item__caveat {
+  margin: 0;
+}
+
+.ui-evidence-item__kind,
+.ui-evidence-item__method,
+.ui-evidence-item__window,
+.ui-evidence-item__source {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-evidence-item__value {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: 650;
+}
+
+.ui-evidence-item__caveat {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.ui-evidence-ledger {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.ui-report__actions {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: 0;
+}
+
+.ui-report__action {
+  align-items: start;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-xs);
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding-block: var(--space-sm);
+}
+
+.ui-report__action-status {
+  align-self: start;
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-report__action-title,
+.ui-report__action-owner,
+.ui-report__action-due,
+.ui-report__action-priority,
+.ui-report__action-criteria,
+.ui-report__action-source {
+  margin: 0;
+}
+
+.ui-report__action-title {
+  color: var(--text);
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.ui-report__action-owner,
+.ui-report__action-due,
+.ui-report__action-priority,
+.ui-report__action-source {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__action-criteria {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+@media (max-width: 32rem) {
+  .ui-report__decision-item,
+  .ui-report__action {
+    grid-template-columns: 1fr;
+  }
+}
+
 .ui-report__sources,
 .ui-report__appendix,
 .ui-report__footnotes {
@@ -312,10 +661,10 @@
 }
 
 @media print {
-  /* Re-tokenises the base 18mm default (base.css) so report margins stay
-     themeable via --report-page-margin. */
+  /* Chromium-class print engines do not reliably resolve custom properties in
+     @page rules. Keep this literal so reports cannot print edge-to-edge. */
   @page {
-    margin: var(--report-page-margin);
+    margin: 18mm;
   }
 
   .ui-report {
@@ -346,11 +695,14 @@
 
   .ui-report__cover,
   .ui-report__head,
-  .ui-report__section,
+  .ui-report__decision,
   .ui-report__summary,
   .ui-report__finding,
   .ui-report__evidence,
-  .ui-report__figure {
+  .ui-report__figure,
+  .ui-claim,
+  .ui-evidence-item,
+  .ui-report__action {
     break-inside: avoid;
   }
 

package/css/skins.css

@@ -11,44 +11,53 @@
 /* Amber CRT */
 :root[data-bronto-skin='amber-crt'] {
   --accent: oklch(52% 0.11 67deg);
+  --dotmatrix-pulse-min: 0.35;
 }
 
 :root[data-theme='dark'][data-bronto-skin='amber-crt'] {
   --accent: oklch(82% 0.15 82deg);
   --dotmatrix-glow: 0.4em;
+  --dotmatrix-pulse-min: 0.3;
 }
 
 /* E-ink */
 :root[data-bronto-skin='e-ink'] {
   --accent: oklch(34% 0.012 250deg);
+  --dotmatrix-reveal-step: 0ms;
 }
 
 :root[data-theme='dark'][data-bronto-skin='e-ink'] {
   --accent: oklch(84% 0.008 250deg);
+  --dotmatrix-reveal-step: 0ms;
 }
 
 /* Phosphor Green */
 :root[data-bronto-skin='phosphor-green'] {
   --accent: oklch(52% 0.13 150deg);
+  --dotmatrix-pulse-min: 0.35;
 }
 
 :root[data-theme='dark'][data-bronto-skin='phosphor-green'] {
   --accent: oklch(84% 0.19 150deg);
   --dotmatrix-glow: 0.4em;
+  --dotmatrix-pulse-min: 0.3;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light'])[data-bronto-skin='amber-crt'] {
     --accent: oklch(82% 0.15 82deg);
     --dotmatrix-glow: 0.4em;
+    --dotmatrix-pulse-min: 0.3;
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='e-ink'] {
     --accent: oklch(84% 0.008 250deg);
+    --dotmatrix-reveal-step: 0ms;
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='phosphor-green'] {
     --accent: oklch(84% 0.19 150deg);
     --dotmatrix-glow: 0.4em;
+    --dotmatrix-pulse-min: 0.3;
   }
 }