shelving 1.282.2 → 1.284.0

package/ui/misc/Icon.d.ts

@@ -4,12 +4,13 @@ import type { SpaceVariants } from "../style/Space.js";
 import { type StatusVariants } from "../style/Status.js";
 import type { TintVariant } from "../style/Tint.js";
 import { type SizeVariant } from "../style/Typography.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `<Icon>` — the `status` to represent and optional icon `size`.
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants, ClassProps {
     /**
      * Set the icon to use. Defaults to appropriate icon for `status`
      */

package/ui/misc/Icon.js

@@ -23,5 +23,6 @@ const STATUS_ICONS = {
 export function Icon(props) {
     const { status = "info", icon: Element = STATUS_ICONS[status] ?? InformationCircleIcon } = props;
     return (_jsx(Element, { className: getClass(getModuleClass(ICON_CSS, "icon"), //
-        getStatusClass(props), getTypographyClass(props)) }));
+        getStatusClass(props), getTypographyClass(props), // Used for colour, size, and tint.
+        props.className) }));
 }

package/ui/misc/Icon.tsx

@@ -6,6 +6,7 @@ import { getStatusClass, type Status, type StatusVariants } from "../style/Statu
 import type { TintVariant } from "../style/Tint.js";
 import { getTypographyClass, type SizeVariant } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import ICON_CSS from "./Icon.module.css";
 import { Loading } from "./Loading.js";
 
@@ -24,7 +25,7 @@ const STATUS_ICONS: {
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants, ClassProps {
 	/**
 	 * Set the icon to use. Defaults to appropriate icon for `status`
 	 */
@@ -57,6 +58,7 @@ export function Icon(props: IconProps): ReactElement {
 				getModuleClass(ICON_CSS, "icon"), //
 				getStatusClass(props),
 				getTypographyClass(props), // Used for colour, size, and tint.
+				props.className,
 			)}
 		/>
 	);

package/ui/misc/Loading.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import type { ClassProps } from "../util/props.js";
 /**
  * Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.
  *
@@ -9,9 +10,7 @@ import type { ReactElement } from "react";
  * @kind component
  * @see https://shelving.cc/ui/Loading
  */
-export declare function Loading({ className }: {
-    className?: string | undefined;
-}): ReactElement;
+export declare function Loading({ className }: ClassProps): ReactElement;
 /**
  * Shared loading spinner element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.
  *

package/ui/misc/Loading.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { Icon } from "./Icon.js";
 import LOADING_CSS from "./Loading.module.css";
 const LOADING_TRACK_CLASS = getModuleClass(LOADING_CSS, "track");
@@ -15,7 +15,7 @@ const LOADING_INDICATOR_CLASS = getModuleClass(LOADING_CSS, "indicator");
  * @see https://shelving.cc/ui/Loading
  */
 export function Loading({ className }) {
-    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: className, "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: LOADING_TRACK_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" }), _jsxs("g", { children: [_jsx("animateTransform", { attributeName: "transform", attributeType: "xml", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.5s", repeatCount: "indefinite" }), _jsx("circle", { className: LOADING_INDICATOR_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" })] })] }));
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: getClass(className) || undefined, "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: LOADING_TRACK_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" }), _jsxs("g", { children: [_jsx("animateTransform", { attributeName: "transform", attributeType: "xml", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.5s", repeatCount: "indefinite" }), _jsx("circle", { className: LOADING_INDICATOR_CLASS, cx: "12", cy: "12", r: "9", pathLength: "100" })] })] }));
 }
 /**
  * Shared loading spinner element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.

package/ui/misc/Loading.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import { Icon } from "./Icon.js";
 import LOADING_CSS from "./Loading.module.css";
 
@@ -16,9 +17,15 @@ const LOADING_INDICATOR_CLASS = getModuleClass(LOADING_CSS, "indicator");
  * @kind component
  * @see https://shelving.cc/ui/Loading
  */
-export function Loading({ className }: { className?: string | undefined }): ReactElement {
+export function Loading({ className }: ClassProps): ReactElement {
 	return (
-		<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className={className} data-slot="icon">
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			className={getClass(className) || undefined}
+			data-slot="icon"
+		>
 			<title>Loading...</title>
 			<circle className={LOADING_TRACK_CLASS} cx="12" cy="12" r="9" pathLength="100" />
 			<g>

package/ui/misc/Tag.d.ts

@@ -2,6 +2,7 @@ import type { ReactElement } from "react";
 import { type ClickableProps } from "../button/Clickable.js";
 import { type StatusVariants } from "../style/Status.js";
 import { type TypographyVariants } from "../style/Typography.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Styling variants accepted by `<Tag>` — status, colour, and typography options.
  *
@@ -23,7 +24,7 @@ export declare function getTagClass(variants: TagVariants): string;
  *
  * @see https://shelving.cc/ui/TagProps
  */
-export interface TagProps extends TagVariants, ClickableProps {
+export interface TagProps extends TagVariants, ClickableProps, ClassProps {
 }
 /**
  * Small inline label used to annotate other content.
@@ -33,4 +34,4 @@ export interface TagProps extends TagVariants, ClickableProps {
  * @kind component
  * @see https://shelving.cc/ui/Tag
  */
-export declare function Tag(props: TagProps): ReactElement;
+export declare function Tag({ className, ...props }: TagProps): ReactElement;

package/ui/misc/Tag.js

@@ -25,6 +25,6 @@ export function getTagClass(variants) {
  * @kind component
  * @see https://shelving.cc/ui/Tag
  */
-export function Tag(props) {
-    return _jsx(Clickable, { ...props, className: getTagClass(props) });
+export function Tag({ className, ...props }) {
+    return _jsx(Clickable, { ...props, className: getClass(getTagClass(props), className) });
 }

package/ui/misc/Tag.tsx

@@ -3,6 +3,7 @@ import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import TAG_CSS from "./Tag.module.css";
 
 const TAG_CLASS = getModuleClass(TAG_CSS, "tag");
@@ -35,7 +36,7 @@ export function getTagClass(variants: TagVariants) {
  *
  * @see https://shelving.cc/ui/TagProps
  */
-export interface TagProps extends TagVariants, ClickableProps {}
+export interface TagProps extends TagVariants, ClickableProps, ClassProps {}
 
 /**
  * Small inline label used to annotate other content.
@@ -45,6 +46,6 @@ export interface TagProps extends TagVariants, ClickableProps {}
  * @kind component
  * @see https://shelving.cc/ui/Tag
  */
-export function Tag(props: TagProps): ReactElement {
-	return <Clickable {...props} className={getTagClass(props)} />;
+export function Tag({ className, ...props }: TagProps): ReactElement {
+	return <Clickable {...props} className={getClass(getTagClass(props), className)} />;
 }

package/ui/notice/Message.d.ts

@@ -1,12 +1,12 @@
 import { type BlockVariants } from "../style/Block.js";
 import { type StatusVariants } from "../style/Status.js";
-import type { ChildProps } from "../util/index.js";
+import type { ChildProps, ClassProps } from "../util/index.js";
 /**
  * Props for `<Message>` — paragraph props plus colour and status styling variants.
  *
  * @see https://shelving.cc/ui/MessageProps
  */
-export interface MessageProps extends BlockVariants, StatusVariants, ChildProps {
+export interface MessageProps extends BlockVariants, StatusVariants, ChildProps, ClassProps {
 }
 /**
  * Status-coloured paragraph used for inline feedback messages.
@@ -16,4 +16,4 @@ export interface MessageProps extends BlockVariants, StatusVariants, ChildProps
  * @example <Message status="error">Something went wrong</Message>
  * @see https://shelving.cc/ui/Message
  */
-export declare function Message({ children, ...props }: MessageProps): import("react").JSX.Element;
+export declare function Message({ children, className, ...props }: MessageProps): import("react").JSX.Element;

package/ui/notice/Message.js

@@ -12,8 +12,8 @@ const MESSAGE_CLASS = getModuleClass(MESSAGE_CSS, "message");
  * @example <Message status="error">Something went wrong</Message>
  * @see https://shelving.cc/ui/Message
  */
-export function Message({ children, ...props }) {
+export function Message({ children, className, ...props }) {
     const { status } = props;
     return (_jsx("p", { role: status === "error" || status === "danger" ? "alert" : "status", className: getClass(MESSAGE_CLASS, //
-        getBlockClass(props), getStatusClass(props)), children: children }));
+        getBlockClass(props), getStatusClass(props), className), children: children }));
 }

package/ui/notice/Message.tsx

@@ -1,7 +1,7 @@
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { ChildProps } from "../util/index.js";
+import type { ChildProps, ClassProps } from "../util/index.js";
 import MESSAGE_CSS from "./Message.module.css";
 
 const MESSAGE_CLASS = getModuleClass(MESSAGE_CSS, "message");
@@ -11,7 +11,7 @@ const MESSAGE_CLASS = getModuleClass(MESSAGE_CSS, "message");
  *
  * @see https://shelving.cc/ui/MessageProps
  */
-export interface MessageProps extends BlockVariants, StatusVariants, ChildProps {}
+export interface MessageProps extends BlockVariants, StatusVariants, ChildProps, ClassProps {}
 
 /**
  * Status-coloured paragraph used for inline feedback messages.
@@ -21,7 +21,7 @@ export interface MessageProps extends BlockVariants, StatusVariants, ChildProps
  * @example <Message status="error">Something went wrong</Message>
  * @see https://shelving.cc/ui/Message
  */
-export function Message({ children, ...props }: MessageProps) {
+export function Message({ children, className, ...props }: MessageProps) {
 	const { status } = props;
 	return (
 		<p
@@ -30,6 +30,7 @@ export function Message({ children, ...props }: MessageProps) {
 				MESSAGE_CLASS, //
 				getBlockClass(props),
 				getStatusClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/notice/Notice.d.ts

@@ -2,13 +2,13 @@ import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
 import { type FlexVariants } from "../style/Flex.js";
 import { type StatusVariants } from "../style/Status.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Notice>` — flex/colour/status styling variants, optional `children`, and an optional `icon`.
  *
  * @see https://shelving.cc/ui/NoticeProps
  */
-export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants, OptionalChildProps {
+export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants, OptionalChildProps, ClassProps {
     /** Icon for the notice (or `null` or `false` to hide the icon, defaults to `<StatusIcon>`). */
     icon?: ReactElement | false | undefined;
 }
@@ -22,7 +22,7 @@ export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants
  * @see https://shelving.cc/ui/Notice
  */
 export declare function Notice({ children, //
-icon, ...props }: NoticeProps): import("react").JSX.Element;
+icon, className, ...props }: NoticeProps): import("react").JSX.Element;
 /**
  * Shared loading `<Notice>` element showing the loading spinner.
  *

package/ui/notice/Notice.js

@@ -16,10 +16,10 @@ const NOTICE_CLASS = getModuleClass(NOTICE_CSS, "notice");
  * @see https://shelving.cc/ui/Notice
  */
 export function Notice({ children, //
-icon, ...props }) {
+icon, className, ...props }) {
     const { status } = props;
     return (_jsxs("aside", { role: status === "danger" || status === "error" ? "alert" : "status", className: getClass(NOTICE_CLASS, //
-        getBlockClass(props), getFlexClass(props), getStatusClass(props)), children: [icon !== undefined ? icon : status && _jsx(Icon, { status: status }), children] }));
+        getBlockClass(props), getFlexClass(props), getStatusClass(props), className), children: [icon !== undefined ? icon : status && _jsx(Icon, { status: status }), children] }));
 }
 /**
  * Shared loading `<Notice>` element showing the loading spinner.

package/ui/notice/Notice.tsx

@@ -4,7 +4,7 @@ import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import NOTICE_CSS from "./Notice.module.css";
 
 const NOTICE_CLASS = getModuleClass(NOTICE_CSS, "notice");
@@ -14,7 +14,7 @@ const NOTICE_CLASS = getModuleClass(NOTICE_CSS, "notice");
  *
  * @see https://shelving.cc/ui/NoticeProps
  */
-export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants, OptionalChildProps {
+export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants, OptionalChildProps, ClassProps {
 	/** Icon for the notice (or `null` or `false` to hide the icon, defaults to `<StatusIcon>`). */
 	icon?: ReactElement | false | undefined;
 }
@@ -31,6 +31,7 @@ export interface NoticeProps extends BlockVariants, FlexVariants, StatusVariants
 export function Notice({
 	children, //
 	icon,
+	className,
 	...props
 }: NoticeProps) {
 	const { status } = props;
@@ -42,6 +43,7 @@ export function Notice({
 				getBlockClass(props),
 				getFlexClass(props),
 				getStatusClass(props),
+				className,
 			)}
 		>
 			{icon !== undefined ? icon : status && <Icon status={status} />}

package/ui/notice/Notices.d.ts

@@ -1,11 +1,12 @@
 import { type ReactElement } from "react";
 import { type FlexVariants } from "../style/Flex.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `<Notices>` — flex styling variants for the notices container.
  *
  * @see https://shelving.cc/ui/NoticesProps
  */
-export interface NoticesProps extends FlexVariants {
+export interface NoticesProps extends FlexVariants, ClassProps {
 }
 /**
  * Render the global list of notices and subscribe to incoming `"notice"` events.
@@ -15,4 +16,4 @@ export interface NoticesProps extends FlexVariants {
  * @kind component
  * @see https://shelving.cc/ui/Notices
  */
-export declare function Notices(props: NoticesProps): ReactElement;
+export declare function Notices({ className, ...props }: NoticesProps): ReactElement;

package/ui/notice/Notices.js

@@ -16,11 +16,11 @@ const NOTICES_CLASS = getModuleClass(NOTICES_CSS, "notices");
  * @kind component
  * @see https://shelving.cc/ui/Notices
  */
-export function Notices(props) {
+export function Notices({ className, ...props }) {
     const notices = useStore(NOTICES).value;
     useEffect(() => {
         // Subscribe to global notices.
         return subscribeNotices((message, status) => NOTICES.show(message, status));
     });
-    return (_jsx("aside", { className: getClass(NOTICES_CLASS, getFlexClass(props)), children: notices.map(({ key, value }) => (_jsx(Notice, { ...value }, key))) }));
+    return (_jsx("aside", { className: getClass(NOTICES_CLASS, getFlexClass(props), className), children: notices.map(({ key, value }) => (_jsx(Notice, { ...value }, key))) }));
 }

package/ui/notice/Notices.tsx

@@ -3,6 +3,7 @@ import { useStore } from "../../react/useStore.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { subscribeNotices } from "../util/notice.js";
+import type { ClassProps } from "../util/props.js";
 import { Notice } from "./Notice.js";
 import NOTICES_CSS from "./Notices.module.css";
 import { NOTICES } from "./NoticesStore.js";
@@ -14,7 +15,7 @@ const NOTICES_CLASS = getModuleClass(NOTICES_CSS, "notices");
  *
  * @see https://shelving.cc/ui/NoticesProps
  */
-export interface NoticesProps extends FlexVariants {}
+export interface NoticesProps extends FlexVariants, ClassProps {}
 
 /**
  * Render the global list of notices and subscribe to incoming `"notice"` events.
@@ -24,14 +25,14 @@ export interface NoticesProps extends FlexVariants {}
  * @kind component
  * @see https://shelving.cc/ui/Notices
  */
-export function Notices(props: NoticesProps): ReactElement {
+export function Notices({ className, ...props }: NoticesProps): ReactElement {
 	const notices = useStore(NOTICES).value;
 	useEffect(() => {
 		// Subscribe to global notices.
 		return subscribeNotices((message, status) => NOTICES.show(message, status));
 	});
 	return (
-		<aside className={getClass(NOTICES_CLASS, getFlexClass(props))}>
+		<aside className={getClass(NOTICES_CLASS, getFlexClass(props), className)}>
 			{notices.map(({ key, value }) => (
 				<Notice key={key} {...value} />
 			))}

package/ui/table/Cell.d.ts

@@ -1,13 +1,13 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
 import { type WidthVariants } from "../style/Width.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 /**
  * Props for `Cell` — width and typography variants plus `children`.
  *
  * @see https://shelving.cc/ui/CellProps
  */
-export interface CellProps extends WidthVariants, TypographyVariants, OptionalChildProps {
+export interface CellProps extends WidthVariants, TypographyVariants, OptionalChildProps, ClassProps {
     header?: boolean | undefined;
 }
 /**
@@ -19,4 +19,4 @@ export interface CellProps extends WidthVariants, TypographyVariants, OptionalCh
  * @kind component
  * @see https://shelving.cc/ui/Cell
  */
-export declare function Cell({ header, children, ...props }: CellProps): ReactElement;
+export declare function Cell({ header, children, className, ...props }: CellProps): ReactElement;

package/ui/table/Cell.js

@@ -11,8 +11,8 @@ import { getClass } from "../util/css.js";
  * @kind component
  * @see https://shelving.cc/ui/Cell
  */
-export function Cell({ header = false, children, ...props }) {
+export function Cell({ header = false, children, className, ...props }) {
     const Component = header ? "th" : "td";
     return (_jsx(Component, { className: getClass(getWidthClass(props), //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/table/Cell.tsx

@@ -2,14 +2,14 @@ import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 
 /**
  * Props for `Cell` — width and typography variants plus `children`.
  *
  * @see https://shelving.cc/ui/CellProps
  */
-export interface CellProps extends WidthVariants, TypographyVariants, OptionalChildProps {
+export interface CellProps extends WidthVariants, TypographyVariants, OptionalChildProps, ClassProps {
 	header?: boolean | undefined;
 }
 
@@ -22,13 +22,14 @@ export interface CellProps extends WidthVariants, TypographyVariants, OptionalCh
  * @kind component
  * @see https://shelving.cc/ui/Cell
  */
-export function Cell({ header = false, children, ...props }: CellProps): ReactElement {
+export function Cell({ header = false, children, className, ...props }: CellProps): ReactElement {
 	const Component = header ? "th" : "td";
 	return (
 		<Component
 			className={getClass(
 				getWidthClass(props), //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/table/Table.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type BlockVariants } from "../style/Block.js";
-import type { ChildProps } from "../util/props.js";
+import type { ChildProps, ClassProps } from "../util/props.js";
 /**
  * Props for `Table` — colour, space, typography, and width variants plus `children`.
  *
  * @see https://shelving.cc/ui/TableProps
  */
-export interface TableProps extends BlockVariants, ChildProps {
+export interface TableProps extends BlockVariants, ChildProps, ClassProps {
 }
 /**
  * Table block — rendered as `<table>`.
@@ -16,4 +16,4 @@ export interface TableProps extends BlockVariants, ChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Table
  */
-export declare function Table({ children, ...props }: TableProps): ReactElement;
+export declare function Table({ children, className, ...props }: TableProps): ReactElement;

package/ui/table/Table.js

@@ -11,7 +11,7 @@ const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
  * @kind component
  * @see https://shelving.cc/ui/Table
  */
-export function Table({ children, ...props }) {
+export function Table({ children, className, ...props }) {
     return (_jsx("table", { className: getClass(TABLE_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/table/Table.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { ChildProps } from "../util/props.js";
+import type { ChildProps, ClassProps } from "../util/props.js";
 import TABLE_CSS from "./Table.module.css";
 
 const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
@@ -11,7 +11,7 @@ const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
  *
  * @see https://shelving.cc/ui/TableProps
  */
-export interface TableProps extends BlockVariants, ChildProps {}
+export interface TableProps extends BlockVariants, ChildProps, ClassProps {}
 
 /**
  * Table block — rendered as `<table>`.
@@ -21,12 +21,13 @@ export interface TableProps extends BlockVariants, ChildProps {}
  * @kind component
  * @see https://shelving.cc/ui/Table
  */
-export function Table({ children, ...props }: TableProps): ReactElement {
+export function Table({ children, className, ...props }: TableProps): ReactElement {
 	return (
 		<table
 			className={getClass(
 				TABLE_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/tree/TreeBreadcrumbs.d.ts

@@ -2,12 +2,13 @@ import { type ReactElement } from "react";
 import { type FlexVariants } from "../style/Flex.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { TypographyVariants } from "../style/Typography.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for the `TreeBreadcrumbs` component — typography, space, and flex variant props.
  *
  * @see https://shelving.cc/ui/TreeBreadcrumbsProps
  */
-export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants, FlexVariants {
+export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants, FlexVariants, ClassProps {
 }
 /**
  * Breadcrumb trail of links to a tree page's ancestors, separated by `›` arrow icons.
@@ -22,4 +23,4 @@ export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants,
  * @example <TreeBreadcrumbs />
  * @see https://shelving.cc/ui/TreeBreadcrumbs
  */
-export declare function TreeBreadcrumbs({ tint, left, wrap, ...props }: TreeBreadcrumbsProps): ReactElement | null;
+export declare function TreeBreadcrumbs({ tint, left, wrap, className, ...props }: TreeBreadcrumbsProps): ReactElement | null;

package/ui/tree/TreeBreadcrumbs.js

@@ -21,12 +21,12 @@ import { useTreeMap } from "./TreeContext.js";
  * @example <TreeBreadcrumbs />
  * @see https://shelving.cc/ui/TreeBreadcrumbs
  */
-export function TreeBreadcrumbs({ tint = "70", left = true, wrap = true, ...props }) {
+export function TreeBreadcrumbs({ tint = "70", left = true, wrap = true, className, ...props }) {
     const map = useTreeMap();
     const segments = splitPath(requireMetaURL().path).slice(0, -1); // Don't include the element itself.
     // Cumulative ancestor paths (`/util`, `/util/string`, …); skip prefixes with no element (e.g. the partial `/util` half of a `"util/string"` module name).
     const ancestors = segments.map((_, i) => joinPath("/", segments.slice(0, i + 1))).filter(path => map.has(path));
     const variants = { tint, left, wrap, ...props };
     return (_jsxs("nav", { "aria-label": "Breadcrumb", className: getClass(getBlockClass(variants), //
-        getFlexClass(variants)), children: [_jsx(TreeButton, { small: true, plain: true, name: "/" }), _jsx(ChevronRightIcon, {}), ancestors.map(path => (_jsxs(Fragment, { children: [_jsx(TreeButton, { small: true, plain: true, name: path }), _jsx(ChevronRightIcon, {})] }, path)))] }));
+        getFlexClass(variants), className), children: [_jsx(TreeButton, { small: true, plain: true, name: "/" }), _jsx(ChevronRightIcon, {}), ancestors.map(path => (_jsxs(Fragment, { children: [_jsx(TreeButton, { small: true, plain: true, name: path }), _jsx(ChevronRightIcon, {})] }, path)))] }));
 }

package/ui/tree/TreeBreadcrumbs.tsx

@@ -7,6 +7,7 @@ import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { TypographyVariants } from "../style/Typography.js";
 import { getClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import { TreeButton } from "./TreeButton.js";
 import { useTreeMap } from "./TreeContext.js";
 
@@ -15,7 +16,7 @@ import { useTreeMap } from "./TreeContext.js";
  *
  * @see https://shelving.cc/ui/TreeBreadcrumbsProps
  */
-export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants, FlexVariants {}
+export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants, FlexVariants, ClassProps {}
 
 /**
  * Breadcrumb trail of links to a tree page's ancestors, separated by `›` arrow icons.
@@ -30,7 +31,7 @@ export interface TreeBreadcrumbsProps extends TypographyVariants, SpaceVariants,
  * @example <TreeBreadcrumbs />
  * @see https://shelving.cc/ui/TreeBreadcrumbs
  */
-export function TreeBreadcrumbs({ tint = "70", left = true, wrap = true, ...props }: TreeBreadcrumbsProps): ReactElement | null {
+export function TreeBreadcrumbs({ tint = "70", left = true, wrap = true, className, ...props }: TreeBreadcrumbsProps): ReactElement | null {
 	const map = useTreeMap();
 	const segments = splitPath(requireMetaURL().path).slice(0, -1); // Don't include the element itself.
 	// Cumulative ancestor paths (`/util`, `/util/string`, …); skip prefixes with no element (e.g. the partial `/util` half of a `"util/string"` module name).
@@ -42,6 +43,7 @@ export function TreeBreadcrumbs({ tint = "70", left = true, wrap = true, ...prop
 			className={getClass(
 				getBlockClass(variants), //
 				getFlexClass(variants),
+				className,
 			)}
 		>
 			<TreeButton small plain name="/" />

package/ui/tree/TreeButton.d.ts

@@ -1,11 +1,12 @@
 import type { ReactElement, ReactNode } from "react";
 import { type ButtonVariants } from "../button/Button.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for the `TreeButton` component — the element reference plus button variants.
  *
  * @see https://shelving.cc/ui/TreeButtonProps
  */
-export interface TreeButtonProps extends ButtonVariants {
+export interface TreeButtonProps extends ButtonVariants, ClassProps {
     /** Reference to an element in the tree — a flat key (`"Store"`, `"Store.get"`) or a canonical path (`"/schema/BooleanSchema"`). */
     readonly name: string;
     /** Visible label — defaults to the resolved element's `title`, falling back to `name`. */

package/ui/tree/TreeButton.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import { Button, type ButtonVariants } from "../button/Button.js";
+import type { ClassProps } from "../util/props.js";
 import { getTreeElement, useTreeMap } from "./TreeContext.js";
 
 /**
@@ -7,7 +8,7 @@ import { getTreeElement, useTreeMap } from "./TreeContext.js";
  *
  * @see https://shelving.cc/ui/TreeButtonProps
  */
-export interface TreeButtonProps extends ButtonVariants {
+export interface TreeButtonProps extends ButtonVariants, ClassProps {
 	/** Reference to an element in the tree — a flat key (`"Store"`, `"Store.get"`) or a canonical path (`"/schema/BooleanSchema"`). */
 	readonly name: string;
 	/** Visible label — defaults to the resolved element's `title`, falling back to `name`. */