@ponchia/ui 0.6.0 → 0.6.3

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);
   }

package/css/dots.css

@@ -348,14 +348,20 @@
   animation-delay: 0.63s;
 }
 
-/* Matrix-reveal wrapper — content wipes in left→right on .is-in. */
-.ui-matrix {
-  clip-path: inset(0 100% 0 0);
-  transition: clip-path var(--duration-slow) var(--ease-out);
-}
+/* 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
+   invisible to every no-JS/static/print reader. Same graceful default as
+   `.ui-reveal`. (component audit C12.) */
+@media (scripting: enabled) {
+  .ui-matrix {
+    clip-path: inset(0 100% 0 0);
+    transition: clip-path var(--duration-slow) var(--ease-out);
+  }
 
-.ui-matrix.is-in {
-  clip-path: inset(0 0 0 0);
+  .ui-matrix.is-in {
+    clip-path: inset(0 0 0 0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -404,6 +410,30 @@
     background: ButtonText;
   }
 
+  /* Brand/live dots aren't status tones, but they still encode meaning via
+     background-color alone, which HCM flattens. Keep them on a distinct,
+     opted-out system colour for completeness. (audit C31.) */
+  .ui-dot--accent,
+  .ui-dot--live {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-dot--live::after {
+    border-color: LinkText;
+  }
+
+  /* The masked one-node icon paints `background: currentcolor` through an SVG
+     mask. Under HCM, forced-color-adjust:auto can drop the mask fill so the
+     glyph vanishes (white-on-white) — yet .ui-icon is the recommended
+     icon-at-scale path AND backs .ui-legend__symbol, and the print block
+     already special-cases it. Opt out and pin the fill to the system text
+     colour so the glyph stays visible. (audit C1.) */
+  .ui-icon {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
   .ui-dotmatrix__cell--hot {
     forced-color-adjust: none;
     background: Highlight;

package/css/feedback.css

@@ -4,6 +4,19 @@
    never a fill. Nothing-flat, hairline, sharp.
    ========================================================================== */
 
+/* `--value` drives the progress/meter fill width: a UNITLESS number 0–100,
+   never a percentage. Registering it as `<number>` makes that contract real —
+   a stray `--value: 50%` is invalid against the typed syntax and falls back to
+   the initial `0` (empty bar) instead of poisoning the `clamp()` and painting a
+   FULL bar (the old failure mode). It inherits so the value set on the host
+   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`.
+   (component audit C8.) */
+@property --value {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 /* --- Alert / callout — inline, dismissible-compatible --- */
 
 .ui-alert {
@@ -50,7 +63,7 @@
   margin: 0;
 }
 
-.ui-alert__dismiss {
+.ui-alert__close {
   background: transparent;
   border: 0;
   color: var(--text-dim);
@@ -62,7 +75,7 @@
   padding: 0.1rem 0.3rem;
 }
 
-.ui-alert:has(.ui-alert__dismiss) {
+.ui-alert:has(.ui-alert__close) {
   grid-template-columns: auto 1fr auto;
 }
 
@@ -107,7 +120,7 @@
 }
 
 @media (hover: hover) {
-  .ui-alert__dismiss:hover {
+  .ui-alert__close:hover {
     color: var(--text);
   }
 }
@@ -216,7 +229,7 @@
    tap-target floor (2.9rem, as in primitives.css / forms.css) without changing
    the desktop glyph size. The box is centred so the glyph stays put. */
 @media (pointer: coarse) {
-  .ui-alert__dismiss,
+  .ui-alert__close,
   .ui-toast__close {
     display: inline-grid;
     place-items: center;
@@ -224,7 +237,7 @@
     min-inline-size: 2.9rem;
   }
 
-  .ui-alert__dismiss {
+  .ui-alert__close {
     padding: 0;
   }
 }
@@ -453,6 +466,18 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-progress--indeterminate .ui-progress__bar {
     animation-duration: 0.01ms;
+
+    /* A still, solid, full-width bar reads as "100% complete" — the opposite of
+       indeterminate. Fall back to a static diagonal hatch that fills the track
+       (so it's clearly active) but doesn't read as done. AT is covered via
+       aria-busy. (audit C26.) */
+    background: repeating-linear-gradient(
+      -45deg,
+      var(--accent) 0,
+      var(--accent) 0.3rem,
+      color-mix(in srgb, var(--accent) 35%, transparent) 0.3rem,
+      color-mix(in srgb, var(--accent) 35%, transparent) 0.6rem
+    );
     inset-inline-start: 0;
     inline-size: 100%;
   }
@@ -467,7 +492,9 @@
    (task progress, can be indeterminate), a meter shows a measured static
    value for data display (coverage, capacity, a KPI against a target).
    Drive the fill with the same --value knob as progress; tone the fill by
-   threshold. Author role="meter" + aria-valuenow/min/max for AT. --- */
+   threshold. Author role="meter" + aria-valuenow/min/max for AT — but role=meter
+   has uneven AT support, so keep the visible .ui-meter__label/__value (they are
+   the real channel, not just decoration). (component audit C25.) --- */
 
 .ui-meter {
   background: var(--panel-soft);
@@ -534,7 +561,12 @@
   font-size: var(--text-xs);
   gap: 0.5rem;
   letter-spacing: var(--tracking-wide);
-  min-inline-size: max-content;
+
+  /* Prefer the natural one-line width, but never wider than the container: a
+     long step label at `max-content` couldn't shrink and overflowed the page on
+     narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
+     over-long label wrap instead of overflowing. (component audit C18.) */
+  min-inline-size: min(100%, max-content);
   text-transform: uppercase;
 }