actual-css 0.12.0 → 0.14.0

package/src/css/forms/form-actions.css

@@ -21,15 +21,12 @@
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
 
-/* The policy hooks write the properties themselves rather than relaying
-   --cluster-*: a relay would inherit into any .cluster nested in the row.
-   These are equal-specificity overrides of .cluster, so they win only because
-   forms load after layout in the official bundle (tests/css-audit.test.js
-   guards the order); utilities load later and keep the author's last word. On
-   this row --cluster-justify/--cluster-align have no effect. */
+/* The role relays its policy into the row's cluster hooks. Cluster hooks stop
+   at every nested .cluster, so the relay cannot leak, and this class beats the
+   cluster's zero-specificity reset in any import order. */
 .form-actions {
-  align-items: var(--form-actions-align, center);
-  justify-content: var(--form-actions-justify, flex-start);
+  --cluster-align: var(--form-actions-align, center);
+  --cluster-justify: var(--form-actions-justify, flex-start);
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent
@@ -60,3 +57,12 @@
     background: color-mix(in oklch, var(--surface) 88%, transparent);
   }
 }
+
+/* Same reduce override as .topbar (src/css/layout/topbar.css). */
+@media (prefers-reduced-transparency: reduce) {
+  .form-actions.sticky {
+    background: var(--surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/css/forms/index.css

@@ -8,6 +8,7 @@
 @import "./switch.css";
 @import "./range.css";
 @import "./choice-card.css";
+@import "./color-swatch.css";
 @import "./custom-select.css";
 @import "./floating-field.css";
 @import "./otp.css";

package/src/css/forms/native.css

@@ -7,6 +7,9 @@
  *
  * Range has its own custom-styled file (range.css) so the focus ring can
  * target the thumb pseudo-element rather than the rectangular CSS box.
+ *
+ * Public hooks:
+ * --color-size
  */
 .file {
   color: var(--text-muted);
@@ -25,7 +28,7 @@
     calc((var(--control-size) - 1lh - 2 * var(--border-width)) / 2)
   );
   padding-inline: var(--space-20);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius-sm);
   background: var(--surface-subtle);
   color: var(--text);
@@ -52,16 +55,24 @@
   outline-offset: var(--focus-outline-offset);
 }
 
-/* Native color picker — keep the browser's dialog and selected-color UI. The
-   swatch fills almost the whole control so it reads as a color, not as a tiny
-   square inside a button; the 1px padding keeps a hair of --surface around it. */
+/* Native color picker — keep the browser's dialog and selected-color UI. Same
+   geometry as .color-swatch: a --control-size hit area around a round swatch
+   the height of a .switch track, so a picker, a palette and a switch compose.
+   The input is the hit area; its padding leaves the swatch, which carries the
+   edge and the focus ring. Vendor pseudos cannot share a rule. */
 .color {
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-  padding: var(--border-width);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
+  --color-size: calc(var(--choice-control-size) + 0.125em);
+
+  inline-size: max(var(--control-size), var(--color-size));
+  block-size: max(var(--control-size), var(--color-size));
+  padding: calc((max(var(--control-size), var(--color-size)) - var(--color-size)) / 2);
+  /* Lay out at the visible width, as .color-swatch does: the hit area
+     overflows on both sides so a label gap is measured from the swatch. */
+  margin: 0 calc((var(--color-size) - max(var(--control-size), var(--color-size))) / 2);
+  border: 0;
+  background: transparent;
+  /* Consumed so .sm/.lg reach the em-sized swatch. */
+  font-size: var(--control-font-size);
   cursor: pointer;
 }
 
@@ -70,13 +81,21 @@
 }
 
 .color::-webkit-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
 }
 
 .color::-moz-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
+}
+
+.color:hover::-webkit-color-swatch {
+  border-color: var(--text-subtle);
+}
+
+.color:hover::-moz-color-swatch {
+  border-color: var(--text-subtle);
 }
 
 .color:disabled {
@@ -84,24 +103,35 @@
   opacity: var(--disabled-opacity);
 }
 
+/* The ring goes around the visible swatch, not the larger hit area. */
 .color:focus-visible {
+  outline: none;
+}
+
+.color:focus-visible::-webkit-color-swatch {
   outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
 }
 
-@media (forced-colors: active) {
-  .color {
-    border-color: ButtonText;
-    background: ButtonFace;
-  }
+.color:focus-visible::-moz-color-swatch {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
 
-  /* The swatch color is content, so preserve it without disabling the host's
-     native forced-color focus treatment. Vendor pseudos cannot share a rule. */
+@media (forced-colors: active) {
+  /* The swatch color is content, so the swatch opts out of forcing and takes
+     system colors for its edge and ring itself. */
   .color::-webkit-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
   .color::-moz-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 }

package/src/css/forms/otp.css

@@ -21,7 +21,7 @@
   --otp-cell-size: var(--control-size);
   --otp-gap: var(--space-10);
   --otp-font-size: 1.5em;
-  --otp-cell-border: var(--border);
+  --otp-cell-border: var(--border-control);
   --otp-cell-bg: var(--surface);
   --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
 
@@ -107,10 +107,9 @@
   --otp-cell-border: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .otp > input:user-invalid ~ span {
-    --otp-cell-border: var(--danger);
-  }
+/* biome-ignore lint/style/noDescendingSpecificity: all invalid routes write the same border, so their order cannot change the state. Keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .otp > input:user-invalid ~ span {
+  --otp-cell-border: var(--danger);
 }
 
 .otp > input:disabled {

package/src/css/forms/switch.css

@@ -14,6 +14,7 @@
  * --switch-block-size
  * --switch-knob-margin
  * --switch-knob-size
+ * --switch-knob-inline-size
  * --switch-travel
  *
  * The track is sized from --choice-control-size (tokens.css), not
@@ -29,7 +30,7 @@
 
 .switch {
   --switch-bg: var(--border);
-  --switch-border: var(--border);
+  --switch-border: var(--border-control);
   --switch-knob: var(--surface-raised);
   --switch-block-size: calc(var(--choice-control-size) + 0.125em);
   --switch-width: calc(var(--switch-block-size) * 1.8);
@@ -47,9 +48,11 @@
     2 *
     var(--switch-knob-margin)
   );
+  /* A wider knob is a capsule; the travel follows its width. */
+  --switch-knob-inline-size: var(--switch-knob-size);
   --switch-travel: calc(
     var(--switch-width) -
-    var(--switch-knob-size) -
+    var(--switch-knob-inline-size) -
     2 *
     var(--border-width) -
     2 *
@@ -85,7 +88,7 @@
   position: absolute;
   inset-block-start: var(--switch-knob-margin);
   inset-inline-start: var(--switch-knob-margin);
-  inline-size: var(--switch-knob-size);
+  inline-size: var(--switch-knob-inline-size);
   block-size: var(--switch-knob-size);
   border-radius: var(--radius-full);
   background: var(--switch-knob);

package/src/css/forms/validation.css

@@ -5,6 +5,8 @@
  *
  * Imported by default through forms/index.css. Custom builds may omit this
  * file when an app wants to own validation styling completely.
+ * Without :has(), automatic error display and choice-card borders drop;
+ * native control states and the explicit .field.danger route stay available.
  *
  * State coverage (which states each component ships) is audited in
  * tests/validation.test.js and summarized in docs/pages/forms/validation.md —
@@ -26,11 +28,14 @@
   display: block;
 }
 
-@supports selector(:has(*)) {
-  .field:has([aria-invalid="true"]) > .field-error,
-  .needs-validation.was-validated .field:has(:invalid) > .field-error {
-    display: block;
-  }
+.field:has([aria-invalid="true"]) > .field-error,
+.needs-validation.was-validated .field:has(:invalid) > .field-error {
+  display: block;
+}
+
+/* biome-ignore lint/style/noDescendingSpecificity: every invalid route reveals the error; keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .field:has(:user-invalid) > .field-error {
+  display: block;
 }
 
 :where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"],
@@ -54,39 +59,27 @@
   --switch-bg: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .check:is(:checked, :indeterminate):user-invalid,
-  .needs-validation .radio:checked:user-invalid {
-    --choice-bg: var(--danger);
-  }
+.needs-validation .check:is(:checked, :indeterminate):user-invalid,
+.needs-validation .radio:checked:user-invalid {
+  --choice-bg: var(--danger);
+}
 
-  .needs-validation .switch:checked:user-invalid {
-    --switch-bg: var(--danger);
-  }
+.needs-validation .switch:checked:user-invalid {
+  --switch-bg: var(--danger);
 }
 
 /* Choice cards hide their native input, so invalid state must surface on the
    card itself. Sets the same --form-invalid-border hook the card's border
    consumes. */
-@supports selector(:has(*)) {
-  .choice-card:has([aria-invalid="true"]),
-  .needs-validation.was-validated .choice-card:has(:invalid) {
-    --form-invalid-border: var(--danger);
-  }
+.choice-card:has([aria-invalid="true"]),
+.needs-validation.was-validated .choice-card:has(:invalid) {
+  --form-invalid-border: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
-    --form-invalid-border: var(--danger);
-  }
+.needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
+  --form-invalid-border: var(--danger);
 }
 
-@supports selector(:has(:user-invalid)) {
-  .needs-validation .field:has(:user-invalid) > .field-error {
-    display: block;
-  }
-
-  .needs-validation .choice-card:has(:user-invalid) {
-    --form-invalid-border: var(--danger);
-  }
+.needs-validation .choice-card:has(:user-invalid) {
+  --form-invalid-border: var(--danger);
 }

package/src/css/layout/center.css

@@ -7,6 +7,8 @@
  * --center-size
  * --center-pad
  */
+/* The hooks inherit on purpose: a site's content width is page policy, so a
+   theme sets them once on :root for every .center. */
 .center {
   box-sizing: content-box;
   inline-size: calc(100% - var(--center-pad, 1rem) * 2);

package/src/css/layout/cluster.css

@@ -10,7 +10,21 @@
  *
  * Child contract: direct-child margins are reset, spacing comes from --gap.
  * A ul/ol/menu keeps its semantics but loses list chrome (see below).
+ *
+ * The hooks describe this row's own geometry, so they stop at each cluster:
+ * set them on the cluster itself, or target nested rows with a selector. The
+ * gap token is context rhythm and keeps inheriting.
  */
+
+/* Instance boundary: an ancestor's value never reaches a nested cluster.
+   Zero specificity, so any class or inline style on the cluster wins without
+   depending on import order; `initial` makes the var() fallbacks apply. */
+:where(.cluster) {
+  --cluster-align: initial;
+  --cluster-justify: initial;
+  --cluster-wrap: initial;
+}
+
 .cluster {
   display: flex;
   flex-direction: row;

package/src/css/layout/grid.css

@@ -22,6 +22,13 @@
  * the thresholds were arrived at: docs/design-notes/grid.md.
  */
 
+/* Instance boundary: a nested grid never takes its parent's track template.
+   Zero specificity, so a class or inline style on the grid itself wins. */
+:where(.grid) {
+  --grid-columns: initial;
+  --grid-min: initial;
+}
+
 /* --grid-columns replaces the intrinsic auto-fit template: once set, the grid
    no longer collapses on its own and the author owns narrow-container
    collapse. */

package/src/css/layout/scroll-snap.css

@@ -13,16 +13,36 @@
  * --scroll-snap-align
  * --scroll-snap-item-size
  * --scroll-snap-padding
+ *
+ * Internal:
+ * --scroll-snap-focus-bleed
  */
 .scroll-snap {
   --scroll-snap-gap: var(--gap);
   --scroll-snap-align: start;
   --scroll-snap-item-size: auto;
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the rail would not reach it. */
+  --scroll-snap-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   display: flex;
   flex-direction: row;
   gap: var(--scroll-snap-gap);
+  /* Both axes clip: `auto` on one computes the other to `auto`, so a ring on
+     the top or bottom item would be lost too. Every side reserves the ring's
+     own width; the block reserve returns to the flow through a negative
+     margin, while the inline reserve stays as the rail's focus gutter.
+     Bleeding the inline reserve outward instead would make the border box
+     `containing block + 2 * reserve` wide, which at the viewport edge grows
+     the page: a rail cannot be flush with arbitrary surrounding content and
+     free of page overflow at once. */
+  margin-block: calc(var(--scroll-snap-focus-bleed) * -1);
+  padding-block: var(--scroll-snap-focus-bleed);
+  padding-inline: var(--scroll-snap-focus-bleed);
   overflow-x: auto;
+  /* One scroll axis, stated: a fractional content height could otherwise raise
+     a phantom vertical scrollbar under one font or zoom step. */
+  overflow-y: hidden;
 }
 
 .scroll-snap > * {
@@ -32,7 +52,17 @@
 @supports (scroll-snap-type: x mandatory) {
   .scroll-snap {
     overscroll-behavior-inline: contain;
+    /* Fallback only, never the ring's protector: padding-inline above already
+       guarantees paint. A unitless `0` drops the clamp below but keeps this
+       declaration, so the worst case is a snapped item flush with the gutter,
+       not a clipped ring. */
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* A conforming <length> stays at least the focus reserve, so scroll and
+       snap stop with the gutter's air. */
+    scroll-padding-inline: max(
+      var(--scroll-snap-padding, var(--scroll-snap-gap)),
+      var(--scroll-snap-focus-bleed)
+    );
     /* x then inline: an engine that lacks the logical keyword keeps x.
        proximity is the default, so a short rail cannot trap the pointer. */
     scroll-snap-type: x proximity;

package/src/css/layout/scroller.css

@@ -13,7 +13,16 @@
  * draw their native scrollbar — the intended fallback, not a broken state.
  *
  * Styles the scrollbar only; it does not create the overflow. Pair it with
- * .overflow-auto or a component that already scrolls.
+ * .overflow-auto or a component that already scrolls (horizontal steps, a
+ * table wrap; tabs hide their bar and fade their own edges). No edge fade
+ * here: a mask would dictate the strip's scroll-padding and focus geometry for
+ * a decorative cue, and an item clipped at the edge already says the strip
+ * continues.
+ *
+ * Not on touch: Chromium trades the overlay scrollbar of a touch screen,
+ * hidden at rest, for a classic always-visible one as soon as scrollbar-color
+ * or scrollbar-width is set. On a phone that painted a permanent bar under
+ * every strip; the native overlay is the better cue there.
  *
  * Public hooks:
  * --scroller-track
@@ -22,9 +31,16 @@
 .scroller {
   --scroller-track: transparent;
   --scroller-thumb: var(--border);
+}
 
-  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
-  scrollbar-width: thin;
+/* Any primary pointer but touch: a keyboard-only or pointerless device
+   (pointer: none) draws classic scrollbars too. `all and` keeps the negation
+   valid in Media Queries 3 parsers. */
+@media not all and (pointer: coarse) {
+  .scroller {
+    scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+    scrollbar-width: thin;
+  }
 }
 
 /* Opt-in gutter: reserves space so the layout does not shift when

package/src/css/layout/sidebar-layout.css

@@ -17,6 +17,9 @@
  * visual, reading and keyboard order all agree — the role rules swap so the
  * aside still takes its preferred width and the main still reclaims the row.
  */
+/* No instance reset, unlike .cluster and .grid: the regions read the hooks,
+   and a layout nested as a region takes its own size from its parent's
+   values, so the hooks must reach it. */
 .sidebar-layout {
   display: flex;
   flex-direction: row;

package/src/css/layout/switcher.css

@@ -12,6 +12,9 @@
  *
  * Child contract: every direct child is a peer; the flex-basis applies to all.
  */
+/* No instance reset, unlike .cluster and .grid: the children read the hook,
+   and a switcher nested as a direct child takes its own flex-basis from its
+   parent's value, so the hook must reach it. */
 .switcher {
   display: flex;
   flex-direction: row;

package/src/css/layout/topbar.css

@@ -45,3 +45,13 @@
     -webkit-backdrop-filter: blur(0.75rem);
   }
 }
+
+/* A reduce override, not a no-preference gate: a browser without the feature
+   evaluates it false and keeps the frosted bar instead of losing it. */
+@media (prefers-reduced-transparency: reduce) {
+  .topbar {
+    background: var(--surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

package/src/css/utilities/extra.css

@@ -84,9 +84,9 @@
   flex-wrap: nowrap;
 }
 
-/* The property is written directly, never relayed through the cluster hook:
-   a relay would inherit into every .cluster nested inside. Utilities load last,
-   so the direct declaration already beats .cluster at equal specificity. */
+/* The property is written directly, so the utility works on any flex row, not
+   only a .cluster. Utilities load last, so the direct declaration beats
+   .cluster at equal specificity. */
 .justify-content-start {
   justify-content: flex-start;
 }

package/src/js/focus.js

@@ -44,8 +44,23 @@ export function getFocusable(root) {
   return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
 }
 
+/* Tab reaches a radio group at its checked radio, or at its first one when none
+   is checked; the other radios are arrow-key stops only. Entering a panel on
+   an unchecked radio put focus on a value the user had not picked. */
+function isRadioTabStop(el) {
+  if (el.type !== "radio" || el.checked || !el.name) return true;
+  // form.elements also holds controls associated through form="…".
+  const candidates = el.form
+    ? [...el.form.elements]
+    : [...el.getRootNode().querySelectorAll('input[type="radio"]')];
+  return !candidates.some(
+    (radio) =>
+      radio.type === "radio" && radio.name === el.name && radio.form === el.form && radio.checked,
+  );
+}
+
 export function focusFirstDescendant(root) {
-  const target = getFocusable(root)[0];
+  const target = getFocusable(root).filter(isRadioTabStop)[0];
   target?.focus();
   return !!target;
 }

package/src/js/full.js

@@ -4,6 +4,8 @@
  * Each module self-registers via observer: importing this bundle enables
  * common behaviors. No DOMContentLoaded ceremony, no init calls.
  * Injected content wires automatically; removal cleans up automatically.
+ * The entry also exposes the public enhancement API from the same module
+ * graph, so adopters extend the runtime they already run.
  *
  * A plain `<script src="actual.full.js"></script>` (no bundler, no import) still
  * gets the full runtime, including declarative triggers like status's
@@ -25,3 +27,5 @@ import "./range.js";
 import "./validation.js";
 import "./status.js";
 import "./index.js";
+
+export { applyEnhancement, default as enhance, registerEnhancement } from "./enhance.js";

package/src/js/inline-visible.js

@@ -0,0 +1,54 @@
+/*
+ * Brings a target into view inside one horizontal scrollport — internal, not
+ * a package export. Tabs call it at connect, so a selected tab rendered
+ * off-screen starts visible, and on every selection.
+ *
+ * Contract:
+ * - Scrolls `container` only. scrollIntoView() would also scroll ancestors and
+ *   the page, so a strip below the fold would yank the reader down to it.
+ * - Horizontal, nearest only: a target already visible stays put; one that
+ *   overflows a single edge moves the minimum to show that edge; one wider
+ *   than the visible area that covers it on both sides stays put too.
+ * - The visible area is the scrollport minus its computed scroll-padding, the
+ *   native vocabulary also honoured by focus scrolling: a component that
+ *   keeps an edge clear (a strip's focus line) declares it there, not here.
+ * - The delta comes from physical rects and goes through scrollBy(), so RTL
+ *   needs no scrollLeft sign convention.
+ * - Rects are in transformed pixels; clientWidth, scroll-padding and scrollBy()
+ *   are in layout pixels. The strip's own scale converts between them, so a
+ *   strip under transform: scale() reveals the same item. Rotation is out of
+ *   scope.
+ * - Inline axis only: the block scroll position is left as it is. Callers are
+ *   one-row strips whose block axis does not scroll.
+ * - Requires a laid-out, visible container and target. A strip hidden at
+ *   connect (inside a closed dialog or drawer) or a target without a box (a
+ *   current link inside a closed flyout) gets a no-op, not a deferred retry.
+ */
+
+// Sub-pixel layout must not read as overflow and nudge an aligned strip.
+const TOLERANCE = 1;
+
+// scroll-padding computes to `auto`, a length, or a percentage of the
+// scrollport; auto adds no inset. A calc() mixing the two reads as none.
+const inset = (value, scrollport) =>
+  value.endsWith("%")
+    ? (Number.parseFloat(value) * scrollport) / 100
+    : Number.parseFloat(value) || 0;
+
+export function ensureInlineVisible(container, target) {
+  const width = container?.clientWidth;
+  if (!width || !target?.getClientRects().length) return;
+  const style = getComputedStyle(container);
+  const box = container.getBoundingClientRect();
+  const scale = box.width / container.offsetWidth || 1;
+  const start = box.left + (container.clientLeft + inset(style.scrollPaddingLeft, width)) * scale;
+  const end =
+    box.left + (container.clientLeft + width - inset(style.scrollPaddingRight, width)) * scale;
+  const rect = target.getBoundingClientRect();
+  const before = rect.left < start - TOLERANCE;
+  const after = rect.right > end + TOLERANCE;
+  if (before === after) return;
+  const delta = before ? rect.left - start : rect.right - end;
+  // A placement, not a transition: it must not animate under scroll-behavior: smooth.
+  container.scrollBy({ left: delta / scale, behavior: "instant" });
+}

package/src/js/parsed.js

@@ -0,0 +1,21 @@
+/*
+ * Runs a callback once the document has finished parsing — internal, not a
+ * package export.
+ *
+ * The runtime connects an element as soon as the parser inserts it. With a
+ * classic script in <head>, a <script> inside the element hands control back
+ * mid-parse, so an enhancer that reads its children at connect can find them
+ * missing. Deferring that one read to DOMContentLoaded needs no observer; after
+ * parsing the callback runs at once. Returns a cancel for the enhancer's
+ * cleanup, so an element removed before the document is parsed does nothing.
+ */
+export function afterParse(node, callback) {
+  const doc = node.ownerDocument;
+  if (doc.readyState !== "loading") {
+    callback();
+    return () => {};
+  }
+  const controller = new AbortController();
+  doc.addEventListener("DOMContentLoaded", callback, { once: true, signal: controller.signal });
+  return () => controller.abort();
+}

package/src/js/surface.js

@@ -386,8 +386,17 @@ export function disconnectSurface(menu) {
   }
 }
 
+/* Arrow keys in a radio group check the next radio by dispatching a click
+   (detail 0, no pointer). That click is navigation, not a pick: closing on it
+   shut a palette on the first arrow press, before the user could reach the
+   color they wanted. Space dispatches the same click and is left alone too. */
+function isKeyboardRadioMove(e) {
+  return e.detail === 0 && e.target?.matches?.('input[type="radio"]') === true;
+}
+
 function onDocumentClick(e) {
   const path = e.composedPath();
+  const radioMove = isKeyboardRadioMove(e);
 
   for (const menu of openSurfaces) {
     if (menu.ownerDocument !== e.currentTarget) continue;
@@ -396,6 +405,7 @@ function onDocumentClick(e) {
 
     const menuIndex = path.indexOf(menu);
     const isInside = menuIndex >= 0;
+    if (isInside && radioMove) continue;
     const hasCloseTrigger =
       isInside &&
       path