@slotted/react 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/{app-shell-CmYvnu_7.js → app-shell-nnSP44OO.js}

@@ -1,18 +1,18 @@
 import { n as e, t } from "./icon-T9Yt4tnm.js";
 import { r as n } from "./i18n-DpW8lqJ1.js";
 import { i as r, n as i, o as a } from "./progress-indicator-DwvUSFFs.js";
-import { createFocusScope as o } from "@slotted/core/focus";
-import { createControllable as s } from "@slotted/core/state";
-import { createContext as c, isValidElement as l, useCallback as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Fragment as ee, jsx as y, jsxs as te } from "react/jsx-runtime";
+import { createFocusScope as o, focusTarget as s } from "@slotted/core/focus";
+import { createControllable as c } from "@slotted/core/state";
+import { createContext as l, isValidElement as u, useCallback as d, useContext as f, useEffect as p, useId as m, useImperativeHandle as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as ee, jsx as b, jsxs as te } from "react/jsx-runtime";
 import { createPresence as ne } from "@slotted/core/presence";
-import { setPortalContainer as b } from "@slotted/core/portal";
+import { setPortalContainer as x } from "@slotted/core/portal";
 import { createDismissableLayer as re } from "@slotted/core/dismissable-layer";
 import { appShellMessages as ie } from "@slotted/core/i18n";
 import { EXTENT_LARGE_STEP_PX as ae, EXTENT_STEP_PX as oe, anchorsAtStart as se, extentAtPoint as ce, holdResizeGesture as le, stepAmountFromPixels as ue, stepExtent as de } from "@slotted/core/extent";
-import { COMPACT_BELOW as fe, clamp as x, createWidthGate as pe } from "@slotted/core/measure";
+import { COMPACT_BELOW as fe, clamp as S, createWidthGate as pe } from "@slotted/core/measure";
 //#region src/app-shell/app-shell-defaults.tsx
-var S = c({
+var me = l({
 	asideMode: "auto",
 	asideSize: "md",
 	canvas: "inset",
@@ -29,12 +29,12 @@ var S = c({
 	scroll: "content",
 	separation: "rule"
 });
-function me() {
-	return d(S);
+function C() {
+	return f(me);
 }
 function he({ children: e, ...t }) {
-	let n = me();
-	return /* @__PURE__ */ y(S.Provider, {
+	let n = C();
+	return /* @__PURE__ */ b(me.Provider, {
 		value: {
 			asideMode: t.asideMode ?? n.asideMode,
 			asideSize: t.asideSize ?? n.asideSize,
@@ -57,9 +57,9 @@ function he({ children: e, ...t }) {
 }
 //#endregion
 //#region src/app-shell/app-shell-parts.tsx
-function C(e, t) {
-	let n = N();
-	return u((r) => {
+function w(e, t) {
+	let n = P();
+	return d((r) => {
 		n.nodes[e] = r, typeof t == "function" ? t(r) : t != null && (t.current = r);
 	}, [
 		t,
@@ -68,21 +68,21 @@ function C(e, t) {
 	]);
 }
 function ge(e) {
-	let t = N();
-	f(() => t.register(e), [e, t]);
+	let t = P();
+	p(() => t.register(e), [e, t]);
 }
-function w(e, t) {
+function T(e, t) {
 	return t === void 0 ? null : t(e);
 }
 function _e({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = C("banner", n), s = {
+	let o = w("banner", n), s = {
 		...a,
 		children: e,
 		className: t,
 		"data-part": "banner",
 		style: i
 	};
-	return w(s, r) ?? /* @__PURE__ */ y("header", {
+	return T(s, r) ?? /* @__PURE__ */ b("header", {
 		...s,
 		ref: o
 	});
@@ -95,7 +95,7 @@ function ve({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "brand",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -108,7 +108,7 @@ function ye({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "centre",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -121,13 +121,13 @@ function be({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "actions",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
 }
 function xe({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: o, ...s }) {
-	let c = N(), l = C("nav", i);
+	let c = P(), l = w("nav", i);
 	ge("nav");
 	let u = {
 		...s,
@@ -138,7 +138,7 @@ function xe({ "aria-label": e, children: t, className: n, id: r, ref: i, render:
 		id: r ?? c.navId,
 		style: o
 	};
-	return w(u, a) ?? /* @__PURE__ */ y("nav", {
+	return T(u, a) ?? /* @__PURE__ */ b("nav", {
 		...u,
 		ref: l
 	});
@@ -151,7 +151,7 @@ function Se({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "nav-rail",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -164,7 +164,7 @@ function Ce({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "nav-header",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -177,7 +177,7 @@ function we({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "nav-body",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -190,53 +190,52 @@ function Te({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "nav-footer",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
 }
-function Ee({ children: e, className: t, id: n, ref: r, render: i, style: a, tabIndex: o, ...s }) {
-	let c = N(), l = C("main", r);
+function Ee({ children: e, className: t, id: n, ref: r, render: i, style: a, ...o }) {
+	let s = P(), c = w("main", r);
 	ge("main");
-	let u = {
-		...c.busy ? { "aria-busy": !0 } : {},
-		...s,
+	let l = {
+		...s.busy ? { "aria-busy": !0 } : {},
+		...o,
 		children: e,
 		className: t,
 		"data-part": "main",
-		id: n ?? c.mainId,
-		style: a,
-		tabIndex: o ?? -1
+		id: n ?? s.mainId,
+		style: a
 	};
-	return w(u, i) ?? /* @__PURE__ */ y("main", {
-		...u,
-		ref: l
+	return T(l, i) ?? /* @__PURE__ */ b("main", {
+		...l,
+		ref: c
 	});
 }
-function T({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s, size: c, ...l }) {
-	let u = N(), d = a(), p = r({
+function E({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s, size: c, ...l }) {
+	let u = P(), d = a(), f = r({
 		delay: e ?? d.delay ?? 200,
 		loading: n,
 		minDuration: o ?? d.minDuration ?? 400,
 		onWithdraw: s
 	}), { setBusy: m } = u;
-	return f(() => {
-		m(p);
-	}, [p, m]), f(() => () => m(!1), [m]), /* @__PURE__ */ y("div", {
+	return p(() => {
+		m(f);
+	}, [f, m]), p(() => () => m(!1), [m]), /* @__PURE__ */ b("div", {
 		"data-part": "progress",
-		children: /* @__PURE__ */ y(i, {
+		children: /* @__PURE__ */ b(i, {
 			...l,
 			delay: 0,
 			label: t ?? u.t("progress"),
-			loading: p,
+			loading: f,
 			minDuration: 0,
 			placement: "edge-start",
 			size: c ?? "sm"
 		})
 	});
 }
-function E({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: o, ...s }) {
-	let c = N(), l = C("aside", i);
+function D({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: o, ...s }) {
+	let c = P(), l = w("aside", i);
 	ge("aside");
 	let u = c.asideExtent, d = {
 		...s,
@@ -251,12 +250,12 @@ function E({ "aria-label": e, children: t, className: n, id: r, ref: i, render:
 			"--slotted-app-shell-aside-extent": `${Math.round(u * 1e4) / 100}cqi`
 		}
 	};
-	return w(d, a) ?? /* @__PURE__ */ y("aside", {
+	return T(d, a) ?? /* @__PURE__ */ b("aside", {
 		...d,
 		ref: l
 	});
 }
-function D({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+function O({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 	let o = {
 		...a,
 		children: e,
@@ -264,7 +263,7 @@ function D({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "aside-header",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
@@ -278,16 +277,16 @@ function De({ children: e, className: t, inset: n, ref: r, render: i, style: a,
 		"data-part": "aside-body",
 		style: a
 	};
-	return w(s, i) ?? /* @__PURE__ */ y("div", {
+	return T(s, i) ?? /* @__PURE__ */ b("div", {
 		...s,
 		ref: r
 	});
 }
-var Oe = typeof document > "u" ? f : h;
-function O(e) {
+var Oe = typeof document > "u" ? p : g;
+function k(e) {
 	return e !== null && getComputedStyle(e).direction === "rtl";
 }
-function k(e) {
+function A(e) {
 	if (e === null) return null;
 	let t = e.getBoundingClientRect(), n = getComputedStyle(e), r = (e, t) => e === "none" || e === "hidden" ? 0 : parseFloat(t) || 0, i = (parseFloat(n.paddingLeft) || 0) + r(n.borderLeftStyle, n.borderLeftWidth), a = (parseFloat(n.paddingRight) || 0) + r(n.borderRightStyle, n.borderRightWidth);
 	return {
@@ -298,13 +297,13 @@ function k(e) {
 	};
 }
 var ke = 3;
-function A({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref: i, render: a, style: o, ...s }) {
-	let c = N(), l = _(null), u = _(null), d = _(null), [p, m] = v(void 0), h = c.navSide === "end" ? "start" : "end", g = c.asideMode === "inline" && c.asideOpen, { asideExtent: ee, nodes: te, root: ne } = c;
+function j({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref: i, render: a, style: o, ...s }) {
+	let c = P(), l = v(null), u = v(null), d = v(null), [f, m] = y(void 0), h = c.navSide === "end" ? "start" : "end", g = c.asideMode === "inline" && c.asideOpen, { asideExtent: _, nodes: ee, root: te } = c;
 	if (Oe(() => {
-		let e = te.aside;
-		if (!g || ee !== void 0 || e === null) return;
+		let e = ee.aside;
+		if (!g || _ !== void 0 || e === null) return;
 		let t = () => {
-			let t = k(ne);
+			let t = A(te);
 			if (t === null || t.width <= 0) return m(void 0);
 			m(e.getBoundingClientRect().width / t.width);
 		};
@@ -312,46 +311,46 @@ function A({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref:
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, [
+		_,
 		ee,
 		te,
-		ne,
 		g
-	]), f(() => () => d.current?.(), []), !g) return null;
-	let b = x(c.asideExtent ?? p ?? c.minAsideExtent, c.minAsideExtent, c.maxAsideExtent), re = (e) => Math.round(x(e, 0, 1) * 100), ie = (e, t) => ce({
+	]), p(() => () => d.current?.(), []), !g) return null;
+	let ne = S(c.asideExtent ?? f ?? c.minAsideExtent, c.minAsideExtent, c.maxAsideExtent), x = (e) => Math.round(S(e, 0, 1) * 100), re = (e, t) => ce({
 		point: {
 			x: e.clientX,
 			y: e.clientY
 		},
 		rect: t,
-		rtl: O(l.current),
+		rtl: k(l.current),
 		side: h
-	}), fe = (e) => {
+	}), ie = (e) => {
 		if (r?.(e), e.defaultPrevented || e.button !== 0) return;
-		let t = k(c.root);
+		let t = A(c.root);
 		t === null || t.width <= 0 || (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.focus(), u.current = {
 			moved: !1,
-			offset: b - ie(e, t),
+			offset: ne - re(e, t),
 			x: e.clientX
 		});
-	}, pe = (e) => {
+	}, fe = (e) => {
 		let t = u.current;
 		if (t === null) return;
-		let n = k(c.root);
+		let n = A(c.root);
 		if (!(n === null || n.width <= 0)) {
 			if (!t.moved) {
 				if (Math.abs(e.clientX - t.x) < ke) return;
 				t.moved = !0, d.current?.(), d.current = le(l.current?.ownerDocument, "col-resize"), c.setAsideDragging(!0);
 			}
-			c.setAsideExtent(ie(e, n) + t.offset, "pointer", e);
+			c.setAsideExtent(re(e, n) + t.offset, "pointer", e);
 		}
-	}, S = (e) => {
+	}, pe = (e) => {
 		let t = u.current;
 		t !== null && (u.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), t.moved && (d.current?.(), d.current = null, c.setAsideDragging(!1)));
 	}, me = (e) => {
 		if (n?.(e), e.defaultPrevented) return;
-		let t = se(h, O(l.current)), r = (t) => {
+		let t = se(h, k(l.current)), r = (t) => {
 			e.preventDefault();
-			let n = k(c.root), r = n === null ? 0 : ue({
+			let n = A(c.root), r = n === null ? 0 : ue({
 				pixels: e.shiftKey ? ae : oe,
 				rect: n,
 				side: h
@@ -359,7 +358,7 @@ function A({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref:
 			c.setAsideExtent(de({
 				amount: r,
 				direction: t,
-				fraction: b,
+				fraction: ne,
 				max: c.maxAsideExtent,
 				min: c.minAsideExtent
 			}), "keyboard", e);
@@ -371,33 +370,33 @@ function A({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref:
 			case "End": return e.preventDefault(), c.setAsideExtent(c.maxAsideExtent, "keyboard", e);
 			default: return;
 		}
-	}, he = (e) => {
+	}, C = (e) => {
 		l.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-	}, C = {
+	}, he = {
 		...s,
 		"aria-controls": c.asideId,
 		"aria-label": e ?? c.t("resizeAside"),
 		"aria-orientation": "vertical",
-		"aria-valuemax": re(c.maxAsideExtent),
-		"aria-valuemin": re(c.minAsideExtent),
-		"aria-valuenow": re(b),
+		"aria-valuemax": x(c.maxAsideExtent),
+		"aria-valuemin": x(c.minAsideExtent),
+		"aria-valuenow": x(ne),
 		className: t,
 		"data-part": "aside-resizer",
 		onKeyDown: me,
-		onLostPointerCapture: S,
-		onPointerDown: fe,
-		onPointerMove: pe,
-		onPointerUp: S,
+		onLostPointerCapture: pe,
+		onPointerDown: ie,
+		onPointerMove: fe,
+		onPointerUp: pe,
 		role: "separator",
 		style: o,
 		tabIndex: 0
 	};
-	return a === void 0 ? /* @__PURE__ */ y("div", {
-		...C,
-		ref: he
+	return a === void 0 ? /* @__PURE__ */ b("div", {
+		...he,
+		ref: C
 	}) : a({
-		...C,
-		ref: he
+		...he,
+		ref: C
 	});
 }
 function Ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
@@ -408,26 +407,26 @@ function Ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
 		"data-part": "aside-footer",
 		style: i
 	};
-	return w(o, r) ?? /* @__PURE__ */ y("div", {
+	return T(o, r) ?? /* @__PURE__ */ b("div", {
 		...o,
 		ref: n
 	});
 }
 function je({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
-	let o = C("footer", n), s = {
+	let o = w("footer", n), s = {
 		...a,
 		children: e,
 		className: t,
 		"data-part": "footer",
 		style: i
 	};
-	return w(s, r) ?? /* @__PURE__ */ y("footer", {
+	return T(s, r) ?? /* @__PURE__ */ b("footer", {
 		...s,
 		ref: o
 	});
 }
-function j({ "aria-controls": n, "aria-label": r, children: i, className: a, id: o, onClick: s, ref: c, render: l, style: d, type: f, ...p }) {
-	let m = N(), h = C("toggle", c), g = u((e) => {
+function M({ "aria-controls": n, "aria-label": r, children: i, className: a, id: o, onClick: s, ref: c, render: l, style: u, type: f, ...p }) {
+	let m = P(), h = w("toggle", c), g = d((e) => {
 		if (s?.(e), e.defaultPrevented) return;
 		let t = e.detail === 0 ? "keyboard" : "pointer";
 		m.setOpen(!m.open, t, e.nativeEvent);
@@ -436,21 +435,21 @@ function j({ "aria-controls": n, "aria-label": r, children: i, className: a, id:
 		"aria-controls": n ?? m.navId,
 		"aria-expanded": m.open,
 		"aria-label": r ?? (m.open ? m.t("close") : m.t("open")),
-		children: i ?? /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: m.open ? "panel-close" : "panel-open" }) }),
+		children: i ?? /* @__PURE__ */ b(t, { children: /* @__PURE__ */ b(e, { name: m.open ? "panel-close" : "panel-open" }) }),
 		className: a,
 		"data-part": "nav-toggle",
 		id: o ?? m.toggleId,
 		onClick: g,
-		style: d,
+		style: u,
 		type: f ?? "button"
 	};
-	return w(_, l) ?? /* @__PURE__ */ y("button", {
+	return T(_, l) ?? /* @__PURE__ */ b("button", {
 		..._,
 		ref: h
 	});
 }
-function M({ "aria-controls": n, "aria-label": r, children: i, className: a, id: o, onClick: s, ref: c, render: l, style: d, type: f, ...p }) {
-	let m = N(), h = C("asideToggle", c), g = u((e) => {
+function N({ "aria-controls": n, "aria-label": r, children: i, className: a, id: o, onClick: s, ref: c, render: l, style: u, type: f, ...p }) {
+	let m = P(), h = w("asideToggle", c), g = d((e) => {
 		if (s?.(e), e.defaultPrevented) return;
 		let t = e.detail === 0 ? "keyboard" : "pointer";
 		m.setAsideOpen(!m.asideOpen, t, e.nativeEvent);
@@ -459,39 +458,39 @@ function M({ "aria-controls": n, "aria-label": r, children: i, className: a, id:
 		"aria-controls": n ?? m.asideId,
 		"aria-expanded": m.asideOpen,
 		"aria-label": r ?? (m.asideOpen ? m.t("closeAside") : m.t("openAside")),
-		children: i ?? /* @__PURE__ */ y(t, { children: /* @__PURE__ */ y(e, { name: m.asideOpen ? "panel-close" : "panel-open" }) }),
+		children: i ?? /* @__PURE__ */ b(t, { children: /* @__PURE__ */ b(e, { name: m.asideOpen ? "panel-close" : "panel-open" }) }),
 		className: a,
 		"data-part": "aside-toggle",
 		id: o ?? m.asideToggleId,
 		onClick: g,
-		style: d,
+		style: u,
 		type: f ?? "button"
 	};
-	return w(_, l) ?? /* @__PURE__ */ y("button", {
+	return T(_, l) ?? /* @__PURE__ */ b("button", {
 		..._,
 		ref: h
 	});
 }
 //#endregion
 //#region src/app-shell/app-shell.tsx
-var Me = fe, Ne = c(void 0);
+var Me = fe, Ne = l(void 0);
 function Pe(e, t) {
 	if (Array.isArray(e)) {
 		for (let n of e) Pe(n, t);
 		return t;
 	}
-	return !l(e) || e.type === Fe || (e.type === Ee ? t.main = !0 : e.type === xe ? t.nav = !0 : e.type === E ? t.aside = !0 : Pe(e.props.children, t)), t;
+	return !u(e) || e.type === Fe || (e.type === Ee ? t.main = !0 : e.type === xe ? t.nav = !0 : e.type === D ? t.aside = !0 : Pe(e.props.children, t)), t;
 }
-function N() {
-	let e = d(Ne);
+function P() {
+	let e = f(Ne);
 	if (e === void 0) throw Error("Every app-shell part must be rendered inside AppShell.");
 	return e;
 }
-function P() {
-	return d(Ne);
+function F() {
+	return f(Ne);
 }
-function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas: a, children: c, className: l, closeOnNavigate: d, collapsedTo: h, defaultAsideExtent: ae, defaultAsideOpen: oe, defaultNavOpen: se, escape: ce, back: le, maxAsideExtent: ue, messages: de, minAsideExtent: fe, modal: S, navMode: he, navOpen: C, navSide: ge, navSize: w, onAsideExtentChange: _e, onAsideOpenChange: ve, onNavOpenChange: ye, outsidePress: be, primary: xe, ref: Se, render: Ce, scroll: we, separation: Te, style: Ee, ...T }) {
-	let E = me(), D = p(), [De, Oe] = v(se ?? !0), O = C ?? De, [k, ke] = v(oe ?? !0), A = r ?? k, [Ae, je] = v(ae), j = e ?? Ae, M = x(fe ?? .16, 0, 1), N = x(ue ?? .6, M, 1), [P, Fe] = v(!1), Ie = i ?? E.asideSize, Le = t ?? E.asideMode, Re = a ?? E.canvas, F = d ?? E.closeOnNavigate, ze = h ?? E.collapsedTo, Be = Te ?? E.separation, I = ce ?? E.escape, L = le ?? E.back, R = S ?? E.modal, Ve = ge ?? E.navSide, He = w ?? E.navSize, z = be ?? E.outsidePress, Ue = xe ?? E.primary, We = we ?? E.scroll, Ge = he ?? E.navMode, B = n(ie, de), [V, Ke] = v(null), [H, qe] = v(void 0), U = Ge === "auto" ? H === void 0 ? void 0 : H ? "overlay" : "inline" : Ge, W = Le === "auto" ? H === void 0 ? void 0 : H ? "overlay" : "inline" : Le, G = _({
+function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas: a, children: l, className: u, closeOnNavigate: f, collapsedTo: g, defaultAsideExtent: ae, defaultAsideOpen: oe, defaultNavOpen: se, escape: ce, back: le, maxAsideExtent: ue, messages: de, minAsideExtent: fe, modal: me, navMode: he, navOpen: w, navSide: ge, navSize: T, onAsideExtentChange: _e, onAsideOpenChange: ve, onNavOpenChange: ye, outsidePress: be, primary: xe, ref: Se, render: Ce, scroll: we, separation: Te, style: Ee, ...E }) {
+	let D = C(), O = m(), [De, Oe] = y(se ?? !0), k = w ?? De, [A, ke] = y(oe ?? !0), j = r ?? A, [Ae, je] = y(ae), M = e ?? Ae, N = S(fe ?? .16, 0, 1), P = S(ue ?? .6, N, 1), [F, Fe] = y(!1), Ie = i ?? D.asideSize, Le = t ?? D.asideMode, Re = a ?? D.canvas, I = f ?? D.closeOnNavigate, ze = g ?? D.collapsedTo, Be = Te ?? D.separation, L = ce ?? D.escape, R = le ?? D.back, z = me ?? D.modal, Ve = ge ?? D.navSide, He = T ?? D.navSize, B = be ?? D.outsidePress, Ue = xe ?? D.primary, We = we ?? D.scroll, Ge = he ?? D.navMode, V = n(ie, de), [H, Ke] = y(null), [U, qe] = y(void 0), W = Ge === "auto" ? U === void 0 ? void 0 : U ? "overlay" : "inline" : Ge, G = Le === "auto" ? U === void 0 ? void 0 : U ? "overlay" : "inline" : Le, K = v({
 		aside: null,
 		asideToggle: null,
 		banner: null,
@@ -499,27 +498,27 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		main: null,
 		nav: null,
 		toggle: null
-	}), [Je, Ye] = v({
+	}), [Je, Ye] = y({
 		nav: !1,
 		main: !1,
 		aside: !1
-	}), [Xe, Ze] = v(!1);
-	f(() => Ze(!0), []);
-	let K = Xe ? Je : Pe(c, {
+	}), [Xe, Ze] = y(!1);
+	p(() => Ze(!0), []);
+	let q = Xe ? Je : Pe(l, {
 		nav: !1,
 		main: !1,
 		aside: !1
-	}), [Qe, $e] = v(!1), et = u((e) => (Ye((t) => ({
+	}), [Qe, $e] = y(!1), et = d((e) => (Ye((t) => ({
 		...t,
 		[e]: !0
 	})), () => Ye((t) => ({
 		...t,
 		[e]: !1
-	}))), []), q = u((e, t, n) => {
-		if (e === O) return;
-		let r = !1, i = s({
-			controlled: C,
-			initial: O,
+	}))), []), J = d((e, t, n) => {
+		if (e === k) return;
+		let r = !1, i = c({
+			controlled: w,
+			initial: k,
 			onRequest: (e) => {
 				r = e.cancelled, ye?.(e.value, {
 					get cancelled() {
@@ -535,14 +534,14 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		}).request(e, t, n);
 		r || i && Oe(e);
 	}, [
-		O,
-		C,
+		k,
+		w,
 		ye
-	]), J = u((e, t, n) => {
-		if (e === A) return;
-		let i = !1, a = s({
+	]), Y = d((e, t, n) => {
+		if (e === j) return;
+		let i = !1, a = c({
 			controlled: r,
-			initial: A,
+			initial: j,
 			onRequest: (e) => {
 				i = e.cancelled, ve?.(e.value, {
 					get cancelled() {
@@ -559,14 +558,14 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		i || a && ke(e);
 	}, [
 		r,
-		A,
+		j,
 		ve
-	]), tt = u((t, n, r) => {
-		let i = t === void 0 ? void 0 : x(t, M, N);
-		if (i === j) return;
-		let a = !1, o = s({
+	]), tt = d((t, n, r) => {
+		let i = t === void 0 ? void 0 : S(t, N, P);
+		if (i === M) return;
+		let a = !1, o = c({
 			controlled: e,
-			initial: j,
+			initial: M,
 			onRequest: (e) => {
 				a = e.cancelled, _e?.(e.value, {
 					get cancelled() {
@@ -583,236 +582,241 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		a || o && je(i);
 	}, [
 		e,
-		j,
+		M,
 		_e,
-		N,
-		M
+		P,
+		N
 	]), nt = Ge === "auto" || Le === "auto";
-	f(() => {
-		if (V === null || !nt) {
+	p(() => {
+		if (H === null || !nt) {
 			nt || qe(void 0);
 			return;
 		}
-		let e = pe(V, {
+		let e = pe(H, {
 			at: Me,
 			onChange: qe
 		});
 		return qe(e.narrow()), () => e.destroy();
-	}, [V, nt]);
-	let rt = _(U === "overlay"), it = _(!1);
-	f(() => {
-		let e = U === "overlay", t = e && !rt.current, n = !e && rt.current;
-		rt.current = e, U !== void 0 && (e && O && (t || H === !0) ? (it.current = !0, q(!1, "resize")) : n && it.current && (it.current = !1, O || q(!0, "resize")));
-	}, [U]);
-	let at = _(W === "overlay"), ot = _(!1);
-	f(() => {
-		let e = W === "overlay", t = e && !at.current, n = !e && at.current;
-		at.current = e, W !== void 0 && (e && A && (t || H === !0) ? (ot.current = !0, J(!1, "resize")) : n && ot.current && (ot.current = !1, A || J(!0, "resize")));
+	}, [H, nt]);
+	let rt = v(W === "overlay"), it = v(!1);
+	p(() => {
+		let e = W === "overlay", t = e && !rt.current, n = !e && rt.current;
+		rt.current = e, W !== void 0 && (e && k && (t || U === !0) ? (it.current = !0, J(!1, "resize")) : n && it.current && (it.current = !1, k || J(!0, "resize")));
 	}, [W]);
-	let st = O && (!Xe || Je.nav), Y = U === "overlay" && O && K.nav, ct = W === "overlay" && A && K.aside, lt = (Y || ct) && R, [ut, dt] = v(lt ? "open" : "unmounted"), X = _(null);
-	X.current === null && (X.current = ne({
+	let at = v(G === "overlay"), ot = v(!1);
+	p(() => {
+		let e = G === "overlay", t = e && !at.current, n = !e && at.current;
+		at.current = e, G !== void 0 && (e && j && (t || U === !0) ? (ot.current = !0, Y(!1, "resize")) : n && ot.current && (ot.current = !1, j || Y(!0, "resize")));
+	}, [G]);
+	let st = k && (!Xe || Je.nav), X = W === "overlay" && k && q.nav, ct = G === "overlay" && j && q.aside, lt = (X || ct) && z, [ut, dt] = y(lt ? "open" : "unmounted"), Z = v(null);
+	Z.current === null && (Z.current = ne({
 		present: lt,
 		onStatusChange: dt
-	})), f(() => {
-		X.current?.sync(lt);
-	}, [lt]), f(() => {
-		let e = X.current;
+	})), p(() => {
+		Z.current?.sync(lt);
+	}, [lt]), p(() => {
+		let e = Z.current;
 		return () => e?.destroy();
 	}, []);
-	let ft = u((e) => {
-		X.current?.setNode(e);
-	}, []), Z = u((e, t, n, r) => {
+	let ft = d((e) => {
+		Z.current?.setNode(e);
+	}, []), pt = d((e, t, n, r) => {
 		let i = re(e, {
 			...t === null ? {} : { branches: [t] },
-			back: R && L === "close",
+			back: z && R === "close",
 			content: e,
-			escape: I === "close",
-			modal: R,
+			escape: L === "close",
+			modal: z,
 			onDismiss: (e) => {
-				if (e.reason === "outsidePress" && z === "none") return e.cancel();
+				if (e.reason === "outsidePress" && B === "none") return e.cancel();
 				r(e.reason, e.source);
 			},
-			outsidePress: z === "close",
+			outsidePress: B === "close",
 			outsidePressEvent: "click"
 		}), a = o(e, {
-			contain: R,
+			contain: z,
 			initial: "first",
 			...t === null ? {} : { restore: () => t }
 		});
 		a.enter();
-		let s = R ? n.filter((e) => e !== null) : [];
+		let s = z ? n.filter((e) => e !== null) : [];
 		for (let e of s) t !== null && e.contains(t) || e.setAttribute("inert", "");
 		return () => {
 			for (let e of s) e.removeAttribute("inert");
 			a.destroy(), i.destroy();
 		};
 	}, [
-		L,
-		I,
 		R,
-		z
+		L,
+		z,
+		B
 	]);
-	f(() => {
-		let e = G.current.nav;
-		if (!Y || e === null) return;
-		let { aside: t, banner: n, footer: r, main: i, toggle: a } = G.current;
-		return Z(e, a, [
+	p(() => {
+		let e = K.current.nav;
+		if (!X || e === null) return;
+		let { aside: t, banner: n, footer: r, main: i, toggle: a } = K.current;
+		return pt(e, a, [
 			n,
 			i,
 			t,
 			r
-		], (e, t) => q(!1, e, t));
+		], (e, t) => J(!1, e, t));
 	}, [
-		Y,
-		Z,
-		q
-	]), f(() => {
-		let e = G.current.aside;
+		X,
+		pt,
+		J
+	]), p(() => {
+		let e = K.current.aside;
 		if (!ct || e === null) return;
-		let { asideToggle: t, banner: n, footer: r, main: i, nav: a } = G.current;
-		return Z(e, t, [
+		let { asideToggle: t, banner: n, footer: r, main: i, nav: a } = K.current;
+		return pt(e, t, [
 			n,
 			i,
 			a,
 			r
-		], (e, t) => J(!1, e, t));
+		], (e, t) => Y(!1, e, t));
 	}, [
 		ct,
-		Z,
-		J
+		pt,
+		Y
 	]);
-	let pt = u((e) => {
-		if (T.onClick?.(e), !Y || !F) return;
+	let mt = d((e) => {
+		if (E.onClick?.(e), !X || !I) return;
 		let t = e.target?.closest?.("a[href]");
-		t != null && G.current.nav?.contains(t) === !0 && t.getAttribute("aria-disabled") !== "true" && q(!1, "select", e.nativeEvent);
+		t != null && K.current.nav?.contains(t) === !0 && t.getAttribute("aria-disabled") !== "true" && J(!1, "select", e.nativeEvent);
 	}, [
-		T,
-		Y,
-		F,
-		q
-	]), [Q, mt] = v(null);
-	f(() => {
-		if (Q !== null) return b(Q), () => b(null, Q.ownerDocument);
-	}, [Q]), m(Se, () => ({
-		openNav: () => q(!0, "programmatic"),
-		closeNav: () => q(!1, "programmatic"),
-		openAside: () => J(!0, "programmatic"),
-		closeAside: () => J(!1, "programmatic"),
-		focusMain: () => G.current.main?.focus(),
+		E,
+		X,
+		I,
+		J
+	]), [Q, ht] = y(null);
+	p(() => {
+		if (Q !== null) return x(Q), () => x(null, Q.ownerDocument);
+	}, [Q]), h(Se, () => ({
+		openNav: () => J(!0, "programmatic"),
+		closeNav: () => J(!1, "programmatic"),
+		openAside: () => Y(!0, "programmatic"),
+		closeAside: () => Y(!1, "programmatic"),
+		focusMain: () => {
+			K.current.main && s(K.current.main);
+		},
 		get root() {
-			return V;
+			return H;
 		}
 	}), [
-		V,
-		J,
-		q
+		H,
+		Y,
+		J
 	]);
-	let ht = `${D}main`, gt = `${D}nav`, _t = `${D}aside`, vt = g(() => ({
-		asideDragging: P,
-		asideExtent: j,
-		asideId: _t,
-		asideMode: W,
-		asideOpen: A,
+	let gt = `${O}main`, _t = `${O}nav`, vt = `${O}aside`, yt = _(() => ({
+		asideDragging: F,
+		asideExtent: M,
+		asideId: vt,
+		asideMode: G,
+		asideOpen: j,
 		asideSize: Ie,
-		asideToggleId: `${D}aside-toggle`,
+		asideToggleId: `${O}aside-toggle`,
 		canvas: Re,
-		closeOnNavigate: F,
+		closeOnNavigate: I,
 		collapsedTo: ze,
-		escape: I,
-		back: L,
+		escape: L,
+		back: R,
 		busy: Qe,
-		mainId: ht,
-		maxAsideExtent: N,
-		minAsideExtent: M,
-		modal: R,
-		navId: gt,
-		navMode: U,
+		mainId: gt,
+		maxAsideExtent: P,
+		minAsideExtent: N,
+		modal: z,
+		navId: _t,
+		navMode: W,
 		navSide: Ve,
 		navSize: He,
-		nodes: G.current,
-		open: O,
-		outsidePress: z,
+		nodes: K.current,
+		open: k,
+		outsidePress: B,
 		primary: Ue,
 		register: et,
-		root: V,
+		root: H,
 		scroll: We,
 		separation: Be,
 		setAsideDragging: Fe,
 		setBusy: $e,
 		setAsideExtent: tt,
-		setAsideOpen: J,
-		setOpen: q,
-		t: B,
-		toggleId: `${D}toggle`
+		setAsideOpen: Y,
+		setOpen: J,
+		t: V,
+		toggleId: `${O}toggle`
 	}), [
-		P,
-		_t,
-		D,
+		F,
+		vt,
+		O,
 		Qe,
+		M,
 		j,
-		A,
-		O,
-		ht,
+		k,
 		gt,
+		_t,
 		et,
-		W,
+		G,
 		Ie,
 		Re,
-		F,
-		ze,
-		L,
 		I,
-		U,
+		ze,
 		R,
+		L,
+		W,
+		z,
 		Ve,
 		He,
-		z,
+		B,
 		Ue,
 		We,
 		Be,
+		P,
 		N,
-		M,
-		V,
+		H,
 		tt,
+		Y,
 		J,
-		q,
-		B
+		V
 	]), $ = [];
-	K.main && $.push(/* @__PURE__ */ y("a", {
-		href: `#${ht}`,
-		children: B("skipToMain")
-	}, "main")), K.nav && $.push(/* @__PURE__ */ y("a", {
+	q.main && $.push(/* @__PURE__ */ b("a", {
 		href: `#${gt}`,
-		children: B("skipToNav")
-	}, "nav")), K.aside && A && $.push(/* @__PURE__ */ y("a", {
+		onClick: () => {
+			K.current.main && s(K.current.main);
+		},
+		children: V("skipToMain")
+	}, "main")), q.nav && $.push(/* @__PURE__ */ b("a", {
 		href: `#${_t}`,
-		children: B("skipToAside")
+		children: V("skipToNav")
+	}, "nav")), q.aside && j && $.push(/* @__PURE__ */ b("a", {
+		href: `#${vt}`,
+		children: V("skipToAside")
 	}, "aside"));
-	let yt = {
-		...T,
+	let bt = {
+		...E,
 		children: /* @__PURE__ */ te(ee, { children: [
-			$.length > 0 ? /* @__PURE__ */ y("div", {
+			$.length > 0 ? /* @__PURE__ */ b("div", {
 				"data-part": "skip",
 				children: $
 			}) : null,
-			c,
-			ut === "unmounted" ? null : /* @__PURE__ */ y("div", {
+			l,
+			ut === "unmounted" ? null : /* @__PURE__ */ b("div", {
 				"data-part": "scrim",
 				"data-status": ut,
 				ref: ft
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				"data-part": "layer",
-				ref: mt
+				ref: ht
 			})
 		] }),
-		className: l,
-		...W === void 0 ? {} : { "data-aside-mode": W },
+		className: u,
+		...G === void 0 ? {} : { "data-aside-mode": G },
 		"data-aside-size": Ie,
 		"data-canvas": Re,
 		"data-collapsed-to": ze,
-		...P ? { "data-dragging": "" } : {},
-		...U === void 0 ? {} : { "data-nav-mode": U },
+		...F ? { "data-dragging": "" } : {},
+		...W === void 0 ? {} : { "data-nav-mode": W },
 		"data-nav-side": Ve,
 		"data-nav-size": He,
 		...st ? { "data-open": "" } : {},
@@ -821,16 +825,16 @@ function Fe({ asideExtent: e, asideMode: t, asideOpen: r, asideSize: i, canvas:
 		"data-scroll": We,
 		"data-separation": Be,
 		"data-ui": "app-shell",
-		onClick: pt,
+		onClick: mt,
 		style: Ee
 	};
-	return /* @__PURE__ */ y(Ne.Provider, {
-		value: vt,
-		children: Ce === void 0 ? /* @__PURE__ */ y("div", {
-			...yt,
+	return /* @__PURE__ */ b(Ne.Provider, {
+		value: yt,
+		children: Ce === void 0 ? /* @__PURE__ */ b("div", {
+			...bt,
 			ref: Ke
-		}) : Ce(yt)
+		}) : Ce(bt)
 	});
 }
 //#endregion
-export { T as C, j as S, me as T, xe as _, be as a, Ce as b, Ae as c, M as d, _e as f, Ee as g, je as h, P as i, D as l, ye as m, Fe as n, E as o, ve as p, N as r, De as s, Me as t, A as u, we as v, he as w, Se as x, Te as y };
+export { E as C, M as S, C as T, xe as _, be as a, Ce as b, Ae as c, N as d, _e as f, Ee as g, je as h, F as i, O as l, ye as m, Fe as n, D as o, ve as p, P as r, De as s, Me as t, j as u, we as v, he as w, Se as x, Te as y };