solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/{MenuSubmenuTrigger-DA4gsv6z.js → MenuSubmenuTrigger-BMQKlOvU.js}

@@ -1,27 +1,28 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
 import { N as triggerPress, O as siblingOpen, S as listNavigation, d as imperativeAction, u as focusOut, y as itemPress } from "./internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "./internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
-import { o as isElementVisible } from "./dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "./createAnchorPositioning-C-cVOPwz.js";
-import { t as InternalBackdrop } from "./InternalBackdrop-C_iDPVR-.js";
-import { t as createAnchoredPopupScrollLock } from "./createAnchoredPopupScrollLock-DFuUrykR.js";
+import { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
+import { s as isElementVisible } from "./dom-D8_aB1yy.js";
+import { t as createAnchorPositioning } from "./createAnchorPositioning-DrQYe7RS.js";
+import { t as InternalBackdrop } from "./InternalBackdrop-D_2zAWnl.js";
+import { t as createAnchoredPopupScrollLock } from "./createAnchoredPopupScrollLock-q6gnOSmv.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "./FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-DEs3FAEe.js";
-import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "./safePolygon-CAm5RJGv.js";
-import { t as createTransitionStatus } from "./createTransitionStatus-BTlrerSS.js";
-import { a as triggerOpenStateMapping, h as tabbable, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "./popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "./FocusManager-BrbZVWME.js";
-import { r as attachPopupHandle } from "./PopupHandle-DthPgNjy.js";
-import { a as stopButtonInteraction, r as preventButtonInteraction } from "./buttonSemantics-BSwDxJhh.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-evylvVnN.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "./safePolygon-B8QtiIZ3.js";
+import { t as createTransitionStatus } from "./createTransitionStatus-184v7j3-.js";
+import { a as triggerOpenStateMapping, h as tabbable, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "./popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "./FocusManager-D-xgblGs.js";
+import { r as attachPopupHandle } from "./PopupHandle-QNj4mED2.js";
 import { t as setRef } from "./setRef-Bt70sW7c.js";
+import { a as stopButtonInteraction, r as preventButtonInteraction } from "./buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "./DirectionContext-YORWLF08.js";
 import { n as useMenubarContext } from "./MenubarContext-C-62rMnO.js";
 import { n as useToolbarRootContext } from "./ToolbarRootContext-DD-qe7s8.js";
-import { Dynamic, escape, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { escape, memo, mergeProps, ssrElement } from "@solidjs/web";
 import { $REFRESH, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/context-menu/root/ContextMenuRootContext.ts
 var MISSING_CONTEXT$8 = Symbol("ContextMenuRootContext");
@@ -504,6 +505,9 @@ function MenuRoot(props) {
 		activeTriggerId: untrack(() => props.defaultTriggerId ?? null)
 	});
 	store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: false });
+	const animateInitialOpen = untrack(() => store.open() && Boolean(parentStore) && ambientMenu?.presence.transitionStatus() === "starting");
+	const seededInstantType = animateInitialOpen ? untrack(() => parentStore?.instantType()) : void 0;
+	if (seededInstantType !== void 0) store.setInstantType(seededInstantType);
 	const payload = store.access((state) => state.payload);
 	const node = createFloatingNode({
 		tree: () => store.tree(),
@@ -513,15 +517,40 @@ function MenuRoot(props) {
 	});
 	const [backdropElement, setBackdropElement] = createSignal(null, { ownedWrite: true });
 	const [internalBackdropElement, setInternalBackdropElement] = createSignal(null, { ownedWrite: true });
-	const presence = createPopupPresence(store, () => store.track().popupElement, { onUnmount: () => {
-		store.setHoverEnabled(true);
-		store.setInstantType(void 0);
-	} });
+	const presence = createPopupPresence(store, () => store.track().popupElement, {
+		animateInitialOpen,
+		onUnmount: () => {
+			store.setHoverEnabled(true);
+			store.setInstantType(void 0);
+		}
+	});
+	if (seededInstantType !== void 0) createEffect(() => ({
+		open: store.open(),
+		status: presence.transitionStatus()
+	}), (state) => {
+		const clearSeed = () => {
+			if (untrack(() => store.instantType()) === seededInstantType) store.setInstantType(void 0);
+		};
+		if (!state.open) {
+			clearSeed();
+			return;
+		}
+		if (state.status !== void 0) return;
+		const popup = store.state.popupElement;
+		if (!popup) {
+			clearSeed();
+			return;
+		}
+		const controller = new AbortController();
+		runOnceAnimationsFinish(popup, clearSeed, controller.signal);
+		return () => controller.abort();
+	});
 	const context = {
 		store,
 		node,
 		nested,
 		presence,
+		portalOwnerRole: parentStore || menubar ? "group" : void 0,
 		contextMenu: store.contextMenu,
 		backdropElement,
 		setBackdropElement,
@@ -699,15 +728,12 @@ function MenuBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let backdrop = null;
 	onCleanup(() => {
 		if (context.backdropElement() === backdrop) context.setBackdropElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			backdrop = element;
 			context.setBackdropElement(element);
@@ -745,7 +771,7 @@ function MenuPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "keepMounted", "ref", "style");
 	const portalContext = { keepMounted };
 	return Show({
 		get when() {
@@ -756,8 +782,8 @@ function MenuPortal(props) {
 				value: portalContext,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -771,9 +797,14 @@ function MenuPortal(props) {
 						get style() {
 							return styleValue();
 						}
-					}, others, { get children() {
-						return props.children;
-					} }));
+					}, others, {
+						get portalOwnerRole() {
+							return context.portalOwnerRole;
+						},
+						get children() {
+							return props.children;
+						}
+					}));
 				}
 			});
 		}
@@ -855,7 +886,7 @@ function MenuPositioner(props) {
 		"pointer-events": context.store.open() ? void 0 : "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuPositionerStateMapping));
-	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
 	const modalNonHover = createMemo(() => !context.nested && context.store.modal() && context.store.openChangeReason() !== "trigger-hover");
 	const menubarModal = createMemo(() => context.store.menubar()?.modal() ?? false);
 	const modalPolicy = createMemo(() => menubarModal() || modalNonHover());
@@ -956,6 +987,7 @@ function MenuPositioner(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenuPositionerContext({
 		value: positioning,
 		get children() {
@@ -968,10 +1000,7 @@ function MenuPositioner(props) {
 				get children() {
 					return ModalBackdrop({});
 				}
-			}), Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			}), Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.setPositionerElement(value);
@@ -1017,7 +1046,7 @@ function MenuPopup(props) {
 	const allProps = props;
 	const contextMenuRoot = context.contextMenu !== void 0 && !context.nested;
 	const state = createMemo(() => ({
-		transitionStatus: context.store.track().transitionStatus,
+		transitionStatus: context.presence.transitionStatus(),
 		side: positioner.renderedSide(),
 		align: positioner.renderedAlign(),
 		open: context.store.open(),
@@ -1028,7 +1057,7 @@ function MenuPopup(props) {
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuPopupStateMapping));
 	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
-	const others = omit(allProps, "as", "class", "finalFocus", "id", "onClick", "onKeyDown", "onMouseMove", "ref", "style");
+	const others = omit(allProps, "render", "class", "finalFocus", "id", "onClick", "onKeyDown", "onMouseMove", "ref", "style");
 	let popupElement = null;
 	function handleKeyDown(event) {
 		const dismissHandler = context.store.state.popupProps.onKeyDown;
@@ -1058,14 +1087,14 @@ function MenuPopup(props) {
 		}
 		if (!event.defaultPrevented && !event.cancelBubble) context.store.relayKeyboardEvent(event);
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown, () => (event) => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, (event) => {
 		if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => () => {
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), () => {
 		context.store.setAllowMouseEnter(true);
 		if (context.nested) context.store.setHoverEnabled(false);
 	});
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => () => context.store.setHoverEnabled(false));
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), () => context.store.setHoverEnabled(false));
 	const defaultReturnFocus = () => untrack(() => {
 		const reason = context.store.openChangeReason();
 		if (reason === "focus-out" || context.store.menubar() && (reason === "sibling-open" || reason === "list-navigation")) return false;
@@ -1087,10 +1116,7 @@ function MenuPopup(props) {
 		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
 	});
 	function PopupElement() {
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "div";
-			},
+		return Render(mergeProps({
 			ref: [((element) => {
 				popupElement = element;
 				context.store.setPopupElement(element);
@@ -1108,7 +1134,7 @@ function MenuPopup(props) {
 				return context.store.track().activeTriggerElement?.id || void 0;
 			},
 			get ["aria-orientation"]() {
-				return context.store.orientation();
+				return context.store.orientation() === "horizontal" ? "horizontal" : void 0;
 			},
 			get ["class"]() {
 				return classValue();
@@ -1121,6 +1147,7 @@ function MenuPopup(props) {
 			onKeyDown
 		}, stateAttributes, others));
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return FocusManager({
 		get context() {
 			return context.store.context.floatingRoot;
@@ -1187,15 +1214,12 @@ function MenuArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeMenuStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let arrowElement = null;
 	onCleanup(() => {
 		if (arrowElement) positioner.setArrowElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			arrowElement = element;
 			positioner.setArrowElement(element);
@@ -1232,14 +1256,12 @@ function MenuGroup(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return MenuGroupContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				role: "group",
 				get ["aria-labelledby"]() {
@@ -1267,22 +1289,19 @@ function MenuGroupLabel(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "ref", "style");
 	createEffect(() => id(), (currentId) => {
 		context.setLabelId(currentId);
 		return () => {
 			if (context.labelId() === currentId) context.setLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
 		},
-		role: "presentation",
+		"aria-hidden": "true",
 		get ["class"]() {
 			return classValue();
 		},
@@ -1418,20 +1437,17 @@ function MenuItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "closeOnClick", "disabled", "id", "label", "nativeButton", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => (event) => {
+	const others = omit(allProps, "render", "class", "closeOnClick", "disabled", "id", "label", "nativeButton", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), (event) => {
 		if (closeOnClick()) item.close(event);
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0), () => internalProps.onKeyDown, () => (event) => item.onKeyDown(event, nativeButton()));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => (event) => item.onKeyUp(event, nativeButton()));
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => item.onMouseMove);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => item.onMouseUp);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => item.onFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => item.onBlur);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0)), liveEventHandler(() => internalProps.onKeyDown), (event) => item.onKeyDown(event, nativeButton()));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), (event) => item.onKeyUp(event, nativeButton()));
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(() => item.onMouseMove));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => item.onMouseUp));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), liveEventHandler(() => item.onFocus));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => item.onBlur));
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => item.setElement(element)), internalProps.ref],
 		get id() {
 			return internalProps.id;
@@ -1495,29 +1511,27 @@ function MenuCheckboxItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuItemStateMapping));
-	const others = omit(allProps, "as", "checked", "class", "closeOnClick", "defaultChecked", "disabled", "id", "label", "nativeButton", "onBlur", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
+	const others = omit(allProps, "render", "checked", "class", "closeOnClick", "defaultChecked", "disabled", "id", "label", "nativeButton", "onBlur", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
 	function toggle(event) {
 		const nextChecked = !checked();
 		const details = createChangeEventDetails(itemPress, event, void 0, { preventUnmountOnClose() {} });
 		internalProps.onCheckedChange?.(nextChecked, details);
 		if (!details.isCanceled && !controlled) setUncontrolledChecked(nextChecked);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => toggle, () => (event) => {
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), toggle, (event) => {
 		if (closeOnClick()) item.close(event);
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0), () => internalProps.onKeyDown, () => (event) => item.onKeyDown(event, nativeButton()));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => (event) => item.onKeyUp(event, nativeButton()));
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => item.onFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => item.onBlur);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => item.onMouseMove);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => item.onMouseUp);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0)), liveEventHandler(() => internalProps.onKeyDown), (event) => item.onKeyDown(event, nativeButton()));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), (event) => item.onKeyUp(event, nativeButton()));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), liveEventHandler(() => item.onFocus));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => item.onBlur));
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(() => item.onMouseMove));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => item.onMouseUp));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenuCheckboxItemContext({
 		value: state,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => item.setElement(value)), internalProps.ref],
 				get id() {
 					return internalProps.id;
@@ -1571,7 +1585,7 @@ function MenuCheckboxItemIndicator(props) {
 		...menuItemStateMapping,
 		...transitionStatusMapping
 	}));
-	const others = omit(allProps, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "keepMounted", "ref", "style");
 	let element;
 	let latestChecked = false;
 	createEffect(() => ({
@@ -1587,15 +1601,13 @@ function MenuCheckboxItemIndicator(props) {
 		}, controller.signal);
 		return () => controller.abort();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((value) => element = value), internalProps.ref],
 				"aria-hidden": "true",
 				get ["class"]() {
@@ -1625,20 +1637,17 @@ function MenuLinkItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "closeOnClick", "id", "label", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => (event) => {
+	const others = omit(allProps, "render", "class", "closeOnClick", "id", "label", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style");
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), (event) => {
 		if (closeOnClick()) item.close(event);
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0), () => internalProps.onKeyDown, () => (event) => item.onKeyDown(event, false));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => (event) => item.onKeyUp(event, false));
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => item.onMouseMove);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => item.onMouseUp);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => item.onFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => item.onBlur);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "a";
-		},
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0)), liveEventHandler(() => internalProps.onKeyDown), (event) => item.onKeyDown(event, false));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), (event) => item.onKeyUp(event, false));
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(() => item.onMouseMove));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => item.onMouseUp));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), liveEventHandler(() => item.onFocus));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => item.onBlur));
+	return useRender(props, () => state(), (props) => ssrElement("a", props, void 0, true))(mergeProps({
 		ref: [((element) => item.setElement(element)), internalProps.ref],
 		get id() {
 			return internalProps.id;
@@ -1686,7 +1695,7 @@ function MenuRadioGroup(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "aria-labelledby", "as", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value");
+	const others = omit(allProps, "aria-labelledby", "render", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value");
 	const groupContext = {
 		labelId,
 		setLabelId
@@ -1699,16 +1708,14 @@ function MenuRadioGroup(props) {
 			if (!details.isCanceled && !controlled) setUncontrolledValue(() => nextValue);
 		}
 	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenuGroupContext({
 		value: groupContext,
 		get children() {
 			return MenuRadioGroupContext({
 				value: radioContext,
 				get children() {
-					return Dynamic(mergeProps({
-						get component() {
-							return props.as ?? "div";
-						},
+					return Render(mergeProps({
 						ref: [internalProps.ref],
 						role: "group",
 						get ["aria-labelledby"]() {
@@ -1762,27 +1769,25 @@ function MenuRadioItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuItemStateMapping));
-	const others = omit(allProps, "as", "class", "closeOnClick", "disabled", "id", "label", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "closeOnClick", "disabled", "id", "label", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "ref", "style", "value");
 	function select(event) {
 		const details = createChangeEventDetails(itemPress, event, void 0, { preventUnmountOnClose() {} });
 		group.setValue(internalProps.value, details);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => select, () => (event) => {
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), select, (event) => {
 		if (closeOnClick()) item.close(event);
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0), () => internalProps.onKeyDown, () => (event) => item.onKeyDown(event, nativeButton()));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => (event) => item.onKeyUp(event, nativeButton()));
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => item.onFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => item.onBlur);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => item.onMouseMove);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => item.onMouseUp);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0)), liveEventHandler(() => internalProps.onKeyDown), (event) => item.onKeyDown(event, nativeButton()));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), (event) => item.onKeyUp(event, nativeButton()));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), liveEventHandler(() => item.onFocus));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => item.onBlur));
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(() => item.onMouseMove));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => item.onMouseUp));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenuRadioItemContext({
 		value: state,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => item.setElement(value)), internalProps.ref],
 				get id() {
 					return internalProps.id;
@@ -1836,7 +1841,7 @@ function MenuRadioItemIndicator(props) {
 		...menuItemStateMapping,
 		...transitionStatusMapping
 	}));
-	const others = omit(allProps, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "keepMounted", "ref", "style");
 	let element;
 	let latestChecked = false;
 	createEffect(() => ({
@@ -1852,15 +1857,13 @@ function MenuRadioItemIndicator(props) {
 		}, controller.signal);
 		return () => controller.abort();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((value) => element = value), internalProps.ref],
 				"aria-hidden": "true",
 				get ["class"]() {
@@ -1917,7 +1920,7 @@ function MenuSubmenuTrigger(props) {
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
 	const omitExpanded = createMemo(() => open() && isApplePlatform() && (child.store.openChangeReason() === "list-navigation" || child.store.openMethod() === "keyboard"));
-	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "id", "label", "nativeButton", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onMouseUp", "onMouseEnter", "openOnHover", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "delay", "disabled", "id", "label", "nativeButton", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onMouseUp", "onMouseEnter", "openOnHover", "ref", "style");
 	createTriggerRegistration(() => child.store, id, item.element, () => ({ closeDelay: closeDelay() }));
 	let mouseDownHandled = false;
 	function setSubmenuOpen(nextOpen, event, reason) {
@@ -1938,26 +1941,26 @@ function MenuSubmenuTrigger(props) {
 		}
 		item.onKeyDown(event, nativeButton());
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => (event) => {
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), (event) => {
 		if (mouseDownHandled) {
 			mouseDownHandled = false;
 			return;
 		}
 		if (!openOnHover() || event.detail === 0) setSubmenuOpen(openOnHover() ? true : !open(), event, triggerPress);
 	});
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onMouseDown, () => (event) => {
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), (event) => {
 		if (!openOnHover() && event.button === 0) {
 			mouseDownHandled = true;
 			setSubmenuOpen(!open(), event, triggerPress);
 		}
 	});
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0), () => internalProps.onKeyDown, () => handleDismissKeyDown, () => handleKeyDown);
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => (event) => item.onKeyUp(event, nativeButton()));
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => item.onMouseMove);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => item.onMouseUp);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => item.onFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => item.onBlur);
-	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => () => {
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledMenuItemActivation : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleDismissKeyDown, handleKeyDown);
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), (event) => item.onKeyUp(event, nativeButton()));
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(() => item.onMouseMove));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => item.onMouseUp));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), liveEventHandler(() => item.onFocus));
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => item.onBlur));
+	const onMouseEnter = composeEventHandlers(liveEventHandler(() => internalProps.onMouseEnter), () => {
 		if (parentStore.highlightItemOnHover()) parentStore.setActiveElement(item.element());
 	});
 	function handleDismissKeyDown(event) {
@@ -1984,85 +1987,49 @@ function MenuSubmenuTrigger(props) {
 		});
 		return null;
 	}
-	return [HoverInteraction({}), Show({
-		get when() {
-			return props.as;
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
+	return [HoverInteraction({}), Render(mergeProps({
+		ref: [((element) => {
+			item.setElement(element);
+		}), internalProps.ref],
+		get id() {
+			return id();
 		},
-		get fallback() {
-			return ssrElement("div", () => {
-				return mergeProps({
-					get id() {
-						return id();
-					},
-					role: "menuitem",
-					get tabIndex() {
-						return open() || item.highlighted() ? 0 : -1;
-					},
-					"aria-haspopup": "menu",
-					get ["aria-expanded"]() {
-						return omitExpanded() ? void 0 : open() ? "true" : "false";
-					},
-					get ["aria-controls"]() {
-						return child.store.triggerPopupId(id());
-					},
-					get ["aria-disabled"]() {
-						return disabled() ? "true" : void 0;
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, void 0, true);
+		get type() {
+			return nativeButton() ? "button" : void 0;
 		},
-		children: (component) => Dynamic(mergeProps({
-			get component() {
-				return component();
-			},
-			ref: [((element) => {
-				item.setElement(element);
-			}), internalProps.ref],
-			get id() {
-				return id();
-			},
-			get type() {
-				return nativeButton() ? "button" : void 0;
-			},
-			role: "menuitem",
-			get tabIndex() {
-				return open() || item.highlighted() ? 0 : -1;
-			},
-			"aria-haspopup": "menu",
-			get ["aria-expanded"]() {
-				return memo(() => {
-					return !!omitExpanded();
-				})() ? void 0 : open() ? "true" : "false";
-			},
-			get ["aria-controls"]() {
-				return child.store.triggerPopupId(id());
-			},
-			get ["aria-disabled"]() {
-				return disabled() ? "true" : void 0;
-			},
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			},
-			onClick,
-			onFocus,
-			onBlur,
-			onKeyDown,
-			onKeyUp,
-			onMouseEnter,
-			onMouseDown,
-			onMouseMove,
-			onMouseUp
-		}, stateAttributes, others))
-	})];
+		role: "menuitem",
+		get tabIndex() {
+			return open() || item.highlighted() ? 0 : -1;
+		},
+		"aria-haspopup": "menu",
+		get ["aria-expanded"]() {
+			return memo(() => {
+				return !!omitExpanded();
+			})() ? void 0 : open() ? "true" : "false";
+		},
+		get ["aria-controls"]() {
+			return child.store.triggerPopupId(id());
+		},
+		get ["aria-disabled"]() {
+			return disabled() ? "true" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		onKeyUp,
+		onMouseEnter,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp
+	}, stateAttributes, others))];
 }
 function isApplePlatform() {
 	if (typeof navigator === "undefined") return false;