@thewhatmatters/wmds 0.4.9 → 0.4.28

package/dist/lib/dialogOverlay.js

@@ -1,44 +1,121 @@
 "use client";
+import { useEffect as e, useRef as t } from "react";
 //#region src/lib/dialogOverlay.ts
-var e = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function t(e) {
+var n = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+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 n(n) {
-	function r(r) {
-		if (r.key !== "Tab") return;
-		let i = Array.from(n.querySelectorAll(e)).filter((e) => t(e) || e === document.activeElement);
+function i(e) {
+	function t(t) {
+		if (t.key !== "Tab") return;
+		let i = Array.from(e.querySelectorAll(n)).filter((e) => r(e) || e === document.activeElement);
 		if (i.length === 0) {
-			r.preventDefault();
+			t.preventDefault();
 			return;
 		}
 		let a = i[0], o = i[i.length - 1], s = document.activeElement;
-		if (r.shiftKey) {
-			(s === a || !n.contains(s)) && (r.preventDefault(), o.focus());
+		if (t.shiftKey) {
+			(s === a || !e.contains(s)) && (t.preventDefault(), o.focus());
 			return;
 		}
-		s === o && (r.preventDefault(), a.focus());
+		s === o && (t.preventDefault(), a.focus());
 	}
-	return n.addEventListener("keydown", r), () => {
-		n.removeEventListener("keydown", r);
+	return e.addEventListener("keydown", t), () => {
+		e.removeEventListener("keydown", t);
 	};
 }
-function r() {
+var a = 0, o = () => void 0;
+function s() {
 	if (typeof document > "u") return () => void 0;
-	let { body: e } = document, t = e.style.overflow;
-	return e.style.overflow = "hidden", () => {
-		e.style.overflow = t;
+	a += 1, a === 1 && (o = c(document));
+	let e = !1;
+	return () => {
+		e || (e = !0, --a, a === 0 && o());
 	};
 }
-function i(t, n) {
-	if (n) {
-		let e = t.querySelector(n);
-		if (e != null) {
-			e.focus();
+function c({ 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;
+	if (a > 0) {
+		let n = parseFloat(getComputedStyle(e).paddingRight) || 0;
+		t.style.scrollbarGutter = "auto", e.style.paddingRight = `${n + a}px`;
+	}
+	return () => {
+		e.style.overflow = n, e.style.paddingRight = r, t.style.scrollbarGutter = i;
+	};
+}
+function l(e, t) {
+	if (t) {
+		let n = e.querySelector(t);
+		if (n != null) {
+			n.focus();
+			return;
+		}
+	}
+	e.querySelector(n)?.focus();
+}
+function u(e) {
+	if (typeof document > "u") return () => void 0;
+	let t = e;
+	for (; t.parentElement != null && t.parentElement !== document.body;) t = t.parentElement;
+	let n = [];
+	for (let e of Array.from(document.body.children)) e === t || !(e instanceof HTMLElement) || e.hasAttribute("inert") || (e.setAttribute("inert", ""), n.push(e));
+	return () => {
+		for (let e of n) e.removeAttribute("inert");
+	};
+}
+function d() {
+	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);
+	e(() => {
+		_.current = a, v.current = c;
+	}), 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(() => {
+			let t = document.activeElement;
+			(t == null || t === document.body || t === a) && l(e, d);
+		});
+		function b(e) {
+			e.key !== "Escape" || e.isComposing || e.defaultPrevented || f.at(-1) !== t || v.current && (e.preventDefault(), _.current());
+		}
+		return document.addEventListener("keydown", b), () => {
+			document.removeEventListener("keydown", b), window.cancelAnimationFrame(y), f.splice(f.indexOf(t), 1), c(), g(e, a);
+		};
+	}, [
+		d,
+		o,
+		r,
+		n,
+		p
+	]);
+}
+function m() {}
+function h(...e) {
+	return () => {
+		for (let t of e.reverse()) t();
+	};
+}
+function g(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(() => {
+			let t = document.activeElement;
+			(t == null || t === document.body || e.contains(t)) && d();
+		});
 	}
-	t.querySelector(e)?.focus();
 }
 //#endregion
-export { i as focusInitialElement, r as lockBodyScroll, n as trapFocus };
+export { l as focusInitialElement, d as focusMainContent, u as inertPageBehind, s as lockBodyScroll, i as trapFocus, p as useOverlayLifecycle };

package/dist/lib/sheetParam/index.d.ts

@@ -0,0 +1,3 @@
+export { readSheetParam, withSheetParam, type SheetParamValue } from "./sheetParam";
+export { useSheetParam, type UseSheetParamOptions, type UseSheetParamResult } from "./useSheetParam";
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/sheetParam/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/sheetParam/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/lib/sheetParam/sheetParam.d.ts

@@ -0,0 +1,15 @@
+/** Query keys for a URL-backed sheet: `?sheet=<kind>&id=<id>`. */
+export declare const sheetParamKey = "sheet";
+export declare const sheetParamIdKey = "id";
+export interface SheetParamValue {
+    kind: string | null;
+    id: string | null;
+}
+/** The sheet a URL asks for — `kind` and `id` are `null` when it asks for none. */
+export declare function readSheetParam(url: string | URL): SheetParamValue;
+/**
+ * The URL with `?sheet=<kind>&id=<id>` set, or both removed when `id` is `null`.
+ * Other query parameters and the hash are kept; a relative URL stays relative.
+ */
+export declare function withSheetParam(url: string | URL, id: string | null, kind: string): string;
+//# sourceMappingURL=sheetParam.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheetParam.d.ts","sourceRoot":"","sources":["../../../src/lib/sheetParam/sheetParam.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,eAAO,MAAM,aAAa,UAAU,CAAC;AACrC,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACnB;AAUD,mFAAmF;AACnF,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,eAAe,CAQjE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUzF"}

package/dist/lib/sheetParam/sheetParam.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/lib/sheetParam/sheetParam.ts
+var e = "sheet", t = /^[a-z][a-z0-9+.-]*:/i;
+function n(e) {
+	let n = typeof e == "string" ? e : e.href;
+	return {
+		parsed: new URL(n, "http://wmds.invalid"),
+		absolute: t.test(n)
+	};
+}
+function r(t) {
+	let { parsed: r } = n(t), i = r.searchParams.get(e), a = r.searchParams.get("id");
+	return i == null || i === "" || a == null || a === "" ? {
+		kind: null,
+		id: null
+	} : {
+		kind: i,
+		id: a
+	};
+}
+function i(t, r, i) {
+	let { parsed: a, absolute: o } = n(t);
+	return r == null || r === "" ? (a.searchParams.delete(e), a.searchParams.delete("id")) : (a.searchParams.set(e, i), a.searchParams.set("id", r)), o ? a.href : `${a.pathname}${a.search}${a.hash}`;
+}
+//#endregion
+export { r as readSheetParam, e as sheetParamKey, i as withSheetParam };

package/dist/lib/sheetParam/useSheetParam.d.ts

@@ -0,0 +1,25 @@
+export interface UseSheetParamOptions {
+    /**
+     * The request URL on the server, so the first paint already has the sheet open.
+     * Ignored in the browser once the page is live — the address bar wins.
+     */
+    initialUrl?: string | URL;
+}
+export interface UseSheetParamResult {
+    /** `true` when the URL asks for this `kind` of sheet. Pass to **Sheet** `open`. */
+    open: boolean;
+    /** The id in the URL while `open`, otherwise `null`. */
+    id: string | null;
+    /**
+     * Pass to **Sheet** `onOpenChange`. Opening needs an `id` (`onOpenChange(true, "maya-chen")`) and
+     * pushes a history entry; closing replaces the current one. Opening without an id does nothing.
+     */
+    onOpenChange: (open: boolean, id?: string) => void;
+}
+/**
+ * Keeps one kind of sheet in the URL as `?sheet=<kind>&id=<id>` with the History API — no router.
+ * Back closes the sheet and a deep link opens it on the first render. Rows can stay real links
+ * (`href={withSheetParam(url, id, kind)}`) so they work without JavaScript.
+ */
+export declare function useSheetParam(kind: string, options?: UseSheetParamOptions): UseSheetParamResult;
+//# sourceMappingURL=useSheetParam.d.ts.map

package/dist/lib/sheetParam/useSheetParam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetParam.d.ts","sourceRoot":"","sources":["../../../src/lib/sheetParam/useSheetParam.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,mFAAmF;IACnF,IAAI,EAAE,OAAO,CAAC;IACd,wDAAwD;IACxD,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAeD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,mBAAmB,CAwBnG"}

package/dist/lib/sheetParam/useSheetParam.js

@@ -0,0 +1,29 @@
+"use client";
+import { readSheetParam as e, withSheetParam as t } from "./sheetParam.js";
+import { useCallback as n, useSyncExternalStore as r } from "react";
+//#region src/lib/sheetParam/useSheetParam.ts
+var i = "wmds:sheetparam";
+function a(e) {
+	return window.addEventListener("popstate", e), window.addEventListener(i, e), () => {
+		window.removeEventListener("popstate", e), window.removeEventListener(i, e);
+	};
+}
+function o() {
+	return `${window.location.pathname}${window.location.search}`;
+}
+function s(s, c = {}) {
+	let { initialUrl: l } = c, u = l == null ? "/" : typeof l == "string" ? l : l.href, d = r(a, o, () => u), f = e(d), p = f.kind === s, m = n((e, n) => {
+		if (e) {
+			if (n == null || n === "") return;
+			window.history.pushState(null, "", t(o(), n, s));
+		} else window.history.replaceState(null, "", t(o(), null, s));
+		window.dispatchEvent(new Event(i));
+	}, [s]);
+	return {
+		open: p,
+		id: p ? f.id : null,
+		onOpenChange: m
+	};
+}
+//#endregion
+export { s as useSheetParam };

package/dist/lib/typography.d.ts

@@ -8,7 +8,7 @@
 /** WMDS document roles — map to Astryx semantic type scale. */
 export type TypographyRole = "display" | "page-heading" | "section-heading" | "subheading" | "body" | "ui-label" | "caption" | "caption-tight" | "overline" | "eyebrow" | "reading";
 /** Astryx semantic type names (Foundation reference). */
-export type AstryxTypeScale = "display-1" | "display-2" | "display-3" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "large" | "body" | "label" | "supporting" | "caption" | "code" | "control" | "eyebrow" | "reading";
+export type AstryxTypeScale = "display-hero" | "display-xl" | "display-1" | "display-2" | "display-3" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "large" | "body" | "label" | "supporting" | "caption" | "code" | "control" | "eyebrow" | "reading";
 export type TypographyTracking = "tight" | "normal" | "wider";
 export interface GeometricScaleStep {
     token: string;

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

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,cAAc,GACd,iBAAiB,GACjB,YAAY,GACZ,MAAM,GACN,UAAU,GACV,SAAS,GACT,eAAe,GACf,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd,yDAAyD;AACzD,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,EAAE,eAAe,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAgBA,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAc9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;EAKd,CAAC;AAEX,mFAAmF;AACnF,eAAO,MAAM,SAAS;;;;;GAKnB,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,eAAe,EA6H7C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC;IAClC,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAmBA,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;EAsBf,CAAC;AAEX,kGAAkG;AAClG,eAAO,MAAM,qBAAqB,EAE7B,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,eAAe,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAE5D;AAED,8EAA8E;AAC9E,wBAAgB,4BAA4B,CAAC,IAAI,GAAE,OAAO,GAAG,IAErD,GAAG,kBAAkB,EAAE,CAS9B"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/typography.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,cAAc,GACd,iBAAiB,GACjB,YAAY,GACZ,MAAM,GACN,UAAU,GACV,SAAS,GACT,eAAe,GACf,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd,yDAAyD;AACzD,MAAM,MAAM,eAAe,GACvB,cAAc,GACd,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,EAAE,eAAe,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAgBA,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAc9C,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;EAKd,CAAC;AAEX,mFAAmF;AACnF,eAAO,MAAM,SAAS;;;;;GAKnB,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,eAAe,EA6H7C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC;IAClC,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAqBA,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;EAsBf,CAAC;AAEX,kGAAkG;AAClG,eAAO,MAAM,qBAAqB,EAE7B,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,eAAe,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAE5D;AAED,8EAA8E;AAC9E,wBAAgB,4BAA4B,CAAC,IAAI,GAAE,OAAO,GAAG,IAErD,GAAG,kBAAkB,EAAE,CAS9B"}

package/dist/shape.css

@@ -1,8 +1,29 @@
 /**
  * WMDS shape tokens — shared component geometry.
- * Override on an experience wrapper only when that experience owns a documented shape mode.
+ *
+ * Design knobs (apps may set these; CONSUMING.md → Design knobs):
+ * - `--radius-control`: buttons, icon buttons, inputs, search, select, chips, pills, badges, segmented
+ *   controls, tabs, the compact SiteNav bar. Default is a pill. `4px` gives rectangular controls.
+ * - `--radius-surface`: cards, menus, toasts, and other raised surfaces.
+ * Set them on `:root` in the app's theme stylesheet, or on a page/section wrapper with an arbitrary
+ * property (`[--radius-control:4px]`); every component inside follows.
+ *
+ * The rest are derived; don't set them directly.
  */
 :root {
-  --radius-card-shell: 16px;
-  --radius-card-body: 14px;
+  --radius-control: 9999px;
+  --radius-surface: 16px;
+}
+
+/* Derived on every element so a knob set on a wrapper (not only :root) reaches what's inside it. */
+* {
+  /* A control nested in a control (segmented-control item in its track) sits 2px inside. */
+  --radius-control-inner: max(0px, calc(var(--radius-control) - 2px));
+  /* Multi-line controls (TextArea, NavList rows) are never pills: 12px by default, follow square knobs. */
+  --radius-control-box: min(var(--radius-control), 12px);
+  /* Smaller surfaces keep their proportion: 12px and 8px at the default 16px. */
+  --radius-surface-md: calc(var(--radius-surface) * 0.75);
+  --radius-surface-sm: calc(var(--radius-surface) * 0.5);
+  --radius-card-shell: var(--radius-surface);
+  --radius-card-body: max(0px, calc(var(--radius-surface) - 2px));
 }