shelving 1.282.2 → 1.284.0

package/ui/inline/Superscript.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 `Superscript` — optional `children`.
  *
  * @see https://shelving.cc/ui/SuperscriptProps
  */
-export interface SuperscriptProps extends OptionalChildProps {
+export interface SuperscriptProps extends OptionalChildProps, ClassProps {
 }
 /**
  * Superscript text — renders a `<sup>` element for typographically raised text (e.g. exponents, footnote markers).
@@ -14,4 +14,4 @@ export interface SuperscriptProps extends OptionalChildProps {
  * @example <>E = mc<Superscript>2</Superscript></>
  * @see https://shelving.cc/ui/Superscript
  */
-export declare function Superscript({ children }: SuperscriptProps): ReactElement;
+export declare function Superscript({ children, className }: SuperscriptProps): ReactElement;

package/ui/inline/Superscript.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 SUPERSCRIPT_CSS from "./Superscript.module.css";
 const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
 /**
@@ -9,6 +9,6 @@ const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
  * @example <>E = mc<Superscript>2</Superscript></>
  * @see https://shelving.cc/ui/Superscript
  */
-export function Superscript({ children }) {
-    return _jsx("sup", { className: SUPERSCRIPT_CLASS, children: children });
+export function Superscript({ children, className }) {
+    return _jsx("sup", { className: getClass(SUPERSCRIPT_CLASS, className), children: children });
 }

package/ui/inline/Superscript.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 SUPERSCRIPT_CSS from "./Superscript.module.css";
 
 const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
@@ -10,7 +10,7 @@ const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
  *
  * @see https://shelving.cc/ui/SuperscriptProps
  */
-export interface SuperscriptProps extends OptionalChildProps {}
+export interface SuperscriptProps extends OptionalChildProps, ClassProps {}
 
 /**
  * Superscript text — renders a `<sup>` element for typographically raised text (e.g. exponents, footnote markers).
@@ -19,6 +19,6 @@ export interface SuperscriptProps extends OptionalChildProps {}
  * @example <>E = mc<Superscript>2</Superscript></>
  * @see https://shelving.cc/ui/Superscript
  */
-export function Superscript({ children }: SuperscriptProps): ReactElement {
-	return <sup className={SUPERSCRIPT_CLASS}>{children}</sup>;
+export function Superscript({ children, className }: SuperscriptProps): ReactElement {
+	return <sup className={getClass(SUPERSCRIPT_CLASS, className)}>{children}</sup>;
 }

package/ui/input/ArrayInput.js

@@ -10,12 +10,12 @@ import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 export function ArrayInput({ name, 
 // title,
-placeholder, required = false, disabled = false, message = "", value = [], onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, }) {
+placeholder, required = false, disabled = false, message = "", value = [], onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, className, }) {
     const messages = splitMessage(message);
     const length = value.length;
     const disableRemove = disabled || length <= min;
     const addNewItem = () => onValue([...value, items.value]);
-    return (_jsxs(Column, { children: [length ? (value.map((v, i) => {
+    return (_jsxs(Column, { className: className, children: [length ? (value.map((v, i) => {
                 const k = i.toString();
                 return (_jsxs(Row, { children: [_jsx(SchemaInput, { name: k, schema: items, value: v, onValue: x => onValue(withArrayIndex(value, i, x)), message: messages[k], disabled: disabled }), _jsx(Button, { onClick: () => onValue(omitArrayIndex(value, i)), disabled: disableRemove, title: disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`, children: _jsx(XMarkIcon, {}) })] }, k));
             })) : (_jsx(ButtonInput, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Row, { children: [_jsxs(Button //

package/ui/input/ArrayInput.tsx

@@ -50,13 +50,14 @@ export function ArrayInput({
 	min = 0,
 	max = Number.POSITIVE_INFINITY,
 	items,
+	className,
 }: ArrayInputProps<unknown>): ReactElement {
 	const messages = splitMessage(message);
 	const length = value.length;
 	const disableRemove = disabled || length <= min;
 	const addNewItem = () => onValue([...value, items.value]);
 	return (
-		<Column>
+		<Column className={className}>
 			{length ? (
 				value.map((v, i) => {
 					const k = i.toString();

package/ui/input/ArrayRadioInputs.d.ts

@@ -21,4 +21,4 @@ export interface ArrayRadioInputsProps<T> extends ValueInputProps<T> {
  * @example <ArrayRadioInputs name="size" items={["s", "m", "l"]} value={size} onValue={setSize} />
  * @see https://shelving.cc/ui/ArrayRadioInputs
  */
-export declare function ArrayRadioInputs<T>({ value, onValue, required, items, formatter, ...props }: ArrayRadioInputsProps<T>): ReactElement;
+export declare function ArrayRadioInputs<T>({ value, onValue, required, items, formatter, className, ...props }: ArrayRadioInputsProps<T>): ReactElement;

package/ui/input/ArrayRadioInputs.js

@@ -11,8 +11,8 @@ import { RadioInput } from "./RadioInput.js";
  * @example <ArrayRadioInputs name="size" items={["s", "m", "l"]} value={size} onValue={setSize} />
  * @see https://shelving.cc/ui/ArrayRadioInputs
  */
-export function ArrayRadioInputs({ value, onValue, required = false, items, formatter = formatValue, ...props }) {
-    return (_jsxs(Column, { children: [items.map((v, i) => {
+export function ArrayRadioInputs({ value, onValue, required = false, items, formatter = formatValue, className, ...props }) {
+    return (_jsxs(Column, { className: className, children: [items.map((v, i) => {
                 return (_jsx(RadioInput //
                 , { value: value === v, onValue: () => onValue(v), required: required, ...props, children: formatter(v) }, i.toString()));
             }), !required ? (_jsx(RadioInput //

package/ui/input/ArrayRadioInputs.tsx

@@ -31,10 +31,11 @@ export function ArrayRadioInputs<T>({
 	required = false,
 	items,
 	formatter = formatValue,
+	className,
 	...props
 }: ArrayRadioInputsProps<T>): ReactElement {
 	return (
-		<Column>
+		<Column className={className}>
 			{items.map((v, i) => {
 				return (
 					<RadioInput //

package/ui/input/ButtonInput.d.ts

@@ -18,4 +18,4 @@ export interface ButtonInputProps extends InputProps, ClickableProps, FlexVarian
  * @example <ButtonInput name="choose" onClick={open}>Choose…</ButtonInput>
  * @see https://shelving.cc/ui/ButtonInput
  */
-export declare function ButtonInput({ title, placeholder, children, ...props }: ButtonInputProps): ReactElement;
+export declare function ButtonInput({ title, placeholder, children, className, ...props }: ButtonInputProps): ReactElement;

package/ui/input/ButtonInput.js

@@ -14,7 +14,7 @@ import INPUT_CSS from "./Input.module.css";
  * @example <ButtonInput name="choose" onClick={open}>Choose…</ButtonInput>
  * @see https://shelving.cc/ui/ButtonInput
  */
-export function ButtonInput({ title, placeholder, children = title, ...props }) {
+export function ButtonInput({ title, placeholder, children = title, className, ...props }) {
     const hasChildren = notNullish(children);
-    return (_jsx(Clickable, { ...props, className: getClass(getInputClass(props), getModuleClass(INPUT_CSS, "button"), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: hasChildren ? children : placeholder }));
+    return (_jsx(Clickable, { ...props, className: getClass(getInputClass(props), getModuleClass(INPUT_CSS, "button"), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder"), className), children: hasChildren ? children : placeholder }));
 }

package/ui/input/ButtonInput.tsx

@@ -22,7 +22,7 @@ export interface ButtonInputProps extends InputProps, ClickableProps, FlexVarian
  * @example <ButtonInput name="choose" onClick={open}>Choose…</ButtonInput>
  * @see https://shelving.cc/ui/ButtonInput
  */
-export function ButtonInput({ title, placeholder, children = title, ...props }: ButtonInputProps): ReactElement {
+export function ButtonInput({ title, placeholder, children = title, className, ...props }: ButtonInputProps): ReactElement {
 	const hasChildren = notNullish(children);
 	return (
 		<Clickable
@@ -32,6 +32,7 @@ export function ButtonInput({ title, placeholder, children = title, ...props }:
 				getModuleClass(INPUT_CSS, "button"),
 				getFlexClass(props),
 				hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
+				className,
 			)}
 		>
 			{hasChildren ? children : placeholder}

package/ui/input/CheckboxInput.d.ts

@@ -17,4 +17,4 @@ export interface CheckboxProps extends ValueInputProps<boolean>, OptionalChildPr
  * @example <CheckboxInput name="agree" value={agree} onValue={setAgree}>I agree</CheckboxInput>
  * @see https://shelving.cc/ui/CheckboxInput
  */
-export declare function CheckboxInput({ name, title, placeholder, required, disabled, message, value, onValue, children, ...props }: CheckboxProps): ReactElement;
+export declare function CheckboxInput({ name, title, placeholder, required, disabled, message, value, onValue, children, className, ...props }: CheckboxProps): ReactElement;

package/ui/input/CheckboxInput.js

@@ -12,7 +12,7 @@ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
  * @example <CheckboxInput name="agree" value={agree} onValue={setAgree}>I agree</CheckboxInput>
  * @see https://shelving.cc/ui/CheckboxInput
  */
-export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children = placeholder, ...props }) {
+export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children = placeholder, className, ...props }) {
     return (_jsxs("label", { className: getClass(getInputClass(props), //
-        getFlexClass(props), INPUT_LABEL_CLASS), children: [_jsx("input", { className: getModuleClass(INPUT_CSS, "radio"), type: "checkbox", name: name, defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), disabled: disabled, required: required, title: message, "aria-invalid": !!message }), _jsx("span", { children: children })] }));
+        getFlexClass(props), INPUT_LABEL_CLASS, className), children: [_jsx("input", { className: getModuleClass(INPUT_CSS, "radio"), type: "checkbox", name: name, defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), disabled: disabled, required: required, title: message, "aria-invalid": !!message }), _jsx("span", { children: children })] }));
 }

package/ui/input/CheckboxInput.tsx

@@ -32,6 +32,7 @@ export function CheckboxInput({
 	value = false,
 	onValue,
 	children = placeholder,
+	className,
 	...props
 }: CheckboxProps): ReactElement {
 	return (
@@ -40,6 +41,7 @@ export function CheckboxInput({
 				getInputClass(props), //
 				getFlexClass(props),
 				INPUT_LABEL_CLASS,
+				className,
 			)}
 		>
 			<input

package/ui/input/ChoiceRadioInputs.js

@@ -4,10 +4,10 @@ import { Row } from "../block/Row.js";
 import { RadioInput } from "./RadioInput.js";
 /** Maximum number of options to show in a row. */
 const MAX_ROW_OPTIONS = 2;
-export function ChoiceRadioInputs({ required = false, value = "", onValue, wrap = false, column, options, ...props }) {
+export function ChoiceRadioInputs({ required = false, value = "", onValue, wrap = false, column, options, className, ...props }) {
     const entries = getProps(options);
     const hasMany = entries.length > MAX_ROW_OPTIONS;
-    return (_jsxs(Row, { wrap: wrap, column: column ?? hasMany, children: [entries.map(([k, t]) => (_jsx(RadioInput //
+    return (_jsxs(Row, { wrap: wrap, column: column ?? hasMany, className: className, children: [entries.map(([k, t]) => (_jsx(RadioInput //
             , { value: value === k, onValue: () => onValue(k), required: required, ...props, children: t }, k))), !required ? (_jsx(RadioInput //
             , { value: !value, onValue: () => onValue(undefined), required: required, ...props })) : null] }));
 }

package/ui/input/ChoiceRadioInputs.tsx

@@ -40,12 +40,13 @@ export function ChoiceRadioInputs({
 	wrap = false,
 	column,
 	options,
+	className,
 	...props
 }: ChoiceRadioInputsProps<string>): ReactElement {
 	const entries = getProps(options);
 	const hasMany = entries.length > MAX_ROW_OPTIONS;
 	return (
-		<Row wrap={wrap} column={column ?? hasMany}>
+		<Row wrap={wrap} column={column ?? hasMany} className={className}>
 			{entries.map(([k, t]) => (
 				<RadioInput //
 					key={k}

package/ui/input/DataInput.js

@@ -9,9 +9,9 @@ export function DataInput({
 // placeholder,
 // required = false,
 // disabled = false,
-message = "", value = {}, onValue, props, }) {
+message = "", value = {}, onValue, props, className, }) {
     const messages = splitMessage(message);
     const entries = getProps(props);
-    return (_jsx(Row, { column: entries.length > 2, children: entries.map(([k, s]) => (_jsx(SchemaInput //
+    return (_jsx(Row, { column: entries.length > 2, className: className, children: entries.map(([k, s]) => (_jsx(SchemaInput //
         , { name: k, schema: s, value: value[k], onValue: x => onValue(withProp(value, k, x)), message: messages[k] }, k))) }));
 }

package/ui/input/DataInput.tsx

@@ -37,11 +37,12 @@ export function DataInput({
 	value = {},
 	onValue,
 	props,
+	className,
 }: DataInputProps<Data>): ReactElement {
 	const messages = splitMessage(message);
 	const entries = getProps(props);
 	return (
-		<Row column={entries.length > 2}>
+		<Row column={entries.length > 2} className={className}>
 			{entries.map(([k, s]) => (
 				<SchemaInput //
 					key={k}

package/ui/input/DateInput.d.ts

@@ -22,4 +22,4 @@ export interface DateInputProps extends ValueInputProps<string, PossibleDate>, I
  * @see https://shelving.cc/ui/DateInput
  */
 export declare function DateInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required, disabled, message, value, onValue, min, max, input, step, ...variants }: DateInputProps): ReactElement;
+required, disabled, message, value, onValue, min, max, input, step, className, ...variants }: DateInputProps): ReactElement;

package/ui/input/DateInput.js

@@ -18,10 +18,10 @@ const _DATE_TO_STRING = {
  * @see https://shelving.cc/ui/DateInput
  */
 export function DateInput({ name, title = "", placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required = false, disabled = false, message = "", value, onValue, min, max, input = "date", step, ...variants }) {
+required = false, disabled = false, message = "", value, onValue, min, max, input = "date", step, className, ...variants }) {
     const onChange = (e) => {
         onValue?.(e.currentTarget.value ?? undefined);
     };
     const dateToString = _DATE_TO_STRING[input];
-    return (_jsx("input", { name: name, type: input, min: dateToString(min), max: dateToString(max), disabled: disabled, required: required, defaultValue: dateToString(value), placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text")), onChange: onChange, onInput: onChange, title: message, "aria-invalid": !!message, step: step }));
+    return (_jsx("input", { name: name, type: input, min: dateToString(min), max: dateToString(max), disabled: disabled, required: required, defaultValue: dateToString(value), placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className), onChange: onChange, onInput: onChange, title: message, "aria-invalid": !!message, step: step }));
 }

package/ui/input/DateInput.tsx

@@ -45,6 +45,7 @@ export function DateInput({
 	max,
 	input = "date",
 	step,
+	className,
 	...variants
 }: DateInputProps): ReactElement {
 	const onChange = (e: SyntheticEvent<HTMLInputElement>) => {
@@ -63,7 +64,7 @@ export function DateInput({
 			required={required}
 			defaultValue={dateToString(value)}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className)}
 			onChange={onChange}
 			onInput={onChange}
 			title={message}

package/ui/input/DictionaryInput.js

@@ -11,12 +11,12 @@ import { SchemaInput } from "./SchemaInput.js";
 import { TextInput } from "./TextInput.js";
 export function DictionaryInput({ name, 
 // title,
-placeholder, required = false, disabled = false, message = "", value = {}, onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, }) {
+placeholder, required = false, disabled = false, message = "", value = {}, onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, className, }) {
     const messages = splitMessage(message);
     const length = Object.keys(value).length;
     const disableRemove = disabled || length <= min;
     const addNewItem = () => onValue({ ...value, [one]: items.value });
-    return (_jsxs(Row, { column: true, children: [length ? (Object.entries(value).map(([k, v], i) => {
+    return (_jsxs(Row, { column: true, className: className, children: [length ? (Object.entries(value).map(([k, v], i) => {
                 const r = i.toString();
                 const message = messages[r];
                 return (_jsxs(Row, { children: [_jsx(TextInput, { name: `${r}-key`, value: k, onValue: x => {

package/ui/input/DictionaryInput.tsx

@@ -52,13 +52,14 @@ export function DictionaryInput({
 	min = 0,
 	max = Number.POSITIVE_INFINITY,
 	items,
+	className,
 }: DictionaryInputProps<unknown>): ReactElement {
 	const messages = splitMessage(message);
 	const length = Object.keys(value).length;
 	const disableRemove = disabled || length <= min;
 	const addNewItem = () => onValue({ ...value, [one]: items.value });
 	return (
-		<Row column>
+		<Row column className={className}>
 			{length ? (
 				Object.entries(value).map(([k, v], i) => {
 					const r = i.toString();

package/ui/input/FileInput.d.ts

@@ -17,4 +17,4 @@ export interface FileInputProps extends ValueInputProps<string | File>, InputVar
  * @example <FileInput name="avatar" types={{ png: "image/png" }} onValue={setFile} />
  * @see https://shelving.cc/ui/FileInput
  */
-export declare function FileInput({ name, title, placeholder, required, disabled, message, onValue, types, ...variants }: FileInputProps): ReactElement;
+export declare function FileInput({ name, title, placeholder, required, disabled, message, onValue, types, className, ...variants }: FileInputProps): ReactElement;

package/ui/input/FileInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 /**
  * File picker input that emits the selected `File` through `onValue`.
@@ -10,12 +11,12 @@ import { getInputClass } from "./Input.js";
  */
 export function FileInput({ name, title, placeholder = title, required = false, disabled = false, message, 
 // value,
-onValue, types = {}, ...variants }) {
+onValue, types = {}, className, ...variants }) {
     const onChange = (e) => {
         const files = e.currentTarget.files;
         if (files)
             for (const file of files)
                 onValue(file);
     };
-    return (_jsx("input", { name: name, type: "file", accept: Object.values(types).join(","), required: required, disabled: disabled, placeholder: placeholder, className: getInputClass(variants), onChange: onChange, onInput: onChange, multiple: false, title: message, "aria-invalid": !!message }));
+    return (_jsx("input", { name: name, type: "file", accept: Object.values(types).join(","), required: required, disabled: disabled, placeholder: placeholder, className: getClass(getInputClass(variants), className), onChange: onChange, onInput: onChange, multiple: false, title: message, "aria-invalid": !!message }));
 }

package/ui/input/FileInput.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import type { FileTypes } from "../../util/file.js";
+import { getClass } from "../util/css.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 
 /**
@@ -29,6 +30,7 @@ export function FileInput({
 	// value,
 	onValue,
 	types = {},
+	className,
 	...variants
 }: FileInputProps): ReactElement {
 	const onChange = (e: SyntheticEvent<HTMLInputElement>) => {
@@ -44,7 +46,7 @@ export function FileInput({
 			required={required}
 			disabled={disabled}
 			placeholder={placeholder}
-			className={getInputClass(variants)}
+			className={getClass(getInputClass(variants), className)}
 			onChange={onChange}
 			onInput={onChange}
 			multiple={false}

package/ui/input/Input.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { type WidthVariants } from "../style/Width.js";
-import type { ChildProps } from "../util/props.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).
@@ -23,7 +23,7 @@ export declare function getInputClass(props: InputVariants): string;
  *
  * @see https://shelving.cc/ui/InputProps
  */
-export interface InputProps {
+export interface InputProps extends ClassProps {
     /** The `name=""` prop of the input. */
     name: string;
     /** Friendly title for the input. */
@@ -46,9 +46,16 @@ export interface ValueInputProps<O, I = never> extends InputProps {
 }
 /** Input that is loading. */
 export declare const LOADING_INPUT: import("react").JSX.Element;
+/**
+ * Props for `InputWrapper` — the wrapped `children` plus an optional `className`.
+ *
+ * @see https://shelving.cc/ui/InputWrapperProps
+ */
+export interface InputWrapperProps extends ChildProps, ClassProps {
+}
 /**
  * Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side.
  * - This is so you can put an icon before or after an input.
  * @kind component
  */
-export declare function InputWrapper({ children }: ChildProps): ReactElement;
+export declare function InputWrapper({ children, className }: InputWrapperProps): ReactElement;

package/ui/input/Input.js

@@ -21,6 +21,6 @@ export const LOADING_INPUT = _jsx("div", { className: getClass(getInputClass({})
  * - This is so you can put an icon before or after an input.
  * @kind component
  */
-export function InputWrapper({ children }) {
-    return _jsx("div", { className: getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper")), children: children });
+export function InputWrapper({ children, className }) {
+    return _jsx("div", { className: getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper"), className), children: children });
 }

package/ui/input/Input.tsx

@@ -3,7 +3,7 @@ import { LOADING } from "../misc/Loading.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 } from "../util/props.js";
+import type { ChildProps, ClassProps } from "../util/props.js";
 import INPUT_CSS from "./Input.module.css";
 
 /**
@@ -31,7 +31,7 @@ export function getInputClass(props: InputVariants): string {
  *
  * @see https://shelving.cc/ui/InputProps
  */
-export interface InputProps {
+export interface InputProps extends ClassProps {
 	/** The `name=""` prop of the input. */
 	name: string;
 	/** Friendly title for the input. */
@@ -57,11 +57,18 @@ export interface ValueInputProps<O, I = never> extends InputProps {
 /** Input that is loading. */
 export const LOADING_INPUT = <div className={getClass(getInputClass({}), getFlexClass({}))}>{LOADING}</div>;
 
+/**
+ * Props for `InputWrapper` — the wrapped `children` plus an optional `className`.
+ *
+ * @see https://shelving.cc/ui/InputWrapperProps
+ */
+export interface InputWrapperProps extends ChildProps, ClassProps {}
+
 /**
  * Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side.
  * - This is so you can put an icon before or after an input.
  * @kind component
  */
-export function InputWrapper({ children }: ChildProps): ReactElement {
-	return <div className={getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper"))}>{children}</div>;
+export function InputWrapper({ children, className }: InputWrapperProps): ReactElement {
+	return <div className={getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper"), className)}>{children}</div>;
 }

package/ui/input/NumberInput.d.ts

@@ -21,5 +21,5 @@ export interface NumberInputProps extends ValueInputProps<number>, InputVariants
  * @see https://shelving.cc/ui/NumberInput
  */
 export declare function NumberInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required, disabled, message, value, onValue, formatter, ...variants }: NumberInputProps): ReactElement;
+required, disabled, message, value, onValue, formatter, className, ...variants }: NumberInputProps): ReactElement;
 export {};

package/ui/input/NumberInput.js

@@ -16,7 +16,7 @@ export function NumberInput({ name, title = "", placeholder = title, // Placehol
 required = false, disabled = false, message = "", value, onValue, 
 // min = Number.NEGATIVE_INFINITY,
 // max = Number.POSITIVE_INFINITY,
-formatter = formatNumber, ...variants }) {
+formatter = formatNumber, className, ...variants }) {
     const onChange = ({ currentTarget }) => {
         onValue?.(getNumber(currentTarget.value) ?? undefined);
     };
@@ -24,5 +24,5 @@ formatter = formatNumber, ...variants }) {
         const num = getNumber(currentTarget.value);
         currentTarget.value = num !== undefined ? formatter(num) : "";
     };
-    return (_jsx("input", { name: name, type: "text", inputMode: "decimal", defaultValue: value !== undefined ? formatter(value) : "", required: required, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text")), onChange: onChange, onInput: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
+    return (_jsx("input", { name: name, type: "text", inputMode: "decimal", defaultValue: value !== undefined ? formatter(value) : "", required: required, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className), onChange: onChange, onInput: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
 }

package/ui/input/NumberInput.tsx

@@ -39,6 +39,7 @@ export function NumberInput({
 	// min = Number.NEGATIVE_INFINITY,
 	// max = Number.POSITIVE_INFINITY,
 	formatter = formatNumber,
+	className,
 	...variants
 }: NumberInputProps): ReactElement {
 	const onChange = ({ currentTarget }: SyntheticEvent<HTMLInputElement>) => {
@@ -59,7 +60,7 @@ export function NumberInput({
 			required={required}
 			disabled={disabled}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className)}
 			onChange={onChange}
 			onInput={onChange}
 			onBlur={onBlur}

package/ui/input/OutputInput.d.ts

@@ -17,4 +17,4 @@ export interface OutputInputProps extends InputProps, OptionalChildProps, FlexVa
  * @example <OutputInput title="Status">Active</OutputInput>
  * @see https://shelving.cc/ui/OutputInput
  */
-export declare function OutputInput({ title, placeholder, children, ...props }: OutputInputProps): ReactElement;
+export declare function OutputInput({ title, placeholder, children, className, ...props }: OutputInputProps): ReactElement;

package/ui/input/OutputInput.js

@@ -12,7 +12,7 @@ import INPUT_CSS from "./Input.module.css";
  * @example <OutputInput title="Status">Active</OutputInput>
  * @see https://shelving.cc/ui/OutputInput
  */
-export function OutputInput({ title, placeholder, children = title, ...props }) {
+export function OutputInput({ title, placeholder, children = title, className, ...props }) {
     const hasChildren = notNullish(children);
-    return (_jsx("output", { ...props, className: getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: hasChildren ? children : placeholder }));
+    return (_jsx("output", { ...props, className: getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder"), className), children: hasChildren ? children : placeholder }));
 }

package/ui/input/OutputInput.tsx

@@ -21,12 +21,12 @@ export interface OutputInputProps extends InputProps, OptionalChildProps, FlexVa
  * @example <OutputInput title="Status">Active</OutputInput>
  * @see https://shelving.cc/ui/OutputInput
  */
-export function OutputInput({ title, placeholder, children = title, ...props }: OutputInputProps): ReactElement {
+export function OutputInput({ title, placeholder, children = title, className, ...props }: OutputInputProps): ReactElement {
 	const hasChildren = notNullish(children);
 	return (
 		<output
 			{...props}
-			className={getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder"))}
+			className={getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder"), className)}
 		>
 			{hasChildren ? children : placeholder}
 		</output>

package/ui/input/Popover.d.ts

@@ -2,6 +2,7 @@
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 import type { ReactElement, ReactNode } from "react";
 import type { Callback } from "../../util/function.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Children tuple for `Popover`: a leading trigger node followed by the popover's contents.
  *
@@ -23,7 +24,7 @@ export type PopoverChildren = readonly [
  *
  * @see https://shelving.cc/ui/PopoverProps
  */
-export interface PopoverProps {
+export interface PopoverProps extends ClassProps {
     /** Children for the popover. */
     children: PopoverChildren;
     /** Callback that gets called when the Popover closes. */
@@ -35,6 +36,7 @@ export interface PopoverProps {
  * Trigger element that reveals a floating popover panel beside it when active or focused.
  * - The first `children` node is the trigger; the rest become the popover contents.
  * - Closes on blur away or `Escape`, calling `onClose`.
+ * - `className` lands on the floating panel rather than the wrapper, since the panel is the surface worth styling.
  *
  * @returns A wrapper element containing the trigger and (when open) the popover panel.
  * @example <Popover>{trigger}{panelContent}</Popover>
@@ -43,4 +45,4 @@ export interface PopoverProps {
  * @todo DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
  */
 export declare function Popover({ children: [trigger, ...popover], //
-onClose, open, }: PopoverProps): ReactElement;
+onClose, open, className, }: PopoverProps): ReactElement;

package/ui/input/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isTruthy } from "../../util/boolean.js";
-import { getModuleClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { eventPreventDefault } from "../util/event.js";
 import { eventLoopFocus } from "../util/focus.js";
 import styles from "./Popover.module.css";
@@ -8,6 +8,7 @@ import styles from "./Popover.module.css";
  * Trigger element that reveals a floating popover panel beside it when active or focused.
  * - The first `children` node is the trigger; the rest become the popover contents.
  * - Closes on blur away or `Escape`, calling `onClose`.
+ * - `className` lands on the floating panel rather than the wrapper, since the panel is the surface worth styling.
  *
  * @returns A wrapper element containing the trigger and (when open) the popover panel.
  * @example <Popover>{trigger}{panelContent}</Popover>
@@ -16,11 +17,11 @@ import styles from "./Popover.module.css";
  * @todo DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
  */
 export function Popover({ children: [trigger, ...popover], //
-onClose, open = popover.flat().some(isTruthy), }) {
+onClose, open = popover.flat().some(isTruthy), className, }) {
     return (_jsxs("div", { className: getModuleClass(styles, "wrap"), onBlur: e => {
             if (e.relatedTarget)
                 eventLoopFocus(e);
             else
                 onClose?.();
-        }, onKeyDown: e => e.key === "Escape" && onClose?.(), children: [trigger, open ? (_jsx("section", { className: getModuleClass(styles, "panel"), onMouseDown: eventPreventDefault, children: popover })) : null] }));
+        }, onKeyDown: e => e.key === "Escape" && onClose?.(), children: [trigger, open ? (_jsx("section", { className: getClass(getModuleClass(styles, "panel"), className), onMouseDown: eventPreventDefault, children: popover })) : null] }));
 }