@solid2-aria/vaul 0.0.0-stage → 0.0.1

package/dist/browser/index.js

@@ -0,0 +1,1004 @@
+/*!
+ * Derived from Vaul (https://github.com/emilkowalski/vaul), src/.
+ * Copyright (c) 2023 Emil Kowalski
+ * Modified for Solid Aria: native Solid 2 rendering, state, events, and lifecycle.
+ * MIT licensed. See LICENSE, VAUL-LICENSE, and NOTICE.txt in the package root.
+ */
+import { Portal as Portal$1, createComponent, getNextElement, insert, memo, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { FocusScope } from "@solid2-aria/core/focus/focus-scope";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, merge, omit, onSettled, untrack, useContext } from "solid-js";
+import { ariaHideOutside } from "@solid2-aria/core/overlays/aria-hide-outside";
+import { createPreventScroll } from "@solid2-aria/core/overlays/create-prevent-scroll";
+// src/context.ts
+const DrawerContext = createContext();
+const PortalContext = createContext(false);
+// src/constants.ts
+const TRANSITIONS = {
+	DURATION: .5,
+	EASE: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+const DRAG_CLASS = "vaul-dragging";
+// src/helpers.ts
+function isVertical(direction) {
+	return direction === "top" || direction === "bottom";
+}
+function directionSign(direction) {
+	return direction === "bottom" || direction === "right" ? 1 : -1;
+}
+function translate(distance, direction) {
+	return isVertical(direction) ? `translate3d(0, ${distance}px, 0)` : `translate3d(${distance}px, 0, 0)`;
+}
+function dampenValue(value) {
+	return Math.max(0, 8 * (Math.log(value + 1) - 2));
+}
+function clamp(value, min = 0, max = 1) {
+	return Math.min(max, Math.max(min, value));
+}
+/** Restore only the properties this operation owns, including priorities. */
+function assignStyle(element, styles) {
+	const previous = Object.keys(styles).map((property) => ({
+		priority: element.style.getPropertyPriority(property),
+		property,
+		value: element.style.getPropertyValue(property)
+	}));
+	for (const [property, value] of Object.entries(styles)) element.style.setProperty(property, value);
+	return () => {
+		for (const { property, value, priority } of previous) if (value) element.style.setProperty(property, value, priority);
+		else element.style.removeProperty(property);
+	};
+}
+function isSafari(view) {
+	return /^(?:(?!chrome|android).)*safari/iu.test(view.navigator.userAgent);
+}
+function canScroll(target, content, direction, distance) {
+	const vertical = isVertical(direction);
+	const forward = distance * directionSign(direction) < 0;
+	for (let node = target; node && content.contains(node); node = node.parentElement) {
+		const scrollSize = vertical ? node.scrollHeight : node.scrollWidth;
+		const size = vertical ? node.clientHeight : node.clientWidth;
+		if (scrollSize <= size) continue;
+		const position = vertical ? node.scrollTop : node.scrollLeft;
+		if (forward && position < scrollSize - size || !forward && position > 0) return true;
+	}
+	return false;
+}
+// src/create-background.ts
+function createBackground(context) {
+	let background = null;
+	let initialScale = 1;
+	let vertical = true;
+	createEffect(() => ({
+		color: context.props.setBackgroundColorOnScale !== false && context.props.noBodyStyles !== true,
+		direction: context.direction,
+		element: context.content,
+		enabled: context.props.shouldScaleBackground === true,
+		nested: context.props.nested === true,
+		open: context.isOpen
+	}), ({ element, open, enabled, color, direction, nested }) => {
+		if (!element || !open || !enabled || nested) return;
+		const doc = element.ownerDocument;
+		const wrapper = doc.querySelector("[data-vaul-drawer-wrapper], [vaul-drawer-wrapper]");
+		const view = doc.defaultView;
+		if (!wrapper || !view) return;
+		background = wrapper;
+		initialScale = (view.innerWidth - 26) / view.innerWidth;
+		vertical = isVertical(direction);
+		const restoreBody = color ? assignStyle(doc.body, { background: "black" }) : void 0;
+		const restoreWrapper = assignStyle(wrapper, {
+			"border-radius": `8px`,
+			overflow: "hidden",
+			transform: `scale(${initialScale}) ${vertical ? "translate3d(0, 14px, 0)" : "translate3d(14px, 0, 0)"}`,
+			"transform-origin": vertical ? "top" : "left",
+			"transition-duration": `${TRANSITIONS.DURATION}s`,
+			"transition-property": "transform, border-radius",
+			"transition-timing-function": `cubic-bezier(${TRANSITIONS.EASE.join(",")})`
+		});
+		return () => {
+			background = null;
+			restoreWrapper();
+			restoreBody?.();
+		};
+	}, { ssrSource: "client" });
+	createEffect(() => ({
+		dragging: context.isDragging,
+		element: context.content,
+		open: context.isOpen,
+		progress: context.dragProgress
+	}), ({ progress, dragging, open }) => {
+		if (!background || !open) return;
+		const scale = initialScale + progress * (1 - initialScale);
+		const displacement = 14 * (1 - progress);
+		background.style.transitionDuration = dragging ? "0s" : `${TRANSITIONS.DURATION}s`;
+		background.style.borderRadius = `${8 * (1 - progress)}px`;
+		background.style.transform = `scale(${scale}) ${vertical ? `translate3d(0, ${displacement}px, 0)` : `translate3d(${displacement}px, 0, 0)`}`;
+	}, { ssrSource: "client" });
+}
+// src/create-snap-points.ts
+function getSnapPointOffsets(points, dimension, direction) {
+	return points.map((point) => {
+		return (dimension - (typeof point === "number" ? point * dimension : Number(point.replace(/px$/u, "")))) * directionSign(direction);
+	});
+}
+function getOverlayOpacity(offsets, offset, fadeFromIndex, dimension) {
+	const faded = Math.abs(offsets[fadeFromIndex] ?? 0);
+	const clear = fadeFromIndex === 0 ? dimension : Math.abs(offsets[fadeFromIndex - 1] ?? faded);
+	if (clear === faded) return offset <= faded ? 1 : 0;
+	return clamp((clear - offset) / (clear - faded));
+}
+function selectSnapPoint(options) {
+	const { offsets, activeIndex, distance, velocity, dimension, dismissible, sequential } = options;
+	const [first] = offsets;
+	if (first === void 0) return activeIndex;
+	const position = Math.abs(offsets[activeIndex] ?? first) + distance;
+	if (!sequential && velocity > 2) {
+		if (distance <= 0) return offsets.length - 1;
+		return dismissible ? "close" : 0;
+	}
+	if (velocity > .4 && Math.abs(distance) < dimension * .4) {
+		if (distance > 0 && activeIndex === 0 && dismissible) return "close";
+		return clamp(activeIndex + (distance > 0 ? -1 : 1), 0, offsets.length - 1);
+	}
+	const remaining = dimension - Math.abs(first);
+	if (dismissible && distance > 0 && position > Math.abs(first) + remaining / 2) return "close";
+	let closest = 0;
+	let difference = Infinity;
+	for (const [index, offset] of offsets.entries()) {
+		if (sequential && Math.abs(index - activeIndex) > 1) continue;
+		const nextDifference = Math.abs(Math.abs(offset) - position);
+		if (nextDifference < difference) {
+			difference = nextDifference;
+			closest = index;
+		}
+	}
+	return closest;
+}
+// src/create-drawer.ts
+const transition = `${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`;
+function createDrawer(props, parent) {
+	const [internalOpen, setInternalOpen] = createSignal(untrack(() => props.defaultOpen ?? false));
+	const isOpen = createMemo(() => props.open ?? internalOpen());
+	const [present, setPresent] = createSignal(untrack(isOpen));
+	const [animate, setAnimate] = createSignal(untrack(() => props.defaultOpen !== true));
+	const [internalSnap, setInternalSnap] = createSignal(untrack(() => props.snapPoints?.[0] ?? null));
+	const activeSnap = createMemo(() => props.activeSnapPoint === void 0 ? internalSnap() : props.activeSnapPoint);
+	const [content, setContent] = createSignal(null, { ownedWrite: true });
+	const [overlay, setOverlay] = createSignal(null, { ownedWrite: true });
+	const [trigger, setTrigger] = createSignal(null, { ownedWrite: true });
+	const [dimension, setDimension] = createSignal(0);
+	const [dragging, setDragging] = createSignal(false);
+	const [dragProgress, setDragProgress] = createSignal(0);
+	const [childOpen, setChildOpen] = createSignal(false);
+	const [childProgress, setChildProgress] = createSignal(0);
+	const direction = () => props.direction ?? "bottom";
+	const points = () => props.snapPoints ?? [];
+	const offsets = createMemo(() => getSnapPointOffsets(points(), dimension(), direction()));
+	const activeIndex = createMemo(() => Math.max(0, points().indexOf(activeSnap() ?? points()[0] ?? 0)));
+	const offset = () => offsets()[activeIndex()] ?? 0;
+	const fadeFromIndex = () => props.fadeFromIndex ?? Math.max(0, points().length - 1);
+	const id = createUniqueId();
+	let gesture = null;
+	let lastScrollTime = -Infinity;
+	let openedAt = -Infinity;
+	const onScroll = () => {
+		lastScrollTime = Date.now();
+	};
+	function setOpen(open) {
+		if (open === isOpen()) return;
+		if (props.open === void 0) setInternalOpen(open);
+		props.onOpenChange?.(open);
+	}
+	function setActiveSnapPoint(point) {
+		if (point === activeSnap()) return;
+		if (props.activeSnapPoint === void 0) setInternalSnap(point);
+		props.setActiveSnapPoint?.(point);
+	}
+	function resetPosition() {
+		const element = content();
+		if (!element) return;
+		element.classList.remove(DRAG_CLASS);
+		element.style.transition = `transform ${transition}`;
+		element.style.transform = translate(offset(), direction());
+		const backdrop = overlay();
+		if (backdrop) {
+			backdrop.style.transition = `opacity ${transition}`;
+			backdrop.style.opacity = points().length ? `${getOverlayOpacity(offsets(), Math.abs(offset()), fadeFromIndex(), dimension())}` : "1";
+		}
+	}
+	function cancelDrag() {
+		if (!gesture) return;
+		if (gesture.target.hasPointerCapture?.(gesture.pointerId)) gesture.target.releasePointerCapture(gesture.pointerId);
+		gesture = null;
+		setDragging(false);
+		setDragProgress(0);
+		untrack(resetPosition);
+		parent?.setChildProgress(0);
+	}
+	function close() {
+		cancelDrag();
+		if (props.dismissible !== false) setOpen(false);
+	}
+	createEffect(isOpen, (open, previous) => {
+		if (open) {
+			openedAt = Date.now();
+			setPresent(true);
+		} else {
+			cancelDrag();
+			if (previous === true) props.onClose?.();
+		}
+		parent?.setChildOpen(open);
+		if (previous === void 0 && !open) return;
+		const duration = (untrack(content)?.ownerDocument.defaultView)?.matchMedia("(prefers-reduced-motion: reduce)").matches === true ? 0 : TRANSITIONS.DURATION * 1e3;
+		const timer = setTimeout(() => {
+			if (!open) {
+				setPresent(false);
+				setActiveSnapPoint(points()[0] ?? null);
+			}
+			if (previous !== void 0) props.onAnimationEnd?.(open);
+		}, duration);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, { ssrSource: "client" });
+	createEffect(() => ({
+		container: props.container,
+		direction: direction(),
+		element: content()
+	}), ({ element, container, direction: currentDirection }) => {
+		if (!element) return;
+		const view = element.ownerDocument.defaultView;
+		if (!view) return;
+		const measure = () => {
+			const rect = container?.getBoundingClientRect();
+			setDimension(isVertical(currentDirection) ? rect?.height ?? view.innerHeight : rect?.width ?? view.innerWidth);
+		};
+		measure();
+		view.addEventListener("resize", measure);
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+		if (container) observer?.observe(container);
+		element.addEventListener("scroll", onScroll, true);
+		return () => {
+			view.removeEventListener("resize", measure);
+			observer?.disconnect();
+			element.removeEventListener("scroll", onScroll, true);
+			cancelDrag();
+		};
+	}, { ssrSource: "client" });
+	createEffect(() => ({
+		animate: animate(),
+		backdrop: overlay(),
+		child: childOpen(),
+		dimension: dimension(),
+		direction: direction(),
+		element: content(),
+		hasSnapPoints: points().length > 0,
+		offset: offset(),
+		opacity: points().length ? getOverlayOpacity(offsets(), Math.abs(offset()), fadeFromIndex(), dimension()) : 1,
+		open: isOpen(),
+		progress: childProgress()
+	}), ({ animate: shouldAnimate, element, backdrop, dimension: currentDimension, hasSnapPoints, open, offset: currentOffset, child, progress, direction: currentDirection, opacity }) => {
+		if (!element || hasSnapPoints && currentDimension === 0) return;
+		const sign = directionSign(currentDirection);
+		const view = element.ownerDocument.defaultView;
+		const size = isVertical(currentDirection) ? view?.innerHeight : view?.innerWidth;
+		const scale = child ? 1 - 16 / Math.max(1, size ?? 1) * (1 - progress) : 1;
+		const displacement = child ? -16 * (1 - progress) * sign : 0;
+		if (hasSnapPoints && shouldAnimate && element.style.transform === "") element.getBoundingClientRect();
+		element.style.transition = shouldAnimate ? `transform ${transition}` : "none";
+		element.style.transform = `${translate(open ? currentOffset + displacement : sign * (size ?? currentDimension), currentDirection)} scale(${scale})`;
+		if (backdrop) {
+			backdrop.style.transition = shouldAnimate ? `opacity ${transition}` : "none";
+			backdrop.style.opacity = open ? `${opacity}` : "0";
+		}
+	}, { ssrSource: "client" });
+	onSettled(() => {
+		const frame = requestAnimationFrame(() => {
+			setAnimate(true);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			parent?.setChildOpen(false);
+		};
+	});
+	function press(event, fromHandle = false) {
+		const element = content();
+		const { target } = event;
+		if (!element || !isOpen() || childOpen() || event.defaultPrevented || event.button > 0) return;
+		if (!(target instanceof HTMLElement) || target.closest("[data-vaul-drawer]") !== element) return;
+		if (target.closest("[data-vaul-no-drag],select,option") || props.handleOnly === true && !fromHandle) return;
+		if (props.dismissible === false && !points().length) return;
+		const rect = element.getBoundingClientRect();
+		gesture = {
+			allowed: false,
+			dimension: isVertical(direction()) ? rect.height : rect.width,
+			distance: 0,
+			fromHandle,
+			pointerId: event.pointerId,
+			startOffset: Math.abs(offset()),
+			startedAt: Date.now(),
+			target,
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	function canDrag(target, distance) {
+		if (!gesture || target.closest("[data-vaul-no-drag],select,option")) return false;
+		if (gesture.fromHandle) return true;
+		if ((target.ownerDocument.getSelection()?.toString().length ?? 0) > 0) return false;
+		if (Date.now() - openedAt < TRANSITIONS.DURATION * 1e3) return false;
+		if (Date.now() - lastScrollTime < (props.scrollLockTimeout ?? 100)) return false;
+		const lastOffset = Math.abs(offsets().at(-1) ?? 0);
+		if (distance < 0 && gesture.startOffset > lastOffset) return true;
+		const element = content();
+		return element !== null && !canScroll(target, element, direction(), distance);
+	}
+	function claimGesture(event, current, axis, cross, distance) {
+		if (current.allowed) return true;
+		const threshold = event.pointerType === "touch" ? 10 : 2;
+		if (Math.abs(axis) < threshold && Math.abs(cross) < threshold) return false;
+		if (Math.abs(cross) > Math.abs(axis)) {
+			gesture = null;
+			return false;
+		}
+		if (!canDrag(current.target, distance)) return false;
+		current.allowed = true;
+		current.target.setPointerCapture?.(event.pointerId);
+		setDragging(true);
+		return true;
+	}
+	function drag(event) {
+		const current = gesture;
+		const element = content();
+		if (!current || !element || current.pointerId !== event.pointerId) return;
+		const dx = event.clientX - current.x;
+		const dy = event.clientY - current.y;
+		const vertical = isVertical(direction());
+		const axis = vertical ? dy : dx;
+		const cross = vertical ? dx : dy;
+		const distance = axis * directionSign(direction());
+		if (!claimGesture(event, current, axis, cross, distance)) return;
+		event.preventDefault();
+		const minimum = Math.abs(offsets().at(-1) ?? 0);
+		let position = current.startOffset + distance;
+		if (position < minimum) position = minimum - dampenValue(minimum - position);
+		if (props.dismissible === false) position = Math.min(position, Math.abs(offsets()[0] ?? 0));
+		current.distance = position - current.startOffset;
+		element.classList.add(DRAG_CLASS);
+		element.style.transition = "none";
+		element.style.transform = translate(position * directionSign(direction()), direction());
+		const percentage = clamp(Math.max(0, distance) / Math.max(1, current.dimension - current.startOffset));
+		const backdrop = overlay();
+		if (backdrop) {
+			backdrop.style.transition = "none";
+			backdrop.style.opacity = points().length ? `${getOverlayOpacity(offsets(), position, fadeFromIndex(), dimension())}` : `${1 - percentage}`;
+		}
+		setDragProgress(percentage);
+		props.onDrag?.(event, percentage);
+		parent?.setChildProgress(percentage);
+	}
+	function release(event) {
+		const current = gesture;
+		if (!current || event.pointerId !== current.pointerId) return;
+		const velocity = Math.abs(current.distance) / Math.max(1, Date.now() - current.startedAt);
+		let next = activeIndex();
+		if (current.allowed && points().length) next = selectSnapPoint({
+			activeIndex: activeIndex(),
+			dimension: dimension(),
+			dismissible: props.dismissible !== false,
+			distance: current.distance,
+			offsets: offsets(),
+			sequential: props.snapToSequentialPoint ?? false,
+			velocity
+		});
+		else if (current.allowed && current.distance > 0 && props.dismissible !== false && (velocity > .4 || current.distance >= current.dimension * (props.closeThreshold ?? .25))) next = "close";
+		cancelDrag();
+		if (!current.allowed) return;
+		if (next === "close") close();
+		else if (points().length) setActiveSnapPoint(points()[next] ?? null);
+		props.onRelease?.(event, next !== "close");
+	}
+	return {
+		get activeSnapPoint() {
+			return activeSnap();
+		},
+		get activeSnapPointIndex() {
+			return activeIndex();
+		},
+		cancelDrag,
+		get childOpen() {
+			return childOpen();
+		},
+		close,
+		get content() {
+			return content();
+		},
+		contentId: `vaul-${id}`,
+		descriptionId: `vaul-${id}-description`,
+		get direction() {
+			return direction();
+		},
+		get dismissible() {
+			return props.dismissible ?? true;
+		},
+		drag,
+		get dragProgress() {
+			return dragProgress();
+		},
+		get isDragging() {
+			return dragging();
+		},
+		get isOpen() {
+			return isOpen();
+		},
+		get modal() {
+			return props.modal ?? true;
+		},
+		get overlay() {
+			return overlay();
+		},
+		get present() {
+			return present();
+		},
+		press,
+		props,
+		release,
+		setActiveSnapPoint,
+		setChildOpen(open) {
+			setChildOpen(open);
+			setChildProgress(0);
+		},
+		setChildProgress(progress) {
+			setChildProgress(progress);
+		},
+		setContent(element) {
+			setContent(element);
+		},
+		setOpen,
+		setOverlay(element) {
+			setOverlay(element);
+		},
+		setTrigger(element) {
+			setTrigger(element);
+		},
+		get shouldAnimate() {
+			return animate();
+		},
+		get shouldFade() {
+			return !points().length || activeIndex() >= fadeFromIndex();
+		},
+		get snapPointsOffset() {
+			return offsets();
+		},
+		titleId: `vaul-${id}-title`,
+		get trigger() {
+			return trigger();
+		}
+	};
+}
+// src/create-layer.ts
+const layers = /* @__PURE__ */ new WeakMap();
+function createLayer(context, props) {
+	createPreventScroll({ get isDisabled() {
+		return !context.isOpen || !context.content || !context.modal || context.props.noBodyStyles === true || !context.overlay && context.props.disablePreventScroll !== true;
+	} });
+	createEffect(() => ({
+		element: context.content,
+		modal: context.modal,
+		open: context.isOpen,
+		overlay: context.overlay
+	}), ({ element, overlay, open, modal }) => {
+		if (!element || !open || !modal) return;
+		return ariaHideOutside(overlay ? [element, overlay] : [element], { shouldUseInert: true });
+	}, { ssrSource: "client" });
+	createEffect(() => ({
+		element: context.content,
+		open: context.isOpen
+	}), ({ element, open }) => {
+		if (!element || !open) return;
+		const doc = element.ownerDocument;
+		const stack = layers.get(doc) ?? [];
+		layers.set(doc, stack);
+		stack.push(element);
+		const previous = doc.activeElement;
+		let interactedOutside = false;
+		const autoFocus = new Event("openAutoFocus", { cancelable: true });
+		props.onOpenAutoFocus?.(autoFocus);
+		if (!autoFocus.defaultPrevented && context.props.autoFocus === true) (element.querySelector("[autofocus],button:not([disabled]),[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex='0']") ?? element).focus({ preventScroll: true });
+		const isTop = () => stack.at(-1) === element;
+		const isOutside = (event) => !event.composedPath().includes(element);
+		function pointerDown(event) {
+			if (!isTop() || !isOutside(event)) return;
+			const outside = new CustomEvent("pointerDownOutside", {
+				cancelable: true,
+				detail: { originalEvent: event }
+			});
+			props.onPointerDownOutside?.(outside);
+			props.onInteractOutside?.(outside);
+			if (outside.defaultPrevented || !context.modal || event.button > 0 || event.ctrlKey) return;
+			interactedOutside = !context.modal;
+			context.close();
+		}
+		function focusIn(event) {
+			if (!isTop() || !isOutside(event)) return;
+			const outside = new CustomEvent("focusOutside", {
+				cancelable: true,
+				detail: { originalEvent: event }
+			});
+			props.onFocusOutside?.(outside);
+			props.onInteractOutside?.(outside);
+			if (!context.modal) interactedOutside = true;
+		}
+		function keyDown(event) {
+			if (event.key !== "Escape" || !isTop() || event.defaultPrevented) return;
+			props.onEscapeKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			context.close();
+		}
+		doc.addEventListener("pointerdown", pointerDown);
+		doc.addEventListener("focusin", focusIn);
+		doc.addEventListener("keydown", keyDown);
+		const touchMove = (event) => {
+			if (element.classList.contains("vaul-dragging") && event.cancelable) event.preventDefault();
+		};
+		element.addEventListener("touchmove", touchMove, { passive: false });
+		return () => {
+			const index = stack.indexOf(element);
+			const wasTop = isTop();
+			if (index !== -1) stack.splice(index, 1);
+			if (!stack.length) layers.delete(doc);
+			doc.removeEventListener("pointerdown", pointerDown);
+			doc.removeEventListener("focusin", focusIn);
+			doc.removeEventListener("keydown", keyDown);
+			element.removeEventListener("touchmove", touchMove);
+			const closeAutoFocus = new Event("closeAutoFocus", { cancelable: true });
+			props.onCloseAutoFocus?.(closeAutoFocus);
+			if (closeAutoFocus.defaultPrevented || interactedOutside || !wasTop) return;
+			const target = untrack(() => context.trigger) ?? previous;
+			queueMicrotask(() => {
+				if (target instanceof HTMLElement && target.isConnected) target.focus({ preventScroll: true });
+			});
+		};
+	}, { ssrSource: "client" });
+}
+// src/create-position.ts
+function createPosition(context) {
+	createEffect(() => ({
+		element: context.content,
+		modal: context.modal,
+		nested: context.props.nested === true,
+		noBodyStyles: context.props.noBodyStyles === true,
+		open: context.isOpen,
+		preventScrollRestoration: context.props.preventScrollRestoration === true
+	}), ({ element, open, modal, noBodyStyles, nested, preventScrollRestoration }) => {
+		if (!element || !open || !modal || noBodyStyles || nested) return;
+		const doc = element.ownerDocument;
+		const view = doc.defaultView;
+		if (!view || !isSafari(view) || view.matchMedia("(display-mode: standalone)").matches) return;
+		const { scrollX, scrollY } = view;
+		const url = view.location.href;
+		const restore = assignStyle(doc.body, {
+			height: "auto",
+			left: `${-scrollX}px`,
+			position: "fixed",
+			right: "0",
+			top: `${-scrollY}px`
+		});
+		return () => {
+			restore();
+			if (!preventScrollRestoration || url === view.location.href) view.scrollTo(scrollX, scrollY);
+		};
+	}, { ssrSource: "client" });
+	createEffect(() => ({
+		direction: context.direction,
+		element: context.content,
+		fixed: context.props.fixed === true,
+		open: context.isOpen,
+		reposition: context.props.repositionInputs !== false
+	}), ({ element, open, reposition, fixed, direction }) => {
+		if (!element || !open || !reposition || direction !== "bottom") return;
+		const doc = element.ownerDocument;
+		const view = doc.defaultView;
+		const viewport = view?.visualViewport;
+		if (!view || !viewport) return;
+		const { height } = element.style;
+		const { bottom } = element.style;
+		let keyboardOpen = false;
+		const initialHeight = element.getBoundingClientRect().height;
+		const resize = () => {
+			const focused = doc.activeElement;
+			if (!keyboardOpen && (!(focused instanceof HTMLElement) || !element.contains(focused) || !focused.matches("input,textarea,[contenteditable]"))) return;
+			const diff = Math.max(0, view.innerHeight - viewport.height - viewport.offsetTop);
+			keyboardOpen = diff > 60;
+			if (!keyboardOpen) {
+				element.style.height = height;
+				element.style.bottom = bottom;
+				return;
+			}
+			const rect = element.getBoundingClientRect();
+			const available = Math.max(0, viewport.height - Math.max(26, rect.top));
+			element.style.height = `${fixed ? Math.max(0, initialHeight - diff) : available}px`;
+			element.style.bottom = `${diff}px`;
+			if (focused instanceof HTMLElement) focused.scrollIntoView({ block: "nearest" });
+		};
+		viewport.addEventListener("resize", resize);
+		viewport.addEventListener("scroll", resize);
+		return () => {
+			viewport.removeEventListener("resize", resize);
+			viewport.removeEventListener("scroll", resize);
+			element.style.height = height;
+			element.style.bottom = bottom;
+		};
+	}, { ssrSource: "client" });
+}
+// src/drawer.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<h2>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><span data-vaul-handle-hitarea aria-hidden=true>`);
+function Root(props) {
+	const context = createDrawer(props);
+	createBackground(context);
+	createPosition(context);
+	return createComponent(DrawerContext, {
+		value: context,
+		get children() {
+			return props.children;
+		}
+	});
+}
+function NestedRoot(props) {
+	const parent = useContext(DrawerContext);
+	const context = createDrawer(merge(props, { nested: true }), parent);
+	createPosition(context);
+	return createComponent(DrawerContext, {
+		value: context,
+		get children() {
+			return props.children;
+		}
+	});
+}
+function Portal(props) {
+	const context = useContext(DrawerContext);
+	const [mounted, setMounted] = createSignal(false);
+	onSettled(() => {
+		setMounted(true);
+	});
+	return createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return !!mounted();
+			})() ? context.present || props.forceMount === true : mounted();
+		},
+		get children() {
+			return createComponent(Portal$1, {
+				get mount() {
+					return props.container ?? context.props.container ?? document.body;
+				},
+				get children() {
+					return createComponent(PortalContext, {
+						get value() {
+							return props.forceMount ?? false;
+						},
+						get children() {
+							return props.children;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function Trigger(props) {
+	const context = useContext(DrawerContext);
+	const attributes = merge(omit(props, "render", "ref", "onClick"), {
+		"aria-controls": context.contentId,
+		get "aria-expanded"() {
+			return context.isOpen ? "true" : "false";
+		},
+		"aria-haspopup": "dialog",
+		get "data-state"() {
+			return context.isOpen ? "open" : "closed";
+		},
+		onClick(event) {
+			callHandler(props.onClick, event);
+			if (!event.defaultPrevented) context.setOpen(!context.isOpen);
+		},
+		get ref() {
+			return [props.ref, (element) => {
+				context.setTrigger(element);
+			}];
+		},
+		get type() {
+			return props.type ?? "button";
+		}
+	});
+	return createComponent(Show, {
+		get when() {
+			return props.render;
+		},
+		keyed: true,
+		get fallback() {
+			var _el$ = getNextElement(_tmpl$);
+			spread(_el$, attributes, false);
+			runHydrationEvents();
+			return _el$;
+		},
+		children: (render) => render(attributes)
+	});
+}
+function Close(props) {
+	const context = useContext(DrawerContext);
+	const attributes = merge(omit(props, "render", "onClick"), {
+		onClick(event) {
+			callHandler(props.onClick, event);
+			if (!event.defaultPrevented) context.close();
+		},
+		get type() {
+			return props.type ?? "button";
+		}
+	});
+	return createComponent(Show, {
+		get when() {
+			return props.render;
+		},
+		keyed: true,
+		get fallback() {
+			var _el$2 = getNextElement(_tmpl$);
+			spread(_el$2, attributes, false);
+			runHydrationEvents();
+			return _el$2;
+		},
+		children: (render) => render(attributes)
+	});
+}
+function Overlay(props) {
+	const context = useContext(DrawerContext);
+	const forceMount = useContext(PortalContext);
+	return createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return !!context.modal;
+			})() ? context.present || props.forceMount === true || forceMount : context.modal;
+		},
+		get children() {
+			return createComponent(OverlayElement, props);
+		}
+	});
+}
+function OverlayElement(props) {
+	const context = useContext(DrawerContext);
+	const rest = omit(props, "forceMount", "ref");
+	onSettled(() => () => {
+		context.setOverlay(null);
+	});
+	var _el$3 = getNextElement(_tmpl$2);
+	spread(_el$3, [rest, {
+		"data-vaul-overlay": "",
+		get "data-state"() {
+			return context.isOpen ? "open" : "closed";
+		},
+		get "data-vaul-snap-points"() {
+			return (context.props.snapPoints?.length ?? 0) > 0 ? "true" : "false";
+		},
+		get "data-vaul-snap-points-overlay"() {
+			return context.shouldFade ? "true" : "false";
+		},
+		get "data-vaul-animate"() {
+			return context.shouldAnimate ? "true" : "false";
+		}
+	}], false);
+	ref(() => {
+		return [props.ref, (element) => {
+			context.setOverlay(element);
+		}];
+	}, _el$3);
+	runHydrationEvents();
+	return _el$3;
+}
+function Content(props) {
+	const context = useContext(DrawerContext);
+	const forceMount = useContext(PortalContext);
+	return createComponent(Show, {
+		get when() {
+			return context.present || props.forceMount === true || forceMount;
+		},
+		get children() {
+			return createComponent(ContentElement, props);
+		}
+	});
+}
+function ContentElement(props) {
+	const context = useContext(DrawerContext);
+	const rest = omit(props, "forceMount", "ref", "onOpenAutoFocus", "onCloseAutoFocus", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onInteractOutside", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture");
+	createLayer(context, props);
+	onSettled(() => () => {
+		context.setContent(null);
+	});
+	return createComponent(FocusScope, {
+		get contain() {
+			return memo(() => {
+				return !!(context.isOpen && context.modal);
+			})() ? !context.childOpen : context.isOpen && context.modal;
+		},
+		get children() {
+			var _el$4 = getNextElement(_tmpl$2);
+			spread(_el$4, [
+				{
+					get id() {
+						return context.contentId;
+					},
+					role: "dialog",
+					get "aria-modal"() {
+						return context.modal ? "true" : void 0;
+					},
+					get "aria-labelledby"() {
+						return context.titleId;
+					},
+					get "aria-describedby"() {
+						return context.descriptionId;
+					},
+					tabindex: -1
+				},
+				rest,
+				{
+					get "data-state"() {
+						return context.isOpen ? "open" : "closed";
+					},
+					"data-vaul-drawer": "",
+					get "data-vaul-drawer-direction"() {
+						return context.direction;
+					},
+					get "data-vaul-custom-container"() {
+						return context.props.container ? "true" : "false";
+					},
+					get "data-vaul-snap-points"() {
+						return (context.props.snapPoints?.length ?? 0) > 0 ? "true" : "false";
+					},
+					get "data-vaul-delayed-snap-points"() {
+						return context.snapPointsOffset.length > 0 ? "true" : "false";
+					},
+					get "data-vaul-handle-only"() {
+						return context.props.handleOnly === true ? "true" : "false";
+					},
+					get "data-vaul-animate"() {
+						return context.shouldAnimate ? "true" : "false";
+					},
+					onPointerDown: (event) => {
+						callHandler(props.onPointerDown, event);
+						context.press(event);
+					},
+					onPointerMove: (event) => {
+						callHandler(props.onPointerMove, event);
+						if (!event.defaultPrevented) context.drag(event);
+					},
+					onPointerUp: (event) => {
+						callHandler(props.onPointerUp, event);
+						context.release(event);
+					},
+					onPointerCancel: (event) => {
+						callHandler(props.onPointerCancel, event);
+						context.cancelDrag();
+					},
+					onLostPointerCapture: (event) => {
+						callHandler(props.onLostPointerCapture, event);
+						context.cancelDrag();
+					}
+				}
+			], false);
+			ref(() => {
+				return [props.ref, (element) => {
+					context.setContent(element);
+				}];
+			}, _el$4);
+			runHydrationEvents();
+			return _el$4;
+		}
+	});
+}
+function Title(props) {
+	const context = useContext(DrawerContext);
+	var _el$5 = getNextElement(_tmpl$3);
+	spread(_el$5, [{ get id() {
+		return context.titleId;
+	} }, props], false);
+	runHydrationEvents();
+	return _el$5;
+}
+function Description(props) {
+	const context = useContext(DrawerContext);
+	var _el$6 = getNextElement(_tmpl$4);
+	spread(_el$6, [{ get id() {
+		return context.descriptionId;
+	} }, props], false);
+	runHydrationEvents();
+	return _el$6;
+}
+function Handle(props) {
+	const context = useContext(DrawerContext);
+	const rest = omit(props, "preventCycle", "children", "onClick", "onPointerDown", "onPointerMove", "onPointerCancel");
+	let pressTime = 0;
+	let pressPosition = {
+		x: 0,
+		y: 0
+	};
+	let moved = false;
+	let lastClick = -Infinity;
+	function cycle() {
+		if (props.preventCycle === true || moved || Date.now() - pressTime > 250 || Date.now() - lastClick < 120) return;
+		lastClick = Date.now();
+		const points = context.props.snapPoints;
+		if (!points || points.length === 0) {
+			context.close();
+			return;
+		}
+		const next = points[context.activeSnapPointIndex + 1];
+		if (next !== void 0) context.setActiveSnapPoint(next);
+		else if (context.dismissible) context.close();
+		else context.setActiveSnapPoint(points[0] ?? null);
+	}
+	var _el$7 = getNextElement(_tmpl$5);
+	var _el$8 = _el$7.firstChild;
+	spread(_el$7, [rest, {
+		"data-vaul-handle": "",
+		"aria-hidden": "true",
+		get "data-vaul-drawer-visible"() {
+			return context.isOpen ? "true" : "false";
+		},
+		onClick: (event) => {
+			callHandler(props.onClick, event);
+			if (!event.defaultPrevented) cycle();
+		},
+		onPointerDown: (event) => {
+			callHandler(props.onPointerDown, event);
+			if (event.defaultPrevented) return;
+			pressTime = Date.now();
+			pressPosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			moved = false;
+			context.press(event, true);
+			event.stopPropagation();
+		},
+		onPointerMove: (event) => {
+			callHandler(props.onPointerMove, event);
+			if (Math.abs(event.clientX - pressPosition.x) > 2 || Math.abs(event.clientY - pressPosition.y) > 2) moved = true;
+		},
+		onPointerCancel: (event) => {
+			callHandler(props.onPointerCancel, event);
+			moved = true;
+			context.cancelDrag();
+		}
+	}], true);
+	insert(_el$8, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$7;
+}
+function callHandler(handler, event) {
+	if (typeof handler === "function") handler(event);
+	else if (handler) handler[0](handler[1], event);
+}
+// src/index.ts
+const Drawer = {
+	Close,
+	Content,
+	Description,
+	Handle,
+	NestedRoot,
+	Overlay,
+	Portal,
+	Root,
+	Title,
+	Trigger
+};
+export { Close, Content, Description, Drawer, Handle, NestedRoot, Overlay, Portal, Root, Title, Trigger };
+
+//# sourceMappingURL=index.js.map