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

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

@@ -1,8 +1,10 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
-import { Dynamic, isServer, mergeProps, ssrElement } from "@solidjs/web";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
+import { isServer, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/avatar/root/AvatarRootContext.ts
 var MISSING_CONTEXT = Symbol("AvatarRootContext");
@@ -17,20 +19,19 @@ function useAvatarRootContext() {
 /** Displays a profile image, initials, or fallback content. */
 function AvatarRoot(props) {
 	const [imageLoadingStatus, setImageLoadingStatus] = createSignal("idle");
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = createMemo(() => ({ imageLoadingStatus: imageLoadingStatus() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const context = {
+		imageLoadingStatus,
+		setImageLoadingStatus
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return AvatarRootContext({
-		value: {
-			imageLoadingStatus,
-			setImageLoadingStatus
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -43,10 +44,21 @@ function AvatarRoot(props) {
 }
 //#endregion
 //#region src/avatar/image/createImageLoadingStatus.ts
-function createImageLoadingStatus(options) {
+function createImageLoadingStatus(options, element, onInitiallyLoaded) {
 	const [status, setStatus] = createSignal("idle");
+	let initialCommit = true;
 	createEffect(options, (current) => {
 		if (isServer) return;
+		if (current.keepMounted) {
+			const image = element();
+			const isInitialCommit = initialCommit;
+			initialCommit = false;
+			if (!image) return;
+			const nextStatus = !image.complete ? "loading" : image.naturalWidth > 0 ? "loaded" : "error";
+			setStatus(nextStatus);
+			if (isInitialCommit && nextStatus === "loaded") onInitiallyLoaded();
+			return;
+		}
 		if (!current.src && !current.srcset) {
 			setStatus("error");
 			return;
@@ -71,7 +83,7 @@ function createImageLoadingStatus(options) {
 			image.onerror = null;
 		};
 	});
-	return status;
+	return [status, setStatus];
 }
 //#endregion
 //#region src/avatar/image/AvatarImage.tsx
@@ -81,22 +93,29 @@ function AvatarImage(props) {
 	let imageElement;
 	let latestVisible = false;
 	let previousStatus = "idle";
-	const others = omit(props, "class", "style", "onLoadingStatusChange", "ref");
-	const imageLoadingStatus = createImageLoadingStatus(() => ({
+	const others = omit(props, "render", "class", "style", "onLoadingStatusChange", "ref", "keepMounted", "onLoad", "onError", "sizes", "srcset", "src");
+	const [imageLoadingStatus, setImageLoadingStatus] = createImageLoadingStatus(() => ({
 		src: typeof props.src === "string" ? props.src : void 0,
 		srcset: typeof props.srcset === "string" ? props.srcset : void 0,
 		sizes: typeof props.sizes === "string" ? props.sizes : void 0,
 		crossorigin: typeof props.crossorigin === "string" ? props.crossorigin : void 0,
-		referrerpolicy: typeof props.referrerpolicy === "string" ? props.referrerpolicy : void 0
-	}));
+		referrerpolicy: typeof props.referrerpolicy === "string" ? props.referrerpolicy : void 0,
+		keepMounted: props.keepMounted ?? false
+	}), () => imageElement, () => transition.setMounted(true));
 	const visible = createMemo(() => imageLoadingStatus() === "loaded");
 	const transition = createTransitionStatus(() => visible());
 	const state = createMemo(() => ({
 		imageLoadingStatus: imageLoadingStatus(),
-		transitionStatus: transition.transitionStatus()
+		transitionStatus: props.keepMounted && transition.transitionStatus() === "ending" ? void 0 : transition.transitionStatus()
 	}));
-	const classValue = createMemo(() => transition.mounted() ? resolveClass(props.class, state()) : void 0);
-	const styleValue = createMemo(() => transition.mounted() ? resolveStyle(props.style, state()) : void 0);
+	const classValue = createMemo(() => props.keepMounted || transition.mounted() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => props.keepMounted || transition.mounted() ? resolveStyle(props.style, state()) : void 0);
+	const onLoad = composeEventHandlers(liveEventHandler(() => props.onLoad), () => {
+		if (props.keepMounted) setImageLoadingStatus("loaded");
+	});
+	const onError = composeEventHandlers(liveEventHandler(() => props.onError), () => {
+		if (props.keepMounted) setImageLoadingStatus("error");
+	});
 	createEffect(() => ({
 		status: imageLoadingStatus(),
 		onLoadingStatusChange: props.onLoadingStatusChange
@@ -118,35 +137,56 @@ function AvatarImage(props) {
 		const abortController = new AbortController();
 		runOnceAnimationsFinish(current.element, () => {
 			if (!latestVisible) {
-				imageElement = void 0;
+				if (!untrack(() => props.keepMounted)) imageElement = void 0;
 				transition.setMounted(false);
 			}
 		}, abortController.signal);
 		return () => abortController.abort();
 	});
 	onCleanup(() => context.setImageLoadingStatus("idle"));
+	const Render = useRender(props, () => state(), (props) => ssrElement("img", props, void 0, true));
 	return Show({
 		get when() {
-			return transition.mounted();
+			return props.keepMounted || transition.mounted();
 		},
 		get children() {
-			return ssrElement("img", () => {
-				return mergeProps({
-					alt: "",
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					},
-					get ["data-starting-style"]() {
-						return transition.transitionStatus() === "starting" ? "" : void 0;
-					},
-					get ["data-ending-style"]() {
-						return transition.transitionStatus() === "ending" ? "" : void 0;
-					}
-				}, others);
-			}, void 0, true);
+			return Render(mergeProps({
+				ref: [props.ref, (element) => imageElement = element],
+				alt: "",
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				get ["data-starting-style"]() {
+					return state().transitionStatus === "starting" ? "" : void 0;
+				},
+				get ["data-ending-style"]() {
+					return state().transitionStatus === "ending" ? "" : void 0;
+				},
+				get ["data-loading"]() {
+					return props.keepMounted && imageLoadingStatus() === "loading" ? "" : void 0;
+				},
+				get ["data-error"]() {
+					return props.keepMounted && imageLoadingStatus() === "error" ? "" : void 0;
+				},
+				get ["aria-hidden"]() {
+					return props.keepMounted && imageLoadingStatus() !== "loaded" ? "true" : void 0;
+				},
+				onLoad,
+				onError
+			}, others, {
+				get sizes() {
+					return props.sizes;
+				},
+				get srcset() {
+					return props.srcset;
+				},
+				get src() {
+					return props.src;
+				}
+			}));
 		}
 	});
 }
@@ -157,7 +197,7 @@ function AvatarFallback(props) {
 	const context = useAvatarRootContext();
 	const delay = createMemo(() => props.delay ?? 0);
 	const [delayPassed, setDelayPassed] = createSignal(untrack(delay) === 0);
-	const others = omit(props, "class", "style", "delay");
+	const others = omit(props, "render", "class", "style", "delay");
 	const state = createMemo(() => ({ imageLoadingStatus: context.imageLoadingStatus() }));
 	const visible = createMemo(() => context.imageLoadingStatus() !== "loaded" && (delay() === 0 || delayPassed()));
 	const classValue = createMemo(() => visible() ? resolveClass(props.class, state()) : void 0);
@@ -170,21 +210,20 @@ function AvatarFallback(props) {
 		const timeout = setTimeout(() => setDelayPassed(true), currentDelay);
 		return () => clearTimeout(timeout);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return visible();
 		},
 		get children() {
-			return ssrElement("span", () => {
-				return mergeProps({
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, others);
-			}, void 0, true);
+			return Render(mergeProps({
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, others));
 		}
 	});
 }

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

@@ -1,7 +1,7 @@
-import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createMemo, omit, onSettled, untrack } from "solid-js";
 //#region src/button/Button.tsx
 /**
@@ -10,30 +10,26 @@ import { createMemo, omit, onSettled, untrack } from "solid-js";
 */
 function Button(props) {
 	const eventProps = props;
-	const others = omit(props, "as", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const others = omit(props, "render", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
 	const disabled = createMemo(() => props.disabled ?? false);
 	const focusableWhenDisabled = createMemo(() => props.focusableWhenDisabled ?? false);
 	const nativeButton = createMemo(() => props.nativeButton ?? true);
 	const state = createMemo(() => ({ disabled: disabled() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
-	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
 	const disabledAttribute = createMemo(() => nativeButton() && disabled() && !focusableWhenDisabled());
 	const ariaDisabled = createMemo(() => {
 		if (nativeButton()) return focusableWhenDisabled() ? disabled() ? "true" : "false" : void 0;
 		return disabled() ? "true" : void 0;
 	});
 	const tabIndex = createMemo(() => !nativeButton() && disabled() && !focusableWhenDisabled() ? -1 : 0);
-	const onClick = composeEventHandlers(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0), () => eventProps.onClick);
-	const onMouseDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0), () => eventProps.onMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0), () => eventProps.onPointerDown);
-	const onKeyDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? props.focusableWhenDisabled ?? false ? preventFocusableDisabledKeyDown : stopInteraction : void 0), () => eventProps.onKeyDown, () => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0), () => eventProps.onKeyUp, () => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyUp));
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0)), liveEventHandler(() => eventProps.onClick));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0)), liveEventHandler(() => eventProps.onMouseDown));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0)), liveEventHandler(() => eventProps.onPointerDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => props.disabled ?? false ? props.focusableWhenDisabled ?? false ? preventFocusableDisabledKeyDown : stopInteraction : void 0)), liveEventHandler(() => eventProps.onKeyDown), liveEventHandler(() => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0)), liveEventHandler(() => eventProps.onKeyUp), liveEventHandler(() => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyUp)));
 	onSettled(() => {});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => value), eventProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -56,12 +52,15 @@ function Button(props) {
 		get ["aria-disabled"]() {
 			return ariaDisabled();
 		},
+		get ["data-disabled"]() {
+			return disabled() ? "" : void 0;
+		},
 		onClick,
 		onMouseDown,
 		onPointerDown,
 		onKeyDown,
 		onKeyUp
-	}, stateAttributes, others));
+	}, others));
 }
 function isValidLinkElement(element) {
 	return element.tagName === "A" && Boolean(element.href);

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

@@ -1,17 +1,19 @@
 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 { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.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 createLabelableId } from "../createLabelableId-WMUKtY6s.js";
 import { n as useFieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
 import { n as useCheckboxGroupContext } from "../CheckboxGroupContext-DTP679kK.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/checkbox/utils/getCheckboxStateAttributesMapping.ts
 function getCheckboxStateAttributesMapping(state) {
@@ -57,7 +59,9 @@ var HIDDEN_INPUT_STYLE = {
 };
 var HIDDEN_NAMED_INPUT_STYLE = {
 	...HIDDEN_INPUT_STYLE,
-	position: "absolute"
+	position: "absolute",
+	top: "auto",
+	left: "auto"
 };
 /** Represents a visible checkbox and renders a hidden native checkbox beside it. */
 function CheckboxRoot(props) {
@@ -70,13 +74,11 @@ function CheckboxRoot(props) {
 	const internalProps = props;
 	const allProps = props;
 	const fieldControlSource = Symbol("Checkbox");
-	const labelSource = Symbol("CheckboxLabelSource");
 	const token = Symbol("CheckboxGroupItem");
 	const ownInputId = `base-ui-${createUniqueId()}`;
 	const ownRootId = `base-ui-${createUniqueId()}`;
 	const ownLabelId = `base-ui-${createUniqueId()}`;
-	const parentInputId = `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(untrack(() => internalProps.defaultChecked ?? false));
@@ -87,7 +89,7 @@ function CheckboxRoot(props) {
 	let suppressEnterClick = false;
 	let generatedLabel;
 	let stopEnterSuppression = () => void 0;
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "checked", "class", "defaultChecked", "disabled", "form", "id", "indeterminate", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "parent", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "checked", "class", "defaultChecked", "disabled", "form", "id", "indeterminate", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "parent", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
 	const parent = createMemo(() => internalProps.parent ?? false);
 	const parentEnabled = createMemo(() => group?.allValues() !== void 0);
@@ -102,16 +104,9 @@ function CheckboxRoot(props) {
 		return group.value().includes(value());
 	});
 	const indeterminate = createMemo(() => parentEnabled() && parent() ? (group?.parent.indeterminate() ?? false) || (internalProps.indeterminate ?? false) : internalProps.indeterminate ?? false);
-	const inputId = createMemo(() => {
-		if (!parentEnabled()) return internalProps.id || fallbackInputId;
-		if (parent()) return parentInputId;
-		const checkboxValue = value();
-		return checkboxValue === void 0 ? internalProps.id || fallbackInputId || ownInputId : `${group?.parent.id}-${checkboxValue}`;
-	});
-	const rootId = createMemo(() => {
-		if (parentEnabled() && parent()) return group?.parent.id;
-		return nativeButton() ? inputId() : ownRootId;
-	});
+	const ownsControlId = () => group?.registerControlId !== labelable.registerControlId;
+	const inputId = createLabelableId(() => internalProps.id || void 0, ownsControlId() ? fallbackInputId : ownInputId, ownsControlId);
+	const rootId = createMemo(() => nativeButton() ? inputId() : ownRootId);
 	const state = createMemo(() => ({
 		...field.state(),
 		checked: checked(),
@@ -121,12 +116,14 @@ function CheckboxRoot(props) {
 		indeterminate: indeterminate()
 	}));
 	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(), getCheckboxStateAttributesMapping(state())));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
 	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
 	const checkbox = {
 		token,
+		id: rootId,
 		disabled,
 		element: rootElement,
 		input: inputElement,
@@ -139,11 +136,11 @@ function CheckboxRoot(props) {
 		value: checked,
 		getControl: () => rootElement() ?? null
 	};
-	const callExternalBlur = composeEventHandlers(() => internalProps.onBlur);
-	const callExternalClick = composeEventHandlers(() => internalProps.onClick);
-	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
-	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
-	const callExternalKeyUp = composeEventHandlers(() => internalProps.onKeyUp);
+	const callExternalBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur));
+	const callExternalClick = composeEventHandlers(liveEventHandler(() => internalProps.onClick));
+	const callExternalFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus));
+	const callExternalKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown));
+	const callExternalKeyUp = composeEventHandlers(liveEventHandler(() => internalProps.onKeyUp));
 	function handleClick(event) {
 		if (suppressEnterClick) {
 			event.preventDefault();
@@ -209,7 +206,6 @@ function CheckboxRoot(props) {
 		if (generatedLabel && generatedLabel !== except && generatedLabel.id === ownLabelId) generatedLabel.removeAttribute("id");
 		if (generatedLabel !== except) generatedLabel = void 0;
 	}
-	createEffect(inputId, (id) => labelable.registerControlId(labelSource, id));
 	createEffect(() => ({
 		explicit: internalProps["aria-labelledby"],
 		fieldLabel: labelable.labelId(),
@@ -279,11 +275,11 @@ function CheckboxRoot(props) {
 		name: name()
 	}), (current) => {
 		if (current.input) current.input.indeterminate = current.indeterminate;
+		if (!current.group) field.setFilled(current.checked);
 		if (current.group || current.checked === previousChecked) return;
 		previousChecked = current.checked;
 		untrack(() => {
 			form.clearError(current.name);
-			field.setFilled(current.checked);
 			field.setDirty(current.checked !== field.validityData().initialValue);
 			field.validation.change(current.checked);
 		});
@@ -298,23 +294,19 @@ function CheckboxRoot(props) {
 		field.registerFieldControl(fieldControlSource, !current.group && !current.disabled && current.root ? registration : void 0);
 	});
 	onSettled(() => {
-		if (checked()) field.setFilled(true);
+		if (!group) field.setFilled(checked());
 		rootElement();
 	});
 	onCleanup(() => {
 		stopEnterSuppression();
 		clearGeneratedLabel();
-		labelable.registerControlId(labelSource, void 0);
 		field.registerFieldControl(fieldControlSource, void 0);
 	});
 	return CheckboxRootContext({
 		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();
@@ -463,7 +455,7 @@ function CheckboxIndicator(props) {
 	let latestRendered = false;
 	const rootState = useCheckboxRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(props, "render", "class", "keepMounted", "ref", "style");
 	const rendered = createMemo(() => rootState().checked || rootState().indeterminate);
 	const transition = createTransitionStatus(() => rendered());
 	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
@@ -471,6 +463,7 @@ function CheckboxIndicator(props) {
 		...rootState(),
 		transitionStatus: transition.transitionStatus()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	const classValue = createMemo(() => shouldRender() ? resolveClass(props.class, state()) : void 0);
 	const styleValue = createMemo(() => shouldRender() ? resolveStyle(props.style, state()) : void 0);
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), {
@@ -495,35 +488,15 @@ function CheckboxIndicator(props) {
 			return shouldRender();
 		},
 		get children() {
-			return Show({
-				get when() {
-					return props.as;
+			return Render(mergeProps({
+				ref: [internalProps.ref, ((element) => indicatorElement = element)],
+				get ["class"]() {
+					return classValue();
 				},
-				get fallback() {
-					return ssrElement("span", () => {
-						return mergeProps({
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
-				},
-				children: (component) => Dynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					ref: [internalProps.ref, ((element) => indicatorElement = element)],
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others))
-			});
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }

package/dist/lib/server/checkbox-group/index.js

@@ -1,11 +1,13 @@
+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 { 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 createLabelableId } from "../createLabelableId-WMUKtY6s.js";
 import { t as CheckboxGroupContext } from "../CheckboxGroupContext-DTP679kK.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/checkbox-group/CheckboxGroup.tsx
 var EMPTY_VALUE = [];
@@ -14,6 +16,8 @@ function CheckboxGroup(props) {
 	const field = useFieldRootContext(true);
 	const form = useFormContext();
 	const labelable = useLabelableContext();
+	const [checkboxVersion, setCheckboxVersion] = createSignal(0);
+	createLabelableId(() => null, "");
 	const internalProps = props;
 	const allProps = props;
 	const fieldControlSource = Symbol("CheckboxGroup");
@@ -27,7 +31,7 @@ function CheckboxGroup(props) {
 	let childSnapshot = untrack(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
 	let valueSnapshot = childSnapshot;
 	let previousValue = childSnapshot;
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "allValues", "as", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "allValues", "render", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
 	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
 	const state = createMemo(() => ({
@@ -35,16 +39,24 @@ function CheckboxGroup(props) {
 		disabled: disabled()
 	}));
 	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(), fieldStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId());
 	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
 	const parentChecked = createMemo(() => value().length === (internalProps.allValues ?? EMPTY_VALUE).length);
 	const parentIndeterminate = createMemo(() => value().length > 0 && value().length !== (internalProps.allValues ?? EMPTY_VALUE).length);
-	const parentAriaControls = createMemo(() => (internalProps.allValues ?? EMPTY_VALUE).map((itemValue) => `${parentId}-${itemValue}`).join(" "));
+	const parentAriaControls = createMemo(() => {
+		checkboxVersion();
+		return (internalProps.allValues ?? EMPTY_VALUE).map((itemValue) => Array.from(checkboxes.values()).find((checkbox) => !checkbox.parent() && checkbox.value() === itemValue)?.id()).filter(Boolean).join(" ") || void 0;
+	});
 	function registerCheckbox(checkbox) {
 		checkboxes.set(checkbox.token, checkbox);
-		return () => checkboxes.delete(checkbox.token);
+		setCheckboxVersion((version) => version + 1);
+		return () => {
+			checkboxes.delete(checkbox.token);
+			setCheckboxVersion((version) => version + 1);
+		};
 	}
 	function setValue(nextValue, details) {
 		internalProps.onValueChange?.(nextValue, details);
@@ -115,6 +127,7 @@ function CheckboxGroup(props) {
 		allValues: () => internalProps.allValues,
 		disabled,
 		fieldControlSource,
+		registerControlId: labelable.registerControlId,
 		getValue: getCurrentValue,
 		parent: {
 			id: parentId,
@@ -160,10 +173,7 @@ function CheckboxGroup(props) {
 	return CheckboxGroupContext({
 		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();