shelving 1.282.2 → 1.284.0

package/ui/block/Details.tsx

@@ -2,13 +2,14 @@ import { ChevronUpIcon } from "@heroicons/react/24/outline";
 import type { ReactElement, ReactNode } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import DETAILS_CSS from "./Details.module.css";
 
 const DETAILS_CLASS = DETAILS_CSS.details;
 const DETAILS_SUMMARY_CLASS = DETAILS_CSS.summary;
 
 /** Props for `DetailsItem` — a single collapsible disclosure. */
-export interface DetailsProps extends BlockVariants {
+export interface DetailsProps extends BlockVariants, ClassProps {
 	/** Content of the always-visible summary (e.g. a question). */
 	title: ReactNode;
 	/** Whether the item starts expanded. */
@@ -26,9 +27,9 @@ export interface DetailsProps extends BlockVariants {
  *
  * @kind component
  */
-export function Details({ title, open = false, name, children, ...props }: DetailsProps): ReactElement {
+export function Details({ title, open = false, name, children, className, ...props }: DetailsProps): ReactElement {
 	return (
-		<details className={getClass(DETAILS_CLASS, getBlockClass(props))} open={open} name={name}>
+		<details className={getClass(DETAILS_CLASS, getBlockClass(props), className)} open={open} name={name}>
 			<summary className={DETAILS_SUMMARY_CLASS}>
 				<span>{title}</span>
 				<ChevronUpIcon />

package/ui/block/Divider.d.ts

@@ -1,10 +1,11 @@
 import { type BlockVariants } from "../style/Block.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `Divider` — space and colour variants.
  *
  * @see https://shelving.cc/ui/DividerProps
  */
-export interface DividerProps extends BlockVariants {
+export interface DividerProps extends BlockVariants, ClassProps {
 }
 /**
  * Horizontal rule separating blocks of content — rendered as `<hr>`.
@@ -12,4 +13,4 @@ export interface DividerProps extends BlockVariants {
  * @example <Divider />
  * @see https://shelving.cc/ui/Divider
  */
-export declare function Divider(props: DividerProps): import("react").JSX.Element;
+export declare function Divider({ className, ...props }: DividerProps): import("react").JSX.Element;

package/ui/block/Divider.js

@@ -9,7 +9,7 @@ const DIVIDER_CLASS = getModuleClass(DIVIDER_CSS, "divider");
  * @example <Divider />
  * @see https://shelving.cc/ui/Divider
  */
-export function Divider(props) {
+export function Divider({ className, ...props }) {
     return (_jsx("hr", { className: getClass(DIVIDER_CLASS, //
-        getBlockClass(props)) }));
+        getBlockClass(props), className) }));
 }

package/ui/block/Divider.tsx

@@ -1,5 +1,6 @@
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import DIVIDER_CSS from "./Divider.module.css";
 
 const DIVIDER_CLASS = getModuleClass(DIVIDER_CSS, "divider");
@@ -9,7 +10,7 @@ const DIVIDER_CLASS = getModuleClass(DIVIDER_CSS, "divider");
  *
  * @see https://shelving.cc/ui/DividerProps
  */
-export interface DividerProps extends BlockVariants {}
+export interface DividerProps extends BlockVariants, ClassProps {}
 
 /**
  * Horizontal rule separating blocks of content — rendered as `<hr>`.
@@ -17,12 +18,13 @@ export interface DividerProps extends BlockVariants {}
  * @example <Divider />
  * @see https://shelving.cc/ui/Divider
  */
-export function Divider(props: DividerProps) {
+export function Divider({ className, ...props }: DividerProps) {
 	return (
 		<hr
 			className={getClass(
 				DIVIDER_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		/>
 	);

package/ui/block/Heading.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
-import type { ChildProps } from "../util/props.js";
+import type { ChildProps, ClassProps } from "../util/props.js";
 /**
  * Props shared by `<Title>`, `Heading`, and `<Subheading>` — colour, space, and typography variants plus a heading-level override.
  *
  * @see https://shelving.cc/ui/HeadingProps
  */
-export interface HeadingProps extends BlockVariants, ChildProps {
+export interface HeadingProps extends BlockVariants, ChildProps, ClassProps {
     /**
      * Heading level (`1`–`6`) — sets the rendered `<h1>`–`<h6>` tag.
      * Avoid overriding this in practice: pick the component that matches the level — `<Title>` (`<h1>`), `Heading` (`<h2>`), or `<Subheading>` (`<h3>`) — so the visual size and the document outline stay in step.
@@ -20,4 +20,4 @@ export interface HeadingProps extends BlockVariants, ChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Heading
  */
-export declare function Heading({ level, children, ...props }: HeadingProps): ReactElement;
+export declare function Heading({ level, children, className, ...props }: HeadingProps): ReactElement;

package/ui/block/Heading.js

@@ -10,8 +10,8 @@ const HEADING_CLASS = getModuleClass(HEADING_CSS, "heading");
  * @kind component
  * @see https://shelving.cc/ui/Heading
  */
-export function Heading({ level = "2", children, ...props }) {
+export function Heading({ level = "2", children, className, ...props }) {
     const Element = `h${level}`;
     return (_jsx(Element, { className: getClass(HEADING_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Heading.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { ChildProps } from "../util/props.js";
+import type { ChildProps, ClassProps } from "../util/props.js";
 import HEADING_CSS from "./Heading.module.css";
 
 const HEADING_CLASS = getModuleClass(HEADING_CSS, "heading");
@@ -11,7 +11,7 @@ const HEADING_CLASS = getModuleClass(HEADING_CSS, "heading");
  *
  * @see https://shelving.cc/ui/HeadingProps
  */
-export interface HeadingProps extends BlockVariants, ChildProps {
+export interface HeadingProps extends BlockVariants, ChildProps, ClassProps {
 	/**
 	 * Heading level (`1`–`6`) — sets the rendered `<h1>`–`<h6>` tag.
 	 * Avoid overriding this in practice: pick the component that matches the level — `<Title>` (`<h1>`), `Heading` (`<h2>`), or `<Subheading>` (`<h3>`) — so the visual size and the document outline stay in step.
@@ -26,13 +26,14 @@ export interface HeadingProps extends BlockVariants, ChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Heading
  */
-export function Heading({ level = "2", children, ...props }: HeadingProps): ReactElement {
+export function Heading({ level = "2", children, className, ...props }: HeadingProps): ReactElement {
 	const Element: `h${typeof level}` = `h${level}`;
 	return (
 		<Element
 			className={getClass(
 				HEADING_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Image.d.ts

@@ -1,12 +1,13 @@
 import type { ReactElement } from "react";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `Image` — an `src`, optional `alt` text, plus space and width variants.
  *
  * @see https://shelving.cc/ui/ImageProps
  */
-export interface ImageProps extends SpaceVariants, WidthVariants {
+export interface ImageProps extends SpaceVariants, WidthVariants, ClassProps {
     src: string;
     alt?: string;
 }
@@ -17,4 +18,4 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export declare function Image({ src, alt, ...props }: ImageProps): ReactElement;
+export declare function Image({ src, alt, className, ...props }: ImageProps): ReactElement;

package/ui/block/Image.js

@@ -10,7 +10,7 @@ const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...props }) {
+export function Image({ src, alt, className, ...props }) {
     return (_jsx("img", { src: src, alt: alt, className: getClass(IMAGE_CLASS, //
-        getBlockClass(props)) }));
+        getBlockClass(props), className) }));
 }

package/ui/block/Image.tsx

@@ -3,6 +3,7 @@ import { getBlockClass } from "../style/Block.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import IMAGE_CSS from "./Image.module.css";
 
 const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
@@ -12,7 +13,7 @@ const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
  *
  * @see https://shelving.cc/ui/ImageProps
  */
-export interface ImageProps extends SpaceVariants, WidthVariants {
+export interface ImageProps extends SpaceVariants, WidthVariants, ClassProps {
 	src: string;
 	alt?: string;
 }
@@ -24,7 +25,7 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...props }: ImageProps): ReactElement {
+export function Image({ src, alt, className, ...props }: ImageProps): ReactElement {
 	return (
 		<img
 			src={src}
@@ -32,6 +33,7 @@ export function Image({ src, alt, ...props }: ImageProps): ReactElement {
 			className={getClass(
 				IMAGE_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		/>
 	);

package/ui/block/Label.d.ts

@@ -16,4 +16,4 @@ export interface LabelProps extends HeadingProps {
  * @example <Label>Email address</Label>
  * @see https://shelving.cc/ui/Label
  */
-export declare function Label({ level, children, ...props }: LabelProps): ReactElement;
+export declare function Label({ level, children, className, ...props }: LabelProps): ReactElement;

package/ui/block/Label.js

@@ -12,8 +12,8 @@ const LABEL_CLASS = getModuleClass(LABEL_CSS, "label");
  * @example <Label>Email address</Label>
  * @see https://shelving.cc/ui/Label
  */
-export function Label({ level = "3", children, ...props }) {
+export function Label({ level = "3", children, className, ...props }) {
     const Element = `h${level}`;
     return (_jsx(Element, { className: getClass(LABEL_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Label.tsx

@@ -22,13 +22,14 @@ export interface LabelProps extends HeadingProps {}
  * @example <Label>Email address</Label>
  * @see https://shelving.cc/ui/Label
  */
-export function Label({ level = "3", children, ...props }: LabelProps): ReactElement {
+export function Label({ level = "3", children, className, ...props }: LabelProps): ReactElement {
 	const Element: `h${typeof level}` = `h${level}`;
 	return (
 		<Element
 			className={getClass(
 				LABEL_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/List.d.ts

@@ -2,12 +2,13 @@ import type { ReactElement, ReactNode } from "react";
 import type { ImmutableArray } from "../../util/array.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type GapVariants } from "../style/Gap.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `List` — colour, gap, space, and typography variants plus its list items and an `ordered` toggle.
  *
  * @see https://shelving.cc/ui/ListProps
  */
-export interface ListProps extends GapVariants, BlockVariants {
+export interface ListProps extends GapVariants, BlockVariants, ClassProps {
     readonly children: ImmutableArray<ReactNode>;
     readonly ordered?: boolean | undefined;
 }
@@ -18,4 +19,4 @@ export interface ListProps extends GapVariants, BlockVariants {
  * @kind component
  * @see https://shelving.cc/ui/List
  */
-export declare function List({ children, ordered, ...props }: ListProps): ReactElement;
+export declare function List({ children, ordered, className, ...props }: ListProps): ReactElement;

package/ui/block/List.js

@@ -12,9 +12,9 @@ const LIST_UNORDERED_CLASS = getModuleClass(LIST_CSS, "unordered");
  * @kind component
  * @see https://shelving.cc/ui/List
  */
-export function List({ children, ordered = false, ...props }) {
+export function List({ children, ordered = false, className, ...props }) {
     const items = children.map((v, i) => _jsx("li", { children: v }, i.toString()));
-    const className = getClass(ordered ? LIST_ORDERED_CLASS : LIST_UNORDERED_CLASS, //
-    getBlockClass(props), getGapClass(props));
-    return ordered ? _jsx("ol", { className: className, children: items }) : _jsx("ul", { className: className, children: items });
+    const classes = getClass(ordered ? LIST_ORDERED_CLASS : LIST_UNORDERED_CLASS, //
+    getBlockClass(props), getGapClass(props), className);
+    return ordered ? _jsx("ol", { className: classes, children: items }) : _jsx("ul", { className: classes, children: items });
 }

package/ui/block/List.tsx

@@ -3,6 +3,7 @@ import type { ImmutableArray } from "../../util/array.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { type GapVariants, getGapClass } from "../style/Gap.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import LIST_CSS from "./List.module.css";
 
 const LIST_ORDERED_CLASS = getModuleClass(LIST_CSS, "ordered");
@@ -13,7 +14,7 @@ const LIST_UNORDERED_CLASS = getModuleClass(LIST_CSS, "unordered");
  *
  * @see https://shelving.cc/ui/ListProps
  */
-export interface ListProps extends GapVariants, BlockVariants {
+export interface ListProps extends GapVariants, BlockVariants, ClassProps {
 	readonly children: ImmutableArray<ReactNode>;
 	readonly ordered?: boolean | undefined;
 }
@@ -25,12 +26,13 @@ export interface ListProps extends GapVariants, BlockVariants {
  * @kind component
  * @see https://shelving.cc/ui/List
  */
-export function List({ children, ordered = false, ...props }: ListProps): ReactElement {
+export function List({ children, ordered = false, className, ...props }: ListProps): ReactElement {
 	const items = children.map((v, i) => <li key={i.toString()}>{v}</li>);
-	const className = getClass(
+	const classes = getClass(
 		ordered ? LIST_ORDERED_CLASS : LIST_UNORDERED_CLASS, //
 		getBlockClass(props),
 		getGapClass(props),
+		className,
 	);
-	return ordered ? <ol className={className}>{items}</ol> : <ul className={className}>{items}</ul>;
+	return ordered ? <ol className={classes}>{items}</ol> : <ul className={classes}>{items}</ul>;
 }

package/ui/block/Panel.d.ts

@@ -2,14 +2,14 @@ import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
 import { type PaddingVariants } from "../style/Padding.js";
 import { type StatusVariants } from "../style/Status.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import type { BlockElement } from "./Block.js";
 /**
  * Props for `Panel` — colour, status, and typography variants plus optional `children`.
  *
  * @see https://shelving.cc/ui/PanelProps
  */
-export interface PanelProps extends BlockVariants, PaddingVariants, StatusVariants, OptionalChildProps {
+export interface PanelProps extends BlockVariants, PaddingVariants, StatusVariants, OptionalChildProps, ClassProps {
     /**
      * Element this `<Panel>` renders as, e.g. "header" to output a "<header>"
      * @default "section"
@@ -26,4 +26,4 @@ export interface PanelProps extends BlockVariants, PaddingVariants, StatusVarian
  * @kind component
  * @see https://shelving.cc/ui/Panel
  */
-export declare function Panel({ as: Element, children, ...props }: PanelProps): ReactElement;
+export declare function Panel({ as: Element, children, className, ...props }: PanelProps): ReactElement;

package/ui/block/Panel.js

@@ -15,7 +15,7 @@ const PANEL_CLASS = getModuleClass(PANEL_CSS, "panel");
  * @kind component
  * @see https://shelving.cc/ui/Panel
  */
-export function Panel({ as: Element = "section", children, ...props }) {
+export function Panel({ as: Element = "section", children, className, ...props }) {
     return (_jsx(Element, { className: getClass(PANEL_CLASS, //
-        getStatusClass(props), getPaddingClass(props), getBlockClass(props)), children: children }));
+        getStatusClass(props), getPaddingClass(props), getBlockClass(props), className), children: children }));
 }

package/ui/block/Panel.tsx

@@ -3,7 +3,7 @@ import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getPaddingClass, type PaddingVariants } from "../style/Padding.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import type { BlockElement } from "./Block.js";
 import PANEL_CSS from "./Panel.module.css";
 
@@ -14,7 +14,7 @@ const PANEL_CLASS = getModuleClass(PANEL_CSS, "panel");
  *
  * @see https://shelving.cc/ui/PanelProps
  */
-export interface PanelProps extends BlockVariants, PaddingVariants, StatusVariants, OptionalChildProps {
+export interface PanelProps extends BlockVariants, PaddingVariants, StatusVariants, OptionalChildProps, ClassProps {
 	/**
 	 * Element this `<Panel>` renders as, e.g. "header" to output a "<header>"
 	 * @default "section"
@@ -32,7 +32,7 @@ export interface PanelProps extends BlockVariants, PaddingVariants, StatusVarian
  * @kind component
  * @see https://shelving.cc/ui/Panel
  */
-export function Panel({ as: Element = "section", children, ...props }: PanelProps): ReactElement {
+export function Panel({ as: Element = "section", children, className, ...props }: PanelProps): ReactElement {
 	return (
 		<Element
 			className={getClass(
@@ -40,6 +40,7 @@ export function Panel({ as: Element = "section", children, ...props }: PanelProp
 				getStatusClass(props),
 				getPaddingClass(props),
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Paragraph.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Paragraph` — colour, space, and typography variants.
  *
  * @see https://shelving.cc/ui/ParagraphProps
  */
-export interface ParagraphProps extends BlockVariants, OptionalChildProps {
+export interface ParagraphProps extends BlockVariants, OptionalChildProps, ClassProps {
 }
 /**
  * Paragraph block of body text — rendered as `<p>`.
@@ -14,4 +14,4 @@ export interface ParagraphProps extends BlockVariants, OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Paragraph
  */
-export declare function Paragraph({ children, ...props }: ParagraphProps): ReactElement;
+export declare function Paragraph({ children, className, ...props }: ParagraphProps): ReactElement;

package/ui/block/Paragraph.js

@@ -9,7 +9,7 @@ const PARAGRAPH_CLASS = getModuleClass(PARAGRAPH_CSS, "paragraph");
  * @kind component
  * @see https://shelving.cc/ui/Paragraph
  */
-export function Paragraph({ children, ...props }) {
+export function Paragraph({ children, className, ...props }) {
     return (_jsx("p", { className: getClass(PARAGRAPH_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Paragraph.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import PARAGRAPH_CSS from "./Paragraph.module.css";
 
 const PARAGRAPH_CLASS = getModuleClass(PARAGRAPH_CSS, "paragraph");
@@ -11,7 +11,7 @@ const PARAGRAPH_CLASS = getModuleClass(PARAGRAPH_CSS, "paragraph");
  *
  * @see https://shelving.cc/ui/ParagraphProps
  */
-export interface ParagraphProps extends BlockVariants, OptionalChildProps {}
+export interface ParagraphProps extends BlockVariants, OptionalChildProps, ClassProps {}
 
 /**
  * Paragraph block of body text — rendered as `<p>`.
@@ -19,12 +19,13 @@ export interface ParagraphProps extends BlockVariants, OptionalChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Paragraph
  */
-export function Paragraph({ children, ...props }: ParagraphProps): ReactElement {
+export function Paragraph({ children, className, ...props }: ParagraphProps): ReactElement {
 	return (
 		<p
 			className={getClass(
 				PARAGRAPH_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Preformatted.d.ts

@@ -1,13 +1,13 @@
 import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
 import type { SpaceVariants } from "../style/Space.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Preformatted` — space, colour, typography, width, and padding variants plus a `wrap` toggle.
  *
  * @see https://shelving.cc/ui/PreformattedProps
  */
-export interface PreformattedProps extends SpaceVariants, BlockVariants, OptionalChildProps {
+export interface PreformattedProps extends SpaceVariants, BlockVariants, OptionalChildProps, ClassProps {
     /** Enable line wrapping (default is nowrap). */
     wrap?: boolean | undefined;
 }
@@ -20,4 +20,4 @@ export interface PreformattedProps extends SpaceVariants, BlockVariants, Optiona
  * @example <Preformatted>{"line one\nline two"}</Preformatted>
  * @see https://shelving.cc/ui/Preformatted
  */
-export declare function Preformatted({ children, ...variants }: PreformattedProps): ReactElement;
+export declare function Preformatted({ children, className, ...variants }: PreformattedProps): ReactElement;

package/ui/block/Preformatted.js

@@ -11,7 +11,7 @@ import PREFORMATTED_CSS from "./Preformatted.module.css";
  * @example <Preformatted>{"line one\nline two"}</Preformatted>
  * @see https://shelving.cc/ui/Preformatted
  */
-export function Preformatted({ children, ...variants }) {
+export function Preformatted({ children, className, ...variants }) {
     return (_jsx("pre", { className: getClass(getModuleClass(PREFORMATTED_CSS, "preformatted", variants), //
-        getBlockClass(variants)), children: children }));
+        getBlockClass(variants), className), children: children }));
 }

package/ui/block/Preformatted.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import type { SpaceVariants } from "../style/Space.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import PREFORMATTED_CSS from "./Preformatted.module.css";
 
 /**
@@ -10,7 +10,7 @@ import PREFORMATTED_CSS from "./Preformatted.module.css";
  *
  * @see https://shelving.cc/ui/PreformattedProps
  */
-export interface PreformattedProps extends SpaceVariants, BlockVariants, OptionalChildProps {
+export interface PreformattedProps extends SpaceVariants, BlockVariants, OptionalChildProps, ClassProps {
 	/** Enable line wrapping (default is nowrap). */
 	wrap?: boolean | undefined;
 }
@@ -24,12 +24,13 @@ export interface PreformattedProps extends SpaceVariants, BlockVariants, Optiona
  * @example <Preformatted>{"line one\nline two"}</Preformatted>
  * @see https://shelving.cc/ui/Preformatted
  */
-export function Preformatted({ children, ...variants }: PreformattedProps): ReactElement {
+export function Preformatted({ children, className, ...variants }: PreformattedProps): ReactElement {
 	return (
 		<pre
 			className={getClass(
 				getModuleClass(PREFORMATTED_CSS, "preformatted", variants), //
 				getBlockClass(variants),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Row.d.ts

@@ -1,14 +1,14 @@
 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 { ClassProps, OptionalChildProps } from "../util/index.js";
 import type { BlockElement } from "./Block.js";
 /**
  * Props for the `<Row>` component.
  *
  * @see https://shelving.cc/ui/RowProps
  */
-export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProps {
+export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProps, ClassProps {
     /**
      * Element this `<Row>` renders as, e.g. "header" to output a "<header>"
      * @default "div"
@@ -22,4 +22,4 @@ export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProp
  * @example <Row gap="small" center>{items}</Row>
  * @see https://shelving.cc/ui/Row
  */
-export declare function Row({ as: Element, children, ...props }: RowProps): ReactElement;
+export declare function Row({ as: Element, children, className, ...props }: RowProps): ReactElement;

package/ui/block/Row.js

@@ -9,7 +9,7 @@ import { getClass } from "../util/css.js";
  * @example <Row gap="small" center>{items}</Row>
  * @see https://shelving.cc/ui/Row
  */
-export function Row({ as: Element = "div", children, ...props }) {
+export function Row({ as: Element = "div", children, className, ...props }) {
     return (_jsx(Element, { className: getClass(getBlockClass(props), //
-        getFlexClass(props)), children: children }));
+        getFlexClass(props), className), children: children }));
 }

package/ui/block/Row.tsx

@@ -2,7 +2,7 @@ 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 { ClassProps, OptionalChildProps } from "../util/index.js";
 import type { BlockElement } from "./Block.js";
 
 /**
@@ -10,7 +10,7 @@ import type { BlockElement } from "./Block.js";
  *
  * @see https://shelving.cc/ui/RowProps
  */
-export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProps {
+export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProps, ClassProps {
 	/**
 	 * Element this `<Row>` renders as, e.g. "header" to output a "<header>"
 	 * @default "div"
@@ -25,12 +25,13 @@ export interface RowProps extends BlockVariants, FlexVariants, OptionalChildProp
  * @example <Row gap="small" center>{items}</Row>
  * @see https://shelving.cc/ui/Row
  */
-export function Row({ as: Element = "div", children, ...props }: RowProps): ReactElement {
+export function Row({ as: Element = "div", children, className, ...props }: RowProps): ReactElement {
 	return (
 		<Element
 			className={getClass(
 				getBlockClass(props), //
 				getFlexClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Section.js

@@ -5,7 +5,7 @@ import SECTION_CSS from "./Section.module.css";
 const SECTION_CLASS = getModuleClass(SECTION_CSS, "section");
 function _getSectionClass(props) {
     return getClass(SECTION_CLASS, //
-    getBlockClass(props));
+    getBlockClass(props), props.className);
 }
 /**
  * `<section>` block with section-level spacing.

package/ui/block/Section.tsx

@@ -24,6 +24,7 @@ function _getSectionClass(props: SectionProps): string {
 	return getClass(
 		SECTION_CLASS, //
 		getBlockClass(props),
+		props.className,
 	);
 }
 

package/ui/block/Subheading.d.ts

@@ -13,4 +13,4 @@ export type SubheadingProps = HeadingProps;
  * @kind component
  * @see https://shelving.cc/ui/Subheading
  */
-export declare function Subheading({ level, children, ...props }: SubheadingProps): ReactElement;
+export declare function Subheading({ level, children, className, ...props }: SubheadingProps): ReactElement;