shelving 1.285.6 → 1.286.0

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;
 	}
 }

package/ui/dialog/Modal.tsx

@@ -1,21 +1,78 @@
 import type { ReactElement } from "react";
+import { getIndentClass, type IndentVariants } from "../style/Indent.js";
+import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
+import { getRadiusClass, type RadiusVariants } from "../style/Radius.js";
+import { getShadowClass, type ShadowVariants } from "../style/Shadow.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Modal.module.css";
 
 /**
- * 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 function Modal({ children, className }: ModalProps): ReactElement {
-	return <aside className={getClass(getModuleClass(styles, "modal"), className)}>{children}</aside>;
+export function Modal({ children, className, ...props }: ModalProps): ReactElement {
+	const side = _getSide(props);
+	return (
+		<aside
+			className={getClass(
+				getModuleClass(styles, "modal"), //
+				side && getModuleClass(styles, side),
+				getPaddingClass(props),
+				getIndentClass(props),
+				getRadiusClass(props),
+				getShadowClass(props),
+				className,
+			)}
+		>
+			{children}
+		</aside>
+	);
+}
+
+/** Get the edge a modal is pinned to, if any. */
+function _getSide({ top, right, bottom, left }: ModalVariants): keyof ModalVariants | undefined {
+	if (top) return "top";
+	if (right) return "right";
+	if (bottom) return "bottom";
+	if (left) return "left";
 }

package/ui/layout/SidebarLayout.md

@@ -43,8 +43,8 @@ Layouts compose naturally as `<Router>` route values — wrap a group of routes
 | `--sidebar-layout-color` | Text colour for the layout (set on `body`, inherited by the content column) | `var(--tint-00)` (black) |
 | `--sidebar-layout-sidebar-background` | Sidebar column fill | `var(--tint-90)` (one shade darker than the page) |
 | `--sidebar-layout-sidebar-color` | Sidebar column text colour | `var(--tint-00)` (black) |
-| `--sidebar-layout-border` | Divider between sidebar and content | `var(--stroke-normal) solid var(--tint-80)` |
+| `--sidebar-layout-border` | Divider between sidebar and content, e.g. `1px solid var(--tint-80)` | `none` |
 
 The sidebar and content columns own their own scroll behaviour directly (this layout no longer composes a shared `.layout` class).
 
-**Global tokens it reads** — `--tint-00` / `--tint-80` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--stroke-normal`, `--duration-normal`, and `--color-shadow`.
+**Global tokens it reads** — `--tint-00` / `--tint-90` / `--tint-100`, plus `--space-normal`, `--duration-normal`, and `--color-shadow`.

package/ui/layout/SidebarLayout.module.css

@@ -2,7 +2,6 @@
 @import url("../style/Color.module.css");
 @import url("../style/Duration.module.css");
 @import url("../style/Space.module.css");
-@import url("../style/Stroke.module.css");
 @import url("../style/Tint.module.css");
 @import url("../style/Shadow.module.css");
 
@@ -74,7 +73,7 @@
 	.sidebar {
 		/* Box */
 		display: flow-root;
-		border-right: var(--sidebar-layout-border, var(--stroke-normal) solid var(--tint-80));
+		border-right: var(--sidebar-layout-border, none);
 
 		/* Scrolling */
 		overflow-y: auto;
@@ -118,7 +117,7 @@
 	.main.right .sidebar {
 		grid-column: 2;
 		border-right: none;
-		border-left: var(--sidebar-layout-border, var(--stroke-normal) solid var(--tint-80));
+		border-left: var(--sidebar-layout-border, none);
 	}
 
 	.main.right .content {

package/ui/menu/Menu.md

@@ -29,13 +29,13 @@ import { Menu, MenuItem } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--menu-gap` | Vertical gap between items | `var(--space-xxsmall)` |
+| `--menu-gap` | Vertical gap between items | `0` |
 | `--menu-font` | Font family | `var(--font-body)` |
 | `--menu-size` | Font size | `var(--size-normal)` |
 | `--menu-leading` | Line height | `var(--leading)` |
 | `--menu-color` | Text colour | `var(--tint-00)` |
 | `--menu-nested-space` | Block margin around a nested submenu | `var(--space-xxsmall)` |
-| `--menu-padding` | Item link padding (also insets the nested border) | `var(--space-xxsmall)` |
+| `--menu-padding` | Item link padding (also insets the nested border) | `var(--space-xsmall)` |
 | `--menu-nested-border` | Nested submenu left-border width | `var(--stroke-focus)` |
 | `--menu-nested-color-border` | Nested submenu left-border colour | `var(--tint-50)` |
 | `--menu-nested-indent` | Nested submenu left padding | `var(--space-xsmall)` |

package/ui/menu/Menu.module.css

@@ -13,7 +13,7 @@
 		padding: 0;
 		display: flex;
 		flex-direction: column;
-		gap: var(--menu-gap, var(--space-xxsmall));
+		gap: var(--menu-gap, 0);
 
 		/* Text */
 		font-family: var(--menu-font, var(--font-body));
@@ -26,7 +26,7 @@
 			margin-block: var(--menu-nested-space, var(--space-xxsmall));
 
 			/* Inset the border by the link's inline padding so it lines up with the parent item's label. */
-			margin-inline-start: var(--menu-padding, var(--space-xxsmall));
+			margin-inline-start: var(--menu-padding, var(--space-xsmall));
 			border-inline-start: var(--menu-nested-border, var(--stroke-focus)) solid var(--menu-nested-color-border, var(--tint-50));
 			padding-inline-start: var(--menu-nested-indent, var(--space-xsmall));
 		}
@@ -37,12 +37,13 @@
 	}
 
 	.link {
-		/* Box — `inline-size` and `border` also reset the `<button>` an `onClick` item renders. */
+		/* Box — `inline-size` and `border` also reset the `<button>` an `onClick` item renders. `border-box` keeps the padding inside the full width. */
 		display: block;
+		box-sizing: border-box;
 		inline-size: 100%;
-		padding: var(--menu-padding, var(--space-xxsmall));
+		padding: var(--menu-padding, var(--space-xsmall));
 		border: none;
-		border-radius: var(--menu-radius, var(--radius-xxsmall));
+		border-radius: var(--menu-radius, var(--radius-xsmall));
 
 		/* Style — `background`, `font`, `text-align` and `cursor` reset the native button look. */
 		background: none;
@@ -53,11 +54,11 @@
 		cursor: pointer;
 		transition: all 120ms ease-in-out;
 		outline: var(--menu-focus-border, var(--stroke-focus) solid var(--color-focus));
-		outline-offset: calc(0px - var(--stroke-normal));
+		outline-offset: calc(0px - var(--stroke-focus)); /* Fully inset, so a neighbouring item's background can't paint over it. */
 
-		/* Pseudo-classes */
-		&:hover,
-		&:focus:not(:focus-visible) {
+		/* Pseudo-classes — skip the active item, so it keeps its own background while hovered or focused. */
+		&:not(.active):hover,
+		&:not(.active):focus:not(:focus-visible) {
 			background: var(--menu-hover-background, var(--tint-90));
 			color: var(--menu-hover-color, var(--tint-00));
 		}