@reopt-ai/opt-ui-primitives 1.5.1 → 1.5.2

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId as useId$1, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import React, { cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId as useId$1, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, hide, offset, shift, size, useDismiss, useFloating as useFloating$1 } from "@floating-ui/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/hooks/use-controllable-state.ts
@@ -152,6 +152,32 @@ function removeGlobalListeners() {
 		document.removeEventListener("touchstart", handlePointerDown, true);
 	}
 }
+/**
+* Subscribe to the shared modality tracking and read it on demand.
+*
+* Returns a stable predicate answering "should this focus show as visible?".
+* Widgets that must react ONLY to keyboard focus (a tooltip must not pop open
+* because the user clicked its trigger) gate their focus handler on it — the
+* `visibleOnly` behavior.
+*
+* The browser's own `:focus-visible` is the authority whenever the element and
+* the engine support it: it knows about text inputs (which show a ring even
+* after a click), programmatic focus, and platform conventions the modality
+* heuristic cannot infer. The document-level heuristic is the fallback for
+* engines and test environments where matching `:focus-visible` throws.
+*/
+function useKeyboardModality() {
+	useEffect(() => {
+		addGlobalListeners();
+		return removeGlobalListeners;
+	}, []);
+	return useCallback((element) => {
+		if (element) try {
+			if (element.matches(":focus-visible")) return true;
+		} catch (_unused) {}
+		return hadKeyboardEvent;
+	}, []);
+}
 /** Returns `focusVisibleProps` to spread on a focusable element. */
 function useFocusVisible() {
 	useEffect(() => {
@@ -168,6 +194,89 @@ function useFocusVisible() {
 	} };
 }
 //#endregion
+//#region src/hooks/use-item-registry.ts
+const DOCUMENT_POSITION_FOLLOWING = 4;
+function resolveElement(entry) {
+	if (entry.element) return entry.element;
+	if (typeof document === "undefined") return null;
+	return document.getElementById(entry.id);
+}
+/** Insert `entry` at its document position instead of appending it. */
+function insertByDomOrder(list, entry) {
+	const element = resolveElement(entry);
+	const lastElement = list.length > 0 ? resolveElement(list[list.length - 1]) : null;
+	if (!element || !lastElement || lastElement.compareDocumentPosition(element) & DOCUMENT_POSITION_FOLLOWING) {
+		list.push(entry);
+		return;
+	}
+	for (let i = 0; i < list.length; i += 1) {
+		const other = resolveElement(list[i]);
+		if (other && element.compareDocumentPosition(other) & DOCUMENT_POSITION_FOLLOWING) {
+			list.splice(i, 0, entry);
+			return;
+		}
+	}
+	list.push(entry);
+}
+/** Id of the first item that is not disabled. */
+function firstEnabledId(items) {
+	var _items$find$id, _items$find;
+	return (_items$find$id = (_items$find = items.find((item) => !item.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
+}
+/** Id of the last item that is not disabled. */
+function lastEnabledId(items) {
+	for (let i = items.length - 1; i >= 0; i -= 1) if (!items[i].disabled) return items[i].id;
+	return null;
+}
+/**
+* Id `delta` enabled items away from `activeId` (disabled skipped).
+*
+* Clamps at the ends by default — the listbox/menu behavior. Pass
+* `{ wrap: true }` for the WAI-ARIA tabs behavior, where the arrow keys cycle.
+* With no active item, a forward move lands on the first enabled item and a
+* backward move on the last.
+*/
+function moveActiveId(items, activeId, delta, options) {
+	const enabled = items.filter((item) => !item.disabled);
+	if (enabled.length === 0) return null;
+	const index = enabled.findIndex((item) => item.id === activeId);
+	if (index < 0) {
+		if (options === null || options === void 0 ? void 0 : options.wrap) return enabled[0].id;
+		return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
+	}
+	const count = enabled.length;
+	return enabled[(options === null || options === void 0 ? void 0 : options.wrap) ? ((index + delta) % count + count) % count : Math.min(count - 1, Math.max(0, index + delta))].id;
+}
+/**
+* Id of the enabled item nearest to `index`: forward first (the item that took
+* the removed slot), then backward. `null` when the list has none left.
+*
+* This is what keeps the navigation POSITION when the active item is removed.
+*/
+function nearestEnabledId(items, index) {
+	for (let i = Math.max(0, index); i < items.length; i += 1) if (!items[i].disabled) return items[i].id;
+	for (let i = Math.min(index, items.length) - 1; i >= 0; i -= 1) if (!items[i].disabled) return items[i].id;
+	return null;
+}
+/** Creates a document-ordered item registry. Stable across renders. */
+function useItemRegistry() {
+	const items = useRef([]);
+	return {
+		items,
+		registerItem: useCallback((entry) => {
+			const list = items.current;
+			const existing = list.findIndex((item) => item.id === entry.id);
+			if (existing >= 0) list.splice(existing, 1);
+			insertByDomOrder(list, entry);
+		}, []),
+		unregisterItem: useCallback((id) => {
+			const index = items.current.findIndex((item) => item.id === id);
+			if (index >= 0) items.current.splice(index, 1);
+			return index;
+		}, [])
+	};
+}
+//#endregion
 //#region src/hooks/use-roving-tabindex.ts
 /**
 * Implements roving tabindex pattern for keyboard navigation.
@@ -179,7 +288,7 @@ function useFocusVisible() {
 */
 function useRovingTabindex(options = {}) {
 	const { orientation = "horizontal", loop = false, rtl = false, columns } = options;
-	const itemsRef = useRef([]);
+	const { items: itemsRef, registerItem: registerEntry, unregisterItem: removeItem } = useItemRegistry();
 	const [activeId, setActiveId] = useState(null);
 	const containerRef = useRef(null);
 	const seededRef = useRef(false);
@@ -187,14 +296,8 @@ function useRovingTabindex(options = {}) {
 		return itemsRef.current.filter((item) => !item.disabled);
 	}, []);
 	const register = useCallback((id, element, disabled) => {
-		const existing = itemsRef.current.findIndex((item) => item.id === id);
-		const activeBecameDisabled = existing >= 0 && id === activeId && !!disabled;
-		if (existing >= 0) itemsRef.current[existing] = {
-			id,
-			element,
-			disabled
-		};
-		else itemsRef.current.push({
+		const activeBecameDisabled = itemsRef.current.findIndex((item) => item.id === id) >= 0 && id === activeId && !!disabled;
+		registerEntry({
 			id,
 			element,
 			disabled
@@ -203,21 +306,28 @@ function useRovingTabindex(options = {}) {
 			seededRef.current = true;
 			setActiveId(id);
 		} else if (activeBecameDisabled) {
-			var _itemsRef$current$fin, _itemsRef$current$fin2;
-			const next = (_itemsRef$current$fin = (_itemsRef$current$fin2 = itemsRef.current.find((item) => !item.disabled)) === null || _itemsRef$current$fin2 === void 0 ? void 0 : _itemsRef$current$fin2.id) !== null && _itemsRef$current$fin !== void 0 ? _itemsRef$current$fin : null;
+			const next = firstEnabledId(itemsRef.current);
 			if (next === null) seededRef.current = false;
 			setActiveId(next);
 		}
-	}, [activeId]);
+	}, [
+		activeId,
+		itemsRef,
+		registerEntry
+	]);
 	const unregister = useCallback((id) => {
-		itemsRef.current = itemsRef.current.filter((item) => item.id !== id);
+		const removedIndex = removeItem(id);
+		if (removedIndex < 0) return;
 		if (activeId === id) {
-			var _getEnabledItems$0$id, _getEnabledItems$;
-			const next = (_getEnabledItems$0$id = (_getEnabledItems$ = getEnabledItems()[0]) === null || _getEnabledItems$ === void 0 ? void 0 : _getEnabledItems$.id) !== null && _getEnabledItems$0$id !== void 0 ? _getEnabledItems$0$id : null;
+			const next = nearestEnabledId(itemsRef.current, removedIndex);
 			if (next === null) seededRef.current = false;
 			setActiveId(next);
 		}
-	}, [activeId, getEnabledItems]);
+	}, [
+		activeId,
+		itemsRef,
+		removeItem
+	]);
 	const moveTo = useCallback((id) => {
 		setActiveId(id);
 		const item = itemsRef.current.find((i) => i.id === id);
@@ -255,12 +365,12 @@ function useRovingTabindex(options = {}) {
 			moveByOffset(rtl ? 1 : -1);
 		} else if (e.key === "Home") {
 			e.preventDefault();
-			const enabled = getEnabledItems();
-			if (enabled.length > 0) moveTo(enabled[0].id);
+			const first = firstEnabledId(itemsRef.current);
+			if (first) moveTo(first);
 		} else if (e.key === "End") {
 			e.preventDefault();
-			const enabled = getEnabledItems();
-			if (enabled.length > 0) moveTo(enabled[enabled.length - 1].id);
+			const last = lastEnabledId(itemsRef.current);
+			if (last) moveTo(last);
 		}
 	}, [
 		orientation,
@@ -417,6 +527,28 @@ function useFloating(options = {}) {
 				Object.assign(elements.floating.style, styles);
 			}
 		}));
+		m.push({
+			name: "optTransformOrigin",
+			fn(state) {
+				var _ref2, _middlewareData$shift, _middlewareData$shift2;
+				const { elements, middlewareData, placement: resolved, rects } = state;
+				const [resolvedSide, resolvedAlign] = resolved.split("-");
+				const isVertical = resolvedSide === "top" || resolvedSide === "bottom";
+				const so = sideOffsetRef.current;
+				const sideOffsetValue = (_ref2 = typeof so === "function" ? so({
+					rects,
+					placement: resolved
+				}) : so) !== null && _ref2 !== void 0 ? _ref2 : 0;
+				const shiftAmount = isVertical ? ((_middlewareData$shift = middlewareData.shift) === null || _middlewareData$shift === void 0 ? void 0 : _middlewareData$shift.x) || 0 : ((_middlewareData$shift2 = middlewareData.shift) === null || _middlewareData$shift2 === void 0 ? void 0 : _middlewareData$shift2.y) || 0;
+				let crossOrigin;
+				if (!resolvedAlign) crossOrigin = "50%";
+				else if (Math.abs(shiftAmount) <= 1) crossOrigin = resolvedAlign === "start" ? "0%" : "100%";
+				else crossOrigin = isVertical ? `${rects.reference.x + rects.reference.width / 2 - state.x}px` : `${rects.reference.y + rects.reference.height / 2 - state.y}px`;
+				const sideOrigin = resolvedSide === "top" || resolvedSide === "left" ? `calc(100% + ${sideOffsetValue}px)` : `${-sideOffsetValue}px`;
+				elements.floating.style.setProperty("--opt-transform-origin", isVertical ? `${crossOrigin} ${sideOrigin}` : `${sideOrigin} ${crossOrigin}`);
+				return {};
+			}
+		});
 		m.push(hide({ padding: overflowPadding }));
 		return m;
 	}, [
@@ -471,7 +603,8 @@ function useFloating(options = {}) {
 			ref: floating.refs.setFloating,
 			style: _objectSpread2(_objectSpread2({
 				"--opt-available-width": "100vw",
-				"--opt-available-height": "100vh"
+				"--opt-available-height": "100vh",
+				"--opt-transform-origin": "center"
 			}, floating.floatingStyles), isPositioned ? null : { opacity: 0 })
 		}),
 		/**
@@ -541,6 +674,137 @@ function useScrollActiveDescendantIntoView(activeId) {
 	}, [activeId]);
 }
 //#endregion
+//#region src/hooks/use-hidden-until-found.ts
+/**
+* Keeps collapsed content reachable by browser find-in-page.
+*
+* The content stays MOUNTED and toggles `hidden="until-found"` instead of
+* unmounting, so Chromium can match text inside it; when it does, the
+* `beforematch` event fires and `onReveal` opens the owning disclosure so the
+* component state stays consistent with what the browser just revealed.
+*
+* React coerces the `hidden` prop to a boolean attribute, so the "until-found"
+* string has to be written imperatively — hence the ref rather than a prop.
+*
+* Progressive enhancement: browsers without `hidden="until-found"` treat it as
+* plain `hidden`, which is the correct fallback.
+*/
+function useHiddenUntilFound(ref, { enabled, open, onReveal }) {
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || !enabled) return;
+		const handleBeforeMatch = () => onReveal();
+		el.addEventListener("beforematch", handleBeforeMatch);
+		return () => el.removeEventListener("beforematch", handleBeforeMatch);
+	}, [
+		ref,
+		enabled,
+		onReveal
+	]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || !enabled) return;
+		if (open) el.removeAttribute("hidden");
+		else el.setAttribute("hidden", "until-found");
+	}, [
+		ref,
+		enabled,
+		open
+	]);
+}
+//#endregion
+//#region src/internal/merge-props.ts
+const EVENT_HANDLER = /^on[A-Z]/;
+function isSyntheticEvent(value) {
+	return typeof value === "object" && value !== null && "nativeEvent" in value;
+}
+function makePreventable(event) {
+	if (typeof event.preventOptHandler === "function") return;
+	event.optHandlerPrevented = false;
+	event.preventOptHandler = () => {
+		event.optHandlerPrevented = true;
+	};
+}
+function chainHandlers(a, b) {
+	return (...args) => {
+		const event = args[0];
+		if (isSyntheticEvent(event)) {
+			makePreventable(event);
+			a(...args);
+			if (event.optHandlerPrevented) return void 0;
+			return b(...args);
+		}
+		a(...args);
+		return b(...args);
+	};
+}
+/** Merge prop objects left→right with handler/className/style composition. */
+function mergeProps(...parts) {
+	const result = {};
+	for (const part of parts) {
+		if (!part) continue;
+		for (const key in part) {
+			if (!Object.prototype.hasOwnProperty.call(part, key)) continue;
+			const value = part[key];
+			const existing = result[key];
+			if (EVENT_HANDLER.test(key)) {
+				if (typeof value === "function" && typeof existing === "function") result[key] = chainHandlers(existing, value);
+				else if (value === void 0 && typeof existing === "function") continue;
+				else result[key] = value;
+			} else if (key === "className") result[key] = [existing, value].filter(Boolean).join(" ") || void 0;
+			else if (key === "style" && existing && typeof existing === "object" && value && typeof value === "object") result[key] = _objectSpread2(_objectSpread2({}, existing), value);
+			else result[key] = value;
+		}
+	}
+	return result;
+}
+/**
+* Merge multiple refs (callback or object) into one callback ref.
+*
+* Returns a React 19 ref CLEANUP function, so every merged ref is detached at
+* exactly the right time: callback refs that themselves return a cleanup have
+* it invoked (previously the returned cleanup was dropped on the floor, leaking
+* whatever it was meant to release), and the rest are detached by being called
+* with `null` / having their `.current` reset. Cleanups run in reverse
+* attachment order, mirroring React's own teardown order.
+*/
+function mergeRefs(...refs) {
+	return (value) => {
+		const cleanups = [];
+		for (const ref of refs) if (typeof ref === "function") {
+			const cleanup = ref(value);
+			cleanups.push(typeof cleanup === "function" ? cleanup : () => ref(null));
+		} else if (ref != null) {
+			const objectRef = ref;
+			objectRef.current = value;
+			cleanups.push(() => {
+				objectRef.current = null;
+			});
+		}
+		return () => {
+			for (let i = cleanups.length - 1; i >= 0; i -= 1) cleanups[i]();
+		};
+	};
+}
+//#endregion
+//#region src/hooks/use-merged-ref.ts
+/**
+* A STABLE merged ref callback.
+*
+* `mergeRefs` returns a fresh function on every call, and React re-attaches a
+* callback ref whenever its identity changes: it detaches first (nulling every
+* ref in the chain), then attaches again. Building the merged ref inline during
+* render therefore made every render null out the element the animation and
+* measurement code reads — which is how the collapsible content on the explore
+* detail pages stopped opening.
+*
+* Memoizing on the ref identities keeps the callback stable across renders, so
+* the refs are attached exactly once.
+*/
+function useMergedRef(...refs) {
+	return useMemo(() => mergeRefs(...refs), refs);
+}
+//#endregion
 //#region \0@oxc-project+runtime@0.146.0/helpers/esm/objectWithoutPropertiesLoose.js
 function _objectWithoutPropertiesLoose(r, e) {
 	if (null == r) return {};
@@ -615,24 +879,14 @@ function DisclosureContent(_ref2) {
 	const { open, setOpen, contentId, triggerId, animated } = useDisclosureContext();
 	const { ref, mounted, dataAttributes } = useEnterLeave(open, { animated: animated && !hiddenUntilFound });
 	const innerRef = useRef(null);
-	useEffect(() => {
-		if (innerRef.current) ref.current = innerRef.current;
-	}, [ref]);
-	useEffect(() => {
-		const el = innerRef.current;
-		if (!el || !hiddenUntilFound) return;
-		const onBeforeMatch = () => setOpen(true);
-		el.addEventListener("beforematch", onBeforeMatch);
-		return () => el.removeEventListener("beforematch", onBeforeMatch);
-	}, [hiddenUntilFound, setOpen]);
-	useEffect(() => {
-		const el = innerRef.current;
-		if (!el || !hiddenUntilFound) return;
-		if (open) el.removeAttribute("hidden");
-		else el.setAttribute("hidden", "until-found");
-	}, [open, hiddenUntilFound]);
+	const contentRef = useMergedRef(innerRef, ref);
+	useHiddenUntilFound(innerRef, {
+		enabled: hiddenUntilFound,
+		open,
+		onReveal: useCallback(() => setOpen(true), [setOpen])
+	});
 	if (hiddenUntilFound) return /* @__PURE__ */ jsx("div", _objectSpread2({
-		ref: innerRef,
+		ref: contentRef,
 		id: contentId,
 		role: "region",
 		"aria-labelledby": triggerId,
@@ -641,7 +895,7 @@ function DisclosureContent(_ref2) {
 	}, props));
 	if (!mounted) return null;
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
-		ref: innerRef,
+		ref: contentRef,
 		id: contentId,
 		role: "region",
 		"aria-labelledby": triggerId,
@@ -787,12 +1041,7 @@ const DialogPanel = forwardRef((_ref2, forwardedRef) => {
 			lastFocusedRef.current = null;
 		}
 	}, [mounted]);
-	const mergedRef = useCallback((node) => {
-		dialogRef.current = node;
-		enterLeaveRef.current = node;
-		if (typeof forwardedRef === "function") forwardedRef(node);
-		else if (forwardedRef) forwardedRef.current = node;
-	}, [
+	const mergedRef = useMemo(() => mergeRefs(dialogRef, enterLeaveRef, forwardedRef), [
 		dialogRef,
 		enterLeaveRef,
 		forwardedRef
@@ -809,7 +1058,8 @@ const DialogPanel = forwardRef((_ref2, forwardedRef) => {
 	}, [
 		dialogRef,
 		setOpen,
-		dismissOnEscape
+		dismissOnEscape,
+		mounted
 	]);
 	const handleClick = useCallback((e) => {
 		if (dismissOnBackdrop && e.target === e.currentTarget) setOpen(false);
@@ -874,13 +1124,9 @@ const _excluded2$12 = [
 	"onClick"
 ];
 const _excluded3$9 = ["tabId"];
+/** WAI-ARIA tabs wrap at both ends, unlike a listbox/menu (which clamps). */
 function nextEnabledTabId(tabs, currentId, delta) {
-	const enabled = tabs.filter((t) => !t.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((t) => t.id === currentId);
-	if (idx < 0) return enabled[0].id;
-	const n = enabled.length;
-	return enabled[((idx + delta) % n + n) % n].id;
+	return moveActiveId(tabs, currentId, delta, { wrap: true });
 }
 const TabsContext = createContext(null);
 function useTabsContext() {
@@ -892,37 +1138,54 @@ function useTabsContext() {
 function TabsRoot({ children, selectedId: controlledId, defaultSelectedId = "", onSelectedIdChange, setSelectedId: setSelectedIdDeprecated, orientation = "horizontal" }) {
 	const [selectedId, setSelectedId] = useControllableState(defaultSelectedId, controlledId, onSelectedIdChange !== null && onSelectedIdChange !== void 0 ? onSelectedIdChange : setSelectedIdDeprecated);
 	const baseId = useId();
-	const tabs = useRef([]);
-	const registerTab = useCallback((id, disabled) => {
-		const existing = tabs.current.findIndex((t) => t.id === id);
-		if (existing >= 0) tabs.current[existing] = {
-			id,
-			disabled
-		};
-		else tabs.current.push({
-			id,
-			disabled
-		});
-	}, []);
+	const { items: tabs, registerItem, unregisterItem } = useItemRegistry();
+	const selectedIdRef = useRef(selectedId);
+	selectedIdRef.current = selectedId;
+	const isControlled = controlledId !== void 0;
+	const isControlledRef = useRef(isControlled);
+	isControlledRef.current = isControlled;
+	const setSelectedIdRef = useRef(setSelectedId);
+	setSelectedIdRef.current = setSelectedId;
+	const registerTab = useCallback((id, disabled) => registerItem({
+		id,
+		disabled
+	}), [registerItem]);
 	const unregisterTab = useCallback((id) => {
-		tabs.current = tabs.current.filter((t) => t.id !== id);
-	}, []);
+		const removedIndex = unregisterItem(id);
+		if (selectedIdRef.current !== id) return;
+		if (isControlledRef.current) return;
+		const next = nearestEnabledId(tabs.current, removedIndex);
+		if (next) setSelectedIdRef.current(next);
+	}, [tabs, unregisterItem]);
 	useLayoutEffect(() => {
 		if (!selectedId) {
-			const first = tabs.current.find((t) => !t.disabled);
-			if (first) setSelectedId(first.id);
+			const first = firstEnabledId(tabs.current);
+			if (first) setSelectedId(first);
 		}
-	}, [selectedId, setSelectedId]);
+	}, [
+		selectedId,
+		setSelectedId,
+		tabs
+	]);
+	const contextValue = useMemo(() => ({
+		selectedId,
+		setSelectedId,
+		baseId,
+		orientation,
+		registerTab,
+		unregisterTab,
+		tabs
+	}), [
+		selectedId,
+		setSelectedId,
+		baseId,
+		orientation,
+		registerTab,
+		unregisterTab,
+		tabs
+	]);
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
-		value: {
-			selectedId,
-			setSelectedId,
-			baseId,
-			orientation,
-			registerTab,
-			unregisterTab,
-			tabs
-		},
+		value: contextValue,
 		children
 	});
 }
@@ -1084,39 +1347,6 @@ const Radio = forwardRef((_ref2, ref) => {
 });
 Radio.displayName = "Radio";
 //#endregion
-//#region src/internal/merge-props.ts
-const EVENT_HANDLER = /^on[A-Z]/;
-/** Merge prop objects left→right with handler/className/style composition. */
-function mergeProps(...parts) {
-	const result = {};
-	for (const part of parts) {
-		if (!part) continue;
-		for (const key in part) {
-			if (!Object.prototype.hasOwnProperty.call(part, key)) continue;
-			const value = part[key];
-			const existing = result[key];
-			if (EVENT_HANDLER.test(key) && typeof value === "function" && typeof existing === "function") {
-				const a = existing;
-				const b = value;
-				result[key] = (...args) => {
-					a(...args);
-					return b(...args);
-				};
-			} else if (key === "className") result[key] = [existing, value].filter(Boolean).join(" ") || void 0;
-			else if (key === "style" && existing && typeof existing === "object" && value && typeof value === "object") result[key] = _objectSpread2(_objectSpread2({}, existing), value);
-			else result[key] = value;
-		}
-	}
-	return result;
-}
-/** Merge multiple refs (callback or object) into one callback ref. */
-function mergeRefs(...refs) {
-	return (value) => {
-		for (const ref of refs) if (typeof ref === "function") ref(value);
-		else if (ref != null) ref.current = value;
-	};
-}
-//#endregion
 //#region src/internal/overlay-portal.tsx
 /**
 * Conditionally portals overlay content. When `portal` is false, children render
@@ -1142,6 +1372,32 @@ function OverlayPortal({ portal, portalRoot, children }) {
 	});
 }
 //#endregion
+//#region src/internal/render-element.tsx
+/**
+* Renders one part of a primitive: merges prop objects, merges refs, and
+* honors a `render` prop.
+*
+* A plain function, not a hook, so parts can call it after an early return
+* (`if (!mounted) return null`) — which most overlay panels do.
+*
+* Every part used to hand-roll this — an inline `ref={(node) => {...}}` that
+* poked one ref object and then type-checked a floating-ui callback ref, plus
+* an effect copying an element into the enter/leave ref. Eight copies of the
+* same wiring meant a fix (React 19 ref cleanup, say) had to be applied eight
+* times, and only `Composite` ever supported `render`. Routing parts through
+* here fixes all of them at once and makes `render` universal.
+*/
+function renderElement(tag, { render, refs, props }) {
+	const mergedProps = mergeProps(...props !== null && props !== void 0 ? props : []);
+	const mergedRef = mergeRefs(...refs !== null && refs !== void 0 ? refs : []);
+	if (typeof render === "function") return render(_objectSpread2(_objectSpread2({}, mergedProps), {}, { ref: mergedRef }));
+	if (render && isValidElement(render)) {
+		const renderProps = render.props;
+		return cloneElement(render, _objectSpread2(_objectSpread2({}, mergeProps(renderProps, mergedProps)), {}, { ref: mergeRefs(renderProps.ref, mergedRef) }));
+	}
+	return createElement(tag, _objectSpread2(_objectSpread2({}, mergedProps), {}, { ref: mergedRef }));
+}
+//#endregion
 //#region src/primitives/tooltip.tsx
 const _excluded$15 = [
 	"children",
@@ -1152,7 +1408,8 @@ const _excluded2$10 = ["ref", "aria-describedby"];
 const _excluded3$8 = [
 	"children",
 	"onMouseEnter",
-	"onMouseLeave"
+	"onMouseLeave",
+	"render"
 ];
 function mergeAriaDescribedBy(...values) {
 	const ids = values.flatMap((value) => typeof value === "string" ? value.trim().split(/\s+/) : []);
@@ -1162,53 +1419,98 @@ function mergeAriaDescribedBy(...values) {
 const TooltipContext = createContext(null);
 function useTooltipContext() {
 	const ctx = useContext(TooltipContext);
-	if (!ctx) throw new Error("Tooltip components must be used within TooltipProvider");
+	if (!ctx) throw new Error("Tooltip components must be used within TooltipRoot");
 	return ctx;
 }
-/** Renders the `TooltipProvider` component. */
-function TooltipProvider({ children, timeout, showTimeout = 700, hideTimeout = 300, placement = "top", animated = true, portal = false, portalRoot = null }) {
+const TooltipGroupContext = createContext(null);
+/**
+* Groups sibling tooltips so moving between them does not re-pay the show
+* delay — the APG/desktop convention for toolbars and icon rows, where waiting
+* 700ms per button makes the row feel broken.
+*
+* Optional: a `TooltipProvider` outside any group keeps its own delay.
+*/
+function TooltipGroup({ children, skipDelay = 300 }) {
+	const warmUntilRef = useRef(0);
+	const cooldownRef = useRef(void 0);
+	const value = useMemo(() => ({
+		isWarm: () => skipDelay > 0 && Date.now() < warmUntilRef.current,
+		onOpen: () => {
+			clearTimeout(cooldownRef.current);
+			warmUntilRef.current = 0;
+		},
+		onClose: () => {
+			if (skipDelay <= 0) return;
+			warmUntilRef.current = Date.now() + skipDelay;
+			clearTimeout(cooldownRef.current);
+			cooldownRef.current = setTimeout(() => {
+				warmUntilRef.current = 0;
+			}, skipDelay);
+		}
+	}), [skipDelay]);
+	useEffect(() => () => clearTimeout(cooldownRef.current), []);
+	return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Owns ONE tooltip: its open state, delays, placement and portal.
+*
+* Wrap several of these in a {@link TooltipGroup} to share a skip-delay window.
+*/
+function TooltipRoot({ children, timeout, showTimeout = 700, hideTimeout = 300, placement = "top", animated = true, portal = false, portalRoot = null }) {
 	const [open, setOpen] = useState(false);
 	const tooltipId = useId();
 	const showDelay = timeout !== null && timeout !== void 0 ? timeout : showTimeout;
 	const showTimerRef = useRef(void 0);
 	const hideTimerRef = useRef(void 0);
+	const group = useContext(TooltipGroupContext);
+	const isKeyboardModality = useKeyboardModality();
+	const clearTimers = useCallback(() => {
+		clearTimeout(showTimerRef.current);
+		clearTimeout(hideTimerRef.current);
+	}, []);
 	const { getReferenceProps: getFloatRefProps, getFloatingProps } = useFloating({
 		placement,
 		gutter: 8,
-		open
+		open,
+		onOpenChange: useCallback((next) => {
+			if (next) return;
+			clearTimers();
+			setOpen(false);
+		}, [clearTimers]),
+		dismiss: {
+			escapeKey: true,
+			outsidePress: false
+		}
 	});
 	const show = useCallback(() => {
 		clearTimeout(hideTimerRef.current);
-		showTimerRef.current = setTimeout(() => setOpen(true), showDelay);
-	}, [showDelay]);
+		const delay = (group === null || group === void 0 ? void 0 : group.isWarm()) ? 0 : showDelay;
+		showTimerRef.current = setTimeout(() => {
+			group === null || group === void 0 || group.onOpen();
+			setOpen(true);
+		}, delay);
+	}, [showDelay, group]);
 	const hide = useCallback(() => {
 		clearTimeout(showTimerRef.current);
-		hideTimerRef.current = setTimeout(() => setOpen(false), hideTimeout);
-	}, [hideTimeout]);
-	useEffect(() => {
-		return () => {
-			clearTimeout(showTimerRef.current);
-			clearTimeout(hideTimerRef.current);
-		};
-	}, []);
-	useEffect(() => {
-		if (!open) return;
-		const handler = (e) => {
-			if (e.key === "Escape") {
-				clearTimeout(showTimerRef.current);
-				clearTimeout(hideTimerRef.current);
-				setOpen(false);
-			}
-		};
-		document.addEventListener("keydown", handler);
-		return () => document.removeEventListener("keydown", handler);
-	}, [open]);
+		hideTimerRef.current = setTimeout(() => {
+			setOpen((wasOpen) => {
+				if (wasOpen) group === null || group === void 0 || group.onClose();
+				return false;
+			});
+		}, hideTimeout);
+	}, [hideTimeout, group]);
+	useEffect(() => clearTimers, [clearTimers]);
 	const getReferenceProps = useCallback(() => {
 		return _objectSpread2(_objectSpread2({}, getFloatRefProps()), {}, {
 			"aria-describedby": open ? tooltipId : void 0,
 			onMouseEnter: show,
 			onMouseLeave: hide,
-			onFocus: show,
+			onFocus: (event) => {
+				if (isKeyboardModality(event.currentTarget)) show();
+			},
 			onBlur: hide
 		});
 	}, [
@@ -1216,24 +1518,46 @@ function TooltipProvider({ children, timeout, showTimeout = 700, hideTimeout = 3
 		open,
 		tooltipId,
 		show,
-		hide
+		hide,
+		isKeyboardModality
+	]);
+	const contextValue = useMemo(() => ({
+		open,
+		setOpen,
+		tooltipId,
+		show,
+		hide,
+		animated,
+		portal,
+		portalRoot,
+		getReferenceProps,
+		getFloatingProps
+	}), [
+		open,
+		setOpen,
+		tooltipId,
+		show,
+		hide,
+		animated,
+		portal,
+		portalRoot,
+		getReferenceProps,
+		getFloatingProps
 	]);
 	return /* @__PURE__ */ jsx(TooltipContext.Provider, {
-		value: {
-			open,
-			setOpen,
-			tooltipId,
-			show,
-			hide,
-			animated,
-			portal,
-			portalRoot,
-			getReferenceProps,
-			getFloatingProps
-		},
+		value: contextValue,
 		children
 	});
 }
+/**
+* A single tooltip.
+*
+* @deprecated Renamed to {@link TooltipRoot}. Despite the name this component
+* never provided anything to a subtree of tooltips — it IS one tooltip. The
+* delay-sharing provider is {@link TooltipGroup}. Kept as an alias for
+* back-compat; scheduled for removal in the next major.
+*/
+const TooltipProvider = TooltipRoot;
 const TooltipAnchor = forwardRef((_ref, ref) => {
 	let { children, render, "aria-describedby": ariaDescribedBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
 	const { getReferenceProps } = useTooltipContext();
@@ -1256,28 +1580,32 @@ const TooltipAnchor = forwardRef((_ref, ref) => {
 TooltipAnchor.displayName = "TooltipAnchor";
 /** Renders the `Tooltip` component. */
 function Tooltip(_ref3) {
-	let { children, onMouseEnter, onMouseLeave } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
+	let { children, onMouseEnter, onMouseLeave, render } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
 	const { open, tooltipId, show, hide, animated, portal, portalRoot, getFloatingProps } = useTooltipContext();
 	const { mounted, dataAttributes, ref } = useEnterLeave(open, { animated });
 	const floatingProps = getFloatingProps();
+	const panelRef = useMergedRef(ref, floatingProps.ref);
 	if (!mounted) return null;
-	const node = /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
-		ref: (n) => {
-			ref.current = n;
-			if (floatingProps.ref && typeof floatingProps.ref === "function") floatingProps.ref(n);
-		},
-		id: tooltipId,
-		role: "tooltip",
-		style: floatingProps.style,
-		onMouseEnter: (e) => {
-			show();
-			onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
-		},
-		onMouseLeave: (e) => {
-			hide();
-			onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e);
-		}
-	}, dataAttributes), props), {}, { children }));
+	const node = renderElement("div", {
+		render,
+		refs: [panelRef],
+		props: [
+			{
+				id: tooltipId,
+				role: "tooltip",
+				style: floatingProps.style,
+				onMouseEnter: show,
+				onMouseLeave: hide
+			},
+			dataAttributes,
+			{
+				onMouseEnter,
+				onMouseLeave
+			},
+			props,
+			{ children }
+		]
+	});
 	return /* @__PURE__ */ jsx(OverlayPortal, {
 		portal,
 		portalRoot,
@@ -1287,7 +1615,7 @@ function Tooltip(_ref3) {
 //#endregion
 //#region src/primitives/popover.tsx
 const _excluded$14 = ["onClick"];
-const _excluded2$9 = ["children"];
+const _excluded2$9 = ["children", "render"];
 const _excluded3$7 = ["onClick"];
 const PopoverContext = createContext(null);
 function usePopoverContext() {
@@ -1306,20 +1634,33 @@ function PopoverRoot({ children, open: controlledOpen, defaultOpen = false, onOp
 		onOpenChange: setOpen,
 		dismiss: true
 	});
+	const contextValue = useMemo(() => ({
+		open,
+		setOpen,
+		popoverId,
+		manageFocus,
+		animated,
+		portal,
+		portalRoot,
+		getReferenceProps,
+		getFloatingProps,
+		getPositionerStateProps,
+		context
+	}), [
+		open,
+		setOpen,
+		popoverId,
+		manageFocus,
+		animated,
+		portal,
+		portalRoot,
+		getReferenceProps,
+		getFloatingProps,
+		getPositionerStateProps,
+		context
+	]);
 	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
-		value: {
-			open,
-			setOpen,
-			popoverId,
-			manageFocus,
-			animated,
-			portal,
-			portalRoot,
-			getReferenceProps,
-			getFloatingProps,
-			getPositionerStateProps,
-			context
-		},
+		value: contextValue,
 		children
 	});
 }
@@ -1351,21 +1692,28 @@ const PopoverTrigger = forwardRef((_ref, ref) => {
 PopoverTrigger.displayName = "PopoverTrigger";
 /** Renders the `PopoverContent` component. */
 function PopoverContent(_ref2) {
-	let { children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
+	let { children, render } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
 	const { open, popoverId, manageFocus, animated, portal, portalRoot, getFloatingProps, getPositionerStateProps, context } = usePopoverContext();
 	const { ref, mounted, dataAttributes } = useEnterLeave(open, { animated });
 	const floatingProps = getFloatingProps();
+	const panelRef = useMergedRef(ref, floatingProps.ref);
 	if (!mounted) return null;
-	const node = /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-		ref: (n) => {
-			ref.current = n;
-			if (floatingProps.ref && typeof floatingProps.ref === "function") floatingProps.ref(n);
-		},
-		id: popoverId,
-		"data-popover-id": popoverId,
-		tabIndex: -1,
-		style: floatingProps.style
-	}, getPositionerStateProps(open)), dataAttributes), props), {}, { children }));
+	const node = renderElement("div", {
+		render,
+		refs: [panelRef],
+		props: [
+			{
+				id: popoverId,
+				"data-popover-id": popoverId,
+				tabIndex: -1,
+				style: floatingProps.style
+			},
+			getPositionerStateProps(open),
+			dataAttributes,
+			props,
+			{ children }
+		]
+	});
 	return /* @__PURE__ */ jsx(OverlayPortal, {
 		portal,
 		portalRoot,
@@ -1392,144 +1740,245 @@ const PopoverClose = forwardRef((_ref3, ref) => {
 });
 PopoverClose.displayName = "PopoverClose";
 //#endregion
+//#region src/internal/create-store.ts
+/** Creates a {@link Store} seeded with `initial`. */
+function createStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getState: () => state,
+		setState: (partial) => {
+			let changed = false;
+			for (const key in partial) if (!Object.is(state[key], partial[key])) {
+				changed = true;
+				break;
+			}
+			if (!changed) return;
+			state = _objectSpread2(_objectSpread2({}, state), partial);
+			for (const listener of listeners) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/**
+* Subscribe to a slice of a {@link Store}.
+*
+* The selector MUST return a stable value (primitive, or a referentially stable
+* object) — `useSyncExternalStore` re-renders in a loop otherwise.
+*/
+function useStoreSelector(store, selector) {
+	return useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+}
+//#endregion
 //#region src/primitives/select.tsx
 const _excluded$13 = [
 	"onClick",
 	"onKeyDown",
 	"children"
 ];
-const _excluded2$8 = ["children"];
+const _excluded2$8 = ["children", "render"];
 const _excluded3$6 = [
 	"value",
 	"disabled",
 	"onClick",
 	"children"
 ];
-function firstEnabledId$4(items) {
-	var _items$find$id, _items$find;
-	return (_items$find$id = (_items$find = items.find((i) => !i.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
+/** Normalize the raw value (single `string` or multiple `string[]`). */
+function toValues(value) {
+	if (Array.isArray(value)) return value;
+	return value === "" ? [] : [value];
+}
+const SelectStoreContext = createContext(null);
+function useSelectStoreContext() {
+	const ctx = useContext(SelectStoreContext);
+	if (!ctx) throw new Error("Select components must be used within SelectRoot");
+	return ctx;
 }
-function moveActiveId$4(items, activeId, delta) {
-	const enabled = items.filter((i) => !i.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((i) => i.id === activeId);
-	if (idx < 0) return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
-	return enabled[Math.min(enabled.length - 1, Math.max(0, idx + delta))].id;
+/** Subscribe to a slice of select state; re-renders only when it changes. */
+function useSelectSelector(selector) {
+	const { store } = useSelectStoreContext();
+	return useStoreSelector(store, selector);
 }
-const SelectContext = createContext(null);
-function useSelectContext() {
-	const ctx = useContext(SelectContext);
+const SelectFloatingContext = createContext(null);
+function useSelectFloating() {
+	const ctx = useContext(SelectFloatingContext);
 	if (!ctx) throw new Error("Select components must be used within SelectRoot");
 	return ctx;
 }
 /** Renders the `SelectRoot` component. */
-function SelectRoot({ children, value: controlledValue, defaultValue, onValueChange, setValue: setValueDeprecated, multiple = false, name, open: controlledOpen, onOpenChange, setOpen: setOpenDeprecated, animated = true, portal = false, portalRoot = null }) {
+function SelectRoot({ children, value: controlledValue, defaultValue, onValueChange, setValue: setValueDeprecated, multiple = false, readOnly = false, name, open: controlledOpen, onOpenChange, setOpen: setOpenDeprecated, animated = true, portal = false, portalRoot = null }) {
 	var _selectedValues$;
-	const [value, setValue] = useControllableState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : "", controlledValue, onValueChange !== null && onValueChange !== void 0 ? onValueChange : setValueDeprecated);
-	const [open, setOpenState] = useState(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : false);
-	const onOpenChangeCb = onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated;
-	const [activeId, setActiveId] = useState(null);
 	const selectId = useId();
 	const listboxId = `${selectId}-listbox`;
-	const items = useRef([]);
-	useEffect(() => {
-		if (controlledOpen !== void 0) setOpenState(controlledOpen);
-	}, [controlledOpen]);
-	const setOpen = useCallback((v) => {
-		if (controlledOpen === void 0) setOpenState(v);
-		onOpenChangeCb === null || onOpenChangeCb === void 0 || onOpenChangeCb(v);
-		if (!v) setActiveId(null);
-	}, [controlledOpen, onOpenChangeCb]);
-	const selectedValues = useMemo(() => Array.isArray(value) ? value : value === "" ? [] : [value], [value]);
-	const isSelected = useCallback((v) => selectedValues.includes(v), [selectedValues]);
-	const selectValue = useCallback((v) => {
-		if (multiple) {
-			const arr = Array.isArray(value) ? value : value ? [value] : [];
-			setValue(arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]);
-		} else {
-			setValue(v);
-			setOpen(false);
-		}
-	}, [
+	const { items, registerItem, unregisterItem: removeItem } = useItemRegistry();
+	const [store] = useState(() => {
+		var _ref;
+		return createStore({
+			value: (_ref = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref !== void 0 ? _ref : multiple ? [] : "",
+			activeId: null,
+			open: controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : false
+		});
+	});
+	const propsRef = useRef({
+		controlledValue,
+		controlledOpen,
 		multiple,
-		value,
-		setValue,
-		setOpen
-	]);
-	const registerItem = useCallback((entry) => {
-		const list = items.current;
-		const existing = list.findIndex((i) => i.id === entry.id);
-		if (existing >= 0) list[existing] = entry;
-		else list.push(entry);
-	}, []);
+		readOnly,
+		onValueChange: onValueChange !== null && onValueChange !== void 0 ? onValueChange : setValueDeprecated,
+		onOpenChange: onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated
+	});
+	propsRef.current = {
+		controlledValue,
+		controlledOpen,
+		multiple,
+		readOnly,
+		onValueChange: onValueChange !== null && onValueChange !== void 0 ? onValueChange : setValueDeprecated,
+		onOpenChange: onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated
+	};
+	useLayoutEffect(() => {
+		if (controlledValue !== void 0) store.setState({ value: controlledValue });
+	}, [controlledValue, store]);
+	useLayoutEffect(() => {
+		if (controlledOpen !== void 0) store.setState({ open: controlledOpen });
+	}, [controlledOpen, store]);
+	const actions = useMemo(() => {
+		const setValue = (v) => {
+			var _p$onValueChange;
+			const p = propsRef.current;
+			if (p.controlledValue === void 0) store.setState({ value: v });
+			(_p$onValueChange = p.onValueChange) === null || _p$onValueChange === void 0 || _p$onValueChange.call(p, v);
+		};
+		const setOpen = (v) => {
+			var _p$onOpenChange;
+			const p = propsRef.current;
+			if (p.controlledOpen === void 0) store.setState({ open: v });
+			(_p$onOpenChange = p.onOpenChange) === null || _p$onOpenChange === void 0 || _p$onOpenChange.call(p, v);
+			if (!v) store.setState({ activeId: null });
+		};
+		return {
+			setValue,
+			setOpen,
+			setActiveId: (updater) => {
+				const cur = store.getState().activeId;
+				const next = typeof updater === "function" ? updater(cur) : updater;
+				store.setState({ activeId: next });
+			},
+			selectValue: (v) => {
+				const p = propsRef.current;
+				if (p.readOnly) return;
+				if (p.multiple) {
+					const arr = toValues(store.getState().value);
+					setValue(arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]);
+				} else {
+					setValue(v);
+					setOpen(false);
+				}
+			}
+		};
+	}, [store]);
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
-	}, []);
+		const removedIndex = removeItem(id);
+		if (store.getState().activeId !== id) return;
+		store.setState({ activeId: nearestEnabledId(items.current, removedIndex) });
+	}, [
+		items,
+		removeItem,
+		store
+	]);
+	const open = useStoreSelector(store, (state) => state.open);
+	const value = useStoreSelector(store, (state) => state.value);
+	const selectedValues = useMemo(() => toValues(value), [value]);
 	const { getReferenceProps, getFloatingProps } = useFloating({
 		placement: "bottom-start",
 		gutter: 4,
 		sameWidth: true,
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: actions.setOpen,
 		dismiss: {
 			outsidePress: true,
 			escapeKey: false
 		}
 	});
-	return /* @__PURE__ */ jsxs(SelectContext.Provider, {
-		value: {
-			open,
-			setOpen,
-			value,
-			selectedValues,
-			multiple,
-			isSelected,
-			selectValue,
-			activeId,
-			setActiveId,
-			selectId,
-			listboxId,
-			getReferenceProps,
-			getFloatingProps,
-			items,
-			registerItem,
-			unregisterItem,
-			animated,
-			portal,
-			portalRoot
-		},
-		children: [children, name && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsx("input", {
-			type: "hidden",
-			name,
-			value: v
-		}, v)) : /* @__PURE__ */ jsx("input", {
-			type: "hidden",
-			name,
-			value: (_selectedValues$ = selectedValues[0]) !== null && _selectedValues$ !== void 0 ? _selectedValues$ : ""
-		}))]
+	const storeContext = useMemo(() => ({
+		store,
+		actions,
+		multiple,
+		readOnly,
+		selectId,
+		listboxId,
+		items,
+		registerItem,
+		unregisterItem
+	}), [
+		store,
+		actions,
+		multiple,
+		readOnly,
+		selectId,
+		listboxId,
+		registerItem,
+		unregisterItem
+	]);
+	const floatingContext = useMemo(() => ({
+		getReferenceProps,
+		getFloatingProps,
+		animated,
+		portal,
+		portalRoot
+	}), [
+		getReferenceProps,
+		getFloatingProps,
+		animated,
+		portal,
+		portalRoot
+	]);
+	return /* @__PURE__ */ jsx(SelectStoreContext.Provider, {
+		value: storeContext,
+		children: /* @__PURE__ */ jsxs(SelectFloatingContext.Provider, {
+			value: floatingContext,
+			children: [children, name && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: v
+			}, v)) : /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: (_selectedValues$ = selectedValues[0]) !== null && _selectedValues$ !== void 0 ? _selectedValues$ : ""
+			}))]
+		})
 	});
 }
 /** Renders the `SelectLabel` component. */
 function SelectLabel(props) {
-	const { selectId } = useSelectContext();
+	const { selectId } = useSelectStoreContext();
 	return /* @__PURE__ */ jsx("label", _objectSpread2({ htmlFor: selectId }, props));
 }
-const SelectTrigger = forwardRef((_ref, ref) => {
+const SelectTrigger = forwardRef((_ref2, ref) => {
 	var _selectedValues$2;
-	let { onClick, onKeyDown, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
-	const { open, setOpen, selectedValues, multiple, selectValue, selectId, listboxId, getReferenceProps, items, activeId, setActiveId } = useSelectContext();
+	let { onClick, onKeyDown, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded$13);
+	const { actions, multiple, readOnly, selectId, listboxId, items, store } = useSelectStoreContext();
+	const { getReferenceProps } = useSelectFloating();
+	const open = useSelectSelector((state) => state.open);
+	const activeId = useSelectSelector((state) => state.activeId);
+	const value = useSelectSelector((state) => state.value);
+	const selectedValues = useMemo(() => toValues(value), [value]);
 	const refProps = getReferenceProps();
 	const typeahead = useRef({
 		buffer: "",
 		timer: 0
 	});
 	const selectActive = useCallback(() => {
-		const item = items.current.find((i) => i.id === activeId);
-		if (item && !item.disabled) selectValue(item.value);
+		const item = items.current.find((i) => i.id === store.getState().activeId);
+		if (item && !item.disabled) actions.selectValue(item.value);
 	}, [
 		items,
-		activeId,
-		selectValue
+		store,
+		actions
 	]);
 	const runTypeahead = useCallback((char) => {
 		const t = typeahead.current;
@@ -1542,52 +1991,51 @@ const SelectTrigger = forwardRef((_ref, ref) => {
 			var _document$getElementB;
 			return (_document$getElementB = document.getElementById(i.id)) === null || _document$getElementB === void 0 || (_document$getElementB = _document$getElementB.textContent) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.trim().toLowerCase().startsWith(t.buffer);
 		});
-		if (match) setActiveId(match.id);
-	}, [items, setActiveId]);
+		if (match) actions.setActiveId(match.id);
+	}, [items, actions]);
 	const handleClick = useCallback((e) => {
-		setOpen(!open);
+		actions.setOpen(!open);
 		onClick === null || onClick === void 0 || onClick(e);
 	}, [
 		open,
-		setOpen,
+		actions,
 		onClick
 	]);
 	const handleKeyDown = useCallback((e) => {
+		const currentActiveId = store.getState().activeId;
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault();
-				if (!open) setOpen(true);
-				else setActiveId(moveActiveId$4(items.current, activeId, 1));
+				if (!open) actions.setOpen(true);
+				else actions.setActiveId(moveActiveId(items.current, currentActiveId, 1));
 				break;
 			case "ArrowUp":
 				e.preventDefault();
-				if (!open) setOpen(true);
-				else setActiveId(moveActiveId$4(items.current, activeId, -1));
+				if (!open) actions.setOpen(true);
+				else actions.setActiveId(moveActiveId(items.current, currentActiveId, -1));
 				break;
 			case "Home":
 				if (open) {
 					e.preventDefault();
-					setActiveId(firstEnabledId$4(items.current));
+					actions.setActiveId(firstEnabledId(items.current));
 				}
 				break;
 			case "End":
 				if (open) {
-					var _enabled$id, _enabled;
 					e.preventDefault();
-					const enabled = items.current.filter((i) => !i.disabled);
-					setActiveId((_enabled$id = (_enabled = enabled[enabled.length - 1]) === null || _enabled === void 0 ? void 0 : _enabled.id) !== null && _enabled$id !== void 0 ? _enabled$id : null);
+					actions.setActiveId(lastEnabledId(items.current));
 				}
 				break;
 			case "Enter":
 			case " ":
 				e.preventDefault();
 				if (open) selectActive();
-				else setOpen(true);
+				else actions.setOpen(true);
 				break;
 			case "Escape":
 				if (open) {
 					e.preventDefault();
-					setOpen(false);
+					actions.setOpen(false);
 				}
 				break;
 			default: if (open && e.key.length === 1 && e.key !== " " && !e.metaKey && !e.ctrlKey && !e.altKey && !e.nativeEvent.isComposing) runTypeahead(e.key);
@@ -1596,9 +2044,8 @@ const SelectTrigger = forwardRef((_ref, ref) => {
 	}, [
 		open,
 		items,
-		activeId,
-		setActiveId,
-		setOpen,
+		store,
+		actions,
 		selectActive,
 		runTypeahead,
 		onKeyDown
@@ -1616,6 +2063,8 @@ const SelectTrigger = forwardRef((_ref, ref) => {
 		"aria-haspopup": "listbox",
 		"aria-controls": open ? listboxId : void 0,
 		"aria-activedescendant": open ? activeId !== null && activeId !== void 0 ? activeId : void 0 : void 0,
+		"aria-readonly": readOnly || void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		"data-select-trigger": selectId,
 		onClick: handleClick,
 		onKeyDown: handleKeyDown
@@ -1623,38 +2072,50 @@ const SelectTrigger = forwardRef((_ref, ref) => {
 });
 SelectTrigger.displayName = "SelectTrigger";
 /** Renders the `SelectPopover` component. */
-function SelectPopover(_ref2) {
-	let { children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
-	const { open, multiple, selectedValues, listboxId, selectId, getFloatingProps, items, activeId, setActiveId, animated, portal, portalRoot } = useSelectContext();
+function SelectPopover(_ref3) {
+	let { children, render } = _ref3, props = _objectWithoutProperties(_ref3, _excluded2$8);
+	const { actions, multiple, readOnly, selectId, listboxId, items, store } = useSelectStoreContext();
+	const { getFloatingProps, animated, portal, portalRoot } = useSelectFloating();
+	const open = useSelectSelector((state) => state.open);
+	const activeId = useSelectSelector((state) => state.activeId);
 	const { ref, mounted, dataAttributes } = useEnterLeave(open, { animated });
 	const floatingProps = getFloatingProps();
+	const panelRef = useMergedRef(ref, floatingProps.ref);
 	useLayoutEffect(() => {
-		if (mounted) setActiveId((prev) => {
+		if (!mounted) return;
+		actions.setActiveId((prev) => {
 			var _selected$id;
 			if (prev) return prev;
+			const selectedValues = toValues(store.getState().value);
 			const selected = items.current.find((i) => selectedValues.includes(i.value));
-			return (_selected$id = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _selected$id !== void 0 ? _selected$id : firstEnabledId$4(items.current);
+			return (_selected$id = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _selected$id !== void 0 ? _selected$id : firstEnabledId(items.current);
 		});
 	}, [
 		mounted,
 		items,
-		selectedValues,
-		setActiveId
+		store,
+		actions
 	]);
 	useScrollActiveDescendantIntoView(activeId);
 	if (!mounted) return null;
-	const node = /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
-		ref: (n) => {
-			ref.current = n;
-			if (floatingProps.ref && typeof floatingProps.ref === "function") floatingProps.ref(n);
-		},
-		id: listboxId,
-		role: "listbox",
-		"aria-multiselectable": multiple || void 0,
-		"aria-activedescendant": activeId !== null && activeId !== void 0 ? activeId : void 0,
-		"data-select-id": selectId,
-		style: floatingProps.style
-	}, dataAttributes), props), {}, { children }));
+	const node = renderElement("div", {
+		render,
+		refs: [panelRef],
+		props: [
+			{
+				id: listboxId,
+				role: "listbox",
+				"aria-multiselectable": multiple || void 0,
+				"aria-readonly": readOnly || void 0,
+				"aria-activedescendant": activeId !== null && activeId !== void 0 ? activeId : void 0,
+				"data-select-id": selectId,
+				style: floatingProps.style
+			},
+			dataAttributes,
+			props,
+			{ children }
+		]
+	});
 	return /* @__PURE__ */ jsx(OverlayPortal, {
 		portal,
 		portalRoot,
@@ -1662,12 +2123,12 @@ function SelectPopover(_ref2) {
 	});
 }
 /** Renders the `SelectItem` component. */
-function SelectItem(_ref3) {
-	let { value: itemValue, disabled, onClick, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
-	const { isSelected: isValueSelected, selectValue, activeId, setActiveId, registerItem, unregisterItem } = useSelectContext();
+function SelectItem(_ref4) {
+	let { value: itemValue, disabled, onClick, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded3$6);
+	const { actions, registerItem, unregisterItem } = useSelectStoreContext();
 	const itemId = useId();
-	const isSelected = isValueSelected(itemValue);
-	const isActive = activeId === itemId;
+	const isSelected = useSelectSelector((state) => toValues(state.value).includes(itemValue));
+	const isActive = useSelectSelector((state) => state.activeId === itemId);
 	useLayoutEffect(() => {
 		registerItem({
 			id: itemId,
@@ -1683,12 +2144,12 @@ function SelectItem(_ref3) {
 		unregisterItem
 	]);
 	const handleClick = useCallback((e) => {
-		if (!disabled) selectValue(itemValue);
+		if (!disabled) actions.selectValue(itemValue);
 		onClick === null || onClick === void 0 || onClick(e);
 	}, [
 		disabled,
 		itemValue,
-		selectValue,
+		actions,
 		onClick
 	]);
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
@@ -1700,14 +2161,14 @@ function SelectItem(_ref3) {
 		"data-disabled": disabled ? "" : void 0,
 		onClick: handleClick,
 		onMouseEnter: () => {
-			if (!disabled) setActiveId(itemId);
+			if (!disabled) actions.setActiveId(itemId);
 		}
 	}, props), {}, { children: children !== null && children !== void 0 ? children : itemValue }));
 }
 //#endregion
 //#region src/primitives/combobox.tsx
 const _excluded$12 = ["onKeyDown"];
-const _excluded2$7 = ["children"];
+const _excluded2$7 = ["children", "render"];
 const _excluded3$5 = [
 	"value",
 	"disabled",
@@ -1715,36 +2176,6 @@ const _excluded3$5 = [
 	"children"
 ];
 const _excluded4$3 = ["children"];
-function firstEnabledId$3(items) {
-	var _items$find$id, _items$find;
-	return (_items$find$id = (_items$find = items.find((i) => !i.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
-}
-function moveActiveId$3(items, activeId, delta) {
-	const enabled = items.filter((i) => !i.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((i) => i.id === activeId);
-	if (idx < 0) return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
-	return enabled[Math.min(enabled.length - 1, Math.max(0, idx + delta))].id;
-}
-function createComboboxStore(initial) {
-	let state = initial;
-	const listeners = /* @__PURE__ */ new Set();
-	return {
-		getState: () => state,
-		setState: (partial) => {
-			const next = _objectSpread2(_objectSpread2({}, state), partial);
-			if (next.value === state.value && next.searchValue === state.searchValue && next.activeId === state.activeId && next.open === state.open) return;
-			state = next;
-			listeners.forEach((l) => l());
-		},
-		subscribe: (listener) => {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		}
-	};
-}
 const ComboboxStoreContext = createContext(null);
 function useComboboxStoreContext() {
 	const ctx = useContext(ComboboxStoreContext);
@@ -1754,7 +2185,7 @@ function useComboboxStoreContext() {
 /** Subscribe to a slice of combobox state; re-renders only when it changes. */
 function useComboboxSelector(selector) {
 	const { store } = useComboboxStoreContext();
-	return useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+	return useStoreSelector(store, selector);
 }
 const ComboboxFloatingContext = createContext(null);
 function useComboboxFloating() {
@@ -1763,11 +2194,11 @@ function useComboboxFloating() {
 	return ctx;
 }
 /** Renders the `ComboboxRoot` component. */
-function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onValueChange, setValue: setValueDeprecated, open: controlledOpen, onOpenChange, setOpen: setOpenDeprecated, animated = true, portal = false, portalRoot = null }) {
+function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onValueChange, setValue: setValueDeprecated, readOnly = false, open: controlledOpen, onOpenChange, setOpen: setOpenDeprecated, animated = true, portal = false, portalRoot = null }) {
 	const comboboxId = useId();
 	const listboxId = `${comboboxId}-listbox`;
-	const items = useRef([]);
-	const [store] = useState(() => createComboboxStore({
+	const { items, registerItem, unregisterItem: removeItem } = useItemRegistry();
+	const [store] = useState(() => createStore({
 		value: controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue,
 		searchValue: "",
 		activeId: null,
@@ -1785,10 +2216,10 @@ function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onV
 		onValueChange: onValueChange !== null && onValueChange !== void 0 ? onValueChange : setValueDeprecated,
 		onOpenChange: onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated
 	};
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (controlledValue !== void 0) store.setState({ value: controlledValue });
 	}, [controlledValue, store]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (controlledOpen !== void 0) store.setState({ open: controlledOpen });
 	}, [controlledOpen, store]);
 	const actions = useMemo(() => ({
@@ -1812,21 +2243,21 @@ function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onV
 			store.setState({ activeId: next });
 		}
 	}), [store]);
-	const registerItem = useCallback((entry) => {
-		const list = items.current;
-		const existing = list.findIndex((i) => i.id === entry.id);
-		if (existing >= 0) list[existing] = entry;
-		else list.push(entry);
-	}, []);
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
-	}, []);
+		const removedIndex = removeItem(id);
+		if (store.getState().activeId !== id) return;
+		store.setState({ activeId: nearestEnabledId(items.current, removedIndex) });
+	}, [
+		items,
+		removeItem,
+		store
+	]);
 	const { getReferenceProps, getFloatingProps } = useFloating({
 		placement: "bottom-start",
 		gutter: 4,
 		sameWidth: true,
 		lazyFlip: true,
-		open: useSyncExternalStore(store.subscribe, () => store.getState().open, () => store.getState().open),
+		open: useStoreSelector(store, (state) => state.open),
 		onOpenChange: actions.setOpen,
 		dismiss: {
 			outsidePress: true,
@@ -1836,6 +2267,7 @@ function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onV
 	const storeContext = useMemo(() => ({
 		store,
 		actions,
+		readOnly,
 		comboboxId,
 		listboxId,
 		items,
@@ -1844,6 +2276,7 @@ function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onV
 	}), [
 		store,
 		actions,
+		readOnly,
 		comboboxId,
 		listboxId,
 		registerItem,
@@ -1872,7 +2305,7 @@ function ComboboxRoot({ children, value: controlledValue, defaultValue = "", onV
 }
 const ComboboxInput = forwardRef((_ref, ref) => {
 	let { onKeyDown } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
-	const { actions, comboboxId, listboxId, items } = useComboboxStoreContext();
+	const { actions, readOnly, comboboxId, listboxId, items } = useComboboxStoreContext();
 	const { getReferenceProps } = useComboboxFloating();
 	const open = useComboboxSelector((s) => s.open);
 	const searchValue = useComboboxSelector((s) => s.searchValue);
@@ -1885,6 +2318,7 @@ const ComboboxInput = forwardRef((_ref, ref) => {
 		actions.setActiveId(null);
 	}, [actions, open]);
 	const selectActive = useCallback(() => {
+		if (readOnly) return;
 		const item = items.current.find((i) => i.id === activeId);
 		if (item && !item.disabled) {
 			actions.setValue(item.value);
@@ -1894,7 +2328,8 @@ const ComboboxInput = forwardRef((_ref, ref) => {
 	}, [
 		items,
 		activeId,
-		actions
+		actions,
+		readOnly
 	]);
 	const handleKeyDown = useCallback((e) => {
 		if (e.nativeEvent.isComposing) {
@@ -1905,12 +2340,12 @@ const ComboboxInput = forwardRef((_ref, ref) => {
 			case "ArrowDown":
 				e.preventDefault();
 				if (!open) actions.setOpen(true);
-				actions.setActiveId(moveActiveId$3(items.current, activeId, 1));
+				actions.setActiveId(moveActiveId(items.current, activeId, 1));
 				break;
 			case "ArrowUp":
 				e.preventDefault();
 				if (!open) actions.setOpen(true);
-				actions.setActiveId(moveActiveId$3(items.current, activeId, -1));
+				actions.setActiveId(moveActiveId(items.current, activeId, -1));
 				break;
 			case "Enter":
 				if (open && activeId) {
@@ -1945,6 +2380,9 @@ const ComboboxInput = forwardRef((_ref, ref) => {
 		"aria-autocomplete": "list",
 		"aria-controls": open ? listboxId : void 0,
 		"aria-activedescendant": open ? activeId !== null && activeId !== void 0 ? activeId : void 0 : void 0,
+		"aria-readonly": readOnly || void 0,
+		readOnly,
+		"data-readonly": readOnly ? "" : void 0,
 		"data-combobox-input": comboboxId,
 		value: searchValue,
 		onChange: handleChange,
@@ -1954,29 +2392,35 @@ const ComboboxInput = forwardRef((_ref, ref) => {
 ComboboxInput.displayName = "ComboboxInput";
 /** Renders the `ComboboxPopover` component. */
 function ComboboxPopover(_ref2) {
-	let { children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	let { children, render } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
 	const { actions, comboboxId, listboxId, items } = useComboboxStoreContext();
 	const { getFloatingProps, animated, portal, portalRoot } = useComboboxFloating();
 	const { ref, mounted, dataAttributes } = useEnterLeave(useComboboxSelector((s) => s.open), { animated });
 	const floatingProps = getFloatingProps();
+	const panelRef = useMergedRef(ref, floatingProps.ref);
 	useLayoutEffect(() => {
-		if (mounted) actions.setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId$3(items.current));
+		if (mounted) actions.setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId(items.current));
 	}, [
 		mounted,
 		items,
 		actions
 	]);
 	if (!mounted) return null;
-	const node = /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
-		ref: (n) => {
-			ref.current = n;
-			if (floatingProps.ref && typeof floatingProps.ref === "function") floatingProps.ref(n);
-		},
-		id: listboxId,
-		role: "listbox",
-		"data-combobox-id": comboboxId,
-		style: floatingProps.style
-	}, dataAttributes), props), {}, { children }));
+	const node = renderElement("div", {
+		render,
+		refs: [panelRef],
+		props: [
+			{
+				id: listboxId,
+				role: "listbox",
+				"data-combobox-id": comboboxId,
+				style: floatingProps.style
+			},
+			dataAttributes,
+			props,
+			{ children }
+		]
+	});
 	return /* @__PURE__ */ jsx(OverlayPortal, {
 		portal,
 		portalRoot,
@@ -1986,7 +2430,7 @@ function ComboboxPopover(_ref2) {
 /** Renders the `ComboboxItem` component. */
 function ComboboxItem(_ref3) {
 	let { value: itemValue, disabled, onClick, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
-	const { actions, registerItem, unregisterItem } = useComboboxStoreContext();
+	const { actions, readOnly, registerItem, unregisterItem } = useComboboxStoreContext();
 	const itemId = useId();
 	const isSelected = useComboboxSelector((s) => s.value === itemValue);
 	const isActive = useComboboxSelector((s) => s.activeId === itemId);
@@ -2005,7 +2449,7 @@ function ComboboxItem(_ref3) {
 		unregisterItem
 	]);
 	const handleClick = useCallback((e) => {
-		if (!disabled) {
+		if (!disabled && !readOnly) {
 			actions.setValue(itemValue);
 			actions.setSearchValue(itemValue);
 			actions.setOpen(false);
@@ -2013,6 +2457,7 @@ function ComboboxItem(_ref3) {
 		onClick === null || onClick === void 0 || onClick(e);
 	}, [
 		disabled,
+		readOnly,
 		itemValue,
 		actions,
 		onClick
@@ -2284,10 +2729,18 @@ function CommandGroup(_ref5) {
 		children
 	})] }));
 }
-/** Renders the `CommandSeparator` component. */
+/**
+* Renders the `CommandSeparator` component.
+*
+* Rendered with `role="presentation"`: the separator is a child of
+* `CommandList` (`role="listbox"`), whose only permitted children are `option`
+* and `group`. A real `role="separator"` there fails
+* `aria-required-children` and corrupts the option count announced by screen
+* readers. (Menu separators keep `role="separator"` — `menu` permits it.)
+*/
 function CommandSeparator(props) {
 	return /* @__PURE__ */ jsx("div", _objectSpread2({
-		role: "separator",
+		role: "presentation",
 		"data-slot": "command-separator"
 	}, props));
 }
@@ -2370,7 +2823,11 @@ const _excluded2$5 = [
 	"onKeyDown",
 	"role"
 ];
-const _excluded3$3 = ["children", "onKeyDown"];
+const _excluded3$3 = [
+	"children",
+	"onKeyDown",
+	"render"
+];
 const _excluded4$1 = [
 	"disabled",
 	"hideOnClick",
@@ -2391,19 +2848,6 @@ const _excluded6$1 = [
 	"onClick",
 	"children"
 ];
-/** First enabled item id, or null. */
-function firstEnabledId$2(items) {
-	var _items$find$id, _items$find;
-	return (_items$find$id = (_items$find = items.find((i) => !i.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
-}
-/** Move the active id by `delta` over the enabled items (clamped, no wrap). */
-function moveActiveId$2(items, activeId, delta) {
-	const enabled = items.filter((i) => !i.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((i) => i.id === activeId);
-	if (idx < 0) return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
-	return enabled[Math.min(enabled.length - 1, Math.max(0, idx + delta))].id;
-}
 const MenuContext = createContext(null);
 function useMenuContext() {
 	const ctx = useContext(MenuContext);
@@ -2454,20 +2898,19 @@ function MenubarContainer(_ref) {
 }
 /** Renders the `MenuRoot` component. */
 function MenuRoot({ children, open: controlledOpen, onOpenChange, setOpen: setOpenDeprecated, animated = true, portal = false, portalRoot = null }) {
-	const [open, setOpenState] = useState(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : false);
+	const [open, setOpenState] = useControllableState(false, controlledOpen, onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated);
 	const [activeId, setActiveId] = useState(null);
 	const menuId = useId();
 	const triggerId = `${menuId}-trigger`;
-	const items = useRef([]);
-	const onOpenChangeCb = onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setOpenDeprecated;
-	useEffect(() => {
-		if (controlledOpen !== void 0) setOpenState(controlledOpen);
-	}, [controlledOpen]);
+	const { items, registerItem: registerItemEntry, unregisterItem: removeItem } = useItemRegistry();
+	const registerItem = useCallback((id, disabled) => registerItemEntry({
+		id,
+		disabled
+	}), [registerItemEntry]);
 	const setOpen = useCallback((v) => {
-		if (controlledOpen === void 0) setOpenState(v);
-		onOpenChangeCb === null || onOpenChangeCb === void 0 || onOpenChangeCb(v);
+		setOpenState(v);
 		if (!v) setActiveId(null);
-	}, [controlledOpen, onOpenChangeCb]);
+	}, [setOpenState]);
 	const focusTrigger = useCallback(() => {
 		var _document$getElementB;
 		(_document$getElementB = document.getElementById(triggerId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
@@ -2482,39 +2925,45 @@ function MenuRoot({ children, open: controlledOpen, onOpenChange, setOpen: setOp
 			escapeKey: false
 		}
 	});
-	const registerItem = useCallback((id, disabled) => {
-		const list = items.current;
-		const existing = list.findIndex((i) => i.id === id);
-		if (existing >= 0) list[existing] = {
-			id,
-			disabled
-		};
-		else list.push({
-			id,
-			disabled
-		});
-	}, []);
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
-	}, []);
+		const removedIndex = removeItem(id);
+		setActiveId((prev) => prev === id ? nearestEnabledId(items.current, removedIndex) : prev);
+	}, [items, removeItem]);
+	const contextValue = useMemo(() => ({
+		open,
+		setOpen,
+		menuId,
+		triggerId,
+		getReferenceProps,
+		getFloatingProps,
+		activeId,
+		setActiveId,
+		items,
+		registerItem,
+		unregisterItem,
+		focusTrigger,
+		animated,
+		portal,
+		portalRoot
+	}), [
+		open,
+		setOpen,
+		menuId,
+		triggerId,
+		getReferenceProps,
+		getFloatingProps,
+		activeId,
+		setActiveId,
+		items,
+		registerItem,
+		unregisterItem,
+		focusTrigger,
+		animated,
+		portal,
+		portalRoot
+	]);
 	return /* @__PURE__ */ jsx(MenuContext.Provider, {
-		value: {
-			open,
-			setOpen,
-			menuId,
-			triggerId,
-			getReferenceProps,
-			getFloatingProps,
-			activeId,
-			setActiveId,
-			items,
-			registerItem,
-			unregisterItem,
-			focusTrigger,
-			animated,
-			portal,
-			portalRoot
-		},
+		value: contextValue,
 		children
 	});
 }
@@ -2558,11 +3007,12 @@ const MenuTrigger = forwardRef((_ref2, ref) => {
 MenuTrigger.displayName = "MenuTrigger";
 /** Renders the `MenuPopover` component. */
 function MenuPopover(_ref3) {
-	let { children, onKeyDown } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	let { children, onKeyDown, render } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
 	const { open, setOpen, menuId, triggerId, getFloatingProps, items, activeId, setActiveId, focusTrigger, animated, portal, portalRoot } = useMenuContext();
 	const { ref, mounted, dataAttributes } = useEnterLeave(open, { animated });
 	const floatingProps = getFloatingProps();
 	const menuRef = useRef(null);
+	const panelRef = useMergedRef(menuRef, ref, floatingProps.ref);
 	const typeahead = useRef({
 		buffer: "",
 		timer: 0
@@ -2588,23 +3038,20 @@ function MenuPopover(_ref3) {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault();
-				setActiveId(moveActiveId$2(items.current, activeId, 1));
+				setActiveId(moveActiveId(items.current, activeId, 1));
 				break;
 			case "ArrowUp":
 				e.preventDefault();
-				setActiveId(moveActiveId$2(items.current, activeId, -1));
+				setActiveId(moveActiveId(items.current, activeId, -1));
 				break;
 			case "Home":
 				e.preventDefault();
-				setActiveId(firstEnabledId$2(items.current));
+				setActiveId(firstEnabledId(items.current));
 				break;
-			case "End": {
-				var _enabled$id, _enabled;
+			case "End":
 				e.preventDefault();
-				const enabled = items.current.filter((i) => !i.disabled);
-				setActiveId((_enabled$id = (_enabled = enabled[enabled.length - 1]) === null || _enabled === void 0 ? void 0 : _enabled.id) !== null && _enabled$id !== void 0 ? _enabled$id : null);
+				setActiveId(lastEnabledId(items.current));
 				break;
-			}
 			case "Enter":
 			case " ":
 				e.preventDefault();
@@ -2635,7 +3082,7 @@ function MenuPopover(_ref3) {
 		if (mounted) {
 			var _menuRef$current;
 			(_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || _menuRef$current.focus();
-			setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId$2(items.current));
+			setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId(items.current));
 		}
 	}, [
 		mounted,
@@ -2644,21 +3091,25 @@ function MenuPopover(_ref3) {
 	]);
 	useScrollActiveDescendantIntoView(activeId);
 	if (!mounted) return null;
-	const node = /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
-		ref: (n) => {
-			menuRef.current = n;
-			ref.current = n;
-			if (floatingProps.ref && typeof floatingProps.ref === "function") floatingProps.ref(n);
-		},
-		id: menuId,
-		role: "menu",
-		"aria-labelledby": triggerId,
-		"aria-activedescendant": activeId !== null && activeId !== void 0 ? activeId : void 0,
-		"data-menu-id": menuId,
-		style: floatingProps.style,
-		tabIndex: -1,
-		onKeyDown: handleKeyDown
-	}, dataAttributes), props), {}, { children }));
+	const node = renderElement("div", {
+		render,
+		refs: [panelRef],
+		props: [
+			{
+				id: menuId,
+				role: "menu",
+				"aria-labelledby": triggerId,
+				"aria-activedescendant": activeId !== null && activeId !== void 0 ? activeId : void 0,
+				"data-menu-id": menuId,
+				style: floatingProps.style,
+				tabIndex: -1,
+				onKeyDown: handleKeyDown
+			},
+			dataAttributes,
+			props,
+			{ children }
+		]
+	});
 	return /* @__PURE__ */ jsx(OverlayPortal, {
 		portal,
 		portalRoot,
@@ -2777,17 +3228,6 @@ function MenuButtonArrow(props) {
 //#region src/primitives/toolbar.tsx
 const _excluded$9 = ["onKeyDown"];
 const _excluded2$4 = ["disabled", "onFocus"];
-function firstEnabledId$1(items) {
-	var _items$find$id, _items$find;
-	return (_items$find$id = (_items$find = items.find((i) => !i.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
-}
-function moveActiveId$1(items, activeId, delta) {
-	const enabled = items.filter((i) => !i.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((i) => i.id === activeId);
-	if (idx < 0) return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
-	return enabled[Math.min(enabled.length - 1, Math.max(0, idx + delta))].id;
-}
 const ToolbarContext = createContext(null);
 function useToolbarContext() {
 	const ctx = useContext(ToolbarContext);
@@ -2797,29 +3237,31 @@ function useToolbarContext() {
 /** Renders the `ToolbarRoot` component. */
 function ToolbarRoot({ children, orientation = "horizontal" }) {
 	const [activeId, setActiveId] = useState(null);
-	const items = useRef([]);
-	const registerItem = useCallback((entry) => {
-		const list = items.current;
-		const existing = list.findIndex((i) => i.id === entry.id);
-		if (existing >= 0) list[existing] = entry;
-		else list.push(entry);
-	}, []);
+	const { items, registerItem, unregisterItem: removeItem } = useItemRegistry();
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
-		setActiveId((prev) => prev === id ? firstEnabledId$1(items.current) : prev);
-	}, []);
+		const removedIndex = removeItem(id);
+		setActiveId((prev) => prev === id ? nearestEnabledId(items.current, removedIndex) : prev);
+	}, [items, removeItem]);
 	useLayoutEffect(() => {
-		setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId$1(items.current));
+		setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId(items.current));
 	}, [activeId]);
+	const contextValue = useMemo(() => ({
+		orientation,
+		activeId,
+		setActiveId,
+		registerItem,
+		unregisterItem,
+		items
+	}), [
+		orientation,
+		activeId,
+		setActiveId,
+		registerItem,
+		unregisterItem,
+		items
+	]);
 	return /* @__PURE__ */ jsx(ToolbarContext.Provider, {
-		value: {
-			orientation,
-			activeId,
-			setActiveId,
-			registerItem,
-			unregisterItem,
-			items
-		},
+		value: contextValue,
 		children
 	});
 }
@@ -2838,18 +3280,16 @@ function ToolbarContainer(_ref) {
 		let nextId;
 		if (e.key === nextKey) {
 			e.preventDefault();
-			nextId = moveActiveId$1(items.current, activeId, 1);
+			nextId = moveActiveId(items.current, activeId, 1);
 		} else if (e.key === prevKey) {
 			e.preventDefault();
-			nextId = moveActiveId$1(items.current, activeId, -1);
+			nextId = moveActiveId(items.current, activeId, -1);
 		} else if (e.key === "Home") {
 			e.preventDefault();
-			nextId = firstEnabledId$1(items.current);
+			nextId = firstEnabledId(items.current);
 		} else if (e.key === "End") {
-			var _enabled$id, _enabled;
 			e.preventDefault();
-			const enabled = items.current.filter((i) => !i.disabled);
-			nextId = (_enabled$id = (_enabled = enabled[enabled.length - 1]) === null || _enabled === void 0 ? void 0 : _enabled.id) !== null && _enabled$id !== void 0 ? _enabled$id : null;
+			nextId = lastEnabledId(items.current);
 		}
 		if (nextId) {
 			setActiveId(nextId);
@@ -2923,6 +3363,10 @@ const _excluded3$2 = [
 /**
 * From `start`, return the index of the first enabled item walking in `dir`
 * (+1/-1). Honors `loop`. Returns -1 if none.
+*
+* Composite navigates by INDEX (grid rows/columns, wrap and loop modes), which
+* is why it keeps this directional scan instead of the registry's id-based
+* `moveActiveId`.
 */
 function firstEnabledFrom(list, start, dir, loop) {
 	const n = list.length;
@@ -2945,7 +3389,7 @@ function useCompositeContext() {
 /** Renders the `CompositeProvider` component. */
 function CompositeProvider({ children, focusLoop = false, focusWrap = false, orientation = "both", activeId: controlledActiveId, onActiveIdChange, setActiveId: setActiveIdDeprecated }) {
 	const [internalActiveId, setInternalActiveId] = useState(null);
-	const items = useRef([]);
+	const { items, registerItem: registerEntry, unregisterItem: removeItem } = useItemRegistry();
 	const onActiveIdChangeCb = onActiveIdChange !== null && onActiveIdChange !== void 0 ? onActiveIdChange : setActiveIdDeprecated;
 	const activeId = controlledActiveId !== void 0 ? controlledActiveId : internalActiveId;
 	const activeIdRef = useRef(activeId);
@@ -2957,16 +3401,8 @@ function CompositeProvider({ children, focusLoop = false, focusWrap = false, ori
 	}, [controlledActiveId, onActiveIdChangeCb]);
 	const registerItem = useCallback((id, element, row = 0, col = 0, disabled = false) => {
 		const list = items.current;
-		const existing = list.findIndex((i) => i.id === id);
-		const activeBecameDisabled = existing >= 0 && id === activeIdRef.current && disabled;
-		if (existing >= 0) list[existing] = {
-			id,
-			element,
-			row,
-			col,
-			disabled
-		};
-		else list.push({
+		const activeBecameDisabled = list.findIndex((i) => i.id === id) >= 0 && id === activeIdRef.current && disabled;
+		registerEntry({
 			id,
 			element,
 			row,
@@ -2987,29 +3423,48 @@ function CompositeProvider({ children, focusLoop = false, focusWrap = false, ori
 				setInternalActiveId(null);
 			} else setActiveId(nextId);
 		}
-	}, [controlledActiveId, setActiveId]);
+	}, [
+		controlledActiveId,
+		setActiveId,
+		items,
+		registerEntry
+	]);
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
+		const removedIndex = removeItem(id);
+		if (removedIndex < 0) return;
 		if (controlledActiveId === void 0) setInternalActiveId((prev) => {
 			if (prev !== id) return prev;
-			const idx = firstEnabledFrom(items.current, 0, 1, false);
-			const nextId = idx >= 0 ? items.current[idx].id : null;
+			const nextId = nearestEnabledId(items.current, removedIndex);
 			activeIdRef.current = nextId;
 			if (nextId === null) seededRef.current = false;
 			return nextId;
 		});
-	}, [controlledActiveId]);
+	}, [
+		controlledActiveId,
+		items,
+		removeItem
+	]);
+	const contextValue = useMemo(() => ({
+		activeId,
+		setActiveId,
+		registerItem,
+		unregisterItem,
+		items,
+		focusLoop,
+		focusWrap,
+		orientation
+	}), [
+		activeId,
+		setActiveId,
+		registerItem,
+		unregisterItem,
+		items,
+		focusLoop,
+		focusWrap,
+		orientation
+	]);
 	return /* @__PURE__ */ jsx(CompositeContext.Provider, {
-		value: {
-			activeId,
-			setActiveId,
-			registerItem,
-			unregisterItem,
-			items,
-			focusLoop,
-			focusWrap,
-			orientation
-		},
+		value: contextValue,
 		children
 	});
 }
@@ -3176,17 +3631,6 @@ const _excluded2$2 = [
 	"onClick",
 	"onFocus"
 ];
-function firstEnabledId(items) {
-	var _items$find$id, _items$find;
-	return (_items$find$id = (_items$find = items.find((i) => !i.disabled)) === null || _items$find === void 0 ? void 0 : _items$find.id) !== null && _items$find$id !== void 0 ? _items$find$id : null;
-}
-function moveActiveId(items, activeId, delta) {
-	const enabled = items.filter((i) => !i.disabled);
-	if (enabled.length === 0) return null;
-	const idx = enabled.findIndex((i) => i.id === activeId);
-	if (idx < 0) return delta > 0 ? enabled[0].id : enabled[enabled.length - 1].id;
-	return enabled[Math.min(enabled.length - 1, Math.max(0, idx + delta))].id;
-}
 const ToggleGroupContext = createContext(null);
 /**
 * Groups related `Toggle`s with roving-tabindex keyboard navigation and shared
@@ -3214,17 +3658,11 @@ function ToggleGroup(_ref) {
 		setValue
 	]);
 	const [activeId, setActiveId] = useState(null);
-	const items = useRef([]);
-	const registerItem = useCallback((entry) => {
-		const list = items.current;
-		const existing = list.findIndex((i) => i.id === entry.id);
-		if (existing >= 0) list[existing] = entry;
-		else list.push(entry);
-	}, []);
+	const { items, registerItem, unregisterItem: removeItem } = useItemRegistry();
 	const unregisterItem = useCallback((id) => {
-		items.current = items.current.filter((i) => i.id !== id);
-		setActiveId((prev) => prev === id ? firstEnabledId(items.current) : prev);
-	}, []);
+		const removedIndex = removeItem(id);
+		setActiveId((prev) => prev === id ? nearestEnabledId(items.current, removedIndex) : prev);
+	}, [items, removeItem]);
 	useLayoutEffect(() => {
 		setActiveId((prev) => prev !== null && prev !== void 0 ? prev : firstEnabledId(items.current));
 	}, [activeId]);
@@ -3247,10 +3685,8 @@ function ToggleGroup(_ref) {
 			e.preventDefault();
 			nextId = firstEnabledId(items.current);
 		} else if (e.key === "End") {
-			var _enabled$id, _enabled;
 			e.preventDefault();
-			const enabled = items.current.filter((i) => !i.disabled);
-			nextId = (_enabled$id = (_enabled = enabled[enabled.length - 1]) === null || _enabled === void 0 ? void 0 : _enabled.id) !== null && _enabled$id !== void 0 ? _enabled$id : null;
+			nextId = lastEnabledId(items.current);
 		}
 		if (nextId) {
 			setActiveId(nextId);
@@ -3263,18 +3699,28 @@ function ToggleGroup(_ref) {
 		focusActive,
 		onKeyDown
 	]);
+	const contextValue = useMemo(() => ({
+		isPressed,
+		toggle,
+		disabled,
+		orientation,
+		activeId,
+		setActiveId,
+		registerItem,
+		unregisterItem,
+		items
+	}), [
+		isPressed,
+		toggle,
+		disabled,
+		orientation,
+		activeId,
+		registerItem,
+		unregisterItem,
+		items
+	]);
 	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-		value: {
-			isPressed,
-			toggle,
-			disabled,
-			orientation,
-			activeId,
-			setActiveId,
-			registerItem,
-			unregisterItem,
-			items
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", _objectSpread2({
 			role: "group",
 			onKeyDown: handleKeyDown
@@ -3294,17 +3740,19 @@ function Toggle(_ref2) {
 	const [standalonePressed, setStandalonePressed] = useControllableState(defaultPressed, pressedProp, onPressedChange);
 	const inGroup = group !== null;
 	const isDisabled = disabled || inGroup && group.disabled || false;
+	const registerItem = group === null || group === void 0 ? void 0 : group.registerItem;
+	const unregisterItem = group === null || group === void 0 ? void 0 : group.unregisterItem;
 	useLayoutEffect(() => {
-		if (!inGroup) return void 0;
-		group.registerItem({
+		if (!registerItem || !unregisterItem) return void 0;
+		registerItem({
 			id: itemId,
 			element: buttonRef.current,
 			disabled: isDisabled
 		});
-		return () => group.unregisterItem(itemId);
+		return () => unregisterItem(itemId);
 	}, [
-		inGroup,
-		group,
+		registerItem,
+		unregisterItem,
 		itemId,
 		isDisabled
 	]);
@@ -3532,7 +3980,7 @@ const Meter = forwardRef(function Meter(_ref, ref) {
 //#region src/primitives/accordion.tsx
 const _excluded$1 = ["value", "disabled"];
 const _excluded2$1 = ["onClick", "disabled"];
-const _excluded3$1 = ["style"];
+const _excluded3$1 = ["hiddenUntilFound", "style"];
 const AccordionRootContext = createContext(null);
 function useAccordionRoot() {
 	const ctx = useContext(AccordionRootContext);
@@ -3619,17 +4067,31 @@ function AccordionTrigger(_ref2) {
 }
 /** Renders the `AccordionContent` component. */
 function AccordionContent(_ref3) {
-	let { style } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	let { hiddenUntilFound = false, style } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
 	const root = useAccordionRoot();
 	const item = useAccordionItem();
-	const { ref, mounted, dataAttributes } = useEnterLeave(root.isExpanded(item.value), { animated: root.animated });
+	const expanded = root.isExpanded(item.value);
+	const { ref, mounted, dataAttributes } = useEnterLeave(expanded, { animated: root.animated && !hiddenUntilFound });
 	const innerRef = useRef(null);
-	useEffect(() => {
-		if (innerRef.current) ref.current = innerRef.current;
-	}, [ref]);
+	const contentRef = useMergedRef(innerRef, ref);
+	useHiddenUntilFound(innerRef, {
+		enabled: hiddenUntilFound,
+		open: expanded,
+		onReveal: useCallback(() => {
+			if (!root.isExpanded(item.value)) root.toggle(item.value);
+		}, [root, item.value])
+	});
+	if (hiddenUntilFound) return /* @__PURE__ */ jsx("div", _objectSpread2({
+		ref: contentRef,
+		id: item.contentId,
+		role: "region",
+		"aria-labelledby": item.triggerId,
+		"data-state": expanded ? "open" : "closed",
+		style
+	}, props));
 	if (!mounted) return null;
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
-		ref: innerRef,
+		ref: contentRef,
 		id: item.contentId,
 		role: "region",
 		"aria-labelledby": item.triggerId,
@@ -3981,18 +4443,21 @@ const _excluded4 = [
 	"name",
 	"id",
 	"onChange",
+	"onBlur",
 	"aria-describedby"
 ];
 const _excluded5 = [
 	"name",
 	"id",
 	"onChange",
+	"onBlur",
 	"aria-describedby"
 ];
 const _excluded6 = [
 	"name",
 	"id",
 	"onChange",
+	"onBlur",
 	"aria-describedby",
 	"children"
 ];
@@ -4103,7 +4568,7 @@ function FormLabel(_ref3) {
 }
 const FormInput = forwardRef((_ref4, ref) => {
 	var _useFieldValueMaybe;
-	let { name, id, onChange, "aria-describedby": ariaDescribedBy } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
+	let { name, id, onChange, onBlur, "aria-describedby": ariaDescribedBy } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
 	const form = useFormContext();
 	const field = useFormField();
 	const value = (_useFieldValueMaybe = useFieldValueMaybe(form, name)) !== null && _useFieldValueMaybe !== void 0 ? _useFieldValueMaybe : "";
@@ -4122,13 +4587,21 @@ const FormInput = forwardRef((_ref4, ref) => {
 		name,
 		onChange
 	]);
+	const handleBlur = useCallback((e) => {
+		form === null || form === void 0 || form.setFieldTouched(name, true);
+		onBlur === null || onBlur === void 0 || onBlur(e);
+	}, [
+		form,
+		name,
+		onBlur
+	]);
 	return /* @__PURE__ */ jsx("input", _objectSpread2({
 		ref: setRef,
 		id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.inputId,
 		name,
 		value,
 		onChange: handleChange,
-		onBlur: () => form === null || form === void 0 ? void 0 : form.setFieldTouched(name, true),
+		onBlur: handleBlur,
 		"aria-invalid": hasError || void 0,
 		"aria-describedby": composeDescribedBy(field, hasError, ariaDescribedBy)
 	}, props));
@@ -4136,7 +4609,7 @@ const FormInput = forwardRef((_ref4, ref) => {
 FormInput.displayName = "FormInput";
 const FormTextarea = forwardRef((_ref5, ref) => {
 	var _useFieldValueMaybe2;
-	let { name, id, onChange, "aria-describedby": ariaDescribedBy } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
+	let { name, id, onChange, onBlur, "aria-describedby": ariaDescribedBy } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
 	const form = useFormContext();
 	const field = useFormField();
 	const value = (_useFieldValueMaybe2 = useFieldValueMaybe(form, name)) !== null && _useFieldValueMaybe2 !== void 0 ? _useFieldValueMaybe2 : "";
@@ -4152,13 +4625,21 @@ const FormTextarea = forwardRef((_ref5, ref) => {
 		name,
 		onChange
 	]);
+	const handleBlur = useCallback((e) => {
+		form === null || form === void 0 || form.setFieldTouched(name, true);
+		onBlur === null || onBlur === void 0 || onBlur(e);
+	}, [
+		form,
+		name,
+		onBlur
+	]);
 	return /* @__PURE__ */ jsx("textarea", _objectSpread2({
 		ref: setRef,
 		id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.inputId,
 		name,
 		value,
 		onChange: handleChange,
-		onBlur: () => form === null || form === void 0 ? void 0 : form.setFieldTouched(name, true),
+		onBlur: handleBlur,
 		"aria-invalid": hasError || void 0,
 		"aria-describedby": composeDescribedBy(field, hasError, ariaDescribedBy)
 	}, props));
@@ -4166,7 +4647,7 @@ const FormTextarea = forwardRef((_ref5, ref) => {
 FormTextarea.displayName = "FormTextarea";
 const FormSelect = forwardRef((_ref6, ref) => {
 	var _useFieldValueMaybe3;
-	let { name, id, onChange, "aria-describedby": ariaDescribedBy, children } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
+	let { name, id, onChange, onBlur, "aria-describedby": ariaDescribedBy, children } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
 	const form = useFormContext();
 	const field = useFormField();
 	const value = (_useFieldValueMaybe3 = useFieldValueMaybe(form, name)) !== null && _useFieldValueMaybe3 !== void 0 ? _useFieldValueMaybe3 : "";
@@ -4182,13 +4663,21 @@ const FormSelect = forwardRef((_ref6, ref) => {
 		name,
 		onChange
 	]);
+	const handleBlur = useCallback((e) => {
+		form === null || form === void 0 || form.setFieldTouched(name, true);
+		onBlur === null || onBlur === void 0 || onBlur(e);
+	}, [
+		form,
+		name,
+		onBlur
+	]);
 	return /* @__PURE__ */ jsx("select", _objectSpread2(_objectSpread2({
 		ref: setRef,
 		id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.inputId,
 		name,
 		value,
 		onChange: handleChange,
-		onBlur: () => form === null || form === void 0 ? void 0 : form.setFieldTouched(name, true),
+		onBlur: handleBlur,
 		"aria-invalid": hasError || void 0,
 		"aria-describedby": composeDescribedBy(field, hasError, ariaDescribedBy)
 	}, props), {}, { children }));
@@ -4396,4 +4885,4 @@ function FormGroupLabel(props) {
 	return /* @__PURE__ */ jsx("legend", _objectSpread2({}, props));
 }
 //#endregion
-export { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogPanel, Button, Checkbox, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSubmit, FormSwitch, FormTextarea, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, Radio, RadioGroupRoot, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, Switch, Tab, TabList, TabPanel, TabsRoot, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useCommandState, useControllableState, useDialogClose, useEnterLeave, useFieldValue, useFloating, useFocusVisible, useFocusableWhenDisabled, useFormContext, useFormStore, useId, useMenubarContext, useRadioGroupContext, useRovingTabindex, useScrollActiveDescendantIntoView };
+export { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogPanel, Button, Checkbox, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSubmit, FormSwitch, FormTextarea, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, Radio, RadioGroupRoot, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, Switch, Tab, TabList, TabPanel, TabsRoot, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipGroup, TooltipProvider, TooltipRoot, useCommandState, useControllableState, useDialogClose, useEnterLeave, useFieldValue, useFloating, useFocusVisible, useFocusableWhenDisabled, useFormContext, useFormStore, useId, useMenubarContext, useRadioGroupContext, useRovingTabindex, useScrollActiveDescendantIntoView };