shelving 1.264.0 → 1.264.2

package/ui/docs/DocumentationReferences.tsx

@@ -39,7 +39,7 @@ export function DocumentationReferences({ types }: DocumentationReferencesProps)
 							<Cell header width="fit">
 								Type
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationReturns.js

@@ -21,5 +21,5 @@ export function DocumentationReturns({ returns }) {
     const map = useTreeMap();
     if (!returns?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Return" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Return" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: returns.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
 }

package/ui/docs/DocumentationReturns.tsx

@@ -43,7 +43,7 @@ export function DocumentationReturns({ returns }: DocumentationReturnsProps): Re
 							<Cell header width="fit">
 								Return
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/docs/DocumentationSearchPage.js

@@ -7,8 +7,8 @@ import { Panel } from "../block/Panel.js";
 import { Row } from "../block/Row.js";
 import { Header, Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
-import { CheckboxInput } from "../form/CheckboxInput.js";
-import { TextInput } from "../form/TextInput.js";
+import { CheckboxInput } from "../input/CheckboxInput.js";
+import { TextInput } from "../input/TextInput.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
 import { useTreeMap } from "../tree/TreeContext.js";

package/ui/docs/DocumentationSearchPage.tsx

@@ -8,8 +8,8 @@ import { Panel } from "../block/Panel.js";
 import { Row } from "../block/Row.js";
 import { Header, Section } from "../block/Section.js";
 import { Title } from "../block/Title.js";
-import { CheckboxInput } from "../form/CheckboxInput.js";
-import { TextInput } from "../form/TextInput.js";
+import { CheckboxInput } from "../input/CheckboxInput.js";
+import { TextInput } from "../input/TextInput.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
 import { useTreeMap } from "../tree/TreeContext.js";

package/ui/docs/DocumentationThrows.js

@@ -21,5 +21,5 @@ export function DocumentationThrows({ throws }) {
     const map = useTreeMap();
     if (!throws?.length)
         return null;
-    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Throws" }), _jsx(Cell, { header: true, width: "xxnarrow", grow: true })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
+    return (_jsx(Section, { children: _jsx(Scroll, { horizontal: true, children: _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx(Cell, { header: true, width: "fit", children: "Throws" }), _jsx(Cell, { header: true, width: "16x", grow: true })] }) }), _jsx("tbody", { children: throws.map(({ type = DEFAULT_TYPE, description }) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(TreeLink, { name: type, nowrap: true }) }), _jsx("td", { children: _jsx(DocumentationDescription, { description: description || getTreeElement(map, type)?.props.description }) })] }, `${type}-${description}`))) })] }) }) }));
 }

package/ui/docs/DocumentationThrows.tsx

@@ -43,7 +43,7 @@ export function DocumentationThrows({ throws }: DocumentationThrowsProps): React
 							<Cell header width="fit">
 								Throws
 							</Cell>
-							<Cell header width="xxnarrow" grow />
+							<Cell header width="16x" grow />
 						</tr>
 					</thead>
 					<tbody>

package/ui/form/Field.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { Field } from "./Field.js";
+import { Field } from "shelving/ui";
 
 describe("Field", () => {
 	test("does not render a message container when there is no message", () => {

package/ui/form/FormContext.d.ts

@@ -1,8 +1,8 @@
 import type { Schema } from "../../schema/Schema.js";
 import type { Data } from "../../util/data.js";
 import type { AnyCaller } from "../../util/function.js";
+import { type SchemaInputProps } from "../input/SchemaInput.js";
 import type { FormStore } from "./FormStore.js";
-import { type SchemaInputProps } from "./SchemaInput.js";
 /**
  * React context holding the current `FormStore`, provided by the `Form` component.
  *

package/ui/form/FormContext.js

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 import { useStore } from "../../react/useStore.js";
+import { isSchemaRequired } from "../input/SchemaInput.js";
 import { requireContext } from "../util/context.js";
-import { isSchemaRequired } from "./SchemaInput.js";
 /**
  * React context holding the current `FormStore`, provided by the `Form` component.
  *

package/ui/form/FormContext.tsx

@@ -3,9 +3,9 @@ import { useStore } from "../../react/useStore.js";
 import type { Schema } from "../../schema/Schema.js";
 import type { Data } from "../../util/data.js";
 import type { AnyCaller } from "../../util/function.js";
+import { isSchemaRequired, type SchemaInputProps } from "../input/SchemaInput.js";
 import { requireContext } from "../util/context.js";
 import type { FormStore } from "./FormStore.js";
-import { isSchemaRequired, type SchemaInputProps } from "./SchemaInput.js";
 
 /**
  * React context holding the current `FormStore`, provided by the `Form` component.

package/ui/form/FormFields.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { InputProps } from "./Input.js";
+import type { InputProps } from "../input/Input.js";
 /**
  * Show a `<Field>` (label, input, and message) for a single named property of the current form.
  *

package/ui/form/FormFields.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useStore } from "../../react/useStore.js";
+import { SchemaInput } from "../input/SchemaInput.js";
 import { Field } from "./Field.js";
 import { requireForm, useField } from "./FormContext.js";
-import { SchemaInput } from "./SchemaInput.js";
 /**
  * Show a `<Field>` (label, input, and message) for a single named property of the current form.
  *

package/ui/form/FormFields.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
+import type { InputProps } from "../input/Input.js";
+import { SchemaInput } from "../input/SchemaInput.js";
 import { Field } from "./Field.js";
 import { requireForm, useField } from "./FormContext.js";
-import type { InputProps } from "./Input.js";
-import { SchemaInput } from "./SchemaInput.js";
 
 /**
  * Show a `<Field>` (label, input, and message) for a single named property of the current form.

package/ui/form/FormFooter.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "../block/Row.js";
 import { Footer } from "../block/Section.js";
+import { SubmitButton } from "../button/SubmitButton.js";
 import { FormMessage } from "./FormMessage.js";
-import { SubmitButton } from "./SubmitButton.js";
 /**
  * Show a form footer with a submit button and the form's error message.
  * - Renders a row containing a `SubmitButton` (and any extra buttons passed as `children`).

package/ui/form/FormFooter.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { Row } from "../block/Row.js";
 import { Footer } from "../block/Section.js";
+import { SubmitButton } from "../button/SubmitButton.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { FormMessage } from "./FormMessage.js";
-import { SubmitButton } from "./SubmitButton.js";
 
 /**
  * Props for `FormFooter`, the submit-button-and-message footer for a form.

package/ui/form/FormInput.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { InputProps } from "./Input.js";
+import type { InputProps } from "../input/Input.js";
 /**
  * Props for `FormInput`, a bare `SchemaInput` bound to a named form field.
  *

package/ui/form/FormInput.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { SchemaInput } from "../input/SchemaInput.js";
 import { requireForm, useField } from "./FormContext.js";
-import { SchemaInput } from "./SchemaInput.js";
 /**
  * Show a `SchemaInput` for a single named property of the current form.
  * - Reads the field's value, schema, and message from the form context via `useField()`.

package/ui/form/FormInput.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
+import type { InputProps } from "../input/Input.js";
+import { SchemaInput } from "../input/SchemaInput.js";
 import { requireForm, useField } from "./FormContext.js";
-import type { InputProps } from "./Input.js";
-import { SchemaInput } from "./SchemaInput.js";
 
 /**
  * Props for `FormInput`, a bare `SchemaInput` bound to a named form field.

package/ui/form/Progress.d.ts

@@ -6,37 +6,19 @@ import type { ReactElement } from "react";
  */
 export interface ProgressProps {
     value: number;
+    min?: number;
+    max?: number;
     success?: boolean;
     warning?: boolean;
     danger?: boolean;
 }
 /**
- * Show progress as a single continuous horizontal bar, filled to `value` clamped between `0` and `1`.
+ * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
+ * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
  *
  * @returns A progress bar element.
  * @kind component
- * @example <Progress value={0.5} />
+ * @example <Progress value={3} max={4} />
  * @see https://shelving.cc/ui/Progress
  */
-export declare function Progress({ value, success, warning, danger }: ProgressProps): ReactElement | null;
-/**
- * Props for `SegmentedProgress`, a stepped progress bar of discrete segments.
- *
- * @see https://shelving.cc/ui/SegmentedProgressProps
- */
-export interface SegmentedProgressProps {
-    total: number;
-    current: number;
-    success?: boolean;
-    warning?: boolean;
-    danger?: boolean;
-}
-/**
- * Show step progress as a horizontal bar of `total` segments, of which `current + 1` are filled.
- *
- * @returns A segmented progress bar element, or `null` when `total` is not positive.
- * @kind component
- * @example <SegmentedProgress total={4} current={1} />
- * @see https://shelving.cc/ui/SegmentedProgress
- */
-export declare function SegmentedProgress({ total, current, success, warning, danger }: SegmentedProgressProps): ReactElement | null;
+export declare function Progress({ value, min, max, success, warning, danger }: ProgressProps): ReactElement | null;

package/ui/form/Progress.js

@@ -1,30 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { formatPercent } from "../../util/format.js";
+import { getPercent } from "../../util/number.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 /**
- * Show progress as a single continuous horizontal bar, filled to `value` clamped between `0` and `1`.
+ * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
+ * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
  *
  * @returns A progress bar element.
  * @kind component
- * @example <Progress value={0.5} />
+ * @example <Progress value={3} max={4} />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, success, warning, danger }) {
-    const clamped = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
-    const progressStyle = { ["--progress-value"]: `${clamped * 100}%` };
-    return (_jsx("div", { className: getClass(getModuleClass(styles, "track"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), style: progressStyle, children: _jsx("span", { className: getModuleClass(styles, "fill") }) }));
-}
-/**
- * Show step progress as a horizontal bar of `total` segments, of which `current + 1` are filled.
- *
- * @returns A segmented progress bar element, or `null` when `total` is not positive.
- * @kind component
- * @example <SegmentedProgress total={4} current={1} />
- * @see https://shelving.cc/ui/SegmentedProgress
- */
-export function SegmentedProgress({ total, current, success, warning, danger }) {
-    if (total <= 0)
-        return null;
-    const progressStyle = { ["--progress-steps"]: total };
-    return (_jsx("div", { className: getClass(getModuleClass(styles, "segmented"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), style: progressStyle, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: getClass(getModuleClass(styles, "item"), i <= current && getModuleClass(styles, "active")) }, i.toString()))) }));
+export function Progress({ value, min = 0, max = 100, success, warning, danger }) {
+    const percent = getPercent(value - min, max - min);
+    const fillStyle = { width: `${Number.isFinite(percent) ? percent : 0}%` };
+    return (_jsx("figure", { className: getClass(getModuleClass(styles, "track"), success && getModuleClass(styles, "success"), warning && getModuleClass(styles, "warning"), danger && getModuleClass(styles, "danger")), role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": formatPercent(value - min, max - min), children: _jsx("span", { className: getModuleClass(styles, "fill"), style: fillStyle }) }));
 }

package/ui/form/Progress.module.css

@@ -7,51 +7,32 @@
 	/* Continuous progress bar — a single track that fills horizontally. */
 	.track {
 		position: relative;
+		margin: 0;
 		inline-size: 100%;
 		height: var(--progress-height, 0.375rem);
 		border-radius: var(--progress-radius, 999px);
-		background: var(--progress-color-bg, var(--tint-90));
+		background: var(--progress-background, var(--tint-90));
 		overflow: hidden;
 	}
 
 	.fill {
 		display: block;
 		block-size: 100%;
-		inline-size: var(--progress-value, 0%);
-		background: var(--progress-color-active, var(--color-blue));
-		transition:
-			inline-size 160ms ease-out,
-			background-color var(--duration-fast) ease-in-out;
-	}
-
-	/* Segmented progress — a grid of N items, of which some are `.active`. */
-	.segmented {
-		display: grid;
-		grid-template-columns: repeat(var(--progress-steps), minmax(0, 1fr));
-		gap: var(--progress-gap, 0.375rem);
-	}
-
-	.item {
-		height: var(--progress-height, 0.375rem);
-		border-radius: var(--progress-radius, 999px);
-		background: var(--progress-color-bg, var(--tint-90));
-	}
-
-	.active {
-		background: var(--progress-color-active, var(--color-blue));
+		/* Width is set inline; clamp overspill to the track here. */
+		min-width: 0px;
+		max-width: 100%;
+		background: var(--progress-color, var(--color-blue));
+		transition: all var(--duration-fast);
 	}
 
 	/* Status variants applied at the container level. */
-	.success .fill,
-	.success .active {
-		background: var(--progress-success-color-active, var(--color-green));
+	.success .fill {
+		background: var(--progress-success, var(--color-green));
 	}
-	.warning .fill,
-	.warning .active {
-		background: var(--progress-warning-color-active, var(--color-orange));
+	.warning .fill {
+		background: var(--progress-warning, var(--color-orange));
 	}
-	.danger .fill,
-	.danger .active {
-		background: var(--progress-danger-color-active, var(--color-red));
+	.danger .fill {
+		background: var(--progress-danger, var(--color-red));
 	}
 }

package/ui/form/Progress.tsx

@@ -1,4 +1,6 @@
 import type { CSSProperties, ReactElement } from "react";
+import { formatPercent } from "../../util/format.js";
+import { getPercent } from "../../util/number.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Progress.module.css";
 
@@ -9,76 +11,41 @@ import styles from "./Progress.module.css";
  */
 export interface ProgressProps {
 	value: number;
+	min?: number;
+	max?: number;
 	success?: boolean;
 	warning?: boolean;
 	danger?: boolean;
 }
 
 /**
- * Show progress as a single continuous horizontal bar, filled to `value` clamped between `0` and `1`.
+ * Show progress as a single continuous horizontal bar, filled to `value` within the `min`–`max` range (matches `getPercent()` and `formatPercent()`).
+ * - The fill is allowed to overspill; CSS clamps it to the `0%`–`100%` range via `min-width`/`max-width`.
  *
  * @returns A progress bar element.
  * @kind component
- * @example <Progress value={0.5} />
+ * @example <Progress value={3} max={4} />
  * @see https://shelving.cc/ui/Progress
  */
-export function Progress({ value, success, warning, danger }: ProgressProps): ReactElement | null {
-	const clamped = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
-	const progressStyle = { ["--progress-value" as string]: `${clamped * 100}%` } as CSSProperties;
+export function Progress({ value, min = 0, max = 100, success, warning, danger }: ProgressProps): ReactElement | null {
+	const percent = getPercent(value - min, max - min);
+	const fillStyle = { width: `${Number.isFinite(percent) ? percent : 0}%` } as CSSProperties;
 
 	return (
-		<div
+		<figure
 			className={getClass(
 				getModuleClass(styles, "track"),
 				success && getModuleClass(styles, "success"),
 				warning && getModuleClass(styles, "warning"),
 				danger && getModuleClass(styles, "danger"),
 			)}
-			style={progressStyle}
+			role="progressbar"
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={value}
+			aria-valuetext={formatPercent(value - min, max - min)}
 		>
-			<span className={getModuleClass(styles, "fill")} />
-		</div>
-	);
-}
-
-/**
- * Props for `SegmentedProgress`, a stepped progress bar of discrete segments.
- *
- * @see https://shelving.cc/ui/SegmentedProgressProps
- */
-export interface SegmentedProgressProps {
-	total: number;
-	current: number;
-	success?: boolean;
-	warning?: boolean;
-	danger?: boolean;
-}
-
-/**
- * Show step progress as a horizontal bar of `total` segments, of which `current + 1` are filled.
- *
- * @returns A segmented progress bar element, or `null` when `total` is not positive.
- * @kind component
- * @example <SegmentedProgress total={4} current={1} />
- * @see https://shelving.cc/ui/SegmentedProgress
- */
-export function SegmentedProgress({ total, current, success, warning, danger }: SegmentedProgressProps): ReactElement | null {
-	if (total <= 0) return null;
-	const progressStyle = { ["--progress-steps" as string]: total } as CSSProperties;
-
-	return (
-		<div
-			className={getClass(
-				getModuleClass(styles, "segmented"),
-				success && getModuleClass(styles, "success"),
-				warning && getModuleClass(styles, "warning"),
-				danger && getModuleClass(styles, "danger"),
-			)}
-			style={progressStyle}
-		>
-			{Array.from({ length: total }, (_, i) => (
-				<span key={i.toString()} className={getClass(getModuleClass(styles, "item"), i <= current && getModuleClass(styles, "active"))} />
-			))}
-		</div>
+			<span className={getModuleClass(styles, "fill")} style={fillStyle} />
+		</figure>
 	);
 }

package/ui/form/index.d.ts

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/form/index.js

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/form/index.ts

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/index.js

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/index.ts

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/inline/Deleted.md

@@ -5,7 +5,7 @@ Deleted text — renders a `<del>` element to mark content that has been removed
 **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`.
+- It colours itself directly from `--color-red` rather than the tint ladder, so a deletion stays a consistent red even inside a tinted region; change it with `--deleted-color`.
 - Inside `<Prose>` a raw `<del>` picks up the same styling, so Markdown-rendered deletions match component ones.
 
 ## Usage
@@ -22,13 +22,12 @@ import { Paragraph, Deleted, Inserted } from "shelving/ui";
 
 ## 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.
+`Deleted` colours its text directly from `--color-red` (not the tint ladder), so deletions stay a consistent red regardless of the surrounding tint. Override `--deleted-color` to recolour.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--deleted-tint` | Base tint (`--tint-50`) the colour derives from | `var(--color-red)` |
-| `--deleted-color` | Text colour | `var(--tint-50)` |
+| `--deleted-color` | Text colour | `var(--color-red)` |
 | `--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`.
+**Global tokens it reads:** `--color-red`, `--stroke-normal`, and `--weight-strong`.

package/ui/inline/Deleted.module.css

@@ -6,10 +6,8 @@
 @layer components {
 	.deleted,
 	.prose del {
-		--tint-50: var(--deleted-tint, var(--color-red));
-
 		/* Style */
-		color: var(--deleted-color, var(--tint-50));
+		color: var(--deleted-color, var(--color-red));
 		text-decoration: var(--deleted-decoration, line-through var(--stroke-normal));
 
 		/* Text */