@ponchia/ui 0.5.0 → 0.6.3

package/css/app.css

@@ -6,7 +6,7 @@
 .ui-app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
-  min-block-size: 100vh;
+  min-block-size: 100dvh;
 }
 
 .ui-app-shell--full {
@@ -24,7 +24,7 @@
   padding: var(--space-md);
   position: sticky;
   inset-block-start: 0;
-  block-size: 100vh;
+  block-size: 100svh;
   overflow-y: auto;
 }
 
@@ -34,6 +34,7 @@
   display: flex;
   font-family: var(--display);
   font-size: 1.05rem;
+  font-weight: var(--display-weight);
   gap: 0.5rem;
   letter-spacing: var(--tracking-wide);
   padding: 0.35rem 0.5rem;
@@ -87,21 +88,55 @@
   inline-size: 0.34rem;
 }
 
-.ui-app-nav a:hover {
-  background: var(--bg-accent);
-  color: var(--text);
+@media (hover: hover) {
+  .ui-app-nav a:hover {
+    background: var(--bg-accent);
+    color: var(--text);
+  }
 }
 
-.ui-app-nav a.is-active {
+/* Current page honours BOTH the `.is-active` class and `aria-current` — the
+   sibling `.ui-sitenav` signals current-page with `aria-current="page"`, so the
+   app-shell nav now accepts the same programmatic cue (author it for AT, not
+   just the visual class — C19). */
+.ui-app-nav a.is-active,
+.ui-app-nav a[aria-current]:not([aria-current='false']) {
   background: var(--accent-soft);
   border-inline-start-color: var(--accent);
   color: var(--accent-text);
 }
 
-.ui-app-nav a.is-active::before {
+@media (pointer: coarse) {
+  .ui-app-nav a {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}
+
+.ui-app-nav a.is-active::before,
+.ui-app-nav a[aria-current]:not([aria-current='false'])::before {
   opacity: 1;
 }
 
+/* Forced colours flatten var(--accent) (border + bg + text) to a single system
+   colour, so the active link collapses into its inactive siblings — only a
+   near-imperceptible tint/dot opacity delta survives, and current-page becomes
+   invisible to HCM users. Re-assert "current" on channels HCM preserves: a
+   Highlight start-border and marker dot, plus a NON-colour bold weight so the
+   cue does not rely on colour alone (WCAG 1.4.1). (component audit C8.) */
+@media (forced-colors: active) {
+  .ui-app-nav a.is-active,
+  .ui-app-nav a[aria-current]:not([aria-current='false']) {
+    border-inline-start-color: Highlight;
+    font-weight: 700;
+  }
+
+  .ui-app-nav a.is-active::before,
+  .ui-app-nav a[aria-current]:not([aria-current='false'])::before {
+    background: Highlight;
+  }
+}
+
 .ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
@@ -153,6 +188,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: 1.1rem;
+  font-weight: var(--display-weight);
   letter-spacing: var(--tracking-wide);
   margin: 0;
   text-transform: uppercase;
@@ -207,6 +243,7 @@
   color: var(--text);
   font-family: var(--display);
   font-size: 0.95rem;
+  font-weight: var(--display-weight);
   letter-spacing: var(--tracking-wide);
   margin: 0;
   text-transform: uppercase;
@@ -230,15 +267,18 @@
    permanent admin-shell alias (grouped on the canonical rules there —
    identical output). Nothing app-specific left to define here. */
 
-/* --- Mobile rail collapse --- */
-
-.ui-app-rail__toggle {
-  display: none;
-}
+/* --- Mobile rail: collapses to a horizontal scrolling strip --- */
 
 @media (max-width: 880px) {
   .ui-app-shell {
     grid-template-columns: minmax(0, 1fr);
+
+    /* The shell keeps `min-block-size: 100dvh`, so with two auto rows the default
+       `align-content: stretch` distributes the leftover viewport across BOTH
+       tracks — ballooning the horizontal rail to ~half the screen. Pin tracks to
+       their content and let the content row absorb the slack. (component audit C7.) */
+    align-content: start;
+    grid-template-rows: auto 1fr;
   }
 
   .ui-app-rail {
@@ -254,6 +294,15 @@
     display: none;
   }
 
+  /* The rail is flex-row here, so the base `margin-block-start: auto` (which
+     pushed account to the bottom in the column layout) is inert and account can
+     scroll off. Push it to the inline end instead so sign-out stays reachable.
+     (layout review C21.) */
+  .ui-app-rail__account {
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
   .ui-app-nav {
     grid-auto-flow: column;
     gap: 0.15rem;
@@ -269,11 +318,18 @@
     white-space: nowrap;
   }
 
-  .ui-app-nav a.is-active {
+  .ui-app-nav a.is-active,
+  .ui-app-nav a[aria-current]:not([aria-current='false']) {
     border-inline-start: 0;
     border-block-end-color: var(--accent);
   }
 
+  /* No --app-rail-height token exists, so drop the redundant second sticky;
+     only the horizontal rail stays pinned. */
+  .ui-app-topbar {
+    position: static;
+  }
+
   .ui-app-content {
     padding: var(--space-md);
   }

package/css/base.css

@@ -12,7 +12,10 @@ html {
   background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
-  font-size: 15px;
+
+  /* = 15px at the 16px default, but rem honours a user's browser font-size
+     preference (which a px root would ignore). */
+  font-size: 0.9375rem;
   line-height: 1.55;
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
@@ -24,12 +27,16 @@ body {
   background: var(--bg);
   color: var(--text);
   margin: 0;
-  min-block-size: 100vh;
+  min-block-size: 100dvh;
   position: relative;
 }
 
+:root {
+  --scroll-offset: 6rem;
+}
+
 main [id] {
-  scroll-margin-top: 6rem;
+  scroll-margin-block-start: var(--scroll-offset);
 }
 
 ::selection {
@@ -176,6 +183,7 @@ textarea:focus-visible,
 
 .ui-display {
   font-family: var(--display);
+  font-weight: var(--display-weight);
   text-transform: uppercase;
 }
 
@@ -219,13 +227,10 @@ textarea:focus-visible,
     outline-offset: -2px;
   }
 
-  /* The active tab signals selection only via accent colour/border, both
-     flattened by the forced palette — re-assert it with a system colour
-     so the selected tab stays distinguishable (a11y review L3). */
-  .ui-tab.is-active {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
+  /* NB: the active-tab forced-colors re-assert lives in disclosure.css, right
+     after the `.ui-tab.is-active` default — placing it here (an earlier bundle
+     leaf) let the later default win even in forced-colors mode, since @media
+     adds no specificity. (a11y review C10.) */
 
   /* Keyboard focus must never depend on a colour that gets overridden. */
   a:focus-visible,

package/css/bullet.css

@@ -0,0 +1,108 @@
+/* ==========================================================================
+   bullet — opt-in Stephen-Few bullet graph (measure vs target vs bands).
+
+   The canonical "is this measure inside its qualitative budget, and how does it
+   compare to target?" figure: a thin measure bar over 2–3 grayscale qualitative
+   range bands, with a perpendicular target tick. The SLO / error-budget figure
+   `ui-meter` (report.css) structurally cannot encode — a meter is a single
+   label|bar|value reading, a bullet carries bands + target too. Few designed it
+   grayscale on purpose, which is exactly the Nothing palette. Pure CSS,
+   SSR-static, print-survivable. Not imported by core.css.
+
+   Boundary: the HOST normalises EVERY value to 0..1 and sets custom props —
+   `--v` (measure), `--t` (target), `--b1`/`--b2` (the band boundaries). Bronto
+   only paints geometry; it refuses raw values and min/max/scale computation —
+   the same contract as `ui-spark`. A bare bullet is opaque to assistive tech, so
+   `.ui-bullet` MUST carry a host-written `role="img"` + `aria-label` text
+   equivalent (e.g. "uptime 99.62%, inside target 99.9%, in the warning band").
+   Colour is never the only channel — the reading lives in that label.
+   ========================================================================== */
+
+.ui-bullet {
+  --band-lo: 0.5;
+  --band-hi: 0.8;
+
+  background: linear-gradient(
+    to right,
+    var(--surface-4) 0 calc(var(--band-lo) * 100%),
+    var(--surface-3) calc(var(--band-lo) * 100%) calc(var(--band-hi) * 100%),
+    var(--surface-2) calc(var(--band-hi) * 100%) 100%
+  );
+  block-size: 1.25rem;
+  border-radius: var(--radius-sm);
+  inline-size: 100%;
+  position: relative;
+}
+
+/* The measure bar — a thinner dark bar centred in the track, the primary value.
+   `--v` is the normalised reading; with none it collapses to a hairline. */
+.ui-bullet__measure {
+  background: var(--text);
+  border-radius: var(--radius-sm);
+  inline-size: max(2px, calc(var(--v, 0) * 100%));
+  inset-block: 30%;
+  inset-inline-start: 0;
+  position: absolute;
+}
+
+/* Tone a measure for emphasis or status — the meaning still has to be in the
+   aria-label (WCAG 1.4.1), tone is decoration. */
+.ui-bullet__measure--accent {
+  background: var(--accent);
+}
+
+.ui-bullet__measure--pos {
+  background: var(--success);
+}
+
+.ui-bullet__measure--neg {
+  background: var(--danger);
+}
+
+/* The target tick — a full-height perpendicular mark at `--t`. Shape, not
+   colour, distinguishes it from the measure bar (Few's grayscale rule). */
+.ui-bullet__target {
+  background: var(--text);
+  inline-size: 2px;
+  inset-block: 8%;
+  inset-inline-start: calc(var(--t, 0) * 100%);
+  position: absolute;
+  transform: translateX(-50%);
+}
+
+/* Optional caption row beneath the track — label + reading in mono, matching
+   the report meter's value treatment. */
+.ui-bullet__label {
+  color: var(--text-dim);
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: var(--space-sm);
+  justify-content: space-between;
+  letter-spacing: var(--tracking-wide);
+  margin-block-start: 0.3rem;
+}
+
+/* Forced colours flatten the band gradient to one system surface — the bands
+   would merge. Re-assert a track border so the figure keeps a frame, and repaint
+   the marks in the system text colour so measure + target survive (the band
+   distinction is carried by the required aria-label). */
+@media (forced-colors: active) {
+  .ui-bullet {
+    border: 1px solid CanvasText;
+  }
+
+  .ui-bullet__measure,
+  .ui-bullet__target {
+    background: CanvasText;
+  }
+}
+
+/* Print: the bands + marks are background/currentColor fills the print economy
+   would drop. */
+@media print {
+  .ui-bullet {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/code.css

@@ -0,0 +1,98 @@
+/* ==========================================================================
+   code — opt-in fenced-code evidence chrome.
+
+   Paints already-tokenized code: a head bar, an optional line-number gutter
+   (CSS counters), and add / del / highlight line states. It NEVER parses or
+   tokenizes — the host (or Shiki, via the shipped `shiki/nothing.json` token
+   theme) supplies the coloured spans; Bronto owns only the chrome. Code-as-
+   evidence for changelogs, version history, and generated reports; pairs with
+   the `.ui-src` provenance pill and marks. Not imported by core.css.
+
+   Long lines wrap (no horizontal scroll) so the surface prints cleanly. Put a
+   `.ui-code__line` around each line to opt into numbering / line states; plain
+   text inside `.ui-code__body` works too (no numbers).
+   ========================================================================== */
+
+.ui-code {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  overflow: hidden;
+}
+
+.ui-code__head {
+  background: var(--surface-2);
+  border-block-end: 1px solid var(--line);
+  color: var(--text-dim);
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+  padding: var(--space-2xs) var(--space-sm);
+}
+
+.ui-code__body {
+  counter-reset: ui-code-ln;
+  margin: 0;
+  overflow-wrap: anywhere;
+  padding: var(--space-sm) 0;
+  white-space: pre-wrap;
+}
+
+.ui-code__line {
+  display: block;
+  padding-inline: var(--space-sm);
+}
+
+/* Opt-in line-number gutter — counts each `.ui-code__line`. */
+.ui-code--numbered .ui-code__line {
+  padding-inline-start: 0;
+}
+
+.ui-code--numbered .ui-code__line::before {
+  color: var(--text-dim);
+  content: counter(ui-code-ln);
+  counter-increment: ui-code-ln;
+  display: inline-block;
+  inline-size: 3ch;
+  margin-inline-end: var(--space-sm);
+  text-align: end;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit still requires the prefixed slot for this selection opt-out. */
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Line states — the host classifies; Bronto tints. Kept as a faint wash so the
+   token colours stay legible on top. */
+.ui-code__line--add {
+  background: color-mix(in srgb, var(--success) 14%, transparent);
+}
+
+.ui-code__line--remove {
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+}
+
+.ui-code__line--hl {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+/* Forced colours drop the tint — add an inline-start border so the line state
+   still reads without colour. */
+@media (forced-colors: active) {
+  .ui-code__line--add,
+  .ui-code__line--remove,
+  .ui-code__line--hl {
+    border-inline-start: 3px solid currentColor;
+  }
+}
+
+/* Print: the line-state tints are meaning-carrying backgrounds. */
+@media print {
+  .ui-code__head,
+  .ui-code__line--add,
+  .ui-code__line--remove,
+  .ui-code__line--hl {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/connectors.css

@@ -91,3 +91,20 @@
     fill: CanvasText;
   }
 }
+
+/* Print: keep the relationship lines and arrowheads in their meaning-carrying
+   colour, and settle any draw-on to a solid line (the draw needs JS to set
+   pathLength, which never runs for a static PDF). */
+@media print {
+  .ui-connector__path,
+  .ui-connector__end {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .ui-connector--draw .ui-connector__path {
+    animation: none;
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+  }
+}

package/css/content.css

@@ -13,6 +13,11 @@
   font-size: var(--text-base);
   line-height: 1.7;
 
+  /* Machine-generated Markdown carries long unbreakable tokens (URLs, hashes,
+     code) that otherwise force horizontal page scroll on the prose surface
+     itself. Break them. (css-robustness review C9; the table cell already does.) */
+  overflow-wrap: break-word;
+
   /* Readable measure; the container can still be wider for tables/media. */
   --prose-measure: 72ch;
 }
@@ -75,7 +80,7 @@
 
 /* Anchored headings clear a sticky chrome and expose a dot on hover. */
 .ui-prose :is(h1, h2, h3, h4, h5, h6)[id] {
-  scroll-margin-block-start: 6rem;
+  scroll-margin-block-start: var(--scroll-offset);
 }
 
 /* --- Text-level --- */
@@ -99,7 +104,12 @@
   color: var(--text);
 }
 
-.ui-prose mark {
+/* The bare prose `<mark>` is the plain UA-reset highlight. A `<mark class="ui-mark">`
+   is the opt-in marks leaf (marks.css) and must win: this rule is higher-specificity
+   (0,1,1) than `.ui-mark` (0,1,0) and sits in the same `bronto` layer, so without the
+   `:not(.ui-mark)` it silently overrides every `.ui-mark` tone/draw modifier in prose —
+   the most-documented mark usage. (component audit C1.) */
+.ui-prose mark:not(.ui-mark) {
   background: var(--accent-soft);
   color: var(--text);
   padding: 0.02em 0.22em;
@@ -237,7 +247,15 @@
   text-transform: uppercase;
 }
 
-/* --- Table — raw Markdown tables look like ui-table --- */
+/* --- Table — raw Markdown tables look like ui-table ---
+   `display: block` makes a wide markdown table scroll horizontally (markdown
+   emits a bare <table> with no wrappable container, so the scroll has to live on
+   the element itself). Caveat: `display: block` can drop the implicit `table`
+   ARIA role in WebKit/Safari (intact in Chromium/Firefox). It is acceptable here
+   because `.ui-prose` is generated prose, not a data grid — but for a table whose
+   semantics MUST survive on WebKit, author the `.ui-table` component inside a
+   `.ui-table-wrap` instead (the wrap scrolls, the <table> keeps `display: table`),
+   or add `role="table"` to the markdown output. (component audit C29.) */
 
 .ui-prose table {
   border: 1px solid var(--line);
@@ -300,6 +318,7 @@
   display: grid;
   font-family: var(--display);
   font-size: var(--text-xl);
+  font-weight: var(--display-weight);
   gap: var(--space-sm);
   line-height: 1.2;
   margin-block: var(--space-xl);

package/css/crosshair.css

@@ -40,18 +40,19 @@
   position: absolute;
 }
 
+/* Positioned with logical insets, not a physical translateX/Y: --crosshair-x
+   is the offset from the inline-start edge (initCrosshair flips it in RTL), so
+   the vertical rule tracks the pointer correctly in both directions. */
 .ui-crosshair__line--x {
   inline-size: 1px;
   inset-block: 0;
-  inset-inline-start: 0;
-  transform: translateX(var(--crosshair-x));
+  inset-inline-start: var(--crosshair-x);
 }
 
 .ui-crosshair__line--y {
   block-size: 1px;
-  inset-block-start: 0;
+  inset-block-start: var(--crosshair-y);
   inset-inline: 0;
-  transform: translateY(var(--crosshair-y));
 }
 
 /* An axis value chip (host sets its text + which edge it sits on). On the
@@ -84,13 +85,12 @@
   color: var(--text);
   font-family: var(--mono);
   font-size: var(--text-xs);
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  inset-block-start: var(--crosshair-y);
+  inset-inline-start: var(--crosshair-x);
   padding-block: 0.2rem;
   padding-inline: 0.4rem;
   pointer-events: none;
   position: absolute;
-  transform: translate(var(--crosshair-x), var(--crosshair-y));
 }
 
 @media (forced-colors: active) {

package/css/dataviz.css

@@ -30,7 +30,11 @@
   --chart-div-6: oklch(66% 0.13 55deg);
   --chart-div-7: oklch(56% 0.15 45deg);
 
-  /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1). */
+  /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1).
+     Series 1 (the accent) is intentionally `none`: absence-of-pattern IS its
+     redundant channel. The colour palette is CVD-safe on its own (gated by
+     check:charts), so a colour+pattern chart stays distinguishable; a
+     pattern-ONLY chart must still give series 1 a fill or a labelled legend. */
   --chart-pattern-size: 8px;
   --chart-pattern-ink: rgb(0 0 0 / 0.34);
   --chart-pattern-1: none;