shelving 1.288.0 → 1.289.1

package/package.json

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

package/ui/button/Button.d.ts

@@ -1,15 +1,15 @@
 import type { ReactElement } from "react";
+import { type BlockVariants } from "../style/Block.js";
 import { type FlexVariants } from "../style/Flex.js";
 import { type StatusVariants } from "../style/Status.js";
-import { type TypographyVariants } from "../style/Typography.js";
 import type { ClassProps } from "../util/props.js";
 import { type ClickableProps } from "./Clickable.js";
 /**
- * Styling variants for a `Button`, combining flex, color, status, and typography options with button-specific toggles.
+ * Styling variants for a `Button`: the block variants (space, padding, indent, width, typography), flex, and status, plus button-specific toggles.
  *
  * @see https://shelving.cc/ui/ButtonVariants
  */
-export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
+export interface ButtonVariants extends BlockVariants, FlexVariants, StatusVariants {
     /** 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. */
@@ -31,7 +31,7 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, Typography
 /**
  * Get the full combined `className` string for a button from its styling variants.
  *
- * @param variants The button styling variants (flex, color, status, typography, plus button toggles).
+ * @param variants The button styling variants (block, flex, status, plus button toggles).
  * @returns A space-separated `className` string combining all the resolved variant classes.
  * @see https://shelving.cc/ui/getButtonClass
  */

package/ui/button/Button.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getBlockClass } from "../style/Block.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getStatusClass } from "../style/Status.js";
-import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import BUTTON_CSS from "./Button.module.css";
 import { Clickable } from "./Clickable.js";
 /**
  * Get the full combined `className` string for a button from its styling variants.
  *
- * @param variants The button styling variants (flex, color, status, typography, plus button toggles).
+ * @param variants The button styling variants (block, flex, status, plus button toggles).
  * @returns A space-separated `className` string combining all the resolved variant classes.
  * @see https://shelving.cc/ui/getButtonClass
  */
 export function getButtonClass(variants) {
-    return getClass(getModuleClass(BUTTON_CSS, "button", variants, variants.selected === false && "unselected"), getFlexClass(variants), getStatusClass(variants), getTypographyClass(variants));
+    return getClass(getBlockClass(variants), getModuleClass(BUTTON_CSS, "button", variants, variants.selected === false && "unselected"), getFlexClass(variants), getStatusClass(variants));
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.

package/ui/button/Button.md

@@ -14,6 +14,7 @@ A clickable styled as a button. Renders an `<a href="">` when given `href`, or a
 - `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.
+- It takes the block variants, like any block: `space` sets its outer margin (`space="none"` removes it), `padding` and `indent` set its inner padding, and `width` sizes it. A `padding` variant sets the padding but not the minimum height, which `--button-padding` and `--button-height` set.
 - `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`.
 
@@ -30,6 +31,15 @@ import { Button } from "shelving/ui";
 <Button onClick={share} outline>Share</Button>
 ```
 
+### Spacing and size
+
+```tsx
+import { Button } from "shelving/ui";
+
+// No outer margin: it sits flush with the content around it.
+<Button full space="none" onClick={start}>Start</Button>
+```
+
 ### A row of buttons
 
 ```tsx

package/ui/button/Button.module.css

@@ -153,14 +153,6 @@
 		/* The border is transparent by default, so background images/gradients must size to the border box to reach the button's edge. Lives in the overrides layer because every state's `background` shorthand resets the origin to `padding-box`. */
 		background-origin: border-box;
 
-		&:first-child {
-			margin-block-start: 0;
-		}
-
-		&:last-child {
-			margin-block-end: 0;
-		}
-
 		/* Pseudo-classes */
 		&:not(:focus-visible) {
 			outline-color: transparent;
@@ -170,17 +162,17 @@
 		&:is(.plain, .outline, .unselected) {
 			box-shadow: none;
 
-			&:not(:enabled:hover, :any-link:hover, :active, :focus) {
+			&:not(:enabled:hover, :any-link:hover, :enabled:active, :any-link:active, :focus) {
 				border: var(--button-plain-border, var(--button-stroke, var(--stroke-normal)) solid transparent);
 				background: transparent;
 			}
 		}
 
-		&.unselected:not(:enabled:hover, :any-link:hover, :active, :focus) {
+		&.unselected:not(:enabled:hover, :any-link:hover, :enabled:active, :any-link:active, :focus) {
 			background: var(--button-unselected-background, transparent);
 		}
 
-		&.outline:not(:enabled:hover, :any-link:hover, :active, :focus) {
+		&.outline:not(:enabled:hover, :any-link:hover, :enabled:active, :any-link:active, :focus) {
 			border: var(--button-outline-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-80));
 		}
 	}

package/ui/button/Button.tsx

@@ -1,18 +1,18 @@
 import type { ReactElement } from "react";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ClassProps } from "../util/props.js";
 import BUTTON_CSS from "./Button.module.css";
 import { Clickable, type ClickableProps } from "./Clickable.js";
 
 /**
- * Styling variants for a `Button`, combining flex, color, status, and typography options with button-specific toggles.
+ * Styling variants for a `Button`: the block variants (space, padding, indent, width, typography), flex, and status, plus button-specific toggles.
  *
  * @see https://shelving.cc/ui/ButtonVariants
  */
-export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
+export interface ButtonVariants extends BlockVariants, FlexVariants, StatusVariants {
 	/** 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. */
@@ -35,16 +35,16 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, Typography
 /**
  * Get the full combined `className` string for a button from its styling variants.
  *
- * @param variants The button styling variants (flex, color, status, typography, plus button toggles).
+ * @param variants The button styling variants (block, flex, status, plus button toggles).
  * @returns A space-separated `className` string combining all the resolved variant classes.
  * @see https://shelving.cc/ui/getButtonClass
  */
 export function getButtonClass(variants: ButtonVariants): string {
 	return getClass(
+		getBlockClass(variants),
 		getModuleClass(BUTTON_CSS, "button", variants, variants.selected === false && "unselected"),
 		getFlexClass(variants),
 		getStatusClass(variants),
-		getTypographyClass(variants),
 	);
 }
 

package/ui/input/Input.d.ts

@@ -1,14 +1,14 @@
 import type { ReactElement } from "react";
-import { type WidthVariants } from "../style/Width.js";
+import { type BlockVariants } from "../style/Block.js";
 import type { ChildProps, ClassProps } from "../util/props.js";
 /**
- * Styling variants shared by every form input — currently the `width` variant (`width="narrow"`, `"normal"`, `"wide"`, `"full"`, `"fit"`).
- * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput width="fit">` to shrink to its content).
- * - Designed to grow: new cross-cutting input styling props (e.g. spacing) should be added here so every input picks them up consistently.
+ * Styling variants shared by every form input — the block variants: `space`, `padding`, `indent`, `width`, and typography.
+ * - Any input can be spaced and sized like a block (e.g. `<TextInput space="none">`, `<CheckboxInput width="fit">`).
+ * - Designed to grow: new cross-cutting input styling props should be added here so every input picks them up consistently.
  *
  * @see https://shelving.cc/ui/InputVariants
  */
-export interface InputVariants extends WidthVariants {
+export interface InputVariants extends BlockVariants {
 }
 /**
  * Build the shared base `className` for a form input from its styling variants — the base input class plus any `InputVariants`.

package/ui/input/Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LOADING } from "../misc/Loading.js";
+import { getBlockClass } from "../style/Block.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getWidthClass } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -12,7 +12,7 @@ import INPUT_CSS from "./Input.module.css";
  * @see https://shelving.cc/ui/getInputClass
  */
 export function getInputClass(props) {
-    return getClass(getModuleClass(INPUT_CSS, "input"), getWidthClass(props));
+    return getClass(getBlockClass(props), getModuleClass(INPUT_CSS, "input"));
 }
 /** Input that is loading. */
 export const LOADING_INPUT = _jsx("div", { className: getClass(getInputClass({}), getFlexClass({})), children: LOADING });

package/ui/input/Input.module.css

@@ -210,14 +210,6 @@
 
 @layer overrides {
 	.input {
-		&:first-child {
-			margin-block-start: 0;
-		}
-
-		&:last-child {
-			margin-block-end: 0;
-		}
-
 		&:not(:focus, :focus-within) {
 			outline-color: transparent;
 		}

package/ui/input/Input.tsx

@@ -1,19 +1,19 @@
 import type { ReactElement } from "react";
 import { LOADING } from "../misc/Loading.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps, ClassProps } from "../util/props.js";
 import INPUT_CSS from "./Input.module.css";
 
 /**
- * Styling variants shared by every form input — currently the `width` variant (`width="narrow"`, `"normal"`, `"wide"`, `"full"`, `"fit"`).
- * - Extends `WidthVariants` so any input can be sized (e.g. `<CheckboxInput width="fit">` to shrink to its content).
- * - Designed to grow: new cross-cutting input styling props (e.g. spacing) should be added here so every input picks them up consistently.
+ * Styling variants shared by every form input — the block variants: `space`, `padding`, `indent`, `width`, and typography.
+ * - Any input can be spaced and sized like a block (e.g. `<TextInput space="none">`, `<CheckboxInput width="fit">`).
+ * - Designed to grow: new cross-cutting input styling props should be added here so every input picks them up consistently.
  *
  * @see https://shelving.cc/ui/InputVariants
  */
-export interface InputVariants extends WidthVariants {}
+export interface InputVariants extends BlockVariants {}
 
 /**
  * Build the shared base `className` for a form input from its styling variants — the base input class plus any `InputVariants`.
@@ -23,7 +23,7 @@ export interface InputVariants extends WidthVariants {}
  * @see https://shelving.cc/ui/getInputClass
  */
 export function getInputClass(props: InputVariants): string {
-	return getClass(getModuleClass(INPUT_CSS, "input"), getWidthClass(props));
+	return getClass(getBlockClass(props), getModuleClass(INPUT_CSS, "input"));
 }
 
 /**