shelving 1.258.10 → 1.259.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.258.10",
+	"version": "1.259.1",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -9,13 +9,13 @@
 	"main": "./index.js",
 	"module": "./index.js",
 	"devDependencies": {
-		"@biomejs/biome": "^2.5.0",
+		"@biomejs/biome": "^2.5.1",
 		"@google-cloud/firestore": "^8.6.0",
 		"@heroicons/react": "^2.2.0",
 		"@types/bun": "^1.3.14",
 		"@types/react": "^19.2.17",
 		"@types/react-dom": "^19.2.3",
-		"@typescript/native-preview": "^7.0.0-dev.20260620.1",
+		"@typescript/native-preview": "^7.0.0-dev.20260627.2",
 		"firebase": "^12.15.0",
 		"react": "^19.3.0-canary-fef12a01-20260413",
 		"react-dom": "^19.3.0-canary-fef12a01-20260413",

package/ui/block/Details.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import { type BlockVariants } from "../style/Block.js";
+/** Props for `DetailsItem` — a single collapsible disclosure. */
+export interface DetailsProps extends BlockVariants {
+    /** Content of the always-visible summary (e.g. a question). */
+    title: ReactNode;
+    /** Whether the item starts expanded. */
+    open?: boolean | undefined;
+    /** Shared group name — items with the same `name` open exclusively (only one at a time). */
+    name?: string | undefined;
+    /** Content revealed when the item is expanded. */
+    children: ReactNode;
+}
+/**
+ * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
+ * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
+ * - Give sibling items a shared `name` to make them open exclusively.
+ *
+ * @kind component
+ */
+export declare function Details({ title, open, name, children, ...props }: DetailsProps): ReactElement;

package/ui/block/Details.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronUpIcon } from "@heroicons/react/24/outline";
+import { getBlockClass } from "../style/Block.js";
+import { getClass } from "../util/css.js";
+import DETAILS_CSS from "./Details.module.css";
+const DETAILS_CLASS = DETAILS_CSS.details;
+const DETAILS_SUMMARY_CLASS = DETAILS_CSS.summary;
+/**
+ * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
+ * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
+ * - Give sibling items a shared `name` to make them open exclusively.
+ *
+ * @kind component
+ */
+export function Details({ title, open = false, name, children, ...props }) {
+    return (_jsxs("details", { className: getClass(DETAILS_CLASS, getBlockClass(props)), open: open, name: name, children: [_jsxs("summary", { className: DETAILS_SUMMARY_CLASS, children: [_jsx("span", { children: title }), _jsx(ChevronUpIcon, {})] }), children] }));
+}

package/ui/block/Details.module.css

@@ -0,0 +1,117 @@
+@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";
+
+@layer components {
+	.prose details,
+	.details {
+		/* Box */
+		margin-block: var(--details-space, var(--space-paragraph));
+		border: 0;
+
+		/* Nested */
+		& + & {
+			border-block-start: var(--details-border, var(--stroke-normal) solid var(--tint-90));
+			padding-top: var(--details-space, var(--space-paragraph));
+		}
+
+		/* Title */
+		summary {
+			/* Box */
+			position: relative;
+			margin: 0;
+			padding: 0;
+
+			/* Style */
+			cursor: pointer;
+			outline: none;
+
+			/* Typography */
+			font-weight: var(--weight-strong);
+
+			/* Pseudo-elements */
+			&::marker {
+				color: var(--details-marker-color, var(--tint-80));
+			}
+			&::before {
+				position: absolute;
+				content: "";
+				inset: calc(0px - var(--space-normal));
+				border-radius: var(--details-radius, var(--radius-xsmall));
+				outline: var(--stroke-focus) solid var(--color-focus);
+				outline-offset: calc(0px - var(--stroke-normal));
+			}
+		}
+
+		/* Title (with chevron icon) */
+		.summary {
+			/* Box */
+			display: flex;
+
+			/* Contents */
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--space-normal);
+
+			/* Children */
+			[data-slot="icon"] {
+				flex: none;
+				width: var(--size-icon);
+				height: var(--size-icon);
+				color: var(--color-gray);
+				transform: rotate(180deg);
+				transition: var(--details-transition, all var(--duration-fast));
+				border-radius: var(--radius-xxsmall);
+			}
+		}
+
+		/* Content */
+		&::details-content {
+			/* Box */
+			padding: 0;
+			margin: 0;
+			block-size: 0;
+			overflow: hidden;
+
+			/* Style */
+			opacity: 0;
+			interpolate-size: allow-keywords;
+			transition:
+				var(--details-transition, all var(--duration-fast)),
+				content-visibility var(--duration-fast) ease allow-discrete;
+
+			/* Add margin between the summary and content that gets swallowed by the animation */
+			&::before {
+				content: "";
+				height: 0;
+				margin-block-end: var(--details-gap, var(--space-paragraph));
+				display: block;
+			}
+		}
+
+		/* States */
+		&[open] {
+			.summary {
+				[data-slot="icon"] {
+					transform: rotate(0deg);
+				}
+			}
+			&::details-content {
+				block-size: fit-content;
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@layer overrides {
+	.details {
+		summary:not(:focus-visible)::before {
+			outline: 0;
+		}
+	}
+}

package/ui/block/Details.tsx

@@ -0,0 +1,39 @@
+import { ChevronUpIcon } from "@heroicons/react/24/outline";
+import type { ReactElement, ReactNode } from "react";
+import { type BlockVariants, getBlockClass } from "../style/Block.js";
+import { getClass } from "../util/css.js";
+import DETAILS_CSS from "./Details.module.css";
+
+const DETAILS_CLASS = DETAILS_CSS.details;
+const DETAILS_SUMMARY_CLASS = DETAILS_CSS.summary;
+
+/** Props for `DetailsItem` — a single collapsible disclosure. */
+export interface DetailsProps extends BlockVariants {
+	/** Content of the always-visible summary (e.g. a question). */
+	title: ReactNode;
+	/** Whether the item starts expanded. */
+	open?: boolean | undefined;
+	/** Shared group name — items with the same `name` open exclusively (only one at a time). */
+	name?: string | undefined;
+	/** Content revealed when the item is expanded. */
+	children: ReactNode;
+}
+
+/**
+ * A single collapsible panel within an `Details`, built on native `<details>` and `<summary>`
+ * - Panel animates to its true height (where `interpolate-size` + `::details-content` are supported),
+ * - Give sibling items a shared `name` to make them open exclusively.
+ *
+ * @kind component
+ */
+export function Details({ title, open = false, name, children, ...props }: DetailsProps): ReactElement {
+	return (
+		<details className={getClass(DETAILS_CLASS, getBlockClass(props))} open={open} name={name}>
+			<summary className={DETAILS_SUMMARY_CLASS}>
+				<span>{title}</span>
+				<ChevronUpIcon />
+			</summary>
+			{children}
+		</details>
+	);
+}

package/ui/block/Heading.module.css

@@ -19,5 +19,6 @@
 		font-size: var(--heading-size, var(--size-xxlarge));
 		line-height: var(--heading-leading, var(--leading));
 		color: var(--heading-color, inherit);
+		text-wrap: balance;
 	}
 }

package/ui/block/Subheading.module.css

@@ -19,5 +19,6 @@
 		font-size: var(--subheading-size, var(--size-large));
 		line-height: var(--subheading-leading, var(--leading));
 		color: var(--subheading-color, inherit);
+		text-wrap: balance;
 	}
 }

package/ui/block/Title.module.css

@@ -19,5 +19,6 @@
 		font-size: var(--title-size, var(--size-xxxlarge));
 		line-height: var(--title-leading, var(--leading));
 		color: var(--title-color, inherit);
+		text-wrap: balance;
 	}
 }

package/ui/block/index.d.ts

@@ -5,6 +5,7 @@ export * from "./Caption.js";
 export * from "./Card.js";
 export * from "./Column.js";
 export * from "./Definitions.js";
+export * from "./Details.js";
 export * from "./Divider.js";
 export * from "./Heading.js";
 export * from "./Image.js";

package/ui/block/index.js

@@ -5,6 +5,7 @@ export * from "./Caption.js";
 export * from "./Card.js";
 export * from "./Column.js";
 export * from "./Definitions.js";
+export * from "./Details.js";
 export * from "./Divider.js";
 export * from "./Heading.js";
 export * from "./Image.js";

package/ui/block/index.ts

@@ -5,6 +5,7 @@ export * from "./Caption.js";
 export * from "./Card.js";
 export * from "./Column.js";
 export * from "./Definitions.js";
+export * from "./Details.js";
 export * from "./Divider.js";
 export * from "./Heading.js";
 export * from "./Image.js";

package/ui/misc/Icon.module.css

@@ -4,8 +4,9 @@
 
 @layer defaults {
 	.icon {
-		width: var(--icon-size, var(--size-icon));
-		height: var(--icon-size, var(--size-icon));
+		font-size: var(--icon-size, var(--size-icon));
+		width: 1em;
+		height: 1em;
 		color: var(--icon-color, var(--tint-50));
 	}
 }