@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/color-picker.js

@@ -6,10 +6,10 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
-import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { TARGET_RATIO, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
-import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 import { Slider } from "@base-ui/react/slider";
@@ -111,8 +111,9 @@ function useColorState(props) {
 	const setChannelValue = (id, next) => commit(setChannel(hsvaRef.current, id, next));
 	const setFromString = (raw) => {
 		const parsed = parseColor(raw);
-		if (!parsed) return;
+		if (!parsed) return false;
 		commit(reconcileAchromatic(hsvaRef.current, parsed));
+		return true;
 	};
 	const setFormat = (next) => {
 		if (formatProp === void 0) setFormatState(next);
@@ -241,6 +242,7 @@ function ColorPickerArea({ className, style, ...props }) {
 		setHsva(axis === "s" ? { s: next } : { v: next });
 	}
 	return /* @__PURE__ */ jsxs("div", {
+		"data-focus-ring": "within",
 		ref: areaRef,
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
@@ -318,6 +320,10 @@ function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby":
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
 		"data-slot": "hue",
+		format: {
+			style: "unit",
+			unit: "degree"
+		},
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Hue" : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
 		value: hsva.h,
@@ -340,6 +346,7 @@ function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby":
 					"data-control-ui": "color-picker",
 					"data-control-family": "color-picker",
 					"data-slot": "hue-thumb",
+					"data-focus-ring": "within",
 					className: RING_THUMB
 				})
 			})
@@ -360,6 +367,7 @@ function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Opacity" : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
 		value: hsva.a,
+		format: { style: "percent" },
 		min: 0,
 		max: 1,
 		step: .01,
@@ -382,6 +390,7 @@ function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby
 					"data-control-ui": "color-picker",
 					"data-control-family": "color-picker",
 					"data-slot": "alpha-thumb",
+					"data-focus-ring": "within",
 					className: RING_THUMB
 				})
 			})
@@ -404,6 +413,7 @@ function ColorPickerWheel({ className, style, ...props }) {
 	const left = 50 + radius * Math.cos(rad);
 	const top = 50 + radius * Math.sin(rad);
 	return /* @__PURE__ */ jsxs("div", {
+		"data-focus-ring": "within",
 		ref: areaRef,
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
@@ -456,38 +466,62 @@ function ColorPickerWheel({ className, style, ...props }) {
 		]
 	});
 }
-function ColorPickerInput({ size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+function ColorPickerInput({ size = "sm", className, invalidLabel = "Enter a hex, rgb(), hsl() or oklch() color.", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onKeyDown, ...props }) {
 	const { valueString, setFromString, disabled } = useColorPicker();
+	const invalidMessageId = useId();
 	const [draft, setDraft] = useState(valueString);
 	const [editing, setEditing] = useState(false);
+	const [invalid, setInvalid] = useState(false);
+	const describedBy = [ariaDescribedBy, invalid ? invalidMessageId : void 0].filter(Boolean).join(" ") || void 0;
 	const shown = editing ? draft : valueString;
 	const commit = () => {
-		setFromString(draft);
+		const accepted = setFromString(draft);
+		setInvalid(!accepted);
+		if (accepted) setEditing(false);
+	};
+	const revert = () => {
+		setInvalid(false);
 		setEditing(false);
 	};
-	return /* @__PURE__ */ jsx(Input, {
-		size,
-		value: shown,
-		disabled,
+	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
 		"data-slot": "input",
-		spellCheck: false,
-		autoComplete: "off",
-		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color value" : ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		className,
-		onFocus: () => {
-			setDraft(valueString);
-			setEditing(true);
-		},
-		onChange: (event) => setDraft(event.target.value),
-		onBlur: commit,
-		onKeyDown: (event) => {
-			if (event.key === "Enter") commit();
-			else if (event.key === "Escape") setEditing(false);
-		},
-		...props
+		className: "contents",
+		children: [/* @__PURE__ */ jsx(Input, {
+			...props,
+			size,
+			value: shown,
+			disabled,
+			spellCheck: false,
+			autoComplete: "off",
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color value" : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-invalid": invalid || void 0,
+			"aria-describedby": describedBy,
+			className,
+			onFocus: (event) => {
+				onFocus?.(event);
+				if (editing) return;
+				setDraft(valueString);
+				setEditing(true);
+			},
+			onChange: (event) => setDraft(event.target.value),
+			onBlur: (event) => {
+				onBlur?.(event);
+				commit();
+			},
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key === "Enter") commit();
+				else if (event.key === "Escape") revert();
+			}
+		}), invalid ? /* @__PURE__ */ jsx("span", {
+			id: invalidMessageId,
+			className: "sr-only",
+			children: invalidLabel
+		}) : null]
 	});
 }
 function ColorPickerFormatSelect({ formats = [
@@ -617,7 +651,7 @@ function ColorPickerSwatches({ colors, label, className, children, ...props }) {
 	});
 }
 function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }) {
-	const { setFromString, valueString } = useColorPicker();
+	const { setFromString, valueString, disabled } = useColorPicker();
 	const selected = sameColor(valueString, color);
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
@@ -628,8 +662,9 @@ function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props
 		"aria-pressed": selected,
 		"aria-label": ariaLabel ?? `Set color ${color}`,
 		title: color,
+		disabled,
 		onClick: () => setFromString(color),
-		className: cn("relative shrink-0 cursor-pointer overflow-hidden", className),
+		className: cn("relative shrink-0 cursor-pointer overflow-hidden disabled:cursor-not-allowed", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-control-ui": "color-picker",
@@ -652,21 +687,22 @@ function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props
 	});
 }
 function ColorPickerSwatchAdd({ onAdd, className, children, ...props }) {
-	const { valueString } = useColorPicker();
+	const { valueString, disabled } = useColorPicker();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
 		"data-slot": "swatch-add",
 		"aria-label": "Add current color",
+		disabled,
 		onClick: () => onAdd?.(valueString),
-		className: cn("flex shrink-0 cursor-pointer items-center justify-center", className),
+		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
 	});
 }
-function ColorPickerContrast({ background = "#ffffff", className, ...props }) {
-	const { hsva, setFromString } = useColorPicker();
+function ColorPickerContrast({ background = "#ffffff", passLabel = "Passes", failLabel = "Fails", className, ...props }) {
+	const { hsva, setFromString, disabled } = useColorPicker();
 	const bg = parseColor(background);
 	if (!bg) return null;
 	const bgRgba = hsvaToRgba(bg);
@@ -689,14 +725,18 @@ function ColorPickerContrast({ background = "#ffffff", className, ...props }) {
 				"data-control-ui": "color-picker",
 				"data-control-family": "color-picker",
 				"data-slot": "contrast-ratio",
-				children: [ratio.toFixed(2), ":1"]
+				children: [formatContrastRatio(ratio), ":1"]
 			}),
 			/* @__PURE__ */ jsx(WcagPill, {
 				ok: levels.AA,
+				passLabel,
+				failLabel,
 				children: "AA"
 			}),
 			/* @__PURE__ */ jsx(WcagPill, {
 				ok: levels.AAA,
+				passLabel,
+				failLabel,
 				children: "AAA"
 			}),
 			target ? /* @__PURE__ */ jsxs("button", {
@@ -704,14 +744,15 @@ function ColorPickerContrast({ background = "#ffffff", className, ...props }) {
 				"data-control-ui": "color-picker",
 				"data-control-family": "color-picker",
 				"data-slot": "contrast-fix",
+				disabled,
 				onClick: applyFix,
-				className: "ml-auto cursor-pointer",
-				children: ["Fix → ", target]
+				className: "ms-auto cursor-pointer disabled:cursor-not-allowed",
+				children: ["Fix for ", target]
 			}) : null
 		]
 	});
 }
-function WcagPill({ ok, children }) {
+function WcagPill({ ok, passLabel, failLabel, children }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "color-picker",
 		"data-control-family": "color-picker",
@@ -719,7 +760,14 @@ function WcagPill({ ok, children }) {
 		"data-passing": ok ? "true" : void 0,
 		className: "inline-flex items-center",
 		children: [
-			ok ? "✓" : "✕",
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: ok ? "✓" : "✕"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: ok ? passLabel : failLabel
+			}),
 			" ",
 			children
 		]

package/dist/ui/combobox-disabled-selection.d.ts

@@ -1,4 +1,3 @@
 //#region src/ui/combobox-disabled-selection.d.ts
-export declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>): boolean;
-export declare function emitComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, onValueChange: (value: Value | null) => void): boolean;
+export declare function shouldAcceptComboboxValueChange(next: unknown, previous: unknown, disabledValues: ReadonlySet<unknown>): boolean;
 //#endregion

package/dist/ui/combobox-disabled-selection.js

@@ -1,11 +1,10 @@
 //#region src/ui/combobox-disabled-selection.ts
-function shouldAcceptComboboxValueChange(value, disabledValues) {
-	return value === null || !disabledValues.has(value);
-}
-function emitComboboxValueChange(value, disabledValues, onValueChange) {
-	if (!shouldAcceptComboboxValueChange(value, disabledValues)) return false;
-	onValueChange(value);
-	return true;
+function shouldAcceptComboboxValueChange(next, previous, disabledValues) {
+	if (Array.isArray(next)) {
+		const kept = new Set(Array.isArray(previous) ? previous : []);
+		return next.every((item) => kept.has(item) || !disabledValues.has(item));
+	}
+	return next === null || next === previous || !disabledValues.has(next);
 }
 //#endregion
-export { emitComboboxValueChange, shouldAcceptComboboxValueChange };
+export { shouldAcceptComboboxValueChange };

package/dist/ui/combobox.d.ts

@@ -1,30 +1,11 @@
-import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
-export type ComboboxProps<Value = string> = {
-  children?: ReactNode;
+export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> = Pick<Combobox$1.Root.Props<Value, Multiple>, "children" | "multiple" | "value" | "defaultValue" | "onValueChange" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "readOnly" | "required" | "name" | "autoHighlight" | "itemToStringLabel" | "isItemEqualToValue" | "filter" | "modal"> & {
   items?: readonly Value[];
-  value?: Value | null;
-  defaultValue?: Value | null;
-  onValueChange?: (value: Value | null) => void;
-  inputValue?: string;
-  defaultInputValue?: string;
-  onInputValueChange?: (inputValue: string) => void;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  name?: string;
-  autoHighlight?: boolean;
-  itemToStringLabel?: (itemValue: Value) => string;
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
-  filter?: Combobox$1.Root.Props<Value>["filter"];
 };
 export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
@@ -34,8 +15,9 @@ export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "st
 export type ComboboxTriggerProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export type ComboboxContentProps = Omit<ComponentProps<"div"> & {
+export type ComboboxContentProps = Omit<Combobox$1.Popup.Props & {
   sideOffset?: number;
+  anchor?: Combobox$1.Positioner.Props["anchor"];
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
@@ -59,10 +41,10 @@ export type ComboboxGroupProps = ComponentProps<"div"> & {
 export type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-export declare function Combobox<Value = string>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+export declare function Combobox<Value = string, Multiple extends boolean | undefined = false>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value, Multiple>): import("react").JSX.Element;
 export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
 export declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
-export declare function ComboboxContent({ className, children, sideOffset, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export declare function ComboboxContent({ className, children, sideOffset, anchor, ...props }: ComboboxContentProps): import("react").JSX.Element;
 export declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;
 export declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
 export declare function ComboboxItem<Value = unknown>({ className, children, disabled, value, ...props }: ComboboxItemProps<Value>): import("react").JSX.Element;

package/dist/ui/combobox.js

@@ -2,8 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { emitComboboxValueChange } from "./combobox-disabled-selection.js";
+import { shouldAcceptComboboxValueChange } from "./combobox-disabled-selection.js";
 import { createContext, use, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -11,6 +12,7 @@ import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 const ComboboxDisabledValueContext = createContext(null);
 function Combobox({ children, onValueChange, autoHighlight = true, ...props }) {
 	const [disabledValues] = useState(() => /* @__PURE__ */ new Set());
+	const [committedValue, setCommittedValue] = useState(() => props.value ?? props.defaultValue ?? null);
 	const [disabledValueRegistry] = useState(() => ({ register(value, disabled) {
 		if (!disabled || value === void 0) return () => {};
 		disabledValues.add(value);
@@ -21,9 +23,15 @@ function Combobox({ children, onValueChange, autoHighlight = true, ...props }) {
 		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
 			autoHighlight,
 			...props,
-			onValueChange: onValueChange ? (value) => {
-				if (!Array.isArray(value)) emitComboboxValueChange(value, disabledValues, onValueChange);
-			} : void 0,
+			onValueChange: (value, eventDetails) => {
+				const previousValue = props.value === void 0 ? committedValue : props.value;
+				if (!shouldAcceptComboboxValueChange(value, previousValue, disabledValues)) {
+					eventDetails.cancel();
+					return;
+				}
+				setCommittedValue(value);
+				onValueChange?.(value, eventDetails);
+			},
 			children
 		})
 	});
@@ -61,8 +69,9 @@ function ComboboxTrigger({ className, children, ...props }) {
 function ComboboxInput({ size = "md", className, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
 		"data-control-ui": "combobox",
+		"data-control-family": "field",
 		"data-field-kind": "combobox",
-		"data-slot": "root",
+		"data-slot": "input-group",
 		className: "relative flex w-full items-center",
 		children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
 			"data-control-ui": "combobox",
@@ -73,10 +82,10 @@ function ComboboxInput({ size = "md", className, ...props }) {
 			"data-size": size,
 			className: cn("w-full min-w-0 disabled:cursor-not-allowed", className),
 			...props
-		}), /* @__PURE__ */ jsx(ComboboxTrigger, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
+		}), /* @__PURE__ */ jsx(ComboboxTrigger, { className: "absolute end-1.5 top-1/2 -translate-y-1/2" })]
 	});
 }
-function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
+function ComboboxContent({ className, children, sideOffset = 6, anchor, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		"data-control-ui": "combobox",
@@ -88,6 +97,7 @@ function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
 		side: "bottom",
 		align: "start",
 		sideOffset,
+		anchor,
 		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-control-ui": "combobox",
@@ -103,15 +113,21 @@ function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
 	}) });
 }
 function ComboboxList({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Combobox$1.List, {
-		"data-control-ui": "combobox",
-		"data-popup-kind": "combobox",
-		"data-slot": "list",
-		"data-control-family": "popup",
-		"data-popup-part": "list-content",
-		className: cn("max-h-[min(18rem,var(--available-height))] overflow-y-auto overscroll-contain", className),
-		...props,
-		children
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "w-full",
+		viewportClassName: "overscroll-contain",
+		maxHeight: "min(18rem, var(--available-height))",
+		lockAxis: "x",
+		children: /* @__PURE__ */ jsx(Combobox$1.List, {
+			"data-control-ui": "combobox",
+			"data-popup-kind": "combobox",
+			"data-slot": "list",
+			"data-control-family": "popup",
+			"data-popup-part": "list-content",
+			className,
+			...props,
+			children
+		})
 	});
 }
 function ComboboxEmpty({ className, children, ...props }) {
@@ -145,6 +161,10 @@ function ComboboxItem({ className, children, disabled, value, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "combobox",
+			"data-control-family": "popup",
+			"data-popup-kind": "combobox",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center truncate",
 			children
 		}), /* @__PURE__ */ jsx("span", {

package/dist/ui/command.d.ts

@@ -19,15 +19,21 @@ export type CommandInputProps = Omit<ComponentProps<typeof Command$1.Input>, "st
   style?: CSSProperties & PopupKnobStyle;
 };
 export declare function CommandInput({ className, ...props }: CommandInputProps): import("react").JSX.Element;
-export declare function CommandList({ className, children, ...props }: ComponentProps<typeof Command$1.List> & {
+export type CommandListProps = Omit<ComponentProps<typeof Command$1.List>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
-}): import("react").JSX.Element;
+  getResultsLabel?: (count: number) => string;
+};
+export declare function CommandList({ className, children, getResultsLabel, ...props }: CommandListProps): import("react").JSX.Element;
 export type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style" | "title"> & {
   style?: CSSProperties & PopupKnobStyle;
   title?: ReactNode;
   description?: ReactNode;
 };
 export declare function CommandEmpty({ className, children, title, description, ...props }: CommandEmptyProps): import("react").JSX.Element;
+export type CommandLoadingProps = Omit<ComponentProps<typeof Command$1.Loading>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+export declare function CommandLoading({ label, className, ...props }: CommandLoadingProps): import("react").JSX.Element;
 export type CommandGroupProps = Omit<ComponentProps<typeof Command$1.Group>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };

package/dist/ui/command.js

@@ -1,10 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Command as Command$1, useCommandState } from "cmdk";
 //#region src/ui/command.tsx
 function Command({ chrome = "standalone", className, ...props }) {
@@ -38,6 +40,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 				}),
 				/* @__PURE__ */ jsx(Command, {
 					chrome: "embedded",
+					label: title,
 					...commandProps,
 					"data-control-ui": "command",
 					"data-popup-kind": "command",
@@ -102,9 +105,21 @@ function CommandListSurface({ hasResults, ...props }) {
 		role: hasResults ? "listbox" : "group"
 	});
 }
-function CommandList({ className, children, ...props }) {
-	const hasResults = useCommandState((state) => state.filtered.count > 0);
-	return /* @__PURE__ */ jsx(ScrollArea, {
+function defaultResultsLabel(count) {
+	if (count === 0) return "No results found";
+	return count === 1 ? "1 result" : `${count} results`;
+}
+function CommandList({ className, children, getResultsLabel = defaultResultsLabel, ...props }) {
+	const count = useCommandState((state) => state.filtered.count);
+	const search = useCommandState((state) => state.search);
+	const hasResults = count > 0;
+	const viewportRef = useRef(null);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => viewportRef.current?.scrollTo({ top: 0 }));
+		return () => cancelAnimationFrame(frame);
+	}, [search]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollArea, {
+		viewportRef,
 		maxHeight: "min(360px, var(--available-height, 360px))",
 		className: "min-h-0 w-full",
 		children: /* @__PURE__ */ jsx(Command$1.List, {
@@ -120,7 +135,7 @@ function CommandList({ className, children, ...props }) {
 				children
 			})
 		})
-	});
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: search ? getResultsLabel(count) : "" })] });
 }
 function CommandEmpty({ className, children, title = "No results found", description = "Try a different search term.", ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Empty, {
@@ -131,14 +146,22 @@ function CommandEmpty({ className, children, title = "No results found", descrip
 		"data-slot": "empty",
 		className,
 		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			role: "status",
-			children: children ?? /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
-				/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(CommandEmptyIcon, {}) }),
-				/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
-				description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
-			] }) })
-		})
+		children: /* @__PURE__ */ jsx("div", { children: children ?? /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(CommandEmptyIcon, {}) }),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+			description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+		] }) }) })
+	});
+}
+function CommandLoading({ label = "Loading results", className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Loading, {
+		"data-control-ui": "command",
+		"data-control-family": "popup",
+		"data-popup-kind": "command",
+		"data-slot": "loading",
+		label,
+		className,
+		...props
 	});
 }
 function CommandEmptyIcon() {
@@ -166,7 +189,7 @@ function CommandGroup({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "command",
 		"data-slot": "group",
-		className: cn("p-[var(--popover-padding)]", className),
+		className,
 		...props
 	});
 }
@@ -208,9 +231,10 @@ function CommandShortcut({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
 		"data-slot": "shortcut",
+		"aria-hidden": "true",
 		className: cn(className),
 		...props
 	});
 }
 //#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };

package/dist/ui/context-menu.js

@@ -17,6 +17,7 @@ function ContextMenuTrigger({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "context-menu",
 		"data-slot": "trigger",
+		tabIndex: 0,
 		className,
 		...props
 	});
@@ -153,6 +154,7 @@ function ContextMenuShortcut({ className, ...props }) {
 		"data-slot": "shortcut",
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
+		"aria-hidden": "true",
 		className: cn(className),
 		...props
 	});
@@ -175,6 +177,7 @@ function ContextMenuSubTrigger({ className, inset = false, children, ...props })
 			"data-popup-kind": "context-menu",
 			"data-control-family": "popup",
 			"data-slot": "sub-trigger-indicator",
+			"data-icon-dir": "inline",
 			"aria-hidden": "true",
 			children: "›"
 		})]

package/dist/ui/dialog.d.ts

@@ -15,6 +15,7 @@ export type DialogContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   showCloseButton?: boolean;
+  closeLabel?: string;
 };
 export declare function Dialog(props: DialogProps): import("react").JSX.Element;
 export declare function DialogTrigger({ className, ...props }: ComponentProps<typeof Dialog$1.Trigger> & {
@@ -22,7 +23,7 @@ export declare function DialogTrigger({ className, ...props }: ComponentProps<ty
 }): import("react").JSX.Element;
 export type DialogCloseProps = Omit<ComponentProps<typeof Dialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
 export declare function DialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
-export declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogContent({ className, children, showCloseButton, closeLabel, ...props }: DialogContentProps): import("react").JSX.Element;
 export declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;