@thewhatmatters/wmds 0.2.0

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

@@ -0,0 +1,536 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+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 { cardLayoutBodyOccupantRadiusClasses as a, cardLayoutBodyOccupantWellClasses as o } from "../../molecules/Card/cardStyles.js";
+import { Dropdown as s } from "../../molecules/Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as ee } from "../../molecules/Dropdown/dropdownMenuPosition.js";
+import { Sheet as c } from "../Sheet/Sheet.js";
+import { resolveTabOverflow as te } from "../Tab/tabOverflow.js";
+import { siteNavBarBaseClasses as l, siteNavBarCompactLayoutClasses as u, siteNavBarStateClasses as d, siteNavBrandClasses as f, siteNavCompactLayouts as p, siteNavContainerClasses as m, siteNavDefaultCollapseAt as h, siteNavDefaultCollapseRatio as g, siteNavEndClasses as ne, siteNavExpandedHeightClasses as _, 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 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 { 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;
+}
+function je({ start: n, middle: i, end: a, mobile: o, mobileTitle: s = "Menu", collapseAt: ee, state: te, onStateChange: f, compactLayout: p = "hug", placement: h = "fixed", scrollContainer: g, "aria-label": v = "Site", className: y }) {
+	let b = q(null), x = De() ?? !1, { state: S, compact: C } = he({
+		collapseAt: ee,
+		scrollContainer: g,
+		controlledState: te,
+		placement: h,
+		onStateChange: f
+	}), [w, T] = J(!1), [E, D] = J(!1), re = C && p === "hug", O = {
+		y: -72,
+		opacity: 0
+	}, k = {
+		y: 0,
+		opacity: 1
+	}, A = x ? { duration: 0 } : {
+		...t("medium"),
+		type: "tween"
+	}, j = g != null, M = h === "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",
+		title: "",
+		size: "sm",
+		className: se,
+		"aria-expanded": w,
+		onClick: () => T(!0)
+	}) : null;
+	function B(e) {
+		return /* @__PURE__ */ Z("div", {
+			className: Ae(P, I, R, e),
+			children: [
+				P ? /* @__PURE__ */ X("div", {
+					className: de,
+					children: n
+				}) : null,
+				I ? /* @__PURE__ */ X("div", {
+					className: N ? e ? oe : F : e ? ae : ie,
+					children: i
+				}) : null,
+				R ? /* @__PURE__ */ Z("div", {
+					className: ne,
+					children: [a, z]
+				}) : null
+			]
+		});
+	}
+	let V = e(l, d.compact, u[p]), U = /* @__PURE__ */ X("div", {
+		"data-state": "expanded",
+		className: e(l, d.expanded),
+		children: B(!1)
+	}), fe = /* @__PURE__ */ X("div", {
+		ref: b,
+		className: e(m, "px-[var(--grid-margin)]"),
+		children: /* @__PURE__ */ X("div", {
+			"data-state": "compact",
+			className: V,
+			children: B(re)
+		})
+	}), W = {
+		initial: !x && O,
+		animate: k,
+		exit: x ? k : O,
+		transition: A
+	}, pe = j ? e(ue, "h-0 w-full overflow-visible") : H;
+	return /* @__PURE__ */ Z(ke.Provider, {
+		value: {
+			state: S,
+			anchorRef: b,
+			menuOpen: E,
+			setMenuOpen: D
+		},
+		children: [M ? /* @__PURE__ */ Z(we, { children: [
+			/* @__PURE__ */ X(Te, { children: C ? /* @__PURE__ */ X(Ee.div, {
+				...W,
+				className: e(pe, !j && y),
+				children: /* @__PURE__ */ X("header", {
+					"aria-label": v,
+					"data-state": "compact",
+					"data-menu": E ? "open" : "closed",
+					className: e(j && e("w-full", y)),
+					children: fe
+				})
+			}, "site-nav-compact") : null }),
+			C ? /* @__PURE__ */ X("div", {
+				className: e(_, "w-full"),
+				"aria-hidden": !0
+			}) : null,
+			C ? null : /* @__PURE__ */ X("header", {
+				"aria-label": v,
+				"data-state": "expanded",
+				"data-menu": E ? "open" : "closed",
+				className: e(ce, y),
+				children: /* @__PURE__ */ X("div", {
+					ref: b,
+					className: m,
+					children: U
+				})
+			})
+		] }) : /* @__PURE__ */ X("header", {
+			"aria-label": v,
+			"data-state": S,
+			"data-menu": E ? "open" : "closed",
+			className: e(le, y),
+			children: /* @__PURE__ */ X("div", {
+				ref: b,
+				className: e(m, C && "px-[var(--grid-margin)]"),
+				children: /* @__PURE__ */ X(Te, {
+					initial: !1,
+					mode: "popLayout",
+					children: C ? /* @__PURE__ */ X(Ee.div, {
+						initial: !x && O,
+						animate: k,
+						exit: x ? k : O,
+						transition: A,
+						"data-state": "compact",
+						className: V,
+						children: B(!0)
+					}, "compact") : /* @__PURE__ */ X("div", { children: U }, "expanded")
+				})
+			})
+		}), N ? /* @__PURE__ */ X(c, {
+			open: w,
+			onOpenChange: T,
+			children: /* @__PURE__ */ X(c.Content, {
+				side: "end",
+				title: s,
+				children: /* @__PURE__ */ X("div", {
+					className: L,
+					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, {
+		role: "ghost",
+		size: "sm",
+		render: /* @__PURE__ */ X("a", { href: e }),
+		"aria-label": a,
+		className: f,
+		children: i
+	}) : /* @__PURE__ */ X(r, {
+		icon: o,
+		"aria-label": a ?? "Home",
+		role: "ghost",
+		size: "sm",
+		title: "",
+		render: /* @__PURE__ */ X("a", { href: e }),
+		className: f
+	});
+}
+function Ne(e) {
+	return ge.toArray(e).filter(G);
+}
+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) {
+	let t = e.props;
+	return t.label ?? t.children;
+}
+function Fe(e) {
+	return "label" in e.props && !("href" in e.props);
+}
+function Ie(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: a = 150 }) {
+	let o = ve(ke), c = be(), l = q(null), u = q(null), d = q(null), f = q(/* @__PURE__ */ new Map()), p = Se(() => Ne(t), [t]), m = p.map($), h = Ie(p), [g, ne] = J(m), [_, T] = J([]), [E, D] = J(!1), [k, A] = J(null), [j, M] = J(0), N = K(() => {
+		let e = l.current, t = d.current;
+		if (e == null || t == null) return;
+		let n = p.map((e) => ({
+			value: $(e),
+			width: Math.ceil(f.current.get($(e))?.getBoundingClientRect().width ?? 0)
+		}));
+		if (n.some((e) => e.width === 0)) return;
+		let r = te(n, h, e.clientWidth, Math.ceil(t.getBoundingClientRect().width));
+		ne(r.visibleValues), T(r.overflowValues), r.overflowValues.length === 0 && (D(!1), A(null));
+	}, [h, p]);
+	xe(() => {
+		N();
+		let e = l.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(g), ae = new Set(_), oe = p.filter((e) => ie.has($(e))), F = p.filter((e) => ae.has($(e))), I = K(() => {
+		D(!1), A(null);
+	}, []), L = K(() => {
+		let e = u.current;
+		if (e == null) return;
+		let t = F.flatMap(H);
+		A(ee(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;
+			l.current?.contains(t) || document.getElementById(c)?.contains(t) || I();
+		}
+		function t(e) {
+			e.key === "Escape" && (I(), u.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,
+		c,
+		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)) {
+			let t = e.props;
+			return [{
+				id: $(e),
+				label: t.children,
+				href: t.href,
+				current: t.current
+			}];
+		}
+		let t = [];
+		function n(e) {
+			ge.forEach(e, (e) => {
+				if (!G(e)) return;
+				let r = e.props;
+				if (typeof r.href == "string" && r.label == null) {
+					t.push({
+						id: r.href,
+						label: r.children,
+						href: r.href
+					});
+					return;
+				}
+				r.children != null && n(r.children);
+			});
+		}
+		return n(e.props.children), t.length === 0 && t.push({
+			id: $(e),
+			label: Pe(e)
+		}), t;
+	}
+	return /* @__PURE__ */ Z("div", {
+		ref: l,
+		className: b,
+		children: [
+			/* @__PURE__ */ Z(Q.Root, {
+				"aria-label": r,
+				delay: i,
+				closeDelay: a,
+				className: B,
+				onValueChange: (e) => o?.setMenuOpen(e != null),
+				children: [/* @__PURE__ */ X(Q.List, {
+					className: y,
+					children: oe
+				}), /* @__PURE__ */ Z(Q.Portal, { children: [/* @__PURE__ */ X(Q.Backdrop, { className: w }), /* @__PURE__ */ X(Q.Positioner, {
+					anchor: o?.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 })
+					})
+				})] })]
+			}),
+			F.length > 0 ? /* @__PURE__ */ X(n, {
+				ref: u,
+				role: "ghost",
+				size: "sm",
+				"aria-haspopup": "menu",
+				"aria-expanded": E,
+				"aria-controls": E ? c : void 0,
+				"data-state": E ? "open" : "closed",
+				className: z,
+				onClick: () => E ? I() : L(),
+				onKeyDown: se,
+				children: /* @__PURE__ */ Z("span", {
+					className: me,
+					children: ["More", /* @__PURE__ */ X("span", {
+						className: R,
+						"data-state": E ? "open" : "closed",
+						children: /* @__PURE__ */ X(Y, {
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})]
+				})
+			}) : null,
+			/* @__PURE__ */ Z("div", {
+				className: C,
+				"aria-hidden": !0,
+				children: [p.map((t) => {
+					let n = $(t), r = Pe(t), i = Fe(t);
+					return /* @__PURE__ */ Z("span", {
+						ref: (e) => {
+							e == null ? f.current.delete(n) : f.current.set(n, e);
+						},
+						className: e(x, i ? W : v),
+						children: [r, i ? /* @__PURE__ */ X(Y, {
+							className: "ml-1 size-3.5",
+							strokeWidth: 2
+						}) : null]
+					}, n);
+				}), /* @__PURE__ */ Z("span", {
+					ref: d,
+					className: e(z, S),
+					children: ["More", /* @__PURE__ */ X(Y, {
+						className: "size-3.5",
+						strokeWidth: 2
+					})]
+				})]
+			}),
+			E && k != null ? Oe(/* @__PURE__ */ X(s.Menu, {
+				id: c,
+				role: "menu",
+				"aria-label": `${r} overflow`,
+				style: k,
+				children: F.flatMap(H).map((e, t) => /* @__PURE__ */ X("li", {
+					role: "presentation",
+					children: /* @__PURE__ */ X(s.Item, {
+						role: "menuitem",
+						tabIndex: -1,
+						truncate: !1,
+						selected: !!e.current,
+						active: t === j,
+						onMouseEnter: () => M(t),
+						onClick: () => V(e.href),
+						children: e.label
+					})
+				}, e.id))
+			}), document.body) : null
+		]
+	});
+}
+function Re({ href: e, children: t, current: r = !1, value: i }) {
+	return /* @__PURE__ */ X(Q.Item, {
+		value: i ?? e,
+		children: /* @__PURE__ */ X(Q.Link, {
+			href: e,
+			active: r,
+			"aria-current": r ? "page" : void 0,
+			render: /* @__PURE__ */ X(n, {
+				role: "ghost",
+				size: "sm",
+				render: /* @__PURE__ */ X("a", {}),
+				className: v,
+				children: t
+			})
+		})
+	});
+}
+function ze({ 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,
+			children: /* @__PURE__ */ Z("span", {
+				className: me,
+				children: [e, /* @__PURE__ */ X(Q.Icon, {
+					className: pe,
+					children: /* @__PURE__ */ X(Y, {
+						strokeWidth: 2,
+						"aria-hidden": !0
+					})
+				})]
+			})
+		}) }), /* @__PURE__ */ X(Q.Content, {
+			className: T,
+			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,
+			children: t
+		}), r]
+	});
+}
+function Ve({ href: e, children: t, icon: r, external: i = !1, size: a = "sm" }) {
+	return /* @__PURE__ */ X(Q.Link, {
+		href: e,
+		target: i ? "_blank" : void 0,
+		rel: i ? "noopener noreferrer" : void 0,
+		render: /* @__PURE__ */ Z(n, {
+			role: "ghost",
+			size: a,
+			render: /* @__PURE__ */ X("a", {}),
+			className: E,
+			icon: r,
+			children: [t, i ? /* @__PURE__ */ X("span", {
+				className: "sr-only",
+				children: " (opens in a new tab)"
+			}) : null]
+		})
+	});
+}
+function He({ children: e }) {
+	return /* @__PURE__ */ X("div", {
+		className: D,
+		children: e
+	});
+}
+function Ue({ label: t, variant: n = "thumb", className: r }) {
+	return /* @__PURE__ */ X("div", {
+		role: "img",
+		"aria-label": t,
+		className: e(o, a, n === "featured" ? "aspect-[16/10] w-full" : A, r)
+	});
+}
+function We({ 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: [
+			e,
+			/* @__PURE__ */ X("h2", {
+				className: "type-heading-2 text-fg",
+				children: t
+			}),
+			n == null ? null : /* @__PURE__ */ X("p", {
+				className: "text-muted",
+				children: n
+			}),
+			/* @__PURE__ */ X(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", {
+			className: "flex min-w-0 flex-col gap-1 type-body",
+			children: [
+				/* @__PURE__ */ X("h3", {
+					className: "type-heading-3 text-fg",
+					children: t
+				}),
+				n == null ? null : /* @__PURE__ */ X("p", {
+					className: "text-muted",
+					children: n
+				}),
+				/* @__PURE__ */ X(i, {
+					href: r,
+					children: a
+				})
+			]
+		})]
+	});
+}
+function Ke({ href: e, children: t, current: r = !1 }) {
+	return /* @__PURE__ */ X(n, {
+		role: "ghost",
+		size: "md",
+		render: /* @__PURE__ */ X("a", { href: e }),
+		"aria-current": r ? "page" : void 0,
+		className: I,
+		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
+});
+//#endregion
+export { qe as SiteNav, p as siteNavCompactLayouts, h as siteNavDefaultCollapseAt, g as siteNavDefaultCollapseRatio, _ as siteNavExpandedHeightClasses, k as siteNavMenuReadRowClasses, A as siteNavMenuReadThumbClasses, V as siteNavPlacements, fe as siteNavStates };

package/dist/components/organisms/SiteNav/siteNavStyles.d.ts

@@ -0,0 +1,128 @@
+/** Scroll-driven shell state — `expanded` (page top) or `compact` (scrolled). */
+export declare const siteNavStates: readonly ["expanded", "compact"];
+export type SiteNavState = (typeof siteNavStates)[number];
+/** `fixed` — page chrome (in-flow expanded → pinned compact). `inline` — static specimen; pair with `scrollContainer` for scroll demos. */
+export declare const siteNavPlacements: readonly ["fixed", "inline"];
+export type SiteNavPlacement = (typeof siteNavPlacements)[number];
+/** Compact pill width — `hug` shrinks to its items (default, narrower than grid); `grid` fills `--grid-max`. */
+export declare const siteNavCompactLayouts: readonly ["hug", "grid"];
+export type SiteNavCompactLayout = (typeof siteNavCompactLayouts)[number];
+/** Fraction of the scrollport height before the compact pill appears (when `collapseAt` is omitted). */
+export declare const siteNavDefaultCollapseRatio = 0.5;
+/** @deprecated Prefer omitting `collapseAt` (half-viewport) or pass an explicit px value. */
+export declare const siteNavDefaultCollapseAt = 64;
+/** Expanded band height — matches `--site-nav-height`. Scroll-morph does not change this. */
+export declare const siteNavExpandedHeightClasses = "h-[var(--site-nav-height)] min-h-[var(--site-nav-height)]";
+/** Compact pill — height hugs controls; equal shell inset (`p-1`) all around. */
+/** Compact pill offset from the scrollport top — 1rem (`top-4` on fixed/sticky root). */
+export declare const siteNavCompactViewportTopClasses = "top-4";
+/**
+ * Root chrome.
+ * - `flow` — expanded page header: in document flow, scrolls away with content.
+ * - `fixed` — compact page overlay: pinned to the viewport.
+ * - `sticky` — compact inside a `scrollContainer`: sticks within that scroller.
+ * - `inline` — static Storybook specimen (no scroll-driven positioning).
+ */
+export declare const siteNavRootFlowClasses = "pointer-events-none relative z-50 w-full";
+export declare const siteNavRootFixedClasses: string;
+export declare const siteNavRootStickyClasses: string;
+export declare const siteNavRootInlineClasses = "relative z-50 w-full";
+/** @deprecated Use flow / fixed / sticky / inline class exports. */
+export declare const siteNavRootClasses: Record<SiteNavPlacement, string>;
+/** Centered content column — bar host + mega vertical anchor; always grid-wide even when the pill hugs. */
+export declare const siteNavContainerClasses = "relative mx-auto w-full max-w-[var(--grid-max)]";
+/**
+ * Bar shell — expanded stays static; compact is a separate layer that slides in.
+ * Width stays off this string. Expanded and `compactLayout="grid"` add `w-full`;
+ * hug adds only `w-max`. Both widths on one element follow stylesheet order.
+ */
+export declare const siteNavBarBaseClasses = "pointer-events-auto relative z-[1] flex items-center";
+export declare const siteNavBarStateClasses: Record<SiteNavState, string>;
+/** Compact width — hugging the items (default) or grid-contained. */
+export declare const siteNavBarCompactLayoutClasses: Record<SiteNavCompactLayout, string>;
+/**
+ * Mega-menu focus layer — light dim over the page (not Dialog `bg-overlay`).
+ * Pointer-events none so hover dismiss still works; under the bar/popup (`z-50`).
+ */
+export declare const siteNavMenuBackdropClasses: string;
+/** Gap between the bar and the mega panel — 0.5rem. */
+export declare const siteNavMenuSideOffsetPx = 8;
+/**
+ * Slot rail — start/end hug content; middle takes the leftover track so links are not
+ * starved into More by equal thirds (expanded vs compact must show the same items when
+ * the viewport can fit them). Compact hug uses a content cluster (`threeHug`).
+ */
+export declare const siteNavSlotsClasses: {
+    readonly three: "flex w-full min-w-0 items-center gap-3";
+    readonly threeHug: "flex w-max max-w-full items-center gap-3";
+    readonly ends: "flex w-full items-center justify-between gap-4";
+    readonly middleOnly: "flex w-full min-w-0 items-center justify-center";
+    readonly startOnly: "flex w-full items-center justify-start";
+    readonly endOnly: "flex w-full items-center justify-end";
+};
+export declare const siteNavStartClasses = "flex shrink-0 items-center gap-2";
+export declare const siteNavMiddleClasses = "flex min-w-0 flex-1 items-center justify-center";
+/** Compact hug middle — content-sized; can shrink only when the pill hits `max-w-full`. */
+export declare const siteNavMiddleHugClasses = "flex min-w-0 max-w-full items-center justify-center";
+export declare const siteNavEndClasses = "flex shrink-0 flex-nowrap items-center gap-2";
+/**
+ * Middle slot when a `mobile` menu is supplied. Shown from `md`.
+ * No unprefixed `hidden` or `flex`: a later stylesheet's `.hidden` beats `md:flex`,
+ * and a later `.flex` beats `max-md:hidden`. These strings are the whole slot.
+ */
+export declare const siteNavMiddleResponsiveClasses = "max-md:hidden md:flex min-w-0 w-full flex-1 items-center justify-center";
+/** Same content cluster as `siteNavMiddleHugClasses`. No `w-full` — that stretches the hug pill. */
+export declare const siteNavMiddleHugResponsiveClasses = "max-md:hidden md:flex min-w-0 max-w-full items-center justify-center";
+/**
+ * IconButton paints `inline-flex`. `md:!hidden` beats a later non-important
+ * `.inline-flex`. The class is not `hidden`, so an app's `.hidden` does not match.
+ */
+export declare const siteNavMobileTriggerClasses = "md:!hidden";
+/**
+ * Brand — layout only when wordmark **Button**; icon brands use **IconButton** (circular).
+ */
+export declare const siteNavBrandClasses = "text-fg!";
+/** Links cluster — full middle track width for overflow measure; cluster centered inside. */
+export declare const siteNavLinksRootClasses = "relative flex min-w-0 w-full max-w-full items-center justify-center gap-1";
+/** NavigationMenu root — hug the list so justify-center on the parent can center it. */
+export declare const siteNavNavigationRootClasses = "flex min-w-0 max-w-full justify-center";
+/** Link list — Base UI NavigationMenu list. */
+export declare const siteNavLinkListClasses = "m-0 flex min-w-0 list-none flex-nowrap items-center gap-1 overflow-hidden p-0";
+/** Invisible exact-size specimens for ResizeObserver overflow (same idea as Tab). */
+export declare const siteNavMeasureRailClasses = "pointer-events-none invisible absolute left-0 top-0 -z-10 flex w-max gap-1";
+export declare const siteNavMoreTriggerClasses: string;
+export declare const siteNavMoreIconClasses: string;
+export declare const siteNavMeasureItemClasses = "inline-flex h-9 items-center px-4 text-sm leading-none";
+export declare const siteNavMeasureMoreClasses = "inline-flex h-9 items-center gap-1 px-4 text-sm leading-none";
+/** Nav link — ghost pill; quiet ink until hover. Current page is the selected fill token. */
+export declare const siteNavLinkClasses: string;
+/** Mega-menu trigger — keeps the hover surface while its panel is open. */
+export declare const siteNavTriggerClasses: string;
+export declare const siteNavTriggerLabelClasses = "inline-flex items-center gap-1";
+export declare const siteNavTriggerIconClasses: string;
+/** Portal positioner — always `--grid-max` wide (not the hug pill). Centered via Floating UI. */
+export declare const siteNavMenuPositionerClasses = "z-[51] w-[min(var(--grid-max),calc(100vw_-_2_*_var(--grid-margin)))] outline-none";
+/** Mega-menu popup — soft pill-family radius (not a sharp card); height animates to content. */
+export declare const siteNavMenuPopupClasses: string;
+export declare const siteNavMenuViewportClasses = "relative h-full w-full overflow-hidden";
+/** One trigger's content — stacked sections below `md`; columns with hairline dividers from `md` up. */
+export declare const siteNavMenuContentClasses: string;
+export declare const siteNavMenuSectionClasses = "flex min-w-0 flex-col gap-4 p-6";
+export declare const siteNavMenuSectionSpanClasses: Record<1 | 2 | 3, string>;
+export declare const siteNavMenuSectionLabelClasses: string;
+/** Menu link row — ghost **Button** anchor pulled flush with the section edge (sm pill `px-4`). */
+export declare const siteNavMenuLinkClasses = "-mx-4 justify-start! self-start";
+/** Menu link grid — single column below `md`; two quiet columns from `md` up. */
+export declare const siteNavMenuLinkGridClasses = "grid grid-cols-1 gap-y-1 md:grid-cols-2 md:gap-x-6";
+/**
+ * Read thumb row — media stacks above title/description/link below `md`;
+ * horizontal thumb + copy from `md` up.
+ */
+export declare const siteNavMenuReadRowClasses = "flex flex-col gap-3 md:flex-row md:gap-4";
+/** Read thumb media — full-bleed band below `md`; 64px square from `md` up. */
+export declare const siteNavMenuReadThumbClasses = "aspect-[16/10] w-full shrink-0 md:aspect-auto md:size-16";
+/** Mobile sheet body — stacked links. */
+export declare const siteNavMobileListClasses = "flex flex-col gap-1";
+/** Mobile link row — full-width ghost **Button** anchor; current page uses the selected fill. */
+export declare const siteNavMobileLinkClasses: string;
+//# sourceMappingURL=siteNavStyles.d.ts.map

package/dist/components/organisms/SiteNav/siteNavStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"siteNavStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SiteNav/siteNavStyles.ts"],"names":[],"mappings":"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"}