shelving 1.256.1 → 1.257.1

package/package.json

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

package/ui/block/Address.d.ts

@@ -1,16 +1,14 @@
 import type { ReactElement } from "react";
 import { type AddressData } from "../../schema/AddressSchema.js";
 import type { Nullish } from "../../util/null.js";
-import { type ColorVariants } from "../style/Color.js";
-import { type SpaceVariants } from "../style/Space.js";
-import { type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants } from "../style/Block.js";
 import type { ChildProps } from "../util/props.js";
 /**
  * Props for `Address` — colour, space, and typography variants plus required children.
  *
  * @see https://shelving.cc/ui/AddressProps
  */
-export interface AddressProps extends ColorVariants, SpaceVariants, TypographyVariants, ChildProps {
+export interface AddressProps extends BlockVariants, ChildProps {
 }
 /**
  * Props for `PhysicalAddress` — an optional name and a nullable `AddressData` object.

package/ui/block/Address.js

@@ -2,9 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAddress } from "../../schema/AddressSchema.js";
 import { Small } from "../inline/Small.js";
 import { Strong } from "../inline/Strong.js";
-import { getColorClass } from "../style/Color.js";
-import { getSpaceClass } from "../style/Space.js";
-import { getTypographyClass } from "../style/Typography.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import ADDRESS_CSS from "./Address.module.css";
 const ADDRESS_CLASS = getModuleClass(ADDRESS_CSS, "address");
@@ -16,7 +14,7 @@ const ADDRESS_CLASS = getModuleClass(ADDRESS_CSS, "address");
  */
 export function Address({ children, ...props }) {
     return (_jsx("address", { className: getClass(ADDRESS_CLASS, //
-        getColorClass(props), getSpaceClass(props), getTypographyClass(props)), children: children }));
+        getBlockClass(props)), children: children }));
 }
 /**
  * Show an optional `AddressData` object correctly on screen.

package/ui/block/Address.module.css

@@ -7,23 +7,9 @@
 	.address,
 	.prose address {
 		/* Box */
-		display: block;
-		margin-inline: 0;
 		margin-block: var(--address-space, var(--space-paragraph));
 
 		/* Text */
 		white-space: preserve wrap;
 	}
 }
-
-@layer overrides {
-	.address,
-	.prose address {
-		&:first-child {
-			margin-block-start: 0;
-		}
-		&:last-child {
-			margin-block-end: 0;
-		}
-	}
-}

package/ui/block/Address.tsx

@@ -3,9 +3,7 @@ import { type AddressData, formatAddress } from "../../schema/AddressSchema.js";
 import type { Nullish } from "../../util/null.js";
 import { Small } from "../inline/Small.js";
 import { Strong } from "../inline/Strong.js";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
 import ADDRESS_CSS from "./Address.module.css";
@@ -17,7 +15,7 @@ const ADDRESS_CLASS = getModuleClass(ADDRESS_CSS, "address");
  *
  * @see https://shelving.cc/ui/AddressProps
  */
-export interface AddressProps extends ColorVariants, SpaceVariants, TypographyVariants, ChildProps {}
+export interface AddressProps extends BlockVariants, ChildProps {}
 
 /**
  * Props for `PhysicalAddress` — an optional name and a nullable `AddressData` object.
@@ -50,9 +48,7 @@ export function Address({ children, ...props }: AddressProps) {
 		<address
 			className={getClass(
 				ADDRESS_CLASS, //
-				getColorClass(props),
-				getSpaceClass(props),
-				getTypographyClass(props),
+				getBlockClass(props),
 			)}
 		>
 			{children}

package/ui/block/Block.d.ts

@@ -1,10 +1,5 @@
 import type { ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
-import { type IndentVariants } from "../style/Indent.js";
-import { type PaddingVariants } from "../style/Padding.js";
-import { type SpaceVariants } from "../style/Space.js";
-import { type TypographyVariants } from "../style/Typography.js";
-import { type WidthVariants } from "../style/Width.js";
+import { type BlockVariants } from "../style/Block.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Semantic element names a block element may render as via its `as` prop.
@@ -17,24 +12,13 @@ export type BlockElement = "div" | "section" | "header" | "footer" | "article" |
  *
  * @see https://shelving.cc/ui/BlockProps
  */
-export interface BlockProps extends ColorVariants, PaddingVariants, IndentVariants, SpaceVariants, TypographyVariants, WidthVariants, OptionalChildProps {
+export interface BlockProps extends BlockVariants, OptionalChildProps {
     /**
      * Element this `<Block>` renders as, e.g. "header" to output a "<header>"
      * @default "div"
      */
     as?: BlockElement | undefined;
 }
-/**
- * Get the combined `className` string for a block from its styling variants.
- *
- * Composes the base block class and tint ladder with the colour, space, typography, and width variant helpers, so anything that wants block-level styling can apply it.
- *
- * @param variants Colour, space, typography, and width variants.
- * @returns A space-separated `className` string combining the block class and resolved variant classes.
- * @example getBlockClass({ space: "large" }) // "block tint …"
- * @see https://shelving.cc/ui/getBlockClass
- */
-export declare function getBlockClass(variants: BlockProps): string;
 /**
  * Plain `<div>` block with block-level spacing.
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).

package/ui/block/Block.js

@@ -1,27 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getColorClass } from "../style/Color.js";
-import { getIndentClass } from "../style/Indent.js";
-import { getPaddingClass } from "../style/Padding.js";
-import { getSpaceClass } from "../style/Space.js";
-import { getTypographyClass } from "../style/Typography.js";
-import { getWidthClass } from "../style/Width.js";
-import { getClass, getModuleClass } from "../util/css.js";
-import BLOCK_CSS from "./Block.module.css";
-const BLOCK_CLASS = getModuleClass(BLOCK_CSS, "block");
-/**
- * Get the combined `className` string for a block from its styling variants.
- *
- * Composes the base block class and tint ladder with the colour, space, typography, and width variant helpers, so anything that wants block-level styling can apply it.
- *
- * @param variants Colour, space, typography, and width variants.
- * @returns A space-separated `className` string combining the block class and resolved variant classes.
- * @example getBlockClass({ space: "large" }) // "block tint …"
- * @see https://shelving.cc/ui/getBlockClass
- */
-export function getBlockClass(variants) {
-    return getClass(BLOCK_CLASS, //
-    getColorClass(variants), getIndentClass(variants), getPaddingClass(variants), getSpaceClass(variants), getTypographyClass(variants), getWidthClass(variants));
-}
+import { getBlockClass } from "../style/Block.js";
 /**
  * Plain `<div>` block with block-level spacing.
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).

package/ui/block/Block.tsx

@@ -1,15 +1,6 @@
 import type { ReactElement } from "react";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
-import { getIndentClass, type IndentVariants } from "../style/Indent.js";
-import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
-import { getWidthClass, type WidthVariants } from "../style/Width.js";
-import { getClass, getModuleClass } from "../util/css.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import type { OptionalChildProps } from "../util/props.js";
-import BLOCK_CSS from "./Block.module.css";
-
-const BLOCK_CLASS = getModuleClass(BLOCK_CSS, "block");
 
 /**
  * Semantic element names a block element may render as via its `as` prop.
@@ -23,14 +14,7 @@ export type BlockElement = "div" | "section" | "header" | "footer" | "article" |
  *
  * @see https://shelving.cc/ui/BlockProps
  */
-export interface BlockProps
-	extends ColorVariants,
-		PaddingVariants,
-		IndentVariants,
-		SpaceVariants,
-		TypographyVariants,
-		WidthVariants,
-		OptionalChildProps {
+export interface BlockProps extends BlockVariants, OptionalChildProps {
 	/**
 	 * Element this `<Block>` renders as, e.g. "header" to output a "<header>"
 	 * @default "div"
@@ -38,28 +22,6 @@ export interface BlockProps
 	as?: BlockElement | undefined;
 }
 
-/**
- * Get the combined `className` string for a block from its styling variants.
- *
- * Composes the base block class and tint ladder with the colour, space, typography, and width variant helpers, so anything that wants block-level styling can apply it.
- *
- * @param variants Colour, space, typography, and width variants.
- * @returns A space-separated `className` string combining the block class and resolved variant classes.
- * @example getBlockClass({ space: "large" }) // "block tint …"
- * @see https://shelving.cc/ui/getBlockClass
- */
-export function getBlockClass(variants: BlockProps): string {
-	return getClass(
-		BLOCK_CLASS, //
-		getColorClass(variants),
-		getIndentClass(variants),
-		getPaddingClass(variants),
-		getSpaceClass(variants),
-		getTypographyClass(variants),
-		getWidthClass(variants),
-	);
-}
-
 /**
  * Plain `<div>` block with block-level spacing.
  * - Pass `as` to render a different semantic element (`section`, `header`, `footer`, `nav`, `aside`, `figure`).

package/ui/block/Blockquote.d.ts

@@ -1,14 +1,12 @@
 import type { ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
-import { type SpaceVariants } from "../style/Space.js";
-import { type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants } from "../style/Block.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Blockquote` — colour, space, and typography variants plus optional children.
  *
  * @see https://shelving.cc/ui/BlockquoteProps
  */
-export interface BlockquoteProps extends ColorVariants, SpaceVariants, TypographyVariants, OptionalChildProps {
+export interface BlockquoteProps extends BlockVariants, OptionalChildProps {
 }
 /**
  * Quoted block of text — rendered as `<blockquote>`.

package/ui/block/Blockquote.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getColorClass } from "../style/Color.js";
-import { getSpaceClass } from "../style/Space.js";
-import { getTypographyClass } from "../style/Typography.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import BLOCKQUOTE_CSS from "./Blockquote.module.css";
 const BLOCKQUOTE_CLASS = getModuleClass(BLOCKQUOTE_CSS, "blockquote");
@@ -14,5 +12,5 @@ const BLOCKQUOTE_CLASS = getModuleClass(BLOCKQUOTE_CSS, "blockquote");
  */
 export function Blockquote({ children, ...props }) {
     return (_jsx("blockquote", { className: getClass(BLOCKQUOTE_CLASS, //
-        getColorClass(props), getSpaceClass(props), getTypographyClass(props)), children: children }));
+        getBlockClass(props)), children: children }));
 }

package/ui/block/Blockquote.module.css

@@ -11,8 +11,6 @@
 		--tint-50: var(--blockquote-tint, inherit);
 
 		/* Box */
-		display: block;
-		margin-inline: 0;
 		margin-block: var(--blockquote-space, var(--space-paragraph));
 		border-inline-start: var(--blockquote-border, var(--blockquote-stroke, var(--stroke-normal)) solid var(--tint-80));
 		padding-block: var(--blockquote-padding, var(--space-small));
@@ -27,15 +25,3 @@
 		text-align: var(--blockquote-align, left);
 	}
 }
-
-@layer overrides {
-	.blockquote,
-	.prose blockquote {
-		&:first-child {
-			margin-block-start: 0;
-		}
-		&:last-child {
-			margin-block-end: 0;
-		}
-	}
-}

package/ui/block/Blockquote.tsx

@@ -1,7 +1,5 @@
 import type { ReactElement } from "react";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import BLOCKQUOTE_CSS from "./Blockquote.module.css";
@@ -13,7 +11,7 @@ const BLOCKQUOTE_CLASS = getModuleClass(BLOCKQUOTE_CSS, "blockquote");
  *
  * @see https://shelving.cc/ui/BlockquoteProps
  */
-export interface BlockquoteProps extends ColorVariants, SpaceVariants, TypographyVariants, OptionalChildProps {}
+export interface BlockquoteProps extends BlockVariants, OptionalChildProps {}
 
 /**
  * Quoted block of text — rendered as `<blockquote>`.
@@ -27,9 +25,7 @@ export function Blockquote({ children, ...props }: BlockquoteProps): ReactElemen
 		<blockquote
 			className={getClass(
 				BLOCKQUOTE_CLASS, //
-				getColorClass(props),
-				getSpaceClass(props),
-				getTypographyClass(props),
+				getBlockClass(props),
 			)}
 		>
 			{children}

package/ui/block/Caption.d.ts

@@ -1,14 +1,12 @@
 import type { ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
-import { type SpaceVariants } from "../style/Space.js";
-import { type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants } from "../style/Block.js";
 import type { OptionalChildProps } from "../util/index.js";
 /**
  * Props for `Caption` — colour, space, and typography variants plus optional children.
  *
  * @see https://shelving.cc/ui/CaptionProps
  */
-export interface CaptionProps extends ColorVariants, SpaceVariants, TypographyVariants, OptionalChildProps {
+export interface CaptionProps extends BlockVariants, OptionalChildProps {
 }
 /**
  * `<figcaption>` block — caption text for a `<Figure>`.

package/ui/block/Caption.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getColorClass } from "../style/Color.js";
-import { getSpaceClass } from "../style/Space.js";
-import { getTypographyClass } from "../style/Typography.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import CAPTION_CSS from "./Caption.module.css";
 const CAPTION_CLASS = getModuleClass(CAPTION_CSS, "divider");
@@ -14,5 +12,5 @@ const CAPTION_CLASS = getModuleClass(CAPTION_CSS, "divider");
  */
 export function Caption({ children, ...props }) {
     return (_jsx("figcaption", { className: getClass(CAPTION_CLASS, //
-        getColorClass(props), getSpaceClass(props), getTypographyClass(props)), children: children }));
+        getBlockClass(props)), children: children }));
 }

package/ui/block/Caption.module.css

@@ -7,9 +7,6 @@
 	.caption,
 	.prose figcaption {
 		/* Box */
-		display: block;
-		padding: 0;
-		margin-inline: 0;
 		margin-block: var(--caption-gap, var(--space-xxsmall));
 
 		/* Text */
@@ -21,16 +18,6 @@
 }
 
 @layer overrides {
-	.caption,
-	.prose figcaption {
-		&:first-child {
-			margin-block-start: 0;
-		}
-		&:last-child {
-			margin-block-end: 0;
-		}
-	}
-
 	/* Captions have tighter margins than most block elements so zero the abutting margin of any neighbouring sibling — otherwise margin collapse would let the bigger neighbour margin win. */
 	.prose figcaption + * {
 		margin-block-start: 0;

package/ui/block/Caption.tsx

@@ -1,7 +1,5 @@
 import type { ReactElement } from "react";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/index.js";
 import CAPTION_CSS from "./Caption.module.css";
@@ -13,7 +11,7 @@ const CAPTION_CLASS = getModuleClass(CAPTION_CSS, "divider");
  *
  * @see https://shelving.cc/ui/CaptionProps
  */
-export interface CaptionProps extends ColorVariants, SpaceVariants, TypographyVariants, OptionalChildProps {}
+export interface CaptionProps extends BlockVariants, OptionalChildProps {}
 
 /**
  * `<figcaption>` block — caption text for a `<Figure>`.
@@ -27,9 +25,7 @@ export function Caption({ children, ...props }: CaptionProps): ReactElement {
 		<figcaption
 			className={getClass(
 				CAPTION_CLASS, //
-				getColorClass(props),
-				getSpaceClass(props),
-				getTypographyClass(props),
+				getBlockClass(props),
 			)}
 		>
 			{children}

package/ui/block/Card.d.ts

@@ -1,18 +1,14 @@
 import type { ReactElement } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
-import { type ColorVariants } from "../style/Color.js";
-import { type PaddingVariants } from "../style/Padding.js";
-import { type SpaceVariants } from "../style/Space.js";
+import { type BlockVariants } from "../style/Block.js";
 import { type StatusVariants } from "../style/Status.js";
-import { type TypographyVariants } from "../style/Typography.js";
-import { type WidthVariants } from "../style/Width.js";
 import type { BlockElement } from "./Block.js";
 /**
  * Props for `Card` — combines `ClickableProps` (for navigable cards) with colour, status, padding, space, typography, and width variants.
  *
  * @see https://shelving.cc/ui/CardProps
  */
-export interface CardProps extends ClickableProps, ColorVariants, StatusVariants, PaddingVariants, SpaceVariants, TypographyVariants, WidthVariants {
+export interface CardProps extends ClickableProps, StatusVariants, BlockVariants {
     /**
      * Element this `<Card>` renders as, e.g. "header" to output a "<header>"
      * @default "article"

package/ui/block/Card.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
-import { getColorClass } from "../style/Color.js";
-import { getPaddingClass } from "../style/Padding.js";
-import { getSpaceClass } from "../style/Space.js";
+import { getBlockClass } from "../style/Block.js";
 import { getStatusClass } from "../style/Status.js";
-import { getTypographyClass } from "../style/Typography.js";
-import { getWidthClass } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import CARD_CSS from "./Card.module.css";
 /**
@@ -23,5 +19,6 @@ import CARD_CSS from "./Card.module.css";
  */
 export function Card({ as: Element = "article", children, href, onClick, title = "Open", ...props }) {
     const overlay = (href || onClick) && (_jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: getModuleClass(CARD_CSS, "overlay") }));
-    return (_jsxs(Element, { className: getClass(getModuleClass(CARD_CSS, "card"), getStatusClass(props), getColorClass(props), getPaddingClass(props), getSpaceClass(props), getTypographyClass(props), getWidthClass(props)), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
+    return (_jsxs(Element, { className: getClass(getModuleClass(CARD_CSS, "card"), //
+        getStatusClass(props), getBlockClass(props)), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
 }

package/ui/block/Card.tsx

@@ -1,11 +1,7 @@
 import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
-import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
-import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
-import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { BlockElement } from "./Block.js";
 import CARD_CSS from "./Card.module.css";
@@ -15,14 +11,7 @@ import CARD_CSS from "./Card.module.css";
  *
  * @see https://shelving.cc/ui/CardProps
  */
-export interface CardProps
-	extends ClickableProps,
-		ColorVariants,
-		StatusVariants,
-		PaddingVariants,
-		SpaceVariants,
-		TypographyVariants,
-		WidthVariants {
+export interface CardProps extends ClickableProps, StatusVariants, BlockVariants {
 	/**
 	 * Element this `<Card>` renders as, e.g. "header" to output a "<header>"
 	 * @default "article"
@@ -50,13 +39,9 @@ export function Card({ as: Element = "article", children, href, onClick, title =
 	return (
 		<Element
 			className={getClass(
-				getModuleClass(CARD_CSS, "card"),
+				getModuleClass(CARD_CSS, "card"), //
 				getStatusClass(props),
-				getColorClass(props),
-				getPaddingClass(props),
-				getSpaceClass(props),
-				getTypographyClass(props),
-				getWidthClass(props),
+				getBlockClass(props),
 			)}
 		>
 			{overlay}

package/ui/block/Column.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement } from "react";
+import { type BlockVariants } from "../style/Block.js";
+import { type FlexVariants } from "../style/Flex.js";
+import type { OptionalChildProps } from "../util/index.js";
+import type { BlockElement } from "./Block.js";
+/**
+ * Props for the `<Column>` component.
+ *
+ * @see https://shelving.cc/ui/ColumnProps
+ */
+export interface ColumnProps extends BlockVariants, FlexVariants, OptionalChildProps {
+    /**
+     * Element this `<Column>` renders as, e.g. "header" to output a "<header>"
+     * @default "div"
+     */
+    as?: BlockElement | undefined;
+}
+/**
+ * Flex container that stacks its children as a column by default.
+ *
+ * @param variants
+ * @returns A `<div>` element with the computed block/flex class.
+ * @kind component
+ * @example <Column gap="small">{items}</Column>
+ * @see https://shelving.cc/ui/Column
+ */
+export declare function Column({ as: Element, children, column, ...props }: ColumnProps): ReactElement;

package/ui/block/Column.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getBlockClass } from "../style/Block.js";
+import { getFlexClass } from "../style/Flex.js";
+import { getClass } from "../util/css.js";
+/**
+ * Flex container that stacks its children as a column by default.
+ *
+ * @param variants
+ * @returns A `<div>` element with the computed block/flex class.
+ * @kind component
+ * @example <Column gap="small">{items}</Column>
+ * @see https://shelving.cc/ui/Column
+ */
+export function Column({ as: Element = "div", children, column = true, ...props }) {
+    return (_jsx(Element, { className: getClass(getBlockClass(props), //
+        getFlexClass({ column, ...props })), children: children }));
+}

package/ui/block/Column.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from "react";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
+import { type FlexVariants, getFlexClass } from "../style/Flex.js";
+import { getClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/index.js";
+import type { BlockElement } from "./Block.js";
+
+/**
+ * Props for the `<Column>` component.
+ *
+ * @see https://shelving.cc/ui/ColumnProps
+ */
+export interface ColumnProps extends BlockVariants, FlexVariants, OptionalChildProps {
+	/**
+	 * Element this `<Column>` renders as, e.g. "header" to output a "<header>"
+	 * @default "div"
+	 */
+	as?: BlockElement | undefined;
+}
+
+/**
+ * Flex container that stacks its children as a column by default.
+ *
+ * @param variants
+ * @returns A `<div>` element with the computed block/flex class.
+ * @kind component
+ * @example <Column gap="small">{items}</Column>
+ * @see https://shelving.cc/ui/Column
+ */
+export function Column({ as: Element = "div", children, column = true, ...props }: ColumnProps): ReactElement {
+	return (
+		<Element
+			className={getClass(
+				getBlockClass(props), //
+				getFlexClass({ column, ...props }),
+			)}
+		>
+			{children}
+		</Element>
+	);
+}

package/ui/block/Definitions.d.ts

@@ -1,8 +1,8 @@
 import type { ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
-import { type GapVariants } from "../style/Gap.js";
-import { type SpaceVariants } from "../style/Space.js";
-import { type TypographyVariants } from "../style/Typography.js";
+import type { ColorVariants } from "../style/Color.js";
+import type { GapVariants } from "../style/Gap.js";
+import type { SpaceVariants } from "../style/Space.js";
+import type { TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Definitions` — colour, gap, space, and typography variants plus optional children.

package/ui/block/Definitions.js

@@ -1,8 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getColorClass } from "../style/Color.js";
-import { getGapClass } from "../style/Gap.js";
-import { getSpaceClass } from "../style/Space.js";
-import { getTypographyClass } from "../style/Typography.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import DEFINITIONS_CSS from "./Definitions.module.css";
 const DEFINITIONS_CLASS = getModuleClass(DEFINITIONS_CSS, "definitions");
@@ -17,5 +14,5 @@ const DEFINITIONS_CLASS = getModuleClass(DEFINITIONS_CSS, "definitions");
  */
 export function Definitions({ children, ...props }) {
     return (_jsx("dl", { className: getClass(DEFINITIONS_CLASS, //
-        getColorClass(props), getGapClass(props), getSpaceClass(props), getTypographyClass(props)), children: children }));
+        getBlockClass(props)), children: children }));
 }

package/ui/block/Definitions.module.css

@@ -8,8 +8,6 @@
 	.definitions,
 	.prose dl {
 		/* Box */
-		display: block;
-		margin-inline: 0;
 		margin-block: var(--definitions-space, var(--space-paragraph));
 
 		/* Text */
@@ -43,13 +41,6 @@
 @layer overrides {
 	.definitions,
 	.prose dl {
-		&:first-child {
-			margin-block-start: 0;
-		}
-		&:last-child {
-			margin-block-end: 0;
-		}
-
 		dt:first-child {
 			margin-block-start: 0;
 		}