ropav 0.0.10 → 0.0.12

package/dist/field.css

@@ -1,40 +1,42 @@
-.rp-field[data-v-f9e37351] {
-  --_rp-field-danger: var(--rp-color-red-filled);
-  display: grid;
-  gap: var(--rp-spacing-1);
-  min-width: 0;
-  font-family: var(--rp-font-family);
-  color: var(--rp-color-text);
-}
-html.dark .rp-field[data-v-f9e37351], [data-rp-color-scheme=dark] .rp-field[data-v-f9e37351] {
-  --_rp-field-danger: var(--rp-color-red-light-color);
-}
-.rp-field__label[data-v-f9e37351] {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: var(--rp-spacing-1);
-  color: var(--rp-color-text);
-  font-size: var(--rp-font-size-sm);
-  font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-md);
-}
-.rp-field__required[data-v-f9e37351] {
-  color: var(--_rp-field-danger);
-  line-height: 1;
-}
-.rp-field__label + .rp-field__control[data-v-f9e37351] {
-  margin-block-start: var(--rp-spacing-1);
-}
-.rp-field__control[data-v-f9e37351] {
-  min-width: 0;
-}
-.rp-field__description[data-v-f9e37351] {
-  margin: 0;
-  color: var(--rp-color-dimmed);
-  font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-md);
-}
-.rp-field--disabled .rp-field__label[data-v-f9e37351], .rp-field--disabled .rp-field__description[data-v-f9e37351] {
-  color: var(--rp-color-disabled-color);
+@layer ropav.components {
+.rp-field[data-v-cbd66c2e] {
+    --_rp-field-danger: var(--rp-color-red-filled);
+    display: grid;
+    gap: var(--rp-spacing-1);
+    min-width: 0;
+    font-family: var(--rp-font-family);
+    color: var(--rp-color-text);
+}
+html.dark .rp-field[data-v-cbd66c2e], [data-rp-color-scheme=dark] .rp-field[data-v-cbd66c2e] {
+    --_rp-field-danger: var(--rp-color-red-light-color);
+}
+.rp-field__label[data-v-cbd66c2e] {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-text);
+    font-size: var(--rp-font-size-sm);
+    font-weight: var(--rp-font-weight-medium);
+    line-height: var(--rp-line-height-md);
+}
+.rp-field__required[data-v-cbd66c2e] {
+    color: var(--_rp-field-danger);
+    line-height: 1;
+}
+.rp-field__label + .rp-field__control[data-v-cbd66c2e] {
+    margin-block-start: var(--rp-spacing-1);
+}
+.rp-field__control[data-v-cbd66c2e] {
+    min-width: 0;
+}
+.rp-field__description[data-v-cbd66c2e] {
+    margin: 0;
+    color: var(--rp-color-dimmed);
+    font-size: var(--rp-font-size-sm);
+    line-height: var(--rp-line-height-md);
+}
+.rp-field--disabled .rp-field__label[data-v-cbd66c2e], .rp-field--disabled .rp-field__description[data-v-cbd66c2e] {
+    color: var(--rp-color-disabled-color);
+}
 }

package/dist/field.js

@@ -1,7 +1,8 @@
 import './field.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
+import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/field/useField.ts
 var INTERACTIVE_LABEL_SELECTOR = [
 	"button",
@@ -66,15 +67,16 @@ function useField(props) {
 //#endregion
 //#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<span data-v-f9e37351 class=rp-field__required aria-hidden=true>*", 2);
-var t2 = template("<label data-v-f9e37351 class=rp-field__label>");
-var t3 = template("<p data-v-f9e37351 class=rp-field__description>");
-var t4 = template("<div data-v-f9e37351><div data-v-f9e37351 class=rp-field__control></div>", 1);
+var t1 = template("<span data-v-cbd66c2e>*");
+var t2 = template("<label data-v-cbd66c2e>");
+var t3 = template("<p data-v-cbd66c2e>");
+var t4 = template("<div data-v-cbd66c2e><div data-v-cbd66c2e></div>", 1);
 delegateEvents("mousedown");
 //#endregion
 //#region src/components/field/field.vue
 var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpField",
+	inheritAttrs: false,
 	__name: "field",
 	props: {
 		id: {},
@@ -91,20 +93,30 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		invalid: {
 			type: Boolean,
 			default: void 0
-		}
+		},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { controlId, labelId, descriptionId, isInvalid, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(__props);
+		const props = __props;
+		const { controlId, labelId, descriptionId, isInvalid, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(props);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-disabled": presence(props.disabled),
+			"data-invalid": presence(isInvalid.value)
+		}));
 		const n20 = t4();
 		const n10 = child(n20, 1);
-		renderEffect(() => setClass(n20, unref(rootClass)));
+		renderEffect(() => setDynamicProps(n20, [rootAttrs.value]));
 		setInsertionState(n20, 0, 0);
 		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
-			renderEffect(() => {
-				setProp(n8, "id", unref(labelId));
-				setProp(n8, "for", unref(controlId));
-			});
+			renderEffect(() => setDynamicProps(n8, [
+				{ id: unref(labelId) },
+				unref(getPartAttrs)("label", { class: "rp-field__label" }),
+				{ for: unref(controlId) }
+			]));
 			setInsertionState(n8, null, 0);
 			createSlot("label", null, () => {
 				const n4 = t0();
@@ -113,11 +125,14 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, 1);
 			setInsertionState(n8, null, 1);
 			createIf(() => __props.required, () => {
-				return t1();
+				const n7 = t1();
+				renderEffect(() => setDynamicProps(n7, [unref(getPartAttrs)("required", { class: "rp-field__required" }), { "aria-hidden": "true" }]));
+				return n7;
 			});
 			n8.$evtmousedown = createInvoker((e) => unref(focusControl)(e));
 			return n8;
 		});
+		renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("control", { class: "rp-field__control" })]));
 		setInsertionState(n10, null, 0);
 		createSlot("default", {
 			id: () => unref(controlId),
@@ -131,7 +146,7 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		setInsertionState(n20, null, 2);
 		createIf(() => unref(hasDescription), () => {
 			const n16 = t3();
-			renderEffect(() => setProp(n16, "id", unref(descriptionId)));
+			renderEffect(() => setDynamicProps(n16, [{ id: unref(descriptionId) }, unref(getPartAttrs)("description", { class: "rp-field__description" })]));
 			setInsertionState(n16, null, 0);
 			createSlot("description", null, () => {
 				const n15 = t0();
@@ -146,6 +161,15 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n20;
 	}
-}), [["__scopeId", "data-v-f9e37351"]]);
+}), [["__scopeId", "data-v-cbd66c2e"]]);
+//#endregion
+//#region src/components/field/types.ts
+var fieldParts = [
+	"root",
+	"label",
+	"required",
+	"control",
+	"description"
+];
 //#endregion
-export { field_default as t };
+export { field_default as n, fieldParts as t };

package/dist/floating.js

@@ -0,0 +1,403 @@
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, toValue, watch } from "vue";
+//#region src/components/floating/useHoverDisclosure.ts
+var DEFAULT_OPEN_DELAY = 0;
+var DEFAULT_CLOSE_DELAY = 0;
+function isElement(value) {
+	return typeof Element !== "undefined" && value instanceof Element;
+}
+function resolveSelector(selector) {
+	if (typeof document === "undefined") return null;
+	try {
+		return document.querySelector(selector);
+	} catch {
+		return null;
+	}
+}
+function resolveInteractionTarget(target) {
+	if (!target) return null;
+	if (typeof target === "string") return resolveSelector(target);
+	if (isElement(target)) return target;
+	return isElement(target.contextElement) ? target.contextElement : null;
+}
+function resolveContentTarget(target) {
+	if (!target) return null;
+	return typeof target === "string" ? resolveSelector(target) : isElement(target) ? target : null;
+}
+function readDelay(value, fallback) {
+	if (value == null) return fallback;
+	return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+function eventElement(event) {
+	return isElement(event.currentTarget) ? event.currentTarget : null;
+}
+function focusLeavesCurrentTarget(event) {
+	const currentTarget = eventElement(event);
+	const nextTarget = event.relatedTarget;
+	return !(currentTarget && typeof Node !== "undefined" && nextTarget instanceof Node && currentTarget.contains(nextTarget));
+}
+function useHoverDisclosure(options = {}) {
+	const uncontrolledOpen = ref(options.defaultOpen === true && !toValue(options.disabled));
+	const resolvedInteractionTarget = shallowRef(null);
+	const resolvedContentTarget = shallowRef(null);
+	const controlledOpen = computed(() => toValue(options.open));
+	const isDisabled = computed(() => Boolean(toValue(options.disabled)));
+	const openState = computed(() => controlledOpen.value ?? uncontrolledOpen.value);
+	const isOpen = computed(() => !isDisabled.value && openState.value);
+	const state = computed(() => isOpen.value ? "open" : "closed");
+	let requestedOpen = openState.value;
+	let triggerHovered = false;
+	let contentHovered = false;
+	let triggerFocused = false;
+	let contentFocused = false;
+	let touchPinned = false;
+	let touchPointerActive = false;
+	let touchClickPending = false;
+	let triggerElement = null;
+	let contentElement = null;
+	let openTimer;
+	let closeTimer;
+	let documentListenersActive = false;
+	let disposed = false;
+	function getOpenDelay() {
+		return readDelay(toValue(options.openDelay), DEFAULT_OPEN_DELAY);
+	}
+	function getCloseDelay() {
+		return readDelay(toValue(options.closeDelay), DEFAULT_CLOSE_DELAY);
+	}
+	function getTouchBehavior() {
+		return toValue(options.touchBehavior) ?? "none";
+	}
+	function clearOpenTimer() {
+		if (openTimer === void 0) return;
+		clearTimeout(openTimer);
+		openTimer = void 0;
+	}
+	function clearCloseTimer() {
+		if (closeTimer === void 0) return;
+		clearTimeout(closeTimer);
+		closeTimer = void 0;
+	}
+	function clearTimers() {
+		clearOpenTimer();
+		clearCloseTimer();
+	}
+	function hasActiveInteraction() {
+		return triggerHovered || contentHovered || triggerFocused || contentFocused || touchPinned;
+	}
+	function setOpen(nextOpen, reason, event) {
+		if (disposed || nextOpen && isDisabled.value || requestedOpen === nextOpen) return;
+		requestedOpen = nextOpen;
+		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
+		options.onOpenChange?.(nextOpen, {
+			reason,
+			event
+		});
+	}
+	function openImmediately(reason, event) {
+		clearTimers();
+		setOpen(true, reason, event);
+	}
+	function closeImmediately(reason, event) {
+		clearTimers();
+		setOpen(false, reason, event);
+	}
+	function scheduleOpen(reason, event) {
+		if (disposed || isDisabled.value) return;
+		clearCloseTimer();
+		clearOpenTimer();
+		if (requestedOpen) return;
+		const delay = getOpenDelay();
+		if (delay === 0) {
+			setOpen(true, reason, event);
+			return;
+		}
+		openTimer = setTimeout(() => {
+			openTimer = void 0;
+			if (!triggerHovered || isDisabled.value) return;
+			setOpen(true, reason, event);
+		}, delay);
+	}
+	function scheduleClose(reason, event) {
+		clearOpenTimer();
+		clearCloseTimer();
+		if (disposed || hasActiveInteraction()) return;
+		closeTimer = setTimeout(() => {
+			closeTimer = void 0;
+			if (hasActiveInteraction()) return;
+			setOpen(false, reason, event);
+		}, getCloseDelay());
+	}
+	function rememberTrigger(event) {
+		triggerElement = eventElement(event) ?? resolvedInteractionTarget.value ?? triggerElement;
+	}
+	function rememberContent(event) {
+		contentElement = eventElement(event) ?? resolvedContentTarget.value ?? contentElement;
+	}
+	function onTriggerPointerenter(event) {
+		rememberTrigger(event);
+		if (event.pointerType === "touch" || isDisabled.value) return;
+		triggerHovered = true;
+		scheduleOpen("hover", event);
+	}
+	function onTriggerPointerleave(event) {
+		rememberTrigger(event);
+		if (event.pointerType === "touch") return;
+		triggerHovered = false;
+		scheduleClose("hover", event);
+	}
+	function onContentPointerenter(event) {
+		rememberContent(event);
+		if (event.pointerType === "touch" || isDisabled.value) return;
+		contentHovered = true;
+		clearCloseTimer();
+	}
+	function onContentPointerleave(event) {
+		rememberContent(event);
+		if (event.pointerType === "touch") return;
+		contentHovered = false;
+		scheduleClose("hover", event);
+	}
+	function onTriggerFocusin(event) {
+		rememberTrigger(event);
+		if (isDisabled.value || toValue(options.openOnFocus) === false) return;
+		triggerFocused = true;
+		openImmediately("focus", event);
+	}
+	function onTriggerFocusout(event) {
+		rememberTrigger(event);
+		if (!focusLeavesCurrentTarget(event)) return;
+		triggerFocused = false;
+		scheduleClose("focus", event);
+	}
+	function onContentFocusin(event) {
+		rememberContent(event);
+		if (isDisabled.value) return;
+		contentFocused = true;
+		clearCloseTimer();
+	}
+	function onContentFocusout(event) {
+		rememberContent(event);
+		if (!focusLeavesCurrentTarget(event)) return;
+		contentFocused = false;
+		scheduleClose("focus", event);
+	}
+	function onTriggerPointerdown(event) {
+		rememberTrigger(event);
+		touchPointerActive = event.pointerType === "touch";
+		touchClickPending = false;
+	}
+	function onTriggerPointerup(event) {
+		rememberTrigger(event);
+		touchClickPending = event.pointerType === "touch" && touchPointerActive;
+		touchPointerActive = false;
+	}
+	function onTriggerPointercancel(event) {
+		rememberTrigger(event);
+		touchPointerActive = false;
+		touchClickPending = false;
+	}
+	function onTriggerClick(event) {
+		rememberTrigger(event);
+		if (!touchClickPending) return;
+		touchClickPending = false;
+		if (getTouchBehavior() !== "toggle" || isDisabled.value) return;
+		event.preventDefault();
+		if (touchPinned || requestedOpen) {
+			touchPinned = false;
+			closeImmediately("touch", event);
+			return;
+		}
+		touchPinned = true;
+		openImmediately("touch", event);
+	}
+	function onContentPointerdown(event) {
+		rememberContent(event);
+	}
+	function onKeydown(event) {
+		if (event.key !== "Escape" || toValue(options.closeOnEscape) === false || !isOpen.value) return;
+		touchPinned = false;
+		closeImmediately("escape", event);
+	}
+	function open() {
+		openImmediately("programmatic");
+	}
+	function close() {
+		touchPinned = false;
+		closeImmediately("programmatic");
+	}
+	function toggle() {
+		if (requestedOpen || isOpen.value) close();
+		else open();
+	}
+	function isEventInside(event) {
+		const elements = [
+			triggerElement,
+			contentElement,
+			resolvedInteractionTarget.value,
+			resolvedContentTarget.value
+		].filter((element) => element !== null);
+		const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+		if (elements.some((element) => path.includes(element))) return true;
+		const target = event.target;
+		return typeof Node !== "undefined" && target instanceof Node && elements.some((element) => element.contains(target));
+	}
+	function onDocumentPointerdown(event) {
+		if (!touchPinned || isEventInside(event)) return;
+		touchPinned = false;
+		closeImmediately("outside", event);
+	}
+	function setDocumentListeners(active) {
+		if (typeof document === "undefined" || active === documentListenersActive) return;
+		documentListenersActive = active;
+		const method = active ? "addEventListener" : "removeEventListener";
+		document[method]("keydown", onKeydown);
+		document[method]("pointerdown", onDocumentPointerdown, true);
+	}
+	function syncInteractionTarget() {
+		resolvedInteractionTarget.value = resolveInteractionTarget(toValue(options.interactionTarget));
+	}
+	function syncContentTarget() {
+		resolvedContentTarget.value = resolveContentTarget(toValue(options.contentTarget));
+	}
+	function bindTriggerTarget(target, cleanup) {
+		triggerElement = target;
+		target.addEventListener("pointerenter", onTriggerPointerenter);
+		target.addEventListener("pointerleave", onTriggerPointerleave);
+		target.addEventListener("pointerdown", onTriggerPointerdown);
+		target.addEventListener("pointerup", onTriggerPointerup);
+		target.addEventListener("pointercancel", onTriggerPointercancel);
+		target.addEventListener("click", onTriggerClick);
+		target.addEventListener("focusin", onTriggerFocusin);
+		target.addEventListener("focusout", onTriggerFocusout);
+		target.addEventListener("keydown", onKeydown);
+		cleanup(() => {
+			target.removeEventListener("pointerenter", onTriggerPointerenter);
+			target.removeEventListener("pointerleave", onTriggerPointerleave);
+			target.removeEventListener("pointerdown", onTriggerPointerdown);
+			target.removeEventListener("pointerup", onTriggerPointerup);
+			target.removeEventListener("pointercancel", onTriggerPointercancel);
+			target.removeEventListener("click", onTriggerClick);
+			target.removeEventListener("focusin", onTriggerFocusin);
+			target.removeEventListener("focusout", onTriggerFocusout);
+			target.removeEventListener("keydown", onKeydown);
+			if (triggerElement === target) triggerElement = null;
+			triggerHovered = false;
+			triggerFocused = false;
+			scheduleClose("hover");
+		});
+	}
+	function bindContentTarget(target, cleanup) {
+		contentElement = target;
+		target.addEventListener("pointerenter", onContentPointerenter);
+		target.addEventListener("pointerleave", onContentPointerleave);
+		target.addEventListener("pointerdown", onContentPointerdown);
+		target.addEventListener("focusin", onContentFocusin);
+		target.addEventListener("focusout", onContentFocusout);
+		target.addEventListener("keydown", onKeydown);
+		cleanup(() => {
+			target.removeEventListener("pointerenter", onContentPointerenter);
+			target.removeEventListener("pointerleave", onContentPointerleave);
+			target.removeEventListener("pointerdown", onContentPointerdown);
+			target.removeEventListener("focusin", onContentFocusin);
+			target.removeEventListener("focusout", onContentFocusout);
+			target.removeEventListener("keydown", onKeydown);
+			if (contentElement === target) contentElement = null;
+			contentHovered = false;
+			contentFocused = false;
+			scheduleClose("hover");
+		});
+	}
+	const triggerProps = computed(() => ({
+		"data-state": state.value,
+		onPointerenter: onTriggerPointerenter,
+		onPointerleave: onTriggerPointerleave,
+		onPointerdown: onTriggerPointerdown,
+		onPointerup: onTriggerPointerup,
+		onPointercancel: onTriggerPointercancel,
+		onClick: onTriggerClick,
+		onFocusin: onTriggerFocusin,
+		onFocusout: onTriggerFocusout,
+		onKeydown
+	}));
+	const contentProps = computed(() => ({
+		"data-state": state.value,
+		onPointerenter: onContentPointerenter,
+		onPointerleave: onContentPointerleave,
+		onPointerdown: onContentPointerdown,
+		onFocusin: onContentFocusin,
+		onFocusout: onContentFocusout,
+		onKeydown
+	}));
+	watch(openState, (value) => {
+		requestedOpen = value;
+		if (!value) {
+			contentHovered = false;
+			contentFocused = false;
+			contentElement = null;
+			touchPinned = false;
+		}
+	}, { flush: "sync" });
+	watch(isDisabled, (disabled) => {
+		if (!disabled) return;
+		triggerHovered = false;
+		contentHovered = false;
+		triggerFocused = false;
+		contentFocused = false;
+		touchPinned = false;
+		touchPointerActive = false;
+		touchClickPending = false;
+		closeImmediately("disabled");
+	});
+	watch(() => getTouchBehavior(), (behavior) => {
+		if (behavior === "toggle" || !touchPinned) return;
+		touchPinned = false;
+		closeImmediately("touch");
+	});
+	watch(() => toValue(options.interactionTarget), syncInteractionTarget, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => toValue(options.contentTarget), syncContentTarget, {
+		flush: "post",
+		immediate: true
+	});
+	watch(resolvedInteractionTarget, (target, _previous, cleanup) => {
+		if (target) bindTriggerTarget(target, cleanup);
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	watch(resolvedContentTarget, (target, _previous, cleanup) => {
+		if (target) bindContentTarget(target, cleanup);
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	watch(isOpen, setDocumentListeners, { flush: "sync" });
+	watch(isOpen, () => {
+		syncInteractionTarget();
+		syncContentTarget();
+	}, { flush: "post" });
+	onMounted(() => {
+		syncInteractionTarget();
+		syncContentTarget();
+		setDocumentListeners(isOpen.value);
+	});
+	onBeforeUnmount(() => {
+		disposed = true;
+		clearTimers();
+		setDocumentListeners(false);
+	});
+	return {
+		isOpen,
+		isDisabled,
+		state,
+		triggerProps,
+		contentProps,
+		open,
+		close,
+		toggle
+	};
+}
+//#endregion
+export { useHoverDisclosure as t };

package/dist/focus-trap.js

@@ -0,0 +1,80 @@
+import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useFocusTrap } from "./useFocusTrap.js";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, extend, ref, setStaticTemplateRef, watch } from "vue";
+//#endregion
+//#region src/components/focus-trap/focus-trap.vue
+var focus_trap_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpFocusTrap",
+	inheritAttrs: false,
+	__name: "focus-trap",
+	props: {
+		active: {
+			type: Boolean,
+			default: true
+		},
+		paused: {
+			type: Boolean,
+			default: false
+		},
+		as: { default: "div" },
+		options: { default: () => ({}) },
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:active", "update:paused"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const containerRef = ref(null);
+		const { isActive, isPaused, activate, deactivate, pause, unpause } = useFocusTrap(containerRef, props.options);
+		const slotProps = computed(() => ({
+			active: isActive.value,
+			paused: isPaused.value,
+			activate,
+			deactivate,
+			pause: pauseTrap,
+			unpause: unpauseTrap
+		}));
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: "rp-focus-trap",
+			"data-active": presence(isActive.value),
+			"data-paused": presence(isPaused.value)
+		}));
+		function pauseTrap(options) {
+			pause(options);
+			if (!props.paused) emit("update:paused", true);
+		}
+		function unpauseTrap(options) {
+			unpause(options);
+			if (props.paused) emit("update:paused", false);
+		}
+		watch(() => props.active, (active) => {
+			if (active) activate();
+			else deactivate();
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.paused, (paused) => {
+			if (paused) pause();
+			else unpause();
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(isActive, (active) => {
+			if (active !== props.active) emit("update:active", active);
+		});
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", { $: [() => slotProps.value] });
+		}, { _: 8 }), 1);
+		setStaticTemplateRef(n1, containerRef, null, "containerRef");
+		return n1;
+	}
+});
+//#endregion
+//#region src/components/focus-trap/types.ts
+var focusTrapParts = ["root"];
+//#endregion
+export { focus_trap_default as n, focusTrapParts as t };