@thewhatmatters/wmds 0.4.9 → 0.4.28

package/dist/components/organisms/SiteNav/SiteNav.js

@@ -5,262 +5,213 @@ import { Button as n } from "../../atoms/Button/Button.js";
 import { IconButton as r } from "../../atoms/IconButton/IconButton.js";
 import { TextLink as i } from "../../atoms/TextLink/TextLink.js";
 import { Dropdown as a } from "../../molecules/Dropdown/Dropdown.js";
-import { measureDropdownMenuStyle as o } from "../../molecules/Dropdown/dropdownMenuPosition.js";
-import { cardLayoutBodyOccupantRadiusClasses as s, cardLayoutBodyOccupantWellClasses as c } from "../../molecules/Card/cardStyles.js";
-import { Sheet as l } from "../Sheet/Sheet.js";
-import { resolveTabOverflow as ee } from "../Tab/tabOverflow.js";
-import { siteNavBarBaseClasses as u, siteNavBarCompactLayoutClasses as d, siteNavBarStateClasses as f, siteNavBrandClasses as p, siteNavCompactLayouts as m, siteNavContainerClasses as h, siteNavDefaultCollapseAt as g, siteNavDefaultCollapseRatio as _, siteNavEndClasses as te, siteNavExpandedHeightClasses as v, siteNavLinkClasses as y, siteNavLinkListClasses as b, siteNavLinksRootClasses as x, siteNavMeasureItemClasses as S, siteNavMeasureMoreClasses as C, siteNavMeasureRailClasses as w, siteNavMenuBackdropClasses as ne, siteNavMenuContentClasses as T, siteNavMenuLinkClasses as E, siteNavMenuLinkGridClasses as D, siteNavMenuPopupClasses as re, siteNavMenuPositionerClasses as O, siteNavMenuReadRowClasses as k, siteNavMenuReadThumbClasses as A, siteNavMenuSectionClasses as j, siteNavMenuSectionLabelClasses as M, siteNavMenuSectionSpanClasses as N, siteNavMenuViewportClasses as P, siteNavMiddleClasses as ie, siteNavMiddleHugClasses as ae, siteNavMiddleHugResponsiveClasses as oe, siteNavMiddleResponsiveClasses as F, siteNavMobileLinkClasses as I, siteNavMobileListClasses as L, siteNavMobileTriggerClasses as se, siteNavMoreIconClasses as R, siteNavMoreTriggerClasses as z, siteNavNavigationRootClasses as B, siteNavPlacements as V, siteNavRootFixedClasses as H, siteNavRootFlowClasses as ce, siteNavRootInlineClasses as le, siteNavRootStickyClasses as ue, siteNavSlotsClasses as U, siteNavStartClasses as de, siteNavStates as fe, siteNavTriggerClasses as W, siteNavTriggerIconClasses as pe, siteNavTriggerLabelClasses as me } from "./siteNavStyles.js";
+import { cardLayoutBodyOccupantRadiusClasses as o, cardLayoutBodyOccupantWellClasses as s } from "../../molecules/Card/cardStyles.js";
+import { Sheet as c } from "../Sheet/Sheet.js";
+import { textOf as l, useOverflowMenu as u } from "../../molecules/Dropdown/useOverflowMenu.js";
+import { siteNavBarBaseClasses as d, siteNavBarCompactLayoutClasses as f, siteNavBarStateClasses as p, siteNavBrandClasses as m, siteNavCompactLayouts as h, siteNavContainerClasses as g, siteNavDefaultCollapseAt as _, siteNavDefaultCollapseRatio as v, siteNavEndClasses as ee, siteNavExpandedHeightClasses as y, siteNavLinkClasses as b, siteNavLinkListClasses as x, siteNavLinksRootClasses as S, siteNavMeasureItemClasses as C, siteNavMeasureMoreClasses as w, siteNavMeasureRailClasses as T, siteNavMenuBackdropClasses as E, siteNavMenuContentClasses as D, siteNavMenuLinkClasses as O, siteNavMenuLinkGridClasses as te, siteNavMenuPopupClasses as k, siteNavMenuPositionerClasses as A, siteNavMenuReadRowClasses as j, siteNavMenuReadThumbClasses as M, siteNavMenuSectionClasses as N, siteNavMenuSectionLabelClasses as P, siteNavMenuSectionSpanClasses as F, siteNavMenuViewportClasses as I, siteNavMiddleClasses as ne, siteNavMiddleHugClasses as re, siteNavMiddleHugResponsiveClasses as ie, siteNavMiddleResponsiveClasses as ae, siteNavMobileLinkClasses as L, siteNavMobileListClasses as oe, siteNavMobileTriggerClasses as se, siteNavMoreIconClasses as R, siteNavMoreTriggerClasses as z, siteNavNavigationRootClasses as B, siteNavPlacements as V, siteNavRootFixedClasses as ce, siteNavRootFlowClasses as le, siteNavRootInlineClasses as ue, siteNavRootStickyClasses as de, siteNavSlotsClasses as H, siteNavStartClasses as fe, siteNavStates as U, siteNavTriggerClasses as W, siteNavTriggerIconClasses as pe, siteNavTriggerLabelClasses as me } from "./siteNavStyles.js";
 import { useSiteNavCollapse as he } from "./useSiteNavCollapse.js";
-import { Children as ge, createContext as _e, isValidElement as G, useCallback as K, useContext as ve, useEffect as ye, useId as be, useLayoutEffect as xe, useMemo as Se, useRef as q, useState as J } from "react";
-import { ChevronDown as Y, Menu as Ce } from "lucide-react";
-import { Fragment as we, jsx as X, jsxs as Z } from "react/jsx-runtime";
-import { AnimatePresence as Te, motion as Ee, useReducedMotion as De } from "motion/react";
-import { createPortal as Oe } from "react-dom";
+import { Children as G, createContext as ge, isValidElement as K, useContext as _e, useEffect as ve, useMemo as ye, useRef as be, useState as q } from "react";
+import { ChevronDown as J, Menu as xe } from "lucide-react";
+import { Fragment as Se, jsx as Y, jsxs as X } from "react/jsx-runtime";
+import { AnimatePresence as Z, motion as Ce, useReducedMotion as we } from "motion/react";
+import { createPortal as Te } from "react-dom";
 import { NavigationMenu as Q } from "@base-ui/react/navigation-menu";
 //#region src/components/organisms/SiteNav/SiteNav.tsx
-var ke = _e(null);
-function Ae(e, t, n, r) {
-	return t && (e || n) ? r ? U.threeHug : U.three : t ? U.middleOnly : e && n ? U.ends : e ? U.startOnly : U.endOnly;
+var Ee = ge(null);
+function De(e, t, n, r) {
+	return t && (e || n) ? r ? H.threeHug : H.three : t ? H.middleOnly : e && n ? H.ends : e ? H.startOnly : H.endOnly;
 }
-function je({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", collapseAt: c, state: ee, onStateChange: p, compactLayout: m = "hug", placement: g = "fixed", scrollContainer: _, "aria-label": y = "Site", className: b }) {
-	let x = q(null), S = De() ?? !1, { state: C, compact: w } = he({
-		collapseAt: c,
-		scrollContainer: _,
-		controlledState: ee,
-		placement: g,
-		onStateChange: p
-	}), [ne, T] = J(!1), [E, D] = J(!1), re = w && m === "hug", O = {
+function Oe(e, t) {
+	ve(() => {
+		if (!e || typeof document > "u") return;
+		let n = t?.current ?? document.documentElement, r = n.style.scrollPaddingTop;
+		return n.style.scrollPaddingTop = "calc(var(--site-nav-height) + var(--spacing) * 4)", () => {
+			n.style.scrollPaddingTop = r;
+		};
+	}, [e, t]);
+}
+function ke({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", collapseAt: l, state: u, onStateChange: m, compactLayout: h = "hug", placement: _ = "fixed", scrollContainer: v, "aria-label": b = "Site", className: x }) {
+	let S = be(null), C = we() ?? !1, { state: w, compact: T } = he({
+		collapseAt: l,
+		scrollContainer: v,
+		controlledState: u,
+		placement: _,
+		onStateChange: m
+	}), [E, D] = q(!1), [O, te] = q(!1), k = T && h === "hug", A = {
 		y: -72,
 		opacity: 0
-	}, k = {
+	}, j = {
 		y: 0,
 		opacity: 1
-	}, A = S ? { duration: 0 } : {
+	}, M = C ? { duration: 0 } : {
 		...t("medium"),
 		type: "tween"
-	}, j = _ != null, M = g === "fixed" || j, N = o != null, P = n != null, I = i != null, R = a != null || N, z = N ? /* @__PURE__ */ X(r, {
-		icon: /* @__PURE__ */ X(Ce, { strokeWidth: 2 }),
+	}, N = v != null, P = _ === "fixed" || N;
+	Oe(P && T, v);
+	let F = o != null, I = n != null, L = i != null, R = a != null || F, z = F ? /* @__PURE__ */ Y(r, {
+		icon: /* @__PURE__ */ Y(xe, { strokeWidth: 2 }),
 		"aria-label": "Open menu",
 		title: "",
 		size: "sm",
 		className: se,
-		"aria-expanded": ne,
-		onClick: () => T(!0)
+		"aria-expanded": E,
+		onClick: () => D(!0)
 	}) : null;
 	function B(e) {
-		return /* @__PURE__ */ Z("div", {
-			className: Ae(P, I, R, e),
+		return /* @__PURE__ */ X("div", {
+			className: De(I, L, R, e),
 			children: [
-				P ? /* @__PURE__ */ X("div", {
-					className: de,
+				I ? /* @__PURE__ */ Y("div", {
+					className: fe,
 					children: n
 				}) : null,
-				I ? /* @__PURE__ */ X("div", {
-					className: N ? e ? oe : F : e ? ae : ie,
+				L ? /* @__PURE__ */ Y("div", {
+					className: F ? e ? ie : ae : e ? re : ne,
 					children: i
 				}) : null,
-				R ? /* @__PURE__ */ Z("div", {
-					className: te,
+				R ? /* @__PURE__ */ X("div", {
+					className: ee,
 					children: [a, z]
 				}) : null
 			]
 		});
 	}
-	let V = e(u, f.compact, d[m]), U = /* @__PURE__ */ X("div", {
+	let V = e(d, p.compact, f[h]), H = /* @__PURE__ */ Y("div", {
 		"data-state": "expanded",
-		className: e(u, f.expanded),
+		className: e(d, p.expanded),
 		children: B(!1)
-	}), fe = /* @__PURE__ */ X("div", {
-		ref: x,
-		className: e(h, "px-[var(--grid-margin)]"),
-		children: /* @__PURE__ */ X("div", {
+	}), U = /* @__PURE__ */ Y("div", {
+		ref: S,
+		className: e(g, "px-[var(--grid-margin)]"),
+		children: /* @__PURE__ */ Y("div", {
 			"data-state": "compact",
 			className: V,
-			children: B(re)
+			children: B(k)
 		})
 	}), W = {
-		initial: !S && O,
-		animate: k,
-		exit: S ? k : O,
-		transition: A
-	}, pe = j ? e(ue, "h-0 w-full overflow-visible") : H;
-	return /* @__PURE__ */ Z(ke.Provider, {
+		initial: !C && A,
+		animate: j,
+		exit: C ? j : A,
+		transition: M
+	}, pe = N ? e(de, "h-0 w-full overflow-visible") : ce;
+	return /* @__PURE__ */ X(Ee.Provider, {
 		value: {
-			state: C,
-			anchorRef: x,
-			menuOpen: E,
-			setMenuOpen: D
+			state: w,
+			anchorRef: S,
+			menuOpen: O,
+			setMenuOpen: te
 		},
-		children: [M ? /* @__PURE__ */ Z(we, { children: [
-			/* @__PURE__ */ X(Te, { children: w ? /* @__PURE__ */ X(Ee.div, {
+		children: [P ? /* @__PURE__ */ X(Se, { children: [
+			/* @__PURE__ */ Y(Z, { children: T ? /* @__PURE__ */ Y(Ce.div, {
 				...W,
-				className: e(pe, !j && b),
-				children: /* @__PURE__ */ X("header", {
-					"aria-label": y,
+				className: e(pe, !N && x),
+				children: /* @__PURE__ */ Y("header", {
+					"aria-label": b,
 					"data-state": "compact",
-					"data-menu": E ? "open" : "closed",
-					className: e(j && e("w-full", b)),
-					children: fe
+					"data-menu": O ? "open" : "closed",
+					className: e(N && e("w-full", x)),
+					children: U
 				})
 			}, "site-nav-compact") : null }),
-			w ? /* @__PURE__ */ X("div", {
-				className: e(v, "w-full"),
+			T ? /* @__PURE__ */ Y("div", {
+				className: e(y, "w-full"),
 				"aria-hidden": !0
 			}) : null,
-			w ? null : /* @__PURE__ */ X("header", {
-				"aria-label": y,
+			T ? null : /* @__PURE__ */ Y("header", {
+				"aria-label": b,
 				"data-state": "expanded",
-				"data-menu": E ? "open" : "closed",
-				className: e(ce, b),
-				children: /* @__PURE__ */ X("div", {
-					ref: x,
-					className: h,
-					children: U
+				"data-menu": O ? "open" : "closed",
+				className: e(le, x),
+				children: /* @__PURE__ */ Y("div", {
+					ref: S,
+					className: g,
+					children: H
 				})
 			})
-		] }) : /* @__PURE__ */ X("header", {
-			"aria-label": y,
-			"data-state": C,
-			"data-menu": E ? "open" : "closed",
-			className: e(le, b),
-			children: /* @__PURE__ */ X("div", {
-				ref: x,
-				className: e(h, w && "px-[var(--grid-margin)]"),
-				children: /* @__PURE__ */ X(Te, {
+		] }) : /* @__PURE__ */ Y("header", {
+			"aria-label": b,
+			"data-state": w,
+			"data-menu": O ? "open" : "closed",
+			className: e(ue, x),
+			children: /* @__PURE__ */ Y("div", {
+				ref: S,
+				className: e(g, T && "px-[var(--grid-margin)]"),
+				children: /* @__PURE__ */ Y(Z, {
 					initial: !1,
 					mode: "popLayout",
-					children: w ? /* @__PURE__ */ X(Ee.div, {
-						initial: !S && O,
-						animate: k,
-						exit: S ? k : O,
-						transition: A,
+					children: T ? /* @__PURE__ */ Y(Ce.div, {
+						initial: !C && A,
+						animate: j,
+						exit: C ? j : A,
+						transition: M,
 						"data-state": "compact",
 						className: V,
 						children: B(!0)
-					}, "compact") : /* @__PURE__ */ X("div", { children: U }, "expanded")
+					}, "compact") : /* @__PURE__ */ Y("div", { children: H }, "expanded")
 				})
 			})
-		}), N ? /* @__PURE__ */ X(l, {
-			open: ne,
-			onOpenChange: T,
-			children: /* @__PURE__ */ X(l.Content, {
+		}), F ? /* @__PURE__ */ Y(c, {
+			open: E,
+			onOpenChange: D,
+			children: /* @__PURE__ */ Y(c.Content, {
 				side: "end",
 				title: s,
-				children: /* @__PURE__ */ X("div", {
-					className: L,
+				children: /* @__PURE__ */ Y("div", {
+					className: oe,
 					children: o
 				})
 			})
 		}) : null]
 	});
 }
-function Me({ href: e, icon: t, children: i, "aria-label": a }) {
-	let o = t ?? (G(i) && i.type !== void 0 ? i : null);
-	return o == null ? /* @__PURE__ */ X(n, {
+function Ae({ href: e, icon: t, children: i, "aria-label": a }) {
+	let o = t ?? (K(i) && i.type !== void 0 ? i : null);
+	return o == null ? /* @__PURE__ */ Y(n, {
 		role: "ghost",
 		size: "sm",
-		render: /* @__PURE__ */ X("a", { href: e }),
+		render: /* @__PURE__ */ Y("a", { href: e }),
 		"aria-label": a,
-		className: p,
+		className: m,
 		children: i
-	}) : /* @__PURE__ */ X(r, {
+	}) : /* @__PURE__ */ Y(r, {
 		icon: o,
 		"aria-label": a ?? "Home",
 		role: "ghost",
 		size: "sm",
 		title: "",
-		render: /* @__PURE__ */ X("a", { href: e }),
-		className: p
+		render: /* @__PURE__ */ Y("a", { href: e }),
+		className: m
 	});
 }
-function Ne(e) {
-	return ge.toArray(e).filter(G);
+function je(e) {
+	return G.toArray(e).filter(K);
 }
 function $(e) {
 	let t = e.props;
 	return typeof t.value == "string" && t.value.length > 0 ? t.value : typeof t.href == "string" ? t.href : typeof t.label == "string" ? t.label : "item";
 }
-function Pe(e) {
+function Me(e) {
 	let t = e.props;
 	return t.label ?? t.children;
 }
-function Fe(e) {
+function Ne(e) {
 	return "label" in e.props && !("href" in e.props);
 }
-function Ie(e) {
+function Pe(e) {
 	for (let t of e) if (t.props.current) return $(t);
 	return e[0] == null ? "" : $(e[0]);
 }
-function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDelay: s = 150 }) {
-	let c = ve(ke), l = be(), u = q(null), d = q(null), f = q(null), p = q(/* @__PURE__ */ new Map()), m = Se(() => Ne(t), [t]), h = m.map($), g = Ie(m), [_, te] = J(h), [v, T] = J([]), [E, D] = J(!1), [k, A] = J(null), [j, M] = J(0), N = K(() => {
-		let e = u.current, t = f.current;
-		if (e == null || t == null) return;
-		let n = m.map((e) => ({
-			value: $(e),
-			width: Math.ceil(p.current.get($(e))?.getBoundingClientRect().width ?? 0)
-		}));
-		if (n.some((e) => e.width === 0)) return;
-		let r = ee(n, g, e.clientWidth, Math.ceil(t.getBoundingClientRect().width));
-		te(r.visibleValues), T(r.overflowValues), r.overflowValues.length === 0 && (D(!1), A(null));
-	}, [g, m]);
-	xe(() => {
-		N();
-		let e = u.current;
-		if (e == null) return;
-		let t = new ResizeObserver(N);
-		return t.observe(e), document.fonts?.ready.then(N), () => t.disconnect();
-	}, [N]);
-	let ie = new Set(_), ae = new Set(v), oe = m.filter((e) => ie.has($(e))), F = m.filter((e) => ae.has($(e))), I = K(() => {
-		D(!1), A(null);
-	}, []), L = K(() => {
-		let e = d.current;
-		if (e == null) return;
-		let t = F.flatMap(H);
-		A(o(e, t.map((e) => ({ label: String(e.label ?? "") })), {
-			align: "end",
-			widthMode: "content"
-		})), M(0), D(!0);
-	}, [F]);
-	ye(() => {
-		if (!E) return;
-		function e(e) {
-			let t = e.target;
-			u.current?.contains(t) || document.getElementById(l)?.contains(t) || I();
-		}
-		function t(e) {
-			e.key === "Escape" && (I(), d.current?.focus());
-		}
-		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), window.addEventListener("resize", I), window.addEventListener("scroll", I, !0), () => {
-			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t), window.removeEventListener("resize", I), window.removeEventListener("scroll", I, !0);
-		};
-	}, [
-		I,
-		l,
-		E
-	]);
-	function se(e) {
-		let t = F.flatMap(H);
-		if (t.length !== 0) {
-			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				if (e.preventDefault(), !E) {
-					L(), M(e.key === "ArrowDown" ? 0 : Math.max(t.length - 1, 0));
-					return;
-				}
-				let n = e.key === "ArrowDown" ? 1 : -1;
-				M((e) => (e + n + t.length) % t.length);
-			}
-			if ((e.key === "Enter" || e.key === " ") && E) {
-				e.preventDefault();
-				let t = F.flatMap(H)[j];
-				t != null && V(t.href);
-			}
-		}
-	}
-	function V(e) {
-		I(), e != null && e.length > 0 && window.location.assign(e);
-	}
-	function H(e) {
-		if (!Fe(e)) {
+function Fe({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDelay: o = 150 }) {
+	let s = _e(Ee), c = ye(() => je(t), [t]), d = new Map(c.map((e) => [$(e), e])), f = (e) => e.flatMap((e) => d.get(e) ?? []), p = (e) => f(e).flatMap(v), m = u({
+		ids: c.map($),
+		activeId: Pe(c),
+		toMenuRows: (e) => p(e).map((e) => ({
+			label: l(e.label),
+			disabled: e.href == null
+		}))
+	}), { menu: h } = m, g = f(m.visibleIds), _ = p(m.overflowIds);
+	function v(e) {
+		if (!Ne(e)) {
 			let t = e.props;
 			return [{
 				id: $(e),
@@ -271,8 +222,8 @@ function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		}
 		let t = [];
 		function n(e) {
-			ge.forEach(e, (e) => {
-				if (!G(e)) return;
+			G.forEach(e, (e) => {
+				if (!K(e)) return;
 				let r = e.props;
 				if (typeof r.href == "string" && r.label == null) {
 					t.push({
@@ -287,98 +238,97 @@ function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		}
 		return n(e.props.children), t.length === 0 && t.push({
 			id: $(e),
-			label: Pe(e)
+			label: Me(e)
 		}), t;
 	}
-	return /* @__PURE__ */ Z("div", {
-		ref: u,
-		className: x,
+	return /* @__PURE__ */ X("div", {
+		...m.rowProps,
+		className: S,
 		children: [
-			/* @__PURE__ */ Z(Q.Root, {
+			/* @__PURE__ */ X(Q.Root, {
 				"aria-label": r,
 				delay: i,
-				closeDelay: s,
+				closeDelay: o,
 				className: B,
-				onValueChange: (e) => c?.setMenuOpen(e != null),
-				children: [/* @__PURE__ */ X(Q.List, {
-					className: b,
-					children: oe
-				}), /* @__PURE__ */ Z(Q.Portal, { children: [/* @__PURE__ */ X(Q.Backdrop, { className: ne }), /* @__PURE__ */ X(Q.Positioner, {
-					anchor: c?.anchorRef,
+				onValueChange: (e) => s?.setMenuOpen(e != null),
+				children: [/* @__PURE__ */ Y(Q.List, {
+					className: x,
+					children: g
+				}), /* @__PURE__ */ X(Q.Portal, { children: [/* @__PURE__ */ Y(Q.Backdrop, { className: E }), /* @__PURE__ */ Y(Q.Positioner, {
+					anchor: s?.anchorRef,
 					positionMethod: "fixed",
 					side: "bottom",
 					align: "center",
 					sideOffset: 8,
 					collisionPadding: 8,
-					className: O,
-					children: /* @__PURE__ */ X(Q.Popup, {
-						className: re,
-						children: /* @__PURE__ */ X(Q.Viewport, { className: P })
+					className: A,
+					children: /* @__PURE__ */ Y(Q.Popup, {
+						className: k,
+						children: /* @__PURE__ */ Y(Q.Viewport, { className: I })
 					})
 				})] })]
 			}),
-			F.length > 0 ? /* @__PURE__ */ X(n, {
-				ref: d,
+			m.overflowIds.length > 0 ? /* @__PURE__ */ Y(n, {
+				ref: m.moreRef,
 				role: "ghost",
 				size: "sm",
 				"aria-haspopup": "menu",
-				"aria-expanded": E,
-				"aria-controls": E ? l : void 0,
-				"data-state": E ? "open" : "closed",
+				"aria-expanded": h.open,
+				"aria-controls": h.triggerProps["aria-controls"],
+				"data-state": h.open ? "open" : "closed",
 				className: z,
-				onClick: () => E ? I() : L(),
-				onKeyDown: se,
-				children: /* @__PURE__ */ Z("span", {
+				onClick: h.toggle,
+				children: /* @__PURE__ */ X("span", {
 					className: me,
-					children: ["More", /* @__PURE__ */ X("span", {
+					children: ["More", /* @__PURE__ */ Y("span", {
 						className: R,
-						"data-state": E ? "open" : "closed",
-						children: /* @__PURE__ */ X(Y, {
+						"data-state": h.open ? "open" : "closed",
+						children: /* @__PURE__ */ Y(J, {
 							strokeWidth: 2,
 							"aria-hidden": !0
 						})
 					})]
 				})
 			}) : null,
-			/* @__PURE__ */ Z("div", {
-				className: w,
+			/* @__PURE__ */ X("div", {
+				className: T,
 				"aria-hidden": !0,
-				children: [m.map((t) => {
-					let n = $(t), r = Pe(t), i = Fe(t);
-					return /* @__PURE__ */ Z("span", {
-						ref: (e) => {
-							e == null ? p.current.delete(n) : p.current.set(n, e);
-						},
-						className: e(S, i ? W : y),
-						children: [r, i ? /* @__PURE__ */ X(Y, {
+				children: [c.map((t) => {
+					let n = $(t), r = Me(t), i = Ne(t);
+					return /* @__PURE__ */ X("span", {
+						ref: m.measureRef(n),
+						className: e(C, i ? W : b),
+						children: [r, i ? /* @__PURE__ */ Y(J, {
 							className: "ml-1 size-3.5",
 							strokeWidth: 2
 						}) : null]
 					}, n);
-				}), /* @__PURE__ */ Z("span", {
-					ref: f,
-					className: e(z, C),
-					children: ["More", /* @__PURE__ */ X(Y, {
+				}), /* @__PURE__ */ X("span", {
+					ref: m.moreMeasureRef,
+					className: e(z, w),
+					children: ["More", /* @__PURE__ */ Y(J, {
 						className: "size-3.5",
 						strokeWidth: 2
 					})]
 				})]
 			}),
-			E && k != null ? Oe(/* @__PURE__ */ X(a.Menu, {
-				id: l,
+			h.open && h.menuStyle != null ? Te(/* @__PURE__ */ Y(a.Menu, {
+				...h.menuProps,
 				role: "menu",
 				"aria-label": `${r} overflow`,
-				style: k,
-				children: F.flatMap(H).map((e, t) => /* @__PURE__ */ X("li", {
+				children: _.map((e, t) => /* @__PURE__ */ Y("li", {
 					role: "presentation",
-					children: /* @__PURE__ */ X(a.Item, {
+					children: /* @__PURE__ */ Y(a.Item, {
+						...h.rowProps(t),
 						role: "menuitem",
-						tabIndex: -1,
 						truncate: !1,
 						selected: !!e.current,
-						active: t === j,
-						onMouseEnter: () => M(t),
-						onClick: () => V(e.href),
+						disabled: e.href == null,
+						render: e.href == null ? void 0 : /* @__PURE__ */ Y("a", {
+							href: e.href,
+							"aria-current": e.current ? "page" : void 0
+						}),
+						onClick: () => h.close(),
 						children: e.label
 					})
 				}, e.id))
@@ -386,122 +336,122 @@ function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		]
 	});
 }
-function Re({ href: e, children: t, current: r = !1, value: i }) {
-	return /* @__PURE__ */ X(Q.Item, {
+function Ie({ href: e, children: t, current: r = !1, value: i }) {
+	return /* @__PURE__ */ Y(Q.Item, {
 		value: i ?? e,
-		children: /* @__PURE__ */ X(Q.Link, {
+		children: /* @__PURE__ */ Y(Q.Link, {
 			href: e,
 			active: r,
 			"aria-current": r ? "page" : void 0,
-			render: /* @__PURE__ */ X(n, {
+			render: /* @__PURE__ */ Y(n, {
 				role: "ghost",
 				size: "sm",
-				render: /* @__PURE__ */ X("a", {}),
-				className: y,
+				render: /* @__PURE__ */ Y("a", {}),
+				className: b,
 				children: t
 			})
 		})
 	});
 }
-function ze({ label: e, children: t, value: r }) {
+function Le({ label: e, children: t, value: r }) {
 	let i = r ?? (typeof e == "string" ? e : void 0);
-	return /* @__PURE__ */ Z(Q.Item, {
+	return /* @__PURE__ */ X(Q.Item, {
 		value: i,
-		children: [/* @__PURE__ */ X(Q.Trigger, { render: /* @__PURE__ */ X(n, {
+		children: [/* @__PURE__ */ Y(Q.Trigger, { render: /* @__PURE__ */ Y(n, {
 			role: "ghost",
 			size: "sm",
 			className: W,
-			children: /* @__PURE__ */ Z("span", {
+			children: /* @__PURE__ */ X("span", {
 				className: me,
-				children: [e, /* @__PURE__ */ X(Q.Icon, {
+				children: [e, /* @__PURE__ */ Y(Q.Icon, {
 					className: pe,
-					children: /* @__PURE__ */ X(Y, {
+					children: /* @__PURE__ */ Y(J, {
 						strokeWidth: 2,
 						"aria-hidden": !0
 					})
 				})]
 			})
-		}) }), /* @__PURE__ */ X(Q.Content, {
-			className: T,
+		}) }), /* @__PURE__ */ Y(Q.Content, {
+			className: D,
 			children: t
 		})]
 	});
 }
-function Be({ label: t, span: n = 1, children: r }) {
-	return /* @__PURE__ */ Z("section", {
-		className: e(j, N[n]),
-		children: [t == null ? null : /* @__PURE__ */ X("h3", {
-			className: M,
+function Re({ label: t, span: n = 1, children: r }) {
+	return /* @__PURE__ */ X("section", {
+		className: e(N, F[n]),
+		children: [t == null ? null : /* @__PURE__ */ Y("h3", {
+			className: P,
 			children: t
 		}), r]
 	});
 }
-function Ve({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" }) {
-	return /* @__PURE__ */ X(Q.Link, {
+function ze({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" }) {
+	return /* @__PURE__ */ Y(Q.Link, {
 		href: e,
 		target: i ? "_blank" : void 0,
 		rel: i ? "noopener noreferrer" : void 0,
-		render: /* @__PURE__ */ Z(n, {
+		render: /* @__PURE__ */ X(n, {
 			role: "ghost",
 			size: a,
-			render: /* @__PURE__ */ X("a", {}),
-			className: E,
+			render: /* @__PURE__ */ Y("a", {}),
+			className: O,
 			icon: r,
-			children: [t, i ? /* @__PURE__ */ X("span", {
+			children: [t, i ? /* @__PURE__ */ Y("span", {
 				className: "sr-only",
 				children: " (opens in a new tab)"
 			}) : null]
 		})
 	});
 }
-function He({ children: e }) {
-	return /* @__PURE__ */ X("div", {
-		className: D,
+function Be({ children: e }) {
+	return /* @__PURE__ */ Y("div", {
+		className: te,
 		children: e
 	});
 }
-function Ue({ label: t, variant: n = "thumb", className: r }) {
-	return /* @__PURE__ */ X("div", {
+function Ve({ label: t, variant: n = "thumb", className: r }) {
+	return /* @__PURE__ */ Y("div", {
 		role: "img",
 		"aria-label": t,
-		className: e(c, s, n === "featured" ? "aspect-[16/10] w-full" : A, r)
+		className: e(s, o, n === "featured" ? "aspect-[16/10] w-full" : M, r)
 	});
 }
-function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
-	return /* @__PURE__ */ Z("div", {
+function He({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+	return /* @__PURE__ */ X("div", {
 		className: "flex flex-col gap-1 type-body",
 		children: [
 			e,
-			/* @__PURE__ */ X("h2", {
+			/* @__PURE__ */ Y("h2", {
 				className: "type-heading-2 text-fg",
 				children: t
 			}),
-			n == null ? null : /* @__PURE__ */ X("p", {
+			n == null ? null : /* @__PURE__ */ Y("p", {
 				className: "text-muted",
 				children: n
 			}),
-			/* @__PURE__ */ X(i, {
+			/* @__PURE__ */ Y(i, {
 				href: r,
 				children: a
 			})
 		]
 	});
 }
-function Ge({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
-	return /* @__PURE__ */ Z("div", {
-		className: k,
-		children: [e, /* @__PURE__ */ Z("div", {
+function Ue({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+	return /* @__PURE__ */ X("div", {
+		className: j,
+		children: [e, /* @__PURE__ */ X("div", {
 			className: "flex min-w-0 flex-col gap-1 type-body",
 			children: [
-				/* @__PURE__ */ X("h3", {
+				/* @__PURE__ */ Y("h3", {
 					className: "type-heading-3 text-fg",
 					children: t
 				}),
-				n == null ? null : /* @__PURE__ */ X("p", {
+				n == null ? null : /* @__PURE__ */ Y("p", {
 					className: "text-muted",
 					children: n
 				}),
-				/* @__PURE__ */ X(i, {
+				/* @__PURE__ */ Y(i, {
 					href: r,
 					children: a
 				})
@@ -509,28 +459,28 @@ function Ge({ media: e, title: t, description: n, href: r, linkLabel: a = "Read
 		})]
 	});
 }
-function Ke({ href: e, children: t, current: r = !1 }) {
-	return /* @__PURE__ */ X(n, {
+function We({ href: e, children: t, current: r = !1 }) {
+	return /* @__PURE__ */ Y(n, {
 		role: "ghost",
 		size: "md",
-		render: /* @__PURE__ */ X("a", { href: e }),
+		render: /* @__PURE__ */ Y("a", { href: e }),
 		"aria-current": r ? "page" : void 0,
-		className: I,
+		className: L,
 		children: t
 	});
 }
-var qe = Object.assign(je, {
-	Brand: Me,
-	Links: Le,
-	Link: Re,
-	Menu: ze,
-	MenuSection: Be,
-	MenuLink: Ve,
-	MenuLinkGrid: He,
-	MenuMedia: Ue,
-	Featured: We,
-	ReadRow: Ge,
-	MobileLink: Ke
+var Ge = Object.assign(ke, {
+	Brand: Ae,
+	Links: Fe,
+	Link: Ie,
+	Menu: Le,
+	MenuSection: Re,
+	MenuLink: ze,
+	MenuLinkGrid: Be,
+	MenuMedia: Ve,
+	Featured: He,
+	ReadRow: Ue,
+	MobileLink: We
 });
 //#endregion
-export { qe as SiteNav, m as siteNavCompactLayouts, g as siteNavDefaultCollapseAt, _ as siteNavDefaultCollapseRatio, v as siteNavExpandedHeightClasses, k as siteNavMenuReadRowClasses, A as siteNavMenuReadThumbClasses, V as siteNavPlacements, fe as siteNavStates };
+export { Ge as SiteNav, h as siteNavCompactLayouts, _ as siteNavDefaultCollapseAt, v as siteNavDefaultCollapseRatio, y as siteNavExpandedHeightClasses, j as siteNavMenuReadRowClasses, M as siteNavMenuReadThumbClasses, V as siteNavPlacements, U as siteNavStates };