@marianmeres/stuic 3.85.0 → 3.87.0

package/dist/components/Input/FieldInputLocalized.svelte

@@ -92,7 +92,8 @@
 		renderSize = "md",
 		required = false,
 		disabled = false,
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		labelAfter,
 		below,
 		labelLeft,
@@ -226,6 +227,41 @@
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
 
+	let _doValidate: (() => void) | undefined = $state();
+	// Default-language visible input — focus target for the imperative API.
+	let defaultInputEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		hiddenInputEl?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the default-language input/textarea. */
+	export function focus(): void {
+		defaultInputEl?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		defaultInputEl?.scrollIntoView?.({
+			behavior: "smooth",
+			block: "center",
+			...opts,
+		});
+	}
+
 	let wrappedValidate: Omit<ValidateOptions, "setValidationResult"> = $derived({
 		enabled: true,
 		customValidator(val: any, context: Record<string, any> | undefined, el: any) {
@@ -236,9 +272,10 @@
 				}
 			}
 			// Delegate to provided validator
-			return (validate as any)?.customValidator?.(val, context, el) || "";
+			return (validateProp as any)?.customValidator?.(val, context, el) || "";
 		},
 		setValidationResult,
+		setDoValidate: (fn: () => void) => (_doValidate = fn),
 	});
 
 	const INPUT_CLS = "w-full";
@@ -281,6 +318,7 @@
 			{#if !expanded}
 				{#if multiline}
 					<textarea
+						bind:this={defaultInputEl}
 						value={entries.find((e) => e.language === _defaultLanguage)?.value ?? ""}
 						oninput={(e) => updateEntry(_defaultLanguage, e.currentTarget.value)}
 						class={twMerge(INPUT_CLS, "min-h-16", classLanguageInput)}
@@ -294,6 +332,7 @@
 					></textarea>
 				{:else}
 					<input
+						bind:this={defaultInputEl}
 						type="text"
 						value={entries.find((e) => e.language === _defaultLanguage)?.value ?? ""}
 						oninput={(e) => updateEntry(_defaultLanguage, e.currentTarget.value)}

package/dist/components/Input/FieldInputLocalized.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
 import type { InputWrapClassProps } from "./types.js";
@@ -38,6 +38,12 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     t?: TranslateFn;
     forceLocalizedOutput?: boolean;
 }
-declare const FieldInputLocalized: import("svelte").Component<Props, {}, "value" | "expanded">;
+declare const FieldInputLocalized: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value" | "expanded">;
 type FieldInputLocalized = ReturnType<typeof FieldInputLocalized>;
 export default FieldInputLocalized;

package/dist/components/Input/FieldKeyValues.svelte

@@ -93,7 +93,8 @@
 		renderSize = "sm",
 		required = false,
 		disabled = false,
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		labelAfter,
 		below,
 		labelLeft,
@@ -235,6 +236,39 @@
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
 
+	let _doValidate: (() => void) | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		hiddenInputEl?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the first key input. */
+	export function focus(): void {
+		keyInputRefs[0]?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		keyInputRefs[0]?.scrollIntoView?.({
+			behavior: "smooth",
+			block: "center",
+			...opts,
+		});
+	}
+
 	let wrappedValidate: Omit<ValidateOptions, "setValidationResult"> = $derived({
 		enabled: true,
 		customValidator(val: any, context: Record<string, any> | undefined, el: any) {
@@ -264,9 +298,10 @@
 			}
 
 			// Continue with provided validator
-			return (validate as any)?.customValidator?.(val, context, el) || "";
+			return (validateProp as any)?.customValidator?.(val, context, el) || "";
 		},
 		setValidationResult,
+		setDoValidate: (fn: () => void) => (_doValidate = fn),
 	});
 
 	const BTN_CLS = [

package/dist/components/Input/FieldKeyValues.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import { type ValidateOptions, type ValidationResult } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
 import type { InputWrapClassProps } from "./types.js";
@@ -40,6 +40,12 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     strictJsonValidation?: boolean;
     t?: TranslateFn;
 }
-declare const FieldKeyValues: import("svelte").Component<Props, {}, "value">;
+declare const FieldKeyValues: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value">;
 type FieldKeyValues = ReturnType<typeof FieldKeyValues>;
 export default FieldKeyValues;

package/dist/components/Input/FieldLikeButton.svelte

@@ -61,7 +61,8 @@
 		required = false,
 		disabled = false,
 		//
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		//
 		labelAfter,
 		inputBefore,
@@ -124,6 +125,40 @@
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
 
+	let _doValidate: (() => void) | undefined = $state();
+	let buttonEl: HTMLElement | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		input?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the visible button (hidden input cannot be focused). */
+	export function focus(): void {
+		buttonEl?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		buttonEl?.scrollIntoView?.({
+			behavior: "smooth",
+			block: "center",
+			...opts,
+		});
+	}
+
 	// $inspect("validation", validation);
 </script>
 
@@ -155,6 +190,7 @@
 	{style}
 >
 	<Button
+		bind:el={buttonEl}
 		type="button"
 		class={twMerge(
 			"w-full inline-block text-left py-2.5 px-3 border-0 bg-transparent",
@@ -183,8 +219,8 @@
 		{id}
 		{name}
 		use:validateAction={() => ({
-			enabled: !!validate,
-			...(typeof validate === "boolean"
+			enabled: validateProp !== false,
+			...(typeof validateProp === "boolean"
 				? {
 						// Return actual messages (not reason names) because hidden inputs
 						// don't support el.validationMessage - the validate action preserves
@@ -202,8 +238,9 @@
 							}
 						},
 					}
-				: validate),
+				: validateProp),
 			setValidationResult,
+			setDoValidate: (fn) => (_doValidate = fn),
 		})}
 		{required}
 		{disabled}

package/dist/components/Input/FieldLikeButton.svelte.d.ts

@@ -32,6 +32,13 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     style?: string;
     renderValue?: (rawValue: any) => string;
 }
-declare const FieldLikeButton: import("svelte").Component<Props, {}, "value" | "input">;
+import { type ValidationResult } from "../../actions/validate.svelte.js";
+declare const FieldLikeButton: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value" | "input">;
 type FieldLikeButton = ReturnType<typeof FieldLikeButton>;
 export default FieldLikeButton;

package/dist/components/Input/FieldObject.svelte

@@ -51,7 +51,8 @@
 		renderSize = "sm",
 		required = false,
 		disabled = false,
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		labelAfter,
 		below,
 		labelLeft,
@@ -72,6 +73,9 @@
 
 	let editMode = $state(false);
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
+	// Visible interactive elements used by the imperative focus/scroll API.
+	let toggleBtnEl: HTMLButtonElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- initialized by bind:clientWidth
 	let contentWidth: number = $state()!;
 	const isNarrow = $derived(contentWidth < 360);
@@ -124,6 +128,44 @@
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
 
+	let _doValidate: (() => void) | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		hiddenInputEl?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/**
+	 * Focus the visible interactive element — the textarea in edit mode,
+	 * otherwise the edit-toggle button. The hidden validation `<input>`
+	 * itself cannot be focused.
+	 */
+	export function focus(): void {
+		if (editMode) textareaEl?.focus?.();
+		else toggleBtnEl?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		(toggleBtnEl ?? textareaEl)?.scrollIntoView?.({
+			behavior: "smooth",
+			block: "center",
+			...opts,
+		});
+	}
+
 	const TEXTAREA_CLS =
 		"w-full min-h-16 p-2 font-mono text-sm focus:outline-none focus:ring-0";
 
@@ -263,6 +305,7 @@
 			{#if editMode}
 				<textarea
 					bind:value
+					bind:this={textareaEl}
 					{id}
 					class={TEXTAREA_CLS}
 					{tabindex}
@@ -287,6 +330,7 @@
 		<button
 			type="button"
 			class={BTN_CLS}
+			bind:this={toggleBtnEl}
 			onclick={toggleMode}
 			{disabled}
 			use:tooltip={() => ({
@@ -309,9 +353,23 @@
 	{name}
 	{value}
 	bind:this={hiddenInputEl}
-	use:validateAction={() => ({
-		enabled: !!validate,
-		...(typeof validate === "boolean" ? {} : validate),
-		setValidationResult,
-	})}
+	use:validateAction={() => {
+		const customOpts = typeof validateProp === "object" && validateProp ? validateProp : {};
+		const userValidator = customOpts.customValidator;
+		return {
+			enabled: validateProp !== false,
+			...customOpts,
+			// Hidden inputs are barred from native constraint validation, so
+			// `required` on the element itself is a no-op. We enforce it here
+			// before delegating to the consumer's customValidator.
+			customValidator(val, ctx, el) {
+				if (required && (val == null || val === "")) {
+					return "This field requires attention. Please review and try again.";
+				}
+				return userValidator?.(val, ctx, el) || "";
+			},
+			setValidationResult,
+			setDoValidate: (fn) => (_doValidate = fn),
+		};
+	}}
 />

package/dist/components/Input/FieldObject.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
 import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
@@ -25,6 +25,12 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     style?: string;
     onChange?: (value: string) => void;
 }
-declare const FieldObject: import("svelte").Component<Props, {}, "value">;
+declare const FieldObject: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value">;
 type FieldObject = ReturnType<typeof FieldObject>;
 export default FieldObject;

package/dist/components/Input/FieldOptions.svelte

@@ -5,7 +5,10 @@
 	import { Debounced, watch } from "runed";
 	import { onDestroy, tick, type Snippet } from "svelte";
 	import { tooltip } from "../../actions/index.js";
-	import { type ValidateOptions } from "../../actions/validate.svelte.js";
+	import {
+		type ValidateOptions,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
 	import { getId } from "../../utils/get-id.js";
 	import { isPlainObject } from "../../utils/is-plain-object.js";
@@ -136,7 +139,8 @@
 		required = false,
 		disabled = false,
 		//
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		//
 		labelAfter,
 		below,
@@ -187,6 +191,34 @@
 	$effect(() => {
 		modal = modalDialog;
 	});
+
+	// Imperative API delegates to the inner FieldLikeButton trigger.
+	let triggerRef: FieldLikeButton | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		return triggerRef?.validate();
+	}
+
+	/** Clear the inline validation message. */
+	export function clearValidation(): void {
+		triggerRef?.clearValidation?.();
+	}
+
+	/** Current validation state. */
+	export function getValidation(): ValidationResult | undefined {
+		return triggerRef?.getValidation?.();
+	}
+
+	/** Focus the visible trigger button. */
+	export function focus(): void {
+		triggerRef?.focus?.();
+	}
+
+	/** Scroll the field into view. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		triggerRef?.scrollIntoView?.(opts);
+	}
 	let innerValue = $state("");
 	let isFetching = $state(false);
 	let isUnmounted = false;
@@ -214,7 +246,7 @@
 			if (selected.length > cardinality) return "rangeOverflow";
 
 			// continue with provided validator
-			return (validate as any)?.customValidator?.(value, context, el) || "";
+			return (validateProp as any)?.customValidator?.(value, context, el) || "";
 		},
 		t(reason: keyof ValidityStateFlags, value: any, fallback: string) {
 			// Unfortunately, for hidden, everything is a `customError` reason. So, we must generalize...
@@ -508,6 +540,7 @@
 		{@render trigger({ value, modal: modalDialog })}
 	{:else}
 		<FieldLikeButton
+			bind:this={triggerRef}
 			bind:value
 			bind:input={parentHiddenInputEl}
 			{name}

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
-import { type ValidateOptions } from "../../actions/validate.svelte.js";
+import { type ValidateOptions, type ValidationResult } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import { ModalDialog } from "../ModalDialog/index.js";
 import { NotificationsStack } from "../Notifications/index.js";
@@ -62,6 +62,12 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     itemIdPropName?: string;
     onChange?: (value: string) => void;
 }
-declare const FieldOptions: import("svelte").Component<Props, {}, "value" | "input" | "modal">;
+declare const FieldOptions: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value" | "input" | "modal">;
 type FieldOptions = ReturnType<typeof FieldOptions>;
 export default FieldOptions;

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -98,7 +98,8 @@
 		renderSize = "md",
 		required = false,
 		disabled = false,
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		//
 		labelAfter,
 		inputAfter,
@@ -134,6 +135,35 @@
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
 
+	let _doValidate: (() => void) | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		hiddenInputEl?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the visible tel input. */
+	export function focus(): void {
+		input?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		input?.scrollIntoView?.({ behavior: "smooth", block: "center", ...opts });
+	}
+
 	// Filtered country list
 	let countryList = $derived.by(() => {
 		if (!allowedCountries) return COUNTRIES;
@@ -316,20 +346,35 @@
 	/>
 </InputWrap>
 
-<!-- Hidden input for form submission and validation -->
-{#if name}
+<!-- Hidden input for form submission and validation.
+     Rendered whenever validation is enabled (default) OR `name` is set, so
+     imperative `validate()` works even when the field is used outside a
+     <form> / without a name. A hidden input without `name` is skipped by
+     FormData per the HTML spec, so this is invisible to form submission. -->
+{#if name || validateProp !== false}
 	<input
 		type="hidden"
 		{name}
 		value={value ?? ""}
 		bind:this={hiddenInputEl}
 		use:validateAction={() => {
-			const customOpts = typeof validate === "object" && validate ? validate : {};
+			const customOpts =
+				typeof validateProp === "object" && validateProp ? validateProp : {};
+			const innerValidator = customOpts.customValidator ?? validatePhoneNumber;
 			return {
-				enabled: validate !== false,
+				enabled: validateProp !== false,
 				...customOpts,
-				customValidator: customOpts.customValidator ?? validatePhoneNumber,
+				// Hidden inputs are barred from native constraint validation, so
+				// `required` on the element itself is a no-op. We enforce it here
+				// before delegating to the consumer's (or default) validator.
+				customValidator(val, ctx, el) {
+					if (required && (val == null || val === "")) {
+						return "This field requires attention. Please review and try again.";
+					}
+					return innerValidator(val, ctx, el) || "";
+				},
 				setValidationResult,
+				setDoValidate: (fn) => (_doValidate = fn),
 			};
 		}}
 	/>

package/dist/components/Input/FieldPhoneNumber.svelte.d.ts

@@ -52,6 +52,13 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
     t?: TranslateFn;
     onChange?: (value: string) => void;
 }
-declare const FieldPhoneNumber: import("svelte").Component<Props, {}, "value" | "input" | "country" | "dialCode" | "localNumber">;
+import { type ValidationResult } from "../../actions/validate.svelte.js";
+declare const FieldPhoneNumber: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value" | "input" | "country" | "dialCode" | "localNumber">;
 type FieldPhoneNumber = ReturnType<typeof FieldPhoneNumber>;
 export default FieldPhoneNumber;

package/dist/components/Input/FieldRadios.svelte

@@ -38,7 +38,8 @@
 		required,
 		disabled,
 		renderSize = "md",
-		validate,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
 		//
 		class: classProp,
 		classRadioBox,
@@ -63,6 +64,38 @@
 	let validation = $state<ValidationResult | undefined>();
 	let invalid = $derived(validation && !validation?.valid);
 
+	// Refs to each rendered radio — used for the imperative validate() / focus().
+	// All radios in the group share validity (browser-level), so delegating to
+	// the first one is sufficient to run the validator.
+	let radioRefs: (FieldRadioInternal | undefined)[] = $state([]);
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		radioRefs[0]?.validate();
+		return validation;
+	}
+
+	/** Clear the inline validation message. */
+	export function clearValidation(): void {
+		for (const r of radioRefs) r?.clearValidation?.();
+		validation = undefined;
+	}
+
+	/** Current validation state. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the first radio. */
+	export function focus(): void {
+		radioRefs[0]?.focus?.();
+	}
+
+	/** Scroll the field into view. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		radioRefs[0]?.scrollIntoView?.(opts);
+	}
+
 	// $inspect(value);
 </script>
 
@@ -75,6 +108,7 @@
 		<div class={twMerge("radios-box", "gap-y-2 grid p-2 mb-8", classProp)}>
 			{#each _options as o, i}
 				<FieldRadioInternal
+					bind:this={radioRefs[i]}
 					{name}
 					bind:group={value}
 					label={o.label}
@@ -84,7 +118,7 @@
 					{disabled}
 					{tabindex}
 					{required}
-					{validate}
+					validate={validateProp}
 					{classRadioBox}
 					{classInputBox}
 					{classInput}