shelving 1.264.1 → 1.264.2

package/ui/layout/CenteredLayout.d.ts

@@ -1,16 +1,14 @@
 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.
  *
  * @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 +17,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,10 @@
 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 { getBlockClass } from "../style/Block.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 +12,9 @@ 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 }) }) }));
+    return (_jsx(RouteCache, { children: _jsx("main", { className: LAYOUT_MAIN_CLASS, children: _jsx("div", { className: getClass(LAYOUT_INNER_CLASS, //
+                getBlockClass(props)), children: children }) }) }));
 }

package/ui/layout/CenteredLayout.md

@@ -27,6 +27,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` | 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 |
 
-**Global tokens it reads** — `--width-narrow`.
+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`).
+
+**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 { 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 { 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.
  *
  * @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,18 @@ 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.
 	return (
 		<RouteCache>
-			<main className={getModuleClass(CENTERED_LAYOUT_CSS, "main")}>
-				<div className={getModuleClass(CENTERED_LAYOUT_CSS, "mainInner")} style={fullWidth ? { maxWidth: "none" } : undefined}>
+			<main className={LAYOUT_MAIN_CLASS}>
+				<div
+					className={getClass(
+						LAYOUT_INNER_CLASS, //
+						getBlockClass(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). */

package/ui/layout/SidebarLayout.tsx

@@ -5,7 +5,14 @@ import { requireMetaURL } from "../misc/MetaContext.js";
 import { RouteCache } from "../router/RouteCache.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.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");
 
 /**
  * Props for `<SidebarLayout>` — the `sidebar` column content, main `children`, and a `right` placement flag.
@@ -42,39 +49,35 @@ export function SidebarLayout({ sidebar, children, right = false }: SidebarLayou
 	const sidebarEl = (
 		<nav
 			key="sidebar"
-			className={getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "sidebar"), open && getModuleClass(SIDEBAR_LAYOUT_CSS, "open"))}
+			className={getClass(
+				LAYOUT_SIDEBAR_CLASS, //
+				open && LAYOUT_OPEN_CLASS,
+			)}
 		>
 			{sidebar}
 		</nav>
 	);
+
 	// 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 = (
 		<RouteCache key="content">
-			<div className={getModuleClass(SIDEBAR_LAYOUT_CSS, "content")}>
-				<div className={getModuleClass(SIDEBAR_LAYOUT_CSS, "toggle")}>
+			<div className={LAYOUT_CONTENT_CLASS}>
+				<div className={LAYOUT_TOGGLE_CLASS}>
 					<Button title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
 						{open ? <XMarkIcon /> : <Bars3Icon />}
 					</Button>
 				</div>
-				<div className={getModuleClass(SIDEBAR_LAYOUT_CSS, "contentInner")}>{children}</div>
+				{children}
 			</div>
 		</RouteCache>
 	);
+
 	const overlayEl = open && (
-		<button
-			key="overlay"
-			type="button"
-			className={getModuleClass(SIDEBAR_LAYOUT_CSS, "overlay")}
-			aria-label="Close menu"
-			onClick={() => setOpen(false)}
-		/>
-	);
-	return (
-		<main className={getModuleClass(SIDEBAR_LAYOUT_CSS, "main")}>
-			{right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl]}
-		</main>
+		<button key="overlay" type="button" className={LAYOUT_OVERLAY_CLASS} aria-label="Close menu" onClick={() => setOpen(false)} />
 	);
+
+	return <main className={LAYOUT_MAIN_CLASS}>{right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl]}</main>;
 }

package/ui/misc/MetaContext.test.tsx

@@ -1,9 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import { RequiredError } from "../../error/RequiredError.js";
-import { createMeta } from "../util/meta.js";
-import { MetaContext, requireMetaURL } from "./MetaContext.js";
+import { RequiredError } from "shelving/error";
+import { createMeta, MetaContext, requireMetaURL } from "shelving/ui";
 
 /** Render `requireMetaURL().path` from inside a component so its `use(MetaContext)` call is valid. */
 function Probe(): ReactNode {

package/ui/misc/Tag.md

@@ -20,11 +20,10 @@ import { Tag } from "shelving/ui";
 
 ## Styling
 
-`Tag` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Move `--tag-tint` to recolour the whole tag at once.
+`Tag` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` (on the tag or an ancestor scope) to recolour the whole tag at once.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--tag-tint` | Tint anchor for the tag scope | `inherit` (flows from `color=` / `status=` / parent) |
 | `--tag-background` | Surface fill | `var(--tint-50)` |
 | `--tag-hover-background` | Surface fill when an interactive tag is hovered | `var(--tint-55)` |
 | `--tag-color` | Text colour | `var(--tint-100)` |

package/ui/misc/Tag.module.css

@@ -8,9 +8,6 @@
 
 @layer components {
 	.tag {
-		/* Theme */
-		--tint-50: var(--tag-tint, inherit);
-
 		/* Box */
 		display: inline-block;
 		vertical-align: text-bottom;

package/ui/notice/Message.module.css

@@ -5,9 +5,6 @@
 
 @layer components {
 	.message {
-		/* Theme */
-		--tint-50: var(--notice-tint, inherit);
-
 		/* Box */
 		margin-block: var(--message-space, var(--space-paragraph));
 

package/ui/notice/Notice.md

@@ -28,11 +28,10 @@ import { LOADING_NOTICE } from "shelving/ui";
 
 ## Styling
 
-`Notice` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Move `--notice-tint` to recolour everything at once.
+`Notice` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Its `status` (or a `color=` / `status=` on an ancestor scope) sets the tint that the surface, border, and text all derive from; reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--notice-tint` | Tint anchor for the notice scope | `inherit` (flows from `color=` / `status=` / parent) |
 | `--notice-background` | Surface fill | `var(--tint-90)` |
 | `--notice-color` | Text colour | `var(--tint-50)` |
 | `--notice-border` | Border shorthand | `var(--notice-stroke) solid var(--tint-80)` |

package/ui/notice/Notice.module.css

@@ -6,9 +6,6 @@
 
 @layer components {
 	.notice {
-		/* Theme */
-		--tint-50: var(--notice-tint, inherit);
-
 		/* Box */
 		margin-block: var(--notice-space, var(--space-paragraph));
 		border-radius: var(--notice-radius, var(--radius-xsmall));

package/ui/router/Router.test.tsx

@@ -1,9 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { MetaContext } from "../misc/MetaContext.js";
-import { createMeta } from "../util/meta.js";
-import { Router } from "./Router.js";
-import type { RouteProps } from "./Routes.js";
+import { createMeta, MetaContext, type RouteProps, Router } from "shelving/ui";
 
 const ROUTES = {
 	"/": () => <main>Home</main>,

package/ui/style/TINT_CLASS.md

@@ -42,7 +42,7 @@ Pairings follow contrast: long text reads at `00`-on-`90` or `00`-on-`100`; shor
 A theme is a CSS file of custom-property overrides at `:root`, imported after the base styles. Work from broadest to narrowest:
 
 1. **Move a palette colour.** Overriding `--color-gray` moves the default anchor, retinting every neutral ladder in the app — the broadest possible change. Overriding `--color-red`, `--color-primary`, etc. re-aims every variant and status that maps to it.
-2. **Retint one component family.** Set its tint hook: `--card-tint: var(--color-purple)` makes all cards (and their nested content) purple-tinted, with text, border, surface, and hover shades all derived for free.
+2. **Retint a region.** Apply `color=` / `status=` to a container — `<Card color="purple">`, or a `<Panel color="purple">` wrapping a whole section — and everything inside re-tints, with text, border, surface, and hover shades all derived for free. Components don't expose a per-component `--x-tint` hook; the variant moves the anchor, not a bespoke variable.
 3. **Override one property.** Per-property hooks are the scalpel: `--button-radius: 999px`, `--card-border: none`, `--tag-case: none`.
 
 **Don't override individual ladder steps (`--tint-90`, etc.) at `:root`.** The ladder is *recomputed* from the anchor inside every `TINT_CLASS` scope — which includes every component that accepts `color=` or `status=` — so a step override at `:root` only reaches untinted regions and produces inconsistent surfaces. Move the anchor (option 1 or 2) instead, and the steps follow.

package/ui/style/Width.d.ts

@@ -3,10 +3,11 @@
  * - `narrow` / `normal` / `wide` — fixed widths from the `--width-*` tokens (capped at 100%).
  * - `full` — take the full available width.
  * - `fit` — shrink to fit the content's intrinsic width (`fit-content`).
+ * - `1x`–`32x` — fixed multiples of `--space-normal` (1x–8x at 1x intervals, then 10x/12x, then 16x–32x at 4x intervals).
  *
  * @see https://shelving.cc/ui/WidthVariant
  */
-export type WidthVariant = "xxnarrow" | "xnarrow" | "narrow" | "normal" | "wide" | "xwide" | "xxwide" | "full" | "fit";
+export type WidthVariant = "narrow" | "normal" | "wide" | "full" | "fit" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "10x" | "12x" | "16x" | "20x" | "24x" | "28x" | "32x";
 /**
  * Variant props that set (or unconstrain) a component's width, e.g. `width="narrow"` or `width="12x"`.
  *

package/ui/style/Width.module.css

@@ -4,14 +4,9 @@
 @layer defaults {
 	:root {
 		/* Semantic widths */
-		--width-xxnarrow: 16rem;
-		--width-xnarrow: 24rem;
 		--width-narrow: 36rem;
 		--width-normal: 48rem;
 		--width-wide: 80rem;
-		--width-xwide: 96rem;
-		--width-xxwide: 112rem;
-		--width-xxxwide: 128rem;
 	}
 
 	/* Frame shared by every width value (weak default — a component's own margin can still beat the centering). */
@@ -28,12 +23,6 @@
 	}
 
 	/* Semantic widths. */
-	.width-xxnarrow {
-		--width: var(--width-xxnarrow);
-	}
-	.width-xnarrow {
-		--width: var(--width-xnarrow);
-	}
 	.width-narrow {
 		--width: var(--width-narrow);
 	}
@@ -43,12 +32,6 @@
 	.width-wide {
 		--width: var(--width-wide);
 	}
-	.width-xwide {
-		--width: var(--width-xwide);
-	}
-	.width-xxwide {
-		--width: var(--width-xxwide);
-	}
 	.width-full {
 		--width: 100%;
 	}
@@ -56,6 +39,53 @@
 		--width: fit-content;
 	}
 
+	/* Numeric widths — multiples of `--space-normal` (no `--width-*` tokens; calculated directly). */
+	.width-1x {
+		--width: calc(1 * var(--space-normal));
+	}
+	.width-2x {
+		--width: calc(2 * var(--space-normal));
+	}
+	.width-3x {
+		--width: calc(3 * var(--space-normal));
+	}
+	.width-4x {
+		--width: calc(4 * var(--space-normal));
+	}
+	.width-5x {
+		--width: calc(5 * var(--space-normal));
+	}
+	.width-6x {
+		--width: calc(6 * var(--space-normal));
+	}
+	.width-7x {
+		--width: calc(7 * var(--space-normal));
+	}
+	.width-8x {
+		--width: calc(8 * var(--space-normal));
+	}
+	.width-10x {
+		--width: calc(10 * var(--space-normal));
+	}
+	.width-12x {
+		--width: calc(12 * var(--space-normal));
+	}
+	.width-16x {
+		--width: calc(16 * var(--space-normal));
+	}
+	.width-20x {
+		--width: calc(20 * var(--space-normal));
+	}
+	.width-24x {
+		--width: calc(24 * var(--space-normal));
+	}
+	.width-28x {
+		--width: calc(28 * var(--space-normal));
+	}
+	.width-32x {
+		--width: calc(32 * var(--space-normal));
+	}
+
 	/* Grow modifier — turn the chosen width into a floor and expand to fill (flex items + table columns). */
 	.grow {
 		flex-grow: 1;

package/ui/style/Width.tsx

@@ -6,10 +6,31 @@ import WIDTH_CSS from "./Width.module.css";
  * - `narrow` / `normal` / `wide` — fixed widths from the `--width-*` tokens (capped at 100%).
  * - `full` — take the full available width.
  * - `fit` — shrink to fit the content's intrinsic width (`fit-content`).
+ * - `1x`–`32x` — fixed multiples of `--space-normal` (1x–8x at 1x intervals, then 10x/12x, then 16x–32x at 4x intervals).
  *
  * @see https://shelving.cc/ui/WidthVariant
  */
-export type WidthVariant = "xxnarrow" | "xnarrow" | "narrow" | "normal" | "wide" | "xwide" | "xxwide" | "full" | "fit";
+export type WidthVariant =
+	| "narrow"
+	| "normal"
+	| "wide"
+	| "full"
+	| "fit"
+	| "1x"
+	| "2x"
+	| "3x"
+	| "4x"
+	| "5x"
+	| "6x"
+	| "7x"
+	| "8x"
+	| "10x"
+	| "12x"
+	| "16x"
+	| "20x"
+	| "24x"
+	| "28x"
+	| "32x";
 
 /**
  * Variant props that set (or unconstrain) a component's width, e.g. `width="narrow"` or `width="12x"`.

package/ui/style/getWidthClass.md

@@ -1,14 +1,15 @@
 # getWidthClass
 
-The `width` variant prop sets a component's inline-size — `<Card width="narrow">`, `<Block width="wide">`, `<Cell width="xxnarrow">`. It's an **override** for one-off layout; for an app-wide change, retune the width variables below in a theme file. `<Section>` already defaults to the `--width-normal` width, so most pages never set `width` at all.
+The `width` variant prop sets a component's inline-size — `<Card width="narrow">`, `<Block width="wide">`, `<Cell width="narrow">`. It's an **override** for one-off layout; for an app-wide change, retune the width variables below in a theme file. `<Section>` already defaults to the `--width-normal` width, so most pages never set `width` at all.
 
 `getWidthClass({ width, grow })` maps the props to a width class. Every value is capped at 100% of the container.
 
 **Values:**
 
-- `xxnarrow` / `xnarrow` / `narrow` / `normal` / `wide` / `xwide` / `xxwide` — fixed widths from the variables below.
+- `narrow` / `normal` / `wide` — fixed widths from the variables below.
 - `full` — the full available width.
 - `fit` — shrink to the content's intrinsic width (`fit-content`).
+- `1x` / `2x` / `3x` / `4x` / `5x` / `6x` / `7x` / `8x` / `10x` / `12x` / `16x` / `20x` / `24x` / `28x` / `32x` — fixed multiples of `--space-normal` (no per-step variables; calculated directly).
 
 **The `grow` flag** turns the chosen `width` into a floor rather than an exact size: it applies the value as `min-inline-size` and adds `flex-grow: 1`, so the element expands to fill the available space when it's a flex item. Set it on a `<Cell>` (`width="12x" grow`) to give that column a 192px minimum that absorbs the remaining width and keeps the table from collapsing the column on a narrow viewport — cells honour `min-width`, so the table scrolls instead.
 
@@ -18,11 +19,6 @@ The following `:root` variables are defined by this module and can be overridden
 
 | Variable | Default | Used for |
 |---|---|---
-| `--width-xxnarrow` | `16rem` |
-| `--width-xnarrow` | `24rem` |
-| `--width-narrow` | `36rem` |
+| `--width-narrow` | `36rem` | Focused single-purpose column, e.g. forms and login pages. |
 | `--width-normal` | `48rem` | Standard content column. |
-| `--width-wide` | `80rem` |
-| `--width-xwide` | `96rem` |
-| `--width-xxwide` | `112rem` |
-| `--width-xxxwide` | `128rem` |
+| `--width-wide` | `80rem` | Full dashboard-style content. |

package/ui/table/Table.md

@@ -81,7 +81,7 @@ The following table does the same but with a minimum width on the description co
   <tr>
     <Cell nowrap>{name}</Cell>
     <Cell nowrap>{location}</Cell>
-    <Cell width="xnarrow" grow>{description}</Cell>
+    <Cell width="24x" grow>{description}</Cell>
   </tr>
 </Table>
 ```

package/ui/tree/TreeButton.test.tsx

@@ -1,11 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import type { DocumentationElement, TreeElement } from "../../util/tree.js";
-import { MetaContext } from "../misc/MetaContext.js";
-import { createMeta } from "../util/meta.js";
-import { TreeButton } from "./TreeButton.js";
-import { TreeProvider } from "./TreeContext.js";
+import { createMeta, MetaContext, TreeButton, TreeProvider } from "shelving/ui";
+import type { DocumentationElement, TreeElement } from "shelving/util/tree";
 
 /** Tree with a class member so both flat (`Store.get`) and canonical-path references resolve. */
 const get: DocumentationElement = {