shelving 1.264.1 → 1.265.0

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/inline/Deleted.md

@@ -5,7 +5,7 @@ Deleted text — renders a `<del>` element to mark content that has been removed
 **Things to know:**
 
 - Use `Deleted` for content genuinely removed from a document (edits, diffs, retired prices), and `<Inserted>` for content added — they pair up.
-- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="orange"`, …) recolours the strike-through. The base tint defaults to `--color-red`.
+- It colours itself directly from `--color-red` rather than the tint ladder, so a deletion stays a consistent red even inside a tinted region; change it with `--deleted-color`.
 - Inside `<Prose>` a raw `<del>` picks up the same styling, so Markdown-rendered deletions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## Styling
 
-`Deleted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-red`. Override `--deleted-tint` to recolour from the base, or set each property directly.
+`Deleted` colours its text directly from `--color-red` (not the tint ladder), so deletions stay a consistent red regardless of the surrounding tint. Override `--deleted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--deleted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-red)` |
-| `--deleted-color` | Text colour | `var(--tint-50)` |
+| `--deleted-color` | Text colour | `var(--color-red)` |
 | `--deleted-decoration` | Text decoration | `line-through var(--stroke-normal)` |
 | `--deleted-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-red`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.
+**Global tokens it reads:** `--color-red`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Deleted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.deleted,
 	.prose del {
-		--tint-50: var(--deleted-tint, var(--color-red));
-
 		/* Style */
-		color: var(--deleted-color, var(--tint-50));
+		color: var(--deleted-color, var(--color-red));
 		text-decoration: var(--deleted-decoration, line-through var(--stroke-normal));
 
 		/* Text */

package/ui/inline/Inserted.md

@@ -5,7 +5,7 @@ Inserted text — renders an `<ins>` element to mark content that has been added
 **Things to know:**
 
 - Use `Inserted` for content genuinely added to a document (edits, diffs, new prices), and `<Deleted>` for content removed — they pair up.
-- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="blue"`, …) recolours the underline. The base tint defaults to `--color-green`.
+- It colours itself directly from `--color-green` rather than the tint ladder, so an insertion stays a consistent green even inside a tinted region; change it with `--inserted-color`.
 - Inside `<Prose>` a raw `<ins>` picks up the same styling, so Markdown-rendered insertions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## Styling
 
-`Inserted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-green`. Override `--inserted-tint` to recolour from the base, or set each property directly.
+`Inserted` colours its text directly from `--color-green` (not the tint ladder), so insertions stay a consistent green regardless of the surrounding tint. Override `--inserted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--inserted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-green)` |
-| `--inserted-color` | Text colour | `var(--tint-50)` |
+| `--inserted-color` | Text colour | `var(--color-green)` |
 | `--inserted-decoration` | Text decoration | `underline var(--stroke-normal)` |
 | `--inserted-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-green`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.
+**Global tokens it reads:** `--color-green`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Inserted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.inserted,
 	.prose ins {
-		--tint-50: var(--inserted-tint, var(--color-green));
-
 		/* Style */
-		color: var(--inserted-color, var(--tint-50));
+		color: var(--inserted-color, var(--color-green));
 		text-decoration: var(--inserted-decoration, underline var(--stroke-normal));
 
 		/* Text */

package/ui/inline/Link.md

@@ -31,12 +31,11 @@ import { Link } from "shelving/ui";
 
 ## Styling
 
-`Link` drives its colour through the tint ladder, so the `color` variant (`color="purple"`, `color="red"`, …) recolours the link. By default the `50` tint resolves to the global `--color-link` token.
+`Link` colours itself from the global `--color-link` token by default. Inside a tinted scope (`color=` / `status=` on an ancestor) `--color-link` resolves to `inherit`, so links adopt the surrounding tinted text colour. Override `--link-color` to set it directly.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--link-tint` | Base tint (`--tint-50`) the link colour derives from | `var(--color-link)` |
-| `--link-color` | Text colour | `var(--tint-50)` |
+| `--link-color` | Text colour | `var(--color-link)` |
 | `--link-weight` | Font weight | `var(--weight-strong)` |
 
 **Global tokens it reads:** `--color-link`, `--weight-strong`, and `--stroke-normal` (the underline thickness).

package/ui/inline/Link.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.link,
 	.prose a {
-		--tint-50: var(--link-tint, var(--color-link));
-
 		/* Style */
-		color: var(--link-color, var(--tint-50));
+		color: var(--link-color, var(--color-link));
 		text-decoration: none;
 		cursor: inherit;
 

package/ui/inline/Mark.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import MARK_CSS from "./Mark.module.css";
@@ -12,5 +11,5 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  */
 export function Mark({ children, ...props }) {
     return (_jsx("mark", { className: getClass(MARK_CLASS, //
-        TINT_CLASS, getTypographyClass(props)), children: children }));
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Mark.md

@@ -1,6 +1,6 @@
 # Mark
 
-Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a yellow background by default.
+Highlighted text — renders a `<mark>` element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a translucent yellow background by default.
 
 **Things to know:**
 
@@ -20,15 +20,15 @@ import { Mark } from "shelving/ui";
 
 ## Styling
 
-`Mark` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the background and the `00` tint the text. By default the base tint resolves to `--color-yellow`; override `--mark-tint` to recolour the whole pill, or `--mark-background` / `--mark-color` to set the two faces independently.
+`Mark` highlights with a translucent wash of `--color-yellow` — `color-mix(…, transparent)`, so the text underneath stays legible — with the text painted from `--tint-00`. Override `--mark-tint` to change the highlight hue, `--mark-background` to replace the fill outright, or `--mark-color` for the text.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--mark-tint` | Base tint (`--tint-50`) the pill derives from | `var(--color-yellow)` |
-| `--mark-background` | Background fill | `var(--tint-50)` |
+| `--mark-tint` | Highlight hue, mixed 50% with `transparent` for the background | `var(--color-yellow)` |
+| `--mark-background` | Background fill | `color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent)` |
 | `--mark-color` | Text colour | `var(--tint-00)` |
 | `--mark-padding` | Inline padding | `var(--space-xxsmall)` |
 | `--mark-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--mark-weight` | Font weight | `var(--weight-strong)` |
 
-**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder steps `--tint-50` / `--tint-00`.
+**Global tokens it reads:** `--color-yellow`, `--space-xxsmall`, `--radius-xxsmall`, `--weight-strong`, and the tint-ladder step `--tint-00`.

package/ui/inline/Mark.module.css

@@ -1,4 +1,5 @@
 @import "../style/layers.css";
+@import "../style/Color.module.css";
 @import "../style/Radius.module.css";
 @import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
@@ -6,8 +7,6 @@
 @layer components {
 	.mark,
 	.prose mark {
-		--tint-50: var(--mark-tint, var(--color-yellow));
-
 		/* Box */
 		display: inline-block;
 		padding-inline: var(--mark-padding, var(--space-xxsmall));
@@ -15,7 +14,7 @@
 		vertical-align: baseline;
 
 		/* Style */
-		background: var(--mark-background, var(--tint-80));
+		background-color: var(--mark-background, color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent));
 		color: var(--mark-color, var(--tint-00));
 
 		/* Text */

package/ui/inline/Mark.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { TINT_CLASS } from "../style/Tint.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
@@ -25,7 +24,6 @@ export function Mark({ children, ...props }: MarkProps): ReactElement {
 		<mark
 			className={getClass(
 				MARK_CLASS, //
-				TINT_CLASS,
 				getTypographyClass(props),
 			)}
 		>

package/ui/input/SchemaInput.test.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { PASSTHROUGH, StringSchema } from "../../index.js";
-import { StringSchemaInput } from "../index.js";
+import { StringSchema } from "shelving/schema";
+import { StringSchemaInput } from "shelving/ui";
+import { PASSTHROUGH } from "shelving/util/function";
 
 describe("StringSchemaInput", () => {
 	test("formats the initial value to its clean sanitized value", () => {

package/ui/layout/CenteredLayout.d.ts

@@ -1,16 +1,15 @@
 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 { 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
  */
-export interface CenteredLayoutProps extends OptionalChildProps {
-    /**
-     * Drop the narrow max-width and let content fill the width.
-     * @default false
-     */
-    fullWidth?: boolean;
+export interface CenteredLayoutProps extends WidthVariants, PaddingVariants, IndentVariants, OptionalChildProps {
 }
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
@@ -19,4 +18,4 @@ export interface CenteredLayoutProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export declare function CenteredLayout({ children, fullWidth }: CenteredLayoutProps): ReactElement;
+export declare function CenteredLayout({ children, ...props }: CenteredLayoutProps): ReactElement;

package/ui/layout/CenteredLayout.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteCache } from "../router/RouteCache.js";
-import { getModuleClass } from "../util/css.js";
-import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
+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");
+const LAYOUT_INNER_CLASS = getModuleClass(LAYOUT_CSS, "inner");
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
@@ -9,8 +14,15 @@ import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export function CenteredLayout({ children, fullWidth = false }) {
+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: getModuleClass(CENTERED_LAYOUT_CSS, "main"), children: _jsx("div", { className: getModuleClass(CENTERED_LAYOUT_CSS, "mainInner"), style: fullWidth ? { maxWidth: "none" } : undefined, 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>
@@ -27,6 +28,13 @@ Layouts compose naturally as `<Router>` route values — wrap a group of routes
 
 ## Styling
 
-This layout exposes no own `--centered-layout-*` hooks. The inner column is capped at the global `--width-narrow` token (dropped when `fullWidth` is set), and the outer element owns its scroll, padding, and safe-area behaviour directly — reading the layout hooks `--layout-space`, `--layout-padding`, `--layout-body-bg`, and `--layout-inset-top` / `-bottom` / `-left` / `-right`.
+| Variable | Styles | Default |
+|---|---|---|
+| `--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 | Unset — the `body` default from `Typography.module.css` shows |
 
-**Global tokens it reads** — `--width-narrow`.
+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`.

package/ui/layout/CenteredLayout.module.css

@@ -1,24 +1,7 @@
 @import "../style/layers.css";
 @import "../style/Space.module.css";
-@import "../style/Tint.module.css";
 @import "../style/Width.module.css";
 
-/* Low-priority padding defaults live in `@layer defaults` so consumers can override them */
-/* with normal-specificity selectors without needing `:where()` tricks. */
-@layer defaults {
-	.main {
-		/* Top/bottom use `layout-space` and left/right use `layout-padding`, plus safe-area additions. */
-		padding: var(--layout-space, var(--space-normal)) var(--layout-padding, var(--space-normal));
-		padding-top: calc(var(--layout-space, var(--space-normal)) + max(var(--layout-inset-top, 0px), env(safe-area-inset-top, 0px)));
-		padding-bottom: calc(var(--layout-space, var(--space-normal)) + max(var(--layout-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)));
-		padding-left: calc(var(--layout-padding, var(--space-normal)) + max(var(--layout-inset-left, 0px), env(safe-area-inset-left, 0px)));
-		padding-right: calc(var(--layout-padding, var(--space-normal)) + max(var(--layout-inset-right, 0px), env(safe-area-inset-right, 0px)));
-
-		/* Grow to fill the body. */
-		flex: 1;
-	}
-}
-
 @layer components {
 	/*
 	 * Lock the document and let `.main` own the page scroll.
@@ -51,11 +34,22 @@
 		position: fixed;
 		inset: 0;
 
-		/* Layout-specific bg hook. */
-		background: var(--layout-body-bg, var(--tint-100));
+		/* 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);
 	}
 
 	.main {
+		/* Box */
+		border-top: env(safe-area-inset-top, 0px) solid transparent;
+		border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
+		border-left: env(safe-area-inset-left, 0px) solid transparent;
+		border-right: env(safe-area-inset-right, 0px) solid transparent;
+		padding-block: var(--centered-layout-padding, var(--space-normal));
+		padding-inline: var(--centered-layout-indent, var(--space-normal));
+
+		/* Grow to fill the body. */
+		flex: 1;
+
 		/* Content — a flex column whose inner column centres itself with `margin: auto` (both axes). */
 		display: flex;
 		flex-direction: column;
@@ -70,9 +64,9 @@
 		scroll-behavior: smooth;
 	}
 
-	.mainInner {
-		width: 100%;
-		max-width: var(--width-narrow);
+	.inner {
+		width: var(--centered-layout-width, var(--width-narrow));
+		max-width: 100%;
 		margin: auto;
 	}
 }

package/ui/layout/CenteredLayout.tsx

@@ -1,21 +1,22 @@
 import type { ReactElement } from "react";
 import { RouteCache } from "../router/RouteCache.js";
-import { getModuleClass } from "../util/css.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 CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
+import LAYOUT_CSS from "./CenteredLayout.module.css";
+
+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
  */
-export interface CenteredLayoutProps extends OptionalChildProps {
-	/**
-	 * Drop the narrow max-width and let content fill the width.
-	 * @default false
-	 */
-	fullWidth?: boolean;
-}
+export interface CenteredLayoutProps extends WidthVariants, PaddingVariants, IndentVariants, OptionalChildProps {}
 
 /**
  * Layout that centres its content with no header/footer and a narrow max-width.
@@ -24,13 +25,29 @@ export interface CenteredLayoutProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/CenteredLayout
  */
-export function CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement {
+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={getModuleClass(CENTERED_LAYOUT_CSS, "main")}>
-				<div className={getModuleClass(CENTERED_LAYOUT_CSS, "mainInner")} style={fullWidth ? { maxWidth: "none" } : undefined}>
+			<main
+				className={getClass(
+					LAYOUT_MAIN_CLASS, //
+					getPaddingClass(props),
+					getIndentClass(props),
+				)}
+			>
+				<div
+					className={getClass(
+						LAYOUT_INNER_CLASS, //
+						getWidthClass(props),
+					)}
+				>
 					{children}
 				</div>
 			</main>

package/ui/layout/SidebarLayout.js

@@ -5,7 +5,13 @@ import { Button } from "../button/Button.js";
 import { requireMetaURL } from "../misc/MetaContext.js";
 import { RouteCache } from "../router/RouteCache.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
+import LAYOUT_CSS from "./SidebarLayout.module.css";
+const LAYOUT_SIDEBAR_CLASS = getModuleClass(LAYOUT_CSS, "sidebar");
+const LAYOUT_CONTENT_CLASS = getModuleClass(LAYOUT_CSS, "content");
+const LAYOUT_TOGGLE_CLASS = getModuleClass(LAYOUT_CSS, "toggle");
+const LAYOUT_OVERLAY_CLASS = getModuleClass(LAYOUT_CSS, "overlay");
+const LAYOUT_MAIN_CLASS = getModuleClass(LAYOUT_CSS, "main");
+const LAYOUT_OPEN_CLASS = getModuleClass(LAYOUT_CSS, "open");
 /**
  * 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.
@@ -25,12 +31,13 @@ export function SidebarLayout({ sidebar, children, right = false }) {
         if (path)
             setOpen(false);
     }, [path]);
-    const sidebarEl = (_jsx("nav", { className: getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "sidebar"), open && getModuleClass(SIDEBAR_LAYOUT_CSS, "open")), children: sidebar }, "sidebar"));
+    const sidebarEl = (_jsx("nav", { className: getClass(LAYOUT_SIDEBAR_CLASS, //
+        open && LAYOUT_OPEN_CLASS), children: sidebar }, "sidebar"));
     // Wrap the scrolling content column in `<RouteCache>` so recently-visited pages stay mounted but hidden
     // — keeping the scroll position of this `.content` container (and all page state) intact across
     // back/forward navigation. The sidebar and drawer state stay outside the cache, so they are neither
     // duplicated nor remounted as the URL changes.
-    const contentEl = (_jsx(RouteCache, { children: _jsxs("div", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "content"), children: [_jsx("div", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "toggle"), children: _jsx(Button, { title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "contentInner"), children: children })] }) }, "content"));
-    const overlayEl = open && (_jsx("button", { type: "button", className: getModuleClass(SIDEBAR_LAYOUT_CSS, "overlay"), "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
-    return (_jsx("main", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "main"), children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] }));
+    const contentEl = (_jsx(RouteCache, { children: _jsxs("div", { className: LAYOUT_CONTENT_CLASS, children: [_jsx("div", { className: LAYOUT_TOGGLE_CLASS, children: _jsx(Button, { title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), children] }) }, "content"));
+    const overlayEl = open && (_jsx("button", { type: "button", className: LAYOUT_OVERLAY_CLASS, "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
+    return _jsx("main", { className: LAYOUT_MAIN_CLASS, children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] });
 }

package/ui/layout/SidebarLayout.md

@@ -48,11 +48,11 @@ 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 | `var(--tint-100)` |
-| `--sidebar-layout-sidebar-background` | Sidebar column fill | `var(--tint-90)` |
-| `--sidebar-layout-content-background` | Main content column fill | `var(--tint-100)` |
+| `--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-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** — the tint ladder `--tint-80` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.
+**Global tokens it reads** — `--tint-80`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.

package/ui/layout/SidebarLayout.module.css

@@ -50,7 +50,8 @@
 		inset: 0;
 
 		/* Style */
-		background: var(--sidebar-layout-background, var(--tint-100));
+		/* 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);
 	}
 
 	.main {
@@ -74,7 +75,8 @@
 		padding: var(--space-normal);
 
 		/* Style */
-		background: var(--sidebar-layout-sidebar-background, var(--tint-90));
+		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
+		background: var(--sidebar-layout-sidebar-background);
 	}
 
 	.content {
@@ -91,13 +93,8 @@
 		scroll-behavior: smooth;
 
 		/* Style */
-		background: var(--sidebar-layout-content-background, var(--tint-100));
-	}
-
-	.contentInner {
-		width: 100%;
-		padding: 0;
-		margin: 0 auto;
+		/* Deliberately no fallback: when the hook is unset this declaration fails and the page background shows. */
+		background: var(--sidebar-layout-content-background);
 	}
 
 	/* Wrapper for the menu toggle button — hidden on wide viewports, shown on narrow ones (see media query). */