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

package/dist/{app-shell-BlkqQrOx.js → app-shell-Cb_kDBeV.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 { i as r, n as i, o as a } from "./progress-indicator-D0acshNn.js";
 import { keyedProps as o } from "@slotted/core/selector-key";
 import { createFocusScope as s, focusTarget as c } from "@slotted/core/focus";
 import { createControllable as l } from "@slotted/core/state";
 import { createContext as u, isValidElement as d, useCallback as f, useContext as p, useEffect as m, useId as h, useImperativeHandle as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
 import { Fragment as ee, jsx as x, jsxs as te } from "react/jsx-runtime";
-import { createPresence as S } from "@slotted/core/presence";
-import { setPortalContainer as C } from "@slotted/core/portal";
-import { createDismissableLayer as ne } from "@slotted/core/dismissable-layer";
+import { createPresence as ne } from "@slotted/core/presence";
 import { appShellMessages as re } from "@slotted/core/i18n";
-import { EXTENT_LARGE_STEP_PX as ie, EXTENT_STEP_PX as ae, anchorsAtStart as oe, extentAtPoint as se, holdResizeGesture as ce, stepAmountFromPixels as le, stepExtent as ue } from "@slotted/core/extent";
-import { COMPACT_BELOW as de, clamp as w, createWidthGate as fe } from "@slotted/core/measure";
+import { setPortalContainer as ie } from "@slotted/core/portal";
+import { createDismissableLayer as ae } from "@slotted/core/dismissable-layer";
+import { EXTENT_LARGE_STEP_PX as oe, EXTENT_STEP_PX as se, anchorsAtStart as ce, extentAtPoint as le, holdResizeGesture as ue, stepAmountFromPixels as de, stepExtent as fe } from "@slotted/core/extent";
+import { COMPACT_BELOW as pe, clamp as S, createWidthGate as me } from "@slotted/core/measure";
 //#region src/app-shell/app-shell-defaults.tsx
-var pe = u({
+var he = u({
 	asideMode: "auto",
 	asideSize: "md",
 	canvas: "inset",
@@ -30,12 +30,12 @@ var pe = u({
 	scroll: "content",
 	separation: "rule"
 });
-function T() {
-	return p(pe);
+function C() {
+	return p(he);
 }
-function me({ children: e, ...t }) {
-	let n = T();
-	return /* @__PURE__ */ x(pe.Provider, {
+function ge({ children: e, ...t }) {
+	let n = C();
+	return /* @__PURE__ */ x(he.Provider, {
 		value: {
 			asideMode: t.asideMode ?? n.asideMode,
 			asideSize: t.asideSize ?? n.asideSize,
@@ -58,8 +58,8 @@ function me({ children: e, ...t }) {
 }
 //#endregion
 //#region src/app-shell/app-shell-parts.tsx
-function E(e, t) {
-	let n = I();
+function w(e, t) {
+	let n = L();
 	return f((r) => {
 		n.nodes[e] = r, typeof t == "function" ? t(r) : t != null && (t.current = r);
 	}, [
@@ -68,68 +68,85 @@ function E(e, t) {
 		e
 	]);
 }
-function D(e) {
-	let t = I();
+function T(e) {
+	return f((t) => {
+		typeof e == "function" ? e(t) : e != null && (e.current = t);
+	}, [e]);
+}
+function E(e) {
+	let t = L();
 	m(() => t.register(e), [e, t]);
 }
-function O(e, t) {
+function D(e, t) {
 	return t === void 0 ? null : t(e);
 }
-function he({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let s = E("banner", n), c = o({
+function _e({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = w("banner", n), c = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "banner",
 		style: i
 	});
-	return O(c, r) ?? /* @__PURE__ */ x("header", {
+	return D({
+		...c,
+		ref: s
+	}, r) ?? /* @__PURE__ */ x("header", {
 		...c,
 		ref: s
 	});
 }
-function ge({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function ve({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "brand",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
 		...s,
-		ref: n
+		ref: c
 	});
 }
-function _e({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function ye({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "centre",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
 		...s,
-		ref: n
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
 	});
 }
-function ve({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function be({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "actions",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
 		...s,
-		ref: n
+		ref: c
 	});
 }
-function ye({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
-	let l = I(), u = E("nav", i);
-	D("nav");
+function xe({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = w("nav", i);
+	E("nav");
 	let d = o({
 		...c,
 		"aria-label": e ?? l.t("nav"),
@@ -139,66 +156,81 @@ function ye({ "aria-label": e, children: t, className: n, id: r, ref: i, render:
 		id: r ?? l.navId,
 		style: s
 	});
-	return O(d, a) ?? /* @__PURE__ */ x("nav", {
+	return D({
+		...d,
+		ref: u
+	}, a) ?? /* @__PURE__ */ x("nav", {
 		...d,
 		ref: u
 	});
 }
-function be({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function Se({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "nav-rail",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
 		...s,
-		ref: n
+		ref: c
 	});
 }
-function xe({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function Ce({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "nav-header",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
 		...s,
-		ref: n
+		ref: c
 	});
 }
-function Se({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function we({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "nav-body",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
 		...s,
-		ref: n
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
 	});
 }
-function Ce({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function Te({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "nav-footer",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
 		...s,
-		ref: n
+		ref: c
 	});
 }
-function we({ children: e, className: t, id: n, ref: r, render: i, style: a, ...s }) {
-	let c = I(), l = E("main", r);
-	D("main");
+function O({ children: e, className: t, id: n, ref: r, render: i, style: a, ...s }) {
+	let c = L(), l = w("main", r);
+	E("main");
 	let u = o({
 		...c.busy ? { "aria-busy": !0 } : {},
 		...s,
@@ -208,13 +240,16 @@ function we({ children: e, className: t, id: n, ref: r, render: i, style: a, ...
 		id: n ?? c.mainId,
 		style: a
 	});
-	return O(u, i) ?? /* @__PURE__ */ x("main", {
+	return D({
+		...u,
+		ref: l
+	}, i) ?? /* @__PURE__ */ x("main", {
 		...u,
 		ref: l
 	});
 }
-function Te({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s, size: c, ...l }) {
-	let u = I(), d = a(), f = r({
+function k({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s, size: c, ...l }) {
+	let u = L(), d = a(), f = r({
 		delay: e ?? d.delay ?? 200,
 		loading: n,
 		minDuration: o ?? d.minDuration ?? 400,
@@ -236,9 +271,9 @@ function Te({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s
 		})
 	});
 }
-function k({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
-	let l = I(), u = E("aside", i);
-	D("aside");
+function A({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = w("aside", i);
+	E("aside");
 	let d = l.asideExtent, f = o({
 		...c,
 		"aria-label": e ?? l.t("aside"),
@@ -252,25 +287,31 @@ function k({ "aria-label": e, children: t, className: n, id: r, ref: i, render:
 			"--slotted-app-shell-aside-extent": `${Math.round(d * 1e4) / 100}cqi`
 		}
 	});
-	return O(f, a) ?? /* @__PURE__ */ x("aside", {
+	return D({
+		...f,
+		ref: u
+	}, a) ?? /* @__PURE__ */ x("aside", {
 		...f,
 		ref: u
 	});
 }
-function A({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function Ee({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "aside-header",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
 		...s,
-		ref: n
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
 	});
 }
-function Ee({ children: e, className: t, inset: n, ref: r, render: i, style: a, ...s }) {
+function De({ children: e, className: t, inset: n, ref: r, render: i, style: a, ...s }) {
 	let c = o({
 		...s,
 		children: e,
@@ -278,14 +319,17 @@ function Ee({ children: e, className: t, inset: n, ref: r, render: i, style: a,
 		...n === void 0 ? {} : { "data-inset": n },
 		"data-part": "aside-body",
 		style: a
-	});
-	return O(c, i) ?? /* @__PURE__ */ x("div", {
+	}), l = T(r);
+	return D({
 		...c,
-		ref: r
+		ref: l
+	}, i) ?? /* @__PURE__ */ x("div", {
+		...c,
+		ref: l
 	});
 }
-var De = typeof document > "u" ? m : _;
-function j(e) {
+var j = typeof document > "u" ? m : _;
+function Oe(e) {
 	return e !== null && getComputedStyle(e).direction === "rtl";
 }
 function M(e) {
@@ -298,10 +342,10 @@ function M(e) {
 		y: t.y
 	};
 }
-var Oe = 3;
-function N({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref: i, render: a, style: s, ...c }) {
-	let l = I(), u = y(null), d = y(null), f = y(null), [p, h] = b(void 0), g = l.navSide === "end" ? "start" : "end", _ = l.asideMode === "inline" && l.asideOpen, { asideExtent: v, nodes: ee, root: te } = l;
-	if (De(() => {
+var N = 3;
+function ke({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = y(null), d = y(null), f = y(null), [p, h] = b(void 0), g = l.navSide === "end" ? "start" : "end", _ = l.asideMode === "inline" && l.asideOpen, { asideExtent: v, nodes: ee, root: te } = l;
+	if (j(() => {
 		let e = ee.aside;
 		if (!_ || v !== void 0 || e === null) return;
 		let t = () => {
@@ -318,49 +362,49 @@ function N({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref:
 		te,
 		_
 	]), m(() => () => f.current?.(), []), !_) return null;
-	let S = w(l.asideExtent ?? p ?? l.minAsideExtent, l.minAsideExtent, l.maxAsideExtent), C = (e) => Math.round(w(e, 0, 1) * 100), ne = (e, t) => se({
+	let ne = S(l.asideExtent ?? p ?? l.minAsideExtent, l.minAsideExtent, l.maxAsideExtent), re = (e) => Math.round(S(e, 0, 1) * 100), ie = (e, t) => le({
 		point: {
 			x: e.clientX,
 			y: e.clientY
 		},
 		rect: t,
-		rtl: j(u.current),
+		rtl: Oe(u.current),
 		side: g
-	}), re = (e) => {
+	}), ae = (e) => {
 		if (r?.(e), e.defaultPrevented || e.button !== 0) return;
 		let t = M(l.root);
 		t === null || t.width <= 0 || (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.focus(), d.current = {
 			moved: !1,
-			offset: S - ne(e, t),
+			offset: ne - ie(e, t),
 			x: e.clientX
 		});
-	}, de = (e) => {
+	}, pe = (e) => {
 		let t = d.current;
 		if (t === null) return;
 		let n = M(l.root);
 		if (!(n === null || n.width <= 0)) {
 			if (!t.moved) {
-				if (Math.abs(e.clientX - t.x) < Oe) return;
-				t.moved = !0, f.current?.(), f.current = ce(u.current?.ownerDocument, "col-resize"), l.setAsideDragging(!0);
+				if (Math.abs(e.clientX - t.x) < N) return;
+				t.moved = !0, f.current?.(), f.current = ue(u.current?.ownerDocument, "col-resize"), l.setAsideDragging(!0);
 			}
-			l.setAsideExtent(ne(e, n) + t.offset, "pointer", e);
+			l.setAsideExtent(ie(e, n) + t.offset, "pointer", e);
 		}
-	}, fe = (e) => {
+	}, me = (e) => {
 		let t = d.current;
 		t !== null && (d.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), t.moved && (f.current?.(), f.current = null, l.setAsideDragging(!1)));
-	}, pe = (e) => {
+	}, he = (e) => {
 		if (n?.(e), e.defaultPrevented) return;
-		let t = oe(g, j(u.current)), r = (t) => {
+		let t = ce(g, Oe(u.current)), r = (t) => {
 			e.preventDefault();
-			let n = M(l.root), r = n === null ? 0 : le({
-				pixels: e.shiftKey ? ie : ae,
+			let n = M(l.root), r = n === null ? 0 : de({
+				pixels: e.shiftKey ? oe : se,
 				rect: n,
 				side: g
 			});
-			l.setAsideExtent(ue({
+			l.setAsideExtent(fe({
 				amount: r,
 				direction: t,
-				fraction: S,
+				fraction: ne,
 				max: l.maxAsideExtent,
 				min: l.minAsideExtent
 			}), "keyboard", e);
@@ -372,72 +416,78 @@ function N({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref:
 			case "End": return e.preventDefault(), l.setAsideExtent(l.maxAsideExtent, "keyboard", e);
 			default: return;
 		}
-	}, T = (e) => {
+	}, C = (e) => {
 		u.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-	}, me = o({
+	}, ge = o({
 		...c,
 		"aria-controls": l.asideId,
 		"aria-label": e ?? l.t("resizeAside"),
 		"aria-orientation": "vertical",
-		"aria-valuemax": C(l.maxAsideExtent),
-		"aria-valuemin": C(l.minAsideExtent),
-		"aria-valuenow": C(S),
+		"aria-valuemax": re(l.maxAsideExtent),
+		"aria-valuemin": re(l.minAsideExtent),
+		"aria-valuenow": re(ne),
 		className: t,
 		"data-part": "aside-resizer",
-		onKeyDown: pe,
-		onLostPointerCapture: fe,
-		onPointerDown: re,
-		onPointerMove: de,
-		onPointerUp: fe,
+		onKeyDown: he,
+		onLostPointerCapture: me,
+		onPointerDown: ae,
+		onPointerMove: pe,
+		onPointerUp: me,
 		role: "separator",
 		style: s,
 		tabIndex: 0
 	});
 	return a === void 0 ? /* @__PURE__ */ x("div", {
-		...me,
-		ref: T
+		...ge,
+		ref: C
 	}) : a({
-		...me,
-		ref: T
+		...ge,
+		ref: C
 	});
 }
-function ke({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function Ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let s = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "aside-footer",
 		style: i
-	});
-	return O(s, r) ?? /* @__PURE__ */ x("div", {
+	}), c = T(n);
+	return D({
 		...s,
-		ref: n
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
 	});
 }
-function Ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let s = E("footer", n), c = o({
+function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = w("footer", n), c = o({
 		...a,
 		children: e,
 		className: t,
 		"data-part": "footer",
 		style: i
 	});
-	return O(c, r) ?? /* @__PURE__ */ x("footer", {
+	return D({
+		...c,
+		ref: s
+	}, r) ?? /* @__PURE__ */ x("footer", {
 		...c,
 		ref: s
 	});
 }
-function P({ "aria-controls": n, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
-	let h = I(), g = E("toggle", l), _ = f((e) => {
+function F({ "aria-controls": e, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
+	let h = L(), g = w("toggle", l), _ = f((e) => {
 		if (c?.(e), e.defaultPrevented) return;
 		let t = e.detail === 0 ? "keyboard" : "pointer";
 		h.setOpen(!h.open, t, e.nativeEvent);
 	}, [c, h]), v = o({
 		...m,
-		"aria-controls": n ?? h.navId,
+		"aria-controls": e ?? h.navId,
 		"aria-expanded": h.open,
 		"aria-label": r ?? (h.open ? h.t("close") : h.t("open")),
-		children: i ?? /* @__PURE__ */ x(t, { children: /* @__PURE__ */ x(e, { name: h.open ? "panel-close" : "panel-open" }) }),
+		children: i ?? /* @__PURE__ */ x(n, { children: /* @__PURE__ */ x(t, { name: h.open ? "panel-close" : "panel-open" }) }),
 		className: a,
 		"data-part": "nav-toggle",
 		id: s ?? h.toggleId,
@@ -445,22 +495,25 @@ function P({ "aria-controls": n, "aria-label": r, children: i, className: a, id:
 		style: d,
 		type: p ?? "button"
 	});
-	return O(v, u) ?? /* @__PURE__ */ x("button", {
+	return D({
+		...v,
+		ref: g
+	}, u) ?? /* @__PURE__ */ x("button", {
 		...v,
 		ref: g
 	});
 }
-function F({ "aria-controls": n, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
-	let h = I(), g = E("asideToggle", l), _ = f((e) => {
+function I({ "aria-controls": e, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
+	let h = L(), g = w("asideToggle", l), _ = f((e) => {
 		if (c?.(e), e.defaultPrevented) return;
 		let t = e.detail === 0 ? "keyboard" : "pointer";
 		h.setAsideOpen(!h.asideOpen, t, e.nativeEvent);
 	}, [c, h]), v = o({
 		...m,
-		"aria-controls": n ?? h.asideId,
+		"aria-controls": e ?? h.asideId,
 		"aria-expanded": h.asideOpen,
 		"aria-label": r ?? (h.asideOpen ? h.t("closeAside") : h.t("openAside")),
-		children: i ?? /* @__PURE__ */ x(t, { children: /* @__PURE__ */ x(e, { name: h.asideOpen ? "panel-close" : "panel-open" }) }),
+		children: i ?? /* @__PURE__ */ x(n, { children: /* @__PURE__ */ x(t, { name: h.asideOpen ? "panel-close" : "panel-open" }) }),
 		className: a,
 		"data-part": "aside-toggle",
 		id: s ?? h.asideToggleId,
@@ -468,31 +521,34 @@ function F({ "aria-controls": n, "aria-label": r, children: i, className: a, id:
 		style: d,
 		type: p ?? "button"
 	});
-	return O(v, u) ?? /* @__PURE__ */ x("button", {
+	return D({
+		...v,
+		ref: g
+	}, u) ?? /* @__PURE__ */ x("button", {
 		...v,
 		ref: g
 	});
 }
 //#endregion
 //#region src/app-shell/app-shell.tsx
-var je = de, Me = u(void 0);
+var je = pe, Me = u(void 0);
 function Ne(e, t) {
 	if (Array.isArray(e)) {
 		for (let n of e) Ne(n, t);
 		return t;
 	}
-	return !d(e) || e.type === Pe || (e.type === we ? t.main = !0 : e.type === ye ? t.nav = !0 : e.type === k ? t.aside = !0 : Ne(e.props.children, t)), t;
+	return !d(e) || e.type === R || (e.type === O ? t.main = !0 : e.type === xe ? t.nav = !0 : e.type === A ? t.aside = !0 : Ne(e.props.children, t)), t;
 }
-function I() {
+function L() {
 	let e = p(Me);
 	if (e === void 0) throw Error("Every app-shell part must be rendered inside AppShell.");
 	return e;
 }
-function L() {
+function Pe() {
 	return p(Me);
 }
-function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas: a, children: u, className: d, closeOnNavigate: p, collapsedTo: _, defaultAsideExtent: ie, defaultAsideOpen: ae, defaultNavOpen: oe, escape: se, back: ce, maxAsideExtent: le, messages: ue, minAsideExtent: de, modal: pe, navMode: me, navOpen: E, navSide: D, navSize: O, onAsideExtentChange: he, onAsideOpenChange: ge, onNavOpenChange: _e, outsidePress: ve, primary: ye, ref: be, render: xe, scroll: Se, separation: Ce, style: we, ...Te }) {
-	let k = T(), A = h(), [Ee, De] = b(oe ?? !0), j = E ?? Ee, [M, Oe] = b(ae ?? !0), N = r ?? M, [ke, Ae] = b(ie), P = e ?? ke, F = w(de ?? .16, 0, 1), I = w(le ?? .6, F, 1), [L, Pe] = b(!1), Fe = i ?? k.asideSize, Ie = t ?? k.asideMode, Le = a ?? k.canvas, R = p ?? k.closeOnNavigate, Re = _ ?? k.collapsedTo, ze = Ce ?? k.separation, z = se ?? k.escape, Be = ce ?? k.back, B = pe ?? k.modal, Ve = D ?? k.navSide, He = O ?? k.navSize, V = ve ?? k.outsidePress, Ue = ye ?? k.primary, We = Se ?? k.scroll, Ge = me ?? k.navMode, H = n(re, ue), [U, Ke] = b(null), [W, qe] = b(void 0), G = Ge === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Ge, K = Ie === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Ie, q = y({
+function R({ asideExtent: t, asideMode: n, asideOpen: r, asideSize: i, canvas: a, children: u, className: d, closeOnNavigate: p, collapsedTo: _, defaultAsideExtent: oe, defaultAsideOpen: se, defaultNavOpen: ce, escape: le, back: ue, maxAsideExtent: de, messages: fe, minAsideExtent: pe, modal: he, navMode: ge, navOpen: w, navSide: T, navSize: E, onAsideExtentChange: D, onAsideOpenChange: _e, onNavOpenChange: ve, outsidePress: ye, primary: be, ref: xe, render: Se, scroll: Ce, separation: we, style: Te, ...O }) {
+	let k = C(), A = h(), [Ee, De] = b(ce ?? !0), j = w ?? Ee, [Oe, M] = b(se ?? !0), N = r ?? Oe, [ke, Ae] = b(oe), P = t ?? ke, F = S(pe ?? .16, 0, 1), I = S(de ?? .6, F, 1), [L, Pe] = b(!1), R = i ?? k.asideSize, Fe = n ?? k.asideMode, Ie = a ?? k.canvas, z = p ?? k.closeOnNavigate, Le = _ ?? k.collapsedTo, Re = we ?? k.separation, ze = le ?? k.escape, Be = ue ?? k.back, B = he ?? k.modal, Ve = T ?? k.navSide, He = E ?? k.navSize, V = ye ?? k.outsidePress, Ue = be ?? k.primary, We = Ce ?? k.scroll, Ge = ge ?? k.navMode, H = e(re, fe), [U, Ke] = b(null), [W, qe] = b(void 0), G = Ge === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Ge, K = Fe === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Fe, q = y({
 		aside: null,
 		asideToggle: null,
 		banner: null,
@@ -519,10 +575,10 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 	}))), []), Y = f((e, t, n) => {
 		if (e === j) return;
 		let r = !1, i = l({
-			controlled: E,
+			controlled: w,
 			initial: j,
 			onRequest: (e) => {
-				r = e.cancelled, _e?.(e.value, {
+				r = e.cancelled, ve?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -537,15 +593,15 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		r || i && De(e);
 	}, [
 		j,
-		E,
-		_e
+		w,
+		ve
 	]), X = f((e, t, n) => {
 		if (e === N) return;
 		let i = !1, a = l({
 			controlled: r,
 			initial: N,
 			onRequest: (e) => {
-				i = e.cancelled, ge?.(e.value, {
+				i = e.cancelled, _e?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -557,19 +613,19 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 				});
 			}
 		}).request(e, t, n);
-		i || a && Oe(e);
+		i || a && M(e);
 	}, [
 		r,
 		N,
-		ge
-	]), tt = f((t, n, r) => {
-		let i = t === void 0 ? void 0 : w(t, F, I);
+		_e
+	]), tt = f((e, n, r) => {
+		let i = e === void 0 ? void 0 : S(e, F, I);
 		if (i === P) return;
 		let a = !1, o = l({
-			controlled: e,
+			controlled: t,
 			initial: P,
 			onRequest: (e) => {
-				a = e.cancelled, he?.(e.value, {
+				a = e.cancelled, D?.(e.value, {
 					get cancelled() {
 						return e.cancelled;
 					},
@@ -583,18 +639,18 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		}).request(i, n, r);
 		a || o && Ae(i);
 	}, [
-		e,
+		t,
 		P,
-		he,
+		D,
 		I,
 		F
-	]), nt = Ge === "auto" || Ie === "auto";
+	]), nt = Ge === "auto" || Fe === "auto";
 	m(() => {
 		if (U === null || !nt) {
 			nt || qe(void 0);
 			return;
 		}
-		let e = fe(U, {
+		let e = me(U, {
 			at: je,
 			onChange: qe
 		});
@@ -611,7 +667,7 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		at.current = e, K !== void 0 && (e && N && (t || W === !0) ? (ot.current = !0, X(!1, "resize")) : n && ot.current && (ot.current = !1, N || X(!0, "resize")));
 	}, [K]);
 	let st = j && (!Xe || Je.nav), Z = G === "overlay" && j && J.nav, ct = K === "overlay" && N && J.aside, lt = (Z || ct) && B, [ut, dt] = b(lt ? "open" : "unmounted"), Q = y(null);
-	Q.current === null && (Q.current = S({
+	Q.current === null && (Q.current = ne({
 		present: lt,
 		onStatusChange: dt
 	})), m(() => {
@@ -623,11 +679,11 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 	let ft = f((e) => {
 		Q.current?.setNode(e);
 	}, []), pt = f((e, t, n, r) => {
-		let i = ne(e, {
+		let i = ae(e, {
 			...t === null ? {} : { branches: [t] },
 			back: B && Be === "close",
 			content: e,
-			escape: z === "close",
+			escape: ze === "close",
 			modal: B,
 			onDismiss: (e) => {
 				if (e.reason === "outsidePress" && V === "none") return e.cancel();
@@ -649,7 +705,7 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		};
 	}, [
 		Be,
-		z,
+		ze,
 		B,
 		V
 	]);
@@ -683,18 +739,18 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		X
 	]);
 	let mt = f((e) => {
-		if (Te.onClick?.(e), !Z || !R) return;
+		if (O.onClick?.(e), !Z || !z) return;
 		let t = e.target?.closest?.("a[href]");
 		t != null && q.current.nav?.contains(t) === !0 && t.getAttribute("aria-disabled") !== "true" && Y(!1, "select", e.nativeEvent);
 	}, [
-		Te,
+		O,
 		Z,
-		R,
+		z,
 		Y
 	]), [ht, gt] = b(null);
 	m(() => {
-		if (ht !== null) return C(ht), () => C(null, ht.ownerDocument);
-	}, [ht]), g(be, () => ({
+		if (ht !== null) return ie(ht), () => ie(null, ht.ownerDocument);
+	}, [ht]), g(xe, () => ({
 		openNav: () => Y(!0, "programmatic"),
 		closeNav: () => Y(!1, "programmatic"),
 		openAside: () => X(!0, "programmatic"),
@@ -716,12 +772,12 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		asideId: yt,
 		asideMode: K,
 		asideOpen: N,
-		asideSize: Fe,
+		asideSize: R,
 		asideToggleId: `${A}aside-toggle`,
-		canvas: Le,
-		closeOnNavigate: R,
-		collapsedTo: Re,
-		escape: z,
+		canvas: Ie,
+		closeOnNavigate: z,
+		collapsedTo: Le,
+		escape: ze,
 		back: Be,
 		busy: Qe,
 		mainId: _t,
@@ -739,7 +795,7 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		register: et,
 		root: U,
 		scroll: We,
-		separation: ze,
+		separation: Re,
 		setAsideDragging: Pe,
 		setBusy: $e,
 		setAsideExtent: tt,
@@ -759,12 +815,12 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		vt,
 		et,
 		K,
-		Fe,
-		Le,
 		R,
-		Re,
-		Be,
+		Ie,
 		z,
+		Le,
+		Be,
+		ze,
 		G,
 		B,
 		Ve,
@@ -772,7 +828,7 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		V,
 		Ue,
 		We,
-		ze,
+		Re,
 		I,
 		F,
 		U,
@@ -795,7 +851,7 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		children: H("skipToAside")
 	}, "aside"));
 	let xt = o({
-		...Te,
+		...O,
 		children: /* @__PURE__ */ te(ee, { children: [
 			$.length > 0 ? /* @__PURE__ */ x("div", {
 				"data-part": "skip",
@@ -817,9 +873,9 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		] }),
 		className: d,
 		...K === void 0 ? {} : { "data-aside-mode": K },
-		"data-aside-size": Fe,
-		"data-canvas": Le,
-		"data-collapsed-to": Re,
+		"data-aside-size": R,
+		"data-canvas": Ie,
+		"data-collapsed-to": Le,
 		...L ? { "data-dragging": "" } : {},
 		...G === void 0 ? {} : { "data-nav-mode": G },
 		"data-nav-side": Ve,
@@ -828,18 +884,21 @@ function Pe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		"data-part": "root",
 		"data-primary": Ue,
 		"data-scroll": We,
-		"data-separation": ze,
+		"data-separation": Re,
 		"data-ui": "app-shell",
 		onClick: mt,
-		style: we
+		style: Te
 	});
 	return /* @__PURE__ */ x(Me.Provider, {
 		value: bt,
-		children: xe === void 0 ? /* @__PURE__ */ x("div", {
+		children: Se === void 0 ? /* @__PURE__ */ x("div", {
+			...xt,
+			ref: Ke
+		}) : Se({
 			...xt,
 			ref: Ke
-		}) : xe(xt)
+		})
 	});
 }
 //#endregion
-export { Te as C, P as S, T, ye as _, ve as a, xe as b, ke as c, F as d, he as f, we as g, Ae as h, L as i, A as l, _e as m, Pe as n, k as o, ge as p, I as r, Ee as s, je as t, N as u, Se as v, me as w, be as x, Ce as y };
+export { k as C, F as S, C as T, xe as _, be as a, Ce as b, Ae as c, I as d, _e as f, O as g, P as h, Pe as i, Ee as l, ye as m, R as n, A as o, ve as p, L as r, De as s, je as t, ke as u, we as v, ge as w, Se as x, Te as y };