@thewhatmatters/wmds 0.4.27 → 0.4.29

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

@@ -5,58 +5,70 @@ 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 { 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 { 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 ee } from "../../molecules/Dropdown/useOverflowMenu.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 ne, siteNavLinkClasses as v, siteNavLinkListClasses as y, siteNavLinksRootClasses as b, siteNavMeasureItemClasses as x, siteNavMeasureMoreClasses as S, siteNavMeasureRailClasses as C, siteNavMenuBackdropClasses as w, siteNavMenuContentClasses as T, siteNavMenuLinkClasses as E, siteNavMenuLinkGridClasses as D, siteNavMenuPopupClasses as O, siteNavMenuPositionerClasses as k, siteNavMenuReadRowClasses as A, siteNavMenuReadThumbClasses as j, siteNavMenuSectionClasses as M, siteNavMenuSectionLabelClasses as N, siteNavMenuSectionSpanClasses as P, siteNavMenuViewportClasses as F, siteNavMiddleClasses as re, siteNavMiddleHugClasses as ie, siteNavMiddleHugResponsiveClasses as ae, siteNavMiddleResponsiveClasses as oe, siteNavMobileLinkClasses as I, siteNavMobileListClasses as se, siteNavMobileTriggerClasses as ce, siteNavMoreIconClasses as L, siteNavMoreTriggerClasses as R, siteNavNavigationRootClasses as z, siteNavPlacements as B, siteNavRootFixedClasses as le, siteNavRootFlowClasses as ue, siteNavRootInlineClasses as de, siteNavRootStickyClasses as fe, siteNavSlotsClasses as V, siteNavStartClasses as pe, siteNavStates as H, siteNavTriggerClasses as U, siteNavTriggerIconClasses as W, siteNavTriggerLabelClasses as G } from "./siteNavStyles.js";
+import { useSiteNavCollapse as me } from "./useSiteNavCollapse.js";
+import { Children as K, createContext as he, isValidElement as q, useContext as ge, useEffect as _e, useId as ve, useMemo as ye, useRef as be, useState as J } from "react";
+import { ChevronDown as Y, Menu as xe } from "lucide-react";
+import { Fragment as Se, jsx as X, jsxs as Z } from "react/jsx-runtime";
+import { AnimatePresence as Ce, motion as we, useReducedMotion as Te } from "motion/react";
+import { createPortal as Ee } 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 De = he(null);
+function Oe(e, t, n, r) {
+	return t && (e || n) ? r ? V.threeHug : V.three : t ? V.middleOnly : e && n ? V.ends : e ? V.startOnly : V.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,
+function ke(e, t) {
+	_e(() => {
+		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 Ae({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", collapseAt: l, state: ee, onStateChange: p, compactLayout: m = "hug", placement: g = "fixed", scrollContainer: _, "aria-label": v = "Site", className: y }) {
+	let b = be(null), x = Te() ?? !1, { state: S, compact: C } = me({
+		collapseAt: l,
 		scrollContainer: _,
 		controlledState: ee,
 		placement: g,
 		onStateChange: p
-	}), [ne, T] = J(!1), [E, D] = J(!1), re = w && m === "hug", O = {
+	}), [w, T] = J(!1), E = ve(), [D, O] = J(!1), k = C && m === "hug", A = {
 		y: -72,
 		opacity: 0
-	}, k = {
+	}, j = {
 		y: 0,
 		opacity: 1
-	}, A = S ? { duration: 0 } : {
+	}, M = x ? { 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 }),
-		"aria-label": "Open menu",
+	}, N = _ != null, P = g === "fixed" || N;
+	ke(P && C, _);
+	let F = o != null, I = n != null, L = i != null, R = a != null || F, z = F ? /* @__PURE__ */ X(r, {
+		icon: /* @__PURE__ */ X(xe, { strokeWidth: 2 }),
+		"aria-label": w ? "Close menu" : "Open menu",
 		title: "",
 		size: "sm",
-		className: se,
-		"aria-expanded": ne,
-		onClick: () => T(!0)
+		className: ce,
+		"aria-haspopup": "dialog",
+		"aria-expanded": w,
+		"aria-controls": w ? E : void 0,
+		onClick: () => T((e) => !e)
 	}) : null;
 	function B(e) {
 		return /* @__PURE__ */ Z("div", {
-			className: Ae(P, I, R, e),
+			className: Oe(I, L, R, e),
 			children: [
-				P ? /* @__PURE__ */ X("div", {
-					className: de,
+				I ? /* @__PURE__ */ X("div", {
+					className: pe,
 					children: n
 				}) : null,
-				I ? /* @__PURE__ */ X("div", {
-					className: N ? e ? oe : F : e ? ae : ie,
+				L ? /* @__PURE__ */ X("div", {
+					className: F ? e ? ae : oe : e ? ie : re,
 					children: i
 				}) : null,
 				R ? /* @__PURE__ */ Z("div", {
@@ -66,96 +78,97 @@ function je({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", c
 			]
 		});
 	}
-	let V = e(u, f.compact, d[m]), U = /* @__PURE__ */ X("div", {
+	let V = e(u, f.compact, d[m]), H = /* @__PURE__ */ X("div", {
 		"data-state": "expanded",
 		className: e(u, f.expanded),
 		children: B(!1)
-	}), fe = /* @__PURE__ */ X("div", {
-		ref: x,
+	}), U = /* @__PURE__ */ X("div", {
+		ref: b,
 		className: e(h, "px-[var(--grid-margin)]"),
 		children: /* @__PURE__ */ X("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: !x && A,
+		animate: j,
+		exit: x ? j : A,
+		transition: M
+	}, G = N ? e(fe, "h-0 w-full overflow-visible") : le;
+	return /* @__PURE__ */ Z(De.Provider, {
 		value: {
-			state: C,
-			anchorRef: x,
-			menuOpen: E,
-			setMenuOpen: D
+			state: S,
+			anchorRef: b,
+			menuOpen: D,
+			setMenuOpen: O
 		},
-		children: [M ? /* @__PURE__ */ Z(we, { children: [
-			/* @__PURE__ */ X(Te, { children: w ? /* @__PURE__ */ X(Ee.div, {
+		children: [P ? /* @__PURE__ */ Z(Se, { children: [
+			/* @__PURE__ */ X(Ce, { children: C ? /* @__PURE__ */ X(we.div, {
 				...W,
-				className: e(pe, !j && b),
+				className: e(G, !N && y),
 				children: /* @__PURE__ */ X("header", {
-					"aria-label": y,
+					"aria-label": v,
 					"data-state": "compact",
-					"data-menu": E ? "open" : "closed",
-					className: e(j && e("w-full", b)),
-					children: fe
+					"data-menu": D ? "open" : "closed",
+					className: e(N && e("w-full", y)),
+					children: U
 				})
 			}, "site-nav-compact") : null }),
-			w ? /* @__PURE__ */ X("div", {
-				className: e(v, "w-full"),
+			C ? /* @__PURE__ */ X("div", {
+				className: e(ne, "w-full"),
 				"aria-hidden": !0
 			}) : null,
-			w ? null : /* @__PURE__ */ X("header", {
-				"aria-label": y,
+			C ? null : /* @__PURE__ */ X("header", {
+				"aria-label": v,
 				"data-state": "expanded",
-				"data-menu": E ? "open" : "closed",
-				className: e(ce, b),
+				"data-menu": D ? "open" : "closed",
+				className: e(ue, y),
 				children: /* @__PURE__ */ X("div", {
-					ref: x,
+					ref: b,
 					className: h,
-					children: U
+					children: H
 				})
 			})
 		] }) : /* @__PURE__ */ X("header", {
-			"aria-label": y,
-			"data-state": C,
-			"data-menu": E ? "open" : "closed",
-			className: e(le, b),
+			"aria-label": v,
+			"data-state": S,
+			"data-menu": D ? "open" : "closed",
+			className: e(de, y),
 			children: /* @__PURE__ */ X("div", {
-				ref: x,
-				className: e(h, w && "px-[var(--grid-margin)]"),
-				children: /* @__PURE__ */ X(Te, {
+				ref: b,
+				className: e(h, C && "px-[var(--grid-margin)]"),
+				children: /* @__PURE__ */ X(Ce, {
 					initial: !1,
 					mode: "popLayout",
-					children: w ? /* @__PURE__ */ X(Ee.div, {
-						initial: !S && O,
-						animate: k,
-						exit: S ? k : O,
-						transition: A,
+					children: C ? /* @__PURE__ */ X(we.div, {
+						initial: !x && A,
+						animate: j,
+						exit: x ? j : A,
+						transition: M,
 						"data-state": "compact",
 						className: V,
 						children: B(!0)
-					}, "compact") : /* @__PURE__ */ X("div", { children: U }, "expanded")
+					}, "compact") : /* @__PURE__ */ X("div", { children: H }, "expanded")
 				})
 			})
-		}), N ? /* @__PURE__ */ X(l, {
-			open: ne,
+		}), F ? /* @__PURE__ */ X(c, {
+			open: w,
 			onOpenChange: T,
-			children: /* @__PURE__ */ X(l.Content, {
+			children: /* @__PURE__ */ X(c.Content, {
+				id: E,
 				side: "end",
 				title: s,
 				children: /* @__PURE__ */ X("div", {
-					className: L,
+					className: se,
 					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);
+function je({ href: e, icon: t, children: i, "aria-label": a }) {
+	let o = t ?? (q(i) && i.type !== void 0 ? i : null);
 	return o == null ? /* @__PURE__ */ X(n, {
 		role: "ghost",
 		size: "sm",
@@ -173,94 +186,35 @@ function Me({ href: e, icon: t, children: i, "aria-label": a }) {
 		className: p
 	});
 }
-function Ne(e) {
-	return ge.toArray(e).filter(G);
+function Me(e) {
+	return K.toArray(e).filter(q);
 }
 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 Ne(e) {
 	let t = e.props;
 	return t.label ?? t.children;
 }
-function Fe(e) {
+function Pe(e) {
 	return "label" in e.props && !("href" in e.props);
 }
-function Ie(e) {
+function Fe(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 Ie({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDelay: o = 150 }) {
+	let s = ge(De), c = ye(() => Me(t), [t]), u = new Map(c.map((e) => [$(e), e])), d = (e) => e.flatMap((e) => u.get(e) ?? []), f = (e) => d(e).flatMap(_), p = ee({
+		ids: c.map($),
+		activeId: Fe(c),
+		toMenuRows: (e) => f(e).map((e) => ({
+			label: l(e.label),
+			disabled: e.href == null
+		}))
+	}), { menu: m } = p, h = d(p.visibleIds), g = f(p.overflowIds);
+	function _(e) {
+		if (!Pe(e)) {
 			let t = e.props;
 			return [{
 				id: $(e),
@@ -271,8 +225,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;
+			K.forEach(e, (e) => {
+				if (!q(e)) return;
 				let r = e.props;
 				if (typeof r.href == "string" && r.label == null) {
 					t.push({
@@ -287,52 +241,51 @@ 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: Ne(e)
 		}), t;
 	}
 	return /* @__PURE__ */ Z("div", {
-		ref: u,
-		className: x,
+		...p.rowProps,
+		className: b,
 		children: [
 			/* @__PURE__ */ Z(Q.Root, {
 				"aria-label": r,
 				delay: i,
-				closeDelay: s,
-				className: B,
-				onValueChange: (e) => c?.setMenuOpen(e != null),
+				closeDelay: o,
+				className: z,
+				onValueChange: (e) => s?.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,
+					className: y,
+					children: h
+				}), /* @__PURE__ */ Z(Q.Portal, { children: [/* @__PURE__ */ X(Q.Backdrop, { className: w }), /* @__PURE__ */ X(Q.Positioner, {
+					anchor: s?.anchorRef,
 					positionMethod: "fixed",
 					side: "bottom",
 					align: "center",
 					sideOffset: 8,
 					collisionPadding: 8,
-					className: O,
+					className: k,
 					children: /* @__PURE__ */ X(Q.Popup, {
-						className: re,
-						children: /* @__PURE__ */ X(Q.Viewport, { className: P })
+						className: O,
+						children: /* @__PURE__ */ X(Q.Viewport, { className: F })
 					})
 				})] })]
 			}),
-			F.length > 0 ? /* @__PURE__ */ X(n, {
-				ref: d,
+			p.overflowIds.length > 0 ? /* @__PURE__ */ X(n, {
+				ref: p.moreRef,
 				role: "ghost",
 				size: "sm",
 				"aria-haspopup": "menu",
-				"aria-expanded": E,
-				"aria-controls": E ? l : void 0,
-				"data-state": E ? "open" : "closed",
-				className: z,
-				onClick: () => E ? I() : L(),
-				onKeyDown: se,
+				"aria-expanded": m.open,
+				"aria-controls": m.triggerProps["aria-controls"],
+				"data-state": m.open ? "open" : "closed",
+				className: R,
+				onClick: m.toggle,
 				children: /* @__PURE__ */ Z("span", {
-					className: me,
+					className: G,
 					children: ["More", /* @__PURE__ */ X("span", {
-						className: R,
-						"data-state": E ? "open" : "closed",
+						className: L,
+						"data-state": m.open ? "open" : "closed",
 						children: /* @__PURE__ */ X(Y, {
 							strokeWidth: 2,
 							"aria-hidden": !0
@@ -341,44 +294,44 @@ function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 				})
 			}) : null,
 			/* @__PURE__ */ Z("div", {
-				className: w,
+				className: C,
 				"aria-hidden": !0,
-				children: [m.map((t) => {
-					let n = $(t), r = Pe(t), i = Fe(t);
+				children: [c.map((t) => {
+					let n = $(t), r = Ne(t), i = Pe(t);
 					return /* @__PURE__ */ Z("span", {
-						ref: (e) => {
-							e == null ? p.current.delete(n) : p.current.set(n, e);
-						},
-						className: e(S, i ? W : y),
+						ref: p.measureRef(n),
+						className: e(x, i ? U : v),
 						children: [r, i ? /* @__PURE__ */ X(Y, {
 							className: "ml-1 size-3.5",
 							strokeWidth: 2
 						}) : null]
 					}, n);
 				}), /* @__PURE__ */ Z("span", {
-					ref: f,
-					className: e(z, C),
+					ref: p.moreMeasureRef,
+					className: e(R, S),
 					children: ["More", /* @__PURE__ */ X(Y, {
 						className: "size-3.5",
 						strokeWidth: 2
 					})]
 				})]
 			}),
-			E && k != null ? Oe(/* @__PURE__ */ X(a.Menu, {
-				id: l,
+			m.open && m.menuStyle != null ? Ee(/* @__PURE__ */ X(a.Menu, {
+				...m.menuProps,
 				role: "menu",
 				"aria-label": `${r} overflow`,
-				style: k,
-				children: F.flatMap(H).map((e, t) => /* @__PURE__ */ X("li", {
+				children: g.map((e, t) => /* @__PURE__ */ X("li", {
 					role: "presentation",
 					children: /* @__PURE__ */ X(a.Item, {
+						...m.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__ */ X("a", {
+							href: e.href,
+							"aria-current": e.current ? "page" : void 0
+						}),
+						onClick: () => m.close(),
 						children: e.label
 					})
 				}, e.id))
@@ -386,7 +339,7 @@ function Le({ children: t, "aria-label": r = "Primary", delay: i = 100, closeDel
 		]
 	});
 }
-function Re({ href: e, children: t, current: r = !1, value: i }) {
+function Le({ href: e, children: t, current: r = !1, value: i }) {
 	return /* @__PURE__ */ X(Q.Item, {
 		value: i ?? e,
 		children: /* @__PURE__ */ X(Q.Link, {
@@ -397,24 +350,24 @@ function Re({ href: e, children: t, current: r = !1, value: i }) {
 				role: "ghost",
 				size: "sm",
 				render: /* @__PURE__ */ X("a", {}),
-				className: y,
+				className: v,
 				children: t
 			})
 		})
 	});
 }
-function ze({ label: e, children: t, value: r }) {
+function Re({ label: e, children: t, value: r }) {
 	let i = r ?? (typeof e == "string" ? e : void 0);
 	return /* @__PURE__ */ Z(Q.Item, {
 		value: i,
 		children: [/* @__PURE__ */ X(Q.Trigger, { render: /* @__PURE__ */ X(n, {
 			role: "ghost",
 			size: "sm",
-			className: W,
+			className: U,
 			children: /* @__PURE__ */ Z("span", {
-				className: me,
+				className: G,
 				children: [e, /* @__PURE__ */ X(Q.Icon, {
-					className: pe,
+					className: W,
 					children: /* @__PURE__ */ X(Y, {
 						strokeWidth: 2,
 						"aria-hidden": !0
@@ -427,16 +380,16 @@ function ze({ label: e, children: t, value: r }) {
 		})]
 	});
 }
-function Be({ label: t, span: n = 1, children: r }) {
+function ze({ label: t, span: n = 1, children: r }) {
 	return /* @__PURE__ */ Z("section", {
-		className: e(j, N[n]),
+		className: e(M, P[n]),
 		children: [t == null ? null : /* @__PURE__ */ X("h3", {
-			className: M,
+			className: N,
 			children: t
 		}), r]
 	});
 }
-function Ve({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" }) {
+function Be({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" }) {
 	return /* @__PURE__ */ X(Q.Link, {
 		href: e,
 		target: i ? "_blank" : void 0,
@@ -454,20 +407,20 @@ function Ve({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" })
 		})
 	});
 }
-function He({ children: e }) {
+function Ve({ children: e }) {
 	return /* @__PURE__ */ X("div", {
 		className: D,
 		children: e
 	});
 }
-function Ue({ label: t, variant: n = "thumb", className: r }) {
+function He({ label: t, variant: n = "thumb", className: r }) {
 	return /* @__PURE__ */ X("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" : j, r)
 	});
 }
-function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+function Ue({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
 	return /* @__PURE__ */ Z("div", {
 		className: "flex flex-col gap-1 type-body",
 		children: [
@@ -487,9 +440,9 @@ function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read
 		]
 	});
 }
-function Ge({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
+function We({ media: e, title: t, description: n, href: r, linkLabel: a = "Read now" }) {
 	return /* @__PURE__ */ Z("div", {
-		className: k,
+		className: A,
 		children: [e, /* @__PURE__ */ Z("div", {
 			className: "flex min-w-0 flex-col gap-1 type-body",
 			children: [
@@ -509,7 +462,7 @@ function Ge({ media: e, title: t, description: n, href: r, linkLabel: a = "Read
 		})]
 	});
 }
-function Ke({ href: e, children: t, current: r = !1 }) {
+function Ge({ href: e, children: t, current: r = !1 }) {
 	return /* @__PURE__ */ X(n, {
 		role: "ghost",
 		size: "md",
@@ -519,18 +472,18 @@ function Ke({ href: e, children: t, current: r = !1 }) {
 		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 Ke = Object.assign(Ae, {
+	Brand: je,
+	Links: Ie,
+	Link: Le,
+	Menu: Re,
+	MenuSection: ze,
+	MenuLink: Be,
+	MenuLinkGrid: Ve,
+	MenuMedia: He,
+	Featured: Ue,
+	ReadRow: We,
+	MobileLink: Ge
 });
 //#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 { Ke as SiteNav, m as siteNavCompactLayouts, g as siteNavDefaultCollapseAt, _ as siteNavDefaultCollapseRatio, ne as siteNavExpandedHeightClasses, A as siteNavMenuReadRowClasses, j as siteNavMenuReadThumbClasses, B as siteNavPlacements, H as siteNavStates };

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

@@ -5,7 +5,7 @@ import { motionTransition as n } from "../../../lib/motion.js";
 //#region src/components/organisms/SiteNav/siteNavStyles.ts
 var r = ["expanded", "compact"], i = ["fixed", "inline"], a = ["hug", "grid"], o = .5, s = 64, c = "h-[var(--site-nav-height)] min-h-[var(--site-nav-height)]", l = "top-4", u = "pointer-events-none relative z-50 w-full", d = e("pointer-events-none fixed inset-x-0 z-50", l), f = e("pointer-events-none sticky z-50 w-full", l), p = "relative z-50 w-full", m = "relative mx-auto w-full max-w-[var(--grid-max)]", h = "pointer-events-auto relative z-[1] flex items-center", g = {
 	expanded: e(c, "w-full border border-transparent bg-transparent px-[var(--grid-margin)] shadow-none"),
-	compact: e("box-border rounded-full border border-elevation-edge bg-elevation-surface p-1.5 shadow-soft-sm backdrop-blur-md", "supports-[backdrop-filter]:bg-elevation-surface")
+	compact: e("box-border rounded-[var(--radius-control)] border border-elevation-edge bg-elevation-surface p-1.5 shadow-soft-sm backdrop-blur-md", "supports-[backdrop-filter]:bg-elevation-surface")
 }, _ = {
 	hug: "mx-auto w-max max-w-full",
 	grid: "w-full"