@thewhatmatters/wmds 0.4.37 → 0.4.38

package/CHANGELOG.md

@@ -7,6 +7,17 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.38
+
+**AppShell: a page picker on the phone menu button.**
+
+- **AppShell** `menuButton="picker"` (new): below `lg` the menu button shows the icon, the current page (`title`, truncating) and a chevron, standing in for the title, so a long page name isn't cut to one word ("Hero — Feature Center ▾"). Its name is `labels.menu: title`. The `h1` stays in the page for screen readers and is visible from `lg`.
+- Story **AppShell → State — phone, page picker**, with an interaction test.
+
+### Consumer actions
+
+- None.
+
 ## 0.4.37
 
 **AppShell: a docked aside you can use while watching the page, a labelled phone menu button, and titles that end in an ellipsis.**

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

@@ -15,7 +15,7 @@ export interface AppShellLabels {
 }
 export declare const appShellAsideModes: readonly ["overlay", "docked"];
 export type AppShellAsideMode = (typeof appShellAsideModes)[number];
-export declare const appShellMenuButtons: readonly ["icon", "label"];
+export declare const appShellMenuButtons: readonly ["icon", "label", "picker"];
 export type AppShellMenuButton = (typeof appShellMenuButtons)[number];
 export interface AppShellProps {
     /** Page title — the `h1` in the title bar. */
@@ -49,8 +49,11 @@ export interface AppShellProps {
     onAsideOpenChange?: (open: boolean) => void;
     labels?: Partial<AppShellLabels>;
     /**
-     * The phone menu button (below `lg`): `icon` (default) or `label`, the icon plus `labels.menu` as visible
-     * text ("Patterns"), when the glyph alone wouldn't say what the menu holds.
+     * The phone menu button (below `lg`): `icon` (default); `label`, the icon plus `labels.menu` as visible
+     * text ("Patterns"), when the glyph alone wouldn't say what the menu holds; or `picker`, the icon plus the
+     * current page (`title`) and a chevron, standing in for the title on phones, when the menu is a list of
+     * pages and the button should say which one you're on ("Hero — Feature Center ▾"). With `picker` the
+     * `h1` stays in the page for screen readers but is only visible from `lg`.
      */
     menuButton?: AppShellMenuButton;
     /** Page content. **AppShell.Brand**, **Sidebar**, **Header**, and **Aside** children fill their slots instead. */

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

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

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

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