@slotted/react 0.1.0-beta.10 → 0.1.0-beta.11

package/dist/{drawer-CkpFlKYa.js → drawer-fyPyxnYQ.js}

@@ -1,19 +1,19 @@
-import { n as e, t } from "./icon-DjqSEQ-o.js";
-import { r as n } from "./i18n-DpW8lqJ1.js";
+import { r as e } from "./i18n-D7xXDd8-.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
 import { keyedProps as r } from "@slotted/core/selector-key";
 import { createFocusScope as i } from "@slotted/core/focus";
 import { createControllable as a } from "@slotted/core/state";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h, useSyncExternalStore as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { createPresence as b } from "@slotted/core/presence";
-import { createPortalRoot as x } from "@slotted/core/portal";
-import { createDismissableLayer as S } from "@slotted/core/dismissable-layer";
-import { createPortal as C } from "react-dom";
-import { drawerMessages as w } from "@slotted/core/i18n";
-import { EXTENT_LARGE_STEP_PX as T, EXTENT_STEP_PX as E, SHEET_FLING_PX_PER_S as ee, anchorsAtStart as te, attachSheetDrag as D, dampenExtent as O, extentAtPoint as k, extentBounds as ne, extentVelocity as A, holdResizeGesture as re, isInlineSide as ie, measureSheetStops as j, sameStop as ae, settleExtent as oe, stepAmountFromPixels as M, stepExtent as N, stopAsExtent as P } from "@slotted/core/extent";
-import { clamp as F, observeKeyboardInset as I } from "@slotted/core/measure";
+import { Fragment as ee, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { createPresence as te } from "@slotted/core/presence";
+import { drawerMessages as y } from "@slotted/core/i18n";
+import { createPortalRoot as b } from "@slotted/core/portal";
+import { createDismissableLayer as x } from "@slotted/core/dismissable-layer";
+import { createPortal as S } from "react-dom";
+import { EXTENT_LARGE_STEP_PX as C, EXTENT_STEP_PX as w, SHEET_FLING_PX_PER_S as ne, anchorsAtStart as re, attachSheetDrag as T, dampenExtent as E, extentAtPoint as D, extentBounds as ie, extentVelocity as O, holdResizeGesture as ae, isInlineSide as oe, measureSheetStops as k, sameStop as A, settleExtent as se, stepAmountFromPixels as j, stepExtent as M, stopAsExtent as N } from "@slotted/core/extent";
+import { clamp as P, observeKeyboardInset as F } from "@slotted/core/measure";
 //#region src/drawer/drawer-defaults.tsx
-var L = o({
+var I = o({
 	back: "close",
 	escape: "close",
 	modal: !0,
@@ -24,12 +24,12 @@ var L = o({
 	size: void 0,
 	drag: "panel"
 });
-function R() {
-	return c(L);
+function L() {
+	return c(I);
 }
-function z({ children: e, ...t }) {
-	let n = R();
-	return /* @__PURE__ */ v(L.Provider, {
+function R({ children: e, ...t }) {
+	let n = L();
+	return /* @__PURE__ */ _(I.Provider, {
 		value: {
 			back: t.back ?? n.back,
 			escape: t.escape ?? n.escape,
@@ -46,42 +46,42 @@ function z({ children: e, ...t }) {
 }
 //#endregion
 //#region src/drawer/drawer.tsx
-var B = o(void 0);
-function V() {
-	let e = c(B);
+var ce = o(void 0);
+function z() {
+	let e = c(ce);
 	if (e === void 0) throw Error("Every drawer part must be rendered inside Drawer.");
 	return e;
 }
-var se = [];
-function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen: o, drag: c, escape: f, extent: g, finalFocus: _, initialFocus: y, loading: x, maxExtent: S, messages: C, minExtent: T, modal: E, mode: ee, mount: te, onExtentChange: D, onOpenChange: O, onOpenChangeComplete: k, open: A, outsidePress: re, ref: ie, scrimFrom: j, side: ae, size: oe, snapPoints: M }) {
-	let N = R(), P = n(w, C), I = u(), [L, z] = h(o ?? !1), V = A ?? L, [ce, H] = h(i), U = g ?? ce, [le, ue] = h(!1), [W, de] = h(null), [fe, pe] = h(void 0), G = ee ?? N.mode, me = G === "inline" ? !1 : E ?? N.modal, K = te ?? N.mount, q = ae ?? N.side, J = oe ?? N.size ?? (q === "top" || q === "bottom" ? "content" : "md"), he = G === "inline" ? "none" : f ?? N.escape, ge = G === "inline" ? "none" : t ?? N.back, _e = G === "inline" ? "none" : re ?? N.outsidePress, Y = M ?? se, X = p(() => {
-		let e = ne(Y, T ?? .2, S ?? 1);
+var B = [];
+function V({ children: t, back: n, container: r, defaultExtent: i, defaultOpen: o, drag: c, escape: f, extent: g, finalFocus: ee, initialFocus: v, loading: b, maxExtent: x, messages: S, minExtent: C, modal: w, mode: ne, mount: re, onExtentChange: T, onOpenChange: E, onOpenChangeComplete: D, open: O, outsidePress: ae, ref: oe, scrimFrom: k, side: A, size: se, snapPoints: j }) {
+	let M = L(), N = e(y, S), F = u(), [I, R] = h(o ?? !1), z = O ?? I, [V, H] = h(i), U = g ?? V, [le, ue] = h(!1), [W, de] = h(null), [fe, pe] = h(void 0), G = ne ?? M.mode, me = G === "inline" ? !1 : w ?? M.modal, K = re ?? M.mount, q = A ?? M.side, J = se ?? M.size ?? (q === "top" || q === "bottom" ? "content" : "md"), he = G === "inline" ? "none" : f ?? M.escape, ge = G === "inline" ? "none" : n ?? M.back, _e = G === "inline" ? "none" : ae ?? M.outsidePress, Y = j ?? B, X = p(() => {
+		let e = ie(Y, C ?? .2, x ?? 1);
 		return J === "content" ? {
 			...e,
-			max: Math.max(e.max, S ?? 1)
+			max: Math.max(e.max, x ?? 1)
 		} : e;
 	}, [
-		S,
-		T,
+		x,
+		C,
 		J,
 		Y
-	]), [Z, ve] = h(V ? "entering" : "unmounted"), Q = m(null), ye = m(k);
-	ye.current = k, Q.current === null && (Q.current = b({
+	]), [Z, ve] = h(z ? "entering" : "unmounted"), Q = m(null), ye = m(D);
+	ye.current = D, Q.current === null && (Q.current = te({
 		onEnterComplete: () => ye.current?.(!0),
 		onExitComplete: () => ye.current?.(!1),
 		onStatusChange: ve,
-		present: V,
+		present: z,
 		skipInitialAnimation: !1
 	})), l(() => {
-		Q.current?.sync(V);
-	}, [V]), l(() => {
-		V && de(null);
-	}, [V]), l(() => {
+		Q.current?.sync(z);
+	}, [z]), l(() => {
+		z && de(null);
+	}, [z]), l(() => {
 		let e = Q.current;
 		return () => e?.stop();
 	}, []);
-	let be = m(V);
-	V && (be.current = !0);
+	let be = m(z);
+	z && (be.current = !0);
 	let xe = G === "inline" || K === "eager" ? !0 : K === "lazy" ? be.current : Z !== "unmounted", Se = m({
 		layer: null,
 		panel: null,
@@ -91,12 +91,12 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 	}), []), Oe = s((e) => {
 		Se.current.layer = e, Q.current?.setNode(e);
 	}, []), $ = s((e, t, n, r) => {
-		if (e === V) return;
+		if (e === z) return;
 		let i = !1, o = a({
-			controlled: A,
-			initial: V,
+			controlled: O,
+			initial: z,
 			onRequest: (e) => {
-				i = e.cancelled, O?.(e.value, {
+				i = e.cancelled, E?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -109,19 +109,19 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 				});
 			}
 		}).request(e, t, r);
-		i || o && z(e);
+		i || o && R(e);
 	}, [
-		V,
-		O,
-		A
+		z,
+		E,
+		O
 	]), ke = s((e, t, n) => {
-		let r = e === void 0 ? void 0 : F(e, 0, X.max);
+		let r = e === void 0 ? void 0 : P(e, 0, X.max);
 		if (r === U) return;
 		let i = !1, o = a({
 			controlled: g,
 			initial: U,
 			onRequest: (e) => {
-				i = e.cancelled, D?.(e.value, {
+				i = e.cancelled, T?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -138,9 +138,9 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 		X.max,
 		U,
 		g,
-		D
+		T
 	]);
-	d(ie, () => ({
+	d(oe, () => ({
 		open: () => $(!0, "programmatic", void 0, void 0),
 		close: (e) => $(!1, "programmatic", e, void 0),
 		focus: () => Se.current.panel?.focus(),
@@ -152,10 +152,10 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 		announce: De,
 		close: (e, t, n) => $(!1, e, t, n),
 		container: r,
-		descriptionId: Te ? `${I}description` : "",
+		descriptionId: Te ? `${F}description` : "",
 		dragging: le,
-		drag: c ?? N.drag,
-		scrimFrom: j ?? 0,
+		drag: c ?? M.drag,
+		scrimFrom: k ?? 0,
 		live: W,
 		setLive: de,
 		rest: fe,
@@ -163,9 +163,9 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 		back: ge,
 		escape: he,
 		extent: U,
-		finalFocus: _,
-		initialFocus: y ?? "first",
-		loading: x === !0,
+		finalFocus: ee,
+		initialFocus: v ?? "first",
+		loading: b === !0,
 		defaultExtent: i,
 		maxExtent: X.max,
 		minExtent: X.min,
@@ -174,40 +174,40 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 		mounted: xe,
 		mount: K,
 		nodes: Se.current,
-		open: V,
+		open: z,
 		openWith: (e, t) => $(!0, e, void 0, t),
 		outsidePress: _e,
-		panelId: `${I}panel`,
+		panelId: `${F}panel`,
 		registerLayer: Oe,
 		requestExtent: ke,
 		setDragging: ue,
 		side: q,
 		size: J,
 		snapPoints: Y,
-		t: P,
-		titleId: Ce ? `${I}title` : "",
-		triggerId: `${I}trigger`,
-		visible: G === "inline" ? V : Z === "open",
-		interactive: G === "inline" ? V : Z === "entering" || Z === "open"
+		t: N,
+		titleId: Ce ? `${F}title` : "",
+		triggerId: `${F}trigger`,
+		visible: G === "inline" ? z : Z === "open",
+		interactive: G === "inline" ? z : Z === "entering" || Z === "open"
 	}), [
 		De,
-		I,
+		F,
 		X.max,
 		X.min,
 		r,
 		U,
 		i,
-		V,
+		z,
 		Te,
-		N.drag,
+		M.drag,
 		c,
 		le,
 		W,
 		fe,
-		j,
-		_,
-		y,
-		x,
+		k,
+		ee,
+		v,
+		b,
 		xe,
 		Oe,
 		ke,
@@ -222,12 +222,12 @@ function ce({ children: e, back: t, container: r, defaultExtent: i, defaultOpen:
 		J,
 		Y,
 		Z,
-		P,
+		N,
 		Ce
 	]);
-	return /* @__PURE__ */ v(B.Provider, {
+	return /* @__PURE__ */ _(ce.Provider, {
 		value: Ae,
-		children: e
+		children: t
 	});
 }
 //#endregion
@@ -251,7 +251,7 @@ function fe() {
 	return g(de, () => !0, () => !1);
 }
 function pe({ children: e, className: t, onClick: n, ref: i, render: a, style: o, ...s }) {
-	let c = V(), l = r({
+	let c = z(), l = r({
 		...s,
 		"aria-controls": c.mounted ? c.panelId : void 0,
 		"aria-expanded": c.open,
@@ -270,13 +270,13 @@ function pe({ children: e, className: t, onClick: n, ref: i, render: a, style: o
 		style: o,
 		type: "button"
 	});
-	return a === void 0 ? /* @__PURE__ */ v("button", { ...l }) : a(l);
+	return a === void 0 ? /* @__PURE__ */ _("button", { ...l }) : a(l);
 }
 function G(e) {
 	let [t, n] = h(null);
 	return U(() => {
 		if (e.mode === "inline" || !e.mounted) return;
-		let t = x({
+		let t = b({
 			origin: e.nodes.trigger,
 			...e.container === void 0 ? {} : { container: e.container }
 		});
@@ -299,7 +299,7 @@ function me(e, t) {
 			return;
 		}
 		let n = () => {
-			let t = e.getBoundingClientRect(), n = ie(a) ? t.width : t.height;
+			let t = e.getBoundingClientRect(), n = oe(a) ? t.width : t.height;
 			n > 0 && r(`${Math.round(o * n)}px`);
 		};
 		if (n(), typeof ResizeObserver > "u") return;
@@ -314,7 +314,7 @@ function me(e, t) {
 }
 var K = "var(--slotted-space-12, 4rem)";
 function q(e, t, n) {
-	return j({
+	return k({
 		atRest: e.extent === void 0 && e.live === null,
 		content: e.size === "content",
 		panel: t,
@@ -325,45 +325,45 @@ function q(e, t, n) {
 	});
 }
 function J(e, t, n) {
-	return P(t, n, e.size === "content");
+	return N(t, n, e.size === "content");
 }
 function he({ children: e, className: t, ref: n, render: a, style: o, ...c }) {
-	let u = V(), d = G(u), [f, p] = h(null), [g, b] = h(null), x = me(u, f), w = u.mode === "overlay", T = fe(), [E] = h(() => {
+	let u = z(), d = G(u), [f, p] = h(null), [g, te] = h(null), y = me(u, f), b = u.mode === "overlay", C = fe(), [w] = h(() => {
 		if (typeof document > "u") return null;
 		let e = document.createElement("div");
 		return e.style.display = "contents", W.add(e), e;
-	}), ee = s((e) => {
-		e !== null && E !== null && (W.add(e), w ? d !== null && d.append(E) : e.append(E));
+	}), ne = s((e) => {
+		e !== null && w !== null && (W.add(e), b ? d !== null && d.append(w) : e.append(w));
 	}, [
-		E,
 		w,
+		b,
 		d
-	]), te = m(!1), k = T && E !== null && u.mounted && (!w || d !== null || te.current);
+	]), re = m(!1), D = C && w !== null && u.mounted && (!b || d !== null || re.current);
 	U(() => {
-		te.current = k;
+		re.current = D;
 	});
-	let ne = !w || d !== null, A = u.titleId !== "" && c["aria-label"] === void 0 && (w || c.role !== void 0), { registerLayer: re } = u, j = s((e) => {
-		p(e), re(e);
-	}, [re]), M = m(u);
-	M.current = u, l(() => {
-		if (g === null || f === null || !u.open || !ne) return;
-		let e = u.nodes.trigger === null ? [] : [u.nodes.trigger], t = w ? S(f, {
+	let ie = !b || d !== null, O = u.titleId !== "" && c["aria-label"] === void 0 && (b || c.role !== void 0), { registerLayer: ae } = u, k = s((e) => {
+		p(e), ae(e);
+	}, [ae]), j = m(u);
+	j.current = u, l(() => {
+		if (g === null || f === null || !u.open || !ie) return;
+		let e = u.nodes.trigger === null ? [] : [u.nodes.trigger], t = b ? x(f, {
 			back: u.modal && u.back === "close",
 			branches: e,
 			content: g,
 			escape: u.escape === "close",
 			modal: u.modal,
 			onDismiss: (e) => {
-				if (e.reason === "outsidePress" && M.current.outsidePress === "none") return e.cancel();
-				M.current.close(e.reason, void 0, e.source);
+				if (e.reason === "outsidePress" && j.current.outsidePress === "none") return e.cancel();
+				j.current.close(e.reason, void 0, e.source);
 			},
 			outsidePress: u.outsidePress === "close",
 			outsidePressEvent: "click"
 		}) : null, n = u.initialFocus, r = u.finalFocus, a = g.ownerDocument.activeElement, o = a?.parentElement ?? null, s = i(g, {
-			contain: w && u.modal,
-			initial: w ? typeof n == "object" && n ? () => n.current : n : !1,
+			contain: b && u.modal,
+			initial: b ? typeof n == "object" && n ? () => n.current : n : !1,
 			restore: r === void 0 ? () => {
-				if (a === null || a === a.ownerDocument.body) return M.current.nodes.trigger;
+				if (a === null || a === a.ownerDocument.body) return j.current.nodes.trigger;
 				if (a.isConnected) return a;
 				let e = o;
 				for (; e !== null && !e.isConnected;) e = e.parentElement;
@@ -382,19 +382,19 @@ function he({ children: e, className: t, ref: n, render: a, style: o, ...c }) {
 		u.open,
 		u.outsidePress,
 		f,
-		w,
+		b,
 		g,
-		ne
+		ie
 	]);
-	let { setRest: N, open: P, extent: F, live: L } = u;
+	let { setRest: M, open: N, extent: P, live: I, dragging: L } = u;
 	U(() => {
 		let e = ue(f, u.mode);
-		if (g === null || e === null || !P || F !== void 0 || L !== null) return;
-		let t = ie(u.side), n = () => {
+		if (g === null || e === null || !N || P !== void 0 || I !== null || L) return;
+		let t = oe(u.side), n = () => {
 			let n = e.getBoundingClientRect(), r = t ? n.width : n.height;
 			if (r <= 0) return;
 			let i = t ? g.offsetWidth : g.offsetHeight;
-			N(Math.round(i / r * 1e3) / 1e3);
+			M(Math.round(i / r * 1e3) / 1e3);
 		};
 		if (typeof ResizeObserver > "u") {
 			n();
@@ -406,88 +406,97 @@ function he({ children: e, className: t, ref: n, render: a, style: o, ...c }) {
 		f,
 		u.mode,
 		u.side,
-		F,
-		P,
 		L,
+		P,
+		N,
+		I,
 		g,
-		N
+		M
 	]), l(() => {
-		if (!w || f === null || !P) return;
-		let e = I(f.ownerDocument.defaultView, (e) => {
+		if (!b || f === null || !N) return;
+		let e = F(f.ownerDocument.defaultView, (e) => {
 			e === 0 ? f.style.removeProperty("--slotted-keyboard-inset") : f.style.setProperty("--slotted-keyboard-inset", `${e}px`);
 		});
 		return () => {
 			e(), f.style.removeProperty("--slotted-keyboard-inset");
 		};
 	}, [
-		P,
+		N,
 		f,
-		w
+		b
 	]);
-	let R = w && u.side === "bottom" && u.drag === "panel";
+	let R = b && u.side === "bottom" && u.drag === "panel";
 	if (l(() => {
-		if (!R || g === null || f === null || !P) return;
+		if (!R || g === null || f === null || !N) return;
 		let e = 0, t = 0, n = 0, r = {
 			rest: void 0,
 			stops: []
-		}, i = () => (e = f.getBoundingClientRect().height, e > 0 ? g.offsetHeight / e : 0);
-		return D(g, {
-			enabled: () => M.current.open,
+		}, i = {
+			extent: "",
+			undimmed: !1
+		}, a = () => {
+			i.extent === "" ? f.style.removeProperty("--slotted-drawer-extent") : f.style.setProperty("--slotted-drawer-extent", i.extent), f.toggleAttribute("data-undimmed", i.undimmed);
+		}, o = () => (e = f.getBoundingClientRect().height, e > 0 ? g.offsetHeight / e : 0);
+		return T(g, {
+			enabled: () => j.current.open,
 			canGrow: () => {
-				let t = i(), n = q(M.current, g, e).stops.at(-1);
-				return n !== void 0 && t < n && !ae(t, n);
+				let t = o(), n = q(j.current, g, e).stops.at(-1);
+				return n !== void 0 && t < n && !A(t, n);
 			},
 			onStart: () => {
-				t = i(), n = t, r = q(M.current, g, e), M.current.setDragging(!0), M.current.setLive(t);
+				t = o(), n = t, r = q(j.current, g, e), i = {
+					extent: f.style.getPropertyValue("--slotted-drawer-extent"),
+					undimmed: f.hasAttribute("data-undimmed")
+				}, j.current.setDragging(!0);
 			},
 			onMove: (i) => {
 				if (e <= 0) return;
 				n = Math.max(0, t + i / e);
-				let a = r.stops.at(-1) ?? t;
-				M.current.setLive(O(n, a));
+				let a = r.stops.at(-1) ?? t, o = E(n, a);
+				f.style.setProperty("--slotted-drawer-extent", `${String(Math.round(o * e))}px`), f.toggleAttribute("data-undimmed", o < j.current.scrimFrom);
 			},
 			onEnd: (t) => {
-				let i = M.current;
+				let i = j.current;
 				i.setDragging(!1);
-				let a = oe({
+				let o = se({
 					fraction: Math.min(n, r.stops.at(-1) ?? n),
 					span: e,
 					stops: r.stops,
 					velocity: e > 0 ? t / e : 0
 				});
-				if (a === "close") {
+				if (o === "close") {
 					i.close("pointer", void 0, null), requestAnimationFrame(() => {
-						M.current.open && M.current.setLive(null);
+						j.current.open && a();
 					});
 					return;
 				}
-				i.setLive(null), i.requestExtent(J(i, a, r.rest), "pointer", null);
+				a(), i.requestExtent(J(i, o, r.rest), "pointer", null);
 			}
 		});
 	}, [
-		P,
+		N,
 		f,
 		g,
 		R
 	]), !u.mounted) return null;
-	if (!T || E === null) {
-		if (w) return null;
-	} else if (!k) return null;
-	let z = r({
+	if (!C || w === null) {
+		if (b) return null;
+	} else if (!D) return null;
+	let ce = b && u.side === "bottom" && (u.size === "full" || u.extent !== void 0 && A(u.extent, 1)), B = r({
 		...c,
 		...u.descriptionId === "" ? {} : { "aria-describedby": u.descriptionId },
-		...A ? { "aria-labelledby": u.titleId } : {},
+		...O ? { "aria-labelledby": u.titleId } : {},
 		...u.modal ? { "aria-modal": !0 } : {},
 		children: e,
 		className: t,
 		"data-part": "panel",
 		id: u.panelId,
 		ref: (e) => {
-			b(e), u.nodes.panel = e, typeof n == "function" ? n(e) : n && (n.current = e);
+			te(e), u.nodes.panel = e, typeof n == "function" ? n(e) : n && (n.current = e);
 		},
-		...w ? { role: "dialog" } : {},
+		...b ? { role: "dialog" } : {},
 		style: o
-	}), B = /* @__PURE__ */ y("div", {
+	}), V = /* @__PURE__ */ v("div", {
 		"data-mode": u.mode,
 		"data-mount": u.mount,
 		"data-part": "root",
@@ -497,41 +506,42 @@ function he({ children: e, className: t, ref: n, render: a, style: o, ...c }) {
 		"data-ui": "drawer",
 		"data-ui-drawer": "",
 		...u.dragging ? { "data-dragging": "" } : {},
-		...w && u.side === "bottom" ? { "data-drag": u.drag } : {},
-		...w && (u.live ?? u.extent ?? u.rest ?? 1) < u.scrimFrom ? { "data-undimmed": "" } : {},
+		...b && u.side === "bottom" ? { "data-drag": u.drag } : {},
+		...ce ? { "data-expanded": "" } : {},
+		...b && (u.live ?? u.extent ?? u.rest ?? 1) < u.scrimFrom ? { "data-undimmed": "" } : {},
 		...u.loading ? { "data-loading": "" } : {},
 		...u.modal ? { "data-modal": "" } : {},
 		...u.interactive ? {} : { inert: !0 },
 		...u.visible ? { "data-open": "" } : {},
-		ref: j,
-		style: x === void 0 ? void 0 : { "--slotted-drawer-extent": x },
-		children: [w ? /* @__PURE__ */ v("div", {
+		ref: k,
+		style: y === void 0 ? void 0 : { "--slotted-drawer-extent": y },
+		children: [b ? /* @__PURE__ */ _("div", {
 			"data-part": "backdrop",
 			"data-part-backdrop": ""
-		}) : null, a === void 0 ? /* @__PURE__ */ v("div", { ...z }) : a(z)]
+		}) : null, a === void 0 ? /* @__PURE__ */ _("div", { ...B }) : a(B)]
 	});
-	return !T || E === null ? /* @__PURE__ */ v("div", {
+	return !C || w === null ? /* @__PURE__ */ _("div", {
 		style: ge,
-		children: B
-	}) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
-		ref: ee,
+		children: V
+	}) : /* @__PURE__ */ v(ee, { children: [/* @__PURE__ */ _("div", {
+		ref: ne,
 		style: ge
-	}), C(B, E)] });
+	}), S(V, w)] });
 }
 var ge = { display: "contents" }, _e = 3;
-function Y({ className: e, largeStep: t = T, onDoubleClick: n, onKeyDown: i, onPointerDown: a, ref: o, render: s, step: c = E, style: l, ...u }) {
-	let d = V(), f = m(null), p = m(null), h = m([]), g = m(null), b = m(null), x = m(null), S = ie(d.side), C = d.live ?? d.extent ?? d.rest ?? d.minExtent, w = (e) => Math.round(F(e, 0, 1) * 100), D = () => {
+function Y({ className: e, largeStep: t = C, onDoubleClick: n, onKeyDown: i, onPointerDown: a, ref: o, render: s, step: c = w, style: l, ...u }) {
+	let d = z(), f = m(null), p = m(null), h = m([]), g = m(null), te = m(null), y = m(null), b = oe(d.side), x = d.live ?? d.extent ?? d.rest ?? d.minExtent, S = (e) => Math.round(P(e, 0, 1) * 100), T = () => {
 		let e = ue(d.nodes.layer, d.mode);
 		return e === null ? null : e.getBoundingClientRect();
-	}, O = () => {
-		let e = d.nodes.panel, t = D();
+	}, E = () => {
+		let e = d.nodes.panel, t = T();
 		return e === null || t === null || d.snapPoints.length === 0 ? {
 			rest: d.rest,
 			stops: []
-		} : q(d, e, S ? t.width : t.height);
-	}, ne = (e, t) => {
+		} : q(d, e, b ? t.width : t.height);
+	}, ie = (e, t) => {
 		p.current = e, d.requestExtent(e, "pointer", t);
-	}, j = (e, t) => k({
+	}, k = (e, t) => D({
 		point: {
 			x: e.clientX,
 			y: e.clientY
@@ -539,47 +549,47 @@ function Y({ className: e, largeStep: t = T, onDoubleClick: n, onKeyDown: i, onP
 		rect: t,
 		rtl: le(f.current),
 		side: d.side
-	}), P = (e) => {
+	}), N = (e) => {
 		if (a?.(e), e.defaultPrevented || e.button !== 0) return;
-		let t = D();
+		let t = T();
 		t !== null && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.focus(), g.current = {
 			moved: !1,
-			offset: C - j(e, t),
+			offset: x - k(e, t),
 			x: e.clientX,
 			y: e.clientY
 		}, h.current = []);
-	}, I = (e) => {
+	}, F = (e) => {
 		let t = g.current;
 		if (t === null) return;
-		let n = D();
+		let n = T();
 		if (n === null) return;
 		if (!t.moved) {
 			if (Math.hypot(e.clientX - t.x, e.clientY - t.y) < _e) return;
-			t.moved = !0, x.current?.(), x.current = re(f.current?.ownerDocument, S ? "col-resize" : "row-resize"), d.setDragging(!0);
+			t.moved = !0, y.current?.(), y.current = ae(f.current?.ownerDocument, b ? "col-resize" : "row-resize"), d.setDragging(!0);
 		}
-		let r = F(j(e, n) + t.offset, 0, 1);
+		let r = P(k(e, n) + t.offset, 0, 1);
 		h.current = [...h.current, {
 			at: e.timeStamp,
 			fraction: r
-		}].slice(-3), ne(r, e);
-	}, L = (e) => {
-		let { rest: t, stops: n } = O();
+		}].slice(-3), ie(r, e);
+	}, I = (e) => {
+		let { rest: t, stops: n } = E();
 		if (n.length < 2) return;
-		let r = d.live ?? d.extent ?? t ?? C, i = n.find((e) => e > r && !ae(e, r)) ?? n[0];
+		let r = d.live ?? d.extent ?? t ?? x, i = n.find((e) => e > r && !A(e, r)) ?? n[0];
 		d.requestExtent(J(d, i, t), "pointer", e);
-	}, R = (e) => {
+	}, L = (e) => {
 		let t = g.current;
 		if (t === null) return;
 		if (g.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), !t.moved) {
-			e.type === "pointerup" && L(e);
+			e.type === "pointerup" && I(e);
 			return;
 		}
-		x.current?.(), x.current = null, d.setDragging(!1);
-		let n = D(), r = n === null ? 0 : S ? n.width : n.height, i = p.current ?? C, a = A(h.current);
+		y.current?.(), y.current = null, d.setDragging(!1);
+		let n = T(), r = n === null ? 0 : b ? n.width : n.height, i = p.current ?? x, a = O(h.current);
 		p.current = null, h.current = [];
-		let { rest: o, stops: s } = O();
+		let { rest: o, stops: s } = E();
 		if (s.length > 0) {
-			let t = oe({
+			let t = se({
 				fraction: i,
 				span: r,
 				stops: s,
@@ -592,23 +602,23 @@ function Y({ className: e, largeStep: t = T, onDoubleClick: n, onKeyDown: i, onP
 			d.requestExtent(J(d, t, o), "pointer", e);
 			return;
 		}
-		if (i < d.minExtent || a * r <= -ee) {
+		if (i < d.minExtent || a * r <= -ne) {
 			d.close("pointer", void 0, e), d.requestExtent(d.minExtent, "pointer", e);
 			return;
 		}
-		d.requestExtent(F(i, d.minExtent, d.maxExtent), "pointer", e);
-	}, z = (e) => {
+		d.requestExtent(P(i, d.minExtent, d.maxExtent), "pointer", e);
+	}, R = (e) => {
 		if (i?.(e), e.defaultPrevented) return;
-		let n = te(d.side, le(f.current)), r = S ? "ArrowLeft" : "ArrowUp", a = S ? "ArrowRight" : "ArrowDown", o = (n) => {
+		let n = re(d.side, le(f.current)), r = b ? "ArrowLeft" : "ArrowUp", a = b ? "ArrowRight" : "ArrowDown", o = (n) => {
 			e.preventDefault();
-			let r = D(), i = r === null ? 0 : M({
+			let r = T(), i = r === null ? 0 : j({
 				pixels: e.shiftKey ? t : c,
 				rect: r,
 				side: d.side
-			}), { rest: a, stops: o } = O(), s = N({
+			}), { rest: a, stops: o } = E(), s = M({
 				amount: i,
 				direction: n,
-				fraction: C,
+				fraction: x,
 				max: o.at(-1) ?? d.maxExtent,
 				min: o[0] ?? d.minExtent,
 				snapPoints: o
@@ -616,7 +626,7 @@ function Y({ className: e, largeStep: t = T, onDoubleClick: n, onKeyDown: i, onP
 			d.requestExtent(J(d, s, a), "keyboard", e);
 		}, s = (t) => {
 			e.preventDefault();
-			let { rest: n, stops: r } = O(), i = t === "first" ? r[0] ?? d.minExtent : r.at(-1) ?? d.maxExtent;
+			let { rest: n, stops: r } = E(), i = t === "first" ? r[0] ?? d.minExtent : r.at(-1) ?? d.maxExtent;
 			d.requestExtent(J(d, i, n), "keyboard", e);
 		};
 		switch (e.key) {
@@ -624,55 +634,55 @@ function Y({ className: e, largeStep: t = T, onDoubleClick: n, onKeyDown: i, onP
 			case a: return o(n ? 1 : -1);
 			case "Home": return s("first");
 			case "End": return s("last");
-			case "Enter": return e.preventDefault(), C > d.minExtent ? (b.current = C, d.requestExtent(d.minExtent, "keyboard", e)) : d.requestExtent(b.current ?? d.maxExtent, "keyboard", e);
+			case "Enter": return e.preventDefault(), x > d.minExtent ? (te.current = x, d.requestExtent(d.minExtent, "keyboard", e)) : d.requestExtent(te.current ?? d.maxExtent, "keyboard", e);
 			default: return;
 		}
-	}, B = (e) => {
+	}, ce = (e) => {
 		n?.(e), !e.defaultPrevented && (e.preventDefault(), d.requestExtent(d.defaultExtent, "pointer", e));
-	}, se = d.size === "content" && d.rest !== void 0 ? Math.min(d.minExtent, d.rest) : d.minExtent, ce = r({
+	}, B = d.size === "content" && d.rest !== void 0 ? Math.min(d.minExtent, d.rest) : d.minExtent, V = r({
 		"aria-controls": d.panelId,
 		...d.titleId === "" ? {} : { "aria-labelledby": d.titleId },
-		"aria-orientation": S ? "vertical" : "horizontal",
-		"aria-valuemax": w(d.maxExtent),
-		"aria-valuemin": w(se),
-		"aria-valuenow": w(F(C, se, d.maxExtent)),
+		"aria-orientation": b ? "vertical" : "horizontal",
+		"aria-valuemax": S(d.maxExtent),
+		"aria-valuemin": S(B),
+		"aria-valuenow": S(P(x, B, d.maxExtent)),
 		...u,
 		className: e,
 		"data-part": "resizer",
-		onDoubleClick: B,
-		onKeyDown: z,
-		onLostPointerCapture: R,
-		onPointerDown: P,
-		onPointerMove: I,
-		onPointerUp: R,
+		onDoubleClick: ce,
+		onKeyDown: R,
+		onLostPointerCapture: L,
+		onPointerDown: N,
+		onPointerMove: F,
+		onPointerUp: L,
 		role: "separator",
 		style: l,
 		tabIndex: 0
 	}), H = (e) => {
 		f.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
-	}, U = /* @__PURE__ */ y(_, { children: [
-		/* @__PURE__ */ v("span", {
+	}, U = /* @__PURE__ */ v(ee, { children: [
+		/* @__PURE__ */ _("span", {
 			"aria-hidden": "true",
 			"data-part": "line",
 			"data-part-line": ""
 		}),
-		/* @__PURE__ */ v("span", {
+		/* @__PURE__ */ _("span", {
 			"aria-hidden": "true",
 			"data-part": "grip",
 			"data-part-grip": ""
 		}),
-		/* @__PURE__ */ v("span", {
+		/* @__PURE__ */ _("span", {
 			"aria-hidden": "true",
 			"data-part": "line",
 			"data-part-line": ""
 		})
 	] });
-	return s === void 0 ? /* @__PURE__ */ v("div", {
-		...ce,
+	return s === void 0 ? /* @__PURE__ */ _("div", {
+		...V,
 		ref: H,
 		children: U
 	}) : s({
-		...ce,
+		...V,
 		children: U,
 		ref: H
 	});
@@ -685,13 +695,13 @@ function X({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		"data-part": "header",
 		style: a
 	});
-	return i === void 0 ? /* @__PURE__ */ v("header", {
+	return i === void 0 ? /* @__PURE__ */ _("header", {
 		...s,
 		ref: n
 	}) : i(s);
 }
 function Z({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
-	let s = V();
+	let s = z();
 	l(() => s.announce("title"), [s]);
 	let c = r({
 		...o,
@@ -701,13 +711,13 @@ function Z({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		id: s.titleId === "" ? void 0 : s.titleId,
 		style: a
 	});
-	return i === void 0 ? /* @__PURE__ */ v("h2", {
+	return i === void 0 ? /* @__PURE__ */ _("h2", {
 		...c,
 		ref: n
 	}) : i(c);
 }
 function ve({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
-	let s = V();
+	let s = z();
 	l(() => s.announce("description"), [s]);
 	let c = r({
 		...o,
@@ -717,13 +727,13 @@ function ve({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		id: s.descriptionId === "" ? void 0 : s.descriptionId,
 		style: a
 	});
-	return i === void 0 ? /* @__PURE__ */ v("p", {
+	return i === void 0 ? /* @__PURE__ */ _("p", {
 		...c,
 		ref: n
 	}) : i(c);
 }
 function Q({ children: e, className: t, inset: n, ref: i, render: a, style: o, ...s }) {
-	let c = V(), l = r({
+	let c = z(), l = r({
 		...s,
 		...c.loading ? { "aria-busy": !0 } : {},
 		children: e,
@@ -732,7 +742,7 @@ function Q({ children: e, className: t, inset: n, ref: i, render: a, style: o, .
 		"data-part": "body",
 		style: o
 	});
-	return a === void 0 ? /* @__PURE__ */ v("div", {
+	return a === void 0 ? /* @__PURE__ */ _("div", {
 		...l,
 		ref: i
 	}) : a(l);
@@ -745,16 +755,16 @@ function ye({ children: e, className: t, ref: n, render: i, style: a, ...o }) {
 		"data-part": "footer",
 		style: a
 	});
-	return i === void 0 ? /* @__PURE__ */ v("footer", {
+	return i === void 0 ? /* @__PURE__ */ _("footer", {
 		...s,
 		ref: n
 	}) : i(s);
 }
-function be({ children: n, className: i, onClick: a, ref: o, render: s, style: c, value: l, ...u }) {
-	let d = V(), f = r({
+function be({ children: e, className: i, onClick: a, ref: o, render: s, style: c, value: l, ...u }) {
+	let d = z(), f = r({
 		"aria-label": d.t("close"),
 		...u,
-		children: n ?? /* @__PURE__ */ v(t, { children: /* @__PURE__ */ v(e, { name: "x" }) }),
+		children: e ?? /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: "x" }) }),
 		className: i,
 		"data-part": "close",
 		onClick: (e) => {
@@ -763,10 +773,10 @@ function be({ children: n, className: i, onClick: a, ref: o, render: s, style: c
 		style: c,
 		type: "button"
 	});
-	return s === void 0 ? /* @__PURE__ */ v("button", {
+	return s === void 0 ? /* @__PURE__ */ _("button", {
 		...f,
 		ref: o
 	}) : s(f);
 }
 //#endregion
-export { X as a, Z as c, V as d, z as f, ye as i, pe as l, be as n, he as o, R as p, ve as r, Y as s, Q as t, ce as u };
+export { X as a, Z as c, z as d, R as f, ye as i, pe as l, be as n, he as o, L as p, ve as r, Y as s, Q as t, V as u };