shelving 1.285.7 → 1.286.1

package/ui/dialog/Dialog.tsx

@@ -1,9 +1,10 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
+import { type MouseEvent, memo, type ReactElement, Suspense, startTransition, useLayoutEffect, useRef, ViewTransition } from "react";
 import type { Callback } from "../../util/function.js";
 import { type ButtonVariants, getButtonClass } from "../button/Button.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
+import "../transition/FadeTransition.css";
 import styles from "./Dialog.module.css";
 
 /**
@@ -12,13 +13,17 @@ import styles from "./Dialog.module.css";
  * @see https://shelving.cc/ui/DialogProps
  */
 export interface DialogProps extends OptionalChildProps {
+	/** Called when the user closes the dialog. It must unmount the `<Dialog>`, and it runs inside `startTransition()` so the dialog animates out. */
 	onClose?: Callback;
 }
 
 /**
  * Modal `<dialog>` element that opens on mount and includes a close button.
  *
- * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, or the close button.
+ * - Opens via `showModal()` when mounted and closes on backdrop clicks, link/nav-button clicks, the close button, or the Escape key.
+ * - The whole dialog fades in and out in one view transition. A `<Modal>` pinned to an edge leaves that layer and slides in its own.
+ * - With `onClose`, a close request calls `onClose()` and the dialog stays open until it unmounts, so the view transition can capture it as it leaves.
+ * - Children sit in one wrapper in normal block layout, `--dialog-width` wide and centred on the screen. Content taller than the screen scrolls from its top.
  * - Wraps content in `<Suspense>` so lazy children can stream in.
  *
  * @kind component
@@ -27,19 +32,35 @@ export interface DialogProps extends OptionalChildProps {
 export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 	const ref = useRef<HTMLDialogElement>(null);
 
-	useEffect(() => {
+	// Open in a layout effect, not a passive effect. React runs layout effects inside the view transition's update, so the new snapshot shows the open dialog.
+	useLayoutEffect(() => {
 		ref.current?.showModal();
 	}, []);
 
 	return (
 		<Suspense fallback={null}>
-			{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
-			<dialog ref={ref} className={getModuleClass(styles, "dialog")} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
-				{children}
-				<div className={getModuleClass(styles, "close")}>
-					<DialogCloseButton />
-				</div>
-			</dialog>
+			{/* The transition must wrap the `<dialog>`: React only animates a `<ViewTransition>` that comes before any DOM element in the inserted or deleted tree. Fade only on enter and exit, so an open dialog stays still while another dialog opens or closes. */}
+			<ViewTransition enter="fade" exit="fade">
+				{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
+				<dialog
+					ref={ref}
+					className={getModuleClass(styles, "dialog")}
+					onClick={_closeOnBackdropClick}
+					onCancel={e => {
+						// Keep the dialog open and let the parent unmount it in a transition. An uncancelable request closes natively and fires `onClose` from the `close` event.
+						if (!onClose || !e.cancelable) return;
+						e.preventDefault();
+						startTransition(() => onClose());
+					}}
+					onClose={onClose}
+					{...props}
+				>
+					<div className={getModuleClass(styles, "content")}>{children}</div>
+					<div className={getModuleClass(styles, "close")}>
+						<DialogCloseButton />
+					</div>
+				</dialog>
+			</ViewTransition>
 		</Suspense>
 	);
 });
@@ -47,10 +68,16 @@ export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 /** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
 function _closeOnBackdropClick({ currentTarget, target }: MouseEvent<HTMLDialogElement>): void {
 	// Close the dialog when clicking on the dialog itself (but not its children).
-	if (currentTarget === target) currentTarget.close();
+	if (currentTarget === target) _requestClose(currentTarget);
 
 	// Close the dialog when clicking on links or buttons in a `<nav>` element.
-	if (target instanceof Element && target.closest("a:any-link, nav button:enabled")) currentTarget.close();
+	if (target instanceof Element && target.closest("a:any-link, nav button:enabled")) _requestClose(currentTarget);
+}
+
+/** Ask a `<dialog>` to close. `requestClose()` fires a cancelable `cancel` event, so `<Dialog>` can run `onClose` in a transition. Older browsers close at once. */
+function _requestClose(dialog: HTMLDialogElement): void {
+	if (typeof dialog.requestClose === "function") dialog.requestClose();
+	else dialog.close();
 }
 
 /**
@@ -87,5 +114,6 @@ export function DialogCloseButton({
 }
 
 function _closeOnButtonClick({ currentTarget }: MouseEvent<HTMLButtonElement>): void {
-	currentTarget.closest("dialog")?.close();
+	const dialog = currentTarget.closest("dialog");
+	if (dialog) _requestClose(dialog);
 }

package/ui/dialog/Dialogs.d.ts

@@ -4,7 +4,8 @@ import type { ChildProps } from "../util/props.js";
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -59,5 +60,5 @@ export declare function DialogsContext({ children }: DialogsContextProps): React
  * @kind component
  * @see https://shelving.cc/ui/Dialogs
  */
-export declare function Dialogs(): ReactNode | null;
+export declare function Dialogs(): ReactNode;
 export {};

package/ui/dialog/Dialogs.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 import { useInstance } from "../../react/useInstance.js";
-import { useStore } from "../../react/useStore.js";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { getRandomKey } from "../../util/random.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import { Dialog } from "./Dialog.js";
-/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
-const REMOVE_DELAY = 500;
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -25,10 +24,8 @@ export class DialogsStore extends ArrayStore {
         const dialog = (_jsx(Dialog
         // Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
         , { 
-            // When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
-            onClose: () => {
-                setTimeout(() => this.delete(dialog), REMOVE_DELAY);
-            }, children: children }, getRandomKey()));
+            // When the `<dialog>` closes, remove it from the list. The view transition animates it out.
+            onClose: () => this.delete(dialog), children: children }, getRandomKey()));
         this.add(dialog);
     }
     /**
@@ -68,6 +65,5 @@ export function DialogsContext({ children }) {
  * @see https://shelving.cc/ui/Dialogs
  */
 export function Dialogs() {
-    const dialogs = useStore(requireDialogs());
-    return dialogs ? dialogs.value : null;
+    return useTransitionValue(requireDialogs());
 }

package/ui/dialog/Dialogs.tsx

@@ -1,18 +1,16 @@
 import { createContext, type ReactElement, type ReactNode, use } from "react";
 import { useInstance } from "../../react/useInstance.js";
-import { useStore } from "../../react/useStore.js";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { getRandomKey } from "../../util/random.js";
+import { useTransitionValue } from "../transition/useTransitionValue.js";
 import type { ChildProps } from "../util/props.js";
 import { Dialog } from "./Dialog.js";
 
-/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
-const REMOVE_DELAY = 500;
-
 /**
  * Store holding the live list of open `<Dialog>` elements.
  *
- * - `show()` opens a new dialog; closed dialogs are removed after an animation delay.
+ * - `show()` opens a new dialog. A dialog is removed from the list as soon as it closes.
+ * - `<Dialogs>` renders the list inside a transition, so dialogs animate in and out with view transitions.
  *
  * @see https://shelving.cc/ui/DialogsStore
  */
@@ -28,10 +26,8 @@ export class DialogsStore extends ArrayStore<ReactElement> {
 			<Dialog
 				// Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
 				key={getRandomKey()}
-				// When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
-				onClose={() => {
-					setTimeout(() => this.delete(dialog), REMOVE_DELAY);
-				}}
+				// When the `<dialog>` closes, remove it from the list. The view transition animates it out.
+				onClose={() => this.delete(dialog)}
 			>
 				{children}
 			</Dialog>
@@ -97,7 +93,6 @@ export function DialogsContext({ children }: DialogsContextProps): ReactElement
  * @kind component
  * @see https://shelving.cc/ui/Dialogs
  */
-export function Dialogs(): ReactNode | null {
-	const dialogs = useStore(requireDialogs());
-	return dialogs ? dialogs.value : null;
+export function Dialogs(): ReactNode {
+	return useTransitionValue(requireDialogs());
 }

package/ui/dialog/Modal.d.ts

@@ -1,16 +1,42 @@
 import type { ReactElement } from "react";
+import { type IndentVariants } from "../style/Indent.js";
+import { type PaddingVariants } from "../style/Padding.js";
+import { type RadiusVariants } from "../style/Radius.js";
+import { type ShadowVariants } from "../style/Shadow.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
- * Props for `<Modal>` — optional `children` content.
+ * Variant props for `<Modal>` — pin the panel to one edge of the screen.
+ *
+ * - Set one of `top`, `right`, `bottom`, or `left`. Without one, the panel is centred.
+ * - If more than one is set, the first in the order `top`, `right`, `bottom`, `left` wins.
+ *
+ * @see https://shelving.cc/ui/ModalVariants
+ */
+export interface ModalVariants {
+    /** Pin the panel to the top edge, full width, and slide it in from the top. */
+    top?: boolean | undefined;
+    /** Pin the panel to the right edge, full height, and slide it in from the right. */
+    right?: boolean | undefined;
+    /** Pin the panel to the bottom edge, full width, and slide it in from the bottom. */
+    bottom?: boolean | undefined;
+    /** Pin the panel to the left edge, full height, and slide it in from the left. */
+    left?: boolean | undefined;
+}
+/**
+ * Props for `<Modal>` — edge, padding, indent, radius, and shadow variants, optional `children` content, and an optional `className`.
  *
  * @see https://shelving.cc/ui/ModalProps
  */
-export interface ModalProps extends OptionalChildProps, ClassProps {
+export interface ModalProps extends ModalVariants, PaddingVariants, IndentVariants, RadiusVariants, ShadowVariants, OptionalChildProps, ClassProps {
 }
 /**
- * Styled `<aside>` overlay container for modal content.
+ * Styled `<aside>` panel for content inside a `<Dialog>`, with dark text on a light surface.
+ *
+ * - Centred by default. It fades in and out with its `<Dialog>`.
+ * - Has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it.
+ * - `top`, `right`, `bottom`, or `left` pins it to that edge. It then takes its own layer in the `<Dialog>` view transition, and slides in from that edge and out to it.
  *
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export declare function Modal({ children, className }: ModalProps): ReactElement;
+export declare function Modal({ children, className, ...props }: ModalProps): ReactElement;

package/ui/dialog/Modal.js

@@ -1,12 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getIndentClass } from "../style/Indent.js";
+import { getPaddingClass } from "../style/Padding.js";
+import { getRadiusClass } from "../style/Radius.js";
+import { getShadowClass } from "../style/Shadow.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Modal.module.css";
 /**
- * Styled `<aside>` overlay container for modal content.
+ * Styled `<aside>` panel for content inside a `<Dialog>`, with dark text on a light surface.
+ *
+ * - Centred by default. It fades in and out with its `<Dialog>`.
+ * - Has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it.
+ * - `top`, `right`, `bottom`, or `left` pins it to that edge. It then takes its own layer in the `<Dialog>` view transition, and slides in from that edge and out to it.
  *
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export function Modal({ children, className }) {
-    return _jsx("aside", { className: getClass(getModuleClass(styles, "modal"), className), children: children });
+export function Modal({ children, className, ...props }) {
+    const side = _getSide(props);
+    return (_jsx("aside", { className: getClass(getModuleClass(styles, "modal"), //
+        side && getModuleClass(styles, side), getPaddingClass(props), getIndentClass(props), getRadiusClass(props), getShadowClass(props), className), children: children }));
+}
+/** Get the edge a modal is pinned to, if any. */
+function _getSide({ top, right, bottom, left }) {
+    if (top)
+        return "top";
+    if (right)
+        return "right";
+    if (bottom)
+        return "bottom";
+    if (left)
+        return "left";
 }

package/ui/dialog/Modal.md

@@ -1,35 +1,114 @@
 # Modal
 
-A non-blocking `<aside>` overlay for persistent panels — drawers, toasts, and side-sheets that coexist with the page rather than blocking interaction with it. Unlike `<Dialog>`, it is not a native `<dialog>` and does not trap focus or dim the page.
+The panel inside a `<Dialog>`. `<Dialog>` dims the page; `Modal` gives the content a shadowed surface with dark text on a light fill.
 
 **Things to know:**
 
-- Reach for `Modal` when the overlay should sit alongside the page (a notification panel, a side drawer); reach for `<Dialog>` when it should block interaction until dismissed.
-- It only styles the box — lay out its contents with the usual block components.
+- A native `<dialog>` does both jobs. Shelving splits them: `<Dialog>` is the overlay and `Modal` is the panel. Content placed directly in a `<Dialog>` shows as white text on the dark overlay.
+- `Modal` sets its text back to `--tint-00`, so it reads on its own `--tint-100` surface.
+- `DialogsStore.show()` wraps its content in a `<Dialog>` only. It does not add a `Modal`, so put the `Modal` in the content yourself.
+- `Modal` only styles the box. Lay out its contents with the usual block components.
+- A centred `Modal` fills the width of its `<Dialog>`, so set `--dialog-width` to change it. `--modal-width` sets the width of a `left` or `right` panel.
+- The `padding` variant (for example `padding="large"`) sets the top and bottom padding, and the `indent` variant sets the left and right padding, the same as on `<Panel>`.
+- The `radius` variant sets the corner radius. On a pinned panel, corners that touch a screen edge stay square.
+- It has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it, the same as on `<Card>`.
+- Set `top`, `right`, `bottom`, or `left` to pin the panel to that edge of the screen. A top or bottom panel is full width; a left or right panel is full height. Use these for mobile menus, bottom sheets, and side menus.
+- A centred panel fades in and out with its `<Dialog>`. A pinned panel slides in from its edge and out to it, in its own view-transition layer. With reduced motion, a pinned panel fades in place.
 
 ## Usage
 
+### Declarative
+
+Put the `Modal` inside a `<Dialog>` that you mount from React state.
+
+```tsx
+import { Dialog, Modal } from "shelving/ui";
+
+function ConfirmDelete({ onConfirm, onClose }: { onConfirm: () => void; onClose: () => void }) {
+  return (
+    <Dialog onClose={onClose}>
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>
+    </Dialog>
+  );
+}
+```
+
+### Imperative
+
+Pass the `Modal` to `DialogsStore.show()`. The store adds the `<Dialog>` for you. See `<DialogsContext>` and `<Dialogs>` for the setup.
+
+```tsx
+import { Modal, requireDialogs } from "shelving/ui";
+
+function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
+  const dialogs = requireDialogs();
+  const open = () =>
+    dialogs.show(
+      <Modal>
+        <p>Delete this item?</p>
+        <button type="button" onClick={onConfirm}>Delete</button>
+      </Modal>,
+    );
+  return <button type="button" onClick={open}>Delete</button>;
+}
+```
+
+### Padding, indent, and radius
+
 ```tsx
-import { Modal } from "shelving/ui";
+<Modal padding="large" indent="large" radius="large">
+  <p>More space on all sides, and rounder corners.</p>
+</Modal>
+```
 
-<Modal>
-  <NotificationPanel />
+### Shadow
+
+```tsx
+<Modal shadow="large">
+  <p>Raised above the overlay.</p>
 </Modal>
 ```
 
+### Pinned to an edge
+
+```tsx
+import { Menu, MenuItem, Modal, requireDialogs } from "shelving/ui";
+
+function MenuButton() {
+  const dialogs = requireDialogs();
+  const open = () =>
+    dialogs.show(
+      <Modal left>
+        <Menu>
+          <MenuItem href="/">Home</MenuItem>
+          <MenuItem href="/settings">Settings</MenuItem>
+        </Menu>
+      </Modal>,
+    );
+  return <button type="button" onClick={open}>Menu</button>;
+}
+```
+
+A link click inside a `<Dialog>` closes it, so the menu slides out as the page changes. Use `<Modal bottom>` for a bottom sheet on mobile.
+
 ## Styling
 
-`Modal` paints a bordered, shadowed surface. Override these hooks at `:root` (or any ancestor scope) to retheme.
+`Modal` paints a shadowed surface with no border. Set `--modal-stroke` (for example `var(--stroke-normal)`) to show the themed border, or `--modal-border` to replace it. A pinned panel then keeps only the border on its inner side. On a pinned panel, only the corners that do not touch a screen edge are round. Override these hooks at `:root` (or any ancestor scope) to retheme.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--modal-width` | Box width | `var(--width-narrow)` |
-| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of `--tint-50` |
-| `--modal-radius` | Corner radius | `var(--radius-normal)` (16px) |
-| `--modal-color-bg` | Surface fill | `var(--tint-100)` |
-| `--modal-padding` | Inner padding | `var(--space-normal)` (16px) |
-| `--modal-color-text` | Text colour | `var(--tint-00)` |
-| `--modal-transition` | Transition | `all var(--duration-fast)` (150ms) |
-| `--modal-shadow` | Drop shadow | `var(--shadow-normal)` |
-
-**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-50` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--stroke-normal`, `--shadow-normal`, and `--duration-fast`.
+| `--modal-width` | Width of a `left` or `right` panel (a centred panel takes `--dialog-width`) | `var(--width-narrow)` |
+| `--modal-stroke` | Border width | `0` (no border) |
+| `--modal-border` | Border shorthand | `var(--modal-stroke)` solid `--tint-80` |
+| `--modal-radius` | Corner radius (the `radius` variant wins over it) | `var(--radius-normal)` (16px) |
+| `--modal-background` | Surface fill | `var(--tint-100)` |
+| `--modal-padding` | Inner padding (the `padding` variant overrides the top and bottom, and `indent` the left and right) | `var(--space-normal)` (16px) |
+| `--modal-color` | Text colour | `var(--tint-00)` |
+| `--modal-max-height` | Maximum height of a `top` or `bottom` panel (it scrolls past this) | `100%` |
+| `--modal-transition-duration` | Length of the slide for a pinned panel. Keep it the same as `--fade-transition-duration`, so the panel and the `<Dialog>` overlay finish together | `var(--duration-fast)` (150ms) |
+| `--modal-shadow` | Drop shadow (the `shadow` variant wins over it) | `var(--shadow-normal)` |
+
+**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-80` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--shadow-normal`, and `--duration-fast`.

package/ui/dialog/Modal.module.css

@@ -3,24 +3,185 @@
 @import url("../style/Radius.module.css");
 @import url("../style/Shadow.module.css");
 @import url("../style/Space.module.css");
-@import url("../style/Stroke.module.css");
 @import url("../style/Tint.module.css");
 @import url("../style/Width.module.css");
 
 @layer components {
 	.modal {
-		/* Box */
+		/* Box: `border-box` keeps the padding inside `max-width`, and `min-width: 0` lets the panel shrink below its content in the flex `<Dialog>`, so it never goes wider than the screen. */
+		box-sizing: border-box;
 		margin: auto;
-		width: var(--modal-width, var(--width-narrow));
+		min-width: 0;
 		max-width: 100%;
-		border: var(--modal-border, var(--stroke-normal) solid color-mix(in oklch, var(--tint-50) 50%, transparent));
+		border: var(--modal-border, var(--modal-stroke, 0) solid var(--tint-80));
 		border-radius: var(--modal-radius, var(--radius-normal));
-		background: var(--modal-color-bg, var(--tint-100));
+		background: var(--modal-background, var(--tint-100));
 		padding: var(--modal-padding, var(--space-normal));
 
 		/* Style */
-		color: var(--modal-color-text, var(--tint-00));
-		transition: var(--modal-transition, all var(--duration-fast));
+		color: var(--modal-color, var(--tint-00));
 		box-shadow: var(--modal-shadow, var(--shadow-normal));
+
+		/* Pinned to an edge: fixed to the viewport, flush with the edge, and scrolls when its content is too tall. */
+		&.top,
+		&.right,
+		&.bottom,
+		&.left {
+			position: fixed;
+			margin: 0;
+			overflow: auto;
+			overscroll-behavior: contain;
+
+			/* Take a separate layer in any view transition, so the panel can slide while the `<Dialog>` around it fades. `match-element` gives each panel a unique name. */
+			view-transition-name: match-element;
+		}
+
+		&.top,
+		&.bottom {
+			inset-inline: 0;
+			width: auto;
+			max-height: var(--modal-max-height, 100%);
+		}
+
+		/* Side panels are not inside the `<Dialog>` wrapper's width, so they set their own. */
+		&.left,
+		&.right {
+			inset-block: 0;
+			width: var(--modal-width, var(--width-narrow));
+		}
+
+		/* If a theme sets `--modal-stroke` or `--modal-border`, keep only the border on the inner side, because the other sides touch the edges of the screen. */
+		&.top {
+			top: 0;
+			border-top: none;
+			border-inline: none;
+			view-transition-class: modal-top;
+		}
+
+		&.bottom {
+			bottom: 0;
+			border-bottom: none;
+			border-inline: none;
+			view-transition-class: modal-bottom;
+		}
+
+		&.left {
+			left: 0;
+			border-left: none;
+			border-block: none;
+			view-transition-class: modal-left;
+		}
+
+		&.right {
+			right: 0;
+			border-right: none;
+			border-block: none;
+			view-transition-class: modal-right;
+		}
+	}
+}
+
+/* Corners that touch a screen edge are square. This is in `overrides` so it beats the `radius` variant, which then sets only the inner corners. */
+@layer overrides {
+	.modal {
+		&.top {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&.bottom {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		/* Side panels are full height, so all their corners touch an edge. */
+		&.left,
+		&.right {
+			border-radius: 0;
+		}
+	}
+}
+
+/*
+ * View transitions for panels pinned to an edge.
+ * - These rules must stay in this file. Bun hashes the `view-transition-class` values above and the class names in the selectors below the same way only when both are in the same file.
+ * - Each keyframe only sets `from`, so it ends at the panel's own position. The exit plays the same keyframe in reverse.
+ * - `:only-child` limits the slide to enter (a new image with no old one) and exit (an old image with no new one). A panel that stays open is in every view transition on the page as an old and a new image, and must not move.
+ */
+@keyframes modal-from-top {
+	from {
+		transform: translateY(-100%);
+	}
+}
+
+@keyframes modal-from-right {
+	from {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes modal-from-bottom {
+	from {
+		transform: translateY(100%);
+	}
+}
+
+@keyframes modal-from-left {
+	from {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes modal-fade {
+	from {
+		opacity: 0;
+	}
+}
+
+::view-transition-new(.modal-top):only-child,
+::view-transition-new(.modal-right):only-child,
+::view-transition-new(.modal-bottom):only-child,
+::view-transition-new(.modal-left):only-child {
+	animation: var(--modal-transition-duration, var(--duration-fast)) ease-out both;
+}
+
+::view-transition-old(.modal-top):only-child,
+::view-transition-old(.modal-right):only-child,
+::view-transition-old(.modal-bottom):only-child,
+::view-transition-old(.modal-left):only-child {
+	animation: var(--modal-transition-duration, var(--duration-fast)) ease-in reverse both;
+}
+
+::view-transition-new(.modal-top):only-child,
+::view-transition-old(.modal-top):only-child {
+	animation-name: modal-from-top;
+}
+
+::view-transition-new(.modal-right):only-child,
+::view-transition-old(.modal-right):only-child {
+	animation-name: modal-from-right;
+}
+
+::view-transition-new(.modal-bottom):only-child,
+::view-transition-old(.modal-bottom):only-child {
+	animation-name: modal-from-bottom;
+}
+
+::view-transition-new(.modal-left):only-child,
+::view-transition-old(.modal-left):only-child {
+	animation-name: modal-from-left;
+}
+
+/* Reduced motion: fade the panel in and out in place of the slide. */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-new(.modal-top):only-child,
+	::view-transition-old(.modal-top):only-child,
+	::view-transition-new(.modal-right):only-child,
+	::view-transition-old(.modal-right):only-child,
+	::view-transition-new(.modal-bottom):only-child,
+	::view-transition-old(.modal-bottom):only-child,
+	::view-transition-new(.modal-left):only-child,
+	::view-transition-old(.modal-left):only-child {
+		animation-name: modal-fade;
 	}
 }