ropav 0.1.7 → 0.1.9

package/dist/number-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-number-input[data-v-1c3d99ad] {
+.rp-number-input[data-v-64cb2fc3] {
     --_rp-number-input-control-size: var(--_rp-input-height);
     --_rp-number-input-text-align: left;
     overflow: hidden;
@@ -7,39 +7,39 @@
     padding-inline: 0;
     vertical-align: middle;
 }
-.rp-number-input[data-v-1c3d99ad] .rp-input__native {
+.rp-number-input[data-v-64cb2fc3] .rp-input__native {
     appearance: textfield;
     padding-inline: var(--_rp-input-padding-x);
     text-align: var(--_rp-number-input-text-align);
 }
-.rp-number-input--text-align-center[data-v-1c3d99ad] {
+.rp-number-input--text-align-center[data-v-64cb2fc3] {
     --_rp-number-input-text-align: center;
 }
-.rp-number-input--text-align-right[data-v-1c3d99ad] {
+.rp-number-input--text-align-right[data-v-64cb2fc3] {
     --_rp-number-input-text-align: right;
 }
-.rp-number-input[data-v-1c3d99ad] .rp-input__native::-webkit-inner-spin-button,
-  .rp-number-input[data-v-1c3d99ad] .rp-input__native::-webkit-outer-spin-button {
+.rp-number-input[data-v-64cb2fc3] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-64cb2fc3] .rp-input__native::-webkit-outer-spin-button {
     margin: 0;
     appearance: none;
 }
-.rp-number-input[data-v-1c3d99ad] .rp-input__left,
-  .rp-number-input[data-v-1c3d99ad] .rp-input__right {
+.rp-number-input[data-v-64cb2fc3] .rp-input__left,
+  .rp-number-input[data-v-64cb2fc3] .rp-input__right {
     align-self: stretch;
     margin-block: calc(-1 * var(--rp-border-width-thin));
 }
-.rp-number-input__controls[data-v-1c3d99ad] {
+.rp-number-input__controls[data-v-64cb2fc3] {
     display: inline-flex;
     height: var(--_rp-input-height);
     flex-shrink: 0;
 }
-.rp-number-input__controls--left[data-v-1c3d99ad] {
+.rp-number-input__controls--left[data-v-64cb2fc3] {
     border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__controls--right[data-v-1c3d99ad] {
+.rp-number-input__controls--right[data-v-64cb2fc3] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-1c3d99ad] {
+.rp-number-input__control[data-v-64cb2fc3] {
     padding: 0;
     font: inherit;
     background: none;
@@ -55,29 +55,29 @@
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-number-input__control + .rp-number-input__control[data-v-1c3d99ad] {
+.rp-number-input__control + .rp-number-input__control[data-v-64cb2fc3] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-1c3d99ad]:hover:not(:disabled) {
+.rp-number-input__control[data-v-64cb2fc3]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
     background-color: var(--rp-color-default-hover);
 }
-.rp-number-input__control[data-v-1c3d99ad]:disabled {
+.rp-number-input__control[data-v-64cb2fc3]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-number-input__control-icon[data-v-1c3d99ad] {
+.rp-number-input__control-icon[data-v-64cb2fc3] {
     display: inline-flex;
     align-items: center;
     width: 0.875em;
     height: 0.875em;
     flex-shrink: 0;
 }
-.rp-number-input__control-icon svg[data-v-1c3d99ad] {
+.rp-number-input__control-icon svg[data-v-64cb2fc3] {
     width: 100%;
     height: 100%;
 }
-.rp-number-input__control-icon[data-v-1c3d99ad] >  svg {
+.rp-number-input__control-icon[data-v-64cb2fc3] >  svg {
     display: block;
     width: 100%;
     height: 100%;

package/dist/number-input.js

@@ -8,7 +8,7 @@ import { t as minus_default } from "./minus.js";
 import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as input_default } from "./input.js";
-import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers } from "vue";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, markRaw, on, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, useTemplateRef, withModifiers } from "vue";
 //#region ~icons/lucide/plus
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M5 12h14m-7-7v14\">", 3, 1);
 function render(_ctx) {
@@ -81,11 +81,18 @@ function getModelInputValue(value) {
 }
 //#endregion
 //#region src/components/number-input/useNumberInput.ts
-function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ?? null) {
+function useNumberInput(props, onUpdate) {
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: onUpdate
+	});
+	const inputComponent = useTemplateRef("inputComponent");
+	provideNestedFormControlOwner();
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeNumberInputBounds(props.min, props.max));
 	const nativeStep = computed(() => normalizeNumberInputStep(props.step));
-	const currentValue = computed(getValue);
+	const currentValue = controllable.value;
 	const modelInputValue = computed(() => getModelInputValue(currentValue.value));
 	const isInteractive = computed(() => !control.disabled && !props.readonly);
 	const controlsPosition = computed(() => normalizeNumberInputControlsPosition(props.controlsPosition));
@@ -126,12 +133,12 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 		const current = Number.isFinite(currentValue.value) ? currentValue.value : null;
 		const next = stepNumberInputValue(current, direction, nativeStep.value, bounds.value);
 		if (current !== null && next === current) return false;
-		emitUpdate(next);
+		controllable.setValue(next);
 		return true;
 	}
 	function onInputUpdate(value) {
 		if (!isInteractive.value) return;
-		emitUpdate(parseNumberInputValue(value));
+		controllable.setValue(parseNumberInputValue(value));
 	}
 	function onKeydown(event) {
 		if (!isInteractive.value) return;
@@ -155,13 +162,25 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 		const next = clampNumberInputValue(current, bounds.value);
 		if (next === current) return;
 		input.value = String(next);
-		emitUpdate(next);
+		controllable.setValue(next);
 	}
+	useFormControl({
+		elements: () => [inputComponent.value?.nativeElement],
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(element) {
+			element.defaultValue = getModelInputValue(controllable.initialValue);
+		},
+		validationMessage: () => props.validationMessage,
+		readResetValue([element]) {
+			controllable.resetValue(parseNumberInputValue(element.value));
+		},
+		syncControlledValue([element]) {
+			element.value = getModelInputValue(controllable.value.value);
+		}
+	});
 	return {
 		control,
 		rootClass,
-		bounds,
-		nativeStep,
 		nativeInputAttrs: computed(() => {
 			const attrs = props.inputAttrs ?? {};
 			return {
@@ -193,10 +212,10 @@ function useNumberInput(props, emitUpdate, getValue = () => props.modelValue ??
 }
 //#endregion
 //#region src/components/number-input/number-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-1c3d99ad><span data-v-1c3d99ad class=rp-number-input__control-icon aria-hidden=true></button>");
-var t1 = template("<span data-v-1c3d99ad class=\"rp-number-input__controls rp-number-input__controls--left\">");
-var t2 = template("<button data-v-1c3d99ad><span data-v-1c3d99ad class=rp-number-input__control-icon aria-hidden=true>");
-var t3 = template("<span data-v-1c3d99ad class=\"rp-number-input__controls rp-number-input__controls--right\">");
+var t0 = template("<button data-v-64cb2fc3><span data-v-64cb2fc3 class=rp-number-input__control-icon aria-hidden=true></button>");
+var t1 = template("<span data-v-64cb2fc3 class=\"rp-number-input__controls rp-number-input__controls--left\">");
+var t2 = template("<button data-v-64cb2fc3><span data-v-64cb2fc3 class=rp-number-input__control-icon aria-hidden=true>");
+var t3 = template("<span data-v-64cb2fc3 class=\"rp-number-input__controls rp-number-input__controls--right\">");
 //#endregion
 //#region src/components/number-input/number-input.vue
 var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -219,8 +238,8 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: true
 		},
-		controlsPosition: { default: "right" },
-		textAlign: { default: "left" },
+		controlsPosition: { default: "split" },
+		textAlign: { default: "center" },
 		clampOnBlur: {
 			type: Boolean,
 			default: true
@@ -259,28 +278,7 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const controllable = useControllableValue({
-			modelValue: () => props.modelValue,
-			defaultValue: () => props.defaultValue,
-			onChange: (value) => emit("update:modelValue", value)
-		});
-		const inputComponentRef = ref(null);
-		provideNestedFormControlOwner();
-		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => controllable.setValue(value), () => controllable.value.value);
-		useFormControl({
-			elements: () => [inputComponentRef.value?.nativeElement],
-			isControlled: () => controllable.isControlled.value,
-			initializeDefault(element) {
-				element.defaultValue = getModelInputValue(controllable.initialValue);
-			},
-			validationMessage: () => props.validationMessage,
-			readResetValue(elements) {
-				controllable.resetValue(parseNumberInputValue(elements[0].value));
-			},
-			syncControlledValue(elements) {
-				elements[0].value = getModelInputValue(controllable.value.value);
-			}
-		});
+		const { control, rootClass, nativeInputAttrs, modelInputValue, leftControls, rightControls, canIncrement, canDecrement, increment, decrement, onInputUpdate } = useNumberInput(props, (value) => emit("update:modelValue", value));
 		const { attrs, getPartAttrs } = useStylesApi(props, "root");
 		const inputClassNames = computed(() => ({
 			root: [rootClass.value, props.classNames?.root],
@@ -410,10 +408,10 @@ var number_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				return n28;
 			}
 		} : void 0] }, true);
-		setStaticTemplateRef(n30, inputComponentRef, null, "inputComponentRef");
+		setStaticTemplateRef(n30, "inputComponent");
 		return n30;
 	}
-}), [["__scopeId", "data-v-1c3d99ad"]]);
+}), [["__scopeId", "data-v-64cb2fc3"]]);
 //#endregion
 //#region src/components/number-input/types.ts
 var numberInputParts = [

package/dist/pagination.js

@@ -6,18 +6,9 @@ import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as clamp } from "./number.js";
 import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as chevron_left_default } from "./chevron-left.js";
 import { t as chevron_right_default } from "./chevron-right.js";
 import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, markRaw, on, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
-//#region ~icons/lucide/chevron-left
-var t0$4 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m15 18l-6-6l6-6\">", 3, 1);
-function render$3(_ctx) {
-	return t0$4();
-}
-var chevron_left_default = markRaw(defineVaporComponent({
-	name: "lucide-chevron-left",
-	render: render$3
-}));
-//#endregion
 //#region ~icons/lucide/chevrons-left
 var t0$3 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m11 17l-5-5l5-5m7 10l-5-5l5-5\">", 3, 1);
 function render$2(_ctx) {

package/dist/pointerSession.js

@@ -0,0 +1,130 @@
+import { t as createRafScheduler } from "./rafScheduler.js";
+//#region src/utils/dom/pointerSession.ts
+function getPointerId(event) {
+	return Number.isFinite(event.pointerId) ? event.pointerId : void 0;
+}
+function isMatchingPointer(event, pointerId) {
+	return pointerId === void 0 || getPointerId(event) === pointerId;
+}
+function createPointerSession(adapter) {
+	let session;
+	let pendingPointerEvent;
+	let geometryDirty = false;
+	function refreshGeometry(currentSession) {
+		if (!geometryDirty) return true;
+		if (!adapter.refreshGeometry) {
+			geometryDirty = false;
+			return true;
+		}
+		if (!adapter.refreshGeometry(currentSession.state)) return false;
+		geometryDirty = false;
+		return session === currentSession;
+	}
+	function applyScheduledUpdate() {
+		const currentSession = session;
+		if (!currentSession || !refreshGeometry(currentSession)) return;
+		const event = pendingPointerEvent;
+		pendingPointerEvent = void 0;
+		if (event) adapter.onUpdate(event, currentSession.state);
+	}
+	const updateScheduler = createRafScheduler(applyScheduledUpdate, () => session?.view);
+	function cancelPendingUpdate() {
+		updateScheduler.cancel();
+		pendingPointerEvent = void 0;
+	}
+	function flushPendingUpdate() {
+		updateScheduler.cancel();
+		applyScheduledUpdate();
+	}
+	function scheduleUpdate() {
+		if (session) updateScheduler.schedule();
+	}
+	function onGeometryChange() {
+		if (!session) return;
+		geometryDirty = true;
+		scheduleUpdate();
+	}
+	function removeListeners(currentSession) {
+		currentSession.view?.removeEventListener("pointermove", onPointerMove);
+		currentSession.view?.removeEventListener("pointerup", onPointerEnd);
+		currentSession.view?.removeEventListener("pointercancel", onPointerEnd);
+		if (adapter.refreshGeometry) {
+			currentSession.view?.removeEventListener("resize", onGeometryChange);
+			currentSession.view?.removeEventListener("scroll", onGeometryChange, true);
+		}
+	}
+	function stop() {
+		const stoppedSession = session;
+		if (!stoppedSession) return;
+		removeListeners(stoppedSession);
+		cancelPendingUpdate();
+		geometryDirty = false;
+		session = void 0;
+		adapter.onStop?.(stoppedSession.state);
+	}
+	function addListeners(currentSession) {
+		currentSession.view?.addEventListener("pointermove", onPointerMove);
+		currentSession.view?.addEventListener("pointerup", onPointerEnd);
+		currentSession.view?.addEventListener("pointercancel", onPointerEnd);
+		if (adapter.refreshGeometry) {
+			currentSession.view?.addEventListener("resize", onGeometryChange);
+			currentSession.view?.addEventListener("scroll", onGeometryChange, true);
+		}
+	}
+	function updateImmediately(event, currentSession) {
+		if (refreshGeometry(currentSession)) adapter.onUpdate(event, currentSession.state);
+	}
+	function onPointerMove(event) {
+		const currentSession = session;
+		if (!currentSession || !isMatchingPointer(event, currentSession.pointerId)) return;
+		if (adapter.updateMode === "immediate") {
+			updateImmediately(event, currentSession);
+			return;
+		}
+		pendingPointerEvent = event;
+		scheduleUpdate();
+	}
+	function applyEndUpdate(event, currentSession) {
+		switch (adapter.endUpdate ?? "pending-pointerup") {
+			case "event":
+				cancelPendingUpdate();
+				updateImmediately(event, currentSession);
+				break;
+			case "none":
+				cancelPendingUpdate();
+				break;
+			case "pending-pointerup":
+				if (event.type === "pointerup") flushPendingUpdate();
+				else cancelPendingUpdate();
+				break;
+		}
+	}
+	function onPointerEnd(event) {
+		const currentSession = session;
+		if (!currentSession || !isMatchingPointer(event, currentSession.pointerId)) return;
+		applyEndUpdate(event, currentSession);
+		stop();
+	}
+	function start(event, initialize) {
+		if (event.button !== 0 || event.isPrimary === false) return false;
+		const next = initialize();
+		if (!next) return false;
+		stop();
+		const nextSession = {
+			pointerId: getPointerId(event),
+			state: next.state,
+			view: next.target.ownerDocument.defaultView
+		};
+		session = nextSession;
+		geometryDirty = next.geometryDirty ?? false;
+		adapter.onStart?.(event, next.state);
+		if (session === nextSession) addListeners(nextSession);
+		return true;
+	}
+	return {
+		start,
+		stop
+	};
+}
+//#endregion
+export { createPointerSession as t };

package/dist/popover.css

@@ -108,15 +108,33 @@
     left: 0;
     translate: none;
 }
+.rp-popover__arrow[data-v-519e9856] {
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-popover__arrow[data-side=top][data-v-519e9856] {
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.rp-popover__arrow[data-side=right][data-v-519e9856] {
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.rp-popover__arrow[data-side=bottom][data-v-519e9856] {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.rp-popover__arrow[data-side=left][data-v-519e9856] {
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
 .rp-popover__arrow[data-v-519e9856] {
     position: absolute;
     box-sizing: border-box;
     width: var(--_rp-popover-arrow-size);
     height: var(--_rp-popover-arrow-size);
     pointer-events: none;
-    background-color: inherit;
-    border: inherit;
-    rotate: 45deg;
 }
 .rp-popover__arrow[data-side=top][data-v-519e9856] {
     bottom: calc(-1 * var(--_rp-popover-arrow-size) / 2);

package/dist/popover.js

@@ -3,17 +3,16 @@ import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useStylesApi } from "./styles-api.js";
 import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
-import { t as isElement } from "./query.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
 import { n as mergeAriaIdRefs } from "./aria.js";
 import { i as isNodeWithinElement } from "./events.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
-import { n as useFloatingTarget, t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
 import { n as useTeleportTarget } from "./useTeleportTarget.js";
-import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, on, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, template, unref, useAttrs, useId, useSlots, watch } from "vue";
+import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, on, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, template, unref, useAttrs, useId, useSlots, watch } from "vue";
 //#region src/components/popover/usePopoverBindings.ts
 var TARGET_ATTRIBUTES = [
 	"aria-controls",
@@ -25,44 +24,20 @@ function applyTargetAttributes(element, snapshot, options) {
 	element.setAttribute("aria-expanded", String(options.expanded));
 	element.setAttribute("aria-haspopup", options.role);
 }
-function usePopoverBindings({ isExplicitTarget, targetElement, popoverId, popoverRole, isVisible, isDisabled, onTriggerClick, onDocumentClick, onDocumentPointerDown, onDocumentKeydown }) {
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("click", onTriggerClick);
-		onCleanup(() => target.removeEventListener("click", onTriggerClick));
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
-		popoverId,
-		popoverRole,
-		isVisible,
-		isDisabled
-	], ([explicit, target, id, role, visible, disabled], _previous, onCleanup) => {
-		if (!explicit || !target || disabled) return;
-		const snapshot = snapshotAttributes(target, TARGET_ATTRIBUTES);
-		applyTargetAttributes(target, snapshot, {
-			id,
-			expanded: visible,
-			role
-		});
-		onCleanup(() => restoreAttributes(target, snapshot));
-	}, { flush: "sync" });
-	watch(isVisible, (visible, _previous, onCleanup) => {
-		if (!visible || typeof document === "undefined") return;
-		document.addEventListener("click", onDocumentClick, true);
-		document.addEventListener("mousedown", onDocumentPointerDown, true);
-		document.addEventListener("touchstart", onDocumentPointerDown, true);
-		document.addEventListener("keydown", onDocumentKeydown);
-		onCleanup(() => {
-			document.removeEventListener("click", onDocumentClick, true);
-			document.removeEventListener("mousedown", onDocumentPointerDown, true);
-			document.removeEventListener("touchstart", onDocumentPointerDown, true);
-			document.removeEventListener("keydown", onDocumentKeydown);
-		});
-	}, {
-		flush: "sync",
-		immediate: true
+function usePopoverBindings({ targetLifecycle, popoverId, popoverRole, isVisible, isDisabled, onTriggerClick }) {
+	targetLifecycle.bindTarget({
+		listeners: [["click", onTriggerClick]],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			isActive: () => !isDisabled.value,
+			apply: (target, snapshot) => {
+				applyTargetAttributes(target, snapshot, {
+					id: popoverId.value,
+					expanded: isVisible.value,
+					role: popoverRole.value
+				});
+			}
+		}
 	});
 }
 //#endregion
@@ -92,8 +67,11 @@ function usePopover(props, emitOpenChange) {
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
-	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElement(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference, targetElement } = targetLifecycle;
 	const hasContent = computed(() => Boolean(slots.content || isExplicitTarget.value && slots.default));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const isOpen = controllableOpen.value;
@@ -208,9 +186,6 @@ function usePopover(props, emitOpenChange) {
 		event.stopPropagation();
 		closePopover();
 	}
-	function isEventInsidePopover(event) {
-		return layer.isInside(event, [rootRef.value, targetElement.value]);
-	}
 	function onCompositeFocusout(event) {
 		const nextTarget = event.relatedTarget;
 		if (isNodeWithinElement(nextTarget, rootRef.value) || isNodeWithinElement(nextTarget, contentRef.value) || isNodeWithinElement(nextTarget, targetElement.value)) return;
@@ -218,21 +193,24 @@ function usePopover(props, emitOpenChange) {
 		const listeners = Array.isArray(listener) ? listener : [listener];
 		for (const current of listeners) if (typeof current === "function") current(event);
 	}
-	function onDocumentClick(event) {
-		if (!layer.isTopLayer()) return;
-		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
+	function onDocumentClick() {
+		if (props.closeOnOutsideClick === false) return;
 		closePopoverWithoutReturnFocus();
 	}
-	function onDocumentPointerDown(event) {
-		if (!layer.isTopLayer()) return;
-		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
+	function onDocumentPointerDown() {
+		if (props.closeOnOutsideClick === false) return;
 		closePopoverWithoutReturnFocus();
 	}
-	function onDocumentKeydown(event) {
-		if (!layer.isTopLayer()) return;
-		if (props.closeOnEscape === false || event.key !== "Escape") return;
+	function onDocumentKeydown() {
+		if (props.closeOnEscape === false) return;
 		closePopover();
 	}
+	const disconnectLayerInteraction = layer.connectInteraction({
+		inside: () => [rootRef.value, targetElement.value],
+		clickOutside: onDocumentClick,
+		pointerDownOutside: onDocumentPointerDown,
+		escapeKeyDown: onDocumentKeydown
+	});
 	watch(isDisabled, (disabled) => {
 		if (disabled) closePopover();
 	});
@@ -249,17 +227,14 @@ function usePopover(props, emitOpenChange) {
 		immediate: true
 	});
 	usePopoverBindings({
-		isExplicitTarget,
-		targetElement,
+		targetLifecycle,
 		popoverId,
 		popoverRole,
 		isVisible,
 		isDisabled,
-		onTriggerClick,
-		onDocumentClick,
-		onDocumentPointerDown,
-		onDocumentKeydown
+		onTriggerClick
 	});
+	onBeforeUnmount(disconnectLayerInteraction);
 	return {
 		rootRef,
 		contentRef,