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

package/dist/RadioGroup.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/RadioGroup.tsx
+import { Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-import { FieldErrorContext } from "./FieldError.js";
 import { TextContext } from "./Text.js";
+import { FieldErrorContext } from "./FieldError.js";
 import { SelectionIndicatorContext } from "./SelectionIndicator.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 { createFocusRing, createHover, createRadio, createRadioGroup, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+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 { bindCapture, createFocusRing, createHover, createRadio, createRadioGroup, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { VALID_VALIDITY_STATE, createRadioGroupState } from "@proyecto-viviana/solid-stately";
 //#region src/RadioGroup.tsx
 /**
@@ -14,8 +27,13 @@ import { VALID_VALIDITY_STATE, createRadioGroupState } from "@proyecto-viviana/s
 * Pre-wired headless radio components that combine state + aria hooks.
 * Port of react-aria-components/src/RadioGroup.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<input>`), _tmpl$3 = /*#__PURE__*/ template(`<span slot=description>`), _tmpl$4 = /*#__PURE__*/ template(`<span slot=errorMessage>`), _tmpl$5 = /*#__PURE__*/ template(`<label>`), _tmpl$6 = /*#__PURE__*/ template(`<label><!$><!/><!$><!/>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span slot=description>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span slot=errorMessage>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -60,20 +78,21 @@ const RadioContext = createContext(null);
 */
 function RadioGroup(props) {
 	const contextProps = useContext(RadioGroupContext);
-	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 mergedProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props;
 	const [local, ariaProps] = splitProps(mergedProps, [
 		"class",
 		"style",
 		"render",
 		"ref",
 		"slot",
-		"renderHelpText"
+		"renderHelpText",
+		"children"
 	]);
 	const state = createRadioGroupState(() => ({
 		value: mergedProps.value,
@@ -107,9 +126,6 @@ function RadioGroup(props) {
 		state
 	}));
 	const renderProps = useRenderProps({
-		get children() {
-			return props.children;
-		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-RadioGroup"
@@ -130,8 +146,6 @@ function RadioGroup(props) {
 		if (!(target instanceof HTMLInputElement) || target.type !== "radio") return;
 		state.updateValidation(getNativeValidation(target));
 		state.commitValidation();
-		target.focus();
-		event.preventDefault();
 	};
 	const handleGroupChangeCapture = (event) => {
 		const target = event.target;
@@ -139,9 +153,15 @@ function RadioGroup(props) {
 		state.updateValidation(target.validity.valid ? validValidation : getNativeValidation(target));
 		state.commitValidation();
 	};
+	const [groupEl, setGroupEl] = createSignal(null);
 	const setGroupRef = (el) => {
-		assignRef(local.ref, el);
+		setGroupEl(el);
+		assignRef$1(local.ref, el);
 	};
+	bindCapture(groupEl, {
+		invalid: handleGroupInvalidCapture,
+		change: handleGroupChangeCapture
+	});
 	const groupDescribedBy = () => {
 		const ids = [
 			cleanGroupProps()["aria-describedby"],
@@ -182,42 +202,54 @@ function RadioGroup(props) {
 				return state;
 			}
 		};
+		const childrenOnce = local.children;
+		const renderedChildren = () => {
+			if (typeof childrenOnce === "function") return childrenOnce.length > 0 ? childrenOnce(childRenderValues) : childrenOnce();
+			return childrenOnce;
+		};
 		return [
-			memo(createMemo(() => {
-				const children = props.children;
-				if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
-				return children;
-			})),
+			memo(() => {
+				return typeof childrenOnce === "function" ? renderedChildren() : childrenOnce;
+			}),
 			createComponent(Show, {
 				get when() {
-					return memo(() => !!(local.renderHelpText ?? true))() && mergedProps.description;
+					return memo(() => {
+						return !!(local.renderHelpText ?? true);
+					})() ? mergedProps.description : local.renderHelpText ?? true;
 				},
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
-					spread(_el$, mergeProps(() => groupAria.descriptionProps), false, true);
-					insert(_el$, () => mergedProps.description);
+					spread(_el$, () => {
+						return groupAria.descriptionProps;
+					}, true);
+					insert(_el$, () => {
+						return mergedProps.description;
+					});
 					runHydrationEvents();
 					return _el$;
 				}
 			}),
 			createComponent(Show, {
 				get when() {
-					return memo(() => !!((local.renderHelpText ?? true) && isInvalid()))() && mergedProps.errorMessage;
+					return memo(() => {
+						return !!((local.renderHelpText ?? true) && isInvalid());
+					})() ? mergedProps.errorMessage : (local.renderHelpText ?? true) && isInvalid();
 				},
 				get children() {
 					var _el$2 = getNextElement(_tmpl$);
-					spread(_el$2, mergeProps(() => groupAria.errorMessageProps), false, true);
-					insert(_el$2, () => mergedProps.errorMessage);
+					spread(_el$2, () => {
+						return groupAria.errorMessageProps;
+					}, true);
+					insert(_el$2, () => {
+						return mergedProps.errorMessage;
+					});
 					runHydrationEvents();
 					return _el$2;
 				}
 			})
 		];
 	};
-	const groupEventProps = {
-		onInvalidCapture: handleGroupInvalidCapture,
-		onChangeCapture: handleGroupChangeCapture
-	};
+	const groupEventProps = {};
 	const customRootProps = () => ({
 		...domProps(),
 		...cleanGroupProps(),
@@ -230,61 +262,114 @@ function RadioGroup(props) {
 		style: renderProps.style(),
 		slot: local.slot,
 		"data-orientation": ariaProps.orientation ?? "vertical",
-		"data-disabled": state.isDisabled || void 0,
-		"data-readonly": state.isReadOnly || void 0,
-		"data-required": state.isRequired || void 0,
-		"data-invalid": isInvalid() || void 0,
-		children: createComponent(GroupChildren, {})
+		"data-disabled": dataAttr(state.isDisabled),
+		"data-readonly": dataAttr(state.isReadOnly),
+		"data-required": dataAttr(state.isRequired),
+		"data-invalid": dataAttr(isInvalid())
 	});
-	return createComponent(RadioGroupStateContext.Provider, {
+	return createComponent(RadioGroupStateContext, {
 		value: state,
 		get children() {
-			return createComponent(FieldErrorContext.Provider, {
+			return createComponent(FieldErrorContext, {
 				value: fieldErrorContext,
 				get children() {
-					return memo(() => !!local.render)() ? local.render(customRootProps(), renderValues()) : (() => {
-						var _el$3 = getNextElement(_tmpl$);
-						use(setGroupRef, _el$3);
-						spread(_el$3, mergeProps(domProps, cleanGroupProps, groupEventProps, {
-							"onFocusIn": handleGroupFocusIn,
-							"onFocusOut": handleGroupFocusOut,
-							get ["aria-describedby"]() {
-								return groupDescribedBy();
-							},
-							get ["class"]() {
-								return renderProps.class();
-							},
-							get style() {
-								return renderProps.style();
-							},
-							get slot() {
-								return local.slot;
-							},
-							get ["data-orientation"]() {
-								return ariaProps.orientation ?? "vertical";
-							},
-							get ["data-disabled"]() {
-								return state.isDisabled || void 0;
-							},
-							get ["data-readonly"]() {
-								return state.isReadOnly || void 0;
-							},
-							get ["data-required"]() {
-								return state.isRequired || void 0;
-							},
-							get ["data-invalid"]() {
-								return isInvalid() || void 0;
-							}
-						}), false, true);
-						insert(_el$3, createComponent(GroupChildren, {}));
-						runHydrationEvents();
-						return _el$3;
-					})();
+					return createComponent(RadioGroupDefaultRoot, {
+						get render() {
+							return local.render;
+						},
+						getCustomRootProps: customRootProps,
+						getRenderValues: renderValues,
+						getDomProps: domProps,
+						getCleanGroupProps: cleanGroupProps,
+						groupEventProps,
+						setGroupRef,
+						onFocusIn: handleGroupFocusIn,
+						onFocusOut: handleGroupFocusOut,
+						getDescribedBy: groupDescribedBy,
+						get getClass() {
+							return renderProps.class;
+						},
+						get getStyle() {
+							return renderProps.style;
+						},
+						get slot() {
+							return local.slot;
+						},
+						getOrientation: () => ariaProps.orientation ?? "vertical",
+						getDisabled: () => state.isDisabled || void 0,
+						getReadOnly: () => state.isReadOnly || void 0,
+						getRequired: () => state.isRequired || void 0,
+						getInvalid: () => isInvalid() || void 0,
+						get children() {
+							return createComponent(GroupChildren, {});
+						}
+					});
 				}
 			});
 		}
 	});
 }
+function RadioGroupDefaultRoot(props) {
+	const children = props.children;
+	if (props.render) return props.render({
+		...props.getCustomRootProps(),
+		children
+	}, props.getRenderValues());
+	var _el$3 = getNextElement(_tmpl$);
+	var _ref$ = props.setGroupRef;
+	typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+		return _ref$;
+	}, _el$3) : props.setGroupRef = _el$3;
+	spread(_el$3, [
+		() => {
+			return props.getDomProps();
+		},
+		() => {
+			return props.getCleanGroupProps();
+		},
+		() => {
+			return props.groupEventProps;
+		},
+		{
+			get onFocusIn() {
+				return props.onFocusIn;
+			},
+			get onFocusOut() {
+				return props.onFocusOut;
+			},
+			get "aria-describedby"() {
+				return props.getDescribedBy();
+			},
+			get "class"() {
+				return props.getClass();
+			},
+			get style() {
+				return props.getStyle();
+			},
+			get slot() {
+				return props.slot;
+			},
+			get "data-orientation"() {
+				return props.getOrientation();
+			},
+			get "data-disabled"() {
+				return dataAttr(props.getDisabled());
+			},
+			get "data-readonly"() {
+				return dataAttr(props.getReadOnly());
+			},
+			get "data-required"() {
+				return dataAttr(props.getRequired());
+			},
+			get "data-invalid"() {
+				return dataAttr(props.getInvalid());
+			}
+		}
+	], true);
+	insert(_el$3, children);
+	runHydrationEvents();
+	return _el$3;
+}
 /**
 * Internal Radio implementation that has access to RadioGroupStateContext.
 * This is rendered inside the RadioGroup's context provider.
@@ -293,13 +378,13 @@ function RadioImpl(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const { state } = props;
 	const contextProps = useContext(RadioContext);
-	const contextSlotProps = contextProps?.slots?.[props.radioProps.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.radioProps.slot === "string" ? props.radioProps.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const radioProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props.radioProps) : props.radioProps;
+	const radioProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props.radioProps) : props.radioProps;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
@@ -380,9 +465,15 @@ function RadioImpl(props) {
 		return rest;
 	};
 	const cleanInputProps = () => {
-		const { ref: _ref3, onFocus: _onFocus, onBlur: _onBlur, ...rest } = radioAria.inputProps;
+		const inputProps = radioAria.inputProps;
+		const rest = {};
+		for (const key of Object.keys(inputProps)) {
+			if (key === "ref" || key === "onFocus" || key === "onBlur" || key === "aria-describedby") continue;
+			rest[key] = inputProps[key];
+		}
 		return rest;
 	};
+	const inputDescribedBy = () => radioAria.inputDescribedBy();
 	const cleanFocusProps = () => {
 		const { ref: _ref4, onFocus: _onFocus, onBlur: _onBlur, ...rest } = focusProps;
 		return rest;
@@ -396,7 +487,6 @@ function RadioImpl(props) {
 		focusProps.onBlur?.(event);
 	};
 	const handleLabelClick = (event) => {
-		ariaProps.onClickCapture?.(event);
 		radioAria.labelProps.onClick?.(event);
 	};
 	const handleLabelClickCapture = (event) => {
@@ -405,50 +495,55 @@ function RadioImpl(props) {
 	const handleInputClick = (event) => {
 		radioAria.inputProps.onClick?.(event);
 	};
-	const handleInputInvalid = (event) => {
-		state.updateValidation(getNativeValidation(event.currentTarget));
-		state.commitValidation();
-		event.currentTarget.focus();
-		event.preventDefault();
-	};
 	const handleInputChange = (event) => {
 		radioAria.inputProps.onChange?.(event);
 		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
 		state.commitValidation();
 	};
+	const [labelEl, setLabelEl] = createSignal(null);
 	const setLabelRef = (el) => {
-		assignRef(local.ref, el);
+		setLabelEl(el);
+		assignRef$1(local.ref, el);
 	};
+	bindCapture(labelEl, { click: handleLabelClickCapture });
 	const setInputRef = (el) => {
+		if (!el) {
+			setInputElement(null);
+			return;
+		}
 		setInputElement(el);
-		el.addEventListener("invalid", (event) => {
-			state.updateValidation(getNativeValidation(el));
-			state.commitValidation();
-			el.focus();
-			event.preventDefault();
-		});
 		el.addEventListener("change", () => {
 			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
 			state.commitValidation();
 		});
-		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$4 = getNextElement(_tmpl$2);
-		use(setInputRef, _el$4);
-		spread(_el$4, mergeProps(cleanInputProps, cleanFocusProps, {
-			"onFocus": handleInputFocus,
-			"onBlur": handleInputBlur,
-			"onInvalid": handleInputInvalid,
-			"onChange": handleInputChange,
-			"onClick": handleInputClick
-		}), false, false);
+		ref(() => {
+			return setInputRef;
+		}, _el$4);
+		spread(_el$4, [
+			cleanInputProps,
+			cleanFocusProps,
+			{
+				get "aria-describedby"() {
+					return inputDescribedBy();
+				},
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur,
+				onChange: handleInputChange,
+				onClick: handleInputClick
+			}
+		], false);
 		runHydrationEvents();
 		return _el$4;
 	} });
 	const labelChildren = () => [
 		hiddenInput,
-		memo(() => renderProps.renderChildren()),
+		memo(() => {
+			return renderProps.renderChildren();
+		}),
 		createComponent(Show, {
 			get when() {
 				return local.description;
@@ -456,18 +551,24 @@ function RadioImpl(props) {
 			get children() {
 				var _el$5 = getNextElement(_tmpl$3);
 				setAttribute(_el$5, "id", descriptionId);
-				insert(_el$5, () => local.description);
+				insert(_el$5, () => {
+					return local.description;
+				});
 				return _el$5;
 			}
 		}),
 		createComponent(Show, {
 			get when() {
-				return memo(() => !!state.isInvalid)() && local.errorMessage;
+				return memo(() => {
+					return !!state.isInvalid;
+				})() ? local.errorMessage : state.isInvalid;
 			},
 			get children() {
 				var _el$6 = getNextElement(_tmpl$4);
 				setAttribute(_el$6, "id", errorMessageId);
-				insert(_el$6, () => local.errorMessage);
+				insert(_el$6, () => {
+					return local.errorMessage;
+				});
 				return _el$6;
 			}
 		})
@@ -481,29 +582,41 @@ function RadioImpl(props) {
 		style: renderProps.style(),
 		slot: local.slot,
 		onClick: handleLabelClick,
-		onClickCapture: handleLabelClickCapture,
-		"data-selected": radioAria.isSelected() || void 0,
-		"data-pressed": radioAria.isPressed() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-focused": isFocused() || void 0,
-		"data-focus-visible": isFocusVisible() || void 0,
-		"data-disabled": radioAria.isDisabled || void 0,
-		"data-readonly": state.isReadOnly || void 0,
-		"data-invalid": state.isInvalid || void 0,
-		"data-required": state.isRequired || void 0,
+		"data-selected": dataAttr(radioAria.isSelected()),
+		"data-pressed": dataAttr(radioAria.isPressed()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-focused": dataAttr(isFocused()),
+		"data-focus-visible": dataAttr(isFocusVisible()),
+		"data-disabled": dataAttr(radioAria.isDisabled),
+		"data-readonly": dataAttr(state.isReadOnly),
+		"data-invalid": dataAttr(state.isInvalid),
+		"data-required": dataAttr(state.isRequired),
 		children: labelChildren()
 	});
-	const labelCaptureProps = { onClickCapture: handleLabelClickCapture };
-	return createComponent(SelectionIndicatorContext.Provider, {
+	const labelCaptureProps = {};
+	if (local.render) return createComponent(SelectionIndicatorContext, {
 		get value() {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			return memo(() => !!local.render)() ? local.render(customLabelProps(), renderValues()) : (() => {
-				var _el$7 = getNextElement(_tmpl$5);
-				use(setLabelRef, _el$7);
-				spread(_el$7, mergeProps(domProps, cleanLabelProps, cleanHoverProps, {
-					get ["class"]() {
+			return local.render(customLabelProps(), renderValues());
+		}
+	});
+	return createComponent(SelectionIndicatorContext, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			var _el$7 = getNextElement(_tmpl$5);
+			ref(() => {
+				return setLabelRef;
+			}, _el$7);
+			spread(_el$7, [
+				domProps,
+				cleanLabelProps,
+				cleanHoverProps,
+				{
+					get "class"() {
 						return renderProps.class();
 					},
 					get style() {
@@ -512,40 +625,44 @@ function RadioImpl(props) {
 					get slot() {
 						return local.slot;
 					},
-					"onClick": handleLabelClick
-				}, labelCaptureProps, {
-					get ["data-selected"]() {
-						return radioAria.isSelected() || void 0;
+					onClick: handleLabelClick
+				},
+				labelCaptureProps,
+				{
+					get "data-selected"() {
+						return dataAttr(radioAria.isSelected());
 					},
-					get ["data-pressed"]() {
-						return radioAria.isPressed() || void 0;
+					get "data-pressed"() {
+						return dataAttr(radioAria.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 radioAria.isDisabled || void 0;
+					get "data-disabled"() {
+						return dataAttr(radioAria.isDisabled);
 					},
-					get ["data-readonly"]() {
-						return state.isReadOnly || void 0;
+					get "data-readonly"() {
+						return dataAttr(state.isReadOnly);
 					},
-					get ["data-invalid"]() {
-						return state.isInvalid || void 0;
+					get "data-invalid"() {
+						return dataAttr(state.isInvalid);
 					},
-					get ["data-required"]() {
-						return state.isRequired || void 0;
+					get "data-required"() {
+						return dataAttr(state.isRequired);
 					}
-				}), false, true);
-				insert(_el$7, labelChildren);
-				runHydrationEvents();
-				return _el$7;
-			})();
+				}
+			], true);
+			insert(_el$7, scope(() => {
+				return labelChildren();
+			}));
+			runHydrationEvents();
+			return _el$7;
 		}
 	});
 }
@@ -567,17 +684,11 @@ function RadioImpl(props) {
 * ```
 */
 function Radio(props) {
-	const getState = createMemo(() => useContext(RadioGroupStateContext));
-	return createComponent(Show, {
-		get when() {
-			return getState();
-		},
-		fallback: null,
-		keyed: true,
-		children: (state) => createComponent(RadioImpl, {
-			radioProps: props,
-			state
-		})
+	const state = useContext(RadioGroupStateContext);
+	if (!state) return null;
+	return createComponent(RadioImpl, {
+		radioProps: props,
+		state
 	});
 }
 const RadioFieldContext = createContext(null);
@@ -617,13 +728,13 @@ function RadioFieldImpl(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const { state } = props;
 	const contextProps = useContext(RadioFieldContext);
-	const contextSlotProps = contextProps?.slots?.[props.fieldProps.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.fieldProps.slot === "string" ? props.fieldProps.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const fieldProps = contextProps ? mergeProps$2(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) : props.fieldProps;
+	const fieldProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) : props.fieldProps;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
@@ -651,20 +762,14 @@ function RadioFieldImpl(props) {
 	} } };
 	const setInputRef = (el) => {
 		setInputElement(el);
-		el.addEventListener("invalid", (event) => {
-			state.updateValidation(getNativeValidation(el));
-			state.commitValidation();
-			el.focus();
-			event.preventDefault();
-		});
 		el.addEventListener("change", () => {
 			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
 			state.commitValidation();
 		});
-		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: () => radioAria.isSelected(),
@@ -672,6 +777,7 @@ function RadioFieldImpl(props) {
 		isDisabled: () => radioAria.isDisabled,
 		labelProps: () => radioAria.labelProps,
 		inputProps: () => radioAria.inputProps,
+		inputDescribedBy: () => radioAria.inputDescribedBy(),
 		setInputRef,
 		defaultClassName: "solidaria-RadioButton"
 	};
@@ -713,61 +819,62 @@ function RadioFieldImpl(props) {
 				return state.isRequired;
 			}
 		};
-		return memo(createMemo(() => {
+		const renderedChildren = createMemo(() => {
 			const children = fieldProps.children;
 			return typeof children === "function" ? children(childRenderValues) : children;
-		}));
+		});
+		return memo(renderedChildren);
 	};
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$);
-		use(setFieldRef, _el$8);
-		spread(_el$8, mergeProps(domProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get slot() {
-				return local.slot;
-			},
-			get ["data-selected"]() {
-				return radioAria.isSelected() || void 0;
-			},
-			get ["data-disabled"]() {
-				return radioAria.isDisabled || void 0;
-			},
-			get ["data-readonly"]() {
-				return state.isReadOnly || void 0;
-			},
-			get ["data-invalid"]() {
-				return state.isInvalid || void 0;
-			},
-			get ["data-required"]() {
-				return state.isRequired || void 0;
-			}
-		}), false, true);
-		insert(_el$8, createComponent(SelectionIndicatorContext.Provider, {
-			get value() {
-				return selectionIndicatorContext();
-			},
-			get children() {
-				return createComponent(InternalRadioContext.Provider, {
-					value: internalContext,
-					get children() {
-						return createComponent(Provider, {
-							values: [[TextContext, textSlots]],
-							get children() {
-								return createComponent(FieldChildren, {});
-							}
-						});
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$8;
-	})();
+	var _el$8 = getNextElement(_tmpl$);
+	ref(() => {
+		return setFieldRef;
+	}, _el$8);
+	spread(_el$8, [domProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get slot() {
+			return local.slot;
+		},
+		get "data-selected"() {
+			return dataAttr(radioAria.isSelected());
+		},
+		get "data-disabled"() {
+			return dataAttr(radioAria.isDisabled);
+		},
+		get "data-readonly"() {
+			return dataAttr(state.isReadOnly);
+		},
+		get "data-invalid"() {
+			return dataAttr(state.isInvalid);
+		},
+		get "data-required"() {
+			return dataAttr(state.isRequired);
+		}
+	}], true);
+	insert(_el$8, createComponent(SelectionIndicatorContext, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			return createComponent(InternalRadioContext, {
+				value: internalContext,
+				get children() {
+					return createComponent(Provider, {
+						values: [[TextContext, textSlots]],
+						get children() {
+							return createComponent(FieldChildren, {});
+						}
+					});
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$8;
 }
 /**
 * A RadioButton is the clickable area of a radio, including the indicator and label.
@@ -851,25 +958,27 @@ function RadioButtonImpl(props) {
 	const handleInputClick = (event) => {
 		ctx.inputProps().onClick?.(event);
 	};
-	const handleInputInvalid = (event) => {
-		state.updateValidation(getNativeValidation(event.currentTarget));
-		state.commitValidation();
-		event.currentTarget.focus();
-		event.preventDefault();
-	};
 	const handleInputChange = (event) => {
 		ctx.inputProps().onChange?.(event);
 		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
 		state.commitValidation();
 	};
 	const setButtonRef = (el) => {
-		assignRef(props.buttonProps.ref, el);
+		assignRef$1(props.buttonProps.ref, el);
 	};
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$6), _el$1 = _el$9.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling);
-		use(setButtonRef, _el$9);
-		spread(_el$9, mergeProps(cleanLabelProps, cleanHoverProps, {
-			get ["class"]() {
+	var _el$9 = getNextElement(_tmpl$6);
+	var _el$11 = _el$9.firstChild;
+	var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+	var _el$14 = _el$12.nextSibling;
+	var [_el$15, _el$16] = getNextMarker(_el$14.nextSibling);
+	ref(() => {
+		return setButtonRef;
+	}, _el$9);
+	spread(_el$9, [
+		cleanLabelProps,
+		cleanHoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
@@ -878,52 +987,62 @@ function RadioButtonImpl(props) {
 			get slot() {
 				return props.buttonProps.slot;
 			},
-			get ["data-selected"]() {
-				return ctx.isSelected() || void 0;
+			get "data-selected"() {
+				return dataAttr(ctx.isSelected());
 			},
-			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 state.isReadOnly || void 0;
+			get "data-readonly"() {
+				return dataAttr(state.isReadOnly);
 			},
-			get ["data-invalid"]() {
-				return state.isInvalid || void 0;
+			get "data-invalid"() {
+				return dataAttr(state.isInvalid);
 			},
-			get ["data-required"]() {
-				return state.isRequired || void 0;
+			get "data-required"() {
+				return dataAttr(state.isRequired);
 			}
-		}), false, true);
-		insert(_el$9, createComponent(VisuallyHidden, { get children() {
-			var _el$0 = getNextElement(_tmpl$2);
-			var _ref$ = ctx.setInputRef;
-			typeof _ref$ === "function" ? use(_ref$, _el$0) : ctx.setInputRef = _el$0;
-			spread(_el$0, mergeProps(cleanInputProps, cleanFocusProps, {
-				"onFocus": handleInputFocus,
-				"onBlur": handleInputBlur,
-				"onInvalid": handleInputInvalid,
-				"onChange": handleInputChange,
-				"onClick": handleInputClick
-			}), false, false);
-			runHydrationEvents();
-			return _el$0;
-		} }), _el$10, _co$);
-		insert(_el$9, () => renderProps.renderChildren(), _el$12, _co$2);
+		}
+	], true);
+	insert(_el$9, createComponent(VisuallyHidden, { get children() {
+		var _el$10 = getNextElement(_tmpl$2);
+		var _ref$2 = ctx.setInputRef;
+		typeof _ref$2 === "function" || Array.isArray(_ref$2) ? ref(() => {
+			return _ref$2;
+		}, _el$10) : ctx.setInputRef = _el$10;
+		spread(_el$10, [
+			cleanInputProps,
+			cleanFocusProps,
+			{
+				get "aria-describedby"() {
+					return ctx.inputDescribedBy();
+				},
+				onFocus: handleInputFocus,
+				onBlur: handleInputBlur,
+				onChange: handleInputChange,
+				onClick: handleInputClick
+			}
+		], false);
 		runHydrationEvents();
-		return _el$9;
-	})();
+		return _el$10;
+	} }), _el$12, _el$13);
+	insert(_el$9, scope(() => {
+		return renderProps.renderChildren();
+	}), _el$15, _el$16);
+	runHydrationEvents();
+	return _el$9;
 }
 //#endregion
 export { Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext, RadioGroupStateContext };