@ponchia/ui 0.6.0 → 0.6.4

package/css/app.css

@@ -118,6 +118,25 @@
   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);
@@ -253,6 +272,13 @@
 @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 {

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/content.css

@@ -104,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;
@@ -242,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);

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/diff.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   diff — opt-in line/row change-review grammar.
+
+   The review counterpart to the report layer: marks call out a sentence, diff
+   calls out what CHANGED. A CSS-grid gutter grammar for added / removed /
+   context rows with a redundant +/− sign glyph (so the meaning survives forced
+   colours and print, where the tint is dropped), tone tints, and tabular
+   line-number gutters. Not imported by core.css.
+
+   Boundary: the HOST supplies pre-classified rows — it owns tokenizing, hunk
+   computation, and row alignment; Bronto only paints. The moment this parsed or
+   aligned source it would cross the line that deleted the bar renderer in
+   0.6.0. Pairs with `.ui-compare--2up` and the `.ui-src` provenance pill.
+
+   Unified (default): rows are direct children of `.ui-diff` (or a
+   `.ui-diff__hunk` rowgroup); columns are [old-ln] [new-ln] [code].
+   Split: `.ui-diff--split` holds two `.ui-diff__pane` columns, each [ln] [code];
+   the host emits the matching rows per side.
+
+   Long lines wrap (no horizontal scroll) so the surface prints cleanly; line
+   numbers pin to the top of a wrapped line. Line numbers are `user-select:none`
+   and should be `aria-hidden` in markup — the `__code` carries the content.
+   ========================================================================== */
+
+.ui-diff {
+  --diff-add-bg: color-mix(in srgb, var(--success) 14%, transparent);
+  --diff-remove-bg: color-mix(in srgb, var(--danger) 14%, transparent);
+  --diff-add-ink: var(--success);
+  --diff-remove-ink: var(--danger);
+
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  display: grid;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  grid-template-columns: auto auto minmax(0, 1fr);
+  line-height: 1.6;
+  overflow: hidden;
+}
+
+/* Split view: two independent panes side by side. Each pane is its own
+   [ln] [code] grid; the host aligns rows across panes (its job). */
+.ui-diff--split {
+  grid-template-columns: 1fr 1fr;
+}
+
+.ui-diff__pane {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.ui-diff--split > .ui-diff__pane + .ui-diff__pane {
+  border-inline-start: 1px solid var(--line);
+}
+
+/* A hunk groups rows under an optional header without breaking the grid:
+   display:contents keeps its rows as the grid's own items. */
+.ui-diff__hunk {
+  display: contents;
+}
+
+/* Rows are layout-transparent — their cells are the real grid items, so the
+   tone tint paints on the cells (a display:contents row generates no box, and
+   the custom properties still inherit down the DOM to the cells). */
+.ui-diff__row {
+  display: contents;
+}
+
+/* The hunk / file header spans every column. */
+.ui-diff__head {
+  background: var(--surface-2);
+  color: var(--text-dim);
+  grid-column: 1 / -1;
+  padding: var(--space-2xs) var(--space-sm);
+}
+
+.ui-diff__ln {
+  align-self: start;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  padding: 0 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;
+}
+
+.ui-diff__code {
+  overflow-wrap: anywhere;
+  padding: 0 var(--space-sm);
+  white-space: pre-wrap;
+}
+
+/* The redundant sign glyph in the code gutter — a non-colour channel, so add /
+   remove still read once the tint is dropped (forced colours, print economy).
+   Context defaults to a non-breaking space so the code column stays aligned. */
+.ui-diff__code::before {
+  color: var(--diff-tint, var(--text-dim));
+  content: var(--diff-sign, '\00a0');
+  display: inline-block;
+  inline-size: 1ch;
+  margin-inline-end: var(--space-2xs);
+  /* 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;
+}
+
+.ui-diff__row--add {
+  --diff-sign: '+';
+  --diff-tint: var(--diff-add-ink);
+}
+
+.ui-diff__row--remove {
+  --diff-sign: '\2212'; /* − U+2212 minus sign (decorative; not copied) */
+  --diff-tint: var(--diff-remove-ink);
+}
+
+.ui-diff__row--context {
+  --diff-sign: '\00a0';
+}
+
+.ui-diff__row--add > .ui-diff__ln,
+.ui-diff__row--add > .ui-diff__code {
+  background: var(--diff-add-bg);
+}
+
+.ui-diff__row--remove > .ui-diff__ln,
+.ui-diff__row--remove > .ui-diff__code {
+  background: var(--diff-remove-bg);
+}
+
+/* Forced colours drop the tint — the +/− glyph already carries the channel; add
+   an inline-start border on the changed code cell as a second, colour-free cue. */
+@media (forced-colors: active) {
+  .ui-diff__row--add > .ui-diff__code,
+  .ui-diff__row--remove > .ui-diff__code {
+    border-inline-start: 2px solid currentColor;
+  }
+}
+
+/* Print: the tints are meaning-carrying backgrounds, so force them through the
+   print "economy" default that would otherwise drop them. */
+@media print {
+  .ui-diff__head,
+  .ui-diff__row--add > .ui-diff__ln,
+  .ui-diff__row--add > .ui-diff__code,
+  .ui-diff__row--remove > .ui-diff__ln,
+  .ui-diff__row--remove > .ui-diff__code {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/disclosure.css

@@ -303,14 +303,23 @@
     color var(--duration-fast) var(--ease-standard);
 }
 
-.ui-pagination__item.is-active {
+/* Active page keys on BOTH `.is-active` and `[aria-current]` — usage.md calls
+   aria-current "the framework rule", and every nav sibling (breadcrumb, sitenav,
+   app-nav) highlights on it, so a pagination author who sets only aria-current
+   must still get the highlight. (component audit C17.) */
+.ui-pagination__item.is-active,
+.ui-pagination__item[aria-current]:not([aria-current='false']) {
   border-color: var(--accent);
   color: var(--accent-text);
 }
 
 /* Disabled covers BOTH the native `<button disabled>` the demo ships and the
-   `aria-disabled="true"` ARIA path; `pointer-events: none` makes the
-   aria-disabled item genuinely inert (it was clickable before — C5). */
+   `aria-disabled="true"` ARIA path. `pointer-events: none` blocks POINTER
+   activation only — a focused aria-disabled item still fires on Enter/Space
+   (CSS can't intercept keys). For a fully-inert control prefer native
+   `<button disabled>`, run `initDisabledGuard()` (intercepts Enter/Space), or
+   pair aria-disabled with `tabindex="-1"`. See docs/usage.md "Disabled vs
+   aria-disabled". (audit C4.) */
 .ui-pagination__item[aria-disabled='true'],
 .ui-pagination__item:disabled {
   cursor: not-allowed;
@@ -319,7 +328,12 @@
 }
 
 @media (hover: hover) {
-  .ui-pagination__item:not(.is-active, [aria-disabled='true'], :disabled):hover {
+  .ui-pagination__item:not(
+      .is-active,
+      [aria-current]:not([aria-current='false']),
+      [aria-disabled='true'],
+      :disabled
+    ):hover {
     border-color: var(--line-strong);
     color: var(--text);
   }