shelving 1.214.1 → 1.215.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.214.1",
+	"version": "1.215.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/layout/SidebarLayout.d.ts

@@ -11,7 +11,8 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by a single menu button that switches between a burger and a close icon.
+ * - While the drawer is open an overlay dims the rest of the page; clicking the overlay closes the drawer.
  * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */

package/ui/layout/SidebarLayout.js

@@ -10,7 +10,8 @@ import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by a single menu button that switches between a burger and a close icon.
+ * - While the drawer is open an overlay dims the rest of the page; clicking the overlay closes the drawer.
  * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
@@ -22,8 +23,9 @@ export function SidebarLayout({ sidebar, children, right = false }) {
         if (href)
             setOpen(false);
     }, [href]);
-    const sidebarEl = (_jsxs("nav", { className: getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.close, children: _jsx(Button, { plain: true, fit: true, title: "Close menu", onClick: () => setOpen(false), children: _jsx(XMarkIcon, {}) }) }), sidebar] }, "sidebar"));
-    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.show, children: _jsx(Button, { plain: true, fit: true, title: "Show menu", onClick: () => setOpen(true), children: _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, "content"));
-    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: right ? [contentEl, sidebarEl] : [sidebarEl, contentEl] }));
+    const sidebarEl = (_jsx("nav", { className: getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open), children: sidebar }, "sidebar"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.toggle, children: _jsx(Button, { fit: true, cyan: !open, orange: open, plain: true, title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, "content"));
+    const overlayEl = open && (_jsx("button", { type: "button", className: SIDEBAR_LAYOUT_CSS.overlay, "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
+    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] }));
 }
 export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.module.css

@@ -7,7 +7,8 @@
  * layout padding, safe-area insets, and `overflow: hidden auto` scroll behaviour.
  *
  * On narrow viewports the sidebar becomes an off-canvas drawer that slides off the left edge of the
- * screen; the `.show` / `.close` buttons toggle it (both are hidden entirely on wide viewports).
+ * screen; the `.toggle` button opens/closes it and the `.overlay` dims the page behind the open
+ * drawer (both are hidden entirely on wide viewports).
  */
 
 .main {
@@ -37,16 +38,25 @@
 	margin: 0 auto;
 }
 
-/* Wrappers for the menu toggle buttons — hidden on wide viewports, shown on narrow ones (see media query). */
-.show,
-.close {
+/* Wrapper for the menu toggle button — hidden on wide viewports, shown on narrow ones (see media query). */
+.toggle {
 	display: none;
-	margin-bottom: var(--space-xsmall);
+	width: fit-content;
+	margin: 0 0 0 auto;
 }
 
-/* The close button sits at the top of the sidebar, aligned to its trailing edge. */
-.close {
-	justify-content: flex-end;
+/* Full-page dimmer behind the open drawer — hidden on wide viewports. */
+.overlay {
+	display: none;
+}
+
+@keyframes overlay-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 /* On narrow viewports the sidebar becomes an off-canvas drawer that slides in from the left. */
@@ -68,8 +78,24 @@
 		transform: translateX(0);
 		box-shadow: 0 0 1.5rem var(--color-overlay);
 	}
-	.show,
-	.close {
-		display: flex;
+	/* Pin the toggle button to the top-right so it stays reachable while the content column scrolls. */
+	.toggle {
+		display: block;
+		position: sticky;
+		top: 0;
+		z-index: 110;
+	}
+	/* Dim the page behind the open drawer; clicking the overlay closes it. */
+	.overlay {
+		display: block;
+		position: fixed;
+		inset: 0;
+		z-index: 90;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: var(--color-overlay);
+		cursor: pointer;
+		animation: overlay-fade-in var(--duration-normal) ease-in-out;
 	}
 }

package/ui/layout/SidebarLayout.tsx

@@ -19,7 +19,8 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by the "show menu" / "close" buttons.
+ * - On narrow viewports the sidebar becomes an off-canvas drawer toggled by a single menu button that switches between a burger and a close icon.
+ * - While the drawer is open an overlay dims the rest of the page; clicking the overlay closes the drawer.
  * - Inside a `<Navigation>` the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
@@ -34,26 +35,26 @@ export function SidebarLayout({ sidebar, children, right = false }: SidebarLayou
 
 	const sidebarEl = (
 		<nav key="sidebar" className={getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open)}>
-			<div className={SIDEBAR_LAYOUT_CSS.close}>
-				<Button plain fit title="Close menu" onClick={() => setOpen(false)}>
-					<XMarkIcon />
-				</Button>
-			</div>
 			{sidebar}
 		</nav>
 	);
 	const contentEl = (
 		<div key="content" className={getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content)}>
-			<div className={SIDEBAR_LAYOUT_CSS.show}>
-				<Button plain fit title="Show menu" onClick={() => setOpen(true)}>
-					<Bars3Icon />
+			<div className={SIDEBAR_LAYOUT_CSS.toggle}>
+				<Button fit cyan={!open} orange={open} plain title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
+					{open ? <XMarkIcon /> : <Bars3Icon />}
 				</Button>
 			</div>
 			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
 		</div>
 	);
+	const overlayEl = open && (
+		<button key="overlay" type="button" className={SIDEBAR_LAYOUT_CSS.overlay} aria-label="Close menu" onClick={() => setOpen(false)} />
+	);
 	return (
-		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}</main>
+		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>
+			{right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl]}
+		</main>
 	);
 }
 

package/ui/misc/Color.module.css

@@ -3,61 +3,91 @@
 	--primary-text: var(--color-blue);
 	--primary-contrast: var(--color-white);
 	--primary-surface: color-mix(in srgb, var(--primary-text) 12%, white);
+	--primary-border: color-mix(in srgb, var(--primary-text) 40%, transparent);
 
 	/* Secondary colors */
 	--secondary-text: var(--color-purple);
 	--secondary-contrast: var(--color-white);
 	--secondary-surface: color-mix(in srgb, var(--secondary-text) 12%, white);
+	--secondary-border: color-mix(in srgb, var(--secondary-text) 40%, transparent);
 
 	/* Tertiary colors */
 	--tertiary-text: var(--color-cyan);
 	--tertiary-contrast: var(--color-white);
 	--tertiary-surface: color-mix(in srgb, var(--tertiary-text) 12%, white);
+	--tertiary-border: color-mix(in srgb, var(--tertiary-text) 40%, transparent);
 
 	/* Quiet colors */
 	--quiet-text: var(--color-quiet);
 	--quiet-contrast: var(--color-contrast);
-	--quiet-surface: var(--color-surface);
+	--quiet-surface: color-mix(in srgb, var(--quiet-text) 12%, white);
+	--quiet-border: color-mix(in srgb, var(--quiet-text) 40%, transparent);
+
+	/* Black */
+	--black-text: var(--color-black);
+	--black-contrast: var(--color-white);
+	--black-surface: color-mix(in srgb, var(--black-text) 12%, white);
+	--black-border: color-mix(in srgb, var(--black-text) 40%, transparent);
+
+	/* White */
+	--white-text: var(--color-white);
+	--white-contrast: var(--color-black);
+	--white-surface: color-mix(in srgb, var(--white-text) 12%, white);
+	--white-border: color-mix(in srgb, var(--white-text) 40%, transparent);
+
+	/* Gray */
+	--gray-text: var(--color-gray);
+	--gray-contrast: var(--color-white);
+	--gray-surface: color-mix(in srgb, var(--gray-text) 12%, white);
+	--gray-border: color-mix(in srgb, var(--gray-text) 40%, transparent);
 
 	/* Red */
 	--red-text: var(--color-red);
 	--red-contrast: var(--color-white);
 	--red-surface: color-mix(in srgb, var(--red-text) 12%, white);
+	--red-border: color-mix(in srgb, var(--red-text) 40%, transparent);
 
 	/* Orange */
 	--orange-text: var(--color-orange);
-	--orange-contrast: var(--color-black);
+	--orange-contrast: var(--color-white);
 	--orange-surface: color-mix(in srgb, var(--orange-text) 12%, white);
+	--orange-border: color-mix(in srgb, var(--orange-text) 40%, transparent);
 
 	/* Yellow */
 	--yellow-text: var(--color-yellow);
 	--yellow-contrast: var(--color-black);
 	--yellow-surface: color-mix(in srgb, var(--yellow-text) 12%, white);
+	--yellow-border: color-mix(in srgb, var(--yellow-text) 40%, transparent);
 
 	/* Green */
 	--green-text: var(--color-green);
 	--green-contrast: var(--color-black);
 	--green-surface: color-mix(in srgb, var(--green-text) 12%, white);
+	--green-border: color-mix(in srgb, var(--green-text) 40%, transparent);
 
 	/* Cyan */
 	--cyan-text: var(--color-cyan);
 	--cyan-contrast: var(--color-black);
 	--cyan-surface: color-mix(in srgb, var(--cyan-text) 12%, white);
+	--cyan-border: color-mix(in srgb, var(--cyan-text) 40%, transparent);
 
 	/* Blue */
 	--blue-text: var(--color-blue);
 	--blue-contrast: var(--color-white);
 	--blue-surface: color-mix(in srgb, var(--blue-text) 12%, white);
+	--blue-border: color-mix(in srgb, var(--blue-text) 40%, transparent);
 
 	/* Purple */
 	--purple-text: var(--color-purple);
 	--purple-contrast: var(--color-white);
 	--purple-surface: color-mix(in srgb, var(--purple-text) 12%, white);
+	--purple-border: color-mix(in srgb, var(--purple-text) 40%, transparent);
 
 	/* Pink */
 	--pink-text: var(--color-pink);
 	--pink-contrast: var(--color-white);
 	--pink-surface: color-mix(in srgb, var(--pink-text) 12%, white);
+	--pink-border: color-mix(in srgb, var(--pink-text) 40%, transparent);
 }
 
 .primary {
@@ -66,6 +96,7 @@
 	--color-link: var(--primary-text);
 	--color-quiet: var(--primary-text);
 	--color-surface: var(--primary-surface);
+	--color-border: var(--primary-border);
 }
 
 .secondary {
@@ -74,6 +105,7 @@
 	--color-link: var(--secondary-text);
 	--color-quiet: var(--secondary-text);
 	--color-surface: var(--secondary-surface);
+	--color-border: var(--secondary-border);
 }
 
 .tertiary {
@@ -82,6 +114,7 @@
 	--color-link: var(--tertiary-text);
 	--color-quiet: var(--tertiary-text);
 	--color-surface: var(--tertiary-surface);
+	--color-border: var(--tertiary-border);
 }
 
 .quiet {
@@ -90,6 +123,7 @@
 	--color-link: var(--quiet-text);
 	--color-quiet: var(--quiet-text);
 	--color-surface: var(--quiet-surface);
+	--color-border: var(--quiet-border);
 }
 
 .red {
@@ -98,6 +132,7 @@
 	--color-link: var(--red-text);
 	--color-quiet: var(--red-text);
 	--color-surface: var(--red-surface);
+	--color-border: var(--red-border);
 }
 
 .orange {
@@ -106,6 +141,7 @@
 	--color-link: var(--orange-text);
 	--color-quiet: var(--orange-text);
 	--color-surface: var(--orange-surface);
+	--color-border: var(--orange-border);
 }
 
 .yellow {
@@ -114,6 +150,7 @@
 	--color-link: var(--yellow-text);
 	--color-quiet: var(--yellow-text);
 	--color-surface: var(--yellow-surface);
+	--color-border: var(--yellow-border);
 }
 
 .green {
@@ -122,6 +159,7 @@
 	--color-link: var(--green-text);
 	--color-quiet: var(--green-text);
 	--color-surface: var(--green-surface);
+	--color-border: var(--green-border);
 }
 
 .cyan {
@@ -130,6 +168,7 @@
 	--color-link: var(--cyan-text);
 	--color-quiet: var(--cyan-text);
 	--color-surface: var(--cyan-surface);
+	--color-border: var(--cyan-border);
 }
 
 .blue {
@@ -138,6 +177,7 @@
 	--color-link: var(--blue-text);
 	--color-quiet: var(--blue-text);
 	--color-surface: var(--blue-surface);
+	--color-border: var(--blue-border);
 }
 
 .purple {
@@ -146,6 +186,7 @@
 	--color-link: var(--purple-text);
 	--color-quiet: var(--purple-text);
 	--color-surface: var(--purple-surface);
+	--color-border: var(--purple-border);
 }
 
 .pink {
@@ -154,4 +195,5 @@
 	--color-link: var(--pink-text);
 	--color-quiet: var(--pink-text);
 	--color-surface: var(--pink-surface);
+	--color-border: var(--pink-border);
 }