shelving 1.260.3 → 1.262.0

package/package.json

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

package/ui/README.md

@@ -25,7 +25,7 @@ The styling system lives in `style/` and has four moving parts: design tokens, t
 
 **Cascade layers.** Styles are ordered by `@layer`, lowest to highest priority: `defaults` (`:root` tokens, the tint ladder, body baseline) → `components` (the bulk of the CSS: `.card`, `.button`, …) → `variants` (cross-cutting opt-in modifiers, which always beat components) → `overrides` (top-priority structural fixes like `:first-child` / `:last-child` margin collapses). Unlayered rules beat all layered rules, so a theme should set tokens at `:root` or wrap its rules in `@layer`.
 
-**Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — `getColorClass()` and `getStatusClass()`; font size, weight, family, and case, plus text alignment, tint, and wrapping, all come from `getTypographyClass()`; spacing, block-padding, inline-padding ("indent"), and gap from `getSpaceClass()`, `getPaddingClass()`, `getIndentClass()`, and `getGapClass()`; width constraints from `getWidthClass()`; flex layout from `getFlexClass()`; and opt-in scrolling from `getScrollClass()`. Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
+**Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — `getColorClass()` and `getStatusClass()`; font size, weight, family, and case, plus text alignment, tint, and wrapping, all come from `getTypographyClass()`, which extends `ColorVariants` and composes `getColorClass()` so every typographic element also accepts `color` (use `getColorClass()` directly only for colour-without-typography, e.g. `<Icon>`); spacing, block-padding, inline-padding ("indent"), and gap from `getSpaceClass()`, `getPaddingClass()`, `getIndentClass()`, and `getGapClass()`; width constraints from `getWidthClass()`; flex layout from `getFlexClass()`; and opt-in scrolling from `getScrollClass()`. Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
 
 Each painting component also exposes its own theme hooks — a single tint hook (`--card-tint`) to recolour the whole component, plus per-property hooks (`--card-background`, `--card-radius`, …) for surgical overrides. Those are documented in each component's own **Styling** section (see `<Card>` for the precedent).
 

package/ui/block/Definitions.d.ts

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import type { ColorVariants } from "../style/Color.js";
 import type { GapVariants } from "../style/Gap.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { TypographyVariants } from "../style/Typography.js";
@@ -9,7 +8,7 @@ import type { OptionalChildProps } from "../util/props.js";
  *
  * @see https://shelving.cc/ui/DefinitionsProps
  */
-export interface DefinitionsProps extends ColorVariants, GapVariants, SpaceVariants, TypographyVariants, OptionalChildProps {
+export interface DefinitionsProps extends GapVariants, SpaceVariants, TypographyVariants, OptionalChildProps {
 }
 /**
  * Description list — a sequence of term/value pairs rendered as a `<dl>`.

package/ui/block/Definitions.tsx

@@ -1,6 +1,5 @@
 import type { ReactElement } from "react";
 import { getBlockClass } from "../style/Block.js";
-import type { ColorVariants } from "../style/Color.js";
 import type { GapVariants } from "../style/Gap.js";
 import type { SpaceVariants } from "../style/Space.js";
 import type { TypographyVariants } from "../style/Typography.js";
@@ -15,7 +14,7 @@ const DEFINITIONS_CLASS = getModuleClass(DEFINITIONS_CSS, "definitions");
  *
  * @see https://shelving.cc/ui/DefinitionsProps
  */
-export interface DefinitionsProps extends ColorVariants, GapVariants, SpaceVariants, TypographyVariants, OptionalChildProps {}
+export interface DefinitionsProps extends GapVariants, SpaceVariants, TypographyVariants, OptionalChildProps {}
 
 /**
  * Description list — a sequence of term/value pairs rendered as a `<dl>`.

package/ui/form/Button.d.ts

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { type ColorVariants } from "../style/Color.js";
 import { type FlexVariants } from "../style/Flex.js";
 import { type StatusVariants } from "../style/Status.js";
 import { type TypographyVariants } from "../style/Typography.js";
@@ -9,7 +8,7 @@ import { type ClickableProps } from "./Clickable.js";
  *
  * @see https://shelving.cc/ui/ButtonVariants
  */
-export interface ButtonVariants extends FlexVariants, ColorVariants, StatusVariants, TypographyVariants {
+export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
     /** This is the default button in a form and should be displayed stronger. */
     strong?: boolean | undefined;
     /** Add plain styling (background only appears on hover or focus). */

package/ui/form/Button.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getColorClass } from "../style/Color.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getStatusClass } from "../style/Status.js";
 import { getTypographyClass } from "../style/Typography.js";
@@ -14,7 +13,7 @@ import { Clickable } from "./Clickable.js";
  * @see https://shelving.cc/ui/getButtonClass
  */
 export function getButtonClass(variants) {
-    return getClass(getModuleClass(BUTTON_CSS, "button", variants), getFlexClass(variants), getStatusClass(variants), getColorClass(variants), getTypographyClass(variants));
+    return getClass(getModuleClass(BUTTON_CSS, "button", variants), getFlexClass(variants), getStatusClass(variants), getTypographyClass(variants));
 }
 /**
  * Render either a `<button>` or an `<a href="">` styled as a button, based on whether an `onClick` or `href` prop is provided.

package/ui/form/Button.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { type ColorVariants, getColorClass } from "../style/Color.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
@@ -12,7 +11,7 @@ import { Clickable, type ClickableProps } from "./Clickable.js";
  *
  * @see https://shelving.cc/ui/ButtonVariants
  */
-export interface ButtonVariants extends FlexVariants, ColorVariants, StatusVariants, TypographyVariants {
+export interface ButtonVariants extends FlexVariants, StatusVariants, TypographyVariants {
 	/** This is the default button in a form and should be displayed stronger. */
 	strong?: boolean | undefined;
 	/** Add plain styling (background only appears on hover or focus). */
@@ -37,7 +36,6 @@ export function getButtonClass(variants: ButtonVariants): string {
 		getModuleClass(BUTTON_CSS, "button", variants),
 		getFlexClass(variants),
 		getStatusClass(variants),
-		getColorClass(variants),
 		getTypographyClass(variants),
 	);
 }

package/ui/form/CheckboxInput.js

@@ -4,7 +4,6 @@ import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 /**
  * Checkbox input bound to a `boolean` value, rendered as a labelled `<input type="checkbox">`.
  * - The label content comes from `children`, falling back to `placeholder`/`title`.

package/ui/form/CheckboxInput.tsx

@@ -6,7 +6,6 @@ import { getInputClass, type InputVariants, type ValueInputProps } from "./Input
 import INPUT_CSS from "./Input.module.css";
 
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 
 /**
  * Props for `CheckboxInput`, a boolean-valued checkbox input.

package/ui/form/RadioInput.js

@@ -4,7 +4,6 @@ import { getClass, getModuleClass } from "../util/css.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 /**
  * Single `<input type="radio">` wrapped in a `<label>` styled as an `<Input>`.
  * - Calls `onValue(true)` when selected; label content comes from `children`, falling back to `placeholder`/`title`.

package/ui/form/RadioInput.tsx

@@ -6,7 +6,6 @@ import { getInputClass, type InputVariants, type ValueInputProps } from "./Input
 import INPUT_CSS from "./Input.module.css";
 
 const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
-const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
 
 /**
  * Props for `RadioInput`, a single labelled radio button styled as an input.

package/ui/inline/Code.d.ts

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import type { ColorVariants } from "../style/Color.js";
 import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/index.js";
 /**
@@ -7,7 +6,7 @@ import type { OptionalChildProps } from "../util/index.js";
  *
  * @see https://shelving.cc/ui/CodeProps
  */
-export interface CodeProps extends ColorVariants, TypographyVariants, OptionalChildProps {
+export interface CodeProps extends TypographyVariants, OptionalChildProps {
     plain?: boolean | undefined;
 }
 /**

package/ui/inline/Code.md

@@ -13,7 +13,7 @@ An inline code span — renders a `<code>` element with monospace type and a sub
 
 - Pick the sibling whose semantics match — they all look the same but mean different things to assistive tech and search.
 - Pass `plain` to drop the default background and inline padding (useful when the code already sits inside a tinted container).
-- Painted from the [tint ladder](/ui/TINT_CLASS): the background is `--tint-90` and the text `--tint-00`, so it re-tints with its surrounding scope.
+- Painted from the [tint ladder](/ui/TINT_CLASS): the background defaults to `--tint-90` and the text to `--tint-00`, so it re-tints with its surrounding scope (override per-instance with `--code-background` / `--code-color`).
 - Inside `<Prose>` raw `<code>` / `<kbd>` / `<samp>` / `<var>` pick up the same styling, and code inside a `<pre>` drops the inline box automatically.
 
 ## Usage
@@ -37,7 +37,7 @@ import { Code } from "shelving/ui";
 
 ## Styling
 
-`Code` paints from the [tint ladder](/ui/TINT_CLASS); the box (`background` / `color`) reads ladder steps directly, while type, padding, and radius have per-property hooks.
+`Code` paints from the [tint ladder](/ui/TINT_CLASS): the box `background` / `color` default to ladder steps so they re-tint with the surrounding scope, and every property has a per-instance override hook.
 
 | Variable | Styles | Default |
 |---|---|---|
@@ -47,5 +47,7 @@ import { Code } from "shelving/ui";
 | `--code-leading` | Line height | `var(--leading)` |
 | `--code-padding` | Inline padding (non-`plain`) | `var(--space-xxsmall)` |
 | `--code-radius` | Corner radius (non-`plain`) | `var(--radius-xxsmall)` |
+| `--code-background` | Background fill (non-`plain`) | `var(--tint-90)` |
+| `--code-color` | Text colour (non-`plain`) | `var(--tint-00)` |
 
 **Global tokens it reads:** `--font-code`, `--weight-code`, `--size-smaller`, `--leading`, `--space-xxsmall`, `--radius-xxsmall`, and the tint-ladder steps `--tint-00` / `--tint-90` for the box fill and text.

package/ui/inline/Code.module.css

@@ -24,7 +24,7 @@
 		border-radius: var(--code-radius, var(--radius-xxsmall));
 
 		/* Style */
-		background-color: var(--tint-90);
-		color: var(--tint-00);
+		background: var(--code-background, var(--tint-90));
+		color: var(--code-color, var(--tint-00));
 	}
 }

package/ui/inline/Code.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import type { ColorVariants } from "../style/Color.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/index.js";
@@ -14,7 +13,7 @@ const CODE_PLAIN_CLASS = getModuleClass(CODE_CSS, "plain");
  *
  * @see https://shelving.cc/ui/CodeProps
  */
-export interface CodeProps extends ColorVariants, TypographyVariants, OptionalChildProps {
+export interface CodeProps extends TypographyVariants, OptionalChildProps {
 	plain?: boolean | undefined;
 }
 

package/ui/inline/Deleted.d.ts

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

package/ui/inline/Deleted.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import DELETED_CSS from "./Deleted.module.css";
-const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
  *
@@ -9,6 +10,7 @@ const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children }) {
-    return _jsx("del", { className: DELETED_CLASS, children: children });
+export function Deleted({ children, ...props }) {
+    return (_jsx("del", { className: getClass(DELETED_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Deleted.md

@@ -0,0 +1,34 @@
+# Deleted
+
+Deleted text — renders a `<del>` element to mark content that has been removed from a document, shown struck through in red by default. Prefer it over a raw `<del>` inside React components so the semantics and class names stay consistent.
+
+**Things to know:**
+
+- Use `Deleted` for content genuinely removed from a document (edits, diffs, retired prices), and `<Inserted>` for content added — they pair up.
+- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="orange"`, …) recolours the strike-through. The base tint defaults to `--color-red`.
+- Inside `<Prose>` a raw `<del>` picks up the same styling, so Markdown-rendered deletions match component ones.
+
+## Usage
+
+### Marking a removed value
+
+```tsx
+import { Paragraph, Deleted, Inserted } from "shelving/ui";
+
+<Paragraph>
+  Was <Deleted>$50</Deleted> <Inserted>$35</Inserted>.
+</Paragraph>
+```
+
+## Styling
+
+`Deleted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-red`. Override `--deleted-tint` to recolour from the base, or set each property directly.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--deleted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-red)` |
+| `--deleted-color` | Text colour | `var(--tint-50)` |
+| `--deleted-decoration` | Text decoration | `line-through var(--stroke-normal)` |
+| `--deleted-weight` | Font weight | `var(--weight-strong)` |
+
+**Global tokens it reads:** `--color-red`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.

package/ui/inline/Deleted.module.css

@@ -6,11 +6,13 @@
 @layer components {
 	.deleted,
 	.prose del {
+		--tint-50: var(--deleted-tint, var(--color-red));
+
 		/* Style */
-		color: var(--color-red);
-		text-decoration: line-through var(--stroke-normal);
+		color: var(--deleted-color, var(--tint-50));
+		text-decoration: var(--deleted-decoration, line-through var(--stroke-normal));
 
 		/* Text */
-		font-weight: var(--weight-strong);
+		font-weight: var(--deleted-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Deleted.tsx

@@ -1,16 +1,17 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import DELETED_CSS from "./Deleted.module.css";
 
-const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+const DELETED_CLASS = getModuleClass(DELETED_CSS, "deleted");
 
 /**
- * Props for `Deleted` — optional `children`.
+ * Props for `Deleted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/DeletedProps
  */
-export interface DeletedProps extends OptionalChildProps {}
+export interface DeletedProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Deleted text — renders a `<del>` element to mark content removed from a document.
@@ -19,6 +20,15 @@ export interface DeletedProps extends OptionalChildProps {}
  * @example <Deleted>old price</Deleted>
  * @see https://shelving.cc/ui/Deleted
  */
-export function Deleted({ children }: DeletedProps): ReactElement {
-	return <del className={DELETED_CLASS}>{children}</del>;
+export function Deleted({ children, ...props }: DeletedProps): ReactElement {
+	return (
+		<del
+			className={getClass(
+				DELETED_CLASS, //
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</del>
+	);
 }

package/ui/inline/Emphasis.d.ts

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

package/ui/inline/Emphasis.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
 const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
 /**
@@ -9,6 +10,7 @@ const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
  * @example <Emphasis>really</Emphasis>
  * @see https://shelving.cc/ui/Emphasis
  */
-export function Emphasis({ children }) {
-    return _jsx("em", { className: EMPHASIS_CLASS, children: children });
+export function Emphasis({ children, ...props }) {
+    return (_jsx("em", { className: getClass(EMPHASIS_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Emphasis.md

@@ -0,0 +1,29 @@
+# Emphasis
+
+Emphasised text — renders an `<em>` element for stress emphasis, the kind that changes the meaning of a sentence (typically shown italic). Prefer it over a raw `<em>` or `<i>` inside React components so the semantics and class names stay consistent.
+
+**Things to know:**
+
+- Use `Emphasis` for stress emphasis (italic), `<Strong>` for importance (bold), and `<Mark>` for relevance highlighting — they are not interchangeable.
+- It only sets the font style; it inherits colour, weight, and size from the surrounding text.
+- Inside `<Prose>` raw `<em>` / `<i>` pick up the same styling, so Markdown-rendered emphasis matches component ones.
+
+## Usage
+
+### Stress emphasis in body copy
+
+```tsx
+import { Paragraph, Emphasis } from "shelving/ui";
+
+<Paragraph>
+  You were meant to turn <Emphasis>left</Emphasis>.
+</Paragraph>
+```
+
+## Styling
+
+`Emphasis` only sets its font style and inherits everything else from its surroundings.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--emphasis-style` | Font style | `italic` |

package/ui/inline/Emphasis.module.css

@@ -4,6 +4,6 @@
 	.emphasis,
 	.prose :is(em, i) {
 		/* Style */
-		font-style: italic;
+		font-style: var(--emphasis-style, italic);
 	}
 }

package/ui/inline/Emphasis.tsx

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

package/ui/inline/Inserted.d.ts

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

package/ui/inline/Inserted.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import INSERTED_CSS from "./Inserted.module.css";
 const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
 /**
@@ -9,6 +10,7 @@ const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children }) {
-    return _jsx("ins", { className: INSERTED_CLASS, children: children });
+export function Inserted({ children, ...props }) {
+    return (_jsx("ins", { className: getClass(INSERTED_CLASS, //
+        getTypographyClass(props)), children: children }));
 }

package/ui/inline/Inserted.md

@@ -0,0 +1,34 @@
+# Inserted
+
+Inserted text — renders an `<ins>` element to mark content that has been added to a document, shown underlined in green by default. Prefer it over a raw `<ins>` inside React components so the semantics and class names stay consistent.
+
+**Things to know:**
+
+- Use `Inserted` for content genuinely added to a document (edits, diffs, new prices), and `<Deleted>` for content removed — they pair up.
+- It drives its colour through the [tint ladder](/ui/TINT_CLASS), so the `color` variant (`color="purple"`, `color="blue"`, …) recolours the underline. The base tint defaults to `--color-green`.
+- Inside `<Prose>` a raw `<ins>` picks up the same styling, so Markdown-rendered insertions match component ones.
+
+## Usage
+
+### Marking an added value
+
+```tsx
+import { Paragraph, Deleted, Inserted } from "shelving/ui";
+
+<Paragraph>
+  Was <Deleted>$50</Deleted> <Inserted>$35</Inserted>.
+</Paragraph>
+```
+
+## Styling
+
+`Inserted` paints from the [tint ladder](/ui/TINT_CLASS): the `50` tint sets the text colour, defaulting to `--color-green`. Override `--inserted-tint` to recolour from the base, or set each property directly.
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--inserted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-green)` |
+| `--inserted-color` | Text colour | `var(--tint-50)` |
+| `--inserted-decoration` | Text decoration | `underline var(--stroke-normal)` |
+| `--inserted-weight` | Font weight | `var(--weight-strong)` |
+
+**Global tokens it reads:** `--color-green`, `--stroke-normal`, `--weight-strong`, and the tint-ladder step `--tint-50`.

package/ui/inline/Inserted.module.css

@@ -6,11 +6,13 @@
 @layer components {
 	.inserted,
 	.prose ins {
+		--tint-50: var(--inserted-tint, var(--color-green));
+
 		/* Style */
-		color: var(--color-green);
-		text-decoration: underline var(--stroke-normal);
+		color: var(--inserted-color, var(--tint-50));
+		text-decoration: var(--inserted-decoration, underline var(--stroke-normal));
 
 		/* Text */
-		font-weight: var(--weight-strong);
+		font-weight: var(--inserted-weight, var(--weight-strong));
 	}
 }

package/ui/inline/Inserted.tsx

@@ -1,16 +1,17 @@
 import type { ReactElement } from "react";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import INSERTED_CSS from "./Inserted.module.css";
 
 const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
 
 /**
- * Props for `Inserted` — optional `children`.
+ * Props for `Inserted` — colour and typography variants, plus optional `children`.
  *
  * @see https://shelving.cc/ui/InsertedProps
  */
-export interface InsertedProps extends OptionalChildProps {}
+export interface InsertedProps extends OptionalChildProps, TypographyVariants {}
 
 /**
  * Inserted text — renders an `<ins>` element to mark content added to a document.
@@ -19,6 +20,15 @@ export interface InsertedProps extends OptionalChildProps {}
  * @example <Inserted>new price</Inserted>
  * @see https://shelving.cc/ui/Inserted
  */
-export function Inserted({ children }: InsertedProps): ReactElement {
-	return <ins className={INSERTED_CLASS}>{children}</ins>;
+export function Inserted({ children, ...props }: InsertedProps): ReactElement {
+	return (
+		<ins
+			className={getClass(
+				INSERTED_CLASS, //
+				getTypographyClass(props),
+			)}
+		>
+			{children}
+		</ins>
+	);
 }

package/ui/inline/Link.d.ts

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

package/ui/inline/Link.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
-import { getModuleClass } from "../util/css.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";
 const LINK_CLASS = getModuleClass(LINK_CSS, "link");
 /**
@@ -10,5 +11,6 @@ const LINK_CLASS = getModuleClass(LINK_CSS, "link");
  * @see https://shelving.cc/ui/Link
  */
 export function Link(props) {
-    return _jsx(Clickable, { ...props, className: LINK_CLASS });
+    return (_jsx(Clickable, { ...props, className: getClass(LINK_CLASS, //
+        getTypographyClass(props)) }));
 }