@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/sheet.js

@@ -0,0 +1,1197 @@
+/*
+ * 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 { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { For, createContext, createEffect, createMemo, createSignal, createUniqueId, merge, omit, onSettled, untrack, useContext } from "solid-js";
+import { escape, memo, mergeProps as mergeProps$1, scope, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperties } from "@solidjs/web";
+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$ = [
+	"<div",
+	" data-sheet-scroll",
+	"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><div data-sheet-stage style=\"",
+	"\">",
+	"</div><!--$-->",
+	"<!--/--></div>"
+];
+var _tmpl$2 = [
+	"<div",
+	" data-sheet-detents",
+	">",
+	"</div>"
+];
+var _tmpl$3 = [
+	"<div",
+	" data-sheet-snap style=\"",
+	"\"></div>"
+];
+var _tmpl$4 = [
+	"<div",
+	" data-sheet-detent",
+	"",
+	"></div>"
+];
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _m$5 = Symbol();
+var _m$6 = Symbol();
+var _m$7 = Symbol();
+var _d$ = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p) {
+	this[_m$] = _p;
+	Object.defineProperty(this, "children", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		const props = this[_m$];
+		return SheetTriggerContent(new _P$(props));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p2) {
+	this[_m$] = _p2;
+	Object.defineProperty(this, "children", _d$2);
+}
+_P$2.prototype = Object.prototype;
+var _d$3 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p3, _p4) {
+	this[_m$] = _p3;
+	this.isPressed = _p4;
+	Object.defineProperty(this, "children", _d$3);
+}
+_P$3.prototype = Object.prototype;
+var _d$4 = {
+	get() {
+		const button = this[_m$];
+		return mergeProps(button ?? {}, { isPressed: false });
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		const props = this[_m$2];
+		return PressResponder(new _P$3(props, false));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p5, _p6) {
+	this[_m$] = _p5;
+	this[_m$2] = _p6;
+	Object.defineProperty(this, "value", _d$4);
+	Object.defineProperty(this, "children", _d$5);
+}
+_P$4.prototype = Object.prototype;
+var _d$6 = {
+	get() {
+		return this[_m$].isOpen;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$7 = {
+	get() {
+		return this[_m$].setOpen;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$8 = {
+	get() {
+		return this[_m$2].preventDismissal !== true;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$9 = {
+	get() {
+		return this[_m$2].preventDismissal;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p7, _p8, _p9, _p0, _p1, _p10) {
+	this[_m$] = _p7;
+	this[_m$2] = _p8;
+	Object.defineProperty(this, "isOpen", _d$6);
+	this.defaultOpen = _p9;
+	Object.defineProperty(this, "onOpenChange", _d$7);
+	Object.defineProperty(this, "isDismissable", _d$8);
+	Object.defineProperty(this, "isKeyboardDismissDisabled", _d$9);
+	this.UNSTABLE_overrideFocus = _p0;
+	this.class = _p1;
+	this.style = _p10;
+}
+_P$5.prototype = Object.prototype;
+var _d$10 = {
+	get() {
+		const props = this[_m$];
+		const fullValues = this[_m$2];
+		return props.render ? (domProps, modal) => props.render?.(mergeProps(domProps, sheetData(fullValues(modal))), fullValues(modal)) : void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$11 = {
+	get() {
+		const context = this[_m$3];
+		return SheetOverlayContent({ context });
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p11, _p12, _p13) {
+	this[_m$] = _p11;
+	this[_m$2] = _p12;
+	this[_m$3] = _p13;
+	Object.defineProperty(this, "render", _d$10);
+	Object.defineProperty(this, "children", _d$11);
+}
+_P$6.prototype = Object.prototype;
+var _d$12 = {
+	get() {
+		return this[_m$].values;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$13 = {
+	get() {
+		return this[_m$2].context.props.children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p14, _p15) {
+	this[_m$] = _p14;
+	this[_m$2] = _p15;
+	Object.defineProperty(this, "values", _d$12);
+	Object.defineProperty(this, "children", _d$13);
+}
+_P$7.prototype = Object.prototype;
+var _d$14 = {
+	get() {
+		const context = this[_m$];
+		const props = this[_m$2];
+		return SheetOverlayChildren(new _P$7(context, props));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p16, _p17, _p18) {
+	this[_m$] = _p16;
+	this[_m$2] = _p17;
+	this.value = _p18;
+	Object.defineProperty(this, "children", _d$14);
+}
+_P$8.prototype = Object.prototype;
+var _d$15 = {
+	get() {
+		const clamped = this[_m$];
+		const config = this[_m$2];
+		return clamped() && config().after ? "none" : "start";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$16 = {
+	get() {
+		const config = this[_m$2];
+		return config().axis;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p19, _p20, _p21) {
+	this[_m$] = _p19;
+	this[_m$2] = _p20;
+	this.point = _p21;
+	Object.defineProperty(this, "align", _d$15);
+	Object.defineProperty(this, "axis", _d$16);
+}
+_P$9.prototype = Object.prototype;
+var _d$17 = {
+	get() {
+		const stageStart = this[_m$];
+		return stageStart();
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$18 = {
+	get() {
+		const config = this[_m$2];
+		return config().axis;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$10(_p22, _p23, _p24) {
+	this[_m$] = _p22;
+	this[_m$2] = _p23;
+	Object.defineProperty(this, "point", _d$17);
+	this.align = _p24;
+	Object.defineProperty(this, "axis", _d$18);
+}
+_P$10.prototype = Object.prototype;
+var _d$19 = {
+	get() {
+		return this[_m$].values.state.close;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$11(_p25) {
+	this[_m$] = _p25;
+	Object.defineProperty(this, "onDismiss", _d$19);
+}
+_P$11.prototype = Object.prototype;
+var _d$20 = {
+	get() {
+		const config = this[_m$];
+		return config().axis;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$21 = {
+	get() {
+		const config = this[_m$];
+		return config().after;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$22 = {
+	get() {
+		const index = this[_m$2];
+		return index() === 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$12(_p26, _p27, _p28) {
+	this[_m$] = _p26;
+	this[_m$2] = _p27;
+	this.point = _p28;
+	Object.defineProperty(this, "axis", _d$20);
+	Object.defineProperty(this, "after", _d$21);
+	Object.defineProperty(this, "isInitial", _d$22);
+}
+_P$12.prototype = Object.prototype;
+var _d$23 = {
+	get() {
+		return this[_m$].props.snapPoints;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$13(_p29, _p30) {
+	this[_m$] = _p29;
+	Object.defineProperty(this, "each", _d$23);
+	this.children = _p30;
+}
+_P$13.prototype = Object.prototype;
+var _d$24 = {
+	get() {
+		return this[_m$].values;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$25 = {
+	get() {
+		return this[_m$2].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$14(_p31, _p32) {
+	this[_m$] = _p31;
+	this[_m$2] = _p32;
+	Object.defineProperty(this, "values", _d$24);
+	Object.defineProperty(this, "children", _d$25);
+}
+_P$14.prototype = Object.prototype;
+var _d$26 = {
+	get() {
+		return this[_m$].values.state.close;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$15(_p33) {
+	this[_m$] = _p33;
+	Object.defineProperty(this, "onDismiss", _d$26);
+}
+_P$15.prototype = Object.prototype;
+var _d$27 = {
+	get() {
+		const sheetStyle = this[_m$];
+		return sheetStyle();
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$28 = {
+	get() {
+		const isDragging = this[_m$2];
+		return isDragging() || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$29 = {
+	get() {
+		return this[_m$3].descendants.some((entry) => entry.isSwiping) || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$30 = {
+	get() {
+		const modalContext = this[_m$4];
+		const context = this[_m$3];
+		const detentStyle = this[_m$5];
+		const config = this[_m$6];
+		const props = this[_m$7];
+		return [
+			memo(() => {
+				return memo(() => {
+					return modalContext.isDismissable === true;
+				})() && DismissButton(new _P$11(context));
+			}),
+			memo(() => {
+				var _v$9, _v$11, _v$12;
+				return memo(() => {
+					return !!context.props.snapPoints;
+				})() ? (_v$9 = ssrHydrationKey(), _v$11 = () => {
+					return ((_v$10) => _v$10 == null ? "" : ssrAttribute("style", ssrStyle(_v$10)))(detentStyle());
+				}, _v$12 = escape(For(new _P$13(context, (point, index) => DetentPoint(new _P$12(config, index, point))))), ssr(_tmpl$2, _v$9, _v$11, _v$12)) : context.props.snapPoints;
+			}),
+			SheetOverlayChildren(new _P$14(context, props)),
+			DismissButton(new _P$15(context))
+		];
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$16(_p34, _p35, _p36, _p37, _p38, _p39, _p40, _p41) {
+	this[_m$] = _p34;
+	this[_m$2] = _p35;
+	this[_m$3] = _p36;
+	this[_m$4] = _p37;
+	this[_m$5] = _p38;
+	this[_m$6] = _p39;
+	this[_m$7] = _p40;
+	this.ref = _p41;
+	Object.defineProperty(this, "style", _d$27);
+	Object.defineProperty(this, "data-swiping", _d$28);
+	Object.defineProperty(this, "data-descendants-swiping", _d$29);
+	Object.defineProperty(this, "children", _d$30);
+}
+_P$16.prototype = Object.prototype;
+var _d$31 = {
+	get() {
+		const endMarker = this[_m$];
+		return endMarker();
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$32 = {
+	get() {
+		const clamped = this[_m$2];
+		const config = this[_m$3];
+		return clamped() && config().before ? "none" : "end";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$33 = {
+	get() {
+		const config = this[_m$3];
+		return config().axis;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$17(_p42, _p43, _p44) {
+	this[_m$] = _p42;
+	this[_m$2] = _p43;
+	this[_m$3] = _p44;
+	Object.defineProperty(this, "point", _d$31);
+	Object.defineProperty(this, "align", _d$32);
+	Object.defineProperty(this, "axis", _d$33);
+}
+_P$17.prototype = Object.prototype;
+var _d$34 = {
+	get() {
+		return this[_m$].values.isEntering;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$35 = {
+	get() {
+		return this[_m$2].class ?? "solid2-aria-SheetContent";
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$18(_p45, _p46, _p47, _p48) {
+	this[_m$] = _p45;
+	this[_m$2] = _p46;
+	Object.defineProperty(this, "isEntering", _d$34);
+	this["data-sheet-content"] = _p47;
+	Object.defineProperty(this, "class", _d$35);
+	this.style = _p48;
+}
+_P$18.prototype = Object.prototype;
+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 DialogTrigger(mergeProps$1(props, new _P$2(props)));
+}
+function SheetTriggerContent(props) {
+	const button = createSlottedContext(ButtonContext);
+	return ButtonContext(new _P$4(button, props));
+}
+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(values, modal);
+	return ModalOverlay(mergeProps$1(() => {
+		return omit(props, "children", "class", "style", "render", "position", "swipeDirection", "snapPoints", "preventDismissal");
+	}, new _P$5(state, props, void 0, true, (modal) => {
+		const value = props.class;
+		return (typeof value === "function" ? value(mergeProps(fullValues(modal), { defaultClass: "solid2-aria-SheetOverlay" })) : value) ?? "solid2-aria-SheetOverlay";
+	}, (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(fullValues(modal), { defaultStyle: {} })) : props.style)
+		};
+	}), () => {
+		return sheetData(values);
+	}, new _P$6(props, fullValues, context)));
+}
+function SheetOverlayContent(props) {
+	const modalContext = useContext(InternalModalContext);
+	if (!modalContext) throw new Error("SheetOverlay requires ModalOverlay");
+	const modal = modalContext.values;
+	const values = mergeProps(merge(() => props.context.values), modal);
+	const context = mergeProps(merge(() => props.context), { values });
+	return SheetContext(new _P$8(context, props, context));
+}
+function SheetOverlayChildren(props) {
+	const content = createMemo(() => {
+		const supplied = props.children;
+		return typeof supplied === "function" && supplied.length > 0 ? supplied(mergeProps(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, 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();
+		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);
+	let initialized = false;
+	let lastInitial = "";
+	let previousEntered = 0;
+	const measure = () => {
+		ref();
+	};
+	const updatePageOffset = () => {
+		setPageOffset({
+			x: window.scrollX,
+			y: window.scrollY
+		});
+	};
+	onSettled(() => {
+		untrack(measure);
+		const element = untrack(ref);
+		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 || true) 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;
+		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);
+		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();
+			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(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 _v$ = ssrHydrationKey(), _v$3 = () => {
+		return ((_v$2) => _v$2 == null ? "" : ssrAttribute("style", ssrStyle(_v$2)))(scrollerStyle());
+	}, _v$4 = escape(SnapPoint(new _P$9(clamped, config, 0))), _v$5 = scope((() => {
+		var _c$ = memo(() => {
+			return !!(config().before && config().after);
+		});
+		return () => {
+			return _c$() ? escape(SnapPoint(new _P$10(stageStart, config, "start"))) : config().before && escape(config().after);
+		};
+	})()), _v$6 = () => {
+		return ssrStyleProperties("align-items:", config().axis === "y" ? escape(alignment[context.values.position][0], true) : escape(alignment[context.values.position][1], true), "display:", "flex", "flex-direction:", config().axis === "y" ? "column" : "row", "height:", "100dvh", "justify-content:", config().axis === "y" ? escape(alignment[context.values.position][1], true) : escape(alignment[context.values.position][0], true), "left:", config().axis === "x" ? `${escape(stageStart(), true)}px` : 0, "position:", "absolute", "top:", config().axis === "y" ? `${escape(stageStart(), true)}px` : 0, "width:", "100dvw");
+	}, _v$7 = escape(dom.div(mergeProps$1(() => {
+		return mergeProps(filterDOMProps(props, { global: true }), merge(() => modalContext.modalProps ?? {}), omit(render, "children"), sheetData(context.values));
+	}, new _P$16(sheetStyle, isDragging, context, modalContext, detentStyle, config, props, [
+		(element) => {
+			modalContext.setModalRef(element);
+		},
+		(element) => {
+			setRef(element);
+		},
+		(element) => {
+			assignRef(untrack(() => props.ref), element);
+		}
+	])))), _v$8 = escape(SnapPoint(new _P$17(endMarker, clamped, config)));
+	return ssr(_tmpl$, _v$, _v$3, _v$4, _v$5, _v$6, _v$7, _v$8);
+}
+function SnapPoint(props) {
+	var _v$13 = ssrHydrationKey(), _v$14 = () => {
+		return ssrStyleProperties("height:", props.axis === "y" ? "100dvh" : "1px", "left:", props.axis === "x" ? escape(toLength(props.point), true) : 0, "position:", "absolute", "scroll-snap-align:", escape(props.align, true), "top:", props.axis === "y" ? escape(toLength(props.point), true) : 0, "width:", props.axis === "x" ? "100dvw" : "1px");
+	};
+	return ssr(_tmpl$3, _v$13, _v$14);
+}
+function DetentPoint(props) {
+	const style = () => {
+		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 _v$15 = ssrHydrationKey(), _g$ = ssrGroup(() => {
+		return [ssrAttribute("data-sheet-initial", escape(props.isInitial || void 0, true)), ((_v$17) => _v$17 == null ? "" : ssrAttribute("style", ssrStyle(_v$17)))(style())];
+	}, 2);
+	return ssr(_tmpl$4, _v$15, _g$, _g$);
+}
+function SheetBackdrop(props) {
+	const context = useContext(SheetContext);
+	if (!context) throw new Error("SheetBackdrop requires SheetOverlay");
+	const render = createRenderProps(mergeProps(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 dom.div(mergeProps$1(() => {
+		return mergeProps(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 Dialog(mergeProps$1(props, new _P$18(context, props, true, (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