@mlola-ui/behavior 1.0.4 → 1.0.6

package/README.md

@@ -33,6 +33,12 @@ npm install @mlola-ui/behavior
 It is idempotent, so it is safe to call after a framework re-render, a turbo
 navigation, or an htmx swap.
 
+## Examples
+
+`examples/` holds the markup for each behavior, one file per behavior, as
+it should be written by hand. They are the markup the browser suite runs in
+Chromium, Firefox and WebKit, and the markup the component docs show.
+
 ## Implemented behaviors
 
 `accordion`, `tabs`, `dropdown-menu`, `select`, `modal`, `sheet`, `tooltip`,

package/examples/accordion.html

@@ -0,0 +1,24 @@
+<div class="ml-accordion" data-ml="accordion">
+  <article class="ml-accordion-item" data-state="open">
+    <h3 class="ml-accordion-heading">
+      <button id="t1" class="ml-accordion-trigger" data-state="open" aria-expanded="true" aria-controls="p1">
+        <span>Is there a free plan?</span>
+        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+    </h3>
+    <div id="p1" class="ml-accordion-panel" role="region" aria-labelledby="t1" data-state="open">
+      <p>Yes. The components in the open-source registry are free forever.</p>
+    </div>
+  </article>
+  <article class="ml-accordion-item" data-state="closed">
+    <h3 class="ml-accordion-heading">
+      <button id="t2" class="ml-accordion-trigger" data-state="closed" aria-expanded="false" aria-controls="p2">
+        <span>Can I change themes later?</span>
+        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+    </h3>
+    <div id="p2" class="ml-accordion-panel" role="region" aria-labelledby="t2" data-state="closed" hidden>
+      <p>Change data-theme on any ancestor. Nothing else moves.</p>
+    </div>
+  </article>
+</div>

package/examples/dropdown-menu.html

@@ -0,0 +1,11 @@
+<div class="ml-dropdown" data-ml="dropdown-menu">
+  <button class="ml-dropdown-trigger" type="button" aria-haspopup="menu" aria-expanded="false">
+    <span class="ml-dropdown-trigger-label">File</span>
+    <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
+  </button>
+  <div class="ml-dropdown-menu" role="menu" aria-label="File" data-align="start" hidden>
+    <button class="ml-dropdown-item" type="button" role="menuitem">New</button>
+    <button class="ml-dropdown-item" type="button" role="menuitem">Open</button>
+    <button class="ml-dropdown-item" type="button" role="menuitem" data-danger>Delete</button>
+  </div>
+</div>

package/examples/modal.html

@@ -0,0 +1,16 @@
+<button class="ml-button" type="button" data-variant="danger" data-ml-opens="delete-project">
+  <span class="ml-button-label">Delete project</span>
+</button>
+
+<div class="ml-modal-overlay" data-ml-for="delete-project" hidden></div>
+<div class="ml-modal" id="delete-project" data-ml="modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-project-title" data-size="sm" tabindex="-1" hidden>
+  <div class="ml-modal-header">
+    <h2 class="ml-modal-title" id="delete-project-title">Delete project</h2>
+    <button class="ml-modal-close" type="button" aria-label="Close dialog"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="ml-modal-body">This removes the project and every deployment attached to it.</div>
+  <div class="ml-modal-footer">
+    <button class="ml-button" type="button" data-variant="secondary" data-ml-close><span class="ml-button-label">Keep it</span></button>
+    <button class="ml-button" type="button" data-variant="danger"><span class="ml-button-label">Delete</span></button>
+  </div>
+</div>

package/examples/select.html

@@ -0,0 +1,16 @@
+<div class="ml-select-root" data-ml="select">
+  <span class="ml-select-label" id="fruit-label">Fruit</span>
+  <div class="ml-select-control">
+    <button class="ml-select" type="button" role="combobox" aria-expanded="false" aria-controls="fruit-list" aria-labelledby="fruit-label" data-state="closed">
+      <span class="ml-select-value" data-placeholder>Select…</span>
+      <span class="ml-select-chevron" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></span>
+    </button>
+  </div>
+  <div class="ml-select-popover" hidden>
+    <ul class="ml-select-list" id="fruit-list" role="listbox" aria-labelledby="fruit-label">
+      <li class="ml-select-option" id="opt-apple" role="option" aria-selected="false" data-state="unchecked">Apple</li>
+      <li class="ml-select-option" id="opt-pear" role="option" aria-selected="false" data-state="unchecked">Pear</li>
+      <li class="ml-select-option" id="opt-durian" role="option" aria-selected="false" aria-disabled="true" data-state="unchecked">Durian</li>
+    </ul>
+  </div>
+</div>

package/examples/sheet.html

@@ -0,0 +1,17 @@
+<button class="ml-button" type="button" data-variant="secondary" data-ml-opens="account-settings">
+  <span class="ml-button-label">Settings</span>
+</button>
+
+<div class="ml-sheet-overlay" data-ml-for="account-settings" hidden></div>
+<div class="ml-sheet-panel" id="account-settings" data-ml="sheet" role="dialog" aria-modal="true" aria-labelledby="account-settings-title" data-side="right" data-size="md" tabindex="-1" hidden>
+  <div class="ml-sheet-header">
+    <div class="ml-sheet-heading">
+      <h2 class="ml-sheet-title" id="account-settings-title">Account settings</h2>
+      <p class="ml-sheet-description">Changes apply instantly.</p>
+    </div>
+    <button class="ml-sheet-close" type="button" aria-label="Close panel"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+  <div class="ml-sheet-body">
+    <p>Escape closes the panel, and so does the backdrop.</p>
+  </div>
+</div>

package/examples/slider.html

@@ -0,0 +1,14 @@
+<div class="ml-slider-field" data-ml="slider" data-size="md" data-ml-step="5">
+  <div class="ml-slider-header">
+    <span class="ml-slider-label" id="bright-label">Brightness</span>
+    <span class="ml-slider-output">40</span>
+  </div>
+  <div class="ml-slider">
+    <div class="ml-slider-track">
+      <span class="ml-slider-range" style="width: 40%"></span>
+      <span class="ml-slider-thumb" id="bright-thumb" role="slider" tabindex="0"
+            aria-labelledby="bright-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"
+            style="left: 40%"></span>
+    </div>
+  </div>
+</div>

package/examples/switch.html

@@ -0,0 +1,6 @@
+<span class="ml-switch-field">
+  <button class="ml-toggle" type="button" data-ml="switch" role="switch" aria-checked="false" aria-labelledby="notify-label" data-state="unchecked" data-size="md" data-hit="expand">
+    <span class="ml-toggle-thumb" aria-hidden="true"></span>
+  </button>
+  <span class="ml-switch-label" id="notify-label">Email notifications</span>
+</span>

package/examples/tabs.html

@@ -0,0 +1,10 @@
+<div class="ml-tabs" data-ml="tabs" data-variant="default" data-orientation="horizontal">
+  <div class="ml-tabs-list" role="tablist" aria-label="Project" aria-orientation="horizontal">
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-a" aria-controls="panel-a" aria-selected="true" data-state="active" tabindex="0">Overview</button>
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-b" aria-controls="panel-b" aria-selected="false" data-state="inactive" tabindex="-1">Activity</button>
+    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-c" aria-controls="panel-c" aria-selected="false" data-state="inactive" tabindex="-1">Settings</button>
+  </div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-a" aria-labelledby="tab-a" tabindex="0" data-state="active">Overview panel</div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-b" aria-labelledby="tab-b" tabindex="0" data-state="inactive" hidden>Activity panel</div>
+  <div class="ml-tabs-content" role="tabpanel" id="panel-c" aria-labelledby="tab-c" tabindex="0" data-state="inactive" hidden>Settings panel</div>
+</div>

package/examples/toast.html

@@ -0,0 +1,8 @@
+<div class="ml-toaster" data-ml="toast" role="region" aria-label="Notifications" data-position="top-right">
+  <div class="ml-toast" role="status" aria-live="polite" aria-atomic="true" data-tone="success" data-ml-duration="6000">
+    <div class="ml-toast-content">
+      <p class="ml-toast-message">Draft saved to your workspace.</p>
+    </div>
+    <button class="ml-toast-close" type="button" aria-label="Dismiss notification"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+  </div>
+</div>

package/examples/tooltip.html

@@ -0,0 +1,7 @@
+<span class="ml-tooltip-root" data-ml="tooltip">
+  <button class="ml-button" type="button" data-variant="secondary" data-size="sm"><span class="ml-button-label">Share</span></button>
+  <span class="ml-tooltip" id="share-tip" role="tooltip" data-side="top" hidden>
+    Copy a link to this page
+    <span class="ml-tooltip-arrow" aria-hidden="true"></span>
+  </span>
+</span>

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@mlola-ui/behavior",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Framework-free behavior for Mlola UI markup: standard DOM, no runtime peers",
   "type": "module",
   "main": "./src/index.js",
   "sideEffects": false,
   "files": [
-    "src"
+    "src",
+    "examples"
   ],
   "exports": {
     ".": "./src/index.js",

package/src/index.js

@@ -21,10 +21,11 @@ import {
   clampToStep,
   focusTrapIndex,
   percentOf,
+  placeFloating,
   rovingIndex,
   sliderValueForKey,
   valueFromRatio,
-} from "./logic.js";
+} from "./interaction.js";
 import { lockScroll } from "./document.js";
 
 const ENHANCED = "__mlolaEnhanced";
@@ -264,7 +265,9 @@ const behaviors = {
           open(opener_);
           return;
         }
-        if (root.querySelector(".ml-modal-close, .ml-sheet-close")?.contains(event.target)) close();
+        // The corner button, or any control marked data-ml-close, such as Cancel.
+        const closer = event.target.closest(".ml-modal-close, .ml-sheet-close, [data-ml-close]");
+        if (closer && root.contains(closer)) close();
         if (closeOnOverlay && event.target === overlay()) close();
       }),
       on(document, "keydown", (event) => {
@@ -299,10 +302,34 @@ const behaviors = {
         (option) => option.getAttribute("aria-disabled") !== "true",
       );
 
+    // The listbox is fixed to the viewport so no overflow clips it, which
+    // means it is placed beside the trigger here, and follows it while open.
+    const place = () => {
+      const rect = trigger.getBoundingClientRect();
+      popover.style.minWidth = `${trigger.offsetWidth}px`;
+      const at = placeFloating(
+        { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+        { width: popover.offsetWidth, height: popover.offsetHeight },
+        { width: window.innerWidth, height: window.innerHeight },
+        { side: "bottom", align: "start", offset: 6 },
+      );
+      popover.style.left = `${at.x}px`;
+      popover.style.top = `${at.y}px`;
+      popover.dataset.side = at.side;
+    };
+    let frame = 0;
+    const follow = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (isOpen()) place();
+      });
+    };
+
     const setOpen = (open) => {
       trigger.dataset.state = open ? "open" : "closed";
       popover.hidden = !open;
       trigger.setAttribute("aria-expanded", String(open));
+      if (open) place();
       if (!open) {
         for (const option of options()) delete option.dataset.highlighted;
         trigger.removeAttribute("aria-activedescendant");
@@ -387,6 +414,9 @@ const behaviors = {
       on(document, "pointerdown", (event) => {
         if (isOpen() && !root.contains(event.target)) setOpen(false);
       }),
+      on(window, "scroll", follow, true),
+      on(window, "resize", follow),
+      () => cancelAnimationFrame(frame),
     ];
   },
 

package/src/interaction.js

@@ -0,0 +1,168 @@
+/**
+ * The interaction decisions: where a value snaps, which index a key moves
+ * to, where focus goes next, where a floating layer sits. The framework-free
+ * runtime imports only these, so a plain page downloads nothing else;
+ * everything is also exported from ./logic.js, the public entry.
+ */
+
+/** Round to the precision the step implies, so 0.1 steps do not drift. */
+function toStepPrecision(value, step) {
+  const decimals = (String(step).split(".")[1] ?? "").length;
+  return Number(value.toFixed(Math.min(decimals, 10)));
+}
+
+/** Clamp into range and snap onto the step grid measured from `min`. */
+export function clampToStep(raw, { min = 0, max = 100, step = 1 } = {}) {
+  const low = Number.isFinite(min) ? min : 0;
+  const high = Number.isFinite(max) && max > low ? max : low + 100;
+  const increment = Number.isFinite(step) && step > 0 ? step : 1;
+  const value = Number.isFinite(raw) ? raw : low;
+  const clamped = Math.min(high, Math.max(low, value));
+  const snapped = low + Math.round((clamped - low) / increment) * increment;
+  return toStepPrecision(Math.min(high, Math.max(low, snapped)), increment);
+}
+
+/** Turn a 0..1 position along a track into a value in range. */
+export function valueFromRatio(ratio, { min = 0, max = 100, step = 1 } = {}) {
+  const low = Number.isFinite(min) ? min : 0;
+  const high = Number.isFinite(max) && max > low ? max : low + 100;
+  const safe = Number.isFinite(ratio) ? Math.min(1, Math.max(0, ratio)) : 0;
+  return clampToStep(low + safe * (high - low), { min: low, max: high, step });
+}
+
+/** Percentage along the track, for positioning a range fill and a thumb. */
+export function percentOf(value, { min = 0, max = 100 } = {}) {
+  const low = Number.isFinite(min) ? min : 0;
+  const high = Number.isFinite(max) && max > low ? max : low + 100;
+  if (high === low) return 0;
+  return ((Math.min(high, Math.max(low, value)) - low) / (high - low)) * 100;
+}
+
+/**
+ * The value a key produces, or undefined when the key means nothing here.
+ * Returning undefined rather than the current value lets a caller know whether
+ * to call preventDefault.
+ */
+export function sliderValueForKey(key, current, { min = 0, max = 100, step = 1 } = {}) {
+  const low = Number.isFinite(min) ? min : 0;
+  const high = Number.isFinite(max) && max > low ? max : low + 100;
+  const increment = Number.isFinite(step) && step > 0 ? step : 1;
+  const page = Math.max(increment, (high - low) / 10);
+  const moves = {
+    ArrowLeft: -increment,
+    ArrowDown: -increment,
+    ArrowRight: increment,
+    ArrowUp: increment,
+    PageDown: -page,
+    PageUp: page,
+  };
+  if (key === "Home") return clampToStep(low, { min: low, max: high, step: increment });
+  if (key === "End") return clampToStep(high, { min: low, max: high, step: increment });
+  const delta = moves[key];
+  if (delta === undefined) return undefined;
+  return clampToStep(current + delta, { min: low, max: high, step: increment });
+}
+
+/**
+ * Where a roving-focus key lands. `enabled` reports whether an index may take
+ * focus, so disabled entries are stepped over rather than landed on.
+ * Returns -1 when the key does not move focus.
+ */
+export function rovingIndex(
+  count,
+  index,
+  key,
+  { horizontal = true, wrap = true, enabled = () => true } = {},
+) {
+  if (count <= 0) return -1;
+  const firstEnabled = (from, direction) => {
+    let candidate = from;
+    for (let steps = 0; steps < count; steps += 1) {
+      if (enabled(candidate)) return candidate;
+      candidate += direction;
+      if (candidate < 0) candidate = count - 1;
+      if (candidate >= count) candidate = 0;
+    }
+    return -1;
+  };
+
+  if (key === "Home") return firstEnabled(0, 1);
+  if (key === "End") return firstEnabled(count - 1, -1);
+
+  const forward = horizontal ? "ArrowRight" : "ArrowDown";
+  const backward = horizontal ? "ArrowLeft" : "ArrowUp";
+  const step = key === forward ? 1 : key === backward ? -1 : 0;
+  if (!step) return -1;
+
+  let candidate = index;
+  for (let steps = 0; steps < count; steps += 1) {
+    candidate += step;
+    if (candidate < 0) {
+      if (!wrap) return -1;
+      candidate = count - 1;
+    }
+    if (candidate >= count) {
+      if (!wrap) return -1;
+      candidate = 0;
+    }
+    if (enabled(candidate)) return candidate;
+  }
+  return -1;
+}
+
+/**
+ * The index Tab should move to inside a trap, or -1 to let the browser handle
+ * it. Only the edges need intercepting; everything between them is natural.
+ */
+export function focusTrapIndex(count, activeIndex, shiftKey) {
+  if (count <= 0) return -1;
+  if (shiftKey && activeIndex <= 0) return count - 1;
+  if (!shiftKey && activeIndex === count - 1) return 0;
+  return -1;
+}
+
+/** Which items stay open after toggling `index`. */
+export function resolveDisclosure(open, index, { multiple = false, collapsible = true } = {}) {
+  const isOpen = open.includes(index);
+  if (isOpen && !collapsible && !multiple) return open;
+  if (multiple) {
+    return isOpen ? open.filter((entry) => entry !== index) : [...open, index].sort((a, b) => a - b);
+  }
+  if (isOpen) return collapsible ? [] : open;
+  return [index];
+}
+
+const OPPOSITE_SIDE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+
+/**
+ * Where a floating layer goes next to its anchor, as a pure function of
+ * rectangles: prefer the requested side, flip when it does not fit, and shift
+ * along the edge to stay inside the viewport. The React components and the
+ * framework-free runtime place every popover, menu and listbox with it.
+ */
+export function placeFloating(anchor, floating, viewport, { side = "bottom", align = "center", offset = 8, padding = 8 } = {}) {
+  const room = {
+    top: anchor.y - padding,
+    bottom: viewport.height - (anchor.y + anchor.height) - padding,
+    left: anchor.x - padding,
+    right: viewport.width - (anchor.x + anchor.width) - padding,
+  };
+  const needs = (candidate) => (candidate === "top" || candidate === "bottom" ? floating.height : floating.width) + offset;
+  let chosen = side;
+  if (room[side] < needs(side) && room[OPPOSITE_SIDE[side]] > room[side]) chosen = OPPOSITE_SIDE[side];
+
+  const vertical = chosen === "top" || chosen === "bottom";
+  let x;
+  let y;
+  if (vertical) {
+    y = chosen === "bottom" ? anchor.y + anchor.height + offset : anchor.y - floating.height - offset;
+    x = align === "start" ? anchor.x : align === "end" ? anchor.x + anchor.width - floating.width : anchor.x + anchor.width / 2 - floating.width / 2;
+  } else {
+    x = chosen === "right" ? anchor.x + anchor.width + offset : anchor.x - floating.width - offset;
+    y = align === "start" ? anchor.y : align === "end" ? anchor.y + anchor.height - floating.height : anchor.y + anchor.height / 2 - floating.height / 2;
+  }
+  // Shift along the edge to stay on screen.
+  x = Math.min(Math.max(x, padding), Math.max(padding, viewport.width - floating.width - padding));
+  y = Math.min(Math.max(y, padding), Math.max(padding, viewport.height - floating.height - padding));
+  return { x: Math.round(x), y: Math.round(y), side: chosen };
+}

package/src/logic.d.ts

@@ -111,3 +111,26 @@ export function contextUsage<Segment extends ContextSegment>(
   limit: number,
   options?: { warning?: number; critical?: number },
 ): ContextUsage<Segment>;
+
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Placement {
+  x: number;
+  y: number;
+  side: Side;
+}
+
+export function placeFloating(
+  anchor: Rect,
+  floating: { width: number; height: number },
+  viewport: { width: number; height: number },
+  options?: { side?: Side; align?: Align; offset?: number; padding?: number },
+): Placement;

package/src/logic.js

@@ -11,132 +11,7 @@
  * particular framework stops being fashionable.
  */
 
-/** Round to the precision the step implies, so 0.1 steps do not drift. */
-function toStepPrecision(value, step) {
-  const decimals = (String(step).split(".")[1] ?? "").length;
-  return Number(value.toFixed(Math.min(decimals, 10)));
-}
-
-/** Clamp into range and snap onto the step grid measured from `min`. */
-export function clampToStep(raw, { min = 0, max = 100, step = 1 } = {}) {
-  const low = Number.isFinite(min) ? min : 0;
-  const high = Number.isFinite(max) && max > low ? max : low + 100;
-  const increment = Number.isFinite(step) && step > 0 ? step : 1;
-  const value = Number.isFinite(raw) ? raw : low;
-  const clamped = Math.min(high, Math.max(low, value));
-  const snapped = low + Math.round((clamped - low) / increment) * increment;
-  return toStepPrecision(Math.min(high, Math.max(low, snapped)), increment);
-}
-
-/** Turn a 0..1 position along a track into a value in range. */
-export function valueFromRatio(ratio, { min = 0, max = 100, step = 1 } = {}) {
-  const low = Number.isFinite(min) ? min : 0;
-  const high = Number.isFinite(max) && max > low ? max : low + 100;
-  const safe = Number.isFinite(ratio) ? Math.min(1, Math.max(0, ratio)) : 0;
-  return clampToStep(low + safe * (high - low), { min: low, max: high, step });
-}
-
-/** Percentage along the track, for positioning a range fill and a thumb. */
-export function percentOf(value, { min = 0, max = 100 } = {}) {
-  const low = Number.isFinite(min) ? min : 0;
-  const high = Number.isFinite(max) && max > low ? max : low + 100;
-  if (high === low) return 0;
-  return ((Math.min(high, Math.max(low, value)) - low) / (high - low)) * 100;
-}
-
-/**
- * The value a key produces, or undefined when the key means nothing here.
- * Returning undefined rather than the current value lets a caller know whether
- * to call preventDefault.
- */
-export function sliderValueForKey(key, current, { min = 0, max = 100, step = 1 } = {}) {
-  const low = Number.isFinite(min) ? min : 0;
-  const high = Number.isFinite(max) && max > low ? max : low + 100;
-  const increment = Number.isFinite(step) && step > 0 ? step : 1;
-  const page = Math.max(increment, (high - low) / 10);
-  const moves = {
-    ArrowLeft: -increment,
-    ArrowDown: -increment,
-    ArrowRight: increment,
-    ArrowUp: increment,
-    PageDown: -page,
-    PageUp: page,
-  };
-  if (key === "Home") return clampToStep(low, { min: low, max: high, step: increment });
-  if (key === "End") return clampToStep(high, { min: low, max: high, step: increment });
-  const delta = moves[key];
-  if (delta === undefined) return undefined;
-  return clampToStep(current + delta, { min: low, max: high, step: increment });
-}
-
-/**
- * Where a roving-focus key lands. `enabled` reports whether an index may take
- * focus, so disabled entries are stepped over rather than landed on.
- * Returns -1 when the key does not move focus.
- */
-export function rovingIndex(
-  count,
-  index,
-  key,
-  { horizontal = true, wrap = true, enabled = () => true } = {},
-) {
-  if (count <= 0) return -1;
-  const firstEnabled = (from, direction) => {
-    let candidate = from;
-    for (let steps = 0; steps < count; steps += 1) {
-      if (enabled(candidate)) return candidate;
-      candidate += direction;
-      if (candidate < 0) candidate = count - 1;
-      if (candidate >= count) candidate = 0;
-    }
-    return -1;
-  };
-
-  if (key === "Home") return firstEnabled(0, 1);
-  if (key === "End") return firstEnabled(count - 1, -1);
-
-  const forward = horizontal ? "ArrowRight" : "ArrowDown";
-  const backward = horizontal ? "ArrowLeft" : "ArrowUp";
-  const step = key === forward ? 1 : key === backward ? -1 : 0;
-  if (!step) return -1;
-
-  let candidate = index;
-  for (let steps = 0; steps < count; steps += 1) {
-    candidate += step;
-    if (candidate < 0) {
-      if (!wrap) return -1;
-      candidate = count - 1;
-    }
-    if (candidate >= count) {
-      if (!wrap) return -1;
-      candidate = 0;
-    }
-    if (enabled(candidate)) return candidate;
-  }
-  return -1;
-}
-
-/**
- * The index Tab should move to inside a trap, or -1 to let the browser handle
- * it. Only the edges need intercepting; everything between them is natural.
- */
-export function focusTrapIndex(count, activeIndex, shiftKey) {
-  if (count <= 0) return -1;
-  if (shiftKey && activeIndex <= 0) return count - 1;
-  if (!shiftKey && activeIndex === count - 1) return 0;
-  return -1;
-}
-
-/** Which items stay open after toggling `index`. */
-export function resolveDisclosure(open, index, { multiple = false, collapsible = true } = {}) {
-  const isOpen = open.includes(index);
-  if (isOpen && !collapsible && !multiple) return open;
-  if (multiple) {
-    return isOpen ? open.filter((entry) => entry !== index) : [...open, index].sort((a, b) => a - b);
-  }
-  if (isOpen) return collapsible ? [] : open;
-  return [index];
-}
+export * from "./interaction.js";
 
 /**
  * A coarse password-strength hint, deliberately not authoritative. It exists so