shelving 1.236.0 → 1.236.2

package/ui/inline/Mark.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import MARK_CSS from "./Mark.module.css";
 
+/**
+ * CSS class applied to the root element of every `Mark`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_CLASS
+ */
 export const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
+
+/**
+ * CSS class that styles `Mark` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_PROSE_CLASS
+ */
 export const MARK_PROSE_CLASS = getModuleClass(MARK_CSS, "prose");
 
+/**
+ * Props for `Mark` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MarkProps
+ */
 export interface MarkProps extends OptionalChildProps {}
 
+/**
+ * Highlighted text — renders a `<mark>` element to call attention to a run of text.
+ *
+ * @param props The `children` to highlight.
+ * @returns Rendered `<mark>` element.
+ * @example <Mark>search term</Mark>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/Mark
+ */
 export function Mark({ children }: MarkProps): ReactElement {
 	return <mark className={MARK_CLASS}>{children}</mark>;
 }

package/ui/inline/Small.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Small`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_CLASS
+ */
 export declare const SMALL_CLASS: string | undefined;
+/**
+ * CSS class that styles `Small` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_PROSE_CLASS
+ */
 export declare const SMALL_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Small` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SmallProps
+ */
 export interface SmallProps extends OptionalChildProps {
 }
+/**
+ * Small print — renders a `<small>` element for side comments and fine print.
+ *
+ * @param props The `children` to render as small print.
+ * @returns Rendered `<small>` element.
+ * @example <Small>Terms apply.</Small>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/Small
+ */
 export declare function Small({ children }: SmallProps): ReactElement;

package/ui/inline/Small.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import SMALL_CSS from "./Small.module.css";
+/**
+ * CSS class applied to the root element of every `Small`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_CLASS
+ */
 export const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
+/**
+ * CSS class that styles `Small` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_PROSE_CLASS
+ */
 export const SMALL_PROSE_CLASS = getModuleClass(SMALL_CSS, "prose");
+/**
+ * Small print — renders a `<small>` element for side comments and fine print.
+ *
+ * @param props The `children` to render as small print.
+ * @returns Rendered `<small>` element.
+ * @example <Small>Terms apply.</Small>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/Small
+ */
 export function Small({ children }) {
     return _jsx("small", { className: SMALL_CSS, children: children });
 }

package/ui/inline/Small.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import SMALL_CSS from "./Small.module.css";
 
+/**
+ * CSS class applied to the root element of every `Small`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_CLASS
+ */
 export const SMALL_CLASS = getModuleClass(SMALL_CSS, "small");
+
+/**
+ * CSS class that styles `Small` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SMALL_PROSE_CLASS
+ */
 export const SMALL_PROSE_CLASS = getModuleClass(SMALL_CSS, "prose");
 
+/**
+ * Props for `Small` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/SmallProps
+ */
 export interface SmallProps extends OptionalChildProps {}
 
+/**
+ * Small print — renders a `<small>` element for side comments and fine print.
+ *
+ * @param props The `children` to render as small print.
+ * @returns Rendered `<small>` element.
+ * @example <Small>Terms apply.</Small>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Small/Small
+ */
 export function Small({ children }: SmallProps): ReactElement {
 	return <small className={SMALL_CSS}>{children}</small>;
 }

package/ui/inline/Strong.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Strong`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_CLASS
+ */
 export declare const STRONG_CLASS: string | undefined;
+/**
+ * CSS class that styles `Strong` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_PROSE_CLASS
+ */
 export declare const STRONG_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Strong` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/StrongProps
+ */
 export interface StrongProps extends OptionalChildProps {
 }
+/**
+ * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
+ *
+ * @param props The `children` to render with strong importance.
+ * @returns Rendered `<strong>` element.
+ * @example <Strong>Warning</Strong>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/Strong
+ */
 export declare function Strong({ children }: StrongProps): ReactElement;

package/ui/inline/Strong.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import STRONG_CSS from "./Strong.module.css";
+/**
+ * CSS class applied to the root element of every `Strong`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_CLASS
+ */
 export const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
+/**
+ * CSS class that styles `Strong` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_PROSE_CLASS
+ */
 export const STRONG_PROSE_CLASS = getModuleClass(STRONG_CSS, "prose");
+/**
+ * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
+ *
+ * @param props The `children` to render with strong importance.
+ * @returns Rendered `<strong>` element.
+ * @example <Strong>Warning</Strong>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/Strong
+ */
 export function Strong({ children }) {
     return _jsx("strong", { className: STRONG_CLASS, children: children });
 }

package/ui/inline/Strong.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import STRONG_CSS from "./Strong.module.css";
 
+/**
+ * CSS class applied to the root element of every `Strong`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_CLASS
+ */
 export const STRONG_CLASS = getModuleClass(STRONG_CSS, "strong");
+
+/**
+ * CSS class that styles `Strong` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/STRONG_PROSE_CLASS
+ */
 export const STRONG_PROSE_CLASS = getModuleClass(STRONG_CSS, "prose");
 
+/**
+ * Props for `Strong` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/StrongProps
+ */
 export interface StrongProps extends OptionalChildProps {}
 
+/**
+ * Strong importance — renders a `<strong>` element for text of strong importance (typically bold).
+ *
+ * @param props The `children` to render with strong importance.
+ * @returns Rendered `<strong>` element.
+ * @example <Strong>Warning</Strong>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Strong/Strong
+ */
 export function Strong({ children }: StrongProps): ReactElement {
 	return <strong className={STRONG_CLASS}>{children}</strong>;
 }

package/ui/inline/Subscript.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Subscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_CLASS
+ */
 export declare const SUBSCRIPT_CLASS: string | undefined;
+/**
+ * CSS class that styles `Subscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_PROSE_CLASS
+ */
 export declare const SUBSCRIPT_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Subscript` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SubscriptProps
+ */
 export interface SubscriptProps extends OptionalChildProps {
 }
+/**
+ * Subscript text — renders a `<sub>` element for typographically lowered text (e.g. chemical formulae).
+ *
+ * @param props The `children` to render as subscript.
+ * @returns Rendered `<sub>` element.
+ * @example <>H<Subscript>2</Subscript>O</>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/Subscript
+ */
 export declare function Subscript({ children }: SubscriptProps): ReactElement;

package/ui/inline/Subscript.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import SUBSCRIPT_CSS from "./Subscript.module.css";
+/**
+ * CSS class applied to the root element of every `Subscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_CLASS
+ */
 export const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
+/**
+ * CSS class that styles `Subscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_PROSE_CLASS
+ */
 export const SUBSCRIPT_PROSE_CLASS = getModuleClass(SUBSCRIPT_CSS, "prose");
+/**
+ * Subscript text — renders a `<sub>` element for typographically lowered text (e.g. chemical formulae).
+ *
+ * @param props The `children` to render as subscript.
+ * @returns Rendered `<sub>` element.
+ * @example <>H<Subscript>2</Subscript>O</>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/Subscript
+ */
 export function Subscript({ children }) {
     return _jsx("sub", { className: SUBSCRIPT_CLASS, children: children });
 }

package/ui/inline/Subscript.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import SUBSCRIPT_CSS from "./Subscript.module.css";
 
+/**
+ * CSS class applied to the root element of every `Subscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_CLASS
+ */
 export const SUBSCRIPT_CLASS = getModuleClass(SUBSCRIPT_CSS, "subscript");
+
+/**
+ * CSS class that styles `Subscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SUBSCRIPT_PROSE_CLASS
+ */
 export const SUBSCRIPT_PROSE_CLASS = getModuleClass(SUBSCRIPT_CSS, "prose");
 
+/**
+ * Props for `Subscript` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/SubscriptProps
+ */
 export interface SubscriptProps extends OptionalChildProps {}
 
+/**
+ * Subscript text — renders a `<sub>` element for typographically lowered text (e.g. chemical formulae).
+ *
+ * @param props The `children` to render as subscript.
+ * @returns Rendered `<sub>` element.
+ * @example <>H<Subscript>2</Subscript>O</>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Subscript/Subscript
+ */
 export function Subscript({ children }: SubscriptProps): ReactElement {
 	return <sub className={SUBSCRIPT_CLASS}>{children}</sub>;
 }

package/ui/inline/Superscript.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Superscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_CLASS
+ */
 export declare const SUPERSCRIPT_CLASS: string | undefined;
+/**
+ * CSS class that styles `Superscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_PROSE_CLASS
+ */
 export declare const SUPERSCRIPT_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Superscript` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SuperscriptProps
+ */
 export interface SuperscriptProps extends OptionalChildProps {
 }
+/**
+ * Superscript text — renders a `<sup>` element for typographically raised text (e.g. exponents, footnote markers).
+ *
+ * @param props The `children` to render as superscript.
+ * @returns Rendered `<sup>` element.
+ * @example <>E = mc<Superscript>2</Superscript></>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/Superscript
+ */
 export declare function Superscript({ children }: SuperscriptProps): ReactElement;

package/ui/inline/Superscript.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import SUPERSCRIPT_CSS from "./Superscript.module.css";
+/**
+ * CSS class applied to the root element of every `Superscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_CLASS
+ */
 export const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
+/**
+ * CSS class that styles `Superscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_PROSE_CLASS
+ */
 export const SUPERSCRIPT_PROSE_CLASS = getModuleClass(SUPERSCRIPT_CSS, "prose");
+/**
+ * Superscript text — renders a `<sup>` element for typographically raised text (e.g. exponents, footnote markers).
+ *
+ * @param props The `children` to render as superscript.
+ * @returns Rendered `<sup>` element.
+ * @example <>E = mc<Superscript>2</Superscript></>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/Superscript
+ */
 export function Superscript({ children }) {
     return _jsx("sup", { className: SUPERSCRIPT_CLASS, children: children });
 }

package/ui/inline/Superscript.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import SUPERSCRIPT_CSS from "./Superscript.module.css";
 
+/**
+ * CSS class applied to the root element of every `Superscript`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_CLASS
+ */
 export const SUPERSCRIPT_CLASS = getModuleClass(SUPERSCRIPT_CSS, "superscript");
+
+/**
+ * CSS class that styles `Superscript` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SUPERSCRIPT_PROSE_CLASS
+ */
 export const SUPERSCRIPT_PROSE_CLASS = getModuleClass(SUPERSCRIPT_CSS, "prose");
 
+/**
+ * Props for `Superscript` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/SuperscriptProps
+ */
 export interface SuperscriptProps extends OptionalChildProps {}
 
+/**
+ * Superscript text — renders a `<sup>` element for typographically raised text (e.g. exponents, footnote markers).
+ *
+ * @param props The `children` to render as superscript.
+ * @returns Rendered `<sup>` element.
+ * @example <>E = mc<Superscript>2</Superscript></>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Superscript/Superscript
+ */
 export function Superscript({ children }: SuperscriptProps): ReactElement {
 	return <sup className={SUPERSCRIPT_CLASS}>{children}</sup>;
 }

package/ui/inline/When.d.ts

@@ -1,18 +1,57 @@
 import type { ReactElement } from "react";
 import { type PossibleDate } from "../../util/date.js";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * Props for `When`, `Ago`, and `Until` — a `target` date plus an optional `current` reference date and `full` toggle.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/WhenProps
+ */
 export interface WhenProps extends OptionalChildProps {
     target: PossibleDate | undefined;
     current?: PossibleDate | undefined;
     full?: boolean | undefined;
 }
-/** Show a string like `in 6d` or `3w ago` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Relative time — shows a signed string like `in 6d` or `3w ago` wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the relative time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <When target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/When
+ */
 export declare function When(props: WhenProps): ReactElement;
+/**
+ * Props for `Ago` — identical to `WhenProps`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/AgoProps
+ */
 export interface AgoProps extends WhenProps {
 }
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Elapsed time — shows an unsigned string like `6d` or `3w` for a past date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the elapsed time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Ago target="2020-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Ago
+ */
 export declare function Ago(props: AgoProps): ReactElement;
+/**
+ * Props for `Until` — identical to `WhenProps`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/UntilProps
+ */
 export interface UntilProps extends WhenProps {
 }
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Remaining time — shows an unsigned string like `6d` or `3w` for a future date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the remaining time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Until target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Until
+ */
 export declare function Until(props: UntilProps): ReactElement;

package/ui/inline/When.js

@@ -10,15 +10,39 @@ function _getWhen(formatter, { target: possibleTarget, current: possibleCurrent
     const formatted = children ?? (full ? `${title} (${formatter(target, current, _OPTIONS)})` : formatter(target, current, _OPTIONS));
     return (_jsx("time", { dateTime: possibleCurrent === "now" ? target.toISOString() : `PT${getSecondsAgo(target, current)}S`, title: title, children: formatted }));
 }
-/** Show a string like `in 6d` or `3w ago` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Relative time — shows a signed string like `in 6d` or `3w ago` wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the relative time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <When target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/When
+ */
 export function When(props) {
     return _getWhen(formatWhen, props, When);
 }
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Elapsed time — shows an unsigned string like `6d` or `3w` for a past date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the elapsed time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Ago target="2020-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Ago
+ */
 export function Ago(props) {
     return _getWhen(formatAgo, props, Ago);
 }
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Remaining time — shows an unsigned string like `6d` or `3w` for a future date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the remaining time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Until target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Until
+ */
 export function Until(props) {
     return _getWhen(formatUntil, props, Until);
 }

package/ui/inline/When.tsx

@@ -23,27 +23,66 @@ function _getWhen(
 	);
 }
 
+/**
+ * Props for `When`, `Ago`, and `Until` — a `target` date plus an optional `current` reference date and `full` toggle.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/WhenProps
+ */
 export interface WhenProps extends OptionalChildProps {
 	target: PossibleDate | undefined;
 	current?: PossibleDate | undefined;
 	full?: boolean | undefined;
 }
 
-/** Show a string like `in 6d` or `3w ago` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Relative time — shows a signed string like `in 6d` or `3w ago` wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the relative time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <When target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/When
+ */
 export function When(props: WhenProps): ReactElement {
 	return _getWhen(formatWhen, props, When);
 }
 
+/**
+ * Props for `Ago` — identical to `WhenProps`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/AgoProps
+ */
 export interface AgoProps extends WhenProps {}
 
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Elapsed time — shows an unsigned string like `6d` or `3w` for a past date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the elapsed time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Ago target="2020-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Ago
+ */
 export function Ago(props: AgoProps): ReactElement {
 	return _getWhen(formatAgo, props, Ago);
 }
 
+/**
+ * Props for `Until` — identical to `WhenProps`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/UntilProps
+ */
 export interface UntilProps extends WhenProps {}
 
-/** Show a string like `6d` or `3w` wrapped with a `<time>` element providing the machine-readable format of the same date. */
+/**
+ * Remaining time — shows an unsigned string like `6d` or `3w` for a future date wrapped in a `<time>` element carrying the machine-readable date.
+ *
+ * @param props The `target` date, optional `current` reference (defaults to now), `full` toggle, and `children` override.
+ * @returns Rendered `<time>` element showing the remaining time.
+ * @throws {RequiredError} If `target` (or `current`) cannot be coerced to a valid date.
+ * @example <Until target="2030-01-01" />
+ * @see https://dhoulb.github.io/shelving/ui/inline/When/Until
+ */
 export function Until(props: UntilProps): ReactElement {
 	return _getWhen(formatUntil, props, Until);
 }

package/ui/layout/CenteredLayout.d.ts

@@ -1,10 +1,21 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * Props for `<CenteredLayout>` — optional `children` and a `fullWidth` flag to drop the max-width.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/layout/CenteredLayout/CenteredLayoutProps
+ */
 export interface CenteredLayoutProps extends OptionalChildProps {
     fullWidth?: boolean;
 }
 /**
- * Layout that puts the content in the center of the screen with no header/footer and a narrow max-width.
+ * Layout that centres its content with no header/footer and a narrow max-width.
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
+ *
+ * @param children The content to centre.
+ * @param fullWidth Drop the narrow max-width and let content fill the width (defaults to `false`).
+ * @returns The centred layout element.
+ * @example <CenteredLayout><LoginForm /></CenteredLayout>
+ * @see https://dhoulb.github.io/shelving/ui/layout/CenteredLayout/CenteredLayout
  */
 export declare function CenteredLayout({ children, fullWidth }: CenteredLayoutProps): ReactElement;

package/ui/layout/CenteredLayout.js

@@ -4,8 +4,14 @@ import { getClass } from "../util/css.js";
 import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
 import { LAYOUT_CLASS } from "./Layout.js";
 /**
- * Layout that puts the content in the center of the screen with no header/footer and a narrow max-width.
+ * Layout that centres its content with no header/footer and a narrow max-width.
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
+ *
+ * @param children The content to centre.
+ * @param fullWidth Drop the narrow max-width and let content fill the width (defaults to `false`).
+ * @returns The centred layout element.
+ * @example <CenteredLayout><LoginForm /></CenteredLayout>
+ * @see https://dhoulb.github.io/shelving/ui/layout/CenteredLayout/CenteredLayout
  */
 export function CenteredLayout({ children, fullWidth = false }) {
     const { path } = requireMetaURL();