@ponchia/ui 0.6.0 → 0.6.4

package/css/dots.css

@@ -348,14 +348,191 @@
   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);
+/* ==========================================================================
+   Data-bound dot surfaces — the reporting/dashboard family. Each is a thin,
+   token-driven leaf over the same lit/dim/accent dot vocabulary: the HOST
+   normalises the data (lights `is-on`, sets `data-level`, or writes `--v`
+   0..1) and the leaf only lays out + tones. None compute a scale, bin, or
+   threshold — that stays with the host (the spark/meter boundary).
+
+   a11y: every one is opaque to assistive tech, so the container MUST carry a
+   host-written `role="img"` + `aria-label` with the exact value/meaning
+   (rounding to whole cells is presentation-only; keep the figure in the label).
+   ========================================================================== */
+
+/* Waffle / unit chart — part-to-whole as an N×N field of lit dots ("73 of
+   100"). Host marks the lit cells with `is-on`. */
+.ui-waffle {
+  display: grid;
+  gap: var(--waffle-gap, 0.18em);
+  grid-template-columns: repeat(var(--waffle-cols, 10), 1fr);
+  inline-size: var(--waffle-size, 7em);
+}
+
+.ui-waffle i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 50%);
+}
+
+.ui-waffle i.is-on {
+  background: var(--field-dot-accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-accent);
+}
+
+/* Activity / contribution grid — density-over-time. A flat list of day cells
+   flows down each weekday column via grid-auto-flow; intensity is a 5-step
+   ramp on `data-level="0..4"` (the host bins data → level). */
+.ui-activity {
+  display: grid;
+  gap: var(--activity-gap, 0.18em);
+  grid-auto-columns: var(--activity-cell, 0.82em);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--activity-rows, 7), 1fr);
+}
+
+.ui-activity i {
+  aspect-ratio: 1;
+  background: var(--field-dot);
+  border-radius: var(--dotmatrix-dot-radius, 2px);
+}
+
+.ui-activity i[data-level='1'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 30%, var(--field-dot));
+}
+
+.ui-activity i[data-level='2'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 55%, var(--field-dot));
+}
+
+.ui-activity i[data-level='3'] {
+  background: color-mix(in oklab, var(--field-dot-accent) 78%, var(--field-dot));
+}
+
+.ui-activity i[data-level='4'] {
+  background: var(--field-dot-accent);
+}
+
+/* LED level meter — a column of discrete segments lit to a threshold (signal /
+   load / VU). Fills from the bottom; host marks lit segments with `is-on`.
+   `--warn`/`--danger` re-point the lit colour for the whole meter when the host
+   crosses a threshold (the host owns the threshold, not the leaf). */
+.ui-level {
+  block-size: var(--level-height, 4em);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--level-gap, 2px);
+  inline-size: var(--level-size, 0.7em);
+}
+
+.ui-level i {
+  background: var(--field-dot);
+  border-radius: var(--radius-sm);
+  flex: 1;
+}
+
+.ui-level i.is-on {
+  background: var(--accent);
+  box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--accent);
+}
+
+.ui-level--warn i.is-on {
+  background: var(--warning);
+}
+
+.ui-level--danger i.is-on {
+  background: var(--danger);
+}
+
+/* Dot gauge — a 0..1 reading (`--v`) as a ring of dots filling along an arc.
+   A conic-gradient sweep (accent up to --v, dim beyond) intersected with a
+   donut-ring × dot-pattern mask, so the lit arc reads as discrete dots. */
+.ui-dotgauge {
+  --_v: var(--v, 0);
+  --_sweep: var(--gauge-sweep, 270deg);
+
+  aspect-ratio: 1;
+  background: conic-gradient(
+    from var(--gauge-from, 135deg),
+    var(--field-dot-accent) calc(var(--_v) * var(--_sweep)),
+    var(--field-dot) calc(var(--_v) * var(--_sweep)) var(--_sweep),
+    transparent var(--_sweep)
+  );
+  border-radius: 50%;
+  inline-size: var(--gauge-size, 5em);
+
+  /* ring (donut) ∩ dot lattice → a ring of dots */
+  /* stylelint-disable property-no-vendor-prefix -- Safari still needs the prefixed mask props. */
+  -webkit-mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  -webkit-mask-composite: source-in;
+  /* stylelint-enable property-no-vendor-prefix */
+  mask:
+    radial-gradient(closest-side, transparent 58%, #000 59%),
+    radial-gradient(circle, #000 34%, transparent 36%) 0 0 / var(--gauge-dot, 0.5em) var(--gauge-dot, 0.5em);
+  mask-composite: intersect;
+}
+
+/* Readout — a row of dot-matrix glyphs forming a big numeric (renderReadout).
+   The glyphs are decorative; the row carries role=img + the value as its name. */
+.ui-readout {
+  align-items: flex-end;
+  display: inline-flex;
+  gap: var(--readout-gap, 0.12em);
 }
 
-.ui-matrix.is-in {
-  clip-path: inset(0 0 0 0);
+.ui-readout__spacer {
+  display: inline-block;
+  inline-size: var(--readout-space, 0.5em);
+}
+
+/* Halftone — render host content (an <img> or a box with its own background)
+   through a dot lattice so a thumbnail/cover takes on the dot look. A style
+   filter, NOT a data viz: the dots are a fixed lattice, not value-modulated. */
+.ui-halftone {
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+  mask: radial-gradient(circle, #000 var(--halftone-dot, 38%), transparent calc(var(--halftone-dot, 38%) + 1%)) 0 0 /
+    var(--halftone-gap, 0.5em) var(--halftone-gap, 0.5em);
+}
+
+/* Density wrapper — make any dot surface inside respond to the CARD it sits in,
+   not the viewport, so the same component reads well in a wide hero and a
+   narrow tile. Opt-in: wrap the surface and the breakpoint below densifies it. */
+.ui-dotfit {
+  container: dotfit / inline-size;
+}
+
+@container dotfit (width < 18rem) {
+  .ui-dotfit .ui-dotgrid {
+    --dot-gap: 8px;
+  }
+
+  .ui-dotfit .ui-activity {
+    --activity-cell: 0.6em;
+  }
+
+  .ui-dotfit .ui-waffle {
+    --waffle-size: 5em;
+  }
+}
+
+/* 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);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -404,6 +581,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;
@@ -413,16 +614,52 @@
     forced-color-adjust: none;
     background: LinkText;
   }
+
+  /* The data-bound dot surfaces encode their value via background-color, which
+     HCM flattens. Opt out and pin the lit state to a system colour so the
+     reading survives. The activity ramp's 5 steps can't all stay distinct under
+     HCM — collapse to present (CanvasText) vs absent (the unstyled track). */
+  .ui-waffle i.is-on,
+  .ui-level i.is-on {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-level--warn i.is-on {
+    background: Mark;
+  }
+
+  .ui-level--danger i.is-on {
+    background: Highlight;
+  }
+
+  .ui-activity i[data-level='1'],
+  .ui-activity i[data-level='2'],
+  .ui-activity i[data-level='3'],
+  .ui-activity i[data-level='4'] {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  /* The gauge is a masked gradient; keep its paint rather than let HCM drop it. */
+  .ui-dotgauge {
+    forced-color-adjust: none;
+  }
 }
 
 /* Print: the dot surfaces carry data (heatmap cells, the segmented meter, the
-   status dot, the masked glyph), so their painted fills must survive the print
-   "economy" default that drops backgrounds. */
+   status dot, the masked glyph, the waffle/activity/level/gauge readings), so
+   their painted fills must survive the print "economy" default that drops
+   backgrounds. */
 @media print {
   .ui-dotmatrix__cell,
   .ui-dotbar i,
   .ui-dot,
-  .ui-icon {
+  .ui-icon,
+  .ui-waffle i,
+  .ui-activity i,
+  .ui-level i,
+  .ui-dotgauge {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }

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

package/css/forms.css

@@ -77,6 +77,16 @@
   opacity: 0.5;
 }
 
+/* Read-only is editable-looking but not editable; give it a distinct, quieter
+   cue (muted fill + default cursor) so it doesn't read as a live field. Not
+   disabled — value still submits and the field stays focusable/selectable.
+   (component audit C28.) */
+.ui-input:read-only:not(:disabled),
+.ui-textarea:read-only:not(:disabled) {
+  background: var(--panel-soft);
+  cursor: default;
+}
+
 /* Disabled affordance parity. The text inputs above style :disabled directly;
    the controls that WRAP a native input (switch/check/segmented) showed no
    disabled cue and their label kept cursor:pointer — a lie. Mirror the cue via
@@ -94,6 +104,8 @@
 /* Keep autofilled fields on-theme — the UA's yellow fill otherwise paints over
    the monochrome surface and breaks the contrast story. (forms review C24.) */
 .ui-input:autofill,
+.ui-select:autofill,
+.ui-textarea:autofill,
 .ui-search input:autofill {
   -webkit-text-fill-color: var(--text);
   box-shadow: inset 0 0 0 100rem var(--bg-elevated);
@@ -106,6 +118,58 @@
   border-color: var(--danger);
 }
 
+/* Wrapper controls (switch / check / segmented) hide their native <input>, so
+   the `[aria-invalid]` the validator sets on it paints nothing — a sighted,
+   non-AT user couldn't see the error (WCAG 1.4.1). Mirror the invalid cue onto
+   the visible surface via :has(), the same way the disabled cue is mirrored.
+   (component audit C7.) */
+.ui-check:has(input[aria-invalid='true']) input {
+  outline: 2px solid var(--danger);
+  outline-offset: 1px;
+}
+
+.ui-switch:has(input[aria-invalid='true']) .ui-switch__track {
+  border-color: var(--danger);
+}
+
+.ui-segmented:has(input[aria-invalid='true']) {
+  border-color: var(--danger);
+}
+
+/* Forced colours flatten `var(--danger)` to a system colour identical to the
+   resting border, so the invalid border becomes indistinguishable from a valid
+   one and sighted HCM users lose the only error cue (WCAG 1.4.1). The switch got
+   a forced-colors block; the error family did not. Re-assert the state on a
+   NON-colour channel — a thicker, doubled border — that survives HCM, and prefix
+   the error hint with a glyph so the message itself carries the error.
+   (component audit C5.) */
+@media (forced-colors: active) {
+  .ui-input[aria-invalid='true'],
+  .ui-select[aria-invalid='true'],
+  .ui-textarea[aria-invalid='true'] {
+    border-style: double;
+    border-width: 3px;
+  }
+
+  /* Same NON-colour re-assertion for the wrapper controls (C7): a thicker,
+     doubled outline/border survives the HCM colour flattening. */
+  .ui-check:has(input[aria-invalid='true']) input {
+    outline-width: 3px;
+    outline-style: double;
+  }
+
+  .ui-switch:has(input[aria-invalid='true']) .ui-switch__track,
+  .ui-segmented:has(input[aria-invalid='true']) {
+    border-style: double;
+    border-width: 3px;
+  }
+
+  .ui-hint--error::before,
+  .ui-error-summary__title::before {
+    content: '⚠ ';
+  }
+}
+
 .ui-hint {
   color: var(--text-dim);
   font-size: var(--text-2xs);
@@ -139,14 +203,18 @@
   border-end-end-radius: var(--radius-md);
 }
 
-.ui-input-group > .ui-input:focus-visible {
-  z-index: 1; /* keep the focus ring above the adjacent addon border */
+.ui-input-group > .ui-input:focus-visible,
+.ui-input-group > .ui-select:focus-visible {
+  z-index: 1; /* keep the focus ring above the adjacent addon border (select too — audit C29) */
 }
 
 .ui-input-group__addon {
   align-items: center;
   background: var(--panel-soft);
-  border: 1px solid var(--line);
+
+  /* Match the wrapped control's `--line-strong` border so the prefix/suffix seam
+     isn't a fainter cap than the field it abuts. (component audit C33.) */
+  border: 1px solid var(--line-strong);
   color: var(--text-dim);
   display: flex;
   font-size: var(--text-sm);

package/css/legend.css

@@ -90,10 +90,13 @@
   inline-size: 1.1rem;
 }
 
-/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. */
+/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. Match the
+   __swatch fallback chain exactly (--chart-color → --chart-1 → --accent): without
+   the --chart-1 layer, a symbol and a swatch for the SAME series diverge to two
+   colours whenever a theme overrides --chart-1. (audit C22.) */
 .ui-legend__symbol {
   block-size: 0.95rem;
-  color: var(--chart-color, var(--accent));
+  color: var(--chart-color, var(--chart-1, var(--accent)));
   flex: 0 0 auto;
   inline-size: 0.95rem;
 }

package/css/motion.css

@@ -52,6 +52,28 @@
   }
 }
 
+/* Scroll-driven reveal (`.ui-scroll-reveal`). Unlike the time-based uiRise, a
+   scroll timeline can FREEZE part-way: an element near the document bottom can't
+   scroll far enough to finish its range, so a fade-to-opacity-1 would strand the
+   content permanently transparent. Reach full opacity early (35%) and hold it,
+   so even a partially-driven reveal is fully legible — only the last few px of
+   the rise are left unfinished. (component audit C9.) */
+@keyframes uiScrollReveal {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  35% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes uiDotIn {
   0% {
     opacity: 0;
@@ -158,10 +180,13 @@
   animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both;
 }
 
-/* Stagger children: set --i on each child (or use nth-child cap). */
+/* Stagger children: set --i on each child (or use nth-child cap). Cap the manual
+   --i path at index 6 (360ms) to match the .ui-stagger--auto ceiling — a long
+   list with --i:30 would otherwise hold the last child at opacity:0 for 1.8s
+   before popping in. (audit C32.) */
 .ui-stagger > * {
   animation: uiRise var(--duration-slow) var(--ease-spring) both;
-  animation-delay: calc(var(--i, 0) * 60ms);
+  animation-delay: calc(min(var(--i, 0), 6) * 60ms);
 }
 
 .ui-stagger--auto > *:nth-child(1) {
@@ -193,11 +218,17 @@
 }
 
 /* Reveal-on-scroll: add .ui-reveal, then toggle .is-visible (e.g. from an
-   IntersectionObserver you own) to play it in. For a ZERO-JS reveal, use
-   `.ui-scroll-reveal` (scroll-driven, CSS-only) instead — that is the path for
-   an LLM-authored or no-build report. The hidden initial state below is gated
-   on `scripting: enabled`, so with scripting OFF the content is fully visible
-   and never silently hidden behind a script that will never run. */
+   IntersectionObserver you own) to play it in.
+
+   ⚠ `.ui-reveal` requires you to wire that observer. The hidden initial state is
+   gated only on `scripting: enabled` — it can't detect whether an observer is
+   actually attached, so merely loading bronto.js (or any script) hides every
+   `.ui-reveal` until YOUR code adds `.is-visible`. If you add the class and never
+   wire the toggle, the content stays invisible. For an LLM-authored or no-build
+   report, DON'T use `.ui-reveal` — use `.ui-scroll-reveal` below (scroll-driven,
+   CSS-only, no observer, and it can never strand content invisible). With
+   scripting OFF, `.ui-reveal` content is fully visible and never silently hidden
+   behind a script that will never run. */
 @media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
   .ui-reveal {
     opacity: 0;
@@ -246,10 +277,12 @@
 
 /* --- Scroll-driven (progressive enhancement) — the scroll/view timeline
    IS the engine, no JS. Everything is gated on `@supports
-   (animation-timeline: …)` so engines without it (today, Firefox/Safari)
-   keep the static end state, and on `prefers-reduced-motion: no-preference`
-   (a scroll timeline ignores animation-duration, so the global reduced-motion
-   reset below can't neutralise it — it must be gated here). --- */
+   (animation-timeline: …)` so an engine without it keeps the static end state
+   (as of 2026 Chrome 115+ and Safari 18.4+ drive scroll()/view(); Firefox is
+   the remaining holdout, still graceful via the @supports gate), and on
+   `prefers-reduced-motion: no-preference` (a scroll timeline ignores
+   animation-duration, so the global reduced-motion reset below can't neutralise
+   it — it must be gated here). --- */
 
 /* Reading-progress bar. Fixed hairline that fills with document scroll;
    unsupported → a static, empty (scaleX(0)) bar. Pair with role="progressbar"
@@ -270,6 +303,30 @@
   transform-origin: 100% 50%;
 }
 
+/* Forced colours (HCM) flatten the spinner's accent top-border and its --line
+   rest to one system colour, so the ring looks uniform with no visible sweep,
+   and the scroll-progress bar can vanish into the canvas. Re-assert distinct
+   system colours so each keeps a visible channel; AT is already covered via
+   aria-busy / role="status" / role="progressbar". (component audit C35.) */
+@media (forced-colors: active) {
+  .ui-spinner {
+    border-color: CanvasText;
+    border-block-start-color: Highlight;
+  }
+
+  .ui-scroll-progress {
+    background: Highlight;
+  }
+
+  /* HCM strips the shimmer gradient, leaving an invisible box where a loading
+     placeholder should be. Give it a system-colour border so the skeleton
+     still reads as present. Same decorative-loading family as the spinner +
+     scroll-progress above. (audit C15.) */
+  .ui-skeleton {
+    border: 1px solid CanvasText;
+  }
+}
+
 @supports (animation-timeline: scroll()) {
   @media (prefers-reduced-motion: no-preference) {
     .ui-scroll-progress {
@@ -284,13 +341,21 @@
 
 /* Reveal-on-scroll with no JS and no IntersectionObserver: the element
    rises + fades as it scrolls into view. Unsupported → fully visible
-   (the `uiRise` end state), same graceful default as `.ui-reveal`. */
+   (the keyframe end state), same graceful default as `.ui-reveal`.
+
+   The range is `entry 0% entry 100%`, NOT the old `cover 40%`: `cover` only
+   completes once the element has scrolled most of the way THROUGH the viewport,
+   which an element near the document bottom can never do — it froze part-way,
+   leaving a conclusion section permanently semi-transparent (C9). `entry`
+   completes the moment the element is fully in view, which any scroll-to-bottom
+   reaches. Paired with the early-opacity uiScrollReveal keyframe, an element
+   taller than the viewport is legible even if its range never fully completes. */
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     .ui-scroll-reveal {
-      animation: uiRise linear both;
+      animation: uiScrollReveal linear both;
       animation-timeline: view();
-      animation-range: entry 0% cover 40%;
+      animation-range: entry 0% entry 100%;
     }
   }
 }