shelving 1.271.2 → 1.271.3

package/package.json

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

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/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