shelving 1.286.0 → 1.287.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.286.0",
+	"version": "1.287.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -9,12 +9,12 @@
 	"main": "./index.js",
 	"module": "./index.js",
 	"devDependencies": {
-		"@biomejs/biome": "^2.5.14",
+		"@biomejs/biome": "^2.5.15",
 		"@heroicons/react": "^2.2.0",
 		"@types/bun": "^1.4.2",
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
-		"stylelint": "^17.15.0",
+		"stylelint": "^17.16.0",
 		"stylelint-config-standard": "^40.0.0",
 		"typescript": "^7.0.2"
 	},

package/ui/block/Card.md

@@ -66,7 +66,8 @@ import { Card, Subheading } from "shelving/ui";
 | `--card-border` | Border shorthand | `var(--card-stroke) solid var(--tint-80)` |
 | `--card-stroke` | Border thickness — set it (e.g. `var(--stroke-normal)`) to show the border | `0` |
 | `--card-radius` | Corner radius | `var(--radius-normal)` (16px) |
-| `--card-padding` | Inner padding | `var(--space-normal)` (16px) |
+| `--card-padding` | Inner top and bottom padding (one length) | `var(--space-normal)` (16px) |
+| `--card-indent` | Inner left and right padding (one length) | `var(--space-normal)` (16px) |
 | `--card-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 | `--card-shadow` | Drop shadow | `none` |
 | `--card-transition` | Transition | `all var(--duration-fast)` (150ms) |

package/ui/block/Card.module.css

@@ -24,7 +24,8 @@
 		margin-inline: 0;
 		margin-block: var(--card-space, var(--space-paragraph));
 		border: var(--card-border, var(--card-stroke, 0) solid var(--tint-80));
-		padding: var(--card-padding, var(--space-normal));
+		padding-block: var(--card-padding, var(--space-normal));
+		padding-inline: var(--card-indent, var(--space-normal));
 		border-radius: var(--card-radius, var(--radius-normal));
 
 		/* Style */

package/ui/block/Details.d.ts

@@ -1,22 +1,27 @@
 import type { ReactElement, ReactNode } from "react";
 import { type BlockVariants } from "../style/Block.js";
 import type { ClassProps } from "../util/props.js";
-/** Props for `DetailsItem` — a single collapsible disclosure. */
+/**
+ * Props for `<Details>` — the summary title, the revealed content, and the open state.
+ *
+ * @see https://shelving.cc/ui/DetailsProps
+ */
 export interface DetailsProps extends BlockVariants, ClassProps {
     /** Content of the always-visible summary (e.g. a question). */
     title: ReactNode;
-    /** Whether the item starts expanded. */
+    /** Whether the panel starts expanded. */
     open?: boolean | undefined;
-    /** Shared group name — items with the same `name` open exclusively (only one at a time). */
+    /** Shared group name — panels with the same `name` open exclusively (only one at a time). */
     name?: string | undefined;
-    /** Content revealed when the item is expanded. */
+    /** Content revealed when the panel is expanded. */
     children: ReactNode;
 }
 /**
- * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
- * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
- * - Give sibling items a shared `name` to make them open exclusively.
+ * A collapsible panel with a title that is always visible, built on native `<details>` and `<summary>`.
+ * - The panel animates to its true height (where `interpolate-size` and `::details-content` are supported).
+ * - Give sibling panels a shared `name` to make them open exclusively.
  *
  * @kind component
+ * @see https://shelving.cc/ui/Details
  */
 export declare function Details({ title, open, name, children, className, ...props }: DetailsProps): ReactElement;

package/ui/block/Details.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronUpIcon } from "@heroicons/react/24/outline";
+import { ChevronUpIcon } from "@heroicons/react/24/solid";
 import { getBlockClass } from "../style/Block.js";
-import { getClass } from "../util/css.js";
+import { getFlexClass } from "../style/Flex.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import DETAILS_CSS from "./Details.module.css";
-const DETAILS_CLASS = DETAILS_CSS.details;
-const DETAILS_SUMMARY_CLASS = DETAILS_CSS.summary;
+const DETAILS_CLASS = getModuleClass(DETAILS_CSS, "details");
+const DETAILS_SUMMARY_CLASS = getClass(getModuleClass(DETAILS_CSS, "summary"), getFlexClass({ between: true, gap: "normal" }));
 /**
- * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
- * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
- * - Give sibling items a shared `name` to make them open exclusively.
+ * A collapsible panel with a title that is always visible, built on native `<details>` and `<summary>`.
+ * - The panel animates to its true height (where `interpolate-size` and `::details-content` are supported).
+ * - Give sibling panels a shared `name` to make them open exclusively.
  *
  * @kind component
+ * @see https://shelving.cc/ui/Details
  */
 export function Details({ title, open = false, name, children, className, ...props }) {
     return (_jsxs("details", { className: getClass(DETAILS_CLASS, getBlockClass(props), className), open: open, name: name, children: [_jsxs("summary", { className: DETAILS_SUMMARY_CLASS, children: [_jsx("span", { children: title }), _jsx(ChevronUpIcon, {})] }), children] }));

package/ui/block/Details.md

@@ -0,0 +1,63 @@
+# Details
+
+A collapsible panel. The title is always visible. The content shows when the user opens the panel. Built on the native `<details>` and `<summary>` elements, so it works with the keyboard and without JavaScript.
+
+**Things to know:**
+
+- A chevron on the right of the title points down when the panel is closed and up when it is open.
+- The panel animates to its true height where the browser supports `interpolate-size` and `::details-content`. Other browsers open it at once.
+- Give sibling panels the same `name` to make them open exclusively: when one opens, the others close.
+- Two or more panels next to each other get a divider line between them.
+- A raw `<details>` inside `.prose` gets the same spacing and divider, but it keeps the browser's own marker in place of the chevron.
+
+## Usage
+
+### Single panel
+
+```tsx
+import { Details, Paragraph } from "shelving/ui";
+
+<Details title="What is shelving?">
+  <Paragraph>A TypeScript data toolkit.</Paragraph>
+</Details>
+```
+
+### Open by default
+
+```tsx
+import { Details, Paragraph } from "shelving/ui";
+
+<Details title="Release notes" open>
+  <Paragraph>Bug fixes and small improvements.</Paragraph>
+</Details>
+```
+
+### Exclusive group (FAQ)
+
+```tsx
+import { Details, Paragraph } from "shelving/ui";
+
+// Only one answer is open at a time.
+<Details name="faq" title="Is it free?">
+  <Paragraph>Yes.</Paragraph>
+</Details>
+<Details name="faq" title="Does it work with React?">
+  <Paragraph>Yes, through `shelving/ui`.</Paragraph>
+</Details>
+```
+
+## Styling
+
+`Details` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` to an ancestor scope to recolour the chevron and divider together.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--details-space` | Outer block margin, and the padding above a divider | `var(--space-paragraph)` (16px) |
+| `--details-border` | Divider between panels next to each other | `var(--stroke-normal) solid var(--tint-90)` |
+| `--details-marker-color` | Colour of the browser's marker on a raw `<details>` in `.prose` | `var(--tint-80)` |
+| `--details-radius` | Corner radius of the title's focus ring | `var(--radius-xsmall)` (8px) |
+| `--details-icon-color` | Chevron colour | `var(--tint-50)` |
+| `--details-transition` | Open/close animation and chevron turn | `all var(--duration-fast)` (150ms) |
+| `--details-gap` | Space between the title and the content | `var(--space-paragraph)` (16px) |
+
+**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-80` / `--tint-90`, plus `--space-paragraph`, `--space-normal`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--duration-fast` and `--size-icon` (chevron size, from `getFlexClass`).

package/ui/block/Details.module.css

@@ -48,26 +48,11 @@
 			}
 		}
 
-		/* Title (with chevron icon) */
-		.summary {
-			/* Box */
-			display: flex;
-
-			/* Contents */
-			align-items: center;
-			justify-content: space-between;
-			gap: var(--space-normal);
-
-			/* Children */
-			[data-slot="icon"] {
-				width: var(--size-icon);
-				height: var(--size-icon);
-				color: var(--color-gray);
-				transform: rotate(180deg);
-				transition: var(--details-transition, all var(--duration-fast));
-				border-radius: var(--radius-xxsmall);
-				flex: none;
-			}
+		/* Title chevron (the summary's flex class sets its size). Points down while closed. */
+		.summary [data-slot="icon"] {
+			color: var(--details-icon-color, var(--tint-50));
+			transform: rotate(180deg);
+			transition: var(--details-transition, all var(--duration-fast));
 		}
 
 		/* Content */
@@ -96,10 +81,8 @@
 
 		/* States */
 		&[open] {
-			.summary {
-				[data-slot="icon"] {
-					transform: rotate(0deg);
-				}
+			.summary [data-slot="icon"] {
+				transform: rotate(0deg);
 			}
 
 			&::details-content {

package/ui/block/Details.tsx

@@ -1,31 +1,37 @@
-import { ChevronUpIcon } from "@heroicons/react/24/outline";
+import { ChevronUpIcon } from "@heroicons/react/24/solid";
 import type { ReactElement, ReactNode } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
-import { getClass } from "../util/css.js";
+import { getFlexClass } from "../style/Flex.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps } from "../util/props.js";
 import DETAILS_CSS from "./Details.module.css";
 
-const DETAILS_CLASS = DETAILS_CSS.details;
-const DETAILS_SUMMARY_CLASS = DETAILS_CSS.summary;
+const DETAILS_CLASS = getModuleClass(DETAILS_CSS, "details");
+const DETAILS_SUMMARY_CLASS = getClass(getModuleClass(DETAILS_CSS, "summary"), getFlexClass({ between: true, gap: "normal" }));
 
-/** Props for `DetailsItem` — a single collapsible disclosure. */
+/**
+ * Props for `<Details>` — the summary title, the revealed content, and the open state.
+ *
+ * @see https://shelving.cc/ui/DetailsProps
+ */
 export interface DetailsProps extends BlockVariants, ClassProps {
 	/** Content of the always-visible summary (e.g. a question). */
 	title: ReactNode;
-	/** Whether the item starts expanded. */
+	/** Whether the panel starts expanded. */
 	open?: boolean | undefined;
-	/** Shared group name — items with the same `name` open exclusively (only one at a time). */
+	/** Shared group name — panels with the same `name` open exclusively (only one at a time). */
 	name?: string | undefined;
-	/** Content revealed when the item is expanded. */
+	/** Content revealed when the panel is expanded. */
 	children: ReactNode;
 }
 
 /**
- * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
- * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
- * - Give sibling items a shared `name` to make them open exclusively.
+ * A collapsible panel with a title that is always visible, built on native `<details>` and `<summary>`.
+ * - The panel animates to its true height (where `interpolate-size` and `::details-content` are supported).
+ * - Give sibling panels a shared `name` to make them open exclusively.
  *
  * @kind component
+ * @see https://shelving.cc/ui/Details
  */
 export function Details({ title, open = false, name, children, className, ...props }: DetailsProps): ReactElement {
 	return (

package/ui/block/Preformatted.module.css

@@ -15,7 +15,8 @@
 		margin-inline: 0;
 		margin-block: var(--preformatted-space, var(--space-paragraph));
 		border: var(--preformatted-border, var(--preformatted-stroke, var(--stroke-normal)) solid var(--tint-80));
-		padding: var(--preformatted-padding, var(--space-normal));
+		padding-block: var(--preformatted-padding, var(--space-normal));
+		padding-inline: var(--preformatted-indent, var(--space-normal));
 		border-radius: var(--preformatted-radius, var(--radius-normal));
 		width: 100%;
 		box-sizing: border-box;

package/ui/block/Video.module.css

@@ -14,7 +14,8 @@
 		margin-block: var(--video-space, var(--space-paragraph));
 		border: var(--video-border, none);
 		border-radius: var(--video-radius, var(--radius-normal));
-		padding: var(--video-padding, var(--space-normal));
+		padding-block: var(--video-padding, var(--space-normal));
+		padding-inline: var(--video-indent, var(--space-normal));
 
 		/* Contents */
 		display: flex;

package/ui/button/Button.md

@@ -59,7 +59,9 @@ import { getButtonClass } from "shelving/ui";
 
 `Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; apply `color=` / `status=` (on the button or an ancestor scope) to recolour the whole button, or use a per-property hook for one change.
 
-`--button-padding` and `--button-small-padding` set the `padding` shorthand, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-small) var(--space-normal)`).
+`--button-padding` sets the top and bottom padding, and `--button-indent` the left and right. Each takes one length, not a shorthand.
+
+Every button is at least as tall as a button with an icon, so buttons line up whether they have an icon or not, and at every text size. The minimum height is `--button-icon-size` plus two `--button-padding` plus two `--button-stroke`. It reads those hooks, so it stays correct when a theme changes them. Set `--button-height` to replace it. The `small` variant has its own minimum, `--button-small-height`. Inputs use the same formula (`--input-height`), so an input and a button sit at the same height by default.
 
 `--button-shadow`, `--button-hover-transform` and the `--button-active-*` pressed-state hooks are static and apply to every button, with one exception: `plain` never paints a box shadow in any state — it has no fill until hover, so a raised edge under it reads broken. The hover and pressed transforms still apply to it, so all buttons move together. `--button-transition` already covers animating the press and release.
 
@@ -77,8 +79,13 @@ Backgrounds paint to the button's true edge: `background-origin` is set to `bord
 | `--button-border` | Border shorthand | `var(--button-stroke) solid transparent` |
 | `--button-stroke` | Border / outline thickness | `var(--stroke-normal)` (2px) |
 | `--button-radius` | Corner radius | `var(--radius-xsmall)` (8px) |
-| `--button-padding` | Inner padding | `var(--space-small)` (12px) |
-| `--button-small-padding` | Inner padding when `small` | `var(--space-xxsmall)` (4px) |
+| `--button-padding` | Top and bottom padding (one length) | `var(--space-small)` (12px) |
+| `--button-indent` | Left and right padding (one length) | `var(--space-small)` (12px) |
+| `--button-small-padding` | Top and bottom padding when `small` (one length) | `var(--space-xxsmall)` (4px) |
+| `--button-small-indent` | Left and right padding when `small` (one length) | `var(--space-xxsmall)` (4px) |
+| `--button-icon-size` | Icon size, and the base of the minimum height | `var(--size-icon)` (24px) |
+| `--button-height` | Minimum height | `--button-icon-size` + 2 × `--button-padding` + 2 × `--button-stroke` (52px) |
+| `--button-small-height` | Minimum height when `small` | `--button-icon-size` + 2 × `--button-small-padding` + 2 × `--button-stroke` (36px) |
 | `--button-gap` | Gap between icon and label | `var(--space-small)` (12px) |
 | `--button-small-gap` | Gap between icon and label when `small` | `var(--space-xxsmall)` (4px) |
 | `--button-space` | Outer block margin | `var(--space-small)` (12px) |
@@ -101,13 +108,13 @@ Backgrounds paint to the button's true edge: `background-origin` is set to `bord
 | `--button-plain-active-background` | Fill while pressed when `plain` | `var(--button-plain-hover-background)` |
 | `--button-plain-active-border` | Border while pressed when `plain` | `var(--button-plain-hover-border)` |
 
-**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-55` / `--tint-95` / `--tint-100`, plus `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-normal`, `--size-normal`, `--leading`, and `--duration-fast`.
+**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-55` / `--tint-95` / `--tint-100`, plus `--size-icon`, `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-normal`, `--size-normal`, `--leading`, and `--duration-fast`.
 
 ```css
 /* Theme: pill-shaped buttons, with roomier inline padding. */
 :root {
   --button-radius: 999px;
-  --button-padding: var(--space-small) var(--space-normal);
+  --button-indent: var(--space-normal);
 }
 ```
 

package/ui/button/Button.module.css

@@ -17,7 +17,18 @@
 		max-inline-size: 100%;
 		border-radius: var(--button-radius, var(--radius-xsmall));
 		border: var(--button-border, var(--button-stroke, var(--stroke-normal)) solid transparent);
-		padding: var(--button-padding, var(--space-small));
+		padding-block: var(--button-padding, var(--space-small));
+		padding-inline: var(--button-indent, var(--space-small));
+		min-block-size: var(
+			--button-height,
+			calc(
+				var(--button-icon-size, var(--size-icon)) +
+				2 *
+				var(--button-padding, var(--space-small)) +
+				2 *
+				var(--button-stroke, var(--stroke-normal))
+			)
+		);
 		margin-inline: 0;
 		margin-block: var(--button-space, var(--space-small));
 
@@ -70,7 +81,23 @@
 		/* Variants */
 		&.small {
 			gap: var(--button-small-gap, var(--space-xxsmall));
-			padding: var(--button-small-padding, var(--space-xxsmall));
+			padding-block: var(--button-small-padding, var(--space-xxsmall));
+			padding-inline: var(--button-small-indent, var(--space-xxsmall));
+			min-block-size: var(
+				--button-small-height,
+				calc(
+					var(--button-icon-size, var(--size-icon)) +
+					2 *
+					var(--button-small-padding, var(--space-xxsmall)) +
+					2 *
+					var(--button-stroke, var(--stroke-normal))
+				)
+			);
+		}
+
+		/* Icons follow `--button-icon-size`, which also sets the minimum height. */
+		> [data-slot="icon"] {
+			font-size: var(--button-icon-size, var(--size-icon));
 		}
 
 		&.full {

package/ui/button/FullscreenButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 import { Button } from "./Button.js";
 /**

package/ui/button/FullscreenButton.tsx

@@ -1,4 +1,4 @@
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
 import { type ReactElement, useEffect, useState } from "react";
 import type { ClassProps } from "../util/props.js";
 import { Button, type ButtonVariants } from "./Button.js";

package/ui/button/RetryButton.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { createContext, use } from "react";
 import { Button } from "./Button.js";
 /**

package/ui/button/RetryButton.tsx

@@ -1,4 +1,4 @@
-import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { createContext, type ReactElement, use } from "react";
 import type { Callback } from "../../util/function.js";
 import type { ClassProps, OptionalChildProps } from "../util/index.js";

package/ui/dialog/Dialog.md

@@ -68,7 +68,8 @@ function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--dialog-padding` | Padding around the centred content | `var(--space-normal)` (16px) |
+| `--dialog-padding` | Top and bottom padding around the centred content (one length) | `var(--space-normal)` (16px) |
+| `--dialog-indent` | Left and right padding around the centred content (one length) | `var(--space-normal)` (16px) |
 | `--dialog-width` | Width of the centred content, and so of a centred `<Modal>` | `var(--width-narrow)` (36rem) |
 | `--dialog-background` | Overlay fill behind the content | `var(--shadow-color)` |
 | `--dialog-color` | Text colour directly on the overlay | `var(--tint-100)` (white) |

package/ui/dialog/Dialog.module.css

@@ -21,7 +21,8 @@
 
 		/* A scroll that reaches the top or bottom of the dialog stops there, and does not pass on to the page. */
 		overscroll-behavior: contain;
-		padding: var(--dialog-padding, var(--space-normal));
+		padding-block: var(--dialog-padding, var(--space-normal));
+		padding-inline: var(--dialog-indent, var(--space-normal));
 		border: none;
 
 		/* Style */

package/ui/dialog/Modal.md

@@ -105,7 +105,8 @@ A link click inside a `<Dialog>` closes it, so the menu slides out as the page c
 | `--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-padding` | Inner top and bottom padding (one length; the `padding` variant overrides it) | `var(--space-normal)` (16px) |
+| `--modal-indent` | Inner left and right padding (one length; the `indent` variant overrides it) | `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) |

package/ui/dialog/Modal.module.css

@@ -16,7 +16,8 @@
 		border: var(--modal-border, var(--modal-stroke, 0) solid var(--tint-80));
 		border-radius: var(--modal-radius, var(--radius-normal));
 		background: var(--modal-background, var(--tint-100));
-		padding: var(--modal-padding, var(--space-normal));
+		padding-block: var(--modal-padding, var(--space-normal));
+		padding-inline: var(--modal-indent, var(--space-normal));
 
 		/* Style */
 		color: var(--modal-color, var(--tint-00));

package/ui/inline/Code.md

@@ -45,7 +45,7 @@ import { Code } from "shelving/ui";
 | `--code-weight` | Font weight | `var(--weight-code)` |
 | `--code-size` | Font size | `var(--size-smaller)` |
 | `--code-leading` | Line height | `var(--leading)` |
-| `--code-padding` | Inline padding (non-`plain`) | `var(--space-xxsmall)` |
+| `--code-indent` | Left and right padding (one length; non-`plain`) | `var(--space-xxsmall)` |
 | `--code-radius` | Corner radius (non-`plain`) | `var(--radius-xxsmall)` |
 | `--code-background` | Background fill (non-`plain`) | `var(--tint-90)` |
 | `--code-color` | Text colour (non-`plain`) | `var(--tint-00)` |

package/ui/inline/Code.module.css

@@ -19,7 +19,7 @@
 	.prose :is(code, kbd, samp, var):not(pre *) {
 		/* Box */
 		display: inline-block;
-		padding-inline: var(--code-padding, var(--space-xxsmall));
+		padding-inline: var(--code-indent, var(--space-xxsmall));
 		border-radius: var(--code-radius, var(--radius-xxsmall));
 		vertical-align: baseline;
 

package/ui/inline/Mark.md

@@ -27,7 +27,7 @@ import { Mark } from "shelving/ui";
 | `--mark-tint` | Highlight hue, mixed 50% with `transparent` for the background | `var(--color-yellow)` |
 | `--mark-background` | Background fill | `color-mix(in oklch, var(--mark-tint, var(--color-yellow)), transparent)` |
 | `--mark-color` | Text colour | `var(--tint-00)` |
-| `--mark-padding` | Inline padding | `var(--space-xxsmall)` |
+| `--mark-indent` | Left and right padding (one length) | `var(--space-xxsmall)` |
 | `--mark-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--mark-weight` | Font weight | `var(--weight-strong)` |
 

package/ui/inline/Mark.module.css

@@ -9,7 +9,7 @@
 	.prose mark {
 		/* Box */
 		display: inline-block;
-		padding-inline: var(--mark-padding, var(--space-xxsmall));
+		padding-inline: var(--mark-indent, var(--space-xxsmall));
 		border-radius: var(--mark-radius, var(--radius-xxsmall));
 		vertical-align: baseline;
 

package/ui/input/Input.module.css

@@ -16,7 +16,20 @@
 		margin-block: var(--input-space, var(--space-small));
 		border-radius: var(--input-radius, var(--radius-xsmall));
 		border: var(--input-border, var(--input-stroke, var(--stroke-normal)) solid var(--tint-80));
-		padding: var(--input-padding, var(--space-small));
+		padding-block: var(--input-padding, var(--space-small));
+		padding-inline: var(--input-indent, var(--space-small));
+
+		/* Match `--button-height`, so an input and a button with an icon sit at the same height. */
+		min-block-size: var(
+			--input-height,
+			calc(
+				var(--input-icon-size, var(--size-icon)) +
+				2 *
+				var(--input-padding, var(--space-small)) +
+				2 *
+				var(--input-stroke, var(--stroke-normal))
+			)
+		);
 
 		/* Style */
 		background: var(--input-background, var(--tint-100));
@@ -45,7 +58,7 @@
 			background-repeat: no-repeat;
 			background-size: var(--input-icon-size, var(--size-icon));
 			padding-right: 2.5em;
-			background-position: right var(--input-padding, var(--space-small)) center;
+			background-position: right var(--input-indent, var(--space-small)) center;
 			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS40NyA0LjcyYS43NS43NSAwIDAgMSAxLjA2IDBsMy43NSAzLjc1YS43NS43NSAwIDAgMS0xLjA2IDEuMDZMMTIgNi4zMSA4Ljc4IDkuNTNhLjc1Ljc1IDAgMCAxLTEuMDYtMS4wNmwzLjc1LTMuNzVabS0zLjc1IDkuNzVhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNy42OWwzLjIyLTMuMjJhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtMy43NSAzLjc1YS43NS43NSAwIDAgMS0xLjA2IDBsLTMuNzUtMy43NWEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPgo=");
 
 			/* Placeholder colour if contains checked empty option. */
@@ -130,45 +143,48 @@
 
 		/* Children */
 		> .input {
-			/* Nested inputs don't double up border or padding. */
+			/* Nested inputs don't double up border, padding, or minimum height. */
 			padding: 0;
 			border: 0;
 			margin: 0;
 			outline: 0;
+			min-block-size: 0;
 		}
 
 		&.wrapper {
 			position: relative;
 
-			/* Absolutely position any slotted element and center it vertically. */
+			/* Absolutely position any slotted element as an icon-sized square, centred vertically. Auto block margins centre it, which also works for a bare `<svg>`. */
 			& > [data-slot] {
 				position: absolute;
 				inset-block: 0;
+				margin-block: auto;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				inline-size: calc(var(--input-padding, var(--space-small)) + var(--input-icon-size, var(--size-icon)));
+				inline-size: var(--input-icon-size, var(--size-icon));
+				block-size: var(--input-icon-size, var(--size-icon));
 				pointer-events: none;
 			}
 
-			/* First [data-slot] child anchors to the left. */
+			/* First [data-slot] child sits one indent from the start, where the text of a plain input starts. */
 			& > [data-slot]:first-child {
-				inset-inline-start: 0;
+				inset-inline-start: var(--input-indent, var(--space-small));
 			}
 
-			/* Last [data-slot] child anchors to the right. */
+			/* Last [data-slot] child sits one indent from the end. */
 			& > [data-slot]:last-child {
-				inset-inline-end: 0;
+				inset-inline-end: var(--input-indent, var(--space-small));
 			}
 
-			/* Push the inner .input left padding to clear the left slot. */
+			/* Push the inner .input text past the start slot, with one indent gap. */
 			&:has(> [data-slot]:first-child) > .input {
-				padding-inline-start: var(--input-icon-size, var(--size-icon));
+				padding-inline-start: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
 			}
 
-			/* Push the inner .input right padding to clear the right slot. */
+			/* Push the inner .input text clear of the end slot, with one indent gap. */
 			&:has(> [data-slot]:last-child) > .input {
-				padding-inline-end: var(--input-icon-size, var(--size-icon));
+				padding-inline-end: calc(var(--input-icon-size, var(--size-icon)) + var(--input-indent, var(--space-small)));
 			}
 		}
 	}

package/ui/input/Popover.module.css

@@ -17,7 +17,8 @@
 		max-height: var(--popover-height, 30vh);
 		border-radius: var(--popover-radius, var(--radius-xsmall));
 		border: var(--popover-border, var(--popover-stroke, var(--stroke-normal)) solid var(--tint-80));
-		padding: var(--popover-padding, var(--space-small));
+		padding-block: var(--popover-padding, var(--space-small));
+		padding-inline: var(--popover-indent, var(--space-small));
 
 		/* Scrolling */
 		overflow: hidden auto;

package/ui/menu/Menu.md

@@ -35,7 +35,8 @@ import { Menu, MenuItem } from "shelving/ui";
 | `--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-xsmall)` |
+| `--menu-padding` | Item link top and bottom padding (one length) | `var(--space-xsmall)` |
+| `--menu-indent` | Item link left and right padding (one length; 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

@@ -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-xsmall));
+			margin-inline-start: var(--menu-indent, 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));
 		}
@@ -41,7 +41,8 @@
 		display: block;
 		box-sizing: border-box;
 		inline-size: 100%;
-		padding: var(--menu-padding, var(--space-xsmall));
+		padding-block: var(--menu-padding, var(--space-xsmall));
+		padding-inline: var(--menu-indent, var(--space-xsmall));
 		border: none;
 		border-radius: var(--menu-radius, var(--radius-xsmall));
 

package/ui/menu/MenuItem.md

@@ -31,7 +31,8 @@ The item link's hooks (defined in `Menu.module.css`):
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--menu-padding` | Link inner padding | `var(--space-xsmall)` |
+| `--menu-padding` | Link top and bottom padding (one length) | `var(--space-xsmall)` |
+| `--menu-indent` | Link left and right padding (one length) | `var(--space-xsmall)` |
 | `--menu-radius` | Link corner radius | `var(--radius-xsmall)` |
 | `--menu-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 | `--menu-hover-background` | Link fill on hover/focus | `var(--tint-90)` |

package/ui/misc/Tag.md

@@ -27,7 +27,8 @@ import { Tag } from "shelving/ui";
 | `--tag-background` | Surface fill | `var(--tint-50)` |
 | `--tag-hover-background` | Surface fill when an interactive tag is hovered | `var(--tint-55)` |
 | `--tag-color` | Text colour | `var(--tint-100)` |
-| `--tag-padding` | Inner padding | `0 var(--space-xxsmall)` |
+| `--tag-padding` | Inner top and bottom padding (one length) | `0` |
+| `--tag-indent` | Inner left and right padding (one length) | `var(--space-xxsmall)` (4px) |
 | `--tag-border` | Border shorthand | `0` |
 | `--tag-radius` | Corner radius | `var(--radius-xxsmall)` |
 | `--tag-font` | Font family | `var(--font-body)` |

package/ui/misc/Tag.module.css

@@ -15,7 +15,8 @@
 		inline-size: fit-content;
 		min-inline-size: fit-content;
 		max-inline-size: 100%;
-		padding: var(--tag-padding, 0 var(--space-xxsmall));
+		padding-block: var(--tag-padding, 0);
+		padding-inline: var(--tag-indent, var(--space-xxsmall));
 		border: var(--tag-border, 0);
 		border-radius: var(--tag-radius, var(--radius-xxsmall));
 

package/ui/notice/Notice.md

@@ -37,7 +37,8 @@ import { LOADING_NOTICE } from "shelving/ui";
 | `--notice-border` | Border shorthand | `var(--notice-stroke) solid var(--tint-80)` |
 | `--notice-stroke` | Border thickness | `var(--stroke-normal)` (2px) |
 | `--notice-radius` | Corner radius | `var(--radius-xsmall)` |
-| `--notice-padding` | Inner padding | `var(--space-small)` |
+| `--notice-padding` | Inner top and bottom padding (one length) | `var(--space-small)` (12px) |
+| `--notice-indent` | Inner left and right padding (one length) | `var(--space-small)` (12px) |
 | `--notice-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` |
 | `--notice-size` | Font size | `var(--size-normal)` |
 | `--notice-weight` | Font weight | `var(--weight-strong)` |

package/ui/notice/Notice.module.css

@@ -10,7 +10,8 @@
 		margin-block: var(--notice-space, var(--space-paragraph));
 		border-radius: var(--notice-radius, var(--radius-xsmall));
 		border: var(--notice-border, var(--notice-stroke, var(--stroke-normal)) solid var(--tint-80));
-		padding: var(--notice-padding, var(--space-small));
+		padding-block: var(--notice-padding, var(--space-small));
+		padding-inline: var(--notice-indent, var(--space-small));
 
 		/* Style */
 		background: var(--notice-background, var(--tint-90));

package/ui/table/Table.md

@@ -34,12 +34,13 @@ import { Table } from "shelving/ui";
 
 `Table` exposes hooks for its rhythm, cell padding, and border; it paints no surface of its own, so it inherits the surrounding tint.
 
-`--table-padding` sets the `padding` shorthand on each cell, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-xxsmall) var(--space-small)`). The outermost columns still drop their outer inline padding, and `<thead>` / `<tfoot>` their outer block padding, so the table stays flush with its container.
+`--table-padding` sets the top and bottom padding of each cell, and `--table-indent` the left and right. Each takes one length. The outermost columns still drop their outer inline padding, and `<thead>` / `<tfoot>` their outer block padding, so the table stays flush with its container.
 
 | Variable | Styles | Default |
 |---|---|---|
 | `--table-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
-| `--table-padding` | Cell padding | `var(--space-xsmall)` |
+| `--table-padding` | Cell top and bottom padding (one length) | `var(--space-xsmall)` (8px) |
+| `--table-indent` | Cell left and right padding (one length) | `var(--space-xsmall)` (8px) |
 | `--table-border` | Cell border shorthand | `var(--table-stroke)` |
 | `--table-stroke` | Cell border thickness/colour | `var(--stroke-normal) solid var(--tint-80)` |
 | `--table-header-weight` | Weight of `<thead>` / `<tfoot>` / `<tbody> <th>` cells | `var(--weight-strong)` |

package/ui/table/Table.module.css

@@ -20,7 +20,8 @@
 		/* Children */
 		th,
 		td {
-			padding: var(--table-padding, var(--space-xsmall));
+			padding-block: var(--table-padding, var(--space-xsmall));
+			padding-inline: var(--table-indent, var(--space-xsmall));
 			border-block: var(--table-border, var(--table-stroke, var(--stroke-normal) solid var(--tint-80)));
 		}