@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Checkbox.js

@@ -1,11 +1,24 @@
-import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Checkbox.tsx
+import { Provider, dataAttr, filterDOMProps, isAriaTrue, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-import { FieldErrorContext } from "./FieldError.js";
 import { TextContext } from "./Text.js";
-import { FormContext } from "./Form.js";
-import { createComponent, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, template, use } from "solid-js/web";
-import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
-import { createCheckbox, createCheckboxGroup, createCheckboxGroupItem, createFocusRing, createHover, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { FieldErrorContext } from "./FieldError.js";
+import { FormContext, resolveValidationBehavior } from "./Form.js";
+import { createComponent, getNextElement, getNextMarker, insert, memo, ref, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, createUniqueId, useContext } from "solid-js";
+import { createCheckbox, createCheckboxGroup, createCheckboxGroupItem, createFocusRing, createHover, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { VALID_VALIDITY_STATE, createCheckboxGroupState, createToggleState } from "@proyecto-viviana/solid-stately";
 //#region src/Checkbox.tsx
 /**
@@ -14,8 +27,14 @@ import { VALID_VALIDITY_STATE, createCheckboxGroupState, createToggleState } fro
 * Pre-wired headless checkbox components that combine state + aria hooks.
 * Port of react-aria-components/src/Checkbox.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<input>`), _tmpl$4 = /*#__PURE__*/ template(`<span slot=description>`), _tmpl$5 = /*#__PURE__*/ template(`<span slot=errorMessage>`), _tmpl$6 = /*#__PURE__*/ template(`<label>`), _tmpl$7 = /*#__PURE__*/ template(`<label><!$><!/><!$><!/>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span slot=description>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span slot=errorMessage>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -23,33 +42,6 @@ function assignRef(ref, el) {
 const CheckboxGroupContext = createContext(null);
 const CheckboxGroupStateContext = createContext(null);
 const CheckboxContext = createContext(null);
-function withFormValidationBehavior(props, formContext) {
-	if (!formContext?.validationBehavior) return props;
-	return new Proxy(props, {
-		get(target, property, receiver) {
-			const localValue = Reflect.get(target, property, receiver);
-			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
-			return localValue;
-		},
-		has(target, property) {
-			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
-		},
-		ownKeys(target) {
-			const keys = new Set(Reflect.ownKeys(target));
-			if (formContext.validationBehavior !== void 0) keys.add("validationBehavior");
-			return Array.from(keys);
-		},
-		getOwnPropertyDescriptor(target, property) {
-			const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
-			if (descriptor) return descriptor;
-			if (property === "validationBehavior" && formContext.validationBehavior !== void 0) return {
-				enumerable: true,
-				configurable: true,
-				get: () => formContext.validationBehavior
-			};
-		}
-	});
-}
 /**
 * A checkbox group allows a user to select multiple items from a list of options.
 *
@@ -62,7 +54,8 @@ function withFormValidationBehavior(props, formContext) {
 * ```
 */
 function CheckboxGroup(props) {
-	const [local, ariaProps] = splitProps(withFormValidationBehavior(props, useContext(FormContext)), [
+	const formContext = useContext(FormContext);
+	const [local, ariaProps] = splitProps(props, [
 		"class",
 		"style",
 		"slot",
@@ -82,11 +75,12 @@ function CheckboxGroup(props) {
 		isInvalid: ariaProps.isInvalid,
 		validationState: ariaProps.validationState,
 		validate: ariaProps.validate,
-		validationBehavior: ariaProps.validationBehavior,
+		validationBehavior: resolveValidationBehavior(ariaProps.validationBehavior, formContext),
 		name: ariaProps.name
 	}));
 	const groupAria = createCheckboxGroup(() => ({
 		...ariaProps,
+		validationBehavior: resolveValidationBehavior(ariaProps.validationBehavior, formContext),
 		description: local.description,
 		errorMessage: local.errorMessage
 	}), state);
@@ -111,7 +105,7 @@ function CheckboxGroup(props) {
 		return rest;
 	};
 	const setGroupRef = (el) => {
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
 	const groupDescribedBy = () => {
 		const ids = [
@@ -139,65 +133,90 @@ function CheckboxGroup(props) {
 				return state;
 			}
 		};
-		return memo(createMemo(() => {
+		const renderedChildren = createMemo(() => {
 			const children = local.children;
 			if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
 			return children;
-		}));
+		});
+		return memo(renderedChildren);
 	};
-	return createComponent(CheckboxGroupStateContext.Provider, {
+	return createComponent(CheckboxGroupStateContext, {
 		value: state,
 		get children() {
-			var _el$ = getNextElement(_tmpl$2), _el$4 = _el$.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling), _el$8 = _el$7.nextSibling, [_el$9, _co$3] = getNextMarker(_el$8.nextSibling);
-			use(setGroupRef, _el$);
-			spread(_el$, mergeProps(domProps, cleanGroupProps, {
-				get ["aria-describedby"]() {
-					return groupDescribedBy();
-				},
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-disabled"]() {
-					return state.isDisabled || void 0;
-				},
-				get ["data-readonly"]() {
-					return state.isReadOnly || void 0;
-				},
-				get ["data-required"]() {
-					return ariaProps.isRequired || void 0;
-				},
-				get ["data-invalid"]() {
-					return groupAria.isInvalid || void 0;
+			var _el$ = getNextElement(_tmpl$2);
+			var _el$2 = _el$.firstChild;
+			var [_el$3, _el$4] = getNextMarker(_el$2.nextSibling);
+			var _el$6 = _el$3.nextSibling;
+			var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+			var _el$10 = _el$7.nextSibling;
+			var [_el$11, _el$12] = getNextMarker(_el$10.nextSibling);
+			ref(() => {
+				return setGroupRef;
+			}, _el$);
+			spread(_el$, [
+				domProps,
+				cleanGroupProps,
+				{
+					get "aria-describedby"() {
+						return groupDescribedBy();
+					},
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-disabled"() {
+						return dataAttr(state.isDisabled);
+					},
+					get "data-readonly"() {
+						return dataAttr(state.isReadOnly);
+					},
+					get "data-required"() {
+						return dataAttr(ariaProps.isRequired);
+					},
+					get "data-invalid"() {
+						return dataAttr(groupAria.isInvalid);
+					}
 				}
-			}), false, true);
-			insert(_el$, createComponent(GroupChildren, {}), _el$5, _co$);
+			], true);
+			insert(_el$, createComponent(GroupChildren, {}), _el$3, _el$4);
 			insert(_el$, createComponent(Show, {
 				get when() {
-					return memo(() => !!(local.renderHelpText ?? true))() && local.description;
+					return memo(() => {
+						return !!(local.renderHelpText ?? true);
+					})() ? local.description : local.renderHelpText ?? true;
 				},
 				get children() {
-					var _el$2 = getNextElement(_tmpl$);
-					spread(_el$2, mergeProps(() => groupAria.descriptionProps), false, true);
-					insert(_el$2, () => local.description);
+					var _el$5 = getNextElement(_tmpl$);
+					spread(_el$5, () => {
+						return groupAria.descriptionProps;
+					}, true);
+					insert(_el$5, () => {
+						return local.description;
+					});
 					runHydrationEvents();
-					return _el$2;
+					return _el$5;
 				}
-			}), _el$7, _co$2);
+			}), _el$7, _el$8);
 			insert(_el$, createComponent(Show, {
 				get when() {
-					return memo(() => !!((local.renderHelpText ?? true) && groupAria.isInvalid))() && local.errorMessage;
+					return memo(() => {
+						return !!((local.renderHelpText ?? true) && groupAria.isInvalid);
+					})() ? local.errorMessage : (local.renderHelpText ?? true) && groupAria.isInvalid;
 				},
 				get children() {
-					var _el$3 = getNextElement(_tmpl$);
-					spread(_el$3, mergeProps(() => groupAria.errorMessageProps), false, true);
-					insert(_el$3, () => local.errorMessage);
+					var _el$9 = getNextElement(_tmpl$);
+					spread(_el$9, () => {
+						return groupAria.errorMessageProps;
+					}, true);
+					insert(_el$9, () => {
+						return local.errorMessage;
+					});
 					runHydrationEvents();
-					return _el$3;
+					return _el$9;
 				}
-			}), _el$9, _co$3);
+			}), _el$11, _el$12);
 			runHydrationEvents();
 			return _el$;
 		}
@@ -225,20 +244,19 @@ function Checkbox(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const formContext = useContext(FormContext);
 	const contextProps = useContext(CheckboxContext);
-	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const mergedProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props) : props;
-	const propsWithFormBehavior = withFormValidationBehavior(mergedProps, formContext);
+	const mergedProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
 		props.inputRef
 	].filter(Boolean));
-	const [local, ariaProps] = splitProps(propsWithFormBehavior, [
+	const [local, ariaProps] = splitProps(mergedProps, [
 		"class",
 		"style",
 		"render",
@@ -270,6 +288,7 @@ function Checkbox(props) {
 	if (groupState) {
 		const itemAria = createCheckboxGroupItem(() => ({
 			...inputAriaProps(),
+			validationBehavior: ariaProps.validationBehavior ?? formContext?.validationBehavior,
 			value: inputAriaProps().value ?? "",
 			children: typeof mergedProps.children === "function" ? true : mergedProps.children
 		}), groupState, inputElement);
@@ -278,31 +297,34 @@ function Checkbox(props) {
 		labelProps = itemAria.labelProps;
 		inputProps = () => itemAria.inputProps;
 	} else {
-		const checkboxAria = createCheckbox(() => ({
-			...inputAriaProps(),
-			isIndeterminate: local.isIndeterminate,
-			children: typeof mergedProps.children === "function" ? true : mergedProps.children
-		}), createToggleState(() => ({
+		const state = createToggleState(() => ({
 			isSelected: ariaProps.isSelected,
 			defaultSelected: ariaProps.defaultSelected,
 			onChange: ariaProps.onChange,
 			isReadOnly: ariaProps.isReadOnly
-		})), inputElement);
+		}));
+		const checkboxAria = createCheckbox(() => ({
+			...inputAriaProps(),
+			validationBehavior: resolveValidationBehavior(ariaProps.validationBehavior, formContext),
+			isIndeterminate: local.isIndeterminate,
+			children: typeof mergedProps.children === "function" ? true : mergedProps.children
+		}), state, inputElement);
 		isSelected = checkboxAria.isSelected;
 		isPressed = checkboxAria.isPressed;
 		labelProps = checkboxAria.labelProps;
 		inputProps = () => checkboxAria.inputProps;
 	}
 	isDisabled = () => inputProps().disabled === true;
-	isReadOnly = () => inputProps()["aria-readonly"] === true;
-	isInvalid = () => inputProps()["aria-invalid"] === true;
+	isReadOnly = () => isAriaTrue(inputProps()["aria-readonly"]);
+	isInvalid = () => isAriaTrue(inputProps()["aria-invalid"]);
 	const describedBy = () => {
 		const ids = [
+			inputProps()["aria-describedby"],
 			ariaProps["aria-describedby"],
 			local.description ? descriptionId : void 0,
 			isInvalid() && local.errorMessage ? errorMessageId : void 0
-		].filter(Boolean);
-		return ids.length ? ids.join(" ") : void 0;
+		].filter(Boolean).join(" ").split(" ").filter(Boolean);
+		return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
 	};
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const { isHovered, hoverProps } = createHover({
@@ -398,24 +420,30 @@ function Checkbox(props) {
 		focusProps.onBlur?.(event);
 	};
 	const setLabelRef = (el) => {
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
 	const setInputRef = (el) => {
 		setInputElement(el);
-		for (const ref of inputRefs()) assignRef(ref, el);
+		for (const ref of inputRefs()) assignRef$1(ref, el);
 	};
 	const hiddenInput = createComponent(VisuallyHidden, { get children() {
-		var _el$0 = getNextElement(_tmpl$3);
-		use(setInputRef, _el$0);
-		spread(_el$0, mergeProps(cleanInputProps, cleanFocusProps, {
-			"onFocus": handleInputFocus,
-			"onBlur": handleInputBlur,
-			get ["aria-describedby"]() {
-				return describedBy();
+		var _el$13 = getNextElement(_tmpl$3);
+		ref(() => {
+			return setInputRef;
+		}, _el$13);
+		spread(_el$13, [
+			cleanInputProps,
+			cleanFocusProps,
+			{
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur,
+				get "aria-describedby"() {
+					return describedBy();
+				}
 			}
-		}), false, false);
+		], false);
 		runHydrationEvents();
-		return _el$0;
+		return _el$13;
 	} });
 	const labelChildren = () => [
 		hiddenInput,
@@ -425,21 +453,27 @@ function Checkbox(props) {
 				return local.description;
 			},
 			get children() {
-				var _el$1 = getNextElement(_tmpl$4);
-				setAttribute(_el$1, "id", descriptionId);
-				insert(_el$1, () => local.description);
-				return _el$1;
+				var _el$14 = getNextElement(_tmpl$4);
+				setAttribute(_el$14, "id", descriptionId);
+				insert(_el$14, () => {
+					return local.description;
+				});
+				return _el$14;
 			}
 		}),
 		createComponent(Show, {
 			get when() {
-				return memo(() => !!isInvalid())() && local.errorMessage;
+				return memo(() => {
+					return !!isInvalid();
+				})() ? local.errorMessage : isInvalid();
 			},
 			get children() {
-				var _el$10 = getNextElement(_tmpl$5);
-				setAttribute(_el$10, "id", errorMessageId);
-				insert(_el$10, () => local.errorMessage);
-				return _el$10;
+				var _el$15 = getNextElement(_tmpl$5);
+				setAttribute(_el$15, "id", errorMessageId);
+				insert(_el$15, () => {
+					return local.errorMessage;
+				});
+				return _el$15;
 			}
 		})
 	];
@@ -467,52 +501,61 @@ function Checkbox(props) {
 		children: labelChildren()
 	});
 	return local.render ? local.render(customRootProps(), renderValues()) : (() => {
-		var _el$11 = getNextElement(_tmpl$6);
-		use(setLabelRef, _el$11);
-		spread(_el$11, mergeProps(domProps, cleanLabelProps, cleanHoverProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get slot() {
-				return local.slot;
-			},
-			get ["data-selected"]() {
-				return isSelected() || void 0;
-			},
-			get ["data-indeterminate"]() {
-				return local.isIndeterminate || void 0;
-			},
-			get ["data-pressed"]() {
-				return isPressed() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
-			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
-			},
-			get ["data-readonly"]() {
-				return isReadOnly() || void 0;
-			},
-			get ["data-invalid"]() {
-				return isInvalid() || void 0;
-			},
-			get ["data-required"]() {
-				return ariaProps.isRequired || void 0;
+		var _el$16 = getNextElement(_tmpl$6);
+		ref(() => {
+			return setLabelRef;
+		}, _el$16);
+		spread(_el$16, [
+			domProps,
+			cleanLabelProps,
+			cleanHoverProps,
+			{
+				get "class"() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get slot() {
+					return local.slot;
+				},
+				get "data-selected"() {
+					return dataAttr(isSelected());
+				},
+				get "data-indeterminate"() {
+					return dataAttr(local.isIndeterminate);
+				},
+				get "data-pressed"() {
+					return dataAttr(isPressed());
+				},
+				get "data-hovered"() {
+					return dataAttr(isHovered());
+				},
+				get "data-focused"() {
+					return dataAttr(isFocused());
+				},
+				get "data-focus-visible"() {
+					return dataAttr(isFocusVisible());
+				},
+				get "data-disabled"() {
+					return dataAttr(isDisabled());
+				},
+				get "data-readonly"() {
+					return dataAttr(isReadOnly());
+				},
+				get "data-invalid"() {
+					return dataAttr(isInvalid());
+				},
+				get "data-required"() {
+					return dataAttr(ariaProps.isRequired);
+				}
 			}
-		}), false, true);
-		insert(_el$11, labelChildren);
+		], true);
+		insert(_el$16, scope(() => {
+			return labelChildren();
+		}));
 		runHydrationEvents();
-		return _el$11;
+		return _el$16;
 	})();
 }
 const CheckboxFieldContext = createContext(null);
@@ -533,20 +576,19 @@ function CheckboxField(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const formContext = useContext(FormContext);
 	const contextProps = useContext(CheckboxFieldContext);
-	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const mergedProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props) : props;
-	const propsWithFormBehavior = withFormValidationBehavior(mergedProps, formContext);
+	const mergedProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
 		props.inputRef
 	].filter(Boolean));
-	const [local, ariaProps] = splitProps(propsWithFormBehavior, [
+	const [local, ariaProps] = splitProps(mergedProps, [
 		"class",
 		"style",
 		"ref",
@@ -570,6 +612,7 @@ function CheckboxField(props) {
 	if (groupState) {
 		const itemAria = createCheckboxGroupItem(() => ({
 			...inputAriaProps(),
+			validationBehavior: ariaProps.validationBehavior ?? formContext?.validationBehavior,
 			value: inputAriaProps().value ?? "",
 			children: true
 		}), groupState, inputElement);
@@ -580,16 +623,18 @@ function CheckboxField(props) {
 		getDescriptionProps = () => itemAria.descriptionProps;
 		getErrorMessageProps = () => itemAria.errorMessageProps;
 	} else {
-		const checkboxAria = createCheckbox(() => ({
-			...inputAriaProps(),
-			isIndeterminate: local.isIndeterminate,
-			children: true
-		}), createToggleState(() => ({
+		const state = createToggleState(() => ({
 			isSelected: ariaProps.isSelected,
 			defaultSelected: ariaProps.defaultSelected,
 			onChange: ariaProps.onChange,
 			isReadOnly: ariaProps.isReadOnly
-		})), inputElement);
+		}));
+		const checkboxAria = createCheckbox(() => ({
+			...inputAriaProps(),
+			validationBehavior: resolveValidationBehavior(ariaProps.validationBehavior, formContext),
+			isIndeterminate: local.isIndeterminate,
+			children: true
+		}), state, inputElement);
 		isSelected = checkboxAria.isSelected;
 		isPressed = checkboxAria.isPressed;
 		labelProps = checkboxAria.labelProps;
@@ -598,16 +643,16 @@ function CheckboxField(props) {
 		getErrorMessageProps = () => checkboxAria.errorMessageProps;
 	}
 	const isDisabled = () => inputProps().disabled === true;
-	const isReadOnly = () => inputProps()["aria-readonly"] === true;
-	const isInvalid = () => inputProps()["aria-invalid"] === true;
+	const isReadOnly = () => isAriaTrue(inputProps()["aria-readonly"]);
+	const isInvalid = () => isAriaTrue(inputProps()["aria-invalid"]);
 	const isIndeterminate = () => local.isIndeterminate ?? false;
 	const isRequired = () => ariaProps.isRequired ?? false;
 	const setInputRef = (el) => {
 		setInputElement(el);
-		for (const ref of inputRefs()) assignRef(ref, el);
+		for (const ref of inputRefs()) assignRef$1(ref, el);
 	};
 	const setFieldRef = (el) => {
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
 	const internalContext = {
 		isSelected,
@@ -683,69 +728,70 @@ function CheckboxField(props) {
 				return isRequired();
 			}
 		};
-		return memo(createMemo(() => {
+		const renderedChildren = createMemo(() => {
 			const children = mergedProps.children;
 			return typeof children === "function" ? children(childRenderValues) : children;
-		}));
+		});
+		return memo(renderedChildren);
 	};
-	return (() => {
-		var _el$12 = getNextElement(_tmpl$);
-		use(setFieldRef, _el$12);
-		spread(_el$12, mergeProps(domProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get slot() {
-				return local.slot;
-			},
-			get ["data-selected"]() {
-				return isSelected() || void 0;
-			},
-			get ["data-indeterminate"]() {
-				return isIndeterminate() || void 0;
-			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
-			},
-			get ["data-readonly"]() {
-				return isReadOnly() || void 0;
-			},
-			get ["data-invalid"]() {
-				return isInvalid() || void 0;
-			},
-			get ["data-required"]() {
-				return isRequired() || void 0;
-			}
-		}), false, true);
-		insert(_el$12, createComponent(InternalCheckboxContext.Provider, {
-			value: internalContext,
-			get children() {
-				return createComponent(Provider, {
-					values: [[TextContext, textSlots]],
-					get children() {
-						return createComponent(Show, {
-							when: fieldErrorContext,
-							get fallback() {
+	var _el$17 = getNextElement(_tmpl$);
+	ref(() => {
+		return setFieldRef;
+	}, _el$17);
+	spread(_el$17, [domProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get slot() {
+			return local.slot;
+		},
+		get "data-selected"() {
+			return dataAttr(isSelected());
+		},
+		get "data-indeterminate"() {
+			return dataAttr(isIndeterminate());
+		},
+		get "data-disabled"() {
+			return dataAttr(isDisabled());
+		},
+		get "data-readonly"() {
+			return dataAttr(isReadOnly());
+		},
+		get "data-invalid"() {
+			return dataAttr(isInvalid());
+		},
+		get "data-required"() {
+			return dataAttr(isRequired());
+		}
+	}], true);
+	insert(_el$17, createComponent(InternalCheckboxContext, {
+		value: internalContext,
+		get children() {
+			return createComponent(Provider, {
+				values: [[TextContext, textSlots]],
+				get children() {
+					return createComponent(Show, {
+						when: fieldErrorContext,
+						get fallback() {
+							return createComponent(FieldChildren, {});
+						},
+						keyed: true,
+						children: (ctx) => createComponent(FieldErrorContext, {
+							value: ctx,
+							get children() {
 								return createComponent(FieldChildren, {});
-							},
-							keyed: true,
-							children: (ctx) => createComponent(FieldErrorContext.Provider, {
-								value: ctx,
-								get children() {
-									return createComponent(FieldChildren, {});
-								}
-							})
-						});
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$12;
-	})();
+							}
+						})
+					});
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$17;
 }
 /**
 * A checkbox button is the clickable area of a checkbox, including the indicator and label.
@@ -851,17 +897,25 @@ function CheckboxButtonImpl(props) {
 		focusProps.onBlur?.(event);
 	};
 	const setButtonRef = (el) => {
-		assignRef(props.buttonProps.ref, el);
+		assignRef$1(props.buttonProps.ref, el);
 	};
 	const buttonChildren = () => {
 		const children = props.buttonProps.children;
 		return typeof children === "function" ? children(childRenderValues) : children;
 	};
-	return (() => {
-		var _el$13 = getNextElement(_tmpl$7), _el$15 = _el$13.firstChild, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$5] = getNextMarker(_el$17.nextSibling);
-		use(setButtonRef, _el$13);
-		spread(_el$13, mergeProps(cleanLabelProps, cleanHoverProps, {
-			get ["class"]() {
+	var _el$18 = getNextElement(_tmpl$7);
+	var _el$20 = _el$18.firstChild;
+	var [_el$21, _el$22] = getNextMarker(_el$20.nextSibling);
+	var _el$23 = _el$21.nextSibling;
+	var [_el$24, _el$25] = getNextMarker(_el$23.nextSibling);
+	ref(() => {
+		return setButtonRef;
+	}, _el$18);
+	spread(_el$18, [
+		cleanLabelProps,
+		cleanHoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
@@ -870,52 +924,60 @@ function CheckboxButtonImpl(props) {
 			get slot() {
 				return props.buttonProps.slot;
 			},
-			get ["data-selected"]() {
-				return ctx.isSelected() || void 0;
+			get "data-selected"() {
+				return dataAttr(ctx.isSelected());
 			},
-			get ["data-indeterminate"]() {
-				return ctx.isIndeterminate() || void 0;
+			get "data-indeterminate"() {
+				return dataAttr(ctx.isIndeterminate());
 			},
-			get ["data-pressed"]() {
-				return ctx.isPressed() || void 0;
+			get "data-pressed"() {
+				return dataAttr(ctx.isPressed());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
+			get "data-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible());
 			},
-			get ["data-disabled"]() {
-				return ctx.isDisabled() || void 0;
+			get "data-disabled"() {
+				return dataAttr(ctx.isDisabled());
 			},
-			get ["data-readonly"]() {
-				return ctx.isReadOnly() || void 0;
+			get "data-readonly"() {
+				return dataAttr(ctx.isReadOnly());
 			},
-			get ["data-invalid"]() {
-				return ctx.isInvalid() || void 0;
+			get "data-invalid"() {
+				return dataAttr(ctx.isInvalid());
 			},
-			get ["data-required"]() {
-				return ctx.isRequired() || void 0;
+			get "data-required"() {
+				return dataAttr(ctx.isRequired());
 			}
-		}), false, true);
-		insert(_el$13, createComponent(VisuallyHidden, { get children() {
-			var _el$14 = getNextElement(_tmpl$3);
-			var _ref$ = ctx.setInputRef;
-			typeof _ref$ === "function" ? use(_ref$, _el$14) : ctx.setInputRef = _el$14;
-			spread(_el$14, mergeProps(cleanInputProps, cleanFocusProps, {
-				"onFocus": handleInputFocus,
-				"onBlur": handleInputBlur
-			}), false, false);
-			runHydrationEvents();
-			return _el$14;
-		} }), _el$16, _co$4);
-		insert(_el$13, buttonChildren, _el$18, _co$5);
+		}
+	], true);
+	insert(_el$18, createComponent(VisuallyHidden, { get children() {
+		var _el$19 = getNextElement(_tmpl$3);
+		var _ref$ = ctx.setInputRef;
+		typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+			return _ref$;
+		}, _el$19) : ctx.setInputRef = _el$19;
+		spread(_el$19, [
+			cleanInputProps,
+			cleanFocusProps,
+			{
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur
+			}
+		], false);
 		runHydrationEvents();
-		return _el$13;
-	})();
+		return _el$19;
+	} }), _el$21, _el$22);
+	insert(_el$18, scope(() => {
+		return buttonChildren();
+	}), _el$24, _el$25);
+	runHydrationEvents();
+	return _el$18;
 }
 //#endregion
 export { Checkbox, CheckboxButton, CheckboxContext, CheckboxField, CheckboxFieldContext, CheckboxGroup, CheckboxGroupContext, CheckboxGroupStateContext };