@ponchia/ui 0.9.0 → 0.10.0

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

package/css/tokens.css

@@ -11,10 +11,10 @@
 
 :root {
   /* Sharp, near-zero radii — Nothing surfaces are crisp, not pill-soft. */
-  --radius-xl: 4px;
-  --radius-lg: 3px;
-  --radius-md: 2px;
-  --radius-sm: 1px;
+  --radius-xl: 8px;
+  --radius-lg: 6px;
+  --radius-md: 4px;
+  --radius-sm: 2px;
   --radius-pill: 999px;
 
   /* Spacing scale. */
@@ -39,12 +39,12 @@
   --display: var(--dot-font);
   --display-weight: 700;
   --display-weight-strong: 800;
-  --text-2xs: 0.72rem;
-  --text-xs: 0.76rem;
-  --text-sm: 0.86rem;
-  --text-base: 0.95rem;
-  --text-lg: 1.15rem;
-  --text-xl: 1.45rem;
+  --text-2xs: 0.75rem;
+  --text-xs: 0.8125rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.5rem;
   --tracking-wide: 0.14em;
   --tracking-wider: 0.22em;
 

package/css/workbench.css

@@ -10,6 +10,7 @@
 
 /* --- Inspector — a panel of details for the selected object. --- */
 .ui-inspector {
+  container: bronto-inspector / inline-size;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -22,6 +23,7 @@
   align-items: baseline;
   border-block-end: 1px solid var(--line);
   display: flex;
+  flex-wrap: wrap;
   gap: var(--space-sm);
   justify-content: space-between;
   padding-block-end: var(--space-xs);
@@ -152,14 +154,14 @@
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   min-block-size: 1.9rem;
   padding: 0.48rem 0.7rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-segmented-buttons__button[aria-pressed='true'],
@@ -181,21 +183,31 @@
   align-items: baseline;
   display: grid;
   gap: var(--space-sm);
-  grid-template-columns: minmax(6rem, 38%) 1fr;
+  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
 }
 
 .ui-property__label {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  overflow-wrap: anywhere;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-property__value {
   color: var(--text);
   font-size: var(--text-sm);
   min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+@container bronto-inspector (max-inline-size: 20rem) {
+  .ui-property {
+    gap: var(--space-2xs);
+    grid-template-columns: minmax(0, 1fr);
+    padding-block: var(--space-xs);
+  }
 }
 
 /* --- Pane — a movable, renameable surface with a grab header.
@@ -304,7 +316,7 @@
 
 .ui-selectionbar__count {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
 }