@thewhatmatters/wmds 0.4.30 → 0.4.31

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

@@ -64,7 +64,8 @@ export declare const siteNavStartClasses = "flex shrink-0 items-center gap-2 max
 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 max-md:[&_a]:min-h-11 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11";
+/** `max-md:ml-auto`: with the links hidden on phones, the actions and Menu still sit at the trailing edge. */
+export declare const siteNavEndClasses = "flex shrink-0 flex-nowrap items-center gap-2 max-md:ml-auto max-md:[&_a]:min-h-11 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11";
 /**
  * Middle slot when a `mobile` menu is supplied. Shown from `md`.
  * No unprefixed `hidden` or `flex`: a later stylesheet's `.hidden` beats `md:flex`,
@@ -77,11 +78,21 @@ export declare const siteNavMiddleHugResponsiveClasses = "max-md:hidden md:flex
  * 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";
+/**
+ * The "☰ Menu" / "✕ Close" button: phones only, at least 44px tall (N7). Quiet in both states: no fill at
+ * rest or open, the ghost hover/press fill only. In the full bar its 16px padding is pulled past the
+ * trailing edge, so the word lines up with the content edge; the compact pill keeps its padding.
+ */
+export declare const siteNavMobileTriggerClasses = "min-h-11 !px-4 md:!hidden in-data-[state=expanded]:-mr-4";
 /**
  * Brand — layout only when wordmark **Button**; icon brands use **IconButton** (circular).
  */
 export declare const siteNavBrandClasses = "text-fg!";
+/**
+ * A wordmark brand in the full bar: its 16px pill padding is pulled past the leading edge, so the wordmark
+ * starts on the content edge like the page below it (the hit area stays). The compact pill keeps its padding.
+ */
+export declare const siteNavWordmarkBrandClasses = "text-fg! in-data-[state=expanded]:-ml-4";
 /** 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. */
@@ -121,8 +132,25 @@ export declare const siteNavMenuLinkGridClasses = "grid grid-cols-1 gap-y-1 md:g
 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. */
+/**
+ * Phone menu panel (Header rule N8): fixed under the bar (`top` is set inline to the bar's bottom), full
+ * width and the rest of the height, on the page surface; its own scroll if the rows run long. The
+ * links sit on the page margins; the main action pins to the bottom.
+ */
+export declare const siteNavMobilePanelClasses = "fixed inset-x-0 bottom-0 z-[60] flex flex-col overflow-y-auto overscroll-contain bg-body px-[var(--grid-margin)] pt-2 pb-[max(var(--grid-margin),env(safe-area-inset-bottom))] md:hidden!";
+/** The menu's rows, stacked. */
+export declare const siteNavMobileListClasses = "flex flex-col";
+/**
+ * Phone menu row (Header rule N5): full width, 56px. The current page is marked by weight and the
+ * selected fill, not colour alone (N2), with `aria-current="page"`.
+ */
 export declare const siteNavMobileLinkClasses: string;
+/** The menu's main action, pinned to the bottom of the panel, full width. */
+export declare const siteNavMobileActionClasses = "mt-auto flex flex-col gap-2 pt-6 [&_a]:w-full [&_button]:w-full";
+/**
+ * The bar's own actions beside the Menu button. When brand + actions + Menu don't fit (`data-tight`,
+ * measured), they hide so the button keeps its word (Header rule N7); the open menu carries the main
+ * action instead. While the phone menu is open they hide too: the menu's own action is the one CTA on screen.
+ */
+export declare const siteNavEndActionsClasses = "contents data-[tight]:hidden! max-md:data-[menu-open]:hidden!";
 //# sourceMappingURL=siteNavStyles.d.ts.map

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

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

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

@@ -16,10 +16,10 @@ var r = ["expanded", "compact"], i = ["fixed", "inline"], a = ["hug", "grid"], o
 	middleOnly: "flex w-full min-w-0 items-center justify-center",
 	startOnly: "flex w-full items-center justify-start",
 	endOnly: "flex w-full items-center justify-end"
-}, b = "max-md:[&_a]:min-h-11 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11", x = `flex shrink-0 items-center gap-2 ${b}`, S = "flex min-w-0 flex-1 items-center justify-center", C = "flex min-w-0 max-w-full items-center justify-center", w = `flex shrink-0 flex-nowrap items-center gap-2 ${b}`, T = "max-md:hidden md:flex min-w-0 w-full flex-1 items-center justify-center", E = "max-md:hidden md:flex min-w-0 max-w-full items-center justify-center", D = "md:!hidden", O = "text-fg!", k = "relative flex min-w-0 w-full max-w-full items-center justify-center gap-1", A = "flex min-w-0 max-w-full justify-center", j = "m-0 flex min-w-0 list-none flex-nowrap items-center gap-1 overflow-hidden p-0", M = "pointer-events-none invisible absolute left-0 top-0 -z-10 flex w-max gap-1", N = e("text-muted! hover:text-fg!", "data-[state=open]:bg-ghost-hover data-[state=open]:text-fg!"), P = e("inline-flex [&>svg]:size-3.5 [&>svg]:stroke-current", "transition-transform data-[state=open]:rotate-180", n("fast")), F = "inline-flex h-9 items-center px-4 text-sm leading-none", I = "inline-flex h-9 items-center gap-1 px-4 text-sm leading-none", L = e("text-muted! hover:text-fg!", "data-[active]:bg-fill-selected! data-[active]:text-fg!", "aria-[current=page]:bg-fill-selected! aria-[current=page]:text-fg!"), R = e("text-muted! hover:text-fg!", "data-[popup-open]:bg-ghost-hover data-[popup-open]:text-fg!"), z = "inline-flex items-center gap-1", B = e("inline-flex [&>svg]:size-3.5 [&>svg]:stroke-current", "transition-transform data-[popup-open]:rotate-180", n("fast")), V = "z-[51] w-[min(var(--grid-max),calc(100vw_-_2_*_var(--grid-margin)))] outline-none", H = e("relative box-border w-full overflow-hidden rounded-3xl border border-elevation-edge bg-popover shadow-soft-sm", "h-[var(--popup-height)] origin-top", "transition-[height,opacity,transform]", n("medium"), "data-[starting-style]:-translate-y-2 data-[starting-style]:opacity-0", "data-[ending-style]:-translate-y-2 data-[ending-style]:opacity-0"), U = "relative h-full w-full overflow-hidden", W = e("grid w-full grid-cols-1 divide-y divide-border", "md:grid-cols-none md:grid-flow-col md:auto-cols-fr md:divide-x md:divide-y-0", "transition-opacity", n("fast"), "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"), G = "flex min-w-0 flex-col gap-4 p-6", K = {
+}, b = "max-md:[&_a]:min-h-11 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11", x = `flex shrink-0 items-center gap-2 ${b}`, S = "flex min-w-0 flex-1 items-center justify-center", C = "flex min-w-0 max-w-full items-center justify-center", w = `flex shrink-0 flex-nowrap items-center gap-2 max-md:ml-auto ${b}`, T = "max-md:hidden md:flex min-w-0 w-full flex-1 items-center justify-center", E = "max-md:hidden md:flex min-w-0 max-w-full items-center justify-center", D = "min-h-11 !px-4 md:!hidden in-data-[state=expanded]:-mr-4", O = "text-fg!", k = "text-fg! in-data-[state=expanded]:-ml-4", ee = "relative flex min-w-0 w-full max-w-full items-center justify-center gap-1", A = "flex min-w-0 max-w-full justify-center", j = "m-0 flex min-w-0 list-none flex-nowrap items-center gap-1 overflow-hidden p-0", M = "pointer-events-none invisible absolute left-0 top-0 -z-10 flex w-max gap-1", N = e("text-muted! hover:text-fg!", "data-[state=open]:bg-ghost-hover data-[state=open]:text-fg!"), P = e("inline-flex [&>svg]:size-3.5 [&>svg]:stroke-current", "transition-transform data-[state=open]:rotate-180", n("fast")), F = "inline-flex h-9 items-center px-4 text-sm leading-none", I = "inline-flex h-9 items-center gap-1 px-4 text-sm leading-none", L = e("text-muted! hover:text-fg!", "data-[active]:bg-fill-selected! data-[active]:text-fg!", "aria-[current=page]:bg-fill-selected! aria-[current=page]:text-fg!"), R = e("text-muted! hover:text-fg!", "data-[popup-open]:bg-ghost-hover data-[popup-open]:text-fg!"), z = "inline-flex items-center gap-1", B = e("inline-flex [&>svg]:size-3.5 [&>svg]:stroke-current", "transition-transform data-[popup-open]:rotate-180", n("fast")), V = "z-[51] w-[min(var(--grid-max),calc(100vw_-_2_*_var(--grid-margin)))] outline-none", H = e("relative box-border w-full overflow-hidden rounded-3xl border border-elevation-edge bg-popover shadow-soft-sm", "h-[var(--popup-height)] origin-top", "transition-[height,opacity,transform]", n("medium"), "data-[starting-style]:-translate-y-2 data-[starting-style]:opacity-0", "data-[ending-style]:-translate-y-2 data-[ending-style]:opacity-0"), U = "relative h-full w-full overflow-hidden", W = e("grid w-full grid-cols-1 divide-y divide-border", "md:grid-cols-none md:grid-flow-col md:auto-cols-fr md:divide-x md:divide-y-0", "transition-opacity", n("fast"), "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"), G = "flex min-w-0 flex-col gap-4 p-6", K = {
 	1: "col-span-1",
 	2: "col-span-1 md:col-span-2",
 	3: "col-span-1 md:col-span-3"
-}, q = t("overline"), J = "-mx-4 justify-start! self-start", Y = "grid grid-cols-1 gap-y-1 md:grid-cols-2 md:gap-x-6", X = "flex flex-col gap-3 md:flex-row md:gap-4", Z = "aspect-[16/10] w-full shrink-0 md:aspect-auto md:size-16", Q = "flex flex-col gap-1", $ = e("w-full justify-start! text-muted! hover:text-fg!", "aria-[current=page]:bg-fill-selected! aria-[current=page]:text-fg!");
+}, q = t("overline"), J = "-mx-4 justify-start! self-start", Y = "grid grid-cols-1 gap-y-1 md:grid-cols-2 md:gap-x-6", X = "flex flex-col gap-3 md:flex-row md:gap-4", Z = "aspect-[16/10] w-full shrink-0 md:aspect-auto md:size-16", Q = "fixed inset-x-0 bottom-0 z-[60] flex flex-col overflow-y-auto overscroll-contain bg-body px-[var(--grid-margin)] pt-2 pb-[max(var(--grid-margin),env(safe-area-inset-bottom))] md:hidden!", $ = "flex flex-col", te = e("min-h-14! w-full justify-start! text-fg! type-large!", "aria-[current=page]:bg-fill-selected! aria-[current=page]:font-semibold!"), ne = "mt-auto flex flex-col gap-2 pt-6 [&_a]:w-full [&_button]:w-full", re = "contents data-[tight]:hidden! max-md:data-[menu-open]:hidden!";
 //#endregion
-export { h as siteNavBarBaseClasses, _ as siteNavBarCompactLayoutClasses, g as siteNavBarStateClasses, O as siteNavBrandClasses, a as siteNavCompactLayouts, l as siteNavCompactViewportTopClasses, m as siteNavContainerClasses, s as siteNavDefaultCollapseAt, o as siteNavDefaultCollapseRatio, w as siteNavEndClasses, c as siteNavExpandedHeightClasses, L as siteNavLinkClasses, j as siteNavLinkListClasses, k as siteNavLinksRootClasses, F as siteNavMeasureItemClasses, I as siteNavMeasureMoreClasses, M as siteNavMeasureRailClasses, v as siteNavMenuBackdropClasses, W as siteNavMenuContentClasses, J as siteNavMenuLinkClasses, Y as siteNavMenuLinkGridClasses, H as siteNavMenuPopupClasses, V as siteNavMenuPositionerClasses, X as siteNavMenuReadRowClasses, Z as siteNavMenuReadThumbClasses, G as siteNavMenuSectionClasses, q as siteNavMenuSectionLabelClasses, K as siteNavMenuSectionSpanClasses, U as siteNavMenuViewportClasses, S as siteNavMiddleClasses, C as siteNavMiddleHugClasses, E as siteNavMiddleHugResponsiveClasses, T as siteNavMiddleResponsiveClasses, $ as siteNavMobileLinkClasses, Q as siteNavMobileListClasses, D as siteNavMobileTriggerClasses, P as siteNavMoreIconClasses, N as siteNavMoreTriggerClasses, A as siteNavNavigationRootClasses, i as siteNavPlacements, d as siteNavRootFixedClasses, u as siteNavRootFlowClasses, p as siteNavRootInlineClasses, f as siteNavRootStickyClasses, y as siteNavSlotsClasses, x as siteNavStartClasses, r as siteNavStates, R as siteNavTriggerClasses, B as siteNavTriggerIconClasses, z as siteNavTriggerLabelClasses };
+export { h as siteNavBarBaseClasses, _ as siteNavBarCompactLayoutClasses, g as siteNavBarStateClasses, O as siteNavBrandClasses, a as siteNavCompactLayouts, l as siteNavCompactViewportTopClasses, m as siteNavContainerClasses, s as siteNavDefaultCollapseAt, o as siteNavDefaultCollapseRatio, re as siteNavEndActionsClasses, w as siteNavEndClasses, c as siteNavExpandedHeightClasses, L as siteNavLinkClasses, j as siteNavLinkListClasses, ee as siteNavLinksRootClasses, F as siteNavMeasureItemClasses, I as siteNavMeasureMoreClasses, M as siteNavMeasureRailClasses, v as siteNavMenuBackdropClasses, W as siteNavMenuContentClasses, J as siteNavMenuLinkClasses, Y as siteNavMenuLinkGridClasses, H as siteNavMenuPopupClasses, V as siteNavMenuPositionerClasses, X as siteNavMenuReadRowClasses, Z as siteNavMenuReadThumbClasses, G as siteNavMenuSectionClasses, q as siteNavMenuSectionLabelClasses, K as siteNavMenuSectionSpanClasses, U as siteNavMenuViewportClasses, S as siteNavMiddleClasses, C as siteNavMiddleHugClasses, E as siteNavMiddleHugResponsiveClasses, T as siteNavMiddleResponsiveClasses, ne as siteNavMobileActionClasses, te as siteNavMobileLinkClasses, $ as siteNavMobileListClasses, Q as siteNavMobilePanelClasses, D as siteNavMobileTriggerClasses, P as siteNavMoreIconClasses, N as siteNavMoreTriggerClasses, A as siteNavNavigationRootClasses, i as siteNavPlacements, d as siteNavRootFixedClasses, u as siteNavRootFlowClasses, p as siteNavRootInlineClasses, f as siteNavRootStickyClasses, y as siteNavSlotsClasses, x as siteNavStartClasses, r as siteNavStates, R as siteNavTriggerClasses, B as siteNavTriggerIconClasses, z as siteNavTriggerLabelClasses, k as siteNavWordmarkBrandClasses };

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

@@ -0,0 +1,17 @@
+import { type RefObject } from "react";
+export interface SiteNavMobileMenuOptions {
+    open: boolean;
+    onClose: () => void;
+    /** The header: its bar (with the Menu / Close button) stays live above the panel. */
+    barRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
+    triggerRef: RefObject<HTMLElement | null>;
+}
+/**
+ * The phone menu as a dialog that keeps its bar (Header rule N6): page scroll locks, everything but the
+ * bar and the panel goes inert, Tab cycles through the bar and the panel, focus starts on the panel's
+ * first link, Escape closes, and focus returns to the Menu button. Widening past `md` closes it.
+ * Returns the panel's top edge (the bar's bottom) so the panel sits under the bar.
+ */
+export declare function useSiteNavMobileMenu({ open, onClose, barRef, panelRef, triggerRef }: SiteNavMobileMenuOptions): number;
+//# sourceMappingURL=useSiteNavMobileMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSiteNavMobileMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SiteNav/useSiteNavMobileMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,MAAM,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,wBAAwB,UA6D7G"}

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

@@ -0,0 +1,47 @@
+"use client";
+import { inertAllBut as e, lockBodyScroll as t, tabbablesIn as n } from "../../../lib/dialogOverlay.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+//#region src/components/organisms/SiteNav/useSiteNavMobileMenu.ts
+function o({ open: o, onClose: s, barRef: c, panelRef: l, triggerRef: u }) {
+	let [d, f] = a(0), p = i(s);
+	return r(() => {
+		p.current = s;
+	}), r(() => {
+		let r = c.current, i = l.current;
+		if (!o || r == null || i == null) return;
+		let a = () => f(Math.max(0, Math.round(r.getBoundingClientRect().bottom)));
+		a();
+		let s = t(), d = e([r, i]), m = () => [...n(r), ...n(i)];
+		function h(e) {
+			if (e.key === "Escape" && !e.isComposing && !e.defaultPrevented) {
+				e.preventDefault(), p.current();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = m();
+			if (t.length === 0) return;
+			let n = t.indexOf(document.activeElement), r = e.shiftKey ? t[n <= 0 ? t.length - 1 : n - 1] : t[n === -1 || n === t.length - 1 ? 0 : n + 1];
+			e.preventDefault(), r.focus();
+		}
+		document.addEventListener("keydown", h), window.addEventListener("resize", a);
+		let g = window.matchMedia("(min-width: 768px)"), _ = () => {
+			g.matches && p.current();
+		};
+		g.addEventListener("change", _);
+		let v = window.requestAnimationFrame(() => {
+			n(i)[0]?.focus();
+		});
+		return () => {
+			window.cancelAnimationFrame(v), document.removeEventListener("keydown", h), window.removeEventListener("resize", a), g.removeEventListener("change", _), d(), s();
+			let e = document.activeElement;
+			(e == null || e === document.body || i.contains(e) || r.contains(e)) && u.current?.focus();
+		};
+	}, [
+		o,
+		c,
+		l,
+		u
+	]), d;
+}
+//#endregion
+export { o as useSiteNavMobileMenu };

package/dist/lib/dialogOverlay.d.ts

@@ -1,4 +1,12 @@
 import { type RefObject } from "react";
+/** The tabbable controls inside `container`, in DOM order. */
+export declare function tabbablesIn(container: HTMLElement): HTMLElement[];
+/**
+ * Mark everything inert except `keep` and their ancestors — returns cleanup. Unlike `inertPageBehind`,
+ * this works when the surface lives inside the page (a header whose bar stays live above its own menu):
+ * at every level from each kept element up to `body`, the siblings that hold no kept element go inert.
+ */
+export declare function inertAllBut(keep: HTMLElement[]): () => void;
 /** Tab cycle within a modal surface — returns cleanup. */
 export declare function trapFocus(container: HTMLElement): () => void;
 export declare function lockBodyScroll(): () => void;

package/dist/lib/dialogOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/dialogOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc1D,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CAqC5D;AAaD,wBAAgB,cAAc,IAAI,MAAM,IAAI,CAgB3C;AAwBD,+FAA+F;AAC/F,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,cAAc,CAAC,EAAE,MAAM,GACtB,IAAI,CAWN;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAwBhE;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,IAAI,IAAI,CAYvC;AAED,MAAM,WAAW,uBAAuB;IACtC,8FAA8F;IAC9F,IAAI,EAAE,OAAO,CAAC;IACd,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAChD;AAKD;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACvC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAY,EAAE,aAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,uBAAuB,GAC3G,IAAI,CA+CN"}
+{"version":3,"file":"dialogOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/dialogOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc1D,8DAA8D;AAC9D,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAEjE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,IAAI,CAmB3D;AAED,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CAqC5D;AAaD,wBAAgB,cAAc,IAAI,MAAM,IAAI,CAgB3C;AAwBD,+FAA+F;AAC/F,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,cAAc,CAAC,EAAE,MAAM,GACtB,IAAI,CAWN;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAwBhE;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,IAAI,IAAI,CAYvC;AAED,MAAM,WAAW,uBAAuB;IACtC,8FAA8F;IAC9F,IAAI,EAAE,OAAO,CAAC;IACd,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAChD;AAKD;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACvC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAY,EAAE,aAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,uBAAuB,GAC3G,IAAI,CA+CN"}

package/dist/lib/dialogOverlay.js

@@ -6,6 +6,25 @@ function r(e) {
 	return e.closest("[inert]") == null ? typeof e.checkVisibility == "function" ? e.checkVisibility({ visibilityProperty: !0 }) : e.offsetParent !== null && getComputedStyle(e).visibility !== "hidden" : !1;
 }
 function i(e) {
+	return Array.from(e.querySelectorAll(n)).filter(r);
+}
+function a(e) {
+	if (typeof document > "u") return () => void 0;
+	let t = (t) => e.some((e) => t === e || t.contains(e)), n = /* @__PURE__ */ new Set();
+	for (let r of e) for (let e = r; e != null && e !== document.body; e = e.parentElement) {
+		let r = e.parentElement;
+		if (r == null) break;
+		for (let e of Array.from(r.children)) !(e instanceof HTMLElement) || t(e) || e.hasAttribute("inert") || [
+			"SCRIPT",
+			"STYLE",
+			"LINK"
+		].includes(e.tagName) || (e.setAttribute("inert", ""), n.add(e));
+	}
+	return () => {
+		for (let e of n) e.removeAttribute("inert");
+	};
+}
+function o(e) {
 	function t(t) {
 		if (t.key !== "Tab") return;
 		let i = Array.from(e.querySelectorAll(n)).filter((e) => r(e) || e === document.activeElement);
@@ -24,16 +43,16 @@ function i(e) {
 		e.removeEventListener("keydown", t);
 	};
 }
-var a = 0, o = () => void 0;
-function s() {
+var s = 0, c = () => void 0;
+function l() {
 	if (typeof document > "u") return () => void 0;
-	a += 1, a === 1 && (o = c(document));
+	s += 1, s === 1 && (c = u(document));
 	let e = !1;
 	return () => {
-		e || (e = !0, --a, a === 0 && o());
+		e || (e = !0, --s, s === 0 && c());
 	};
 }
-function c({ body: e, documentElement: t }) {
+function u({ body: e, documentElement: t }) {
 	let n = e.style.overflow, r = e.style.paddingRight, i = t.style.scrollbarGutter;
 	e.style.overflow = "hidden";
 	let a = getComputedStyle(t).scrollbarGutter.includes("stable") ? Math.max(0, window.innerWidth - t.scrollWidth) : 0;
@@ -45,7 +64,7 @@ function c({ body: e, documentElement: t }) {
 		e.style.overflow = n, e.style.paddingRight = r, t.style.scrollbarGutter = i;
 	};
 }
-function l(e, t) {
+function d(e, t) {
 	if (t) {
 		let n = e.querySelector(t);
 		if (n != null) {
@@ -55,7 +74,7 @@ function l(e, t) {
 	}
 	e.querySelector(n)?.focus();
 }
-function u(e) {
+function f(e) {
 	if (typeof document > "u") return () => void 0;
 	let t = e;
 	for (; t.parentElement != null && t.parentElement !== document.body;) t = t.parentElement;
@@ -65,57 +84,57 @@ function u(e) {
 		for (let e of n) e.removeAttribute("inert");
 	};
 }
-function d() {
+function p() {
 	if (typeof document > "u") return;
 	let e = document.querySelector("main, [role='main']");
 	e != null && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus({ preventScroll: !0 }));
 }
-var f = [];
-function p(n, { open: r, onClose: a, modal: o = !0, closeOnEscape: c = !0, initialFocus: d, returnFocusRef: p }) {
-	let _ = t(a), v = t(c);
+var m = [];
+function h(n, { open: r, onClose: i, modal: a = !0, closeOnEscape: s = !0, initialFocus: c, returnFocusRef: u }) {
+	let p = t(i), h = t(s);
 	e(() => {
-		_.current = a, v.current = c;
+		p.current = i, h.current = s;
 	}), e(() => {
 		let e = n.current;
 		if (!r || e == null) return;
 		let t = {};
-		f.push(t);
-		let a = p?.current ?? document.activeElement, c = o ? h(s(), u(e), i(e)) : m, y = window.requestAnimationFrame(() => {
+		m.push(t);
+		let i = u?.current ?? document.activeElement, s = a ? _(l(), f(e), o(e)) : g, y = window.requestAnimationFrame(() => {
 			let t = document.activeElement;
-			(t == null || t === document.body || t === a) && l(e, d);
+			(t == null || t === document.body || t === i) && d(e, c);
 		});
 		function b(e) {
-			e.key !== "Escape" || e.isComposing || e.defaultPrevented || f.at(-1) !== t || v.current && (e.preventDefault(), _.current());
+			e.key !== "Escape" || e.isComposing || e.defaultPrevented || m.at(-1) !== t || h.current && (e.preventDefault(), p.current());
 		}
 		return document.addEventListener("keydown", b), () => {
-			document.removeEventListener("keydown", b), window.cancelAnimationFrame(y), f.splice(f.indexOf(t), 1), c(), g(e, a);
+			document.removeEventListener("keydown", b), window.cancelAnimationFrame(y), m.splice(m.indexOf(t), 1), s(), v(e, i);
 		};
 	}, [
-		d,
-		o,
+		c,
+		a,
 		r,
 		n,
-		p
+		u
 	]);
 }
-function m() {}
-function h(...e) {
+function g() {}
+function _(...e) {
 	return () => {
 		for (let t of e.reverse()) t();
 	};
 }
-function g(e, t) {
+function v(e, t) {
 	let n = document.activeElement;
 	if (!(n != null && n !== document.body && !e.contains(n))) {
 		if (t != null && t.isConnected && t !== document.body) {
 			t.focus();
 			return;
 		}
-		d(), window.requestAnimationFrame(() => {
+		p(), window.requestAnimationFrame(() => {
 			let t = document.activeElement;
-			(t == null || t === document.body || e.contains(t)) && d();
+			(t == null || t === document.body || e.contains(t)) && p();
 		});
 	}
 }
 //#endregion
-export { l as focusInitialElement, d as focusMainContent, u as inertPageBehind, s as lockBodyScroll, i as trapFocus, p as useOverlayLifecycle };
+export { d as focusInitialElement, p as focusMainContent, a as inertAllBut, f as inertPageBehind, l as lockBodyScroll, i as tabbablesIn, o as trapFocus, h as useOverlayLifecycle };