shelving 1.267.6 → 1.268.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.267.6",
+	"version": "1.268.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -15,10 +15,12 @@
 		"@types/bun": "^1.3.14",
 		"@types/react": "^19.2.17",
 		"@types/react-dom": "^19.2.3",
-		"@typescript/native-preview": "^7.0.0-dev.20260704.1",
+		"@typescript/native-preview": "^7.0.0-dev.20260706.1",
 		"firebase": "^12.15.0",
 		"react": "^19.3.0-canary-fef12a01-20260413",
 		"react-dom": "^19.3.0-canary-fef12a01-20260413",
+		"stylelint": "^17.14.0",
+		"stylelint-config-standard": "^40.0.0",
 		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
@@ -68,9 +70,11 @@
 		"test": "bun run --parallel test:*",
 		"test:lint": "biome check .",
 		"test:type": "tsgo --noEmit",
+		"test:style": "stylelint \"modules/**/*.css\"",
 		"test:unit": "bun test ./modules --concurrent --only-failures",
 		"fix": "bun run --sequential fix:*",
 		"fix:0:lint": "biome check --write .",
+		"fix:1:style": "stylelint \"modules/**/*.css\" --fix",
 		"docs:build": "bun ./docs/build.tsx",
 		"docs:start": "bun ./docs/start.tsx",
 		"build": "bun run --sequential build:*",

package/ui/block/Address.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Space.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.address,

package/ui/block/Blockquote.module.css

@@ -1,8 +1,8 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.blockquote,

package/ui/block/Caption.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Typography.module.css";
-@import "../style/Space.module.css";
-@import "../style/Color.module.css";
+@import url("../style/layers.css");
+@import url("../style/Typography.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Color.module.css");
 
 @layer components {
 	.caption,
@@ -22,6 +22,7 @@
 	.prose figcaption + * {
 		margin-block-start: 0;
 	}
+
 	:has(+ .caption),
 	.prose :has(+ figcaption) {
 		margin-block-end: 0;

package/ui/block/Card.module.css

@@ -1,10 +1,10 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
 
 @layer defaults {
 	.card {

package/ui/block/Definitions.module.css

@@ -1,8 +1,8 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Typography.module.css";
-@import "../style/Color.module.css";
-@import "../style/Gap.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Typography.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Gap.module.css");
 
 @layer components {
 	.definitions,
@@ -24,6 +24,7 @@
 			display: block;
 			margin: 0;
 		}
+
 		dt {
 			/* Box */
 			margin-block-start: var(--definitions-gap, var(--space-small));

package/ui/block/Details.module.css

@@ -1,10 +1,10 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Tint.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Tint.module.css");
 
 @layer components {
 	.prose details,
@@ -37,6 +37,7 @@
 			&::marker {
 				color: var(--details-marker-color, var(--tint-80));
 			}
+
 			&::before {
 				position: absolute;
 				content: "";
@@ -100,6 +101,7 @@
 					transform: rotate(0deg);
 				}
 			}
+
 			&::details-content {
 				block-size: fit-content;
 				opacity: 1;

package/ui/block/Divider.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
 
 @layer components {
 	.divider,

package/ui/block/Heading.module.css

@@ -1,14 +1,13 @@
-@import "../style/layers.css";
-@import "../style/Tint.module.css";
-@import "../style/Color.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.heading,
 	.prose h2 {
 		/* Box */
-		margin-block-start: var(--heading-space-before, var(--space-section));
-		margin-block-end: var(--heading-space, var(--space-paragraph));
+		margin-block: var(--heading-space-before, var(--space-section)) var(--heading-space, var(--space-paragraph));
 
 		/* Text */
 		font-family: var(--heading-font, var(--font-title));

package/ui/block/Image.module.css

@@ -1,5 +1,5 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
 
 @layer components {
 	.image,

package/ui/block/Label.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.label {

package/ui/block/List.module.css

@@ -1,8 +1,8 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
-@import "../style/Color.module.css";
-@import "../style/Gap.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Gap.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.unordered,
@@ -44,6 +44,7 @@
 		&:first-child {
 			margin-block-start: 0;
 		}
+
 		&:last-child {
 			margin-block-end: 0;
 		}

package/ui/block/Panel.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Space.module.css";
+@import url("../style/layers.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Space.module.css");
 
 /*
  * Full-width vertical region that paints the current surface. Panels always have zero block-space
@@ -32,6 +32,7 @@
 		&:first-child {
 			border-top: none;
 		}
+
 		&:last-child {
 			border-bottom: none;
 		}

package/ui/block/Paragraph.module.css

@@ -1,5 +1,5 @@
-@import "../style/layers.css";
-@import "../style/Space.module.css";
+@import url("../style/layers.css");
+@import url("../style/Space.module.css");
 
 @layer components {
 	.prose p,

package/ui/block/Preformatted.module.css

@@ -1,11 +1,11 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Width.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Width.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.preformatted,
@@ -29,8 +29,8 @@
 		outline-offset: calc(0px - var(--preformatted-stroke, var(--stroke-normal)));
 
 		/* Text */
-		font-family: var(--preformatted-font, var(--font-preformatted));
-		font-weight: var(--preformatted-weight, var(--weight-preformatted));
+		font-family: var(--preformatted-font, var(--font-code));
+		font-weight: var(--preformatted-weight, var(--weight-code));
 		font-size: var(--preformatted-size, var(--size-normal));
 		line-height: var(--preformatted-leading, var(--leading));
 		text-transform: none;
@@ -39,8 +39,7 @@
 		overflow-wrap: normal;
 
 		/* Scrolling */
-		overflow-y: hidden;
-		overflow-x: auto;
+		overflow: auto hidden;
 		overscroll-behavior-x: none;
 		scroll-behavior: smooth;
 
@@ -59,6 +58,7 @@
 		&:first-child {
 			margin-block-start: 0;
 		}
+
 		&:last-child {
 			margin-block-end: 0;
 		}

package/ui/block/Prose.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import PROGRESS_CSS from "../form/Progress.module.css";
 import CODE_CSS from "../inline/Code.module.css";
 import DELETED_CSS from "../inline/Deleted.module.css";
 import EMPHASIS_CSS from "../inline/Emphasis.module.css";
@@ -27,7 +28,7 @@ import SUBHEADING_CSS from "./Subheading.module.css";
 import TITLE_CSS from "./Title.module.css";
 import VIDEO_CSS from "./Video.module.css";
 // Combine the `.prose` class from every block and inline component's CSS module into a single string.
-const PROSE_STYLES = getClass(getModuleClass(BLOCK_CSS, "prose"), getModuleClass(VIDEO_CSS, "prose"), getModuleClass(PARAGRAPH_CSS, "prose"), getModuleClass(HEADING_CSS, "prose"), getModuleClass(SUBHEADING_CSS, "prose"), getModuleClass(ADDRESS_CSS, "prose"), getModuleClass(BLOCKQUOTE_CSS, "prose"), getModuleClass(SECTION_CSS, "prose"), getModuleClass(CODE_CSS, "prose"), getModuleClass(DEFINITIONS_CSS, "prose"), getModuleClass(DELETED_CSS, "prose"), getModuleClass(EMPHASIS_CSS, "prose"), getModuleClass(IMAGE_CSS, "prose"), getModuleClass(INSERTED_CSS, "prose"), getModuleClass(CAPTION_CSS, "prose"), getModuleClass(LIST_CSS, "prose"), getModuleClass(TITLE_CSS, "prose"), getModuleClass(LINK_CSS, "prose"), getModuleClass(MARK_CSS, "prose"), getModuleClass(PREFORMATTED_CSS, "prose"), getModuleClass(SMALL_CSS, "prose"), getModuleClass(STRONG_CSS, "prose"), getModuleClass(SUBSCRIPT_CSS, "prose"), getModuleClass(SUPERSCRIPT_CSS, "prose"), getModuleClass(TABLE_CSS, "prose"), getModuleClass(DIVIDER_CSS, "prose"));
+const PROSE_STYLES = getClass(getModuleClass(BLOCK_CSS, "prose"), getModuleClass(VIDEO_CSS, "prose"), getModuleClass(PARAGRAPH_CSS, "prose"), getModuleClass(HEADING_CSS, "prose"), getModuleClass(SUBHEADING_CSS, "prose"), getModuleClass(ADDRESS_CSS, "prose"), getModuleClass(BLOCKQUOTE_CSS, "prose"), getModuleClass(SECTION_CSS, "prose"), getModuleClass(CODE_CSS, "prose"), getModuleClass(DEFINITIONS_CSS, "prose"), getModuleClass(DELETED_CSS, "prose"), getModuleClass(EMPHASIS_CSS, "prose"), getModuleClass(IMAGE_CSS, "prose"), getModuleClass(INSERTED_CSS, "prose"), getModuleClass(CAPTION_CSS, "prose"), getModuleClass(LIST_CSS, "prose"), getModuleClass(TITLE_CSS, "prose"), getModuleClass(LINK_CSS, "prose"), getModuleClass(MARK_CSS, "prose"), getModuleClass(PREFORMATTED_CSS, "prose"), getModuleClass(PROGRESS_CSS, "prose"), getModuleClass(SMALL_CSS, "prose"), getModuleClass(STRONG_CSS, "prose"), getModuleClass(SUBSCRIPT_CSS, "prose"), getModuleClass(SUPERSCRIPT_CSS, "prose"), getModuleClass(TABLE_CSS, "prose"), getModuleClass(DIVIDER_CSS, "prose"));
 /**
  * A section of longform text containing lots of `<p>` or `<ul>` style elements.
  * - Applies the prose variant of every block and inline component so nested content picks up the right longform spacing and typography.

package/ui/block/Prose.md

@@ -4,7 +4,7 @@ A wrapper that applies cohesive longform typography to a subtree of mixed HTML c
 
 **Things to know:**
 
-- `Prose` applies the "prose" variant of *every* block and inline component as a single compound class, so raw `<p>`, `<ul>`, `<h2>`, `<code>`, `<a>`, etc. are styled to match their component counterparts (`<Paragraph>`, `<List>`, `<Heading>`, `<Code>`, `<Link>`, …).
+- `Prose` applies the "prose" variant of *every* block and inline component as a single compound class, so raw `<p>`, `<ul>`, `<h2>`, `<code>`, `<a>`, `<progress>`, etc. are styled to match their component counterparts (`<Paragraph>`, `<List>`, `<Heading>`, `<Code>`, `<Link>`, `<Progress>`, …).
 - This is the bridge for markup: wrap `shelving/markup` output (or anything that emits raw HTML) in `<Prose>` and it just works — no per-element component wrapping needed.
 - It only sets up typography and its own outer margin; it paints no colour and adds no box of its own.
 

package/ui/block/Prose.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import PROGRESS_CSS from "../form/Progress.module.css";
 import CODE_CSS from "../inline/Code.module.css";
 import DELETED_CSS from "../inline/Deleted.module.css";
 import EMPHASIS_CSS from "../inline/Emphasis.module.css";
@@ -50,6 +51,7 @@ const PROSE_STYLES = getClass(
 	getModuleClass(LINK_CSS, "prose"),
 	getModuleClass(MARK_CSS, "prose"),
 	getModuleClass(PREFORMATTED_CSS, "prose"),
+	getModuleClass(PROGRESS_CSS, "prose"),
 	getModuleClass(SMALL_CSS, "prose"),
 	getModuleClass(STRONG_CSS, "prose"),
 	getModuleClass(SUBSCRIPT_CSS, "prose"),

package/ui/block/Section.module.css

@@ -1,9 +1,9 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Indent.module.css";
-@import "../style/Typography.module.css";
-@import "../style/Space.module.css";
-@import "../style/Width.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Indent.module.css");
+@import url("../style/Typography.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Width.module.css");
 
 @layer components {
 	.prose :where(section, article, aside, nav, header, footer, figure),

package/ui/block/Subheading.module.css

@@ -1,14 +1,13 @@
-@import "../style/layers.css";
-@import "../style/Tint.module.css";
-@import "../style/Color.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.subheading,
 	.prose :is(h3, h4, h5, h6) {
 		/* Box */
-		margin-block-start: var(--subheading-space-before, var(--space-section));
-		margin-block-end: var(--subheading-space, var(--space-paragraph));
+		margin-block: var(--subheading-space-before, var(--space-section)) var(--subheading-space, var(--space-paragraph));
 
 		/* Text */
 		font-family: var(--subheading-font, var(--font-title));

package/ui/block/Title.module.css

@@ -1,14 +1,13 @@
-@import "../style/layers.css";
-@import "../style/Tint.module.css";
-@import "../style/Color.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Color.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.title,
 	.prose h1 {
 		/* Box */
-		margin-block-start: var(--title-space-before, var(--space-section));
-		margin-block-end: var(--title-space, var(--space-paragraph));
+		margin-block: var(--title-space-before, var(--space-section)) var(--title-space, var(--space-paragraph));
 
 		/* Text */
 		font-family: var(--title-font, var(--font-title));

package/ui/block/Video.module.css

@@ -1,10 +1,10 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Shadow.module.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Shadow.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
 
 @layer components {
 	.prose video,

package/ui/button/Button.module.css

@@ -1,11 +1,11 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Typography.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Typography.module.css");
 
 @layer components {
 	.button {
@@ -24,7 +24,7 @@
 
 		/* Content */
 		overflow: hidden;
-		word-break: normal;
+		overflow-wrap: break-word;
 		gap: var(--button-gap, var(--space-small));
 		justify-content: center;
 		align-items: center;
@@ -50,6 +50,7 @@
 			opacity: var(--button-disabled-opacity, 0.5);
 			cursor: default;
 		}
+
 		&:enabled:hover,
 		&:any-link:hover,
 		&:focus:not(:focus-visible) {
@@ -63,10 +64,12 @@
 			padding-block: var(--button-small-padding, var(--space-xxsmall));
 			padding-inline: var(--button-small-padding, var(--space-xxsmall));
 		}
+
 		&.full {
 			/* Fill the available width — basis becomes 100%, then shrinks (down to the content floor) to share a row. */
 			inline-size: 100%;
 		}
+
 		&.strong {
 			background: var(--button-strong-background, var(--tint-50));
 			color: var(--button-strong-text, var(--tint-100));
@@ -85,6 +88,7 @@
 		&:first-child {
 			margin-block-start: 0;
 		}
+
 		&:last-child {
 			margin-block-end: 0;
 		}
@@ -98,10 +102,12 @@
 		&.strong {
 			border-color: transparent;
 		}
+
 		&.plain:not(:enabled:hover, :any-link:hover, :focus) {
 			border-color: transparent;
 			background: transparent;
 		}
+
 		&.outline:not(:enabled:hover, :any-link:hover, :focus) {
 			background: transparent;
 		}

package/ui/dialog/Dialog.module.css

@@ -1,7 +1,8 @@
-@import "../style/layers.css";
-@import "../style/Color.module.css";
-@import "../style/Duration.module.css";
-@import "../style/Space.module.css";
+@import url("../style/layers.css");
+@import url("../style/Color.module.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Shadow.module.css");
 
 @layer components {
 	.dialog {
@@ -18,7 +19,7 @@
 		padding: var(--dialog-padding, var(--space-normal));
 
 		/* Style */
-		background: var(--dialog-color-overlay, var(--color-shadow));
+		background: var(--dialog-color-overlay, var(--shadow-color));
 		opacity: 0;
 		transition: var(--dialog-transition, all var(--duration-fast));
 

package/ui/dialog/Modal.module.css

@@ -1,11 +1,11 @@
-@import "../style/layers.css";
-@import "../style/Duration.module.css";
-@import "../style/Radius.module.css";
-@import "../style/Shadow.module.css";
-@import "../style/Space.module.css";
-@import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Width.module.css";
+@import url("../style/layers.css");
+@import url("../style/Duration.module.css");
+@import url("../style/Radius.module.css");
+@import url("../style/Shadow.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Stroke.module.css");
+@import url("../style/Tint.module.css");
+@import url("../style/Width.module.css");
 
 @layer components {
 	.modal {

package/ui/form/Field.module.css

@@ -1,7 +1,7 @@
-@import "../style/layers.css";
-@import "../style/Typography.module.css";
-@import "../style/Space.module.css";
-@import "../style/Tint.module.css";
+@import url("../style/layers.css");
+@import url("../style/Typography.module.css");
+@import url("../style/Space.module.css");
+@import url("../style/Tint.module.css");
 
 @layer components {
 	.field {
@@ -23,6 +23,7 @@
 			font-weight: var(--field-title-weight, var(--weight-strong));
 			color: var(--field-title-color, var(--tint-00));
 		}
+
 		.description {
 			font-size: var(--field-description-size, var(--size-normal));
 			line-height: var(--field-description-leading, var(--leading));

package/ui/form/Progress.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { type Nullish } from "../../util/null.js";
 import { type ColorVariants } from "../style/Color.js";
 import { type StatusVariants } from "../style/Status.js";
 /**
@@ -7,7 +8,8 @@ import { type StatusVariants } from "../style/Status.js";
  * @see https://shelving.cc/ui/ProgressProps
  */
 export interface ProgressProps extends ColorVariants, StatusVariants {
-    value: number;
+    /** Position within the `min`–`max` range, or `null`/`undefined`/omitted for an indeterminate bar. */
+    value?: Nullish<number>;
     min?: number;
     max?: number;
 }
@@ -16,12 +18,14 @@ export interface ProgressProps extends ColorVariants, StatusVariants {
  * - Renders a native `<progress>` element, so `role="progressbar"` and the value/max semantics come from the browser.
  * - `<progress>` has no `min` attribute (its implicit minimum is `0`), so the range is normalised to `value - min` / `max - min` before it's handed to the element.
  * - The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` shows an empty or full bar rather than overspilling.
+ * - Omit `value` (or pass `null`/`undefined`) to drop the attribute entirely — exactly as a native `<progress>` does, the element becomes `:indeterminate` (no `aria-valuenow`) and a block of fill colour flows across the track on a loop.
  * - Paints from the tint ladder, so `color=` / `status=` recolour the fill (and track) by moving the tint anchor.
  *
  * @returns A progress bar element.
  * @kind component
  * @example <Progress value={3} max={4} />
  * @example <Progress value={90} status="success" />
+ * @example <Progress />
  * @see https://shelving.cc/ui/Progress
  */
 export declare function Progress({ value, min, max, ...props }: ProgressProps): ReactElement;

package/ui/form/Progress.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatPercent } from "../../util/format.js";
+import { notNullish } from "../../util/null.js";
 import { getColorClass } from "../style/Color.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -9,17 +10,21 @@ import styles from "./Progress.module.css";
  * - Renders a native `<progress>` element, so `role="progressbar"` and the value/max semantics come from the browser.
  * - `<progress>` has no `min` attribute (its implicit minimum is `0`), so the range is normalised to `value - min` / `max - min` before it's handed to the element.
  * - The browser clamps `value` to the `0`–`max` range, so an out-of-range `value` shows an empty or full bar rather than overspilling.
+ * - Omit `value` (or pass `null`/`undefined`) to drop the attribute entirely — exactly as a native `<progress>` does, the element becomes `:indeterminate` (no `aria-valuenow`) and a block of fill colour flows across the track on a loop.
  * - Paints from the tint ladder, so `color=` / `status=` recolour the fill (and track) by moving the tint anchor.
  *
  * @returns A progress bar element.
  * @kind component
  * @example <Progress value={3} max={4} />
  * @example <Progress value={90} status="success" />
+ * @example <Progress />
  * @see https://shelving.cc/ui/Progress
  */
 export function Progress({ value, min = 0, max = 100, ...props }) {
     // `<progress>` has no `min`, so shift the range to a `0`-based one. A non-positive span would make `<progress>` indeterminate, so fall back to an empty determinate bar.
     const span = max - min;
     return (_jsx("progress", { className: getClass(getModuleClass(styles, "progress"), //
-        getColorClass(props), getStatusClass(props)), value: span > 0 ? value - min : 0, max: span > 0 ? span : 1, "aria-valuetext": formatPercent(value - min, max - min) }));
+        getColorClass(props), getStatusClass(props)), 
+        // A nullish `value` drops the attribute (and its announced text) so the element is natively `:indeterminate` and the flowing animation styled off that pseudo-class takes over.
+        value: notNullish(value) ? (span > 0 ? value - min : 0) : undefined, max: span > 0 ? span : 1, "aria-valuetext": notNullish(value) ? formatPercent(value - min, max - min) : undefined }));
 }