@parallelworks/ui 0.52.0 → 0.54.0

package/dist/components/Combobox.js

@@ -1,11 +1,13 @@
 import { cx } from "../cx.js";
 import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { Loader } from "./Loader.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
 import { fieldBox } from "./fieldBox.js";
-import { isComboboxGroup, pickerItemClassName } from "./comboboxItems.js";
+import { isComboboxGroup, optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { OptionDescription } from "./OptionDescription.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { dequal } from "dequal";
@@ -79,13 +81,14 @@ var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--the
 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, size = "md" } = 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", details, detailsSummary, onItemHighlighted, onQueryChange, loading = false, collisionBoundary } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
 	const list = useRef(null);
 	const uid = useId();
 	const [inputValue, setInputValue] = useState(null);
+	const [highlighted, setHighlighted] = useState(void 0);
 	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
 		value,
 		label: itemToStringLabel(value)
@@ -125,15 +128,21 @@ function Combobox$1(props) {
 		autoComplete: "off",
 		className: trigger ? popupInputClassName : inputClassName(size)
 	});
+	const isHighlighted = (entry) => highlighted !== void 0 && !entry.created && !highlighted.created && isItemEqualToValue(entry.value, highlighted.value);
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
 		disabled: entry.disabled || full && !isChosen(entry),
 		...rowProps.props,
-		...optionNaming(uid, rowProps.props.index, entry),
+		...optionNaming(`${uid}${rowProps.props.index}`, entry),
 		className: pickerItemClassName,
 		children: [/* @__PURE__ */ jsx(ItemContent, {
 			entry,
-			id: `${uid}${rowProps.props.index}`
+			id: `${uid}${rowProps.props.index}`,
+			children: detailsSummary && isHighlighted(entry) && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "mt-0.5 text-xs leading-snug text-(--theme-muted-text-color) @min-[30rem]/picker:hidden",
+				children: detailsSummary(entry.value)
+			})
 		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			className: "ml-auto flex shrink-0 items-center",
 			children: /* @__PURE__ */ jsx(CheckIcon, {
@@ -162,7 +171,10 @@ function Combobox$1(props) {
 			className: "border-b border-(--theme-border) p-1.5",
 			children: input
 		}),
-		className: "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		loading: loading ? t.searching : void 0,
+		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+		collisionBoundary,
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
@@ -198,15 +210,25 @@ function Combobox$1(props) {
 		empty: t.noOptionsFound,
 		statusGroups: entries.statusGroups,
 		query: inputValue ?? "",
+		loading: loading ? t.searching : void 0,
+		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+		collisionBoundary,
 		renderItem: itemRow
 	})] });
 	const root = {
 		items: listItems,
-		filter,
 		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
 		itemToStringLabel: entryLabel,
-		onInputValueChange: setInputValue,
-		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		filter: onQueryChange ? null : filter,
+		onInputValueChange: (next) => {
+			setInputValue(next);
+			onQueryChange?.(next);
+		},
+		onItemHighlighted: (entry, { index, reason }) => {
+			if (details || detailsSummary) setHighlighted(entry);
+			onItemHighlighted?.(entry && !entry.created ? entry.value : void 0);
+			list.current?.reveal(index, reason);
+		},
 		disabled,
 		required,
 		virtualized: true,
@@ -218,7 +240,12 @@ function Combobox$1(props) {
 		multiple: true,
 		value: toEntries(props.value),
 		defaultValue: toEntries(props.defaultValue),
-		onValueChange: (next) => {
+		onValueChange: (next, details) => {
+			if (details.reason === "escape-key") {
+				details.cancel();
+				details.allowPropagation();
+				return;
+			}
 			setUncontrolledCount(next.length);
 			props.onValueChange?.(next.map((entry) => entry.value));
 		}
@@ -275,7 +302,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				value: entry,
 				disabled: entry.disabled,
 				...rowProps.props,
-				...optionNaming(uid, rowProps.props.index, entry),
+				...optionNaming(`${uid}${rowProps.props.index}`, entry),
 				className: pickerItemClassName,
 				children: /* @__PURE__ */ jsx(ItemContent, {
 					entry,
@@ -285,33 +312,31 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		})]
 	});
 }
-/** An option is named by its label, with its description read after it rather than as part of
-*  its name. */
-function optionNaming(uid, index, entry) {
-	return {
-		"aria-labelledby": `${uid}${index}label`,
-		"aria-describedby": entry.description ? `${uid}${index}description` : void 0
-	};
-}
-function ItemContent({ entry, id }) {
+function ItemContent({ entry, id, children }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
 		children: entry.icon
 	}), /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 flex-col",
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: entry.label,
-			overflowOnly: true,
-			children: /* @__PURE__ */ jsx("span", {
-				id: `${id}label`,
-				className: "truncate",
-				children: entry.label
-			})
-		}), entry.description && /* @__PURE__ */ jsx("span", {
-			id: `${id}description`,
-			className: "text-xs leading-snug text-(--theme-muted-text-color)",
-			children: entry.description
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Tooltip, {
+					content: entry.label,
+					overflowOnly: true,
+					children: /* @__PURE__ */ jsx("span", {
+						id: `${id}label`,
+						className: "truncate",
+						children: entry.label
+					})
+				}), entry.badge]
+			}),
+			/* @__PURE__ */ jsx(OptionDescription, {
+				id: `${id}description`,
+				item: entry
+			}),
+			children
+		]
 	})] });
 }
 function GroupHeading({ group }) {
@@ -335,26 +360,52 @@ function GroupHeading({ group }) {
 	] });
 }
 /** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
-function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", renderItem }) {
+function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", loading, details, collisionBoundary, renderItem }) {
+	const withDetails = details !== void 0;
+	const list = /* @__PURE__ */ jsxs(Fragment, { children: [
+		loading && /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "flex items-center gap-2 px-3 py-2 text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: "1em"
+			}), loading]
+		}),
+		empty && !loading && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
+			className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
+			children: empty
+		}),
+		/* @__PURE__ */ jsx(Combobox.List, {
+			className: cx(withDetails && "min-h-0 flex-1"),
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				ref: listRef,
+				statusGroups,
+				query,
+				tall: withDetails,
+				renderItem
+			})
+		})
+	] });
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		align: "start",
 		sideOffset: 4,
 		className: positionerClassName,
+		...collisionBoundary && { collisionBoundary },
 		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-			className: cx("overflow-hidden", className, panelClassName),
-			children: [
-				header,
-				empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
-					className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
-					children: empty
-				}),
-				/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
-					ref: listRef,
-					statusGroups,
-					query,
-					renderItem
-				}) })
-			]
+			className: cx("overflow-hidden", withDetails && "@container/picker flex h-[min(40rem,var(--available-height))] flex-col", className, panelClassName),
+			children: [header, withDetails ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: list
+				}), /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					"data-testid": "combobox-details",
+					className: "hidden w-1/2 shrink-0 overflow-y-auto overscroll-contain border-l border-(--theme-border) bg-(--theme-panel-bg) @min-[30rem]/picker:block",
+					children: [details, /* @__PURE__ */ jsx("div", { className: "pointer-events-none sticky bottom-0 -mt-6 h-6 bg-linear-to-t from-(--theme-panel-bg) to-transparent" })]
+				})]
+			}) : list]
 		})
 	}) });
 }
@@ -382,7 +433,7 @@ function toRows(filtered, statusGroups) {
 		rowOfItem
 	};
 }
-function VirtualList({ ref, statusGroups, query, renderItem }) {
+function VirtualList({ ref, statusGroups, query, tall, renderItem }) {
 	const filtered = Combobox.useFilteredItems();
 	const match = useQueryMatch();
 	const { rows, rowOfItem } = useMemo(() => {
@@ -420,7 +471,7 @@ function VirtualList({ ref, statusGroups, query, renderItem }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "presentation",
 		ref: scrollerRef,
-		className: "max-h-[min(15rem,var(--available-height))] overflow-auto overscroll-contain",
+		className: cx("overflow-auto overscroll-contain px-1", tall ? "max-h-full" : "max-h-[min(15rem,var(--available-height))]"),
 		style: { height: total },
 		children: /* @__PURE__ */ jsx("div", {
 			role: "presentation",
@@ -441,7 +492,7 @@ function VirtualList({ ref, statusGroups, query, renderItem }) {
 					"data-index": virtual.index,
 					ref: virtualizer.measureElement,
 					style,
-					className: "flex items-center gap-1.5 px-3 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
+					className: "flex items-center gap-1.5 px-2 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
 					children: /* @__PURE__ */ jsx(GroupHeading, { group: row.group })
 				}, virtual.key);
 				return renderItem(row.entry, {

package/dist/components/Drawer.d.ts

@@ -7,6 +7,11 @@ export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' |
     title?: ReactNode;
     /** A line under the title. */
     description?: ReactNode;
+    /** Adds a back arrow before the title, for a view the drawer opened over its first, such as
+     *  a form; the drawer stays one drawer rather than another stacking on it. */
+    onBack?: (() => void) | undefined;
+    /** Names the back arrow; defaults to the provider's `back`. */
+    backLabel?: string | undefined;
     /** Actions along the bottom edge, such as Cancel and Save; they stay in view as the body scrolls. */
     footer?: ReactNode;
     /** The edge it slides in from, and the way a swipe dismisses it. */
@@ -44,4 +49,4 @@ export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' |
  *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
  *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
  *  on the document root. */
-export declare function Drawer({ open, onClose, title, description, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;
+export declare function Drawer({ open, onClose, title, description, onBack, backLabel, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;

package/dist/components/Drawer.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { CloseIcon } from "../icons.js";
+import { ArrowLeftIcon, CloseIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
@@ -15,7 +15,7 @@ import { Drawer } from "@base-ui/react/drawer";
 *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
 *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
 *  on the document root. */
-function Drawer$1({ open, onClose, title, description, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
 	const { common } = useStrings();
 	const container = useRef(null);
 	const viewport = useRef(null);
@@ -61,20 +61,29 @@ function Drawer$1({ open, onClose, title, description, footer, side = "right", w
 						children: [
 							header && /* @__PURE__ */ jsxs("div", {
 								className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "min-w-0 flex-1",
-									children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
-										className: "m-0 text-sm font-semibold wrap-break-word",
-										children: title
-									}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
-										className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
-										children: description
-									})]
-								}), closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
-									icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-									label: common.close,
-									className: "-my-1 -me-1.5"
-								}) })]
+								children: [
+									onBack && /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+										label: backLabel ?? common.back,
+										onClick: onBack,
+										className: "-my-1 -ms-1.5"
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
+											className: "m-0 text-sm font-semibold wrap-break-word",
+											children: title
+										}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
+											className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
+											children: description
+										})]
+									}),
+									closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+										label: common.close,
+										className: "-my-1 -me-1.5"
+									}) })
+								]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: cx("relative flex min-h-0 flex-1 flex-col overflow-y-auto", padded && "p-4", className),

package/dist/components/Field.d.ts

@@ -26,10 +26,11 @@ export interface FieldProps {
     /** Beside the label and outside it, so it stays out of the control's name, such as a count. For
      *  help text, use `help`. */
     hint?: ReactNode;
-    /** More about the field, behind a ? beside the label that opens on hover or press. It is read
-     *  with the control as part of its description, so the ? stays out of the Tab order, and it shows
-     *  under the control while the control has keyboard focus. `[text](url)` links and line breaks
-     *  show as such. */
+    /** More about the field, behind a ? beside the label. It is read with the control as part of
+     *  its description, so the ? is hidden from assistive technology and Tab passes over it. It
+     *  opens on hover or press of the ?, and while the control has keyboard focus, until Escape.
+     *  `[text](url)` links and line breaks show as such; a link keeps the ? in the Tab order, as
+     *  the keyboard's way to it. */
     help?: string | undefined;
     /** Buttons at the far end of the label's row that act on the field, such as one that
      *  switches its control to a typed expression. */

package/dist/components/Field.js

@@ -1,10 +1,11 @@
 import { cx } from "../cx.js";
 import { EyeIcon, EyeOffIcon, WarningIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
+import { focusCameFromKeyboard, trackFocusModality } from "./focus.js";
 import { InfoTip, formatInfoTipContent } from "./InfoTip.js";
 import { RequiredMark } from "./RequiredMark.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, use, useId } from "react";
+import { createContext, use, useEffect, useId, useState } from "react";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/Field.tsx
@@ -81,10 +82,31 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 	const inline = layout === "inline";
 	const inRow = use(FieldRowContext) && !inline && !group;
 	const labelSize = labelSizes[size];
+	const [helpOpen, setHelpOpen] = useState(false);
+	useEffect(() => {
+		if (help) trackFocusModality();
+	}, [help]);
 	const helpTip = help && /* @__PURE__ */ jsx(InfoTip, {
 		text: help,
-		tabIndex: -1
+		describesControl: true,
+		open: Boolean(helpOpen),
+		onOpenChange: (open) => setHelpOpen(open && "pointer"),
+		keepSide: helpOpen === "focus"
 	});
+	const helpFocus = help ? {
+		onFocus: () => {
+			if (focusCameFromKeyboard()) setHelpOpen("focus");
+		},
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setHelpOpen(false);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && helpOpen) {
+				event.stopPropagation();
+				setHelpOpen(false);
+			}
+		}
+	} : {};
 	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
 	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
@@ -98,6 +120,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 	const placed = typeof children === "function" ? children(control) : children;
 	const body = /* @__PURE__ */ jsxs("div", {
 		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
+		...helpFocus,
 		children: [
 			/* @__PURE__ */ jsx(FieldRowContext, {
 				value: false,
@@ -116,7 +139,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			}),
 			help && /* @__PURE__ */ jsx(Field.Description, {
 				id: helpId,
-				className: "hidden text-xs leading-relaxed text-(--theme-muted-text-color) group-has-[:focus-visible]/field:block [&_a]:underline",
+				hidden: true,
 				children: formatInfoTipContent(help)
 			}),
 			error && /* @__PURE__ */ jsxs(Field.Error, {
@@ -131,7 +154,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			})
 		]
 	});
-	const frame = inRow ? cx("group/field contents", className) : cx("group/field flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
+	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
 	if (group) return /* @__PURE__ */ jsx(Field.Root, {
 		invalid: isInvalid,
 		disabled,

package/dist/components/InfoTip.d.ts

@@ -8,11 +8,19 @@ interface InfoTipProps {
     className?: string | undefined;
     /** Replaces the info icon as the trigger, such as a status label the text explains. */
     children?: ReactNode;
-    /** -1 takes the trigger out of the Tab order, for help that is also read another way, such as
-     *  a Field's, which its control is described by. */
-    tabIndex?: number | undefined;
+    /** The text is also a control's description, which assistive technology reads with the
+     *  control, so the ? is hidden from it and skipped by Tab rather than offering the text twice.
+     *  Text with a link keeps the ? reachable, as the only way to the link from the keyboard. */
+    describesControl?: boolean | undefined;
+    /** Opens it from outside as well as on hover and press, such as while the described control
+     *  has keyboard focus. Pair it with `onOpenChange`. */
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Stays on `side` rather than flipping where it doesn't fit, as while the control it
+     *  describes is typed in, which a flipped tip would cover. */
+    keepSide?: boolean | undefined;
 }
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
  *  touch and screen reader users can reach it and its links. */
-export declare function InfoTip({ text, side, className, children, tabIndex }: InfoTipProps): import("react").JSX.Element | null;
+export declare function InfoTip({ text, side, className, children, describesControl, open, onOpenChange, keepSide, }: InfoTipProps): import("react").JSX.Element | null;
 export {};

package/dist/components/InfoTip.js

@@ -28,22 +28,32 @@ function formatInfoTipContent(content) {
 	if (!content) return null;
 	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
 }
+var hasLink = (content) => new RegExp(linkRegex.source).test(content);
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
 *  touch and screen reader users can reach it and its links. */
-function InfoTip({ text, side = "top", className, children, tabIndex }) {
+function InfoTip({ text, side = "top", className, children, describesControl = false, open, onOpenChange, keepSide = false }) {
 	const t = useStrings().common;
 	if (!text) return children ? /* @__PURE__ */ jsx("span", {
 		className,
 		children
 	}) : null;
+	const hidden = describesControl && !hasLink(text);
 	return /* @__PURE__ */ jsx(Popover, {
 		variant: "tip",
 		openOnHover: true,
 		side,
+		keepSide,
+		...open === void 0 ? {} : { open },
+		...onOpenChange ? { onOpenChange } : {},
+		...describesControl && { initialFocus: "none" },
+		...hidden && { finalFocus: false },
 		trigger: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			tabIndex,
-			"aria-label": children ? void 0 : t.moreInfo,
+			...hidden && {
+				tabIndex: -1,
+				"aria-hidden": true
+			},
+			"aria-label": children || hidden ? void 0 : t.moreInfo,
 			className: cx("inline-flex items-center cursor-help", !children && "tooltip", className),
 			children: children ?? /* @__PURE__ */ jsx(HelpIcon, { "aria-hidden": "true" })
 		}),

package/dist/components/MarkdownImpl.d.ts

@@ -1,2 +1,3 @@
+import 'katex/dist/katex.min.css';
 import type { MarkdownProps } from './Markdown.js';
 export default function MarkdownImpl({ children, isStreaming, controls, components, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -7,6 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
+import "katex/dist/katex.min.css";
 import { Streamdown, defaultRehypePlugins } from "streamdown";
 //#region src/components/MarkdownImpl.tsx
 var basePlugins = {

package/dist/components/Menu.js

@@ -16,7 +16,7 @@ function MenuPopup({ children, className, side = "bottom", align = "start", anch
 			sideOffset: 4,
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
+				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto", "p-1", panelClassName, className),
 				children
 			})
 		})
@@ -41,7 +41,7 @@ function MenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		closeOnClick: true,
 		...props,
-		className: cx(itemClassName, "pl-2", className),
+		className: cx(itemClassName, "pl-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex w-3.5 shrink-0 justify-center",
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })
@@ -72,11 +72,11 @@ function MenuSubmenuTrigger({ className, children, ...props }) {
 	});
 }
 function MenuSeparator({ className }) {
-	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("my-1 h-px bg-(--theme-border)", className) });
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("-mx-1 my-1 h-px bg-(--theme-border)", className) });
 }
 function MenuGroupLabel({ children }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		className: "px-2 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
 		children
 	});
 }

package/dist/components/MenuEntries.js

@@ -34,7 +34,7 @@ function MenuEntries({ entries, search, query = "" }) {
 	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-2 pt-0.5 pb-1",
+			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-1 pt-0.5 pb-1",
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,

package/dist/components/OptionDescription.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItem } from './comboboxItems.js';
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+ *  so the shown one is then hidden from assistive technology rather than read twice. */
+export declare function OptionDescription({ id, item, }: {
+    id: string;
+    item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>;
+}): import("react").JSX.Element;

package/dist/components/OptionDescription.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/OptionDescription.tsx
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+*  so the shown one is then hidden from assistive technology rather than read twice. */
+function OptionDescription({ id, item }) {
+	const spoken = item.accessibleDescription;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [item.description && /* @__PURE__ */ jsx("span", {
+		id: spoken ? void 0 : id,
+		"aria-hidden": spoken ? true : void 0,
+		className: "text-xs leading-snug text-(--theme-muted-text-color)",
+		children: item.description
+	}), spoken && /* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		children: spoken
+	})] });
+}
+//#endregion
+export { OptionDescription };

package/dist/components/Popover.d.ts

@@ -33,6 +33,9 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
      *  a list read before one item in it is picked, or nowhere, for a popover that
      *  offers an action on what the reader is doing, such as copying a selection. */
     initialFocus?: 'first-control' | 'popup' | 'none';
+    /** Stays on `side` where it doesn't fit rather than flipping to the other, for a popup that
+     *  must not cover what is there, such as the control a tip describes while it is typed in. */
+    keepSide?: boolean | undefined;
     /** `panel` holds controls or a list; `tip` is a tooltip-sized note with an arrow. */
     variant?: 'panel' | 'tip';
     /** On the popup: its width, padding or text size. */
@@ -43,5 +46,5 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
  *  flips and shifts to stay on screen, closes on Escape or a press outside, and
  *  returns focus to the trigger. Use a Menu for a list of actions, and a
  *  HoverCard for a preview a link already leads to. */
-export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, keepSide, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/components/Popover.js

@@ -16,7 +16,7 @@ function useClosePopover() {
 *  flips and shifts to stay on screen, closes on Escape or a press outside, and
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
-function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", variant = "panel", className, children, ...popupProps }) {
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", keepSide = false, variant = "panel", className, children, ...popupProps }) {
 	const tip = variant === "tip";
 	const popup = useRef(null);
 	const actions = useRef(null);
@@ -38,6 +38,7 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 			align,
 			sideOffset: tip ? 8 : 6,
 			collisionPadding: 8,
+			...keepSide && { collisionAvoidance: { side: "none" } },
 			...at ? { anchor: toPositionerAnchor(at) } : {},
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsxs(Popover.Popup, {