shelving 1.292.0 → 1.292.1

package/package.json

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

package/ui/transition/HorizontalTransition.css

@@ -1,6 +1,11 @@
-@layer base {
+@import url("../style/layers.css");
+@import url("../style/Duration.module.css");
+
+/* Global CSS, not a CSS module — see `Transition.css` for why. */
+@layer defaults {
 	:root {
-		--horizontal-transition-size: 25vw;
+		/* A percentage is of the snapshot's own size, so the old and new content sit edge to edge and never overlap. */
+		--horizontal-transition-size: 100%;
 		--horizontal-transition-duration: var(--duration-normal);
 	}
 }
@@ -53,6 +58,12 @@
 	}
 }
 
+/* Clip the slide to the element's own box, so it does not paint over the content around it. */
+::view-transition-group(.slide-right),
+::view-transition-group(.slide-left) {
+	overflow: clip;
+}
+
 ::view-transition-new(.slide-right) {
 	animation: slide-in-from-right var(--horizontal-transition-duration) ease-in-out both;
 }

package/ui/transition/HorizontalTransition.md

@@ -7,6 +7,17 @@ A direction-aware `<Transition>` preset that slides its children horizontally
 - Slides right by default and when the type is `"forward"`; slides left when the type is `"back"`.
 - 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`).
+- The old and new content slide a full width apart, so they sit edge to edge and never overlap.
+- The slide is clipped to the element's own box (`overflow: clip` on the group), so it does not paint over the content around it.
+- During the slide, the snapshots paint above fixed elements such as a bottom bar. To keep a fixed element on top, give it its own `view-transition-name` and put the slide groups below it:
+
+  ```css
+  ::view-transition-group(.slide-right),
+  ::view-transition-group(.slide-left) {
+    z-index: -1;
+  }
+  ```
+
 - 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
@@ -33,7 +44,7 @@ function navigate(direction: "forward" | "back", url: string) {
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--horizontal-transition-size` | Slide distance for the enter/leave keyframes | `25vw` |
+| `--horizontal-transition-size` | Slide distance for the enter/leave keyframes. A percentage is of the element's own width. | `100%` |
 | `--horizontal-transition-duration` | Duration of the slide keyframes | `var(--duration-normal)` |
 
 **Global tokens it reads** — `--duration-normal`.

package/ui/transition/VerticalTransition.css

@@ -1,6 +1,11 @@
-@layer base {
+@import url("../style/layers.css");
+@import url("../style/Duration.module.css");
+
+/* Global CSS, not a CSS module — see `Transition.css` for why. */
+@layer defaults {
 	:root {
-		--vertical-transition-size: 25vh;
+		/* A percentage is of the snapshot's own size, so the old and new content sit edge to edge and never overlap. */
+		--vertical-transition-size: 100%;
 		--vertical-transition-duration: var(--duration-normal);
 	}
 }
@@ -53,6 +58,12 @@
 	}
 }
 
+/* Clip the slide to the element's own box, so it does not paint over the content around it. */
+::view-transition-group(.slide-up),
+::view-transition-group(.slide-down) {
+	overflow: clip;
+}
+
 ::view-transition-new(.slide-up) {
 	animation: slide-in-from-bottom var(--vertical-transition-duration) ease-in-out both;
 }

package/ui/transition/VerticalTransition.md

@@ -7,6 +7,17 @@ A direction-aware `<Transition>` preset that slides its children vertically —
 - Slides down by default and when the type is `"forward"`; slides up when the type is `"back"`.
 - 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`).
+- The old and new content slide a full height apart, so they sit edge to edge and never overlap.
+- The slide is clipped to the element's own box (`overflow: clip` on the group), so it does not paint over the content around it.
+- During the slide, the snapshots paint above fixed elements such as a bottom bar. To keep a fixed element on top, give it its own `view-transition-name` and put the slide groups below it:
+
+  ```css
+  ::view-transition-group(.slide-up),
+  ::view-transition-group(.slide-down) {
+    z-index: -1;
+  }
+  ```
+
 - 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
@@ -23,7 +34,7 @@ import { VerticalTransition } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--vertical-transition-size` | Slide distance for the enter/leave keyframes | `25vh` |
+| `--vertical-transition-size` | Slide distance for the enter/leave keyframes. A percentage is of the element's own height. | `100%` |
 | `--vertical-transition-duration` | Duration of the slide keyframes | `var(--duration-normal)` |
 
 **Global tokens it reads** — `--duration-normal`.