@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/sheet.js

@@ -0,0 +1,982 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Sheet.tsx.
+ * Modified for Solid Aria: adapted components, contexts, refs, and reactive properties for Solid 2; measures rendered CSS snap lengths, tracks page offsets, preserves native scrolling, defers focus until entry, and settles handle gestures on release.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef, createRenderProps, createSlottedContext, dom } from "./utils.js";
+import { ButtonContext } from "./button.js";
+import { OverlayTriggerStateContext } from "./overlay-contexts.js";
+import { Dialog, DialogTrigger } from "./dialog.js";
+import { InternalModalContext, ModalOverlay } from "./modal.js";
+import { createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, ref, scope, setAttribute, setStyleProperty, style, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { For, createContext, createEffect, createMemo, createSignal, createUniqueId, merge, omit, onSettled, untrack, useContext } from "solid-js";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { DismissButton } from "@solid2-aria/core/overlays/dismiss-button";
+import { createOverlayTriggerState } from "@solid2-aria/stately/overlays/create-overlay-trigger-state";
+import { PressResponder } from "@solid2-aria/core/interactions/press-responder";
+// src/sheet.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-sheet-scroll><!$><!/><!$><!/><div data-sheet-stage style=display:flex;height:100dvh;position:absolute;width:100dvw></div><!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-sheet-detents>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-sheet-snap style=position:absolute>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-sheet-detent>`);
+const registries = /* @__PURE__ */ new WeakMap();
+const SheetContext = createContext(null);
+function swipeConfig(direction) {
+	const axis = [
+		"top",
+		"bottom",
+		"vertical"
+	].includes(direction) ? "y" : "x";
+	const before = [
+		"top",
+		"left",
+		"vertical",
+		"horizontal"
+	].includes(direction);
+	const after = [
+		"bottom",
+		"right",
+		"vertical",
+		"horizontal"
+	].includes(direction);
+	let viewDirection = "normal";
+	let viewRange = "entry";
+	if (before && after) {
+		viewDirection = "alternate";
+		viewRange = "cover";
+	} else if (before) {
+		viewDirection = "reverse";
+		viewRange = "exit";
+	}
+	return {
+		after,
+		axis,
+		before,
+		containerOffset: before && !after ? -100 : 0,
+		enteredScroll: before && !after ? 0 : 100,
+		maxScroll: (Number(before) + Number(after)) * 100,
+		viewDirection,
+		viewIterations: before && after ? 2 : 1,
+		viewRange
+	};
+}
+function resolveDirection(value, direction) {
+	if (value === "start") return direction === "rtl" ? "right" : "left";
+	if (value === "end") return direction === "rtl" ? "left" : "right";
+	return value;
+}
+function registerSheet(doc, entry, notify) {
+	let registry = registries.get(doc);
+	if (!registry) {
+		registry = {
+			entries: [],
+			listeners: /* @__PURE__ */ new Set(),
+			previousScope: doc.documentElement.style.getPropertyValue("timeline-scope"),
+			registrations: /* @__PURE__ */ new Map()
+		};
+		registries.set(doc, registry);
+	}
+	const current = registry;
+	const update = () => {
+		notify(current.entries);
+	};
+	current.listeners.add(update);
+	const count = current.registrations.get(entry.id) ?? 0;
+	current.registrations.set(entry.id, count + 1);
+	if (!count) current.entries = [...current.entries, entry];
+	const emit = () => {
+		const names = current.entries.map((_, i) => `--sheet-timeline-${i}`);
+		doc.documentElement.style.setProperty("timeline-scope", [current.previousScope, ...names].filter(Boolean).join(", "));
+		for (const listener of current.listeners) listener();
+	};
+	emit();
+	return () => {
+		current.listeners.delete(update);
+		const remaining = (current.registrations.get(entry.id) ?? 1) - 1;
+		if (remaining) current.registrations.set(entry.id, remaining);
+		else {
+			current.registrations.delete(entry.id);
+			current.entries = current.entries.filter((value) => value.id !== entry.id);
+		}
+		emit();
+		if (!current.entries.length) {
+			if (current.previousScope) doc.documentElement.style.setProperty("timeline-scope", current.previousScope);
+			else doc.documentElement.style.removeProperty("timeline-scope");
+			registries.delete(doc);
+		}
+	};
+}
+function SheetTrigger(props) {
+	return createComponent(DialogTrigger, mergeProps(props, { get children() {
+		return createComponent(SheetTriggerContent, { get children() {
+			return props.children;
+		} });
+	} }));
+}
+function SheetTriggerContent(props) {
+	const button = createSlottedContext(ButtonContext);
+	return createComponent(ButtonContext, {
+		get value() {
+			return mergeProps$1(button ?? {}, { isPressed: false });
+		},
+		get children() {
+			return createComponent(PressResponder, {
+				isPressed: false,
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	});
+}
+function SheetOverlay(props) {
+	const locale = createLocale();
+	const trigger = useContext(OverlayTriggerStateContext);
+	const local = createOverlayTriggerState(props);
+	const selected = () => props.isOpen !== void 0 || props.defaultOpen !== void 0 || !trigger ? local : trigger;
+	const state = {
+		close: () => {
+			selected().close();
+		},
+		get isOpen() {
+			return selected().isOpen;
+		},
+		open: () => {
+			selected().open();
+		},
+		get point() {
+			return selected().point;
+		},
+		setOpen: (value) => {
+			selected().setOpen(value);
+		},
+		setPoint: (point) => {
+			selected().setPoint(point);
+		},
+		toggle: () => {
+			selected().toggle();
+		}
+	};
+	const [expanded, setExpanded] = createSignal(false, { ownedWrite: true });
+	const [stack, setStack] = createSignal([], { ownedWrite: true });
+	const id = createUniqueId();
+	const position = () => resolveDirection(props.position ?? "bottom", locale.direction);
+	const swipe = () => {
+		if (props.swipeDirection !== void 0) return resolveDirection(props.swipeDirection, locale.direction);
+		const resolved = position();
+		return resolved === "center" ? "vertical" : resolved;
+	};
+	const index = () => Math.max(0, stack().findIndex((entry) => entry.id === id));
+	const values = {
+		get hasDescendants() {
+			return stack().length > index() + 1;
+		},
+		isEntering: false,
+		isExiting: false,
+		get isExpanded() {
+			return expanded();
+		},
+		get position() {
+			return position();
+		},
+		get stackIndex() {
+			return index();
+		},
+		state,
+		get swipeDirection() {
+			return swipe();
+		}
+	};
+	const context = {
+		get descendants() {
+			return stack().slice(index() + 1);
+		},
+		get entry() {
+			return stack()[index()];
+		},
+		props,
+		register(element, visual) {
+			const config = swipeConfig(swipe());
+			return registerSheet(element.ownerDocument, {
+				direction: config.viewDirection,
+				get height() {
+					return visual.height;
+				},
+				id,
+				get isSwiping() {
+					return visual.isSwiping;
+				},
+				iterations: config.viewIterations,
+				range: config.viewRange,
+				get swipeProgress() {
+					return visual.swipeProgress;
+				}
+			}, (entries) => {
+				setStack(entries);
+			});
+		},
+		setExpanded(value) {
+			setExpanded(value);
+		},
+		values
+	};
+	const fullValues = (modal) => mergeProps$1(values, modal);
+	return createComponent(ModalOverlay, mergeProps(() => {
+		return omit(props, "children", "class", "style", "render", "position", "swipeDirection", "snapPoints", "preventDismissal");
+	}, {
+		get isOpen() {
+			return state.isOpen;
+		},
+		defaultOpen: void 0,
+		get onOpenChange() {
+			return state.setOpen;
+		},
+		get isDismissable() {
+			return props.preventDismissal !== true;
+		},
+		get isKeyboardDismissDisabled() {
+			return props.preventDismissal;
+		},
+		UNSTABLE_overrideFocus: true,
+		class: (modal) => {
+			const value = props.class;
+			return (typeof value === "function" ? value(mergeProps$1(fullValues(modal), { defaultClass: "solid2-aria-SheetOverlay" })) : value) ?? "solid2-aria-SheetOverlay";
+		},
+		style: (modal) => {
+			return {
+				"--sheet-scroll-padding-x": "calc(100vw - var(--visual-viewport-width))",
+				"--sheet-scroll-padding-y": "calc(100dvh - var(--visual-viewport-height))",
+				height: "max(var(--page-height), 100dvh)",
+				left: 0,
+				overflow: "clip",
+				position: "absolute",
+				top: 0,
+				width: "max(var(--page-width), 100vw)",
+				...objectStyle(typeof props.style === "function" ? props.style(mergeProps$1(fullValues(modal), { defaultStyle: {} })) : props.style)
+			};
+		}
+	}, () => {
+		return sheetData(values);
+	}, {
+		get render() {
+			return props.render ? (domProps, modal) => props.render?.(mergeProps$1(domProps, sheetData(fullValues(modal))), fullValues(modal)) : void 0;
+		},
+		get children() {
+			return createComponent(SheetOverlayContent, { context });
+		}
+	}));
+}
+function SheetOverlayContent(props) {
+	const modalContext = useContext(InternalModalContext);
+	if (!modalContext) throw new Error("SheetOverlay requires ModalOverlay");
+	const modal = modalContext.values;
+	const values = mergeProps$1(merge(() => props.context.values), modal);
+	const context = mergeProps$1(merge(() => props.context), { values });
+	return createComponent(SheetContext, {
+		value: context,
+		get children() {
+			return createComponent(SheetOverlayChildren, {
+				get values() {
+					return context.values;
+				},
+				get children() {
+					return props.context.props.children;
+				}
+			});
+		}
+	});
+}
+function SheetOverlayChildren(props) {
+	const content = createMemo(() => {
+		const supplied = props.children;
+		return typeof supplied === "function" && supplied.length > 0 ? supplied(mergeProps$1(merge(() => props.values ?? {}), { defaultChildren: void 0 })) : supplied;
+	});
+	return memo(content);
+}
+function sheetData(values) {
+	return {
+		get "data-entering"() {
+			return values.isEntering || void 0;
+		},
+		get "data-exiting"() {
+			return values.isExiting || void 0;
+		},
+		get "data-expanded"() {
+			return values.isExpanded || void 0;
+		},
+		get "data-has-descendants"() {
+			return values.hasDescendants || void 0;
+		},
+		get "data-position"() {
+			return values.position;
+		},
+		get "data-stack-index"() {
+			return values.stackIndex;
+		},
+		get "data-swipe-direction"() {
+			return values.swipeDirection;
+		}
+	};
+}
+function viewTimelineSupported() {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("animation-timeline: view()");
+}
+function toLength(point) {
+	return typeof point === "number" ? `${point}px` : point;
+}
+function swipeAnimation(props, context) {
+	if (props.swipeAnimation === void 0 || props.swipeAnimation.length === 0) return {};
+	const config = swipeConfig(context.values.swipeDirection);
+	if (viewTimelineSupported()) {
+		let start = props.swipeAnimationRange?.start === void 0 ? "0%" : toLength(context.props.snapPoints?.[props.swipeAnimationRange.start] ?? "0%");
+		let end = props.swipeAnimationRange?.end === void 0 ? "100%" : toLength(context.props.snapPoints?.[props.swipeAnimationRange.end] ?? "100%");
+		if (context.values.swipeDirection === "top" || context.values.swipeDirection === "left") {
+			const previous = start;
+			start = `calc(100% - ${end})`;
+			end = `calc(100% - ${previous})`;
+		}
+		return {
+			"animation-composition": "replace",
+			"animation-direction": config.viewDirection,
+			"animation-fill-mode": "both",
+			"animation-iteration-count": config.viewIterations,
+			"animation-name": props.swipeAnimation,
+			"animation-range": `${config.viewRange} ${start} ${config.viewRange} ${end}`,
+			"animation-timeline": `--sheet-timeline-${context.values.stackIndex}`,
+			"animation-timing-function": "linear"
+		};
+	}
+	return context.values.isEntering || context.values.isExiting ? {
+		"animation-composition": "replace",
+		"animation-direction": context.values.isExiting ? "reverse" : "normal",
+		"animation-duration": "300ms",
+		"animation-fill-mode": "both",
+		"animation-iteration-count": 1,
+		"animation-name": props.swipeAnimation,
+		"animation-timing-function": "linear"
+	} : {};
+}
+function objectStyle(value) {
+	return typeof value === "object" ? value : {};
+}
+function parseCSSNumber(value) {
+	return Number.parseFloat(value);
+}
+function resolveLength(point, size, element) {
+	if (typeof point === "number") return point;
+	const numeric = parseCSSNumber(point);
+	if (!Number.isFinite(numeric)) return size;
+	if (point.endsWith("%")) return size * numeric / 100;
+	if (/(?:d|s|l)?vh$/u.test(point)) return window.innerHeight * numeric / 100;
+	if (/(?:d|s|l)?vw$/u.test(point)) return window.innerWidth * numeric / 100;
+	if (point.endsWith("rem")) return numeric * (parseCSSNumber(getComputedStyle(document.documentElement).fontSize) || 16);
+	if (point.endsWith("em")) return numeric * (parseCSSNumber(getComputedStyle(element).fontSize) || 16);
+	return numeric;
+}
+function canScroll(target, sheet, axis, delta) {
+	let element = target instanceof HTMLElement ? target : null;
+	while (element && element !== sheet) {
+		const style = getComputedStyle(element);
+		const overflow = axis === "y" ? style.overflowY : style.overflowX;
+		const size = axis === "y" ? element.scrollHeight - element.clientHeight : element.scrollWidth - element.clientWidth;
+		const position = axis === "y" ? element.scrollTop : element.scrollLeft;
+		if (size > 0 && /(?:auto|scroll)/u.test(overflow) && (delta > 0 && position > 0 || delta < 0 && position < size)) return true;
+		element = element.parentElement;
+	}
+	return false;
+}
+function Sheet(props) {
+	const context = useContext(SheetContext);
+	if (!context) throw new Error("Sheet requires SheetOverlay");
+	const [ref$1, setRef] = createSignal(null, { ownedWrite: true });
+	const locale = createLocale();
+	const modalContext = useContext(InternalModalContext);
+	if (!modalContext) throw new Error("Sheet requires ModalOverlay");
+	let scroller;
+	const [pageOffset, setPageOffset] = createSignal({
+		x: typeof window === "undefined" ? 0 : window.scrollX,
+		y: typeof window === "undefined" ? 0 : window.scrollY
+	}, { ownedWrite: true });
+	const [geometry, setGeometry] = createSignal({
+		points: [],
+		size: 0,
+		viewport: 0
+	}, { ownedWrite: true });
+	const [scroll, setScroll] = createSignal(0, { ownedWrite: true });
+	const [isDragging, setDragging] = createSignal(false, { ownedWrite: true });
+	const config = () => swipeConfig(context.values.swipeDirection);
+	const points = () => {
+		const { points: measured, size } = geometry();
+		const element = ref$1();
+		const configured = context.props.snapPoints;
+		const configuredPoints = configured !== void 0 && configured.length > 0 ? configured : [size];
+		return element ? configuredPoints.map((point, index) => Math.max(0, Math.min(size, measured[index] ?? resolveLength(point, size, element)))) : [size];
+	};
+	const smallest = () => Math.min(...points());
+	const clamped = () => context.props.preventDismissal === true && !context.values.isEntering && !context.values.isExiting;
+	const travel = () => Math.max(1, geometry().size - smallest());
+	const stageStart = () => {
+		if (clamped() && config().after) return config().before ? 1 : travel();
+		return geometry().viewport;
+	};
+	const entered = () => config().before && !config().after ? 0 : stageStart();
+	const visible = () => Math.max(0, geometry().size - Math.abs(scroll() - entered()));
+	const scrollForPoint = (point) => entered() + (config().after ? -1 : 1) * (geometry().size - point);
+	const setPosition = (value) => {
+		if (!scroller) return;
+		const conf = config();
+		let lower = 0;
+		let upper = geometry().viewport * (conf.maxScroll / 100);
+		if (clamped()) {
+			const dual = conf.before === conf.after;
+			lower = dual ? entered() - 1 : 0;
+			upper = dual ? entered() + 1 : travel();
+		}
+		const position = Math.max(lower, Math.min(upper, value));
+		if (conf.axis === "y") scroller.scrollTop = position;
+		else scroller.scrollLeft = position;
+		setScroll(position);
+	};
+	let initialized = false;
+	let lastInitial = "";
+	let previousEntered = 0;
+	const measure = () => {
+		const element = ref$1();
+		if (!element || !scroller) return;
+		const conf = config();
+		const rect = element.getBoundingClientRect();
+		const total = conf.axis === "y" ? element.offsetHeight || rect.height : element.offsetWidth || rect.width;
+		let padding = 0;
+		if (props.overscrollPadding === true && context.values.position === context.values.swipeDirection) padding = conf.axis === "y" ? window.innerHeight : window.innerWidth;
+		const size = Math.max(0, total - padding);
+		const edges = conf.axis === "y" ? ["top", "bottom"] : ["left", "right"];
+		const edge = conf.after ? edges[0] : edges[1];
+		const markers = element.querySelectorAll("[data-sheet-detent]");
+		const configured = context.props.snapPoints ?? [];
+		const measured = Array.from(markers, (marker, index) => {
+			const length = getComputedStyle(marker)[edge];
+			const value = length.endsWith("px") ? parseCSSNumber(length) : NaN;
+			return Number.isFinite(value) ? value : resolveLength(configured[index] ?? size, size, element);
+		});
+		setGeometry({
+			points: measured,
+			size,
+			viewport: conf.axis === "y" ? window.innerHeight : window.innerWidth
+		});
+	};
+	const updatePageOffset = () => {
+		setPageOffset({
+			x: window.scrollX,
+			y: window.scrollY
+		});
+	};
+	onSettled(() => {
+		untrack(measure);
+		const element = untrack(ref$1);
+		if (element?.isConnected !== true) return;
+		const unregister = context.register(element, {
+			get height() {
+				geometry();
+				return element.offsetHeight;
+			},
+			get isSwiping() {
+				return isDragging();
+			},
+			get swipeProgress() {
+				const offsets = points().map((point) => geometry().size - point).toSorted((a, b) => a - b);
+				const minimum = offsets[0] ?? 0;
+				const range = offsets.length > 1 ? (offsets[1] ?? 0) - minimum : geometry().size;
+				return Math.max(0, Math.min(1, (geometry().size - visible() - minimum) / (range || 1)));
+			}
+		});
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		window.addEventListener("resize", measure);
+		window.addEventListener("scroll", updatePageOffset, { passive: true });
+		return () => {
+			unregister();
+			observer.disconnect();
+			window.removeEventListener("resize", measure);
+			window.removeEventListener("scroll", updatePageOffset);
+		};
+	});
+	createEffect(() => ({
+		axis: config().axis,
+		points: context.props.snapPoints?.join(" ")
+	}), () => {
+		untrack(measure);
+	}, { ssrSource: "client" });
+	createEffect(() => {
+		const conf = config();
+		const { size, viewport } = geometry();
+		const start = entered();
+		const isClamped = clamped();
+		const dual = conf.before === conf.after;
+		let upper = viewport * (conf.maxScroll / 100);
+		if (isClamped) upper = dual ? start + 1 : travel();
+		return {
+			axis: conf.axis,
+			direction: context.values.swipeDirection,
+			entered: start,
+			initial: scrollForPoint(points()[0] ?? size),
+			lower: isClamped && dual ? start - 1 : 0,
+			points: context.props.snapPoints?.join(" "),
+			scroll: untrack(scroll),
+			size,
+			upper,
+			viewport
+		};
+	}, (next) => {
+		if (!next.size || !next.viewport || !scroller) return;
+		const initialKey = `${next.direction}:${next.points ?? ""}`;
+		const target = !initialized || initialKey !== lastInitial ? next.initial : next.scroll + next.entered - previousEntered;
+		const position = Math.max(next.lower, Math.min(next.upper, target));
+		if (next.axis === "y") scroller.scrollTop = position;
+		else scroller.scrollLeft = position;
+		setScroll(position);
+		initialized = true;
+		lastInitial = initialKey;
+		previousEntered = next.entered;
+	});
+	const setExpanded = untrack(() => context.setExpanded);
+	createEffect(() => ({
+		size: geometry().size,
+		visible: visible()
+	}), (next) => {
+		setExpanded(next.size > 0 && next.visible >= next.size - 1);
+	});
+	const finish = () => {
+		if (!initialized) return;
+		const { size } = geometry();
+		const amount = visible();
+		const minimum = smallest();
+		if (context.props.preventDismissal !== true && amount < minimum / 2) {
+			context.values.state.close();
+			return;
+		}
+		let nearest = minimum;
+		for (const point of points()) if (Math.abs(point - amount) < Math.abs(nearest - amount)) nearest = point;
+		let side = config().after ? -1 : 1;
+		if (config().before && config().after && scroll() > entered()) side = 1;
+		setPosition(entered() + side * (size - nearest));
+	};
+	let gesture;
+	const onDown = (event) => {
+		if (event.button !== 0 || context.values.hasDescendants || event.pointerType === "touch" && (!(event.target instanceof Element) || !event.target.closest("[data-sheet-drag-handle]")) || !initialized) return;
+		gesture = {
+			coordinate: config().axis === "y" ? event.clientY : event.clientX,
+			dragged: false,
+			id: event.pointerId,
+			scroll: scroll(),
+			target: event.target
+		};
+	};
+	const onUp = (event) => {
+		if (gesture?.id !== event.pointerId) return;
+		const { dragged } = gesture;
+		gesture = void 0;
+		if (dragged) finish();
+		setDragging(false);
+	};
+	const onCancel = () => {
+		if (gesture) {
+			gesture = void 0;
+			finish();
+			setDragging(false);
+		}
+	};
+	onSettled(() => {
+		const element = untrack(ref$1);
+		if (element?.isConnected !== true) return;
+		modalContext.setModalRef(element);
+		const onMove = (event) => {
+			if (!gesture || event.pointerId !== gesture.id) return;
+			const delta = (config().axis === "y" ? event.clientY : event.clientX) - gesture.coordinate;
+			if (!gesture.dragged && Math.abs(delta) < 6) return;
+			if (!gesture.dragged && canScroll(gesture.target, element, config().axis, delta)) {
+				gesture = void 0;
+				return;
+			}
+			gesture.dragged = true;
+			setDragging(true);
+			element.setPointerCapture?.(event.pointerId);
+			event.preventDefault();
+			setPosition(gesture.scroll - delta);
+		};
+		element.addEventListener("pointerdown", onDown);
+		const doc = element.ownerDocument;
+		doc.addEventListener("pointermove", onMove);
+		doc.addEventListener("pointerup", onUp);
+		doc.addEventListener("pointercancel", onCancel);
+		return () => {
+			element.removeEventListener("pointerdown", onDown);
+			doc.removeEventListener("pointermove", onMove);
+			doc.removeEventListener("pointerup", onUp);
+			doc.removeEventListener("pointercancel", onCancel);
+		};
+	});
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-Sheet",
+		get values() {
+			return context.values;
+		}
+	}));
+	const sheetStyle = () => {
+		const frontmost = context.descendants.at(-1);
+		const own = {
+			"--sheet-descendant-count": context.descendants.length,
+			"--sheet-frontmost-height": `${frontmost?.height ?? 0}px`,
+			"--sheet-swipe-progress": frontmost?.swipeProgress ?? context.entry?.swipeProgress ?? 0,
+			direction: locale.direction,
+			position: "relative",
+			...swipeAnimation(props, context)
+		};
+		if (props.overscrollPadding === true && context.values.position === context.values.swipeDirection) {
+			const amount = config().axis === "y" ? "100vh" : "100vw";
+			const { position } = context.values;
+			if (position === "bottom") {
+				own["padding-bottom"] = amount;
+				own["margin-bottom"] = `-${amount}`;
+			} else if (position === "top") {
+				own["padding-top"] = amount;
+				own["margin-top"] = `-${amount}`;
+			} else if (position === "left") {
+				own["padding-left"] = amount;
+				own["margin-left"] = `-${amount}`;
+			} else if (position === "right") {
+				own["padding-right"] = amount;
+				own["margin-right"] = `-${amount}`;
+			}
+		}
+		if (props.stackAnimation !== void 0 && props.stackAnimation.length > 0 && viewTimelineSupported() && context.descendants.length) {
+			const { descendants } = context;
+			own["animation-name"] = [own["animation-name"], ...descendants.map(() => props.stackAnimation)].filter(Boolean).join(", ");
+			own["animation-timeline"] = [own["animation-timeline"], ...descendants.map((_, i) => `--sheet-timeline-${context.values.stackIndex + 1 + i}`)].filter(Boolean).join(", ");
+			own["animation-direction"] = [own["animation-direction"], ...descendants.map((entry) => entry.direction)].filter(Boolean).join(", ");
+			own["animation-iteration-count"] = [own["animation-iteration-count"], ...descendants.map((entry) => entry.iterations)].filter(Boolean).join(", ");
+			own["animation-range"] = [own["animation-range"], ...descendants.map((entry) => entry.range)].filter(Boolean).join(", ");
+			own["animation-fill-mode"] = [own["animation-fill-mode"], ...descendants.map(() => "both")].filter(Boolean).join(", ");
+			own["animation-composition"] = [own["animation-composition"], ...descendants.map(() => "accumulate")].filter(Boolean).join(", ");
+			own["animation-timing-function"] = [own["animation-timing-function"], ...descendants.map(() => "linear")].filter(Boolean).join(", ");
+		}
+		return Object.assign(own, objectStyle(render.style));
+	};
+	const alignment = {
+		bottom: ["center", "flex-end"],
+		center: ["center", "center"],
+		left: ["flex-start", "center"],
+		right: ["flex-end", "center"],
+		top: ["center", "flex-start"]
+	};
+	const viewport = () => config().axis === "y" ? "100dvh" : "100dvw";
+	const endMarker = () => {
+		if (clamped() && config().before) return config().after ? `calc(${stageStart()}px + ${viewport()} + 1px)` : `calc(${travel()}px + ${viewport()})`;
+		return `calc(${stageStart()}px + ${viewport()}${config().before && config().after ? ` + ${viewport()}` : ""})`;
+	};
+	const scrollerStyle = () => ({
+		direction: "ltr",
+		height: config().axis === "y" ? "200dvh" : "100dvh",
+		left: config().axis === "x" ? `calc(${pageOffset().x}px + ${config().containerOffset}dvw)` : `${pageOffset().x}px`,
+		"overflow-x": config().axis === "x" ? "auto" : "hidden",
+		"overflow-y": config().axis === "y" ? "auto" : "hidden",
+		"overscroll-behavior-x": config().axis === "x" ? "contain" : "none",
+		"overscroll-behavior-y": config().axis === "y" ? "contain" : "none",
+		position: "absolute",
+		"scroll-snap-type": context.values.isEntering || context.values.isExiting || isDragging() ? "none" : `${config().axis} mandatory`,
+		"scrollbar-width": "none",
+		top: config().axis === "y" ? `calc(${pageOffset().y}px + ${config().containerOffset}dvh)` : `${pageOffset().y}px`,
+		width: config().axis === "x" ? "200dvw" : "100dvw"
+	});
+	const detentStyle = () => {
+		const style = {
+			inset: 0,
+			"pointer-events": "none",
+			position: "absolute"
+		};
+		if (props.overscrollPadding === true && context.values.position === context.values.swipeDirection) {
+			const { position } = context.values;
+			style[position] = config().axis === "y" ? "100vh" : "100vw";
+		}
+		return style;
+	};
+	var _el$ = getNextElement(_tmpl$);
+	var _el$2 = _el$.firstChild;
+	var [_el$3, _el$4] = getNextMarker(_el$2.nextSibling);
+	var _el$5 = _el$3.nextSibling;
+	var [_el$6, _el$7] = getNextMarker(_el$5.nextSibling);
+	var _el$8 = _el$6.nextSibling;
+	var _el$9 = _el$8.nextSibling;
+	var [_el$10, _el$11] = getNextMarker(_el$9.nextSibling);
+	_el$.addEventListener("scrollend", () => {
+		if (!gesture) finish();
+	});
+	_el$.addEventListener("scroll", () => {
+		if (!scroller) return;
+		const position = config().axis === "y" ? scroller.scrollTop : scroller.scrollLeft;
+		if (context.props.preventDismissal === true && initialized) setPosition(position);
+		else setScroll(position);
+	});
+	ref(() => {
+		return (element) => {
+			scroller = element;
+		};
+	}, _el$);
+	insert(_el$, createComponent(SnapPoint, {
+		point: 0,
+		get align() {
+			return clamped() && config().after ? "none" : "start";
+		},
+		get axis() {
+			return config().axis;
+		}
+	}), _el$3, _el$4);
+	insert(_el$, scope((() => {
+		var _c$ = memo(() => {
+			return !!(config().before && config().after);
+		});
+		return () => {
+			return _c$() ? createComponent(SnapPoint, {
+				get point() {
+					return stageStart();
+				},
+				align: "start",
+				get axis() {
+					return config().axis;
+				}
+			}) : config().before && config().after;
+		};
+	})()), _el$6, _el$7);
+	insert(_el$8, createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => modalContext.modalProps ?? {}), omit(render, "children"), sheetData(context.values));
+	}, {
+		ref: [
+			(element) => {
+				modalContext.setModalRef(element);
+			},
+			(element) => {
+				setRef(element);
+			},
+			(element) => {
+				assignRef(untrack(() => props.ref), element);
+			}
+		],
+		get style() {
+			return sheetStyle();
+		},
+		get "data-swiping"() {
+			return isDragging() || void 0;
+		},
+		get "data-descendants-swiping"() {
+			return context.descendants.some((entry) => entry.isSwiping) || void 0;
+		},
+		get children() {
+			return [
+				memo(() => {
+					return memo(() => {
+						return modalContext.isDismissable === true;
+					})() && createComponent(DismissButton, { get onDismiss() {
+						return context.values.state.close;
+					} });
+				}),
+				memo(() => {
+					return memo(() => {
+						return !!context.props.snapPoints;
+					})() ? (() => {
+						var _el$12 = getNextElement(_tmpl$2);
+						insert(_el$12, createComponent(For, {
+							get each() {
+								return context.props.snapPoints;
+							},
+							children: (point, index) => createComponent(DetentPoint, {
+								point,
+								get axis() {
+									return config().axis;
+								},
+								get after() {
+									return config().after;
+								},
+								get isInitial() {
+									return index() === 0;
+								}
+							})
+						}));
+						effect(() => readShallow(detentStyle()), (_v$, _$p) => {
+							style(_el$12, _v$, _$p);
+						});
+						return _el$12;
+					})() : context.props.snapPoints;
+				}),
+				createComponent(SheetOverlayChildren, {
+					get values() {
+						return context.values;
+					},
+					get children() {
+						return props.children;
+					}
+				}),
+				createComponent(DismissButton, { get onDismiss() {
+					return context.values.state.close;
+				} })
+			];
+		}
+	})));
+	insert(_el$, createComponent(SnapPoint, {
+		get point() {
+			return endMarker();
+		},
+		get align() {
+			return clamped() && config().before ? "none" : "end";
+		},
+		get axis() {
+			return config().axis;
+		}
+	}), _el$10, _el$11);
+	effect(() => {
+		return {
+			e: readShallow(scrollerStyle()),
+			t: config().axis === "y" ? alignment[context.values.position][0] : alignment[context.values.position][1],
+			a: config().axis === "y" ? "column" : "row",
+			o: config().axis === "y" ? alignment[context.values.position][1] : alignment[context.values.position][0],
+			i: config().axis === "x" ? `${stageStart()}px` : 0,
+			n: config().axis === "y" ? `${stageStart()}px` : 0
+		};
+	}, ({ e, t, a, o, i, n }, _p$) => {
+		style(_el$, e, _p$?.e);
+		t !== _p$?.t && setStyleProperty(_el$8, "align-items", t);
+		a !== _p$?.a && setStyleProperty(_el$8, "flex-direction", a);
+		o !== _p$?.o && setStyleProperty(_el$8, "justify-content", o);
+		i !== _p$?.i && setStyleProperty(_el$8, "left", i);
+		n !== _p$?.n && setStyleProperty(_el$8, "top", n);
+	});
+	return _el$;
+}
+function SnapPoint(props) {
+	var _el$13 = getNextElement(_tmpl$3);
+	effect(() => {
+		return {
+			e: props.axis === "y" ? "100dvh" : "1px",
+			t: props.axis === "x" ? toLength(props.point) : 0,
+			a: props.align,
+			o: props.axis === "y" ? toLength(props.point) : 0,
+			i: props.axis === "x" ? "100dvw" : "1px"
+		};
+	}, ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setStyleProperty(_el$13, "height", e);
+		t !== _p$?.t && setStyleProperty(_el$13, "left", t);
+		a !== _p$?.a && setStyleProperty(_el$13, "scroll-snap-align", a);
+		o !== _p$?.o && setStyleProperty(_el$13, "top", o);
+		i !== _p$?.i && setStyleProperty(_el$13, "width", i);
+	});
+	return _el$13;
+}
+function DetentPoint(props) {
+	const style$1 = () => {
+		const detent = {
+			height: "1px",
+			"pointer-events": "none",
+			position: "absolute",
+			"scroll-snap-align": props.after ? "start" : "end",
+			width: "1px"
+		};
+		if (props.axis === "y") {
+			detent.left = 0;
+			if (props.after) {
+				detent.top = toLength(props.point);
+				detent["scroll-margin-top"] = "100dvh";
+			} else {
+				detent.bottom = toLength(props.point);
+				detent["scroll-margin-bottom"] = "100dvh";
+			}
+		} else {
+			detent.top = 0;
+			if (props.after) {
+				detent.left = toLength(props.point);
+				detent["scroll-margin-left"] = "100dvw";
+			} else {
+				detent.right = toLength(props.point);
+				detent["scroll-margin-right"] = "100dvw";
+			}
+		}
+		return detent;
+	};
+	var _el$14 = getNextElement(_tmpl$4);
+	effect(() => {
+		return {
+			e: props.isInitial || void 0,
+			t: readShallow(style$1())
+		};
+	}, ({ e, t }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$14, "data-sheet-initial", e);
+		style(_el$14, t, _p$?.t);
+	});
+	return _el$14;
+}
+function SheetBackdrop(props) {
+	const context = useContext(SheetContext);
+	if (!context) throw new Error("SheetBackdrop requires SheetOverlay");
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-SheetBackdrop",
+		get defaultStyle() {
+			return {
+				"--sheet-swipe-progress": context.entry?.swipeProgress ?? 0,
+				inset: 0,
+				position: "absolute",
+				...swipeAnimation(props, context)
+			};
+		},
+		get values() {
+			return context.values;
+		}
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, sheetData(context.values), {
+			onClick() {
+				if (context.props.preventDismissal !== true && !context.values.hasDescendants) context.values.state.close();
+			},
+			get ref() {
+				return props.ref;
+			}
+		});
+	}));
+}
+function SheetContent(props) {
+	const context = useContext(SheetContext);
+	if (!context) throw new Error("SheetContent requires SheetOverlay");
+	const config = () => swipeConfig(context.values.swipeDirection);
+	const viewport = () => config().axis === "y" ? "100dvh" : "100dvw";
+	return createComponent(Dialog, mergeProps(props, {
+		get isEntering() {
+			return context.values.isEntering;
+		},
+		"data-sheet-content": true,
+		get "class"() {
+			return props.class ?? "solid2-aria-SheetContent";
+		},
+		style: (values) => {
+			return {
+				...objectStyle(typeof props.style === "function" ? props.style(values) : props.style),
+				height: "100%",
+				"view-timeline-axis": config().axis,
+				"view-timeline-inset": config().before && !config().after ? `${viewport()} 0` : `0 ${viewport()}`,
+				"view-timeline-name": `--sheet-timeline-${context.values.stackIndex}`,
+				width: "100%"
+			};
+		}
+	}));
+}
+export { Sheet, SheetBackdrop, SheetContent, SheetOverlay, SheetTrigger };
+
+//# sourceMappingURL=sheet.js.map