@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/blocks/settings.d.ts

@@ -9,9 +9,10 @@ export type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
   onActivePageChange?: (pageId: string) => void;
   backAction?: ReactNode;
   searchPlaceholder?: string;
+  searchLabel?: string;
   layout?: "viewport" | "contained";
 };
-export declare function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder, layout, className, style, ...props }: SettingsBlockProps): import("react").JSX.Element;
+export declare function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder, searchLabel, layout, className, style, ...props }: SettingsBlockProps): import("react").JSX.Element;
 export declare function SettingsBackAction({ children, ...props }: Omit<ComponentProps<typeof Button>, "children"> & {
   children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/blocks/settings.js

@@ -1,9 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
+import { LiveStatus } from "../ui/live-status.js";
+import { prefersReducedMotion } from "../lib/motion.js";
 import { ScrollArea } from "../ui/scroll-area.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
+import { Input } from "../ui/input.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
@@ -13,7 +16,7 @@ import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
 //#region src/blocks/settings.tsx
-function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder = "Search settings", layout = "viewport", className, style, ...props }) {
+function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder = "Search settings", searchLabel = "Search settings", layout = "viewport", className, style, ...props }) {
 	const [internalPageId, setInternalPageId] = useState(defaultActivePageId ?? pages[0]?.id);
 	const [query, setQuery] = useState("");
 	const [pendingTarget, setPendingTarget] = useState(null);
@@ -30,8 +33,8 @@ function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageC
 		...style
 	};
 	return /* @__PURE__ */ jsx(SidebarProvider, {
-		"data-settings-layout": layout,
-		className: cn("overflow-hidden bg-background text-foreground", layout === "viewport" ? "h-svh min-h-svh" : "relative h-full min-h-0", className),
+		layout,
+		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: /* @__PURE__ */ jsx(SettingsShell, {
@@ -41,7 +44,7 @@ function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageC
 			results,
 			backAction,
 			searchPlaceholder,
-			contained: layout === "contained",
+			searchLabel,
 			instanceId,
 			pendingTarget,
 			onPendingTargetChange: setPendingTarget,
@@ -50,7 +53,7 @@ function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageC
 		})
 	});
 }
-function SettingsShell({ pages, currentPage, query, results, backAction, searchPlaceholder, contained, instanceId, pendingTarget, onPendingTargetChange, onPageChange, onQueryChange }) {
+function SettingsShell({ pages, currentPage, query, results, backAction, searchPlaceholder, searchLabel, instanceId, pendingTarget, onPendingTargetChange, onPageChange, onQueryChange }) {
 	const { setOpenMobile } = useSidebar();
 	useEffect(() => {
 		if (!pendingTarget || currentPage?.id !== pendingTarget.pageId) return;
@@ -59,7 +62,7 @@ function SettingsShell({ pages, currentPage, query, results, backAction, searchP
 			const control = document.getElementById(pendingTarget.controlId);
 			row?.scrollIntoView({
 				block: "center",
-				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+				behavior: prefersReducedMotion(row) ? "auto" : "smooth"
 			});
 			(control instanceof HTMLElement ? control : row)?.focus({ preventScroll: true });
 			onPendingTargetChange(null);
@@ -83,62 +86,71 @@ function SettingsShell({ pages, currentPage, query, results, backAction, searchP
 		});
 		navigate(result.page.id);
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Sidebar, {
-		collapsible: "offcanvas",
-		className: contained ? "absolute! inset-y-0! h-full" : void 0,
-		children: [/* @__PURE__ */ jsxs(SidebarHeader, {
-			className: "gap-3 border-b border-sidebar-border p-3",
-			children: [backAction ? /* @__PURE__ */ jsx("div", {
-				className: "min-w-0",
-				children: backAction
-			}) : null, /* @__PURE__ */ jsx(SettingsSearch, {
-				value: query,
-				placeholder: searchPlaceholder,
-				onValueChange: onQueryChange
-			})]
-		}), /* @__PURE__ */ jsx(SidebarContent, { children: query.trim() ? /* @__PURE__ */ jsx(SettingsSearchNavigation, {
-			results,
-			onSelect: openResult
-		}) : /* @__PURE__ */ jsx(SettingsPageNavigation, {
-			pages,
-			activePageId: currentPage?.id,
-			onSelect: navigate
-		}) })]
-	}), /* @__PURE__ */ jsxs(SidebarInset, {
-		className: "h-full min-h-0 min-w-0",
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "flex h-12 shrink-0 items-center gap-2 border-b px-3 md:hidden",
-			children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx("span", {
-				className: "truncate text-label font-medium",
-				children: currentPage?.title ?? "Settings"
+	const trimmedQuery = query.trim();
+	const resultCount = `${results.length} ${results.length === 1 ? "setting" : "settings"} found`;
+	const searchStatus = results.length > 0 ? resultCount : "No matching settings";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(LiveStatus, { message: trimmedQuery ? searchStatus : "" }),
+		/* @__PURE__ */ jsxs(Sidebar, {
+			collapsible: "offcanvas",
+			children: [/* @__PURE__ */ jsxs(SidebarHeader, {
+				className: "gap-3 border-b border-sidebar-border p-3",
+				children: [backAction ? /* @__PURE__ */ jsx("div", {
+					className: "min-w-0",
+					children: backAction
+				}) : null, /* @__PURE__ */ jsx(SettingsSearch, {
+					value: query,
+					label: searchLabel,
+					placeholder: searchPlaceholder,
+					onValueChange: onQueryChange
+				})]
+			}), /* @__PURE__ */ jsx(SidebarContent, { children: trimmedQuery ? /* @__PURE__ */ jsx(SettingsSearchNavigation, {
+				results,
+				onSelect: openResult,
+				onClear: () => onQueryChange("")
+			}) : /* @__PURE__ */ jsx(SettingsPageNavigation, {
+				pages,
+				activePageId: currentPage?.id,
+				onSelect: navigate
+			}) })]
+		}),
+		/* @__PURE__ */ jsxs(SidebarInset, {
+			className: "h-full min-h-0 min-w-0",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b px-3 lg:hidden",
+				children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-label font-medium",
+					title: currentPage?.title,
+					children: currentPage?.title ?? "Settings"
+				})]
+			}), /* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-0 flex-1",
+				lockAxis: "x",
+				children: currentPage ? /* @__PURE__ */ jsx(SettingsPage, {
+					page: currentPage,
+					instanceId
+				}) : /* @__PURE__ */ jsx(SettingsEmpty, {
+					title: "No settings",
+					description: "Add a settings page to populate this space."
+				})
 			})]
-		}), /* @__PURE__ */ jsx(ScrollArea, {
-			className: "min-h-0 flex-1",
-			lockAxis: "x",
-			children: currentPage ? /* @__PURE__ */ jsx(SettingsPage, {
-				page: currentPage,
-				instanceId
-			}) : /* @__PURE__ */ jsx(SettingsEmpty, {
-				title: "No settings",
-				description: "Add a settings page to populate this space."
-			})
-		})]
-	})] });
+		})
+	] });
 }
-function SettingsSearch({ value, placeholder, onValueChange }) {
+function SettingsSearch({ value, label, placeholder, onValueChange }) {
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		size: "sm",
 		children: [
 			/* @__PURE__ */ jsx(InputGroupAddon, {
-				className: "pl-2.5",
+				className: "ps-2.5",
 				children: /* @__PURE__ */ jsx(SearchIcon, {
 					className: "size-3.5",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ jsx(InputGroupInput, {
+			/* @__PURE__ */ jsx(Input, {
 				type: "search",
-				"aria-label": placeholder,
+				"aria-label": label,
 				placeholder,
 				value,
 				onChange: (event) => onValueChange(event.currentTarget.value)
@@ -148,9 +160,12 @@ function SettingsSearch({ value, placeholder, onValueChange }) {
 				size: "xs",
 				iconOnly: true,
 				"aria-label": "Clear settings search",
-				className: "mr-1",
+				className: "me-1",
 				onClick: () => onValueChange(""),
-				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+				children: /* @__PURE__ */ jsx(XIcon, {
+					className: "size-3.5",
+					"aria-hidden": "true"
+				})
 			}) : null
 		]
 	});
@@ -163,10 +178,16 @@ function SettingsPageNavigation({ pages, activePageId, onSelect }) {
 		children: [page.icon, /* @__PURE__ */ jsx("span", { children: page.title })]
 	}) }, page.id)) })] });
 }
-function SettingsSearchNavigation({ results, onSelect }) {
+function SettingsSearchNavigation({ results, onSelect, onClear }) {
 	if (results.length === 0) return /* @__PURE__ */ jsx(SettingsEmpty, {
 		title: "No matching settings",
-		description: "Try another name or keyword."
+		description: "Try another name or keyword.",
+		action: /* @__PURE__ */ jsx(Button, {
+			variant: "surface",
+			size: "sm",
+			onClick: onClear,
+			children: "Clear search"
+		})
 	});
 	const groups = /* @__PURE__ */ new Map();
 	for (const result of results) {
@@ -177,28 +198,22 @@ function SettingsSearchNavigation({ results, onSelect }) {
 		group.results.push(result);
 		groups.set(result.page.id, group);
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
-		className: "sr-only",
-		role: "status",
-		"aria-live": "polite",
-		children: [
-			results.length,
-			" ",
-			results.length === 1 ? "setting" : "settings",
-			" found"
-		]
-	}), [...groups.values()].map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [group.page.icon, /* @__PURE__ */ jsx("span", { children: group.page.title })] }), /* @__PURE__ */ jsx(SidebarMenu, { children: group.results.map((result) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: [...groups.values()].map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [group.page.icon, /* @__PURE__ */ jsx("span", { children: group.page.title })] }), /* @__PURE__ */ jsx(SidebarMenu, { children: group.results.map((result) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		size: "sm",
-		className: "h-auto min-h-[var(--control-h-sm)] py-1.5",
+		className: "h-auto min-h-(--control-h-sm) py-1.5",
 		onClick: () => onSelect(result),
-		children: /* @__PURE__ */ jsx("span", { children: result.setting.title })
-	}) }, `${result.section.id}/${result.setting.id}`)) })] }, group.page.id))] });
+		children: /* @__PURE__ */ jsx("span", {
+			title: result.setting.title,
+			children: result.setting.title
+		})
+	}) }, `${result.section.id}/${result.setting.id}`)) })] }, group.page.id)) });
 }
 function SettingsPage({ page, instanceId }) {
+	const { layout } = useSidebar();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-5 py-8 md:px-10 md:py-12",
-		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-heading font-semibold text-foreground text-balance",
+		children: [/* @__PURE__ */ jsx(layout === "contained" ? "h2" : "h1", {
+			className: "text-heading-2 text-foreground text-balance",
 			children: page.title
 		}), page.sections.map((section) => /* @__PURE__ */ jsxs(FieldSet, {
 			className: "gap-3",
@@ -244,17 +259,20 @@ function SettingsRow({ pageId, sectionId, setting, instanceId, separated }) {
 		})]
 	})] });
 }
-function SettingsEmpty({ title, description }) {
-	return /* @__PURE__ */ jsx(Empty, {
+function SettingsEmpty({ title, description, action }) {
+	return /* @__PURE__ */ jsxs(Empty, {
 		className: "min-h-40 gap-3 p-4",
-		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, {
 				className: "mb-0 size-8",
-				children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" })
+				children: /* @__PURE__ */ jsx(SearchIcon, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
 			}),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
 			/* @__PURE__ */ jsx(EmptyDescription, { children: description })
-		] })
+		] }), action ? /* @__PURE__ */ jsx(EmptyContent, { children: action }) : null]
 	});
 }
 function settingDomIds(instanceId, pageId, sectionId, settingId) {
@@ -275,9 +293,13 @@ function SettingsBackAction({ children = "Back to app", ...props }) {
 	return /* @__PURE__ */ jsxs(Button, {
 		variant: "quiet",
 		size: "sm",
-		className: "-ml-1 justify-start gap-2",
+		className: "-ms-1 justify-start gap-2",
 		...props,
-		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }), children]
+		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {
+			className: "size-4",
+			"data-icon-dir": "inline",
+			"aria-hidden": "true"
+		}), children]
 	});
 }
 //#endregion

package/dist/blocks/team-chat.d.ts

@@ -0,0 +1,12 @@
+import { SidebarProvider } from "../ui/sidebar-provider.js";
+import "../ui/sidebar.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/team-chat.d.ts
+export type TeamChatBlockProps = Omit<ComponentProps<typeof SidebarProvider>, "children"> & {
+  sidebar: ReactNode;
+  children: ReactNode;
+  thread?: ReactNode;
+  threadLabel?: string;
+};
+export declare function TeamChatBlock({ sidebar, children, thread, threadLabel, className, ...props }: TeamChatBlockProps): import("react").JSX.Element;
+//#endregion

package/dist/blocks/team-chat.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SidebarProvider } from "../ui/sidebar-provider.js";
+import { SidebarInset } from "../ui/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/team-chat.tsx
+function TeamChatBlock({ sidebar, children, thread, threadLabel = "Thread", className, ...props }) {
+	const threadIsOpen = thread !== void 0 && thread !== null;
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		className: cn("bg-background text-foreground", className),
+		...props,
+		children: [sidebar, /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "@container/team-chat flex h-full min-h-0 min-w-0 flex-row",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("flex min-h-0 min-w-0 flex-1 flex-col", threadIsOpen && "@max-3xl/team-chat:hidden"),
+				children
+			}), threadIsOpen ? /* @__PURE__ */ jsx("aside", {
+				"aria-label": threadLabel,
+				className: "flex min-h-0 w-full min-w-0 flex-col border-border @3xl/team-chat:w-[min(26rem,45%)] @3xl/team-chat:shrink-0 @3xl/team-chat:border-s",
+				children: thread
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { TeamChatBlock };

package/dist/blocks/theme-toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import { Button } from "../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Switch } from "../ui/switch.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ChevronDownIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { ChevronDownIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 //#region src/blocks/theme-toggle.tsx
 const systemThemeOption = {
 	value: "system",
@@ -53,7 +53,7 @@ function ThemeSwitch({ value, onValueChange, onValue = "dark", offValue = "light
 		checkedIcon: checkedIcon ?? defaultSwitchCheckedIcon,
 		uncheckedIcon: uncheckedIcon ?? defaultSwitchUncheckedIcon,
 		onCheckedChange: (checked) => onValueChange(checked ? onValue : offValue),
-		"aria-label": ariaLabel ?? "Dark mode",
+		"aria-label": ariaLabel ?? `${currentThemeOption(onValue, defaultThemeOptions).label} mode`,
 		...props
 	});
 }
@@ -61,10 +61,9 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 	const generatedName = useId();
 	const choices = controlOptions(options);
 	const currentValue = effectiveThemeValue(value, choices);
-	const activeIndex = Math.max(0, choices.findIndex((option) => option.value === currentValue));
 	const indicatorStyle = {
-		width: `calc((100% - var(--_theme-switch-padding) * 2) / ${choices.length})`,
-		transform: `translateX(${activeIndex * 100}%)`
+		"--_theme-switch-index": Math.max(0, choices.findIndex((option) => option.value === currentValue)),
+		width: `calc((100% - var(--_theme-switch-padding) * 2) / ${choices.length})`
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
@@ -80,7 +79,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 			"data-control-ui": "theme-toggle",
 			"data-control-family": "theme-toggle",
 			"data-slot": "indicator",
-			className: "pointer-events-none absolute inset-y-(--_theme-switch-padding) left-(--_theme-switch-padding) rounded-(--_theme-switch-radius) bg-background shadow-(--shadow-sm) transition-transform duration-(--duration-base) ease-(--ease-standard)",
+			className: "pointer-events-none absolute inset-y-(--_theme-switch-padding) start-(--_theme-switch-padding) translate-x-[calc(var(--_theme-switch-index)*100%)] rounded-(--_theme-switch-radius) bg-background shadow-(--shadow-sm) transition-transform duration-(--duration-base) ease-(--ease-standard) rtl:translate-x-[calc(var(--_theme-switch-index)*-100%)]",
 			style: indicatorStyle
 		}), choices.map((option) => {
 			const selected = option.value === currentValue;
@@ -92,7 +91,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 				"data-control": "true",
 				"data-selected": selected ? "true" : void 0,
 				"data-disabled": option.disabled ? "true" : void 0,
-				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 text-label font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-45 data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
+				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 text-label font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) not-data-[disabled=true]:hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-(--disabled-opacity) data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						type: "radio",
@@ -140,7 +139,7 @@ function ThemeDropdown({ value, onValueChange, options = defaultThemeOptions, la
 	const current = currentThemeOption(value, options);
 	const CurrentIcon = current.icon;
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-		"aria-label": ariaLabel ?? label,
+		"aria-label": ariaLabel ?? `${label}: ${current.label}`,
 		className: classes("min-w-36 gap-2", className),
 		...props,
 		children: [
@@ -157,33 +156,26 @@ function ThemeDropdown({ value, onValueChange, options = defaultThemeOptions, la
 				"aria-hidden": true
 			})
 		]
-	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
 		className: "min-w-40",
-		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), options.map((option) => {
-			const selected = option.value === value;
-			const Icon = option.icon;
-			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-				disabled: option.disabled,
-				onClick: () => onValueChange(option.value),
-				children: [
-					/* @__PURE__ */ jsx(Icon, {
+		children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+			value,
+			onValueChange,
+			children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), options.map((option) => {
+				const Icon = option.icon;
+				return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: option.value,
+					disabled: option.disabled,
+					children: [/* @__PURE__ */ jsx(Icon, {
 						className: "size-3.5",
 						"aria-hidden": true
-					}),
-					/* @__PURE__ */ jsx("span", {
+					}), /* @__PURE__ */ jsx("span", {
 						className: "min-w-0 flex-1 truncate",
 						children: option.label
-					}),
-					selected ? /* @__PURE__ */ jsx(CheckIcon, {
-						className: "size-3.5",
-						"aria-hidden": true
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "size-3.5",
-						"aria-hidden": true
-					})
-				]
-			}, option.value);
-		})]
+					})]
+				}, option.value);
+			})]
+		})
 	})] });
 }
 //#endregion

package/dist/chat-composer-attachment.d.ts

@@ -30,9 +30,12 @@ export type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> &
   variant?: ChatComposerAttachmentVariant;
   onRemove?: () => void;
   removeLabel?: string;
+  errorLabel?: string;
+  uploadedLabel?: (name: string) => string;
+  uploadFailedLabel?: (name: string) => string;
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };
-export declare function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status, progress: progressInput, previewUrl: previewUrlInput, kind, variant, onRemove, removeLabel, className, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
+export declare function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status, progress: progressInput, previewUrl: previewUrlInput, kind, variant, onRemove, removeLabel, errorLabel, uploadedLabel, uploadFailedLabel, className, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
 export type ChatComposerAttachmentPreviewProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatComposerAttachmentKnobStyle;
 };

package/dist/chat-composer-attachment.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { Spinner } from "./ui/spinner.js";
 import { createContext, useContext, useLayoutEffect, useState } from "react";
@@ -106,9 +107,27 @@ function defaultDescription(context) {
 	const { progress } = context;
 	if (context.description) return context.description;
 	if (context.status === "uploading") return progress === void 0 ? "Uploading…" : `Uploading ${Math.round(progress)}%`;
-	if (context.status === "error") return "Upload failed";
+	if (context.status === "error") return context.errorLabel;
 	return fallbackLabel(context.kind, context.extension);
 }
+function defaultUploadedLabel(name) {
+	return `${name} uploaded`;
+}
+function defaultUploadFailedLabel(name) {
+	return `${name} couldn't upload`;
+}
+function useUploadAnnouncement(status, name, uploadedLabel, uploadFailedLabel) {
+	const [previousStatus, setPreviousStatus] = useState(status);
+	const [announcement, setAnnouncement] = useState("");
+	if (status !== previousStatus) {
+		setPreviousStatus(status);
+		setAnnouncement({
+			uploaded: uploadedLabel,
+			error: uploadFailedLabel
+		}[status]?.(name) ?? "");
+	}
+	return announcement;
+}
 function ChatComposerAttachments({ label = "Attachments", className, viewportClassName, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachments",
@@ -119,12 +138,12 @@ function ChatComposerAttachments({ label = "Attachments", className, viewportCla
 		children: /* @__PURE__ */ jsx(ScrollArea, {
 			"data-control-ui": "chat-composer-attachments",
 			"data-slot": "scroll",
-			"aria-label": label,
 			lockAxis: "y",
 			mask: true,
 			className: "w-full",
 			viewportClassName,
 			children: /* @__PURE__ */ jsx("ul", {
+				"aria-label": label,
 				"data-control-ui": "chat-composer-attachments",
 				"data-control-family": "chat-composer-attachment",
 				"data-slot": "list",
@@ -134,7 +153,7 @@ function ChatComposerAttachments({ label = "Attachments", className, viewportCla
 		})
 	});
 }
-function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status = "idle", progress: progressInput, previewUrl: previewUrlInput, kind, variant = "auto", onRemove, removeLabel, className, children, "aria-label": ariaLabel, ...props }) {
+function ChatComposerAttachment({ file, name: nameInput, type: typeInput, description, status = "idle", progress: progressInput, previewUrl: previewUrlInput, kind, variant = "auto", onRemove, removeLabel, errorLabel = "Couldn't upload. Remove and try again.", uploadedLabel = defaultUploadedLabel, uploadFailedLabel = defaultUploadFailedLabel, className, children, "aria-label": ariaLabel, ...props }) {
 	const name = nameInput ?? file?.name ?? "";
 	const type = typeInput ?? file?.type;
 	const resolvedKind = kind ?? kindFromAttachment(type, name);
@@ -143,6 +162,7 @@ function ChatComposerAttachment({ file, name: nameInput, type: typeInput, descri
 	const previewUrl = previewUrlInput ?? filePreviewUrl;
 	const extension = extensionFromName(name);
 	const progress = progressValue(progressInput);
+	const announcement = useUploadAnnouncement(status, name, uploadedLabel, uploadFailedLabel);
 	return /* @__PURE__ */ jsx(ChatComposerAttachmentContext.Provider, {
 		value: {
 			name,
@@ -155,9 +175,10 @@ function ChatComposerAttachment({ file, name: nameInput, type: typeInput, descri
 			variant: resolvedVariant,
 			extension,
 			onRemove,
-			removeLabel
+			removeLabel,
+			errorLabel
 		},
-		children: /* @__PURE__ */ jsx("li", {
+		children: /* @__PURE__ */ jsxs("li", {
 			"aria-label": ariaLabel ?? name,
 			"data-control-ui": "chat-composer-attachment",
 			"data-control-family": "chat-composer-attachment",
@@ -168,12 +189,12 @@ function ChatComposerAttachment({ file, name: nameInput, type: typeInput, descri
 			"data-variant": resolvedVariant,
 			className: cn("relative isolate flex shrink-0 items-center overflow-hidden", className),
 			...props,
-			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			children: [children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(ChatComposerAttachmentPreview, {}),
 				resolvedVariant === "file" && /* @__PURE__ */ jsxs(ChatComposerAttachmentContent, { children: [/* @__PURE__ */ jsx(ChatComposerAttachmentTitle, {}), /* @__PURE__ */ jsx(ChatComposerAttachmentDescription, {})] }),
 				/* @__PURE__ */ jsx(ChatComposerAttachmentRemove, {}),
 				/* @__PURE__ */ jsx(ChatComposerAttachmentProgress, {})
-			] })
+			] }), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
 		})
 	});
 }
@@ -212,25 +233,29 @@ function ChatComposerAttachmentContent({ className, ...props }) {
 }
 function ChatComposerAttachmentTitle({ className, children, ...props }) {
 	const { name } = useChatComposerAttachmentContext();
+	const content = children ?? name;
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "title",
+		title: typeof content === "string" ? content : void 0,
 		className: cn("truncate", className),
 		...props,
-		children: children ?? name
+		children: content
 	});
 }
 function ChatComposerAttachmentDescription({ className, children, ...props }) {
 	const context = useChatComposerAttachmentContext();
+	const content = children ?? defaultDescription(context);
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-composer-attachment",
 		"data-control-family": "chat-composer-attachment",
 		"data-slot": "description",
+		title: typeof content === "string" ? content : void 0,
 		className: cn("truncate", className),
 		"data-state": context.status,
 		...props,
-		children: children ?? defaultDescription(context)
+		children: content
 	});
 }
 function ChatComposerAttachmentRemove({ className, onClick, children, "aria-label": ariaLabel, ...props }) {
@@ -248,7 +273,7 @@ function ChatComposerAttachmentRemove({ className, onClick, children, "aria-labe
 		"aria-label": ariaLabel ?? removeLabel ?? `Remove ${name}`,
 		size: "xs",
 		variant: "solid",
-		className: cn("absolute right-1 top-1 z-10", className),
+		className: cn("absolute end-1 top-1 z-10", className),
 		onClick: handleClick,
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {

package/dist/chat-composer-editor/extensions/mention.d.ts

@@ -8,6 +8,10 @@ export type MentionExtensionConfig<Item extends TriggerMenuItemData = TriggerMen
   triggers: readonly TriggerConfig<Item>[];
   side?: "top" | "bottom";
   align?: "start" | "center" | "end";
+  /** Shown and announced when a trigger's query matches nothing. */
+  emptyLabel?: string;
+  /** Announced while the menu is open, so opening it and narrowing it are heard from the editor. */
+  resultsLabel?: (count: number) => string;
 };
-export declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
+export declare function mentionExtension<Item extends TriggerMenuItemData = TriggerMenuItemData>({ triggers, side, align, emptyLabel, resultsLabel }: MentionExtensionConfig<Item>): ChatComposerEditorExtension;
 //#endregion