solid-baseui 0.1.0-alpha.0

package/dist/lib/server/popover/index.js

@@ -0,0 +1,1187 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { d as imperativeAction, i as closePress } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { c as isHTMLElement } from "../dom-Crg_2R-j.js";
+import { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
+import { t as InternalBackdrop } from "../InternalBackdrop-C_iDPVR-.js";
+import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-DFuUrykR.js";
+import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "../PopupStore-DEs3FAEe.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
+import { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
+import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
+import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
+import { Dynamic, escape, memo, mergeProps } from "@solidjs/web";
+import { $REFRESH, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/popover/store/PopoverStore.ts
+var PopoverStore = class extends PopupStore {
+	triggerData = /* @__PURE__ */ new Map();
+	openMethodAccessor;
+	setOpenMethodSignal;
+	openReasonAccessor;
+	setOpenReason;
+	instantTypeAccessor;
+	setInstantTypeSignal;
+	stickIfOpenAccessor;
+	setStickIfOpenSignal;
+	focusManagerModalAccessor;
+	setFocusManagerModalSignal;
+	disabledAccessor;
+	setDisabledSignal;
+	openOnHoverAccessor;
+	setOpenOnHoverSignal;
+	patientClickTimer;
+	constructor(options = {}) {
+		super(options);
+		const [openMethod, setOpenMethod] = createSignal(null, { ownedWrite: true });
+		this.openMethodAccessor = openMethod;
+		this.setOpenMethodSignal = setOpenMethod;
+		const [openReason, setOpenReason] = createSignal(null, { ownedWrite: true });
+		this.openReasonAccessor = openReason;
+		this.setOpenReason = setOpenReason;
+		const [instantType, setInstantType] = createSignal(void 0, { ownedWrite: true });
+		this.instantTypeAccessor = instantType;
+		this.setInstantTypeSignal = setInstantType;
+		const [stickIfOpen, setStickIfOpen] = createSignal(true, { ownedWrite: true });
+		this.stickIfOpenAccessor = stickIfOpen;
+		this.setStickIfOpenSignal = setStickIfOpen;
+		const [focusManagerModal, setFocusManagerModal] = createSignal(false, { ownedWrite: true });
+		this.focusManagerModalAccessor = focusManagerModal;
+		this.setFocusManagerModalSignal = setFocusManagerModal;
+		const [disabled, setDisabled] = createSignal(false, { ownedWrite: true });
+		this.disabledAccessor = disabled;
+		this.setDisabledSignal = setDisabled;
+		const [openOnHover, setOpenOnHover] = createSignal(false, { ownedWrite: true });
+		this.openOnHoverAccessor = openOnHover;
+		this.setOpenOnHoverSignal = setOpenOnHover;
+	}
+	openMethod() {
+		return this.openMethodAccessor();
+	}
+	setOpenMethod(value) {
+		this.setOpenMethodSignal(value);
+	}
+	openChangeReason() {
+		return this.openReasonAccessor();
+	}
+	instantType() {
+		return this.instantTypeAccessor();
+	}
+	setInstantType(value) {
+		this.setInstantTypeSignal(value);
+	}
+	stickIfOpen() {
+		return this.stickIfOpenAccessor();
+	}
+	focusManagerModal() {
+		return this.focusManagerModalAccessor();
+	}
+	setFocusManagerModal(value) {
+		this.setFocusManagerModalSignal(value);
+	}
+	disabled() {
+		return this.disabledAccessor();
+	}
+	openOnHover() {
+		return this.openOnHoverAccessor();
+	}
+	closeDelay() {
+		return this.track().closeDelay;
+	}
+	floatingElement() {
+		const state = this.track();
+		return state.positionerElement ?? state.popupElement;
+	}
+	setTriggerData(id, data) {
+		this.triggerData.set(id, data);
+	}
+	removeTriggerData(id) {
+		this.triggerData.delete(id);
+	}
+	syncTriggerData(activeId = this.activeTriggerId(), open = this.open()) {
+		const data = this.triggerData.get(activeId ?? "");
+		this.setDisabledSignal(data?.disabled ?? false);
+		this.setOpenOnHoverSignal(data?.openOnHover ?? false);
+		this.set("closeDelay", data?.closeDelay ?? 0);
+		if (data && open) this.set("payload", data.payload);
+	}
+	resetAfterUnmount() {
+		clearTimeout(this.patientClickTimer);
+		this.setStickIfOpenSignal(true);
+		this.setOpenReason(null);
+	}
+	dispose() {
+		clearTimeout(this.patientClickTimer);
+	}
+	reconcileTriggers() {
+		super.reconcileTriggers();
+		this.syncTriggerData();
+	}
+	setOpen(open, details) {
+		if (!open && details.reason === "close-press" && details.trigger == null && this.activeTriggerId() != null) details.trigger = this.context.triggerElements.getById(this.activeTriggerId()) ?? this.state.activeTriggerElement ?? void 0;
+		if (!super.setOpen(open, details)) return false;
+		this.setOpenReason(details.reason);
+		if (details.reason === "trigger-hover") {
+			this.setStickIfOpenSignal(true);
+			clearTimeout(this.patientClickTimer);
+			this.patientClickTimer = setTimeout(() => this.setStickIfOpenSignal(false), 500);
+		} else if (!open) clearTimeout(this.patientClickTimer);
+		if (details.reason === "trigger-press" && details.event instanceof MouseEvent && details.event.detail === 0) this.setInstantTypeSignal("click");
+		else if (!open && (details.reason === "escape-key" || details.reason === "none")) this.setInstantTypeSignal("dismiss");
+		else if (details.reason === "focus-out") this.setInstantTypeSignal("focus");
+		else this.setInstantTypeSignal(void 0);
+		this.syncTriggerData();
+		return true;
+	}
+};
+var DetachedPopoverStore = class extends DetachedPopupStore {
+	openMethod() {
+		return null;
+	}
+	setOpenMethod(_value) {}
+	openChangeReason() {
+		return null;
+	}
+	instantType() {}
+	setInstantType(_value) {}
+	stickIfOpen() {
+		return true;
+	}
+	focusManagerModal() {
+		return false;
+	}
+	setFocusManagerModal(_value) {}
+	disabled() {
+		return false;
+	}
+	openOnHover() {
+		return false;
+	}
+	closeDelay() {
+		return 0;
+	}
+	floatingElement() {
+		return null;
+	}
+	isMountedByTrigger(_id) {
+		return false;
+	}
+	setTriggerData(_id, _data) {}
+	removeTriggerData(_id) {}
+	syncTriggerData(_activeId, _open) {}
+};
+//#endregion
+//#region src/popover/root/PopoverRootContext.ts
+var MISSING_CONTEXT$3 = Symbol("PopoverRootContext");
+var PopoverRootContext = createContext(MISSING_CONTEXT$3);
+function usePopoverRootContext(optional = false) {
+	const context = useContext(PopoverRootContext);
+	if (context === MISSING_CONTEXT$3) {
+		if (optional) return;
+		throw new Error("Base UI: PopoverRootContext is missing. Popover parts must be placed within <Popover.Root>.");
+	}
+	return context;
+}
+//#endregion
+//#region src/popover/root/PopoverRoot.tsx
+/** Groups all parts of the popover without rendering an element. */
+function PopoverRoot(props) {
+	const parentTree = useFloatingTree();
+	const parentNodeId = useFloatingParentNodeId();
+	const tree = parentTree ?? new FloatingTreeStore();
+	const nodeId = createUniqueId();
+	const floatingId = createUniqueId();
+	const controlledOpen = untrack(() => props.open !== void 0);
+	const controlledTriggerId = untrack(() => props.triggerId !== void 0);
+	const modal = createMemo(() => props.modal ?? false);
+	const store = new PopoverStore({
+		controlledOpen: () => controlledOpen ? props.open : void 0,
+		controlledTriggerId: () => controlledTriggerId ? props.triggerId : void 0,
+		floatingId,
+		nested: parentNodeId !== null,
+		nodeId,
+		onOpenChange: () => props.onOpenChange,
+		onOpenChangeComplete: () => props.onOpenChangeComplete
+	});
+	store.update({
+		open: controlledOpen ? Boolean(untrack(() => props.open)) : Boolean(untrack(() => props.defaultOpen)),
+		activeTriggerId: untrack(() => props.defaultTriggerId ?? null)
+	});
+	const payload = store.access((state) => state.payload);
+	const node = createFloatingNode({
+		tree,
+		id: nodeId,
+		parentId: parentNodeId,
+		context: () => store.context.floatingRoot
+	});
+	const [titleId, setTitleId] = createSignal();
+	const [descriptionId, setDescriptionId] = createSignal();
+	const [backdropElement, setBackdropElement] = createSignal(null, { ownedWrite: true });
+	const [internalBackdropElement, setInternalBackdropElement] = createSignal(null, { ownedWrite: true });
+	const [beforeContentGuard, setBeforeContentGuard] = createSignal(null, { ownedWrite: true });
+	const [afterTriggerGuard, setAfterTriggerGuard] = createSignal(null, { ownedWrite: true });
+	const presence = createPopupPresence(store, () => store.track().popupElement, { onUnmount: () => store.resetAfterUnmount() });
+	const context = {
+		store,
+		tree,
+		modal,
+		titleId,
+		setTitleId,
+		descriptionId,
+		setDescriptionId,
+		backdropElement,
+		setBackdropElement,
+		internalBackdropElement,
+		setInternalBackdropElement,
+		beforeContentGuard,
+		setBeforeContentGuard,
+		afterTriggerGuard,
+		setAfterTriggerGuard,
+		presence
+	};
+	store.context.floatingRoot.context.data.insideElements = () => [backdropElement(), internalBackdropElement()];
+	store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: false });
+	attachPopupHandle(() => props.handle, store);
+	const dismiss = createDismiss({
+		context: store.context.floatingRoot,
+		tree: () => tree,
+		outsidePressEvent: () => ({
+			mouse: modal() === "trap-focus" ? "sloppy" : "intentional",
+			touch: "sloppy"
+		})
+	});
+	store.setInteractionProps({
+		activeTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		inactiveTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		popupProps: { onKeyDown: dismiss.onKeyDown }
+	});
+	createEffect(() => ({
+		open: store.open(),
+		activeTriggerId: store.activeTriggerId()
+	}), () => untrack(() => store.reconcileTriggers()));
+	const actions = {
+		unmount: presence.forceUnmount,
+		close() {
+			store.setOpen(false, createChangeEventDetails(imperativeAction));
+		}
+	};
+	createEffect(() => props.actionsRef, (ref) => {
+		ref?.(actions);
+	});
+	function PopoverRootContent() {
+		const child = createMemo(() => props.children);
+		const initialChild = untrack(child);
+		let content = initialChild;
+		if (typeof initialChild === "function") content = initialChild.name === "bound read" && Object.prototype.hasOwnProperty.call(initialChild, $REFRESH) ? memo(() => {
+			return escape(child());
+		}) : untrack(() => initialChild({ payload }));
+		return content;
+	}
+	onCleanup(() => {
+		store.dispose();
+		store.clearInteractionProps();
+		delete store.context.floatingRoot.context.data.insideElements;
+	});
+	return PopoverRootContext({
+		value: context,
+		get children() {
+			return FloatingTreeContext({
+				value: tree,
+				get children() {
+					return FloatingParentNodeContext({
+						get value() {
+							return node.id ?? null;
+						},
+						get children() {
+							return PopoverRootContent({});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/popover/trigger/PopoverTrigger.tsx
+/** A button that opens the popover. */
+function PopoverTrigger(props) {
+	const root = usePopoverRootContext(true);
+	const internalProps = props;
+	if (!root && !untrack(() => internalProps.handle)) throw new Error("Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle.");
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const openOnHover = createMemo(() => internalProps.openOnHover ?? false);
+	const delay = createMemo(() => internalProps.delay ?? 300);
+	const closeDelay = createMemo(() => internalProps.closeDelay ?? 0);
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const handleStore = createPopupHandleStore(() => internalProps.handle);
+	const store = createMemo(() => handleStore() ?? root?.store);
+	const liveStore = createMemo(() => {
+		const current = store();
+		return current instanceof PopoverStore ? current : void 0;
+	});
+	const open = createMemo(() => {
+		const current = store();
+		return Boolean(current?.open() && current.activeTriggerId() === id());
+	});
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		open: open()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), store()?.openChangeReason() === "trigger-press" ? pressableTriggerOpenStateMapping : triggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "openOnHover", "payload", "ref", "style");
+	let clickHandlers;
+	let pointerType = "";
+	let clickPointerType = "";
+	createTriggerRegistration(store, id, element, () => ({ payload: internalProps.payload }));
+	const triggerData = createMemo(() => ({
+		payload: internalProps.payload,
+		disabled: disabled(),
+		openOnHover: openOnHover(),
+		closeDelay: closeDelay()
+	}));
+	createEffect(() => {
+		const current = store();
+		return current ? {
+			store: current,
+			id: id(),
+			data: triggerData(),
+			activeId: current.activeTriggerId(),
+			open: current.open()
+		} : void 0;
+	}, (current) => {
+		if (!current) return;
+		current.store.setTriggerData(current.id, current.data);
+		current.store.syncTriggerData(current.activeId, current.open);
+		return () => current.store.removeTriggerData(current.id);
+	});
+	function handlePointerDown(event) {
+		pointerType = event.pointerType;
+		clickHandlers?.onPointerDown(event);
+	}
+	function handleMouseDown(event) {
+		clickHandlers?.onMouseDown(event);
+	}
+	function prepareClick() {
+		clickPointerType = pointerType;
+		pointerType = "";
+	}
+	function handleClick(event) {
+		const current = liveStore();
+		if (!current) return;
+		if (!current.open()) current.setOpenMethod(clickPointerType || (event.detail === 0 ? "keyboard" : isIOS() ? "touch" : "mouse"));
+		clickHandlers?.onClick(event);
+	}
+	function handleKeyDown(event) {
+		pointerType = "keyboard";
+		const current = store();
+		const popup = current?.state.popupElement;
+		const rootHandler = current ? current.state[current.activeTriggerId() === id() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown : void 0;
+		const currentTarget = event.currentTarget;
+		if (popup && currentTarget && popup.ownerDocument !== currentTarget.ownerDocument && typeof rootHandler === "function") rootHandler(event);
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => prepareClick, () => internalProps.onClick, () => handleClick);
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	function TriggerInteractions() {
+		return Show({
+			keyed: true,
+			get when() {
+				return liveStore();
+			},
+			children: (current) => PopoverTriggerInteractions({
+				store: current,
+				element,
+				id,
+				disabled,
+				openOnHover,
+				delay,
+				closeDelay,
+				tree: () => root?.tree,
+				setClickHandlers: (handlers) => clickHandlers = handlers
+			})
+		});
+	}
+	const trigger = Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return !nativeButton() && disabled() ? -1 : 0;
+		},
+		get disabled() {
+			return (memo(() => {
+				return !!nativeButton();
+			})() ? disabled() : nativeButton()) || void 0;
+		},
+		get ["aria-disabled"]() {
+			return !nativeButton() && disabled() ? "true" : void 0;
+		},
+		"aria-haspopup": "dialog",
+		get ["aria-expanded"]() {
+			return open() ? "true" : "false";
+		},
+		get ["aria-controls"]() {
+			return store()?.triggerPopupId(id());
+		},
+		"data-base-ui-click-trigger": "",
+		get ["data-trigger-disabled"]() {
+			return disabled() ? "" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, stateAttributes, others));
+	return [TriggerInteractions({}), Show({
+		get when() {
+			return liveStore();
+		},
+		fallback: trigger,
+		children: (current) => TriggerFocusGuards({
+			get context() {
+				return current().context.floatingRoot;
+			},
+			get enabled() {
+				return memo(() => {
+					return !!current().isMountedByTrigger(id());
+				})() ? !current().focusManagerModal() : current().isMountedByTrigger(id());
+			},
+			trigger: element,
+			positioner: () => current().track().positionerElement,
+			beforeContentGuard: () => root?.beforeContentGuard() ?? null,
+			afterGuardRef: (value) => root?.setAfterTriggerGuard(value),
+			children: trigger
+		})
+	})];
+}
+function PopoverTriggerInteractions(props) {
+	const store = untrack(() => props.store);
+	const setClickHandlers = untrack(() => props.setClickHandlers);
+	const element = untrack(() => props.element);
+	const tree = untrack(() => props.tree);
+	const delay = untrack(() => props.delay);
+	setClickHandlers(createClickInteraction({
+		context: store.context.floatingRoot,
+		enabled: () => !props.disabled(),
+		stickIfOpen: () => store.stickIfOpen()
+	}));
+	onCleanup(() => setClickHandlers(void 0));
+	createHoverInteraction({
+		context: store.context.floatingRoot,
+		reference: element,
+		floating: () => store.floatingElement(),
+		tree,
+		enabled: () => !props.disabled() && props.openOnHover() && (store.openMethod() !== "touch" || store.openChangeReason() !== "trigger-press"),
+		floatingEnabled: () => false,
+		delay: () => ({ close: props.closeDelay() }),
+		restMs: delay,
+		restOnly: () => true,
+		handleClose: () => safePolygon(),
+		mouseOnly: () => true
+	});
+	return null;
+}
+function isIOS() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.platform.toLowerCase();
+	return /^i(os$|p)/.test(platform) || platform === "macintel" && navigator.maxTouchPoints > 1;
+}
+//#endregion
+//#region src/popover/portal/PopoverPortalContext.ts
+var MISSING_CONTEXT$2 = Symbol("PopoverPortalContext");
+var PopoverPortalContext = createContext(MISSING_CONTEXT$2);
+function usePopoverPortalContext() {
+	const context = useContext(PopoverPortalContext);
+	if (context === MISSING_CONTEXT$2) throw new Error("Base UI: <Popover.Portal> is missing.");
+	return context;
+}
+//#endregion
+//#region src/popover/portal/PopoverPortal.tsx
+/** Moves the popover layer into a portal appended to the document body by default. */
+function PopoverPortal(props) {
+	const context = usePopoverRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
+	const shouldRender = createMemo(() => context.presence.mounted() || keepMounted());
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const portalContext = { keepMounted };
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return PopoverPortalContext({
+				value: portalContext,
+				get children() {
+					return PopupPortal(mergeProps({
+						get as() {
+							return props.as;
+						},
+						get container() {
+							return internalProps.container;
+						},
+						ref: (element) => {
+							if (internalProps.ref) setRef(internalProps.ref, element);
+						},
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						}
+					}, others, { get children() {
+						return props.children;
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/popover/utils/mergePopoverStyles.ts
+function mergePopoverStyles(internal, external) {
+	if (typeof external === "string") {
+		const serialized = Object.entries(internal).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${String(value)}`).join(";");
+		return serialized ? `${serialized};${external}` : external;
+	}
+	return {
+		...internal,
+		...external || void 0
+	};
+}
+//#endregion
+//#region src/popover/utils/stateAttributesMapping.ts
+var popoverPositionerStateMapping = popupStateMapping;
+var popoverPopupTransitionStateMapping = popupTransitionStateMapping;
+var popoverViewportStateMapping = { activationDirection: (value) => value ? { "data-activation-direction": value } : null };
+//#endregion
+//#region src/popover/positioner/PopoverPositionerContext.ts
+var MISSING_CONTEXT$1 = Symbol("PopoverPositionerContext");
+var PopoverPositionerContext = createContext(MISSING_CONTEXT$1);
+function usePopoverPositionerContext() {
+	const context = useContext(PopoverPositionerContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: <Popover.Positioner> is missing.");
+	return context;
+}
+//#endregion
+//#region src/popover/positioner/PopoverPositioner.tsx
+/** Positions the popup against its active trigger or a custom anchor. */
+function PopoverPositioner(props) {
+	usePopoverPortalContext();
+	const context = usePopoverRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const reference = createMemo(() => resolveAnchor(internalProps.anchor) ?? context.store.context.floatingRoot.referenceElement());
+	const positioning = createAnchorPositioning({
+		reference,
+		floating: element,
+		mounted: context.presence.mounted,
+		direction,
+		positionMethod: () => internalProps.positionMethod ?? "absolute",
+		side: () => internalProps.side ?? "bottom",
+		sideOffset: () => internalProps.sideOffset ?? 0,
+		align: () => internalProps.align ?? "center",
+		alignOffset: () => internalProps.alignOffset ?? 0,
+		collisionBoundary: () => internalProps.collisionBoundary ?? "clipping-ancestors",
+		collisionPadding: () => internalProps.collisionPadding ?? 5,
+		arrowPadding: () => internalProps.arrowPadding ?? 5,
+		sticky: () => internalProps.sticky ?? false,
+		disableAnchorTracking: () => internalProps.disableAnchorTracking ?? false,
+		collisionAvoidance: () => internalProps.collisionAvoidance ?? { fallbackAxisSide: "end" },
+		adaptiveOriginMiddleware: () => context.store.track().adaptiveOriginMiddleware
+	});
+	const initialPositioning = createInitialPositioning(() => context.store.open(), () => positioning.state().isPositioned);
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioning.renderedSide(),
+		align: positioning.renderedAlign(),
+		anchorHidden: positioning.anchorHidden(),
+		instant: context.store.instantType() ?? (initialPositioning() ? "initial" : void 0)
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePopoverStyles({
+		...positioning.styles(),
+		"pointer-events": context.store.open() ? void 0 : "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverPositionerStateMapping));
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const trueModalNonHover = createMemo(() => context.modal() === true && context.store.openChangeReason() !== "trigger-hover");
+	let previousTrigger = null;
+	let handoffController;
+	createAnchoredPopupScrollLock({
+		enabled: () => context.store.open() && trueModalNonHover(),
+		touchOpen: () => context.store.openMethod() === "touch",
+		positioner: element,
+		reference: () => context.store.track().activeTriggerElement
+	});
+	createEffect(() => positioning.state().placement, (placement) => {
+		context.store.context.floatingRoot.context.data.placement = placement;
+	});
+	createEffect(() => ({
+		trigger: context.store.track().activeTriggerElement,
+		positioner: element()
+	}), ({ trigger, positioner }) => {
+		const previous = previousTrigger;
+		if (trigger) previousTrigger = trigger;
+		if (!previous || !trigger || previous === trigger || !positioner) return;
+		context.store.setInstantType(void 0);
+		handoffController?.abort();
+		const controller = new AbortController();
+		handoffController = controller;
+		runOnceAnimationsFinish(positioner, () => context.store.setInstantType("trigger-change"), controller.signal);
+		return () => controller.abort();
+	});
+	onCleanup(() => {
+		handoffController?.abort();
+		delete context.store.context.floatingRoot.context.data.placement;
+		if (context.store.state.positionerElement === untrack(element)) context.store.setPositionerElement(null);
+	});
+	function ModalBackdrop() {
+		let backdrop = null;
+		onCleanup(() => {
+			if (context.internalBackdropElement() === backdrop) context.setInternalBackdropElement(null);
+		});
+		return InternalBackdrop({
+			ref: (value) => {
+				backdrop = value;
+				context.setInternalBackdropElement(value);
+			},
+			get cutout() {
+				return context.store.track().activeTriggerElement;
+			},
+			get open() {
+				return context.store.open();
+			}
+		});
+	}
+	return PopoverPositionerContext({
+		value: positioning,
+		get children() {
+			return [Show({
+				get when() {
+					return memo(() => {
+						return !!context.presence.mounted();
+					})() ? trueModalNonHover() : context.presence.mounted();
+				},
+				get children() {
+					return ModalBackdrop({});
+				}
+			}), Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((value) => {
+					setElement(value);
+					context.store.setPositionerElement(value);
+				}), internalProps.ref],
+				role: "presentation",
+				get hidden() {
+					return !context.presence.mounted();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others))];
+		}
+	});
+}
+function resolveAnchor(anchor) {
+	if (typeof anchor === "function") return anchor();
+	if (anchor && "current" in anchor) return anchor.current;
+	return anchor;
+}
+//#endregion
+//#region src/popover/utils/ClosePartContext.ts
+var MISSING_CONTEXT = Symbol("PopoverClosePartContext");
+var ClosePartContext = createContext(MISSING_CONTEXT);
+function createClosePartContext() {
+	const [count, setCount] = createSignal(0, { ownedWrite: true });
+	return {
+		hasClosePart: () => count() > 0,
+		register() {
+			setCount((value) => value + 1);
+			let active = true;
+			return () => {
+				if (active) {
+					active = false;
+					setCount((value) => Math.max(0, value - 1));
+				}
+			};
+		}
+	};
+}
+function useClosePartRegistration() {
+	const context = useContext(ClosePartContext);
+	if (context === MISSING_CONTEXT) return;
+	const unregister = context.register();
+	onCleanup(unregister);
+}
+//#endregion
+//#region src/popover/popup/PopoverPopup.tsx
+var COMPOSITE_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+/** A container for the popover contents. */
+function PopoverPopup(props) {
+	const context = usePopoverRootContext();
+	const positioner = usePopoverPositionerContext();
+	const insideToolbar = useToolbarRootContext(true) !== void 0;
+	const closePartContext = createClosePartContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		transitionStatus: context.store.track().transitionStatus,
+		instant: context.store.instantType()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverPopupTransitionStateMapping));
+	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
+	const focusManagerModal = createMemo(() => context.modal() !== false && closePartContext.hasClosePart());
+	const initialFocus = createMemo(() => internalProps.initialFocus ?? ((interactionType) => interactionType === "touch" ? context.store.state.popupElement : true));
+	const others = omit(allProps, "as", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+		const handler = context.store.state.popupProps.onKeyDown;
+		if (typeof handler === "function") handler(event);
+	}, () => (event) => {
+		if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+	});
+	let popupElement = null;
+	createHoverInteraction({
+		context: context.store.context.floatingRoot,
+		reference: () => context.store.track().activeTriggerElement,
+		floating: () => context.store.track().positionerElement,
+		tree: () => context.tree,
+		enabled: () => false,
+		floatingEnabled: () => context.store.openOnHover() && !context.store.disabled(),
+		delay: () => ({ close: context.store.closeDelay() }),
+		handleClose: () => safePolygon(),
+		mouseOnly: () => true
+	});
+	createEffect(() => id(), (currentId) => context.store.setPopupId(currentId));
+	createEffect(() => focusManagerModal(), (value) => context.store.setFocusManagerModal(value));
+	onCleanup(() => {
+		context.store.setFocusManagerModal(false);
+		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
+	});
+	function PopupElement() {
+		return Dynamic(mergeProps({
+			get component() {
+				return props.as ?? "div";
+			},
+			ref: [((element) => {
+				popupElement = element;
+				context.store.setPopupElement(element);
+			}), internalProps.ref],
+			get id() {
+				return id();
+			},
+			role: "dialog",
+			tabIndex: -1,
+			"data-base-ui-focusable": "",
+			get ["aria-labelledby"]() {
+				return context.titleId();
+			},
+			get ["aria-describedby"]() {
+				return context.descriptionId();
+			},
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			},
+			onKeyDown
+		}, stateAttributes, others));
+	}
+	return FocusManager({
+		get context() {
+			return context.store.context.floatingRoot;
+		},
+		get tree() {
+			return context.tree;
+		},
+		get disabled() {
+			return !context.presence.mounted() || context.store.openChangeReason() === "trigger-hover";
+		},
+		get initialFocus() {
+			return initialFocus();
+		},
+		get returnFocus() {
+			return internalProps.finalFocus;
+		},
+		get modal() {
+			return focusManagerModal();
+		},
+		restoreFocus: "popup",
+		get openInteractionType() {
+			return context.store.openMethod();
+		},
+		get previousFocusableElement() {
+			return memo(() => {
+				return !!isHTMLElement(context.store.track().activeTriggerElement);
+			})() ? context.store.track().activeTriggerElement : null;
+		},
+		get nextFocusableElement() {
+			return context.afterTriggerGuard;
+		},
+		get beforeContentGuardRef() {
+			return context.setBeforeContentGuard;
+		},
+		get children() {
+			return ClosePartContext({
+				value: closePartContext,
+				get children() {
+					return PopupElement({});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/popover/arrow/PopoverArrow.tsx
+/** Displays an element positioned against the popover anchor. */
+function PopoverArrow(props) {
+	const context = usePopoverRootContext();
+	const positioner = usePopoverPositionerContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		uncentered: positioner.arrowUncentered()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePopoverStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	let arrowElement = null;
+	onCleanup(() => {
+		if (arrowElement) positioner.setArrowElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			arrowElement = element;
+			positioner.setArrowElement(element);
+		}), internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/popover/backdrop/PopoverBackdrop.tsx
+/** A presentational overlay displayed beneath the popup. */
+function PopoverBackdrop(props) {
+	const context = usePopoverRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		transitionStatus: context.store.track().transitionStatus
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergePopoverStyles({
+		"pointer-events": context.store.openChangeReason() === "trigger-hover" ? "none" : void 0,
+		"user-select": "none",
+		"-webkit-user-select": "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverPopupTransitionStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	let backdrop = null;
+	onCleanup(() => {
+		if (context.backdropElement() === backdrop) context.setBackdropElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			backdrop = element;
+			context.setBackdropElement(element);
+		}), internalProps.ref],
+		role: "presentation",
+		get hidden() {
+			return !context.presence.mounted();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/popover/title/PopoverTitle.tsx
+/** A heading that labels the popover. */
+function PopoverTitle(props) {
+	const context = usePopoverRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	createEffect(() => id(), (current) => {
+		context.setTitleId(current);
+		return () => context.setTitleId((existing) => existing === current ? void 0 : existing);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "h2";
+		},
+		ref: [internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, others));
+}
+//#endregion
+//#region src/popover/description/PopoverDescription.tsx
+/** A paragraph that describes the popover. */
+function PopoverDescription(props) {
+	const context = usePopoverRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id || generatedId);
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	createEffect(() => id(), (current) => {
+		context.setDescriptionId(current);
+		return () => context.setDescriptionId((existing) => existing === current ? void 0 : existing);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "p";
+		},
+		ref: [internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, others));
+}
+//#endregion
+//#region src/popover/close/PopoverClose.tsx
+/** A button that closes the popover. */
+function PopoverClose(props) {
+	const context = usePopoverRootContext();
+	useClosePartRegistration();
+	const internalProps = props;
+	const allProps = props;
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	function handleClick(event) {
+		if (context.store.open()) context.store.setOpen(false, createChangeEventDetails(closePress, event));
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown);
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [internalProps.ref],
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return !nativeButton() && disabled() ? -1 : 0;
+		},
+		get disabled() {
+			return (memo(() => {
+				return !!nativeButton();
+			})() ? disabled() : nativeButton()) || void 0;
+		},
+		get ["aria-disabled"]() {
+			return !nativeButton() && disabled() ? "true" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, others));
+}
+//#endregion
+//#region src/popover/viewport/PopoverViewport.tsx
+/** Displays content transitions when the active trigger changes. */
+function PopoverViewport(props) {
+	const context = usePopoverRootContext();
+	const positioner = usePopoverPositionerContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [viewportState, setViewportState] = createSignal({
+		activationDirection: void 0,
+		transitioning: false
+	}, { ownedWrite: true });
+	const state = createMemo(() => ({
+		...viewportState(),
+		instant: context.store.instantType()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverViewportStateMapping));
+	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return PopupViewport({
+			get store() {
+				return context.store;
+			},
+			get side() {
+				return positioner.renderedSide();
+			},
+			get direction() {
+				return direction();
+			},
+			onStateChange: setViewportState,
+			get children() {
+				return props.children;
+			}
+		});
+	} }));
+}
+//#endregion
+//#region src/popover/store/PopoverHandle.ts
+/** Imperatively controls a Popover and connects detached triggers to its Root. */
+var PopoverHandle = class extends BasePopupHandle {
+	constructor() {
+		super("Popover", true, new DetachedPopoverStore());
+	}
+	open(triggerId) {
+		this.openByTrigger(triggerId);
+	}
+	close() {
+		this.closePopup();
+	}
+	get isOpen() {
+		return this.attachedStore?.open() ?? false;
+	}
+};
+function createPopoverHandle() {
+	return new PopoverHandle();
+}
+//#endregion
+//#region src/popover/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => PopoverArrow,
+	Backdrop: () => PopoverBackdrop,
+	Close: () => PopoverClose,
+	Description: () => PopoverDescription,
+	Handle: () => PopoverHandle,
+	Popup: () => PopoverPopup,
+	Portal: () => PopoverPortal,
+	Positioner: () => PopoverPositioner,
+	Root: () => PopoverRoot,
+	Title: () => PopoverTitle,
+	Trigger: () => PopoverTrigger,
+	Viewport: () => PopoverViewport,
+	createHandle: () => createPopoverHandle
+});
+//#endregion
+export { index_parts_exports as Popover };