@astryx-vue/core 0.3.0 → 0.4.0

package/dist/{BottomSheet-pt7m4CvC.js → BottomSheet-B4sc3F1S.js}

@@ -1,8 +1,71 @@
-import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-Djw9RUIf.js";
-import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
+import { r as resetLayerScopedContext } from "./scopedProvide-C-Df7c15.js";
+import { a as isImeKeyEvent, i as pushLayer, n as useLayerDepth, r as isTopLayer, t as provideLayerDepth } from "./layerDepth-CNDh-IHb.js";
+import { n as useFocusTrap, r as focusForLastInput, t as useRestoreFocus } from "./useRestoreFocus-XEKs5-gp.js";
+import { t as attachScrollKeyboardDelegation } from "./scrollKeyboardDelegation-D7cumnOl.js";
+import { t as useScrollLock } from "./scrollLock-C3aT4-0z.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toValue, unref, useAttrs, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, openBlock, ref, renderSlot, toValue, unref, useAttrs, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/bottom-sheet.css";
+//#region src/BottomSheet/sheetTransition.ts
+const BACKSTOP_BUFFER_MS = 50;
+function parseTransitionTime(value) {
+	const normalized = value.trim();
+	if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalized)) return null;
+	const time = Number.parseFloat(normalized);
+	return normalized.endsWith("ms") ? time : time * 1e3;
+}
+/** Longest transition duration + delay that applies to `property`, in ms. */
+function transitionMsFor(element, property) {
+	const style = getComputedStyle(element);
+	const properties = (style.transitionProperty || "").split(",").map((value) => value.trim());
+	const durations = (style.transitionDuration || "").split(",").map(parseTransitionTime);
+	const delays = (style.transitionDelay || "").split(",").map((value) => parseTransitionTime(value) ?? 0);
+	return properties.reduce((longest, name, index) => {
+		if (name !== property && name !== "all") return longest;
+		const duration = durations[index % durations.length];
+		if (duration == null) return longest;
+		return Math.max(longest, duration + (delays[index % delays.length] ?? 0));
+	}, 0);
+}
+/**
+* Calls `complete` when `element` finishes transitioning `property`: on the
+* matching `transitionend`/`transitioncancel`, or on a timer backstop so a
+* missed event can never strand the caller. Without a resolved duration — the
+* case in a stylesheet-free test environment — it completes immediately.
+*/
+function waitForTransition(element, property, complete) {
+	if (element == null) {
+		complete();
+		return () => {};
+	}
+	let done = false;
+	let timer = null;
+	let onTransitionEnd = () => {};
+	const finish = () => {
+		if (done) return;
+		done = true;
+		if (timer != null) clearTimeout(timer);
+		element.removeEventListener("transitionend", onTransitionEnd);
+		element.removeEventListener("transitioncancel", onTransitionEnd);
+		complete();
+	};
+	onTransitionEnd = (event) => {
+		if (event.target === element && event.propertyName === property) finish();
+	};
+	const duration = transitionMsFor(element, property);
+	if (duration <= 0) {
+		finish();
+		return () => {};
+	}
+	element.addEventListener("transitionend", onTransitionEnd);
+	element.addEventListener("transitioncancel", onTransitionEnd);
+	timer = setTimeout(finish, duration + BACKSTOP_BUFFER_MS);
+	return () => {
+		if (timer != null) clearTimeout(timer);
+		element.removeEventListener("transitionend", onTransitionEnd);
+		element.removeEventListener("transitioncancel", onTransitionEnd);
+	};
+}
 /** Scrim opacity at the peek stop: dimmed, never clear, because the sheet stays modal. */
 const MIN_PEEK_SCRIM_OPACITY = .3;
 const SNAP_POINT_PATTERN = /^(\d+(?:\.\d+)?|\.\d+)(px|%)$/i;
@@ -85,9 +148,6 @@ function resolveSettleOffset(value, offsets, dir, baseOffset) {
 function visibleHeightForOffset(sheetHeight, offset, offscreenBlockEndInset) {
 	return Math.max(0, sheetHeight - offscreenBlockEndInset - offset);
 }
-/** A throw this fast, over at least `FLICK_MIN_DISTANCE`, dismisses or expands outright. */
-const FLICK_VELOCITY = 1.2;
-const FLICK_MIN_DISTANCE = 48;
 /** Below the shortest stop, dragging past it by this share of its height dismisses. */
 const DISMISS_OVERSHOOT_RATIO = .4;
 /** Within this many px of a stop the live drag eases toward it. */
@@ -95,68 +155,7 @@ const MAGNET_RANGE = 40;
 /** Rubber-band factor and ceiling for dragging above the fully open position. */
 const OVERSCROLL_RESISTANCE = .35;
 const OVERSCROLL_MAX = 48;
-/** How far a finger on the body must pull before it becomes a sheet drag. */
-const DRAG_PROMOTION_SLOP = 8;
 const VELOCITY_WINDOW_MS = 100;
-const BACKSTOP_BUFFER_MS = 50;
-function parseTransitionTime(value) {
-	const normalized = value.trim();
-	if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalized)) return null;
-	const time = Number.parseFloat(normalized);
-	return normalized.endsWith("ms") ? time : time * 1e3;
-}
-/** Longest transition duration + delay that applies to `property`, in ms. */
-function transitionMsFor(element, property) {
-	const style = getComputedStyle(element);
-	const properties = (style.transitionProperty || "").split(",").map((value) => value.trim());
-	const durations = (style.transitionDuration || "").split(",").map(parseTransitionTime);
-	const delays = (style.transitionDelay || "").split(",").map((value) => parseTransitionTime(value) ?? 0);
-	return properties.reduce((longest, name, index) => {
-		if (name !== property && name !== "all") return longest;
-		const duration = durations[index % durations.length];
-		if (duration == null) return longest;
-		return Math.max(longest, duration + (delays[index % delays.length] ?? 0));
-	}, 0);
-}
-/**
-* Calls `complete` when `element` finishes transitioning `property`: on the
-* matching `transitionend`/`transitioncancel`, or on a timer backstop so a
-* missed event can never strand the caller. Without a resolved duration — the
-* case in a stylesheet-free test environment — it completes immediately.
-*/
-function waitForTransition(element, property, complete) {
-	if (element == null) {
-		complete();
-		return () => {};
-	}
-	let done = false;
-	let timer = null;
-	let onTransitionEnd = () => {};
-	const finish = () => {
-		if (done) return;
-		done = true;
-		if (timer != null) clearTimeout(timer);
-		element.removeEventListener("transitionend", onTransitionEnd);
-		element.removeEventListener("transitioncancel", onTransitionEnd);
-		complete();
-	};
-	onTransitionEnd = (event) => {
-		if (event.target === element && event.propertyName === property) finish();
-	};
-	const duration = transitionMsFor(element, property);
-	if (duration <= 0) {
-		finish();
-		return () => {};
-	}
-	element.addEventListener("transitionend", onTransitionEnd);
-	element.addEventListener("transitioncancel", onTransitionEnd);
-	timer = setTimeout(finish, duration + BACKSTOP_BUFFER_MS);
-	return () => {
-		if (timer != null) clearTimeout(timer);
-		element.removeEventListener("transitionend", onTransitionEnd);
-		element.removeEventListener("transitioncancel", onTransitionEnd);
-	};
-}
 function magnetize(value, targets) {
 	if (targets.length === 0) return value;
 	let nearest = targets[0];
@@ -181,6 +180,104 @@ function hapticTick() {
 	if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
 	navigator.vibrate(8);
 }
+/** Finger speed over the last `VELOCITY_WINDOW_MS`, in px/ms. */
+function velocityFor(samples, lastY, lastT, startY, startT) {
+	const first = samples.filter((sample) => lastT - sample.t <= VELOCITY_WINDOW_MS)[0] ?? {
+		y: startY,
+		t: startT
+	};
+	const elapsed = lastT - first.t;
+	return elapsed > 0 ? (lastY - first.y) / elapsed : 0;
+}
+/** Live offset for a drag, rubber-banding above fully open and easing near a stop. */
+function dragOffsetFrom(baseOffset, delta, stops) {
+	let offset = baseOffset + delta;
+	if (offset < 0) offset = -Math.min(-offset * OVERSCROLL_RESISTANCE, OVERSCROLL_MAX);
+	return {
+		raw: offset,
+		shown: magnetize(offset, stops)
+	};
+}
+/** Offset past which a slow downward drag dismisses instead of snapping back. */
+function dismissTravelFor(height, offsets) {
+	const maxOffset = offsets[offsets.length - 1] ?? 0;
+	return maxOffset + visibleHeightForOffset(height, maxOffset, 48) * DISMISS_OVERSHOOT_RATIO;
+}
+function hasBlockScroll(element) {
+	return element.scrollHeight > element.clientHeight + 1;
+}
+/**
+* Whether every scroller from `target` up to `root` is at its block edge.
+* A nested box that can still scroll keeps the gesture; the sheet does not
+* take it until that box has nowhere left to go.
+*/
+function blockScrollEdges(root, target) {
+	let atTop = true;
+	let atBottom = true;
+	let node = target instanceof Element ? target : root;
+	while (node != null) {
+		if (node instanceof HTMLElement && hasBlockScroll(node)) {
+			if (node.scrollTop > 1) atTop = false;
+			if (node.scrollTop + node.clientHeight < node.scrollHeight - 1) atBottom = false;
+		}
+		if (node === root) break;
+		node = node.parentElement;
+	}
+	return {
+		atTop,
+		atBottom
+	};
+}
+//#endregion
+//#region src/BottomSheet/sheetPointerSession.ts
+/** Window pointer listeners plus the body's non-passive touch listeners. */
+function createSheetPointerSession(handlers) {
+	let body = null;
+	let listening = false;
+	function attach() {
+		if (listening || typeof window === "undefined") return;
+		listening = true;
+		window.addEventListener("pointermove", handlers.onPointerMove);
+		window.addEventListener("pointerup", handlers.onPointerUp);
+		window.addEventListener("pointercancel", handlers.onPointerCancel);
+	}
+	function detach() {
+		if (!listening || typeof window === "undefined") return;
+		listening = false;
+		window.removeEventListener("pointermove", handlers.onPointerMove);
+		window.removeEventListener("pointerup", handlers.onPointerUp);
+		window.removeEventListener("pointercancel", handlers.onPointerCancel);
+	}
+	function unbind(element) {
+		element.removeEventListener("touchstart", handlers.onTouchStart);
+		element.removeEventListener("touchmove", handlers.onTouchMove);
+		element.removeEventListener("touchend", handlers.onTouchEnd);
+		element.removeEventListener("touchcancel", handlers.onTouchEnd);
+	}
+	function setBody(element) {
+		if (body != null) unbind(body);
+		body = element;
+		if (element == null) return;
+		element.addEventListener("touchstart", handlers.onTouchStart, { passive: true });
+		element.addEventListener("touchmove", handlers.onTouchMove, { passive: false });
+		element.addEventListener("touchend", handlers.onTouchEnd);
+		element.addEventListener("touchcancel", handlers.onTouchEnd);
+	}
+	function destroy() {
+		detach();
+		setBody(null);
+		if (typeof window !== "undefined") window.removeEventListener("blur", handlers.onWindowBlur);
+	}
+	if (typeof window !== "undefined") window.addEventListener("blur", handlers.onWindowBlur);
+	return {
+		attach,
+		detach,
+		setBody,
+		destroy
+	};
+}
+//#endregion
+//#region src/BottomSheet/useSheetGestures.ts
 /** Drag, snap, and settle behavior of the sheet panel. */
 function useSheetGestures(options) {
 	const { panel, body, isOpen, canDismiss, getSnapHeights, onScrimOpacity, onSnap, onDismiss } = options;
@@ -195,8 +292,10 @@ function useSheetGestures(options) {
 	const sheetHeight = ref(0);
 	let dragState = null;
 	let pendingBody = null;
+	let touchArming = null;
 	let reconcileToken = 0;
 	let observer = null;
+	let session;
 	const activeOffset = computed(() => isDragging.value ? dragOffset.value : settledOffset.value);
 	function measureNaturalHeight() {
 		const element = panel.value;
@@ -220,10 +319,6 @@ function useSheetGestures(options) {
 			peekOffset: peekOffsetFor(offsets, visible)
 		};
 	}
-	function dismissOffsetFor(detents) {
-		const maxOffset = detents.offsets[detents.offsets.length - 1] ?? 0;
-		return maxOffset + visibleHeightForOffset(detents.height, maxOffset, 48) * DISMISS_OVERSHOOT_RATIO;
-	}
 	async function reconcileLayout(targetLayoutOffset) {
 		const token = ++reconcileToken;
 		isReconciling.value = true;
@@ -237,7 +332,7 @@ function useSheetGestures(options) {
 	}
 	function settleAt(target, fromOffset, detents) {
 		const targetLayoutOffset = target === detents.peekOffset ? 0 : target;
-		const dismissOffset = dismissOffsetFor(detents);
+		const dismissOffset = dismissTravelFor(detents.height, detents.offsets);
 		settledOffset.value = target;
 		scrollPreservationInset.value = Math.max(0, fromOffset - targetLayoutOffset - naturalEndGapFor(body.value));
 		scrimOpacity.value = scrimOpacityForOffset(target, detents.offsets, dismissOffset, detents.peekOffset);
@@ -258,14 +353,6 @@ function useSheetGestures(options) {
 		}
 		settleAt(detents.offsets[detents.offsets.length - 1] ?? 0, fromOffset, detents);
 	}
-	function velocityFor(state) {
-		const first = state.samples.filter((sample) => state.lastT - sample.t <= VELOCITY_WINDOW_MS)[0] ?? {
-			y: state.startY,
-			t: state.startT
-		};
-		const elapsed = state.lastT - first.t;
-		return elapsed > 0 ? (state.lastY - first.y) / elapsed : 0;
-	}
 	function updateDrag(clientY, timeStamp) {
 		const state = dragState;
 		if (!state) return;
@@ -278,11 +365,10 @@ function useSheetGestures(options) {
 		});
 		state.travel = Math.max(state.travel, Math.abs(delta));
 		state.dir = delta === 0 ? 0 : Math.sign(delta);
-		let offset = state.baseOffset + delta;
-		if (offset < 0) offset = -Math.min(-offset * OVERSCROLL_RESISTANCE, OVERSCROLL_MAX);
-		state.rawOffset = offset;
-		dragOffset.value = magnetize(offset, state.offsets);
-		scrimOpacity.value = scrimOpacityForOffset(offset, state.offsets, dismissOffsetFor(state), state.peekOffset);
+		const next = dragOffsetFrom(state.baseOffset, delta, state.offsets);
+		state.rawOffset = next.raw;
+		dragOffset.value = next.shown;
+		scrimOpacity.value = scrimOpacityForOffset(next.raw, state.offsets, dismissTravelFor(state.height, state.offsets), state.peekOffset);
 		onScrimOpacity(scrimOpacity.value);
 	}
 	function beginDrag(pointerId, clientY, timeStamp) {
@@ -309,11 +395,11 @@ function useSheetGestures(options) {
 	function endDrag() {
 		const state = dragState;
 		dragState = null;
-		detachPointerListeners();
+		session.detach();
 		if (!state) return;
 		isDragging.value = false;
-		const velocity = velocityFor(state);
-		const isFlick = Math.abs(velocity) > FLICK_VELOCITY && state.travel > FLICK_MIN_DISTANCE;
+		const velocity = velocityFor(state.samples, state.lastY, state.lastT, state.startY, state.startT);
+		const isFlick = Math.abs(velocity) > 1.2 && state.travel > 48;
 		if (state.dir > 0 && isFlick) {
 			dismissOrSettleShortest(state.baseOffset, state);
 			return;
@@ -322,7 +408,7 @@ function useSheetGestures(options) {
 			settleAt(0, state.baseOffset, state);
 			return;
 		}
-		if (state.rawOffset > dismissOffsetFor(state)) {
+		if (state.rawOffset > dismissTravelFor(state.height, state.offsets)) {
 			dismissOrSettleShortest(state.baseOffset, state);
 			return;
 		}
@@ -331,18 +417,25 @@ function useSheetGestures(options) {
 	function cancelDrag() {
 		const state = dragState;
 		pendingBody = null;
+		touchArming = null;
 		dragState = null;
-		detachPointerListeners();
+		session.detach();
 		if (!state) return;
 		isDragging.value = false;
 		dragOffset.value = state.baseOffset;
 		settledOffset.value = state.baseOffset;
-		scrimOpacity.value = scrimOpacityForOffset(state.baseOffset, state.offsets, dismissOffsetFor(state), state.peekOffset);
+		scrimOpacity.value = scrimOpacityForOffset(state.baseOffset, state.offsets, dismissTravelFor(state.height, state.offsets), state.peekOffset);
 		onScrimOpacity(scrimOpacity.value);
 	}
+	/** A second finger is a pinch. The browser keeps the zoom; the sheet lets go. */
+	function yieldToPinch(pointerId) {
+		if (dragState == null || dragState.pointerId === pointerId) return false;
+		cancelDrag();
+		return true;
+	}
 	function onPointerMove(event) {
 		if (dragState != null) {
-			if (dragState.pointerId !== event.pointerId) return;
+			if (yieldToPinch(event.pointerId)) return;
 			if (event.cancelable) event.preventDefault();
 			updateDrag(event.clientY, event.timeStamp);
 			return;
@@ -350,12 +443,12 @@ function useSheetGestures(options) {
 		const pending = pendingBody;
 		if (pending == null || pending.pointerId !== event.pointerId) return;
 		const delta = event.clientY - pending.startY;
-		if (Math.abs(delta) < DRAG_PROMOTION_SLOP) return;
+		if (Math.abs(delta) < 8) return;
 		const pullingDown = delta > 0 && pending.atTop;
 		const pullingUp = delta < 0 && pending.atBottom && activeOffset.value > 0;
 		if (!pullingDown && !pullingUp) {
 			pendingBody = null;
-			detachPointerListeners();
+			session.detach();
 			return;
 		}
 		pendingBody = null;
@@ -367,7 +460,7 @@ function useSheetGestures(options) {
 		if (dragState != null && dragState.pointerId !== event.pointerId) return;
 		pendingBody = null;
 		if (dragState == null) {
-			detachPointerListeners();
+			session.detach();
 			return;
 		}
 		endDrag();
@@ -376,51 +469,54 @@ function useSheetGestures(options) {
 		if (dragState != null && dragState.pointerId !== event.pointerId) return;
 		cancelDrag();
 	}
-	function attachPointerListeners() {
-		window.addEventListener("pointermove", onPointerMove);
-		window.addEventListener("pointerup", onPointerUp);
-		window.addEventListener("pointercancel", onPointerCancel);
-	}
-	function detachPointerListeners() {
-		window.removeEventListener("pointermove", onPointerMove);
-		window.removeEventListener("pointerup", onPointerUp);
-		window.removeEventListener("pointercancel", onPointerCancel);
-	}
 	function onHandlePointerDown(event) {
 		if (event.button != null && event.button !== 0) return;
-		attachPointerListeners();
+		if (yieldToPinch(event.pointerId)) return;
+		session.attach();
 		beginDrag(event.pointerId, event.clientY, event.timeStamp);
 		if (event.cancelable) event.preventDefault();
 	}
 	function onBodyPointerDown(event) {
+		if (yieldToPinch(event.pointerId)) return;
 		if (event.pointerType === "touch") return;
 		if (event.button != null && event.button !== 0) return;
 		const element = body.value;
 		if (!element) return;
+		const edges = blockScrollEdges(element, event.target);
 		pendingBody = {
 			pointerId: event.pointerId,
 			startY: event.clientY,
-			atTop: element.scrollTop <= 0,
-			atBottom: element.scrollTop + element.clientHeight >= element.scrollHeight - 1
+			atTop: edges.atTop,
+			atBottom: edges.atBottom
 		};
-		attachPointerListeners();
+		session.attach();
 	}
-	let touchArming = null;
 	function onTouchStart(event) {
+		if (event.touches.length > 1) {
+			touchArming = null;
+			cancelDrag();
+			return;
+		}
 		const touch = event.changedTouches[0];
 		const element = body.value;
 		if (!touch || !element) {
 			touchArming = null;
 			return;
 		}
+		const edges = blockScrollEdges(element, event.target);
 		touchArming = {
 			identifier: touch.identifier,
 			startY: touch.clientY,
-			atTop: element.scrollTop <= 0,
-			atBottom: element.scrollTop + element.clientHeight >= element.scrollHeight - 1
+			atTop: edges.atTop,
+			atBottom: edges.atBottom
 		};
 	}
 	function onTouchMove(event) {
+		if (event.touches.length > 1) {
+			touchArming = null;
+			cancelDrag();
+			return;
+		}
 		const element = body.value;
 		if (dragState != null) {
 			const touch = Array.from(event.changedTouches).find((item) => item.identifier === dragState?.pointerId);
@@ -434,7 +530,7 @@ function useSheetGestures(options) {
 		const touch = Array.from(event.changedTouches).find((item) => item.identifier === arming.identifier);
 		if (!touch) return;
 		const delta = touch.clientY - arming.startY;
-		if (Math.abs(delta) < DRAG_PROMOTION_SLOP) return;
+		if (Math.abs(delta) < 8) return;
 		const pullingDown = delta > 0 && arming.atTop;
 		const pullingUp = delta < 0 && arming.atBottom && activeOffset.value > 0;
 		if (!pullingDown && !pullingUp) {
@@ -460,6 +556,15 @@ function useSheetGestures(options) {
 		const height = panel.value?.getBoundingClientRect().height ?? 0;
 		if (height > 0) sheetHeight.value = height;
 	}
+	session = createSheetPointerSession({
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onWindowBlur: () => cancelDrag()
+	});
 	watch(panel, (element) => {
 		observer?.disconnect();
 		observer = null;
@@ -471,18 +576,8 @@ function useSheetGestures(options) {
 		observer.observe(element);
 		recordSheetHeight();
 	}, { immediate: true });
-	watch(body, (element, previous) => {
-		if (previous) {
-			previous.removeEventListener("touchstart", onTouchStart);
-			previous.removeEventListener("touchmove", onTouchMove);
-			previous.removeEventListener("touchend", onTouchEnd);
-			previous.removeEventListener("touchcancel", onTouchEnd);
-		}
-		if (!element) return;
-		element.addEventListener("touchstart", onTouchStart, { passive: true });
-		element.addEventListener("touchmove", onTouchMove, { passive: false });
-		element.addEventListener("touchend", onTouchEnd);
-		element.addEventListener("touchcancel", onTouchEnd);
+	watch(body, (element) => {
+		session.setBody(element);
 		updateOverflow();
 	}, { immediate: true });
 	watch(isOpen, (open) => {
@@ -505,13 +600,10 @@ function useSheetGestures(options) {
 	watch(canDismiss, (allowed) => {
 		if (!allowed) cancelDrag();
 	});
-	const onWindowBlur = () => cancelDrag();
-	if (typeof window !== "undefined") window.addEventListener("blur", onWindowBlur);
 	onBeforeUnmount(() => {
-		detachPointerListeners();
+		session.destroy();
 		observer?.disconnect();
 		observer = null;
-		if (typeof window !== "undefined") window.removeEventListener("blur", onWindowBlur);
 	});
 	return {
 		isDragging,
@@ -548,6 +640,7 @@ const _hoisted_2$1 = [
 	"role",
 	"aria-label"
 ];
+const _hoisted_3$1 = ["data-padding"];
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxBottomSheetPanel",
 	__name: "BottomSheetPanel",
@@ -572,6 +665,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		resetLayerScopedContext();
+		provideLayerDepth();
 		const HEIGHT_BUDGETS = {
 			hug: "92dvh",
 			capped: "62dvh",
@@ -579,6 +674,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		};
 		const panel = useTemplateRef("panel");
 		const body = useTemplateRef("body");
+		const content = useTemplateRef("content");
 		useScrollbars(body);
 		const isInteractive = computed(() => props.state === "open");
 		const heightKind = computed(() => {
@@ -604,10 +700,6 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			onSnap: (visibleHeight) => emit("snap", visibleHeight),
 			onDismiss: () => emit("dismiss")
 		});
-		const contentStyle = computed(() => {
-			if (props.padding == null) return void 0;
-			return { "--_sheet-padding": `var(--astryx-spacing-${String(props.padding).replace(".", "-")})` };
-		});
 		const panelStyle = computed(() => {
 			const style = { "--_sheet-budget": budget.value };
 			if (isInteractive.value) {
@@ -640,6 +732,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		onUpdated(() => {
 			gestures.updateOverflow();
 		});
+		watch([body, content], ([viewport, box], _previous, onCleanup) => {
+			if (viewport == null || box == null) return;
+			onCleanup(attachScrollKeyboardDelegation(viewport, box));
+		});
 		__expose({
 			element: computed(() => panel.value ?? null),
 			focus: (options) => panel.value?.focus(options),
@@ -649,7 +745,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				ref_key: "panel",
 				ref: panel,
-				class: "astryx-bottom-sheet",
+				class: "astryx-bottom-sheet astryx-layer",
 				"data-state": __props.state,
 				"data-height": heightKind.value,
 				"data-dragging": unref(gestures).isDragging.value || void 0,
@@ -671,9 +767,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				style: normalizeStyle(bodyStyle.value),
 				onPointerdown: _cache[1] || (_cache[1] = (...args) => unref(gestures).onBodyPointerDown && unref(gestures).onBodyPointerDown(...args))
 			}, [createElementVNode("div", {
+				ref_key: "content",
+				ref: content,
 				class: "astryx-bottom-sheet__content",
-				style: normalizeStyle(contentStyle.value)
-			}, [renderSlot(_ctx.$slots, "default")], 4)], 44, _hoisted_2$1)], 12, _hoisted_1$1);
+				"data-padding": __props.padding
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$1)], 44, _hoisted_2$1)], 12, _hoisted_1$1);
 		};
 	}
 });
@@ -681,6 +779,39 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 //#region src/BottomSheet/switcher.ts
 const bottomSheetSwitcherKey = Symbol("astryx-bottom-sheet-switcher");
 //#endregion
+//#region src/BottomSheet/useSheetLayerDismiss.ts
+/**
+* 把底部面板登记进全页关闭栈。
+*
+* 点在外面不关：遮罩点击由对话框自己认，非模态时页面还要能点。
+* Escape 只打最上面一层。退出动画还在屏幕上时继续占着栈，按键不会漏到后面。
+*/
+function useSheetLayerDismiss(options) {
+	const depth = useLayerDepth();
+	const token = {};
+	let stop = null;
+	function sync() {
+		stop?.();
+		stop = null;
+		if (!options.isActive.value) return;
+		stop = pushLayer({
+			token,
+			depth,
+			getContainer: options.getContainer,
+			dismissOnPointerOutside: false,
+			dismissOnEscape: options.escape.value,
+			isPresent: options.isPresent,
+			onDismiss: options.onDismiss
+		});
+	}
+	watch([options.isActive, options.escape], sync, { immediate: true });
+	onScopeDispose(() => {
+		stop?.();
+		stop = null;
+	});
+	return { isTop: () => options.isActive.value && isTopLayer(token) };
+}
+//#endregion
 //#region src/BottomSheet/BottomSheet.vue
 const _hoisted_1 = ["inert"];
 const _hoisted_2 = {
@@ -820,8 +951,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			unlockScroll();
 			isPresented.value = false;
 			const target = toValue(props.finalFocusRef);
-			if (target?.isConnected) target.focus();
+			if (target?.isConnected) focusForLastInput(target);
 		}
+		const layer = useSheetLayerDismiss({
+			isActive: computed(() => !hosted.value && !props.isInline && (isOpen.value || isPresented.value)),
+			escape: computed(() => {
+				if (!isOpen.value || props.purpose === "required") return "block";
+				if (!props.hasScrim) return "ignore";
+				return "close";
+			}),
+			getContainer: () => dialog.value ?? null,
+			isPresent: () => dialog.value?.open ?? false,
+			onDismiss: () => {
+				if (!isOpen.value || props.purpose === "required") return;
+				requestClose();
+			}
+		});
 		function requestClose() {
 			if (hosted.value && props.sheetId != null) {
 				if (switcher?.activeId.value === props.sheetId) switcher.setActive(null);
@@ -836,13 +981,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			requestClose();
 		}
 		function onKeydown(event) {
-			if (event.key !== "Escape") return;
+			if (event.key !== "Escape" || !layer.isTop()) return;
 			event.preventDefault();
-			if (event.isComposing || event.keyCode === 229) return;
+			if (isImeKeyEvent(event)) return;
 			dismissOnEscape();
 		}
 		function onCancel(event) {
 			event.preventDefault();
+			if (!layer.isTop()) return;
 			dismissOnEscape();
 		}
 		function onDialogClick(event) {
@@ -978,4 +1124,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { bottomSheetSwitcherKey as n, _sfc_main as t };
+export { useSheetLayerDismiss as n, bottomSheetSwitcherKey as r, _sfc_main as t };