shelving 1.267.6 → 1.268.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.267.6",
+	"version": "1.268.1",
 	"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/docs/DocumentationCard.js

@@ -3,6 +3,7 @@ import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
 import { Row } from "../block/Row.js";
 import { Subheading } from "../block/Subheading.js";
+import { CollapseTransition } from "../transition/CollapseTransition.js";
 import { DocumentationButtons } from "./DocumentationButtons.js";
 import { DocumentationKind, getDocumentationKindColor } from "./DocumentationKind.js";
 import { DocumentationSignatures } from "./DocumentationSignatures.js";
@@ -19,5 +20,5 @@ export function DocumentationCard({ path, title, name, kind, description, signat
 class: _memberOf, ...props }) {
     // `path` is the symbol's own canonical URL, stamped by `flattenTree()` — link straight to it.
     const color = kind ? getDocumentationKindColor(kind) : undefined;
-    return (_jsxs(Card, { href: path, color: color, children: [_jsx(Subheading, { space: "none", children: _jsxs(Row, { left: true, wrap: true, gap: "xsmall", children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind })] }) }), _jsx(DocumentationButtons, { ...props, space: "none" }), description && _jsx(Paragraph, { children: description }), _jsx(DocumentationSignatures, { signatures: signatures })] }));
+    return (_jsxs(Card, { href: path, color: color, children: [_jsx(Subheading, { space: "none", children: _jsxs(Row, { left: true, wrap: true, gap: "xsmall", children: [title ?? name, kind && _jsx(DocumentationKind, { kind: kind })] }) }), _jsx(CollapseTransition, { children: _jsx(DocumentationButtons, { ...props, space: "none" }) }), description && _jsx(Paragraph, { children: description }), _jsx(DocumentationSignatures, { signatures: signatures })] }));
 }

package/ui/docs/DocumentationCard.tsx

@@ -4,6 +4,7 @@ import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
 import { Row } from "../block/Row.js";
 import { Subheading } from "../block/Subheading.js";
+import { CollapseTransition } from "../transition/CollapseTransition.js";
 import { DocumentationButtons } from "./DocumentationButtons.js";
 import { DocumentationKind, getDocumentationKindColor } from "./DocumentationKind.js";
 import { DocumentationSignatures } from "./DocumentationSignatures.js";
@@ -37,7 +38,9 @@ export function DocumentationCard({
 					{kind && <DocumentationKind kind={kind} />}
 				</Row>
 			</Subheading>
-			<DocumentationButtons {...props} space="none" />
+			<CollapseTransition>
+				<DocumentationButtons {...props} space="none" />
+			</CollapseTransition>
 			{description && <Paragraph>{description}</Paragraph>}
 			<DocumentationSignatures signatures={signatures} />
 		</Card>

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.css

@@ -0,0 +1,23 @@
+/*
+* Keyframes for the `Progress` indeterminate animation.
+*
+* This lives in a plain (non-module) CSS file, not `Progress.module.css`, because Bun's CSS-modules
+* transform renames the `@keyframes` identifier (appends the module hash) but does *not* rewrite the
+* matching `animation` reference, so a keyframes block defined in the module file animates against a
+* name that no longer exists. Keeping the declaration global here leaves the name stable, and the
+* un-rewritten `animation: progress-flow` reference in `Progress.module.css` resolves to it. This
+* mirrors how the `transition` components keep their keyframes in sibling `.css` files.
+*
+* Tracked in dhoulb/shelving#259 (revert once Bun ships the fix for oven-sh/bun#18921).
+*/
+
+/* Conveyor the block fully off the left edge, across, and fully off the right — then it loops back round unseen. `-70%`/`170%` fully clear a `40%`-wide block, and `linear` timing keeps a constant speed with no ease-out stall at the ends. */
+@keyframes progress-flow {
+	from {
+		background-position: -70% 0;
+	}
+
+	to {
+		background-position: 170% 0;
+	}
+}