@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/focus.jsx

@@ -1,399 +1,631 @@
-//#region src/utils/dom.ts
+import { t as onOwnedCleanup } from "./owner.jsx";
+import { w as focusSafely } from "./dom.jsx";
+import { createSignal, getObserver, onSettled } from "solid-js";
+import { isServer } from "@solidjs/web";
+//#region src/focus/createFocusRestore.ts
 /**
-* DOM utilities for cross-browser compatibility.
-* Based on @react-aria/utils DOM utilities.
+* Focus restoration utilities for solidaria
+*
+* Provides enhanced focus restoration with retry logic, cross-scope tracking,
+* and safe restoration patterns.
+*
+* This is a local Solid helper. The pinned React Aria revision has no
+* standalone retrying focus-restore stack API.
 */
+const focusStack = [];
 /**
-* Gets the owner document of an element, or the global document.
+* Push an element onto the focus stack.
 */
-function getOwnerDocument(el) {
-	return el?.ownerDocument ?? document;
+function pushFocusStack(element) {
+	focusStack.push(element);
 }
 /**
-* Gets the owner window of an element, or the global window.
+* Pop the last element from the focus stack.
 */
-function getOwnerWindow(el) {
-	return getOwnerDocument(el).defaultView ?? window;
+function popFocusStack() {
+	return focusStack.pop();
 }
 /**
-* Cross-browser implementation of Node.contains that works with ShadowDOM.
-* In Safari, Node.contains doesn't properly detect elements inside shadow roots.
+* Get the current focus stack length.
 */
-function nodeContains(parent, child) {
-	if (!parent || !child) return false;
-	if (parent.contains(child)) return true;
-	let node = child;
-	while (node) {
-		if (node === parent) return true;
-		if (node.host) node = node.host;
-		else node = node.parentNode;
-	}
-	return false;
-}
-/**
-* Gets the event target, handling composed path for shadow DOM.
-*/
-function getEventTarget(event) {
-	if (typeof event.composedPath === "function") {
-		const path = event.composedPath();
-		if (path.length > 0) return path[0];
-	}
-	return event.target;
-}
-const supportsCheckVisibility = typeof Element !== "undefined" && "checkVisibility" in Element.prototype;
-function isHTMLOrSVGElement(element) {
-	const windowObject = getOwnerWindow(element);
-	return element instanceof windowObject.HTMLElement || element instanceof windowObject.SVGElement || typeof HTMLElement !== "undefined" && element instanceof HTMLElement || typeof SVGElement !== "undefined" && element instanceof SVGElement;
-}
-function isStyleVisible(element) {
-	if (!isHTMLOrSVGElement(element)) return false;
-	const { display, visibility } = element.style;
-	let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
-	if (isVisible) {
-		const { getComputedStyle } = getOwnerWindow(element);
-		const { display: computedDisplay, visibility: computedVisibility } = getComputedStyle(element);
-		isVisible = computedDisplay !== "none" && computedVisibility !== "hidden" && computedVisibility !== "collapse";
-	}
-	return isVisible;
-}
-function isAttributeVisible(element, childElement) {
-	return !element.hasAttribute("hidden") && !element.hasAttribute("data-react-aria-prevent-focus") && (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY" ? element.hasAttribute("open") : true);
-}
-/**
-* Whether an element is visible, and so eligible for focus. Adapted from
-* @react-aria/utils, which adapts testing-library/jest-dom and
-* vue-test-utils-next (MIT): uses `checkVisibility` when supported, otherwise
-* walks computed style and visibility-affecting attributes up the ancestor chain.
-*/
-function isElementVisible(element, childElement) {
-	if (supportsCheckVisibility) return element.checkVisibility({ visibilityProperty: true }) && !element.closest("[data-react-aria-prevent-focus]");
-	return element.nodeName !== "#comment" && isStyleVisible(element) && isAttributeVisible(element, childElement) && (!element.parentElement || isElementVisible(element.parentElement, element));
+function getFocusStackLength() {
+	return focusStack.length;
 }
-const focusableElements = [
-	"input:not([disabled]):not([type=hidden])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"button:not([disabled])",
-	"a[href]",
-	"area[href]",
-	"summary",
-	"iframe",
-	"object",
-	"embed",
-	"audio[controls]",
-	"video[controls]",
-	"[contenteditable]:not([contenteditable^=\"false\"])",
-	"permission"
-];
-const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
-focusableElements.push("[tabindex]:not([tabindex=\"-1\"]):not([disabled])");
-const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(":not([hidden]):not([tabindex=\"-1\"]),");
 /**
-* Checks if an element is a valid focusable element: it matches the focusable
-* selector, is not inside an `inert` subtree, and is visible. A negative tabindex
-* is programmatically focusable (matched here) but not tabbable. `skipVisibilityCheck`
-* lets callers (e.g. the press-path `preventFocus` ancestor walk) skip the
-* `isElementVisible` step, which also avoids touching layout on detached documents.
+* Clear the entire focus stack.
 */
-function isFocusable(element, options) {
-	return element.matches(FOCUSABLE_ELEMENT_SELECTOR) && !isInert(element) && (options?.skipVisibilityCheck || isElementVisible(element));
+function clearFocusStack() {
+	focusStack.length = 0;
 }
 /**
-* Checks if an element is tabbable (reachable via the Tab key): focusable,
-* visible, not inert, and not `tabindex="-1"`.
+* Gets the active element, accounting for shadow DOM.
 */
-function isTabbable(element) {
-	return element.matches(TABBABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element);
-}
-function isInert(element) {
-	let node = element;
-	while (node != null) {
-		if ((node instanceof getOwnerWindow(node).HTMLElement || typeof HTMLElement !== "undefined" && node instanceof HTMLElement) && node.inert) return true;
-		node = node.parentElement;
-	}
-	return false;
-}
-/**
-* Checks if a keyboard event should trigger the default action (like clicking).
-*/
-function isValidKeyboardEvent(event, currentTarget) {
-	const { key, code } = event;
-	const element = currentTarget;
-	const tagName = element.tagName.toLowerCase();
-	const role = element.getAttribute("role");
-	if (!(key === "Enter" || key === " " || key === "Spacebar" || code === "Space")) return false;
-	if (tagName === "textarea") return false;
-	if (element.isContentEditable) return false;
-	if ((role === "link" || !role && isHTMLAnchorLink(element)) && key !== "Enter") return false;
-	if (tagName === "input") return isValidInputKey(element, key);
-	return true;
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
+	return activeElement;
 }
 /**
-* Checks if a key is valid for a specific input type.
+* Checks if an element is still valid for focus restoration.
 */
-function isValidInputKey(target, key) {
-	const type = target.type.toLowerCase();
-	if (type === "checkbox" || type === "radio") return key === " " || key === "Spacebar";
-	if ([
-		"text",
-		"search",
-		"url",
-		"tel",
-		"email",
-		"password",
-		"date",
-		"month",
-		"week",
-		"time",
-		"datetime-local",
-		"number"
-	].includes(type)) return false;
+function isValidForRestore(element) {
+	if (!element) return false;
+	if (!document.body.contains(element)) return false;
+	if (element.hasAttribute("disabled")) return false;
+	if (element.getAttribute("aria-disabled") === "true") return false;
+	if (element.getAttribute("aria-hidden") === "true") return false;
 	return true;
 }
 /**
-* Checks if an element is an HTML anchor link (has href attribute).
-*/
-function isHTMLAnchorLink(target) {
-	return target.tagName === "A" && target.hasAttribute("href");
-}
-/**
-* Whether to prevent default on keyboard events for this element.
+* Attempts to restore focus with retries.
 */
-function shouldPreventDefaultKeyboard(target, key) {
-	if (target instanceof HTMLInputElement) return !isValidInputKey(target, key);
-	return shouldPreventDefaultUp(target);
+function tryRestoreFocus(element, options) {
+	const { maxRetries, retryDelay, preventScroll, onRestore, onRestoreFailed } = options;
+	let attempts = 0;
+	const attempt = () => {
+		if (!element) {
+			onRestoreFailed?.();
+			return;
+		}
+		if (isValidForRestore(element)) {
+			if (preventScroll) focusSafely(element);
+			else element.focus();
+			onRestore?.(element);
+			return;
+		}
+		attempts++;
+		if (attempts < maxRetries) setTimeout(attempt, retryDelay);
+		else onRestoreFailed?.();
+	};
+	requestAnimationFrame(attempt);
 }
 /**
-* Whether to prevent default on pointer up for this element.
+* Creates a focus restoration manager.
+*
+* This hook saves the currently focused element when mounted and provides
+* methods to restore focus later, with retry logic for reliability.
+*
+* @example
+* ```tsx
+* function Modal(props) {
+*   const focusRestore = createFocusRestore({
+*     restoreOnUnmount: true,
+*     onRestore: () => console.log('Focus restored'),
+*   });
+*
+*   return (
+*     <div role="dialog">
+*       {props.children}
+*       <button onClick={() => focusRestore.restore()}>
+*         Close
+*       </button>
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Manual focus management
+* function Dropdown() {
+*   const focusRestore = createFocusRestore({ restoreOnUnmount: false });
+*
+*   const onOpen = () => {
+*     focusRestore.saveCurrentFocus();
+*     // Focus dropdown content
+*   };
+*
+*   const onClose = () => {
+*     focusRestore.restore();
+*   };
+*
+*   return <div>...</div>;
+* }
+* ```
 */
-function shouldPreventDefaultUp(target) {
-	const tagName = target.tagName.toLowerCase();
-	if (tagName === "input" || tagName === "textarea" || tagName === "select") return false;
-	if (tagName === "a" || target.getAttribute("role") === "link") return false;
-	if (tagName === "button") {
-		const type = target.type;
-		if (type === "submit" || type === "reset") return false;
+function createFocusRestore(options = {}) {
+	const { restoreOnUnmount = true, maxRetries = 3, retryDelay = 50, onRestore, onRestoreFailed, preventScroll = true } = options;
+	let savedElement = null;
+	onSettled(() => {
+		saveCurrentFocus();
+	});
+	if (isServer) return {
+		restore: () => false,
+		getSavedElement: () => null,
+		saveCurrentFocus: () => {},
+		clear: () => {}
+	};
+	onOwnedCleanup(() => {
+		if (restoreOnUnmount && savedElement) tryRestoreFocus(savedElement, {
+			maxRetries,
+			retryDelay,
+			preventScroll,
+			onRestore: onRestore ?? (() => {}),
+			onRestoreFailed: onRestoreFailed ?? (() => {})
+		});
+	});
+	function saveCurrentFocus() {
+		const doc = typeof document !== "undefined" ? document : null;
+		if (!doc) return;
+		const active = getActiveElement(doc);
+		if (active && active !== doc.body) {
+			savedElement = active;
+			pushFocusStack(active);
+		}
 	}
-	return true;
-}
-/**
-* Opens a link, supporting both same-window and new-window navigation.
-* Used for keyboard activation of links with Space key (which doesn't natively open links).
-*/
-function openLink(target, event, allowOpener = false) {
-	const { href, target: linkTarget, rel } = target;
-	openLink.isOpening = true;
-	const keyEvent = event;
-	if (linkTarget === "_blank" || keyEvent?.metaKey || keyEvent?.ctrlKey || keyEvent?.shiftKey || keyEvent?.altKey) {
-		const features = !allowOpener && rel?.includes("noopener") ? "noopener" : void 0;
-		window.open(href, linkTarget || "_blank", features);
-	} else window.location.href = href;
-	openLink.isOpening = false;
-}
-openLink.isOpening = false;
-/**
-* Checks if an element is scrollable based on its overflow style.
-* @param node - The element to check
-* @param checkForOverflow - If true, also check if the element actually overflows
-*/
-function isScrollable(node, checkForOverflow) {
-	if (!node) return false;
-	const style = window.getComputedStyle(node);
-	const scrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-	if (scrollable && checkForOverflow) return node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
-	return scrollable;
-}
-/**
-* Gets the nearest scrollable parent element.
-* @param node - The starting element
-* @param checkForOverflow - If true, only return parents that actually overflow
-*/
-function getScrollParent(node, checkForOverflow) {
-	let scrollableNode = node;
-	if (isScrollable(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;
-	while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;
-	return scrollableNode || document.scrollingElement || document.documentElement;
-}
-/**
-* Gets every scrollable ancestor of an element, from the nearest up to (and
-* including) the document scrolling element.
-* @param node - The starting element
-* @param checkForOverflow - If true, only include parents that actually overflow
-*/
-function getScrollParents(node, checkForOverflow) {
-	const parentElements = [];
-	const root = document.scrollingElement || document.documentElement;
-	let current = node;
-	while (current) {
-		if (isScrollable(current, checkForOverflow)) parentElements.push(current);
-		if (current === root) break;
-		current = current.parentElement;
+	function restore() {
+		if (!savedElement) return false;
+		if (isValidForRestore(savedElement)) {
+			if (preventScroll) focusSafely(savedElement);
+			else savedElement.focus();
+			onRestore?.(savedElement);
+			return true;
+		}
+		while (focusStack.length > 0) {
+			const stackElement = popFocusStack();
+			if (stackElement && isValidForRestore(stackElement)) {
+				if (preventScroll) focusSafely(stackElement);
+				else stackElement.focus();
+				onRestore?.(stackElement);
+				return true;
+			}
+		}
+		onRestoreFailed?.();
+		return false;
 	}
-	return parentElements;
-}
-/**
-* Checks if an element will open a virtual keyboard when focused.
-* Used for iOS Safari scroll handling.
-*/
-function willOpenKeyboard(target) {
-	if (!target) return false;
-	const tagName = target.tagName.toLowerCase();
-	if (tagName === "input") {
-		const type = target.type.toLowerCase();
-		return [
-			"text",
-			"search",
-			"url",
-			"tel",
-			"email",
-			"password",
-			"date",
-			"month",
-			"week",
-			"time",
-			"datetime-local",
-			"number"
-		].includes(type);
+	function getSavedElement() {
+		return savedElement;
 	}
-	if (tagName === "textarea") return true;
-	if (target.hasAttribute("contenteditable") && target.getAttribute("contenteditable") !== "false") return true;
-	return false;
-}
-/**
-* Returns the deepest active element, descending through open shadow roots.
-* Mirrors @react-aria/utils' `getActiveElement`.
-*/
-function getActiveElement(doc = document) {
-	let activeElement = doc.activeElement;
-	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
-	return activeElement;
+	function clear() {
+		savedElement = null;
+	}
+	return {
+		restore,
+		getSavedElement,
+		saveCurrentFocus,
+		clear
+	};
 }
+//#endregion
+//#region src/focus/createVirtualFocus.ts
 /**
-* Whether the (deepest) active element is `element` or is contained within it.
-* Mirrors @react-aria/utils' `isFocusWithin`.
+* Virtual focus management for solidaria
+*
+* Provides virtual focus for large collections where tracking DOM focus
+* on every item is impractical. Instead, a single element receives real
+* focus while aria-activedescendant indicates the virtually focused item.
+*
+* This is commonly used in:
+* - Virtualized lists (where not all items are in the DOM)
+* - Large trees
+* - Autocomplete/combobox suggestions
+* - Grid/table navigation
+*
+* This is a local Solid helper. The pinned React Aria revision has no
+* standalone virtual-focus controller with this API.
 */
-function isFocusWithin(element) {
-	const activeElement = getActiveElement(getOwnerDocument(element));
-	return !!activeElement && nodeContains(element, activeElement);
-}
+const DEFAULT_PAGE_SIZE = 10;
 /**
-* Creates a `TreeWalker` that visits the focusable (or, when `tabbable`, the
-* tabbable) descendants of `root`, skipping invisible and inert elements.
-* Mirrors @react-aria/focus's `getFocusableTreeWalker`, minus the focus-scope
-* containment filter (we don't model nested scopes here). Used to treat a
-* selectable collection as a single tab stop.
+* Creates virtual focus management for a collection.
+*
+* Virtual focus uses aria-activedescendant to indicate which item is
+* "focused" while keeping real DOM focus on a container element. This
+* is more performant for large collections and required for virtualized
+* lists where items may not be in the DOM.
+*
+* @example
+* ```tsx
+* function Listbox(props) {
+*   const virtualFocus = createVirtualFocus({
+*     items: () => props.items,
+*     getKey: (item) => item.id,
+*     isDisabled: (item) => item.disabled,
+*   });
+*
+*   return (
+*     <ul
+*       role="listbox"
+*       tabIndex={0}
+*       aria-activedescendant={virtualFocus.containerProps['aria-activedescendant']()}
+*       onKeyDown={virtualFocus.containerProps.onKeyDown}
+*     >
+*       <For each={props.items}>
+*         {(item) => (
+*           <li
+*             {...virtualFocus.getItemProps(item.id)}
+*             role="option"
+*             aria-selected={virtualFocus.isFocused(item.id)}
+*           >
+*             {item.name}
+*           </li>
+*         )}
+*       </For>
+*     </ul>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With controlled focus
+* function ControlledListbox() {
+*   const [focusedKey, setFocusedKey] = createSignal<string | null>(null);
+*
+*   const virtualFocus = createVirtualFocus({
+*     items: () => items,
+*     getKey: (item) => item.id,
+*     focusedKey: focusedKey,
+*     onFocusChange: setFocusedKey,
+*   });
+*
+*   return <ul>...</ul>;
+* }
+* ```
 */
-function getFocusableTreeWalker(root, opts) {
-	const accept = (node) => (opts?.tabbable ? isTabbable(node) : isFocusable(node)) && (!opts?.accept || opts.accept(node));
-	const walker = getOwnerDocument(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { acceptNode(node) {
-		if (opts?.from?.contains(node)) return NodeFilter.FILTER_REJECT;
-		if (accept(node)) return NodeFilter.FILTER_ACCEPT;
-		return NodeFilter.FILTER_SKIP;
-	} });
-	if (opts?.from) walker.currentNode = opts.from;
-	return walker;
+function createVirtualFocus(options) {
+	const { items, getKey, isDisabled = () => false, defaultFocusedKey, focusedKey: controlledFocusedKey, onFocusChange, wrap = true, skipDisabled = true, orientation = "vertical" } = options;
+	if (isServer) {
+		const emptyAccessor = () => null;
+		return {
+			focusedKey: emptyAccessor,
+			focusedItem: emptyAccessor,
+			setFocusedKey: () => {},
+			focusNext: () => {},
+			focusPrevious: () => {},
+			focusFirst: () => {},
+			focusLast: () => {},
+			focusPageDown: () => {},
+			focusPageUp: () => {},
+			isFocused: () => false,
+			containerProps: {
+				"aria-activedescendant": () => void 0,
+				onKeyDown: () => {}
+			},
+			getItemProps: (key) => ({ id: `item-${key}` })
+		};
+	}
+	let liveKey = defaultFocusedKey ?? null;
+	const [internalKey, setInternalKeySignal] = createSignal(liveKey, { ownedWrite: true });
+	const internalKeyRead = (() => {
+		if (getObserver()) internalKey();
+		return liveKey;
+	});
+	const setInternalKey = (key) => {
+		liveKey = key;
+		setInternalKeySignal(key);
+	};
+	const focusedKey = controlledFocusedKey ?? internalKeyRead;
+	const setFocusedKey = (key) => {
+		if (controlledFocusedKey) onFocusChange?.(key);
+		else {
+			setInternalKey(key);
+			onFocusChange?.(key);
+		}
+	};
+	const focusedItem = () => {
+		const key = focusedKey();
+		if (!key) return null;
+		return items().find((item) => getKey(item) === key) ?? null;
+	};
+	const getValidItems = () => {
+		if (!skipDisabled) return items();
+		return items().filter((item) => !isDisabled(item));
+	};
+	const getKeyIndex = (key) => {
+		if (!key) return -1;
+		return getValidItems().findIndex((item) => getKey(item) === key);
+	};
+	const focusByIndex = (index) => {
+		const validItems = getValidItems();
+		if (validItems.length === 0) return;
+		let targetIndex = index;
+		if (wrap) targetIndex = (index % validItems.length + validItems.length) % validItems.length;
+		else targetIndex = Math.max(0, Math.min(index, validItems.length - 1));
+		const item = validItems[targetIndex];
+		if (item) setFocusedKey(getKey(item));
+	};
+	const focusNext = () => {
+		const currentIndex = getKeyIndex(focusedKey());
+		focusByIndex(currentIndex + 1);
+	};
+	const focusPrevious = () => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - 1);
+	};
+	const focusFirst = () => {
+		focusByIndex(0);
+	};
+	const focusLast = () => {
+		focusByIndex(getValidItems().length - 1);
+	};
+	const focusPageDown = (pageSize = DEFAULT_PAGE_SIZE) => {
+		const currentIndex = getKeyIndex(focusedKey());
+		focusByIndex(currentIndex + pageSize);
+	};
+	const focusPageUp = (pageSize = DEFAULT_PAGE_SIZE) => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - pageSize);
+	};
+	const isFocused = (key) => {
+		return focusedKey() === key;
+	};
+	const onKeyDown = (e) => {
+		const isVertical = orientation === "vertical" || orientation === "both";
+		const isHorizontal = orientation === "horizontal" || orientation === "both";
+		switch (e.key) {
+			case "ArrowDown":
+				if (isVertical) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowUp":
+				if (isVertical) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "ArrowRight":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowLeft":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "Home":
+				e.preventDefault();
+				focusFirst();
+				break;
+			case "End":
+				e.preventDefault();
+				focusLast();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				focusPageDown();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				focusPageUp();
+		}
+	};
+	const containerProps = {
+		"aria-activedescendant": () => {
+			const key = focusedKey();
+			return key ? `item-${key}` : void 0;
+		},
+		onKeyDown
+	};
+	const getItemProps = (key) => ({ id: `item-${key}` });
+	return {
+		focusedKey,
+		focusedItem,
+		setFocusedKey,
+		focusNext,
+		focusPrevious,
+		focusFirst,
+		focusLast,
+		focusPageDown,
+		focusPageUp,
+		isFocused,
+		containerProps,
+		getItemProps
+	};
 }
 //#endregion
-//#region src/utils/focus.ts
+//#region src/focus/createAutoFocus.ts
 /**
-* Focus management utilities.
-* Based on @react-aria/utils focus utilities.
+* Auto-focus management for solidaria
+*
+* Provides priority-based auto-focus with deferred execution
+* and conflict resolution for multiple auto-focus elements.
+*
+* This is a local Solid helper. The pinned React Aria revision has no
+* priority-based auto-focus queue API.
 */
+let autoFocusQueue = [];
+const pendingAutoFocus = /* @__PURE__ */ new Set();
+let processingTimeout = null;
 /**
-* Focuses an element without scrolling the page.
-* Uses preventScroll option with fallback for older browsers.
+* Process the auto-focus queue and focus the highest priority element.
 */
-function focusWithoutScrolling(element) {
-	if (!element) return;
+function processAutoFocusQueue() {
+	if (processingTimeout !== null) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
+	}
+	if (autoFocusQueue.length === 0) return;
+	autoFocusQueue.sort((a, b) => b.priority - a.priority);
+	const winner = autoFocusQueue[0];
+	const losers = autoFocusQueue.slice(1);
+	autoFocusQueue = [];
 	try {
-		element.focus({ preventScroll: true });
-	} catch {
-		const scrollPositions = getScrollableAncestors(element).map((el) => ({
-			element: el,
-			scrollTop: el.scrollTop,
-			scrollLeft: el.scrollLeft
-		}));
-		element.focus();
-		for (const { element: el, scrollTop, scrollLeft } of scrollPositions) {
-			el.scrollTop = scrollTop;
-			el.scrollLeft = scrollLeft;
+		for (const loser of losers) {
+			if (!pendingAutoFocus.has(loser)) continue;
+			removeRequest(loser);
+			loser.onSkip?.();
+		}
+		if (!pendingAutoFocus.has(winner)) return;
+		const element = winner.ref();
+		if (!pendingAutoFocus.has(winner)) return;
+		if (!element) {
+			removeRequest(winner);
+			winner.onSkip?.();
+			return;
+		}
+		const activeElement = document.activeElement;
+		if (!(winner.force || !activeElement || activeElement === document.body || activeElement === document.documentElement)) {
+			removeRequest(winner);
+			winner.onSkip?.();
+			return;
 		}
+		if (winner.delay > 0) winner.timeout = setTimeout(() => {
+			if (!pendingAutoFocus.has(winner)) return;
+			try {
+				const el = winner.ref();
+				if (!pendingAutoFocus.has(winner)) return;
+				removeRequest(winner);
+				if (el && document.body.contains(el)) {
+					if (winner.preventScroll) focusSafely(el);
+					else el.focus();
+					winner.onFocus?.(el);
+				}
+			} finally {
+				removeRequest(winner);
+			}
+		}, winner.delay);
+		else {
+			removeRequest(winner);
+			if (winner.preventScroll) focusSafely(element);
+			else element.focus();
+			winner.onFocus?.(element);
+		}
+	} catch (error) {
+		for (const item of [winner, ...losers]) removeRequest(item);
+		throw error;
 	}
 }
 /**
-* Gets all scrollable ancestors of an element.
+* Queue an element for auto-focus.
 */
-function getScrollableAncestors(element) {
-	const ancestors = [];
-	let parent = element.parentElement;
-	while (parent) {
-		const style = getComputedStyle(parent);
-		const overflowY = style.overflowY;
-		const overflowX = style.overflowX;
-		if (overflowY === "auto" || overflowY === "scroll" || overflowX === "auto" || overflowX === "scroll") ancestors.push(parent);
-		parent = parent.parentElement;
+function queueAutoFocus(item) {
+	pendingAutoFocus.add(item);
+	autoFocusQueue.push(item);
+	if (processingTimeout === null) processingTimeout = setTimeout(processAutoFocusQueue, 0);
+}
+/**
+* Cancel this request in the queue, processing batch, or delayed phase.
+*/
+function removeRequest(item) {
+	pendingAutoFocus.delete(item);
+	autoFocusQueue = autoFocusQueue.filter((queued) => queued !== item);
+	if (item.timeout !== void 0) {
+		clearTimeout(item.timeout);
+		item.timeout = void 0;
 	}
-	const doc = getOwnerDocument(element);
-	ancestors.push(doc.documentElement);
-	return ancestors;
 }
 /**
-* Prevents focus from moving to a new element temporarily.
-* Used when clicking on a button that shouldn't steal focus.
+* Creates auto-focus behavior for an element.
+*
+* This hook registers the element for auto-focus when mounted. If multiple
+* elements request auto-focus, the one with the highest priority wins.
+*
+* @param ref - Accessor for the element to focus
+* @param options - Auto-focus options
+*
+* @example
+* ```tsx
+* function Dialog(props) {
+*   let contentRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => contentRef, {
+*     priority: 10, // High priority for dialogs
+*     onFocus: () => console.log('Dialog focused'),
+*   });
+*
+*   return (
+*     <div ref={contentRef} tabIndex={-1}>
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With delay for animations
+* function AnimatedPanel() {
+*   let panelRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => panelRef, {
+*     delay: 300, // Wait for animation
+*   });
+*
+*   return <div ref={panelRef} class="animated-panel">...</div>;
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Conditional auto-focus
+* function Input(props) {
+*   let inputRef: HTMLInputElement | undefined;
+*
+*   createAutoFocus(() => inputRef, {
+*     isEnabled: props.autoFocus,
+*   });
+*
+*   return <input ref={inputRef} />;
+* }
+* ```
 */
-function preventFocus(target) {
-	while (target && !isFocusable(target)) target = target.parentElement;
-	const ownerWindow = getOwnerWindow(target);
-	const activeElement = ownerWindow.document.activeElement;
-	if (!activeElement || activeElement === target) return;
-	let isRefocusing = false;
-	const onBlur = (event) => {
-		if (getEventTarget(event) === activeElement || isRefocusing) event.stopImmediatePropagation();
+function createAutoFocus(ref, options = {}) {
+	const { isEnabled = true, priority = 0, delay = 0, force = false, preventScroll = true, onFocus, onSkip } = options;
+	let canceled = false;
+	const request = {
+		ref,
+		priority,
+		delay,
+		force,
+		preventScroll,
+		onFocus,
+		onSkip
 	};
-	const onFocusOut = (event) => {
-		if (getEventTarget(event) === activeElement || isRefocusing) {
-			event.stopImmediatePropagation();
-			if (!target && !isRefocusing) {
-				isRefocusing = true;
-				focusWithoutScrolling(activeElement);
-				cleanup();
-			}
-		}
+	onSettled(() => {
+		if (!isEnabled || canceled) return;
+		queueAutoFocus(request);
+	});
+	if (isServer) return {
+		focus: () => {},
+		cancel: () => {}
 	};
-	const onFocus = (event) => {
-		if (getEventTarget(event) === target || isRefocusing) event.stopImmediatePropagation();
+	onOwnedCleanup(() => {
+		canceled = true;
+		removeRequest(request);
+	});
+	const focus = () => {
+		if (canceled) return;
+		const element = ref();
+		if (!element) return;
+		if (preventScroll) focusSafely(element);
+		else element.focus();
+		onFocus?.(element);
 	};
-	const onFocusIn = (event) => {
-		if (getEventTarget(event) === target || isRefocusing) {
-			event.stopImmediatePropagation();
-			if (!isRefocusing) {
-				isRefocusing = true;
-				focusWithoutScrolling(activeElement);
-				cleanup();
-			}
-		}
+	const cancel = () => {
+		canceled = true;
+		removeRequest(request);
 	};
-	ownerWindow.addEventListener("blur", onBlur, true);
-	ownerWindow.addEventListener("focusout", onFocusOut, true);
-	ownerWindow.addEventListener("focusin", onFocusIn, true);
-	ownerWindow.addEventListener("focus", onFocus, true);
-	const raf = ownerWindow.requestAnimationFrame(cleanup);
-	function cleanup() {
-		ownerWindow.cancelAnimationFrame(raf);
-		ownerWindow.removeEventListener("blur", onBlur, true);
-		ownerWindow.removeEventListener("focusout", onFocusOut, true);
-		ownerWindow.removeEventListener("focusin", onFocusIn, true);
-		ownerWindow.removeEventListener("focus", onFocus, true);
-		isRefocusing = false;
+	return {
+		focus,
+		cancel
+	};
+}
+/**
+* Clears all pending auto-focus requests.
+* Useful for testing or when navigating away.
+*/
+function clearAutoFocusQueue() {
+	if (processingTimeout !== null) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
 	}
-	return cleanup;
+	for (const item of pendingAutoFocus) removeRequest(item);
 }
 /**
-* Safely focuses an element, alias for focusWithoutScrolling.
-* This matches the react-aria focusSafely function name.
+* Gets the current auto-focus queue length.
+* Useful for debugging.
 */
-const focusSafely = focusWithoutScrolling;
+function getAutoFocusQueueLength() {
+	return autoFocusQueue.length;
+}
 //#endregion
-export { willOpenKeyboard as C, shouldPreventDefaultUp as S, isValidInputKey as _, getEventTarget as a, openLink as b, getOwnerWindow as c, isElementVisible as d, isFocusWithin as f, isTabbable as g, isScrollable as h, getActiveElement as i, getScrollParent as l, isHTMLAnchorLink as m, focusWithoutScrolling as n, getFocusableTreeWalker as o, isFocusable as p, preventFocus as r, getOwnerDocument as s, focusSafely as t, getScrollParents as u, isValidKeyboardEvent as v, shouldPreventDefaultKeyboard as x, nodeContains as y };
+export { clearFocusStack as a, popFocusStack as c, createVirtualFocus as i, pushFocusStack as l, createAutoFocus as n, createFocusRestore as o, getAutoFocusQueueLength as r, getFocusStackLength as s, clearAutoFocusQueue as t };
 
 //# sourceMappingURL=focus.jsx.map