Fix Firefox: wheels, dark shadows, theme glass, smooth jumps, tri-state

Found by driving Firefox 158 with real pointer, wheel and key input.

- Time picker wheels used padding to reach the last rows. Firefox leaves
  bottom padding out of the scrollable area, so the last rows were
  unreachable and the 24H/AM/PM wheel could not scroll at all. Spacer
  pseudo-elements replace the padding.
- Wheels can now be dragged with a mouse or pen, with inertia, a rubber-band
  at the ends and a spring back. Touch is left to the platform.
- Theme changes no longer use a page-wide view transition. The snapshot
  could not blur what sits behind frosted glass, so every frosted surface
  went clear for the length of the cross-fade.
- Dark shadows were invisible: black on a near-black canvas, with a deep
  negative spread tucking the blur under the element. The dark canvas is
  lifted, the shadows are stronger and the spreads milder.
- Same-page links now travel (scroll-behavior: smooth, motion permitting).
- data-nv-tristate: a checkbox that cycles unchecked, checked, partial; the
  browser can display a partial state but a click can never choose it.
- Button groups show their pressed segment.

GUIDELINES.md gains the cross-engine rules these defects taught, and makes
Firefox the first browser to verify in.

check.py, build.py and build.py --check pass.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nexoniarz 2026-10-28 09:50:40 +01:00
commit 65d81481bd
9 changed files with 253 additions and 48 deletions

View file

@ -65,8 +65,11 @@
inline-size: 3.5rem;
block-size: calc(var(--_row) * var(--_rows));
margin: 0;
padding: calc(var(--_row) * (var(--_rows) - 1) / 2) 0;
padding: 0;
list-style: none;
cursor: grab;
user-select: none;
touch-action: pan-y;
overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-type: y mandatory;
@ -86,6 +89,21 @@
display: none;
}
/* Spacers, not padding: they let the first and last rows reach the centre.
Firefox leaves the bottom padding of a scroll container out of its
scrollable area, which stranded the last rows (and made a three-row wheel
unscrollable); real boxes always count. */
.nv-timepicker__column::before,
.nv-timepicker__column::after {
content: "";
display: block;
block-size: calc(var(--_row) * (var(--_rows) - 1) / 2);
}
.nv-timepicker__column[data-nv-dragging] {
cursor: grabbing;
}
.nv-timepicker__column:focus-visible {
outline: none;
border-radius: var(--nv-radius-md);