@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/gradient-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { formatGradient } from "../lib/color.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
@@ -30,6 +31,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 	const [selectedId, setSelectedId] = useState(defaultStops[0]?.id ?? "stop-1");
 	const idCounter = useRef(defaultStops.length);
 	const trackRef = useRef(null);
+	const [stopNodes] = useState(() => /* @__PURE__ */ new Map());
 	const gradient = formatGradient(stops, type, angle);
 	function updateStops(nextStops) {
 		setStops(nextStops);
@@ -58,7 +60,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 		if (stops.length <= 2) return;
 		const nextStops = stops.filter((stop) => stop.id !== id);
 		updateStops(nextStops);
-		if (selectedId === id) setSelectedId(nextStops[0]?.id ?? selectedId);
+		setSelectedId((current) => current === id ? nextStops[0]?.id ?? current : current);
 	};
 	const setType = (nextType) => {
 		setTypeState(nextType);
@@ -71,6 +73,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 		selectedId,
 		gradient,
 		trackRef,
+		stopNodes,
 		select: setSelectedId,
 		setStopColor,
 		setStopPosition,
@@ -130,30 +133,35 @@ function GradientEditorTrack({ className, children, style, "aria-label": ariaLab
 		children: children ?? stops.map((stop) => /* @__PURE__ */ jsx(GradientEditorStop, { stop }, stop.id))
 	});
 }
-function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
-	const { stops, selectedId, select, setStopPosition, removeStop, trackRef } = useGradientEditor();
+function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const { stops, selectedId, select, setStopPosition, removeStop, trackRef, stopNodes } = useGradientEditor();
 	const selected = stop.id === selectedId;
 	const canRemove = stops.length > 2;
+	const { onPointerDown: startDrag } = useColorArea((offset, rect) => setStopPosition(stop.id, offset.x / rect.width), trackRef);
 	function handlePointerDown(event) {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		select(stop.id);
 		event.currentTarget.focus();
-		event.preventDefault();
-		const track = trackRef.current;
-		if (!track) return;
-		const move = (moveEvent) => {
-			const rect = track.getBoundingClientRect();
-			setStopPosition(stop.id, (moveEvent.clientX - rect.left) / rect.width);
-		};
-		const up = () => {
-			window.removeEventListener("pointermove", move);
-			window.removeEventListener("pointerup", up);
-			document.body.style.userSelect = "";
+		startDrag(event);
+	}
+	function registerStop(node) {
+		stopNodes.set(stop.id, node);
+		const cleanup = typeof ref === "function" ? ref(node) : void 0;
+		if (ref && typeof ref === "object") ref.current = node;
+		return () => {
+			stopNodes.delete(stop.id);
+			if (typeof cleanup === "function") cleanup();
+			else if (typeof ref === "function") ref(null);
+			else if (ref) ref.current = null;
 		};
-		document.body.style.userSelect = "none";
-		window.addEventListener("pointermove", move);
-		window.addEventListener("pointerup", up);
+	}
+	function remove() {
+		if (!canRemove) return;
+		const index = stops.findIndex((candidate) => candidate.id === stop.id);
+		const neighbour = stops[index + 1] ?? stops[index - 1];
+		if (neighbour) stopNodes.get(neighbour.id)?.focus();
+		removeStop(stop.id);
 	}
 	function handleFocus(event) {
 		onFocus?.(event);
@@ -194,27 +202,35 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 			case "Delete":
 				if (!canRemove) return;
 				event.preventDefault();
-				removeStop(stop.id);
+				remove();
 		}
 	}
 	function handleDoubleClick(event) {
 		onDoubleClick?.(event);
-		if (!event.defaultPrevented) removeStop(stop.id);
+		if (!event.defaultPrevented) remove();
 	}
-	const defaultLabel = `Gradient stop at ${Math.round(stop.position * 100)}%. Use arrow keys to move${canRemove ? ", Delete to remove" : ""}.`;
+	const percent = Math.round(stop.position * 100);
+	const defaultLabel = `Gradient stop ${stops.indexOf(stop) + 1}`;
 	return /* @__PURE__ */ jsx("button", {
+		ref: registerStop,
 		type: "button",
+		role: "slider",
 		"data-control-ui": "gradient-editor",
 		"data-control-family": "gradient-editor",
 		"data-slot": "stop",
 		"data-selected": selected ? "true" : void 0,
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? defaultLabel : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
+		"aria-orientation": "horizontal",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": percent,
+		"aria-valuetext": `${percent}%, ${stop.color}`,
 		onPointerDown: handlePointerDown,
 		onFocus: handleFocus,
 		onKeyDown: handleKeyDown,
 		onDoubleClick: handleDoubleClick,
-		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab touch-pan-y overflow-hidden active:cursor-grabbing", className),
+		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab touch-pan-y active:cursor-grabbing", className),
 		style: {
 			...style,
 			left: `${stop.position * 100}%`,

package/dist/ui/hover-card.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 { PreviewCard } from "@base-ui/react/preview-card";

package/dist/ui/infinite-canvas.d.ts

@@ -30,6 +30,7 @@ export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
   x: number;
   y: number;
   onPositionChange?: (position: InfiniteCanvasPoint) => void;
+  movableItemLabel?: string;
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
 export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
@@ -43,8 +44,8 @@ type InfiniteCanvasContextValue = {
   zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
 };
 export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
-export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
 export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
-export declare function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
 export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/infinite-canvas.js

@@ -16,6 +16,7 @@ const KEYBOARD_PAN_STEP = 32;
 const GRID_SIZE = 24;
 const WHEEL_ZOOM_SPEED = .004;
 const MAX_WHEEL_ZOOM_DELTA = 50;
+const CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0";
 const NOTCHED_WHEEL_DELTA = 40;
 const KEYBOARD_PAN_DIRECTIONS = {
 	ArrowLeft: {
@@ -35,6 +36,14 @@ const KEYBOARD_PAN_DIRECTIONS = {
 		y: 1
 	}
 };
+const KEYBOARD_ZOOM_FACTORS = {
+	"+": 1.15,
+	"=": 1.15,
+	"-": 1 / 1.15
+};
+function keyboardPanStep(shiftKey) {
+	return shiftKey ? 96 : KEYBOARD_PAN_STEP;
+}
 const InfiniteCanvasContext = createContext(null);
 function clampScale(scale, minScale, maxScale) {
 	return Math.min(Math.max(scale, minScale), maxScale);
@@ -68,7 +77,7 @@ function useInfiniteCanvas() {
 	if (!context) throw new Error("useInfiniteCanvas must be used within InfiniteCanvas");
 	return context;
 }
-function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", ...props }) {
+function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", "aria-keyshortcuts": ariaKeyShortcuts, ...props }) {
 	const minScale = Math.max(.1, minScaleProp);
 	const maxScale = Math.max(minScale, maxScaleProp);
 	const [uncontrolledTransform, setUncontrolledTransform] = useState(defaultTransform);
@@ -176,23 +185,32 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 		root.addEventListener("wheel", listener, { passive: false });
 		return () => root.removeEventListener("wheel", listener);
 	}, []);
-	function moveWithKeyboard(event) {
-		onKeyDown?.(event);
-		if (event.defaultPrevented) return;
-		const currentTransform = transformRef.current;
-		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
+	function applyKeyboardCommand(key, shiftKey) {
+		const direction = KEYBOARD_PAN_DIRECTIONS[key];
 		if (direction) {
-			const panStep = event.shiftKey ? 96 : KEYBOARD_PAN_STEP;
+			const currentTransform = transformRef.current;
+			const panStep = keyboardPanStep(shiftKey);
 			commitTransform({
 				...currentTransform,
 				x: currentTransform.x + direction.x * panStep,
 				y: currentTransform.y + direction.y * panStep
 			}, "keyboard");
-		} else if (event.key === "+" || event.key === "=") zoomBy(1.15, "keyboard");
-		else if (event.key === "-") zoomBy(1 / 1.15, "keyboard");
-		else if (event.key === "0") reset("keyboard");
-		else return;
-		event.preventDefault();
+			return true;
+		}
+		const zoomFactor = KEYBOARD_ZOOM_FACTORS[key];
+		if (zoomFactor) {
+			zoomBy(zoomFactor, "keyboard");
+			return true;
+		}
+		if (key !== "0") return false;
+		reset("keyboard");
+		return true;
+	}
+	function moveWithKeyboard(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (applyKeyboardCommand(event.key, event.shiftKey)) event.preventDefault();
 	}
 	const context = {
 		transform,
@@ -218,7 +236,7 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 			"data-easing": easing || void 0,
 			"aria-label": ariaLabel,
 			role: "application",
-			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0",
+			"aria-keyshortcuts": ariaKeyShortcuts ? `${CANVAS_KEY_SHORTCUTS} ${ariaKeyShortcuts}` : CANVAS_KEY_SHORTCUTS,
 			tabIndex: 0,
 			className: cn("relative isolate overflow-hidden overscroll-contain touch-none select-none data-panning:cursor-grabbing", className),
 			style: canvasStyle,
@@ -246,7 +264,7 @@ function InfiniteCanvasContent({ className, style, ...props }) {
 		}
 	});
 }
-function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
+function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel = "Movable item", className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }) {
 	const { transform } = useInfiniteCanvas();
 	const dragRef = useRef(null);
 	const [dragging, setDragging] = useState(false);
@@ -290,7 +308,37 @@ function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointe
 		onPointerCancel?.(event);
 		finishDrag(event);
 	}
+	function moveWithKeyboard(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !onPositionChange || event.target !== event.currentTarget) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
+		if (!direction) return;
+		event.preventDefault();
+		const step = keyboardPanStep(event.shiftKey) / transform.scale;
+		onPositionChange({
+			x: x + direction.x * step,
+			y: y + direction.y * step
+		});
+	}
 	return /* @__PURE__ */ jsx("div", {
+		...onPositionChange ? {
+			role: "group",
+			"aria-roledescription": movableItemLabel,
+			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
+			tabIndex: 0,
+			onPointerDown: beginDrag,
+			onPointerMove: updateDrag,
+			onPointerUp: endDrag,
+			onPointerCancel: cancelDrag,
+			onKeyDown: moveWithKeyboard
+		} : {
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel,
+			onKeyDown
+		},
 		...props,
 		"data-control-ui": "infinite-canvas",
 		"data-control-family": "infinite-canvas",
@@ -301,11 +349,7 @@ function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointe
 			...style,
 			left: x,
 			top: y
-		},
-		onPointerDown: beginDrag,
-		onPointerMove: updateDrag,
-		onPointerUp: endDrag,
-		onPointerCancel: cancelDrag
+		}
 	});
 }
 function InfiniteCanvasControls({ className, ...props }) {

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

@@ -15,7 +15,4 @@ export type InputGroupAddonProps = ComponentProps<"span"> & {
 export declare function useIsInsideInputGroup(): boolean;
 export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").JSX.Element;
 export declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
-export declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
-  style?: CSSProperties & FieldKnobStyle;
-}): import("react").JSX.Element;
 //#endregion

package/dist/ui/input-group.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { createContext, use } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/input-group.tsx
 const InputGroupSurfaceContext = createContext(false);
 function useIsInsideInputGroup() {
@@ -31,23 +31,13 @@ function InputGroup({ size = "md", className, render, children, ...props }) {
 }
 function InputGroupAddon({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
+		...props,
 		"data-control-ui": "input-group",
 		"data-control-family": "field",
 		"data-field-kind": "input-group",
 		"data-slot": "addon",
-		className: cn("inline-flex shrink-0 items-center", className),
-		...props
-	});
-}
-function InputGroupInput({ className, ...props }) {
-	return /* @__PURE__ */ jsx("input", {
-		"data-control-ui": "input-group",
-		"data-control-family": "field",
-		"data-field-kind": "input-group",
-		"data-slot": "input",
-		className: cn("h-full min-w-0 flex-1", className),
-		...props
+		className: cn("inline-flex shrink-0 items-center", className)
 	});
 }
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupInput, useIsInsideInputGroup };
+export { InputGroup, InputGroupAddon, useIsInsideInputGroup };

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

@@ -33,5 +33,5 @@ export type InputOTPSeparatorProps = ComponentProps<"div"> & {
 };
 export declare function InputOTPSlot({ index, length, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
 export declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
-export declare function InputOTP({ length, separator, className, children, ...props }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTP({ length, separator, className, children, "aria-label": ariaLabel, ...props }: InputOTPProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/input-otp.js

@@ -1,17 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Fragment } from "react";
+import { Fragment, createContext, useContext, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/ui/input-otp.tsx
+const InputOTPLabelContext = createContext(void 0);
+function slotAriaLabel(index, length) {
+	if (index === 0) return void 0;
+	return length ? `Character ${index + 1} of ${length}` : `Character ${index + 1}`;
+}
 function InputOTPSlot({ index, length, className, ...props }) {
+	const labelId = useContext(InputOTPLabelContext);
 	return /* @__PURE__ */ jsx(OTPField.Input, {
 		"data-control-ui": "input-otp",
 		"data-field-kind": "input-otp",
 		"data-slot": "slot",
 		"data-control-family": "field",
 		"data-control": "true",
-		"aria-label": length ? `Character ${index + 1} of ${length}` : `Character ${index + 1}`,
+		"aria-label": slotAriaLabel(index, length),
+		"aria-labelledby": index === 0 ? labelId : void 0,
 		className: cn("relative flex size-[var(--control-h-md)] items-center justify-center", className),
 		...props
 	});
@@ -26,19 +33,29 @@ function InputOTPSeparator({ className, ...props }) {
 		...props
 	});
 }
-function InputOTP({ length = 6, separator = false, className, children, ...props }) {
-	return /* @__PURE__ */ jsx(OTPField.Root, {
-		"data-control-ui": "input-otp",
-		"data-control-family": "field",
-		"data-field-kind": "input-otp",
-		"data-slot": "root",
-		length,
-		className: cn("flex items-center", className),
-		...props,
-		children: children ?? Array.from({ length }, (_, index) => `input-otp-slot-${index}`).map((slotKey, index) => /* @__PURE__ */ jsxs(Fragment, { children: [separator && index === Math.ceil(length / 2) ? /* @__PURE__ */ jsx(InputOTPSeparator, {}) : null, /* @__PURE__ */ jsx(InputOTPSlot, {
-			index,
-			length
-		})] }, slotKey))
+function InputOTP({ length = 6, separator = false, className, children, "aria-label": ariaLabel, ...props }) {
+	const labelId = useId();
+	const labelledBy = ariaLabel ? labelId : void 0;
+	return /* @__PURE__ */ jsxs(InputOTPLabelContext.Provider, {
+		value: labelledBy,
+		children: [ariaLabel ? /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}) : null, /* @__PURE__ */ jsx(OTPField.Root, {
+			"data-control-ui": "input-otp",
+			"data-control-family": "field",
+			"data-field-kind": "input-otp",
+			"data-slot": "root",
+			length,
+			"aria-labelledby": labelledBy,
+			className: cn("flex items-center", className),
+			...props,
+			children: children ?? Array.from({ length }, (_, index) => `input-otp-slot-${index}`).map((slotKey, index) => /* @__PURE__ */ jsxs(Fragment, { children: [separator && index === Math.ceil(length / 2) ? /* @__PURE__ */ jsx(InputOTPSeparator, {}) : null, /* @__PURE__ */ jsx(InputOTPSlot, {
+				index,
+				length
+			})] }, slotKey))
+		})]
 	});
 }
 //#endregion

package/dist/ui/input.js

@@ -6,21 +6,21 @@ import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/ui/input.tsx
 function Input({ size = "md", className, ...props }) {
 	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsx(Input$1, {
+		...props,
 		"data-control-ui": "input-group",
 		"data-control-family": "field",
 		"data-field-kind": "input-group",
 		"data-slot": "input",
-		className: cn("h-full min-w-0 flex-1", className),
-		...props
+		className: cn("h-full min-w-0 flex-1", className)
 	});
 	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
 		"data-control-ui": "input",
 		"data-slot": "root",
 		"data-control-family": "field",
 		"data-control": "true",
 		"data-size": size,
-		className: cn("w-full min-w-0", className),
-		...props
+		className: cn("w-full min-w-0", className)
 	});
 }
 //#endregion

package/dist/ui/item.d.ts

@@ -20,6 +20,7 @@ export type ItemMediaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ItemKnobStyle;
 };
 export type ItemTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & ItemKnobStyle;
 };
 export type ItemGroupProps = ComponentProps<"div"> & {
@@ -33,7 +34,7 @@ export declare function ItemMedia({ className, ...props }: ItemMediaProps): impo
 export declare function ItemContent({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;
 }): import("react").JSX.Element;
-export declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react").JSX.Element;
+export declare function ItemTitle({ render, className, ...props }: ItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
 export declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & ItemKnobStyle;

package/dist/ui/item.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/item.tsx
 const itemVariants = [
 	"default",
@@ -61,13 +61,17 @@ function ItemContent({ className, ...props }) {
 		...props
 	});
 }
-function ItemTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "item",
-		"data-control-family": "item",
-		"data-slot": "title",
-		className: cn("flex w-fit items-center", className),
-		...props
+function ItemTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "item",
+			"data-control-family": "item",
+			"data-slot": "title",
+			className: cn("flex w-fit items-center", className)
+		}
 	});
 }
 function ItemDescription({ className, ...props }) {

package/dist/ui/live-status.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/ui/live-status.d.ts
+export type LiveStatusProps = Omit<ComponentProps<"span">, "role" | "children"> & {
+  message: string;
+};
+export declare function LiveStatus({ message, className, ...props }: LiveStatusProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/live-status.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/live-status.tsx
+function LiveStatus({ message, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		"data-control-ui": "live-status",
+		"data-slot": "root",
+		className: cn("sr-only", className),
+		children: message
+	});
+}
+//#endregion
+export { LiveStatus };

package/dist/ui/markdown-elements.d.ts

@@ -17,6 +17,9 @@ export declare function MarkdownCode({ className, children, node: _node, ...prop
 export declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
 export declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
 export declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
+export declare function MarkdownH4({ className, node: _node, ...props }: MarkdownElementProps<"h4">): JSX.Element;
+export declare function MarkdownH5({ className, node: _node, ...props }: MarkdownElementProps<"h5">): JSX.Element;
+export declare function MarkdownH6({ className, node: _node, ...props }: MarkdownElementProps<"h6">): JSX.Element;
 export declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
 export declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
 export declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
@@ -35,6 +38,9 @@ export declare const markdownComponents: {
   h1: typeof MarkdownH1;
   h2: typeof MarkdownH2;
   h3: typeof MarkdownH3;
+  h4: typeof MarkdownH4;
+  h5: typeof MarkdownH5;
+  h6: typeof MarkdownH6;
   p: typeof MarkdownP;
   ul: typeof MarkdownUl;
   ol: typeof MarkdownOl;

package/dist/ui/markdown-elements.js

@@ -74,6 +74,33 @@ function MarkdownH3({ className, node: _node, ...props }) {
 		...props
 	});
 }
+function MarkdownH4({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h4", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h4",
+		className,
+		...props
+	});
+}
+function MarkdownH5({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h5", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h5",
+		className,
+		...props
+	});
+}
+function MarkdownH6({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h6", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h6",
+		className,
+		...props
+	});
+}
 function MarkdownP({ className, node: _node, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-control-ui": "markdown",
@@ -197,6 +224,9 @@ const markdownComponents = {
 	h1: MarkdownH1,
 	h2: MarkdownH2,
 	h3: MarkdownH3,
+	h4: MarkdownH4,
+	h5: MarkdownH5,
+	h6: MarkdownH6,
 	p: MarkdownP,
 	ul: MarkdownUl,
 	ol: MarkdownOl,
@@ -211,4 +241,4 @@ const markdownComponents = {
 	td: MarkdownTd
 };
 //#endregion
-export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };
+export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };

package/dist/ui/menubar.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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,7 +43,6 @@ function MenubarContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		side: "bottom",
 		align: "start",
 		sideOffset: 6,
 		className: "z-(--z-popup)",
@@ -111,6 +110,7 @@ function MenubarShortcut({ className, ...props }) {
 		"data-slot": "shortcut",
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
+		"aria-hidden": "true",
 		className: cn(className),
 		...props
 	});
@@ -133,6 +133,7 @@ function MenubarSubTrigger({ className, inset = false, children, ...props }) {
 			"data-popup-kind": "menubar",
 			"data-control-family": "popup",
 			"data-slot": "sub-trigger-indicator",
+			"data-icon-dir": "inline",
 			"aria-hidden": "true",
 			children: "›"
 		})]
@@ -143,7 +144,6 @@ function MenubarSubContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		side: "right",
 		align: "start",
 		sideOffset: -4,
 		alignOffset: -5,