@stll/ui 0.65.1 → 0.67.0

package/dist/components/composer.js

@@ -1,10 +1,10 @@
 "use client";
 import { ChevronDownIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
-import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
 import { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS } from "./composer-tokens.js";
+import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/composer.tsx
+// src/components/composer.tsx
 /**
 * The slim status row rendered beneath a composer box: a `text-xs` row with
 * a start cluster and an end slot pinned to the far edge. Shared by every
@@ -76,5 +76,4 @@ const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
 		})
 	})] });
 };
-//#endregion
 export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerStatusRow };

package/dist/components/context-menu.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/components/context-menu.d.ts
 export type ContextMenuAction = {
   label: string;
   icon?: ReactNode;
@@ -33,4 +32,12 @@ export type ContextMenuProps = {
  * pass conditionally.
  */
 export declare const ContextMenu: ({ actions, children }: ContextMenuProps) => ReactNode;
-//#endregion
+/**
+ * The items of one action list, inside a menu popup. `ContextMenu` and
+ * `EntityActions` (`@stll/ui/entity-actions`) both render their lists
+ * through it, so a right-click menu and an object's "…" menu built from
+ * the same list hold the same items.
+ */
+export declare const ContextMenuActionItems: ({ actions }: {
+  actions: readonly ContextMenuAction[];
+}) => import("react").JSX.Element;

package/dist/components/context-menu.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger } from "./menu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
-//#region src/components/context-menu.tsx
+// src/components/context-menu.tsx
 /**
 * Wrap arbitrary content with a right-click context menu. Built on
 * base-ui's `ContextMenu`, which is purpose-built for right-click /
@@ -23,9 +23,16 @@ const ContextMenu = ({ actions, children }) => {
 		children
 	}), /* @__PURE__ */ jsx(MenuPopup, {
 		"data-slot": "context-menu-popup",
-		children: actions.map((action) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action }, action.label))
+		children: /* @__PURE__ */ jsx(ContextMenuActionItems, { actions })
 	})] });
 };
+/**
+* The items of one action list, inside a menu popup. `ContextMenu` and
+* `EntityActions` (`@stll/ui/entity-actions`) both render their lists
+* through it, so a right-click menu and an object's "…" menu built from
+* the same list hold the same items.
+*/
+const ContextMenuActionItems = ({ actions }) => /* @__PURE__ */ jsx(Fragment, { children: actions.map((action) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action }, action.label)) });
 const ContextMenuActionItem = ({ action }) => {
 	const separator = action.separatorBefore ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null;
 	if (action.submenu) return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubTrigger, { children: [action.icon, action.label] }), /* @__PURE__ */ jsx(MenuSubPopup, { children: action.submenu.map((sub) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action: sub }, sub.label)) })] })] });
@@ -44,5 +51,4 @@ const ContextMenuActionItem = ({ action }) => {
 		children: [action.icon, action.label]
 	})] });
 };
-//#endregion
-export { ContextMenu };
+export { ContextMenu, ContextMenuActionItems };

package/dist/components/copy-button.d.ts

@@ -1,7 +1,6 @@
 import { Button } from "./button.js";
 import { ComponentProps } from "react";
 import { CopyToClipboardIcon } from "../icons.js";
-//#region src/components/copy-button.d.ts
 export declare const COPIED_RESET_MS = 1500;
 type CopyButtonProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
   /** Copies and reports whether it worked; failures stay with the caller. */
@@ -47,5 +46,4 @@ type CopyFeedbackProps = {
 };
 /** The standard copy-to-check glyph and label swap, for compound controls. */
 export declare const CopyFeedback: ({ icon: Icon, labelClassName, copied, copiedLabel, iconOnly, iconClassName, label }: CopyFeedbackProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/copy-button.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/components/copy-button.tsx
+// src/components/copy-button.tsx
 const COPIED_RESET_MS = 1500;
 const SWAP_CLASS = "col-start-1 row-start-1 transition-[opacity,scale] duration-200 ease-out motion-reduce:transition-none";
 /**
@@ -106,5 +106,4 @@ const CopyFeedback = ({ icon: Icon = CopyToClipboardIcon, labelClassName, copied
 		})
 	] });
 };
-//#endregion
 export { COPIED_RESET_MS, CopyButton, CopyFeedback, useCopiedFeedback, useCopyConfirmation };

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

@@ -2,14 +2,14 @@
 import { ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { BidiText } from "./bidi-text.js";
-import { ScrollArea } from "./scroll-area.js";
-import { DirectionalIcon } from "./directional-icon.js";
 import { Checkbox } from "./checkbox.js";
+import { DirectionalIcon } from "./directional-icon.js";
 import { Field, FieldLabel } from "./field.js";
+import { ScrollArea } from "./scroll-area.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

@@ -1,19 +1,19 @@
 "use client";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { cn } from "../lib/utils.js";
+import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
 import { Button } from "./button.js";
+import { DATE_PICKER_MODE, formatDateTimeValue, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate } from "./date-picker-popover.logic.js";
 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 { 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

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { Input } from "./input.js";
 import { Field, FieldDescription, FieldLabel } from "./field.js";
+import { Input } from "./input.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 { rendersNothing } from "../lib/renders-nothing.js";
 import { cn } from "../lib/utils.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 };