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

package/dist/lib/server/otp-field/index.js

@@ -1,4 +1,5 @@
 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 { _ as inputPaste, b as keyboard, g as inputClear, h as inputChange } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
@@ -7,10 +8,10 @@ import { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { fieldValidityMapping } from "../internals/field-constants.js";
 import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
-import { t as Separator } from "../Separator-vhhYxWGr.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/otp-field/utils/otp.ts
 var OTP_VALIDATION_CONFIG = {
@@ -166,7 +167,7 @@ function OTPFieldRoot(props) {
 	let disposed = false;
 	let slotChangeQueued = false;
 	let valueEffectVersion = 0;
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "autoComplete", "autoSubmit", "class", "defaultValue", "disabled", "form", "id", "inputMode", "length", "mask", "name", "normalizeValue", "onChange", "onValueChange", "onValueComplete", "onValueInvalid", "readOnly", "ref", "required", "style", "validationType", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "autoComplete", "autoSubmit", "class", "defaultValue", "disabled", "form", "id", "inputMode", "length", "mask", "name", "normalizeValue", "onChange", "onValueChange", "onValueComplete", "onValueInvalid", "readOnly", "ref", "required", "style", "validationType", "value");
 	const length = createMemo(() => internalProps.length);
 	const validationType = createMemo(() => internalProps.validationType ?? "numeric");
 	const normalizeValue = () => internalProps.normalizeValue;
@@ -201,6 +202,7 @@ function OTPFieldRoot(props) {
 		value: value()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), rootStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
@@ -506,10 +508,7 @@ function OTPFieldRoot(props) {
 	return OTPFieldRootContext({
 		value: context,
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return [Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -583,11 +582,12 @@ function OTPFieldInput(props) {
 	const direction = useDirection();
 	const registration = root.registerInput();
 	const internalProps = props;
-	const others = omit(props, "aria-label", "aria-labelledby", "as", "class", "defaultChecked", "defaultValue", "index", "onBlur", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPaste", "ref", "style");
+	const others = omit(props, "aria-label", "aria-labelledby", "render", "class", "defaultChecked", "defaultValue", "index", "onBlur", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPaste", "ref", "style");
 	const index = registration.index;
 	const slotValue = createMemo(() => root.value()[index()] ?? "");
 	const state = createMemo(() => getOTPFieldInputState(root.state(), slotValue(), index()));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), inputStateAttributesMapping));
 	const ariaLabel = createMemo(() => index() === 0 ? void 0 : internalProps["aria-label"]);
@@ -715,10 +715,7 @@ function OTPFieldInput(props) {
 		if (isDevelopment() && current.element && current.index === 0 && current.label != null && !current.element.labels?.length) console.warn("<OTPField.Input> ignores `aria-label` on the first input. Use a `<label>` or `<Field.Label>` to label the OTP field.");
 	});
 	onCleanup(registration.unregister);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
+	return Render(mergeProps({
 		ref: [((element) => {
 			setInputElement(element);
 			registration.setElement(element);

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 { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.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 PopupViewport } from "../PopupViewport-DftN5VUp.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.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 { 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-kHjFPiQ5.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-C1GNJbKR.js";
+import { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-B2KsiiLb.js";
+import { t as FocusManager } from "../FocusManager-1LfoCsya.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-Ct6wywmP.js";
 import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-CvoGfft9.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 = "";
@@ -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;
@@ -708,10 +708,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,13 +783,14 @@ 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 others = omit(allProps, "render", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
 	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") handler(event);
@@ -818,10 +816,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 +900,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 +934,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 +942,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 +974,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 +1005,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,9 +1037,10 @@ 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));
 	}
@@ -1061,10 +1049,7 @@ function PopoverClose(props) {
 	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";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get type() {
 			return nativeButton() ? "button" : void 0;
@@ -1113,14 +1098,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-B2KsiiLb.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 { 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 { t as PopupViewport } from "../PopupViewport-DftN5VUp.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-B5Y0WEev.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-kHjFPiQ5.js";
+import { t as createFocusInteraction } from "../createFocusInteraction-DMyKsniI.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-C1GNJbKR.js";
+import { a as triggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-B2KsiiLb.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, r as attachPopupHandle, t as BasePopupHandle } from "../PopupHandle-Ct6wywmP.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,
@@ -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,10 +600,11 @@ 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 others = omit(allProps, "render", "class", "onKeyDown", "ref", "style");
 	const onKeyDown = composeEventHandlers(() => 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();