@thewhatmatters/wmds 0.4.40 → 0.4.43

package/dist/components/organisms/AppShell/AppShell.js

@@ -5,293 +5,331 @@ import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
 import { Kbd as r } from "../../atoms/Kbd/Kbd.js";
 import { Tooltip as i } from "../../atoms/Tooltip/Tooltip.js";
 import { pageHeaderTitleClasses as ee } from "../../molecules/PageHeader/pageHeaderStyles.js";
-import { PageHeader as a } from "../../molecules/PageHeader/PageHeader.js";
-import { overlayPanelBodyScrollClasses as te, overlayPanelSectionStackClasses as ne } from "../Dialog/dialogStyles.js";
-import { OverlayPanelHeader as re } from "../Dialog/OverlayPanelHeader.js";
-import { Panel as ie } from "../Panel/Panel.js";
-import { Sheet as ae } from "../Sheet/Sheet.js";
-import { appShellAsideDockedClasses as oe, appShellBrandClasses as se, appShellCanvasClasses as ce, appShellMainClasses as le, appShellRootClasses as ue, appShellSheetBodyClasses as de, appShellSidebarBodyClasses as o, appShellSidebarClasses as fe, appShellSidebarFooterClasses as pe, appShellSkipLinkClasses as me, appShellSurfaceClasses as he, appShellToggleDesktopClasses as ge, appShellToggleMobileClasses as s } from "./appShellStyles.js";
-import { Children as c, createContext as _e, isValidElement as ve, useCallback as l, useContext as ye, useEffect as u, useId as be, useMemo as xe, useRef as d, useState as f } from "react";
-import { ChevronDown as Se, PanelLeft as p } from "lucide-react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { PageHeader as te } from "../../molecules/PageHeader/PageHeader.js";
+import { overlayPanelBodyScrollClasses as ne, overlayPanelFooterDelineatedInnerClasses as re, overlayPanelFooterDelineatedShellClasses as ie, overlayPanelFooterHairlineClasses as ae, overlayPanelSectionStackClasses as oe } from "../Dialog/dialogStyles.js";
+import { OverlayPanelHeader as se } from "../Dialog/OverlayPanelHeader.js";
+import { Panel as a } from "../Panel/Panel.js";
+import { Sheet as ce } from "../Sheet/Sheet.js";
+import { appShellAsideDockedClasses as le, appShellAsideInsetClasses as ue, appShellAsideInsetHeaderClasses as de, appShellBrandClasses as fe, appShellCanvasClasses as pe, appShellInsetRowClasses as me, appShellMainClasses as o, appShellRootClasses as he, appShellSheetBodyClasses as ge, appShellSidebarBodyClasses as s, appShellSidebarClasses as _e, appShellSidebarFooterClasses as ve, appShellSkipLinkClasses as ye, appShellSurfaceClasses as be, appShellToggleDesktopClasses as xe, appShellToggleMobileClasses as c, appShellToolbarClasses as Se } from "./appShellStyles.js";
+import { Children as l, createContext as Ce, isValidElement as we, useCallback as u, useContext as Te, useEffect as d, useId as Ee, useMemo as De, useRef as f, useState as p } from "react";
+import { ChevronDown as Oe, PanelLeft as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/organisms/AppShell/AppShell.tsx
-var Ce = {
+var ke = {
 	collapse: "Collapse sidebar",
 	expand: "Expand sidebar",
 	menu: "Menu",
 	aside: "Details",
 	skipToContent: "Skip to content"
-}, _ = ["overlay", "docked"], v = [
+}, v = [
+	"overlay",
+	"docked",
+	"inset"
+], y = [
 	"icon",
 	"label",
 	"picker"
 ];
-function y({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
-}
 function b({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function x({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function S({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function C({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
+}
+function w({ children: e }) {
+	return /* @__PURE__ */ g(h, { children: e });
+}
+function T({ children: e }) {
+	return /* @__PURE__ */ g(h, { children: e });
 }
-var w = _e(null);
-function T() {
-	let e = ye(w);
+var E = Ce(null);
+function D() {
+	let e = Te(E);
 	if (e == null) throw Error("useAppShell must be used inside <AppShell>.");
 	return e;
 }
-function E(e, t, n) {
-	let [r, i] = f(t);
-	return [e ?? r, l((t) => {
+function O(e, t, n) {
+	let [r, i] = p(t);
+	return [e ?? r, u((t) => {
 		e ?? i(t), n?.(t);
 	}, [e, n])];
 }
-var D = "(min-width: 1024px)";
-function we(e) {
+var k = "(min-width: 1024px)";
+function Ae(e) {
 	return e instanceof HTMLElement && e.isContentEditable;
 }
-function Te(e) {
+function je(e) {
 	let t = { content: [] };
-	return c.forEach(e, (e) => {
-		if (!ve(e)) {
+	return l.forEach(e, (e) => {
+		if (!we(e)) {
 			e != null && e !== !1 && t.content.push(e);
 			return;
 		}
-		e.type === y ? t.brand = e.props.children : e.type === b ? t.sidebar = e.props.children : e.type === x ? t.sidebarFooter = e.props.children : e.type === S ? t.header = e.props.children : e.type === C ? t.aside = e.props : t.content.push(e);
+		e.type === b ? t.brand = e.props.children : e.type === x ? t.sidebar = e.props.children : e.type === S ? t.sidebarFooter = e.props.children : e.type === C ? t.header = e.props.children : e.type === w ? t.toolbar = e.props.children : e.type === T ? t.aside = e.props : t.content.push(e);
 	}), t;
 }
-function O({ title: c, brand: _e, sidebar: ve, sidebarFooter: ye, header: _, aside: v, asideTitle: y, asideDescription: b, sidebarOpen: x, defaultSidebarOpen: S = !0, onSidebarOpenChange: C, asideOpen: T, defaultAsideOpen: O = !1, onAsideOpenChange: k, asideMode: Ee = "overlay", menuButton: A = "icon", labels: De, children: Oe, className: ke }) {
-	let j = {
-		...Ce,
-		...De
-	}, M = Te(Oe), N = _e ?? M.brand, P = ve ?? M.sidebar, F = ye ?? M.sidebarFooter, I = _ ?? M.header, L = v ?? M.aside?.children, R = P != null, z = L != null, [B, Ae] = E(x, S, C), [V, H] = E(T, O, k), [U, W] = f(!1), [je, G] = f(!1), K = be(), Me = d(null), Ne = d(null), q = l((e) => {
-		!e && Me.current?.contains(document.activeElement) && Ne.current?.focus(), Ae(e);
-	}, [Ae]), J = l(() => {
-		window.matchMedia(D).matches ? q(!B) : W((e) => !e);
-	}, [q, B]);
-	u(() => {
-		let e = window.matchMedia(D);
-		G(e.matches);
+function A({ title: l, brand: Ce, sidebar: we, sidebarFooter: Te, header: v, toolbar: y, aside: b, asideTitle: x, asideDescription: S, asideFooter: C, sidebarOpen: w, defaultSidebarOpen: T = !0, onSidebarOpenChange: D, asideOpen: A, defaultAsideOpen: j = !1, onAsideOpenChange: Me, asideMode: M = "overlay", menuButton: N = "icon", labels: Ne, children: Pe, className: Fe }) {
+	let P = {
+		...ke,
+		...Ne
+	}, F = je(Pe), Ie = Ce ?? F.brand, I = we ?? F.sidebar, Le = Te ?? F.sidebarFooter, Re = v ?? F.header, ze = y ?? F.toolbar, L = b ?? F.aside?.children, R = I != null, Be = L != null, [z, Ve] = O(w, T, D), [B, V] = O(A, j, Me), [H, U] = p(!1), [He, Ue] = p(!1), [We, Ge] = p(!1), W = Ee(), G = f(null), Ke = f(null), K = u((e) => {
+		!e && G.current?.contains(document.activeElement) && Ke.current?.focus(), Ve(e);
+	}, [Ve]), q = u(() => {
+		window.matchMedia(k).matches ? K(!z) : U((e) => !e);
+	}, [K, z]);
+	d(() => {
+		let e = window.matchMedia(k);
+		Ue(e.matches), Ge(!0);
 		function t(e) {
-			G(e.matches), e.matches && W(!1);
+			Ue(e.matches), e.matches && U(!1);
 		}
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []), u(() => {
+	}, []), d(() => {
 		if (!R) return;
 		function e(e) {
-			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || we(e.target) || (e.preventDefault(), J());
+			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || Ae(e.target) || (e.preventDefault(), q());
 		}
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [R, J]);
-	let Pe = xe(() => ({
-		sidebarOpen: B,
-		setSidebarOpen: q,
-		menuOpen: U,
-		setMenuOpen: W,
-		asideOpen: V,
-		setAsideOpen: H,
-		toggleSidebar: J
+	}, [R, q]);
+	let qe = De(() => ({
+		sidebarOpen: z,
+		setSidebarOpen: K,
+		menuOpen: H,
+		setMenuOpen: U,
+		asideOpen: B,
+		setAsideOpen: V,
+		toggleSidebar: q
 	}), [
-		V,
-		U,
-		H,
-		q,
 		B,
-		J
+		H,
+		V,
+		K,
+		z,
+		q
 	]);
-	function Fe(e) {
-		e.target.closest("nav a[href], nav button") != null && W(!1);
+	function Je(e) {
+		e.target.closest("nav a[href], nav button") != null && U(!1);
 	}
-	let Y = z && Ee === "docked" && je, X = `${K}-aside`, Ie = d(null), Z = d(null);
-	u(() => {
-		Y && (V ? Z.current = document.activeElement : Z.current = null);
-	}, [V, Y]);
-	function Le() {
-		let e = Z.current, t = Ie.current?.contains(document.activeElement) ?? !1;
-		H(!1), t && (e?.isConnected ? e.focus() : document.getElementById(`${K}-main`)?.focus());
+	let J = Be && (M === "docked" || M === "inset") && He, Y = J && M === "inset", X = `${W}-aside`, Ye = f(null), Z = f(null);
+	d(() => {
+		J && (B ? Z.current = document.activeElement : Z.current = null);
+	}, [B, J]);
+	let Xe = J && B ? /* @__PURE__ */ g("aside", {
+		ref: Ye,
+		id: X,
+		"aria-labelledby": `${X}-title`,
+		className: Y ? ue : le,
+		onKeyDown: (e) => {
+			e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), Ze());
+		},
+		children: /* @__PURE__ */ _("div", {
+			className: oe,
+			children: [
+				/* @__PURE__ */ g(se, {
+					titleId: `${X}-title`,
+					descriptionId: `${X}-description`,
+					title: x ?? F.aside?.title ?? P.aside,
+					description: S ?? F.aside?.description,
+					closeLabel: "Close panel",
+					onClose: Ze,
+					delineated: !Y,
+					className: Y ? de : void 0
+				}),
+				/* @__PURE__ */ g("div", {
+					className: e(ne, C == null && "pb-4"),
+					children: L
+				}),
+				C == null ? null : /* @__PURE__ */ _("footer", {
+					className: ie,
+					children: [/* @__PURE__ */ g("hr", {
+						className: ae,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ g("div", {
+						className: re,
+						children: C
+					})]
+				})
+			]
+		})
+	}) : null;
+	function Ze() {
+		let e = Z.current, t = Ye.current?.contains(document.activeElement) ?? !1;
+		V(!1), t && (e?.isConnected ? e.focus() : document.getElementById(`${W}-main`)?.focus());
 	}
-	let Re = B ? j.collapse : j.expand, Q = `${K}-main`, ze = N == null ? null : /* @__PURE__ */ h("div", {
-		className: se,
-		children: N
-	}), Be = F == null ? null : /* @__PURE__ */ h("div", {
-		className: pe,
-		children: F
-	}), $ = R ? /* @__PURE__ */ g(i.Provider, { children: [/* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(i.Trigger, { render: /* @__PURE__ */ h(n, {
-		ref: Ne,
+	let Qe = z ? P.collapse : P.expand, Q = `${W}-main`, $e = Ie == null ? null : /* @__PURE__ */ g("div", {
+		className: fe,
+		children: Ie
+	}), et = Le == null ? null : /* @__PURE__ */ g("div", {
+		className: ve,
+		children: Le
+	}), $ = R ? /* @__PURE__ */ _(i.Provider, { children: [/* @__PURE__ */ _(i, { children: [/* @__PURE__ */ g(i.Trigger, { render: /* @__PURE__ */ g(n, {
+		ref: Ke,
 		role: "ghost",
 		size: "sm",
 		title: "",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": Re,
-		"aria-expanded": B,
-		"aria-controls": K,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": Qe,
+		"aria-expanded": z,
+		"aria-controls": W,
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: ge,
-		onClick: () => q(!B)
-	}) }), /* @__PURE__ */ h(i.Content, { children: /* @__PURE__ */ g("span", {
+		className: xe,
+		onClick: () => K(!z)
+	}) }), /* @__PURE__ */ g(i.Content, { children: /* @__PURE__ */ _("span", {
 		className: "inline-flex items-center gap-2",
 		children: [
-			Re,
-			/* @__PURE__ */ h(r, {
+			Qe,
+			/* @__PURE__ */ g(r, {
 				size: "sm",
 				children: "Ctrl"
 			}),
-			/* @__PURE__ */ h(r, {
+			/* @__PURE__ */ g(r, {
 				size: "sm",
 				children: "B"
 			})
 		]
-	}) })] }), A === "picker" ? /* @__PURE__ */ h(t, {
+	}) })] }), N === "picker" ? /* @__PURE__ */ g(t, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": `${j.menu}: ${c}`,
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": `${P.menu}: ${l}`,
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: e(s, "min-w-0 max-w-full [&>span:last-child]:min-w-0"),
-		onClick: () => W(!0),
-		children: /* @__PURE__ */ g("span", {
+		className: e(c, "min-w-0 max-w-full [&>span:last-child]:min-w-0"),
+		onClick: () => U(!0),
+		children: /* @__PURE__ */ _("span", {
 			className: "flex min-w-0 items-center gap-1",
-			children: [/* @__PURE__ */ h("span", {
+			children: [/* @__PURE__ */ g("span", {
 				className: "min-w-0 truncate",
-				children: c
-			}), /* @__PURE__ */ h(Se, {
+				children: l
+			}), /* @__PURE__ */ g(Oe, {
 				strokeWidth: 2,
 				"aria-hidden": "true",
 				className: "size-4 shrink-0 text-muted"
 			})]
 		})
-	}) : A === "label" ? /* @__PURE__ */ h(t, {
+	}) : N === "label" ? /* @__PURE__ */ g(t, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: e(s, "shrink-0"),
-		onClick: () => W(!0),
-		children: j.menu
-	}) : /* @__PURE__ */ h(n, {
+		className: e(c, "shrink-0"),
+		onClick: () => U(!0),
+		children: P.menu
+	}) : /* @__PURE__ */ g(n, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": j.menu,
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": P.menu,
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: s,
-		onClick: () => W(!0)
+		className: c,
+		onClick: () => U(!0)
 	})] }) : null;
-	return /* @__PURE__ */ h(w.Provider, {
-		value: Pe,
-		children: /* @__PURE__ */ g("div", {
-			className: e(ue, ke),
+	return /* @__PURE__ */ g(E.Provider, {
+		value: qe,
+		children: /* @__PURE__ */ _("div", {
+			className: e(he, Fe),
 			children: [
-				/* @__PURE__ */ h("a", {
+				/* @__PURE__ */ g("a", {
 					href: `#${Q}`,
-					className: me,
+					className: ye,
 					onClick: (e) => {
 						e.preventDefault(), document.getElementById(Q)?.focus();
 					},
-					children: j.skipToContent
+					children: P.skipToContent
 				}),
-				R ? /* @__PURE__ */ g("div", {
-					ref: Me,
-					id: K,
-					className: e(fe, !B && "lg:!hidden"),
+				R ? /* @__PURE__ */ _("div", {
+					ref: G,
+					id: W,
+					className: e(_e, !z && "lg:!hidden"),
 					children: [
-						ze,
-						/* @__PURE__ */ h("div", {
-							className: o,
-							children: P
+						$e,
+						/* @__PURE__ */ g("div", {
+							className: s,
+							children: I
 						}),
-						Be
+						et
 					]
 				}) : null,
-				/* @__PURE__ */ g("div", {
-					className: ce,
-					children: [/* @__PURE__ */ g("div", {
-						className: he,
-						children: [A === "picker" ? /* @__PURE__ */ h(a, {
-							variant: "app",
-							"aria-label": c,
-							start: /* @__PURE__ */ g(m, { children: [$, /* @__PURE__ */ h("h1", {
-								className: e(ee.app, "max-lg:sr-only"),
-								children: c
-							})] }),
-							end: I
-						}) : /* @__PURE__ */ h(a, {
-							variant: "app",
-							title: c,
-							"aria-label": c,
-							start: $,
-							end: I
-						}), /* @__PURE__ */ h("main", {
-							id: Q,
-							tabIndex: -1,
-							className: le,
-							children: M.content
-						})]
-					}), Y && V ? /* @__PURE__ */ h("aside", {
-						ref: Ie,
-						id: X,
-						"aria-labelledby": `${X}-title`,
-						className: oe,
-						onKeyDown: (e) => {
-							e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), Le());
-						},
-						children: /* @__PURE__ */ g("div", {
-							className: ne,
-							children: [/* @__PURE__ */ h(re, {
-								titleId: `${X}-title`,
-								descriptionId: `${X}-description`,
-								title: y ?? M.aside?.title ?? j.aside,
-								description: b ?? M.aside?.description,
-								closeLabel: "Close panel",
-								onClose: Le,
-								delineated: !0
-							}), /* @__PURE__ */ h("div", {
-								className: e(te, "pb-4"),
-								children: L
-							})]
-						})
-					}) : null]
+				/* @__PURE__ */ _("div", {
+					className: pe,
+					children: [/* @__PURE__ */ _("div", {
+						className: be,
+						children: [
+							N === "picker" ? /* @__PURE__ */ g(te, {
+								variant: "app",
+								"aria-label": l,
+								start: /* @__PURE__ */ _(h, { children: [$, /* @__PURE__ */ g("h1", {
+									className: e(ee.app, "max-lg:sr-only"),
+									children: l
+								})] }),
+								end: Re
+							}) : /* @__PURE__ */ g(te, {
+								variant: "app",
+								title: l,
+								"aria-label": l,
+								start: $,
+								end: Re
+							}),
+							ze == null ? null : /* @__PURE__ */ g("div", {
+								className: Se,
+								children: ze
+							}),
+							Y ? /* @__PURE__ */ _("div", {
+								className: me,
+								children: [/* @__PURE__ */ g("main", {
+									id: Q,
+									tabIndex: -1,
+									className: o,
+									children: F.content
+								}), Xe]
+							}) : /* @__PURE__ */ g("main", {
+								id: Q,
+								tabIndex: -1,
+								className: o,
+								children: F.content
+							})
+						]
+					}), J && !Y ? Xe : null]
 				}),
-				R ? /* @__PURE__ */ h(ae, {
-					open: U,
-					onOpenChange: W,
-					children: /* @__PURE__ */ h(ae.Content, {
+				R ? /* @__PURE__ */ g(ce, {
+					open: H,
+					onOpenChange: U,
+					children: /* @__PURE__ */ g(ce.Content, {
 						side: "start",
-						title: j.menu,
-						children: /* @__PURE__ */ g("div", {
-							className: de,
-							onClick: Fe,
+						title: P.menu,
+						children: /* @__PURE__ */ _("div", {
+							className: ge,
+							onClick: Je,
 							children: [
-								ze,
-								/* @__PURE__ */ h("div", {
-									className: o,
-									children: P
+								$e,
+								/* @__PURE__ */ g("div", {
+									className: s,
+									children: I
 								}),
-								Be
+								et
 							]
 						})
 					})
 				}) : null,
-				z && !Y ? /* @__PURE__ */ h(ie, {
-					open: V,
-					onOpenChange: H,
-					children: /* @__PURE__ */ h(ie.Content, {
+				Be && !J && (M === "overlay" || We) ? /* @__PURE__ */ g(a, {
+					open: B,
+					onOpenChange: V,
+					children: /* @__PURE__ */ g(a.Content, {
 						side: "end",
-						title: y ?? M.aside?.title ?? j.aside,
-						description: b ?? M.aside?.description,
+						title: x ?? F.aside?.title ?? P.aside,
+						description: S ?? F.aside?.description,
+						footer: C,
 						children: L
 					})
 				}) : null
@@ -299,12 +337,13 @@ function O({ title: c, brand: _e, sidebar: ve, sidebarFooter: ye, header: _, asi
 		})
 	});
 }
-var k = Object.assign(O, {
-	Brand: y,
-	Sidebar: b,
-	SidebarFooter: x,
-	Header: S,
-	Aside: C
+var j = Object.assign(A, {
+	Brand: b,
+	Sidebar: x,
+	SidebarFooter: S,
+	Header: C,
+	Toolbar: w,
+	Aside: T
 });
 //#endregion
-export { k as AppShell, _ as appShellAsideModes, v as appShellMenuButtons, T as useAppShell };
+export { j as AppShell, v as appShellAsideModes, y as appShellMenuButtons, D as useAppShell };

package/dist/components/organisms/AppShell/appShellStyles.d.ts

@@ -22,4 +22,15 @@ export declare const appShellMainClasses = "min-h-0 flex-1 overflow-y-auto px-[v
 export declare const appShellToggleDesktopClasses = "max-lg:!hidden";
 export declare const appShellToggleMobileClasses = "lg:!hidden";
 export declare const appShellSheetBodyClasses = "flex h-full min-h-0 flex-col";
+/** Full-width band under the title bar: a view toolbar for the page (and an inset aside below it). */
+export declare const appShellToolbarClasses = "shrink-0 border-b border-border";
+/** `asideMode="inset"`: the page body and the floating aside side by side, under the toolbar. */
+export declare const appShellInsetRowClasses = "flex min-h-0 flex-1";
+/**
+ * `asideMode="inset"` from `lg`: a raised card floating inside the page surface, 12px from its end and
+ * bottom edges; the page body narrows beside it, never covered.
+ */
+export declare const appShellAsideInsetClasses = "mb-3 me-3 mt-3 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface shadow-lg";
+/** Inset aside header: the title bar's 56px band, title and description centred in it. */
+export declare const appShellAsideInsetHeaderClasses: string;
 //# sourceMappingURL=appShellStyles.d.ts.map

package/dist/components/organisms/AppShell/appShellStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC"}
+{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAEvE,sGAAsG;AACtG,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,iGAAiG;AACjG,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,yBAAyB,oJAC6G,CAAC;AAEpJ,0FAA0F;AAC1F,eAAO,MAAM,+BAA+B,QAA8F,CAAC"}

package/dist/components/organisms/AppShell/appShellStyles.js

@@ -3,6 +3,6 @@ import { cn as e } from "../../../lib/cn.js";
 import { cardLayoutShellShapeClasses as t } from "../../molecules/Card/cardStyles.js";
 import { pageHeaderAppBandHeightClasses as n } from "../../molecules/PageHeader/pageHeaderStyles.js";
 //#region src/components/organisms/AppShell/appShellStyles.ts
-var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 gap-2 p-2", l = e("flex min-h-0 w-80 shrink-0 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), d = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", f = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", p = "max-lg:!hidden", m = "lg:!hidden", h = "flex h-full min-h-0 flex-col";
+var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 gap-2 p-2", l = e("flex min-h-0 w-80 shrink-0 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), d = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", f = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", p = "max-lg:!hidden", m = "lg:!hidden", h = "flex h-full min-h-0 flex-col", g = "shrink-0 border-b border-border", _ = "flex min-h-0 flex-1", v = "mb-3 me-3 mt-3 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface shadow-lg", y = e("box-border !items-center !py-0 border-b border-border", n);
 //#endregion
-export { l as appShellAsideDockedClasses, a as appShellBrandClasses, c as appShellCanvasClasses, f as appShellMainClasses, r as appShellRootClasses, h as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, d as appShellSkipLinkClasses, u as appShellSurfaceClasses, p as appShellToggleDesktopClasses, m as appShellToggleMobileClasses };
+export { l as appShellAsideDockedClasses, v as appShellAsideInsetClasses, y as appShellAsideInsetHeaderClasses, a as appShellBrandClasses, c as appShellCanvasClasses, _ as appShellInsetRowClasses, f as appShellMainClasses, r as appShellRootClasses, h as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, d as appShellSkipLinkClasses, u as appShellSurfaceClasses, p as appShellToggleDesktopClasses, m as appShellToggleMobileClasses, g as appShellToolbarClasses };

package/dist/index.d.ts

@@ -42,11 +42,13 @@ export { IntakeHoneypot, isIntakeHoneypotFilled, type IntakeHoneypotProps, } fro
 export { LinkTile, linkTileLoadingRatio, type LinkTileLayoutClassName, type LinkTileProps, } from "./components/molecules/LinkTile/LinkTile";
 export { LogView, type LogViewLabels, type LogViewLayoutClassName, type LogViewProps, } from "./components/molecules/LogView/LogView";
 export { NavList, navListLabelAlignments, type NavListIcon, type NavListItemDef, type NavListItemProps, type NavListLabelAlignment, type NavListLayoutClassName, type NavListProps, type NavListSectionDef, type NavListSectionProps, } from "./components/molecules/NavList/NavList";
+export { Notice, noticeStoragePrefix, noticeTones, type NoticeLayoutClassName, type NoticeLiveRole, type NoticeProps, type NoticeTone, } from "./components/molecules/Notice/Notice";
 export { PageHeader, pageHeaderAppBandHeightClasses, pageHeaderHeadingLevels, pageHeaderVariants, type PageHeaderHeadingLevel, type PageHeaderLayoutClassName, type PageHeaderProps, type PageHeaderVariant, } from "./components/molecules/PageHeader/PageHeader";
 export { PillGroup, pillGroupEmphases, type PillGroupEmphasis, type PillGroupItemProps, type PillGroupLayoutClassName, type PillGroupProps, } from "./components/molecules/PillGroup/PillGroup";
 export { PromptBar, promptBarPlaceholder, type PromptBarLayoutClassName, type PromptBarProps, } from "./components/molecules/PromptBar/PromptBar";
 export { RadioGroup, radioGroupOrientations, type RadioGroupItemProps, type RadioGroupLayoutClassName, type RadioGroupOrientation, type RadioGroupProps, } from "./components/molecules/RadioGroup/RadioGroup";
 export { Search, searchSizes, type SearchLayoutClassName, type SearchProps, type SearchSize, } from "./components/molecules/Search/Search";
+export { Combobox, filterComboboxOptions, type ComboboxLayoutClassName, type ComboboxOption, type ComboboxProps, } from "./components/molecules/Combobox/Combobox";
 export { Select, selectSizes, type SelectLayoutClassName, type SelectOption, type SelectProps, type SelectSize, } from "./components/molecules/Select/Select";
 export { usStateOptions } from "./components/molecules/Select/usStateOptions";
 export { SelectableCard, type SelectableCardGroupProps, type SelectableCardLayoutClassName, type SelectableCardProps, } from "./components/molecules/SelectableCard/SelectableCard";