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

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

@@ -1,28 +1,29 @@
 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 { d as imperativeAction, i as closePress } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { c as isHTMLElement } 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 { t as InternalBackdrop } from "../InternalBackdrop-C_iDPVR-.js";
-import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-DFuUrykR.js";
-import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { l as isHTMLElement } from "../dom-D8_aB1yy.js";
+import { t as PopupViewport } from "../PopupViewport-BDttjORN.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 { t as createClickInteraction } from "../createClickInteraction-D7oc1Vco.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 { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
-import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } 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 { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "../FocusManager-D-xgblGs.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 { t as TriggerFocusGuards } from "../TriggerFocusGuards-B9GNbLrL.js";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
-import { Dynamic, escape, memo, mergeProps } 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/popover/store/PopoverStore.ts
 var PopoverStore = class extends PopupStore {
@@ -342,10 +343,11 @@ function PopoverTrigger(props) {
 		disabled: disabled(),
 		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(), store()?.openChangeReason() === "trigger-press" ? pressableTriggerOpenStateMapping : triggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "openOnHover", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "openOnHover", "payload", "ref", "style");
 	let clickHandlers;
 	let pointerType = "";
 	let clickPointerType = "";
@@ -396,11 +398,11 @@ function PopoverTrigger(props) {
 		const currentTarget = event.currentTarget;
 		if (popup && currentTarget && popup.ownerDocument !== currentTarget.ownerDocument && typeof rootHandler === "function") rootHandler(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => prepareClick, () => internalProps.onClick, () => handleClick);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), prepareClick, liveEventHandler(() => internalProps.onClick), handleClick);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
 	function TriggerInteractions() {
 		return Show({
 			keyed: true,
@@ -420,10 +422,7 @@ function PopoverTrigger(props) {
 			})
 		});
 	}
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const trigger = Render(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -543,7 +542,7 @@ function PopoverPortal(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() {
@@ -554,8 +553,8 @@ function PopoverPortal(props) {
 				value: portalContext,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -640,13 +639,14 @@ function PopoverPositioner(props) {
 		anchorHidden: positioning.anchorHidden(),
 		instant: context.store.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(() => mergePopoverStyles({
 		...positioning.styles(),
 		"pointer-events": context.store.open() ? void 0 : "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverPositionerStateMapping));
-	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 trueModalNonHover = createMemo(() => context.modal() === true && context.store.openChangeReason() !== "trigger-hover");
 	let previousTrigger = null;
 	let handoffController;
@@ -659,8 +659,9 @@ function PopoverPositioner(props) {
 	createEffect(() => positioning.state().placement, (placement) => {
 		context.store.context.floatingRoot.context.data.placement = placement;
 	});
+	const handoffTrigger = createMemo(() => context.store.open() ? context.store.track().activeTriggerElement : null);
 	createEffect(() => ({
-		trigger: context.store.track().activeTriggerElement,
+		trigger: handoffTrigger(),
 		positioner: element()
 	}), ({ trigger, positioner }) => {
 		const previous = previousTrigger;
@@ -708,10 +709,7 @@ function PopoverPositioner(props) {
 				get children() {
 					return ModalBackdrop({});
 				}
-			}), Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			}), Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.setPositionerElement(value);
@@ -786,17 +784,18 @@ function PopoverPopup(props) {
 		transitionStatus: context.store.track().transitionStatus,
 		instant: context.store.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(), popoverPopupTransitionStateMapping));
 	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
 	const focusManagerModal = createMemo(() => context.modal() !== false && closePartContext.hasClosePart());
 	const initialFocus = createMemo(() => internalProps.initialFocus ?? ((interactionType) => interactionType === "touch" ? context.store.state.popupElement : true));
-	const others = omit(allProps, "as", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const others = omit(allProps, "render", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
-	}, () => (event) => {
+	}, (event) => {
 		if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
 	let popupElement = null;
@@ -818,10 +817,7 @@ function PopoverPopup(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);
@@ -905,18 +901,16 @@ function PopoverArrow(props) {
 		align: positioner.renderedAlign(),
 		uncentered: positioner.arrowUncentered()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergePopoverStyles(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 Render(mergeProps({
 		ref: [((element) => {
 			arrowElement = element;
 			positioner.setArrowElement(element);
@@ -941,6 +935,7 @@ function PopoverBackdrop(props) {
 		open: context.store.open(),
 		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(() => mergePopoverStyles({
 		"pointer-events": context.store.openChangeReason() === "trigger-hover" ? "none" : void 0,
@@ -948,15 +943,12 @@ function PopoverBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popoverPopupTransitionStateMapping));
-	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 Render(mergeProps({
 		ref: [((element) => {
 			backdrop = element;
 			context.setBackdropElement(element);
@@ -983,17 +975,15 @@ function PopoverTitle(props) {
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("h2", props, void 0, true));
 	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(), (current) => {
 		context.setTitleId(current);
 		return () => context.setTitleId((existing) => existing === current ? void 0 : existing);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "h2";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -1016,17 +1006,15 @@ function PopoverDescription(props) {
 	const generatedId = `base-ui-${createUniqueId()}`;
 	const id = createMemo(() => internalProps.id || generatedId);
 	const state = {};
+	const Render = useRender(props, () => state, (props) => ssrElement("p", props, void 0, true));
 	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(), (current) => {
 		context.setDescriptionId(current);
 		return () => context.setDescriptionId((existing) => existing === current ? void 0 : existing);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "p";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -1050,21 +1038,19 @@ function PopoverClose(props) {
 	const disabled = createMemo(() => internalProps.disabled ?? false);
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const state = {};
+	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 others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	function handleClick(event) {
 		if (context.store.open()) context.store.setOpen(false, createChangeEventDetails(closePress, event));
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
@@ -1113,14 +1099,12 @@ function PopoverViewport(props) {
 		...viewportState(),
 		instant: context.store.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(), popoverViewportStateMapping));
-	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();

package/dist/lib/server/{popupStateMapping-nKoUwoke.js → popupStateMapping-VHqr6M4H.js}

@@ -1,8 +1,9 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { u as focusOut } from "./internals/reasons.js";
 import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
-import { c as isHTMLElement, m as ownerWindow, n as contains, o as isElementVisible, p as ownerDocument, t as activeElement, u as isShadowRoot } from "./dom-Crg_2R-j.js";
-import { Dynamic, Portal, escape, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { d as isShadowRoot, h as ownerWindow, l as isHTMLElement, m as ownerDocument, n as contains, s as isElementVisible, t as activeElement } from "./dom-D8_aB1yy.js";
+import { Portal, escape, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
 //#region src/internals/overlay/ReactiveStore.ts
 /** Synchronous imperative state with a Solid accessor bridge. */
@@ -88,7 +89,9 @@ function FocusGuard(props) {
 	const role = needsVoiceOverRole() ? "button" : void 0;
 	return ssrElement("span", () => {
 		return mergeProps(props, {
-			tabindex: 0,
+			get tabindex() {
+				return props.hidden ? -1 : 0;
+			},
 			role,
 			"aria-hidden": role ? void 0 : "true",
 			style: visuallyHidden$1,
@@ -240,6 +243,7 @@ function enableFocusInside(container) {
 var _tmpl$ = [
 	"<span",
 	"",
+	"",
 	" style=\"",
 	"\"></span>"
 ];
@@ -256,7 +260,7 @@ function resolveContainer(value) {
 	return value;
 }
 function PopupPortal(props) {
-	var _v$, _v$2;
+	var _v$, _g$;
 	const parentPortal = usePopupPortalContext();
 	const generatedId = createUniqueId();
 	const [portalNode, setPortalNode] = createSignal(null, { ownedWrite: true });
@@ -286,7 +290,8 @@ function PopupPortal(props) {
 		return resolved ?? parentPortal?.portalNode() ?? (typeof document === "undefined" ? void 0 : document.body);
 	});
 	const shouldRenderGuards = createMemo(() => !props.lite && Boolean(portalNode() && focusManagerState()?.open && focusManagerState()?.modal === false));
-	const others = omit(props, "as", "container", "lite", "children", "id", "ref");
+	const others = omit(props, "render", "container", "lite", "children", "id", "ref", "portalOwnerRole");
+	const Render = useRender(props, () => ({}), (props) => ssrElement("div", props, void 0, true));
 	createEffect(() => ({
 		node: portalNode(),
 		modal: focusManagerState()?.modal,
@@ -295,7 +300,7 @@ function PopupPortal(props) {
 		if (lite || !node || modal) return;
 		const onFocus = (event) => {
 			if (!event.relatedTarget || !isOutsideFocusEvent(event, node)) return;
-			if (event.type === "focusin") {
+			if (event.type === "focus") {
 				if (focusInsideDisabled) {
 					enableFocusInside(node);
 					focusInsideDisabled = false;
@@ -305,11 +310,11 @@ function PopupPortal(props) {
 				focusInsideDisabled = true;
 			}
 		};
-		node.addEventListener("focusin", onFocus, true);
-		node.addEventListener("focusout", onFocus, true);
+		node.addEventListener("focus", onFocus, true);
+		node.addEventListener("blur", onFocus, true);
 		return () => {
-			node.removeEventListener("focusin", onFocus, true);
-			node.removeEventListener("focusout", onFocus, true);
+			node.removeEventListener("focus", onFocus, true);
+			node.removeEventListener("blur", onFocus, true);
 		};
 	});
 	createEffect(() => ({
@@ -333,10 +338,7 @@ function PopupPortal(props) {
 						return container();
 					},
 					get children() {
-						return Dynamic(mergeProps({
-							get component() {
-								return props.as ?? "div";
-							},
+						return Render(mergeProps({
 							get id() {
 								return portalId();
 							},
@@ -368,9 +370,9 @@ function PopupPortal(props) {
 						if (isOutsideFocusEvent(event, node)) beforeInside()?.focus();
 						else getPreviousTabbable(state.domReference)?.focus();
 					}
-				}), (_v$ = ssrHydrationKey(), _v$2 = () => {
-					return ssrAttribute("aria-owns", escape(portalId() || void 0, true));
-				}, ssr(_tmpl$, _v$, _v$2, ssrStyle(visuallyHidden)))];
+				}), (_v$ = ssrHydrationKey(), _g$ = ssrGroup(() => {
+					return [ssrAttribute("role", escape(props.portalOwnerRole, true)), ssrAttribute("aria-owns", escape(portalId() || void 0, true))];
+				}, 2), ssr(_tmpl$, _v$, _g$, _g$, ssrStyle(visuallyHidden)))];
 			}
 		}),
 		Show({

package/dist/lib/server/preview-card/index.js

@@ -1,21 +1,22 @@
 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 { d as imperativeAction } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { a as isElement } 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 { 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, r as FloatingRootStore, 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, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } 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, r as FloatingRootStore, 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, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } 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, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/internals/overlay/inlineRect.ts
 function createRect(left, top, right, bottom) {
@@ -326,10 +327,11 @@ function PreviewCardTrigger(props) {
 		return Boolean(current?.open() && current.activeTriggerId() === id());
 	});
 	const state = createMemo(() => ({ open: open() }));
+	const Render = useRender(props, () => state(), (props) => ssrElement("a", 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", "delay", "handle", "id", "onBlur", "onFocus", "onKeyDown", "onMouseEnter", "onMouseMove", "onPointerLeave", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "delay", "handle", "id", "onBlur", "onFocus", "onKeyDown", "onMouseEnter", "onMouseMove", "onPointerLeave", "payload", "ref", "style");
 	let focusHandlers;
 	createTriggerRegistration(store, id, element, () => ({
 		payload: internalProps.payload,
@@ -353,12 +355,12 @@ function PreviewCardTrigger(props) {
 		const handler = current?.state[current.activeTriggerId() === id() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown;
 		if (typeof handler === "function") handler(event);
 	}
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => handlePointerLeave);
-	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => updateInlineRect);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => updateInlineRect);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onPointerLeave = composeEventHandlers(liveEventHandler(() => internalProps.onPointerLeave), handlePointerLeave);
+	const onMouseEnter = composeEventHandlers(liveEventHandler(() => internalProps.onMouseEnter), updateInlineRect);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), updateInlineRect);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	return [Show({
 		keyed: true,
 		get when() {
@@ -372,10 +374,7 @@ function PreviewCardTrigger(props) {
 			closeDelay,
 			setFocusHandlers: (handlers) => focusHandlers = handlers
 		})
-	}), Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "a";
-		},
+	}), Render(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -441,7 +440,7 @@ function PreviewCardPortal(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() {
@@ -452,8 +451,8 @@ function PreviewCardPortal(props) {
 				value: portalContext,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -548,13 +547,14 @@ function PreviewCardPositioner(props) {
 		anchorHidden: positioning.anchorHidden(),
 		instant: 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(() => mergePreviewCardStyles({
 		...positioning.styles(),
 		"pointer-events": context.store.open() ? void 0 : "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupStateMapping));
-	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");
 	let positionerElement = null;
 	createEffect(() => positioning.state().placement, (placement) => {
 		context.store.context.floatingRoot.context.data.placement = placement;
@@ -566,10 +566,7 @@ function PreviewCardPositioner(props) {
 	return PreviewCardPositionerContext({
 		value: positioning,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					positionerElement = element;
 					context.store.setPositionerElement(element);
@@ -603,11 +600,12 @@ function PreviewCardPopup(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(), previewCardPopupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
 	});
@@ -615,10 +613,7 @@ function PreviewCardPopup(props) {
 	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);
@@ -648,18 +643,16 @@ function PreviewCardArrow(props) {
 		align: positioner.renderedAlign(),
 		uncentered: positioner.arrowUncentered()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergePreviewCardStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupStateMapping));
-	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 Render(mergeProps({
 		ref: [((element) => {
 			arrowElement = element;
 			positioner.setArrowElement(element);
@@ -684,6 +677,7 @@ function PreviewCardBackdrop(props) {
 		open: context.store.open(),
 		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(() => mergePreviewCardStyles({
 		"pointer-events": "none",
@@ -691,11 +685,8 @@ function PreviewCardBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), previewCardPopupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		role: "presentation",
 		get hidden() {
@@ -726,14 +717,12 @@ function PreviewCardViewport(props) {
 		...viewportState(),
 		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(), previewCardViewportStateMapping));
-	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();