ropav 0.0.10 → 0.0.11

package/dist/popover.js

@@ -1,8 +1,11 @@
 import './popover.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 { t as createRafScheduler } from "./rafScheduler.js";
-import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
+import { t as useFocusTrap } from "./useFocusTrap.js";
+import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, isRef, nextTick, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, template, unref, useAttrs, useId, useSlots, watch } from "vue";
 //#region src/components/popover/usePopover.ts
 var DEFAULT_PLACEMENT = "bottom";
 var DEFAULT_ROLE = "dialog";
@@ -11,51 +14,14 @@ var TARGET_ATTRIBUTES = [
 	"aria-expanded",
 	"aria-haspopup"
 ];
-function isHTMLElement(value) {
-	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
-}
-function getTargetPosition(rect, placement) {
-	const centerX = rect.left + rect.width / 2;
-	const centerY = rect.top + rect.height / 2;
-	const [side, alignment = "center"] = placement.split("-");
-	const alignedX = alignment === "start" ? rect.left : alignment === "end" ? rect.right : centerX;
-	const alignedY = alignment === "start" ? rect.top : alignment === "end" ? rect.bottom : centerY;
-	switch (side) {
-		case "right": return {
-			x: rect.right,
-			y: alignedY
-		};
-		case "bottom": return {
-			x: alignedX,
-			y: rect.bottom
-		};
-		case "left": return {
-			x: rect.left,
-			y: alignedY
-		};
-		default: return {
-			x: alignedX,
-			y: rect.top
-		};
-	}
-}
-function setPixelVar(style, variable, value) {
-	if (value != null) style[variable] = `${value}px`;
-}
-function styleOrUndefined(style) {
-	return Object.keys(style).length > 0 ? style : void 0;
-}
-function resolveOffsetStyle(offset) {
-	if (offset == null) return void 0;
-	const style = {};
-	if (typeof offset === "number") {
-		setPixelVar(style, "--_rp-popover-main-axis-offset", offset);
-		return style;
-	}
-	setPixelVar(style, "--_rp-popover-main-axis-offset", offset.mainAxis);
-	setPixelVar(style, "--_rp-popover-cross-axis-offset", offset.crossAxis);
-	return styleOrUndefined(style);
-}
+var TABBABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
 function addIdReference(currentValue, id) {
 	const ids = (currentValue ?? "").split(/\s+/).filter(Boolean);
 	if (!ids.includes(id)) ids.push(id);
@@ -78,53 +44,72 @@ function applyTargetAttributes(element, snapshot, options) {
 	element.setAttribute("aria-expanded", String(options.expanded));
 	element.setAttribute("aria-haspopup", options.role);
 }
-function resolveTargetElement(target) {
-	if (!target) return null;
-	if (typeof target !== "string") return isHTMLElement(target) ? target : null;
-	if (typeof document === "undefined") return null;
-	try {
-		const element = document.querySelector(target);
-		return isHTMLElement(element) ? element : null;
-	} catch {
-		return null;
-	}
+function isFocusTrapContainer(value) {
+	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement || typeof SVGElement !== "undefined" && value instanceof SVGElement;
+}
+function resolveOffsetStyle(offset) {
+	if (offset == null) return void 0;
+	if (typeof offset === "number") return { "--_rp-popover-main-axis-offset": `${offset}px` };
+	const style = {};
+	if (offset.mainAxis != null) style["--_rp-popover-main-axis-offset"] = `${offset.mainAxis}px`;
+	if (offset.crossAxis != null) style["--_rp-popover-cross-axis-offset"] = `${offset.crossAxis}px`;
+	return Object.keys(style).length > 0 ? style : void 0;
 }
 function usePopover(props, emitOpenChange) {
 	const slots = useSlots();
+	const attrs = useAttrs();
 	const generatedId = useId();
 	const rootRef = ref(null);
-	const targetElement = ref(null);
-	const targetPosition = ref(null);
+	const contentRef = ref(null);
+	const arrowRef = ref(null);
 	const uncontrolledOpen = ref(false);
-	const positionScheduler = createRafScheduler(updateTargetPosition, () => targetElement.value?.ownerDocument.defaultView);
 	const popoverId = computed(() => props.id ?? `${generatedId}-popover`);
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
-	const isTargetMode = computed(() => props.target != null && props.target !== "");
-	const hasContent = computed(() => Boolean(slots.content || isTargetMode.value && slots.default));
+	const teleportTo = useTeleportTarget(() => props.teleportTo);
+	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
+	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
+	const hasContent = computed(() => Boolean(slots.content || isExplicitTarget.value && slots.default));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const shouldRenderContent = computed(() => !isDisabled.value && (Boolean(props.keepMounted) || isVisible.value));
 	const shouldShowContent = computed(() => !props.keepMounted || isVisible.value);
-	const shouldWireTarget = computed(() => isTargetMode.value && !isDisabled.value);
 	const ariaLabel = computed(() => props.ariaLabel || void 0);
 	const ariaLabelledby = computed(() => props.ariaLabelledby || void 0);
 	const ariaDescribedby = computed(() => props.ariaDescribedby || void 0);
+	const focusTrapContainers = computed(() => {
+		const content = contentRef.value;
+		if (!content) return null;
+		const trigger = targetElement.value ?? rootRef.value;
+		return isFocusTrapContainer(trigger) ? [trigger, content] : content;
+	});
+	const floating = useFloatingPosition({
+		reference,
+		floating: contentRef,
+		arrow: arrowRef,
+		open: isVisible,
+		placement: () => placement.value,
+		strategy: () => props.strategy ?? "absolute",
+		offset: () => props.offset,
+		flip: () => props.flip !== false,
+		shift: () => props.shift !== false,
+		collisionPadding: () => props.collisionPadding ?? 8,
+		arrowEnabled: () => Boolean(props.arrow),
+		restartKey: () => teleportTo.value
+	});
+	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-popover", {
-		[`placement-${placement.value}`]: true,
-		target: isTargetMode.value,
+		[`placement-${floating.actualPlacement.value}`]: true,
+		target: isExplicitTarget.value,
 		open: isVisible.value,
-		disabled: props.disabled
+		disabled: props.disabled,
+		arrow: props.arrow
+	}));
+	const contentStyle = computed(() => ({
+		...floating.floatingStyle.value,
+		...resolveOffsetStyle(props.offset)
 	}));
-	const contentStyle = computed(() => {
-		const style = { ...resolveOffsetStyle(props.offset) };
-		if (isTargetMode.value && targetPosition.value) {
-			setPixelVar(style, "--_rp-popover-target-x", targetPosition.value.x);
-			setPixelVar(style, "--_rp-popover-target-y", targetPosition.value.y);
-		}
-		return styleOrUndefined(style);
-	});
 	const triggerProps = computed(() => ({
 		"aria-controls": isDisabled.value ? void 0 : popoverId.value,
 		"aria-expanded": isDisabled.value ? void 0 : isVisible.value,
@@ -142,17 +127,37 @@ function usePopover(props, emitOpenChange) {
 		triggerProps: triggerProps.value,
 		...contentSlotProps.value
 	}));
+	let shouldReturnFocus = props.returnFocus !== false;
+	const focusTrap = useFocusTrap(focusTrapContainers, {
+		...props.focusTrapOptions,
+		initialFocus: () => {
+			const initialFocus = props.initialFocus;
+			return isRef(initialFocus) ? initialFocus.value ?? void 0 : initialFocus ?? void 0;
+		},
+		fallbackFocus: () => contentRef.value,
+		returnFocusOnDeactivate: props.returnFocus !== false,
+		escapeDeactivates: false,
+		allowOutsideClick: true
+	});
 	function setOpen(nextOpen) {
 		const previousOpen = isOpen.value;
 		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
 		if (previousOpen !== nextOpen) emitOpenChange?.(nextOpen);
 	}
 	function openPopover() {
-		if (isDisabled.value) return;
-		setOpen(true);
+		if (!isDisabled.value) setOpen(true);
 	}
 	function closePopover() {
+		shouldReturnFocus = props.returnFocus !== false;
+		setOpen(false);
+	}
+	function closePopoverWithoutReturnFocus() {
+		shouldReturnFocus = false;
+		if (props.trapFocus) focusTrap.deactivate({ returnFocus: false });
 		setOpen(false);
+		nextTick(() => {
+			if (props.trapFocus && isVisible.value) focusTrap.activate();
+		});
 	}
 	function togglePopover() {
 		if (isVisible.value) closePopover();
@@ -166,113 +171,115 @@ function usePopover(props, emitOpenChange) {
 		event.stopPropagation();
 		closePopover();
 	}
-	function onTargetClick() {
-		togglePopover();
-	}
-	function readTarget() {
-		return isRef(props.target) ? props.target.value : props.target;
-	}
-	function updateTargetPosition() {
-		if (!isTargetMode.value || !targetElement.value) {
-			targetPosition.value = null;
-			return;
-		}
-		targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
-	}
 	function isEventInsidePopover(event) {
 		const eventTarget = event.target;
 		if (typeof Node === "undefined" || !(eventTarget instanceof Node)) return false;
-		return Boolean(rootRef.value?.contains(eventTarget) || targetElement.value?.contains(eventTarget));
+		return Boolean(rootRef.value?.contains(eventTarget) || contentRef.value?.contains(eventTarget) || targetElement.value?.contains(eventTarget));
+	}
+	function onCompositeFocusout(event) {
+		const nextTarget = event.relatedTarget;
+		if (nextTarget instanceof Node && (rootRef.value?.contains(nextTarget) || contentRef.value?.contains(nextTarget) || targetElement.value?.contains(nextTarget))) return;
+		const listener = attrs.onFocusout;
+		const listeners = Array.isArray(listener) ? listener : [listener];
+		for (const current of listeners) if (typeof current === "function") current(event);
 	}
 	function onDocumentClick(event) {
 		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
-		closePopover();
+		closePopoverWithoutReturnFocus();
+	}
+	function onDocumentPointerDown(event) {
+		if (!props.trapFocus) return;
+		if (props.closeOnOutsideClick === false || isEventInsidePopover(event)) return;
+		closePopoverWithoutReturnFocus();
 	}
 	function onDocumentKeydown(event) {
+		if (props.trapFocus && event.key === "Tab") {
+			const containers = [targetElement.value ?? rootRef.value, contentRef.value];
+			const tabbables = [];
+			for (const container of containers) {
+				if (!container) continue;
+				if (container instanceof HTMLElement && container.matches(TABBABLE_SELECTOR)) tabbables.push(container);
+				tabbables.push(...container.querySelectorAll(TABBABLE_SELECTOR));
+			}
+			const active = event.target;
+			const first = tabbables[0];
+			const last = tabbables[tabbables.length - 1];
+			if (event.shiftKey && active === first && last) {
+				event.preventDefault();
+				last.focus();
+				return;
+			}
+			if (!event.shiftKey && active === last && first) {
+				event.preventDefault();
+				first.focus();
+				return;
+			}
+		}
 		if (props.closeOnEscape === false || event.key !== "Escape") return;
 		closePopover();
 	}
-	function syncTargetElement() {
-		positionScheduler.cancel();
-		const nextTarget = isTargetMode.value ? resolveTargetElement(readTarget()) : null;
-		if (targetElement.value !== nextTarget) targetElement.value = nextTarget;
-		if (!nextTarget) {
-			targetPosition.value = null;
-			return;
-		}
-	}
 	watch(isDisabled, (disabled) => {
 		if (disabled) closePopover();
 	});
-	watch(() => readTarget(), () => syncTargetElement(), { flush: "post" });
-	watch([shouldWireTarget, targetElement], ([shouldWire, target], _previous, onCleanup) => {
-		if (!shouldWire || !target) return;
-		target.addEventListener("click", onTargetClick);
-		onCleanup(() => {
-			target.removeEventListener("click", onTargetClick);
-		});
+	watch([isVisible, () => props.trapFocus], ([visible, trapFocus]) => {
+		if (visible && trapFocus) {
+			shouldReturnFocus = props.returnFocus !== false;
+			focusTrap.activate();
+			return;
+		}
+		focusTrap.deactivate({ returnFocus: shouldReturnFocus && props.returnFocus !== false });
+		shouldReturnFocus = props.returnFocus !== false;
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
+		if (!explicit || !target) return;
+		target.addEventListener("click", onTriggerClick);
+		onCleanup(() => target.removeEventListener("click", onTriggerClick));
 	}, { flush: "sync" });
 	watch([
-		shouldWireTarget,
+		isExplicitTarget,
 		targetElement,
 		popoverId,
 		popoverRole,
-		isVisible
-	], ([shouldWire, target], _previous, onCleanup) => {
-		if (!shouldWire || !target) return;
+		isVisible,
+		isDisabled
+	], ([explicit, target, id, role, visible, disabled], _previous, onCleanup) => {
+		if (!explicit || !target || disabled) return;
 		const snapshot = snapshotAttributes(target);
 		applyTargetAttributes(target, snapshot, {
-			id: popoverId.value,
-			expanded: isVisible.value,
-			role: popoverRole.value
-		});
-		onCleanup(() => {
-			restoreAttributes(target, snapshot);
-		});
-	}, { flush: "sync" });
-	watch([
-		isVisible,
-		isTargetMode,
-		targetElement
-	], ([visible, targetMode, target], _previous, onCleanup) => {
-		const view = target?.ownerDocument.defaultView;
-		if (!visible || !targetMode || !view) return;
-		view.addEventListener("resize", positionScheduler.schedule);
-		view.addEventListener("scroll", positionScheduler.schedule, true);
-		onCleanup(() => {
-			view.removeEventListener("resize", positionScheduler.schedule);
-			view.removeEventListener("scroll", positionScheduler.schedule, true);
-			positionScheduler.cancel();
+			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
 	});
-	watch([
-		targetElement,
-		placement,
-		isVisible
-	], () => {
-		positionScheduler.cancel();
-		if (isVisible.value) updateTargetPosition();
-	}, { flush: "sync" });
-	onMounted(syncTargetElement);
-	onBeforeUnmount(positionScheduler.cancel);
 	return {
 		rootRef,
+		contentRef,
+		arrowRef,
 		popoverId,
 		isOpen,
+		isDisabled,
 		isVisible,
-		isTargetMode,
+		isTargetMode: isExplicitTarget,
 		popoverRole,
 		ariaLabel,
 		ariaLabelledby,
@@ -284,26 +291,32 @@ function usePopover(props, emitOpenChange) {
 		triggerProps,
 		slotProps,
 		contentSlotProps,
+		actualPlacement: floating.actualPlacement,
+		placementSide,
+		arrowStyle: floating.arrowStyle,
+		teleportTo,
 		openPopover,
 		closePopover,
 		togglePopover,
-		onTriggerKeydown
+		onTriggerKeydown,
+		onCompositeFocusout
 	};
 }
 //#endregion
 //#region src/components/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<section data-v-13614b6c class=rp-popover__content>");
-var t1 = template("<span data-v-13614b6c>", 1);
+var t0 = template("<span data-v-8af57bff class=rp-popover__arrow aria-hidden=true>");
+var t1 = template("<section data-v-8af57bff>");
+var t2 = template("<span data-v-8af57bff>", 1);
+delegateEvents("focusout");
 //#endregion
 //#region src/components/popover/popover.vue
 var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpPopover",
+	inheritAttrs: false,
 	__name: "popover",
 	props: {
 		id: {},
-		target: {},
-		placement: { default: "bottom" },
-		offset: {},
+		contentClass: {},
 		open: {
 			type: Boolean,
 			default: void 0
@@ -327,65 +340,147 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		keepMounted: {
 			type: Boolean,
 			default: false
-		}
+		},
+		trapFocus: {
+			type: Boolean,
+			default: false
+		},
+		initialFocus: { default: null },
+		returnFocus: {
+			type: Boolean,
+			default: true
+		},
+		focusTrapOptions: { default: () => ({}) },
+		target: {},
+		placement: { default: "bottom" },
+		strategy: { default: "absolute" },
+		offset: {},
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		collisionPadding: { default: 8 },
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootRef, popoverId, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, shouldShowContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
+		const { rootRef, contentRef, arrowRef, popoverId, isDisabled, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, shouldShowContent, rootClass, contentStyle, slotProps, contentSlotProps, actualPlacement, placementSide, arrowStyle, teleportTo, onCompositeFocusout } = usePopover(props, (open) => {
 			emit("update:open", open);
 		});
-		const n12 = t1();
-		renderEffect(() => setClass(n12, unref(rootClass)));
-		setInsertionState(n12, null, 0);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const publicRootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onFocusout: onCompositeFocusout,
+			"data-state": slotProps.value.isOpen ? "open" : "closed",
+			"data-disabled": presence(isDisabled.value)
+		}, {}, ["onFocusout"]));
+		const styledTriggerProps = computed(() => {
+			const partAttrs = getPartAttrs("trigger");
+			return {
+				...slotProps.value.triggerProps,
+				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
+				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
+				"data-state": slotProps.value.isOpen ? "open" : "closed",
+				"data-disabled": presence(isDisabled.value)
+			};
+		});
+		const contentAttrs = computed(() => ({
+			...getPartAttrs("content", {
+				class: "rp-popover__content",
+				compatibilityClass: props.contentClass,
+				style: contentStyle.value
+			}),
+			"data-state": slotProps.value.isOpen ? "open" : "closed",
+			"data-placement": actualPlacement.value
+		}));
+		const _setTemplateRef = createTemplateRefSetter();
+		const n16 = t2();
+		renderEffect(() => setDynamicProps(n16, [publicRootAttrs.value]));
+		setInsertionState(n16, null, 0);
 		createIf(() => !unref(isTargetMode), () => {
 			return createSlot("default", {
-				triggerProps: () => unref(slotProps).triggerProps,
+				triggerProps: () => styledTriggerProps.value,
 				isOpen: () => unref(slotProps).isOpen,
 				open: () => unref(slotProps).open,
 				close: () => unref(slotProps).close,
 				toggle: () => unref(slotProps).toggle
 			}, null, 1);
 		});
-		setInsertionState(n12, null, 1);
-		createComponent(VaporTransition, {
-			name: "rp-popover-content",
-			persisted: ""
-		}, extend(() => {
-			return createIf(() => unref(shouldRenderContent), () => {
-				const n10 = t0();
-				renderEffect(() => {
-					setProp(n10, "id", unref(popoverId));
-					setProp(n10, "role", unref(popoverRole));
-					setAttr(n10, "aria-label", unref(ariaLabel));
-					setAttr(n10, "aria-labelledby", unref(ariaLabelledby));
-					setAttr(n10, "aria-describedby", unref(ariaDescribedby));
-					setStyle(n10, unref(contentStyle));
-				});
-				setInsertionState(n10, null, 0);
-				createSlot("content", {
-					isOpen: () => unref(contentSlotProps).isOpen,
-					open: () => unref(contentSlotProps).open,
-					close: () => unref(contentSlotProps).close,
-					toggle: () => unref(contentSlotProps).toggle
-				}, () => {
-					return createIf(() => unref(isTargetMode), () => {
-						return createSlot("default", {
-							isOpen: () => unref(contentSlotProps).isOpen,
-							open: () => unref(contentSlotProps).open,
-							close: () => unref(contentSlotProps).close,
-							toggle: () => unref(contentSlotProps).toggle
-						}, null, 1);
-					}, null, 129);
-				}, 1);
-				applyVShow(n10, () => unref(shouldShowContent));
-				return n10;
-			}, null, 129);
-		}, { _: 8 }));
-		setStaticTemplateRef(n12, rootRef, null, "rootRef");
-		return n12;
+		setInsertionState(n16, null, 1);
+		createComponent(VaporTeleport, {
+			to: () => unref(teleportTo),
+			disabled: () => !__props.teleport
+		}, () => {
+			return createComponent(VaporTransition, {
+				name: "rp-popover-content",
+				persisted: ""
+			}, extend(() => {
+				return createIf(() => unref(shouldRenderContent), () => {
+					const n13 = t1();
+					renderEffect(() => setDynamicProps(n13, [
+						{ id: unref(popoverId) },
+						contentAttrs.value,
+						{
+							role: unref(popoverRole),
+							"aria-label": unref(ariaLabel),
+							"aria-labelledby": unref(ariaLabelledby),
+							"aria-describedby": unref(ariaDescribedby),
+							"data-side": unref(placementSide),
+							tabindex: __props.trapFocus ? -1 : void 0
+						}
+					]));
+					setInsertionState(n13, null, 0);
+					createSlot("content", {
+						isOpen: () => unref(contentSlotProps).isOpen,
+						open: () => unref(contentSlotProps).open,
+						close: () => unref(contentSlotProps).close,
+						toggle: () => unref(contentSlotProps).toggle
+					}, () => {
+						return createIf(() => unref(isTargetMode), () => {
+							return createSlot("default", {
+								isOpen: () => unref(contentSlotProps).isOpen,
+								open: () => unref(contentSlotProps).open,
+								close: () => unref(contentSlotProps).close,
+								toggle: () => unref(contentSlotProps).toggle
+							}, null, 1);
+						}, null, 129);
+					}, 1);
+					setInsertionState(n13, null, 1);
+					createIf(() => __props.arrow, () => {
+						const n12 = t0();
+						_setTemplateRef(n12, arrowRef, null, "arrowRef");
+						renderEffect(() => {
+							setAttr(n12, "data-side", unref(placementSide));
+							setStyle(n12, unref(arrowStyle));
+						});
+						return n12;
+					});
+					applyVShow(n13, () => unref(shouldShowContent));
+					n13.$evtfocusout = createInvoker((e) => unref(onCompositeFocusout)(e));
+					_setTemplateRef(n13, contentRef, null, "contentRef");
+					return n13;
+				}, null, 129);
+			}, { _: 8 }));
+		});
+		setStaticTemplateRef(n16, rootRef, null, "rootRef");
+		return n16;
 	}
-}), [["__scopeId", "data-v-13614b6c"]]);
+}), [["__scopeId", "data-v-8af57bff"]]);
 //#endregion
 export { popover_default as t };

package/dist/popover2.js

@@ -13,5 +13,10 @@ var popoverPlacements = [
 	"left",
 	"left-end"
 ];
+var popoverParts = [
+	"root",
+	"trigger",
+	"content"
+];
 //#endregion
-export { popoverPlacements as t };
+export { popoverPlacements as n, popoverParts as t };