solid-baseui 0.1.0-alpha.0

package/dist/lib/server/DialogHandle-ATZlm9RC.js

@@ -0,0 +1,689 @@
+import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
+import { N as triggerPress, 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 { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "./internals/composeEventHandlers.js";
+import { a as isElement, n as contains, r as getEventTarget } from "./dom-Crg_2R-j.js";
+import { n as createScrollLock, t as InternalBackdrop } from "./InternalBackdrop-C_iDPVR-.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 { a as triggerOpenStateMapping, o as PopupPortal } from "./popupStateMapping-nKoUwoke.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "./PopupHandle-DthPgNjy.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 { Dynamic, escape, memo, mergeProps } from "@solidjs/web";
+import { $REFRESH, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/dialog/store/DialogStore.ts
+var DialogStore = class extends PopupStore {
+	openMethodAccessor;
+	setOpenMethodSignal;
+	openMethodRevisionAccessor;
+	setOpenMethodRevision;
+	constructor(options = {}) {
+		super(options);
+		const [openMethod, setOpenMethod] = createSignal(null, { ownedWrite: true });
+		this.openMethodAccessor = openMethod;
+		this.setOpenMethodSignal = setOpenMethod;
+		const [openMethodRevision, setOpenMethodRevision] = createSignal(0, { ownedWrite: true });
+		this.openMethodRevisionAccessor = openMethodRevision;
+		this.setOpenMethodRevision = setOpenMethodRevision;
+	}
+	openMethod() {
+		return this.openMethodAccessor();
+	}
+	setOpenMethod(value) {
+		this.setOpenMethodSignal(value);
+		this.setOpenMethodRevision((revision) => revision + 1);
+	}
+	openMethodRevision() {
+		return this.openMethodRevisionAccessor();
+	}
+	setPayload(payload) {
+		this.set("payload", payload);
+	}
+	setOpen(open, details) {
+		if (!open && details.trigger == null && this.activeTriggerId() != null) details.trigger = this.state.activeTriggerElement ?? void 0;
+		return super.setOpen(open, details);
+	}
+};
+var DetachedDialogStore = class extends DetachedPopupStore {
+	openMethod() {
+		return null;
+	}
+	setOpenMethod(_value) {}
+	setPayload(_payload) {}
+};
+//#endregion
+//#region src/dialog/root/DialogRootContext.ts
+var MISSING_CONTEXT$1 = Symbol("DialogRootContext");
+var DialogRootContext = createContext(MISSING_CONTEXT$1);
+function useDialogRootContext(optional = false) {
+	const context = useContext(DialogRootContext);
+	if (context === MISSING_CONTEXT$1) {
+		if (optional) return;
+		throw new Error("Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.");
+	}
+	return context;
+}
+//#endregion
+//#region src/dialog/root/DialogRoot.tsx
+/** Groups all parts of the dialog without rendering an element. */
+function DialogRoot(props) {
+	return renderDialogRoot("dialog", props);
+}
+/** @internal Shared root implementation for Dialog specializations. */
+function renderDialogRoot(mode, props, options = {}) {
+	const parentDialog = useDialogRootContext(true);
+	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 nested = parentDialog !== void 0;
+	const alertDialog = mode === "alert-dialog";
+	const drawer = mode === "drawer";
+	const modal = createMemo(() => alertDialog ? true : props.modal ?? true);
+	const disablePointerDismissal = createMemo(() => alertDialog || (props.disablePointerDismissal ?? false));
+	const store = new DialogStore({
+		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 [viewportElement, setViewportElement] = createSignal(null, { ownedWrite: true });
+	const [nestedRevision, setNestedRevision] = createSignal(0, {
+		equals: false,
+		ownedWrite: true
+	});
+	const nestedLayers = /* @__PURE__ */ new Map();
+	const nestedOpenDialogCount = createMemo(() => {
+		nestedRevision();
+		let count = 0;
+		for (const layer of nestedLayers.values()) count += layer.dialogCount;
+		return count;
+	});
+	const nestedOpenDrawerCount = createMemo(() => {
+		nestedRevision();
+		let count = 0;
+		for (const layer of nestedLayers.values()) count += layer.drawerCount;
+		return count;
+	});
+	const outsidePressEnabled = { current: true };
+	const presence = createPopupPresence(store, () => store.track().popupElement, { onUnmount: () => store.setOpenMethod(null) });
+	function updateNestedLayer(token, dialogCount, drawerCount) {
+		const previous = nestedLayers.get(token);
+		if (previous?.dialogCount === dialogCount && previous.drawerCount === drawerCount) return;
+		nestedLayers.set(token, {
+			dialogCount,
+			drawerCount
+		});
+		setNestedRevision((value) => value + 1);
+	}
+	function removeNestedLayer(token) {
+		if (nestedLayers.delete(token)) setNestedRevision((value) => value + 1);
+	}
+	const context = {
+		store,
+		tree,
+		nested,
+		role: alertDialog ? "alertdialog" : "dialog",
+		modal,
+		disablePointerDismissal,
+		nestedOpenDialogCount,
+		nestedOpenDrawerCount,
+		outsidePressEnabled,
+		titleId,
+		setTitleId,
+		descriptionId,
+		setDescriptionId,
+		backdropElement,
+		setBackdropElement,
+		internalBackdropElement,
+		setInternalBackdropElement,
+		viewportElement,
+		setViewportElement,
+		presence,
+		updateNestedLayer,
+		removeNestedLayer
+	};
+	store.context.floatingRoot.context.data.insideElements = () => [
+		backdropElement(),
+		internalBackdropElement(),
+		viewportElement()
+	];
+	store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: false });
+	attachPopupHandle(() => props.handle, store);
+	const dismiss = createDismiss({
+		context: store.context.floatingRoot,
+		tree: () => tree,
+		escapeKey: () => nestedOpenDialogCount() === 0,
+		outsidePress: () => (event) => {
+			if (!outsidePressEnabled.current) return false;
+			if (disablePointerDismissal() || nestedOpenDialogCount() > 0) return false;
+			if ("button" in event && event.button !== 0) return false;
+			if ("touches" in event) {
+				if (event.type === "touchend") {
+					if (event.changedTouches.length !== 1 || event.touches.length !== 0) return false;
+				} else if (event.touches.length !== 1) return false;
+			}
+			if (modal() === false) return true;
+			const target = getEventTarget(event);
+			const internalBackdrop = internalBackdropElement();
+			const backdrop = backdropElement();
+			if (!internalBackdrop && !backdrop) return true;
+			return target === internalBackdrop || target === backdrop || isElement(target) && contains(target, store.state.popupElement) && !target.hasAttribute("data-base-ui-portal");
+		},
+		outsidePressEvent: () => internalBackdropElement() || backdropElement() ? "intentional" : {
+			mouse: modal() === "trap-focus" ? "sloppy" : "intentional",
+			touch: "sloppy"
+		}
+	});
+	store.setInteractionProps({
+		activeTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		inactiveTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		popupProps: {}
+	});
+	createScrollLock(() => store.open() && modal() === true, () => store.track().popupElement);
+	createEffect(() => ({
+		open: store.open(),
+		activeTriggerId: store.activeTriggerId()
+	}), () => untrack(() => store.reconcileTriggers()));
+	let previousOpen = untrack(() => store.open());
+	let revisionAtClose = untrack(() => store.openMethodRevision());
+	createEffect(() => ({
+		open: store.open(),
+		openMethodRevision: store.openMethodRevision()
+	}), (state) => {
+		if (!state.open && previousOpen) revisionAtClose = state.openMethodRevision;
+		else if (state.open && !previousOpen && state.openMethodRevision === revisionAtClose) store.setOpenMethod(null);
+		previousOpen = state.open;
+	});
+	const nestedToken = Symbol("DialogRoot");
+	createEffect(() => ({
+		open: store.open(),
+		nestedDialogs: nestedOpenDialogCount(),
+		nestedDrawers: nestedOpenDrawerCount()
+	}), (state) => {
+		parentDialog?.updateNestedLayer(nestedToken, state.open ? state.nestedDialogs + 1 : 0, state.open ? state.nestedDrawers + (drawer ? 1 : 0) : 0);
+	});
+	const actions = {
+		unmount: presence.forceUnmount,
+		close() {
+			store.setOpen(false, createChangeEventDetails(imperativeAction));
+		}
+	};
+	createEffect(() => props.actionsRef, (ref) => {
+		ref?.(actions);
+	});
+	function DialogRootContent() {
+		const child = createMemo(() => props.children);
+		const initialChild = untrack(child);
+		let content = initialChild;
+		if (typeof initialChild === "function") {
+			if (initialChild.name === "bound read" && Object.prototype.hasOwnProperty.call(initialChild, $REFRESH)) content = memo(() => {
+				return escape(child());
+			});
+			else content = untrack(() => initialChild({ payload }));
+		}
+		return content;
+	}
+	onCleanup(() => {
+		parentDialog?.removeNestedLayer(nestedToken);
+		store.clearInteractionProps();
+		delete store.context.floatingRoot.context.data.insideElements;
+	});
+	return DialogRootContext({
+		value: context,
+		get children() {
+			return FloatingTreeContext({
+				value: tree,
+				get children() {
+					return FloatingParentNodeContext({
+						get value() {
+							return node.id ?? null;
+						},
+						get children() {
+							return [memo(() => {
+								return escape(options.extraContent?.());
+							}), DialogRootContent({})];
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/dialog/utils/mergeDialogStyles.ts
+function mergeDialogStyles(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/dialog/utils/stateAttributesMapping.ts
+var OPEN = { "data-open": "" };
+var CLOSED = { "data-closed": "" };
+var NESTED_DIALOG_OPEN = { "data-nested-dialog-open": "" };
+var dialogTransitionStateAttributesMapping = {
+	open: (value) => value ? OPEN : CLOSED,
+	...transitionStatusMapping
+};
+var dialogStateAttributesMapping = {
+	...dialogTransitionStateAttributesMapping,
+	nestedDialogOpen: (value) => value ? NESTED_DIALOG_OPEN : null
+};
+//#endregion
+//#region src/dialog/close/DialogClose.tsx
+/** A button that closes the dialog. */
+function DialogClose(props) {
+	const context = useDialogRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const state = createMemo(() => ({ disabled: disabled() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(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
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/dialog/description/DialogDescription.tsx
+/** A paragraph with additional information about the dialog. */
+function DialogDescription(props) {
+	const context = useDialogRootContext();
+	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/dialog/portal/DialogPortalContext.ts
+var MISSING_CONTEXT = Symbol("DialogPortalContext");
+var DialogPortalContext = createContext(MISSING_CONTEXT);
+function useDialogPortalContext() {
+	const context = useContext(DialogPortalContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: <Dialog.Portal> is missing.");
+	return context;
+}
+//#endregion
+//#region src/dialog/portal/DialogPortal.tsx
+/** Moves the dialog layer into a portal appended to the document body by default. */
+function DialogPortal(props) {
+	const context = useDialogRootContext();
+	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 };
+	function DialogInternalBackdrop() {
+		let element = null;
+		onCleanup(() => {
+			if (context.internalBackdropElement() === element) context.setInternalBackdropElement(null);
+		});
+		return InternalBackdrop({
+			ref: (current) => {
+				element = current;
+				context.setInternalBackdropElement(current);
+			},
+			get open() {
+				return context.store.open();
+			}
+		});
+	}
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return DialogPortalContext({
+				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 [Show({
+							get when() {
+								return memo(() => {
+									return !!context.presence.mounted();
+								})() ? context.modal() === true : context.presence.mounted();
+							},
+							get children() {
+								return DialogInternalBackdrop({});
+							}
+						}), memo(() => {
+							return escape(props.children);
+						})];
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/dialog/title/DialogTitle.tsx
+/** A heading that labels the dialog. */
+function DialogTitle(props) {
+	const context = useDialogRootContext();
+	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/dialog/trigger/DialogTrigger.tsx
+/** A button that opens the dialog. */
+function DialogTrigger(props) {
+	const root = useDialogRootContext(true);
+	const internalProps = props;
+	if (!root && !untrack(() => internalProps.handle)) throw new Error("Base UI: <Dialog.Trigger> must be used within <Dialog.Root> 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 [element, setElement] = createSignal(null, { ownedWrite: true });
+	const handleStore = createPopupHandleStore(() => internalProps.handle);
+	const store = createMemo(() => handleStore() ?? root?.store);
+	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(), triggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "payload", "ref", "style");
+	let pointerType = "";
+	let clickPointerType = "";
+	createTriggerRegistration(store, id, element, () => ({ payload: internalProps.payload }));
+	function handleClick(event) {
+		const current = store();
+		const trigger = element();
+		if (!current || !trigger || event.button !== 0) return;
+		if (!current.open()) current.setOpenMethod(clickPointerType || (event.detail === 0 ? "keyboard" : isIOS() ? "touch" : "mouse"));
+		current.setOpen(!(current.open() && current.activeTriggerId() === id()), createChangeEventDetails(triggerPress, event, trigger));
+	}
+	function prepareClick() {
+		clickPointerType = pointerType;
+		pointerType = "";
+	}
+	function handlePointerDown(event) {
+		pointerType = event.pointerType;
+	}
+	function handleKeyDown(event) {
+		pointerType = "keyboard";
+		const current = store();
+		const popup = current?.state.popupElement;
+		const rootHandler = current ? (current.activeTriggerId() === id() ? current.state.activeTriggerProps : current.state.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);
+	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));
+	return 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 ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, stateAttributes, others));
+}
+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/dialog/viewport/DialogViewport.tsx
+/** A positioning container for the dialog popup that can be made scrollable. */
+function DialogViewport(props) {
+	const portal = useDialogPortalContext();
+	const context = useDialogRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "ref", "style");
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		transitionStatus: context.store.track().transitionStatus,
+		nested: context.nested,
+		nestedDialogOpen: context.nestedOpenDialogCount() > 0
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeDialogStyles({ "pointer-events": context.store.open() ? void 0 : "none" }, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), dialogStateAttributesMapping));
+	const shouldRender = createMemo(() => portal.keepMounted() || context.presence.mounted());
+	let viewportElement = null;
+	onCleanup(() => {
+		if (context.viewportElement() === viewportElement) context.setViewportElement(null);
+	});
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => {
+					viewportElement = element;
+					context.setViewportElement(element);
+				}), internalProps.ref],
+				role: "presentation",
+				get hidden() {
+					return !context.presence.mounted();
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/dialog/store/DialogHandle.ts
+/** Imperatively controls a Dialog and connects detached triggers to its Root. */
+var DialogHandle = class extends BasePopupHandle {
+	constructor() {
+		super("Dialog", false, new DetachedDialogStore());
+	}
+	open(triggerId) {
+		this.openByTrigger(triggerId);
+	}
+	openWithPayload(payload) {
+		if (!this.attachedStore) return;
+		this.attachedStore.setPayload(payload);
+		this.attachedStore.setOpen(true, createChangeEventDetails(imperativeAction));
+	}
+	close() {
+		this.closePopup();
+	}
+	get isOpen() {
+		return this.attachedStore?.open() ?? false;
+	}
+};
+function createDialogHandle() {
+	return new DialogHandle();
+}
+//#endregion
+export { DialogTitle as a, DialogDescription as c, dialogTransitionStateAttributesMapping as d, mergeDialogStyles as f, useDialogRootContext as h, DialogTrigger as i, DialogClose as l, renderDialogRoot as m, createDialogHandle as n, DialogPortal as o, DialogRoot as p, DialogViewport as r, useDialogPortalContext as s, DialogHandle as t, dialogStateAttributesMapping as u };