@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/dialog.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute, skinAdornment } from "../skin.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;

package/dist/ui/dockable-panel.js

@@ -1,10 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { LiveStatus } from "./live-status.js";
+import { ScrollArea } from "./scroll-area.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
-import { Drawer, DrawerContent } from "./drawer.js";
-import { createContext, use, useRef, useState } from "react";
+import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
+import { clampDockablePanelPosition, dockablePanelSideAt, dockablePanelSideForKey, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
+import { createContext, use, useEffect, useEffectEvent, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/dockable-panel.tsx
 const DockablePanelContext = createContext(null);
@@ -22,24 +24,43 @@ function useControllableState(controlled, defaultValue, onChange) {
 	}
 	return [value, setValue];
 }
-function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, placement: placementProp, defaultPlacement = "right", onPlacementChange, className, style, children, "aria-label": ariaLabel = "Dockable panel", ...props }) {
+function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, placement: placementProp, defaultPlacement = "right", onPlacementChange, finalFocus, className, style, children, "aria-label": ariaLabel = "Dockable panel", ...props }) {
 	const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
 	const [placement, setPlacementState] = useControllableState(placementProp, defaultPlacement, onPlacementChange);
 	const [dragging, setDragging] = useState(false);
 	const [potentialDock, setPotentialDock] = useState(placement);
 	const [dragPosition, setDragPosition] = useState(null);
 	const [dragHeight, setDragHeight] = useState(0);
+	const [announcement, setAnnouncement] = useState("");
 	const isMobile = useIsMobile();
+	const titleId = useId();
 	const panelRef = useRef(null);
 	const potentialDockRef = useRef(placement);
 	const dragRef = useRef(null);
+	const returnFocusRef = useRef(null);
+	const restoreFocusRef = useRef(false);
+	const restoreFocus = useEffectEvent(() => {
+		const target = finalFocus?.current ?? returnFocusRef.current;
+		if (target instanceof HTMLElement && target.isConnected) target.focus();
+	});
+	useEffect(() => {
+		if (open) {
+			returnFocusRef.current = document.activeElement;
+			return;
+		}
+		if (!restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		restoreFocus();
+	}, [open]);
 	function setPlacement(next) {
 		setPlacementState(next);
+		setAnnouncement(`Panel docked ${next}.`);
 	}
 	function togglePlacement() {
 		setPlacement(oppositeDockablePanelSide(placement));
 	}
 	function close() {
+		restoreFocusRef.current = panelRef.current?.contains(document.activeElement) ?? false;
 		setOpen(false);
 	}
 	function finishDrag(event, shouldDock) {
@@ -102,11 +123,11 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 	}
 	const context = {
 		close,
-		dragging,
 		isMobile,
 		placement,
 		setPlacement,
 		togglePlacement,
+		titleId,
 		dragHandleProps: {
 			onPointerDown,
 			onPointerMove,
@@ -128,14 +149,16 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 			children: /* @__PURE__ */ jsx(DrawerContent, {
 				"data-dockable-panel-root": "",
 				"data-placement": placement,
-				padding: "none",
 				variant: "floating",
 				surface: "card",
 				"aria-label": ariaLabel,
 				className: cn("max-h-[min(82vh,42rem)] gap-0 overflow-hidden", className),
 				style,
 				...props,
-				children
+				children: /* @__PURE__ */ jsx(DrawerBody, {
+					padding: "none",
+					children
+				})
 			})
 		})
 	});
@@ -165,15 +188,7 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 				transform: `translate3d(${dragPosition.x}px, ${dragPosition.y}px, 0)`
 			} : style,
 			...props,
-			children: [children, /* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
-				"aria-live": "polite",
-				children: [
-					"Panel docked ",
-					placement,
-					"."
-				]
-			})]
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
 		})]
 	});
 }
@@ -186,23 +201,28 @@ function DockablePanelHeader({ className, ...props }) {
 		...props
 	});
 }
-function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }) {
+function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, dragLabel = "Drag panel", dockHintLabel = "Drag, or use arrow keys to dock", ...props }) {
 	const context = useDockablePanelContext();
+	const hintId = useId();
 	if (context.isMobile) return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "drag-handle",
 		className: cn("flex min-w-0 flex-1 items-center self-stretch", className),
+		...props,
 		children
 	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
+	function dockWithKeyboard(event) {
+		const next = dockablePanelSideForKey(event.key, context.placement);
+		if (!next) return;
+		event.preventDefault();
+		if (!event.repeat) context.setPlacement(next);
+	}
+	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "drag-handle",
-		"aria-label": "Drag panel",
-		"aria-pressed": context.dragging,
-		className: cn("flex min-w-0 flex-1 cursor-grab touch-none items-center self-stretch active:cursor-grabbing", className),
+		className: cn("relative flex min-w-0 flex-1 cursor-grab touch-none items-center self-stretch active:cursor-grabbing", className),
 		onPointerDown: (event) => {
 			onPointerDown?.(event);
 			if (!event.defaultPrevented) context.dragHandleProps.onPointerDown(event);
@@ -220,16 +240,39 @@ function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPo
 			if (!event.defaultPrevented) context.dragHandleProps.onPointerCancel(event);
 		},
 		...props,
-		children
+		children: [
+			children,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-control-ui": "dockable-panel",
+				"data-control-family": "dockable-panel",
+				"data-slot": "drag-button",
+				"aria-label": dragLabel,
+				"aria-labelledby": context.titleId,
+				"aria-describedby": hintId,
+				"aria-keyshortcuts": "ArrowLeft ArrowRight Enter Space",
+				className: "pointer-events-none absolute inset-0",
+				onKeyDown: dockWithKeyboard
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: hintId,
+				hidden: true,
+				children: dockHintLabel
+			})
+		]
 	});
 }
-function DockablePanelTitle({ className, ...props }) {
+function DockablePanelTitle({ className, children, ...props }) {
+	const { titleId } = useDockablePanelContext();
 	return /* @__PURE__ */ jsx("h2", {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "title",
 		className: cn("truncate", className),
-		...props
+		title: typeof children === "string" ? children : void 0,
+		...props,
+		id: titleId,
+		children
 	});
 }
 function DockablePanelActions({ className, ...props }) {
@@ -237,7 +280,7 @@ function DockablePanelActions({ className, ...props }) {
 		"data-control-ui": "dockable-panel",
 		"data-control-family": "dockable-panel",
 		"data-slot": "actions",
-		className: cn("ml-auto flex shrink-0 items-center", className),
+		className: cn("ms-auto flex shrink-0 items-center", className),
 		...props
 	});
 }
@@ -303,13 +346,18 @@ function DockablePanelClose({ className, children, "aria-label": ariaLabel = "Cl
 	});
 }
 function DockablePanelContent({ padding = "default", className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "dockable-panel",
-		"data-control-family": "dockable-panel",
-		"data-slot": "content",
-		"data-padding": padding,
-		className: cn("min-h-0 flex-1 overflow-y-auto", className),
-		...props
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "flex min-h-0 flex-1 flex-col",
+		viewportClassName: "min-h-0 flex-1",
+		lockAxis: "x",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "dockable-panel",
+			"data-control-family": "dockable-panel",
+			"data-slot": "content",
+			"data-padding": padding,
+			className,
+			...props
+		})
 	});
 }
 function DockablePanelDropZone({ side, active, style }) {

package/dist/ui/drawer.d.ts

@@ -4,8 +4,8 @@ import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.d.ts
 export declare const drawerSides: readonly ["bottom", "top", "right", "left"];
 export type DrawerSide = (typeof drawerSides)[number];
-export declare const drawerContentPaddings: readonly ["default", "none"];
-export type DrawerContentPadding = (typeof drawerContentPaddings)[number];
+export declare const drawerBodyPaddings: readonly ["default", "none"];
+export type DrawerBodyPadding = (typeof drawerBodyPaddings)[number];
 export declare const drawerContentSurfaces: readonly ["background", "card"];
 export type DrawerContentSurface = (typeof drawerContentSurfaces)[number];
 export declare const drawerContentVariants: readonly ["edge", "floating"];
@@ -19,9 +19,8 @@ export declare function DrawerTrigger({ className, ...props }: ComponentProps<ty
 export declare function DrawerClose({ className, ...props }: ComponentProps<typeof Drawer$1.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-export declare function DrawerContent({ className, children, side, padding, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
+export declare function DrawerContent({ className, children, side, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
   side?: DrawerSide;
-  padding?: DrawerContentPadding;
   surface?: DrawerContentSurface;
   variant?: DrawerContentVariant;
   style?: CSSProperties & PopupKnobStyle;
@@ -29,6 +28,10 @@ export declare function DrawerContent({ className, children, side, padding, surf
 export declare function DrawerHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function DrawerBody({ className, padding, ...props }: Omit<ComponentProps<typeof Drawer$1.Content>, "style"> & {
+  padding?: DrawerBodyPadding;
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function DrawerFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/drawer.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.tsx
@@ -11,7 +12,7 @@ const drawerSides = [
 	"right",
 	"left"
 ];
-const drawerContentPaddings = ["default", "none"];
+const drawerBodyPaddings = ["default", "none"];
 const drawerContentSurfaces = ["background", "card"];
 const drawerContentVariants = ["edge", "floating"];
 const swipeFor = {
@@ -58,11 +59,16 @@ const placement = {
 		}
 	}
 };
+const DrawerModalContext = createContext(true);
 function Drawer(props) {
-	const { side = "bottom", swipeDirection, ...rest } = props;
-	return /* @__PURE__ */ jsx(Drawer$1.Root, {
-		swipeDirection: swipeDirection ?? swipeFor[side],
-		...rest
+	const { side = "bottom", swipeDirection, modal = true, ...rest } = props;
+	return /* @__PURE__ */ jsx(DrawerModalContext, {
+		value: modal === true,
+		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
+			swipeDirection: swipeDirection ?? swipeFor[side],
+			modal,
+			...rest
+		})
 	});
 }
 function DrawerTrigger({ className, ...props }) {
@@ -83,11 +89,15 @@ function DrawerClose({ className, ...props }) {
 		...props
 	});
 }
-function DrawerContent({ className, children, side = "bottom", padding = "default", surface = "background", variant = "edge", style, ...props }) {
+function DrawerContent({ className, children, side = "bottom", surface = "background", variant = "edge", style, ...props }) {
 	const skin = useSkin();
+	const modal = useContext(DrawerModalContext);
 	const place = placement[variant][side];
 	const grabbable = side === "bottom" || side === "top";
-	const backdropStyle = style ? { "--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"] } : void 0;
+	const backdropStyle = style ? {
+		"--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"],
+		"--cui-popup-backdrop-blur": style["--cui-popup-backdrop-blur"]
+	} : void 0;
 	return /* @__PURE__ */ jsxs(Drawer$1.Portal, { children: [/* @__PURE__ */ jsx(Drawer$1.Backdrop, {
 		"data-control-ui": "drawer",
 		"data-control-family": "popup",
@@ -96,7 +106,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-slot": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-(--z-overlay)",
+		className: cn("fixed inset-0 z-(--z-overlay)", !modal && "pointer-events-none"),
 		style: backdropStyle
 	}), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
 		"data-control-ui": "drawer",
@@ -107,7 +117,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-variant": variant,
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport),
+		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport, !modal && "pointer-events-none"),
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-control-ui": "drawer",
 			"data-control-family": "popup",
@@ -116,10 +126,9 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 			"data-slot": "content",
 			"data-side": side,
 			"data-surface": "modal",
-			"data-padding": padding,
 			"data-surface-variant": surface,
 			"data-variant": variant,
-			className: cn("flex flex-col", place.popup, className),
+			className: cn("flex flex-col", place.popup, !modal && "pointer-events-auto", className),
 			style,
 			...props,
 			children: [grabbable ? /* @__PURE__ */ jsx("div", {
@@ -128,14 +137,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 				"data-popup-kind": "drawer",
 				"data-slot": "handle",
 				className: "shrink-0"
-			}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
-				"data-control-ui": "drawer",
-				"data-control-family": "popup",
-				"data-popup-kind": "drawer",
-				"data-slot": "scroll",
-				className: "flex min-h-0 flex-1 flex-col overflow-y-auto",
-				children
-			})]
+			}) : null, children]
 		})
 	})] });
 }
@@ -145,7 +147,18 @@ function DrawerHeader({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "drawer",
 		"data-slot": "header",
-		className: cn("flex flex-col", className),
+		className: cn("flex shrink-0 flex-col", className),
+		...props
+	});
+}
+function DrawerBody({ className, padding = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Content, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "body",
+		"data-padding": padding,
+		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
 		...props
 	});
 }
@@ -155,7 +168,7 @@ function DrawerFooter({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "drawer",
 		"data-slot": "footer",
-		className: cn("mt-auto flex flex-col", className),
+		className: cn("mt-auto flex shrink-0 flex-col sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
@@ -180,4 +193,4 @@ function DrawerDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerContentPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerBodyPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };

package/dist/ui/dropdown-menu.js

@@ -30,7 +30,7 @@ function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface
 		children
 	});
 }
-function DropdownMenuContent({ className, children, side = "bottom", sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
+function DropdownMenuContent({ className, children, side, sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skin.id,
@@ -76,7 +76,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 	});
 }
 function DropdownMenuLabel({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "label",
 		"data-control-family": "popup",
@@ -162,6 +162,7 @@ function DropdownMenuSubTrigger({ className, children, ...props }) {
 			"data-control-ui": "dropdown-menu",
 			"data-control-family": "popup",
 			"data-slot": "sub-trigger-indicator",
+			"data-icon-dir": "inline",
 			"aria-hidden": "true",
 			children: "›"
 		})]
@@ -171,7 +172,6 @@ function DropdownMenuSubContent(props) {
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "sub-content",
-		side: "right",
 		sideOffset: 0,
 		alignOffset: -3,
 		...props
@@ -183,6 +183,7 @@ function DropdownMenuShortcut(props) {
 		"data-control-family": "popup",
 		"data-popup-part": "shortcut",
 		"data-slot": "shortcut",
+		"aria-hidden": "true",
 		...props
 	});
 }

package/dist/ui/dropzone.d.ts

@@ -11,6 +11,8 @@ export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChan
   onValueChange?: (value: readonly File[], details: DropzoneValueChangeDetails) => void;
   policy?: DropzonePolicy;
   disabled?: boolean;
+  drag?: boolean;
+  paste?: boolean;
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
   onDrop?: (details: DropzoneDropDetails) => void;
   onError?: (error: Error) => void;
@@ -52,15 +54,15 @@ export type DropzoneRemoveProps = ComponentProps<typeof Button> & {
 };
 export type DropzoneClearProps = ComponentProps<typeof Button>;
 export declare function useDropzoneContext(): DropzoneContextValue;
-export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
+export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
 export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
-export declare function DropzoneTrigger({ className, children, onClick, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
+export declare function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
 export declare function DropzoneOverlay({ scope, className, children, ...props }: DropzoneOverlayProps): import("react").JSX.Element;
 export declare function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneFileListProps): import("react").JSX.Element;
 export declare function DropzoneRejectionList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneRejectionListProps): import("react").JSX.Element;
 export declare function DropzoneStatus({ className, children, role, "aria-live": ariaLive, ...props }: DropzoneStatusProps): import("react").JSX.Element;
-export declare function DropzoneRemove({ file, children, onClick, disabled, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
+export declare function DropzoneRemove({ file, children, onClick, disabled, ref, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
 export declare function DropzoneClear({ children, onClick, disabled, ...props }: DropzoneClearProps): import("react").JSX.Element;
 //#endregion
 export { type DropzoneAccept, type DropzoneDropDetails, DropzoneErrorCode, type DropzoneErrorCodeValue, type DropzoneEvent, type DropzoneFileError, type DropzoneFileRejection, type DropzoneGetFilesFromEvent, type DropzonePolicy, type DropzoneSelectionMode, type DropzoneValidator, type DropzoneValidatorResult, type DropzoneValueChangeDetails, type DropzoneValueChangeReason, type DropzoneVisualState, type UseDropzoneOptions, type UseDropzoneReturn, formatDropzoneFileSize, useDropzone };