@ponchia/ui 0.9.0 → 0.11.0

package/css/primitives.css

@@ -6,6 +6,8 @@
 /* --- Layout composition --- */
 
 .ui-stack {
+  min-inline-size: 0;
+  grid-template-columns: minmax(0, 1fr);
   display: grid;
   gap: var(--stack-gap, var(--space-md));
 }
@@ -169,7 +171,7 @@
 .ui-app-metrics {
   display: grid;
   gap: var(--space-md);
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
 }
 
 /* Inside an opt-in .ui-cq container, collapse to one column when the
@@ -201,27 +203,27 @@
 .ui-stat__label,
 .ui-app-metric__label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-stat__value,
 .ui-app-metric__value {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: 1.9rem;
   font-variant-numeric: tabular-nums;
   font-weight: var(--display-weight-strong);
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
   line-height: 1.05;
   overflow-wrap: anywhere; /* break an unspaced ID/hash rather than overflow */
 }
 
 .ui-stat__delta,
 .ui-app-metric__delta {
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
 }
 
@@ -329,18 +331,18 @@
   color: var(--success);
 }
 
-/* --- Eyebrow / section label — dot-matrix face --- */
+/* --- Eyebrow / section label — supporting text --- */
 
 .ui-eyebrow {
   /* accent-strong, not accent: this is small bold text and must clear
      WCAG AA 4.5:1 on the soft/tinted surfaces eyebrows sit on too. */
   color: var(--accent-text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-eyebrow--muted {
@@ -363,17 +365,17 @@
   color: var(--button-text);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 600;
   gap: 0.45rem;
   justify-content: center;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   min-block-size: 2.4rem;
   min-inline-size: 2.4rem;
   padding: 0.66rem 1rem;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard),
@@ -554,14 +556,14 @@
   text-decoration: none;
 }
 
-/* CTA: the eyebrow-faced action link (accent · display · uppercase),
+/* CTA: the accent action link with a directional cue,
    composed from the same tokens as .ui-eyebrow + the arrow glyph. */
 .ui-link--cta {
   color: var(--accent-text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-link--arrow::after,
@@ -603,14 +605,14 @@
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.36rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   min-block-size: 1.7rem;
   padding: 0.32rem 0.55rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-chip--accent {
@@ -619,6 +621,24 @@
   border-color: var(--accent);
 }
 
+/* Static labels in a pane header need less height than a clickable control. */
+.ui-chip--dense {
+  min-block-size: 1.25rem;
+  padding: 0.15rem 0.4rem;
+}
+
+.ui-chip--dense:is(button, a, [role='button']) {
+  min-block-size: var(--tap-target-min);
+  min-inline-size: var(--tap-target-min);
+}
+
+@media (pointer: coarse) {
+  .ui-chip--dense:is(button, a, [role='button']) {
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
+  }
+}
+
 /* --- Badge / status pill --- */
 
 .ui-badge {
@@ -628,14 +648,14 @@
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
   gap: 0.34rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   padding: 0.28rem 0.5rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 /* Tone rides the border + tint; text stays the high-contrast neutral
@@ -726,17 +746,17 @@
 
 .ui-key-value dt {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-key-value dd {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   margin: 0;
   min-inline-size: 0;
   overflow-wrap: anywhere; /* IDs/hashes/paths are the common value — break, don't overflow */

package/css/report.css

@@ -8,19 +8,32 @@
 
 .ui-report {
   /* Declare override-surface tokens first so authors can set them. */
-  --report-width: 72rem;
+  --report-width: 64rem;
   --report-padding-block: var(--space-2xl);
-  --report-gap: var(--space-lg);
-  --report-measure: 74ch;
+  --report-gap: var(--space-xl);
+  --report-measure: 68ch;
 
   color: var(--text-soft);
   display: grid;
+  font-size: 1.125rem;
+  line-height: 1.65;
   gap: var(--report-gap);
   inline-size: min(100%, var(--report-width));
   margin-inline: auto;
   padding: var(--report-padding-block) var(--space-md);
 }
 
+/* Keep reading measure independent of a wide figure or evidence table. */
+.ui-report p,
+.ui-report__section > :is(ul, ol, blockquote) {
+  max-inline-size: var(--report-measure);
+  overflow-wrap: anywhere;
+}
+
+.ui-report .ui-prose {
+  font-size: inherit;
+}
+
 .ui-report--compact {
   --report-gap: var(--space-md);
   --report-padding-block: var(--space-xl);
@@ -74,14 +87,14 @@
 
 .ui-report__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: calc(var(--text-xl) * 1.35);
-  font-weight: var(--display-weight-strong);
+  font-family: var(--sans);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 650;
   letter-spacing: 0;
-  line-height: 1.05;
+  line-height: 1.15;
   margin: 0;
   max-inline-size: var(--report-measure);
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -98,14 +111,14 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.55rem;
   letter-spacing: 0;
   list-style: none;
   margin: 0;
   padding: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__meta > * {
@@ -123,11 +136,22 @@
 }
 
 .ui-report__toc {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+  border-block: 1px solid var(--line);
   display: grid;
   gap: var(--space-xs);
-  padding: var(--space-md);
+  padding-block: var(--space-md);
+}
+
+.ui-report__toc > summary {
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  min-block-size: var(--tap-target);
+  padding-block: var(--space-xs);
+}
+
+details.ui-report__toc:not([open]) > :not(summary) {
+  display: none;
 }
 
 .ui-report__toc ol,
@@ -162,7 +186,7 @@
 
 .ui-report__decision {
   background: var(--panel);
-  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+  border: 0;
   border-inline-start: 3px solid var(--accent);
   border-radius: var(--radius-md);
   display: grid;
@@ -172,22 +196,22 @@
 
 .ui-report__decision-kicker {
   color: var(--accent-text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__decision-title {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-lg);
   font-weight: var(--display-weight);
   letter-spacing: 0;
   line-height: 1.18;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -202,13 +226,14 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.45rem 0.75rem;
   letter-spacing: 0;
 }
 
 .ui-report__decision-grid {
+  container: bronto-decision / inline-size;
   border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0;
@@ -230,13 +255,14 @@
 
 .ui-report__decision-label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-report__decision-value {
+  overflow-wrap: anywhere;
   color: var(--text-soft);
   line-height: 1.5;
 }
@@ -346,10 +372,10 @@
 .ui-claim__scope,
 .ui-claim__refs {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-claim__basis,
@@ -386,13 +412,13 @@
 
 .ui-report__section-head {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xl);
-  font-weight: var(--display-weight);
+  font-weight: 650;
   letter-spacing: 0;
   line-height: 1.1;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -415,11 +441,11 @@
 
 .ui-report__caption {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
   line-height: 1.5;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-evidence-grid {
@@ -446,7 +472,7 @@
 
 .ui-evidence-item__meta {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
 }
@@ -472,10 +498,10 @@
 .ui-evidence-item__window,
 .ui-evidence-item__source {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-evidence-item__value {
@@ -496,6 +522,7 @@
 }
 
 .ui-report__actions {
+  container: bronto-actions / inline-size;
   border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0;
@@ -516,14 +543,15 @@
 
 .ui-report__action-status {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   grid-column: 2;
   grid-row: 1;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   place-self: start end;
-  text-transform: uppercase;
-  white-space: nowrap;
+  text-transform: none;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 .ui-report__action-title,
@@ -546,10 +574,10 @@
 .ui-report__action-priority,
 .ui-report__action-source {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__action-criteria {
@@ -558,8 +586,13 @@
   line-height: 1.5;
 }
 
-@media (max-width: 32rem) {
-  .ui-report__decision-item,
+@container bronto-decision (max-width: 32rem) {
+  .ui-report__decision-item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container bronto-actions (max-width: 32rem) {
   .ui-report__action {
     grid-template-columns: 1fr;
   }
@@ -588,7 +621,7 @@
    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). */
+   pairing, with a 16rem reading floor per column in any parent. */
 .ui-compare {
   display: grid;
   gap: var(--space-md);
@@ -596,13 +629,12 @@
 }
 
 .ui-compare--2up {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (max-width: 33rem) {
-  .ui-compare--2up {
-    grid-template-columns: 1fr;
-  }
+  /* At most two columns, each at least 16rem unless the whole parent is narrower.
+     Intrinsic wrapping also works outside a report or named query container. */
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(16rem, (100% - var(--space-md)) / 2)), 1fr)
+  );
 }
 
 .ui-compare__col {
@@ -613,10 +645,10 @@
 
 .ui-compare__head {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 /* A chart is NOT a bronto component — it needs scales + data binding, which the
@@ -660,9 +692,15 @@
     --line-strong: #b3b3b3;
 
     inline-size: auto;
+    font-size: 11pt;
     padding: 0;
   }
 
+  .ui-report__decision-grid,
+  .ui-report__actions {
+    container-type: normal;
+  }
+
   .ui-report__cover {
     min-block-size: auto;
   }

package/css/sources.css

@@ -78,7 +78,7 @@
 .ui-citation {
   color: var(--accent-text);
   font-family: var(--mono);
-  font-size: 0.72em;
+  font-size: max(0.72em, var(--text-2xs));
   font-weight: 600;
   text-decoration: none;
   vertical-align: super;

package/css/state.css

@@ -262,29 +262,38 @@
    ========================================================================== */
 
 /* Declared once so a host putting the level on its own element gets the same
-   mapping from `data-level` + `var(--severity-tone)`, without copying a table. */
+   mapping from `data-level` + `var(--severity-tone)`, without copying a table.
+
+   `.ui-severity-tone` is that host element's hook, and it paints nothing: the
+   three classes below all draw something — a chip, a ruled row, a background
+   dot — and a consumer whose mark Bronto does not ship needs the VALUE without
+   any of them. The case that proved it was an SVG `<circle>`, which ignores
+   `background` entirely, so a status strip had to restate the whole tier table
+   in `fill` and could then disagree with the rows beside it. */
 .ui-severity,
 .ui-severity-row,
-.ui-severity-dot {
+.ui-severity-dot,
+.ui-severity-tone,
+.ui-timestrip__event {
   --severity-tone: var(--text-dim);
 }
 
-:is(.ui-severity, .ui-severity-row, .ui-severity-dot):is(
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot, .ui-severity-tone, .ui-timestrip__event):is(
   [data-level='critical'],
   [data-level='error']
 ) {
   --severity-tone: var(--danger);
 }
 
-:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='warning'] {
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot, .ui-severity-tone, .ui-timestrip__event)[data-level='warning'] {
   --severity-tone: var(--warning);
 }
 
-:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='notice'] {
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot, .ui-severity-tone, .ui-timestrip__event)[data-level='notice'] {
   --severity-tone: var(--info);
 }
 
-:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='ok'] {
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot, .ui-severity-tone, .ui-timestrip__event)[data-level='ok'] {
   --severity-tone: var(--success);
 }
 
@@ -370,6 +379,86 @@
   font-size: var(--text-2xs);
 }
 
+/* ==========================================================================
+   timestrip — WHEN the things in a list entered the state they are in.
+
+   A status list answers "what". This answers "when", on one axis, at a glance:
+   a cluster of marks at the leading edge is a fresh incident, a lone mark
+   pinned to the trailing edge has been wrong for a while. It is the companion
+   to `.ui-severity-row` and takes the same `data-level`, so a strip can never
+   disagree with the rows beneath it.
+
+   BOUNDARY — this is geometry, not a chart. The host owns the window, the
+   clock, and the arithmetic: it normalises each event to a position in 0..1 and
+   writes it as `--at`. Bronto owns the rail, the marker, and the mark. There
+   are no scales, no ticks, no axis labels and no time parsing here; a surface
+   that wanted those wants a chart, and Bronto refuses chart scales.
+
+     <div class="ui-timestrip" role="img" aria-label="…">
+       <span class="ui-timestrip__axis"></span>
+       <span class="ui-timestrip__now"></span>
+       <span class="ui-timestrip__event" data-level="critical" style="--at: .92"></span>
+       <span class="ui-timestrip__event" data-level="ok" data-outside style="--at: 0"></span>
+     </div>
+
+   `data-outside` is for an event older than the window. It stays at the edge at
+   reduced weight rather than vanishing, because a strip that reads "quiet"
+   while a row says "failing for three days" is worse than one that reads
+   crowded. The mark is not the state's only channel: the rows below name their
+   level in words, and the strip needs an `aria-label` naming what it plots.
+   ========================================================================== */
+
+.ui-timestrip {
+  block-size: 1.4rem;
+  display: block;
+  inline-size: 100%;
+  position: relative;
+}
+
+/* The rail the marks sit on, and the edge that is "now". Both are decorative:
+   they carry no fact the label and the rows do not already carry. */
+.ui-timestrip__axis {
+  background: var(--line);
+  block-size: 1px;
+  inset-block-end: 0.35rem;
+  inset-inline: 0;
+  position: absolute;
+}
+
+.ui-timestrip__now {
+  border-inline-end: 1px dashed var(--text-dim);
+  inset-block: 0.1rem 0.25rem;
+  inset-inline-end: 0;
+  position: absolute;
+}
+
+/* `--at` is the host's answer: 0 is the oldest edge of the window, 1 is now.
+   Clamped rather than trusted — an out-of-range value is a host bug, and a mark
+   drawn outside its own strip is harder to diagnose than one at the edge. */
+.ui-timestrip__event {
+  background: var(--severity-tone);
+  block-size: 0.4rem;
+  border-radius: var(--radius-pill);
+  inline-size: 0.4rem;
+  inset-block-end: 0.55rem;
+  inset-inline-start: calc(clamp(0, var(--at, 0), 1) * 100%);
+  position: absolute;
+  translate: -50% 0;
+}
+
+.ui-timestrip__event[data-outside] {
+  opacity: 0.55;
+}
+
+/* Forced colours: the tone is replaced, so the marks stop distinguishing tiers.
+   They still say WHEN, which is the strip's whole job, and the level stays
+   readable in the rows. */
+@media (forced-colors: active) {
+  .ui-timestrip__event {
+    background: CanvasText;
+  }
+}
+
 /* 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) {

package/css/table.css

@@ -11,7 +11,7 @@
 
 .ui-table {
   border-collapse: collapse;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   min-inline-size: 100%;
   inline-size: 100%;
@@ -32,9 +32,9 @@
   color: var(--text-dim);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   position: sticky;
-  text-transform: uppercase;
+  text-transform: none;
   inset-block-start: 0;
 
   /* Keep the sticky header above body cells — cheap insurance for the