shelving 1.282.2 → 1.284.0

package/ui/inline/Code.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 import CODE_CSS from "./Code.module.css";
 
 const CODE_CLASS = getModuleClass(CODE_CSS, "code");
@@ -13,7 +13,7 @@ const CODE_PLAIN_CLASS = getModuleClass(CODE_CSS, "plain");
  *
  * @see https://shelving.cc/ui/CodeProps
  */
-export interface CodeProps extends TypographyVariants, OptionalChildProps {
+export interface CodeProps extends TypographyVariants, OptionalChildProps, ClassProps {
 	plain?: boolean | undefined;
 }
 
@@ -24,13 +24,14 @@ export interface CodeProps extends TypographyVariants, OptionalChildProps {
  * @kind component
  * @see https://shelving.cc/ui/Code
  */
-export function Code({ children, plain, ...props }: CodeProps): ReactElement {
+export function Code({ children, plain, className, ...props }: CodeProps): ReactElement {
 	return (
 		<code
 			className={getClass(
 				CODE_CLASS, //
 				plain && CODE_PLAIN_CLASS,
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Deleted.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Deleted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/DeletedProps
  */
-export interface DeletedProps extends OptionalChildProps, TypographyVariants {
+export interface DeletedProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
@@ -15,4 +15,4 @@ export interface DeletedProps extends OptionalChildProps, TypographyVariants {
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export declare function Deleted({ children, ...props }: DeletedProps): ReactElement;
+export declare function Deleted({ children, className, ...props }: DeletedProps): ReactElement;

package/ui/inline/Deleted.js

@@ -10,7 +10,7 @@ const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children, ...props }) {
+export function Deleted({ children, className, ...props }) {
     return (_jsx("del", { className: getClass(DELETED_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Deleted.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import DELETED_CSS from "./Deleted.module.css";
 
 const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
@@ -11,7 +11,7 @@ const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
  *
  * @see https://shelving.cc/ui/DeletedProps
  */
-export interface DeletedProps extends OptionalChildProps, TypographyVariants {}
+export interface DeletedProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
@@ -20,12 +20,13 @@ export interface DeletedProps extends OptionalChildProps, TypographyVariants {}
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children, ...props }: DeletedProps): ReactElement {
+export function Deleted({ children, className, ...props }: DeletedProps): ReactElement {
 	return (
 		<del
 			className={getClass(
 				DELETED_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Emphasis.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Emphasis` — optional `children`.
  *
  * @see https://shelving.cc/ui/EmphasisProps
  */
-export interface EmphasisProps extends OptionalChildProps, TypographyVariants {
+export interface EmphasisProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
@@ -15,4 +15,4 @@ export interface EmphasisProps extends OptionalChildProps, TypographyVariants {
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export declare function Emphasis({ children, ...props }: EmphasisProps): ReactElement;
+export declare function Emphasis({ children, className, ...props }: EmphasisProps): ReactElement;

package/ui/inline/Emphasis.js

@@ -10,7 +10,7 @@ const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export function Emphasis({ children, ...props }) {
+export function Emphasis({ children, className, ...props }) {
     return (_jsx("em", { className: getClass(EMPHASIS_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Emphasis.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
 
 const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
@@ -11,7 +11,7 @@ const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
  *
  * @see https://shelving.cc/ui/EmphasisProps
  */
-export interface EmphasisProps extends OptionalChildProps, TypographyVariants {}
+export interface EmphasisProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
@@ -20,12 +20,13 @@ export interface EmphasisProps extends OptionalChildProps, TypographyVariants {}
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export function Emphasis({ children, ...props }: EmphasisProps): ReactElement {
+export function Emphasis({ children, className, ...props }: EmphasisProps): ReactElement {
 	return (
 		<em
 			className={getClass(
 				EMPHASIS_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Inserted.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Inserted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/InsertedProps
  */
-export interface InsertedProps extends OptionalChildProps, TypographyVariants {
+export interface InsertedProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Inserted text — renders an `<ins>` element to mark content added to a document.
@@ -15,4 +15,4 @@ export interface InsertedProps extends OptionalChildProps, TypographyVariants {
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export declare function Inserted({ children, ...props }: InsertedProps): ReactElement;
+export declare function Inserted({ children, className, ...props }: InsertedProps): ReactElement;

package/ui/inline/Inserted.js

@@ -10,7 +10,7 @@ const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children, ...props }) {
+export function Inserted({ children, className, ...props }) {
     return (_jsx("ins", { className: getClass(INSERTED_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Inserted.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import INSERTED_CSS from "./Inserted.module.css";
 
 const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
@@ -11,7 +11,7 @@ const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
  *
  * @see https://shelving.cc/ui/InsertedProps
  */
-export interface InsertedProps extends OptionalChildProps, TypographyVariants {}
+export interface InsertedProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Inserted text — renders an `<ins>` element to mark content added to a document.
@@ -20,12 +20,13 @@ export interface InsertedProps extends OptionalChildProps, TypographyVariants {}
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children, ...props }: InsertedProps): ReactElement {
+export function Inserted({ children, className, ...props }: InsertedProps): ReactElement {
 	return (
 		<ins
 			className={getClass(
 				INSERTED_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Link.d.ts

@@ -1,12 +1,13 @@
 import type { ReactElement } from "react";
 import { type ClickableProps } from "../button/Clickable.js";
 import { type TypographyVariants } from "../style/Typography.js";
+import type { ClassProps } from "../util/props.js";
 /**
  * Props for `Link` — `ClickableProps` (`href` for navigation or `onClick` for actions) plus colour and typography variants.
  *
  * @see https://shelving.cc/ui/LinkProps
  */
-export interface LinkProps extends ClickableProps, TypographyVariants {
+export interface LinkProps extends ClickableProps, TypographyVariants, ClassProps {
 }
 /**
  * Inline link — delegates to `<Clickable>`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
@@ -14,4 +15,4 @@ export interface LinkProps extends ClickableProps, TypographyVariants {
  * @kind component
  * @see https://shelving.cc/ui/Link
  */
-export declare function Link(props: LinkProps): ReactElement;
+export declare function Link({ className, ...props }: LinkProps): ReactElement;

package/ui/inline/Link.js

@@ -10,7 +10,7 @@ const LINK_CLASS = getModuleClass(LINK_CSS, "link");
  * @kind component
  * @see https://shelving.cc/ui/Link
  */
-export function Link(props) {
+export function Link({ className, ...props }) {
     return (_jsx(Clickable, { ...props, className: getClass(LINK_CLASS, //
-        getTypographyClass(props)) }));
+        getTypographyClass(props), className) }));
 }

package/ui/inline/Link.tsx

@@ -2,6 +2,7 @@ import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import LINK_CSS from "./Link.module.css";
 
 const LINK_CLASS = getModuleClass(LINK_CSS, "link");
@@ -11,7 +12,7 @@ const LINK_CLASS = getModuleClass(LINK_CSS, "link");
  *
  * @see https://shelving.cc/ui/LinkProps
  */
-export interface LinkProps extends ClickableProps, TypographyVariants {}
+export interface LinkProps extends ClickableProps, TypographyVariants, ClassProps {}
 
 /**
  * Inline link — delegates to `<Clickable>`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
@@ -19,13 +20,14 @@ export interface LinkProps extends ClickableProps, TypographyVariants {}
  * @kind component
  * @see https://shelving.cc/ui/Link
  */
-export function Link(props: LinkProps): ReactElement {
+export function Link({ className, ...props }: LinkProps): ReactElement {
 	return (
 		<Clickable
 			{...props}
 			className={getClass(
 				LINK_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		/>
 	);

package/ui/inline/Mark.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Mark` — optional `children`.
  *
  * @see https://shelving.cc/ui/MarkProps
  */
-export interface MarkProps extends OptionalChildProps, TypographyVariants {
+export interface MarkProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Highlighted text — renders a `<mark>` element to call attention to a run of text.
@@ -14,4 +14,4 @@ export interface MarkProps extends OptionalChildProps, TypographyVariants {
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export declare function Mark({ children, ...props }: MarkProps): ReactElement;
+export declare function Mark({ children, className, ...props }: MarkProps): ReactElement;

package/ui/inline/Mark.js

@@ -9,7 +9,7 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export function Mark({ children, ...props }) {
+export function Mark({ children, className, ...props }) {
     return (_jsx("mark", { className: getClass(MARK_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Mark.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import MARK_CSS from "./Mark.module.css";
 
 const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
@@ -11,7 +11,7 @@ const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
  *
  * @see https://shelving.cc/ui/MarkProps
  */
-export interface MarkProps extends OptionalChildProps, TypographyVariants {}
+export interface MarkProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Highlighted text — renders a `<mark>` element to call attention to a run of text.
@@ -19,12 +19,13 @@ export interface MarkProps extends OptionalChildProps, TypographyVariants {}
  * @kind component
  * @see https://shelving.cc/ui/Mark
  */
-export function Mark({ children, ...props }: MarkProps): ReactElement {
+export function Mark({ children, className, ...props }: MarkProps): ReactElement {
 	return (
 		<mark
 			className={getClass(
 				MARK_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Small.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Small` — optional `children`.
  *
  * @see https://shelving.cc/ui/SmallProps
  */
-export interface SmallProps extends OptionalChildProps, TypographyVariants {
+export interface SmallProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Small print — renders a `<small>` element for side comments and fine print.
@@ -15,4 +15,4 @@ export interface SmallProps extends OptionalChildProps, TypographyVariants {
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export declare function Small({ children, ...props }: SmallProps): ReactElement;
+export declare function Small({ children, className, ...props }: SmallProps): ReactElement;

package/ui/inline/Small.js

@@ -10,7 +10,7 @@ const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export function Small({ children, ...props }) {
+export function Small({ children, className, ...props }) {
     return (_jsx("small", { className: getClass(SMALL_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Small.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import SMALL_CSS from "./Small.module.css";
 
 const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
@@ -11,7 +11,7 @@ const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
  *
  * @see https://shelving.cc/ui/SmallProps
  */
-export interface SmallProps extends OptionalChildProps, TypographyVariants {}
+export interface SmallProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Small print — renders a `<small>` element for side comments and fine print.
@@ -20,12 +20,13 @@ export interface SmallProps extends OptionalChildProps, TypographyVariants {}
  * @example <Small>Terms apply.</Small>
  * @see https://shelving.cc/ui/Small
  */
-export function Small({ children, ...props }: SmallProps): ReactElement {
+export function Small({ children, className, ...props }: SmallProps): ReactElement {
 	return (
 		<small
 			className={getClass(
 				SMALL_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Span.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Span` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/SpanProps
  */
-export interface SpanProps extends OptionalChildProps, TypographyVariants {
+export interface SpanProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
@@ -16,4 +16,4 @@ export interface SpanProps extends OptionalChildProps, TypographyVariants {
  * @example <Span weight="strong" tint="30">label</Span>
  * @see https://shelving.cc/ui/Span
  */
-export declare function Span({ children, ...props }: SpanProps): ReactElement;
+export declare function Span({ children, className, ...props }: SpanProps): ReactElement;

package/ui/inline/Span.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTypographyClass } from "../style/Typography.js";
+import { getClass } from "../util/css.js";
 /**
  * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
  * - Reach for it to apply variants (`size`, `weight`, `tint`, `color`, …) to a run of text that has no semantic meaning of its own.
@@ -8,6 +9,6 @@ import { getTypographyClass } from "../style/Typography.js";
  * @example <Span weight="strong" tint="30">label</Span>
  * @see https://shelving.cc/ui/Span
  */
-export function Span({ children, ...props }) {
-    return _jsx("span", { className: getTypographyClass(props), children: children });
+export function Span({ children, className, ...props }) {
+    return _jsx("span", { className: getClass(getTypographyClass(props), className), children: children });
 }

package/ui/inline/Span.tsx

@@ -1,13 +1,14 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import { getClass } from "../util/css.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 
 /**
  * Props for `Span` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/SpanProps
  */
-export interface SpanProps extends OptionalChildProps, TypographyVariants {}
+export interface SpanProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Styled inline text — renders a `<span>` carrying only the colour and typography variant classes, with no styling of its own.
@@ -17,6 +18,6 @@ export interface SpanProps extends OptionalChildProps, TypographyVariants {}
  * @example <Span weight="strong" tint="30">label</Span>
  * @see https://shelving.cc/ui/Span
  */
-export function Span({ children, ...props }: SpanProps): ReactElement {
-	return <span className={getTypographyClass(props)}>{children}</span>;
+export function Span({ children, className, ...props }: SpanProps): ReactElement {
+	return <span className={getClass(getTypographyClass(props), className)}>{children}</span>;
 }

package/ui/inline/Strong.d.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from "react";
 import { type TypographyVariants } from "../style/Typography.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Strong` — optional `children`.
  *
  * @see https://shelving.cc/ui/StrongProps
  */
-export interface StrongProps extends OptionalChildProps, TypographyVariants {
+export interface StrongProps extends OptionalChildProps, TypographyVariants, ClassProps {
 }
 /**
  * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
@@ -14,4 +14,4 @@ export interface StrongProps extends OptionalChildProps, TypographyVariants {
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export declare function Strong({ children, ...props }: StrongProps): ReactElement;
+export declare function Strong({ children, className, ...props }: StrongProps): ReactElement;

package/ui/inline/Strong.js

@@ -9,7 +9,7 @@ const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export function Strong({ children, ...props }) {
+export function Strong({ children, className, ...props }) {
     return (_jsx("strong", { className: getClass(STRONG_CLASS, //
-        getTypographyClass(props)), children: children }));
+        getTypographyClass(props), className), children: children }));
 }

package/ui/inline/Strong.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import STRONG_CSS from "./Strong.module.css";
 
 const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
@@ -11,7 +11,7 @@ const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
  *
  * @see https://shelving.cc/ui/StrongProps
  */
-export interface StrongProps extends OptionalChildProps, TypographyVariants {}
+export interface StrongProps extends OptionalChildProps, TypographyVariants, ClassProps {}
 
 /**
  * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
@@ -19,12 +19,13 @@ export interface StrongProps extends OptionalChildProps, TypographyVariants {}
  * @kind component
  * @see https://shelving.cc/ui/Strong
  */
-export function Strong({ children, ...props }: StrongProps): ReactElement {
+export function Strong({ children, className, ...props }: StrongProps): ReactElement {
 	return (
 		<strong
 			className={getClass(
 				STRONG_CLASS, //
 				getTypographyClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/inline/Subscript.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 `Subscript` — optional `children`.
  *
  * @see https://shelving.cc/ui/SubscriptProps
  */
-export interface SubscriptProps extends OptionalChildProps {
+export interface SubscriptProps extends OptionalChildProps, ClassProps {
 }
 /**
  * Subscript text — renders a `<sub>` element for typographically lowered text (e.g. chemical formulae).
@@ -14,4 +14,4 @@ export interface SubscriptProps extends OptionalChildProps {
  * @example <>H<Subscript>2</Subscript>O</>
  * @see https://shelving.cc/ui/Subscript
  */
-export declare function Subscript({ children }: SubscriptProps): ReactElement;
+export declare function Subscript({ children, className }: SubscriptProps): ReactElement;

package/ui/inline/Subscript.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 SUBSCRIPT_CSS from "./Subscript.module.css";
 const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
 /**
@@ -9,6 +9,6 @@ const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
  * @example <>H<Subscript>2</Subscript>O</>
  * @see https://shelving.cc/ui/Subscript
  */
-export function Subscript({ children }) {
-    return _jsx("sub", { className: SUBSCRIPT_CLASS, children: children });
+export function Subscript({ children, className }) {
+    return _jsx("sub", { className: getClass(SUBSCRIPT_CLASS, className), children: children });
 }

package/ui/inline/Subscript.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 SUBSCRIPT_CSS from "./Subscript.module.css";
 
 const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
@@ -10,7 +10,7 @@ const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
  *
  * @see https://shelving.cc/ui/SubscriptProps
  */
-export interface SubscriptProps extends OptionalChildProps {}
+export interface SubscriptProps extends OptionalChildProps, ClassProps {}
 
 /**
  * Subscript text — renders a `<sub>` element for typographically lowered text (e.g. chemical formulae).
@@ -19,6 +19,6 @@ export interface SubscriptProps extends OptionalChildProps {}
  * @example <>H<Subscript>2</Subscript>O</>
  * @see https://shelving.cc/ui/Subscript
  */
-export function Subscript({ children }: SubscriptProps): ReactElement {
-	return <sub className={SUBSCRIPT_CLASS}>{children}</sub>;
+export function Subscript({ children, className }: SubscriptProps): ReactElement {
+	return <sub className={getClass(SUBSCRIPT_CLASS, className)}>{children}</sub>;
 }