@kanso-labs/kanso-ui 0.44.1 → 0.45.0

package/dist/components/sheet/index.js

@@ -2,27 +2,125 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { useMessages } from "../../i18n/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
 import { useScrollStop } from "../../hooks/useScrollStop.js";
 import { OverlayScope } from "../../overlay/index.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, useSlottedContext } from "react-aria-components";
+import { createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Heading, HeadingContext, OverlayTriggerStateContext, Sheet, SheetBackdrop, SheetContent, SheetOverlay, SheetTrigger, useSlottedContext } from "react-aria-components";
 //#region src/components/sheet/index.tsx
-const styles = { body: {
-	kB7OPa: "x9f619",
-	k1xSpc: "x78zum5",
-	kXwgrk: "xdt5ytf",
-	kzQI83: "x1iyjqo2",
-	kOIVth: "xxj4525",
-	kHjlTd: "xj0a0fe",
-	kORKVm: "x1odjw0f",
-	k8WAf4: "xp6hjv6",
-	kg3NbH: "xg0ps1x",
-	$$css: true
-} };
+const scrimIn = "x18re5ia-B";
+const BOTTOM_SHEET = "(width < 600px)";
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const TO_THE_FIRST_SNAP_POINT = { end: 0 };
+const styles = {
+	body: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kzQI83: "x1iyjqo2",
+		kOIVth: "xxj4525",
+		kAzted: "x2lwn1j",
+		kHjlTd: "xj0a0fe",
+		kORKVm: "x1odjw0f",
+		k8WAf4: "xp6hjv6",
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	bodyHeld: {
+		kORKVm: "x1s73dr8",
+		$$css: true
+	}
+};
+function isBottomSheet() {
+	return window.matchMedia(BOTTOM_SHEET).matches;
+}
+function isReducedMotion() {
+	return window.matchMedia(REDUCED_MOTION).matches;
+}
+/**
+* Moves the sheet whose handle was pressed to its next snap point, or from
+* the last back to the first. React Aria offers no call that moves a sheet,
+* so this scrolls its scroller as React Aria does to open the sheet at the
+* first: React Aria places a marker in the panel for each snap point, and a
+* scroll that rests a marker one viewport below the scroller's top leaves
+* that snap point showing. The markers are `[data-sheet-detent]`, in the
+* order the snap points were given, and they are React Aria's markup rather
+* than its API — a release that renames them leaves the handle pressing
+* nothing, which the handle's tests are there to say.
+*
+* Which snap point the sheet is at is the marker whose resting scroll lies
+* nearest the scroller's own, so a press after a swipe moves on from where
+* the swipe left the sheet.
+*/
+function moveToNextSnapPoint({ target }) {
+	const scroller = target.closest("[data-sheet-scroll]");
+	if (!(scroller instanceof HTMLElement)) return;
+	const origin = scroller.getBoundingClientRect().top - scroller.scrollTop;
+	const stops = [...scroller.querySelectorAll("[data-sheet-detent]")].map((marker) => marker.getBoundingClientRect().top - origin - Number.parseFloat(getComputedStyle(marker).scrollMarginTop));
+	if (stops.length === 0) return;
+	const distances = stops.map((stop) => Math.abs(stop - scroller.scrollTop));
+	const at = distances.indexOf(Math.min(...distances));
+	scroller.scrollTo({
+		behavior: isReducedMotion() ? "auto" : "smooth",
+		top: stops[(at + 1) % stops.length]
+	});
+}
+function onServer() {
+	return false;
+}
+function panelStyles({ position }) {
+	return {
+		0: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q" },
+		4: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg" },
+		2: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q x196z7tn" },
+		6: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 xg4jtgg x196z7tn" },
+		1: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q xg4jtgg" },
+		5: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg" },
+		3: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x5yr21d xrzall9 xjslfuv x1gbqego xjg5lhu x6xk272 x1l2rt3b x1a148e8 x1mrd0q x196z7tn xg4jtgg" },
+		7: { className: "x1vnz5z6 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x7giv3 x19dwuzr x4z998w x1lym3mf x1u81hx7 x1uop38w xh8yej3 xv4ka1z x1a148e8 x196z7tn xg4jtgg" }
+	}[!!(position === "bottom") << 2 | !!(position === "left") << 1 | !!(position === "right") << 0];
+}
+function subscribeTo(query) {
+	return (listener) => {
+		const list = window.matchMedia(query);
+		list.addEventListener("change", listener);
+		return () => {
+			list.removeEventListener("change", listener);
+		};
+	};
+}
+const subscribeToBottomSheet = subscribeTo(BOTTOM_SHEET);
+const subscribeToReducedMotion = subscribeTo(REDUCED_MOTION);
+const SnapContext = createContext(null);
+/**
+* The dialog's element, given a key handler for Escape. React Aria's sheet
+* has one switch for every way out, so where this sheet's two settings
+* disagree about Escape the handler answers for it: `close` closes the sheet
+* React Aria is holding open, and `hold` keeps Escape from the overlay that
+* would close it. Either way the key goes no further, as it would not have
+* from React Aria's own handler.
+*/
+function escapeKeyOn(escape, state, render) {
+	return (props, renderProps) => {
+		const next = {
+			...props,
+			onKeyDown: (event) => {
+				props.onKeyDown?.(event);
+				if (event.key !== "Escape" || event.nativeEvent.isComposing || !(event.target instanceof Node && event.currentTarget.contains(event.target))) return;
+				event.stopPropagation();
+				if (escape === "close") {
+					event.preventDefault();
+					state?.close();
+				}
+			}
+		};
+		return render === void 0 ? /* @__PURE__ */ jsx("section", { ...next }) : render(next, renderProps);
+	};
+}
 /**
 * A modal panel that arrives from the edge of the screen — a side sheet on a
 * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:
@@ -36,13 +134,39 @@ const styles = { body: {
 * given `slot="close"` anywhere inside the content closes it; neither needs
 * a part of its own.
 *
+* ```tsx
+* <Sheet>
+*   <Button>Open</Button>
+*   <Sheet.Content>
+*     <Sheet.Handle />
+*     <Sheet.Header>
+*       <Sheet.Title>Headline</Sheet.Title>
+*     </Sheet.Header>
+*     <Sheet.Body>Supporting line</Sheet.Body>
+*     <Sheet.Footer>
+*       <Button slot="close">Close</Button>
+*     </Sheet.Footer>
+*   </Sheet.Content>
+* </Sheet>
+* ```
+*
 * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one
 * a route shows, or a menu item raises — leaves it out and passes `isOpen`
 * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no
 * button inside it, React Aria warns that its press responder found nothing
 * to press.
+*
+* ```tsx
+* <Sheet.Content isOpen={isOpen} onOpenChange={setOpen}>
+*   …
+* </Sheet.Content>
+* ```
+*
+* Tab stays inside an open sheet, so a `Snackbar` shown meanwhile is reached
+* with F6, which React Aria uses to move between landmarks. Tabbing on past
+* the snackbar's last control leads back into the sheet.
 */
-function Sheet(t0) {
+function Sheet$1(t0) {
 	const $ = c(6);
 	let children;
 	let props;
@@ -57,7 +181,7 @@ function Sheet(t0) {
 	}
 	let t1;
 	if ($[3] !== children || $[4] !== props) {
-		t1 = /* @__PURE__ */ jsx(DialogTrigger, {
+		t1 = /* @__PURE__ */ jsx(SheetTrigger, {
 			...props,
 			children
 		});
@@ -71,6 +195,7 @@ function SheetBody(t0) {
 	const $ = c(7);
 	const { ref: callerRef, ...props$2 } = t0;
 	const ref = useRef(null);
+	const snap = useContext(SnapContext);
 	const title = useSlottedContext(HeadingContext, "title");
 	const scrollStop = useScrollStop(ref, {
 		label: props$2["aria-label"],
@@ -84,7 +209,7 @@ function SheetBody(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const merged = t2;
-	const t3 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$2);
+	const t3 = mergeStyles(props(styles.body, snap === "collapsed" && styles.bodyHeld, overlay.modalBodyRing), props$2);
 	let t4;
 	if ($[2] !== merged || $[3] !== props$2 || $[4] !== scrollStop || $[5] !== t3) {
 		t4 = /* @__PURE__ */ jsx("div", {
@@ -106,133 +231,223 @@ function SheetBody(t0) {
 * in here; the trigger stays outside it, since the trigger lives in the page
 * while this is portalled out to the end of the body.
 *
-* A press on the scrim closes the sheet unless `isDismissable` says
-* otherwise — React Aria's own default is the reverse, and a sheet that
-* ignores a tap outside it reads as stuck.
+* A swipe toward the edge the panel rests on closes it — down on a bottom
+* sheet, toward the screen's edge on a side sheet — as do a press on the
+* scrim, Escape and a `slot="close"` button. `isDismissable` holds the first
+* two, and `isKeyboardDismissDisabled` holds Escape. React Aria's default for
+* the scrim is the reverse of this one: a sheet that ignores a tap outside it
+* reads as stuck.
 *
 * Inside `Sheet`, the open state is the trigger's. On its own, with no
 * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and
-* a `slot="close"` button, Escape and the scrim all report through
+* a swipe, a `slot="close"` button, Escape and the scrim all report through
 * `onOpenChange`, as they would to `Sheet`.
 *
-* The scrim draws at `z-index: 900`, over any page content layered below
-* that, such as a sticky header, and the panel draws inside it. A
+* The sheet draws at `z-index: 900`, the scrim and the panel over it, over
+* any page content layered below that, such as a sticky header. A
 * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read
 * over it, and React Aria's popovers and menus draw above both.
+*
+* React Aria lays the sheet over the page from the page's own top-left
+* corner rather than fixing it to the window, so a `container` inside a
+* positioned element holds the sheet to that element instead.
 */
-function SheetContent(t0) {
-	const $ = c(32);
+function SheetContent$1(t0) {
+	const $ = c(42);
 	let children;
 	let className;
 	let container;
 	let defaultOpen;
-	let isKeyboardDismissDisabled;
 	let isOpen;
 	let onOpenChange;
 	let props$1;
 	let ref;
+	let snapPoints;
 	let style;
 	let t1;
+	let t2;
 	if ($[0] !== t0) {
-		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled: t2, isOpen, onOpenChange, ref, snapPoints, style, ...props$1} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = container;
 		$[4] = defaultOpen;
-		$[5] = isKeyboardDismissDisabled;
-		$[6] = isOpen;
-		$[7] = onOpenChange;
-		$[8] = props$1;
-		$[9] = ref;
+		$[5] = isOpen;
+		$[6] = onOpenChange;
+		$[7] = props$1;
+		$[8] = ref;
+		$[9] = snapPoints;
 		$[10] = style;
 		$[11] = t1;
+		$[12] = t2;
 	} else {
 		children = $[1];
 		className = $[2];
 		container = $[3];
 		defaultOpen = $[4];
-		isKeyboardDismissDisabled = $[5];
-		isOpen = $[6];
-		onOpenChange = $[7];
-		props$1 = $[8];
-		ref = $[9];
+		isOpen = $[5];
+		onOpenChange = $[6];
+		props$1 = $[7];
+		ref = $[8];
+		snapPoints = $[9];
 		style = $[10];
 		t1 = $[11];
+		t2 = $[12];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
-	let t2;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = props(overlay.scrim);
-		$[12] = t2;
-	} else t2 = $[12];
-	let t3;
-	if ($[13] !== className || $[14] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4" }, {
+	const isKeyboardDismissDisabled = t2 === void 0 ? false : t2;
+	const isBottom = useSyncExternalStore(subscribeToBottomSheet, isBottomSheet, onServer);
+	const isReduced = useSyncExternalStore(subscribeToReducedMotion, isReducedMotion, onServer);
+	const position = isBottom ? "bottom" : "end";
+	const heights = isBottom && snapPoints !== void 0 && snapPoints.length > 0 ? snapPoints : void 0;
+	const overlayRef = useRef(null);
+	useRestOnTurn(overlayRef, position);
+	let escape;
+	if ($[13] !== isDismissable || $[14] !== isKeyboardDismissDisabled) {
+		if (isDismissable === isKeyboardDismissDisabled) escape = isKeyboardDismissDisabled ? "hold" : "close";
+		$[13] = isDismissable;
+		$[14] = isKeyboardDismissDisabled;
+		$[15] = escape;
+	} else escape = $[15];
+	const t3 = !isDismissable;
+	const t4 = isReduced ? void 0 : scrimIn;
+	const t5 = heights === void 0 ? void 0 : TO_THE_FIRST_SNAP_POINT;
+	let t6;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(overlay.backdrop);
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t4 || $[18] !== t5) {
+		t7 = /* @__PURE__ */ jsx(SheetBackdrop, {
+			swipeAnimation: t4,
+			swipeAnimationRange: t5,
+			...t6
+		});
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== className || $[21] !== style) {
+		t8 = mergeStatefulStyles(panelStyles, {
 			className,
 			style
 		});
-		$[13] = className;
-		$[14] = style;
-		$[15] = t3;
-	} else t3 = $[15];
-	let t4;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = props(overlay.modalDialog);
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== children || $[18] !== props$1) {
-		t5 = /* @__PURE__ */ jsx(Dialog, {
-			...props$1,
-			...t4,
-			children
-		});
-		$[17] = children;
-		$[18] = props$1;
-		$[19] = t5;
-	} else t5 = $[19];
-	let t6;
-	if ($[20] !== ref || $[21] !== t3 || $[22] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Modal, {
+		$[20] = className;
+		$[21] = style;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== children || $[24] !== escape || $[25] !== heights || $[26] !== props$1) {
+		t9 = (t10) => {
+			const { isExpanded } = t10;
+			let snap = null;
+			if (heights !== void 0) snap = isExpanded ? "expanded" : "collapsed";
+			return /* @__PURE__ */ jsx(SnapContext, {
+				value: snap,
+				children: /* @__PURE__ */ jsx(SheetDialog, {
+					escape,
+					...props$1,
+					children
+				})
+			});
+		};
+		$[23] = children;
+		$[24] = escape;
+		$[25] = heights;
+		$[26] = props$1;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== ref || $[29] !== t8 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Sheet, {
 			ref,
-			...t3,
-			children: t5
+			...t8,
+			children: t9
 		});
-		$[20] = ref;
-		$[21] = t3;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
-	let t7;
-	if ($[24] !== container || $[25] !== defaultOpen || $[26] !== isDismissable || $[27] !== isKeyboardDismissDisabled || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t6) {
-		t7 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
+		$[28] = ref;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== container || $[33] !== defaultOpen || $[34] !== heights || $[35] !== isOpen || $[36] !== onOpenChange || $[37] !== position || $[38] !== t10 || $[39] !== t3 || $[40] !== t7) {
+		t11 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsxs(SheetOverlay, {
 			defaultOpen,
-			isDismissable,
-			isKeyboardDismissDisabled,
 			isOpen,
 			onOpenChange,
+			position,
+			preventDismissal: t3,
+			ref: overlayRef,
+			snapPoints: heights,
 			UNSTABLE_portalContainer: container,
-			...t2,
-			children: t6
+			className: "x9f619 x125h2g0",
+			children: [t7, t10]
 		}) });
-		$[24] = container;
-		$[25] = defaultOpen;
-		$[26] = isDismissable;
-		$[27] = isKeyboardDismissDisabled;
-		$[28] = isOpen;
-		$[29] = onOpenChange;
-		$[30] = t6;
-		$[31] = t7;
-	} else t7 = $[31];
-	return t7;
+		$[32] = container;
+		$[33] = defaultOpen;
+		$[34] = heights;
+		$[35] = isOpen;
+		$[36] = onOpenChange;
+		$[37] = position;
+		$[38] = t10;
+		$[39] = t3;
+		$[40] = t7;
+		$[41] = t11;
+	} else t11 = $[41];
+	return t11;
+}
+function SheetDialog(t0) {
+	const $ = c(12);
+	let escape;
+	let props$3;
+	let render;
+	if ($[0] !== t0) {
+		({escape, render, ...props$3} = t0);
+		$[0] = t0;
+		$[1] = escape;
+		$[2] = props$3;
+		$[3] = render;
+	} else {
+		escape = $[1];
+		props$3 = $[2];
+		render = $[3];
+	}
+	const state = useContext(OverlayTriggerStateContext);
+	let t1;
+	if ($[4] !== escape || $[5] !== render || $[6] !== state) {
+		t1 = escape === void 0 ? render : escapeKeyOn(escape, state, render);
+		$[4] = escape;
+		$[5] = render;
+		$[6] = state;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = props(overlay.modalDialog);
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props$3 || $[10] !== t1) {
+		t3 = /* @__PURE__ */ jsx(SheetContent, {
+			...props$3,
+			render: t1,
+			...t2
+		});
+		$[9] = props$3;
+		$[10] = t1;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
 }
 /**
-* The sheet's actions. The panel is pinned to the window's bottom edge in
-* both presentations, so they sit on that edge, and a toast rises clear of
-* them while the sheet is open rather than lying over its buttons. A side
-* sheet's are included: the toast is centred in the window, and on any
-* window narrower than about 1376px its 576 reach into the sheet's 400.
+* The sheet's actions. The panel rests on the window's bottom edge in both
+* presentations, so they sit on that edge, and a toast rises clear of them
+* while the sheet is open rather than lying over its buttons. A side sheet's
+* are included: the toast is centred in the window, and on any window
+* narrower than about 1376px its 576 reach into the sheet's 400.
 */
 function SheetFooter(t0) {
 	const $ = c(6);
@@ -264,43 +479,71 @@ function SheetFooter(t0) {
 }
 /**
 * The bottom sheets page's drag handle: a short bar above the sheet's
-* content, saying the panel is a bottom sheet. Place it first inside
-* `Sheet.Content`; above the medium breakpoint the panel is a side sheet and
-* this draws nothing.
+* content, saying the panel is a bottom sheet that a swipe moves. Place it
+* first inside `Sheet.Content`; above the medium breakpoint the panel is a
+* side sheet and this draws nothing.
+*
+* On a sheet given `snapPoints` it is a button, as the bottom sheets page
+* asks of a handle that moves the sheet between heights: a press, from a
+* pointer, a keyboard or assistive technology, moves the sheet to its next
+* snap point, from the last back to the first, and `aria-expanded` says
+* whether it rests at the last. It is called "Drag handle" in the locale's
+* own words, and a call site's `aria-label` names it instead. Its 48 square
+* is the page's target, centred over the bar.
 *
-* It is decoration rather than a control, and hidden from assistive
-* technology. Material's own handle drags a sheet between a collapsed and an
-* expanded height and dismisses it from the collapsed one; this panel has
-* one height and cannot be dragged, so a control that only looked draggable
-* would promise what it cannot do. Closing is already the scrim, Escape, and
-* any button given `slot="close"`.
+* On a sheet without them it is decoration, hidden from assistive
+* technology: the panel has one height, and the swipe the bar points at
+* takes it from anywhere on the panel, so a control here would offer
+* nothing a swipe, the scrim, Escape or a `slot="close"` button does not.
 */
-function SheetHandle(props) {
-	const $ = c(6);
-	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
+function SheetHandle(t0) {
+	const $ = c(9);
+	const { "aria-label": label, ...props } = t0;
+	const snap = useContext(SnapContext);
+	const messages = useMessages();
 	let t1;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx("span", { className: "x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas" });
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== props || $[4] !== t0) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			"aria-hidden": "true",
+		$[0] = t1;
+	} else t1 = $[0];
+	const bar = t1;
+	if (snap === null) return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"aria-label": label,
+		...props,
+		...mergeStyles({ className: "x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv" }, props),
+		children: bar
+	});
+	const t2 = mergeStyles({ className: "x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k xt970qd" }, props);
+	const t3 = snap === "expanded";
+	const t4 = label ?? messages.dragHandle;
+	let t5;
+	if ($[1] !== bar || $[2] !== t3 || $[3] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			"aria-expanded": t3,
+			"aria-label": t4,
+			onPress: moveToNextSnapPoint,
+			className: "x6s0dn4 xjbqb8w xsdox4t x1dkaolv xng3xce x9f619 x1ypdohk x78zum5 x1useyqa xl56j7k x1ghz6dp xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1717udv",
+			children: bar
+		});
+		$[1] = bar;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== props || $[6] !== t2 || $[7] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
 			...props,
-			...t0,
-			children: t1
+			...t2,
+			children: t5
 		});
-		$[3] = props;
-		$[4] = t0;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[5] = props;
+		$[6] = t2;
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	return t6;
 }
 function SheetHeader(props) {
 	const $ = c(5);
@@ -348,13 +591,54 @@ function SheetTitle(props) {
 	} else t1 = $[4];
 	return t1;
 }
-Sheet.Body = SheetBody;
-Sheet.Content = SheetContent;
-Sheet.Footer = SheetFooter;
-Sheet.Handle = SheetHandle;
-Sheet.Header = SheetHeader;
-Sheet.Title = SheetTitle;
+/**
+* Puts an open panel back where it rests when the window crosses the
+* breakpoint. Its scroller runs along the axis the panel arrives on, so a
+* side sheet turned into a bottom sheet kept the side sheet's scroll, which on
+* the new axis is the closed position: the panel stayed open below the
+* window, and its scrim went on holding the page. A panel resting against the
+* end of its scroller — a bottom sheet, a sheet on the right — goes to the
+* end, and a sheet on the left to the start, without the smooth scroll its
+* arrival takes, since it is not arriving.
+*
+* A layout effect, so the panel is back before the frame is drawn and before
+* React Aria's observer can see it gone; the parent's, so it runs after
+* React Aria has set the scroller up for the new edge.
+*/
+function useRestOnTurn(overlayRef, position) {
+	const $ = c(4);
+	const previous = useRef(position);
+	let t0;
+	let t1;
+	if ($[0] !== overlayRef || $[1] !== position) {
+		t0 = () => {
+			if (previous.current === position) return;
+			previous.current = position;
+			const layer = overlayRef.current;
+			const scroller = layer?.querySelector("[data-sheet-scroll]");
+			if (!(layer instanceof HTMLElement && scroller instanceof HTMLElement)) return;
+			const edge = layer.dataset.position;
+			if (edge === "bottom") scroller.scrollTo({ top: scroller.scrollHeight });
+			else scroller.scrollTo({ left: edge === "left" ? 0 : scroller.scrollWidth });
+		};
+		t1 = [overlayRef, position];
+		$[0] = overlayRef;
+		$[1] = position;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useLayoutEffect(t0, t1);
+}
+Sheet$1.Body = SheetBody;
+Sheet$1.Content = SheetContent$1;
+Sheet$1.Footer = SheetFooter;
+Sheet$1.Handle = SheetHandle;
+Sheet$1.Header = SheetHeader;
+Sheet$1.Title = SheetTitle;
 //#endregion
-export { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Sheet as default };
+export { SheetBody, SheetContent$1 as SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Sheet$1 as default };
 
 //# sourceMappingURL=index.js.map