shelving 1.243.0 → 1.244.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.243.0",
+	"version": "1.244.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/block/Card.js

@@ -21,6 +21,6 @@ import CARD_CSS from "./Card.module.css";
  * @see https://dhoulb.github.io/shelving/ui/block/Card/Card
  */
 export function Card({ children, href, onClick, title = "Open", ...props }) {
-    const overlay = (href || onClick) && _jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: CARD_CSS.overlay });
+    const overlay = (href || onClick) && (_jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: getModuleClass(CARD_CSS, "overlay") }));
     return (_jsxs("article", { className: getClass(getModuleClass(CARD_CSS, "card"), getStatusClass(props), getColorClass(props), getPaddingClass(props), getSpaceClass(props), getTypographyClass(props), getWidthClass(props)), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
 }

package/ui/block/Card.tsx

@@ -36,7 +36,9 @@ export interface CardProps
  * @see https://dhoulb.github.io/shelving/ui/block/Card/Card
  */
 export function Card({ children, href, onClick, title = "Open", ...props }: CardProps): ReactElement {
-	const overlay = (href || onClick) && <Clickable title={title} href={href} onClick={onClick} {...props} className={CARD_CSS.overlay} />;
+	const overlay = (href || onClick) && (
+		<Clickable title={title} href={href} onClick={onClick} {...props} className={getModuleClass(CARD_CSS, "overlay")} />
+	);
 	return (
 		<article
 			className={getClass(

package/ui/block/Prose.js

@@ -9,7 +9,7 @@ import SMALL_CSS from "../inline/Small.module.css";
 import STRONG_CSS from "../inline/Strong.module.css";
 import SUBSCRIPT_CSS from "../inline/Subscript.module.css";
 import SUPERSCRIPT_CSS from "../inline/Superscript.module.css";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import ADDRESS_CSS from "./Address.module.css";
 import BLOCKQUOTE_CSS from "./Blockquote.module.css";
 import CAPTION_CSS from "./Caption.module.css";
@@ -25,7 +25,7 @@ import SUBHEADING_CSS from "./Subheading.module.css";
 import TABLE_CSS from "./Table.module.css";
 import TITLE_CSS from "./Title.module.css";
 // Combine the `.prose` class from every block and inline component's CSS module into a single string.
-const PROSE_STYLES = getClass(PARAGRAPH_CSS.prose, HEADING_CSS.prose, SUBHEADING_CSS.prose, ADDRESS_CSS.prose, BLOCKQUOTE_CSS.prose, SECTION_CSS.prose, CODE_CSS.prose, DEFINITIONS_CSS.prose, DELETED_CSS.prose, EMPHASIS_CSS.prose, IMAGE_CSS.prose, INSERTED_CSS.prose, CAPTION_CSS.prose, LIST_CSS.prose, TITLE_CSS.prose, LINK_CSS.prose, MARK_CSS.prose, PREFORMATTED_CSS.prose, SMALL_CSS.prose, STRONG_CSS.prose, SUBSCRIPT_CSS.prose, SUPERSCRIPT_CSS.prose, TABLE_CSS.prose, DIVIDER_CSS.prose);
+const PROSE_STYLES = getClass(getModuleClass(PARAGRAPH_CSS, "prose"), getModuleClass(HEADING_CSS, "prose"), getModuleClass(SUBHEADING_CSS, "prose"), getModuleClass(ADDRESS_CSS, "prose"), getModuleClass(BLOCKQUOTE_CSS, "prose"), getModuleClass(SECTION_CSS, "prose"), getModuleClass(CODE_CSS, "prose"), getModuleClass(DEFINITIONS_CSS, "prose"), getModuleClass(DELETED_CSS, "prose"), getModuleClass(EMPHASIS_CSS, "prose"), getModuleClass(IMAGE_CSS, "prose"), getModuleClass(INSERTED_CSS, "prose"), getModuleClass(CAPTION_CSS, "prose"), getModuleClass(LIST_CSS, "prose"), getModuleClass(TITLE_CSS, "prose"), getModuleClass(LINK_CSS, "prose"), getModuleClass(MARK_CSS, "prose"), getModuleClass(PREFORMATTED_CSS, "prose"), getModuleClass(SMALL_CSS, "prose"), getModuleClass(STRONG_CSS, "prose"), getModuleClass(SUBSCRIPT_CSS, "prose"), getModuleClass(SUPERSCRIPT_CSS, "prose"), getModuleClass(TABLE_CSS, "prose"), getModuleClass(DIVIDER_CSS, "prose"));
 /**
  * A section of longform text containing lots of `<p>` or `<ul>` style elements.
  * - Applies the prose variant of every block and inline component so nested content picks up the right longform spacing and typography.

package/ui/block/Prose.tsx

@@ -9,7 +9,7 @@ import SMALL_CSS from "../inline/Small.module.css";
 import STRONG_CSS from "../inline/Strong.module.css";
 import SUBSCRIPT_CSS from "../inline/Subscript.module.css";
 import SUPERSCRIPT_CSS from "../inline/Superscript.module.css";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import ADDRESS_CSS from "./Address.module.css";
 import BLOCKQUOTE_CSS from "./Blockquote.module.css";
@@ -28,30 +28,30 @@ import TITLE_CSS from "./Title.module.css";
 
 // Combine the `.prose` class from every block and inline component's CSS module into a single string.
 const PROSE_STYLES = getClass(
-	PARAGRAPH_CSS.prose,
-	HEADING_CSS.prose,
-	SUBHEADING_CSS.prose,
-	ADDRESS_CSS.prose,
-	BLOCKQUOTE_CSS.prose,
-	SECTION_CSS.prose,
-	CODE_CSS.prose,
-	DEFINITIONS_CSS.prose,
-	DELETED_CSS.prose,
-	EMPHASIS_CSS.prose,
-	IMAGE_CSS.prose,
-	INSERTED_CSS.prose,
-	CAPTION_CSS.prose,
-	LIST_CSS.prose,
-	TITLE_CSS.prose,
-	LINK_CSS.prose,
-	MARK_CSS.prose,
-	PREFORMATTED_CSS.prose,
-	SMALL_CSS.prose,
-	STRONG_CSS.prose,
-	SUBSCRIPT_CSS.prose,
-	SUPERSCRIPT_CSS.prose,
-	TABLE_CSS.prose,
-	DIVIDER_CSS.prose,
+	getModuleClass(PARAGRAPH_CSS, "prose"),
+	getModuleClass(HEADING_CSS, "prose"),
+	getModuleClass(SUBHEADING_CSS, "prose"),
+	getModuleClass(ADDRESS_CSS, "prose"),
+	getModuleClass(BLOCKQUOTE_CSS, "prose"),
+	getModuleClass(SECTION_CSS, "prose"),
+	getModuleClass(CODE_CSS, "prose"),
+	getModuleClass(DEFINITIONS_CSS, "prose"),
+	getModuleClass(DELETED_CSS, "prose"),
+	getModuleClass(EMPHASIS_CSS, "prose"),
+	getModuleClass(IMAGE_CSS, "prose"),
+	getModuleClass(INSERTED_CSS, "prose"),
+	getModuleClass(CAPTION_CSS, "prose"),
+	getModuleClass(LIST_CSS, "prose"),
+	getModuleClass(TITLE_CSS, "prose"),
+	getModuleClass(LINK_CSS, "prose"),
+	getModuleClass(MARK_CSS, "prose"),
+	getModuleClass(PREFORMATTED_CSS, "prose"),
+	getModuleClass(SMALL_CSS, "prose"),
+	getModuleClass(STRONG_CSS, "prose"),
+	getModuleClass(SUBSCRIPT_CSS, "prose"),
+	getModuleClass(SUPERSCRIPT_CSS, "prose"),
+	getModuleClass(TABLE_CSS, "prose"),
+	getModuleClass(DIVIDER_CSS, "prose"),
 );
 
 /**

package/ui/block/Table.d.ts

@@ -2,13 +2,14 @@ import type { ReactElement } from "react";
 import { type ColorVariants } from "../style/Color.js";
 import { type SpaceVariants } from "../style/Space.js";
 import { type TypographyVariants } from "../style/Typography.js";
+import { type WidthVariants } from "../style/Width.js";
 import type { ChildProps } from "../util/props.js";
 /**
- * Props for `Table` — colour, space, and typography variants plus `children`.
+ * Props for `Table` — colour, space, typography, and width variants plus `children`.
  *
  * @see https://dhoulb.github.io/shelving/ui/block/Table/TableProps
  */
-export interface TableProps extends ColorVariants, SpaceVariants, TypographyVariants, ChildProps {
+export interface TableProps extends ColorVariants, SpaceVariants, TypographyVariants, WidthVariants, ChildProps {
 }
 /**
  * Table block — rendered as `<table>`.
@@ -16,7 +17,7 @@ export interface TableProps extends ColorVariants, SpaceVariants, TypographyVari
  * - `<th>` / `<td>` cells draw the borders (the `<table>` element itself has none); override their weight via the `--table-border` / `--table-stroke` hooks.
  *
  * @kind component
- * @param props Colour, space, and typography variants plus `children`.
+ * @param props Colour, space, typography, and width variants plus `children`.
  * @returns Rendered `<table>` element.
  * @example <Table><tbody><tr><td>Cell</td></tr></tbody></Table>
  * @see https://dhoulb.github.io/shelving/ui/block/Table/Table

package/ui/block/Table.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getColorClass } from "../style/Color.js";
 import { getSpaceClass } from "../style/Space.js";
 import { getTypographyClass } from "../style/Typography.js";
+import { getWidthClass } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import TABLE_CSS from "./Table.module.css";
 const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
@@ -11,12 +12,12 @@ const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
  * - `<th>` / `<td>` cells draw the borders (the `<table>` element itself has none); override their weight via the `--table-border` / `--table-stroke` hooks.
  *
  * @kind component
- * @param props Colour, space, and typography variants plus `children`.
+ * @param props Colour, space, typography, and width variants plus `children`.
  * @returns Rendered `<table>` element.
  * @example <Table><tbody><tr><td>Cell</td></tr></tbody></Table>
  * @see https://dhoulb.github.io/shelving/ui/block/Table/Table
  */
 export function Table({ children, ...props }) {
     return (_jsx("table", { className: getClass(TABLE_CLASS, //
-        getColorClass(props), getSpaceClass(props), getTypographyClass(props)), children: children }));
+        getColorClass(props), getSpaceClass(props), getTypographyClass(props), getWidthClass(props)), children: children }));
 }

package/ui/block/Table.md

@@ -8,6 +8,7 @@ A data table — renders a `<table>`. Compose the usual `<thead>` / `<tbody>` /
 - First and last cells in a row drop their outer inline padding so the table aligns flush with the surrounding text column.
 - Wrap a wide table in a horizontally scrollable container if it may exceed the content width on small screens.
 - Like the other block components it collapses its outer block margin when it is the first or last child.
+- Spans the full width of its container by default; set the `width` variant (`narrow` / `normal` / `wide` / `full` / `fit`) to constrain it.
 - Inside [`Prose`](/ui/Prose) a raw `<table>` picks up the same styling, so Markdown-rendered tables match component ones.
 
 ## Usage

package/ui/block/Table.module.css

@@ -11,6 +11,7 @@
 	.prose table {
 		/* Box */
 		display: table;
+		inline-size: 100%;
 		margin-inline: 0;
 		margin-block: var(--table-space, var(--space-paragraph));
 		text-indent: 0;

package/ui/block/Table.tsx

@@ -2,6 +2,7 @@ import type { ReactElement } from "react";
 import { type ColorVariants, getColorClass } from "../style/Color.js";
 import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
 import TABLE_CSS from "./Table.module.css";
@@ -9,11 +10,11 @@ import TABLE_CSS from "./Table.module.css";
 const TABLE_CLASS = getModuleClass(TABLE_CSS, "table");
 
 /**
- * Props for `Table` — colour, space, and typography variants plus `children`.
+ * Props for `Table` — colour, space, typography, and width variants plus `children`.
  *
  * @see https://dhoulb.github.io/shelving/ui/block/Table/TableProps
  */
-export interface TableProps extends ColorVariants, SpaceVariants, TypographyVariants, ChildProps {}
+export interface TableProps extends ColorVariants, SpaceVariants, TypographyVariants, WidthVariants, ChildProps {}
 
 /**
  * Table block — rendered as `<table>`.
@@ -21,7 +22,7 @@ export interface TableProps extends ColorVariants, SpaceVariants, TypographyVari
  * - `<th>` / `<td>` cells draw the borders (the `<table>` element itself has none); override their weight via the `--table-border` / `--table-stroke` hooks.
  *
  * @kind component
- * @param props Colour, space, and typography variants plus `children`.
+ * @param props Colour, space, typography, and width variants plus `children`.
  * @returns Rendered `<table>` element.
  * @example <Table><tbody><tr><td>Cell</td></tr></tbody></Table>
  * @see https://dhoulb.github.io/shelving/ui/block/Table/Table
@@ -34,6 +35,7 @@ export function Table({ children, ...props }: TableProps): ReactElement {
 				getColorClass(props),
 				getSpaceClass(props),
 				getTypographyClass(props),
+				getWidthClass(props),
 			)}
 		>
 			{children}

package/ui/dialog/Dialog.js

@@ -18,7 +18,7 @@ export const Dialog = memo(({ children, onClose, ...props }) => {
     useEffect(() => {
         ref.current?.showModal();
     }, []);
-    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: styles.dialog, onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: styles.close, children: _jsx(DialogCloseButton, { plain: true }) })] }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: getModuleClass(styles, "dialog"), onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: getModuleClass(styles, "close"), children: _jsx(DialogCloseButton, { plain: true }) })] }) }));
 });
 /** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
 function _closeOnBackdropClick({ currentTarget, target }) {

package/ui/dialog/Dialog.tsx

@@ -35,9 +35,9 @@ export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
 	return (
 		<Suspense fallback={null}>
 			{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
-			<dialog ref={ref} className={styles.dialog} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
+			<dialog ref={ref} className={getModuleClass(styles, "dialog")} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
 				{children}
-				<div className={styles.close}>
+				<div className={getModuleClass(styles, "close")}>
 					<DialogCloseButton plain />
 				</div>
 			</dialog>

package/ui/dialog/Modal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getModuleClass } from "../util/css.js";
 import styles from "./Modal.module.css";
 /**
  * Styled `<aside>` overlay container for modal content.
@@ -10,5 +11,5 @@ import styles from "./Modal.module.css";
  * @see https://dhoulb.github.io/shelving/ui/dialog/Modal/Modal
  */
 export function Modal({ children }) {
-    return _jsx("aside", { className: styles.modal, children: children });
+    return _jsx("aside", { className: getModuleClass(styles, "modal"), children: children });
 }

package/ui/dialog/Modal.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Modal.module.css";
 
@@ -19,5 +20,5 @@ export interface ModalProps extends OptionalChildProps {}
  * @see https://dhoulb.github.io/shelving/ui/dialog/Modal/Modal
  */
 export function Modal({ children }: ModalProps): ReactElement {
-	return <aside className={styles.modal}>{children}</aside>;
+	return <aside className={getModuleClass(styles, "modal")}>{children}</aside>;
 }

package/ui/docs/DocumentationPage.js

@@ -68,5 +68,5 @@ function DocumentationChildren({ elements }) {
  * @see https://dhoulb.github.io/shelving/ui/docs/DocumentationPage/DocumentationPage
  */
 export function DocumentationPage({ title, name, kind = "unknown", description, content, signatures, params, returns, throws, examples, children, ...props }) {
-    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: getDocumentationKindColor(kind), children: [_jsx(Panel, { children: _jsxs(Header, { children: [_jsx(TreeBreadcrumbs, {}), _jsx(Title, { children: _jsxs(Row, { left: true, wrap: true, children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind, size: "normal" })] }) }), _jsx(DocumentationButtons, { ...props })] }) }), signatures?.length || params?.length || returns?.length || throws?.length ? (_jsxs(Section, { children: [_jsx(DocumentationSignatures, { signatures: signatures }), params?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Parameter" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description = "", default: def }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: name }) }), _jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: def ? _jsx(Code, { size: "normal", children: def }) : "-" }), _jsx("td", { children: description })] }, `${name}-${type}-${description}`))) })] }) }) })), returns?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Return" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) })), throws?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Throws" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { size: "normal", children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) }))] })) : null, content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), examples?.length && (_jsxs(Section, { children: [_jsx(Heading, { children: "Examples" }), examples.map(({ description }) => (_jsx(Preformatted, { children: description }, description)))] })), _jsx(DocumentationChildren, { elements: children })] }) }));
+    return (_jsx(Page, { title: title ?? name, description: description, children: _jsxs(Block, { color: getDocumentationKindColor(kind), children: [_jsx(Panel, { children: _jsxs(Header, { children: [_jsx(TreeBreadcrumbs, {}), _jsx(Title, { children: _jsxs(Row, { left: true, wrap: true, children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind, size: "normal" })] }) }), _jsx(DocumentationButtons, { ...props })] }) }), signatures?.length || params?.length || returns?.length || throws?.length ? (_jsxs(Section, { children: [_jsx(DocumentationSignatures, { signatures: signatures }), params?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Parameter" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: params.map(({ name, type = DEFAULT_TYPE, description = "", default: def }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { children: name }) }), _jsx("td", { children: _jsx(Code, { children: type }) }), _jsx("td", { children: def ? _jsx(Code, { children: def }) : "-" }), _jsx("td", { children: description })] }, `${name}-${type}-${description}`))) })] }) }) })), returns?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Return" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) })), throws?.length && (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Throws" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Code, { children: type }) }), _jsx("td", { children: description })] }, `${type}-${description}`))) })] }) }) }))] })) : null, content && (_jsx(Section, { children: _jsx(Prose, { children: _jsx(Markup, { children: content }) }) })), examples?.length && (_jsxs(Section, { children: [_jsx(Heading, { children: "Examples" }), examples.map(({ description }) => (_jsx(Preformatted, { children: description }, description)))] })), _jsx(DocumentationChildren, { elements: children })] }) }));
 }

package/ui/docs/DocumentationPage.tsx

@@ -127,12 +127,12 @@ export function DocumentationPage({
 											{params.map(({ name, type = DEFAULT_TYPE, description = "", default: def }) => (
 												<tr key={`${name}-${type}-${description}`}>
 													<td>
-														<Code size="normal">{name}</Code>
+														<Code>{name}</Code>
 													</td>
 													<td>
-														<Code size="normal">{type}</Code>
+														<Code>{type}</Code>
 													</td>
-													<td>{def ? <Code size="normal">{def}</Code> : "-"}</td>
+													<td>{def ? <Code>{def}</Code> : "-"}</td>
 													<td>{description}</td>
 												</tr>
 											))}
@@ -155,7 +155,7 @@ export function DocumentationPage({
 											{returns.map(({ type = DEFAULT_TYPE, description = "" }) => (
 												<tr key={`${type}-${description}`}>
 													<td>
-														<Code size="normal">{type}</Code>
+														<Code>{type}</Code>
 													</td>
 													<td>{description}</td>
 												</tr>
@@ -179,7 +179,7 @@ export function DocumentationPage({
 											{throws.map(({ type = DEFAULT_TYPE, description = "" }) => (
 												<tr key={`${type}-${description}`}>
 													<td>
-														<Code size="normal">{type}</Code>
+														<Code>{type}</Code>
 													</td>
 													<td>{description}</td>
 												</tr>

package/ui/form/ButtonInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { Clickable } from "./Clickable.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
@@ -16,5 +16,5 @@ import INPUT_CSS from "./Input.module.css";
  */
 export function ButtonInput({ title, placeholder, children = title, ...props }) {
     const hasChildren = notNullish(children);
-    return (_jsx(Clickable, { ...props, className: getClass(getInputClass(props), INPUT_CSS.button, getFlexClass(props), hasChildren && INPUT_CSS.placeholder), children: hasChildren ? children : placeholder }));
+    return (_jsx(Clickable, { ...props, className: getClass(getInputClass(props), getModuleClass(INPUT_CSS, "button"), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: hasChildren ? children : placeholder }));
 }

package/ui/form/ButtonInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { Clickable, type ClickableProps } from "./Clickable.js";
 import { getInputClass, type InputProps, type InputVariants } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
@@ -27,7 +27,12 @@ export function ButtonInput({ title, placeholder, children = title, ...props }:
 	return (
 		<Clickable
 			{...props}
-			className={getClass(getInputClass(props), INPUT_CSS.button, getFlexClass(props), hasChildren && INPUT_CSS.placeholder)}
+			className={getClass(
+				getInputClass(props),
+				getModuleClass(INPUT_CSS, "button"),
+				getFlexClass(props),
+				hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
+			)}
 		>
 			{hasChildren ? children : placeholder}
 		</Clickable>

package/ui/form/CheckboxInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -15,5 +15,5 @@ import INPUT_CSS from "./Input.module.css";
  */
 export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children, ...variants }) {
     const hasChildren = notNullish(children);
-    return (_jsxs("label", { className: getClass(getInputClass(variants), INPUT_CSS.label, getFlexClass(variants), hasChildren && INPUT_CSS.placeholder), "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: INPUT_CSS.radio }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
+    return (_jsxs("label", { className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "label"), getFlexClass(variants), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: getModuleClass(INPUT_CSS, "radio") }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
 }

package/ui/form/CheckboxInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
@@ -37,7 +37,12 @@ export function CheckboxInput({
 	const hasChildren = notNullish(children);
 	return (
 		<label
-			className={getClass(getInputClass(variants), INPUT_CSS.label, getFlexClass(variants), hasChildren && INPUT_CSS.placeholder)}
+			className={getClass(
+				getInputClass(variants),
+				getModuleClass(INPUT_CSS, "label"),
+				getFlexClass(variants),
+				hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
+			)}
 			aria-invalid={!!message}
 		>
 			<input
@@ -48,7 +53,7 @@ export function CheckboxInput({
 				required={required}
 				disabled={disabled}
 				title={message}
-				className={INPUT_CSS.radio}
+				className={getModuleClass(INPUT_CSS, "radio")}
 			/>
 			<span>{hasChildren ? children : placeholder}</span>
 		</label>

package/ui/form/DateInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getDateString, getDateTimeString, getTimeString } from "../../util/date.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /** Convert a `PossibleDate` to a string for a specific date `<input type="etc">` type. */
@@ -24,5 +24,5 @@ required = false, disabled = false, message = "", value, onValue, min, max, inpu
         onValue?.(e.currentTarget.value ?? undefined);
     };
     const dateToString = _DATE_TO_STRING[input];
-    return (_jsx("input", { name: name, type: input, min: dateToString(min), max: dateToString(max), disabled: disabled, required: required, defaultValue: dateToString(value), placeholder: placeholder || " ", className: getClass(getInputClass(variants), INPUT_CSS.text), onChange: onChange, onInput: onChange, title: message, "aria-invalid": !!message, step: step }));
+    return (_jsx("input", { name: name, type: input, min: dateToString(min), max: dateToString(max), disabled: disabled, required: required, defaultValue: dateToString(value), placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text")), onChange: onChange, onInput: onChange, title: message, "aria-invalid": !!message, step: step }));
 }

package/ui/form/DateInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import type { DateInputType } from "../../schema/DateSchema.js";
 import { getDateString, getDateTimeString, getTimeString, type PossibleDate } from "../../util/date.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
@@ -64,7 +64,7 @@ export function DateInput({
 			required={required}
 			defaultValue={dateToString(value)}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), INPUT_CSS.text)}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
 			onChange={onChange}
 			onInput={onChange}
 			title={message}

package/ui/form/Field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Message } from "../notice/Message.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Field.module.css";
 /**
  * A `<Field>` wraps around a form control/input, to shows a small `<label>` above it.
@@ -9,5 +9,5 @@ import styles from "./Field.module.css";
  * @see https://dhoulb.github.io/shelving/ui/form/Field/Field
  */
 export function Field({ title, description, message, half, children }) {
-    return (_jsxs("label", { className: getClass(styles.field, half && styles.half), children: [(title || description) && (_jsxs("div", { children: [title ? _jsx("div", { className: styles.title, children: title }) : null, description && _jsx("div", { className: styles.description, children: description })] })), children, message && (_jsx(Message, { status: "error", right: true, children: message }))] }));
+    return (_jsxs("label", { className: getClass(getModuleClass(styles, "field"), half && getModuleClass(styles, "half")), children: [(title || description) && (_jsxs("div", { children: [title ? _jsx("div", { className: getModuleClass(styles, "title"), children: title }) : null, description && _jsx("div", { className: getModuleClass(styles, "description"), children: description })] })), children, message && (_jsx(Message, { status: "error", right: true, children: message }))] }));
 }

package/ui/form/Field.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import { Message } from "../notice/Message.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
 import styles from "./Field.module.css";
 
@@ -27,11 +27,11 @@ export interface FieldProps extends ChildProps {
 export function Field({ title, description, message, half, children }: FieldProps): ReactElement {
 	return (
 		// biome-ignore lint/a11y/noLabelWithoutControl: Generally `children` will contain a field.
-		<label className={getClass(styles.field, half && styles.half)}>
+		<label className={getClass(getModuleClass(styles, "field"), half && getModuleClass(styles, "half"))}>
 			{(title || description) && (
 				<div>
-					{title ? <div className={styles.title}>{title}</div> : null}
-					{description && <div className={styles.description}>{description}</div>}
+					{title ? <div className={getModuleClass(styles, "title")}>{title}</div> : null}
+					{description && <div className={getModuleClass(styles, "description")}>{description}</div>}
 				</div>
 			)}
 			{children}

package/ui/form/Form.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { isAsync } from "../../util/async.js";
+import { getModuleClass } from "../util/css.js";
 import { notifySuccess, notifyThrown } from "../util/notice.js";
 import styles from "./Form.module.css";
 import { FormContext } from "./FormContext.js";
@@ -23,7 +24,7 @@ export function Form({ schema, data: initialData, onSubmit, submit, messages, ch
             // Close the parent dialog on successful submit.
             if (result)
                 dialog?.close();
-        }, className: styles.form, noValidate: true, children: _jsx("fieldset", { className: styles.fieldset, disabled: busy, children: _jsx(FormContext, { value: store, children: children }) }) }, store.key));
+        }, className: getModuleClass(styles, "form"), noValidate: true, children: _jsx("fieldset", { className: getModuleClass(styles, "fieldset"), disabled: busy, children: _jsx(FormContext, { value: store, children: children }) }) }, store.key));
 }
 /**
  * Run a form submit callback and publish success/error notices based on its return or thrown value.

package/ui/form/Form.tsx

@@ -6,6 +6,7 @@ import { isAsync } from "../../util/async.js";
 import type { Data, PartialData } from "../../util/data.js";
 import type { ImmutableDictionary } from "../../util/dictionary.js";
 import type { Arguments } from "../../util/function.js";
+import { getModuleClass } from "../util/css.js";
 import { type NoticeCallback, notifySuccess, notifyThrown } from "../util/notice.js";
 import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Form.module.css";
@@ -91,10 +92,10 @@ export function Form({
 				// Close the parent dialog on successful submit.
 				if (result) dialog?.close();
 			}}
-			className={styles.form}
+			className={getModuleClass(styles, "form")}
 			noValidate={true}
 		>
-			<fieldset className={styles.fieldset} disabled={busy}>
+			<fieldset className={getModuleClass(styles, "fieldset")} disabled={busy}>
 				<FormContext value={store}>{children}</FormContext>
 			</fieldset>
 		</form>

package/ui/form/Input.d.ts

@@ -15,7 +15,7 @@ export interface InputVariants extends WidthVariants {
  *
  * @param props The input's styling variants (width, …).
  * @returns The merged base input `className` string.
- * @example getClass(getInputClass(props), INPUT_CSS.text) // a text input that also honours width variants
+ * @example getClass(getInputClass(props), getModuleClass(INPUT_CSS, "text")) // a text input that also honours width variants
  * @see https://dhoulb.github.io/shelving/ui/form/Input/getInputClass
  */
 export declare function getInputClass(props: InputVariants): string;

package/ui/form/Input.js

@@ -2,18 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { LOADING } from "../misc/Loading.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getWidthClass } from "../style/Width.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import INPUT_CSS from "./Input.module.css";
 /**
  * Build the shared base `className` for a form input from its styling variants — the base input class plus any `InputVariants`.
  *
  * @param props The input's styling variants (width, …).
  * @returns The merged base input `className` string.
- * @example getClass(getInputClass(props), INPUT_CSS.text) // a text input that also honours width variants
+ * @example getClass(getInputClass(props), getModuleClass(INPUT_CSS, "text")) // a text input that also honours width variants
  * @see https://dhoulb.github.io/shelving/ui/form/Input/getInputClass
  */
 export function getInputClass(props) {
-    return getClass(INPUT_CSS.input, getWidthClass(props));
+    return getClass(getModuleClass(INPUT_CSS, "input"), getWidthClass(props));
 }
 /** Input that is loading. */
 export const LOADING_INPUT = _jsx("div", { className: getClass(getInputClass({}), getFlexClass({})), children: LOADING });
@@ -22,5 +22,5 @@ export const LOADING_INPUT = _jsx("div", { className: getClass(getInputClass({})
  * - This is so you can put an icon before or after an input.
  */
 export function InputWrapper({ children }) {
-    return _jsx("div", { className: getClass(getInputClass({}), INPUT_CSS.wrapper), children: children });
+    return _jsx("div", { className: getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper")), children: children });
 }

package/ui/form/Input.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from "react";
 import { LOADING } from "../misc/Loading.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getWidthClass, type WidthVariants } from "../style/Width.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps } from "../util/props.js";
 import INPUT_CSS from "./Input.module.css";
 
@@ -20,11 +20,11 @@ export interface InputVariants extends WidthVariants {}
  *
  * @param props The input's styling variants (width, …).
  * @returns The merged base input `className` string.
- * @example getClass(getInputClass(props), INPUT_CSS.text) // a text input that also honours width variants
+ * @example getClass(getInputClass(props), getModuleClass(INPUT_CSS, "text")) // a text input that also honours width variants
  * @see https://dhoulb.github.io/shelving/ui/form/Input/getInputClass
  */
 export function getInputClass(props: InputVariants): string {
-	return getClass(INPUT_CSS.input, getWidthClass(props));
+	return getClass(getModuleClass(INPUT_CSS, "input"), getWidthClass(props));
 }
 
 /**
@@ -63,5 +63,5 @@ export const LOADING_INPUT = <div className={getClass(getInputClass({}), getFlex
  * - This is so you can put an icon before or after an input.
  */
 export function InputWrapper({ children }: ChildProps): ReactElement {
-	return <div className={getClass(getInputClass({}), INPUT_CSS.wrapper)}>{children}</div>;
+	return <div className={getClass(getInputClass({}), getModuleClass(INPUT_CSS, "wrapper"))}>{children}</div>;
 }

package/ui/form/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatNumber } from "../../util/format.js";
 import { getNumber } from "../../util/number.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -25,5 +25,5 @@ formatter = formatNumber, ...variants }) {
         const num = getNumber(currentTarget.value);
         currentTarget.value = num !== undefined ? formatter(num) : "";
     };
-    return (_jsx("input", { name: name, type: "text", inputMode: "decimal", defaultValue: value !== undefined ? formatter(value) : "", required: required, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), INPUT_CSS.text), onChange: onChange, onInput: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
+    return (_jsx("input", { name: name, type: "text", inputMode: "decimal", defaultValue: value !== undefined ? formatter(value) : "", required: required, disabled: disabled, placeholder: placeholder || " ", className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text")), onChange: onChange, onInput: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
 }

package/ui/form/NumberInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import { formatNumber } from "../../util/format.js";
 import { getNumber } from "../../util/number.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
@@ -60,7 +60,7 @@ export function NumberInput({
 			required={required}
 			disabled={disabled}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), INPUT_CSS.text)}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
 			onChange={onChange}
 			onInput={onChange}
 			onBlur={onBlur}

package/ui/form/OutputInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notNullish } from "../../util/index.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -14,5 +14,5 @@ import INPUT_CSS from "./Input.module.css";
  */
 export function OutputInput({ title, placeholder, children = title, ...props }) {
     const hasChildren = notNullish(children);
-    return (_jsx("output", { ...props, className: getClass(getInputClass(props), getFlexClass(props), hasChildren && INPUT_CSS.placeholder), children: hasChildren ? children : placeholder }));
+    return (_jsx("output", { ...props, className: getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: hasChildren ? children : placeholder }));
 }

package/ui/form/OutputInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/index.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/index.js";
 import { getInputClass, type InputProps, type InputVariants } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
@@ -24,7 +24,10 @@ export interface OutputInputProps extends InputProps, OptionalChildProps, FlexVa
 export function OutputInput({ title, placeholder, children = title, ...props }: OutputInputProps): ReactElement {
 	const hasChildren = notNullish(children);
 	return (
-		<output {...props} className={getClass(getInputClass(props), getFlexClass(props), hasChildren && INPUT_CSS.placeholder)}>
+		<output
+			{...props}
+			className={getClass(getInputClass(props), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder"))}
+		>
 			{hasChildren ? children : placeholder}
 		</output>
 	);

package/ui/form/Popover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isTruthy } from "../../util/boolean.js";
+import { getModuleClass } from "../util/css.js";
 import { eventPreventDefault } from "../util/event.js";
 import { eventLoopFocus } from "../util/focus.js";
 import styles from "./Popover.module.css";
@@ -17,10 +18,10 @@ import styles from "./Popover.module.css";
  */
 export function Popover({ children: [trigger, ...popover], //
 onClose, open = popover.flat().some(isTruthy), }) {
-    return (_jsxs("div", { className: styles.wrap, onBlur: e => {
+    return (_jsxs("div", { className: getModuleClass(styles, "wrap"), onBlur: e => {
             if (e.relatedTarget)
                 eventLoopFocus(e);
             else
                 onClose?.();
-        }, onKeyDown: e => e.key === "Escape" && onClose?.(), children: [trigger, open ? (_jsx("section", { className: styles.panel, onMouseDown: eventPreventDefault, children: popover })) : null] }));
+        }, onKeyDown: e => e.key === "Escape" && onClose?.(), children: [trigger, open ? (_jsx("section", { className: getModuleClass(styles, "panel"), onMouseDown: eventPreventDefault, children: popover })) : null] }));
 }

package/ui/form/Popover.tsx

@@ -5,6 +5,7 @@ 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 { eventPreventDefault } from "../util/event.js";
 import { eventLoopFocus } from "../util/focus.js";
 import styles from "./Popover.module.css";
@@ -59,7 +60,7 @@ export function Popover({
 }: PopoverProps): ReactElement {
 	return (
 		<div
-			className={styles.wrap}
+			className={getModuleClass(styles, "wrap")}
 			onBlur={e => {
 				if (e.relatedTarget) eventLoopFocus(e);
 				else onClose?.();
@@ -68,7 +69,7 @@ export function Popover({
 		>
 			{trigger}
 			{open ? (
-				<section className={styles.panel} onMouseDown={eventPreventDefault}>
+				<section className={getModuleClass(styles, "panel")} onMouseDown={eventPreventDefault}>
 					{popover}
 				</section>
 			) : null}

package/ui/form/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 /**
  * Show progress as a single continuous horizontal bar, filled to `value` clamped between `0` and `1`.
@@ -12,7 +12,7 @@ import styles from "./Progress.module.css";
 export function Progress({ value, success, warning, danger }) {
     const clamped = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
     const progressStyle = { ["--progress-value"]: `${clamped * 100}%` };
-    return (_jsx("div", { className: getClass(styles.track, success && styles.success, warning && styles.warning, danger && styles.danger), style: progressStyle, children: _jsx("span", { className: styles.fill }) }));
+    return (_jsx("div", { className: getClass(getModuleClass(styles, "track"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), style: progressStyle, children: _jsx("span", { className: getModuleClass(styles, "fill") }) }));
 }
 /**
  * Show step progress as a horizontal bar of `total` segments, of which `current + 1` are filled.
@@ -26,5 +26,5 @@ export function SegmentedProgress({ total, current, success, warning, danger })
     if (total <= 0)
         return null;
     const progressStyle = { ["--progress-steps"]: total };
-    return (_jsx("div", { className: getClass(styles.segmented, success && styles.success, warning && styles.warning, danger && styles.danger), style: progressStyle, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: getClass(styles.item, i <= current && styles.active) }, i.toString()))) }));
+    return (_jsx("div", { className: getClass(getModuleClass(styles, "segmented"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), style: progressStyle, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: getClass(getModuleClass(styles, "item"), i <= current && getModuleClass(styles, "active")) }, i.toString()))) }));
 }

package/ui/form/Progress.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactElement } from "react";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 
 /**
@@ -28,10 +28,15 @@ export function Progress({ value, success, warning, danger }: ProgressProps): Re
 
 	return (
 		<div
-			className={getClass(styles.track, success && styles.success, warning && styles.warning, danger && styles.danger)}
+			className={getClass(
+				getModuleClass(styles, "track"),
+				success && getModuleClass(styles, "success"),
+				warning && getModuleClass(styles, "warning"),
+				danger && getModuleClass(styles, "danger"),
+			)}
 			style={progressStyle}
 		>
-			<span className={styles.fill} />
+			<span className={getModuleClass(styles, "fill")} />
 		</div>
 	);
 }
@@ -63,11 +68,16 @@ export function SegmentedProgress({ total, current, success, warning, danger }:
 
 	return (
 		<div
-			className={getClass(styles.segmented, success && styles.success, warning && styles.warning, danger && styles.danger)}
+			className={getClass(
+				getModuleClass(styles, "segmented"),
+				success && getModuleClass(styles, "success"),
+				warning && getModuleClass(styles, "warning"),
+				danger && getModuleClass(styles, "danger"),
+			)}
 			style={progressStyle}
 		>
 			{Array.from({ length: total }, (_, i) => (
-				<span key={i.toString()} className={getClass(styles.item, i <= current && styles.active)} />
+				<span key={i.toString()} className={getClass(getModuleClass(styles, "item"), i <= current && getModuleClass(styles, "active"))} />
 			))}
 		</div>
 	);

package/ui/form/RadioInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
 import { getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -15,5 +15,5 @@ import INPUT_CSS from "./Input.module.css";
  */
 export function RadioInput({ name, title, placeholder = title || "Choose", required = false, disabled = false, message = "", value = false, onValue, children, ...props }) {
     const hasChildren = notNullish(children);
-    return (_jsxs("label", { className: getClass(getInputClass(props), INPUT_CSS.label, getFlexClass(props), hasChildren && INPUT_CSS.placeholder), children: [_jsx("input", { className: INPUT_CSS.radio, type: "radio", name: name, defaultChecked: value, onChange: () => onValue(true), disabled: disabled, required: required, "aria-invalid": !!message }), hasChildren ? children : placeholder] }));
+    return (_jsxs("label", { className: getClass(getInputClass(props), getModuleClass(INPUT_CSS, "label"), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: [_jsx("input", { className: getModuleClass(INPUT_CSS, "radio"), type: "radio", name: name, defaultChecked: value, onChange: () => onValue(true), disabled: disabled, required: required, "aria-invalid": !!message }), hasChildren ? children : placeholder] }));
 }

package/ui/form/RadioInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
@@ -36,9 +36,16 @@ export function RadioInput({
 }: RadioInputProps): ReactElement {
 	const hasChildren = notNullish(children);
 	return (
-		<label className={getClass(getInputClass(props), INPUT_CSS.label, getFlexClass(props), hasChildren && INPUT_CSS.placeholder)}>
+		<label
+			className={getClass(
+				getInputClass(props),
+				getModuleClass(INPUT_CSS, "label"),
+				getFlexClass(props),
+				hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
+			)}
+		>
 			<input
-				className={INPUT_CSS.radio}
+				className={getModuleClass(INPUT_CSS, "radio")}
 				type="radio"
 				name={name}
 				defaultChecked={value}

package/ui/form/SelectInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getProps } from "../../util/object.js";
-import { getClass } from "../util/css.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), INPUT_CSS.select), title: message, "aria-invalid": !!message, disabled: disabled, required: required, children: [!required || !value ? (_jsx("option", { value: "", className: INPUT_CSS.empty, children: placeholder })) : null, getProps(options).map(([k, t]) => (_jsx("option", { value: k, className: INPUT_CSS.value, children: t }, k)))] }));
+    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)))] }));
 }

package/ui/form/SelectInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { ChoiceOptions } from "../../schema/ChoiceSchema.js";
 import { getProps } from "../../util/object.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
@@ -41,19 +41,19 @@ export function SelectInput({
 			name={name}
 			defaultValue={value}
 			onChange={e => onValue(e.currentTarget.value || undefined)}
-			className={getClass(getInputClass(variants), INPUT_CSS.select)}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "select"))}
 			title={message}
 			aria-invalid={!!message}
 			disabled={disabled}
 			required={required}
 		>
 			{!required || !value ? (
-				<option value="" className={INPUT_CSS.empty}>
+				<option value="" className={getModuleClass(INPUT_CSS, "empty")}>
 					{placeholder}
 				</option>
 			) : null}
 			{getProps(options).map(([k, t]) => (
-				<option key={k} value={k} className={INPUT_CSS.value}>
+				<option key={k} value={k} className={getModuleClass(INPUT_CSS, "value")}>
 					{t}
 				</option>
 			))}

package/ui/form/TextInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PASSTHROUGH } from "../../util/function.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
@@ -23,12 +23,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), INPUT_CSS.text, 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")), 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), 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")), 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/form/TextInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
 import { PASSTHROUGH } from "../../util/function.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
@@ -69,7 +69,7 @@ export function TextInput({
 				required={required && min > 0}
 				disabled={disabled}
 				placeholder={placeholder || " "}
-				className={getClass(getInputClass(variants), INPUT_CSS.text, INPUT_CSS.multiline)}
+				className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"), getModuleClass(INPUT_CSS, "multiline"))}
 				onInput={onChange}
 				onChange={onChange}
 				onBlur={onBlur}
@@ -93,7 +93,7 @@ export function TextInput({
 			required={required && min > 0}
 			disabled={disabled}
 			placeholder={placeholder || " "}
-			className={getClass(getInputClass(variants), INPUT_CSS.text)}
+			className={getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "text"))}
 			onInput={onChange}
 			onChange={onChange}
 			onBlur={onBlur}

package/ui/layout/CenteredLayout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { requireMetaURL } from "../misc/MetaContext.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
 import { LAYOUT_CLASS } from "./Layout.js";
 /**
@@ -16,5 +16,5 @@ import { LAYOUT_CLASS } from "./Layout.js";
  */
 export function CenteredLayout({ children, fullWidth = false }) {
     const { path } = requireMetaURL();
-    return (_jsx("main", { className: getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS), children: _jsx("div", { className: CENTERED_LAYOUT_CSS.mainInner, style: fullWidth ? { maxWidth: "none" } : undefined, children: children }) }, path));
+    return (_jsx("main", { className: getClass(getModuleClass(CENTERED_LAYOUT_CSS, "main"), LAYOUT_CLASS), children: _jsx("div", { className: getModuleClass(CENTERED_LAYOUT_CSS, "mainInner"), style: fullWidth ? { maxWidth: "none" } : undefined, children: children }) }, path));
 }

package/ui/layout/CenteredLayout.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { requireMetaURL } from "../misc/MetaContext.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
 import { LAYOUT_CLASS } from "./Layout.js";
@@ -28,8 +28,8 @@ export interface CenteredLayoutProps extends OptionalChildProps {
 export function CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement {
 	const { path } = requireMetaURL();
 	return (
-		<main key={path} className={getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS)}>
-			<div className={CENTERED_LAYOUT_CSS.mainInner} style={fullWidth ? { maxWidth: "none" } : undefined}>
+		<main key={path} className={getClass(getModuleClass(CENTERED_LAYOUT_CSS, "main"), LAYOUT_CLASS)}>
+			<div className={getModuleClass(CENTERED_LAYOUT_CSS, "mainInner")} style={fullWidth ? { maxWidth: "none" } : undefined}>
 				{children}
 			</div>
 		</main>

package/ui/layout/SidebarLayout.js

@@ -3,7 +3,7 @@ import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 import { Button } from "../form/Button.js";
 import { requireMetaURL } from "../misc/MetaContext.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import { LAYOUT_CLASS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 /**
@@ -30,8 +30,8 @@ export function SidebarLayout({ sidebar, children, right = false }) {
         if (path)
             setOpen(false);
     }, [path]);
-    const sidebarEl = (_jsx("nav", { className: getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open), children: sidebar }, "sidebar"));
-    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.toggle, children: _jsx(Button, { title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, path));
-    const overlayEl = open && (_jsx("button", { type: "button", className: SIDEBAR_LAYOUT_CSS.overlay, "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
-    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CLASS), children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] }));
+    const sidebarEl = (_jsx("nav", { className: getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "sidebar"), open && getModuleClass(SIDEBAR_LAYOUT_CSS, "open")), children: sidebar }, "sidebar"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CLASS, getModuleClass(SIDEBAR_LAYOUT_CSS, "content")), children: [_jsx("div", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "toggle"), children: _jsx(Button, { title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: getModuleClass(SIDEBAR_LAYOUT_CSS, "contentInner"), children: children })] }, path));
+    const overlayEl = open && (_jsx("button", { type: "button", className: getModuleClass(SIDEBAR_LAYOUT_CSS, "overlay"), "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
+    return (_jsx("main", { className: getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "main"), LAYOUT_CLASS), children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] }));
 }

package/ui/layout/SidebarLayout.tsx

@@ -2,7 +2,7 @@ import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { type ReactElement, type ReactNode, useEffect, useState } from "react";
 import { Button } from "../form/Button.js";
 import { requireMetaURL } from "../misc/MetaContext.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { LAYOUT_CLASS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
@@ -45,25 +45,34 @@ export function SidebarLayout({ sidebar, children, right = false }: SidebarLayou
 	}, [path]);
 
 	const sidebarEl = (
-		<nav key="sidebar" className={getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open)}>
+		<nav
+			key="sidebar"
+			className={getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "sidebar"), open && getModuleClass(SIDEBAR_LAYOUT_CSS, "open"))}
+		>
 			{sidebar}
 		</nav>
 	);
 	const contentEl = (
-		<div key={path} className={getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content)}>
-			<div className={SIDEBAR_LAYOUT_CSS.toggle}>
+		<div key={path} className={getClass(LAYOUT_CLASS, getModuleClass(SIDEBAR_LAYOUT_CSS, "content"))}>
+			<div className={getModuleClass(SIDEBAR_LAYOUT_CSS, "toggle")}>
 				<Button title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
 					{open ? <XMarkIcon /> : <Bars3Icon />}
 				</Button>
 			</div>
-			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
+			<div className={getModuleClass(SIDEBAR_LAYOUT_CSS, "contentInner")}>{children}</div>
 		</div>
 	);
 	const overlayEl = open && (
-		<button key="overlay" type="button" className={SIDEBAR_LAYOUT_CSS.overlay} aria-label="Close menu" onClick={() => setOpen(false)} />
+		<button
+			key="overlay"
+			type="button"
+			className={getModuleClass(SIDEBAR_LAYOUT_CSS, "overlay")}
+			aria-label="Close menu"
+			onClick={() => setOpen(false)}
+		/>
 	);
 	return (
-		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CLASS)}>
+		<main className={getClass(getModuleClass(SIDEBAR_LAYOUT_CSS, "main"), LAYOUT_CLASS)}>
 			{right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl]}
 		</main>
 	);

package/ui/misc/Loading.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getModuleClass } from "../util/css.js";
 import styles from "./Loading.module.css";
 /**
  * Animated spinner SVG used as a loading indicator.
@@ -11,7 +12,7 @@ import styles from "./Loading.module.css";
  * @see https://dhoulb.github.io/shelving/ui/misc/Loading/Loading
  */
 export function Loading() {
-    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: styles.spinner, "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: styles.track, 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: styles.indicator, 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: getModuleClass(styles, "spinner"), "data-slot": "icon", children: [_jsx("title", { children: "Loading..." }), _jsx("circle", { className: getModuleClass(styles, "track"), 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: getModuleClass(styles, "indicator"), cx: "12", cy: "12", r: "9", pathLength: "100" })] })] }));
 }
 /**
  * Shared `<Loading>` element with a stable `key`, ready to drop into `Suspense` fallbacks and lists.

package/ui/misc/Loading.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { getModuleClass } from "../util/css.js";
 import styles from "./Loading.module.css";
 
 declare const _componentProps: unique symbol;
@@ -24,9 +25,15 @@ export interface LoadingProps {
  */
 export function Loading(): ReactElement {
 	return (
-		<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className={styles.spinner} data-slot="icon">
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			className={getModuleClass(styles, "spinner")}
+			data-slot="icon"
+		>
 			<title>Loading...</title>
-			<circle className={styles.track} cx="12" cy="12" r="9" pathLength="100" />
+			<circle className={getModuleClass(styles, "track")} cx="12" cy="12" r="9" pathLength="100" />
 			<g>
 				<animateTransform
 					attributeName="transform"
@@ -37,7 +44,7 @@ export function Loading(): ReactElement {
 					dur="0.5s"
 					repeatCount="indefinite"
 				/>
-				<circle className={styles.indicator} cx="12" cy="12" r="9" pathLength="100" />
+				<circle className={getModuleClass(styles, "indicator")} cx="12" cy="12" r="9" pathLength="100" />
 			</g>
 		</svg>
 	);

package/ui/notice/Message.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getParagraphClass } from "../block/Paragraph.js";
 import { LOADING } from "../misc/Loading.js";
 import { getStatusClass } from "../style/Status.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import MESSAGE_CSS from "./Message.module.css";
-const MESSAGE_CLASS = getClass(MESSAGE_CSS.message);
+const MESSAGE_CLASS = getModuleClass(MESSAGE_CSS, "message");
 /**
  * Status-coloured paragraph used for inline feedback messages.
  *

package/ui/notice/Message.tsx

@@ -2,10 +2,10 @@ import { getParagraphClass, type ParagraphProps } from "../block/Paragraph.js";
 import { LOADING } from "../misc/Loading.js";
 import type { ColorVariants } from "../style/Color.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
-import { getClass } from "../util/css.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import MESSAGE_CSS from "./Message.module.css";
 
-const MESSAGE_CLASS = getClass(MESSAGE_CSS.message);
+const MESSAGE_CLASS = getModuleClass(MESSAGE_CSS, "message");
 
 /**
  * Props for `<Message>` — paragraph props plus colour and status styling variants.