shelving 1.282.2 → 1.284.0

package/ui/block/Subheading.js

@@ -10,8 +10,8 @@ const SUBHEADING_CLASS = getModuleClass(SUBHEADING_CSS, "subheading");
  * @kind component
  * @see https://shelving.cc/ui/Subheading
  */
-export function Subheading({ level = "3", children, ...props }) {
+export function Subheading({ level = "3", children, className, ...props }) {
     const Element = `h${level}`;
     return (_jsx(Element, { className: getClass(SUBHEADING_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Subheading.tsx

@@ -20,13 +20,14 @@ export type SubheadingProps = HeadingProps;
  * @kind component
  * @see https://shelving.cc/ui/Subheading
  */
-export function Subheading({ level = "3", children, ...props }: SubheadingProps): ReactElement {
+export function Subheading({ level = "3", children, className, ...props }: SubheadingProps): ReactElement {
 	const Element: `h${typeof level}` = `h${level}`;
 	return (
 		<Element
 			className={getClass(
 				SUBHEADING_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Title.d.ts

@@ -13,4 +13,4 @@ export type TitleProps = HeadingProps;
  * @kind component
  * @see https://shelving.cc/ui/Title
  */
-export declare function Title({ level, children, ...props }: TitleProps): ReactElement;
+export declare function Title({ level, children, className, ...props }: TitleProps): ReactElement;

package/ui/block/Title.js

@@ -10,8 +10,8 @@ const TITLE_CLASS = getModuleClass(TITLE_CSS, "title");
  * @kind component
  * @see https://shelving.cc/ui/Title
  */
-export function Title({ level = "1", children, ...props }) {
+export function Title({ level = "1", children, className, ...props }) {
     const Element = `h${level}`;
     return (_jsx(Element, { className: getClass(TITLE_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Title.tsx

@@ -20,13 +20,14 @@ export type TitleProps = HeadingProps;
  * @kind component
  * @see https://shelving.cc/ui/Title
  */
-export function Title({ level = "1", children, ...props }: TitleProps): ReactElement {
+export function Title({ level = "1", children, className, ...props }: TitleProps): ReactElement {
 	const Element: `h${typeof level}` = `h${level}`;
 	return (
 		<Element
 			className={getClass(
 				TITLE_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/block/Video.d.ts

@@ -1,13 +1,13 @@
 import { type ReactElement } from "react";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Video` — space and width variants plus optional `children`.
  *
  * @see https://shelving.cc/ui/VideoProps
  */
-export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {
+export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps, ClassProps {
 }
 /**
  * Video container element.
@@ -18,4 +18,4 @@ export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildP
  * @example <Video><video src="/clip.mp4" /></Video>
  * @see https://shelving.cc/ui/Video
  */
-export declare function Video({ children, ...props }: VideoProps): ReactElement;
+export declare function Video({ children, className, ...props }: VideoProps): ReactElement;

package/ui/block/Video.js

@@ -13,8 +13,8 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
  * @example <Video><video src="/clip.mp4" /></Video>
  * @see https://shelving.cc/ui/Video
  */
-export function Video({ children, ...props }) {
+export function Video({ children, className, ...props }) {
     const ref = useRef(null);
     return (_jsx("figure", { ref: ref, className: getClass(VIDEO_CLASS, //
-        getBlockClass(props)), children: children }));
+        getBlockClass(props), className), children: children }));
 }

package/ui/block/Video.tsx

@@ -3,7 +3,7 @@ import { getBlockClass } from "../style/Block.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import VIDEO_CSS from "./Video.module.css";
 
 const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
@@ -13,7 +13,7 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
  *
  * @see https://shelving.cc/ui/VideoProps
  */
-export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {}
+export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps, ClassProps {}
 
 /**
  * Video container element.
@@ -24,7 +24,7 @@ export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildP
  * @example <Video><video src="/clip.mp4" /></Video>
  * @see https://shelving.cc/ui/Video
  */
-export function Video({ children, ...props }: VideoProps): ReactElement {
+export function Video({ children, className, ...props }: VideoProps): ReactElement {
 	const ref = useRef<HTMLElement | null>(null);
 
 	return (
@@ -33,6 +33,7 @@ export function Video({ children, ...props }: VideoProps): ReactElement {
 			className={getClass(
 				VIDEO_CLASS, //
 				getBlockClass(props),
+				className,
 			)}
 		>
 			{children}

package/ui/button/Button.d.ts

@@ -2,6 +2,7 @@ import type { ReactElement } from "react";
 import { type FlexVariants } from "../style/Flex.js";
 import { type StatusVariants } from "../style/Status.js";
 import { type TypographyVariants } from "../style/Typography.js";
+import type { ClassProps } from "../util/props.js";
 import { type ClickableProps } from "./Clickable.js";
 /**
  * Styling variants for a `Button`, combining flex, color, status, and typography options with button-specific toggles.
@@ -33,7 +34,7 @@ export declare function getButtonClass(variants: ButtonVariants): string;
  *
  * @see https://shelving.cc/ui/ButtonProps
  */
-export interface ButtonProps extends ButtonVariants, ClickableProps {
+export interface ButtonProps extends ButtonVariants, ClickableProps, ClassProps {
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
@@ -43,4 +44,4 @@ export interface ButtonProps extends ButtonVariants, ClickableProps {
  * @kind component
  * @see https://shelving.cc/ui/Button
  */
-export declare function Button(props: ButtonProps): ReactElement;
+export declare function Button({ className, ...props }: ButtonProps): ReactElement;

package/ui/button/Button.js

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

package/ui/button/Button.md

@@ -8,6 +8,7 @@ A clickable styled as a solid button. Renders an `<a href="">` when given `href`
 - `strong` marks the default action in a form — a filled background instead of an outline. `plain` and `outline` drop the background until hover/focus.
 - `color=` / `status=` move the tint anchor, so the background, border and label re-derive from the same ladder; `small` tightens the padding.
 - `getButtonClass(variants)` returns the same `className` the component composes — use it to style a non-`<button>` element as a button when `Button` itself doesn't fit.
+- `className` attaches an app class to one button, merged after the computed classes so an app stylesheet wins — see `ClassProps`.
 
 ## Usage
 
@@ -33,6 +34,15 @@ import { Row } from "shelving/ui";
 </Row>
 ```
 
+### A one-off treatment
+
+```tsx
+import { Button } from "shelving/ui";
+
+// `.spongy-press` lives in the app's own stylesheet — use it for what the theme hooks below can't express.
+<Button className="spongy-press" strong onClick={claim}>Claim</Button>
+```
+
 ### Reusing the button class
 
 ```tsx
@@ -50,11 +60,14 @@ import { getButtonClass } from "shelving/ui";
 
 `--button-padding` and `--button-small-padding` set the `padding` shorthand, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-small) var(--space-normal)`).
 
+`--button-shadow`, `--button-hover-transform` and the `--button-active-*` pressed-state hooks are static and apply to every button, with one exception: `plain` and `outline` never paint a box shadow in any state — they have no fill until hover, so a raised edge under them reads broken. The hover and pressed transforms still apply to them, so all buttons move together. `--button-transition` already covers animating the press and release.
+
 | Variable | Styles | Default |
 |---|---|---|
 | `--button-background` | Surface fill | `var(--tint-90)` |
 | `--button-hover-background` | Surface fill on hover / focus | `var(--tint-95)` |
 | `--button-hover-border` | Border on hover / focus | `var(--button-stroke) solid var(--tint-90)` |
+| `--button-hover-transform` | Transform on hover / focus | `none` |
 | `--button-text` | Label colour | `var(--tint-50)` |
 | `--button-border` | Border shorthand | `var(--button-stroke) solid var(--tint-80)` |
 | `--button-stroke` | Border / outline thickness | `var(--stroke-normal)` (2px) |
@@ -68,6 +81,11 @@ import { getButtonClass } from "shelving/ui";
 | `--button-weight` | Font weight | `var(--weight-strong)` (700) |
 | `--button-size` | Font size | `var(--size-normal)` |
 | `--button-leading` | Line height | `var(--leading)` |
+| `--button-shadow` | Box shadow (never on `plain` / `outline`) | `none` |
+| `--button-active-background` | Surface fill while pressed | `var(--button-hover-background)` |
+| `--button-active-border` | Border while pressed | `var(--button-hover-border)` |
+| `--button-active-shadow` | Box shadow while pressed | `var(--button-shadow)` |
+| `--button-active-transform` | Transform while pressed | `var(--button-hover-transform)` |
 | `--button-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--button-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 | `--button-disabled-opacity` | Opacity when disabled | `0.5` |
@@ -84,3 +102,13 @@ import { getButtonClass } from "shelving/ui";
   --button-padding: var(--space-small) var(--space-normal);
 }
 ```
+
+```css
+/* Theme: buttons are raised and press down flat — `plain` and `outline` press down too but never cast a shadow. */
+:root {
+  --button-shadow: 0 0.25rem 0 var(--tint-80);
+  --button-active-transform: translateY(0.2rem);
+  --button-active-shadow: 0 0.05rem 0 var(--tint-80);
+  --button-transition: all var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+```

package/ui/button/Button.module.css

@@ -31,6 +31,7 @@
 		/* Style. */
 		background: var(--button-background, var(--tint-90));
 		color: var(--button-text, var(--tint-50));
+		box-shadow: var(--button-shadow, none);
 		transition: var(--button-transition, all var(--duration-fast));
 		cursor: pointer;
 		outline: var(--button-focus-border, var(--stroke-focus) solid var(--color-focus));
@@ -55,6 +56,15 @@
 		&:focus:not(:focus-visible) {
 			border: var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-90));
 			background: var(--button-hover-background, var(--tint-95));
+			transform: var(--button-hover-transform, none);
+		}
+
+		&:enabled:active,
+		&:any-link:active {
+			border: var(--button-active-border, var(--button-hover-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-90)));
+			background: var(--button-active-background, var(--button-hover-background, var(--tint-95)));
+			transform: var(--button-active-transform, var(--button-hover-transform, none));
+			box-shadow: var(--button-active-shadow, var(--button-shadow, none));
 		}
 
 		/* Variants */
@@ -101,13 +111,21 @@
 			border-color: transparent;
 		}
 
-		&.plain:not(:enabled:hover, :any-link:hover, :focus) {
-			border-color: transparent;
-			background: transparent;
+		&.plain {
+			box-shadow: none;
+
+			&:not(:enabled:hover, :any-link:hover, :focus) {
+				border-color: transparent;
+				background: transparent;
+			}
 		}
 
-		&.outline:not(:enabled:hover, :any-link:hover, :focus) {
-			background: transparent;
+		&.outline {
+			box-shadow: none;
+
+			&:not(:enabled:hover, :any-link:hover, :focus) {
+				background: transparent;
+			}
 		}
 	}
 }

package/ui/button/Button.tsx

@@ -3,6 +3,7 @@ import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { ClassProps } from "../util/props.js";
 import BUTTON_CSS from "./Button.module.css";
 import { Clickable, type ClickableProps } from "./Clickable.js";
 
@@ -45,7 +46,7 @@ export function getButtonClass(variants: ButtonVariants): string {
  *
  * @see https://shelving.cc/ui/ButtonProps
  */
-export interface ButtonProps extends ButtonVariants, ClickableProps {}
+export interface ButtonProps extends ButtonVariants, ClickableProps, ClassProps {}
 
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
@@ -55,6 +56,6 @@ export interface ButtonProps extends ButtonVariants, ClickableProps {}
  * @kind component
  * @see https://shelving.cc/ui/Button
  */
-export function Button(props: ButtonProps): ReactElement {
-	return <Clickable {...props} className={getButtonClass(props)} />;
+export function Button({ className, ...props }: ButtonProps): ReactElement {
+	return <Clickable {...props} className={getClass(getButtonClass(props), className)} />;
 }

package/ui/button/Clickable.d.ts

@@ -1,7 +1,7 @@
 import type { MouseEvent, ReactElement, ReactNode } from "react";
 import type { Path } from "../../util/path.js";
 import type { ImmutableURI, URIString } from "../../util/uri.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Handler for a clickable `onClick` event.
  * - Returned value (if defined) is notified to the user using `notifySuccess()`
@@ -36,12 +36,12 @@ export interface ClickableProps extends OptionalChildProps {
  *
  * @see https://shelving.cc/ui/StylableClickableProps
  */
-export interface StylableClickableProps extends ClickableProps {
-    className?: string | undefined;
+export interface StylableClickableProps extends ClickableProps, ClassProps {
 }
 /**
  * Render either a `<button>`, an `<a href="">`, or a plain `<span>` based on whether an `onClick` or `href` prop is provided.
  * - `href` renders a `LinkClickable`; `onClick` renders a `ButtonClickable`; neither renders a `SpanClickable`.
+ * - Dispatches on defined values (not key presence) so wrappers can always spread `href={href}` through, even when it's `undefined`.
  *
  * @kind component
  * @example <Clickable href="/about">About</Clickable>

package/ui/button/Clickable.js

@@ -6,10 +6,12 @@ import { isURLActive } from "../../util/index.js";
 import { getLink } from "../../util/link.js";
 import { LOADING } from "../misc/Loading.js";
 import { requireMeta } from "../misc/MetaContext.js";
+import { getClass } from "../util/css.js";
 import { callNotifiedElement } from "../util/notice.js";
 /**
  * Render either a `<button>`, an `<a href="">`, or a plain `<span>` based on whether an `onClick` or `href` prop is provided.
  * - `href` renders a `LinkClickable`; `onClick` renders a `ButtonClickable`; neither renders a `SpanClickable`.
+ * - Dispatches on defined values (not key presence) so wrappers can always spread `href={href}` through, even when it's `undefined`.
  *
  * @kind component
  * @example <Clickable href="/about">About</Clickable>
@@ -17,7 +19,7 @@ import { callNotifiedElement } from "../util/notice.js";
  * @see https://shelving.cc/ui/Clickable
  */
 export function Clickable(props) {
-    return "href" in props ? (_jsx(LinkClickable, { ...props })) : "onClick" in props ? (_jsx(ButtonClickable, { ...props })) : (_jsx(SpanClickable, { ...props }));
+    return props.href !== undefined ? (_jsx(LinkClickable, { ...props })) : props.onClick !== undefined ? (_jsx(ButtonClickable, { ...props })) : (_jsx(SpanClickable, { ...props }));
 }
 /**
  * Render an `<a href="">` element, resolving its `href` against the current page URL and marking it active when it matches.
@@ -33,7 +35,7 @@ export function LinkClickable({ href, disabled = !href, target, download, title,
     const link = disabled ? undefined : getLink(href, url, root);
     // Is this link "active" compared to the current URL?
     const active = isURLActive(link, url);
-    return (_jsx("a", { href: link?.href, title: title, download: download, target: target, className: className, "aria-current": active ? "page" : undefined, children: children }));
+    return (_jsx("a", { href: link?.href, title: title, download: download, target: target, className: getClass(className) || undefined, "aria-current": active ? "page" : undefined, children: children }));
 }
 /**
  * Render a `<button>` element that runs its `onClick` handler through a `BusyStore` and shows a loading spinner while busy.
@@ -48,7 +50,7 @@ export function ButtonClickable({ onClick, disabled = !onClick, title, children
     const store = useInstance(BusyStore, undefined);
     // Track the `busy/unbusy` state of the button to show a loading spinner appropriately.
     const busy = useStore(store.busy).value;
-    return (_jsx("button", { type: "button", title: title, disabled: busy || disabled, className: className, onClick: disabled
+    return (_jsx("button", { type: "button", title: title, disabled: busy || disabled, className: getClass(className) || undefined, onClick: disabled
             ? undefined
             : e => {
                 if (!store.busy.value && onClick) {
@@ -65,5 +67,5 @@ export function ButtonClickable({ onClick, disabled = !onClick, title, children
  */
 export function SpanClickable({ title, children = "Click", //
 className, }) {
-    return (_jsx("span", { title: title, className: className, children: children }));
+    return (_jsx("span", { title: title, className: getClass(className) || undefined, children: children }));
 }

package/ui/button/Clickable.tsx

@@ -8,8 +8,9 @@ import type { Path } from "../../util/path.js";
 import type { ImmutableURI, URIString } from "../../util/uri.js";
 import { LOADING } from "../misc/Loading.js";
 import { requireMeta } from "../misc/MetaContext.js";
+import { getClass } from "../util/css.js";
 import { callNotifiedElement } from "../util/notice.js";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 
 /**
  * Handler for a clickable `onClick` event.
@@ -47,13 +48,12 @@ export interface ClickableProps extends OptionalChildProps {
  *
  * @see https://shelving.cc/ui/StylableClickableProps
  */
-export interface StylableClickableProps extends ClickableProps {
-	className?: string | undefined;
-}
+export interface StylableClickableProps extends ClickableProps, ClassProps {}
 
 /**
  * Render either a `<button>`, an `<a href="">`, or a plain `<span>` based on whether an `onClick` or `href` prop is provided.
  * - `href` renders a `LinkClickable`; `onClick` renders a `ButtonClickable`; neither renders a `SpanClickable`.
+ * - Dispatches on defined values (not key presence) so wrappers can always spread `href={href}` through, even when it's `undefined`.
  *
  * @kind component
  * @example <Clickable href="/about">About</Clickable>
@@ -61,9 +61,9 @@ export interface StylableClickableProps extends ClickableProps {
  * @see https://shelving.cc/ui/Clickable
  */
 export function Clickable(props: StylableClickableProps): ReactElement {
-	return "href" in props ? (
+	return props.href !== undefined ? (
 		<LinkClickable {...props} />
-	) : "onClick" in props ? (
+	) : props.onClick !== undefined ? (
 		<ButtonClickable {...props} />
 	) : (
 		<SpanClickable {...props} />
@@ -100,7 +100,7 @@ export function LinkClickable({
 			title={title}
 			download={download}
 			target={target}
-			className={className}
+			className={getClass(className) || undefined}
 			aria-current={active ? "page" : undefined}
 		>
 			{children}
@@ -134,7 +134,7 @@ export function ButtonClickable({
 			type="button"
 			title={title}
 			disabled={busy || disabled}
-			className={className}
+			className={getClass(className) || undefined}
 			onClick={
 				disabled
 					? undefined
@@ -165,7 +165,7 @@ export function SpanClickable({
 	return (
 		<span //
 			title={title}
-			className={className}
+			className={getClass(className) || undefined}
 		>
 			{children}
 		</span>

package/ui/button/FullscreenButton.d.ts

@@ -1,11 +1,12 @@
 import { type ReactElement } from "react";
+import type { ClassProps } from "../util/props.js";
 import { type ButtonVariants } from "./Button.js";
 /**
  * Component props for a `<FullscreenButton>`
  *
  * @see https://shelving.cc/ui/FullscreenButtonProps
  */
-export interface FullscreenButtonProps extends ButtonVariants {
+export interface FullscreenButtonProps extends ButtonVariants, ClassProps {
     /**
      * CSS selector to identify the parent element to toggle fullscreen status on.
      * @default "body, figure"
@@ -25,7 +26,4 @@ export interface FullscreenButtonProps extends ButtonVariants {
  * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
  * @see https://shelving.cc/ui/FullscreenButton
  */
-export declare function FullscreenButton({ target, ...props }: {
-    [x: string]: any;
-    target?: string | undefined;
-}): ReactElement | null;
+export declare function FullscreenButton({ target, ...props }: FullscreenButtonProps): ReactElement | null;

package/ui/button/FullscreenButton.tsx

@@ -1,5 +1,6 @@
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
 import { type ReactElement, useEffect, useState } from "react";
+import type { ClassProps } from "../util/props.js";
 import { Button, type ButtonVariants } from "./Button.js";
 
 /**
@@ -7,7 +8,7 @@ import { Button, type ButtonVariants } from "./Button.js";
  *
  * @see https://shelving.cc/ui/FullscreenButtonProps
  */
-export interface FullscreenButtonProps extends ButtonVariants {
+export interface FullscreenButtonProps extends ButtonVariants, ClassProps {
 	/**
 	 * CSS selector to identify the parent element to toggle fullscreen status on.
 	 * @default "body, figure"
@@ -28,7 +29,7 @@ export interface FullscreenButtonProps extends ButtonVariants {
  * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
  * @see https://shelving.cc/ui/FullscreenButton
  */
-export function FullscreenButton({ target = "body, figure", ...props }): ReactElement | null {
+export function FullscreenButton({ target = "body, figure", ...props }: FullscreenButtonProps): ReactElement | null {
 	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
 
 	useEffect(() => {

package/ui/button/RetryButton.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 import { type ButtonVariants } from "./Button.js";
 /**
  * Context for providing a "retry" callback to descendant `<RetryButton>` elements.
@@ -15,7 +15,7 @@ export declare const RetryContext: import("react").Context<Callback | undefined>
  *
  * @see https://shelving.cc/ui/RetryButtonProps
  */
-export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {
+export interface RetryButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {
 }
 /**
  * Button that retries the nearest `<Catcher>` error boundary when clicked.

package/ui/button/RetryButton.tsx

@@ -1,7 +1,7 @@
 import { ArrowPathIcon } from "@heroicons/react/16/solid";
 import { createContext, type ReactElement, use } from "react";
 import type { Callback } from "../../util/function.js";
-import type { OptionalChildProps } from "../util/index.js";
+import type { ClassProps, OptionalChildProps } from "../util/index.js";
 import { Button, type ButtonVariants } from "./Button.js";
 
 /**
@@ -19,7 +19,7 @@ RetryContext.displayName = "RetryContext";
  *
  * @see https://shelving.cc/ui/RetryButtonProps
  */
-export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {}
+export interface RetryButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {}
 
 const _RETRY_CHILDREN = (
 	<>

package/ui/button/SubmitButton.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { OptionalChildProps } from "../util/props.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants } from "./Button.js";
 /**
  * Component props for `<SubmitButton>`, a form submit button.
@@ -10,7 +10,7 @@ import { type ButtonVariants } from "./Button.js";
  *
  * @see https://shelving.cc/ui/SubmitButtonProps
  */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {
 }
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
@@ -20,4 +20,4 @@ export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export declare function SubmitButton({ children, strong, color, full, ...props }: SubmitButtonProps): ReactElement;
+export declare function SubmitButton({ children, strong, color, full, className, ...props }: SubmitButtonProps): ReactElement;

package/ui/button/SubmitButton.js

@@ -3,6 +3,7 @@ import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import { useStore } from "../../react/useStore.js";
 import { requireForm } from "../form/FormContext.js";
 import { LOADING } from "../misc/Loading.js";
+import { getClass } from "../util/css.js";
 import { getButtonClass } from "./Button.js";
 const _SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));
 /**
@@ -13,8 +14,8 @@ const _SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightI
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export function SubmitButton({ children = _SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...props }) {
+export function SubmitButton({ children = _SUBMIT_CHILDREN, strong = true, color = "primary", full = true, className, ...props }) {
     const form = requireForm();
     const busy = useStore(form.busy).value;
-    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...props }), children: busy ? LOADING : children }));
+    return (_jsx("button", { type: "submit", disabled: busy, className: getClass(getButtonClass({ strong, color, full, ...props }), className), children: busy ? LOADING : children }));
 }

package/ui/button/SubmitButton.tsx

@@ -3,7 +3,8 @@ import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
 import { requireForm } from "../form/FormContext.js";
 import { LOADING } from "../misc/Loading.js";
-import type { OptionalChildProps } from "../util/props.js";
+import { getClass } from "../util/css.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants, getButtonClass } from "./Button.js";
 
 /**
@@ -15,7 +16,7 @@ import { type ButtonVariants, getButtonClass } from "./Button.js";
  *
  * @see https://shelving.cc/ui/SubmitButtonProps
  */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {}
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {}
 
 const _SUBMIT_CHILDREN = (
 	<>
@@ -37,12 +38,13 @@ export function SubmitButton({
 	strong = true,
 	color = "primary",
 	full = true,
+	className,
 	...props
 }: SubmitButtonProps): ReactElement {
 	const form = requireForm();
 	const busy = useStore(form.busy).value;
 	return (
-		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...props })}>
+		<button type="submit" disabled={busy} className={getClass(getButtonClass({ strong, color, full, ...props }), className)}>
 			{busy ? LOADING : children}
 		</button>
 	);

package/ui/dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../button/Button.js";
-import type { OptionalChildProps } from "../util/props.js";
+import { type ButtonVariants } from "../button/Button.js";
+import type { ClassProps, OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Dialog>` — optional `children` content and an `onClose` callback.
  *
@@ -25,12 +25,14 @@ export declare const Dialog: import("react").MemoExoticComponent<({ children, on
  *
  * @see https://shelving.cc/ui/DialogCloseButtonProps
  */
-export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps {
+export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps, ClassProps {
 }
 /**
  * Button that closes its wrapping `<dialog>`, showing an X icon by default.
+ * - Styled with the shared `Button` classes (positioning comes from the `<Dialog>`'s own `.close` wrapper rules).
+ * - `plain` by default so only the icon shows until hover or focus — pass `plain={false}` for a solid button.
  *
  * @kind component
  * @see https://shelving.cc/ui/DialogCloseButton
  */
-export declare function DialogCloseButton({ children, ...variants }: DialogCloseButtonProps): ReactElement;
+export declare function DialogCloseButton({ children, plain, className, ...variants }: DialogCloseButtonProps): ReactElement;