@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/environment-variables.js

@@ -3,9 +3,9 @@ import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, collectEnvironmentVariables, rowsToEnvFileText } from "./lib/env-file.js";
 import { useEnvironmentVariables } from "./hooks/use-environment-variables.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group.js";
+import { InputGroup, InputGroupAddon } from "./ui/input-group.js";
 import { Input } from "./ui/input.js";
-import { createContext, use, useId } from "react";
+import { createContext, use, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon, EyeIcon, EyeOffIcon, FileUpIcon, PlusIcon, RotateCcwIcon, SaveIcon, Trash2Icon } from "lucide-react";
 //#region src/environment-variables.tsx
@@ -15,18 +15,28 @@ function useEnvironmentVariablesContext(componentName) {
 	if (!context) throw new Error(`${componentName} must be used inside <EnvironmentVariables.Root>.`);
 	return context;
 }
-function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false, rowErrors, keyLabel = "Key", valueLabel = "Value", keyPlaceholder = "OPENAI_API_KEY", valuePlaceholder = "sk-...", duplicateKeyMessage = DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, onSubmit, className, children, ...props }) {
-	function handleSubmit(event) {
+function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false, rowErrors, keyLabel = "Key", valueLabel = "Value", keyPlaceholder = "OPENAI_API_KEY", valuePlaceholder = "sk-…", duplicateKeyMessage = DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, revealValueLabel = (key) => `Show value for ${key}`, onSubmit, className, children, ...props }) {
+	const pendingRef = useRef(false);
+	const [pending, setPending] = useState(false);
+	async function handleSubmit(event) {
 		if (event.defaultPrevented || !onSubmit) return;
 		event.preventDefault();
-		if (editor.hasDuplicateKeys) return;
+		if (pendingRef.current || editor.hasDuplicateKeys) return;
 		const rows = editor.getRowsForSubmit();
-		onSubmit({
+		const payload = {
 			rows,
 			variables: collectEnvironmentVariables(rows),
 			envFileText: rowsToEnvFileText(rows),
 			reset: () => editor.resetRows(rows)
-		});
+		};
+		pendingRef.current = true;
+		setPending(true);
+		try {
+			await onSubmit(payload);
+		} finally {
+			pendingRef.current = false;
+			setPending(false);
+		}
 	}
 	return /* @__PURE__ */ jsx(EnvironmentVariablesContext.Provider, {
 		value: {
@@ -38,7 +48,9 @@ function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false,
 			valueLabel,
 			keyPlaceholder,
 			valuePlaceholder,
-			duplicateKeyMessage
+			duplicateKeyMessage,
+			revealValueLabel,
+			pending
 		},
 		children: /* @__PURE__ */ jsx("form", {
 			"data-control-ui": "environment-variables",
@@ -47,6 +59,7 @@ function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false,
 			"data-surface": "panel",
 			"data-disabled": disabled ? "true" : void 0,
 			"data-readonly": readOnly ? "true" : void 0,
+			"aria-busy": pending || void 0,
 			className: cn("flex min-w-0 flex-col", className),
 			onSubmit: handleSubmit,
 			...props,
@@ -157,6 +170,7 @@ function EnvironmentVariablesUploadButton({ inputLabel = "Import .env file", chi
 		type: "file",
 		accept: ".env,text/plain",
 		className: "sr-only",
+		tabIndex: -1,
 		disabled: isDisabled,
 		"aria-label": inputLabel,
 		onChange: handleChange
@@ -203,7 +217,7 @@ function EnvironmentVariablesRows({ rowErrors, className, children, ...props })
 	});
 }
 function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props }) {
-	const { editor, disabled, readOnly, rowErrors: contextRowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage } = useEnvironmentVariablesContext("EnvironmentVariables.Row");
+	const { editor, disabled, readOnly, rowErrors: contextRowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, revealValueLabel } = useEnvironmentVariablesContext("EnvironmentVariables.Row");
 	const resolvedRowErrors = rowErrors ?? contextRowErrors;
 	const keyError = resolvedRowErrors?.[index]?.key ?? (editor.rowHasDuplicateKey(index) ? duplicateKeyMessage : null);
 	const valueError = resolvedRowErrors?.[index]?.value;
@@ -211,8 +225,11 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 	const rowId = editor.getRowId(index);
 	const keyInputId = `${rowId}-key`;
 	const valueInputId = `${rowId}-value`;
-	const revealValueLabel = editor.isValueRevealed(index) ? "Hide value" : "Show value";
-	const removeRowLabel = `Remove environment variable ${row.key.trim() || index + 1}`;
+	const keyErrorId = `${keyInputId}-error`;
+	const valueErrorId = `${valueInputId}-error`;
+	const rowName = row.key.trim() || `row ${index + 1}`;
+	const valueRevealed = editor.isValueRevealed(index);
+	const removeRowLabel = `Remove environment variable ${rowName}`;
 	function handlePaste(event) {
 		if (editor.handlePaste(index, event.clipboardData.getData("text"))) event.preventDefault();
 	}
@@ -235,19 +252,18 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						children: keyLabel
 					}),
 					/* @__PURE__ */ jsx(Input, {
-						"data-control-ui": "environment-variables",
-						"data-control-family": "environment-variables",
-						"data-slot": "key-input",
 						id: keyInputId,
 						size: "sm",
 						value: row.key,
 						placeholder: keyPlaceholder,
 						disabled: isDisabled,
 						"aria-invalid": Boolean(keyError),
+						"aria-describedby": keyError ? keyErrorId : void 0,
 						onChange: (event) => editor.updateRow(index, { key: event.target.value }),
 						onPaste: handlePaste
 					}),
 					keyError ? /* @__PURE__ */ jsx("p", {
+						id: keyErrorId,
 						"data-control-ui": "environment-variables",
 						"data-control-family": "environment-variables",
 						"data-slot": "field-error",
@@ -267,35 +283,30 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						children: valueLabel
 					}),
 					/* @__PURE__ */ jsxs(InputGroup, {
-						"data-control-ui": "environment-variables",
-						"data-control-family": "environment-variables",
-						"data-slot": "value-group",
-						"data-invalid": valueError ? "true" : void 0,
 						size: "sm",
-						children: [/* @__PURE__ */ jsx(InputGroupInput, {
-							"data-control-ui": "environment-variables",
-							"data-control-family": "environment-variables",
-							"data-slot": "value-input",
+						children: [/* @__PURE__ */ jsx(Input, {
 							id: valueInputId,
 							value: row.value,
 							placeholder: valuePlaceholder,
 							disabled: isDisabled,
 							"aria-invalid": Boolean(valueError),
-							type: editor.isValueRevealed(index) ? "text" : "password",
+							"aria-describedby": valueError ? valueErrorId : void 0,
+							type: valueRevealed ? "text" : "password",
 							onChange: (event) => editor.updateRow(index, { value: event.target.value }),
 							onPaste: handlePaste
 						}), /* @__PURE__ */ jsx(InputGroupAddon, {
-							className: "pr-1",
+							className: "pe-1",
 							children: /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "quiet",
 								size: "sm",
 								iconOnly: true,
 								disabled: isDisabled,
-								"aria-label": revealValueLabel,
-								title: revealValueLabel,
+								"aria-label": revealValueLabel(rowName),
+								"aria-pressed": valueRevealed,
+								title: revealValueLabel(rowName),
 								onClick: () => editor.toggleValueVisibility(index),
-								children: editor.isValueRevealed(index) ? /* @__PURE__ */ jsx(EyeOffIcon, {
+								children: valueRevealed ? /* @__PURE__ */ jsx(EyeOffIcon, {
 									"aria-hidden": "true",
 									className: "size-3.5"
 								}) : /* @__PURE__ */ jsx(EyeIcon, {
@@ -306,6 +317,7 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						})]
 					}),
 					valueError ? /* @__PURE__ */ jsx("p", {
+						id: valueErrorId,
 						"data-control-ui": "environment-variables",
 						"data-control-family": "environment-variables",
 						"data-slot": "field-error",
@@ -322,7 +334,7 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 				disabled,
 				"aria-label": removeRowLabel,
 				title: "Remove variable",
-				className: "absolute top-2 right-1 sm:static sm:justify-self-end sm:self-start",
+				className: "absolute top-2 end-1 sm:static sm:justify-self-end sm:self-start",
 				onClick: () => editor.removeRow(index),
 				children: /* @__PURE__ */ jsx(Trash2Icon, {
 					"aria-hidden": "true",
@@ -371,14 +383,14 @@ function EnvironmentVariablesResetButton({ children = "Reset", variant = "quiet"
 	});
 }
 function EnvironmentVariablesSubmitButton({ children = "Save", variant = "solid", tone = "primary", size = "sm", disabled, ...props }) {
-	const { editor, disabled: contextDisabled, readOnly } = useEnvironmentVariablesContext("EnvironmentVariables.SubmitButton");
+	const { editor, disabled: contextDisabled, readOnly, pending } = useEnvironmentVariablesContext("EnvironmentVariables.SubmitButton");
 	if (readOnly) return null;
 	return /* @__PURE__ */ jsxs(Button, {
 		type: "submit",
 		variant,
 		tone,
 		size,
-		disabled: disabled ?? (contextDisabled || editor.hasDuplicateKeys),
+		disabled: disabled ?? (contextDisabled || pending || editor.hasDuplicateKeys),
 		...props,
 		children: [/* @__PURE__ */ jsx(SaveIcon, {
 			"aria-hidden": "true",
@@ -449,7 +461,7 @@ function EnvironmentVariablesReadOnlyList({ rows, emptyMessage = "No environment
 		}))
 	});
 }
-function EnvironmentVariablesReadOnlyItem({ name, value = "********", revealed = false, className, ...props }) {
+function EnvironmentVariablesReadOnlyItem({ name, value, revealed = false, hiddenValueLabel = "Hidden value", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "environment-variables",
 		"data-control-family": "environment-variables",
@@ -461,13 +473,21 @@ function EnvironmentVariablesReadOnlyItem({ name, value = "********", revealed =
 			"data-control-family": "environment-variables",
 			"data-slot": "readonly-key",
 			className: "min-w-0 truncate",
+			title: typeof name === "string" ? name : void 0,
 			children: name
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "environment-variables",
 			"data-control-family": "environment-variables",
 			"data-slot": "readonly-value",
 			className: "min-w-0 truncate",
-			children: revealed ? value : "********"
+			title: revealed && typeof value === "string" ? value : void 0,
+			children: revealed ? value : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "••••••••"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: hiddenValueLabel
+			})] })
 		})]
 	});
 }

package/dist/filter-bar/editor.js

@@ -36,7 +36,8 @@ function editorChoices(context, draft) {
 	if (!field) return [];
 	if (draft.stage === "operator") return fieldOperators(field, context.operators).map((operator) => ({
 		id: operator.id,
-		label: operator.label
+		label: operator.label,
+		ariaLabel: operator.ariaLabel
 	}));
 	return valueChoices(field, draft.query);
 }
@@ -45,6 +46,9 @@ function searchLabel(stage, field) {
 	if (stage === "operator") return "Filter operator";
 	return `${field?.label ?? "Filter"} value`;
 }
+function statusId(owner) {
+	return `${owner}-filter-status`;
+}
 function handleSelection(context, draft, choice) {
 	if (!choice || !draft) return;
 	const field = context.fields.find((candidate) => candidate.id === draft.fieldId);
@@ -70,19 +74,21 @@ function handleEditorKeyDown(context, draft, event) {
 	context.commit(draft.values);
 	return true;
 }
-function EditorOptions({ field, invalidNumber }) {
+function EditorOptions({ field, invalidNumber, owner }) {
 	if (field?.loading || field?.error) return /* @__PURE__ */ jsx("div", {
+		id: statusId(owner),
 		className: "p-3 text-caption",
-		role: field.error ? "alert" : "status",
 		children: field.error ?? "Loading values…"
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: invalidNumber ? "Enter a finite number." : "No matching options." }), /* @__PURE__ */ jsx(ComboboxList, { children: (choice) => /* @__PURE__ */ jsx(ComboboxItem, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: invalidNumber ? "Enter a number, like 42 or 3.5." : "No matching options." }), /* @__PURE__ */ jsx(ComboboxList, { children: (choice) => /* @__PURE__ */ jsx(ComboboxItem, {
 		value: choice,
 		disabled: choice.disabled,
+		"aria-label": choice.ariaLabel,
 		children: /* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [choice.icon, /* @__PURE__ */ jsx("span", {
 				className: "truncate",
+				title: choice.label,
 				children: choice.label
 			})]
 		})
@@ -113,14 +119,15 @@ function editorView(context, draft) {
 		invalidNumber: stage === "value" && Boolean(customNumber) && query.trim() !== "" && field !== void 0 && parseCustomValue(field, query) === void 0,
 		remote: stage === "value" && field?.optionsMode === "remote",
 		unavailable: stage === "value" && Boolean(field?.loading || field?.error),
-		label: searchLabel(stage, field)
+		label: searchLabel(stage, field),
+		described: stage === "value" && Boolean(field?.error)
 	};
 }
 function FilterBarEditor({ owner, mode, anchorRef, children }) {
 	const context = useFilterBarContext();
 	const searchRef = useRef(null);
 	const draft = context.draft?.owner === owner ? context.draft : null;
-	const { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label } = editorView(context, draft);
+	const { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label, described } = editorView(context, draft);
 	const canCommitMany = selected.length > 0 && !unavailable && !context.disabled && !context.readOnly;
 	return /* @__PURE__ */ jsxs(Combobox, {
 		items: choices,
@@ -158,6 +165,7 @@ function FilterBarEditor({ owner, mode, anchorRef, children }) {
 						ref: searchRef,
 						size: "sm",
 						"aria-label": label,
+						"aria-describedby": described ? statusId(owner) : void 0,
 						placeholder: label,
 						inputMode: field?.type === "number" && stage === "value" ? "decimal" : void 0,
 						onKeyDown: (event) => handleEditorKeyDown(context, draft, event)
@@ -165,14 +173,15 @@ function FilterBarEditor({ owner, mode, anchorRef, children }) {
 				}),
 				/* @__PURE__ */ jsx(EditorOptions, {
 					field: stage === "value" ? field : void 0,
-					invalidNumber
+					invalidNumber,
+					owner
 				}),
 				many && /* @__PURE__ */ jsx("div", {
 					className: "flex justify-end p-2",
 					children: /* @__PURE__ */ jsx(Button, {
 						disabled: !canCommitMany,
 						onClick: () => context.commit(draft?.values ?? []),
-						children: "Done"
+						children: "Apply"
 					})
 				})
 			]
@@ -182,6 +191,7 @@ function FilterBarEditor({ owner, mode, anchorRef, children }) {
 function FilterBarInlineInput({ owner, inputRef, className, ...props }) {
 	const context = useFilterBarContext();
 	const draft = context.draft?.owner === owner ? context.draft : null;
+	const { label, described } = editorView(context, draft);
 	function handleKeyDown(event) {
 		props.onKeyDown?.(event);
 		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
@@ -197,6 +207,8 @@ function FilterBarInlineInput({ owner, inputRef, className, ...props }) {
 		size: "sm",
 		className,
 		...props,
+		"aria-label": draft ? label : props["aria-label"],
+		"aria-describedby": described ? statusId(owner) : props["aria-describedby"],
 		onKeyDown: handleKeyDown
 	});
 }

package/dist/filter-bar/model.d.ts

@@ -5,5 +5,6 @@ export declare function fieldOptions(field: FilterBarField): readonly FilterBarO
 export declare function parseCustomValue(field: FilterBarField, query: string): FilterBarScalar | undefined;
 export declare function allowsCustomValue(field: FilterBarField): boolean;
 export declare function formatFilterValue(item: FilterBarItem, field: FilterBarField | undefined): string;
+export declare function describeFilter(item: FilterBarItem, fields: readonly FilterBarField[], operators: readonly FilterBarOperator[]): string;
 export declare function filterNavigationKeys(items: readonly FilterBarItem[]): string[];
 //#endregion

package/dist/filter-bar/model.js

@@ -36,6 +36,15 @@ function formatFilterValue(item, field) {
 function fieldOptionsForLabel(field, value) {
 	return (field ? fieldOptions(field).find((option) => option.value === value)?.label : void 0) ?? String(value);
 }
+function describeFilter(item, fields, operators) {
+	const field = fields.find((candidate) => candidate.id === item.fieldId);
+	const operator = operators.find((candidate) => candidate.id === item.operatorId);
+	return [
+		field?.label ?? item.fieldId,
+		operator?.ariaLabel ?? operator?.label,
+		formatFilterValue(item, field)
+	].filter(Boolean).join(" ");
+}
 function filterNavigationKeys(items) {
 	return items.flatMap((item) => [
 		"field",
@@ -45,4 +54,4 @@ function filterNavigationKeys(items) {
 	].map((segment) => `${item.id}:${segment}`));
 }
 //#endregion
-export { allowsCustomValue, fieldOperators, fieldOptions, filterNavigationKeys, formatFilterValue, parseCustomValue };
+export { allowsCustomValue, describeFilter, fieldOperators, fieldOptions, filterNavigationKeys, formatFilterValue, parseCustomValue };

package/dist/filter-bar/motion.js

@@ -1,8 +1,9 @@
 "use client";
+import { prefersReducedMotion, readDurationMs } from "../lib/motion.js";
 import { useLayoutEffect, useRef, useState } from "react";
 //#region src/filter-bar/motion.ts
 function filterMotionEnabled(element) {
-	return !window.matchMedia("(prefers-reduced-motion: reduce)").matches && Number.parseFloat(getComputedStyle(element).getPropertyValue("--duration-fast")) > 0;
+	return !prefersReducedMotion(element) && readDurationMs(element, "--duration-fast") > 0;
 }
 function animateMovement(element, before, after, duration, easing) {
 	const x = before.left - after.left;
@@ -56,9 +57,8 @@ function useFilterBarMotion() {
 				captured = null;
 				cancel();
 				const next = measure();
-				const computed = getComputedStyle(root);
-				const duration = Number.parseFloat(computed.getPropertyValue("--duration-fast"));
-				const easing = computed.getPropertyValue("--ease-standard").trim();
+				const duration = readDurationMs(root, "--duration-fast");
+				const easing = getComputedStyle(root).getPropertyValue("--ease-standard").trim();
 				animateLayout(elements, origin, next, animations, duration, easing);
 			}
 		};

package/dist/filter-bar/parts.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { useFilterBarContext } from "./context.js";
-import { formatFilterValue } from "./model.js";
+import { describeFilter, formatFilterValue } from "./model.js";
 import { FilterBarEditor, FilterBarInlineInput } from "./editor.js";
 import { useEffect, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +17,8 @@ function chipSegments(item, field, operator, draft) {
 	}];
 	if (operator || draft) segments.push({
 		stage: "operator",
-		label: operator?.label ?? "Operator…"
+		label: operator?.label ?? "Operator…",
+		spokenLabel: operator?.ariaLabel
 	});
 	if (item.value !== null || draft && operator) segments.push({
 		stage: "value",
@@ -54,7 +55,7 @@ function FilterBarChipContent({ item, readOnly = false, className, ref, ...props
 				"data-control-ui": "filter-bar",
 				"data-control-family": "filter-bar",
 				"data-slot": "remove",
-				"aria-label": `Remove ${field?.label ?? item.fieldId} filter`,
+				"aria-label": `Remove filter: ${describeFilter(item, context.fields, context.operators)}`,
 				disabled: context.disabled,
 				onClick: () => context.remove(item),
 				onKeyDown: (event) => context.navigate(event, item.id, "remove"),
@@ -75,10 +76,19 @@ function FilterBarSegment({ item, segment, locked, draft }) {
 		className: "inline-flex min-w-0 items-center",
 		children: /* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 items-center gap-1.5",
-			children: [segment.icon, /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: segment.label
-			})]
+			children: [
+				segment.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					title: segment.label,
+					"aria-hidden": segment.spokenLabel ? true : void 0,
+					children: segment.label
+				}),
+				segment.spokenLabel ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: segment.spokenLabel
+				}) : null
+			]
 		})
 	});
 	return /* @__PURE__ */ jsxs(Button, {
@@ -89,7 +99,7 @@ function FilterBarSegment({ item, segment, locked, draft }) {
 		"data-control-family": "filter-bar",
 		"data-slot": "segment",
 		className: "shrink",
-		"aria-label": `Edit ${segment.stage}: ${segment.label}`,
+		"aria-label": `Edit ${segment.stage}: ${segment.spokenLabel ?? segment.label}`,
 		"aria-haspopup": "listbox",
 		"aria-expanded": context.draft?.owner === item.id && context.draft.stage === segment.stage,
 		disabled: context.disabled || draft,
@@ -97,6 +107,7 @@ function FilterBarSegment({ item, segment, locked, draft }) {
 		onKeyDown: (event) => context.navigate(event, item.id, segment.stage),
 		children: [segment.icon, /* @__PURE__ */ jsx("span", {
 			className: "truncate",
+			title: segment.label,
 			children: segment.label
 		})]
 	});

package/dist/filter-bar/types.d.ts

@@ -5,6 +5,7 @@ export type FilterBarValue = FilterBarScalar | FilterBarScalar[] | null;
 export type FilterBarOperator = {
   id: string;
   label: string;
+  ariaLabel?: string;
   arity?: "none" | "one" | "many";
 };
 export type FilterBarOption = {

package/dist/filter-bar.js

@@ -1,13 +1,18 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { FilterBarContext } from "./filter-bar/context.js";
-import { fieldOperators, filterNavigationKeys } from "./filter-bar/model.js";
+import { describeFilter, fieldOperators, filterNavigationKeys } from "./filter-bar/model.js";
 import { filterMotionEnabled, useFilterBarMotion } from "./filter-bar/motion.js";
 import { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput } from "./filter-bar/parts.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/filter-bar.tsx
+function valueStatusMessage(field) {
+	if (field?.error) return typeof field.error === "string" ? field.error : "Couldn’t load values.";
+	if (field?.loading) return "Loading values…";
+}
 function FilterBarRoot({ fields, operators, value, onValueChange, createItemId = () => crypto.randomUUID(), disabled = false, readOnly = false, className, children, ref, "aria-label": ariaLabel = "Filters", ...props }) {
 	const [draft, setDraft] = useState(null);
 	const [exits, setExits] = useState([]);
@@ -92,7 +97,7 @@ function FilterBarRoot({ fields, operators, value, onValueChange, createItemId =
 		};
 		motion.capture();
 		onValueChange(next.editing ? value.map((current) => current.id === item.id ? item : current) : [...value, item]);
-		setAnnouncement(next.editing ? "Filter updated." : "Filter added.");
+		setAnnouncement(`${next.editing ? "Updated" : "Added"} filter: ${describeFilter(item, fields, operators)}`);
 		if (next.anchor.isConnected) next.anchor.focus();
 		setDraft(null);
 	}
@@ -160,7 +165,7 @@ function FilterBarRoot({ fields, operators, value, onValueChange, createItemId =
 		else focusEntry();
 		if (draft?.id === item.id) setDraft(null);
 		onValueChange(value.filter((candidate) => candidate.id !== item.id));
-		setAnnouncement("Filter removed.");
+		setAnnouncement(`Removed filter: ${describeFilter(item, fields, operators)}`);
 	}
 	function clear() {
 		if (disabled || readOnly) return;
@@ -169,7 +174,7 @@ function FilterBarRoot({ fields, operators, value, onValueChange, createItemId =
 		setDraft(null);
 		onValueChange([]);
 		focusEntry();
-		setAnnouncement("Filters cleared.");
+		setAnnouncement("Cleared all filters");
 	}
 	function deleteFocusedFilter(event, itemId) {
 		const item = value.find((candidate) => candidate.id === itemId);
@@ -220,6 +225,7 @@ function FilterBarRoot({ fields, operators, value, onValueChange, createItemId =
 		releaseExit: (id) => setExits((current) => current.filter((exit) => exit.item.id !== id)),
 		navigate
 	};
+	const liveMessage = valueStatusMessage(draft?.stage === "value" ? fields.find((field) => field.id === draft.fieldId) : void 0) ?? announcement;
 	const rootElement = useRender({
 		ref: [rootRef, ref ?? null],
 		render: /* @__PURE__ */ jsxs("fieldset", {
@@ -231,11 +237,7 @@ function FilterBarRoot({ fields, operators, value, onValueChange, createItemId =
 			"data-readonly": readOnly || void 0,
 			className: cn("relative flex min-w-0 flex-wrap items-center", className),
 			...props,
-			children: [children, /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				"aria-live": "polite",
-				children: announcement
-			})]
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: liveMessage })]
 		})
 	});
 	return /* @__PURE__ */ jsx(FilterBarContext.Provider, {
@@ -270,19 +272,23 @@ const DEFAULT_FILTER_OPERATORS = [
 	},
 	{
 		id: "gt",
-		label: ">"
+		label: ">",
+		ariaLabel: "greater than"
 	},
 	{
 		id: "gte",
-		label: "≥"
+		label: "≥",
+		ariaLabel: "at least"
 	},
 	{
 		id: "lt",
-		label: "<"
+		label: "<",
+		ariaLabel: "less than"
 	},
 	{
 		id: "lte",
-		label: "≤"
+		label: "≤",
+		ariaLabel: "at most"
 	},
 	{
 		id: "in",

package/dist/hooks/use-audio-recorder.js

@@ -20,7 +20,7 @@ function formatAudioInputDeviceLabel(device, fallback = "Microphone") {
 	return `${label.replace(deviceIdRegex, "").trim() || fallback} (${id})`;
 }
 async function enumerateAudioInputDevices() {
-	if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) throw new Error("Microphone device selection is not available in this browser.");
+	if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) throw unsupportedRecordingError();
 	return (await navigator.mediaDevices.enumerateDevices()).filter((device) => device.kind === "audioinput");
 }
 function useAudioInputDevices() {
@@ -43,7 +43,7 @@ function useAudioInputDevices() {
 	}
 	async function requestPermission() {
 		if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
-			setError(/* @__PURE__ */ new Error("Microphone device selection is not available in this browser."));
+			setError(unsupportedRecordingError());
 			return;
 		}
 		setLoading(true);
@@ -96,10 +96,16 @@ function browserEnvironment() {
 function asError(error) {
 	return error instanceof Error ? error : new Error(String(error));
 }
+function namedError(name, message) {
+	return Object.assign(new Error(message), { name });
+}
+function unsupportedRecordingError() {
+	return namedError("NotSupportedError", "This browser can't record audio. Try a current version of Chrome, Safari or Firefox.");
+}
 function microphoneError(error) {
 	const nextError = asError(error);
-	if (nextError.name === "NotAllowedError" || nextError.name === "SecurityError") return /* @__PURE__ */ new Error("Microphone permission was denied.");
-	if (nextError.name === "NotFoundError" || nextError.name === "OverconstrainedError") return /* @__PURE__ */ new Error("Selected microphone is not available.");
+	if (nextError.name === "NotAllowedError" || nextError.name === "SecurityError") return namedError("NotAllowedError", "Microphone access is blocked. Allow it in your browser's site settings, then try again.");
+	if (nextError.name === "NotFoundError" || nextError.name === "OverconstrainedError") return namedError("NotFoundError", "Selected microphone isn't connected. Plug it in or choose another microphone.");
 	return nextError;
 }
 function clampLevel(value) {
@@ -351,7 +357,7 @@ function createControllerForEnvironment(initialOptions, environment) {
 	}
 	function beginRecording(nextStream) {
 		const MediaRecorderImpl = environment.MediaRecorder;
-		if (!MediaRecorderImpl) throw new Error("Microphone recording is not available in this browser.");
+		if (!MediaRecorderImpl) throw unsupportedRecordingError();
 		selectedMimeType = preferredAudioMimeType(MediaRecorderImpl) ?? "";
 		const nextRecorder = new MediaRecorderImpl(nextStream, selectedMimeType ? { mimeType: selectedMimeType } : void 0);
 		chunks = [];
@@ -388,7 +394,7 @@ function createControllerForEnvironment(initialOptions, environment) {
 		if (!environment.mediaDevices?.getUserMedia || !environment.MediaRecorder) {
 			setSnapshot({
 				state: "error",
-				error: /* @__PURE__ */ new Error("Microphone recording is not available in this browser.")
+				error: unsupportedRecordingError()
 			});
 			return false;
 		}