shelving 1.223.0 → 1.224.0

package/package.json

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

package/ui/block/Card.module.css

@@ -1,3 +1,8 @@
+:root {
+	/* Opaque surface colour for content nested inside a card — slightly darker than `--color-surface`. */
+	--card-color-surface: color-mix(in srgb, var(--color-surface) 92%, black);
+}
+
 .card {
 	/* Box */
 	position: relative;
@@ -47,6 +52,12 @@
 	}
 }
 
+/* Content nested in a card uses the card's opaque surface colour, so translucent surfaces don't double up. */
+/* `:where()` keeps specificity at zero so colour/status variant classes on descendants still win. */
+:where(.card) * {
+	--color-surface: var(--card-color-surface);
+}
+
 .overlay {
 	/* Cover the entire card. */
 	position: absolute;

package/ui/layout/SidebarLayout.d.ts

@@ -13,7 +13,7 @@ export interface SidebarLayoutProps extends OptionalChildProps {
  * - 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.
+ * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
  */
 export declare function SidebarLayout({ sidebar, children, right }: SidebarLayoutProps): ReactElement;
 export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.js

@@ -13,7 +13,7 @@ import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
  * - 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.
+ * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }) {
     const [open, setOpen] = useState(false);
@@ -24,7 +24,7 @@ export function SidebarLayout({ sidebar, children, right = false }) {
             setOpen(false);
     }, [href]);
     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 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, 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] }));
 }

package/ui/layout/SidebarLayout.module.css

@@ -24,7 +24,7 @@
 	overscroll-behavior: contain;
 	padding: var(--space-normal);
 	background: var(--sidebar-layout-bg, var(--color-surface));
-	border-right: 1px solid var(--color-border);
+	border-right: var(--sidebar-layout-border, 1px) solid var(--sidebar-layout-color-border, var(--color-border));
 }
 
 .content {

package/ui/layout/SidebarLayout.tsx

@@ -21,7 +21,7 @@ export interface SidebarLayoutProps extends OptionalChildProps {
  * - 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.
+ * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement {
 	const [open, setOpen] = useState(false);
@@ -40,7 +40,7 @@ export function SidebarLayout({ sidebar, children, right = false }: SidebarLayou
 	const contentEl = (
 		<div key="content" className={getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content)}>
 			<div className={SIDEBAR_LAYOUT_CSS.toggle}>
-				<Button fit cyan={!open} orange={open} plain title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
+				<Button fit title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
 					{open ? <XMarkIcon /> : <Bars3Icon />}
 				</Button>
 			</div>

package/ui/menu/Menu.module.css

@@ -11,7 +11,7 @@
 	font-family: var(--menu-font, var(--font-body));
 	font-size: var(--menu-size, var(--size-normal));
 	line-height: var(--menu-leading, var(--leading-normal));
-	color: var(--menu-color-text, var(--color-quiet));
+	color: var(--menu-color-text, var(--color-text));
 }
 
 .item {
@@ -41,15 +41,17 @@
 		outline-offset: 1px;
 	}
 	&[aria-current="page"] {
-		background: var(--menu-link-color-active-bg, var(--color-surface));
+		background: var(--menu-link-color-active-bg, var(--color-white));
 		color: var(--menu-link-color-active-text, var(--color-text));
 		font-weight: var(--menu-link-active-weight, var(--weight-strong));
 	}
 }
 
-/* "Proud" item — an ancestor of the active page; emphasised in colour and reveals its nested children. */
-.proud > .link {
+/* "Proud" item — an ancestor of the active page; emphasised with a strong weight, and reveals its nested children. */
+/* The active page is excluded so its own `[aria-current]` styling wins instead of the proud styling. */
+.proud > .link:not([aria-current="page"]) {
 	color: var(--menu-link-color-proud, var(--color-text));
+	font-weight: var(--menu-link-proud-weight, var(--weight-strong));
 }
 
 /* Submenu — Blockquote-style left border to signal hierarchy. */

package/ui/misc/StatusIcon.module.css

@@ -1,5 +1,5 @@
 .icon {
-	flex: 0 0 fit-content;
+	flex: none;
 	border-radius: 999px;
 	width: var(--status-icon-size, 1lh);
 	height: var(--status-icon-size, 1lh);