@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/shared/use-dialog.js

@@ -0,0 +1,175 @@
+import { dataAttrs } from "./data-attrs.js";
+import { useControlled } from "./use-controlled.js";
+import { createContext } from "./context.js";
+import { popupStateAttrs } from "./popup-state-attrs.js";
+import { useTransitionStatus } from "./use-transition-status.js";
+import { useExitAnimation } from "./use-exit-animation.js";
+import { useLabeling } from "./labeling.js";
+import { provideSurface } from "./surface.js";
+import { useDismiss } from "./use-dismiss.js";
+import { useFocusTrap } from "./use-focus-trap.js";
+import { useScrollLock } from "./use-scroll-lock.js";
+import { useInertBackground } from "./use-inert-background.js";
+import { elementOf } from "./element-of.js";
+import { computed, onScopeDispose, ref, toValue, useId, watch } from "vue";
+//#region src/shared/use-dialog.ts
+var { provideContext: provideDialogParent, useOptionalContext: useDialogParent } = createContext("DialogParent");
+function useDialog(options = {}) {
+	const triggerId = useId();
+	const popupId = useId();
+	const { titleId, descriptionId, registerTitle, registerDescription } = useLabeling();
+	const popupRef = ref(null);
+	const backdropRef = ref(null);
+	const triggerRef = ref(null);
+	const role = () => toValue(options.role) ?? "dialog";
+	const isAlert = () => role() === "alertdialog";
+	const modal = () => isAlert() || (toValue(options.modal) ?? true);
+	const parent = useDialogParent();
+	const depth = (parent?.depth ?? -1) + 1;
+	const openBelow = ref([]);
+	const deepestOpen = computed(() => openBelow.value.reduce((deepest, entry) => Math.max(deepest, entry), depth));
+	const level = computed(() => deepestOpen.value - depth);
+	provideDialogParent({
+		depth,
+		closeChain: () => {
+			open.value = false;
+			parent?.closeChain();
+		},
+		registerNested: (nestedDepth) => {
+			openBelow.value = [...openBelow.value, nestedDepth];
+			const releaseAncestor = parent?.registerNested(nestedDepth);
+			let released = false;
+			return () => {
+				if (released) return;
+				released = true;
+				const next = openBelow.value.slice();
+				next.splice(next.indexOf(nestedDepth), 1);
+				openBelow.value = next;
+				releaseAncestor?.();
+			};
+		}
+	});
+	const open = useControlled({
+		value: () => toValue(options.open),
+		defaultValue: () => toValue(options.defaultOpen) ?? false,
+		onChange: options.onChange,
+		prop: "open",
+		empty: false,
+		name: "useDialog",
+		label: "open"
+	});
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(() => open.value, { animateInitialOpen: true });
+	const state = computed(() => ({
+		open: open.value,
+		modal: modal(),
+		transitionStatus: transitionStatus.value,
+		nested: level.value > 0,
+		level: level.value
+	}));
+	let unregisterFromParent = null;
+	watch(mounted, (isMounted) => {
+		if (isMounted) unregisterFromParent ??= parent?.registerNested(depth) ?? null;
+		else {
+			unregisterFromParent?.();
+			unregisterFromParent = null;
+		}
+	}, { immediate: true });
+	onScopeDispose(() => unregisterFromParent?.());
+	const hooks = computed(() => dataAttrs(state.value, {
+		...popupStateAttrs,
+		modal: () => null
+	}));
+	function close() {
+		open.value = false;
+	}
+	useDismiss({
+		enabled: () => mounted.value,
+		elements: () => [popupRef.value],
+		escapeKey: () => toValue(options.escapeKey) ?? true,
+		outsidePress: () => !isAlert() && (toValue(options.outsidePress) ?? false),
+		modal,
+		onDismiss: close
+	});
+	useFocusTrap({
+		enabled: () => open.value,
+		container: popupRef,
+		modal,
+		autoFocus: true,
+		returnFocus: true
+	});
+	useScrollLock(() => mounted.value && modal());
+	useInertBackground(() => open.value && modal(), popupRef);
+	useExitAnimation({
+		open: () => open.value,
+		mounted,
+		setMounted,
+		element: popupRef
+	});
+	const triggerProps = computed(() => ({
+		...hooks.value,
+		"data-part": "trigger",
+		id: triggerId,
+		type: "button",
+		"aria-haspopup": "dialog",
+		"aria-expanded": open.value,
+		"aria-controls": mounted.value ? popupId : void 0,
+		ref: (el) => {
+			triggerRef.value = elementOf(el);
+		},
+		onClick() {
+			open.value = !open.value;
+		}
+	}));
+	const backdropProps = computed(() => ({
+		...hooks.value,
+		"data-part": "backdrop",
+		style: { "--dialog-level": level.value },
+		"aria-hidden": true,
+		ref: (el) => {
+			backdropRef.value = el ?? null;
+		}
+	}));
+	const popupProps = computed(() => ({
+		...hooks.value,
+		style: { "--dialog-level": level.value },
+		id: popupId,
+		role: role(),
+		"aria-modal": modal() ? true : void 0,
+		"aria-labelledby": titleId.value,
+		"aria-describedby": descriptionId.value,
+		tabindex: -1,
+		ref: (el) => {
+			popupRef.value = el ?? null;
+		}
+	}));
+	const closeProps = computed(() => ({
+		"data-part": "close",
+		type: "button",
+		onClick: close
+	}));
+	provideSurface({
+		present: mounted,
+		state,
+		popupProps
+	});
+	return {
+		open,
+		state,
+		present: mounted,
+		triggerProps,
+		backdropProps,
+		popupProps,
+		closeProps,
+		registerTitle,
+		registerDescription,
+		popupRef,
+		close,
+		closeAll: () => {
+			open.value = false;
+			parent?.closeChain();
+		}
+	};
+}
+var { provideContext: provideDialogContext, useContext: useDialogContext } = createContext("Dialog");
+//#endregion
+export { provideDialogContext, useDialog, useDialogContext };

package/dist/shared/use-dismiss.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeRefOrGetter } from 'vue';
+import { type DismissReason } from './dismiss-stack';
+export interface UseDismissOptions {
+    /** Whether the layer is currently open. */
+    enabled: MaybeRefOrGetter<boolean>;
+    /** Elements that count as inside. A press on any of these will not dismiss. */
+    elements: () => (HTMLElement | null)[];
+    /** Called when the layer should close. */
+    onDismiss: (reason: DismissReason) => void;
+    /** Close on Escape. */
+    escapeKey?: MaybeRefOrGetter<boolean>;
+    /** Close on a press outside. */
+    outsidePress?: MaybeRefOrGetter<boolean>;
+    /** Whether this layer covers what is beneath it. */
+    modal?: MaybeRefOrGetter<boolean>;
+}
+export declare function useDismiss(options: UseDismissOptions): void;

package/dist/shared/use-dismiss.js

@@ -0,0 +1,24 @@
+import { pushDismissLayer } from "./dismiss-stack.js";
+import { onScopeDispose, toValue, watch } from "vue";
+//#region src/shared/use-dismiss.ts
+function useDismiss(options) {
+	let remove = null;
+	watch(() => toValue(options.enabled), (enabled) => {
+		remove?.();
+		remove = null;
+		if (!enabled || typeof document === "undefined") return;
+		remove = pushDismissLayer({
+			elements: options.elements,
+			dismiss: options.onDismiss,
+			escapeKey: () => toValue(options.escapeKey) ?? true,
+			outsidePress: () => toValue(options.outsidePress) ?? true,
+			modal: () => toValue(options.modal) ?? false
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onScopeDispose(() => remove?.());
+}
+//#endregion
+export { useDismiss };

package/dist/shared/use-exit-animation.d.ts

@@ -0,0 +1,12 @@
+import { type Ref } from 'vue';
+export interface UseExitAnimationOptions {
+    /** Whether the surface is open. */
+    open: () => boolean;
+    /** Whether it is still in the DOM. Outlives `open` for the duration of the exit. */
+    mounted: Ref<boolean>;
+    setMounted: (value: boolean) => void;
+    /** The animating element. Unmounting waits on this. */
+    element: Ref<HTMLElement | null>;
+}
+/** Holds a closing surface in the DOM until its exit animation has finished. */
+export declare function useExitAnimation(options: UseExitAnimationOptions): void;

package/dist/shared/use-exit-animation.js

@@ -0,0 +1,15 @@
+import { waitForAnimationsToFinish } from "./animations.js";
+import { watch } from "vue";
+//#region src/shared/use-exit-animation.ts
+/** Holds a closing surface in the DOM until its exit animation has finished. */
+function useExitAnimation(options) {
+	watch(() => [options.open(), options.mounted.value], ([isOpen, isMounted]) => {
+		const element = options.element.value;
+		if (isOpen || !isMounted || !element) return;
+		waitForAnimationsToFinish(element).then(() => {
+			if (!options.open()) options.setMounted(false);
+		});
+	}, { flush: "post" });
+}
+//#endregion
+export { useExitAnimation };

package/dist/shared/use-field.d.ts

@@ -0,0 +1,119 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type TransitionStatus } from './use-transition-status';
+export interface FieldState {
+    /** Whether the field ignores user interaction. */
+    disabled: boolean;
+    /** Whether the value can be read and selected but not edited. */
+    readOnly: boolean;
+    /** Whether a value is required: announced and marked, never enforced by the browser. */
+    required: boolean;
+    /** Whether the control has been focused and left at least once. */
+    touched: boolean;
+    /** Whether the value differs from the one the control started with. */
+    dirty: boolean;
+    /** Whether the control holds a non-empty value. */
+    filled: boolean;
+    /** Whether the control currently has focus. */
+    focused: boolean;
+    /** Whether the field is marked invalid. */
+    invalid: boolean;
+}
+export interface UseFieldOptions {
+    /** Whether the field ignores user interaction. */
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** Whether the value can be read and selected but not edited. */
+    readOnly?: MaybeRefOrGetter<boolean>;
+    /** Whether a value is required: announced and marked, never enforced by the browser. */
+    required?: MaybeRefOrGetter<boolean>;
+    /** Whether the field is invalid. */
+    invalid?: MaybeRefOrGetter<boolean>;
+    /** Whether the control has been touched. */
+    touched?: MaybeRefOrGetter<boolean | undefined>;
+    /** Whether the value has changed. */
+    dirty?: MaybeRefOrGetter<boolean | undefined>;
+    id?: MaybeRefOrGetter<string | undefined>;
+    /** The key into the validation errors; also the control's form name unless it sets one. */
+    name?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseFieldReturn {
+    /** The full state, mirrored onto every part. */
+    state: ComputedRef<FieldState>;
+    /** Bind to the element wrapping the whole field. */
+    rootProps: ComputedRef<Record<string, unknown>>;
+    /** Bind to the `<label>`. Associates itself with the control. */
+    labelProps: ComputedRef<Record<string, unknown>>;
+    /** Bind to a box drawn around the control and its adornments. */
+    groupProps: ComputedRef<Record<string, unknown>>;
+    /** The group's state: the field's, also invalid while the control rejects its own value. */
+    groupState: ComputedRef<FieldState>;
+    /** The id shared by the label's `for` and the control. */
+    controlId: ComputedRef<string>;
+    /** The label's id, while one is mounted. Controls point `aria-labelledby` here. */
+    labelledBy: ComputedRef<string | undefined>;
+    /** The ids describing the control, for its `aria-describedby`. */
+    describedBy: ComputedRef<string | undefined>;
+    /** Whether a value is required. Read by controls that mark themselves. */
+    required: () => boolean;
+    name: () => string | undefined;
+    /** This field's message in the validation errors. */
+    error: ComputedRef<string | undefined>;
+    /** Reports the value changing, which clears this field's validation error. */
+    changed: () => void;
+    /** The control element, once one has published itself. */
+    controlRef: Ref<HTMLElement | null>;
+    /** Moves focus to the control. */
+    focusControl: () => void;
+    /** Publishes the control's element, so the frame can hand presses to it. */
+    setControl: (element: HTMLElement | null) => void;
+    /** Marks the field touched, as leaving the control does. */
+    setTouched: (touched: boolean) => void;
+    /** Reports focus moving into or out of the control. */
+    setFocused: (focused: boolean) => void;
+    /** Reports whether the control holds a value. */
+    setFilled: (filled: boolean) => void;
+    /** Reports the control's own check failing, as a number past `max` does. Marks only the group. */
+    setControlInvalid: (invalid: boolean) => void;
+    /** Reports whether the control has moved away from its initial value. */
+    setDirty: (dirty: boolean) => void;
+    /** Adds an id to the control's `aria-describedby`. */
+    registerMessage: (id: string) => () => void;
+    /** Points the control's `aria-labelledby` at the label. Returns the undo. */
+    registerLabel: () => () => void;
+}
+export declare function useField(options?: UseFieldOptions): UseFieldReturn;
+export declare const provideFieldContext: (value: UseFieldReturn) => UseFieldReturn, useFieldContext: () => UseFieldReturn, useOptionalFieldContext: () => UseFieldReturn | null;
+/** Marks the field dirty while `value` differs from what it was on mount, and reports each change. */
+export declare function useFieldValue(field: UseFieldReturn | null, value: () => unknown): void;
+export interface UseFieldMessageReturn {
+    /** Bind to the describing element. Carries its generated id and the hooks. */
+    messageProps: ComputedRef<Record<string, unknown>>;
+    /** The state, for rendering. */
+    state: ComputedRef<FieldState>;
+}
+/** An element that describes the control, such as a hint below it. */
+export declare function useFieldMessage(): UseFieldMessageReturn;
+export interface FieldErrorState extends FieldState {
+    /**
+     * Where the message is in its enter or exit animation.
+     * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+     */
+    transitionStatus: TransitionStatus;
+}
+export interface UseFieldErrorOptions {
+    /** Forces the message shown or hidden. */
+    match?: MaybeRefOrGetter<boolean | undefined>;
+    /** Shows this name's validation error, inside a `FieldRoot` or on its own. */
+    name?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseFieldErrorReturn {
+    /** Whether the element should be in the DOM. Stays true through the exit animation. */
+    mounted: Ref<boolean>;
+    /** Bind to the message element. */
+    errorProps: ComputedRef<Record<string, unknown>>;
+    /** The state, including the transition phase. */
+    state: ComputedRef<FieldErrorState>;
+    /** The field's validation message, kept through the exit animation. */
+    message: Ref<string | undefined>;
+}
+/** The message shown when the field is invalid, or for a named validation error. */
+export declare function useFieldError(options?: UseFieldErrorOptions): UseFieldErrorReturn;

package/dist/shared/use-field.js

@@ -0,0 +1,218 @@
+import { dataAttrs } from "./data-attrs.js";
+import { createContext } from "./context.js";
+import { popupStateAttrs } from "./popup-state-attrs.js";
+import { useTransitionStatus } from "./use-transition-status.js";
+import { useExitAnimation } from "./use-exit-animation.js";
+import { useValidate } from "../composables/use-validate.js";
+import { computed, onBeforeUnmount, onScopeDispose, ref, toValue, useId, watch } from "vue";
+//#region src/shared/use-field.ts
+var LABELABLE = "button, input, meter, output, progress, select, textarea";
+var INTERACTIVE = "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+function useField(options = {}) {
+	const generatedId = useId();
+	const labelId = useId();
+	const controlEl = ref(null);
+	const messageIds = ref([]);
+	const hasLabel = ref(false);
+	const controlId = computed(() => toValue(options.id) ?? generatedId);
+	const disabled = () => toValue(options.disabled) ?? false;
+	const readOnly = () => toValue(options.readOnly) ?? false;
+	const required = () => toValue(options.required) ?? false;
+	const name = () => toValue(options.name);
+	const validation = useValidate();
+	const error = computed(() => {
+		const key = name();
+		return key === void 0 ? void 0 : validation.errors.value[key];
+	});
+	const invalid = () => (toValue(options.invalid) ?? false) || error.value !== void 0;
+	const touchedState = ref(false);
+	const focused = ref(false);
+	const filled = ref(false);
+	const controlInvalid = ref(false);
+	const dirtyState = ref(false);
+	const touched = computed(() => toValue(options.touched) ?? touchedState.value);
+	const dirty = computed(() => toValue(options.dirty) ?? dirtyState.value);
+	function setTouched(next) {
+		if (toValue(options.touched) === void 0) touchedState.value = next;
+	}
+	const state = computed(() => ({
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		touched: touched.value,
+		dirty: dirty.value,
+		filled: filled.value,
+		focused: focused.value,
+		invalid: invalid()
+	}));
+	const hooks = computed(() => dataAttrs(state.value));
+	const describedBy = computed(() => messageIds.value.length > 0 ? messageIds.value.join(" ") : void 0);
+	const labelledBy = computed(() => hasLabel.value ? labelId : void 0);
+	function focusControl() {
+		controlEl.value?.focus();
+	}
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "field"
+	}));
+	const labelProps = computed(() => ({
+		...hooks.value,
+		"data-part": "field-label",
+		id: labelId,
+		for: controlId.value,
+		onClick(event) {
+			const control = event.currentTarget.getRootNode().getElementById?.(controlId.value);
+			if (!control || control.matches(LABELABLE)) return;
+			control.focus();
+		}
+	}));
+	const groupState = computed(() => ({
+		...state.value,
+		invalid: state.value.invalid || controlInvalid.value
+	}));
+	return {
+		state,
+		rootProps,
+		labelProps,
+		groupProps: computed(() => ({
+			...dataAttrs(groupState.value),
+			"data-part": "field-group",
+			onMousedown(event) {
+				const target = event.target;
+				if (!target || disabled() || target === controlEl.value) return;
+				if (target.closest(INTERACTIVE)) return;
+				event.preventDefault();
+				focusControl();
+			}
+		})),
+		groupState,
+		controlId,
+		labelledBy,
+		describedBy,
+		required,
+		name,
+		error,
+		changed() {
+			const key = name();
+			if (key !== void 0) validation.clearErrors(key);
+		},
+		controlRef: controlEl,
+		focusControl,
+		setControl: (element) => {
+			controlEl.value = element;
+		},
+		setTouched,
+		setFocused: (next) => {
+			focused.value = next;
+		},
+		setFilled: (next) => {
+			filled.value = next;
+		},
+		setControlInvalid: (next) => {
+			controlInvalid.value = next;
+		},
+		setDirty: (next) => {
+			dirtyState.value = next;
+		},
+		registerMessage(id) {
+			messageIds.value = messageIds.value.concat(id);
+			return () => {
+				messageIds.value = messageIds.value.filter((item) => item !== id);
+			};
+		},
+		registerLabel() {
+			hasLabel.value = true;
+			return () => {
+				hasLabel.value = false;
+			};
+		}
+	};
+}
+var { provideContext: provideFieldContext, useContext: useFieldContext, useOptionalContext: useOptionalFieldContext } = createContext("Field");
+function sameValue(a, b) {
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => sameValue(item, b[i]));
+	if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+	return Object.is(a, b);
+}
+/** Marks the field dirty while `value` differs from what it was on mount, and reports each change. */
+function useFieldValue(field, value) {
+	if (!field) return;
+	const current = value();
+	const initial = Array.isArray(current) ? [...current] : current;
+	watch(() => !sameValue(value(), initial), field.setDirty, { immediate: true });
+	watch(value, field.changed, { deep: true });
+}
+/** An element that describes the control, such as a hint below it. */
+function useFieldMessage() {
+	const field = useFieldContext();
+	const id = useId();
+	onBeforeUnmount(field.registerMessage(id));
+	return {
+		messageProps: computed(() => ({
+			...dataAttrs(field.state.value),
+			"data-part": "field-description",
+			id
+		})),
+		state: field.state
+	};
+}
+var NO_FIELD = {
+	disabled: false,
+	readOnly: false,
+	required: false,
+	touched: false,
+	dirty: false,
+	filled: false,
+	focused: false,
+	invalid: false
+};
+/** The message shown when the field is invalid, or for a named validation error. */
+function useFieldError(options = {}) {
+	const field = useOptionalFieldContext();
+	const validation = useValidate();
+	const id = useId();
+	const element = ref(null);
+	const name = () => toValue(options.name);
+	const error = computed(() => {
+		const key = name();
+		return key === void 0 ? field?.error.value : validation.errors.value[key];
+	});
+	const shown = () => toValue(options.match) ?? (name() === void 0 && field ? field.state.value.invalid : error.value !== void 0);
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(shown);
+	useExitAnimation({
+		open: shown,
+		mounted,
+		setMounted,
+		element
+	});
+	let unregister;
+	watch(mounted, (isMounted) => {
+		unregister?.();
+		unregister = isMounted ? field?.registerMessage(id) : void 0;
+	}, { immediate: true });
+	onScopeDispose(() => unregister?.());
+	const state = computed(() => ({
+		...field?.state.value ?? {
+			...NO_FIELD,
+			invalid: error.value !== void 0
+		},
+		transitionStatus: transitionStatus.value
+	}));
+	const message = ref();
+	watch(error, (next) => next !== void 0 && (message.value = next), { immediate: true });
+	return {
+		mounted,
+		errorProps: computed(() => ({
+			...dataAttrs(state.value, { transitionStatus: popupStateAttrs.transitionStatus }),
+			"data-part": "field-error",
+			id,
+			ref: (el) => {
+				element.value = el ?? null;
+			}
+		})),
+		state,
+		message
+	};
+}
+//#endregion
+export { provideFieldContext, useField, useFieldContext, useFieldError, useFieldMessage, useFieldValue, useOptionalFieldContext };

package/dist/shared/use-focus-trap.d.ts

@@ -0,0 +1,19 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseFocusTrapOptions {
+    /** Whether the trap is active. */
+    enabled: MaybeRefOrGetter<boolean>;
+    /** The element to keep focus within. */
+    container: Ref<HTMLElement | null>;
+    /** Cycle Tab within the container rather than letting it escape. */
+    modal?: MaybeRefOrGetter<boolean>;
+    /** Move focus inside when it opens. */
+    autoFocus?: MaybeRefOrGetter<boolean>;
+    /** Whether the container is where it belongs yet. Auto-focus waits for it. */
+    ready?: MaybeRefOrGetter<boolean>;
+    /** Restore focus to whatever had it before opening. */
+    returnFocus?: MaybeRefOrGetter<boolean>;
+    /** Where focus goes back to when nothing had it, or what had it is gone: a trigger swapped in as it opened. */
+    returnFallback?: () => HTMLElement | null;
+}
+/** Keeps keyboard focus inside an open popup and puts it back when the popup closes. */
+export declare function useFocusTrap(options: UseFocusTrapOptions): void;

package/dist/shared/use-focus-trap.js

@@ -0,0 +1,62 @@
+import { focusFirst, getTabbableElements } from "./focus.js";
+import { nextTick, onScopeDispose, toValue, watch } from "vue";
+//#region src/shared/use-focus-trap.ts
+/** Keeps keyboard focus inside an open popup and puts it back when the popup closes. */
+function useFocusTrap(options) {
+	let previouslyFocused = null;
+	let autoFocused = false;
+	function onKeydown(event) {
+		if (event.key !== "Tab" || !toValue(options.modal ?? true)) return;
+		const container = options.container.value;
+		if (!container) return;
+		const tabbable = getTabbableElements(container);
+		if (tabbable.length === 0) {
+			event.preventDefault();
+			return;
+		}
+		const first = tabbable[0];
+		const last = tabbable[tabbable.length - 1];
+		const active = document.activeElement;
+		if (event.shiftKey && active === first) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	watch(() => toValue(options.enabled), (enabled, wasEnabled) => {
+		if (typeof document === "undefined") return;
+		if (enabled) {
+			previouslyFocused = document.activeElement;
+			document.addEventListener("keydown", onKeydown, true);
+			return;
+		}
+		autoFocused = false;
+		document.removeEventListener("keydown", onKeydown, true);
+		if (wasEnabled && toValue(options.returnFocus ?? true)) {
+			const active = document.activeElement;
+			const inside = options.container.value?.contains(active) ?? false;
+			const previous = previouslyFocused?.isConnected && previouslyFocused !== document.body ? previouslyFocused : options.returnFallback?.() ?? previouslyFocused;
+			if ((inside || active === document.body) && previous?.isConnected) previous.focus();
+		}
+		previouslyFocused = null;
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => toValue(options.enabled) && (options.ready === void 0 || toValue(options.ready)), async (canFocus) => {
+		if (!canFocus || autoFocused || !toValue(options.autoFocus ?? true)) return;
+		autoFocused = true;
+		await nextTick();
+		if (options.container.value && toValue(options.enabled)) focusFirst(options.container.value);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => {
+		document.removeEventListener("keydown", onKeydown, true);
+	});
+}
+//#endregion
+export { useFocusTrap };