@stll/ui 0.59.1 → 0.61.0

package/dist/components/button.native-classes.js

@@ -0,0 +1,176 @@
+import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+//#region src/components/button.native-classes.ts
+/** A control's box: centred content inside the variant's border. */
+const CONTROL = "items-center justify-center border";
+/**
+* Every shared size in a phone's metrics. A text size grows to the platform's
+* 44-point touch target where the web relies on a coarse-pointer hit area; a
+* smaller control keeps its look and reaches the target through `slop`.
+*/
+const SIZES = {
+	chip: {
+		box: `${CONTROL} min-h-7 gap-1.5 rounded-full px-2.5`,
+		label: "text-xs",
+		slop: 8
+	},
+	default: {
+		box: `${CONTROL} min-h-11 gap-2 rounded-lg px-4`,
+		label: "",
+		slop: 0
+	},
+	icon: {
+		box: `${CONTROL} size-11 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-lg": {
+		box: `${CONTROL} size-12 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-sm": {
+		box: `${CONTROL} size-8 rounded-lg`,
+		label: "",
+		slop: 6
+	},
+	"icon-xl": {
+		box: `${CONTROL} size-11 rounded-full`,
+		label: "",
+		slop: 0
+	},
+	"icon-2xs": {
+		box: `${CONTROL} size-5 rounded-md`,
+		label: "",
+		slop: 12
+	},
+	"icon-xs": {
+		box: `${CONTROL} size-7 rounded-md`,
+		label: "",
+		slop: 8
+	},
+	inline: {
+		box: "items-center gap-1",
+		label: "",
+		slop: 8
+	},
+	lg: {
+		box: `${CONTROL} min-h-12 gap-2 rounded-lg px-5`,
+		label: "",
+		slop: 0
+	},
+	row: {
+		box: "min-h-11 w-full items-start gap-3 py-3",
+		label: "",
+		slop: 0
+	},
+	sm: {
+		box: `${CONTROL} min-h-9 gap-1.5 rounded-lg px-3`,
+		label: "text-sm",
+		slop: 0
+	},
+	xl: {
+		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
+		label: "text-lg",
+		slop: 0
+	},
+	xs: {
+		box: `${CONTROL} min-h-7 gap-1 rounded-md px-2`,
+		label: "text-sm",
+		slop: 8
+	}
+};
+/**
+* A phone has no hover: a pressed button answers with the fill the web shows
+* on hover, or dims when it already has one. `selected` is the pressed state
+* held (a row open beside the list, a chosen option).
+*/
+const PRESS = {
+	default: {
+		pressed: "active:opacity-80",
+		selected: ""
+	},
+	destructive: {
+		pressed: "active:bg-destructive/18",
+		selected: ""
+	},
+	"destructive-outline": {
+		pressed: "active:bg-destructive/4",
+		selected: ""
+	},
+	"destructive-ghost": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	ghost: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	link: {
+		pressed: "active:opacity-60",
+		selected: ""
+	},
+	muted: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	"muted-destructive": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	outline: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	secondary: {
+		pressed: "active:bg-secondary/80",
+		selected: ""
+	},
+	plain: {
+		pressed: "active:opacity-80",
+		selected: "border-primary"
+	}
+};
+/**
+* `plain` has no fill, no label colour and no size; like the web's, it does
+* not dim when disabled, because its content says it is unavailable. It keeps
+* a transparent border that only `selected` colours, the phone's stand-in for
+* the web's inset ring.
+*/
+const PLAIN = {
+	shape: {
+		box: "rounded-lg border-2 border-transparent",
+		label: "",
+		slop: 0
+	},
+	tokens: {
+		surface: "",
+		label: ""
+	}
+};
+/** The Pressable's and the label's classes, and the touch slop, for a button. */
+const nativeButtonClassNames = ({ className, inactive, selected, size, variant }) => {
+	const plain = variant === BUTTON_PLAIN_VARIANT;
+	const shape = plain ? PLAIN.shape : SIZES[size ?? "default"];
+	const tokens = plain ? PLAIN.tokens : BUTTON_VARIANT_TOKENS[variant ?? "default"];
+	const press = PRESS[variant ?? "default"];
+	const dimmed = plain ? "" : "opacity-64";
+	const join = (names) => names.filter((name) => name !== "").join(" ");
+	return {
+		label: join([
+			tokens.label,
+			variant === "link" ? "text-foreground underline" : "",
+			shape.label
+		]),
+		pressable: join([
+			plain ? "" : "flex-row",
+			tokens.surface,
+			shape.box,
+			inactive ? dimmed : press.pressed,
+			selected ? press.selected : "",
+			className ?? ""
+		]),
+		slop: shape.slop
+	};
+};
+//#endregion
+export { nativeButtonClassNames };

package/dist/components/button.native.d.ts

@@ -8,8 +8,11 @@ type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContrac
  * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
  * read from ./button.shared.ts, on a Pressable. A string child is set as the
  * button's label in its variant's colour; any other child is laid out as
- * given, which is how a row holds a glyph beside two lines of text.
+ * given, which is how a row holds a glyph beside two lines of text. A
+ * `plain` button paints no fill or label colour and ignores `size`: its
+ * children are its look, stacked as in a View, inside a border that shows
+ * only when it is selected. Its classes come from ./button.native-classes.ts.
  */
-export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, size, variant, ...props }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, selected: selectedProp, size, variant: variantProp, ...props }: ButtonProps) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/button.native.js

@@ -1,138 +1,28 @@
-import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+import { nativeButtonClassNames } from "./button.native-classes.js";
 import { Loader } from "./loader.native.js";
 import { Text as Text$1 } from "./text.native.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native";
 //#region src/components/button.native.tsx
-/** A control's box: centred content inside the variant's border. */
-const CONTROL = "items-center justify-center border";
-/**
-* Every shared size in a phone's metrics. A text size grows to the platform's
-* 44-point touch target where the web relies on a coarse-pointer hit area; a
-* smaller control keeps its look and reaches the target through `slop`.
-*/
-const SIZES = {
-	chip: {
-		box: `${CONTROL} min-h-7 gap-1.5 rounded-full px-2.5`,
-		label: "text-xs",
-		slop: 8
-	},
-	default: {
-		box: `${CONTROL} min-h-11 gap-2 rounded-lg px-4`,
-		label: "",
-		slop: 0
-	},
-	icon: {
-		box: `${CONTROL} size-11 rounded-lg`,
-		label: "",
-		slop: 0
-	},
-	"icon-lg": {
-		box: `${CONTROL} size-12 rounded-lg`,
-		label: "",
-		slop: 0
-	},
-	"icon-sm": {
-		box: `${CONTROL} size-8 rounded-lg`,
-		label: "",
-		slop: 6
-	},
-	"icon-xl": {
-		box: `${CONTROL} size-11 rounded-full`,
-		label: "",
-		slop: 0
-	},
-	"icon-xs": {
-		box: `${CONTROL} size-7 rounded-md`,
-		label: "",
-		slop: 8
-	},
-	lg: {
-		box: `${CONTROL} min-h-12 gap-2 rounded-lg px-5`,
-		label: "",
-		slop: 0
-	},
-	row: {
-		box: "min-h-11 w-full items-start gap-3 py-3",
-		label: "",
-		slop: 0
-	},
-	sm: {
-		box: `${CONTROL} min-h-9 gap-1.5 rounded-lg px-3`,
-		label: "text-sm",
-		slop: 0
-	},
-	xl: {
-		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
-		label: "text-lg",
-		slop: 0
-	},
-	xs: {
-		box: `${CONTROL} min-h-7 gap-1 rounded-md px-2`,
-		label: "text-sm",
-		slop: 8
-	}
-};
-/**
-* A phone has no hover: a pressed button answers with the fill the web shows
-* on hover, or dims when it already has one. `selected` is the pressed state
-* held (a row open beside the list, a chosen option).
-*/
-const PRESS = {
-	default: {
-		pressed: "active:opacity-80",
-		selected: ""
-	},
-	destructive: {
-		pressed: "active:bg-destructive/18",
-		selected: ""
-	},
-	"destructive-outline": {
-		pressed: "active:bg-destructive/4",
-		selected: ""
-	},
-	"destructive-ghost": {
-		pressed: "active:bg-destructive/10",
-		selected: "bg-destructive/10"
-	},
-	ghost: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	link: {
-		pressed: "active:opacity-60",
-		selected: ""
-	},
-	muted: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	outline: {
-		pressed: "active:bg-accent",
-		selected: "bg-accent"
-	},
-	secondary: {
-		pressed: "active:bg-secondary/80",
-		selected: ""
-	}
-};
 /**
 * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
 * read from ./button.shared.ts, on a Pressable. A string child is set as the
 * button's label in its variant's colour; any other child is laid out as
-* given, which is how a row holds a glyph beside two lines of text.
+* given, which is how a row holds a glyph beside two lines of text. A
+* `plain` button paints no fill or label colour and ignores `size`: its
+* children are its look, stacked as in a View, inside a border that shows
+* only when it is selected. Its classes come from ./button.native-classes.ts.
 */
-const Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, size, variant, ...props }) => {
-	const shape = SIZES[size ?? "default"];
-	const tokens = BUTTON_VARIANT_TOKENS[variant ?? "default"];
-	const press = PRESS[variant ?? "default"];
+const Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, selected: selectedProp, size, variant: variantProp, ...props }) => {
+	const variant = variantProp ?? (size === "inline" ? "link" : void 0);
 	const inactive = disabled || loading;
-	const selected = accessibilityState?.selected === true;
-	const label = [
-		tokens.label,
-		variant === "link" ? "text-foreground underline" : "",
-		shape.label
-	].filter((name) => name !== "").join(" ");
+	const look = nativeButtonClassNames({
+		className,
+		inactive,
+		selected: selectedProp === true || accessibilityState?.selected === true,
+		size,
+		variant
+	});
 	return /* @__PURE__ */ jsxs(Pressable, {
 		accessibilityRole: "button",
 		accessibilityState: {
@@ -140,22 +30,15 @@ const Button = ({ accessibilityState, children, className, disabled = false, hit
 			busy: loading,
 			disabled: inactive
 		},
-		className: [
-			"flex-row",
-			tokens.surface,
-			shape.box,
-			inactive ? "opacity-64" : press.pressed,
-			selected ? press.selected : "",
-			className ?? ""
-		].filter((name) => name !== "").join(" "),
+		className: look.pressable,
 		disabled: inactive,
-		hitSlop: hitSlop ?? (shape.slop === 0 ? void 0 : shape.slop),
+		hitSlop: hitSlop ?? (look.slop === 0 ? void 0 : look.slop),
 		...props,
 		children: [loading ? /* @__PURE__ */ jsx(Loader, {
 			size: "sm",
 			variant: "decorative"
 		}) : icon, typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
-			className: label,
+			className: look.label,
 			variant: "button",
 			children
 		}) : children]

package/dist/components/button.shared.d.ts

@@ -34,6 +34,10 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly surface: "border-transparent";
     readonly label: "text-muted-foreground";
   };
+  readonly "muted-destructive": {
+    readonly surface: "border-transparent";
+    readonly label: "text-muted-foreground";
+  };
   readonly outline: {
     readonly surface: "border-input bg-popover";
     readonly label: "text-foreground";
@@ -43,9 +47,19 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly label: "text-secondary-foreground";
   };
 };
-export type ButtonVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/** A variant painted from its shared tokens above. */
+export type ButtonTokenVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/**
+ * `plain`: a click target whose look is its content (a card, a thumbnail, a
+ * cell, a passage). It has no tokens: neither renderer paints a box, border,
+ * type or press motion for it, and each keeps everything else its button
+ * owns (the disabled disposition, and on the web the tooltip and the focus
+ * ring). A `size` does not apply to it.
+ */
+export declare const BUTTON_PLAIN_VARIANT = "plain";
+export type ButtonVariant = ButtonTokenVariant | typeof BUTTON_PLAIN_VARIANT;
 /** Every size a button comes in, on every platform. */
-export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-xs", "lg", "row", "sm", "xl", "xs"];
+export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-2xs", "icon-xs", "inline", "lg", "row", "sm", "xl", "xs"];
 export type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
  * The props every button renderer accepts, with one meaning. A renderer adds
@@ -60,6 +74,14 @@ export type ButtonContract = {
   disabled?: boolean;
   /** A glyph before the label. */
   icon?: ReactNode;
+  /**
+   * The current choice in a set (a picked option, the active filter tab, the
+   * open item of a list): shows the variant's selected treatment, which is
+   * distinct from its hover or press. The accessibility state stays the
+   * caller's, because which one is right depends on the widget the button is
+   * part of.
+   */
+  selected?: boolean | undefined;
   children?: ReactNode;
 };
 //#endregion

package/dist/components/button.shared.js

@@ -33,6 +33,10 @@ const BUTTON_VARIANT_TOKENS = {
 		surface: "border-transparent",
 		label: "text-muted-foreground"
 	},
+	"muted-destructive": {
+		surface: "border-transparent",
+		label: "text-muted-foreground"
+	},
 	outline: {
 		surface: "border-input bg-popover",
 		label: "text-foreground"
@@ -42,6 +46,14 @@ const BUTTON_VARIANT_TOKENS = {
 		label: "text-secondary-foreground"
 	}
 };
+/**
+* `plain`: a click target whose look is its content (a card, a thumbnail, a
+* cell, a passage). It has no tokens: neither renderer paints a box, border,
+* type or press motion for it, and each keeps everything else its button
+* owns (the disabled disposition, and on the web the tooltip and the focus
+* ring). A `size` does not apply to it.
+*/
+const BUTTON_PLAIN_VARIANT = "plain";
 /** Every size a button comes in, on every platform. */
 const BUTTON_SIZES = [
 	"chip",
@@ -50,7 +62,9 @@ const BUTTON_SIZES = [
 	"icon-lg",
 	"icon-sm",
 	"icon-xl",
+	"icon-2xs",
 	"icon-xs",
+	"inline",
 	"lg",
 	"row",
 	"sm",
@@ -58,4 +72,4 @@ const BUTTON_SIZES = [
 	"xs"
 ];
 //#endregion
-export { BUTTON_SIZES, BUTTON_VARIANT_TOKENS };
+export { BUTTON_PLAIN_VARIANT, BUTTON_SIZES, BUTTON_VARIANT_TOKENS };

package/dist/components/collapsible.d.ts

@@ -0,0 +1,26 @@
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.d.ts
+/**
+ * One disclosure: a trigger that shows or hides a single panel ("Show
+ * details" under a card, a step list in a transcript). A set of sections
+ * where each heading opens its own panel is an `Accordion`.
+ *
+ * The trigger draws nothing of its own. It takes its look from what it
+ * renders, usually a `Button` (`render={<Button variant="muted" />}` for a
+ * text toggle), so a disclosure reads like every other action of its size.
+ */
+declare const Collapsible: (props: Collapsible$1.Root.Props) => import("react").JSX.Element;
+declare const CollapsibleTrigger: (props: Collapsible$1.Trigger.Props) => import("react").JSX.Element;
+/**
+ * The disclosed content. It adds no padding or type, so opening it reveals
+ * content at the rhythm of the surface around it, as a native `<details>`
+ * does. Its height eases open and shut with the accordion's timing, so the
+ * two disclosures move alike; under reduced motion it snaps.
+ *
+ * Closed, the content stays in the document as `hidden="until-found"` (as a
+ * native `<details>` keeps it), so find-in-page still reaches it and opens
+ * the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+ */
+declare const CollapsiblePanel: ({ className, hiddenUntilFound, ...props }: Collapsible$1.Panel.Props) => import("react").JSX.Element;
+//#endregion
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.tsx
+/**
+* One disclosure: a trigger that shows or hides a single panel ("Show
+* details" under a card, a step list in a transcript). A set of sections
+* where each heading opens its own panel is an `Accordion`.
+*
+* The trigger draws nothing of its own. It takes its look from what it
+* renders, usually a `Button` (`render={<Button variant="muted" />}` for a
+* text toggle), so a disclosure reads like every other action of its size.
+*/
+const Collapsible = (props) => /* @__PURE__ */ jsx(Collapsible$1.Root, {
+	"data-slot": "collapsible",
+	...props
+});
+const CollapsibleTrigger = (props) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+	"data-slot": "collapsible-trigger",
+	...props
+});
+/**
+* The disclosed content. It adds no padding or type, so opening it reveals
+* content at the rhythm of the surface around it, as a native `<details>`
+* does. Its height eases open and shut with the accordion's timing, so the
+* two disclosures move alike; under reduced motion it snaps.
+*
+* Closed, the content stays in the document as `hidden="until-found"` (as a
+* native `<details>` keeps it), so find-in-page still reaches it and opens
+* the panel. Pass `hiddenUntilFound={false}` to unmount it instead.
+*/
+const CollapsiblePanel = ({ className, hiddenUntilFound = true, ...props }) => /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+	className: cn("h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none [&[hidden]:not([hidden=until-found])]:hidden", className),
+	"data-slot": "collapsible-panel",
+	hiddenUntilFound,
+	...props
+});
+//#endregion
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/combobox.d.ts

@@ -14,7 +14,9 @@ declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, s
   size?: ControlSize | number;
   ref?: React$1.Ref<HTMLInputElement>;
 }) => React$1.JSX.Element;
-declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;
+declare const ComboboxTrigger: ({ className, variant, ...props }: Combobox$1.Trigger.Props & {
+  variant?: "plain" | "field";
+}) => React$1.JSX.Element;
 declare const ComboboxPopup: ({ className, children, side, sideOffset, alignOffset, align, ...props }: Combobox$1.Popup.Props & {
   align?: Combobox$1.Positioner.Props["align"];
   sideOffset?: Combobox$1.Positioner.Props["sideOffset"];

package/dist/components/combobox.js

@@ -5,6 +5,7 @@ import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { ScrollArea } from "./scroll-area.js";
 import { containedHandler } from "../hooks/use-contained-handler.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
+import "../lib/field-trigger.js";
 import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
@@ -94,8 +95,8 @@ const COMBOBOX_ACTION_SIZE_CLASS_NAMES = {
 	[CONTROL_SIZE.default]: "end-0.5",
 	[CONTROL_SIZE.lg]: "end-0.5"
 };
-const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
-	className,
+const ComboboxTrigger = ({ className, variant = "plain", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+	className: cn(variant === "field" && "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", className),
 	"data-slot": "combobox-trigger",
 	...props
 });

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

@@ -39,6 +39,8 @@ type DatePickerPopoverProps = {
    *  the control still has height; pass a call-to-action ("Select date…") to
    *  make the empty state self-explanatory. */
   placeholderLabel?: string;
+  /** Replaces the formatted date in the trigger, as a week range does. */
+  triggerLabel?: string;
   clearLabel?: string;
   defaultOpen?: boolean;
   open?: boolean;

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

@@ -3,8 +3,8 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
-import { Input } from "./input.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";
@@ -252,8 +252,10 @@ const PICKER_SIZE_CLASS_NAMES = {
 		cell: "pointer-coarse:min-h-11 pointer-coarse:text-sm"
 	}
 };
+/** The trigger keeps its height with an em dash when nothing has a label. */
+const firstLabel = (...labels) => labels.find((label) => label !== null && label !== void 0) ?? "—";
 const DatePickerPopoverContent = (props) => {
-	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, triggerLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
 	const selection = resolveSelection(mode, rawValue);
 	const value = selection.date;
 	const labels = resolvePopupLabels(props);
@@ -300,7 +302,7 @@ const DatePickerPopoverContent = (props) => {
 		isDayDisabled,
 		onChange
 	});
-	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
+	const displayLabel = firstLabel(triggerLabel, formatSelection(locale, selection), placeholderLabel);
 	const selectDay = (date) => {
 		switch (selection.mode) {
 			case DATE_PICKER_MODE.date:

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

@@ -1,10 +1,29 @@
 import * as React$1 from "react";
 //#region src/components/details-grid.d.ts
-declare const DetailsGrid: ({ className, ...props }: React$1.ComponentProps<"dl">) => React$1.JSX.Element;
+/**
+ * - `sheet`: a fact sheet; small uppercase labels, up to three pairs per row
+ *   as the container widens.
+ * - `list`: one pair per row in body type with a muted label, for a short
+ *   list inside a card or dialog (who is signed in, which organization).
+ */
+type DetailsVariant = "sheet" | "list";
+/**
+ * - `horizontal`: each label beside its value. In a `list`, every label
+ *   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).
+ */
+type DetailsOrientation = "horizontal" | "vertical";
+type DetailsGridProps = React$1.ComponentProps<"dl"> & {
+  orientation?: DetailsOrientation;
+  variant?: DetailsVariant;
+};
+declare const DetailsGrid: ({ className, 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 };
+export { DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant };