@ctrl-ui/react 0.8.13 → 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/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/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

@@ -183,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/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/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/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.13",
+  "version": "0.8.14",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {