@parallelworks/ui 0.45.0 → 0.47.0

package/README.md

@@ -32,9 +32,14 @@ Each need has one component. Reach for it before styling markup by hand.
 | Work under way | `Loader`; `Skeleton` in a `LoadingRegion` for the shape of content still loading |
 | Nothing to show yet, or nothing matches | `EmptyState` |
 | A text field | `Input`, `Textarea`, or a control framed by `Field`, whose `actions` hold buttons that act on it |
-| A number, a date | `NumberInput`, `DatePicker` |
+| A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
+| A one-time code, such as a sign-in check | `OneTimeCodeInput` |
+| A labeled value nobody edits, among fields | `FieldValue` in a `Field`; `DescriptionList` for a set of them alone |
+| An error beside a control outside a `Field` | `ErrorText` |
+| A dense field in a toolbar or a table cell | any field control with `size="sm"`; a width in `className` wins, and `cx` merges classes the same way |
 | On or off | `Switch`; `Checkbox` in a list of things to tick, several of which may be on |
 | One of a few choices, all shown | `RadioGroup` in a form; `SegmentedControl` in a toolbar, or as a field's control in a `Field group` |
+| Narrowing a list by values, such as statuses: several at once, or one or none | `ToggleGroup` |
 | Narrowing what is shown by typing | `SearchInput`; `ListSearchControl` on a list page's toolbar |
 | A value from a list | `Select`, or `Combobox` when the list needs filtering |
 | Free text with suggestions, or tags | `Autocomplete`; `Combobox` with `multiple creatable` |
@@ -78,6 +83,12 @@ Some pairs look alike and are split on purpose:
   thing, each with its own panel or route. A `SegmentedControl` sets a value,
   such as a time range, that changes what one view shows. `Tabs` with
   `variant="segmented"` look the same, so the choice rests on what pressing does.
+- **SegmentedControl or ToggleGroup.** A `SegmentedControl` holds a setting
+  that always has exactly one value, such as a time range or which view of the
+  data to show. A `ToggleGroup` filters a list by values and may be off: its
+  options are pressed independently, or one or none with `multiple={false}`,
+  and `all` leads with an All option for "no filter". Each option can carry a
+  status dot or icon and a count.
 - **SearchInput or ListSearchControl.** A `SearchInput` is a box that is
   always shown and narrows what sits beside it, such as a panel's rows or a
   log's lines. `ListSearchControl` belongs to a list page's toolbar: it folds to
@@ -300,8 +311,8 @@ root:
 
 | Variable            | Meaning                                                                 |
 | ------------------- | ----------------------------------------------------------------------- |
-| `--app-inset-top`   | The height of a fixed top bar. A drawer starts below it.                |
-| `--app-inset-start` | The width of a fixed sidebar on the start side. A drawer at its widest leaves that strip, and never less than 2.5rem. |
+| `--app-inset-top`   | The height of a fixed top bar. Drawers and toasts start below it.       |
+| `--app-inset-start` | The width of a fixed sidebar on the start side. Toasts center over the page beside it, and a drawer at its widest leaves that strip, and never less than 2.5rem. Update it when the sidebar collapses. |
 
 ```ts
 document.documentElement.style.setProperty('--app-inset-top', '56px')
@@ -340,7 +351,7 @@ name is a meaning, such as `RetryIcon` or `WarningIcon`, drawn from
 stroke. Don't import `lucide-react` directly: a name here keeps one glyph per
 meaning across the apps.
 
-- **Size and colour:** an icon is `1em` square in `currentColor`, so it follows
+- **Size and color:** an icon is `1em` square in `currentColor`, so it follows
   the text around it. A class such as `size-4` or `h-3 w-3` sets another size,
   and `size` takes pixels.
 - **Accessibility:** an icon is decoration, hidden from assistive technology,
@@ -362,7 +373,7 @@ meaning across the apps.
 
 Logos of other companies' products, such as `GitHubIcon` or `UbuntuIcon`, are
 in `@parallelworks/ui/brand-icons`. They take the same props, are filled in the
-text's colour, and are only for naming the product. They come from Simple Icons
+text's color, and are only for naming the product. They come from Simple Icons
 (CC0) and Bootstrap Icons (MIT), and the file carries their notices.
 
 The `UI/Icons` story shows every icon and logo by name.

package/dist/ai/agent/permissions.d.ts

@@ -6,7 +6,7 @@ export declare const DEFAULT_PERMISSION_MODE: PermissionMode;
 export declare function isNamedPermissionMode(mode: string | undefined): mode is NamedPermissionMode;
 /** The daemon clamps a remote request to its owner's remoteMaxPermissionMode
  *  and refuses a mode it does not know, so a menu offers only what that
- *  machine will honour. */
+ *  machine will honor. */
 export declare function permissionModesUpTo(ceiling: string | undefined, accepted?: readonly string[] | undefined): PermissionMode[];
 export declare function clampPermissionMode(mode: PermissionMode, ceiling: string | undefined, accepted?: readonly string[] | undefined): PermissionMode;
 export {};

package/dist/ai/agent/permissions.js

@@ -26,7 +26,7 @@ var LEGACY_PERMISSION_MODES = [
 ];
 /** The daemon clamps a remote request to its owner's remoteMaxPermissionMode
 *  and refuses a mode it does not know, so a menu offers only what that
-*  machine will honour. */
+*  machine will honor. */
 function permissionModesUpTo(ceiling, accepted = void 0) {
 	const max = isNamedPermissionMode(ceiling) ? PERMISSION_RANK[ceiling] : PERMISSION_RANK[DEFAULT_PERMISSION_MODE];
 	const known = accepted?.length ? accepted : LEGACY_PERMISSION_MODES;

package/dist/ai/ai.css

@@ -55,7 +55,7 @@
   padding: 0.125em 0.375em;
   background-color: color-mix(in oklab, var(--theme-app, #000) 8%, transparent);
   border-radius: 0.25rem;
-  /* Identifiers carry a colour of their own so they read as code at a glance
+  /* Identifiers carry a color of their own so they read as code at a glance
    * without the weight the plugin gives them: the theme's link blue, which
    * every palette already keeps legible on its surfaces. */
   color: var(--theme-link, #2f6fa8);
@@ -248,7 +248,7 @@
    explicitly to ensure correct colors in all modes.
    See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
 
-/* Light mode: the primary Shiki theme's colours (--sdm-c) on the block's own
+/* Light mode: the primary Shiki theme's colors (--sdm-c) on the block's own
    surface, which stands in for the theme's background. */
 .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
@@ -259,7 +259,7 @@
   color: var(--sdm-c, inherit);
 }
 
-/* Dark mode: the --shiki-dark colours, again on the block's surface. */
+/* Dark mode: the --shiki-dark colors, again on the block's surface. */
 .dark .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
   background-color: transparent !important;
@@ -369,7 +369,7 @@
 
 /* The composer is one surface lifted off the page: a hairline of the ink for
  * its edge, and a short, soft shadow that deepens while it has focus. The
- * shadow is black on every scheme; an ink-coloured one would glow on dark. */
+ * shadow is black on every scheme; an ink-colored one would glow on dark. */
 .chat-composer {
   box-shadow:
     0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 12%, transparent),

package/dist/ai/components/ChatInput.js

@@ -261,7 +261,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
 										rows: 1,
-										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
+										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:text-(--theme-placeholder)", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
 								}), !toolbar && action]
 							}),

package/dist/ai/components/ChatStage.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 /** Where a new conversation starts: the heading and the composer together, a
- *  little above centre, with what the surface offers next under the box. The
+ *  little above center, with what the surface offers next under the box. The
  *  composer keeps its place however much is under it, so surfaces that share
  *  the stage put it in the same spot; a long list scrolls instead. */
 export default function ChatStage({ heading, subheading, children, }: {

package/dist/ai/components/ChatStage.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatStage.tsx
 /** Where a new conversation starts: the heading and the composer together, a
-*  little above centre, with what the surface offers next under the box. The
+*  little above center, with what the surface offers next under the box. The
 *  composer keeps its place however much is under it, so surfaces that share
 *  the stage put it in the same spot; a long list scrolls instead. */
 function ChatStage({ heading, subheading, children }) {

package/dist/ai/core/pasteLanguage.d.ts

@@ -1,5 +1,5 @@
 /** The highlighter's name for the language a paste is written in, or ''
- *  when it is not recognisably one. */
+ *  when it is not recognizably one. */
 export declare function guessPasteLanguage(text: string): string;
 /** The paste as a fenced code block in its language. The fence outruns any
  *  run of backticks inside the paste, so nothing in it can close the fence. */

package/dist/ai/core/pasteLanguage.js

@@ -17,7 +17,7 @@ function isJson(trimmed) {
 var YAML_LINE = /^\s*(-\s+)?["']?[\w./-]+["']?\s*:(\s|$)|^\s*-(\s|$)|^---\s*$/;
 var TOML_LINE = /^\s*\[{1,2}[\w."-]+\]{1,2}\s*$|^\s*[\w."-]+\s*=\s*\S/;
 /** The highlighter's name for the language a paste is written in, or ''
-*  when it is not recognisably one. */
+*  when it is not recognizably one. */
 function guessPasteLanguage(text) {
 	const trimmed = text.trim();
 	if (!trimmed) return "";

package/dist/brandIcons.js

@@ -25,7 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * Each logo is its owner's trademark; use one only to refer to its product.
 */
-/** A one-colour logo in the text's colour, at the text's size. */
+/** A one-color logo in the text's color, at the text's size. */
 function brand(viewBox, ...paths) {
 	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, absoluteStrokeWidth: _absoluteStrokeWidth, nonScalingStroke: _nonScalingStroke, children, ...props }) {
 		const named = Boolean(title || props["aria-label"] || props["aria-labelledby"]);

package/dist/components/ColorInput.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface ColorInputProps {
+    /** A CSS color the theme reads: a hex, `oklch()` or `color(display-p3 …)`. */
+    value: string;
+    /** Called with each color that parses, as typed or as picked: a picked one is a hex. */
+    onValueChange: (color: string) => void;
+    /** Without a label the row stands alone; name it with `aria-label`. */
+    label?: ReactNode;
+    /** Beside the label and outside it, so it stays out of the field's name. */
+    hint?: ReactNode;
+    /** Help under the field. */
+    description?: ReactNode;
+    error?: ReactNode;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** The hex field's id, which a label names. */
+    id?: string | undefined;
+    /** Submits the color under this name with a form. */
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
+    /** On the row that holds the swatch and the hex field: its width or margin. */
+    className?: string | undefined;
+}
+/**
+ * A color as a swatch that opens the system picker, beside a field its hex can be typed or pasted
+ * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
+ * puts back the last color that did.
+ */
+export declare function ColorInput({ value, onValueChange, label, hint, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/ColorInput.js

@@ -0,0 +1,82 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { parseColor, toHex } from "../theme/color.js";
+import { ErrorText } from "./Field.js";
+import { fieldBox } from "./fieldBox.js";
+import { framed } from "./Input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/ColorInput.tsx
+var swatchClassName = cx("shrink-0 cursor-pointer p-0.5", "[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded [&::-webkit-color-swatch]:border-0", "[&::-moz-color-swatch]:rounded [&::-moz-color-swatch]:border-0");
+/**
+* A color as a swatch that opens the system picker, beside a field its hex can be typed or pasted
+* in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
+* puts back the last color that did.
+*/
+function ColorInput({ value, onValueChange, label, hint, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+	const t = useStrings().colorInput;
+	const [draft, setDraft] = useState(null);
+	const errorId = useId();
+	const parsed = parseColor(value);
+	const unparsed = draft !== null && parseColor(draft) === null;
+	const named = typeof label === "string" ? label : ariaLabel;
+	const ownError = unparsed && label === void 0;
+	return framed({
+		label,
+		hint,
+		description,
+		error: error ?? (unparsed ? t.invalid : void 0)
+	}, {
+		id,
+		required,
+		disabled
+	}, (control) => /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full flex-col gap-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center", size === "sm" ? "gap-1.5" : "gap-2"),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "color",
+				"aria-label": t.pick(named),
+				value: parsed ? toHex(parsed) : "#000000",
+				disabled,
+				onChange: (e) => {
+					setDraft(null);
+					onValueChange(e.target.value);
+				},
+				className: cx(fieldBox({ size }), swatchClassName, size === "sm" ? "w-8" : "w-10")
+			}), /* @__PURE__ */ jsx("input", {
+				id,
+				name,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				...control,
+				"aria-describedby": [
+					ariaDescribedBy,
+					control["aria-describedby"],
+					ownError && errorId
+				].filter(Boolean).join(" ") || void 0,
+				"aria-invalid": control["aria-invalid"] ?? (ariaInvalid || unparsed || void 0),
+				"aria-required": control["aria-required"] ?? (ariaRequired || void 0),
+				required,
+				disabled,
+				spellCheck: false,
+				autoComplete: "off",
+				value: draft ?? value,
+				onChange: (e) => {
+					const text = e.target.value;
+					if (parseColor(text)) {
+						setDraft(null);
+						onValueChange(text.trim().toLowerCase());
+					} else setDraft(text);
+				},
+				onBlur: () => setDraft(null),
+				className: cx(fieldBox({ size }), "font-mono")
+			})]
+		}), ownError && /* @__PURE__ */ jsx(ErrorText, {
+			id: errorId,
+			children: t.invalid
+		})]
+	}));
+}
+//#endregion
+export { ColorInput };

package/dist/components/Combobox.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement, type ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
+import { type FieldBoxSize } from './fieldBox.js';
 export type { ComboboxGroup, ComboboxItem, ComboboxItems, ComboboxLeaf, } from './comboboxItems.js';
 interface FieldProps {
     id?: string | undefined;
@@ -11,7 +12,9 @@ interface FieldProps {
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
-    /** Classes for the field box: border, background, size. */
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** Classes for the field box: border, background, width. */
     className?: string | undefined;
 }
 type SelectionProps<Value> = {
@@ -54,4 +57,4 @@ export interface AutocompleteProps extends FieldProps {
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
 /** A free-text field that suggests values as you type. */
-export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, }: AutocompleteProps): import("react").JSX.Element;
+export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, }: AutocompleteProps): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -4,8 +4,8 @@ import { panelClassName, panelItemClassName, positionerClassName } from "./float
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
-import { isComboboxGroup } from "./comboboxItems.js";
 import { fieldBox } from "./fieldBox.js";
+import { isComboboxGroup } from "./comboboxItems.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
@@ -68,17 +68,18 @@ function useEntryFilter() {
 	return useCallback((entry, query) => entry.created === true || match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
 }
 var entryLabel = (entry) => entry?.label ?? "";
-var fieldClassName = cx(fieldBox({
+var fieldClassName = (size) => cx(fieldBox({
+	size,
 	within: true,
 	multiline: true,
 	padded: false
 }), "relative flex items-center gap-1");
-var inputClassName = "h-full min-w-12 flex-1 self-stretch border-0 bg-transparent py-1.5 pl-3 text-inherit outline-none placeholder:text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var inputClassName = (size) => cx("min-w-12 flex-1 self-stretch border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-(--theme-placeholder) disabled:cursor-not-allowed", size === "sm" ? "pl-2" : "pl-3");
 var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--theme-muted-text-color) disabled:cursor-not-allowed";
 var popupInputClassName = fieldBox({ size: "sm" });
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 function Combobox$1(props) {
-	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip } = props;
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md" } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const strings = useStrings();
@@ -122,7 +123,7 @@ function Combobox$1(props) {
 		"aria-invalid": ariaInvalid || void 0,
 		"aria-required": ariaRequired || required || void 0,
 		autoComplete: "off",
-		className: trigger ? popupInputClassName : inputClassName
+		className: trigger ? popupInputClassName : inputClassName(size)
 	});
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
@@ -158,9 +159,9 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
-		className: cx(fieldClassName, className),
+		className: cx(fieldClassName(size), className),
 		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
-			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-1",
+			className: cx("flex min-w-0 flex-1 flex-wrap items-center gap-1 pl-1", size === "sm" ? "py-0.5" : "py-1"),
 			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry) => /* @__PURE__ */ jsxs(Combobox.Chip, {
 				"aria-label": entry.label,
 				className: "flex items-center gap-1 rounded bg-(--theme-muted-panel-bg) py-0.5 pr-0.5 pl-1.5 text-xs outline-none data-highlighted:bg-(--theme-hover)",
@@ -171,7 +172,7 @@ function Combobox$1(props) {
 				})]
 			}, entry.label)) }), input]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
-			className: "flex shrink-0 items-center pl-3",
+			className: cx("flex shrink-0 items-center", size === "sm" ? "pl-2" : "pl-3"),
 			children: selectedIcon
 		}), input] }), /* @__PURE__ */ jsx(Combobox.Trigger, {
 			"aria-label": t.showOptions,
@@ -216,7 +217,7 @@ function Combobox$1(props) {
 	});
 }
 /** A free-text field that suggests values as you type. */
-function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md" }) {
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
@@ -234,7 +235,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		virtualized: true,
 		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
 			"data-testid": "combobox",
-			className: cx(fieldClassName, className),
+			className: cx(fieldClassName(size), className),
 			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
 				id,
 				placeholder,
@@ -244,7 +245,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				"aria-invalid": ariaInvalid || void 0,
 				"aria-required": ariaRequired || required || void 0,
 				autoComplete: "off",
-				className: inputClassName
+				className: inputClassName(size)
 			}), entries.flat.length > 0 && /* @__PURE__ */ jsx(Autocomplete.Trigger, {
 				"aria-label": t.showOptions,
 				"data-testid": "combobox-button",

package/dist/components/CreateModal.js

@@ -124,7 +124,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								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-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+								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)",
@@ -142,7 +142,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								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-muted-text-color) focus:outline-none focus:ring-0"
+								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", {

package/dist/components/DatePicker.d.ts

@@ -1,3 +1,4 @@
+import { type FieldBoxSize } from './fieldBox.js';
 export interface DatePickerProps {
     /** As a native date input holds it: `yyyy-MM-dd`, or with `withTime` the local
      *  `yyyy-MM-ddTHH:mm` of `datetime-local`. Empty while nothing is chosen. */
@@ -21,6 +22,9 @@ export interface DatePickerProps {
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** On the row that holds the date and the time: its width or margin. */
     className?: string | undefined;
 }
 /**
@@ -28,4 +32,4 @@ export interface DatePickerProps {
  * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
  * and the shown date follow the reader's locale.
  */
-export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, }: DatePickerProps): import("react").JSX.Element;

package/dist/components/DatePicker.js

@@ -65,13 +65,13 @@ var calendarClassNames = {
 	outside: "text-(--theme-muted-text-color) opacity-60",
 	disabled: "text-(--theme-muted-text-color) opacity-40"
 };
-var triggerClassName = cx(fieldBox(), "flex flex-1 min-w-40 cursor-pointer items-center gap-2 text-left");
+var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-pointer items-center text-left", size === "sm" ? "min-w-32 gap-1.5" : "min-w-40 gap-2");
 /**
 * A day from a calendar, and with `withTime` a time beside it. The value is a string as a native
 * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
 * and the shown date follow the reader's locale.
 */
-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, className }) {
+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 [open, setOpen] = useState(false);
@@ -95,7 +95,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 	};
 	const sameDay = (bound) => day !== void 0 && parseDay(bound)?.getTime() === day.getTime();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full items-center gap-2", className),
+		className: cx("flex w-full items-center", size === "sm" ? "gap-1.5" : "gap-2", className),
 		children: [/* @__PURE__ */ jsxs(Popover.Root, {
 			open,
 			onOpenChange: setOpen,
@@ -107,12 +107,12 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid || void 0,
 				"aria-required": ariaRequired || void 0,
-				className: triggerClassName,
+				className: triggerClassName(size),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, {
 					"aria-hidden": "true",
-					className: "size-3.5 shrink-0 text-(--theme-muted-text-color)"
+					className: cx("shrink-0 text-(--theme-muted-text-color)", size === "sm" ? "size-3" : "size-3.5")
 				}), /* @__PURE__ */ jsx("span", {
-					className: cx("truncate", !day && "text-(--theme-muted-text-color)"),
+					className: cx("truncate", !day && "text-(--theme-placeholder)"),
 					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
 				})]
 			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
@@ -183,7 +183,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 				const next = event.target.value;
 				if (next) emit(day ?? earliest ?? /* @__PURE__ */ new Date(), next);
 			},
-			className: cx(fieldBox(), "w-auto tabular-nums")
+			className: cx(fieldBox({ size }), "w-auto tabular-nums")
 		})]
 	});
 }

package/dist/components/Field.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from 'react';
+import { type OutputHTMLAttributes, type ReactNode } from 'react';
+import type { FieldBoxSize } from './fieldBox.js';
 /** What a field's control takes to be named, described and marked by its field. Spread it
  *  on the control: `{(control) => <input {...control} />}`. */
 export interface FieldControlProps {
@@ -43,12 +44,15 @@ export interface FieldProps {
     id?: string | undefined;
     className?: string | undefined;
     /** The control, or a function that places the control props on it. A Base UI control, such
-     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. */
+     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. A value shown
+     *  but not edited goes in a `FieldValue`. */
     children: ReactNode | ((control: FieldControlProps) => ReactNode);
 }
-/** An error in the look a Field gives its own, for one under a part of a control rather than
- *  the whole of it, such as a row of a list editor. */
-export declare function ErrorText({ children }: {
+/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
+ *  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
+ *  in the control's `aria-describedby` so the error is read with the control. */
+export declare function ErrorText({ id, children }: {
+    id?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element | null;
 /** A control with its label, help and error, tied to it for assistive technology. One frame
@@ -68,3 +72,13 @@ export declare function RevealToggle({ revealed, onRevealedChange, disabled, }:
     onRevealedChange: (revealed: boolean) => void;
     disabled?: boolean | undefined;
 }): import("react").JSX.Element;
+export interface FieldValueProps extends OutputHTMLAttributes<HTMLOutputElement> {
+    /** Matches the height and text of the controls around it, as `size` does on a control. */
+    size?: FieldBoxSize | undefined;
+}
+/** A value a Field shows that nobody edits, such as one worked out from other fields. It is an
+ *  `<output>`, which the Field's label names and which reads out when the value changes; list
+ *  the controls it is worked out from in `htmlFor`. It keeps a control's height, so it lines
+ *  up with the fields around it. For a set of names and values on their own, use
+ *  DescriptionList. */
+export declare function FieldValue({ size, className, children, ...props }: FieldValueProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -20,10 +20,12 @@ function useFieldControl() {
 var labelClassName = "flex items-center gap-1 text-sm font-medium text-(--theme-app)";
 var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
 var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
-/** An error in the look a Field gives its own, for one under a part of a control rather than
-*  the whole of it, such as a row of a list editor. */
-function ErrorText({ children }) {
+/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
+*  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
+*  in the control's `aria-describedby` so the error is read with the control. */
+function ErrorText({ id, children }) {
 	return children ? /* @__PURE__ */ jsxs("div", {
+		id,
 		role: "alert",
 		className: errorTextClassName,
 		children: [/* @__PURE__ */ jsx(WarningIcon, {
@@ -155,5 +157,20 @@ function RevealToggle({ revealed, onRevealedChange, disabled }) {
 		})
 	});
 }
+/** A value a Field shows that nobody edits, such as one worked out from other fields. It is an
+*  `<output>`, which the Field's label names and which reads out when the value changes; list
+*  the controls it is worked out from in `htmlFor`. It keeps a control's height, so it lines
+*  up with the fields around it. For a set of names and values on their own, use
+*  DescriptionList. */
+function FieldValue({ size = "md", className, children, ...props }) {
+	const control = useFieldControl();
+	return /* @__PURE__ */ jsx("output", {
+		id: control?.id,
+		"aria-describedby": control?.["aria-describedby"],
+		...props,
+		className: cx("flex min-w-0 items-center break-words text-(--theme-app)", size === "sm" ? "min-h-7 text-xs" : "min-h-9 text-sm", className),
+		children
+	});
+}
 //#endregion
-export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, RevealToggle, useFieldControl };
+export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, FieldValue, RevealToggle, useFieldControl };

package/dist/components/Input.d.ts

@@ -1,4 +1,6 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { type FieldControlProps } from './Field.js';
+import { type FieldBoxSize } from './fieldBox.js';
 interface FramedProps {
     /** Without a label the box stands alone; name it with `aria-label`. */
     label?: ReactNode;
@@ -8,11 +10,19 @@ interface FramedProps {
     description?: ReactNode;
     error?: ReactNode;
     mono?: boolean;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
 }
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FramedProps {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, FramedProps {
 }
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FramedProps {
 }
+/** The Field around a control when it has a label; the control alone when it doesn't. */
+export declare function framed({ label, hint, description, error }: Omit<FramedProps, 'mono' | 'size'>, { id, required, disabled, }: {
+    id?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, control: (props: Partial<FieldControlProps>) => ReactNode): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 /** A single-line text field. `type="password"` adds a button that shows what was typed. */
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 /** A multi-line text field that grows by hand. */