shelving 1.271.2 → 1.271.4

package/package.json

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

package/ui/block/List.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
+import type { ImmutableArray } from "../../util/array.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type GapVariants } from "../style/Gap.js";
 /**
@@ -7,8 +8,8 @@ import { type GapVariants } from "../style/Gap.js";
  * @see https://shelving.cc/ui/ListProps
  */
 export interface ListProps extends GapVariants, BlockVariants {
-    children: ReactNode[];
-    ordered?: boolean;
+    readonly children: ImmutableArray<ReactNode>;
+    readonly ordered?: boolean | undefined;
 }
 /**
  * List block — wraps each child in an `<li>` and renders an `<ul>` or `<ol>`.

package/ui/block/List.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
+import type { ImmutableArray } from "../../util/array.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { type GapVariants, getGapClass } from "../style/Gap.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -13,8 +14,8 @@ const LIST_UNORDERED_CLASS = getModuleClass(LIST_CSS, "unordered");
  * @see https://shelving.cc/ui/ListProps
  */
 export interface ListProps extends GapVariants, BlockVariants {
-	children: ReactNode[];
-	ordered?: boolean;
+	readonly children: ImmutableArray<ReactNode>;
+	readonly ordered?: boolean | undefined;
 }
 
 /**

package/ui/input/Popover.d.ts

@@ -7,7 +7,7 @@ import type { Callback } from "../../util/function.js";
  *
  * @see https://shelving.cc/ui/PopoverChildren
  */
-export type PopoverChildren = [
+export type PopoverChildren = readonly [
     /**
      * First child of the <Popover> is element that activates the popover.
      * - Should be a `<Button>` or `<Input>` that activates or provides the children.

package/ui/input/Popover.tsx

@@ -15,7 +15,7 @@ import styles from "./Popover.module.css";
  *
  * @see https://shelving.cc/ui/PopoverChildren
  */
-export type PopoverChildren = [
+export type PopoverChildren = readonly [
 	/**
 	 * First child of the <Popover> is element that activates the popover.
 	 * - Should be a `<Button>` or `<Input>` that activates or provides the children.

package/ui/layout/SidebarLayout.md

@@ -7,6 +7,7 @@ A full-viewport layout with a fixed-width side column next to a scrollable main
 - Pass `right` to place the sidebar on the right rather than the left.
 - The sidebar renders as `<nav>`, so it is a navigation landmark without extra markup — drop a `<Menu>` inside it.
 - While the drawer is open an overlay dims the page; clicking the overlay closes it.
+- Under `prefers-reduced-motion: reduce` the drawer snaps open/closed instead of sliding off-canvas; the overlay keeps its dimming fade, which is opacity-only and therefore reduced-motion-safe.
 - Inside a `<Navigation>` context the drawer closes itself whenever the route changes (e.g. tapping a sidebar link).
 - The layout owns scroll, padding, and safe-area insets so individual pages don't have to.
 

package/ui/layout/SidebarLayout.module.css

@@ -211,4 +211,11 @@
 			visibility: visible;
 		}
 	}
+
+	/* Reduced motion: snap the drawer open/closed instead of sliding it off-canvas. The overlay keeps its fade — an opacity-only fade is reduced-motion-safe, and `visibility` must stay transitioned so the overlay still flips hidden at the end of the fade-out. */
+	@media (width <= 48rem) and (prefers-reduced-motion: reduce) {
+		.sidebar {
+			transition: none;
+		}
+	}
 }

package/ui/menu/Menu.d.ts

@@ -28,7 +28,7 @@ export interface MenuItemProps extends ClickableProps {
      * The first child becomes the link label (rendered inside the `<a>`).
      * - Any additional children form the submenu — only rendered when this item is "proud" (an ancestor of the current page). The caller is responsible for wrapping the submenu in a nested `<Menu>` if it wants the CSS `.menu .menu` descendant rules to apply.
      */
-    readonly children: ReactNode | [ReactNode, ...ReactNode[]];
+    readonly children: ReactNode | readonly [ReactNode, ...ReactNode[]];
 }
 /**
  * A `<li>` containing an `<a>` link, plus optional submenu content shown when this item is "proud".

package/ui/menu/Menu.tsx

@@ -52,7 +52,7 @@ export interface MenuItemProps extends ClickableProps {
 	 * The first child becomes the link label (rendered inside the `<a>`).
 	 * - Any additional children form the submenu — only rendered when this item is "proud" (an ancestor of the current page). The caller is responsible for wrapping the submenu in a nested `<Menu>` if it wants the CSS `.menu .menu` descendant rules to apply.
 	 */
-	readonly children: ReactNode | [ReactNode, ...ReactNode[]];
+	readonly children: ReactNode | readonly [ReactNode, ...ReactNode[]];
 }
 
 /**

package/ui/transition/CollapseTransition.md

@@ -6,6 +6,7 @@ A `<Transition>` preset that collapses its children in and out by animating thei
 
 - Uses the `collapse` transition class — there is no direction-aware variant, so forward and back animate identically.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
+- Under `prefers-reduced-motion: reduce` the collapse animation is disabled entirely — the size morph is positional movement, so the content swap happens as an instant cut (the DOM update still applies).
 
 ## Usage
 

package/ui/transition/CollapseTransition.module.css

@@ -1,3 +1,13 @@
 ::view-transition-image-pair(.collapse) {
 	overflow: hidden;
 }
+
+/* Reduced motion: the collapse IS a positional size morph (the default view-transition group animation), so disable it entirely — the swap becomes an instant cut while the DOM update still happens. */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-group(.collapse),
+	::view-transition-image-pair(.collapse),
+	::view-transition-old(.collapse),
+	::view-transition-new(.collapse) {
+		animation: none;
+	}
+}

package/ui/transition/FadeTransition.css

@@ -25,3 +25,10 @@
 ::view-transition-old(.fade) {
 	animation: fade-out var(--fade-transition-duration, var(--duration-fast)) ease-in-out both;
 }
+
+/* Reduced motion: keep the opacity-only crossfade — a fade moves nothing spatially, so it is reduced-motion-safe — but disable the group's default positional morph so content never slides between layouts. */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-group(.fade) {
+		animation: none;
+	}
+}

package/ui/transition/FadeTransition.md

@@ -6,6 +6,7 @@ A `<Transition>` preset that fades its children in and out by animating opacity.
 
 - Uses the `fade` transition class — there is no direction-aware variant, so forward and back animate identically.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
+- Under `prefers-reduced-motion: reduce` the fade keeps animating — an opacity-only crossfade moves nothing spatially, so it is reduced-motion-safe — but the transition group's positional morph is disabled so content never slides between layouts.
 
 ## Usage
 

package/ui/transition/HorizontalTransition.css

@@ -68,3 +68,15 @@
 ::view-transition-old(.slide-left) {
 	animation: slide-out-to-right var(--horizontal-transition-duration) ease-in-out both;
 }
+
+/* Reduced motion: null the slide distance so the keyframes above degrade to an opacity-only crossfade (reduced-motion-safe), and disable the group's default positional morph. Unlayered so it wins over app-level overrides of the distance hook. */
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--horizontal-transition-size: 0px;
+	}
+
+	::view-transition-group(.slide-right),
+	::view-transition-group(.slide-left) {
+		animation: none;
+	}
+}

package/ui/transition/HorizontalTransition.md

@@ -7,6 +7,7 @@ A direction-aware `<Transition>` preset that slides its children horizontally
 - Defaults to `slideRight`; with the type set to `"forward"` it slides right (`slideRight`), and to `"back"` it slides left (`slideLeft`).
 - Set the direction with `setTransitionType("forward" | "back")` inside a `startTransition()` callback before navigating — see `<Transition>`.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
+- Under `prefers-reduced-motion: reduce` the slide distance is forced to `0`, so the transition degrades to an opacity-only crossfade with no positional movement (large viewport-level slides are exactly what the preference exists to suppress).
 
 ## Usage
 

package/ui/transition/Transition.md

@@ -7,6 +7,7 @@ The base View Transition wrapper. It wraps its children in React 19's `<ViewTran
 - Set `default` for the base transition; `forward` and `back` default to it and let you pick a direction-aware variant. The class names must correspond to `::view-transition-old(.className)` / `::view-transition-new(.className)` rules in your CSS.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`, from `Transition.css`).
 - Direction is driven by the active view-transition type. Call `setTransitionType("forward")` (or `"back"`) inside a `startTransition()` callback before navigating; the variants read that type to choose the correct slide.
+- The preset variants honour `prefers-reduced-motion: reduce` — positional movement (slides, collapse) is removed while opacity-only fades are kept (see each preset's page). Custom transition classes should ship their own `@media (prefers-reduced-motion: reduce)` override; `animation: none` on the `::view-transition-*` pseudo-elements makes the swap an instant cut while the DOM update still happens.
 
 ## Usage
 

package/ui/transition/VerticalTransition.css

@@ -8,7 +8,7 @@
 @keyframes slide-in-from-top {
 	from {
 		opacity: 0;
-		transform: translateY(calc(0 - var(--vertical-transition-size)));
+		transform: translateY(calc(0px - var(--vertical-transition-size)));
 	}
 
 	to {
@@ -37,7 +37,7 @@
 
 	to {
 		opacity: 0;
-		transform: translateY(calc(0 - var(--vertical-transition-size)));
+		transform: translateY(calc(0px - var(--vertical-transition-size)));
 	}
 }
 
@@ -68,3 +68,15 @@
 ::view-transition-old(.slide-down) {
 	animation: slide-out-to-bottom var(--vertical-transition-duration) ease-in-out both;
 }
+
+/* Reduced motion: null the slide distance so the keyframes above degrade to an opacity-only crossfade (reduced-motion-safe), and disable the group's default positional morph. Unlayered so it wins over app-level overrides of the distance hook. */
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--vertical-transition-size: 0px;
+	}
+
+	::view-transition-group(.slide-up),
+	::view-transition-group(.slide-down) {
+		animation: none;
+	}
+}

package/ui/transition/VerticalTransition.md

@@ -7,6 +7,7 @@ A direction-aware `<Transition>` preset that slides its children vertically —
 - Defaults to `slideDown`; with the type set to `"forward"` it slides down (`slideDown`), and to `"back"` it slides up (`slideUp`).
 - Set the direction with `setTransitionType("forward" | "back")` inside a `startTransition()` callback before navigating — see `<Transition>`.
 - Pass `overlay` to raise the transition group above surrounding content during the animation (`z-index: 100`).
+- Under `prefers-reduced-motion: reduce` the slide distance is forced to `0`, so the transition degrades to an opacity-only crossfade with no positional movement (large viewport-level slides are exactly what the preference exists to suppress).
 
 ## Usage