shelving 1.264.0 → 1.264.1

package/ui/button/RetryButton.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { createContext, use } from "react";
+import { Button } 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 const RetryContext = createContext(undefined);
+RetryContext.displayName = "RetryContext";
+const _RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
+/**
+ * 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 function RetryButton({ children = _RETRY_CHILDREN, ...props }) {
+    const retry = use(RetryContext);
+    if (!retry)
+        return null;
+    return (_jsx(Button, { onClick: retry, ...props, children: children }));
+}

package/ui/button/RetryButton.tsx

@@ -0,0 +1,48 @@
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+import { createContext, type ReactElement, use } from "react";
+import type { Callback } from "../../util/function.js";
+import type { OptionalChildProps } from "../util/index.js";
+import { Button, 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 const RetryContext = createContext<Callback | undefined>(undefined);
+RetryContext.displayName = "RetryContext";
+
+/**
+ * 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 {}
+
+const _RETRY_CHILDREN = (
+	<>
+		<ArrowPathIcon />
+		Retry
+	</>
+);
+
+/**
+ * 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 function RetryButton({ children = _RETRY_CHILDREN, ...props }: RetryButtonProps): ReactElement | null {
+	const retry = use(RetryContext);
+	if (!retry) return null;
+	return (
+		<Button onClick={retry} {...props}>
+			{children}
+		</Button>
+	);
+}

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

@@ -1,6 +1,17 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants } from "./Button.js";
+/**
+ * Component props for `<SubmitButton>`, a form submit button.
+ *
+ * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
+ * @property strong - Whether the button should have strong styling. Defaults to `true`
+ * @property color - The color variant of the button. Defaults to `"primary"`
+ *
+ * @see https://shelving.cc/ui/SubmitButtonProps
+ */
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
+}
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
  * - Defaults to strong, full-width, primary styling and a "Save" label.
@@ -9,11 +20,4 @@ import { type ButtonVariants } from "./Button.js";
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export declare function SubmitButton({ children, strong, color, full, ...variants }: SubmitButtonProps): ReactElement;
-/**
- * Props for `SubmitButton`, a form submit button.
- *
- * @see https://shelving.cc/ui/SubmitButtonProps
- */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {
-}
+export declare function SubmitButton({ children, strong, color, full, ...props }: SubmitButtonProps): ReactElement;

package/ui/{form → button}/SubmitButton.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import { useStore } from "../../react/useStore.js";
+import { requireForm } from "../form/FormContext.js";
 import { LOADING } from "../misc/Loading.js";
 import { getButtonClass } from "./Button.js";
-import { requireForm } from "./FormContext.js";
+const _SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
  * - Defaults to strong, full-width, primary styling and a "Save" label.
@@ -12,9 +13,8 @@ import { requireForm } from "./FormContext.js";
  * @example <SubmitButton>Save changes</SubmitButton>
  * @see https://shelving.cc/ui/SubmitButton
  */
-export function SubmitButton({ children = SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...variants }) {
+export function SubmitButton({ children = _SUBMIT_CHILDREN, strong = true, color = "primary", full = true, ...props }) {
     const form = requireForm();
     const busy = useStore(form.busy).value;
-    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...variants }), children: busy ? LOADING : children }));
+    return (_jsx("button", { type: "submit", disabled: busy, className: getButtonClass({ strong, color, full, ...props }), children: busy ? LOADING : children }));
 }
-const SUBMIT_CHILDREN = (_jsxs(_Fragment, { children: ["Save", _jsx(ArrowRightIcon, {})] }));

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

@@ -1,10 +1,28 @@
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import type { ReactElement } from "react";
 import { useStore } from "../../react/useStore.js";
+import { requireForm } from "../form/FormContext.js";
 import { LOADING } from "../misc/Loading.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { type ButtonVariants, getButtonClass } from "./Button.js";
-import { requireForm } from "./FormContext.js";
+
+/**
+ * Component props for `<SubmitButton>`, a form submit button.
+ *
+ * @property children - The content of the button. Defaults to `"Save"` with a right-pointing arrow icon.
+ * @property strong - Whether the button should have strong styling. Defaults to `true`
+ * @property color - The color variant of the button. Defaults to `"primary"`
+ *
+ * @see https://shelving.cc/ui/SubmitButtonProps
+ */
+export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {}
+
+const _SUBMIT_CHILDREN = (
+	<>
+		Save
+		<ArrowRightIcon />
+	</>
+);
 
 /**
  * Submit button for a form that disables itself and shows a spinner while the form is busy.
@@ -15,31 +33,17 @@ import { requireForm } from "./FormContext.js";
  * @see https://shelving.cc/ui/SubmitButton
  */
 export function SubmitButton({
-	children = SUBMIT_CHILDREN,
+	children = _SUBMIT_CHILDREN,
 	strong = true,
 	color = "primary",
 	full = true,
-	...variants
+	...props
 }: SubmitButtonProps): ReactElement {
 	const form = requireForm();
 	const busy = useStore(form.busy).value;
 	return (
-		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...variants })}>
+		<button type="submit" disabled={busy} className={getButtonClass({ strong, color, full, ...props })}>
 			{busy ? LOADING : children}
 		</button>
 	);
 }
-
-/**
- * Props for `SubmitButton`, a form submit button.
- *
- * @see https://shelving.cc/ui/SubmitButtonProps
- */
-export interface SubmitButtonProps extends ButtonVariants, OptionalChildProps {}
-
-const SUBMIT_CHILDREN = (
-	<>
-		Save
-		<ArrowRightIcon />
-	</>
-);

package/ui/button/index.d.ts

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/button/index.js

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/button/index.ts

@@ -0,0 +1,5 @@
+export * from "../button/Button.js";
+export * from "../button/Clickable.js";
+export * from "../button/FullscreenButton.js";
+export * from "../button/RetryButton.js";
+export * from "../button/SubmitButton.js";

package/ui/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../form/Button.js";
+import type { ButtonVariants } from "../button/Button.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `<Dialog>` — optional `children` content and an `onClose` callback.

package/ui/dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
 import type { Callback } from "../../util/function.js";
-import type { ButtonVariants } from "../form/Button.js";
+import type { ButtonVariants } from "../button/Button.js";
 import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Dialog.module.css";

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/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>
 	);
 }