Lean on the platform: native overlays, themed select picker, and native-grade CSS polish

[developit]

Summary

Two rounds of work that push kinu further onto native DOM and CSS features, so behaviour that
competitors reimplement in JavaScript comes from the browser instead. Round 1 was the styling layer
(squircles, materials, elevation, scroll-driven effects). Round 2 went after the platform layer —
the overlay engine, the <select> picker, and a set of small feature-detected wins.

Everything is progressively enhanced: each feature sits behind @supports or a runtime check, and
browsers without it keep exactly today's behaviour. Rebased onto the swipe-to-dismiss work (#124)
and the theming-token work (#126 / #129) — see the two Interaction sections below.

Bug fixes

Four real defects surfaced while auditing the DOM layer:

• Toasts rendered below open modals. The container was a z-index: 1000 fixed div, and
  nothing can out-z-index the top layer that showModal() uses. The container is now a manual
  popover, so it joins the top layer. Top-layer stacking is insertion-ordered, so it re-promotes
  itself when new toasts arrive and when another top-layer element opens.
• AlertDialog light-dismissed on outside click. It was a verbatim re-export of Dialog, so an
  alert could be dismissed by clicking away — the one thing an alert shouldn't allow. It is now a
  real wrapper defaulting to closedby="closerequest" (Escape still closes).
• The adaptive mobile="drawer" conversion never fired for native events. Its beforetoggle
  interception listened on the bubble phase, and toggle events don't bubble; it now listens on
  capture.
• Modal scrims blurred instantly instead of fading. The scrim's opacity transitioned over
  300ms but backdrop-filter was static, so the blur hit full strength on the first frame, held
  until display: none, then snapped back to sharp — measured mid-open, the page behind was fully
  blurred while the dim was only half in. Blur now transitions with the opacity and tracks the
  finger during a swipe.

Overlay engine: the Popover API

Popover, DropdownMenu and Combobox now open via the Popover API (<dialog popover>), which buys:
top layer (no more clipping under an ancestor's overflow, no z-index fights), native light
dismiss and Escape, and correct nested-menu management.

This engages only where the Popover API and CSS anchor positioning are both available. That
pairing is deliberate: a top-layer popover without anchor positioning would resolve its fallback
position against the viewport instead of its trigger, so the two ship together or not at all.
Everything else keeps the previous <dialog>.show() path.

• Triggers issue command="toggle-popover"; the command polyfill maps popover commands onto dialog
  methods on the fallback path, makes close close the target however it's shown, and restores
  dialog.show()'s focus behaviour after opening a popover so menu arrow-key navigation still works.
• The polyfill stays installed alongside native Invoker Commands on purpose — kinu issues commands
  from non-<button> sources, and its preventDefault suppresses native double-invocation.
• Modals (Dialog/Sheet/Drawer/ContextMenu) default to closedby="any"; the JS backdrop hit-test
  remains as a fallback and honours the same attribute either way.

Themed <select> picker

Where appearance: base-select is supported, the open drop-down renders with kinu's overlay
treatment — squircle radius, elevation, material translucency, item-styled options with a tinted
::checkmark, and the @starting-style open animation. Zero JavaScript; other engines keep
their native popup untouched.

Styling polish

• Squircle corners (corner-shape) on rounded-rectangle surfaces, via a curated allow-list so
  pills, circles and thin bars keep their true shape.
• Radii compensated for squircles. A squircle cuts its corner less deeply than a circle of the
  same radius, so the same number reads as under-rounded. The --k-radius-1..4 ramp now hangs off
  a derived --k-corner-radius, which under @supports (corner-shape: squircle) resolves to
  calc(var(--k-radius) * 1.8408964) — the ratio that matches corner depth, 1 + 2^(-1/4). You
  still theme in round-corner terms via --k-radius, and browsers without corner-shape render
  exactly the radii they do today. Components too small to hold the larger radius cap it, so
  checkboxes, kbd, badges, tabs, toggles, skeletons and the date/time inputs keep their shape
  instead of clamping to pills.
• The elevation scale (--k-shadow-1/2/3) is tinted from a single hue rather than pure black:
  retune every elevated surface by moving --k-shadow-hsl alone, and it darkens under
  prefers-contrast. Values and role ordering are unchanged, so themes overriding the three tokens
  are unaffected.
• Translucent "material" surfaces on floating menus, hover cards and toasts.
• Modal scrim blur is now a token (--k-backdrop-blur) that animates with the dimming and tracks
  swipe gestures, and drops to none under prefers-reduced-transparency and forced-colors.
• Scroll-driven edge fades on ScrollArea; native ::scroll-marker carousel dots.
• Tabular figures, accent/caret theming, and optical text wrapping/trimming
  (text-wrap: balance/pretty, text-box: trim-both).

Smaller platform wins

• Firefox finally gets themed scrollbars — scrollbar-color for engines without
  ::-webkit-scrollbar, gated so Chromium keeps its richer WebKit styling — plus
  scrollbar-gutter: stable to stop layout shift.
• Sticky table headers cast a shadow only while actually stuck, via scroll-state() container
  queries.
• Anchored overlays hide when their trigger scrolls out of view (position-visibility).
• New opt-in virtual attribute on List and Tree: content-visibility renders rows on demand with
  no virtualization library, and unlike JS virtualization the content stays in the DOM for
  find-in-page and assistive tech.
• Combobox/Listbox highlight matched substrings with the Custom Highlight API — no wrapper
  elements, no DOM mutation.
• HoverCard wires up interestfor + popover="hint" where Interest Invokers exist, so keyboard
  focus and touch long-press can finally open it (the CSS :hover path had neither). Attributes
  are only set when supported, so the fallback is untouched elsewhere.
• New opt-in <ColorPicker eyedropper> renders a screen-sampling button where the EyeDropper API
  exists.

Behaviour changes worth knowing

• AlertDialog no longer closes on an outside click (see above).
• Toasts now paint above modal surfaces rather than behind them.
• Popover/Dropdown/Combobox content is in the top layer on supporting browsers, so it is no longer
  clipped by ancestor overflow — and consumer CSS targeting the shown state should match
  :is([open], :popover-open) rather than [open] alone.
• Corner radii render larger under squircles by design (the compensation above); themes that
  hard-code px radii opt out of it, as they already opt out of --k-radius.
• Modal scrim blur ramps rather than appearing instantly; override --k-backdrop-blur (including
  none) to tune or disable it.

Interaction with #124 (swipe-to-dismiss)

Both branches reworked the overlay layer, so the merge was resolved on meaning rather than text:

• mobile="drawer" overlays still take the --modal → showModal() path, which sets [open] —
  exactly what Swipe-to-dismiss for Drawer, Sheet, Sidebar and mobile="drawer" overlays #124's swipe CSS keys on. Popover mode applies on desktop.
• In the shared click handler, the swipe-rail hit test runs first: a swipe overlay spans the
  whole viewport, so its dismiss taps land inside the dialog box, where native light dismiss can
  never fire. The closedby-aware backdrop fallback runs after it.
• SheetContent keeps Swipe-to-dismiss for Drawer, Sheet, Sidebar and mobile="drawer" overlays #124's [k="sheet-panel"] wrapper and gains closedby="any".
• Swipe-to-dismiss for Drawer, Sheet, Sidebar and mobile="drawer" overlays #124's k-swipe-fade keyframes now interpolate backdrop-filter too, so the scrim blur tracks
  the swipe alongside the dimming it already drove.

Interaction with #126 / #129 (theme system + token refactor)

Those PRs introduced a radius ramp and an elevation scale covering the same ground as this branch,
so the two were reconciled into one model rather than left side by side:

• Radius — the compensation moved under the ramp: --k-radius-1..4 hang off
  --k-corner-radius, so every step is compensated from one anchor and components keep using the
  ramp vocabulary the refactor introduced. That removed ~30 files of token renaming from this branch.
• Elevation — kept the merged --k-shadow-1/2/3 names and role ordering (themes override all
  three, so renaming would break them) and moved this branch's tinting onto them.
• base.css — dropped this branch's hard-coded ::selection rule in favour of the tokenized
  --k-selection-bg one, which it would otherwise have shadowed and made un-themeable; the Firefox
  scrollbar now reads --k-scrollbar-thumb so both engines follow the same token.
• Tabs needed new caps: the density ramp makes a tab ~25px tall inside a 32px strip, where the
  compensated radius clamps to a pill. The strip caps at 0.75rem and the tab (and its sliding
  indicator) at 0.5625rem — the strip's cap minus its 3px padding, so corners stay concentric.

Size

Measured against main rebuilt at the current commit:

Scenario	main (brotli)	this PR	delta
One component (Button)	0.78 KiB	0.78 KiB	±0.00
A few components (Button + Input + Dialog + Popover + Tabs)	2.89 KiB	3.02 KiB	+0.13
Nearly all components (namespace import)	14.32 KiB	16.80 KiB	+2.48

The overlay engine is close to JS-neutral — the polyfill gating offsets the additions — so most of
the delta is CSS, and a single-component build is unchanged.

Testing

pnpm build, pnpm tsc and the full suite pass (62 tests, including the swipe suite running
against the rewritten commands.ts); Biome holds at its existing baseline. Verified in Chromium 152:

• Desktop — dropdown opens as :popover-open with real-click light dismiss, Escape, arrow-key
  navigation and item-click close; AlertDialog refuses outside clicks while Dialog accepts them;
  themed base-select picker; combobox filtering with Highlight ranges registered; hover card opens
  on keyboard focus; toast renders above an open modal.
• Touch emulation — mobile="drawer" converts correctly ([open], :modal, --swipe: y,
  scroller jumped to its open position) and dismisses on a swipe to the rail; Drawer and Sheet
  swipe behaviour intact; [k="sheet-panel"] present alongside closedby.
• Backdrop — blur sampled frame by frame through open and close, tracking opacity to two
  decimal places in both directions; blur follows scroll position mid-swipe; none under
  emulated prefers-reduced-transparency with the dimming retained.
• Radii, three ways — squircle (compensated), the no-corner-shape fallback (identical to
  today's radii), and under the claw theme, where claw's --k-radius flows through the
  compensation while its own literal radii and its --k-shadow-* / --k-selection-bg overrides
  still win. No component exceeds 45% of its short side in any mode.

https://claude.ai/code/session_01F3Jt1mTthRAT6HwyXQqqma

[netlify]

✅ Deploy Preview for kinu-sh ready!

Name	Link
🔨 Latest commit	13f51a3
🔍 Latest deploy log	https://app.netlify.com/projects/kinu-sh/deploys/6a8b3096e1c1c20008dfe281
😎 Deploy Preview	https://deploy-preview-132--kinu-sh.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Size Change: +7.17 kB (+16.98%) ⚠️

Total Size: 49.4 kB

📦 View Changed

Filename	Size	Change
benchmarks/size/.tmp/few-components/bundle.css	3.15 kB	+272 B (+9.45%)	🔍
benchmarks/size/.tmp/nearly-all-components/bundle.css	14.3 kB	+1.88 kB (+15.11%)	⚠️
benchmarks/size/.tmp/nearly-all-components/bundle.js	5.83 kB	+1.36 kB (+30.34%)	🚨
benchmarks/size/.tmp/one-component/bundle.css	780 B	+1 B (+0.13%)
dist/index.css	14.4 kB	+1.91 kB (+15.29%)	⚠️
dist/index.js	8.44 kB	+1.72 kB (+25.64%)	🚨
dist/themes/claw.css	1.72 kB	+19 B (+1.12%)

ℹ️ View Unchanged

Filename	Size
benchmarks/size/.tmp/few-components/bundle.js	491 B
benchmarks/size/.tmp/one-component/bundle.js	203 B

_{compressed-size-action}