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

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

@@ -1,32 +1,34 @@
 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 { F as windowResize, S as listNavigation, t as cancelOpen, w as none, y as itemPress } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { m as ownerWindow, n as contains, p as ownerDocument } from "../dom-Crg_2R-j.js";
-import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
-import { t as InternalBackdrop } from "../InternalBackdrop-C_iDPVR-.js";
-import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-DFuUrykR.js";
-import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { h as ownerWindow, m as ownerDocument, n as contains } from "../dom-D8_aB1yy.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-DrQYe7RS.js";
+import { t as InternalBackdrop } from "../InternalBackdrop-D_2zAWnl.js";
+import { t as createAnchoredPopupScrollLock } from "../createAnchoredPopupScrollLock-q6gnOSmv.js";
+import { 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 { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.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 { 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 { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.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 { 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 { fieldStateAttributesMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { a as defaultItemEquality, c as removeItem, i as compareItemEquality, n as isSolidAccessor, o as findItemIndex, r as areItemArraysEqual, t as mergeStyleValue } from "../mergeStyleValue-Db8bRCM4.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { a as findItemIndex, i as defaultItemEquality, n as areItemArraysEqual, o as findSelectionIndex, r as compareItemEquality, s as removeItem, t as isSolidAccessor } from "../isSolidAccessor-CZpzAH5l.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
-import { Dynamic, escape, memo, mergeProps, scope, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, merge, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/select/utils/value.ts
 function serializeValue(value, itemToStringValue) {
@@ -559,15 +561,7 @@ function SelectRoot(props) {
 	});
 	const presence = createPopupPresence(store, () => store.track().popupElement, { onUnmount: () => store.resetAfterClose() });
 	const selectedIndex = createMemo(() => {
-		const values = store.collection.values();
-		const current = value();
-		if (multiple()) {
-			if (!Array.isArray(current) || current.length === 0) return null;
-			const index = findItemIndex(values, current[current.length - 1], comparator());
-			return index === -1 ? null : index;
-		}
-		const index = findItemIndex(values, current, comparator());
-		return index === -1 ? null : index;
+		return findSelectionIndex(store.collection.values(), value(), comparator(), multiple());
 	});
 	function setValue(nextValue, details) {
 		props.onValueChange?.(nextValue, details);
@@ -594,7 +588,7 @@ function SelectRoot(props) {
 		handleNavigation(event);
 	}
 	function handleNavigation(event) {
-		if (disabled() || readOnly() || ![
+		if (disabled() || ![
 			"ArrowDown",
 			"ArrowUp",
 			"Home",
@@ -622,7 +616,7 @@ function SelectRoot(props) {
 		store.setTyping(false);
 	}
 	function handleTypeahead(event) {
-		if (disabled() || readOnly() || !store.open() && multiple() || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		if (disabled() || readOnly() && !store.open() || !store.open() && multiple() || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
 		if (typed && event.key === " ") {
 			event.preventDefault();
 			event.stopPropagation();
@@ -928,7 +922,7 @@ function SelectLabel(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
-	const others = omit(allProps, "as", "class", "id", "onClick", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "onClick", "onPointerDown", "ref", "style");
 	function focusTrigger(event) {
 		const target = event.composedPath()[0];
 		if (target instanceof Element && target.closest("button,input,select,textarea,a[href]")) return;
@@ -938,8 +932,8 @@ function SelectLabel(props) {
 	function preventPointerFocus(event) {
 		event.preventDefault();
 	}
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusTrigger);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), focusTrigger);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), preventPointerFocus);
 	createEffect(id, (currentId) => {
 		context.store.setLabelId(currentId);
 		const unregister = labelable.registerLabelId(currentId);
@@ -948,10 +942,7 @@ function SelectLabel(props) {
 			if (untrack(() => context.store.labelId()) === currentId) context.store.setLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
@@ -1005,10 +996,10 @@ function SelectTrigger(props) {
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), selectTriggerStateMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? context.store.labelId());
 	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "class", "disabled", "id", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "class", "disabled", "id", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const click = createClickInteraction({
 		context: context.store.context.floatingRoot,
-		enabled: () => !disabled() && !context.readOnly(),
+		enabled: () => !disabled(),
 		event: () => "mousedown"
 	});
 	let pointerType = "";
@@ -1064,13 +1055,13 @@ function SelectTrigger(props) {
 		pointerType = "keyboard";
 		context.handleKeyDown(event);
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	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 onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	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)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		id: id(),
 		element: element()
@@ -1078,7 +1069,7 @@ function SelectTrigger(props) {
 		context.setTriggerElement(current.element);
 		labelable.registerControlId(labelSource, current.id);
 		return () => {
-			if (context.triggerElement() === current.element) context.setTriggerElement(null);
+			if (untrack(context.triggerElement) === current.element) context.setTriggerElement(null);
 		};
 	});
 	onCleanup(() => {
@@ -1086,10 +1077,7 @@ function SelectTrigger(props) {
 		removeMouseUp?.();
 		labelable.registerControlId(labelSource, void 0);
 	});
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const trigger = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -1186,7 +1174,7 @@ function SelectValue(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), { value: () => null }));
-	const others = omit(allProps, "as", "children", "class", "placeholder", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "placeholder", "ref", "style");
 	const content = createMemo(() => {
 		const child = props.children;
 		if (typeof child === "function") return isSolidAccessor(child) ? untrack(() => child()) : child(context.value());
@@ -1197,41 +1185,17 @@ function SelectValue(props) {
 		return resolveSelectedLabel(current, context.items(), context.itemToStringLabel());
 	});
 	const ref = [((element) => context.setValueElement(element)), internalProps.ref];
-	return Show({
-		get when() {
-			return props.as;
-		},
-		get fallback() {
-			return ssrElement("span", () => {
-				return mergeProps({
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, () => {
-				return scope(() => {
-					return escape(content());
-				});
-			}, true);
+	return useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true))(mergeProps({
+		ref,
+		get ["class"]() {
+			return classValue();
 		},
-		children: (component) => Dynamic(mergeProps({
-			get component() {
-				return component();
-			},
-			ref,
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others, { get children() {
-			return content();
-		} }))
-	});
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return content();
+	} }));
 }
 //#endregion
 //#region src/select/icon/SelectIcon.tsx
@@ -1244,44 +1208,19 @@ function SelectIcon(props) {
 	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", "ref", "style");
-	return Show({
-		get when() {
-			return props.as;
-		},
-		get fallback() {
-			return ssrElement("span", () => {
-				return mergeProps({
-					"aria-hidden": "true",
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, () => {
-				return () => {
-					return escape(props.children ?? "▼");
-				};
-			}, true);
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true))(mergeProps({
+		ref: [internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
 		},
-		children: (component) => Dynamic(mergeProps({
-			get component() {
-				return component();
-			},
-			ref: [internalProps.ref],
-			"aria-hidden": "true",
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others, { get children() {
-			return props.children ?? "▼";
-		} }))
-	});
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return props.children ?? "▼";
+	} }));
 }
 //#endregion
 //#region src/select/portal/SelectPortalContext.ts
@@ -1301,7 +1240,7 @@ function SelectPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "ref", "style");
 	return Show({
 		get when() {
 			return shouldRender();
@@ -1311,8 +1250,8 @@ function SelectPortal(props) {
 				value: true,
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -1349,15 +1288,12 @@ function SelectBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let backdrop = null;
 	onCleanup(() => {
 		if (context.backdropElement() === backdrop) context.setBackdropElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			backdrop = element;
 			context.setBackdropElement(element);
@@ -1434,7 +1370,7 @@ function SelectPositioner(props) {
 		transition: context.store.track().transitionStatus === "starting" ? "none" : void 0
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), selectPositionerStateMapping));
-	const others = omit(allProps, "align", "alignItemWithTrigger", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const others = omit(allProps, "align", "alignItemWithTrigger", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
 	let previousSize = 0;
 	createAnchoredPopupScrollLock({
 		enabled: () => context.store.open() && (alignItemWithTriggerActive() || context.modal()),
@@ -1456,7 +1392,7 @@ function SelectPositioner(props) {
 	}), ({ size, values }) => {
 		const oldSize = previousSize;
 		previousSize = size;
-		if (oldSize === 0 || size === oldSize || values.length === 0) return;
+		if (oldSize === 0 || values.length === 0) return;
 		untrack(() => {
 			const current = context.value();
 			if (context.multiple()) {
@@ -1472,7 +1408,7 @@ function SelectPositioner(props) {
 				context.setValue(next, createChangeEventDetails(none));
 				if (next === null) context.setSelectedItemText(null);
 			}
-			if (context.store.open() && alignItemWithTriggerActive()) {
+			if (size !== oldSize && context.store.open() && alignItemWithTriggerActive()) {
 				context.store.setScrollUpVisible(false);
 				context.store.setScrollDownVisible(false);
 				element()?.style.removeProperty("height");
@@ -1513,6 +1449,7 @@ function SelectPositioner(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return SelectPositionerContext({
 		value: positionerContext,
 		get children() {
@@ -1525,10 +1462,7 @@ function SelectPositioner(props) {
 				get children() {
 					return ModalBackdrop({});
 				}
-			}), Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			}), Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.setPositionerElement(value);
@@ -1595,7 +1529,7 @@ function SelectPopup(props) {
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), selectPopupStateMapping));
 	const id = createMemo(() => internalProps.id ?? `${context.id()}-list`);
-	const others = omit(allProps, "as", "class", "finalFocus", "id", "onBlur", "onKeyDown", "onScroll", "ref", "style");
+	const others = omit(allProps, "render", "class", "finalFocus", "id", "onBlur", "onKeyDown", "onScroll", "ref", "style");
 	let popupElement = null;
 	let initialPlaced = false;
 	let reachedMaxHeight = false;
@@ -1647,14 +1581,14 @@ function SelectPopup(props) {
 		reachedMaxHeight = roundedHeight >= maximumHeight - 1;
 		setArrowVisibility(scroller);
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => context.handleTypeaheadBlur);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), liveEventHandler(() => context.handleTypeaheadBlur));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), (event) => {
 		const handler = context.store.state.popupProps.onKeyDown;
 		if (typeof handler === "function") Reflect.apply(handler, event.currentTarget, [event]);
-	}, () => (event) => {
+	}, (event) => {
 		if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
 	});
-	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => (event) => {
+	const onScroll = composeEventHandlers(liveEventHandler(() => internalProps.onScroll), (event) => {
 		if (!context.store.listElement()) handleScroll(event.currentTarget);
 	});
 	createEffect(() => id(), (currentId) => context.store.setPopupId(currentId));
@@ -1835,10 +1769,7 @@ function SelectPopup(props) {
 	}
 	function PopupElement() {
 		const list = () => context.store.listElement();
-		return Dynamic(mergeProps({
-			get component() {
-				return props.as ?? "div";
-			},
+		return Render(mergeProps({
 			ref: [((element) => {
 				popupElement = element;
 				context.store.setPopupElement(element);
@@ -1856,8 +1787,8 @@ function SelectPopup(props) {
 			get ["data-rootownerid"]() {
 				return context.node.id;
 			},
-			get ["aria-orientation"]() {
-				return list() ? void 0 : "vertical";
+			get ["aria-readonly"]() {
+				return !list() && context.readOnly() ? "true" : void 0;
 			},
 			get ["aria-multiselectable"]() {
 				return !list() && context.multiple() ? "true" : void 0;
@@ -1873,6 +1804,7 @@ function SelectPopup(props) {
 			onScroll
 		}, stateAttributes, others));
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return FocusManager({
 		get context() {
 			return context.store.context.floatingRoot;
@@ -1967,16 +1899,13 @@ function SelectList(props) {
 		...positioner.alignItemWithTriggerActive() ? SELECT_LIST_FUNCTIONAL_STYLES : {},
 		"scrollbar-width": context.store.hasScrollArrows() && context.store.openMethod() !== "touch" ? "none" : void 0
 	}, resolveStyle(props.style, state)));
-	const others = omit(allProps, "as", "class", "id", "onScroll", "ref", "style");
-	const onScroll = composeEventHandlers(() => internalProps.onScroll, () => (event) => context.handleScroll(event.currentTarget));
+	const others = omit(allProps, "render", "class", "id", "onScroll", "ref", "style");
+	const onScroll = composeEventHandlers(liveEventHandler(() => internalProps.onScroll), (event) => context.handleScroll(event.currentTarget));
 	let listElement = null;
 	onCleanup(() => {
 		if (context.store.listElement() === listElement) context.store.setListElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			listElement = element;
 			context.store.setListElement(element);
@@ -1985,6 +1914,9 @@ function SelectList(props) {
 			return internalProps.id ?? `${context.id()}-list`;
 		},
 		role: "listbox",
+		get ["aria-readonly"]() {
+			return context.readOnly() ? "true" : void 0;
+		},
 		get ["aria-multiselectable"]() {
 			return context.multiple() ? "true" : void 0;
 		},
@@ -2043,7 +1975,7 @@ function SelectItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "disabled", "id", "label", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerEnter", "onPointerMove", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "disabled", "id", "label", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerEnter", "onPointerMove", "ref", "style", "value");
 	let pointerType = "mouse";
 	let allowMouseSelection = false;
 	let dispatchedClickHandled = false;
@@ -2131,18 +2063,18 @@ function SelectItem(props) {
 		element()?.click();
 		allowMouseSelection = false;
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onKeyUp = composeEventHandlers(() => internalProps.onKeyUp, () => handleKeyUp);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => handleMouseUp);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => handleMouseMove);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => internalProps.onKeyUp), handleKeyUp);
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), handleMouseUp);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), handleMouseMove);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), (event) => {
 		pointerType = event.pointerType;
 	});
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerMove);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), handlePointerMove);
 	createEffect(() => ({
 		index: index(),
 		selectedByFocus: selectedByFocus(),
@@ -2156,19 +2088,18 @@ function SelectItem(props) {
 		if (context.firstItemText() === untrack(textElement)) context.setFirstItemText(null);
 		if (context.selectedItemText() === untrack(textElement)) context.setSelectedItemText(null);
 	});
+	const itemContext = {
+		selected,
+		selectedByFocus,
+		index,
+		textElement,
+		setTextElement
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return SelectItemContext({
-		value: {
-			selected,
-			selectedByFocus,
-			index,
-			textElement,
-			setTextElement
-		},
+		value: itemContext,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.collection.touch();
@@ -2236,7 +2167,7 @@ function SelectItemIndicator(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), transitionStatusMapping));
-	const others = omit(allProps, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "keepMounted", "ref", "style");
 	let element;
 	createEffect(() => ({
 		selected: item.selected(),
@@ -2250,15 +2181,13 @@ function SelectItemIndicator(props) {
 		}, controller.signal);
 		return () => controller.abort();
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((value) => element = value), internalProps.ref],
 				"aria-hidden": "true",
 				get ["class"]() {
@@ -2284,7 +2213,7 @@ function SelectItemText(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	createEffect(() => ({
 		index: item.index(),
 		selected: item.selectedByFocus(),
@@ -2301,10 +2230,7 @@ function SelectItemText(props) {
 			if (root.selectedItemText() === text) root.setSelectedItemText(null);
 		});
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => item.setTextElement(element)), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -2331,20 +2257,18 @@ function SelectArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeStyleValue(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 arrow = null;
 	onCleanup(() => {
 		if (arrow) positioner.setArrowElement(null);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return !positioner.alignItemWithTriggerActive();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					arrow = element;
 					positioner.setArrowElement(element);
@@ -2382,7 +2306,7 @@ function SelectScrollArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeStyleValue({ position: "absolute" }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), transitionStatusMapping));
-	const others = omit(allProps, "as", "class", "direction", "keepMounted", "onMouseLeave", "onMouseMove", "ref", "style");
+	const others = omit(allProps, "render", "class", "direction", "keepMounted", "onMouseLeave", "onMouseMove", "ref", "style");
 	let element = null;
 	let timer;
 	function stop() {
@@ -2408,8 +2332,8 @@ function SelectScrollArrow(props) {
 		if (items.length > 0) scroller.scrollTop = getTargetScrollTop(items, isUp(), offset, scroller.clientHeight, element?.offsetHeight ?? 0, maximum);
 		timer = setTimeout(scrollNext, 40);
 	}
-	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => stop);
-	const onMouseMove = composeEventHandlers(() => internalProps.onMouseMove, () => start);
+	const onMouseLeave = composeEventHandlers(liveEventHandler(() => internalProps.onMouseLeave), stop);
+	const onMouseMove = composeEventHandlers(liveEventHandler(() => internalProps.onMouseMove), start);
 	root.scrollArrowsMounted.count += 1;
 	root.store.setHasScrollArrows(true);
 	createEffect(() => ({
@@ -2431,15 +2355,13 @@ function SelectScrollArrow(props) {
 		if (isUp()) positioner.setScrollUpArrow(null);
 		else positioner.setScrollDownArrow(null);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					element = value;
 					if (isUp()) positioner.setScrollUpArrow(value);
@@ -2516,17 +2438,15 @@ function SelectGroup(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return SelectGroupContext({
 		value: {
 			labelId,
 			setLabelId
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				role: "group",
 				get ["aria-labelledby"]() {
@@ -2554,21 +2474,19 @@ function SelectGroupLabel(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "ref", "style");
 	createEffect(id, (currentId) => {
 		context.setLabelId(currentId);
 		return () => {
 			if (context.labelId() === currentId) context.setLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
 		},
+		"aria-hidden": "true",
 		get ["class"]() {
 			return classValue();
 		},
@@ -2588,11 +2506,8 @@ function SelectSeparator(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "orientation", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "class", "orientation", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		role: "presentation",
 		get ["class"]() {