shelving 1.282.2 → 1.284.0

package/ui/dialog/Dialog.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { memo, Suspense, useEffect, useRef } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getButtonClass } from "../button/Button.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Dialog.module.css";
 /**
  * Modal `<dialog>` element that opens on mount and includes a close button.
@@ -17,7 +18,7 @@ export const Dialog = memo(({ children, onClose, ...props }) => {
     useEffect(() => {
         ref.current?.showModal();
     }, []);
-    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: getModuleClass(styles, "dialog"), onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: getModuleClass(styles, "close"), children: _jsx(DialogCloseButton, { plain: true }) })] }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: getModuleClass(styles, "dialog"), onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: getModuleClass(styles, "close"), children: _jsx(DialogCloseButton, {}) })] }) }));
 });
 /** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
 function _closeOnBackdropClick({ currentTarget, target }) {
@@ -30,12 +31,14 @@ function _closeOnBackdropClick({ currentTarget, target }) {
 }
 /**
  * Button that closes its wrapping `<dialog>`, showing an X icon by default.
+ * - Styled with the shared `Button` classes (positioning comes from the `<Dialog>`'s own `.close` wrapper rules).
+ * - `plain` by default so only the icon shows until hover or focus — pass `plain={false}` for a solid button.
  *
  * @kind component
  * @see https://shelving.cc/ui/DialogCloseButton
  */
-export function DialogCloseButton({ children = _jsx(XMarkIcon, {}), ...variants }) {
-    return (_jsx("button", { type: "button", title: "Close", className: getModuleClass(styles, "button", variants), onClick: _closeOnButtonClick, children: children }));
+export function DialogCloseButton({ children = _jsx(XMarkIcon, {}), plain = true, className, ...variants }) {
+    return (_jsx("button", { type: "button", title: "Close", className: getClass(getButtonClass({ plain, ...variants }), className), onClick: _closeOnButtonClick, children: children }));
 }
 function _closeOnButtonClick({ currentTarget }) {
     currentTarget.closest("dialog")?.close();

package/ui/dialog/Dialog.tsx

@@ -1,9 +1,9 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../button/Button.js";
-import { getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import { type ButtonVariants, getButtonClass } from "../button/Button.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Dialog.module.css";
 
 /**
@@ -37,7 +37,7 @@ export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 			<dialog ref={ref} className={getModuleClass(styles, "dialog")} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
 				{children}
 				<div className={getModuleClass(styles, "close")}>
-					<DialogCloseButton plain />
+					<DialogCloseButton />
 				</div>
 			</dialog>
 		</Suspense>
@@ -58,17 +58,29 @@ function _closeOnBackdropClick({ currentTarget, target }: MouseEvent<HTMLDialogE
  *
  * @see https://shelving.cc/ui/DialogCloseButtonProps
  */
-export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps {}
+export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {}
 
 /**
  * Button that closes its wrapping `<dialog>`, showing an X icon by default.
+ * - Styled with the shared `Button` classes (positioning comes from the `<Dialog>`'s own `.close` wrapper rules).
+ * - `plain` by default so only the icon shows until hover or focus — pass `plain={false}` for a solid button.
  *
  * @kind component
  * @see https://shelving.cc/ui/DialogCloseButton
  */
-export function DialogCloseButton({ children = <XMarkIcon />, ...variants }: DialogCloseButtonProps): ReactElement {
+export function DialogCloseButton({
+	children = <XMarkIcon />,
+	plain = true,
+	className,
+	...variants
+}: DialogCloseButtonProps): ReactElement {
 	return (
-		<button type="button" title="Close" className={getModuleClass(styles, "button", variants)} onClick={_closeOnButtonClick}>
+		<button
+			type="button"
+			title="Close"
+			className={getClass(getButtonClass({ plain, ...variants }), className)}
+			onClick={_closeOnButtonClick}
+		>
 			{children}
 		</button>
 	);

package/ui/dialog/Modal.d.ts

@@ -1,11 +1,11 @@
 import type { ReactElement } from "react";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Modal>` — optional `children` content.
  *
  * @see https://shelving.cc/ui/ModalProps
  */
-export interface ModalProps extends OptionalChildProps {
+export interface ModalProps extends OptionalChildProps, ClassProps {
 }
 /**
  * Styled `<aside>` overlay container for modal content.
@@ -13,4 +13,4 @@ export interface ModalProps extends OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export declare function Modal({ children }: ModalProps): ReactElement;
+export declare function Modal({ children, className }: ModalProps): ReactElement;

package/ui/dialog/Modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Modal.module.css";
 /**
  * Styled `<aside>` overlay container for modal content.
@@ -7,6 +7,6 @@ import styles from "./Modal.module.css";
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export function Modal({ children }) {
-    return _jsx("aside", { className: getModuleClass(styles, "modal"), children: children });
+export function Modal({ children, className }) {
+    return _jsx("aside", { className: getClass(getModuleClass(styles, "modal"), className), children: children });
 }

package/ui/dialog/Modal.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Modal.module.css";
 
 /**
@@ -8,7 +8,7 @@ import styles from "./Modal.module.css";
  *
  * @see https://shelving.cc/ui/ModalProps
  */
-export interface ModalProps extends OptionalChildProps {}
+export interface ModalProps extends OptionalChildProps, ClassProps {}
 
 /**
  * Styled `<aside>` overlay container for modal content.
@@ -16,6 +16,6 @@ export interface ModalProps extends OptionalChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Modal
  */
-export function Modal({ children }: ModalProps): ReactElement {
-	return <aside className={getModuleClass(styles, "modal")}>{children}</aside>;
+export function Modal({ children, className }: ModalProps): ReactElement {
+	return <aside className={getClass(getModuleClass(styles, "modal"), className)}>{children}</aside>;
 }

package/ui/docs/DocumentationButtons.d.ts

@@ -2,12 +2,13 @@ import type { ReactElement } from "react";
 import type { ImmutableArray } from "../../util/array.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type FlexVariants } from "../style/Flex.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `DocumentationButtons` — the relational metadata of a documented symbol (`class`, `extends`, `implements`), plus block-space and flex overrides.
  *
  * @see https://shelving.cc/ui/DocumentationButtonsProps
  */
-export interface DocumentationButtonsProps extends BlockVariants, FlexVariants {
+export interface DocumentationButtonsProps extends BlockVariants, FlexVariants, ClassProps {
     /** Name of the class/interface this member belongs to (e.g. `"Store"` for `Store.get()`). Set only on methods and properties. */
     readonly class?: string | undefined;
     /** Full type text of the class/interface this extends, including any generic arguments (e.g. `"AbstractStore<string>"`, `"Omit<StringSchemaOptions, 'value'>"`). Resolved to a link at render time, trimming generics to the bare name; builtins/wrappers that don't resolve stay as text. */
@@ -24,4 +25,4 @@ export interface DocumentationButtonsProps extends BlockVariants, FlexVariants {
  *
  * @kind component
  */
-export declare function DocumentationButtons({ space, wrap, left, gap, ...props }: DocumentationButtonsProps): ReactElement | null;
+export declare function DocumentationButtons({ space, wrap, left, gap, className, ...props }: DocumentationButtonsProps): ReactElement | null;

package/ui/docs/DocumentationButtons.js

@@ -22,11 +22,11 @@ function* _relations({ class: className, extends: extendsName, implements: imple
  *
  * @kind component
  */
-export function DocumentationButtons({ space = "paragraph", wrap = true, left = true, gap = "none", ...props }) {
+export function DocumentationButtons({ space = "paragraph", wrap = true, left = true, gap = "none", className, ...props }) {
     const relations = Array.from(_relations(props));
     if (!relations.length)
         return null;
     const variants = { space, wrap, left, gap, ...props };
     return (_jsx("nav", { className: getClass(getBlockClass(variants), //
-        getFlexClass(variants)), children: relations.map(([label, to]) => (_jsxs(TreeButton, { name: to, children: [label, " ", to] }, `${label}-${to}`))) }));
+        getFlexClass(variants), className), children: relations.map(([label, to]) => (_jsxs(TreeButton, { name: to, children: [label, " ", to] }, `${label}-${to}`))) }));
 }

package/ui/docs/DocumentationButtons.tsx

@@ -4,12 +4,13 @@ import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { TreeButton } from "../tree/TreeButton.js";
 import { getClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `DocumentationButtons` — the relational metadata of a documented symbol (`class`, `extends`, `implements`), plus block-space and flex overrides.
  *
  * @see https://shelving.cc/ui/DocumentationButtonsProps
  */
-export interface DocumentationButtonsProps extends BlockVariants, FlexVariants {
+export interface DocumentationButtonsProps extends BlockVariants, FlexVariants, ClassProps {
 	/** Name of the class/interface this member belongs to (e.g. `"Store"` for `Store.get()`). Set only on methods and properties. */
 	readonly class?: string | undefined;
 	/** Full type text of the class/interface this extends, including any generic arguments (e.g. `"AbstractStore<string>"`, `"Omit<StringSchemaOptions, 'value'>"`). Resolved to a link at render time, trimming generics to the bare name; builtins/wrappers that don't resolve stay as text. */
@@ -44,6 +45,7 @@ export function DocumentationButtons({
 	wrap = true,
 	left = true,
 	gap = "none",
+	className,
 	...props
 }: DocumentationButtonsProps): ReactElement | null {
 	const relations = Array.from(_relations(props));
@@ -54,6 +56,7 @@ export function DocumentationButtons({
 			className={getClass(
 				getBlockClass(variants), //
 				getFlexClass(variants),
+				className,
 			)}
 		>
 			{relations.map(([label, to]) => (

package/ui/form/Field.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement, ReactNode } from "react";
 import { type BlockVariants } from "../style/Block.js";
-import type { ChildProps } from "../util/index.js";
+import type { ChildProps, ClassProps } from "../util/index.js";
 /**
  * Props for `Field`, a labelled wrapper around a form control.
  *
  * @see https://shelving.cc/ui/FieldProps
  */
-export interface FieldProps extends BlockVariants, ChildProps {
+export interface FieldProps extends BlockVariants, ChildProps, ClassProps {
     title?: ReactNode | undefined;
     description?: ReactNode | undefined;
     message?: ReactNode | undefined;
@@ -18,4 +18,4 @@ export interface FieldProps extends BlockVariants, ChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Field
  */
-export declare function Field({ title, description, message, children, ...props }: FieldProps): ReactElement;
+export declare function Field({ title, description, message, children, className, ...props }: FieldProps): ReactElement;

package/ui/form/Field.js

@@ -12,7 +12,7 @@ const FIELD_DESCRIPTION_CLASS = getModuleClass(FIELD_CSS, "description");
  * @kind component
  * @see https://shelving.cc/ui/Field
  */
-export function Field({ title, description, message, children, ...props }) {
+export function Field({ title, description, message, children, className, ...props }) {
     return (_jsxs("label", { className: getClass(FIELD_CLASS, //
-        getBlockClass(props)), children: [(title || description) && (_jsxs("div", { children: [title ? _jsx("div", { className: FIELD_TITLE_CLASS, children: title }) : null, description && _jsx("div", { className: FIELD_DESCRIPTION_CLASS, children: description })] })), children, message && (_jsx(Message, { status: "error", right: true, children: message }))] }));
+        getBlockClass(props), className), children: [(title || description) && (_jsxs("div", { children: [title ? _jsx("div", { className: FIELD_TITLE_CLASS, children: title }) : null, description && _jsx("div", { className: FIELD_DESCRIPTION_CLASS, children: description })] })), children, message && (_jsx(Message, { status: "error", right: true, children: message }))] }));
 }

package/ui/form/Field.tsx

@@ -2,7 +2,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Message } from "../notice/Message.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { ChildProps } from "../util/index.js";
+import type { ChildProps, ClassProps } from "../util/index.js";
 import FIELD_CSS from "./Field.module.css";
 
 const FIELD_CLASS = getModuleClass(FIELD_CSS, "field");
@@ -14,7 +14,7 @@ const FIELD_DESCRIPTION_CLASS = getModuleClass(FIELD_CSS, "description");
  *
  * @see https://shelving.cc/ui/FieldProps
  */
-export interface FieldProps extends BlockVariants, ChildProps {
+export interface FieldProps extends BlockVariants, ChildProps, ClassProps {
 	title?: ReactNode | undefined;
 	description?: ReactNode | undefined;
 	message?: ReactNode | undefined;
@@ -27,13 +27,14 @@ export interface FieldProps extends BlockVariants, ChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Field
  */
-export function Field({ title, description, message, children, ...props }: FieldProps): ReactElement {
+export function Field({ title, description, message, children, className, ...props }: FieldProps): ReactElement {
 	return (
 		// biome-ignore lint/a11y/noLabelWithoutControl: Generally `children` will contain a field.
 		<label
 			className={getClass(
 				FIELD_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{(title || description) && (

package/ui/form/Form.d.ts

@@ -5,7 +5,7 @@ import type { ImmutableDictionary } from "../../util/dictionary.js";
 import type { Arguments } from "../../util/function.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type NoticeCallback } from "../util/notice.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import { FormStore } from "./FormStore.js";
 /**
  * Callback invoked when a `Form` is submitted with its validated data.
@@ -20,7 +20,7 @@ export type FormCallback<T extends Data> = (data: T, event: SubmitEvent<HTMLForm
  *
  * @see https://shelving.cc/ui/FormProps
  */
-export interface FormProps<T extends Data> extends BlockVariants, OptionalChildProps {
+export interface FormProps<T extends Data> extends BlockVariants, OptionalChildProps, ClassProps {
     /** Schema for the form. */
     schema: DataSchema<T>;
     /** Initial data for the form. */

package/ui/form/Form.js

@@ -3,12 +3,13 @@ import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { isAsync } from "../../util/async.js";
 import { getBlockClass } from "../style/Block.js";
+import { getClass } from "../util/css.js";
 import { notifySuccess, notifyThrown } from "../util/notice.js";
 import { FormContext } from "./FormContext.js";
 import { FormFields } from "./FormFields.js";
 import { FormFooter } from "./FormFooter.js";
 import { FormStore } from "./FormStore.js";
-export function Form({ schema, data: initialData, onSubmit, submit, messages, children = (_jsxs(_Fragment, { children: [_jsx(FormFields, {}), _jsx(FormFooter, { submit: submit })] })), ...props }) {
+export function Form({ schema, data: initialData, onSubmit, submit, messages, className, children = (_jsxs(_Fragment, { children: [_jsx(FormFields, {}), _jsx(FormFooter, { submit: submit })] })), ...props }) {
     // Create a form store instance and subscribe to changes in it.
     const store = useStore(useInstance(FormStore, schema, initialData, messages));
     const busy = useStore(store.busy).value;
@@ -23,7 +24,7 @@ export function Form({ schema, data: initialData, onSubmit, submit, messages, ch
             // Close the parent dialog on successful submit.
             if (result)
                 dialog?.close();
-        }, className: getBlockClass(props), noValidate: true, children: _jsx("fieldset", { className: getBlockClass({}), disabled: busy, children: _jsx(FormContext, { value: store, children: children }) }) }, store.key));
+        }, className: getClass(getBlockClass(props), className), noValidate: true, children: _jsx("fieldset", { className: getBlockClass({}), disabled: busy, children: _jsx(FormContext, { value: store, children: children }) }) }, store.key));
 }
 /**
  * Run a form submit callback and publish success/error notices based on its return or thrown value.

package/ui/form/Form.tsx

@@ -7,8 +7,9 @@ import type { Data, PartialData } from "../../util/data.js";
 import type { ImmutableDictionary } from "../../util/dictionary.js";
 import type { Arguments } from "../../util/function.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
+import { getClass } from "../util/css.js";
 import { type NoticeCallback, notifySuccess, notifyThrown } from "../util/notice.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import { FormContext } from "./FormContext.js";
 import { FormFields } from "./FormFields.js";
 import { FormFooter } from "./FormFooter.js";
@@ -31,7 +32,7 @@ export type FormCallback<T extends Data> = (
  *
  * @see https://shelving.cc/ui/FormProps
  */
-export interface FormProps<T extends Data> extends BlockVariants, OptionalChildProps {
+export interface FormProps<T extends Data> extends BlockVariants, OptionalChildProps, ClassProps {
 	/** Schema for the form. */
 	schema: DataSchema<T>;
 	/** Initial data for the form. */
@@ -60,6 +61,7 @@ export function Form({
 	onSubmit,
 	submit,
 	messages,
+	className,
 	children = (
 		<>
 			<FormFields />
@@ -90,7 +92,7 @@ export function Form({
 				// Close the parent dialog on successful submit.
 				if (result) dialog?.close();
 			}}
-			className={getBlockClass(props)}
+			className={getClass(getBlockClass(props), className)}
 			noValidate={true}
 		>
 			<fieldset className={getBlockClass({})} disabled={busy}>

package/ui/form/FormFields.d.ts

@@ -8,7 +8,7 @@ import type { InputProps } from "../input/Input.js";
  * @example <FormField name="email" />
  * @see https://shelving.cc/ui/FormField
  */
-export declare function FormField({ name, ...props }: InputProps): ReactElement;
+export declare function FormField({ name, className, ...props }: InputProps): ReactElement;
 /**
  * Show a `<Field>` for every property in the current form's schema.
  *

package/ui/form/FormFields.js

@@ -11,10 +11,10 @@ import { requireForm, useField } from "./FormContext.js";
  * @example <FormField name="email" />
  * @see https://shelving.cc/ui/FormField
  */
-export function FormField({ name, ...props }) {
+export function FormField({ name, className, ...props }) {
     const field = useField(name);
     const { schema, message } = field;
-    return (_jsx(Field, { ...schema, message: message, required: props.required, children: _jsx(SchemaInput, { ...field, ...props }) }));
+    return (_jsx(Field, { ...schema, message: message, required: props.required, className: className, children: _jsx(SchemaInput, { ...field, ...props }) }));
 }
 /**
  * Show a `<Field>` for every property in the current form's schema.

package/ui/form/FormFields.tsx

@@ -13,12 +13,12 @@ import { requireForm, useField } from "./FormContext.js";
  * @example <FormField name="email" />
  * @see https://shelving.cc/ui/FormField
  */
-export function FormField({ name, ...props }: InputProps): ReactElement {
+export function FormField({ name, className, ...props }: InputProps): ReactElement {
 	const field = useField(name);
 	const { schema, message } = field;
 
 	return (
-		<Field {...schema} message={message} required={props.required}>
+		<Field {...schema} message={message} required={props.required} className={className}>
 			<SchemaInput {...field} {...props} />
 		</Field>
 	);

package/ui/form/FormFooter.d.ts

@@ -1,11 +1,11 @@
 import type { ReactElement, ReactNode } from "react";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `FormFooter`, the submit-button-and-message footer for a form.
  *
  * @see https://shelving.cc/ui/FormFooterProps
  */
-export interface FormFooterProps extends OptionalChildProps {
+export interface FormFooterProps extends OptionalChildProps, ClassProps {
     submit?: ReactNode | undefined;
 }
 /**
@@ -18,4 +18,4 @@ export interface FormFooterProps extends OptionalChildProps {
  * @example <FormFooter submit="Save" />
  * @see https://shelving.cc/ui/FormFooter
  */
-export declare function FormFooter({ children, submit }: FormFooterProps): ReactElement;
+export declare function FormFooter({ children, submit, className }: FormFooterProps): ReactElement;

package/ui/form/FormFooter.js

@@ -13,6 +13,6 @@ import { FormMessage } from "./FormMessage.js";
  * @example <FormFooter submit="Save" />
  * @see https://shelving.cc/ui/FormFooter
  */
-export function FormFooter({ children, submit }) {
-    return (_jsxs(Footer, { children: [_jsxs(Row, { reverse: true, children: [_jsx(SubmitButton, { children: submit }), children] }), _jsx(FormMessage, {})] }));
+export function FormFooter({ children, submit, className }) {
+    return (_jsxs(Footer, { className: className, children: [_jsxs(Row, { reverse: true, children: [_jsx(SubmitButton, { children: submit }), children] }), _jsx(FormMessage, {})] }));
 }

package/ui/form/FormFooter.tsx

@@ -2,7 +2,7 @@ import type { ReactElement, ReactNode } from "react";
 import { Row } from "../block/Row.js";
 import { Footer } from "../block/Section.js";
 import { SubmitButton } from "../button/SubmitButton.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import { FormMessage } from "./FormMessage.js";
 
 /**
@@ -10,7 +10,7 @@ import { FormMessage } from "./FormMessage.js";
  *
  * @see https://shelving.cc/ui/FormFooterProps
  */
-export interface FormFooterProps extends OptionalChildProps {
+export interface FormFooterProps extends OptionalChildProps, ClassProps {
 	submit?: ReactNode | undefined;
 }
 
@@ -24,9 +24,9 @@ export interface FormFooterProps extends OptionalChildProps {
  * @example <FormFooter submit="Save" />
  * @see https://shelving.cc/ui/FormFooter
  */
-export function FormFooter({ children, submit }: FormFooterProps): ReactElement {
+export function FormFooter({ children, submit, className }: FormFooterProps): ReactElement {
 	return (
-		<Footer>
+		<Footer className={className}>
 			<Row reverse>
 				<SubmitButton>{submit}</SubmitButton>
 				{children}

package/ui/form/FormMessage.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { BlockVariants } from "../style/Block.js";
+import { type MessageProps } from "../notice/Message.js";
 /**
  * Show the current form's "main" (unnamed) message as a `<Message>`, or render nothing when there is no message.
  *
@@ -8,4 +8,4 @@ import type { BlockVariants } from "../style/Block.js";
  * @example <FormMessage />
  * @see https://shelving.cc/ui/FormMessage
  */
-export declare function FormMessage(props: BlockVariants): ReactElement | null;
+export declare function FormMessage(props: Omit<MessageProps, "children">): ReactElement | null;

package/ui/form/FormMessage.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
-import { Message } from "../notice/Message.js";
-import type { BlockVariants } from "../style/Block.js";
+import { Message, type MessageProps } from "../notice/Message.js";
 import { requireForm } from "./FormContext.js";
 
 /**
@@ -12,7 +11,7 @@ import { requireForm } from "./FormContext.js";
  * @example <FormMessage />
  * @see https://shelving.cc/ui/FormMessage
  */
-export function FormMessage(props: BlockVariants): ReactElement | null {
+export function FormMessage(props: Omit<MessageProps, "children">): ReactElement | null {
 	const message = useStore(requireForm().messages).get("");
 	if (!message) return null;
 	return (

package/ui/form/Progress.d.ts

@@ -2,13 +2,14 @@ import type { ReactElement } from "react";
 import { type Nullish } from "../../util/null.js";
 import { type ColorVariants } from "../style/Color.js";
 import { type StatusVariants } from "../style/Status.js";
+import type { ClassProps } from "../util/props.js";
 import "./Progress.css";
 /**
  * Props for `Progress`, a continuous horizontal progress bar.
  *
  * @see https://shelving.cc/ui/ProgressProps
  */
-export interface ProgressProps extends ColorVariants, StatusVariants {
+export interface ProgressProps extends ColorVariants, StatusVariants, ClassProps {
     /** Position within the `min`–`max` range, or `null`/`undefined`/omitted for an indeterminate bar. */
     value?: Nullish<number>;
     min?: number;
@@ -29,4 +30,4 @@ export interface ProgressProps extends ColorVariants, StatusVariants {
  * @example <Progress />
  * @see https://shelving.cc/ui/Progress
  */
-export declare function Progress({ value, min, max, ...props }: ProgressProps): ReactElement;
+export declare function Progress({ value, min, max, className, ...props }: ProgressProps): ReactElement;

package/ui/form/Progress.js

@@ -21,11 +21,11 @@ import styles from "./Progress.module.css";
  * @example <Progress />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, min = 0, max = 100, ...props }) {
+export function Progress({ value, min = 0, max = 100, className, ...props }) {
     // `<progress>` has no `min`, so shift the range to a `0`-based one. A non-positive span would make `<progress>` indeterminate, so fall back to an empty determinate bar.
     const span = max - min;
     return (_jsx("progress", { className: getClass(getModuleClass(styles, "progress"), //
-        getColorClass(props), getStatusClass(props)), 
+        getColorClass(props), getStatusClass(props), className), 
         // A nullish `value` drops the attribute (and its announced text) so the element is natively `:indeterminate` and the flowing animation styled off that pseudo-class takes over.
         value: notNullish(value) ? (span > 0 ? value - min : 0) : undefined, max: span > 0 ? span : 1, "aria-valuetext": notNullish(value) ? formatPercent(value - min, max - min) : undefined }));
 }

package/ui/form/Progress.tsx

@@ -4,6 +4,7 @@ import { type Nullish, notNullish } from "../../util/null.js";
 import { type ColorVariants, getColorClass } from "../style/Color.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import "./Progress.css";
 import styles from "./Progress.module.css";
 
@@ -12,7 +13,7 @@ import styles from "./Progress.module.css";
  *
  * @see https://shelving.cc/ui/ProgressProps
  */
-export interface ProgressProps extends ColorVariants, StatusVariants {
+export interface ProgressProps extends ColorVariants, StatusVariants, ClassProps {
 	/** Position within the `min`–`max` range, or `null`/`undefined`/omitted for an indeterminate bar. */
 	value?: Nullish<number>;
 	min?: number;
@@ -34,7 +35,7 @@ export interface ProgressProps extends ColorVariants, StatusVariants {
  * @example <Progress />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, min = 0, max = 100, ...props }: ProgressProps): ReactElement {
+export function Progress({ value, min = 0, max = 100, className, ...props }: ProgressProps): ReactElement {
 	// `<progress>` has no `min`, so shift the range to a `0`-based one. A non-positive span would make `<progress>` indeterminate, so fall back to an empty determinate bar.
 	const span = max - min;
 
@@ -44,6 +45,7 @@ export function Progress({ value, min = 0, max = 100, ...props }: ProgressProps)
 				getModuleClass(styles, "progress"), //
 				getColorClass(props),
 				getStatusClass(props),
+				className,
 			)}
 			// A nullish `value` drops the attribute (and its announced text) so the element is natively `:indeterminate` and the flowing animation styled off that pseudo-class takes over.
 			value={notNullish(value) ? (span > 0 ? value - min : 0) : undefined}

package/ui/inline/Code.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 /**
  * Props for `Code` — colour and typography variants, optional `children`, plus a `plain` toggle.
  *
  * @see https://shelving.cc/ui/CodeProps
  */
-export interface CodeProps extends TypographyVariants, OptionalChildProps {
+export interface CodeProps extends TypographyVariants, OptionalChildProps, ClassProps {
     plain?: boolean | undefined;
 }
 /**
@@ -16,4 +16,4 @@ export interface CodeProps extends TypographyVariants, OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Code
  */
-export declare function Code({ children, plain, ...props }: CodeProps): ReactElement;
+export declare function Code({ children, plain, className, ...props }: CodeProps): ReactElement;

package/ui/inline/Code.js

@@ -11,7 +11,7 @@ const CODE_PLAIN_CLASS = getModuleClass(CODE_CSS, "plain");
  * @kind component
  * @see https://shelving.cc/ui/Code
  */
-export function Code({ children, plain, ...props }) {
+export function Code({ children, plain, className, ...props }) {
     return (_jsx("code", { className: getClass(CODE_CLASS, //
-        plain && CODE_PLAIN_CLASS, getTypographyClass(props)), children: children }));
+        plain && CODE_PLAIN_CLASS, getTypographyClass(props), className), children: children }));
 }