@parallelworks/ui 0.50.0 → 0.52.0

package/dist/components/Button.js

@@ -1,77 +1,84 @@
 import { cx } from "../cx.js";
-import { ChevronRightIcon } from "../icons.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { ChevronRightIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
-import { useLink } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Button.tsx
 /** A button in the package's one look (see `buttonClasses`).
-*  `focusableWhenDisabled` keeps a disabled button's tooltip reachable. A link
-*  that looks like a button stays a link: give it `buttonClasses()`. */
-function Button$1({ variant, size = "md", iconOnly, icon, loading = false, disabled, className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Button, {
+*  `focusableWhenDisabled` keeps a disabled button's tooltip reachable; a
+*  disabled link stays focusable on its own. */
+function Button$1({ variant, size = "md", iconOnly, icon, loading = false, className, children, ...props }) {
+	const classes = cx(buttonClasses({
+		variant,
+		size,
+		iconOnly
+	}), className);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader, {
+		inline: true,
+		decorative: true,
+		size: "1em"
+	}) : icon, children] });
+	if (props.href !== void 0) return /* @__PURE__ */ jsx(AppLink, {
 		...props,
-		disabled: disabled || loading,
+		disabled: props.disabled || loading,
+		"aria-busy": loading || void 0,
+		className: classes,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		focusableWhenDisabled: loading || void 0,
+		...props,
+		disabled: props.disabled || loading,
 		"aria-busy": loading || void 0,
-		className: cx(buttonClasses({
-			variant,
-			size,
-			iconOnly
-		}), className),
-		children: [loading ? /* @__PURE__ */ jsx(Loader, {
-			inline: true,
-			decorative: true,
-			size: "1em"
-		}) : icon, children]
+		className: classes,
+		children: content
 	});
 }
-function MethodButton({ icon, label, description, href, loading, disabled, className = "", ...props }) {
-	const Link = useLink();
-	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:not-disabled:bg-(--theme-border) hover:not-disabled:border-(--theme-muted-text-color) hover:not-disabled:-translate-y-0.5 active:translate-y-0";
-	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed";
+var methodClasses = "group flex w-full cursor-pointer items-center rounded-xl border border-(--theme-border) bg-(--theme-muted-panel-bg) p-4 text-[0.9375rem] font-medium text-(--theme-app) no-underline transition-[background-color,border-color,translate] duration-200 hover:not-disabled:not-aria-disabled:border-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-border) hover:not-disabled:not-aria-disabled:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) disabled:cursor-not-allowed disabled:opacity-60 aria-disabled:cursor-not-allowed aria-disabled:opacity-60 motion-reduce:transition-none motion-reduce:hover:translate-y-0";
+/** One way to go on, such as a sign-in method: a large row with an icon, a
+*  label and a line under it. A list of them is spaced by its container. */
+function MethodButton({ icon, label, description, href, loading = false, disabled = false, className, ...props }) {
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
-			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
+			className: "mr-4 flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-(--gradient-start,var(--theme-accent)) to-(--gradient-mid,var(--theme-link)) [&_svg]:size-5 [&_svg]:text-(--theme-accent-text)",
 			children: icon
 		}),
 		/* @__PURE__ */ jsxs("span", {
 			className: "flex-1 text-left",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "block font-semibold text-[var(--theme-app)]",
+				className: "block font-semibold",
 				children: label
 			}), description && /* @__PURE__ */ jsx("span", {
-				className: "block text-[0.8125rem] text-[var(--theme-muted-text-color)] font-normal mt-0.5",
+				className: "mt-0.5 block text-[0.8125rem] font-normal text-(--theme-muted-text-color)",
 				children: description
 			})]
 		}),
 		loading ? /* @__PURE__ */ jsx("span", {
-			className: "ml-2 shrink-0 text-[var(--theme-muted-text-color)]",
+			className: "ml-2 shrink-0 text-(--theme-muted-text-color)",
 			children: /* @__PURE__ */ jsx(Loader, {
 				inline: true,
 				decorative: true,
 				size: 20,
 				color: "currentColor"
 			})
-		}) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+		}) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-2 size-5 shrink-0 text-(--theme-muted-text-color) transition-[translate,color] duration-200 group-hover:translate-x-[3px] group-hover:text-(--theme-app) motion-reduce:transition-none motion-reduce:group-hover:translate-x-0 rtl:-scale-x-100" })
 	] });
-	if (href) {
-		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
-			href,
-			className: cx("group", baseClasses, className),
-			children: content
-		});
-		return /* @__PURE__ */ jsx(Link, {
-			href,
-			className: cx("group", baseClasses, className),
-			children: content
-		});
-	}
+	if (href) return /* @__PURE__ */ jsx(AppLink, {
+		href,
+		reloadDocument: href.startsWith("/api/"),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cx(methodClasses, className),
+		children: content
+	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: cx("group", baseClasses, disabledClasses, className),
-		disabled: disabled || loading,
 		...props,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cx(methodClasses, className),
 		children: content
 	});
 }

package/dist/components/Callout.d.ts

@@ -1,7 +1,31 @@
-type CalloutType = 'warning' | 'info' | 'error';
-export default function Callout({ type, className, children, }: {
-    type: CalloutType;
-    className?: string;
-    children: React.ReactNode;
-}): import("react").JSX.Element;
-export {};
+import type { ReactNode } from 'react';
+import { type Tone } from './tone.js';
+/** A callout's tone: `default` for a plain note, or a status. */
+export type CalloutTone = Extract<Tone, 'default' | 'info' | 'success' | 'warning' | 'error'>;
+export interface CalloutProps {
+    tone?: CalloutTone | undefined;
+    /** A bold first line that says what happened; the children explain it. */
+    title?: ReactNode;
+    children?: ReactNode;
+    /** The one thing the reader can do about it, such as a retry button. */
+    action?: ReactNode;
+    /** Adds a close button, for a message the reader can put away. */
+    onDismiss?: (() => void) | undefined;
+    /** Replaces the tone's icon; false shows none. */
+    icon?: ReactNode;
+    /** `card` is a framed box among the content; `bar` runs the full width under
+     *  a header, ruled off below, for a condition that holds across the surface. */
+    variant?: 'card' | 'bar' | undefined;
+    /** `sm` sits beside a compact control, such as a composer. */
+    size?: 'sm' | 'md' | undefined;
+    /** Announces it as it appears, for a message that arrives after the surface
+     *  has loaded, such as a failed save. A callout that's there from the start
+     *  is read in its place, with the content around it. */
+    live?: boolean | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
+}
+/** A message set into the page in a status's tone: guidance, a warning, an error
+ *  or a success, and what to do about it. For a passing notice that floats over
+ *  the page, use `toast`. */
+export declare function Callout({ tone, title, children, action, onDismiss, icon, variant, size, live, className, testId, }: CalloutProps): import("react").JSX.Element;

package/dist/components/Callout.js

@@ -1,30 +1,57 @@
 import { cx } from "../cx.js";
-import { InfoIcon, WarningIcon } from "../icons.js";
-import { toneSurface } from "./tone.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
+import { toneIcon, toneSurface } from "./tone.js";
+import { useStrings } from "./Provider.js";
+import { IconButton } from "./IconButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
-function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(WarningIcon, {
-		"aria-hidden": "true",
-		className: "mr-3 h-5 w-5 shrink-0"
-	});
-	else return /* @__PURE__ */ jsx(InfoIcon, {
-		"aria-hidden": "true",
-		className: "mr-3 h-5 w-5 shrink-0"
-	});
-}
-function Callout({ type, className = "", children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(toneSurface[type], "my-4 rounded-xl border px-4 py-3", className),
-		role: type === "info" ? "note" : "alert",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex text-sm",
-			children: [/* @__PURE__ */ jsx(CalloutIcon, { type }), /* @__PURE__ */ jsx("div", {
-				className: "min-w-0",
-				children
-			})]
-		})
+var toneIcons = {
+	default: InfoIcon,
+	info: InfoIcon,
+	success: SuccessIcon,
+	warning: WarningIcon,
+	error: ErrorIcon
+};
+/** A message set into the page in a status's tone: guidance, a warning, an error
+*  or a success, and what to do about it. For a passing notice that floats over
+*  the page, use `toast`. */
+function Callout({ tone = "info", title, children, action, onDismiss, icon, variant = "card", size = "md", live = false, className, testId }) {
+	const { common } = useStrings();
+	const small = size === "sm";
+	const Icon = toneIcons[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		...live ? { role: tone === "error" ? "alert" : "status" } : {},
+		className: cx("flex items-start", toneSurface[tone], small ? "gap-2 px-3 py-2 text-xs leading-4" : "gap-3 px-4 py-3 text-sm leading-5", variant === "card" ? "rounded-xl border" : "border-0 border-b", className),
+		children: [
+			icon !== false && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cx("flex shrink-0 items-center", small ? "h-4 [&_svg]:size-4" : "h-5 [&_svg]:size-5", toneIcon[tone]),
+				children: icon ?? /* @__PURE__ */ jsx(Icon, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "m-0 font-medium",
+					children: title
+				}), children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: cx(title !== void 0 && "mt-0.5"),
+					children
+				})]
+			}),
+			action !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: cx("flex shrink-0 items-center gap-2", small ? "h-4" : "h-5"),
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				size: "xs",
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				label: common.dismiss,
+				onClick: onDismiss,
+				className: small ? "-my-1 -me-1" : "-my-0.5 -me-1"
+			})
+		]
 	});
 }
 //#endregion
-export { Callout as default };
+export { Callout };

package/dist/components/Card.d.ts

@@ -1,29 +1,34 @@
 import type { ReactElement, ReactNode } from 'react';
+import { type LinkTarget } from './AppLink.js';
 declare const sizeClasses: {
     sm: string;
     md: string;
     lg: string;
 };
-export interface CardProps {
+export interface CardProps extends LinkTarget {
     children: ReactNode;
     /** Its width and padding: `sm` for a short form, `lg` for a wide one. */
     size?: keyof typeof sizeClasses | undefined;
     /** A stronger shadow, for a card standing alone on a page, such as sign-in. */
     elevated?: boolean | undefined;
-    /** Renders the card as this element, such as a link or a button, which makes
-     *  the whole card pressable: it lifts on hover and shows focus. */
+    /** Renders the card as this element, such as a button, which makes the
+     *  whole card pressable: it lifts on hover and shows focus. A card that
+     *  navigates takes `href` instead, which makes it a link the same way. */
     render?: ReactElement | undefined;
     className?: string | undefined;
 }
 /** A raised surface holding one task, such as a sign-in form or a choice among
  *  a few options. */
-export declare function Card({ children, size, elevated, render, className }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-interface CardHeaderProps {
+export declare function Card({ children, size, elevated, render: renderProp, href, reloadDocument, target, className, }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface CardHeaderProps {
     badge?: ReactNode;
     title: string;
     description?: ReactNode;
     className?: string;
     align?: 'center' | 'left';
+    /** The title's level in the page's outline: 1 for a card that is the page, such
+     *  as sign-in; 2 or 3 for a card among others under the page's own title. */
+    headingLevel?: 1 | 2 | 3 | undefined;
 }
-export declare function CardHeader({ badge, title, description, className, align, }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardHeader({ badge, title, description, className, align, headingLevel, }: CardHeaderProps): import("react").JSX.Element;
 export {};

package/dist/components/Card.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { AppLink } from "./AppLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
@@ -9,30 +10,35 @@ var sizeClasses = {
 };
 /** A raised surface holding one task, such as a sign-in form or a choice among
 *  a few options. */
-function Card({ children, size = "md", elevated = false, render, className }) {
+function Card({ children, size = "md", elevated = false, render: renderProp, href, reloadDocument, target, className }) {
+	const render = href === void 0 ? renderProp : /* @__PURE__ */ jsx(AppLink, {
+		href,
+		reloadDocument,
+		target
+	});
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("div", {}),
 		props: {
-			className: cx("block w-full rounded-2xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
+			className: cx("block w-full rounded-2xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
 			children
 		}
 	});
 }
-function CardHeader({ badge, title, description, className = "", align = "center" }) {
+function CardHeader({ badge, title, description, className = "", align = "center", headingLevel = 1 }) {
+	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
 		children: [
 			badge && /* @__PURE__ */ jsx("div", {
-				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",
+				className: "mb-4 inline-flex items-center gap-1.5 rounded-full border border-(--theme-border) bg-(--theme-muted-panel-bg) px-3 py-1.5 text-xs font-medium text-(--theme-muted-text-color)",
 				children: badge
 			}),
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-2xl font-bold tracking-tight text-[var(--theme-app)]",
-				style: { letterSpacing: "-0.025em" },
+			/* @__PURE__ */ jsx(Heading, {
+				className: "text-2xl font-bold tracking-tight text-(--theme-app)",
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "text-[var(--theme-muted-text-color)] text-sm leading-relaxed mt-2",
+				className: "mt-2 text-sm leading-relaxed text-(--theme-muted-text-color)",
 				children: description
 			})
 		]

package/dist/components/Checkbox.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { CheckIcon, MinusIcon } from "../icons.js";
+import { focusOutline } from "./fieldBox.js";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
@@ -10,7 +11,7 @@ import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		...props,
-		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-accent) data-indeterminate:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-accent) data-indeterminate:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex",
 			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {

package/dist/components/ColorInput.js

@@ -1,11 +1,12 @@
 import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.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";
+import { Input } from "@base-ui/react/input";
 //#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");
 /**
@@ -25,7 +26,8 @@ function ColorInput({ value, onValueChange, label, hint, description, error, siz
 		label,
 		hint,
 		description,
-		error: error ?? (unparsed ? t.invalid : void 0)
+		error: error ?? (unparsed ? t.invalid : void 0),
+		size
 	}, {
 		id,
 		required,
@@ -44,7 +46,7 @@ function ColorInput({ value, onValueChange, label, hint, description, error, siz
 					onValueChange(e.target.value);
 				},
 				className: cx(fieldBox({ size }), swatchClassName, size === "sm" ? "w-8" : "w-10")
-			}), /* @__PURE__ */ jsx("input", {
+			}), /* @__PURE__ */ jsx(Input, {
 				id,
 				name,
 				"aria-label": ariaLabel,

package/dist/components/Combobox.js

@@ -1,17 +1,17 @@
 import { cx } from "../cx.js";
 import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
-import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
+import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
 import { fieldBox } from "./fieldBox.js";
-import { isComboboxGroup } from "./comboboxItems.js";
+import { isComboboxGroup, pickerItemClassName } from "./comboboxItems.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { dequal } from "dequal";
 import { Combobox } from "@base-ui/react/combobox";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { dequal } from "dequal";
 //#region src/components/Combobox.tsx
 function toEntry(item, group) {
 	const entry = typeof item === "string" ? {
@@ -82,9 +82,9 @@ 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 entries = useEntries(items);
 	const filter = useEntryFilter();
-	const strings = useStrings();
-	const t = strings.dropdown;
+	const t = useStrings().dropdown;
 	const list = useRef(null);
+	const uid = useId();
 	const [inputValue, setInputValue] = useState(null);
 	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
 		value,
@@ -129,10 +129,17 @@ function Combobox$1(props) {
 		value: entry,
 		disabled: entry.disabled || full && !isChosen(entry),
 		...rowProps.props,
-		className: itemClassName,
-		children: [/* @__PURE__ */ jsx(ItemContent, { entry }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		...optionNaming(uid, rowProps.props.index, entry),
+		className: pickerItemClassName,
+		children: [/* @__PURE__ */ jsx(ItemContent, {
+			entry,
+			id: `${uid}${rowProps.props.index}`
+		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			className: "ml-auto flex shrink-0 items-center",
-			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+			children: /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5"
+			})
 		})]
 	}, rowProps.key);
 	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
@@ -162,15 +169,18 @@ function Combobox$1(props) {
 		className: cx(fieldClassName(size), className),
 		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
 			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, {
+			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry, index) => /* @__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)",
 				children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
-					"aria-label": `${strings.common.remove} ${entry.label}`,
+					"aria-label": t.removeValue(entry.label),
 					className: "flex size-4 items-center justify-center rounded hover:bg-(--theme-hover)",
-					children: /* @__PURE__ */ jsx(RemoveIcon, { className: "size-3" })
+					children: /* @__PURE__ */ jsx(RemoveIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
 				})]
-			}, entry.label)) }), input]
+			}, `${index}:${entry.label}`)) }), input]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
 			className: cx("flex shrink-0 items-center", size === "sm" ? "pl-2" : "pl-3"),
 			children: selectedIcon
@@ -178,7 +188,10 @@ function Combobox$1(props) {
 			"aria-label": t.showOptions,
 			"data-testid": "combobox-button",
 			className: triggerClassName,
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+				"aria-hidden": "true",
+				className: "size-3"
+			})
 		})]
 	}), /* @__PURE__ */ jsx(ListPopup, {
 		listRef: list,
@@ -222,6 +235,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
 	const list = useRef(null);
+	const uid = useId();
 	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
 		items: entries.items,
 		filter,
@@ -250,7 +264,10 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				"aria-label": t.showOptions,
 				"data-testid": "combobox-button",
 				className: triggerClassName,
-				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
 			})]
 		}), /* @__PURE__ */ jsx(ListPopup, {
 			listRef: list,
@@ -258,14 +275,25 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				value: entry,
 				disabled: entry.disabled,
 				...rowProps.props,
-				className: itemClassName,
-				children: /* @__PURE__ */ jsx(ItemContent, { entry })
+				...optionNaming(uid, rowProps.props.index, entry),
+				className: pickerItemClassName,
+				children: /* @__PURE__ */ jsx(ItemContent, {
+					entry,
+					id: `${uid}${rowProps.props.index}`
+				})
 			}, rowProps.key)
 		})]
 	});
 }
-var itemClassName = cx(panelItemClassName, "data-selected:font-medium");
-function ItemContent({ entry }) {
+/** 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 }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
 		children: entry.icon
@@ -275,10 +303,12 @@ function ItemContent({ entry }) {
 			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
 		})]

package/dist/components/ConfirmModal.d.ts

@@ -1,17 +1,28 @@
 import type { ReactNode } from 'react';
-export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, }: {
+export interface ConfirmModalProps {
     open: boolean;
     onClose: () => void;
+    /** The question, which names the dialog: "Delete cluster?" */
     title: string;
+    /** What follows from confirming, which describes the dialog. */
     description?: ReactNode;
+    /** More to read or to choose before confirming, such as a field. */
     children?: ReactNode;
+    /** The verb that confirms, such as "Delete"; never "OK". */
     confirmLabel: string;
-    /** An async handler keeps both buttons disabled until it settles. */
+    /** An async handler keeps both buttons disabled until it settles. One that
+     *  rejects leaves the dialog open and rethrows, so report the error in the
+     *  handler, such as with a toast. */
     onConfirm: () => void | Promise<unknown>;
-    confirmDisabled?: boolean;
-    destructive?: boolean;
-    align?: 'top' | 'center';
-    cancelLabel?: string;
+    confirmDisabled?: boolean | undefined;
+    /** An action that can't be undone: the confirm button reads as dangerous, and
+     *  the dialog is an alertdialog that waits for an answer. */
+    destructive?: boolean | undefined;
+    align?: 'top' | 'center' | undefined;
+    cancelLabel?: string | undefined;
     /** When false, the dialog stays open after a successful confirm. */
-    closeOnConfirm?: boolean;
-}): import("react").JSX.Element;
+    closeOnConfirm?: boolean | undefined;
+}
+/** Asks before an action: its title the question, its description what follows,
+ *  and Cancel beside a confirm button named for the action. */
+export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, }: ConfirmModalProps): import("react").JSX.Element;