@stll/ui 0.65.1 → 0.66.0

package/dist/components/court-badge.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/court-badge.d.ts
 /**
  * How a court's abbreviation is drawn: a firm edge for the apex, then lighter
  * treatments down the instances.
@@ -30,5 +29,4 @@ type CourtBadgeProps = {
  * abbreviates gets no chip.
  */
 export declare const CourtBadge: ({ abbreviation, className, size, weight }: CourtBadgeProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/court-badge.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/court-badge.tsx
+// src/components/court-badge.tsx
 const COURT_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-sm border font-mono font-semibold tracking-wide whitespace-nowrap";
 /**
 * The line box runs a third taller than the type, because these capitals
@@ -47,5 +47,4 @@ const CourtBadge = ({ abbreviation, className, size = "default", weight }) => /*
 	dir: "ltr",
 	children: abbreviation
 });
-//#endregion
 export { CourtBadge };

package/dist/components/court-filter.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/court-filter.d.ts
 type CourtOption = {
   value: string;
   label?: string;
@@ -38,5 +37,4 @@ export declare const toggleCourtSelection: (selected: readonly string[], values:
  */
 export declare const MultipleCourtFilter: (options: MultipleCourtFilterProps) => import("react").JSX.Element;
 export declare const SingleCourtFilter: (props: SingleCourtFilterProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/court-filter.js

@@ -9,7 +9,7 @@ import { Field, FieldLabel } from "./field.js";
 import { SearchField } from "./search-field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
-//#region src/components/court-filter.tsx
+// src/components/court-filter.tsx
 const toggleCourtSelection = (selected, values) => {
 	return values.every((value) => selected.includes(value)) ? selected.filter((value) => !values.includes(value)) : [.../* @__PURE__ */ new Set([...selected, ...values])];
 };
@@ -206,5 +206,4 @@ const SingleCourtFilter = (props) => /* @__PURE__ */ jsx("div", {
 		options: props
 	}, group.value))
 });
-//#endregion
 export { MultipleCourtFilter, SingleCourtFilter, toggleCourtSelection };

package/dist/components/date-picker-popover.d.ts

@@ -1,6 +1,5 @@
 import { DatePickerMode } from "./date-picker-popover.logic.js";
 import { OverlayLayer } from "../lib/overlay-layer.js";
-//#region src/components/date-picker-popover.d.ts
 /**
  * `compact` keeps the dense 32px day cells everywhere. `touch` grows day,
  * month, and year cells to 44px targets under a coarse pointer and leaves a
@@ -75,5 +74,4 @@ type DatePickerPopoverProps = {
   layer?: OverlayLayer;
 };
 declare const DatePickerPopover: (props: DatePickerPopoverProps) => import("react").JSX.Element;
-//#endregion
 export { DatePickerPopover, type DatePickerPopoverProps };

package/dist/components/date-picker-popover.js

@@ -6,14 +6,14 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { Input } from "./input.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
-import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
+import { DATE_PICKER_MODE, formatDateTimeValue, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
-import { Select, SelectContent as SelectPopup, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { TimeField } from "./time-field.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
-//#region src/components/date-picker-popover.tsx
+// src/components/date-picker-popover.tsx
 const toISODate = (date) => date.toString();
 const toUTCDateTime = (date) => date.toZonedDateTime({
 	plainTime: Temporal.PlainTime.from("00:00"),
@@ -552,6 +552,7 @@ const DatePickerPopoverContent = (props) => {
 						today
 					}),
 					selection.mode === DATE_PICKER_MODE.dateTime && /* @__PURE__ */ jsx(TimeField, {
+						className: "mt-1 border-t pt-1",
 						disabled: value === "",
 						label: labels.time,
 						locale,
@@ -638,70 +639,6 @@ const PickerHeader = ({ headingClassName, label, labels, onHeadingClick, onNext,
 		]
 	});
 };
-/**
-* Hour and minute selects in the locale's own clock and numerals. Inert
-* until a day is picked, since a time alone is not a value.
-*/
-const TimeField = ({ disabled, label, locale, onChange, time }) => {
-	const labelId = useId();
-	const hourOptions = useMemo(() => getHourOptions(locale), [locale]);
-	const minuteOptions = useMemo(() => getMinuteOptions(locale), [locale]);
-	const fieldNames = useMemo(() => getTimeFieldNames(locale), [locale]);
-	const clock = time === null ? null : splitPickerTime(time);
-	return /* @__PURE__ */ jsxs("div", {
-		"aria-labelledby": labelId,
-		className: "mt-1 flex items-center gap-1.5 border-t pt-1",
-		role: "group",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "text-foreground-label shrink-0 text-xs",
-				id: labelId,
-				children: label
-			}),
-			/* @__PURE__ */ jsx(TimePartSelect, {
-				disabled,
-				label: fieldNames.hour,
-				onChange: (hour) => onChange({
-					hour,
-					minute: clock?.minute ?? 0
-				}),
-				options: hourOptions,
-				value: clock?.hour ?? null
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "text-muted-foreground text-xs",
-				children: ":"
-			}),
-			/* @__PURE__ */ jsx(TimePartSelect, {
-				disabled,
-				label: fieldNames.minute,
-				onChange: (minute) => onChange({
-					hour: clock?.hour ?? 0,
-					minute
-				}),
-				options: minuteOptions,
-				value: clock?.minute ?? null
-			})
-		]
-	});
-};
-const TimePartSelect = ({ disabled, label, onChange, options, value }) => /* @__PURE__ */ jsxs(Select, {
-	disabled,
-	onValueChange: (next) => {
-		if (typeof next === "number") onChange(next);
-	},
-	value,
-	children: [/* @__PURE__ */ jsx(SelectTrigger, {
-		"aria-label": label,
-		className: "min-w-0 flex-1",
-		size: "sm",
-		children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "—" })
-	}), /* @__PURE__ */ jsx(SelectPopup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
-		value: option.value,
-		children: option.label
-	}, option.value)) })]
-});
 const MONTHS_PER_ROW = 3;
 const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, cellClassName, onSelect, today }) => {
 	const labels = useMemo(() => getMonthLabels(locale, "short"), [locale]);
@@ -836,5 +773,4 @@ const TypedDateField = ({ mode, label, value, invalid, errorLabel = "Choose a da
 		]
 	});
 };
-//#endregion
 export { DatePickerPopover };

package/dist/components/date-picker-popover.logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/date-picker-popover.logic.d.ts
 export type CalendarMonth = {
   month: number;
   year: number;
@@ -52,5 +51,4 @@ export declare const getHourOptions: (locale: string) => PickerTimeOption[];
 /** Two-digit minute choices in the locale's numbering system. */
 export declare const getMinuteOptions: (locale: string) => PickerTimeOption[];
 /** Accessible names of the hour and minute fields, from the locale itself. */
-export declare const getTimeFieldNames: (locale: string) => Record<keyof PickerClock, string>;
-//#endregion
+export declare const getTimeFieldNames: (locale: string) => Record<keyof PickerClock, string>;

package/dist/components/date-picker-popover.logic.js

@@ -1,5 +1,5 @@
 import { Temporal } from "temporal-polyfill/full";
-//#region src/components/date-picker-popover.logic.ts
+// src/components/date-picker-popover.logic.ts
 const DATE_ROLLOVER_EPSILON_MS = 50;
 const padDatePart = (value) => value.toString().padStart(2, "0");
 const localDateFromTimestamp = (timestamp) => {
@@ -96,5 +96,4 @@ const getTimeFieldNames = (locale) => {
 		minute: capitalize(locale, names.of("minute") ?? "minute")
 	};
 };
-//#endregion
 export { DATE_PICKER_MODE, DEFAULT_PICKER_TIME, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime };

package/dist/components/date-range-filter.d.ts

@@ -1,5 +1,4 @@
 import { DatePickerPopoverProps } from "./date-picker-popover.js";
-//#region src/components/date-range-filter.d.ts
 type DateRangeFilterProps = Omit<DatePickerPopoverProps, "value" | "onChange" | "minDate" | "open" | "defaultOpen" | "onOpenChange" | "triggerRef" | "focusTriggerOnOpen" | "id" | "labelledBy" | "mode"> & {
   from: string | null;
   to: string | null;
@@ -10,5 +9,4 @@ type DateRangeFilterProps = Omit<DatePickerPopoverProps, "value" | "onChange" |
 };
 /** Both calendar bounds and the focus handoff belong to the range. */
 declare const DateRangeFilter: ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }: DateRangeFilterProps) => import("react").JSX.Element;
-//#endregion
 export { DateRangeFilter, type DateRangeFilterProps };

package/dist/components/date-range-filter.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { DatePickerPopover } from "./date-picker-popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
-//#region src/components/date-range-filter.tsx
+// src/components/date-range-filter.tsx
 /** Both calendar bounds and the focus handoff belong to the range. */
 const DateRangeFilter = ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }) => {
 	const id = useId();
@@ -70,5 +70,4 @@ const DateRangeFilter = ({ from, to, onFromChange, onToChange, fromLabel, toLabe
 		})]
 	});
 };
-//#endregion
 export { DateRangeFilter };

package/dist/components/destructive-action-confirmation.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { InputProps } from "./input.js";
-//#region src/components/destructive-action-confirmation.d.ts
 type DestructiveActionConfirmationProps = Omit<InputProps, "onChange" | "type" | "value"> & {
   confirmation: string;
   description?: React$1.ReactNode;
@@ -17,5 +16,4 @@ declare function useDestructiveActionConfirmation(confirmation: string): {
   reset: () => void;
   value: string;
 };
-//#endregion
 export { DestructiveActionConfirmation, useDestructiveActionConfirmation };

package/dist/components/destructive-action-confirmation.js

@@ -4,7 +4,7 @@ import { Input } from "./input.js";
 import { Field, FieldDescription, FieldLabel } from "./field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-//#region src/components/destructive-action-confirmation.tsx
+// src/components/destructive-action-confirmation.tsx
 const DestructiveActionConfirmation = ({ className, confirmation, description, fieldClassName, inputClassName, label, onValueChange, value, ...props }) => {
 	const confirmed = isDestructiveActionConfirmed({
 		confirmation,
@@ -56,5 +56,4 @@ function useDestructiveActionConfirmation(confirmation) {
 function isDestructiveActionConfirmed({ confirmation, value }) {
 	return value === confirmation;
 }
-//#endregion
 export { DestructiveActionConfirmation, useDestructiveActionConfirmation };

package/dist/components/destructive-confirm-dialog.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/destructive-confirm-dialog.d.ts
 /**
  * What a settled confirm asks of the dialog: `keep-open` when the action was
  * refused and the dialog shows why, so the caller need not throw to keep it.
@@ -19,5 +18,4 @@ type DestructiveConfirmDialogProps = {
   title: React$1.ReactNode;
 };
 declare const DestructiveConfirmDialog: ({ cancelLabel, confirmLabel, confirmation, description, inputLabel, loading, onConfirm, onOpenChange, open, title }: DestructiveConfirmDialogProps) => React$1.JSX.Element;
-//#endregion
 export { DestructiveConfirmDialog, type DestructiveConfirmDialogProps, type DestructiveConfirmOutcome };

package/dist/components/destructive-confirm-dialog.js

@@ -3,7 +3,7 @@ import { AlertDialog, AlertDialogClose, AlertDialogContent as AlertDialogPopup,
 import { Button } from "./button.js";
 import { DestructiveActionConfirmation, useDestructiveActionConfirmation } from "./destructive-action-confirmation.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/destructive-confirm-dialog.tsx
+// src/components/destructive-confirm-dialog.tsx
 const DestructiveConfirmDialog = ({ cancelLabel, confirmLabel, confirmation, description, inputLabel, loading = false, onConfirm, onOpenChange, open, title }) => {
 	const typedConfirmation = useDestructiveActionConfirmation(confirmation);
 	const handleOpenChange = (nextOpen) => {
@@ -44,5 +44,4 @@ const DestructiveConfirmDialog = ({ cancelLabel, confirmLabel, confirmation, des
 		] })
 	});
 };
-//#endregion
 export { DestructiveConfirmDialog };

package/dist/components/details-grid.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/details-grid.d.ts
 /**
  * - `sheet`: a fact sheet; small uppercase labels, up to three pairs per row
  *   as the container widens.
@@ -12,18 +11,27 @@ type DetailsVariant = "sheet" | "list";
  *   shares one column sized to the longest.
  * - `vertical`: each label above its value, for values too long to share a
  *   row (a server address, a list of origins).
+ * - `auto`: vertical in a narrow container (a phone, a side panel under
+ *   24rem) and horizontal once there is room, measured on the grid's own
+ *   container rather than the viewport.
  */
-type DetailsOrientation = "horizontal" | "vertical";
+type DetailsOrientation = "horizontal" | "vertical" | "auto";
+/**
+ * How wide the label column of a horizontal grid is. `auto` sizes it to the
+ * longest label (the list default); `sm`, `md` (the sheet default, 7rem) and
+ * `lg` fix it, so several grids on one page line their values up.
+ */
+type DetailsLabelWidth = "auto" | "sm" | "md" | "lg";
 type DetailsGridProps = React$1.ComponentProps<"dl"> & {
+  labelWidth?: DetailsLabelWidth;
   orientation?: DetailsOrientation;
   variant?: DetailsVariant;
 };
-declare const DetailsGrid: ({ className, orientation, variant, ...props }: DetailsGridProps) => React$1.JSX.Element;
+declare const DetailsGrid: ({ className, labelWidth, orientation, variant, ...props }: DetailsGridProps) => React$1.JSX.Element;
 type DetailsItemProps = React$1.ComponentProps<"div"> & {
   label: React$1.ReactNode;
   /** `wide` spans every pair column of a `sheet`. */
   span?: "wide";
 };
 declare const DetailsItem: ({ label, children, span, className, ...props }: DetailsItemProps) => React$1.JSX.Element;
-//#endregion
-export { DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant };
+export { DetailsGrid, DetailsItem, type DetailsLabelWidth, type DetailsOrientation, type DetailsVariant };

package/dist/components/details-grid.js

@@ -1,31 +1,65 @@
 import { cn } from "../lib/utils.js";
+import { rendersNothing } from "../lib/renders-nothing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-//#region src/components/details-grid.tsx
+// src/components/details-grid.tsx
 const DetailsShapeContext = createContext({
+	labelWidth: "md",
 	orientation: "horizontal",
 	variant: "sheet"
 });
 const LIST_CLASS_NAME = {
-	horizontal: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-4 gap-y-1 text-sm",
+	auto: "flex min-w-0 flex-col gap-2 text-sm @min-[24rem]:grid @min-[24rem]:items-center @min-[24rem]:gap-x-4 @min-[24rem]:gap-y-1",
+	horizontal: "grid items-center gap-x-4 gap-y-1 text-sm",
 	vertical: "flex min-w-0 flex-col gap-2 text-sm"
 };
+/** The list's label and value tracks, per label width. */
+const LIST_COLUMNS_CLASS_NAME = {
+	auto: "grid-cols-[auto_minmax(0,1fr)]",
+	lg: "grid-cols-[10rem_minmax(0,1fr)]",
+	md: "grid-cols-[7rem_minmax(0,1fr)]",
+	sm: "grid-cols-[5rem_minmax(0,1fr)]"
+};
+/** The same tracks, applied only once an `auto` list turns horizontal. */
+const LIST_AUTO_COLUMNS_CLASS_NAME = {
+	auto: "@min-[24rem]:grid-cols-[auto_minmax(0,1fr)]",
+	lg: "@min-[24rem]:grid-cols-[10rem_minmax(0,1fr)]",
+	md: "@min-[24rem]:grid-cols-[7rem_minmax(0,1fr)]",
+	sm: "@min-[24rem]:grid-cols-[5rem_minmax(0,1fr)]"
+};
+/** A sheet pair's label and value tracks; `auto` keeps the 7rem default. */
+const SHEET_ITEM_COLUMNS_CLASS_NAME = {
+	auto: "grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+	lg: "grid-cols-[minmax(0,10rem)_minmax(0,1fr)]",
+	md: "grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+	sm: "grid-cols-[minmax(0,5rem)_minmax(0,1fr)]"
+};
+const SHEET_AUTO_ITEM_COLUMNS_CLASS_NAME = {
+	auto: "@min-[20rem]:grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+	lg: "@min-[20rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]",
+	md: "@min-[20rem]:grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+	sm: "@min-[20rem]:grid-cols-[minmax(0,5rem)_minmax(0,1fr)]"
+};
 const ITEM_CLASS_NAME = {
 	list: {
+		auto: "flex min-w-0 flex-col gap-0.5 @min-[24rem]:col-span-full @min-[24rem]:grid @min-[24rem]:grid-cols-subgrid @min-[24rem]:items-center",
 		horizontal: "col-span-full grid grid-cols-subgrid items-center",
 		vertical: "flex min-w-0 flex-col gap-2"
 	},
 	sheet: {
-		horizontal: "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs",
+		auto: "flex min-w-0 flex-col gap-1 text-xs @min-[20rem]:grid @min-[20rem]:items-start @min-[20rem]:gap-x-4",
+		horizontal: "grid min-w-0 items-start gap-x-4 text-xs",
 		vertical: "flex min-w-0 flex-col gap-1 text-xs"
 	}
 };
 const LABEL_CLASS_NAME = {
 	list: {
+		auto: "text-muted-foreground min-w-0",
 		horizontal: "text-muted-foreground min-w-0",
 		vertical: "font-medium"
 	},
 	sheet: {
+		auto: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
 		horizontal: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
 		vertical: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase"
 	}
@@ -34,21 +68,29 @@ const VALUE_CLASS_NAME = {
 	list: "min-w-0 wrap-anywhere",
 	sheet: "text-foreground-strong-muted min-w-0 wrap-anywhere"
 };
-const DetailsGrid = ({ className, orientation = "horizontal", variant = "sheet", ...props }) => {
+const DetailsGrid = ({ className, labelWidth, orientation = "horizontal", variant = "sheet", ...props }) => {
 	const shape = {
+		labelWidth: labelWidth ?? (variant === "list" ? "auto" : "md"),
 		orientation,
 		variant
 	};
-	if (variant === "list") return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
-		value: shape,
-		children: /* @__PURE__ */ jsx("dl", {
-			className: cn(LIST_CLASS_NAME[orientation], className),
+	if (variant === "list") {
+		const list = /* @__PURE__ */ jsx("dl", {
+			className: cn(LIST_CLASS_NAME[orientation], orientation === "horizontal" && LIST_COLUMNS_CLASS_NAME[shape.labelWidth], orientation === "auto" && LIST_AUTO_COLUMNS_CLASS_NAME[shape.labelWidth], className),
 			"data-orientation": orientation,
 			"data-slot": "details-grid",
 			"data-variant": variant,
 			...props
-		})
-	});
+		});
+		return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
+			value: shape,
+			children: orientation === "auto" ? /* @__PURE__ */ jsx("div", {
+				className: "@container min-w-0",
+				"data-slot": "details-grid-container",
+				children: list
+			}) : list
+		});
+	}
 	return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
 		value: shape,
 		children: /* @__PURE__ */ jsx("div", {
@@ -63,9 +105,9 @@ const DetailsGrid = ({ className, orientation = "horizontal", variant = "sheet",
 	});
 };
 const DetailsItem = ({ label, children, span, className, ...props }) => {
-	const { orientation, variant } = useContext(DetailsShapeContext);
+	const { labelWidth, orientation, variant } = useContext(DetailsShapeContext);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(ITEM_CLASS_NAME[variant][orientation], variant === "sheet" && span === "wide" && "col-span-full", className),
+		className: cn(ITEM_CLASS_NAME[variant][orientation], variant === "sheet" && orientation === "horizontal" && SHEET_ITEM_COLUMNS_CLASS_NAME[labelWidth], variant === "sheet" && orientation === "auto" && SHEET_AUTO_ITEM_COLUMNS_CLASS_NAME[labelWidth], variant === "sheet" && span === "wide" && "col-span-full", className),
 		"data-slot": "details-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("dt", {
@@ -73,9 +115,22 @@ const DetailsItem = ({ label, children, span, className, ...props }) => {
 			children: label
 		}), /* @__PURE__ */ jsx("dd", {
 			className: VALUE_CLASS_NAME[variant],
-			children
+			children: isEmptyValue(children) ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-foreground-disabled",
+				"data-slot": "details-empty",
+				children: "—"
+			}) : children
 		})]
 	});
 };
-//#endregion
+/**
+* No value to show: what React draws nothing for (see `rendersNothing`),
+* only whitespace, or a list of only those.
+*/
+function isEmptyValue(value) {
+	if (typeof value === "string") return value.trim() === "";
+	if (Array.isArray(value)) return value.every((item) => isEmptyValue(item));
+	return rendersNothing(value);
+}
 export { DetailsGrid, DetailsItem };

package/dist/components/dialog-form-state.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/dialog-form-state.d.ts
 export type DialogFormSource = {
   dirty: boolean;
   onDiscard?: (() => void) | undefined;
@@ -12,5 +11,4 @@ export declare const DialogFormContext: import("react").Context<DialogFormRegist
 export declare const DialogFormState: ({ dirty, onDiscard }: {
   dirty: boolean;
   onDiscard?: (() => void) | undefined;
-}) => null;
-//#endregion
+}) => null;

package/dist/components/dialog-form-state.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext, useContext, useId, useLayoutEffect } from "react";
-//#region src/components/dialog-form-state.tsx
+// src/components/dialog-form-state.tsx
 const DialogFormContext = createContext(null);
 /** Forms report semantic changes, including edits made by custom controls. */
 const DialogFormState = ({ dirty, onDiscard }) => {
@@ -24,5 +24,4 @@ const DialogFormState = ({ dirty, onDiscard }) => {
 	}, [id, registry]);
 	return null;
 };
-//#endregion
 export { DialogFormContext, DialogFormState };

package/dist/components/dialog.d.ts

@@ -2,7 +2,6 @@ import * as React$1 from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { DialogFormState } from "./dialog-form-state.js";
 import { OverlayLayer } from "../lib/overlay-layer.js";
-//#region src/components/dialog.d.ts
 declare const DialogCreateHandle: typeof Dialog$1.createHandle;
 type DialogLabels = {
   close: string;
@@ -72,5 +71,4 @@ declare const DialogDescription: ({ className, ...props }: Dialog$1.Description.
 declare const DialogPanel: ({ className, scrollFade, ...props }: React$1.ComponentProps<"div"> & {
   scrollFade?: boolean;
 }) => React$1.JSX.Element;
-//#endregion
 export { DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogLabels, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, type DialogSize, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dialog.js

@@ -10,7 +10,7 @@ import { DialogFormContext, DialogFormState } from "./dialog-form-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useRef, useState } from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-//#region src/components/dialog.tsx
+// src/components/dialog.tsx
 const DialogCreateHandle = Dialog$1.createHandle;
 const DialogLabelsContext = createContext({
 	close: "Close",
@@ -197,5 +197,4 @@ const DialogPanel = ({ className, scrollFade = true, ...props }) => /* @__PURE__
 		...props
 	})
 });
-//#endregion
 export { DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/directional-icon.d.ts

@@ -1,5 +1,4 @@
 import { LucideIcon } from "../icons.js";
-//#region src/components/directional-icon.d.ts
 type DirectionalIconProps = {
   /**
    * A horizontally-directional lucide icon (chevron / arrow / caret /
@@ -26,5 +25,4 @@ type DirectionalIconProps = {
  * icon). See `/conventions-ux` → Right-to-Left & Bidirectional.
  */
 export declare const DirectionalIcon: ({ icon: Icon, className, flip }: DirectionalIconProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/directional-icon.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/directional-icon.tsx
+// src/components/directional-icon.tsx
 /**
 * Single sanctioned way to render a direction-bearing icon. Centralizes
 * the `rtl:-scale-x-100` mirror so individual call sites can't get RTL
@@ -8,5 +8,4 @@ import { jsx } from "react/jsx-runtime";
 * icon). See `/conventions-ux` → Right-to-Left & Bidirectional.
 */
 const DirectionalIcon = ({ icon: Icon, className, flip = true }) => /* @__PURE__ */ jsx(Icon, { className: cn(flip && "rtl:-scale-x-100", className) });
-//#endregion
 export { DirectionalIcon };

package/dist/components/document-identity-badge.d.ts

@@ -1,6 +1,5 @@
 import { CourtBadgeSize } from "./court-badge.js";
 import { DocumentIdentity } from "./document-identity-badge.logic.js";
-//#region src/components/document-identity-badge.d.ts
 export declare const DocumentIdentityBadge: ({ identity, size, title }: DocumentIdentityBadgeProps) => import("react").JSX.Element;
 type DocumentIdentityBadgeProps = {
   identity: DocumentIdentity;
@@ -9,5 +8,4 @@ type DocumentIdentityBadgeProps = {
   /** Omit when the enclosing tab already supplies the full-title tooltip. */
   title?: string | undefined;
 };
-//#endregion
 export {};

package/dist/components/document-identity-badge.js

@@ -5,7 +5,7 @@ import { CourtBadge } from "./court-badge.js";
 import { COURT_TIER_WEIGHT, caseNumberIdentityLabels, statuteIdentityLabels } from "./document-identity-badge.logic.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { panic } from "better-result";
-//#region src/components/document-identity-badge.tsx
+// src/components/document-identity-badge.tsx
 const DocumentIdentityBadge = ({ identity, size, title }) => {
 	const content = documentIdentityMark(identity, size);
 	if (title === void 0) return content;
@@ -104,5 +104,4 @@ function statuteLabelClasses(length) {
 	if (length === 9) return STATUTE_LABEL_CLASSES[9];
 	return STATUTE_LABEL_CLASSES[10];
 }
-//#endregion
 export { DocumentIdentityBadge };

package/dist/components/document-identity-badge.logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/document-identity-badge.logic.d.ts
 export declare const COURT_TIER_WEIGHT: {
   readonly constitutional: "solid";
   readonly supreme: "tinted";
@@ -40,5 +39,4 @@ export declare const statuteIdentityLabels: ({ number, year }: Extract<DocumentI
  */
 export declare const caseNumberIdentityLabels: ({ caseNumber }: Extract<DocumentIdentity, {
   kind: "caseNumber";
-}>) => IdentityLabels | null;
-//#endregion
+}>) => IdentityLabels | null;

package/dist/components/document-identity-badge.logic.js

@@ -1,4 +1,4 @@
-//#region src/components/document-identity-badge.logic.ts
+// src/components/document-identity-badge.logic.ts
 const COURT_TIER_WEIGHT = {
 	constitutional: "solid",
 	supreme: "tinted",
@@ -37,5 +37,4 @@ const caseNumberIdentityLabels = ({ caseNumber }) => {
 		long
 	};
 };
-//#endregion
 export { COURT_TIER_WEIGHT, caseNumberIdentityLabels, statuteIdentityLabels };

package/dist/components/document-mark.d.ts

@@ -0,0 +1,9 @@
+import { DocumentMarkContract, DocumentMarkKind, isDocumentMarkKind } from "./document-mark.shared.js";
+import { SVGProps } from "react";
+/**
+ * A file format's mark (the Word, Excel or PDF page), drawn from the artwork
+ * the apps share. Decorative: the file's name says what it is.
+ */
+export declare const DocumentMark: ({ kind, ...props }: DocumentMarkProps) => import("react").ReactSVGElement;
+type DocumentMarkProps = DocumentMarkContract & Omit<SVGProps<SVGSVGElement>, "children" | "viewBox">;
+export { type DocumentMarkKind, isDocumentMarkKind };

package/dist/components/document-mark.js

@@ -0,0 +1,29 @@
+import { DOCUMENT_MARKS, GRADIENT_REFERENCE, isDocumentMarkKind } from "./document-mark.shared.js";
+import { createElement, useId } from "react";
+// src/components/document-mark.tsx
+/**
+* A file format's mark (the Word, Excel or PDF page), drawn from the artwork
+* the apps share. Decorative: the file's name says what it is.
+*/
+const DocumentMark = ({ kind, ...props }) => {
+	const scope = useId();
+	const mark = DOCUMENT_MARKS[kind];
+	const gradients = mark.gradients.map((gradient) => createElement("linearGradient", {
+		...gradient.attrs,
+		id: `${scope}-${gradient.id}`
+	}, ...gradient.stops.map((stop) => createElement("stop", stop))));
+	return createElement("svg", {
+		"aria-hidden": true,
+		fill: mark.fill ?? "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		viewBox: mark.viewBox
+	}, ...gradients.length === 0 ? [] : [createElement("defs", {}, ...gradients)], ...mark.shapes.map((shape) => draw(shape, scope)));
+};
+/** A gradient id or paint reference, namespaced to one drawn mark. */
+const scoped = (attrs, scope) => Object.fromEntries(Object.entries(attrs).map(([name, value]) => {
+	const id = GRADIENT_REFERENCE.exec(value)?.[1];
+	return [name, id === void 0 ? value : `url(#${scope}-${id})`];
+}));
+const draw = (shape, scope) => createElement(shape.tag, scoped(shape.attrs, scope), ...(shape.children ?? []).map((child) => draw(child, scope)));
+export { DocumentMark, isDocumentMarkKind };