@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/morphing-panel.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/morphing-panel.tsx
 function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {
@@ -13,6 +13,7 @@ function MorphingPanelTriggerElement({ triggerProps, open, render, className, ch
 		props: {
 			...triggerProps,
 			"data-control-ui": "morphing-panel",
+			"data-control-family": "morphing-panel",
 			"data-slot": "trigger",
 			"data-state": panelState,
 			className: cn(triggerProps.className, className),
@@ -55,7 +56,7 @@ function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props
 }
 function MorphingPanelTrigger({ render, className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
-		className: "group/morphing-panel-trigger absolute top-0 right-0 z-10 flex cursor-pointer items-center justify-between data-[state=open]:top-2 data-[state=open]:right-2 data-[state=open]:justify-center [&>svg]:shrink-0",
+		className: "group/morphing-panel-trigger absolute top-0 end-0 z-10 flex cursor-pointer items-center justify-between data-[state=open]:top-2 data-[state=open]:end-2 data-[state=open]:justify-center [&>svg]:shrink-0",
 		...props,
 		render: (triggerProps, state) => /* @__PURE__ */ jsx(MorphingPanelTriggerElement, {
 			triggerProps,

package/dist/ui/native-select.d.ts

@@ -7,5 +7,5 @@ export type NativeSelectProps = Omit<Omit<ComponentProps<"select">, "size">, "st
 } & {
   size?: ControlSize;
 };
-export declare function NativeSelect({ size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
+export declare function NativeSelect({ ref, id, name, value, defaultValue, disabled, autoFocus, size, className, children, ...props }: NativeSelectProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/native-select.js

@@ -1,19 +1,32 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
 //#region src/ui/native-select.tsx
-function NativeSelect({ size = "md", className, children, ...props }) {
+function NativeSelect({ ref, id, name, value, defaultValue, disabled, autoFocus, size = "md", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-control-family": "field",
+		"data-field-kind": "native-select",
 		className: "relative inline-flex w-full items-center",
-		children: [/* @__PURE__ */ jsx("select", {
-			"data-control-ui": "native-select",
-			"data-field-kind": "native-select",
-			"data-slot": "root",
-			"data-size": size,
-			"data-control-family": "field",
-			"data-control": "true",
-			className: cn("w-full min-w-0 cursor-pointer", className),
-			...props,
-			children
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
+			id,
+			name,
+			value,
+			defaultValue,
+			disabled,
+			autoFocus,
+			render: /* @__PURE__ */ jsx("select", {
+				...props,
+				"data-control-ui": "native-select",
+				"data-field-kind": "native-select",
+				"data-slot": "root",
+				"data-size": size,
+				"data-control-family": "field",
+				"data-control": "true",
+				className: cn("w-full min-w-0 cursor-pointer", className),
+				children
+			})
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-control-ui": "native-select",

package/dist/ui/navigation-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/ui/page-layout.d.ts

@@ -26,11 +26,11 @@ export declare function PageHeader({ variant, className, ...props }: PageHeaderP
 export type PageTitleProps = Omit<ComponentProps<"h1">, "style"> & {
   style?: PageStyle;
 };
-export declare function PageTitle({ className, ...props }: PageTitleProps): import("react").JSX.Element;
+export declare function PageTitle(props: PageTitleProps): import("react").JSX.Element;
 export type PageDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: PageStyle;
 };
-export declare function PageDescription({ className, ...props }: PageDescriptionProps): import("react").JSX.Element;
+export declare function PageDescription(props: PageDescriptionProps): import("react").JSX.Element;
 export type PageActionsProps = Omit<ComponentProps<"div">, "style"> & {
   style?: PageStyle;
 };

package/dist/ui/page-layout.js

@@ -55,21 +55,19 @@ function PageHeader({ variant = "flow", className, ...props }) {
 		...props
 	});
 }
-function PageTitle({ className, ...props }) {
+function PageTitle(props) {
 	return /* @__PURE__ */ jsx("h1", {
 		"data-control-ui": "page-layout",
 		"data-control-family": "page-layout",
 		"data-slot": "title",
-		className: cn("text-balance", className),
 		...props
 	});
 }
-function PageDescription({ className, ...props }) {
+function PageDescription(props) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-control-ui": "page-layout",
 		"data-control-family": "page-layout",
 		"data-slot": "description",
-		className: cn("text-pretty", className),
 		...props
 	});
 }

package/dist/ui/pagination.d.ts

@@ -1,11 +1,13 @@
 import { PaginationKnobStyle } from "../knob-contracts/pagination-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/pagination.d.ts
-export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
+export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style" | "children"> & {
+  label?: string;
   style?: CSSProperties & PaginationKnobStyle;
 };
 export type PaginationLinkProps = Omit<ComponentProps<"a"> & {
   isActive?: boolean;
+  disabled?: boolean;
 }, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
@@ -18,8 +20,8 @@ export declare function PaginationContent({ className, ...props }: ComponentProp
 export declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-export declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
-export declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-export declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
+export declare function PaginationLink({ isActive, disabled, href, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationPrevious({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationNext({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationEllipsis({ label, className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/pagination.js

@@ -4,7 +4,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 //#region src/ui/pagination.tsx
 function Pagination({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "pagination",
+		"aria-label": "Pagination",
 		"data-control-ui": "pagination",
 		"data-control-family": "pagination",
 		"data-slot": "root",
@@ -31,7 +31,7 @@ function PaginationItem({ className, ...props }) {
 	});
 }
 const paginationLinkChrome = "inline-flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] cursor-pointer select-none items-center justify-center whitespace-nowrap aria-disabled:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0";
-function PaginationLink({ isActive = false, className, ...props }) {
+function PaginationLink({ isActive = false, disabled = false, href, className, ...props }) {
 	return /* @__PURE__ */ jsx("a", {
 		"aria-current": isActive ? "page" : void 0,
 		"data-control-ui": "pagination",
@@ -39,37 +39,43 @@ function PaginationLink({ isActive = false, className, ...props }) {
 		"data-slot": "link",
 		"data-control": "true",
 		"data-active": isActive ? "true" : void 0,
+		role: disabled ? "link" : void 0,
+		"aria-disabled": disabled || void 0,
 		className: cn(paginationLinkChrome, className),
-		...props
+		...props,
+		href: disabled ? void 0 : href
 	});
 }
-function PaginationPrevious({ className, ...props }) {
+function PaginationPrevious({ className, children = "Previous", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to previous page",
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+		children: [/* @__PURE__ */ jsx(ChevronLeft, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		}), /* @__PURE__ */ jsx("span", { children })]
 	});
 }
-function PaginationNext({ className, ...props }) {
+function PaginationNext({ className, children = "Next", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to next page",
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRight, {})]
+		children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(ChevronRight, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		})]
 	});
 }
-function PaginationEllipsis({ className, ...props }) {
+function PaginationEllipsis({ label = "More pages", className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
-		"aria-hidden": "true",
 		"data-control-ui": "pagination",
 		"data-control-family": "pagination",
 		"data-slot": "ellipsis",
 		className: cn("flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] items-center justify-center [&>svg]:size-4", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontal, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "More pages"
+			children: label
 		})]
 	});
 }

package/dist/ui/phone-input.d.ts

@@ -21,6 +21,7 @@ export type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "si
   countryCallingCodeEditable?: boolean;
   addInternationalOption?: boolean;
   countrySearchPlaceholder?: string;
+  countrySearchLabel?: string;
   countryEmptyMessage?: string;
   "data-invalid"?: boolean | string;
   style?: CSSProperties & PhoneInputKnobStyle;

package/dist/ui/phone-input.js

@@ -1,16 +1,21 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { InputGroup, InputGroupAddon } from "./input-group.js";
+import { Input } from "./input.js";
 import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import flags from "react-phone-number-input/flags";
 import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
+import flags from "react-phone-number-input/flags";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;
+function phoneInputKnobs(style) {
+	if (!style) return void 0;
+	return Object.fromEntries(Object.entries(style).filter(([property]) => property.startsWith("--cui-phone-input-")));
+}
 function PhoneInputContainer({ className, ...props }) {
 	return /* @__PURE__ */ jsx(InputGroup, {
 		"data-field-kind": "phone-input",
@@ -19,12 +24,8 @@ function PhoneInputContainer({ className, ...props }) {
 	});
 }
 function PhoneInputControl({ className, normalizationCountry, onChange, onNativeChange, ...props }) {
-	return /* @__PURE__ */ jsx(InputGroupInput, {
+	return /* @__PURE__ */ jsx(Input, {
 		...props,
-		"data-control-ui": "field",
-		"data-control-family": "field",
-		"data-field-kind": "phone-input",
-		"data-slot": "input",
 		dir: "ltr",
 		className,
 		onChange: (event) => {
@@ -35,11 +36,7 @@ function PhoneInputControl({ className, normalizationCountry, onChange, onNative
 		}
 	});
 }
-function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country…", emptyMessage, knobStyle }) {
-	const countryStyle = knobStyle;
-	const triggerStyle = knobStyle;
-	const metadataStyle = knobStyle;
-	const chevronStyle = knobStyle;
+function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country…", searchLabel = "Search countries", emptyMessage, knobStyle }) {
 	const [open, setOpen] = useState(false);
 	const selectedOption = options.find((option) => option.value === value);
 	const selectedCallingCode = value ? `+${getCountryCallingCode(value)}` : void 0;
@@ -47,7 +44,6 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 	return /* @__PURE__ */ jsx(InputGroupAddon, {
 		"data-phone-input-country": "",
 		className: "h-full self-stretch p-0",
-		style: countryStyle,
 		children: /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: setOpen,
@@ -61,52 +57,54 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 				onFocus,
 				onBlur,
 				className: "inline-flex h-full items-center justify-center disabled:cursor-not-allowed",
-				style: triggerStyle,
-				children: [/* @__PURE__ */ jsx(CountryFlag, { country: value }), /* @__PURE__ */ jsx(ChevronIcon, {
-					open,
-					style: chevronStyle
-				})]
+				children: [/* @__PURE__ */ jsx(CountryFlag, { country: value }), /* @__PURE__ */ jsx(ChevronIcon, { open })]
 			}), /* @__PURE__ */ jsx(PopoverContent, {
 				align: "start",
 				padding: "none",
 				className: "w-[min(20rem,calc(100vw-2rem))]",
-				children: /* @__PURE__ */ jsxs(Command, {
-					chrome: "embedded",
-					children: [/* @__PURE__ */ jsx(CommandInput, {
-						"aria-label": searchPlaceholder,
-						placeholder: searchPlaceholder
-					}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { title: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
-						const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
-						const selected = option.value === value;
-						return /* @__PURE__ */ jsxs(CommandItem, {
-							value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
-							"data-current": selected ? "" : void 0,
-							onSelect: () => {
-								onChange(option.value);
-								setOpen(false);
-							},
-							children: [
-								/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
-								/* @__PURE__ */ jsx("span", {
-									className: "min-w-0 flex-1 truncate",
-									children: option.label
-								}),
-								callingCode ? /* @__PURE__ */ jsx("span", {
-									"data-control-ui": "phone-input",
-									"data-control-family": "phone-input",
-									"data-slot": "metadata",
-									className: "min-w-0",
-									style: metadataStyle,
-									children: callingCode
-								}) : null,
-								selected ? /* @__PURE__ */ jsx("span", {
-									className: "sr-only",
-									children: "Selected"
-								}) : null,
-								/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
-							]
-						}, option.value ?? "international");
-					}) })] })]
+				children: /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "phone-input",
+					"data-control-family": "phone-input",
+					"data-slot": "root",
+					className: "contents",
+					style: knobStyle,
+					children: /* @__PURE__ */ jsxs(Command, {
+						chrome: "embedded",
+						children: [/* @__PURE__ */ jsx(CommandInput, {
+							"aria-label": searchLabel,
+							placeholder: searchPlaceholder
+						}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { title: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+							const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
+							const selected = option.value === value;
+							return /* @__PURE__ */ jsxs(CommandItem, {
+								value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
+								"data-current": selected ? "" : void 0,
+								onSelect: () => {
+									onChange(option.value);
+									setOpen(false);
+								},
+								children: [
+									/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate",
+										children: option.label
+									}),
+									callingCode ? /* @__PURE__ */ jsx("span", {
+										"data-control-ui": "phone-input",
+										"data-control-family": "phone-input",
+										"data-slot": "metadata",
+										className: "min-w-0",
+										children: callingCode
+									}) : null,
+									selected ? /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Selected"
+									}) : null,
+									/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
+								]
+							}, option.value ?? "international");
+						}) })] })]
+					})
 				})
 			})]
 		})
@@ -134,8 +132,8 @@ function PhoneFlag({ country }) {
 }
 function PhoneInput(props) {
 	const controlled = Object.hasOwn(props, "value");
-	const { ref, size = "md", value, defaultValue, onValueChange, onChange: onNativeChange, name, disabled, readOnly, className, style, defaultCountry, countries, labels, locales, countryOptionsOrder, onCountryChange, countryCallingCodeEditable = true, addInternationalOption = true, countrySearchPlaceholder, countryEmptyMessage, "aria-invalid": ariaInvalid, "data-invalid": dataInvalid, ...inputProps } = props;
-	const knobStyle = style;
+	const { ref, size = "md", value, defaultValue, onValueChange, onChange: onNativeChange, name, disabled, readOnly, className, style, defaultCountry, countries, labels, locales, countryOptionsOrder, onCountryChange, countryCallingCodeEditable = true, addInternationalOption = true, countrySearchPlaceholder, countrySearchLabel, countryEmptyMessage, "aria-invalid": ariaInvalid, "data-invalid": dataInvalid, ...inputProps } = props;
+	const knobStyle = phoneInputKnobs(style);
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
 	const currentValue = controlled ? value : internalValue;
@@ -186,6 +184,7 @@ function PhoneInput(props) {
 		countrySelectComponent: PhoneCountrySelect,
 		countrySelectProps: {
 			searchPlaceholder: countrySearchPlaceholder,
+			searchLabel: countrySearchLabel,
 			emptyMessage: countryEmptyMessage,
 			knobStyle
 		},
@@ -197,7 +196,7 @@ function PhoneInput(props) {
 		disabled
 	}) : null] });
 }
-function ChevronIcon({ open, style }) {
+function ChevronIcon({ open }) {
 	return /* @__PURE__ */ jsx("svg", {
 		"data-control-ui": "phone-input",
 		"data-control-family": "phone-input",
@@ -205,7 +204,6 @@ function ChevronIcon({ open, style }) {
 		viewBox: "0 0 12 12",
 		"data-open": open ? "true" : void 0,
 		className: "size-3",
-		style,
 		"aria-hidden": "true",
 		fill: "none",
 		children: /* @__PURE__ */ jsx("path", {

package/dist/ui/popover.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

package/dist/ui/radio-group.d.ts

@@ -20,6 +20,8 @@ export type RadioProps = Omit<{
   className?: string;
   "aria-label"?: string;
   "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
 }, "style"> & {
   style?: CSSProperties & ChoiceKnobStyle;
 };

package/dist/ui/resizable.d.ts

@@ -63,10 +63,11 @@ export type ResizableFloatingPanelProps = Omit<ComponentProps<"div">, "style"> &
   maxSize?: number;
   handleVariant?: ResizableHandleVariant;
   handleLabel?: string;
+  getAriaValueText?: (size: number) => string;
   style?: ResizableFloatingPanelStyle;
 };
 export declare function ResizablePanelGroup({ className, orientation, variant, disableCursor, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
 export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
-export declare function ResizableHandle({ className, variant, withHandle, children, ...props }: ResizableHandleProps): import("react").JSX.Element;
-export declare function ResizableFloatingPanel({ side, size: controlledSize, defaultSize, onSizeChange, minSize, maxSize, handleVariant, handleLabel, className, style, children, ...props }: ResizableFloatingPanelProps): import("react").JSX.Element;
+export declare function ResizableHandle({ className, variant, withHandle, children, "aria-label": ariaLabel, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export declare function ResizableFloatingPanel({ side, size: controlledSize, defaultSize, onSizeChange, minSize, maxSize, handleVariant, handleLabel, getAriaValueText, className, style, children, ...props }: ResizableFloatingPanelProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/resizable.js

@@ -42,7 +42,7 @@ function ResizablePanel({ className, ...props }) {
 		...props
 	});
 }
-function ResizableHandle({ className, variant = "solid", withHandle, children, ...props }) {
+function ResizableHandle({ className, variant = "solid", withHandle, children, "aria-label": ariaLabel = "Resize panel", ...props }) {
 	const { orientation, disableCursor } = useContext(ResizableGroupContext);
 	const axis = orientation === "horizontal" ? "vertical" : "horizontal";
 	return /* @__PURE__ */ jsxs(Separator, {
@@ -53,6 +53,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		"data-axis": axis,
 		"data-cursor": disableCursor ? "none" : void 0,
 		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
+		"aria-label": ariaLabel,
 		...props,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",
@@ -65,7 +66,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		}) : null, children]
 	});
 }
-function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultSize = 280, onSizeChange, minSize = 160, maxSize = 640, handleVariant = "hover", handleLabel = "Resize panel", className, style, children, ...props }) {
+function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultSize = 280, onSizeChange, minSize = 160, maxSize = 640, handleVariant = "hover", handleLabel = "Resize panel", getAriaValueText = (value) => `${value} pixels`, className, style, children, ...props }) {
 	const [uncontrolledSize, setUncontrolledSize] = useState(defaultSize);
 	const [hovered, setHovered] = useState(false);
 	const [focused, setFocused] = useState(false);
@@ -150,13 +151,14 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 				"aria-valuenow": size,
 				"aria-valuemin": minSize,
 				"aria-valuemax": maxSize,
+				"aria-valuetext": getAriaValueText(size),
 				"data-control-ui": "resizable",
 				"data-control-family": "resizable",
 				"data-slot": "handle",
 				"data-variant": handleVariant,
 				"data-axis": "vertical",
 				"data-separator": separatorState,
-				className: cn("absolute inset-y-0 w-px touch-none after:absolute after:inset-y-0 after:-inset-x-1 after:content-['']", side === "right" ? "left-0" : "right-0"),
+				className: cn("absolute inset-y-0 w-px touch-none after:absolute after:inset-y-0 after:inset-x-[calc((1px_-_var(--target-min))/2)] after:content-['']", side === "right" ? "left-0" : "right-0"),
 				onPointerDown: beginResize,
 				onPointerMove: updateResize,
 				onPointerUp: endResize,

package/dist/ui/responsive-dialog.d.ts

@@ -9,7 +9,7 @@ export type ResponsiveDialogContentProps = DialogContentProps & {
 export declare function ResponsiveDialog({ open: controlledOpen, defaultOpen, onOpenChange, children }: ResponsiveDialogProps): import("react").JSX.Element;
 export declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeof DialogTrigger>, "handle">): import("react").JSX.Element;
 export declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
-export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
+export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, closeLabel, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
 export declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
 export declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
 export declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;

package/dist/ui/responsive-dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
@@ -73,10 +74,11 @@ function ResponsiveDialogClose({ className, children, variant = "surface", size
 		})
 	});
 }
-function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton = true, ...props }) {
+function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton = true, closeLabel = "Close", ...props }) {
 	if (!useResponsiveDialogContext()) return /* @__PURE__ */ jsx(DialogContent, {
 		className: cn(className, dialogClassName),
 		showCloseButton,
+		closeLabel,
 		...props,
 		children
 	});
@@ -86,26 +88,7 @@ function ResponsiveDialogContent({ className, dialogClassName, drawerClassName,
 		children: [/* @__PURE__ */ jsx(DrawerBody, {
 			padding: "none",
 			children
-		}), showCloseButton ? /* @__PURE__ */ jsxs(ResponsiveDialogClose, {
-			variant: "ghost",
-			size: "xs",
-			className: "absolute right-3 top-3 w-[var(--control-h-xs)] px-0",
-			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(DrawerClose, { render: /* @__PURE__ */ jsx(PopupCloseButton, { label: closeLabel }) }) : null]
 	});
 }
 function ResponsiveDialogHeader(props) {

package/dist/ui/rich-tooltip.d.ts

@@ -30,9 +30,10 @@ export type RichTooltipProps = Omit<ComponentProps<typeof Popover.Root>, "modal"
   tone?: RichTooltipTone;
   storageKey?: string;
   dismissOnOutsidePress?: boolean;
+  dismissOnFocusOut?: boolean;
   trapFocus?: boolean;
 };
-export declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
+export declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, dismissOnFocusOut, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
 export declare function RichTooltipTrigger({ className, ...props }: ComponentProps<typeof Popover.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
@@ -69,13 +70,18 @@ export type RichTooltipProgressProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 };
 export declare function RichTooltipProgress({ className, variant, children, ...props }: RichTooltipProgressProps): import("react").JSX.Element | null;
-export declare function RichTooltipPrevious({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipPrevious({ className, children, label, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  label?: string;
 }): import("react").JSX.Element | null;
-export declare function RichTooltipNext({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipNext({ className, children, nextLabel, finishLabel, gotItLabel, onClick, ref, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  nextLabel?: string;
+  finishLabel?: string;
+  gotItLabel?: string;
 }): import("react").JSX.Element;
-export declare function RichTooltipClose({ className, children, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
+export declare function RichTooltipClose({ className, children, label, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  label?: string;
 }): import("react").JSX.Element;
 //#endregion