shelving 1.264.2 → 1.266.0

package/package.json

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

package/ui/form/Progress.d.ts

@@ -1,24 +1,27 @@
 import type { ReactElement } from "react";
+import { type ColorVariants } from "../style/Color.js";
+import { type StatusVariants } from "../style/Status.js";
 /**
  * Props for `Progress`, a continuous horizontal progress bar.
  *
  * @see https://shelving.cc/ui/ProgressProps
  */
-export interface ProgressProps {
+export interface ProgressProps extends ColorVariants, StatusVariants {
     value: number;
     min?: number;
     max?: number;
-    success?: boolean;
-    warning?: boolean;
-    danger?: boolean;
 }
 /**
  * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
- * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
+ * - Renders a native `<progress>` element, so `role="progressbar"` and the value/max semantics come from the browser.
+ * - `<progress>` has no `min` attribute (its implicit minimum is `0`), so the range is normalised to `value - min` / `max - min` before it's handed to the element.
+ * - The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` shows an empty or full bar rather than overspilling.
+ * - Paints from the tint ladder, so `color=` / `status=` recolour the fill (and track) by moving the tint anchor.
  *
  * @returns A progress bar element.
  * @kind component
  * @example <Progress value={3} max={4} />
+ * @example <Progress value={90} status="success" />
  * @see https://shelving.cc/ui/Progress
  */
-export declare function Progress({ value, min, max, success, warning, danger }: ProgressProps): ReactElement | null;
+export declare function Progress({ value, min, max, ...props }: ProgressProps): ReactElement;

package/ui/form/Progress.js

@@ -1,19 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatPercent } from "../../util/format.js";
-import { getPercent } from "../../util/number.js";
+import { getColorClass } from "../style/Color.js";
+import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 /**
  * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
- * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
+ * - Renders a native `<progress>` element, so `role="progressbar"` and the value/max semantics come from the browser.
+ * - `<progress>` has no `min` attribute (its implicit minimum is `0`), so the range is normalised to `value - min` / `max - min` before it's handed to the element.
+ * - The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` shows an empty or full bar rather than overspilling.
+ * - Paints from the tint ladder, so `color=` / `status=` recolour the fill (and track) by moving the tint anchor.
  *
  * @returns A progress bar element.
  * @kind component
  * @example <Progress value={3} max={4} />
+ * @example <Progress value={90} status="success" />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, min = 0, max = 100, success, warning, danger }) {
-    const percent = getPercent(value - min, max - min);
-    const fillStyle = { width: `${Number.isFinite(percent) ? percent : 0}%` };
-    return (_jsx("figure", { className: getClass(getModuleClass(styles, "track"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": formatPercent(value - min, max - min), children: _jsx("span", { className: getModuleClass(styles, "fill"), style: fillStyle }) }));
+export function Progress({ value, min = 0, max = 100, ...props }) {
+    // `<progress>` has no `min`, so shift the range to a `0`-based one. A non-positive span would make `<progress>` indeterminate, so fall back to an empty determinate bar.
+    const span = max - min;
+    return (_jsx("progress", { className: getClass(getModuleClass(styles, "progress"), //
+        getColorClass(props), getStatusClass(props)), value: span > 0 ? value - min : 0, max: span > 0 ? span : 1, "aria-valuetext": formatPercent(value - min, max - min) }));
 }

package/ui/form/Progress.md

@@ -0,0 +1,62 @@
+# Progress
+
+A continuous horizontal progress bar for the completion of a task. Rendered as a native `<progress>` element, so the `progressbar` role and value/max semantics come from the browser rather than hand-written ARIA.
+
+**Things to know:**
+
+- Use `Progress` for **task completion** — a value heading toward "done" (an upload, a multi-step form, a load). For a static reading within a range that can move up and down (disk usage, a score), a gauge is the right model, not a progress bar.
+- `value` is filled within the `min`–`max` range (defaults `0`–`100`), matching `getPercent()` and `formatPercent()`. `<progress>` has no `min` attribute, so the range is normalised to `value - min` / `max - min` before it reaches the element.
+- The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` renders an empty or full bar rather than overspilling. A non-positive range (`min === max`) falls back to an empty bar rather than the indeterminate state.
+- `aria-valuetext` carries the formatted percentage, so assistive tech announces e.g. "75%".
+- Paints from the [tint ladder](/ui/TINT_CLASS): `color=` and `status=` move the tint anchor for the bar, so the fill (and track) re-derive together — `status="success"` gives a green bar, `color="purple"` a purple one. Without either, the bar takes the ambient tint (`--tint-50`, gray by default).
+
+## Usage
+
+### Basic
+
+```tsx
+import { Progress } from "shelving/ui";
+
+// 75% full.
+<Progress value={3} max={4} />
+```
+
+### Custom range
+
+```tsx
+import { Progress } from "shelving/ui";
+
+// 50% full — value 15 within the 10–20 range.
+<Progress value={15} min={10} max={20} />
+```
+
+### Status and colour
+
+```tsx
+import { Progress } from "shelving/ui";
+
+<Progress value={90} status="success" />
+<Progress value={20} status="danger" />
+<Progress value={60} color="purple" />
+```
+
+## Styling
+
+`Progress` paints a track (the element / `::-webkit-progress-bar`) and a fill (`::-webkit-progress-value` / `::-moz-progress-bar`) from the [tint ladder](/ui/TINT_CLASS). Apply `color=` / `status=` (on the bar or a tinted ancestor scope) to recolour the fill and track together — reach for a per-property hook only for a single surgical change. Override these hooks at `:root` (or any ancestor scope) to retheme.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--progress-height` | Bar thickness | `0.375rem` (6px) |
+| `--progress-radius` | Corner radius | `999px` (pill) |
+| `--progress-background` | Track fill | `var(--tint-90)` |
+| `--progress-color` | Fill colour | `var(--tint-50)` |
+
+**Global tokens it reads** — move these to retheme broadly rather than overriding the hooks directly: the tint-ladder steps `--tint-50` (fill) and `--tint-90` (track), plus `--duration-fast` (the fill's grow transition). To recolour a bar, prefer `color=` / `status=` (or a tinted ancestor scope) over the per-component hooks.
+
+```css
+/* Theme: a chunkier, square-cornered bar. */
+:root {
+  --progress-height: 0.75rem;
+  --progress-radius: var(--radius-small);
+}
+```

package/ui/form/Progress.module.css

@@ -4,35 +4,32 @@
 @import "../style/Tint.module.css";
 
 @layer components {
-	/* Continuous progress bar — a single track that fills horizontally. */
-	.track {
-		position: relative;
+	/* Continuous progress bar — a native `<progress>` styled as a single track that fills horizontally. */
+	.progress {
+		/* Strip the native rendering so the track/fill can be painted from tokens. */
+		appearance: none;
+		display: block;
 		margin: 0;
+		border: none;
 		inline-size: 100%;
-		height: var(--progress-height, 0.375rem);
+		block-size: var(--progress-height, 0.375rem);
 		border-radius: var(--progress-radius, 999px);
-		background: var(--progress-background, var(--tint-90));
 		overflow: hidden;
+		/* Track colour — Firefox uses the element itself as the track; WebKit/Blink repaints it on the pseudo-element below. */
+		background: var(--progress-background, var(--tint-90));
 	}
 
-	.fill {
-		display: block;
-		block-size: 100%;
-		/* Width is set inline; clamp overspill to the track here. */
-		min-width: 0px;
-		max-width: 100%;
-		background: var(--progress-color, var(--color-blue));
-		transition: all var(--duration-fast);
+	/* Track (WebKit/Blink) — Firefox has no track pseudo-element. */
+	.progress::-webkit-progress-bar {
+		background: var(--progress-background, var(--tint-90));
 	}
 
-	/* Status variants applied at the container level. */
-	.success .fill {
-		background: var(--progress-success, var(--color-green));
-	}
-	.warning .fill {
-		background: var(--progress-warning, var(--color-orange));
+	/* Fill — WebKit/Blink and Firefox expose the fill under different pseudo-elements, so both repeat the same paint. Painted from the tint ladder, so `color=` / `status=` recolour it. */
+	.progress::-webkit-progress-value {
+		background: var(--progress-color, var(--tint-50));
+		transition: inline-size var(--duration-fast);
 	}
-	.danger .fill {
-		background: var(--progress-danger, var(--color-red));
+	.progress::-moz-progress-bar {
+		background: var(--progress-color, var(--tint-50));
 	}
 }

package/ui/form/Progress.tsx

@@ -1,6 +1,7 @@
-import type { CSSProperties, ReactElement } from "react";
+import type { ReactElement } from "react";
 import { formatPercent } from "../../util/format.js";
-import { getPercent } from "../../util/number.js";
+import { type ColorVariants, getColorClass } from "../style/Color.js";
+import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 
@@ -9,43 +10,39 @@ import styles from "./Progress.module.css";
  *
  * @see https://shelving.cc/ui/ProgressProps
  */
-export interface ProgressProps {
+export interface ProgressProps extends ColorVariants, StatusVariants {
 	value: number;
 	min?: number;
 	max?: number;
-	success?: boolean;
-	warning?: boolean;
-	danger?: boolean;
 }
 
 /**
  * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
- * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
+ * - Renders a native `<progress>` element, so `role="progressbar"` and the value/max semantics come from the browser.
+ * - `<progress>` has no `min` attribute (its implicit minimum is `0`), so the range is normalised to `value - min` / `max - min` before it's handed to the element.
+ * - The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` shows an empty or full bar rather than overspilling.
+ * - Paints from the tint ladder, so `color=` / `status=` recolour the fill (and track) by moving the tint anchor.
  *
  * @returns A progress bar element.
  * @kind component
  * @example <Progress value={3} max={4} />
+ * @example <Progress value={90} status="success" />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, min = 0, max = 100, success, warning, danger }: ProgressProps): ReactElement | null {
-	const percent = getPercent(value - min, max - min);
-	const fillStyle = { width: `${Number.isFinite(percent) ? percent : 0}%` } as CSSProperties;
+export function Progress({ value, min = 0, max = 100, ...props }: ProgressProps): ReactElement {
+	// `<progress>` has no `min`, so shift the range to a `0`-based one. A non-positive span would make `<progress>` indeterminate, so fall back to an empty determinate bar.
+	const span = max - min;
 
 	return (
-		<figure
+		<progress
 			className={getClass(
-				getModuleClass(styles, "track"),
-				success && getModuleClass(styles, "success"),
-				warning && getModuleClass(styles, "warning"),
-				danger && getModuleClass(styles, "danger"),
+				getModuleClass(styles, "progress"), //
+				getColorClass(props),
+				getStatusClass(props),
 			)}
-			role="progressbar"
-			aria-valuemin={min}
-			aria-valuemax={max}
-			aria-valuenow={value}
+			value={span > 0 ? value - min : 0}
+			max={span > 0 ? span : 1}
 			aria-valuetext={formatPercent(value - min, max - min)}
-		>
-			<span className={getModuleClass(styles, "fill")} style={fillStyle} />
-		</figure>
+		/>
 	);
 }

package/ui/layout/CenteredLayout.d.ts

@@ -1,10 +1,11 @@
 import type { ReactElement } from "react";
-import type { IndentVariants } from "../style/Indent.js";
-import type { PaddingVariants } from "../style/Padding.js";
-import type { WidthVariants } from "../style/Width.js";
+import { type IndentVariants } from "../style/Indent.js";
+import { type PaddingVariants } from "../style/Padding.js";
+import { type WidthVariants } from "../style/Width.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
- * Props for `<CenteredLayout>` — optional `children` and a `fullWidth` flag to drop the max-width.
+ * Props for `<CenteredLayout>` — optional `children` plus `width` (of the centred column) and `padding` / `indent`
+ * (block / inline padding of the scroll area) variants.
  *
  * @see https://shelving.cc/ui/CenteredLayoutProps
  */

package/ui/layout/CenteredLayout.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteCache } from "../router/RouteCache.js";
-import { getBlockClass } from "../style/Block.js";
+import { getIndentClass } from "../style/Indent.js";
+import { getPaddingClass } from "../style/Padding.js";
+import { getWidthClass } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import LAYOUT_CSS from "./CenteredLayout.module.css";
 const LAYOUT_MAIN_CLASS = getModuleClass(LAYOUT_CSS, "main");
@@ -15,6 +17,12 @@ const LAYOUT_INNER_CLASS = getModuleClass(LAYOUT_CSS, "inner");
 export function CenteredLayout({ children, ...props }) {
     // Wrap the scrolling `<main>` in `<RouteCache>` so recently-visited pages stay mounted but hidden,
     // keeping their scroll position and state intact across back/forward navigation.
-    return (_jsx(RouteCache, { children: _jsx("main", { className: LAYOUT_MAIN_CLASS, children: _jsx("div", { className: getClass(LAYOUT_INNER_CLASS, //
-                getBlockClass(props)), children: children }) }) }));
+    //
+    // The `padding` / `indent` variants set the scroll area's block / inline padding on `<main>`, while the `width`
+    // variant sizes the centred `.inner` column. The column stays free of variant/block classes so its `margin: auto`
+    // (which does the vertical + horizontal centring) is never zeroed by the `:first-child` / `:last-child` margin
+    // collapses that `.block` carries in `@layer overrides`.
+    return (_jsx(RouteCache, { children: _jsx("main", { className: getClass(LAYOUT_MAIN_CLASS, //
+            getPaddingClass(props), getIndentClass(props)), children: _jsx("div", { className: getClass(LAYOUT_INNER_CLASS, //
+                getWidthClass(props)), children: children }) }) }));
 }

package/ui/layout/CenteredLayout.md

@@ -1,10 +1,11 @@
 # CenteredLayout
 
-A full-viewport layout that centres its content horizontally inside a narrow max-width column. Good for login, registration, error, and other focused single-purpose pages where the content is the only thing on screen.
+A full-viewport layout that centres its content — vertically and horizontally — inside a narrow max-width column. Good for login, registration, error, and other focused single-purpose pages where the content is the only thing on screen. When the content is taller than the viewport it scrolls vertically, pinned to the top so nothing is clipped.
 
 **Things to know:**
 
-- Pass `fullWidth` to drop the max-width constraint while keeping the centred positioning — use it when the content itself needs to fill the width.
+- Pass the `width` variant to resize the centred column (e.g. `width="normal"`, `width="wide"`, or `width="full"` to fill the available width).
+- Pass the `padding` (block / top + bottom) and `indent` (inline / left + right) variants to change the space around the content.
 - Like the other full-viewport layouts it owns scroll, padding, and safe-area insets so individual pages don't have to.
 
 ## Usage
@@ -14,8 +15,8 @@ import { CenteredLayout, Section } from "shelving/ui";
 
 function LoginPage() {
   return (
-    <CenteredLayout>
-      <Section width="narrow">
+    <CenteredLayout width="narrow">
+      <Section>
         <LoginForm/>
       </Section>
     </CenteredLayout>
@@ -29,11 +30,12 @@ Layouts compose naturally as `<Router>` route values — wrap a group of routes
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--centered-layout-width` | Max width of the centred column | `var(--width-narrow)` |
-| `--centered-layout-space` | Top/bottom padding of the scroll area | `var(--space-normal)` |
-| `--centered-layout-padding` | Left/right padding of the scroll area | `var(--space-normal)` |
-| `--centered-layout-background` | Page background while the layout is mounted | Unset — the `body` default from `Typography.module.css` shows |
+| `--centered-layout-width` | Width of the centred column (capped at 100%) | `var(--width-narrow)` |
+| `--centered-layout-padding` | Block (top/bottom) padding of the scroll area | `var(--space-normal)` |
+| `--centered-layout-indent` | Inline (left/right) padding of the scroll area | `var(--space-normal)` |
+| `--centered-layout-background` | Page background while the layout is mounted | `var(--tint-100)` (white) |
+| `--centered-layout-color` | Text colour for the layout | `var(--tint-00)` (black) |
 
-The max-width cap is dropped entirely when `fullWidth` is set. The outer element owns its scroll, padding, and safe-area behaviour directly — it also reads the `--layout-inset-top` / `-bottom` / `-left` / `-right` hooks owned by `Layout.ts` (`useSafeKeyboardArea()` writes `--layout-inset-bottom`).
+The column width and the scroll-area padding can also be set per-instance via the `width`, `padding`, and `indent` variant props. The outer element owns its scroll, padding, and safe-area behaviour directly — safe-area insets are applied as transparent borders so they stack with (rather than replace) the padding.
 
-**Global tokens it reads** — `--width-narrow` and `--space-normal`.
+**Global tokens it reads** — `--width-narrow`, `--space-normal`, `--tint-100`, and `--tint-00`.

package/ui/layout/CenteredLayout.module.css

@@ -1,5 +1,6 @@
 @import "../style/layers.css";
 @import "../style/Space.module.css";
+@import "../style/Tint.module.css";
 @import "../style/Width.module.css";
 
 @layer components {
@@ -34,8 +35,9 @@
 		position: fixed;
 		inset: 0;
 
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the body default from Typography.module.css shows. */
-		background: var(--centered-layout-background);
+		/* Page background + text colour; fall back to the themed page defaults (--tint-100 / --tint-00) when the hooks are unset. */
+		background: var(--centered-layout-background, var(--tint-100));
+		color: var(--centered-layout-color, var(--tint-00));
 	}
 
 	.main {

package/ui/layout/CenteredLayout.tsx

@@ -1,9 +1,8 @@
 import type { ReactElement } from "react";
 import { RouteCache } from "../router/RouteCache.js";
-import { getBlockClass } from "../style/Block.js";
-import type { IndentVariants } from "../style/Indent.js";
-import type { PaddingVariants } from "../style/Padding.js";
-import type { WidthVariants } from "../style/Width.js";
+import { getIndentClass, type IndentVariants } from "../style/Indent.js";
+import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
+import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import LAYOUT_CSS from "./CenteredLayout.module.css";
@@ -12,7 +11,8 @@ const LAYOUT_MAIN_CLASS = getModuleClass(LAYOUT_CSS, "main");
 const LAYOUT_INNER_CLASS = getModuleClass(LAYOUT_CSS, "inner");
 
 /**
- * Props for `<CenteredLayout>` — optional `children` and a `fullWidth` flag to drop the max-width.
+ * Props for `<CenteredLayout>` — optional `children` plus `width` (of the centred column) and `padding` / `indent`
+ * (block / inline padding of the scroll area) variants.
  *
  * @see https://shelving.cc/ui/CenteredLayoutProps
  */
@@ -28,13 +28,24 @@ export interface CenteredLayoutProps extends WidthVariants, PaddingVariants, Ind
 export function CenteredLayout({ children, ...props }: CenteredLayoutProps): ReactElement {
 	// Wrap the scrolling `<main>` in `<RouteCache>` so recently-visited pages stay mounted but hidden,
 	// keeping their scroll position and state intact across back/forward navigation.
+	//
+	// The `padding` / `indent` variants set the scroll area's block / inline padding on `<main>`, while the `width`
+	// variant sizes the centred `.inner` column. The column stays free of variant/block classes so its `margin: auto`
+	// (which does the vertical + horizontal centring) is never zeroed by the `:first-child` / `:last-child` margin
+	// collapses that `.block` carries in `@layer overrides`.
 	return (
 		<RouteCache>
-			<main className={LAYOUT_MAIN_CLASS}>
+			<main
+				className={getClass(
+					LAYOUT_MAIN_CLASS, //
+					getPaddingClass(props),
+					getIndentClass(props),
+				)}
+			>
 				<div
 					className={getClass(
 						LAYOUT_INNER_CLASS, //
-						getBlockClass(props),
+						getWidthClass(props),
 					)}
 				>
 					{children}

package/ui/layout/SidebarLayout.md

@@ -48,11 +48,12 @@ useEffect(useSafeKeyboardArea, []);
 | Variable | Styles | Default |
 |---|---|---|
 | `--sidebar-layout-width` | Width of the side column (and drawer) | `17.5rem` |
-| `--sidebar-layout-background` | Page background while the layout is mounted | Unset — the `body` default from `Typography.module.css` shows |
-| `--sidebar-layout-sidebar-background` | Sidebar column fill | Unset — the page background shows |
-| `--sidebar-layout-content-background` | Main content column fill | Unset — the page background shows |
+| `--sidebar-layout-background` | Page background while the layout is mounted (also fills the content column) | `var(--tint-100)` (white) |
+| `--sidebar-layout-color` | Text colour for the layout (set on `body`, inherited by the content column) | `var(--tint-00)` (black) |
+| `--sidebar-layout-sidebar-background` | Sidebar column fill | `var(--tint-90)` (one shade darker than the page) |
+| `--sidebar-layout-sidebar-color` | Sidebar column text colour | `var(--tint-00)` (black) |
 | `--sidebar-layout-border` | Divider between sidebar and content | `var(--stroke-normal) solid var(--tint-80)` |
 
 The sidebar and content columns own their own scroll behaviour directly (this layout no longer composes a shared `.layout` class). `useSafeKeyboardArea()` still writes `--layout-inset-bottom` for layouts that pad to the safe area.
 
-**Global tokens it reads** — `--tint-80`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.
+**Global tokens it reads** — `--tint-00` / `--tint-80` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.

package/ui/layout/SidebarLayout.module.css

@@ -50,8 +50,10 @@
 		inset: 0;
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the body default from Typography.module.css shows. */
-		background: var(--sidebar-layout-background);
+		/* Page background + text colour; fall back to the themed page defaults (--tint-100 / --tint-00) when the hooks are unset.
+		 * `color` inherits, so this one rule sets the text colour for the whole layout (including `.content`). */
+		background: var(--sidebar-layout-background, var(--tint-100));
+		color: var(--sidebar-layout-color, var(--tint-00));
 	}
 
 	.main {
@@ -75,8 +77,10 @@
 		padding: var(--space-normal);
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
-		background: var(--sidebar-layout-sidebar-background);
+		/* Sidebar fill + text colour; fall back to the themed defaults (--tint-90 / --tint-00) when the hooks are unset.
+		 * The sidebar defaults one shade darker than the page (--tint-90 vs --tint-100) so it reads as a distinct column. */
+		background: var(--sidebar-layout-sidebar-background, var(--tint-90));
+		color: var(--sidebar-layout-sidebar-color, var(--tint-00));
 	}
 
 	.content {
@@ -93,8 +97,8 @@
 		scroll-behavior: smooth;
 
 		/* Style */
-		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
-		background: var(--sidebar-layout-content-background);
+		/* Shares the page background hook; text colour is inherited from the `body` rule above (no `color` here on purpose). */
+		background: var(--sidebar-layout-background, var(--tint-100));
 	}
 
 	/* Wrapper for the menu toggle button — hidden on wide viewports, shown on narrow ones (see media query). */