shelving 1.282.2 → 1.284.0

package/ui/input/Popover.tsx

@@ -5,9 +5,10 @@ import type { ReactElement, ReactNode } from "react";
 
 import { isTruthy } from "../../util/boolean.js";
 import type { Callback } from "../../util/function.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 type { ClassProps } from "../util/props.js";
 import styles from "./Popover.module.css";
 
 /**
@@ -32,7 +33,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. */
@@ -45,6 +46,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>
@@ -56,6 +58,7 @@ export function Popover({
 	children: [trigger, ...popover], //
 	onClose,
 	open = popover.flat().some(isTruthy),
+	className,
 }: PopoverProps): ReactElement {
 	return (
 		<div
@@ -68,7 +71,7 @@ export function Popover({
 		>
 			{trigger}
 			{open ? (
-				<section className={getModuleClass(styles, "panel")} onMouseDown={eventPreventDefault}>
+				<section className={getClass(getModuleClass(styles, "panel"), className)} onMouseDown={eventPreventDefault}>
 					{popover}
 				</section>
 			) : null}

package/ui/input/PopoverButton.d.ts

@@ -0,0 +1,28 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
+import { type ReactElement } from "react";
+import { type ButtonVariants } from "../button/Button.js";
+import type { ClassProps } from "../util/props.js";
+import { type PopoverChildren } from "./Popover.js";
+/**
+ * Props for `PopoverButton` — all the `Button` styling variants, plus `children` whose first node is the button label and the rest the popover contents.
+ *
+ * @see https://shelving.cc/ui/PopoverButtonProps
+ */
+export interface PopoverButtonProps extends ButtonVariants, ClassProps {
+    children: PopoverChildren;
+}
+/**
+ * Popover variant of `<Button>` — a button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes all the `ButtonVariants` styling props, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
+ *
+ * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
+ *
+ * @returns A `Button` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButton>{label}{panel}</PopoverButton>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButton
+ */
+export declare function PopoverButton({ children: [buttonChildren, ...popoverChildren], //
+className, ...props }: PopoverButtonProps): ReactElement;

package/ui/input/{ButtonPopover.js → PopoverButton.js}

@@ -5,17 +5,19 @@ import { useState } from "react";
 import { Button } from "../button/Button.js";
 import { Popover } from "./Popover.js";
 /**
- * A button that, when clicked, shows a popover next to it when clicked or focused.
- * - The first element passed to `children` is used as the content for the button, the rest is the content of the popover.
+ * Popover variant of `<Button>` — a button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes all the `ButtonVariants` styling props, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
  *
  * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
  *
- * @returns A `Popover` wrapping a `Button` that toggles it open and closed.
- * @example <ButtonPopover>{label}{panel}</ButtonPopover>
- * @see https://shelving.cc/ui/ButtonPopover
+ * @returns A `Button` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButton>{label}{panel}</PopoverButton>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButton
  */
-export function ButtonPopover({ children: [buttonChildren, ...popoverChildren], //
-...props }) {
+export function PopoverButton({ children: [buttonChildren, ...popoverChildren], //
+className, ...props }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onClose: () => setOpen(false), children: [_jsx(Button, { onClick: () => setOpen(!open), ...props, children: buttonChildren }), popoverChildren] }));
+    return (_jsxs(Popover, { open: open, onClose: () => setOpen(false), children: [_jsx(Button, { onClick: () => setOpen(!open), ...props, className: className, children: buttonChildren }), popoverChildren] }));
 }

package/ui/input/PopoverButton.tsx

@@ -0,0 +1,44 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
+
+import { type ReactElement, useState } from "react";
+import { Button, type ButtonVariants } from "../button/Button.js";
+import type { ClassProps } from "../util/props.js";
+import { Popover, type PopoverChildren } from "./Popover.js";
+
+/**
+ * Props for `PopoverButton` — all the `Button` styling variants, plus `children` whose first node is the button label and the rest the popover contents.
+ *
+ * @see https://shelving.cc/ui/PopoverButtonProps
+ */
+export interface PopoverButtonProps extends ButtonVariants, ClassProps {
+	children: PopoverChildren;
+}
+
+/**
+ * Popover variant of `<Button>` — a button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes all the `ButtonVariants` styling props, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
+ *
+ * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
+ *
+ * @returns A `Button` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButton>{label}{panel}</PopoverButton>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButton
+ */
+export function PopoverButton({
+	children: [buttonChildren, ...popoverChildren], //
+	className,
+	...props
+}: PopoverButtonProps): ReactElement {
+	const [open, setOpen] = useState(false);
+	return (
+		<Popover open={open} onClose={() => setOpen(false)}>
+			<Button onClick={() => setOpen(!open)} {...props} className={className}>
+				{buttonChildren}
+			</Button>
+			{popoverChildren}
+		</Popover>
+	);
+}

package/ui/input/PopoverButtonInput.d.ts

@@ -0,0 +1,27 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
+import { type ReactElement } from "react";
+import type { InputProps } from "./Input.js";
+import { type PopoverChildren } from "./Popover.js";
+/**
+ * Props for `PopoverButtonInput` — the shared `InputProps`, plus `children` whose first node is the button label and the rest the popover contents.
+ *
+ * @see https://shelving.cc/ui/PopoverButtonInputProps
+ */
+export interface PopoverButtonInputProps extends InputProps {
+    children: PopoverChildren;
+}
+/**
+ * Popover variant of `<ButtonInput>` — an input-styled button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes the shared `InputProps`, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
+ *
+ * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
+ *
+ * @returns A `ButtonInput` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButtonInput name="filter">{label}{panel}</PopoverButtonInput>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButtonInput
+ */
+export declare function PopoverButtonInput({ children: [buttonChildren, ...popoverChildren], //
+className, ...props }: PopoverButtonInputProps): ReactElement;

package/ui/input/{ButtonInputPopover.js → PopoverButtonInput.js}

@@ -5,17 +5,19 @@ import { useState } from "react";
 import { ButtonInput } from "./ButtonInput.js";
 import { Popover } from "./Popover.js";
 /**
- * An input button that, when clicked, shows a popover next to it when clicked or focused.
- * - The first element passed to `children` is used as the content for the button, the rest is the content of the popover.
+ * Popover variant of `<ButtonInput>` — an input-styled button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes the shared `InputProps`, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
  *
  * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
  *
- * @returns A `Popover` wrapping a `ButtonInput` that toggles it open and closed.
- * @example <ButtonInputPopover name="filter">{label}{panel}</ButtonInputPopover>
- * @see https://shelving.cc/ui/ButtonInputPopover
+ * @returns A `ButtonInput` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButtonInput name="filter">{label}{panel}</PopoverButtonInput>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButtonInput
  */
-export function ButtonInputPopover({ children: [buttonChildren, ...popoverChildren], //
-...props }) {
+export function PopoverButtonInput({ children: [buttonChildren, ...popoverChildren], //
+className, ...props }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onClose: () => setOpen(false), children: [_jsx(ButtonInput, { onClick: () => setOpen(!open), ...props, children: buttonChildren }), popoverChildren] }));
+    return (_jsxs(Popover, { open: open, onClose: () => setOpen(false), children: [_jsx(ButtonInput, { onClick: () => setOpen(!open), ...props, className: className, children: buttonChildren }), popoverChildren] }));
 }

package/ui/input/PopoverButtonInput.tsx

@@ -0,0 +1,44 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
+
+import { type ReactElement, useState } from "react";
+import { ButtonInput } from "./ButtonInput.js";
+import type { InputProps } from "./Input.js";
+import { Popover, type PopoverChildren } from "./Popover.js";
+
+/**
+ * Props for `PopoverButtonInput` — the shared `InputProps`, plus `children` whose first node is the button label and the rest the popover contents.
+ *
+ * @see https://shelving.cc/ui/PopoverButtonInputProps
+ */
+export interface PopoverButtonInputProps extends InputProps {
+	children: PopoverChildren;
+}
+
+/**
+ * Popover variant of `<ButtonInput>` — an input-styled button that reveals floating popover content beside it when clicked.
+ * - The button is the primary element: it takes the shared `InputProps`, and `className` lands on it (not the popover panel).
+ * - The first element passed to `children` is the button label; the rest become the popover contents.
+ *
+ * DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
+ *
+ * @returns A `ButtonInput` that toggles its attached `Popover` open and closed.
+ * @example <PopoverButtonInput name="filter">{label}{panel}</PopoverButtonInput>
+ * @kind component
+ * @see https://shelving.cc/ui/PopoverButtonInput
+ */
+export function PopoverButtonInput({
+	children: [buttonChildren, ...popoverChildren], //
+	className,
+	...props
+}: PopoverButtonInputProps): ReactElement {
+	const [open, setOpen] = useState(false);
+	return (
+		<Popover open={open} onClose={() => setOpen(false)}>
+			<ButtonInput onClick={() => setOpen(!open)} {...props} className={className}>
+				{buttonChildren}
+			</ButtonInput>
+			{popoverChildren}
+		</Popover>
+	);
+}

package/ui/input/QueryInput.d.ts

@@ -33,4 +33,4 @@ export interface QueryInputProps<I, O> extends ValueInputProps<O> {
  * @example <QueryInput schema={SEARCH} onQuery={search} value={user} onValue={setUser} />
  * @see https://shelving.cc/ui/QueryInput
  */
-export declare function QueryInput<I, O>({ empty, value, onValue, onQuery, formatter, ...props }: QueryInputProps<I, O>): ReactElement;
+export declare function QueryInput<I, O>({ empty, value, onValue, onQuery, formatter, className, ...props }: QueryInputProps<I, O>): ReactElement;

package/ui/input/QueryInput.js

@@ -19,7 +19,7 @@ import { SchemaInput } from "./SchemaInput.js";
  * @example <QueryInput schema={SEARCH} onQuery={search} value={user} onValue={setUser} />
  * @see https://shelving.cc/ui/QueryInput
  */
-export function QueryInput({ empty = "No results", value, onValue, onQuery, formatter = formatValue, ...props }) {
+export function QueryInput({ empty = "No results", value, onValue, onQuery, formatter = formatValue, className, ...props }) {
     const store = useStore(useInstance(PayloadFetchStore, NONE, undefined, onQuery, SECOND));
     const busy = useStore(store.busy).value;
     // Is popover open?
@@ -28,7 +28,7 @@ export function QueryInput({ empty = "No results", value, onValue, onQuery, form
         store.payload.value = NONE;
         store.value = undefined;
     };
-    return (_jsxs(Popover, { open: isOpen, onClose: close, children: [_jsx(SchemaInput, { ...props, value: value, onValue: v => {
+    return (_jsxs(Popover, { open: isOpen, onClose: close, children: [_jsx(SchemaInput, { ...props, className: className, value: value, onValue: v => {
                     if (v)
                         store.payload.value = v;
                     else

package/ui/input/QueryInput.tsx

@@ -53,6 +53,7 @@ export function QueryInput<I, O>({
 	onValue,
 	onQuery,
 	formatter = formatValue,
+	className,
 	...props
 }: QueryInputProps<I, O>): ReactElement {
 	const store = useStore(useInstance(PayloadFetchStore, NONE, undefined, onQuery, SECOND));
@@ -70,6 +71,7 @@ export function QueryInput<I, O>({
 		<Popover open={isOpen} onClose={close}>
 			<SchemaInput
 				{...props}
+				className={className}
 				value={value as I}
 				onValue={v => {
 					if (v) store.payload.value = v;

package/ui/input/RadioInput.d.ts

@@ -17,4 +17,4 @@ export interface RadioInputProps extends ValueInputProps<boolean>, OptionalChild
  * @example <RadioInput name="plan" value={isPro} onValue={selectPro}>Pro</RadioInput>
  * @see https://shelving.cc/ui/RadioInput
  */
-export declare function RadioInput({ name, title, placeholder, required, disabled, message, value, onValue, children, ...props }: RadioInputProps): ReactElement;
+export declare function RadioInput({ name, title, placeholder, required, disabled, message, value, onValue, children, className, ...props }: RadioInputProps): ReactElement;

package/ui/input/RadioInput.js

@@ -12,7 +12,7 @@ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
  * @example <RadioInput name="plan" value={isPro} onValue={selectPro}>Pro</RadioInput>
  * @see https://shelving.cc/ui/RadioInput
  */
-export function RadioInput({ name, title, placeholder = title || "Choose", required = false, disabled = false, message = "", value = false, onValue, children = placeholder, ...props }) {
+export function RadioInput({ name, title, placeholder = title || "Choose", 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: "radio", name: name, defaultChecked: !!value, onChange: () => onValue(true), 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: "radio", name: name, defaultChecked: !!value, onChange: () => onValue(true), disabled: disabled, required: required, title: message, "aria-invalid": !!message }), _jsx("span", { children: children })] }));
 }

package/ui/input/RadioInput.tsx

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

package/ui/input/SchemaInput.d.ts

@@ -185,4 +185,4 @@ export interface SchemaFieldProps extends SchemaInputProps<Schema, unknown>, Opt
  * @kind component
  * @see https://shelving.cc/ui/SchemaField
  */
-export declare function SchemaField({ schema, children, ...props }: SchemaFieldProps): ReactElement;
+export declare function SchemaField({ schema, children, className, ...props }: SchemaFieldProps): ReactElement;

package/ui/input/SchemaInput.js

@@ -173,6 +173,6 @@ export function DataSchemaInput({ schema, value, ...props }) {
  * @kind component
  * @see https://shelving.cc/ui/SchemaField
  */
-export function SchemaField({ schema, children, ...props }) {
-    return (_jsx(Field, { ...props, ...schema, children: children ?? _jsx(SchemaInput, { schema: schema, ...props }) }));
+export function SchemaField({ schema, children, className, ...props }) {
+    return (_jsx(Field, { ...props, ...schema, className: className, children: children ?? _jsx(SchemaInput, { schema: schema, ...props }) }));
 }

package/ui/input/SchemaInput.tsx

@@ -274,9 +274,9 @@ export interface SchemaFieldProps extends SchemaInputProps<Schema, unknown>, Opt
  * @kind component
  * @see https://shelving.cc/ui/SchemaField
  */
-export function SchemaField({ schema, children, ...props }: SchemaFieldProps): ReactElement {
+export function SchemaField({ schema, children, className, ...props }: SchemaFieldProps): ReactElement {
 	return (
-		<Field {...props} {...schema}>
+		<Field {...props} {...schema} className={className}>
 			{children ?? <SchemaInput schema={schema} {...props} />}
 		</Field>
 	);

package/ui/input/SelectInput.js

@@ -3,6 +3,6 @@ import { getProps } from "../../util/object.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
-export function SelectInput({ name, placeholder = "Choose...", required = false, disabled = false, message = "", value = "", onValue, options, ...variants }) {
-    return (_jsxs("select", { name: name, defaultValue: value, onChange: e => onValue(e.currentTarget.value || undefined), className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "select")), title: message, "aria-invalid": !!message, disabled: disabled, required: required, children: [!required || !value ? (_jsx("option", { value: "", className: getModuleClass(INPUT_CSS, "empty"), children: placeholder })) : null, getProps(options).map(([k, t]) => (_jsx("option", { value: k, className: getModuleClass(INPUT_CSS, "value"), children: t }, k)))] }));
+export function SelectInput({ name, placeholder = "Choose...", required = false, disabled = false, message = "", value = "", onValue, options, className, ...variants }) {
+    return (_jsxs("select", { name: name, defaultValue: value, onChange: e => onValue(e.currentTarget.value || undefined), className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "select"), className), title: message, "aria-invalid": !!message, disabled: disabled, required: required, children: [!required || !value ? (_jsx("option", { value: "", className: getModuleClass(INPUT_CSS, "empty"), children: placeholder })) : null, getProps(options).map(([k, t]) => (_jsx("option", { value: k, className: getModuleClass(INPUT_CSS, "value"), children: t }, k)))] }));
 }

package/ui/input/SelectInput.tsx

@@ -34,6 +34,7 @@ export function SelectInput({
 	value = "",
 	onValue,
 	options,
+	className,
 	...variants
 }: SelectProps<string>): ReactElement {
 	return (
@@ -41,7 +42,7 @@ export function SelectInput({
 			name={name}
 			defaultValue={value}
 			onChange={e => onValue(e.currentTarget.value || undefined)}
-			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "select"))}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "select"), className)}
 			title={message}
 			aria-invalid={!!message}
 			disabled={disabled}

package/ui/input/TextInput.d.ts

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

package/ui/input/TextInput.js

@@ -13,7 +13,7 @@ import INPUT_CSS from "./Input.module.css";
  * @see https://shelving.cc/ui/TextInput
  */
 export function TextInput({ name, title = "", placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required = false, disabled = false, message = "", value, onValue, input = "text", min = 0, max = Number.POSITIVE_INFINITY, rows = 1, formatter = PASSTHROUGH, ...variants }) {
+required = false, disabled = false, message = "", value, onValue, input = "text", min = 0, max = Number.POSITIVE_INFINITY, rows = 1, formatter = PASSTHROUGH, className, ...variants }) {
     const onBlur = ({ currentTarget }) => {
         currentTarget.value = formatter(currentTarget.value);
     };
@@ -22,12 +22,12 @@ required = false, disabled = false, message = "", value, onValue, input = "text"
             onValue?.(formatter(e.currentTarget.value));
             _resize(e.currentTarget, rows);
         };
-        return (_jsx("textarea", { ref: el => void (el && _resize(el, rows)), name: name, defaultValue: value !== undefined ? formatter(value) : "", minLength: Number.isFinite(min) ? min : 0, maxLength: Number.isFinite(max) ? max : undefined, rows: rows, required: required && min > 0, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), getModuleClass(INPUT_CSS, "multiline")), onInput: onChange, onChange: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
+        return (_jsx("textarea", { ref: el => void (el && _resize(el, rows)), name: name, defaultValue: value !== undefined ? formatter(value) : "", minLength: Number.isFinite(min) ? min : 0, maxLength: Number.isFinite(max) ? max : undefined, rows: rows, required: required && min > 0, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), getModuleClass(INPUT_CSS, "multiline"), className), onInput: onChange, onChange: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
     }
     const onChange = (e) => {
         onValue?.(formatter(e.currentTarget.value));
     };
-    return (_jsx("input", { name: name, type: input, defaultValue: value !== undefined ? formatter(value) : "", minLength: Number.isFinite(min) ? min : 0, maxLength: Number.isFinite(max) ? max : undefined, required: required && min > 0, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text")), onInput: onChange, onChange: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
+    return (_jsx("input", { name: name, type: input, defaultValue: value !== undefined ? formatter(value) : "", minLength: Number.isFinite(min) ? min : 0, maxLength: Number.isFinite(max) ? max : undefined, required: required && min > 0, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className), onInput: onChange, onChange: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
 }
 /**
  * @todo This can be removed when Firefox supports `field-sizing:` in CSS.

package/ui/input/TextInput.tsx

@@ -45,6 +45,7 @@ export function TextInput({
 	max = Number.POSITIVE_INFINITY,
 	rows = 1,
 	formatter = PASSTHROUGH,
+	className,
 	...variants
 }: TextInputProps): ReactElement {
 	const onBlur = ({ currentTarget }: SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -68,7 +69,7 @@ export function TextInput({
 				required={required && min > 0}
 				disabled={disabled}
 				placeholder={placeholder || " "}
-				className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), getModuleClass(INPUT_CSS, "multiline"))}
+				className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), getModuleClass(INPUT_CSS, "multiline"), className)}
 				onInput={onChange}
 				onChange={onChange}
 				onBlur={onBlur}
@@ -92,7 +93,7 @@ export function TextInput({
 			required={required && min > 0}
 			disabled={disabled}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), className)}
 			onInput={onChange}
 			onChange={onChange}
 			onBlur={onBlur}

package/ui/input/index.d.ts

@@ -1,8 +1,6 @@
 export * from "./ArrayInput.js";
 export * from "./ArrayRadioInputs.js";
 export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
 export * from "./CheckboxInput.js";
 export * from "./ChoiceRadioInputs.js";
 export * from "./DataInput.js";
@@ -13,6 +11,8 @@ export * from "./Input.js";
 export * from "./NumberInput.js";
 export * from "./OutputInput.js";
 export * from "./Popover.js";
+export * from "./PopoverButton.js";
+export * from "./PopoverButtonInput.js";
 export * from "./QueryInput.js";
 export * from "./RadioInput.js";
 export * from "./SchemaInput.js";

package/ui/input/index.js

@@ -1,8 +1,6 @@
 export * from "./ArrayInput.js";
 export * from "./ArrayRadioInputs.js";
 export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
 export * from "./CheckboxInput.js";
 export * from "./ChoiceRadioInputs.js";
 export * from "./DataInput.js";
@@ -13,6 +11,8 @@ export * from "./Input.js";
 export * from "./NumberInput.js";
 export * from "./OutputInput.js";
 export * from "./Popover.js";
+export * from "./PopoverButton.js";
+export * from "./PopoverButtonInput.js";
 export * from "./QueryInput.js";
 export * from "./RadioInput.js";
 export * from "./SchemaInput.js";

package/ui/input/index.ts

@@ -1,8 +1,6 @@
 export * from "./ArrayInput.js";
 export * from "./ArrayRadioInputs.js";
 export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
 export * from "./CheckboxInput.js";
 export * from "./ChoiceRadioInputs.js";
 export * from "./DataInput.js";
@@ -13,6 +11,8 @@ export * from "./Input.js";
 export * from "./NumberInput.js";
 export * from "./OutputInput.js";
 export * from "./Popover.js";
+export * from "./PopoverButton.js";
+export * from "./PopoverButtonInput.js";
 export * from "./QueryInput.js";
 export * from "./RadioInput.js";
 export * from "./SchemaInput.js";

package/ui/menu/Menu.d.ts

@@ -1,13 +1,13 @@
 import type { ReactNode } from "react";
 import { type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants } from "../style/Block.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Menu>` — optional `<MenuItem>` `children`.
  *
  * @see https://shelving.cc/ui/MenuProps
  */
-export interface MenuProps extends BlockVariants, OptionalChildProps {
+export interface MenuProps extends BlockVariants, OptionalChildProps, ClassProps {
 }
 /**
  * A `<menu>` list of `<MenuItem>` children.
@@ -17,13 +17,13 @@ export interface MenuProps extends BlockVariants, OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Menu
  */
-export declare function Menu({ children, ...props }: MenuProps): ReactNode;
+export declare function Menu({ children, className, ...props }: MenuProps): ReactNode;
 /**
  * Props for `<MenuItem>` — `<Clickable>` props plus `children` whose first node is the label and the rest the submenu.
  *
  * @see https://shelving.cc/ui/MenuItemProps
  */
-export interface MenuItemProps extends ClickableProps {
+export interface MenuItemProps extends ClickableProps, ClassProps {
     /**
      * The first child becomes the link label (rendered inside the `<a>`).
      * - Any additional children form the submenu — only rendered when this item is "proud" (an ancestor of the current page). The caller is responsible for wrapping the submenu in a nested `<Menu>` if it wants the CSS `.menu .menu` descendant rules to apply.
@@ -38,4 +38,4 @@ export interface MenuItemProps extends ClickableProps {
  * @kind component
  * @see https://shelving.cc/ui/MenuItem
  */
-export declare function MenuItem({ href, children, ...props }: MenuItemProps): ReactNode;
+export declare function MenuItem({ href, children, className, ...props }: MenuItemProps): ReactNode;

package/ui/menu/Menu.js

@@ -19,9 +19,9 @@ const MENU_ACTIVE_CLASS = getModuleClass(MENU_CSS, "active");
  * @kind component
  * @see https://shelving.cc/ui/Menu
  */
-export function Menu({ children, ...props }) {
+export function Menu({ children, className, ...props }) {
     return (_jsx("menu", { className: getClass(MENU_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }
 /**
  * A `<li>` containing an `<a>` link, plus optional submenu content shown when this item is "proud".
@@ -31,12 +31,12 @@ export function Menu({ children, ...props }) {
  * @kind component
  * @see https://shelving.cc/ui/MenuItem
  */
-export function MenuItem({ href, children, ...props }) {
+export function MenuItem({ href, children, className, ...props }) {
     const { url, root } = requireMeta();
     const link = getLink(href, url, root);
     const proud = isURLProud(url, link);
     const active = isURLActive(url, link);
     const [label, ...after] = isArray(children) ? children : [children];
-    return (_jsxs("li", { className: MENU_ITEM_CLASS, children: [_jsx(Clickable, { href: href, ...props, className: getClass(MENU_LINK_CLASS, //
+    return (_jsxs("li", { className: getClass(MENU_ITEM_CLASS, className), children: [_jsx(Clickable, { href: href, ...props, className: getClass(MENU_LINK_CLASS, //
                 proud && MENU_PROUD_CLASS, active && MENU_ACTIVE_CLASS), children: label }), proud && after] }));
 }

package/ui/menu/Menu.tsx

@@ -5,7 +5,7 @@ import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { requireMeta } from "../misc/MetaContext.js";
 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 MENU_CSS from "./Menu.module.css";
 
 const MENU_CLASS = getModuleClass(MENU_CSS, "menu");
@@ -19,7 +19,7 @@ const MENU_ACTIVE_CLASS = getModuleClass(MENU_CSS, "active");
  *
  * @see https://shelving.cc/ui/MenuProps
  */
-export interface MenuProps extends BlockVariants, OptionalChildProps {}
+export interface MenuProps extends BlockVariants, OptionalChildProps, ClassProps {}
 
 /**
  * A `<menu>` list of `<MenuItem>` children.
@@ -29,12 +29,13 @@ export interface MenuProps extends BlockVariants, OptionalChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Menu
  */
-export function Menu({ children, ...props }: MenuProps): ReactNode {
+export function Menu({ children, className, ...props }: MenuProps): ReactNode {
 	return (
 		<menu
 			className={getClass(
 				MENU_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}
@@ -47,7 +48,7 @@ export function Menu({ children, ...props }: MenuProps): ReactNode {
  *
  * @see https://shelving.cc/ui/MenuItemProps
  */
-export interface MenuItemProps extends ClickableProps {
+export interface MenuItemProps extends ClickableProps, ClassProps {
 	/**
 	 * The first child becomes the link label (rendered inside the `<a>`).
 	 * - Any additional children form the submenu — only rendered when this item is "proud" (an ancestor of the current page). The caller is responsible for wrapping the submenu in a nested `<Menu>` if it wants the CSS `.menu .menu` descendant rules to apply.
@@ -63,14 +64,14 @@ export interface MenuItemProps extends ClickableProps {
  * @kind component
  * @see https://shelving.cc/ui/MenuItem
  */
-export function MenuItem({ href, children, ...props }: MenuItemProps): ReactNode {
+export function MenuItem({ href, children, className, ...props }: MenuItemProps): ReactNode {
 	const { url, root } = requireMeta();
 	const link = getLink(href, url, root);
 	const proud = isURLProud(url, link);
 	const active = isURLActive(url, link);
 	const [label, ...after] = isArray(children) ? children : [children];
 	return (
-		<li className={MENU_ITEM_CLASS}>
+		<li className={getClass(MENU_ITEM_CLASS, className)}>
 			<Clickable
 				href={href}
 				{...props}