@parallelworks/ui 0.50.0 → 0.52.0

package/dist/components/ConfirmModal.js

@@ -1,73 +1,51 @@
 import { useStrings } from "./Provider.js";
 import { Button } from "./Button.js";
-import { Modal, ModalDescription, ModalTitle } from "./Modal.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Modal } from "./Modal.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 //#region src/components/ConfirmModal.tsx
+/** Asks before an action: its title the question, its description what follows,
+*  and Cancel beside a confirm button named for the action. */
 function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
 	const { common } = useStrings();
 	const [pending, setPending] = useState(false);
-	const firedRef = useRef(false);
-	useEffect(() => {
-		if (open) firedRef.current = false;
-	}, [open]);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-	const runConfirm = useCallback(async () => {
-		if (firedRef.current) return;
-		firedRef.current = true;
+	const running = useRef(false);
+	const runConfirm = async () => {
+		if (running.current) return;
+		running.current = true;
 		setPending(true);
 		try {
 			await onConfirm();
-			if (closeOnConfirm) onCloseRef.current();
-			else firedRef.current = false;
-		} catch (error) {
-			firedRef.current = false;
-			throw error;
+			if (closeOnConfirm) onClose();
 		} finally {
+			running.current = false;
 			setPending(false);
 		}
-	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(Modal, {
+	};
+	return /* @__PURE__ */ jsx(Modal, {
 		alert: destructive,
 		open,
 		onClose,
 		align,
 		dismissible: !pending,
-		className: "w-[480px] max-w-full",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "px-5 pt-5",
-			children: [
-				/* @__PURE__ */ jsx(ModalTitle, {
-					className: "text-lg font-semibold text-(--theme-app)",
-					children: title
-				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
-					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
-					children: description
-				}),
-				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "mt-4",
-					children
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
-				size: "sm",
-				onClick: onClose,
-				disabled: pending,
-				children: cancelLabel ?? common.cancel
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: destructive ? "danger" : "primary",
-				size: "sm",
-				onClick: runConfirm,
-				disabled: confirmDisabled,
-				loading: pending,
-				children: confirmLabel
-			})]
-		})]
+		size: "md",
+		title,
+		description,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: onClose,
+			disabled: pending,
+			children: cancelLabel ?? common.cancel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: destructive ? "danger" : "primary",
+			size: "sm",
+			onClick: runConfirm,
+			disabled: confirmDisabled,
+			loading: pending,
+			children: confirmLabel
+		})] }),
+		children
 	});
 }
 //#endregion

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type ButtonSize, type ButtonVariant } from './buttonClasses.js';
+export interface CopyButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick' | 'children' | 'type'> {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    /** What it copies, or a function that reads it when pressed, such as from the page. */
+    text: string | (() => string);
+    /** Names what it copies, such as "email address": the button reads "Copy email
+     *  address" and the toast "Copied email address". Without it, both say only "Copy". */
+    label?: string | undefined;
+    /** No toast, for a copy the reader can see succeed some other way. The button's
+     *  check shows either way, and a failure still says so. */
+    quiet?: boolean | undefined;
+    /** Shows "Copy" (then "Copied") beside the icon, for a copy that is a toolbar's
+     *  command rather than a detail beside a value. */
+    showLabel?: boolean | undefined;
+}
+/** The one copy control: a button that copies its text, turns into a check for a
+ *  moment, and says so in a toast, which screen readers announce. */
+export declare function CopyButton({ text, label, quiet, showLabel, variant, size, ...props }: CopyButtonProps): import("react").JSX.Element;
+export interface CopyCodeBlockProps {
+    /** What the button copies: the code as the reader would type it. */
+    text: string;
+    /** Names what it copies, as CopyButton's `label` does, such as "install command". */
+    label?: string | undefined;
+    /** The code as shown, which may be masked or highlighted. */
+    children: ReactNode;
+    /** Adds an eye button that shows or hides the value; the caller masks `children`
+     *  while `revealed` is false. */
+    secret?: boolean | undefined;
+    revealed?: boolean | undefined;
+    onRevealedChange?: ((revealed: boolean) => void) | undefined;
+    className?: string | undefined;
+}
+/** A block of code, such as a command to run, with a button that copies it. The
+ *  buttons show while the pointer is over the block or focus is in it, and always
+ *  where there is no hover to reveal them. */
+export declare function CopyCodeBlock({ text, label, children, secret, revealed, onRevealedChange, className, }: CopyCodeBlockProps): import("react").JSX.Element;

package/dist/components/CopyButton.js

@@ -0,0 +1,68 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
+import { IconButton } from "./IconButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CopyButton.tsx
+/** The one copy control: a button that copies its text, turns into a check for a
+*  moment, and says so in a toast, which screen readers announce. */
+function CopyButton({ text, label, quiet = false, showLabel = false, variant = showLabel ? "outline" : "ghost", size = "sm", ...props }) {
+	const { common: t } = useStrings();
+	const { copy, copied } = useCopy();
+	const name = label ? copied ? t.copiedThing(label) : t.copyThing(label) : copied ? t.copied : t.copy;
+	const icon = copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : /* @__PURE__ */ jsx(CopyIcon, {});
+	const onClick = () => void copy(typeof text === "function" ? text() : text, {
+		label,
+		quiet
+	});
+	if (showLabel) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...props,
+		"aria-label": props["aria-label"] ?? name,
+		onClick,
+		className: cx(buttonClasses({
+			variant,
+			size
+		}), props.className),
+		children: [icon, copied ? t.copied : t.copy]
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		...props,
+		variant,
+		size,
+		label: name,
+		icon,
+		onClick
+	});
+}
+/** A block of code, such as a command to run, with a button that copies it. The
+*  buttons show while the pointer is over the block or focus is in it, and always
+*  where there is no hover to reveal them. */
+function CopyCodeBlock({ text, label, children, secret = false, revealed = false, onRevealedChange, className }) {
+	const { common: t } = useStrings();
+	const reveal = "opacity-0 group-hover/code:opacity-100 group-focus-within/code:opacity-100 pointer-coarse:opacity-100";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("group/code relative", className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: cx("m-0 overflow-x-auto rounded-lg border border-(--theme-border) bg-(--theme-muted-panel-bg) p-4 text-left font-mono text-sm text-(--theme-app)", secret ? "pr-20" : "pr-12"),
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-2 right-2 flex items-center gap-1",
+			children: [secret && /* @__PURE__ */ jsx(IconButton, {
+				label: t.showValue,
+				icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
+				pressed: revealed,
+				onClick: () => onRevealedChange?.(!revealed),
+				className: cx("bg-(--theme-muted-panel-bg)", reveal)
+			}), /* @__PURE__ */ jsx(CopyButton, {
+				text,
+				label,
+				className: cx("bg-(--theme-muted-panel-bg)", reveal)
+			})]
+		})]
+	});
+}
+//#endregion
+export { CopyButton, CopyCodeBlock };

package/dist/components/CreateModal.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { ChevronDownIcon, FavoriteIcon, FavoriteOutlineIcon } from "../icons.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { ChevronDownIcon, FavoriteIcon, FavoriteOutlineIcon } from "../icons.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
@@ -11,7 +11,7 @@ import { Modal } from "./Modal.js";
 import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
@@ -21,7 +21,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 	const submitText = submitLabel ?? common.create;
 	const submittingText = submittingLabel ?? t.creating;
 	const descriptionText = descriptionPlaceholder ?? t.addDescription;
-	const [name, setName] = useState("");
+	const [name, setName] = useState(initialName ?? "");
 	const [description, setDescription] = useState("");
 	const [submitting, setSubmitting] = useState(false);
 	const [favorite, setFavorite] = useState(false);
@@ -29,16 +29,20 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 	const [nameTouched, setNameTouched] = useState(false);
 	const [interacted, setInteracted] = useState(false);
 	const nameRef = useRef(null);
-	useEffect(() => {
-		if (open) {
-			setName(initialName ?? "");
+	const nameMessageId = useId();
+	const session = open ? initialName ?? "" : null;
+	const [shownSession, setShownSession] = useState(session);
+	if (session !== shownSession) {
+		setShownSession(session);
+		if (session !== null) {
+			setName(session);
 			setDescription("");
 			setSubmitting(false);
 			setFavorite(false);
 			setNameTouched(false);
 			setInteracted(false);
 		}
-	}, [open, initialName]);
+	}
 	const nameError = name.trim() ? validateName?.(name.trim()) ?? null : null;
 	const hint = !nameError && name.trim() ? nameHint?.(name.trim()) : null;
 	const canSubmit = (hideName || nameOptional || name.trim().length > 0) && !nameError && !submitting && !submitDisabled;
@@ -66,11 +70,11 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		}
 		if (close) onClose();
 	};
-	return /* @__PURE__ */ jsxs(Modal, {
+	return /* @__PURE__ */ jsx(Modal, {
 		open,
 		onClose,
 		"aria-label": `${submitText}: ${typeLabel}`,
-		className: "w-[560px] max-w-full flex flex-col max-h-full",
+		size: "lg",
 		dismissible: !isDirty,
 		initialFocus: () => nameRef.current ?? true,
 		onKeyDown: (e) => {
@@ -79,84 +83,117 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		onMouseDown: (e) => {
 			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
 		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-h-0 overflow-y-auto overscroll-contain",
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+			showFavorite && /* @__PURE__ */ jsx("div", {
+				className: "me-auto",
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
+					children: /* @__PURE__ */ jsxs(Toggle, {
+						pressed: favorite,
+						onPressedChange: setFavorite,
+						"aria-label": t.favorite,
+						className: buttonClasses({
+							variant: "ghost",
+							size: "sm"
+						}),
+						children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "text-(--theme-favorite)" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, {}), favorite ? t.favorited : t.favorite]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: onClose,
+				children: hideSubmit ? common.close : common.cancel
+			}),
+			!hideSubmit && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "sm",
+				onClick: handleSubmit,
+				"aria-disabled": !canSubmit,
+				loading: submitting,
+				children: submitting ? submittingText : submitText
+			})
+		] }),
+		children: /* @__PURE__ */ jsxs("div", {
 			onChangeCapture: () => setInteracted(true),
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "px-4 pt-4",
-					children: [
-						typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(ActionMenu, {
-							items: typeMenu,
-							label: typeLabel,
-							triggerClassName: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
-							children: [
-								typeIcon,
-								typeLabel,
-								/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
-							]
-						}) : /* @__PURE__ */ jsxs("div", {
-							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
-							children: [typeIcon, typeLabel]
+				/* @__PURE__ */ jsxs("div", { children: [
+					typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(ActionMenu, {
+						items: typeMenu,
+						label: typeLabel,
+						triggerClassName: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+						children: [
+							typeIcon,
+							typeLabel,
+							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
+						]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
+						children: [typeIcon, typeLabel]
+					}),
+					hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("input", {
+							ref: nameRef,
+							type: "text",
+							autoComplete: "off",
+							"data-1p-ignore": true,
+							value: name,
+							onChange: (e) => {
+								const next = sanitizeName ? sanitizeName(e.target.value) : e.target.value;
+								setName(next);
+								onNameChange?.(next);
+							},
+							onBlur: (e) => {
+								if (!e.target.value.trim()) setNameTouched(true);
+							},
+							onKeyDown: (e) => {
+								if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {
+									e.preventDefault();
+									e.stopPropagation();
+									handleSubmit();
+								}
+							},
+							placeholder: namePlaceholder,
+							"aria-label": namePlaceholder,
+							"aria-required": !nameOptional,
+							"aria-invalid": nameMissing || !!nameError,
+							"aria-describedby": nameError || hint ? nameMessageId : void 0,
+							onAnimationEnd: () => setNameFlash(false),
+							className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 						}),
-						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx("input", {
-								ref: nameRef,
-								type: "text",
-								autoComplete: "off",
-								"data-1p-ignore": true,
-								value: name,
-								onChange: (e) => {
-									const next = sanitizeName ? sanitizeName(e.target.value) : e.target.value;
-									setName(next);
-									onNameChange?.(next);
-								},
-								onBlur: (e) => {
-									if (!e.target.value.trim()) setNameTouched(true);
-								},
-								onKeyDown: (e) => {
-									if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {
-										e.preventDefault();
-										e.stopPropagation();
-										handleSubmit();
-									}
-								},
-								placeholder: namePlaceholder,
-								"aria-label": namePlaceholder,
-								onAnimationEnd: () => setNameFlash(false),
-								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
-							}),
-							nameError && /* @__PURE__ */ jsx("p", {
-								className: "mt-1 text-xs text-(--theme-error)",
-								children: nameError
-							}),
-							hint && /* @__PURE__ */ jsx("p", {
-								className: "mt-1 text-xs text-(--theme-muted-text-color)",
-								children: hint
-							}),
-							showDescription ? /* @__PURE__ */ jsx("textarea", {
-								autoComplete: "off",
-								"data-1p-ignore": true,
-								value: description,
-								onChange: (e) => setDescription(e.target.value),
-								placeholder: descriptionText,
-								"aria-label": descriptionText,
-								rows: 3,
-								className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none focus:ring-0"
-							}) : /* @__PURE__ */ jsx("div", { className: "mt-3" })
-						] }),
-						children && /* @__PURE__ */ jsx("div", {
-							className: "mb-3 flex flex-col gap-3",
-							children
-						})
-					]
-				}),
+						nameError && /* @__PURE__ */ jsx("p", {
+							id: nameMessageId,
+							className: "mt-1 text-xs text-(--theme-error-text)",
+							children: nameError
+						}),
+						hint && /* @__PURE__ */ jsx("p", {
+							id: nameMessageId,
+							className: "mt-1 text-xs text-(--theme-muted-text-color)",
+							children: hint
+						}),
+						showDescription ? /* @__PURE__ */ jsx("textarea", {
+							autoComplete: "off",
+							"data-1p-ignore": true,
+							value: description,
+							onChange: (e) => setDescription(e.target.value),
+							placeholder: descriptionText,
+							"aria-label": descriptionText,
+							rows: 3,
+							className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none focus:ring-0"
+						}) : /* @__PURE__ */ jsx("div", { className: "mt-3" })
+					] }),
+					children && /* @__PURE__ */ jsx("div", {
+						className: "mb-3 flex flex-col gap-3",
+						children
+					})
+				] }),
 				properties && /* @__PURE__ */ jsx("div", {
-					className: "flex flex-wrap items-center gap-1.5 px-4 pt-1 pb-3",
+					className: "flex flex-wrap items-center gap-1.5 pt-1 pb-3",
 					children: properties
 				}),
 				advanced && /* @__PURE__ */ jsx("div", {
-					className: "px-4 pb-3",
+					className: "pb-3",
 					children: /* @__PURE__ */ jsx(Disclosure, {
 						summary: t.advanced,
 						summaryClassName: "text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
@@ -165,37 +202,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 					})
 				})
 			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "shrink-0 flex items-center justify-between gap-2 px-4 py-3",
-			children: [showFavorite ? /* @__PURE__ */ jsx(Tooltip, {
-				content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
-				children: /* @__PURE__ */ jsxs(Toggle, {
-					pressed: favorite,
-					onPressedChange: setFavorite,
-					"aria-label": t.favorite,
-					className: buttonClasses({
-						variant: "ghost",
-						size: "md"
-					}),
-					children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "text-(--theme-favorite)" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, {}), favorite ? t.favorited : t.favorite]
-				})
-			}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "sm",
-					onClick: onClose,
-					children: hideSubmit ? common.close : common.cancel
-				}), !hideSubmit && /* @__PURE__ */ jsx(Button, {
-					variant: "primary",
-					size: "sm",
-					onClick: handleSubmit,
-					"aria-disabled": !canSubmit,
-					loading: submitting,
-					children: submitting ? submittingText : submitText
-				})]
-			})]
-		})]
+		})
 	});
 }
 var pillClasses = (set) => buttonClasses({

package/dist/components/DatePicker.js

@@ -1,9 +1,10 @@
 import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
-import { buttonClasses } from "./buttonClasses.js";
 import { useStrings } from "./Provider.js";
 import { fieldBox } from "./fieldBox.js";
+import { useFieldControl, useFieldLabelId } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Popover } from "@base-ui/react/popover";
@@ -37,6 +38,7 @@ var caption = new Intl.DateTimeFormat(void 0, {
 var weekday = new Intl.DateTimeFormat(void 0, { weekday: "narrow" });
 var longDay = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
 var shownDay = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var longWeekday = new Intl.DateTimeFormat(void 0, { weekday: "long" });
 var calendarClassNames = {
 	root: "relative p-3",
 	months: "flex flex-col",
@@ -59,7 +61,7 @@ var calendarClassNames = {
 	weekday: "size-9 text-center text-xs font-normal text-(--theme-muted-text-color)",
 	week: "",
 	day: "size-9 p-0 text-center text-sm",
-	day_button: "size-9 rounded-md cursor-pointer outline-none hover:bg-(--theme-hover) focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) disabled:cursor-not-allowed disabled:hover:bg-transparent",
+	day_button: "size-9 rounded-md cursor-pointer hover:bg-(--theme-hover) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:hover:bg-transparent",
 	selected: "[&>button]:bg-(--theme-accent) [&>button]:text-(--theme-accent-text) [&>button]:hover:bg-(--theme-accent)",
 	today: "font-semibold [&>button]:underline [&>button]:underline-offset-4",
 	outside: "text-(--theme-muted-text-color) opacity-60",
@@ -74,6 +76,8 @@ var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-poin
 function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className }) {
 	const t = useStrings().datePicker;
 	const { common } = useStrings();
+	const field = useFieldControl();
+	const fieldLabelId = useFieldLabelId();
 	const [open, setOpen] = useState(false);
 	const [weekStartsOn] = useState(firstWeekday);
 	const day = parseDay(value);
@@ -103,10 +107,10 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 				id,
 				disabled,
 				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				"aria-describedby": ariaDescribedBy,
-				"aria-invalid": ariaInvalid || void 0,
-				"aria-required": ariaRequired || void 0,
+				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : fieldLabelId),
+				"aria-describedby": ariaDescribedBy ?? field?.["aria-describedby"],
+				"aria-invalid": ariaInvalid || field?.["aria-invalid"],
+				"aria-required": ariaRequired || field?.["aria-required"],
 				className: triggerClassName(size),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, {
 					"aria-hidden": "true",
@@ -150,7 +154,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 							labelPrevious: () => t.previousMonth,
 							labelNext: () => t.nextMonth,
 							labelGrid: (month) => caption.format(month),
-							labelWeekday: (date) => new Intl.DateTimeFormat(void 0, { weekday: "long" }).format(date)
+							labelWeekday: (date) => longWeekday.format(date)
 						},
 						components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
 					}), !required && day && /* @__PURE__ */ jsx("div", {
@@ -178,7 +182,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 			min: sameDay(min) ? timeOf(min) : void 0,
 			max: sameDay(max) ? timeOf(max) : void 0,
 			disabled,
-			"aria-invalid": ariaInvalid || void 0,
+			"aria-invalid": ariaInvalid || field?.["aria-invalid"],
 			onChange: (event) => {
 				const next = event.target.value;
 				if (next) emit(day ?? earliest ?? /* @__PURE__ */ new Date(), next);

package/dist/components/DescriptionList.d.ts

@@ -1,18 +1,52 @@
-import React from 'react';
-interface IDescriptionListItemProps {
-    label: string;
-    children: React.ReactNode;
-    tooltip?: string;
-    className?: string;
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+/** `plain` sets rows apart by space alone; `divided` rules a line between them; `card`
+ *  also frames them in a panel. */
+export type DescriptionListVariant = 'plain' | 'divided' | 'card';
+export interface DescriptionListProps extends Omit<ComponentPropsWithoutRef<'dl'>, 'className' | 'title'> {
+    variant?: DescriptionListVariant | undefined;
+    /** A heading over the list, which names it, such as "Actor" among a record's
+     *  details. */
+    title?: ReactNode;
+    /** The title's level in the page's outline. */
+    headingLevel?: 2 | 3 | 4 | undefined;
+    /** Puts each label over its value at any width. Without it they stack only when the
+     *  list is too narrow for both side by side. In a DescriptionListGroup, the group's
+     *  `stacked` decides. */
+    stacked?: boolean | undefined;
+    /** Styles the box around the list, such as its margins or width. */
+    className?: string | undefined;
 }
-export declare function DescriptionListItem({ label, children, tooltip, className, ...props }: IDescriptionListItemProps & React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element;
-export default function DescriptionList({ children, title, separators, subtitle, className, wrapperClassName, vertical, }: {
-    children: React.ReactNode;
-    className?: string;
-    wrapperClassName?: string;
-    title?: string | React.ReactNode;
-    separators?: boolean;
-    subtitle?: string | React.ReactNode;
-    vertical?: boolean;
-}): React.JSX.Element;
-export {};
+/** Names and their values, such as the details of a record in a drawer or a card. The
+ *  label column is as wide as its longest label, up to two fifths of the list, so a
+ *  long label wraps rather than squeezing the values; each label sits over its value
+ *  when the list is narrow. Lists side by side in one panel share their label column
+ *  inside a `DescriptionListGroup`. */
+export default function DescriptionList({ variant, title, headingLevel, stacked, className, children, ...props }: DescriptionListProps): import("react").JSX.Element;
+/** Description lists in one panel, such as a record's Overview, Actor and Target, that
+ *  share one label column: it fits the longest label across all of them, so their
+ *  values start at one edge down the panel. Each list keeps its own title and variant;
+ *  all of them stack together when the panel is narrow. */
+export declare function DescriptionListGroup({ stacked, className, children, }: {
+    /** Puts each label over its value at any width. */
+    stacked?: boolean | undefined;
+    /** Styles the box around the group, such as its margins or width. */
+    className?: string | undefined;
+    /** `DescriptionList`s. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface DescriptionListItemProps {
+    label: ReactNode;
+    /** The value. Nothing, an empty string or `false` shows the library's empty mark.
+     *  A path or URL in it, or in a link that is it, wraps after its slashes. */
+    children?: ReactNode;
+    /** Help behind an info button beside the label. */
+    tooltip?: string | undefined;
+    /** Sets the value in a monospace face, for an ID, a path or a hash. */
+    mono?: boolean | undefined;
+    /** Adds a button that copies the value: `true` copies its text as shown; a string
+     *  copies that instead, such as a full ID behind a shortened one. */
+    copy?: boolean | string | undefined;
+    className?: string | undefined;
+}
+/** A label and its value in a DescriptionList. */
+export declare function DescriptionListItem({ label, children, tooltip, mono, copy, className, }: DescriptionListItemProps): import("react").JSX.Element;