actual-css 0.11.1 → 0.13.0

package/src/css/forms/floating-field.css

@@ -9,10 +9,13 @@
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the general
- * sibling combinator and :placeholder-shown. Injected nodes may appear between
- * the control and the label (password managers, extension wrappers); the cell
- * contract stays a single control plus one label. Every .input/.textarea needs
+ * The cell reads its control's state through :has(), so the label may come
+ * before or after the control (a form theme rendering label then widget needs
+ * no reordering). Injected sibling nodes are tolerated (password managers,
+ * extension wrappers) as long as the control stays a direct child; the cell
+ * contract stays a single control plus one label, since a second control
+ * would float the label on either one's state.
+ * Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -62,23 +65,22 @@
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) ~ .field-label {
+.floating-field:has(> :is(.input, .select)) > .field-label {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 /* An empty textarea label follows the control's normal first-line position;
    the control itself keeps the extra headroom reserved for its floated state. */
-.floating-field > .textarea ~ .field-label {
+.floating-field:has(> .textarea) > .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
 
 /* :autofill covers prefilled values before interaction, when the browser may
    not have propagated the value to the placeholder state yet. */
-.floating-field
-  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  ~ .field-label {
+.floating-field:has(> :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown)))
+> .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -88,16 +90,16 @@
 /* Controls without a dependable :placeholder-shown empty state stay floated:
    select always, and date/time inputs whose placeholder rendering is
    inconsistent across engines (Firefox shows none). */
-.floating-field
+.floating-field:has(
   > :is(
-    .select,
-    .input[type="date"],
-    .input[type="time"],
-    .input[type="datetime-local"],
-    .input[type="month"],
-    .input[type="week"]
-  )
-  ~ .field-label {
+      .select,
+      .input[type="date"],
+      .input[type="time"],
+      .input[type="datetime-local"],
+      .input[type="month"],
+      .input[type="week"]
+    )
+) > .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);

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

@@ -1,30 +1,32 @@
 /*
- * Form actions — bottom form bar with sticky variant.
+ * Form actions — the role of a .cluster action row that closes a form.
  *
  * Docs: docs/pages/forms/form-actions.md
  *
- * A flex cluster of buttons/actions that closes a form. The sticky variant
- * docks to the viewport bottom with a translucent blur where supported; at
- * rest it stays visually neutral so it does not double as a separator.
+ * Markup: `<div class="cluster form-actions">`. The cluster owns the row
+ * (flex, wrap, gap); this role owns the form-specific alignment policy and the
+ * opt-in sticky variant. The distance to the fields above belongs to the
+ * parent layout (.stack on the form), never to a margin here: a margin would
+ * add to a stack's gap. The sticky variant docks to the viewport bottom with a
+ * translucent blur where supported; at rest it stays visually neutral so it
+ * does not double as a separator.
  *
  * Public hooks:
  * --form-actions-align
  * --form-actions-justify
- * --form-actions-margin-block-start
  *
  * Internal:
  * --form-actions-sticky-block-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-inline-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
+
+/* 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 {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  align-items: var(--form-actions-align, center);
-  justify-content: var(--form-actions-justify, flex-start);
-  margin-block-start: var(--form-actions-margin-block-start, var(--space-50));
+  --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

package/src/css/forms/native.css

@@ -25,7 +25,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);
@@ -59,7 +59,7 @@
   inline-size: var(--control-size);
   block-size: var(--control-size);
   padding: var(--border-width);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius);
   background: var(--surface);
   cursor: pointer;

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

@@ -29,7 +29,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);

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

@@ -9,7 +9,22 @@
  * --cluster-wrap
  *
  * 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;
@@ -22,3 +37,13 @@
 .cluster > * {
   margin: 0;
 }
+
+/* Horizontal, wrapping layout is incompatible with list markers and native
+   indentation: a ul/ol/menu applied with .cluster stays a list in the DOM, but
+   its visual chrome would be accidental. .stack intentionally leaves this
+   alone — a vertical list can keep its numbers. */
+:where(ul, ol, menu).cluster {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

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/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

@@ -1,8 +1,9 @@
 /*
  * Sticky, frosted top bar shell for app/dashboard shells (persistent
  * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
- * background only — row content (search, breadcrumb, actions) stays local
- * to the page.
+ * background; it also lays its children out as a default row that a layout
+ * primitive on the same element (such as .cluster) replaces. Row content
+ * (search, breadcrumb, actions) stays local to the page.
  *
  * Docs: docs/pages/layout/topbar.md
  *
@@ -16,16 +17,21 @@
   inset-block-start: 0;
   z-index: var(--z-sticky);
   isolation: isolate;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap);
   padding-block: var(--space-30);
   padding-inline: var(--space-40);
   border-block-end: var(--border-width) solid var(--border);
   background: var(--surface);
 }
 
+/* The row is a default at zero specificity: .topbar and the primitives share
+   layout/, so at class weight their file order alone would pick the winner. */
+:where(.topbar) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap);
+}
+
 /* Both conditions are required: the translucent background contains var(),
    so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
    would accept the declaration at parse time, fail it at computed-value

package/src/css/utilities/base.css

@@ -74,6 +74,11 @@
   align-items: end;
 }
 
+.items-baseline {
+  --items-align: baseline;
+  align-items: baseline;
+}
+
 .muted {
   color: var(--text-muted);
 }

package/src/css/utilities/extra.css

@@ -10,9 +10,6 @@
  * - utilities consume the current context instead of defining their own -sm/-lg scale.
  * - optional utilities extend core utilities, they do not re-express them.
  * - follow verbose .{property}-{value} naming.
- *
- * Internal:
- * --cluster-justify (local relay consumed by .cluster)
  */
 
 /* Display */
@@ -87,23 +84,22 @@
   flex-wrap: nowrap;
 }
 
+/* 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 {
-  --cluster-justify: flex-start;
   justify-content: flex-start;
 }
 
 .justify-content-center {
-  --cluster-justify: center;
   justify-content: center;
 }
 
 .justify-content-end {
-  --cluster-justify: flex-end;
   justify-content: flex-end;
 }
 
 .justify-content-space-between {
-  --cluster-justify: space-between;
   justify-content: space-between;
 }
 

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/tab.js

@@ -9,6 +9,8 @@
  *            ArrowUp/Down for aria-orientation="vertical"
  *            ArrowDown (focus selected panel)
  *            [hidden], disabled and panel-less tabs are skipped
+ * Overflow:  a horizontal strip shows its whole selected tab, at connect and
+ *            on every selection
  *
  * Self-registers via registerEnhancement: injected tablists wire automatically.
  * The tab→panel map is rebuilt from the live tablist on each interaction,
@@ -17,9 +19,13 @@
  */
 
 import { registerEnhancement } from "./enhance.js";
+import { ensureInlineVisible } from "./inline-visible.js";
 import { itemForKey, shouldIgnoreKey } from "./keys.js";
+import { afterParse } from "./parsed.js";
 
-const TABLIST_SELECTOR = '[data-enhance~="tabs"]';
+// Ownership follows the ARIA structure, not the activation token: a tab
+// belongs to its closest role="tablist", enhanced or not.
+const TABLIST_SELECTOR = '[role="tablist"]';
 
 // A tablist owns only the tabs directly beneath it, not those of a nested
 // tablist. Filtering by closest owner keeps the outer list from operating on
@@ -85,10 +91,19 @@ function activate(tab) {
   }
 }
 
-function activateAndFocus(tab) {
+/* An overflowing horizontal strip shows the whole tab. At connect a
+   server-selected tab may render off-screen; on arrow keys and clicks the
+   native focus scroll is not enough: Chrome skips a tab already partly inside
+   the scrollport, so one showing a sliver at the edge stayed clipped. */
+function reveal(list, tab) {
+  if (list.getAttribute("aria-orientation") !== "vertical") ensureInlineVisible(list, tab);
+}
+
+function activateAndFocus(list, tab) {
   if (!tab) return;
   activate(tab);
   tab.focus();
+  reveal(list, tab);
 }
 
 function initialize(list) {
@@ -96,6 +111,7 @@ function initialize(list) {
   if (!tabs.length) return;
   const selected = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") || tabs[0];
   activate(selected);
+  reveal(list, selected);
 }
 
 function onKeydown(e) {
@@ -133,7 +149,7 @@ function onKeydown(e) {
   if (!target) return;
 
   e.preventDefault();
-  activateAndFocus(target);
+  activateAndFocus(list, target);
 }
 
 function onClick(e) {
@@ -146,14 +162,24 @@ function onClick(e) {
   }
   e.preventDefault();
   if (tab.getAttribute("aria-selected") === "true") return;
-  activate(tab);
-  tab.focus();
+  activateAndFocus(list, tab);
 }
 
 registerEnhancement("tabs", (list) => {
+  // Tabs find their list through role="tablist"; without it nothing would
+  // respond, so say why instead of wiring a dead strip.
+  if (list.getAttribute("role") !== "tablist") {
+    console.warn('data-enhance="tabs" needs role="tablist" on the same element', list);
+    return;
+  }
   const controller = new AbortController();
-  initialize(list);
+  // Once parsed: a tablist connected mid-parse had no tabs yet, so the roving
+  // tabindex and the selected tab's placement were skipped for good.
+  const cancelInit = afterParse(list, () => initialize(list));
   list.addEventListener("click", onClick, { signal: controller.signal });
   list.addEventListener("keydown", onKeydown, { signal: controller.signal });
-  return () => controller.abort();
+  return () => {
+    cancelInit();
+    controller.abort();
+  };
 });