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

package/dist/lib/server/toolbar/index.js

@@ -1,14 +1,14 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useToolbarRootContext, t as ToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
-import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
 import { n as useToolbarGroupContext, t as ToolbarGroupContext } from "../ToolbarGroupContext-CzdHxijX.js";
 import { t as ToolbarItemOwnerContext } from "../ToolbarItemOwnerContext-L5dsZ_vS.js";
-import { Dynamic, delegateEvents, dynamic, memo, mergeProps } from "@solidjs/web";
+import { delegateEvents, mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/toolbar/root/ToolbarRoot.tsx
 /** A container for grouping a set of controls into one keyboard navigation scope. */
@@ -22,7 +22,7 @@ function ToolbarRoot(props) {
 	const items = /* @__PURE__ */ new Map();
 	let nextOrder = 0;
 	let itemChangeQueued = false;
-	const others = omit(allProps, "as", "class", "disabled", "loopFocus", "onFocus", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "loopFocus", "onFocus", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
 	const state = createMemo(() => ({
@@ -118,8 +118,8 @@ function ToolbarRoot(props) {
 		scrollItemIntoView(rootElement(), nextItem.element(), direction(), orientation());
 		queueMicrotask(() => nextItem.element()?.focus());
 	}
-	const onFocusIn = composeEventHandlers(() => internalProps.onFocusIn, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onFocusIn = composeEventHandlers(liveEventHandler(() => internalProps.onFocusIn), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	function onRootKeyDown(event) {
 		Reflect.deleteProperty(event, "baseUIHandlerPrevented");
 		Reflect.apply(onKeyDown, event.currentTarget, [event]);
@@ -149,13 +149,11 @@ function ToolbarRoot(props) {
 		});
 		return () => observer.disconnect();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToolbarRootContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(props.as ?? "div");
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -256,7 +254,7 @@ function getScrollStyles(element) {
 function ToolbarGroup(props) {
 	const root = useToolbarRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "disabled", "ref", "style");
+	const others = omit(props, "render", "class", "disabled", "ref", "style");
 	const disabled = createMemo(() => root.disabled() || (internalProps.disabled ?? false));
 	const state = createMemo(() => ({
 		disabled: disabled(),
@@ -265,13 +263,12 @@ function ToolbarGroup(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const context = { disabled };
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ToolbarGroupContext({
-		value: { disabled },
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(props.as ?? "div");
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -291,7 +288,6 @@ function installOwnedEventHandlers(element, handlers) {
 	const blockedEvents = /* @__PURE__ */ new WeakSet();
 	const nativeHandlers = [];
 	const restoreDelegatedHandlers = [];
-	let active = true;
 	for (const [name, handler] of handlers) {
 		const nativeHandler = (event) => {
 			handledEvents.add(event);
@@ -301,51 +297,47 @@ function installOwnedEventHandlers(element, handlers) {
 		element.addEventListener(name, nativeHandler);
 		nativeHandlers.push([name, nativeHandler]);
 	}
-	queueMicrotask(() => {
-		if (!active) return;
-		for (const [name, handler] of handlers) {
-			const handlerKey = `$$${name}`;
-			const dataKey = `${handlerKey}Data`;
-			const delegatedElement = element;
-			let childHandler = delegatedElement[handlerKey];
-			let childData = delegatedElement[dataKey];
-			const bridgedHandler = (event) => {
-				if (!handledEvents.has(event)) {
-					handledEvents.add(event);
-					Reflect.apply(handler, element, [event]);
-					if (event.baseUIHandlerPrevented) blockedEvents.add(event);
-				}
-				if (blockedEvents.has(event) || typeof childHandler !== "function") return;
-				if (childData === void 0) Reflect.apply(childHandler, element, [event]);
-				else Reflect.apply(childHandler, element, [childData, event]);
-			};
-			Object.defineProperty(delegatedElement, handlerKey, {
-				configurable: true,
-				enumerable: true,
-				get: () => bridgedHandler,
-				set: (value) => {
-					childHandler = value;
-				}
-			});
-			Object.defineProperty(delegatedElement, dataKey, {
-				configurable: true,
-				enumerable: true,
-				get: () => void 0,
-				set: (value) => {
-					childData = value;
-				}
-			});
-			restoreDelegatedHandlers.push(() => {
-				Reflect.deleteProperty(delegatedElement, handlerKey);
-				Reflect.deleteProperty(delegatedElement, dataKey);
-				delegatedElement[handlerKey] = childHandler;
-				delegatedElement[dataKey] = childData;
-			});
-		}
-		delegateEvents(handlers.map(([name]) => name));
-	});
+	for (const [name, handler] of handlers) {
+		const handlerKey = `$$${name}`;
+		const dataKey = `${handlerKey}Data`;
+		const delegatedElement = element;
+		let childHandler = delegatedElement[handlerKey];
+		let childData = delegatedElement[dataKey];
+		const bridgedHandler = (event) => {
+			if (!handledEvents.has(event)) {
+				handledEvents.add(event);
+				Reflect.apply(handler, element, [event]);
+				if (event.baseUIHandlerPrevented) blockedEvents.add(event);
+			}
+			if (blockedEvents.has(event) || typeof childHandler !== "function") return;
+			if (childData === void 0) Reflect.apply(childHandler, element, [event]);
+			else Reflect.apply(childHandler, element, [childData, event]);
+		};
+		Object.defineProperty(delegatedElement, handlerKey, {
+			configurable: true,
+			enumerable: true,
+			get: () => bridgedHandler,
+			set: (value) => {
+				childHandler = value;
+			}
+		});
+		Object.defineProperty(delegatedElement, dataKey, {
+			configurable: true,
+			enumerable: true,
+			get: () => void 0,
+			set: (value) => {
+				childData = value;
+			}
+		});
+		restoreDelegatedHandlers.push(() => {
+			Reflect.deleteProperty(delegatedElement, handlerKey);
+			Reflect.deleteProperty(delegatedElement, dataKey);
+			delegatedElement[handlerKey] = childHandler;
+			delegatedElement[dataKey] = childData;
+		});
+	}
+	delegateEvents(handlers.map(([name]) => name));
 	return () => {
-		active = false;
 		for (const [name, handler] of nativeHandlers) element.removeEventListener(name, handler);
 		for (const restore of restoreDelegatedHandlers) restore();
 	};
@@ -383,7 +375,6 @@ function createToolbarItem(metadata) {
 function ToolbarButton(props) {
 	const root = useToolbarRootContext();
 	const group = useToolbarGroupContext();
-	const Component = dynamic(() => withoutComponentBinding(props.as ?? "button"));
 	const internalProps = props;
 	const allProps = props;
 	const [childDisabled, setChildDisabled] = createSignal(false);
@@ -395,7 +386,7 @@ function ToolbarButton(props) {
 		disabled,
 		focusableWhenDisabled
 	});
-	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const state = createMemo(() => ({
 		disabled: disabled(),
 		focusable: focusableWhenDisabled(),
@@ -424,7 +415,7 @@ function ToolbarButton(props) {
 		if (isSpace) {
 			if (event.defaultPrevented && textNavigationRole) return;
 			event.preventDefault();
-			if (!nativeButton() || isButton || typeof props.as === "function") {
+			if (!nativeButton() || isButton) {
 				event.preventBaseUIHandler();
 				dispatchClickWithModifiers(event.currentTarget, event);
 			}
@@ -437,17 +428,17 @@ function ToolbarButton(props) {
 		}
 	}
 	function handleKeyUp(event) {
-		if (event.target === event.currentTarget && event.key === " " && (!nativeButton() || event.currentTarget.tagName === "BUTTON" || typeof props.as === "function")) {
+		if (event.target === event.currentTarget && event.key === " " && (!nativeButton() || event.currentTarget.tagName === "BUTTON")) {
 			event.preventDefault();
 			event.preventBaseUIHandler();
 		}
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledKeyDefault : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onKeyDown), () => untrack(() => disabled() ? void 0 : handleKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onKeyUp), () => untrack(() => disabled() ? void 0 : handleKeyUp));
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => untrack(() => disabled() ? void 0 : internalProps.onMouseDown));
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onClick));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledKeyDefault : void 0)), liveEventHandler(() => untrack(() => disabled() ? void 0 : internalProps.onKeyDown)), liveEventHandler(() => untrack(() => disabled() ? void 0 : handleKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => untrack(() => disabled() ? void 0 : internalProps.onKeyUp)), liveEventHandler(() => untrack(() => disabled() ? void 0 : handleKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => untrack(() => disabled() ? void 0 : internalProps.onMouseDown)));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
 	onSettled(() => {
 		item.element();
 	});
@@ -472,6 +463,7 @@ function ToolbarButton(props) {
 		if (current.disabled && current.focusableWhenDisabled && current.element) current.element.removeAttribute("disabled");
 	});
 	onCleanup(() => removeOwnedListeners?.());
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	return ToolbarItemOwnerContext({
 		value: {
 			disabled,
@@ -479,7 +471,7 @@ function ToolbarButton(props) {
 			setChildDisabled
 		},
 		get children() {
-			return Component(mergeProps({
+			return Render(mergeProps({
 				ref: (element) => {
 					setElement(element);
 				},
@@ -499,9 +491,7 @@ function ToolbarButton(props) {
 					return item.tabIndex();
 				},
 				get disabled() {
-					return memo(() => {
-						return typeof props.as === "function";
-					})() ? disabled() : disabledAttribute();
+					return disabledAttribute();
 				},
 				get ["aria-disabled"]() {
 					return ariaDisabled();
@@ -550,16 +540,13 @@ function ToolbarLink(props) {
 		disabled: FALSE,
 		focusableWhenDisabled: TRUE
 	});
-	const others = omit(allProps, "as", "class", "onFocus", "ref", "style");
+	const others = omit(allProps, "render", "class", "onFocus", "ref", "style");
 	const state = createMemo(() => ({ orientation: root.orientation() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => item.root.setActiveItem(item.registration));
-	return Dynamic(mergeProps({
-		get component() {
-			return withoutComponentBinding(props.as ?? "a");
-		},
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), () => item.root.setActiveItem(item.registration));
+	return useRender(props, () => state(), (props) => ssrElement("a", props, void 0, true))(mergeProps({
 		ref: (element) => {
 			item.setElement(element);
 			setRef(internalProps.ref, element);
@@ -582,7 +569,6 @@ function ToolbarLink(props) {
 function ToolbarInput(props) {
 	const root = useToolbarRootContext();
 	const group = useToolbarGroupContext();
-	const Component = dynamic(() => withoutComponentBinding(props.as ?? "input"));
 	const internalProps = props;
 	const allProps = props;
 	const disabled = createMemo(() => root.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
@@ -591,7 +577,7 @@ function ToolbarInput(props) {
 		disabled,
 		focusableWhenDisabled
 	});
-	const others = omit(allProps, "as", "class", "disabled", "focusableWhenDisabled", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "focusableWhenDisabled", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style");
 	const state = createMemo(() => ({
 		disabled: disabled(),
 		focusable: focusableWhenDisabled(),
@@ -604,10 +590,10 @@ function ToolbarInput(props) {
 	function handleFocus() {
 		item.root.setActiveItem(item.registration);
 	}
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => untrack(() => disabled() ? preventDefault : void 0));
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventNonTabDefault : void 0), () => internalProps.onKeyDown);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => untrack(() => disabled() ? preventDefault : void 0));
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), liveEventHandler(() => untrack(() => disabled() ? preventDefault : void 0)));
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventNonTabDefault : void 0)), liveEventHandler(() => internalProps.onKeyDown));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), liveEventHandler(() => untrack(() => disabled() ? preventDefault : void 0)));
 	function setElement(element) {
 		removeOwnedListeners?.();
 		item.setElement(element);
@@ -620,7 +606,7 @@ function ToolbarInput(props) {
 		setRef(internalProps.ref, element);
 	}
 	onCleanup(() => removeOwnedListeners?.());
-	return Component(mergeProps({
+	return useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true))(mergeProps({
 		ref: (element) => {
 			setElement(element);
 		},
@@ -649,16 +635,13 @@ function preventNonTabDefault(event) {
 /** A separator that defaults to the opposite orientation of its toolbar. */
 function ToolbarSeparator(props) {
 	const root = useToolbarRootContext();
-	const others = omit(props, "as", "class", "orientation", "style");
+	const others = omit(props, "render", "class", "orientation", "style");
 	const orientation = createMemo(() => props.orientation ?? (root.orientation() === "vertical" ? "horizontal" : "vertical"));
 	const state = createMemo(() => ({ orientation: orientation() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	return Dynamic(mergeProps({
-		get component() {
-			return withoutComponentBinding(props.as ?? "div");
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},

package/dist/lib/server/tooltip/index.js

@@ -1,22 +1,23 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { M as triggerHover, N as triggerPress, d as imperativeAction, s as disabled, w as none } 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 { a as isElement, m as ownerWindow, n as contains, r as getEventTarget } from "../dom-Crg_2R-j.js";
-import { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { h as ownerWindow, i as getEventTarget, n as contains, o as isElement } from "../dom-D8_aB1yy.js";
+import { t as PopupViewport } from "../PopupViewport-BDttjORN.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.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 { t as createFocusInteraction } from "../createFocusInteraction-EIS0QOel.js";
-import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
-import { a as triggerOpenStateMapping, o as PopupPortal } from "../popupStateMapping-nKoUwoke.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "../PopupStore-evylvVnN.js";
+import { t as createFocusInteraction } from "../createFocusInteraction-DFKr4G7a.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-B8QtiIZ3.js";
+import { a as triggerOpenStateMapping, o as PopupPortal } from "../popupStateMapping-VHqr6M4H.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-QNj4mED2.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
-import { Dynamic, escape, memo, mergeProps } from "@solidjs/web";
+import { escape, memo, mergeProps, ssrElement } from "@solidjs/web";
 import { $REFRESH, Show, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/internals/overlay/createClientPoint.ts
 function createClientPoint(options) {
@@ -50,7 +51,7 @@ function createClientPoint(options) {
 		else if (suspended) return;
 		x = event.clientX;
 		y = event.clientY;
-		const reference = options.context.state.domReferenceElement;
+		const reference = directReferenceEvent && isElement(event.currentTarget) ? event.currentTarget : options.context.state.domReferenceElement;
 		if (!reference) return;
 		const virtual = {
 			contextElement: reference,
@@ -85,11 +86,11 @@ function createClientPoint(options) {
 	}), (state) => {
 		removeWindowListener?.();
 		removeWindowListener = void 0;
-		if (!state.enabled || state.axis === "none" || !state.reference) {
+		if (!state.enabled || state.axis === "none") {
 			resetReference();
 			return;
 		}
-		if (!state.open) return;
+		if (!state.open || !state.reference) return;
 		if (!state.openEvent || ![
 			"mouseenter",
 			"mousemove",
@@ -436,9 +437,12 @@ function TooltipRoot(props) {
 	if (provider) {
 		let groupActive = true;
 		const closeForDelayGroup = () => {
-			if (!store.open()) return;
+			if (!store.open() && !presence.mounted()) return;
 			queueMicrotask(() => {
-				if (groupActive && provider.group.currentId() !== delayGroupId && store.open()) store.setOpen(false, createChangeEventDetails(none));
+				if (groupActive && provider.group.currentId() !== delayGroupId) {
+					if (store.open()) store.setOpen(false, createChangeEventDetails(none));
+					else if (presence.mounted() && !store.state.preventUnmountingOnClose) presence.forceUnmount();
+				}
 			});
 		};
 		const unsubscribe = provider.group.subscribe(delayGroupId, closeForDelayGroup, (instant) => store.setInstantPhase(instant));
@@ -529,10 +533,11 @@ function TooltipTrigger(props) {
 	const interactionDisabled = createMemo(() => store().disabled() || (internalProps.disabled ?? false));
 	const open = createMemo(() => store().open() && store().activeTriggerId() === id());
 	const state = createMemo(() => ({ open: open() }));
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "closeDelay", "closeOnClick", "delay", "disabled", "handle", "id", "onBlur", "onClick", "onFocus", "onKeyDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onPointerDown", "onPointerEnter", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "closeOnClick", "delay", "disabled", "handle", "id", "onBlur", "onClick", "onFocus", "onKeyDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onPointerDown", "onPointerEnter", "payload", "ref", "style");
 	let focusHandlers;
 	let hoverControls;
 	let nestedTriggerHovered = false;
@@ -560,7 +565,7 @@ function TooltipTrigger(props) {
 	});
 	function getOpenDelay() {
 		if (!provider) return internalProps.delay ?? OPEN_DELAY;
-		if (provider.group.delay().open === 0) return 0;
+		if (provider.group.currentId() !== null) return 0;
 		return internalProps.delay ?? provider.delay() ?? OPEN_DELAY;
 	}
 	function getCloseDelay() {
@@ -612,7 +617,8 @@ function TooltipTrigger(props) {
 	}
 	function handleNestedTriggerHover(event) {
 		const wasNested = nestedTriggerHovered;
-		const target = getEventTarget(event);
+		const eventTarget = getEventTarget(event);
+		const target = isElement(eventTarget) ? eventTarget : event.target;
 		nestedTriggerHovered = isElement(target) && isEnabledNestedTriggerTarget(target);
 		if (nestedTriggerHovered) {
 			hoverControls?.cancelPendingOpen();
@@ -641,6 +647,7 @@ function TooltipTrigger(props) {
 	function handleTriggerPress(event) {
 		const current = store();
 		if (!(internalProps.closeOnClick ?? true)) return;
+		clearTimeout(nestedOpenTimer);
 		if (current.open()) current.setOpen(false, createChangeEventDetails(triggerPress, event, element() ?? void 0));
 		else {
 			current.cancelPendingOpen(event);
@@ -666,25 +673,22 @@ function TooltipTrigger(props) {
 	function getRootMouseMoveHandler() {
 		return getRootHandler("onMouseMove");
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => (event) => focusHandlers?.onBlur(event));
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => handleTriggerPress);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, getRootKeyDownHandler);
-	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => () => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), (event) => focusHandlers?.onBlur(event));
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), handleTriggerPress);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(getRootKeyDownHandler));
+	const onMouseLeave = composeEventHandlers(liveEventHandler(() => internalProps.onMouseLeave), () => {
 		nestedTriggerHovered = false;
 		pointerType = "";
 		clearTimeout(nestedOpenTimer);
 		focusHandlers?.onPointerLeave();
 	});
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, getRootMouseMoveHandler);
-	const onMouseOver = composeEventHandlers(() => internalProps.onMouseOver, () => handleNestedTriggerHover);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => handlePointerEnter);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), liveEventHandler(getRootMouseMoveHandler));
+	const onMouseOver = composeEventHandlers(liveEventHandler(() => internalProps.onMouseOver), handleNestedTriggerHover);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), handlePointerEnter);
 	onCleanup(() => clearTimeout(nestedOpenTimer));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return Render(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -747,7 +751,7 @@ function TooltipPortal(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() {
@@ -758,8 +762,8 @@ function TooltipPortal(props) {
 				value: portalContext,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						lite: true,
 						get container() {
@@ -840,8 +844,8 @@ function useTooltipPositionerContext() {
 //#region src/tooltip/positioner/TooltipPositioner.tsx
 /** Positions the tooltip against its active trigger. */
 function TooltipPositioner(props) {
-	useTooltipPortalContext();
 	const context = useTooltipRootContext();
+	useTooltipPortalContext();
 	const direction = useDirection();
 	const internalProps = props;
 	const allProps = props;
@@ -872,13 +876,14 @@ function TooltipPositioner(props) {
 		anchorHidden: positioning.anchorHidden(),
 		instant: context.store.trackCursorAxis() !== "none" ? "tracking-cursor" : context.store.track().instantType ?? (initialPositioning() ? "initial" : void 0)
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeTooltipStyles({
 		...positioning.styles(),
 		"pointer-events": !context.store.open() || context.store.trackCursorAxis() === "both" || context.store.disableHoverablePopup() ? "none" : void 0
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tooltipPositionerStateMapping));
-	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 positionerContext = {
 		side: positioning.renderedSide,
 		align: positioning.renderedAlign,
@@ -896,10 +901,7 @@ function TooltipPositioner(props) {
 	return TooltipPositionerContext({
 		value: positionerContext,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.setPositionerElement(value);
@@ -938,22 +940,20 @@ function TooltipPopup(props) {
 		instant: context.store.track().instantType,
 		transitionStatus: context.store.track().transitionStatus
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tooltipPopupStateMapping));
-	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => {
+	const others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		return typeof handler === "function" ? handler : void 0;
-	});
+	}));
 	let popupElement = null;
 	onCleanup(() => {
 		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((element) => {
 			popupElement = element;
 			context.store.setPopupElement(element);
@@ -987,14 +987,12 @@ function TooltipViewport(props) {
 		transitioning: transitioning(),
 		instant: context.store.track().instantType
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tooltipViewportStateMapping));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -1035,15 +1033,13 @@ function TooltipArrow(props) {
 		uncentered: positioner.arrowUncentered(),
 		instant: context.store.track().instantType
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeTooltipStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), tooltipArrowStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	onCleanup(() => positioner.setArrowElement(null));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((element) => positioner.setArrowElement(element)), internalProps.ref],
 		"aria-hidden": "true",
 		get ["class"]() {

package/dist/lib/server/use-render/index.js

@@ -0,0 +1,2 @@
+import { t as useRender } from "../useRender-CryVdCjs.js";
+export { useRender };