shelving 1.286.1 → 1.288.0

package/package.json

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

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/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.d.ts

@@ -10,8 +10,19 @@ import { type ClickableProps } from "./Clickable.js";
  * @see https://shelving.cc/ui/ButtonVariants
  */
 export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
-    /** Add plain styling (no background or border until hover or focus). */
+    /** Solid styling: a strong fill of the tint colour with white text. Use it for the main action. */
+    solid?: boolean | undefined;
+    /** Plain styling: no fill or border until hover or focus. */
     plain?: boolean | undefined;
+    /** Outline styling: like `plain`, but with a border until hover or focus. */
+    outline?: boolean | undefined;
+    /**
+     * Whether the button is the selected one in a group, such as a set of tabs.
+     * - `true` sets `aria-pressed` (or `aria-current` on a link) and keeps the button's normal look.
+     * - `false` also drops the fill until hover or focus, so the selected button stands out.
+     * - `undefined` (the default) means the button is not part of a group.
+     */
+    selected?: boolean | undefined;
     /** Make the button appear smaller. */
     small?: boolean | undefined;
     /** Fill the available width instead of sizing to content (buttons are content-width by default). */
@@ -35,7 +46,9 @@ export interface ButtonProps extends ButtonVariants, ClickableProps, ClassProps
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
  * - Content-width by default (never grows); it won't shrink below its label. Pass `full` to fill the available width.
- * - Filled by default — use `color=` / `status=` for emphasis, or `plain` to de-emphasise.
+ * - Light by default (a pale fill with dark text). Use `solid` for the main action, or `plain` / `outline` to de-emphasise.
+ * - `color=` / `status=` set the colour of every look.
+ * - Pass `selected` to make a group of buttons (such as tabs): the selected one keeps its look, the others drop their fill.
  * - Accepts all `ButtonVariants` styling props plus the `ClickableProps` (`onClick`, `href`, `disabled`, etc.).
  *
  * @kind component

package/ui/button/Button.js

@@ -13,12 +13,14 @@ import { Clickable } from "./Clickable.js";
  * @see https://shelving.cc/ui/getButtonClass
  */
 export function getButtonClass(variants) {
-    return getClass(getModuleClass(BUTTON_CSS, "button", variants), getFlexClass(variants), getStatusClass(variants), getTypographyClass(variants));
+    return getClass(getModuleClass(BUTTON_CSS, "button", variants, variants.selected === false && "unselected"), getFlexClass(variants), getStatusClass(variants), getTypographyClass(variants));
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
  * - Content-width by default (never grows); it won't shrink below its label. Pass `full` to fill the available width.
- * - Filled by default — use `color=` / `status=` for emphasis, or `plain` to de-emphasise.
+ * - Light by default (a pale fill with dark text). Use `solid` for the main action, or `plain` / `outline` to de-emphasise.
+ * - `color=` / `status=` set the colour of every look.
+ * - Pass `selected` to make a group of buttons (such as tabs): the selected one keeps its look, the others drop their fill.
  * - Accepts all `ButtonVariants` styling props plus the `ClickableProps` (`onClick`, `href`, `disabled`, etc.).
  *
  * @kind component

package/ui/button/Button.md

@@ -1,12 +1,18 @@
 # Button
 
-A clickable styled as a solid button. Renders an `<a href="">` when given `href`, or a `<button>` when given `onClick` — the shared `<Clickable>` primitive picks the element, so a button is always the right semantics for what it does.
+A clickable styled as a button. Renders an `<a href="">` when given `href`, or a `<button>` when given `onClick` — the shared `<Clickable>` primitive picks the element, so a button is always the right semantics for what it does.
 
 **Things to know:**
 
 - Content-width by default: it sizes to its label and never grows. Pass `full` to fill the available width (it then shrinks to share a row, down to the content floor).
-- Every button is filled. Emphasis comes from colour: `color=` / `status=` move the tint anchor, so `color="primary"` marks the main action and a colourless button stays a neutral grey.
-- `plain` de-emphasises — no fill or border until hover/focus, for chrome-level actions like breadcrumbs and a dialog's close button. Set `--button-plain-border` to give plain buttons a resting edge when they need to hold their shape.
+- There are four looks:
+  - **Default** — a pale fill of the tint colour with the tint colour as text. Use it for most actions.
+  - **`solid`** — a strong fill of the tint colour with white text. Use it for the main action on a screen, such as a form's submit button.
+  - **`plain`** — no fill or border until hover or focus. Use it for chrome-level actions, such as breadcrumbs and a dialog's close button.
+  - **`outline`** — like `plain`, but with a border until hover or focus.
+- On hover, `plain` and `outline` take the same fill as a hovered default button.
+- `color=` / `status=` move the tint anchor, so they set the colour of every look. A colourless button stays a neutral grey.
+- `selected` makes a group of buttons, such as tabs. `selected={true}` sets `aria-pressed` (or `aria-current` on a link) and keeps the button's normal look. `selected={false}` also drops the fill until hover or focus, like `plain`, so the selected button stands out. Leave it `undefined` for a button that is not in a group.
 - `small` tightens the padding.
 - `getButtonClass(variants)` returns the same `className` the component composes — use it to style a non-`<button>` element as a button when `Button` itself doesn't fit.
 - `className` attaches an app class to one button, merged after the computed classes so an app stylesheet wins — see `ClassProps`.
@@ -18,9 +24,10 @@ A clickable styled as a solid button. Renders an `<a href="">` when given `href`
 ```tsx
 import { Button } from "shelving/ui";
 
-<Button onClick={save} color="primary">Save</Button>
+<Button onClick={save} solid color="primary">Save</Button>
 <Button href="/about">About</Button>
 <Button onClick={remove} status="error">Delete</Button>
+<Button onClick={share} outline>Share</Button>
 ```
 
 ### A row of buttons
@@ -31,7 +38,21 @@ import { Row } from "shelving/ui";
 
 <Row gap="small" right>
   <Button plain onClick={cancel}>Cancel</Button>
-  <Button color="primary" onClick={submit}>Continue</Button>
+  <Button solid color="primary" onClick={submit}>Continue</Button>
+</Row>
+```
+
+### Tabs
+
+```tsx
+import { Button, Row } from "shelving/ui";
+
+<Row gap="xsmall">
+  {SECTIONS.map(({ key, label }) => (
+    <Button key={key} small solid selected={key === section} onClick={() => setSection(key)}>
+      {label}
+    </Button>
+  ))}
 </Row>
 ```
 
@@ -50,7 +71,7 @@ import { Button } from "shelving/ui";
 import { getButtonClass } from "shelving/ui";
 
 // Style an arbitrary element as a button.
-<label className={getButtonClass({ color: "primary", small: true })}>
+<label className={getButtonClass({ color: "primary", solid: true, small: true })}>
   Upload<input type="file" hidden />
 </label>
 ```
@@ -59,26 +80,35 @@ 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.
+
+The `--button-*` colour hooks without a look in their name paint the default look. `solid` has its own `--button-solid-*` colour hooks.
 
-`--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.
+`--button-shadow`, `--button-hover-transform` and the `--button-active-*` pressed-state hooks are static and apply to every button, with one exception: `plain` and `outline` never paint a box shadow in any state — they have no fill until hover, so a raised edge under them reads broken. The hover and pressed transforms still apply to them, so all buttons move together. `--button-transition` already covers animating the press and release.
 
-`plain` carries its own hooks for where it differs: `--button-plain-text` recolours the label, `--button-plain-hover-background` / `--button-plain-hover-border` paint the hover and focus state, the `--button-plain-active-*` pair paints the pressed state (falling back to the plain hover hooks), and `--button-plain-border` sets the resting border — transparent by default, so a theme where plain buttons should keep a visible edge (an "outline" button) sets it once. The hover border falls back through `--button-hover-border`, so a theme that borders every hovered button also borders hovered plain ones.
+`plain`, `outline` and `selected={false}` share the `--button-plain-*` hooks: `--button-plain-text` recolours the label, `--button-plain-hover-background` / `--button-plain-hover-border` paint the hover and focus state, and the `--button-plain-active-*` pair paints the pressed state. The hover fill falls back to `--button-hover-background`, so plain and outline buttons always hover like a default button. `--button-plain-border` sets the resting border of `plain` (transparent by default), and `--button-outline-border` sets the resting border of `outline`.
 
 Backgrounds paint to the button's true edge: `background-origin` is set to `border-box`, so a gradient or image background in any state reaches through the transparent border instead of stopping 2px short at the padding box.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--button-background` | Surface fill | `var(--tint-50)` |
-| `--button-hover-background` | Surface fill on hover / focus | `var(--tint-55)` |
+| `--button-background` | Surface fill | `var(--tint-90)` |
+| `--button-hover-background` | Surface fill on hover / focus | `var(--tint-85)` |
 | `--button-hover-border` | Border on hover / focus | `var(--button-stroke) solid transparent` |
 | `--button-hover-transform` | Transform on hover / focus | `none` |
-| `--button-text` | Label colour | `var(--tint-100)` |
+| `--button-text` | Label colour | `var(--tint-50)` |
 | `--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) |
@@ -94,33 +124,38 @@ Backgrounds paint to the button's true edge: `background-origin` is set to `bord
 | `--button-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--button-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 | `--button-disabled-opacity` | Opacity when disabled | `0.5` |
-| `--button-plain-text` | Label colour when `plain` | `var(--tint-50)` |
+| `--button-solid-background` | Surface fill when `solid` | `var(--tint-50)` |
+| `--button-solid-text` | Label colour when `solid` | `var(--tint-100)` (white) |
+| `--button-solid-hover-background` | Surface fill on hover / focus when `solid` | `var(--tint-55)` |
+| `--button-solid-active-background` | Surface fill while pressed when `solid` | `var(--button-solid-hover-background)` |
+| `--button-plain-text` | Label colour when `plain` or `outline` | `var(--tint-50)` |
 | `--button-plain-border` | Resting border when `plain` | `var(--button-stroke) solid transparent` |
-| `--button-plain-hover-background` | Fill on hover / focus when `plain` | `var(--tint-95)` |
-| `--button-plain-hover-border` | Border on hover / focus when `plain` | `var(--button-hover-border)` (transparent) |
-| `--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)` |
+| `--button-outline-border` | Resting border when `outline` | `var(--button-stroke) solid var(--tint-80)` |
+| `--button-unselected-background` | Resting fill when `selected={false}` | `transparent` |
+| `--button-plain-hover-background` | Fill on hover / focus when `plain` or `outline` | `var(--button-hover-background)` |
+| `--button-plain-hover-border` | Border on hover / focus when `plain` or `outline` | `var(--button-hover-border)` (transparent) |
+| `--button-plain-active-background` | Fill while pressed when `plain` or `outline` | `var(--button-plain-hover-background)` |
+| `--button-plain-active-border` | Border while pressed when `plain` or `outline` | `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-80` / `--tint-85` / `--tint-90` / `--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);
 }
 ```
 
 ```css
-/* Theme: plain buttons keep an edge, so a quiet button holds its shape next to a filled one. */
+/* Theme: outline buttons use the label colour for their edge. */
 :root {
-  --button-plain-border: var(--stroke-normal) solid var(--tint-80);
-  --button-plain-hover-border: var(--stroke-normal) solid var(--tint-80);
+  --button-outline-border: var(--stroke-normal) solid var(--tint-50);
 }
 ```
 
 ```css
-/* Theme: buttons are raised and press down flat — `plain` presses down too but never casts a shadow. */
+/* Theme: buttons are raised and press down flat — `plain` and `outline` press down too but never casts a shadow. */
 :root {
   --button-shadow: 0 0.25rem 0 var(--tint-30);
   --button-active-transform: translateY(0.2rem);

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));
 
@@ -29,8 +40,8 @@
 		align-items: center;
 
 		/* Style. */
-		background: var(--button-background, var(--tint-50));
-		color: var(--button-text, var(--tint-100));
+		background: var(--button-background, var(--tint-90));
+		color: var(--button-text, var(--tint-50));
 		box-shadow: var(--button-shadow, none);
 		transition: var(--button-transition, all var(--duration-fast));
 		cursor: pointer;
@@ -55,14 +66,14 @@
 		&:any-link:hover,
 		&:focus:not(:focus-visible) {
 			border: var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid transparent);
-			background: var(--button-hover-background, var(--tint-55));
+			background: var(--button-hover-background, var(--tint-85));
 			transform: var(--button-hover-transform, none);
 		}
 
 		&:enabled:active,
 		&:any-link:active {
 			border: var(--button-active-border, var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid transparent));
-			background: var(--button-active-background, var(--button-hover-background, var(--tint-55)));
+			background: var(--button-active-background, var(--button-hover-background, var(--tint-85)));
 			transform: var(--button-active-transform, var(--button-hover-transform, none));
 			box-shadow: var(--button-active-shadow, var(--button-shadow, none));
 		}
@@ -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 {
@@ -78,15 +105,32 @@
 			inline-size: 100%;
 		}
 
-		&.plain {
+		&.solid {
+			background: var(--button-solid-background, var(--tint-50));
+			color: var(--button-solid-text, var(--tint-100));
+
+			&:enabled:hover,
+			&:any-link:hover,
+			&:focus:not(:focus-visible) {
+				background: var(--button-solid-hover-background, var(--tint-55));
+			}
+
+			&:enabled:active,
+			&:any-link:active {
+				background: var(--button-solid-active-background, var(--button-solid-hover-background, var(--tint-55)));
+			}
+		}
+
+		/* Plain, outline and unselected share one look: no fill until hover, then the default button's hover fill. */
+		&:is(.plain, .outline, .unselected) {
 			color: var(--button-plain-text, var(--tint-50));
 
-			/* Plain includes plain `:focus` so a keyboard-focused button paints its fill and stays legible. */
+			/* Includes plain `:focus` so a keyboard-focused button paints its fill and stays legible. */
 			&:enabled:hover,
 			&:any-link:hover,
 			&:focus {
 				border: var(--button-plain-hover-border, var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid transparent));
-				background: var(--button-plain-hover-background, var(--tint-95));
+				background: var(--button-plain-hover-background, var(--button-hover-background, var(--tint-85)));
 			}
 
 			&:enabled:active,
@@ -95,7 +139,10 @@
 					--button-plain-active-border,
 					var(--button-plain-hover-border, var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid transparent))
 				);
-				background: var(--button-plain-active-background, var(--button-plain-hover-background, var(--tint-95)));
+				background: var(
+					--button-plain-active-background,
+					var(--button-plain-hover-background, var(--button-active-background, var(--button-hover-background, var(--tint-85))))
+				);
 			}
 		}
 	}
@@ -120,7 +167,7 @@
 		}
 
 		/* Variants */
-		&.plain {
+		&:is(.plain, .outline, .unselected) {
 			box-shadow: none;
 
 			&:not(:enabled:hover, :any-link:hover, :active, :focus) {
@@ -128,5 +175,13 @@
 				background: transparent;
 			}
 		}
+
+		&.unselected:not(:enabled:hover, :any-link:hover, :active, :focus) {
+			background: var(--button-unselected-background, transparent);
+		}
+
+		&.outline:not(:enabled:hover, :any-link:hover, :active, :focus) {
+			border: var(--button-outline-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-80));
+		}
 	}
 }

package/ui/button/Button.tsx

@@ -13,8 +13,19 @@ import { Clickable, type ClickableProps } from "./Clickable.js";
  * @see https://shelving.cc/ui/ButtonVariants
  */
 export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
-	/** Add plain styling (no background or border until hover or focus). */
+	/** Solid styling: a strong fill of the tint colour with white text. Use it for the main action. */
+	solid?: boolean | undefined;
+	/** Plain styling: no fill or border until hover or focus. */
 	plain?: boolean | undefined;
+	/** Outline styling: like `plain`, but with a border until hover or focus. */
+	outline?: boolean | undefined;
+	/**
+	 * Whether the button is the selected one in a group, such as a set of tabs.
+	 * - `true` sets `aria-pressed` (or `aria-current` on a link) and keeps the button's normal look.
+	 * - `false` also drops the fill until hover or focus, so the selected button stands out.
+	 * - `undefined` (the default) means the button is not part of a group.
+	 */
+	selected?: boolean | undefined;
 	/** Make the button appear smaller. */
 	small?: boolean | undefined;
 	/** Fill the available width instead of sizing to content (buttons are content-width by default). */
@@ -30,7 +41,7 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, Typography
  */
 export function getButtonClass(variants: ButtonVariants): string {
 	return getClass(
-		getModuleClass(BUTTON_CSS, "button", variants),
+		getModuleClass(BUTTON_CSS, "button", variants, variants.selected === false && "unselected"),
 		getFlexClass(variants),
 		getStatusClass(variants),
 		getTypographyClass(variants),
@@ -47,7 +58,9 @@ export interface ButtonProps extends ButtonVariants, ClickableProps, ClassProps
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
  * - Content-width by default (never grows); it won't shrink below its label. Pass `full` to fill the available width.
- * - Filled by default — use `color=` / `status=` for emphasis, or `plain` to de-emphasise.
+ * - Light by default (a pale fill with dark text). Use `solid` for the main action, or `plain` / `outline` to de-emphasise.
+ * - `color=` / `status=` set the colour of every look.
+ * - Pass `selected` to make a group of buttons (such as tabs): the selected one keeps its look, the others drop their fill.
  * - Accepts all `ButtonVariants` styling props plus the `ClickableProps` (`onClick`, `href`, `disabled`, etc.).
  *
  * @kind component

package/ui/button/Clickable.d.ts

@@ -30,6 +30,8 @@ export interface ClickableProps extends OptionalChildProps {
     download?: string | undefined;
     /** Title shown on hover. */
     title?: string | undefined;
+    /** Whether this is the selected item in a group. Sets `aria-pressed` on a `<button>`, or `aria-current` on an `<a>`. */
+    selected?: boolean | undefined;
 }
 /**
  * Props for a clickable that also accepts a `className` for styling.
@@ -57,7 +59,7 @@ export declare function Clickable(props: StylableClickableProps): ReactElement;
  * @example <LinkClickable href="/about" className="link">About</LinkClickable>
  * @see https://shelving.cc/ui/LinkClickable
  */
-export declare function LinkClickable({ href, disabled, target, download, title, children, className, }: StylableClickableProps): ReactElement;
+export declare function LinkClickable({ href, disabled, target, download, title, selected, children, className, }: StylableClickableProps): ReactElement;
 /**
  * Render a `<button>` element that runs its `onClick` handler through a `BusyStore` and shows a loading spinner while busy.
  * - Notifies the user of the handler's returned value (success) or thrown value (error).
@@ -66,7 +68,7 @@ export declare function LinkClickable({ href, disabled, target, download, title,
  * @example <ButtonClickable onClick={save} className="btn">Save</ButtonClickable>
  * @see https://shelving.cc/ui/ButtonClickable
  */
-export declare function ButtonClickable({ onClick, disabled, title, children, className, }: StylableClickableProps): ReactElement;
+export declare function ButtonClickable({ onClick, disabled, title, selected, children, className, }: StylableClickableProps): ReactElement;
 /**
  * Render a non-interactive `<span>` element, used as the fallback when neither `href` nor `onClick` is provided.
  *

package/ui/button/Clickable.js

@@ -29,13 +29,13 @@ export function Clickable(props) {
  * @example <LinkClickable href="/about" className="link">About</LinkClickable>
  * @see https://shelving.cc/ui/LinkClickable
  */
-export function LinkClickable({ href, disabled = !href, target, download, title, children = "Go", className, }) {
+export function LinkClickable({ href, disabled = !href, target, download, title, selected, children = "Go", className, }) {
     // Resolve `href` against the current page URL and site root so site-absolute paths (`/foo`) honour the base subfolder.
     const { url, root } = requireMeta();
     const link = disabled ? undefined : getLink(href, url, root);
     // Is this link "active" compared to the current URL?
     const active = isURLActive(link, url);
-    return (_jsx("a", { href: link?.href, title: title, download: download, target: target, className: getClass(className) || undefined, "aria-current": active ? "page" : undefined, children: children }));
+    return (_jsx("a", { href: link?.href, title: title, download: download, target: target, className: getClass(className) || undefined, "aria-current": active ? "page" : selected ? "true" : undefined, children: children }));
 }
 /**
  * Render a `<button>` element that runs its `onClick` handler through a `BusyStore` and shows a loading spinner while busy.
@@ -45,12 +45,12 @@ export function LinkClickable({ href, disabled = !href, target, download, title,
  * @example <ButtonClickable onClick={save} className="btn">Save</ButtonClickable>
  * @see https://shelving.cc/ui/ButtonClickable
  */
-export function ButtonClickable({ onClick, disabled = !onClick, title, children = "Click", className, }) {
+export function ButtonClickable({ onClick, disabled = !onClick, title, selected, children = "Click", className, }) {
     // Create a `BusyStore<undefined>` to keep track of the `onClick` call and any thrown errors.
     const store = useInstance(BusyStore, undefined);
     // Track the `busy/unbusy` state of the button to show a loading spinner appropriately.
     const busy = useStore(store.busy).value;
-    return (_jsx("button", { type: "button", title: title, disabled: busy || disabled, className: getClass(className) || undefined, onClick: disabled
+    return (_jsx("button", { type: "button", title: title, "aria-pressed": selected, disabled: busy || disabled, className: getClass(className) || undefined, onClick: disabled
             ? undefined
             : e => {
                 if (!store.busy.value && onClick) {

package/ui/button/Clickable.tsx

@@ -41,6 +41,8 @@ export interface ClickableProps extends OptionalChildProps {
 	download?: string | undefined;
 	/** Title shown on hover. */
 	title?: string | undefined;
+	/** Whether this is the selected item in a group. Sets `aria-pressed` on a `<button>`, or `aria-current` on an `<a>`. */
+	selected?: boolean | undefined;
 }
 
 /**
@@ -84,6 +86,7 @@ export function LinkClickable({
 	target,
 	download,
 	title,
+	selected,
 	children = "Go",
 	className,
 }: StylableClickableProps): ReactElement {
@@ -101,7 +104,7 @@ export function LinkClickable({
 			download={download}
 			target={target}
 			className={getClass(className) || undefined}
-			aria-current={active ? "page" : undefined}
+			aria-current={active ? "page" : selected ? "true" : undefined}
 		>
 			{children}
 		</a>
@@ -120,6 +123,7 @@ export function ButtonClickable({
 	onClick,
 	disabled = !onClick,
 	title,
+	selected,
 	children = "Click",
 	className,
 }: StylableClickableProps): ReactElement {
@@ -133,6 +137,7 @@ export function ButtonClickable({
 		<button //
 			type="button"
 			title={title}
+			aria-pressed={selected}
 			disabled={busy || disabled}
 			className={getClass(className) || undefined}
 			onClick={

package/ui/button/SubmitButton.d.ts

@@ -6,6 +6,7 @@ import { type ButtonVariants } from "./Button.js";
  *
  * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
  * @property color - The color variant of the button. Defaults to `"primary"`
+ * @property solid - Solid styling. Defaults to `true`
  *
  * @see https://shelving.cc/ui/SubmitButtonProps
  */
@@ -13,10 +14,10 @@ export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps, C
 }
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
- * - Defaults to full-width, primary styling and a "Save" label.
+ * - Defaults to full-width, solid primary styling and a "Save" label.
  *
  * @returns A `<button type="submit">` element bound to the current form.
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export declare function SubmitButton({ children, color, full, className, ...props }: SubmitButtonProps): ReactElement;
+export declare function SubmitButton({ children, color, solid, full, className, ...props }: SubmitButtonProps): ReactElement;

package/ui/button/SubmitButton.js

@@ -8,14 +8,14 @@ import { getButtonClass } from "./Button.js";
 const _SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
- * - Defaults to full-width, primary styling and a "Save" label.
+ * - Defaults to full-width, solid primary styling and a "Save" label.
  *
  * @returns A `<button type="submit">` element bound to the current form.
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export function SubmitButton({ children = _SUBMIT_CHILDREN, color = "primary", full = true, className, ...props }) {
+export function SubmitButton({ children = _SUBMIT_CHILDREN, color = "primary", solid = true, full = true, className, ...props }) {
     const form = requireForm();
     const busy = useStore(form.busy).value;
-    return (_jsx("button", { type: "submit", disabled: busy, className: getClass(getButtonClass({ color, full, ...props }), className), children: busy ? LOADING : children }));
+    return (_jsx("button", { type: "submit", disabled: busy, className: getClass(getButtonClass({ color, solid, full, ...props }), className), children: busy ? LOADING : children }));
 }

package/ui/button/SubmitButton.tsx

@@ -12,6 +12,7 @@ import { type ButtonVariants, getButtonClass } from "./Button.js";
  *
  * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
  * @property color - The color variant of the button. Defaults to `"primary"`
+ * @property solid - Solid styling. Defaults to `true`
  *
  * @see https://shelving.cc/ui/SubmitButtonProps
  */
@@ -26,7 +27,7 @@ const _SUBMIT_CHILDREN = (
 
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
- * - Defaults to full-width, primary styling and a "Save" label.
+ * - Defaults to full-width, solid primary styling and a "Save" label.
  *
  * @returns A `<button type="submit">` element bound to the current form.
  * @example <SubmitButton>Save changes</SubmitButton>
@@ -35,6 +36,7 @@ const _SUBMIT_CHILDREN = (
 export function SubmitButton({
 	children = _SUBMIT_CHILDREN,
 	color = "primary",
+	solid = true,
 	full = true,
 	className,
 	...props
@@ -42,7 +44,7 @@ export function SubmitButton({
 	const form = requireForm();
 	const busy = useStore(form.busy).value;
 	return (
-		<button type="submit" disabled={busy} className={getClass(getButtonClass({ color, full, ...props }), className)}>
+		<button type="submit" disabled={busy} className={getClass(getButtonClass({ color, solid, full, ...props }), className)}>
 			{busy ? LOADING : children}
 		</button>
 	);

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