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

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

@@ -1,32 +1,33 @@
 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 { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.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 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 { 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-kHjFPiQ5.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-B2KsiiLb.js";
+import { t as FocusManager } from "../FocusManager-1LfoCsya.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 { 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 { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { a as defaultItemEquality, c as removeItem, i as compareItemEquality, n as isSolidAccessor, o as findItemIndex, r as areItemArraysEqual, s as findSelectionIndex, t as mergeStyleValue } from "../mergeStyleValue-BwJ10_X2.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.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 +560,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 +587,7 @@ function SelectRoot(props) {
 		handleNavigation(event);
 	}
 	function handleNavigation(event) {
-		if (disabled() || readOnly() || ![
+		if (disabled() || ![
 			"ArrowDown",
 			"ArrowUp",
 			"Home",
@@ -622,7 +615,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 +921,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;
@@ -948,10 +941,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 +995,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 = "";
@@ -1078,7 +1068,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 +1076,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 +1173,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 +1184,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 +1207,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 +1239,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 +1249,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 +1287,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 +1369,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 +1391,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 +1407,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 +1448,7 @@ function SelectPositioner(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return SelectPositionerContext({
 		value: positionerContext,
 		get children() {
@@ -1525,10 +1461,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 +1528,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;
@@ -1835,10 +1768,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 +1786,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 +1803,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 +1898,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 others = omit(allProps, "render", "class", "id", "onScroll", "ref", "style");
 	const onScroll = composeEventHandlers(() => 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 +1913,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 +1974,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;
@@ -2156,19 +2087,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 +2166,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 +2180,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 +2212,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 +2229,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 +2256,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 +2305,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() {
@@ -2431,15 +2354,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 +2437,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 +2473,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 +2505,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"]() {

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

@@ -1,2 +1,2 @@
-import { t as Separator } from "../Separator-vhhYxWGr.js";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
 export { Separator };