@ctrl-ui/react 0.8.7 → 0.8.9

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>, multiple?: boolean): 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,12 +1,10 @@
 //#region src/ui/combobox-disabled-selection.ts
-function shouldAcceptComboboxValueChange(value, disabledValues, multiple = false) {
-	if (multiple && Array.isArray(value)) return value.every((item) => !disabledValues.has(item));
-	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.js

@@ -12,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);
@@ -22,9 +23,15 @@ function Combobox({ children, onValueChange, autoHighlight = true, ...props }) {
 		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
 			autoHighlight,
 			...props,
-			onValueChange: onValueChange ? (value, eventDetails) => {
-				if (shouldAcceptComboboxValueChange(value, disabledValues, props.multiple)) onValueChange(value, eventDetails);
-			} : 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
 		})
 	});
@@ -62,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",
@@ -74,7 +82,7 @@ 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, anchor, ...props }) {

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,11 +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 { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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 }) {
@@ -39,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",
@@ -103,15 +105,20 @@ function CommandListSurface({ hasResults, ...props }) {
 		role: hasResults ? "listbox" : "group"
 	});
 }
-function CommandList({ className, children, ...props }) {
-	const hasResults = useCommandState((state) => state.filtered.count > 0);
+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__ */ jsx(ScrollArea, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollArea, {
 		viewportRef,
 		maxHeight: "min(360px, var(--available-height, 360px))",
 		className: "min-h-0 w-full",
@@ -128,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, {
@@ -139,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() {
@@ -216,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;

package/dist/ui/dialog.js

@@ -3,6 +3,7 @@ import { controlEffectsAttribute, skinAdornment } from "../skin.js";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/ui/dialog.tsx
@@ -33,7 +34,7 @@ function DialogClose({ className, children, variant = "surface", size = "sm", to
 		})
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
+function DialogContent({ className, children, showCloseButton = true, closeLabel = "Close", ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-control-ui": "dialog",
@@ -58,27 +59,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		children: [
 			skinAdornment(skin, "dialog", "titlebar", {}),
 			children,
-			showCloseButton ? /* @__PURE__ */ jsxs(DialogClose, {
-				variant: "ghost",
-				size: "xs",
-				iconOnly: true,
-				className: "absolute",
-				children: [/* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 16 16",
-					className: "size-4",
-					"aria-hidden": "true",
-					fill: "none",
-					children: /* @__PURE__ */ jsx("path", {
-						d: "M4 4 12 12M12 4 4 12",
-						stroke: "currentColor",
-						strokeWidth: "1.4",
-						strokeLinecap: "round"
-					})
-				}), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			}) : null
+			showCloseButton ? /* @__PURE__ */ jsx(Dialog$1.Close, { render: /* @__PURE__ */ jsx(PopupCloseButton, { label: closeLabel }) }) : null
 		]
 	})] });
 }

package/dist/ui/dockable-panel-geometry.d.ts

@@ -14,4 +14,5 @@ export type DockablePanelPosition = {
 export declare function clampDockablePanelPosition(position: DockablePanelPosition, bounds: DockablePanelBounds, panel: DockablePanelSize, inset?: number): DockablePanelPosition;
 export declare function dockablePanelSideAt(pointerX: number, width: number): "left" | "right";
 export declare function oppositeDockablePanelSide(placement: "left" | "right"): "left" | "right";
+export declare function dockablePanelSideForKey(key: string, placement: "left" | "right"): "left" | "right" | null;
 //#endregion

package/dist/ui/dockable-panel-geometry.js

@@ -13,5 +13,11 @@ function dockablePanelSideAt(pointerX, width) {
 function oppositeDockablePanelSide(placement) {
 	return placement === "left" ? "right" : "left";
 }
+function dockablePanelSideForKey(key, placement) {
+	if (key === "ArrowLeft") return "left";
+	if (key === "ArrowRight") return "right";
+	if (key === "Enter" || key === " ") return oppositeDockablePanelSide(placement);
+	return null;
+}
 //#endregion
-export { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide };
+export { clampDockablePanelPosition, dockablePanelSideAt, dockablePanelSideForKey, oppositeDockablePanelSide };

package/dist/ui/dockable-panel.d.ts

@@ -1,6 +1,6 @@
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { DockablePanelKnobStyle } from "../knob-contracts/dockable-panel-knobs.js";
-import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { CSSProperties, ComponentProps, ReactNode, RefObject } from "react";
 //#region src/ui/dockable-panel.d.ts
 export type DockablePanelPlacement = "left" | "right";
 export type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
@@ -10,15 +10,18 @@ export type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref
   placement?: DockablePanelPlacement;
   defaultPlacement?: DockablePanelPlacement;
   onPlacementChange?: (placement: DockablePanelPlacement) => void;
+  finalFocus?: RefObject<HTMLElement | null>;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
 export type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-export type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
+export type DockablePanelDragHandleProps = Omit<ComponentProps<"div">, "style"> & {
+  dragLabel?: string;
+  dockHintLabel?: string;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-export type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
+export type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style" | "id"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
 export type DockablePanelActionsProps = ComponentProps<"div"> & {
@@ -45,10 +48,10 @@ export type DockablePanelContentProps = ComponentProps<"div"> & {
   padding?: DockablePanelContentPadding;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-export declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
+export declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, finalFocus, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
 export declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
-export declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
-export declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
+export declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, dragLabel, dockHintLabel, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
+export declare function DockablePanelTitle({ className, children, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
 export declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
 export declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
 export declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;