@ctrl-ui/react 0.8.12 → 0.8.14

package/dist/hooks/use-color-area.js

@@ -23,8 +23,6 @@ function useColorArea(onChange, targetRef) {
 		function onEnd() {
 			setDragging(false);
 		}
-		const previousSelect = document.body.style.userSelect;
-		document.body.style.userSelect = "none";
 		window.addEventListener("pointermove", onMove);
 		window.addEventListener("pointerup", onEnd);
 		window.addEventListener("pointercancel", onEnd);
@@ -32,7 +30,6 @@ function useColorArea(onChange, targetRef) {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onEnd);
 			window.removeEventListener("pointercancel", onEnd);
-			document.body.style.userSelect = previousSelect;
 		};
 	}, [dragging, areaRef]);
 	function onPointerDown(event) {

package/dist/lib/code-tokens.js

@@ -145,7 +145,10 @@ async function highlightToTokens(code, language) {
 	const key = `${lang}\n${code}`;
 	const cached = cacheGet(key);
 	if (cached !== void 0) return cached;
-	const { tokens } = (await getHighlighter()).codeToTokens(code, {
+	const highlighter = await getHighlighter();
+	const shared = cacheGet(key);
+	if (shared !== void 0) return shared;
+	const { tokens } = highlighter.codeToTokens(code, {
 		lang,
 		theme: CODE_THEME_NAME
 	});

package/dist/lib/popup-item-focus.d.ts

@@ -0,0 +1,7 @@
+import { PointerEvent } from "react";
+import { BaseUIEvent } from "@base-ui/react/types";
+//#region src/lib/popup-item-focus.d.ts
+export declare const popupItemFocusProps: {
+  onPointerLeave(event: BaseUIEvent<PointerEvent<HTMLElement>>): void;
+};
+//#endregion

package/dist/lib/popup-item-focus.js

@@ -0,0 +1,9 @@
+//#region src/lib/popup-item-focus.ts
+const popupItemFocusProps = { onPointerLeave(event) {
+	if (event.pointerType === "touch" || !(event.relatedTarget instanceof Element)) return;
+	const nextItem = event.relatedTarget.closest("[role=\"option\"], [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]");
+	const list = event.currentTarget.closest("[role=\"listbox\"], [role=\"menu\"]");
+	if (nextItem && list && nextItem.closest("[role=\"listbox\"], [role=\"menu\"]") === list) event.preventBaseUIHandler();
+} };
+//#endregion
+export { popupItemFocusProps };

package/dist/styles/code.css

@@ -13,7 +13,7 @@
   --code-token-comment: oklch(0.48 0.015 285);
   --code-token-keyword: oklch(0.53 0.2 18);
   --code-token-parameter: oklch(0.52 0.09 55);
-  --code-token-function: oklch(0.54 0.17 300);
+  --code-token-function: oklch(0.53 0.17 300);
   --code-token-punctuation: oklch(0.5 0.02 285);
   --code-token-link: oklch(0.5 0.15 250);
 

package/dist/styles/recipes/button.css

@@ -115,14 +115,15 @@
     padding-inline: 0;
   }
 
-  :where([data-control-family="button"][data-layout="stacked"]) {
+  :where([data-control-family="button"][data-layout="tile"]) {
+    --cui-button-radius: var(--nest-radius, min(var(--radius-control), var(--radius-field)));
     flex-direction: column;
     block-size: auto;
     padding-block: calc(var(--spacing) * 1.5);
     padding-inline: var(--cui-button-padding-inline);
   }
 
-  :where([data-control-family="button"][data-layout="stacked"] > [data-slot="content"]) {
+  :where([data-control-family="button"][data-layout="tile"] > [data-slot="content"]) {
     flex-direction: column;
   }
 

package/dist/styles/recipes/popup-controls.css

@@ -81,6 +81,17 @@
     padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
   }
 
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="body"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="body"]) {
+    gap: calc(var(--spacing) * 4);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="body"]:not(:has(~ [data-slot="footer"]))),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="body"]:not(:has(~ [data-slot="footer"]))) {
+    padding-block-end: calc(var(--spacing) * 4);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="footer"]),
   :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="footer"]) {
     gap: calc(var(--spacing) * 2);

package/dist/styles/recipes/popup-motion.css

@@ -1,3 +1,9 @@
+@property --_popover-viewport-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport"]) {
     block-size: var(--_popover-viewport-height, auto);

package/dist/styles/recipes/resizable.css

@@ -37,32 +37,6 @@
     cursor: row-resize;
   }
 
-  /* biome-ignore-start lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="vertical"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: col-resize !important;
-  }
-
-  :where(
-    :root:has(
-        [data-control-family="resizable"][data-slot="handle"][data-axis="horizontal"]:not([data-cursor="none"]):is(
-            [data-separator="hover"],
-            [data-separator="active"]
-          )
-      )
-      *
-  ) {
-    cursor: row-resize !important;
-  }
-  /* biome-ignore-end lint/complexity/noImportantStyles: Resize drag cursor must beat every cursor under the pointer. */
-
   :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
     background-color: var(--border);
   }

package/dist/styles/recipes/scroll-area.css

@@ -170,7 +170,7 @@
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
   :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]),
-  :where([data-control-family="scroll-area"][data-slot="root"]:has(> [data-scroll-area-viewport]:focus-visible) > [data-slot="scrollbar"]) {
+  :where([data-control-family="scroll-area"][data-slot="root"] > [data-scroll-area-viewport]:focus-visible ~ [data-slot="scrollbar"]) {
     opacity: 1;
   }
 

package/dist/styles/recipes/sidebar-menu.css

@@ -58,8 +58,7 @@
   }
 
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]
       ~ [data-slot="menu-action"]
   ) {
     color: var(--cui-sidebar-menu-button-track-active-foreground);
@@ -134,21 +133,36 @@
   }
 
   :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="slide"]:is(:hover, :active, [data-active], [data-popup-open])
   ) {
     background-color: transparent;
   }
 
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:is([data-indicator="slide"], [data-indicator="hover"])[data-active]) {
+    color: var(--cui-sidebar-menu-button-track-active-foreground);
+  }
+
   :where(
-    [data-control-family="sidebar"]:is([data-indicator="slide"], [data-indicator="hover"])
-      [data-control-family="sidebar"][data-slot="menu-button"][data-active]
+    [data-control-family="sidebar"][data-slot="menu-button"][data-indicator="hover"]:focus-visible:not(
+      [data-active],
+      :disabled,
+      [data-disabled],
+      [aria-disabled="true"]
+    )
   ) {
-    color: var(--cui-sidebar-menu-button-track-active-foreground);
+    background-color: var(--cui-sidebar-menu-button-hover-background);
+    color: var(--cui-sidebar-menu-button-hover-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+    :where(
+        [data-control-family="sidebar"][data-slot="menu"][data-indicator="hover"]:has(
+            > [data-slot="menu-item"] > [data-slot="menu-button"]:focus-visible
+          )
+          > [data-slot="menu-item"]
+          > [data-slot="menu-button"][data-indicator="hover"]:hover:not([data-active], :focus-visible)
+      ) {
       background-color: transparent;
       box-shadow: none;
     }

package/dist/styles/recipes/sidebar-parts.css

@@ -1,13 +1,21 @@
 @layer components {
+  :where([data-control-family="sidebar"][data-slot="root"]) {
+    --_sidebar-transition-duration: var(--duration-base);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"]:has(> [data-slot="container"] > div > [data-slot="rail"]:focus-visible)) {
+    --_sidebar-transition-duration: 0s;
+  }
+
   :where([data-control-family="sidebar"][data-slot="container"]) {
     translate: 0;
     transition:
-      width var(--duration-base) var(--ease-standard),
-      translate var(--duration-base) var(--ease-standard);
+      width var(--_sidebar-transition-duration) var(--ease-standard),
+      translate var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
-    transition: padding var(--duration-base) var(--ease-standard);
+    transition: padding var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="left"]:dir(ltr) [data-slot="container"]),
@@ -23,10 +31,6 @@
   :where(
     [data-control-family="sidebar"][data-slot="wrapper"][data-resizing]
       [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
-  ),
-  :where(
-    [data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-slot="rail"]:focus-visible)
-      [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
   ) {
     transition: none;
   }

package/dist/styles/recipes/sidebar.css

@@ -96,7 +96,7 @@
 
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
-    transition: width var(--duration-base) var(--ease-standard);
+    transition: width var(--_sidebar-transition-duration) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {

package/dist/styles/recipes/tabs-motion.css

@@ -42,58 +42,68 @@
       translate: 0 100%;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"]:has(> [data-slot="panel"][data-starting-style])
-          > [data-slot="panel"][inert][data-ending-style]
-      ) {
-      translate: 0 0;
-      transition: none;
-    }
-
     :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][data-starting-style]) {
       transition: none;
     }
 
-    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][data-slide="panel"]) {
       transition: none;
     }
 
-    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][inert]) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][inert]) {
       translate: 0 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="right"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="right"]) {
       translate: 100% 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="left"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="left"]) {
       translate: -100% 0;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="down"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="down"]) {
       translate: 0 100%;
     }
 
-    :where(
-        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
-          > [data-slot="panel"]:not([inert])[data-activation-direction="up"]
-      ) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting]:not([inert])[data-activation-direction="up"]) {
       translate: 0 -100%;
     }
 
     @supports (height: calc-size(auto, size)) {
-      :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]:not([inert])) {
-        height: var(--aui-slide-prev-height, calc-size(auto, size));
+      :where([data-control-family="tabs"][data-slot="panel"][data-slide-starting][data-slide="panel"]:not([inert])) {
+        height: var(--_tabs-prev-height);
       }
     }
   }
 }
+
+@property --_tabs-prev-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_tabs-panel-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}

package/dist/styles/recipes/tabs.css

@@ -93,6 +93,10 @@
     font-weight: var(--font-weight-medium);
   }
 
+  :where([data-control-family="tabs"][data-slot="list"]:not([data-orientation="vertical"], [data-variant="browser"]) [data-slot="tab"]) {
+    flex-grow: 1;
+  }
+
   @media (hover: hover) {
     :where([data-control-family="tabs"][data-slot="tab"]:hover:not([data-disabled])) {
       color: var(--cui-tabs-hover-foreground);
@@ -179,6 +183,7 @@
   }
 
   :where([data-control-family="tabs"][data-slot="panel"]) {
+    min-height: 0;
     outline-style: none;
   }
 

package/dist/styles/theme.css

@@ -832,3 +832,34 @@
     }
   }
 }
+
+/* Measured panel and list dimensions are consumed locally. */
+@property --collapsible-panel-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --collapsible-panel-width {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --accordion-panel-height {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --accordion-panel-width {
+  syntax: "<length> | auto";
+  inherits: false;
+  initial-value: auto;
+}
+
+@property --cmdk-list-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}

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

@@ -23,6 +23,9 @@ export declare function AlertDialogContent({ className, children, ...props }: Al
 export declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function AlertDialogBody({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/alert-dialog.js

@@ -68,6 +68,16 @@ function AlertDialogHeader({ className, ...props }) {
 		...props
 	});
 }
+function AlertDialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "body",
+		className: cn("grid", className),
+		...props
+	});
+}
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "alert-dialog",
@@ -99,4 +109,4 @@ function AlertDialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogBody, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/button.d.ts

@@ -9,7 +9,7 @@ export type ButtonTone = ControlTone;
 export declare const ButtonTrackContext: import("react").Context<boolean>;
 export declare const buttonShapes: readonly ["default", "circle"];
 export type ButtonShape = (typeof buttonShapes)[number];
-export declare const buttonLayouts: readonly ["inline", "stacked"];
+export declare const buttonLayouts: readonly ["inline", "tile"];
 export type ButtonLayout = (typeof buttonLayouts)[number];
 export type ButtonAppearanceProps = {
   variant?: ButtonVariant;

package/dist/ui/button.js

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
-const buttonLayouts = ["inline", "stacked"];
+const buttonLayouts = ["inline", "tile"];
 const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";

package/dist/ui/context-menu.d.ts

@@ -75,7 +75,7 @@ export declare function ContextMenuContent({ className, children, ...props }: Co
 export declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
 export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
-export declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+export declare function ContextMenuRadioItem({ className, children, value, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
 export declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
 export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
 export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;

package/dist/ui/context-menu.js

@@ -3,7 +3,9 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/ui/context-menu.tsx
 const popupClasses = "min-w-[10rem]";
@@ -63,7 +65,7 @@ function ContextMenuItem({ className, inset = false, ...props }) {
 		"data-popup-part": "item",
 		"data-inset": inset || void 0,
 		className: cn(itemClasses, className),
-		...props
+		...mergeProps(popupItemFocusProps, props)
 	});
 }
 function ContextMenuCheckboxItem({ className, children, ...props }) {
@@ -74,7 +76,7 @@ function ContextMenuCheckboxItem({ className, children, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(itemClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
@@ -103,15 +105,16 @@ function ContextMenuRadioGroup({ className, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItem({ className, children, ...props }) {
+function ContextMenuRadioItem({ className, children, value, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		value,
 		"data-control-ui": "context-menu",
 		"data-popup-kind": "context-menu",
 		"data-slot": "radio-item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(itemClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", {

package/dist/ui/dialog.d.ts

@@ -27,6 +27,9 @@ export declare function DialogContent({ className, children, showCloseButton, cl
 export declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function DialogBody({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function DialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/dialog.js

@@ -73,6 +73,16 @@ function DialogHeader({ className, ...props }) {
 		...props
 	});
 }
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "dialog",
+		"data-slot": "body",
+		className: cn("grid", className),
+		...props
+	});
+}
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "dialog",
@@ -104,4 +114,4 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/ui/dropdown-menu.d.ts

@@ -44,7 +44,7 @@ export declare function DropdownMenuPortal(props: Menu.Portal.Props): import("re
 export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
 export declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
-export declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, value, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
 export declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
 export declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -3,7 +3,9 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
@@ -62,7 +64,7 @@ function DropdownMenuItem({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		className: cn(popupItemStructureClasses, className),
-		...props
+		...mergeProps(popupItemFocusProps, props)
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
@@ -103,7 +105,7 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
 		"data-popup-part": "item",
 		"data-slot": "checkbox-item",
 		className: cn("relative", popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
@@ -118,14 +120,15 @@ function DropdownMenuRadioGroup(props) {
 		...props
 	});
 }
-function DropdownMenuRadioItem({ className, children, ...props }) {
+function DropdownMenuRadioItem({ className, children, value, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		value,
 		"data-control-ui": "dropdown-menu",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
 		"data-slot": "radio-item",
 		className: cn("relative", popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
 			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})

package/dist/ui/item.js

@@ -38,7 +38,7 @@ function Item({ variant = "default", render, className, children, ...props }) {
 			"data-control-family": "item",
 			"data-slot": "root",
 			"data-variant": variant,
-			className: cn("flex items-center [&[href]]:cursor-pointer", className),
+			className: cn("flex flex-wrap items-center [&[href]]:cursor-pointer", className),
 			children
 		}
 	});

package/dist/ui/resizable.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createContext, useContext, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel, Separator } from "react-resizable-panels";
 //#region src/ui/resizable.tsx
@@ -13,6 +13,32 @@ const FLOATING_ARROW_DIRECTIONS = {
 	ArrowLeft: -1,
 	ArrowRight: 1
 };
+function useResizeCursor(handleRef, disableCursor) {
+	useEffect(() => {
+		const handle = handleRef.current;
+		if (!handle || disableCursor) return;
+		const ownerDocument = handle.ownerDocument;
+		const cursorStyle = ownerDocument.createElement("style");
+		function updateCursor() {
+			const state = handle?.getAttribute("data-separator");
+			if (state === "hover" || state === "active") {
+				const cursor = handle?.getAttribute("data-axis") === "vertical" ? "col-resize" : "row-resize";
+				cursorStyle.textContent = `*, *:hover { cursor: ${cursor} !important; }`;
+				if (!cursorStyle.isConnected) ownerDocument.head.append(cursorStyle);
+			} else cursorStyle.remove();
+		}
+		const observer = new MutationObserver(updateCursor);
+		observer.observe(handle, {
+			attributes: true,
+			attributeFilter: ["data-separator", "data-axis"]
+		});
+		updateCursor();
+		return () => {
+			observer.disconnect();
+			cursorStyle.remove();
+		};
+	}, [handleRef, disableCursor]);
+}
 function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", disableCursor = false, children, ...props }) {
 	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
 		value: {
@@ -44,6 +70,8 @@ function ResizablePanel({ className, ...props }) {
 }
 function ResizableHandle({ className, variant = "solid", withHandle, children, "aria-label": ariaLabel = "Resize panel", ...props }) {
 	const { orientation, disableCursor } = useContext(ResizableGroupContext);
+	const handleRef = useRef(null);
+	useResizeCursor(handleRef, disableCursor);
 	const axis = orientation === "horizontal" ? "vertical" : "horizontal";
 	return /* @__PURE__ */ jsxs(Separator, {
 		"data-control-ui": "resizable",
@@ -55,6 +83,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, "
 		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,
+		elementRef: handleRef,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",
 			"data-control-family": "resizable",
@@ -72,6 +101,8 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 	const [focused, setFocused] = useState(false);
 	const [resizing, setResizing] = useState(false);
 	const panelRef = useRef(null);
+	const handleRef = useRef(null);
+	useResizeCursor(handleRef, false);
 	const resizeRef = useRef(null);
 	const size = controlledSize ?? uncontrolledSize;
 	const growthPerPointerPx = side === "right" ? -1 : 1;
@@ -144,6 +175,7 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 			}),
 			children,
 			/* @__PURE__ */ jsx("div", {
+				ref: handleRef,
 				role: "separator",
 				tabIndex: 0,
 				"aria-label": handleLabel,
@@ -163,6 +195,7 @@ function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultS
 				onPointerMove: updateResize,
 				onPointerUp: endResize,
 				onPointerCancel: endResize,
+				onLostPointerCapture: endResize,
 				onPointerEnter: () => setHovered(true),
 				onPointerLeave: () => setHovered(false),
 				onFocus: () => setFocused(true),

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

@@ -1,4 +1,4 @@
-import { DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
+import { DialogBody, DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
 import { ComponentProps } from "react";
 //#region src/ui/responsive-dialog.d.ts
 export type ResponsiveDialogProps = DialogProps;
@@ -11,6 +11,7 @@ export declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeo
 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, closeLabel, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
 export declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
+export declare function ResponsiveDialogBody(props: ComponentProps<typeof DialogBody>): 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;
 export declare function ResponsiveDialogDescription(props: ComponentProps<typeof DialogDescription>): import("react").JSX.Element;

package/dist/ui/responsive-dialog.js

@@ -3,7 +3,7 @@ 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 { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/responsive-dialog.tsx
@@ -94,6 +94,9 @@ function ResponsiveDialogContent({ className, dialogClassName, drawerClassName,
 function ResponsiveDialogHeader(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
 }
+function ResponsiveDialogBody(props) {
+	return /* @__PURE__ */ jsx(DialogBody, { ...props });
+}
 function ResponsiveDialogFooter(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerFooter, { ...props }) : /* @__PURE__ */ jsx(DialogFooter, { ...props });
 }
@@ -104,4 +107,4 @@ function ResponsiveDialogDescription(props) {
 	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerDescription, { ...props }) : /* @__PURE__ */ jsx(DialogDescription, { ...props });
 }
 //#endregion
-export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };
+export { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/dist/ui/select.js

@@ -5,7 +5,9 @@ import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.tsx
 const selectTriggerVariants = ["surface", "ghost"];
@@ -118,7 +120,7 @@ function SelectItem({ className, children, disabled, ...props }) {
 		"data-popup-part": "item",
 		disabled,
 		className: cn(popupItemStructureClasses, className),
-		...props,
+		...mergeProps(popupItemFocusProps, props),
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
 			"data-control-ui": "select",
 			"data-control-family": "popup",

package/dist/ui/sidebar-menu.js

@@ -66,7 +66,7 @@ const SidebarMenuContext = createContext("none");
 function SidebarMenu({ className, indicator, style, children, ...props }) {
 	const skin = useSkin();
 	const resolvedIndicator = indicator ?? skin.indicators?.sidebar ?? "none";
-	const hasHighlight = resolvedIndicator !== "none";
+	const hasHighlight = resolvedIndicator === "slide";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
@@ -131,7 +131,8 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 			"data-size": size,
 			"data-variant": variant,
 			"data-active": isActive || void 0,
-			"data-track-item": indicator !== "none" ? "" : void 0,
+			"data-indicator": indicator,
+			"data-track-item": indicator === "slide" ? "" : void 0,
 			className: cn("peer/menu-button flex items-center overflow-hidden text-start disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
 			children
 		}

package/dist/ui/tabs.js

@@ -18,6 +18,9 @@ function refreshTabsPanelHeight(panel) {
 	if (panel.node.inert || panel.node.hidden) return;
 	panel.height = panel.node.getBoundingClientRect().height;
 }
+function setTabsPanelsStarting(panels, starting) {
+	for (const panel of panels) panel.toggleAttribute("data-slide-starting", starting);
+}
 const TabsPanelsContext = createContext(null);
 function useTabsPanels() {
 	const context = useContext(TabsPanelsContext);
@@ -31,17 +34,20 @@ function setRef(ref, value) {
 function Tabs({ className, onValueChange, children, ...props }) {
 	const rootRef = useRef(null);
 	const activePanelRef = useRef(null);
+	const startingPanelsRef = useRef([]);
+	const previousHeightRef = useRef(null);
 	const clearPreviousHeightFrame = useRef(0);
 	const [exitingValue, setExitingValue] = useState(null);
 	const [holdPreviousHeight] = useState(() => (height) => {
-		const root = rootRef.current;
-		if (!root) return;
-		root.style.setProperty("--aui-slide-prev-height", height);
+		if (!rootRef.current) return;
+		previousHeightRef.current = height;
 		cancelAnimationFrame(clearPreviousHeightFrame.current);
 		clearPreviousHeightFrame.current = requestAnimationFrame(() => {
 			clearPreviousHeightFrame.current = requestAnimationFrame(() => {
-				root.style.removeProperty("--aui-slide-prev-height");
-				root.removeAttribute("data-slide-starting");
+				previousHeightRef.current = null;
+				activePanelRef.current?.node.style.removeProperty("--_tabs-prev-height");
+				setTabsPanelsStarting(startingPanelsRef.current, false);
+				startingPanelsRef.current = [];
 			});
 		});
 	});
@@ -49,10 +55,14 @@ function Tabs({ className, onValueChange, children, ...props }) {
 	const [registerPanel] = useState(() => (value, node) => {
 		if (!(node && !node.inert && !node.hidden)) return;
 		const previousPanel = activePanelRef.current;
-		const root = rootRef.current;
-		if (root && previousPanel && previousPanel.value !== value) {
-			root.setAttribute("data-slide-starting", "");
-			holdPreviousHeight(root.style.getPropertyValue("--aui-slide-prev-height") || `${previousPanel.height}px`);
+		const switchingPanels = rootRef.current && previousPanel && previousPanel.value !== value;
+		if (switchingPanels) {
+			setTabsPanelsStarting(startingPanelsRef.current, false);
+			startingPanelsRef.current = [previousPanel.node, node];
+			setTabsPanelsStarting(startingPanelsRef.current, true);
+			const previousHeight = previousHeightRef.current || `${previousPanel.height}px`;
+			node.style.setProperty("--_tabs-prev-height", previousHeight);
+			holdPreviousHeight(previousHeight);
 			setExitingValue(previousPanel.value);
 		}
 		activePanelRef.current = {
@@ -60,11 +70,12 @@ function Tabs({ className, onValueChange, children, ...props }) {
 			node,
 			height: node.getBoundingClientRect().height
 		};
-		if (root) {
-			root.style.setProperty("--_tabs-panel-top", `${node.offsetTop}px`);
-			root.style.setProperty("--_tabs-panel-left", `${node.offsetLeft}px`);
-			root.style.setProperty("--_tabs-panel-width", `${node.offsetWidth}px`);
-			root.style.setProperty("--_tabs-panel-height", `${node.offsetHeight}px`);
+		if (switchingPanels) {
+			const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node;
+			previousPanel.node.style.setProperty("--_tabs-panel-top", `${offsetTop}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-left", `${offsetLeft}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-width", `${offsetWidth}px`);
+			previousPanel.node.style.setProperty("--_tabs-panel-height", `${offsetHeight}px`);
 		}
 		return () => {
 			const currentPanel = activePanelRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.12",
+  "version": "0.8.14",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {