solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/{createCollapsiblePanel-DTyVJz0G.js → createCollapsiblePanel-B45kTe6v.js}

@@ -1,4 +1,4 @@
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
 import { createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
 //#region src/collapsible/root/createCollapsibleTransitionStatus.ts
 /** Adds an idle phase and a frame boundary before Collapsible exit styles apply. */

package/dist/lib/server/{createFocusInteraction-EIS0QOel.js → createFocusInteraction-DFKr4G7a.js}

@@ -1,7 +1,7 @@
 import { j as triggerFocus } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
-import { n as contains, p as ownerDocument, t as activeElement } from "./dom-Crg_2R-j.js";
-import { onCleanup } from "solid-js";
+import { h as ownerWindow, m as ownerDocument, n as contains, t as activeElement } from "./dom-D8_aB1yy.js";
+import { createEffect, onCleanup } from "solid-js";
 //#region src/internals/overlay/createFocusInteraction.ts
 function matchesFocusVisible(element) {
 	try {
@@ -15,6 +15,7 @@ function createFocusInteraction(options) {
 	let closeTimer;
 	let blockFocus = false;
 	let blockedReference = null;
+	let focusedReference = null;
 	const unsubscribe = options.context.context.events.on("openchange", (details) => {
 		if (!details.open && (details.reason === "escape-key" || details.reason === "trigger-press")) {
 			blockFocus = true;
@@ -28,10 +29,27 @@ function createFocusInteraction(options) {
 		clearTimeout(closeTimer);
 	});
 	const enabled = () => options.enabled?.() ?? true;
+	createEffect(() => ({
+		enabled: enabled(),
+		reference: options.context.track().domReferenceElement
+	}), (state) => {
+		if (!state.enabled) return;
+		const windowNode = ownerWindow(state.reference);
+		const onWindowBlur = () => {
+			const reference = focusedReference ?? options.context.state.domReferenceElement;
+			if (!options.context.state.open && reference === activeElement(ownerDocument(reference))) {
+				blockFocus = true;
+				blockedReference = reference;
+			}
+		};
+		windowNode.addEventListener("blur", onWindowBlur);
+		return () => windowNode.removeEventListener("blur", onWindowBlur);
+	});
 	return {
 		onFocus(event) {
 			if (!enabled()) return;
 			const trigger = event.currentTarget;
+			focusedReference = trigger;
 			if (blockFocus && blockedReference !== trigger) {
 				blockFocus = false;
 				blockedReference = null;
@@ -42,10 +60,12 @@ function createFocusInteraction(options) {
 			const delay = options.context.state.open ? 0 : options.delay?.() ?? 0;
 			clearTimeout(openTimer);
 			openTimer = setTimeout(() => {
+				if (!enabled() || blockFocus && blockedReference === trigger) return;
 				options.context.setOpen(true, createChangeEventDetails(triggerFocus, event, trigger));
 			}, delay);
 		},
 		onBlur(event) {
+			focusedReference = null;
 			clearTimeout(openTimer);
 			clearTimeout(closeTimer);
 			if (blockedReference === event.currentTarget) {

package/dist/lib/server/createLabelableId-WMUKtY6s.js

@@ -0,0 +1,18 @@
+import { r as useLabelableContext } from "./LabelableContext-BTeF0IWb.js";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/internals/labelable-provider/createLabelableId.ts
+/** Keep the server label/control pair associated until explicit IDs register on the client. */
+function createLabelableId(id, fallback, enabled = () => true) {
+	const context = useLabelableContext();
+	const source = Symbol("LabelableId");
+	createEffect(() => ({
+		id: id(),
+		enabled: enabled()
+	}), (current) => {
+		context.registerControlId(source, current.enabled ? current.id === void 0 ? context.defaultControlId ?? fallback : current.id : void 0);
+	});
+	onCleanup(() => context.registerControlId(source, void 0));
+	return () => (enabled() ? context.controlId() : void 0) ?? id() ?? fallback;
+}
+//#endregion
+export { createLabelableId as t };

package/dist/lib/server/{createPopupAutoResize-DO50jjNX.js → createPopupAutoResize-Cg0-lLf4.js}

@@ -1,5 +1,5 @@
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
-import { c as isHTMLElement, m as ownerWindow } from "./dom-Crg_2R-j.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
+import { h as ownerWindow, l as isHTMLElement } from "./dom-D8_aB1yy.js";
 import { createEffect, untrack } from "solid-js";
 //#region src/internals/overlay/createPopupAutoResize.ts
 function getCssDimensions(element) {

package/dist/lib/server/{createTransitionStatus-BTlrerSS.js → createTransitionStatus-184v7j3-.js}

@@ -1,9 +1,9 @@
 import { createEffect, createSignal, untrack } from "solid-js";
 //#region src/internals/createTransitionStatus.ts
 /** Tracks mount retention and CSS starting/ending states for a visibility accessor. */
-function createTransitionStatus(open) {
+function createTransitionStatus(open, animateInitialOpen = false) {
 	const [mounted, setMounted] = createSignal(untrack(open), { ownedWrite: true });
-	const [transitionStatus, setTransitionStatus] = createSignal(void 0, { ownedWrite: true });
+	const [transitionStatus, setTransitionStatus] = createSignal(untrack(open) && animateInitialOpen ? "starting" : void 0, { ownedWrite: true });
 	createEffect(() => ({
 		open: open(),
 		mounted: mounted(),

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

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
-import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, n as createDialogHandle, o as DialogPortal, p as DialogRoot, r as DialogViewport, t as DialogHandle } from "../DialogHandle-ATZlm9RC.js";
-import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-BebI-w5P.js";
+import { a as DialogTitle, c as DialogDescription, i as DialogTrigger, l as DialogClose, n as createDialogHandle, o as DialogPortal, p as DialogRoot, r as DialogViewport, t as DialogHandle } from "../DialogHandle-BGIISmG7.js";
+import { n as DialogBackdrop, t as DialogPopup } from "../DialogPopup-C2ZDGf42.js";
 //#region src/dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => DialogBackdrop,

package/dist/lib/server/{dom-Crg_2R-j.js → dom-D8_aB1yy.js}

@@ -25,6 +25,19 @@ function contains(parent, child) {
 function getEventTarget(event) {
 	return event.composedPath?.()[0] ?? event.target;
 }
+/** Solid RC.6 Portal exposes a live logical parent through each inserted root's _$host. */
+function containsWithPortals(parent, child) {
+	if (!parent || !child?.nodeType) return false;
+	if (parent.contains(child)) return true;
+	let current = child;
+	const visited = /* @__PURE__ */ new Set();
+	while (current && !visited.has(current)) {
+		if (current === parent) return true;
+		visited.add(current);
+		current = current._$host || current.parentNode || (isShadowRoot(current) ? current.host : null);
+	}
+	return false;
+}
 function isEventTargetWithin(event, node) {
 	if (!node) return false;
 	const path = event.composedPath?.();
@@ -64,4 +77,4 @@ function isTypeableCombobox(element) {
 	return element?.getAttribute("role") === "combobox" && isTypeableElement(element);
 }
 //#endregion
-export { isElement as a, isHTMLElement as c, isTypeableCombobox as d, isTypeableElement as f, getFloatingFocusElement as i, isInteractiveElement as l, ownerWindow as m, contains as n, isElementVisible as o, ownerDocument as p, getEventTarget as r, isEventTargetWithin as s, activeElement as t, isShadowRoot as u };
+export { getFloatingFocusElement as a, isEventTargetWithin as c, isShadowRoot as d, isTypeableCombobox as f, ownerWindow as h, getEventTarget as i, isHTMLElement as l, ownerDocument as m, contains as n, isElement as o, isTypeableElement as p, containsWithPortals as r, isElementVisible as s, activeElement as t, isInteractiveElement as u };

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

@@ -1,20 +1,21 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { a as closeWatcher, k as swipe } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { TransitionStatusDataAttributes } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { a as isElement, c as isHTMLElement, l as isInteractiveElement, m as ownerWindow, n as contains, p as ownerDocument, r as getEventTarget, t as activeElement } from "../dom-Crg_2R-j.js";
-import { n as createTriggerRegistration } from "../PopupStore-DEs3FAEe.js";
-import { r as popupTransitionStateMapping, t as CommonPopupDataAttributes } from "../popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
-import { a as DialogTitle, c as DialogDescription, d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, s as useDialogPortalContext, t as DialogHandle } from "../DialogHandle-ATZlm9RC.js";
-import { n as getComposedParentNode, t as findScrollableTouchTarget } from "../scrollable-CjsSxbGr.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { h as ownerWindow, i as getEventTarget, l as isHTMLElement, m as ownerDocument, n as contains, o as isElement, t as activeElement, u as isInteractiveElement } from "../dom-D8_aB1yy.js";
+import { n as createTriggerRegistration } from "../PopupStore-evylvVnN.js";
+import { r as popupTransitionStateMapping, t as CommonPopupDataAttributes } from "../popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "../FocusManager-D-xgblGs.js";
+import { a as DialogTitle, c as DialogDescription, d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, i as DialogTrigger, l as DialogClose, m as renderDialogRoot, o as DialogPortal, r as DialogViewport, s as useDialogPortalContext, t as DialogHandle } from "../DialogHandle-BGIISmG7.js";
+import { n as getComposedParentNode, t as findScrollableTouchTarget } from "../scrollable-C9Pgq8T5.js";
 import { t as isAndroid } from "../platform-DYukKUir.js";
-import { a as getElementTransform, i as getDisplacement, o as getElementAtPoint, r as createSwipeDismiss, s as clamp, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-9H__9xbS.js";
-import { Dynamic, mergeProps, ssrElement } from "@solidjs/web";
-import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, untrack, useContext } from "solid-js";
+import { a as getElementTransform, i as getDisplacement, o as getElementAtPoint, r as createSwipeDismiss, s as clamp, t as BASE_UI_SWIPE_IGNORE_SELECTOR } from "../constants-ByqXubhO.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/drawer/popup/DrawerPopupCssVars.ts
 var DrawerPopupCssVars = /* @__PURE__ */ function(DrawerPopupCssVars) {
 	/**
@@ -70,11 +71,12 @@ var DrawerBackdropCssVars = /* @__PURE__ */ function(DrawerBackdropCssVars) {
 function DrawerBackdrop(props) {
 	const context = useDialogRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "forceRender", "ref", "style");
+	const others = omit(props, "render", "class", "forceRender", "ref", "style");
 	const state = createMemo(() => ({
 		open: context.store.open(),
 		transitionStatus: context.presence.transitionStatus()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({
 		"pointer-events": context.store.open() ? void 0 : "none",
@@ -90,10 +92,7 @@ function DrawerBackdrop(props) {
 		onCleanup(() => {
 			if (context.backdropElement() === backdropElement) context.setBackdropElement(null);
 		});
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "div";
-			},
+		return Render(mergeProps({
 			ref: [((element) => {
 				backdropElement = element;
 				context.setBackdropElement(element);
@@ -131,16 +130,12 @@ var DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";
 function DrawerContent(props) {
 	useDialogRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
-		ref: [internalProps.ref]
-	}, { [DRAWER_CONTENT_ATTRIBUTE]: "" }, {
+	return Render(mergeProps({ ref: [internalProps.ref] }, { [DRAWER_CONTENT_ATTRIBUTE]: "" }, {
 		get ["class"]() {
 			return classValue();
 		},
@@ -199,23 +194,12 @@ var drawerIndentStateAttributesMapping = { active: (value) => value ? ACTIVE : I
 function DrawerIndentBackground(props) {
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = () => ({ active: provider?.active() ?? false });
 	const classValue = () => resolveClass(props.class, state());
 	const styleValue = () => resolveStyle(props.style, state());
 	const stateAttributes = () => getStateAttributesProps(state(), drawerIndentStateAttributesMapping);
-	const component = untrack(() => props.as);
-	return component === void 0 ? ssrElement("div", () => {
-		return mergeProps({
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true) : Dynamic(mergeProps({
-		component,
+	return useRender(props, state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -234,7 +218,7 @@ function DrawerIndentBackground(props) {
 function DrawerIndent(props) {
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = () => ({ active: provider?.active() ?? false });
 	const classValue = () => resolveClass(props.class, state());
 	const styleValue = () => mergeDialogStyles({ [DrawerBackdropCssVars.swipeProgress]: "0" }, resolveStyle(props.style, state()));
@@ -243,18 +227,7 @@ function DrawerIndent(props) {
 	const indentRef = [((element) => {
 		indentElement = element;
 	}), internalProps.ref];
-	const component = untrack(() => props.as);
-	const element = component === void 0 ? ssrElement("div", () => {
-		return mergeProps({
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others);
-	}, void 0, true) : Dynamic(mergeProps({
-		component,
+	const element = useRender(props, state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: indentRef,
 		get ["class"]() {
 			return classValue();
@@ -511,7 +484,7 @@ function DrawerPopup(props) {
 	const swipe = useDrawerViewportContext();
 	const snap = createDrawerSnapPoints();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
+	const others = omit(props, "render", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
 	const nestedDrawerOpen = createMemo(() => context.nestedOpenDrawerCount() > 0);
 	const swiping = createMemo(() => swipe?.swiping() ?? false);
 	let popupElement = null;
@@ -529,10 +502,12 @@ function DrawerPopup(props) {
 		measuredPopupHeight = offsetHeight;
 		drawer.onPopupHeightChange(offsetHeight);
 	}
+	const lifecycleElement = createMemo(() => context.store.track().popupElement);
+	const lifecycleOpen = createMemo(() => context.store.open());
 	createEffect(() => ({
 		mounted: context.presence.mounted(),
 		nestedDrawerOpen: nestedDrawerOpen(),
-		element: context.store.track().popupElement
+		element: lifecycleElement()
 	}), (state) => {
 		if (!state.mounted) {
 			measuredPopupHeight = 0;
@@ -547,7 +522,7 @@ function DrawerPopup(props) {
 		resizeObserver.observe(state.element);
 		return () => resizeObserver.disconnect();
 	});
-	createEffect(() => context.store.track().popupElement, (element) => {
+	createEffect(lifecycleElement, (element) => {
 		function syncNestedSwipeProgress() {
 			if (!element) return;
 			const progress = drawer.nestedSwipeProgressStore.getSnapshot();
@@ -561,7 +536,7 @@ function DrawerPopup(props) {
 		};
 	});
 	createEffect(() => ({
-		open: context.store.open(),
+		open: lifecycleOpen(),
 		frontmostHeight: drawer.frontmostHeight()
 	}), (state) => {
 		if (!state.open) return;
@@ -569,7 +544,7 @@ function DrawerPopup(props) {
 		return () => drawer.notifyParentFrontmostHeight?.(0);
 	});
 	createEffect(() => ({
-		open: context.store.open(),
+		open: lifecycleOpen(),
 		transitionStatus: context.presence.transitionStatus()
 	}), (state) => {
 		if (!drawer.notifyParentHasNestedDrawer) return;
@@ -586,6 +561,7 @@ function DrawerPopup(props) {
 		swipeDirection: drawer.swipeDirection(),
 		swiping: swiping()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping$1));
 	const snapPointOffsetValue = createMemo(() => {
@@ -630,7 +606,7 @@ function DrawerPopup(props) {
 	});
 	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
 	const initialFocus = createMemo(() => internalProps.initialFocus ?? (() => context.store.state.popupElement));
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
 	createEffect(() => id(), (currentId) => {
@@ -639,10 +615,7 @@ function DrawerPopup(props) {
 	onCleanup(() => {
 		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
 	});
-	const popup = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const popup = Render(mergeProps({
 		ref: [((element) => {
 			popupElement = element;
 			context.store.setPopupElement(element);
@@ -935,7 +908,7 @@ function DrawerSwipeArea(props) {
 	const drawer = useDrawerRootContext();
 	const provider = useDrawerProviderContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "disabled", "id", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style", "swipeDirection");
+	const others = omit(props, "render", "class", "disabled", "id", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "ref", "style", "swipeDirection");
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const disabled = createMemo(() => internalProps.disabled ?? false);
@@ -956,7 +929,17 @@ function DrawerSwipeArea(props) {
 	const resolvedSwipeDirection = createMemo(() => internalProps.swipeDirection ?? oppositeSwipeDirection[drawer.swipeDirection()]);
 	const dismissDirection = createMemo(() => oppositeSwipeDirection[resolvedSwipeDirection()]);
 	const enabled = createMemo(() => !disabled() && (!store.open() || swipeActive()));
-	createTriggerRegistration(() => store, id, swipeAreaElement);
+	const [registrationReady, setRegistrationReady] = createSignal(false, { ownedWrite: true });
+	onSettled(() => {
+		let disposed = false;
+		queueMicrotask(() => {
+			if (!disposed) setRegistrationReady(true);
+		});
+		return () => {
+			disposed = true;
+		};
+	});
+	createTriggerRegistration(() => store, id, () => registrationReady() ? swipeAreaElement() : null);
 	function resetDragDelta() {
 		dragDelta.x = 0;
 		dragDelta.y = 0;
@@ -1152,37 +1135,35 @@ function DrawerSwipeArea(props) {
 		swipeDirection: resolvedSwipeDirection(),
 		disabled: disabled()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeDialogStyles({
 		"pointer-events": enabled() ? void 0 : "none",
 		"touch-action": resolveTouchAction(resolvedSwipeDirection())
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => {
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), (event) => {
 		if (event.pointerType === "touch") return;
 		swipe$2.pointerHandlers.onPointerDown(event);
 		if (event.cancelable) event.preventDefault();
 	});
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => (event) => {
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), (event) => {
 		if (event.pointerType === "touch") return;
 		swipe$2.pointerHandlers.onPointerMove(event);
 	});
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => (event) => {
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), (event) => {
 		if (event.pointerType === "touch") return;
 		swipe$2.pointerHandlers.onPointerUp(event);
 	});
-	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => (event) => {
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => internalProps.onPointerCancel), (event) => {
 		if (event.pointerType === "touch") return;
 		swipe$2.pointerHandlers.onPointerCancel(event);
 	});
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => (event) => swipe$2.touchHandlers.onTouchStart(event));
-	const onTouchMove = composeEventHandlers(() => internalProps.onTouchMove, () => (event) => swipe$2.touchHandlers.onTouchMove(event));
-	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => (event) => swipe$2.touchHandlers.onTouchEnd(event));
-	const onTouchCancel = composeEventHandlers(() => internalProps.onTouchCancel, () => (event) => swipe$2.touchHandlers.onTouchCancel(event));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), (event) => swipe$2.touchHandlers.onTouchStart(event));
+	const onTouchMove = composeEventHandlers(liveEventHandler(() => internalProps.onTouchMove), (event) => swipe$2.touchHandlers.onTouchMove(event));
+	const onTouchEnd = composeEventHandlers(liveEventHandler(() => internalProps.onTouchEnd), (event) => swipe$2.touchHandlers.onTouchEnd(event));
+	const onTouchCancel = composeEventHandlers(liveEventHandler(() => internalProps.onTouchCancel), (event) => swipe$2.touchHandlers.onTouchCancel(event));
+	return Render(mergeProps({
 		ref: [((element) => setSwipeAreaElement(element)), internalProps.ref],
 		get id() {
 			return id();
@@ -1366,7 +1347,7 @@ function DrawerViewport(props) {
 			return true;
 		},
 		onProgress(progress, details) {
-			updateNestedSwipeActive(details);
+			if (swipingNow) updateNestedSwipeActive(details);
 			const points = drawer.snapPoints();
 			const hasSnapPoints = Boolean(points && points.length > 0);
 			if (swipingNow && swipeDirection() === "down" && hasSnapPoints && details) {
@@ -1382,13 +1363,17 @@ function DrawerViewport(props) {
 			if (range && popupHeight > 0) {
 				const baseOffset = snap.activeSnapPointOffset() ?? range.minOffset;
 				const offsetToProgress = (nextOffset) => clamp((nextOffset - range.minOffset) / range.range, 0, 1);
-				if (details && Number.isFinite(details.deltaY)) resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
+				if (swipingNow && details && Number.isFinite(details.deltaY)) resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
 				else {
 					const progressFromSnapPoint = snapPointProgress();
 					if (progressFromSnapPoint !== null) resolvedProgress = progressFromSnapPoint;
 				}
 			}
-			applySwipeProgress(resolvedProgress, true, true);
+			if (!swipingNow) {
+				drawer.notifyParentSwipeProgressChange?.(0);
+				finishNestedSwipe();
+			}
+			applySwipeProgress(resolvedProgress, true, swipingNow);
 		},
 		onRelease({ event, deltaX, deltaY, direction, velocityX, velocityY, releaseVelocityX, releaseVelocityY }) {
 			const popupElement = store.state.popupElement;
@@ -1453,9 +1438,21 @@ function DrawerViewport(props) {
 			const velocityOffset = Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -4, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
 			const targetOffset = drawer.snapToSequentialPoints() ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
 			const snapPointEventDetails = createChangeEventDetails(swipe, event);
-			const closeFromSnapPoints = () => {
-				pendingSwipeCloseSnapPoint = snap.activeSnapPoint();
+			const settleInPlace = () => {
+				applySwipeProgress(0, true, true);
+				clearSwipeRelease();
+				return false;
+			};
+			const settleOnSnapPoint = (point) => {
+				drawer.setActiveSnapPoint(point.value, snapPointEventDetails);
+				return settleInPlace();
+			};
+			const closeFromSnapPoints = (fallback) => {
+				if (!direction) return settleOnSnapPoint(fallback);
+				const previousSnapPoint = snap.activeSnapPoint();
 				drawer.setActiveSnapPoint(null, snapPointEventDetails);
+				if (snapPointEventDetails.isCanceled) return settleInPlace();
+				pendingSwipeCloseSnapPoint = previousSnapPoint;
 				startSwipeRelease(currentSwipeDirection);
 				return true;
 			};
@@ -1475,19 +1472,16 @@ function DrawerViewport(props) {
 							targetSnapPoint = adjacentPoint;
 							effectiveTargetOffset = adjacentPoint.offset;
 						}
-					} else if (dragDirection > 0) return closeFromSnapPoints();
+					} else if (dragDirection > 0) return closeFromSnapPoints(targetSnapPoint);
 				}
-				if (Math.abs(effectiveTargetOffset - popupHeight) < Math.abs(effectiveTargetOffset - targetSnapPoint.offset)) return closeFromSnapPoints();
-				drawer.setActiveSnapPoint(targetSnapPoint.value, snapPointEventDetails);
-				clearSwipeRelease();
-				return false;
+				if (Math.abs(effectiveTargetOffset - popupHeight) < Math.abs(effectiveTargetOffset - targetSnapPoint.offset)) return closeFromSnapPoints(targetSnapPoint);
+				return settleOnSnapPoint(targetSnapPoint);
 			}
-			if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) return closeFromSnapPoints();
 			const closestSnapPoint = resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map((point) => point.offset), targetOffset)];
-			if (Math.abs(targetOffset - popupHeight) < Math.abs(targetOffset - closestSnapPoint.offset)) return closeFromSnapPoints();
-			drawer.setActiveSnapPoint(closestSnapPoint.value, snapPointEventDetails);
-			clearSwipeRelease();
-			return false;
+			const closeDistance = Math.abs(targetOffset - popupHeight);
+			if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) return closeFromSnapPoints(closestSnapPoint);
+			if (closeDistance < Math.abs(targetOffset - closestSnapPoint.offset)) return closeFromSnapPoints(closestSnapPoint);
+			return settleOnSnapPoint(closestSnapPoint);
 		},
 		onDismiss(event) {
 			provider?.visualStateStore.set({
@@ -1525,11 +1519,13 @@ function DrawerViewport(props) {
 			setSwipeDismissed(true);
 		}
 	});
+	const lifecycleOpen = createMemo(open);
+	const touchRootElement = createMemo(() => context.viewportElement() ?? store.track().popupElement);
 	createEffect(() => ({
 		mounted: mounted(),
 		nestedDrawerOpen: nestedDrawerOpen(),
-		open: open(),
-		rootElement: context.viewportElement() ?? store.track().popupElement,
+		open: lifecycleOpen(),
+		rootElement: touchRootElement(),
 		axis: scrollAxis(),
 		direction: swipeDirection()
 	}), (state) => {
@@ -1595,13 +1591,13 @@ function DrawerViewport(props) {
 		if (!state.range || state.swiping) return;
 		untrack(() => applySwipeProgress(!state.open || state.nested ? 0 : state.progress ?? 0, true, false));
 	});
-	createEffect(() => open(), (isOpen) => {
+	createEffect(lifecycleOpen, (isOpen) => {
 		if (!drawer.notifyParentSwipeProgressChange) return;
 		if (!isOpen) drawer.notifyParentSwipeProgressChange(0);
 		return () => drawer.notifyParentSwipeProgressChange?.(0);
 	});
-	createEffect(() => open(), (isOpen) => {
-		if (!isOpen) return;
+	createEffect(() => open(), (isOpen, wasOpen) => {
+		if (!isOpen || isOpen === wasOpen) return;
 		untrack(() => {
 			if (!drawer.swipeAreaActive.current) swipe$1.reset();
 			clearSwipeRelease();
@@ -1635,7 +1631,7 @@ function DrawerViewport(props) {
 		lastPointerType = "";
 		return event.pointerType !== "touch";
 	}
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => {
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), (event) => {
 		lastPointerType = event.pointerType;
 		ignoreNextTouchStartFromPen = event.pointerType === "pen";
 		if (!open() || !mounted() || nestedDrawerOpen()) return;
@@ -1645,17 +1641,17 @@ function DrawerViewport(props) {
 		if (event.pointerType === "touch") return;
 		swipe$1.pointerHandlers.onPointerDown(event);
 	});
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => (event) => {
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), (event) => {
 		if (event.pointerType === "touch") return;
 		swipe$1.pointerHandlers.onPointerMove(event);
 	});
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => (event) => {
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), (event) => {
 		if (handlePointerEnd(event)) swipe$1.pointerHandlers.onPointerUp(event);
 	});
-	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => (event) => {
+	const onPointerCancel = composeEventHandlers(liveEventHandler(() => internalProps.onPointerCancel), (event) => {
 		if (handlePointerEnd(event)) swipe$1.pointerHandlers.onPointerCancel(event);
 	});
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => (event) => {
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), (event) => {
 		if (lastPointerType === "pen" && ignoreNextTouchStartFromPen) {
 			ignoreNextTouchStartFromPen = false;
 			resetTouchSwipeState(false);
@@ -1703,12 +1699,12 @@ function DrawerViewport(props) {
 		};
 		swipe$1.touchHandlers.onTouchStart(event);
 	});
-	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => (event) => {
+	const onTouchEnd = composeEventHandlers(liveEventHandler(() => internalProps.onTouchEnd), (event) => {
 		virtualKeyboard?.onTouchEnd(event);
 		resetTouchTrackingState();
 		swipe$1.touchHandlers.onTouchEnd(event);
 	});
-	const onTouchCancel = composeEventHandlers(() => internalProps.onTouchCancel, () => (event) => {
+	const onTouchCancel = composeEventHandlers(liveEventHandler(() => internalProps.onTouchCancel), (event) => {
 		virtualKeyboard?.onTouchCancel();
 		resetTouchTrackingState();
 		swipe$1.touchHandlers.onTouchCancel(event);
@@ -1996,7 +1992,7 @@ function DrawerVirtualKeyboardProvider(props) {
 			restorePreemptedFocus = overrideGeometryDuringFocus(target, (keyboardViewport.top + keyboardViewport.bottom - rect.top - rect.bottom) / 2);
 		}
 		function alignFocusedKeyboardTarget() {
-			keyboardFocusFrame = void 0;
+			cancelKeyboardFocusFrame();
 			consumePreemptedFocus();
 			const target = focusedKeyboardTarget;
 			if (nestedDrawerOpen || !target || !contains(rootElement, target)) {