@fluixi/web-components 0.0.0-stage → 1.0.0-alpha.97

package/dist/events.cjs

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/events.ts
+var events_exports = {};
+__export(events_exports, {
+  createDispatch: () => createDispatch
+});
+module.exports = __toCommonJS(events_exports);
+function createDispatch(host) {
+  return (type, detail, init = {}) => host.dispatchEvent(
+    new CustomEvent(type, {
+      bubbles: init.bubbles ?? true,
+      composed: init.composed ?? true,
+      cancelable: init.cancelable ?? false,
+      detail
+    })
+  );
+}

package/dist/events.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Events out of the element.
+ *
+ * A custom element's public API is properties in, events out, and the events have to be
+ * ordinary `CustomEvent`s or nothing outside will hear them. React's `onFoo` props,
+ * Vue's `@foo` and Angular's `(foo)` all bind through `addEventListener`, so anything
+ * proprietary here would cut the component off from every consumer it exists for.
+ *
+ * The defaults are the ones a component author almost always wants and almost always
+ * forgets: an event that does not bubble is invisible to a parent, and one that is not
+ * `composed` stops at the shadow boundary, which is exactly where it needs to escape.
+ */
+export interface DispatchInit extends Omit<CustomEventInit, 'detail'> {
+    /** Defaults to true. */
+    bubbles?: boolean;
+    /** Defaults to true, so the event crosses a shadow root. */
+    composed?: boolean;
+    /** Defaults to false. Set it when `preventDefault()` should mean something. */
+    cancelable?: boolean;
+}
+/** Emit a `CustomEvent` from the host. False when a listener cancelled it. */
+export type Dispatch = <T = unknown>(type: string, detail?: T, init?: DispatchInit) => boolean;
+export declare function createDispatch(host: EventTarget): Dispatch;
+//# sourceMappingURL=events.d.ts.map

package/dist/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACnE,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,8EAA8E;AAC9E,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC;AAE/F,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,QAAQ,CAU1D"}

package/dist/events.js

@@ -0,0 +1,20 @@
+/**
+ * Events out of the element.
+ *
+ * A custom element's public API is properties in, events out, and the events have to be
+ * ordinary `CustomEvent`s or nothing outside will hear them. React's `onFoo` props,
+ * Vue's `@foo` and Angular's `(foo)` all bind through `addEventListener`, so anything
+ * proprietary here would cut the component off from every consumer it exists for.
+ *
+ * The defaults are the ones a component author almost always wants and almost always
+ * forgets: an event that does not bubble is invisible to a parent, and one that is not
+ * `composed` stops at the shadow boundary, which is exactly where it needs to escape.
+ */
+export function createDispatch(host) {
+    return (type, detail, init = {}) => host.dispatchEvent(new CustomEvent(type, {
+        bubbles: init.bubbles ?? true,
+        composed: init.composed ?? true,
+        cancelable: init.cancelable ?? false,
+        detail: detail,
+    }));
+}

package/dist/events.mjs

@@ -0,0 +1,14 @@
+// src/events.ts
+function createDispatch(host) {
+  return (type, detail, init = {}) => host.dispatchEvent(
+    new CustomEvent(type, {
+      bubbles: init.bubbles ?? true,
+      composed: init.composed ?? true,
+      cancelable: init.cancelable ?? false,
+      detail
+    })
+  );
+}
+export {
+  createDispatch
+};

package/dist/focus.cjs

@@ -0,0 +1,156 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/focus.ts
+var focus_exports = {};
+__export(focus_exports, {
+  deepActiveElement: () => deepActiveElement,
+  rovingFocus: () => rovingFocus,
+  tabbables: () => tabbables,
+  trapFocus: () => trapFocus
+});
+module.exports = __toCommonJS(focus_exports);
+var import_signal = require("@fluixi/reactive/signal");
+var FOCUSABLE = 'a[href],area[href],button,input,select,textarea,iframe,summary,[tabindex],[contenteditable]:not([contenteditable="false"])';
+function isTabbable(el) {
+  if (!el.matches(FOCUSABLE) || el.tabIndex < 0) return false;
+  if (el.disabled || el.closest("[inert]")) return false;
+  if (el instanceof HTMLInputElement && el.type === "hidden") return false;
+  return el.checkVisibility?.({ visibilityProperty: true }) ?? true;
+}
+function tabbables(root) {
+  const out = [];
+  const visit = (node) => {
+    if (node instanceof HTMLSlotElement) {
+      const assigned = node.assignedElements({ flatten: true });
+      for (const child of assigned.length ? assigned : Array.from(node.children)) visit(child);
+      return;
+    }
+    const shadow = node.shadowRoot;
+    if (node instanceof HTMLElement && isTabbable(node) && !shadow?.delegatesFocus) out.push(node);
+    if (shadow) for (const child of Array.from(shadow.children)) visit(child);
+    else for (const child of Array.from(node.children)) visit(child);
+  };
+  for (const child of Array.from(root.children)) visit(child);
+  return out;
+}
+function deepActiveElement(doc = document) {
+  let active = doc.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+function rovingFocus(container, options) {
+  const { orientation = "vertical", loop = true } = options;
+  let active;
+  const enabled = () => options.items().filter((item) => !item.disabled && item.getAttribute("aria-disabled") !== "true");
+  const settle = (items) => {
+    if (!active || !items.includes(active)) active = enabled()[0];
+    for (const item of items) item.tabIndex = item === active ? 0 : -1;
+  };
+  const move = (to) => {
+    const items = options.items();
+    if (to === active) return;
+    active = to;
+    settle(items);
+    to.focus();
+    options.onMove?.(to, items.indexOf(to));
+  };
+  const keys = {
+    next: orientation === "horizontal" ? ["ArrowRight"] : orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"],
+    previous: orientation === "horizontal" ? ["ArrowLeft"] : orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"]
+  };
+  const onKey = (event) => {
+    const list = enabled();
+    if (!list.length) return;
+    const at = active ? list.indexOf(active) : -1;
+    let next;
+    if (keys.next.includes(event.key)) next = list[at + 1] ?? (loop ? list[0] : void 0);
+    else if (keys.previous.includes(event.key)) next = list[at - 1] ?? (loop ? list[list.length - 1] : void 0);
+    else if (event.key === "Home") next = list[0];
+    else if (event.key === "End") next = list[list.length - 1];
+    else return;
+    event.preventDefault();
+    if (next) move(next);
+  };
+  const onFocus = (event) => {
+    const item = enabled().find((candidate) => event.composedPath().includes(candidate));
+    if (item && item !== active) move(item);
+  };
+  container.addEventListener("keydown", onKey);
+  container.addEventListener("focusin", onFocus);
+  const stopTracking = (0, import_signal.effect)(() => settle(options.items()), void 0, { name: "roving focus" });
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    container.removeEventListener("keydown", onKey);
+    container.removeEventListener("focusin", onFocus);
+    stopTracking();
+  };
+  (0, import_signal.onCleanup)(stop);
+  return stop;
+}
+function trapFocus(container, options = {}) {
+  const doc = container.ownerDocument;
+  const previous = deepActiveElement(doc);
+  const first = () => tabbables(container)[0];
+  const inside = (node) => node instanceof Node && (container.contains(node) || containsComposed(container, node));
+  const initial = typeof options.initial === "function" ? options.initial() : options.initial;
+  (initial ?? first() ?? container).focus();
+  const onKey = (event) => {
+    if (event.key !== "Tab") return;
+    const list = tabbables(container);
+    if (!list.length) {
+      event.preventDefault();
+      return;
+    }
+    const current = deepActiveElement(doc);
+    const at = list.indexOf(current);
+    if (event.shiftKey && at <= 0) {
+      event.preventDefault();
+      list[list.length - 1].focus();
+    } else if (!event.shiftKey && at === list.length - 1) {
+      event.preventDefault();
+      list[0].focus();
+    }
+  };
+  const onFocusIn = (event) => {
+    if (!inside(event.composedPath()[0] ?? event.target)) (first() ?? container).focus();
+  };
+  container.addEventListener("keydown", onKey);
+  doc.addEventListener("focusin", onFocusIn, true);
+  let released = false;
+  const release = () => {
+    if (released) return;
+    released = true;
+    container.removeEventListener("keydown", onKey);
+    doc.removeEventListener("focusin", onFocusIn, true);
+    if (options.restore !== false && previous?.isConnected) previous.focus();
+  };
+  (0, import_signal.onCleanup)(release);
+  return release;
+}
+function containsComposed(container, node) {
+  let at = node;
+  while (at) {
+    if (at === container) return true;
+    at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+  }
+  return false;
+}

package/dist/focus.d.ts

@@ -0,0 +1,34 @@
+/** Every element the Tab key reaches under `root`, in order, through shadow roots and slots. */
+export declare function tabbables(root: ParentNode): HTMLElement[];
+/** The element that really has focus, looking through shadow roots. */
+export declare function deepActiveElement(doc?: Document): Element | null;
+export interface RovingFocusOptions {
+    /** The items, in order. Read reactively: a list that changes is followed. */
+    items: () => readonly HTMLElement[];
+    /** Which arrow keys move. `vertical` for a menu, `horizontal` for tabs. */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    /** Past the last item wraps to the first. */
+    loop?: boolean;
+    /** Called when the active item changes, by key or by click. */
+    onMove?: (item: HTMLElement, index: number) => void;
+}
+/**
+ * One tab stop for a group: the active item has `tabindex="0"`, the rest `-1`, and the arrow
+ * keys, Home and End move between them. Disabled items are skipped. Stops when the reactive
+ * scope it was called in ends; the returned function stops it earlier.
+ */
+export declare function rovingFocus(container: HTMLElement, options: RovingFocusOptions): () => void;
+export interface FocusTrapOptions {
+    /** What to focus first. Defaults to the first tabbable element inside. */
+    initial?: HTMLElement | (() => HTMLElement | null | undefined);
+    /** Give focus back to what had it before, on release. Defaults to true. */
+    restore?: boolean;
+}
+/**
+ * Keep keyboard focus inside `container`: Tab and Shift+Tab wrap at the ends, and focus that
+ * lands outside is brought back. `<dialog>` opened with `showModal()` does this natively; this
+ * is for a panel that is not a modal dialog. Released when the reactive scope it was called in
+ * ends, or by the returned function.
+ */
+export declare function trapFocus(container: HTMLElement, options?: FocusTrapOptions): () => void;
+//# sourceMappingURL=focus.d.ts.map

package/dist/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../src/focus.ts"],"names":[],"mappings":"AAuBA,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW,EAAE,CAgBzD;AAED,uEAAuE;AACvE,wBAAgB,iBAAiB,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,GAAG,IAAI,CAI1E;AAED,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,SAAS,WAAW,EAAE,CAAC;IACpC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,6CAA6C;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,GAAG,MAAM,IAAI,CA4D3F;AAED,MAAM,WAAW,gBAAgB;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC/D,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,IAAI,CA6C5F"}

package/dist/focus.js

@@ -0,0 +1,185 @@
+/**
+ * Focus and keyboard behaviour a component needs and the platform leaves to it.
+ *
+ * `delegatesFocus` on the shadow root (see `HTMLReactiveElement.shadow`) covers a host that
+ * should hand focus to its inner input. This covers the other two: arrow keys moving through
+ * a group with one tab stop (a menu, a listbox, tabs), and keeping focus inside a panel until
+ * it closes (a dialog, a popover that behaves like one).
+ *
+ * Both follow the composed tree, so a focusable element inside another component's shadow
+ * root, or slotted in from the page, counts where the user sees it.
+ */
+import { effect, onCleanup } from '@fluixi/reactive/signal';
+const FOCUSABLE = 'a[href],area[href],button,input,select,textarea,iframe,summary,[tabindex],[contenteditable]:not([contenteditable="false"])';
+function isTabbable(el) {
+    if (!el.matches(FOCUSABLE) || el.tabIndex < 0)
+        return false;
+    if (el.disabled || el.closest('[inert]'))
+        return false;
+    if (el instanceof HTMLInputElement && el.type === 'hidden')
+        return false;
+    // Not rendered, so the browser skips it too. Absent in older engines: assume shown.
+    return el.checkVisibility?.({ visibilityProperty: true }) ?? true;
+}
+/** Every element the Tab key reaches under `root`, in order, through shadow roots and slots. */
+export function tabbables(root) {
+    const out = [];
+    const visit = (node) => {
+        if (node instanceof HTMLSlotElement) {
+            const assigned = node.assignedElements({ flatten: true });
+            for (const child of assigned.length ? assigned : Array.from(node.children))
+                visit(child);
+            return;
+        }
+        const shadow = node.shadowRoot;
+        // A host that delegates focus is reached through what it delegates to, not itself.
+        if (node instanceof HTMLElement && isTabbable(node) && !shadow?.delegatesFocus)
+            out.push(node);
+        if (shadow)
+            for (const child of Array.from(shadow.children))
+                visit(child);
+        else
+            for (const child of Array.from(node.children))
+                visit(child);
+    };
+    for (const child of Array.from(root.children))
+        visit(child);
+    return out;
+}
+/** The element that really has focus, looking through shadow roots. */
+export function deepActiveElement(doc = document) {
+    let active = doc.activeElement;
+    while (active?.shadowRoot?.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
+/**
+ * One tab stop for a group: the active item has `tabindex="0"`, the rest `-1`, and the arrow
+ * keys, Home and End move between them. Disabled items are skipped. Stops when the reactive
+ * scope it was called in ends; the returned function stops it earlier.
+ */
+export function rovingFocus(container, options) {
+    const { orientation = 'vertical', loop = true } = options;
+    let active;
+    const enabled = () => options.items().filter((item) => !item.disabled && item.getAttribute('aria-disabled') !== 'true');
+    const settle = (items) => {
+        if (!active || !items.includes(active))
+            active = enabled()[0];
+        for (const item of items)
+            item.tabIndex = item === active ? 0 : -1;
+    };
+    const move = (to) => {
+        const items = options.items();
+        if (to === active)
+            return;
+        active = to;
+        settle(items);
+        to.focus();
+        options.onMove?.(to, items.indexOf(to));
+    };
+    const keys = {
+        next: orientation === 'horizontal' ? ['ArrowRight'] : orientation === 'vertical' ? ['ArrowDown'] : ['ArrowRight', 'ArrowDown'],
+        previous: orientation === 'horizontal' ? ['ArrowLeft'] : orientation === 'vertical' ? ['ArrowUp'] : ['ArrowLeft', 'ArrowUp'],
+    };
+    const onKey = (event) => {
+        const list = enabled();
+        if (!list.length)
+            return;
+        const at = active ? list.indexOf(active) : -1;
+        let next;
+        if (keys.next.includes(event.key))
+            next = list[at + 1] ?? (loop ? list[0] : undefined);
+        else if (keys.previous.includes(event.key))
+            next = list[at - 1] ?? (loop ? list[list.length - 1] : undefined);
+        else if (event.key === 'Home')
+            next = list[0];
+        else if (event.key === 'End')
+            next = list[list.length - 1];
+        else
+            return;
+        event.preventDefault();
+        if (next)
+            move(next);
+    };
+    // A click or programmatic focus makes that item the tab stop, so Tab comes back to it.
+    const onFocus = (event) => {
+        const item = enabled().find((candidate) => event.composedPath().includes(candidate));
+        if (item && item !== active)
+            move(item);
+    };
+    container.addEventListener('keydown', onKey);
+    container.addEventListener('focusin', onFocus);
+    const stopTracking = effect(() => settle(options.items()), undefined, { name: 'roving focus' });
+    let stopped = false;
+    const stop = () => {
+        if (stopped)
+            return;
+        stopped = true;
+        container.removeEventListener('keydown', onKey);
+        container.removeEventListener('focusin', onFocus);
+        stopTracking();
+    };
+    onCleanup(stop);
+    return stop;
+}
+/**
+ * Keep keyboard focus inside `container`: Tab and Shift+Tab wrap at the ends, and focus that
+ * lands outside is brought back. `<dialog>` opened with `showModal()` does this natively; this
+ * is for a panel that is not a modal dialog. Released when the reactive scope it was called in
+ * ends, or by the returned function.
+ */
+export function trapFocus(container, options = {}) {
+    const doc = container.ownerDocument;
+    const previous = deepActiveElement(doc);
+    const first = () => tabbables(container)[0];
+    const inside = (node) => node instanceof Node && (container.contains(node) || containsComposed(container, node));
+    const initial = typeof options.initial === 'function' ? options.initial() : options.initial;
+    (initial ?? first() ?? container).focus();
+    const onKey = (event) => {
+        if (event.key !== 'Tab')
+            return;
+        const list = tabbables(container);
+        if (!list.length) {
+            event.preventDefault();
+            return;
+        }
+        const current = deepActiveElement(doc);
+        const at = list.indexOf(current);
+        if (event.shiftKey && at <= 0) {
+            event.preventDefault();
+            list[list.length - 1].focus();
+        }
+        else if (!event.shiftKey && at === list.length - 1) {
+            event.preventDefault();
+            list[0].focus();
+        }
+    };
+    const onFocusIn = (event) => {
+        if (!inside(event.composedPath()[0] ?? event.target))
+            (first() ?? container).focus();
+    };
+    container.addEventListener('keydown', onKey);
+    doc.addEventListener('focusin', onFocusIn, true);
+    let released = false;
+    const release = () => {
+        if (released)
+            return;
+        released = true;
+        container.removeEventListener('keydown', onKey);
+        doc.removeEventListener('focusin', onFocusIn, true);
+        if (options.restore !== false && previous?.isConnected)
+            previous.focus();
+    };
+    onCleanup(release);
+    return release;
+}
+/** Whether `node` sits under `container` once shadow roots are looked through. */
+function containsComposed(container, node) {
+    let at = node;
+    while (at) {
+        if (at === container)
+            return true;
+        at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+    }
+    return false;
+}

package/dist/focus.mjs

@@ -0,0 +1,135 @@
+// src/focus.ts
+import { effect, onCleanup } from "@fluixi/reactive/signal";
+var FOCUSABLE = 'a[href],area[href],button,input,select,textarea,iframe,summary,[tabindex],[contenteditable]:not([contenteditable="false"])';
+function isTabbable(el) {
+  if (!el.matches(FOCUSABLE) || el.tabIndex < 0) return false;
+  if (el.disabled || el.closest("[inert]")) return false;
+  if (el instanceof HTMLInputElement && el.type === "hidden") return false;
+  return el.checkVisibility?.({ visibilityProperty: true }) ?? true;
+}
+function tabbables(root) {
+  const out = [];
+  const visit = (node) => {
+    if (node instanceof HTMLSlotElement) {
+      const assigned = node.assignedElements({ flatten: true });
+      for (const child of assigned.length ? assigned : Array.from(node.children)) visit(child);
+      return;
+    }
+    const shadow = node.shadowRoot;
+    if (node instanceof HTMLElement && isTabbable(node) && !shadow?.delegatesFocus) out.push(node);
+    if (shadow) for (const child of Array.from(shadow.children)) visit(child);
+    else for (const child of Array.from(node.children)) visit(child);
+  };
+  for (const child of Array.from(root.children)) visit(child);
+  return out;
+}
+function deepActiveElement(doc = document) {
+  let active = doc.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+function rovingFocus(container, options) {
+  const { orientation = "vertical", loop = true } = options;
+  let active;
+  const enabled = () => options.items().filter((item) => !item.disabled && item.getAttribute("aria-disabled") !== "true");
+  const settle = (items) => {
+    if (!active || !items.includes(active)) active = enabled()[0];
+    for (const item of items) item.tabIndex = item === active ? 0 : -1;
+  };
+  const move = (to) => {
+    const items = options.items();
+    if (to === active) return;
+    active = to;
+    settle(items);
+    to.focus();
+    options.onMove?.(to, items.indexOf(to));
+  };
+  const keys = {
+    next: orientation === "horizontal" ? ["ArrowRight"] : orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"],
+    previous: orientation === "horizontal" ? ["ArrowLeft"] : orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"]
+  };
+  const onKey = (event) => {
+    const list = enabled();
+    if (!list.length) return;
+    const at = active ? list.indexOf(active) : -1;
+    let next;
+    if (keys.next.includes(event.key)) next = list[at + 1] ?? (loop ? list[0] : void 0);
+    else if (keys.previous.includes(event.key)) next = list[at - 1] ?? (loop ? list[list.length - 1] : void 0);
+    else if (event.key === "Home") next = list[0];
+    else if (event.key === "End") next = list[list.length - 1];
+    else return;
+    event.preventDefault();
+    if (next) move(next);
+  };
+  const onFocus = (event) => {
+    const item = enabled().find((candidate) => event.composedPath().includes(candidate));
+    if (item && item !== active) move(item);
+  };
+  container.addEventListener("keydown", onKey);
+  container.addEventListener("focusin", onFocus);
+  const stopTracking = effect(() => settle(options.items()), void 0, { name: "roving focus" });
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    container.removeEventListener("keydown", onKey);
+    container.removeEventListener("focusin", onFocus);
+    stopTracking();
+  };
+  onCleanup(stop);
+  return stop;
+}
+function trapFocus(container, options = {}) {
+  const doc = container.ownerDocument;
+  const previous = deepActiveElement(doc);
+  const first = () => tabbables(container)[0];
+  const inside = (node) => node instanceof Node && (container.contains(node) || containsComposed(container, node));
+  const initial = typeof options.initial === "function" ? options.initial() : options.initial;
+  (initial ?? first() ?? container).focus();
+  const onKey = (event) => {
+    if (event.key !== "Tab") return;
+    const list = tabbables(container);
+    if (!list.length) {
+      event.preventDefault();
+      return;
+    }
+    const current = deepActiveElement(doc);
+    const at = list.indexOf(current);
+    if (event.shiftKey && at <= 0) {
+      event.preventDefault();
+      list[list.length - 1].focus();
+    } else if (!event.shiftKey && at === list.length - 1) {
+      event.preventDefault();
+      list[0].focus();
+    }
+  };
+  const onFocusIn = (event) => {
+    if (!inside(event.composedPath()[0] ?? event.target)) (first() ?? container).focus();
+  };
+  container.addEventListener("keydown", onKey);
+  doc.addEventListener("focusin", onFocusIn, true);
+  let released = false;
+  const release = () => {
+    if (released) return;
+    released = true;
+    container.removeEventListener("keydown", onKey);
+    doc.removeEventListener("focusin", onFocusIn, true);
+    if (options.restore !== false && previous?.isConnected) previous.focus();
+  };
+  onCleanup(release);
+  return release;
+}
+function containsComposed(container, node) {
+  let at = node;
+  while (at) {
+    if (at === container) return true;
+    at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+  }
+  return false;
+}
+export {
+  deepActiveElement,
+  rovingFocus,
+  tabbables,
+  trapFocus
+};