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

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 };

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

@@ -1,17 +1,18 @@
 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 { A as trackPress, b as keyboard, c as drag, h as inputChange, w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.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 { 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 { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
-import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, escape, isServer, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { escape, isServer, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
 //#region src/slider/stateAttributesMapping.ts
 var omitStateAttribute = () => null;
@@ -122,7 +123,7 @@ function SliderRoot(props) {
 		pressedValues: null,
 		lastChangeReason: none
 	};
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "class", "defaultValue", "disabled", "format", "form", "id", "largeStep", "locale", "max", "min", "minStepsBetweenValues", "name", "onValueChange", "onValueCommitted", "orientation", "ref", "step", "style", "thumbAlignment", "thumbCollisionBehavior", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "class", "defaultValue", "disabled", "format", "form", "id", "largeStep", "locale", "max", "min", "minStepsBetweenValues", "name", "onValueChange", "onValueCommitted", "orientation", "ref", "step", "style", "thumbAlignment", "thumbCollisionBehavior", "value");
 	const id = createMemo(() => internalProps.id ?? generatedId);
 	const min = createMemo(() => internalProps.min ?? 0);
 	const max = createMemo(() => internalProps.max ?? 100);
@@ -157,6 +158,7 @@ function SliderRoot(props) {
 		values: values()
 	}));
 	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(), sliderStateAttributesMapping));
 	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
@@ -335,10 +337,7 @@ function SliderRoot(props) {
 	return SliderRootContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get id() {
 					return id();
@@ -400,9 +399,10 @@ function SliderLabel(props) {
 	const context = useSliderRootContext();
 	const labelable = useLabelableContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "id", "onClick", "onPointerDown", "ref", "style");
+	const others = omit(props, "render", "class", "id", "onClick", "onPointerDown", "ref", "style");
 	const state = createMemo(() => context.state());
 	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(), sliderStateAttributesMapping));
 	function focusControl(event) {
@@ -422,8 +422,8 @@ function SliderLabel(props) {
 	function preventPointerFocus(event) {
 		event.preventDefault();
 	}
-	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusControl);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	const onClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick), focusControl);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), preventPointerFocus);
 	createEffect(context.rootLabelId, (id) => {
 		context.setLocalLabelId(id);
 		const unregister = labelable.registerLabelId(id);
@@ -432,10 +432,7 @@ function SliderLabel(props) {
 			if (untrack(context.labelId) === id) context.setLocalLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return context.rootLabelId();
@@ -456,18 +453,16 @@ function SliderLabel(props) {
 function SliderValue(props) {
 	const context = useSliderRootContext();
 	const internalProps = props;
-	const others = omit(props, "aria-live", "as", "children", "class", "ref", "style");
+	const others = omit(props, "aria-live", "render", "children", "class", "ref", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("output", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	const formattedValues = createMemo(() => context.values().map((value) => formatNumber(value, context.locale(), context.format())));
 	const content = createMemo(() => typeof internalProps.children === "function" ? internalProps.children(formattedValues(), context.values()) : formattedValues().join(" – "));
 	const outputFor = createMemo(() => context.orderedThumbs().map((thumb) => thumb.inputId()).join(" ").trim() || void 0);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "output";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -588,9 +583,10 @@ function SliderControl(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "class", "onPointerDown", "onTouchStart", "ref", "style");
+	const others = omit(allProps, "render", "class", "onPointerDown", "onTouchStart", "ref", "style");
 	const state = createMemo(() => context.state());
 	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(), sliderStateAttributesMapping));
 	let touchId = null;
@@ -804,8 +800,8 @@ function SliderControl(props) {
 		}
 		listeningDocument = null;
 	}
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => handleTouchStart);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), handleTouchStart);
 	createEffect(element, (control) => {
 		context.setControlElement(control);
 		if (!control) return;
@@ -831,10 +827,7 @@ function SliderControl(props) {
 		} catch {}
 		stopListening();
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((control) => setElement(control)), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -893,15 +886,13 @@ function getDeepActiveElement(document) {
 function SliderTrack(props) {
 	const context = useSliderRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
-	const styleValue = createMemo(() => mergeStyles({ position: "relative" }, resolveStyle(props.style, state())));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
+	const styleValue = createMemo(() => mergeStyleValue({ position: "relative" }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -1013,7 +1004,7 @@ function SliderThumb(props) {
 	const automaticIndex = createMemo(() => context.orderedThumbs().indexOf(registration));
 	const index = createMemo(() => !context.range() ? 0 : internalProps.index ?? automaticIndex());
 	indexAccessor = index;
-	const others = omit(allProps, "aria-describedby", "aria-label", "aria-labelledby", "aria-valuetext", "as", "children", "class", "disabled", "getAriaLabel", "getAriaValueText", "id", "index", "inputRef", "onBlur", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "tabIndex");
+	const others = omit(allProps, "aria-describedby", "aria-label", "aria-labelledby", "aria-valuetext", "render", "children", "class", "disabled", "getAriaLabel", "getAriaValueText", "id", "index", "inputRef", "onBlur", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "tabIndex");
 	const thumbValue = createMemo(() => context.values()[index()]);
 	const thumbValuePercent = createMemo(() => valueToPercent(thumbValue(), context.min(), context.max()));
 	const range = context.range;
@@ -1022,6 +1013,7 @@ function SliderThumb(props) {
 	const last = createMemo(() => index() === context.values().length - 1);
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const internalStyle = createMemo(() => {
 		const percent = thumbValuePercent();
 		if (!context.inset() && !Number.isFinite(percent)) return VISUALLY_HIDDEN_STYLE;
@@ -1043,7 +1035,7 @@ function SliderThumb(props) {
 			} : {}
 		};
 	});
-	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => mergeStyleValue(internalStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	const indexAttribute = createMemo(() => ({ [SliderThumbDataAttributes.index]: String(index()) }));
 	const formattedValue = createMemo(() => formatNumber(thumbValue(), context.locale(), context.format()));
@@ -1155,10 +1147,10 @@ function SliderThumb(props) {
 		context.interaction.pressedThumbIndex = index();
 		context.interaction.pressedThumbCenterOffset = (vertical() ? event.clientY : event.clientX) - getMidpoint(event.currentTarget, vertical());
 	}
-	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onFocus, () => handleFocus);
-	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onBlur, () => handleBlur);
-	composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	composeEventHandlers(liveEventHandler(() => restoringFocusVisible ? void 0 : internalProps.onFocus), handleFocus);
+	composeEventHandlers(liveEventHandler(() => restoringFocusVisible ? void 0 : internalProps.onBlur), handleBlur);
+	composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		control: context.controlElement(),
 		inset: context.inset(),
@@ -1183,10 +1175,7 @@ function SliderThumb(props) {
 		setHydrating(false);
 	});
 	onCleanup(unregisterThumb);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((thumb) => {
 			setElement(thumb);
 			const prehydratedPosition = Number.parseFloat(thumb.style.getPropertyValue("--position"));
@@ -1263,9 +1252,10 @@ function SliderIndicator(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [hydrating, setHydrating] = createSignal(isServer || sharedConfig.hydrating);
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const indicatorStyle = createMemo(() => {
 		const values = context.values();
 		const vertical = context.orientation() === "vertical";
@@ -1292,15 +1282,12 @@ function SliderIndicator(props) {
 		style[vertical ? "height" : "width"] = range ? sizeValue : startValue;
 		return style;
 	});
-	const styleValue = createMemo(() => mergeStyles(indicatorStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => mergeStyleValue(indicatorStyle(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
 	onSettled(() => {
 		setHydrating(false);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		ref: [((indicator) => {
 			const start = Number.parseFloat(indicator.style.getPropertyValue("--start-position"));
 			const relative = Number.parseFloat(indicator.style.getPropertyValue("--relative-size"));

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

@@ -1,12 +1,14 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { fieldStateAttributesMapping } 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 { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as createLabelableId } from "../createLabelableId-WMUKtY6s.js";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/switch/stateAttributesMapping.ts
 var switchStateAttributesMapping = {
@@ -59,25 +61,24 @@ function SwitchRoot(props) {
 	const internalProps = props;
 	const allProps = props;
 	const source = Symbol("Switch");
-	const labelSource = Symbol("SwitchLabelSource");
 	const ownInputId = `base-ui-${createUniqueId()}`;
 	const ownRootId = `base-ui-${createUniqueId()}`;
 	const ownLabelId = `base-ui-${createUniqueId()}`;
-	const inheritedControlId = untrack(labelable.controlId);
+	const inheritedControlId = labelable.defaultControlId;
 	const fallbackInputId = typeof inheritedControlId === "string" ? inheritedControlId : ownInputId;
 	const controlled = untrack(() => internalProps.checked !== void 0);
 	const [uncontrolledChecked, setUncontrolledChecked] = createSignal(() => Boolean(untrack(() => internalProps.defaultChecked)));
 	const [rootElement, setRootElement] = createSignal();
 	const [inputElement, setInputElement] = createSignal();
 	const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = createSignal();
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "checked", "class", "defaultChecked", "disabled", "form", "id", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "checked", "class", "defaultChecked", "disabled", "form", "id", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
 	const checked = createMemo(() => controlled ? Boolean(internalProps.checked) : uncontrolledChecked());
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
 	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
 	const readOnly = createMemo(() => internalProps.readOnly ?? false);
 	const required = createMemo(() => internalProps.required ?? false);
 	const name = createMemo(() => field.name() ?? internalProps.name);
-	const inputId = createMemo(() => internalProps.id ?? fallbackInputId);
+	const inputId = createLabelableId(() => internalProps.id, fallbackInputId);
 	const rootId = createMemo(() => nativeButton() ? inputId() : ownRootId);
 	const state = createMemo(() => ({
 		...field.state(),
@@ -87,6 +88,7 @@ function SwitchRoot(props) {
 		required: required()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), switchStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
@@ -99,13 +101,13 @@ function SwitchRoot(props) {
 		value: checked,
 		getControl: () => rootElement() ?? null
 	};
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => handleRootClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleRootFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleRootBlur);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyUp));
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleRootClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleRootFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleRootBlur);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown));
 	function handleRootClick(event) {
 		if (readOnly() || disabled()) return;
 		event.preventDefault();
@@ -133,12 +135,6 @@ function SwitchRoot(props) {
 		registration.name = current.name;
 		field.registerFieldControl(source, current.disabled || !current.element ? void 0 : registration);
 	});
-	createEffect(() => ({
-		input: inputElement(),
-		id: inputId()
-	}), (current) => {
-		labelable.registerControlId(labelSource, current.input ? current.id : void 0);
-	});
 	createEffect(() => ({
 		input: inputElement(),
 		disabled: disabled()
@@ -189,16 +185,12 @@ function SwitchRoot(props) {
 	});
 	onCleanup(() => {
 		field.registerFieldControl(source, void 0);
-		labelable.registerControlId(labelSource, void 0);
 	});
 	return SwitchRootContext({
 		value: state,
 		get children() {
 			return [
-				Dynamic(mergeProps({
-					get component() {
-						return props.as ?? "span";
-					},
+				Render(mergeProps({
 					ref: [((element) => setRootElement(element)), internalProps.ref],
 					get id() {
 						return rootId();
@@ -362,15 +354,13 @@ function listenForFormReset(input, syncChecked) {
 /** The movable part that indicates whether the enclosing switch is on or off. */
 function SwitchThumb(props) {
 	const rootState = useSwitchRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = createMemo(() => rootState());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), switchStateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "span";
-		},
+	return Render(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},