shelving 1.285.6 → 1.285.7

package/package.json

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

package/ui/block/Card.d.ts

@@ -23,7 +23,7 @@ export interface CardProps extends ClickableProps, StatusVariants, BlockVariants
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
- * - Carries a `normal` drop shadow by default — set `shadow="none"` to flatten a card, or `shadow="small"` / `shadow="large"` to adjust its elevation.
+ * - Has no drop shadow by default — set `shadow="small"`, `shadow="normal"` or `shadow="large"` to raise a card.
  *
  * @kind component
  * @see https://shelving.cc/ui/Card

package/ui/block/Card.js

@@ -11,7 +11,7 @@ import CARD_CSS from "./Card.module.css";
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
- * - Carries a `normal` drop shadow by default — set `shadow="none"` to flatten a card, or `shadow="small"` / `shadow="large"` to adjust its elevation.
+ * - Has no drop shadow by default — set `shadow="small"`, `shadow="normal"` or `shadow="large"` to raise a card.
  *
  * @kind component
  * @see https://shelving.cc/ui/Card

package/ui/block/Card.md

@@ -1,13 +1,13 @@
 # Card
 
-A boxed surface that groups a self-contained piece of content. Rendered as an `<article>`, painted from the tint ladder (surface, border, text) and styled with rounded corners and padding by default.
+A boxed surface that groups a self-contained piece of content. Rendered as an `<article>`, painted from the tint ladder (surface, text) and styled with rounded corners and padding by default.
 
 **Things to know:**
 
 - Set `href` or `onClick` to make the whole card navigable — a stretched, visually-hidden overlay `<a>` / `<button>` covers the card while the children render normally inside. Real interactive elements inside the card (inline links, buttons) stay clickable and keyboard-focusable.
-- `color=` and `status=` move the tint anchor for the card's scope, so the surface, border, text, and hover shade all re-derive together — and nested components (`<Tag>`, `<Preformatted>`, `<Button>`) inherit the same tint.
+- `color=` and `status=` move the tint anchor for the card's scope, so the surface, text, and hover shade all re-derive together — and nested components (`<Tag>`, `<Preformatted>`, `<Button>`) inherit the same tint.
 - A card styles only the box. Lay out its contents with the usual block components (`<Subheading>`, `<Paragraph>`, `<Row>`, …).
-- Cards carry a `normal` drop shadow by default — set `shadow="none"` to flatten a given card, or `shadow="small"` / `shadow="large"` to adjust its elevation.
+- Cards have no drop shadow by default — set `shadow="small"`, `shadow="normal"` or `shadow="large"` to raise a given card.
 - Composes the standard styling variants: `color`, `status`, `padding`, `space`, `width`, `shadow`, plus typography.
 
 ## Usage
@@ -49,14 +49,14 @@ import { Card, Subheading } from "shelving/ui";
 ```tsx
 import { Card, Subheading } from "shelving/ui";
 
-// Flatten one card; raise another.
-<Card shadow="none"><Subheading>Flat</Subheading></Card>
-<Card shadow="large"><Subheading>Raised</Subheading></Card>
+// Raise a card a little or a lot.
+<Card shadow="small"><Subheading>Raised</Subheading></Card>
+<Card shadow="large"><Subheading>Raised more</Subheading></Card>
 ```
 
 ## Styling
 
-`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` (on the card or an ancestor scope) to recolour everything at once — surface, border, text, and hover shade re-derive together; reach for a per-property hook for a single surgical change.
+`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` (on the card or an ancestor scope) to recolour everything at once — surface, text, and hover shade re-derive together; reach for a per-property hook for a single surgical change.
 
 | Variable | Styles | Default |
 |---|---|---|
@@ -64,20 +64,20 @@ import { Card, Subheading } from "shelving/ui";
 | `--card-hover-background` | Surface fill when a navigable card is hovered | `var(--tint-95)` |
 | `--card-color` | Text colour | `var(--tint-00)` |
 | `--card-border` | Border shorthand | `var(--card-stroke) solid var(--tint-80)` |
-| `--card-stroke` | Border / outline thickness | `var(--stroke-normal)` (2px) |
+| `--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-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
-| `--card-shadow` | Drop shadow | `var(--shadow-normal)` |
+| `--card-shadow` | Drop shadow | `none` |
 | `--card-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--card-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 
-**Global tokens it reads** — move these to retheme broadly rather than overriding ladder steps directly: the tint ladder `--tint-00` / `--tint-80` / `--tint-90` / `--tint-95`, plus `--space-normal`, `--space-paragraph`, `--radius-normal`, `--shadow-normal`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly rather than overriding ladder steps directly: the tint ladder `--tint-00` / `--tint-80` / `--tint-90` / `--tint-95`, plus `--space-normal`, `--space-paragraph`, `--radius-normal`, `--stroke-focus`, `--color-focus`, and `--duration-fast`.
 
 ```css
-/* Theme: flat cards with tighter corners. */
+/* Theme: raised cards with tighter corners. */
 :root {
-  --card-shadow: none;
+  --card-shadow: var(--shadow-normal);
   --card-radius: var(--radius-small);
 }
 ```

package/ui/block/Card.module.css

@@ -2,7 +2,6 @@
 @import url("../style/Color.module.css");
 @import url("../style/Duration.module.css");
 @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");
@@ -24,22 +23,22 @@
 		position: relative;
 		margin-inline: 0;
 		margin-block: var(--card-space, var(--space-paragraph));
-		border: var(--card-border, var(--card-stroke, var(--stroke-normal) solid var(--tint-80)));
+		border: var(--card-border, var(--card-stroke, 0) solid var(--tint-80));
 		padding: var(--card-padding, var(--space-normal));
 		border-radius: var(--card-radius, var(--radius-normal));
 
 		/* Style */
 		background: var(--card-background, var(--tint-90));
 		color: var(--card-color, var(--tint-00));
-		box-shadow: var(--card-shadow, var(--shadow-normal));
+		box-shadow: var(--card-shadow, none);
 		transition: var(--card-transition, all var(--duration-fast));
 		outline: var(--card-focus-border, var(--stroke-focus) solid var(--color-focus));
-		outline-offset: calc(0px - var(--card-stroke, var(--stroke-normal)));
+		outline-offset: calc(0px - var(--stroke-focus)); /* Fully inset, so it sits inside the card edge. */
 
 		/* Hover/focus affordance driven by the overlay link/button. */
 		&:has(.overlay:hover) {
 			background: var(--card-hover-background, var(--tint-95));
-			border: var(--card-hover-border, var(--card-stroke, var(--stroke-normal)) solid var(--tint-90));
+			border: var(--card-hover-border, var(--card-stroke, 0) solid var(--tint-90));
 		}
 	}
 

package/ui/block/Card.tsx

@@ -27,7 +27,7 @@ export interface CardProps extends ClickableProps, StatusVariants, BlockVariants
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
- * - Carries a `normal` drop shadow by default — set `shadow="none"` to flatten a card, or `shadow="small"` / `shadow="large"` to adjust its elevation.
+ * - Has no drop shadow by default — set `shadow="small"`, `shadow="normal"` or `shadow="large"` to raise a card.
  *
  * @kind component
  * @see https://shelving.cc/ui/Card

package/ui/block/Panel.md

@@ -7,8 +7,8 @@ A full-width vertical region that paints the current surface colour. Use panels
 - A panel always spans the full width of its container. To constrain the content inside, compose a `<Block>` `width="narrow"` (or `width="wide"`) within it.
 - Block margin is always zero so panels stack flush; control the vertical breathing room with the `padding` variant (`<Panel padding="large">`, `<Panel padding="none">`).
 - Inline padding ("indent") keeps content off the edges by default. Override it per-property with `--panel-indent`, or change it with the shared `indent` variant (`<Panel indent="large">`, `<Panel indent="none">`).
-- `color=` / `status=` move the tint anchor for the whole panel scope, so the surface, border, and text re-derive together and cascade into nested content.
-- The top and bottom borders are dropped on the first and last panel so the page doesn't gain stray edge lines.
+- `color=` / `status=` move the tint anchor for the whole panel scope, so the surface and text re-derive together and cascade into nested content.
+- Panels have no border by default. Set `--panel-stroke` (or `--panel-border`) to add top and bottom borders; the first and last panel drop them so the page doesn't gain stray edge lines.
 
 ## Usage
 
@@ -31,15 +31,15 @@ import { Panel, Block, Title, Paragraph } from "shelving/ui";
 
 ## Styling
 
-`Panel` paints from the [tint ladder](/ui/TINT_CLASS); apply `color=` / `status=` (on the panel or an ancestor scope) to recolour the whole scope at once — surface, border, and text re-derive together — or reach for a per-property hook for a single change.
+`Panel` paints from the [tint ladder](/ui/TINT_CLASS); apply `color=` / `status=` (on the panel or an ancestor scope) to recolour the whole scope at once — surface and text re-derive together — or reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
 | `--panel-background` | Surface fill | `var(--tint-90)` |
 | `--panel-color` | Text colour | `var(--tint-00)` |
 | `--panel-border` | Top/bottom border shorthand | `var(--panel-stroke) solid var(--tint-80)` |
-| `--panel-stroke` | Border thickness | `var(--stroke-normal)` (2px) |
+| `--panel-stroke` | Border thickness — set it (e.g. `var(--stroke-normal)`) to show the border | `0` |
 | `--panel-padding` | Block padding (top + bottom) | `var(--space-section)` (2rem) |
 | `--panel-indent` | Inline padding (left + right) keeping content off the edges | `var(--space-normal)` (16px) |
 
-**Global tokens it reads:** the tint-ladder steps `--tint-00` / `--tint-80` / `--tint-90`, plus `--stroke-normal`, `--space-section`, and `--space-normal`. The shared `padding` variant overrides `--panel-padding`; the shared `indent` variant overrides `--panel-indent`.
+**Global tokens it reads:** the tint-ladder steps `--tint-00` / `--tint-80` / `--tint-90`, plus `--space-section`, and `--space-normal`. The shared `padding` variant overrides `--panel-padding`; the shared `indent` variant overrides `--panel-indent`.

package/ui/block/Panel.module.css

@@ -1,5 +1,4 @@
 @import url("../style/layers.css");
-@import url("../style/Stroke.module.css");
 @import url("../style/Tint.module.css");
 @import url("../style/Space.module.css");
 
@@ -18,8 +17,8 @@
 		position: relative;
 		padding-block: var(--panel-padding, var(--space-section));
 		padding-inline: var(--panel-indent, var(--space-normal));
-		border-top: var(--panel-border, var(--panel-stroke, var(--stroke-normal)) solid var(--tint-80));
-		border-bottom: var(--panel-border, var(--panel-stroke, var(--stroke-normal)) solid var(--tint-80));
+		border-top: var(--panel-border, var(--panel-stroke, 0) solid var(--tint-80));
+		border-bottom: var(--panel-border, var(--panel-stroke, 0) solid var(--tint-80));
 
 		/* Style */
 		background: var(--panel-background, var(--tint-90));

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

package/ui/menu/MenuItem.md

@@ -31,18 +31,18 @@ The item link's hooks (defined in `Menu.module.css`):
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--menu-padding` | Link inner padding | `var(--space-xxsmall)` |
-| `--menu-radius` | Link corner radius | `var(--radius-xxsmall)` |
+| `--menu-padding` | Link inner padding | `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)` |
 | `--menu-hover-color` | Link text colour on hover/focus | `var(--tint-00)` |
 | `--menu-proud-background` | Fill when proud (ancestor of current page) | `transparent` |
 | `--menu-proud` | Text colour when proud | `var(--tint-00)` |
 | `--menu-proud-weight` | Font weight when proud | `var(--weight-strong)` |
-| `--menu-active-background` | Fill when active (current page) | `var(--tint-100)` |
+| `--menu-active-background` | Fill when active (current page), also while hovered or focused | `var(--tint-100)` |
 | `--menu-active-color` | Text colour when active | `var(--tint-00)` |
 | `--menu-active-weight` | Font weight when active | `var(--weight-strong)` |
 
 List-level hooks (`--menu-gap`, `--menu-color`, the nested-submenu hooks, etc.) are documented on `<Menu>`.
 
-**Global tokens it reads** — the tint ladder `--tint-00` / `--tint-90` / `--tint-100`, plus `--space-xxsmall`, `--radius-xxsmall`, `--stroke-focus`, `--stroke-normal`, `--color-focus`, and `--weight-strong`.
+**Global tokens it reads** — the tint ladder `--tint-00` / `--tint-90` / `--tint-100`, plus `--space-xsmall`, `--radius-xsmall`, `--stroke-focus`, `--color-focus`, and `--weight-strong`.

package/ui/style/TINT_CLASS.md

@@ -43,6 +43,6 @@ A theme is a CSS file of custom-property overrides at `:root`, imported after th
 
 1. **Move a palette colour.** Overriding `--color-gray` moves the default anchor, retinting every neutral ladder in the app — the broadest possible change. Overriding `--color-red`, `--color-primary`, etc. re-aims every variant and status that maps to it.
 2. **Retint a region.** Apply `color=` / `status=` to a container — `<Card color="purple">`, or a `<Panel color="purple">` wrapping a whole section — and everything inside re-tints, with text, border, surface, and hover shades all derived for free. Components don't expose a per-component `--x-tint` hook; the variant moves the anchor, not a bespoke variable.
-3. **Override one property.** Per-property hooks are the scalpel: `--button-radius: 999px`, `--card-border: none`, `--tag-case: none`.
+3. **Override one property.** Per-property hooks are the scalpel: `--button-radius: 999px`, `--card-radius: 0`, `--tag-case: none`.
 
 **Don't override individual ladder steps (`--tint-90`, etc.) at `:root`.** The ladder is *recomputed* from the anchor inside every `TINT_CLASS` scope — which includes every component that accepts `color=` or `status=` — so a step override at `:root` only reaches untinted regions and produces inconsistent surfaces. Move the anchor (option 1 or 2) instead, and the steps follow.