shelving 1.264.0 → 1.264.1

package/package.json

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

package/ui/block/Card.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { type ClickableProps } from "../form/Clickable.js";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type StatusVariants } from "../style/Status.js";
 import type { BlockElement } from "./Block.js";

package/ui/block/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Clickable } from "../form/Clickable.js";
+import { Clickable } from "../button/Clickable.js";
 import { getBlockClass } from "../style/Block.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/block/Card.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { Clickable, type ClickableProps } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/block/Image.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
-import { type SpaceVariants } from "../style/Space.js";
-import { type WidthVariants } from "../style/Width.js";
+import type { SpaceVariants } from "../style/Space.js";
+import type { WidthVariants } from "../style/Width.js";
 /**
  * Props for `Image` — an `src`, optional `alt` text, plus space and width variants.
  *
@@ -17,4 +17,4 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export declare function Image({ src, alt, ...variants }: ImageProps): ReactElement;
+export declare function Image({ src, alt, ...props }: ImageProps): ReactElement;

package/ui/block/Image.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getSpaceClass } from "../style/Space.js";
-import { getWidthClass } from "../style/Width.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import IMAGE_CSS from "./Image.module.css";
 const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
@@ -11,6 +10,7 @@ const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...variants }) {
-    return _jsx("img", { src: src, alt: alt, className: getClass(IMAGE_CLASS, getSpaceClass(variants), getWidthClass(variants)) });
+export function Image({ src, alt, ...props }) {
+    return (_jsx("img", { src: src, alt: alt, className: getClass(IMAGE_CLASS, //
+        getBlockClass(props)) }));
 }

package/ui/block/Image.module.css

@@ -4,9 +4,12 @@
 @layer components {
 	.image,
 	.prose img {
-		inline-size: var(--image-width, 100%);
+		/* Box */
+		border: var(--image-border, none);
+		border-radius: var(--image-radius, var(--radius-normal));
 		margin-block: var(--image-space, var(--space-paragraph));
 
+		/* Contents */
 		object-position: center center;
 		object-fit: cover; /* Don't distort when resized. */
 	}

package/ui/block/Image.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from "react";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getWidthClass, type WidthVariants } from "../style/Width.js";
+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 IMAGE_CSS from "./Image.module.css";
 
@@ -23,6 +24,15 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...variants }: ImageProps): ReactElement {
-	return <img src={src} alt={alt} className={getClass(IMAGE_CLASS, getSpaceClass(variants), getWidthClass(variants))} />;
+export function Image({ src, alt, ...props }: ImageProps): ReactElement {
+	return (
+		<img
+			src={src}
+			alt={alt}
+			className={getClass(
+				IMAGE_CLASS, //
+				getBlockClass(props),
+			)}
+		/>
+	);
 }

package/ui/block/Video.d.ts

@@ -1,7 +1,7 @@
-import { type MouseEvent, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
+import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Video` — space and width variants plus optional `children`.
  *
@@ -9,68 +9,13 @@ import type { ChildProps, OptionalChildProps } from "../util/props.js";
  */
 export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {
 }
-/**
- * Props for `VideoButtons` — `children` plus an optional `left` alignment flag.
- *
- * @see https://shelving.cc/ui/VideoButtonsProps
- */
-export interface VideoButtonsProps extends ChildProps {
-    left?: boolean;
-}
-/**
- * Props for `VideoButton` — `children` plus optional `title`, `onClick`, `danger`, and `disabled`.
- *
- * @see https://shelving.cc/ui/VideoButtonProps
- */
-export interface VideoButtonProps extends ChildProps {
-    title?: string | undefined;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    danger?: boolean;
-    disabled?: boolean;
-}
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
  * @see https://shelving.cc/ui/Video
  */
 export declare function Video({ children, ...props }: VideoProps): ReactElement;
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export declare function VideoButtons({ children, ...variants }: VideoButtonsProps): import("react").JSX.Element;
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export declare function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement;
-declare const _fullscreenVideoButtonProps: unique symbol;
-/**
- * Props for `FullscreenVideoButton` — an empty marker interface (the component takes no props).
- *
- * @see https://shelving.cc/ui/FullscreenVideoButtonProps
- */
-export interface FullscreenVideoButtonProps {
-    readonly [_fullscreenVideoButtonProps]?: never;
-}
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export declare function FullscreenVideoButton(): ReactElement | null;
-export {};

package/ui/block/Video.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import VIDEO_CSS from "./Video.module.css";
@@ -8,7 +7,7 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
@@ -19,52 +18,3 @@ export function Video({ children, ...props }) {
     return (_jsx("figure", { ref: ref, className: getClass(VIDEO_CLASS, //
         getBlockClass(props)), children: children }));
 }
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export function VideoButtons({ children, ...variants }) {
-    return _jsx("div", { className: getModuleClass(VIDEO_CSS, "buttons", variants), children: children });
-}
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export function VideoButton({ children, title, onClick, disabled, ...variants }) {
-    return (_jsx("button", { type: "button", onClick: onClick, className: getModuleClass(VIDEO_CSS, "button", variants), title: title, disabled: disabled, children: children }));
-}
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export function FullscreenVideoButton() {
-    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
-    useEffect(() => {
-        const onChange = () => setFull(!!document.fullscreenElement);
-        document.addEventListener("fullscreenchange", onChange);
-        return () => document.removeEventListener("fullscreenchange", onChange);
-    });
-    if (!document.fullscreenEnabled)
-        return null;
-    return (_jsx(VideoButton, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
-            if (document.fullscreenElement) {
-                document.exitFullscreen();
-            }
-            else {
-                const parent = currentTarget.closest("figure, video");
-                if (parent)
-                    parent.requestFullscreen();
-            }
-        }, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
-}

package/ui/block/Video.module.css

@@ -12,7 +12,7 @@
 		/* Box */
 		aspect-ratio: 16 / 9;
 		margin-block: var(--video-space, var(--space-paragraph));
-		border: var(--video-border, var(--stroke-normal) solid black);
+		border: var(--video-border, none);
 		border-radius: var(--video-radius, var(--radius-normal));
 		padding: var(--video-padding, var(--space-normal));
 
@@ -35,54 +35,4 @@
 			border-radius: 0;
 		}
 	}
-
-	.buttons {
-		position: absolute;
-		top: var(--video-buttons-offset-y, var(--space-normal));
-		right: var(--video-buttons-offset-x, var(--space-normal));
-		display: flex;
-		gap: var(--video-buttons-gap, var(--space-small));
-
-		&.left {
-			right: auto;
-			left: var(--video-buttons-offset-x, var(--space-normal));
-		}
-	}
-
-	.button {
-		/* Box */
-		display: block;
-		border: var(--video-button-border, var(--stroke-normal) solid black);
-		border-radius: var(--video-button-radius, 100rem);
-		padding-inline: var(--video-button-padding-x, var(--space-xsmall));
-
-		/* Style */
-		color: var(--video-button-text, white);
-		background: var(--video-button-bg, black);
-		transition: var(--video-button-transition, all var(--duration-fast));
-		outline: var(--video-button-focus-border, var(--stroke-focus) solid var(--color-focus));
-		outline-offset: calc(0px - var(--stroke-normal));
-		box-shadow: var(--video-button-shadow, var(--shadow-normal));
-		cursor: pointer;
-
-		/* Pseudo-classes */
-		&:disabled,
-		&:where(a:not(:any-link)) {
-			opacity: var(--video-button-disabled-opacity, 0.5);
-			cursor: default;
-		}
-		&:enabled:hover,
-		&:any-link:hover,
-		&:focus:not(:focus-visible) {
-			background: color-mix(in oklch, white 85%, transparent);
-		}
-	}
-}
-
-@layer overrides {
-	.button {
-		&:not(:focus-visible) {
-			outline-color: transparent;
-		}
-	}
 }

package/ui/block/Video.tsx

@@ -1,10 +1,9 @@
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, type ReactElement, useEffect, useRef, useState } from "react";
+import { type ReactElement, useRef } from "react";
 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 { ChildProps, OptionalChildProps } from "../util/props.js";
+import type { OptionalChildProps } from "../util/props.js";
 import VIDEO_CSS from "./Video.module.css";
 
 const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
@@ -16,31 +15,10 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
  */
 export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {}
 
-/**
- * Props for `VideoButtons` — `children` plus an optional `left` alignment flag.
- *
- * @see https://shelving.cc/ui/VideoButtonsProps
- */
-export interface VideoButtonsProps extends ChildProps {
-	left?: boolean;
-}
-
-/**
- * Props for `VideoButton` — `children` plus optional `title`, `onClick`, `danger`, and `disabled`.
- *
- * @see https://shelving.cc/ui/VideoButtonProps
- */
-export interface VideoButtonProps extends ChildProps {
-	title?: string | undefined;
-	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-	danger?: boolean;
-	disabled?: boolean;
-}
-
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
@@ -61,77 +39,3 @@ export function Video({ children, ...props }: VideoProps): ReactElement {
 		</figure>
 	);
 }
-
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export function VideoButtons({ children, ...variants }: VideoButtonsProps) {
-	return <div className={getModuleClass(VIDEO_CSS, "buttons", variants)}>{children}</div>;
-}
-
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement {
-	return (
-		<button type="button" onClick={onClick} className={getModuleClass(VIDEO_CSS, "button", variants)} title={title} disabled={disabled}>
-			{children}
-		</button>
-	);
-}
-
-declare const _fullscreenVideoButtonProps: unique symbol;
-
-/**
- * Props for `FullscreenVideoButton` — an empty marker interface (the component takes no props).
- *
- * @see https://shelving.cc/ui/FullscreenVideoButtonProps
- */
-export interface FullscreenVideoButtonProps {
-	readonly [_fullscreenVideoButtonProps]?: never;
-}
-
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export function FullscreenVideoButton(): ReactElement | null {
-	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
-
-	useEffect(() => {
-		const onChange = () => setFull(!!document.fullscreenElement);
-		document.addEventListener("fullscreenchange", onChange);
-		return () => document.removeEventListener("fullscreenchange", onChange);
-	});
-
-	if (!document.fullscreenEnabled) return null;
-
-	return (
-		<VideoButton
-			title={isFull ? "Exit full screen mode" : "Enter full screen mode"}
-			onClick={({ currentTarget }) => {
-				if (document.fullscreenElement) {
-					document.exitFullscreen();
-				} else {
-					const parent = currentTarget.closest("figure, video");
-					if (parent) parent.requestFullscreen();
-				}
-			}}
-		>
-			{isFull ? <ArrowsPointingInIcon /> : <ArrowsPointingOutIcon />}
-		</VideoButton>
-	);
-}

package/ui/{form → button}/Button.d.ts

@@ -28,7 +28,12 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, Typography
  * @see https://shelving.cc/ui/getButtonClass
  */
 export declare function getButtonClass(variants: ButtonVariants): string;
-interface ButtonProps extends ButtonVariants, ClickableProps {
+/**
+ * Component props for a `<Button>` component.
+ *
+ * @see https://shelving.cc/ui/ButtonProps
+ */
+export interface ButtonProps extends ButtonVariants, ClickableProps {
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.
@@ -39,4 +44,3 @@ interface ButtonProps extends ButtonVariants, ClickableProps {
  * @see https://shelving.cc/ui/Button
  */
 export declare function Button(props: ButtonProps): ReactElement;
-export {};

package/ui/{form → button}/Button.tsx

@@ -40,7 +40,12 @@ export function getButtonClass(variants: ButtonVariants): string {
 	);
 }
 
-interface ButtonProps extends ButtonVariants, ClickableProps {}
+/**
+ * Component props for a `<Button>` component.
+ *
+ * @see https://shelving.cc/ui/ButtonProps
+ */
+export interface ButtonProps extends ButtonVariants, ClickableProps {}
 
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.

package/ui/button/FullscreenButton.d.ts

@@ -0,0 +1,31 @@
+import { type ReactElement } from "react";
+import { type ButtonVariants } from "./Button.js";
+/**
+ * Component props for a `<FullscreenButton>`
+ *
+ * @see https://shelving.cc/ui/FullscreenButtonProps
+ */
+export interface FullscreenButtonProps extends ButtonVariants {
+    /**
+     * CSS selector to identify the parent element to toggle fullscreen status on.
+     * @default "body, figure"
+     */
+    target?: string;
+}
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @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;

package/ui/button/FullscreenButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { useEffect, useState } from "react";
+import { Button } from "./Button.js";
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
+ * @see https://shelving.cc/ui/FullscreenButton
+ */
+export function FullscreenButton({ target = "body, figure", ...props }) {
+    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
+    useEffect(() => {
+        const onChange = () => setFull(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onChange);
+        return () => document.removeEventListener("fullscreenchange", onChange);
+    });
+    if (!document.fullscreenEnabled)
+        return null;
+    return (_jsx(Button, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            else {
+                const parent = currentTarget.closest(target);
+                if (parent)
+                    parent.requestFullscreen();
+            }
+        }, ...props, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
+}

package/ui/button/FullscreenButton.tsx

@@ -0,0 +1,58 @@
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/16/solid";
+import { type ReactElement, useEffect, useState } from "react";
+import { Button, type ButtonVariants } from "./Button.js";
+
+/**
+ * Component props for a `<FullscreenButton>`
+ *
+ * @see https://shelving.cc/ui/FullscreenButtonProps
+ */
+export interface FullscreenButtonProps extends ButtonVariants {
+	/**
+	 * CSS selector to identify the parent element to toggle fullscreen status on.
+	 * @default "body, figure"
+	 */
+	target?: string;
+}
+
+/**
+ * Button to toggle the surrounding `<figure>` element or `<body>` element in/out of fullscreen mode.
+ * - Renders `null` when the browser does not support the Fullscreen API.
+ * - Tracks fullscreen state so the icon and title toggle between enter/exit.
+ * - Parent can be identified by `props.target`, but defaults to `figure, body` does not exist, the button will do nothing when clicked.
+ * - The `<Figure>` and `<Video>` components are rendered as `<figure>` so this works out the box with both of these.
+ * - If not contained in a `<figure>` by default the
+ *
+ * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
+ * @kind component
+ * @example <Video><video src="/clip.mp4" /><FullscreenButton /></Video>
+ * @see https://shelving.cc/ui/FullscreenButton
+ */
+export function FullscreenButton({ target = "body, figure", ...props }): ReactElement | null {
+	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
+
+	useEffect(() => {
+		const onChange = () => setFull(!!document.fullscreenElement);
+		document.addEventListener("fullscreenchange", onChange);
+		return () => document.removeEventListener("fullscreenchange", onChange);
+	});
+
+	if (!document.fullscreenEnabled) return null;
+
+	return (
+		<Button
+			title={isFull ? "Exit full screen mode" : "Enter full screen mode"}
+			onClick={({ currentTarget }) => {
+				if (document.fullscreenElement) {
+					document.exitFullscreen();
+				} else {
+					const parent = currentTarget.closest(target);
+					if (parent) parent.requestFullscreen();
+				}
+			}}
+			{...props}
+		>
+			{isFull ? <ArrowsPointingInIcon /> : <ArrowsPointingOutIcon />}
+		</Button>
+	);
+}

package/ui/button/RetryButton.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement } from "react";
+import type { Callback } from "../../util/function.js";
+import type { OptionalChildProps } from "../util/index.js";
+import { type ButtonVariants } from "./Button.js";
+/**
+ * Context for providing a "retry" callback to descendant `<RetryButton>` elements.
+ * - Used by `<Catcher>` to provide a retry callback to its children.
+ * - Default `<ErrorNotice>` and `<ErrorPage>` elements include `<RetryButton>` to trigger a retry on their parent `<Catcher>`
+ */
+export declare const RetryContext: import("react").Context<Callback | undefined>;
+/**
+ * Component props for `<RetryButton>`
+ *
+ * @property children - The content of the button. Defaults to a refresh icon and `"Retry"`
+ *
+ * @see https://shelving.cc/ui/RetryButtonProps
+ */
+export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {
+}
+/**
+ * Button that retries the nearest `<Catcher>` error boundary when clicked.
+ *
+ * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
+ * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
+ *
+ * @kind component
+ * @see https://shelving.cc/ui/RetryButton
+ */
+export declare function RetryButton({ children, ...props }: RetryButtonProps): ReactElement | null;