coles-solid-library 0.4.7 → 0.4.9

package/dist/index.esm.js

@@ -1493,13 +1493,329 @@ var css_248z$e = "@charset \"UTF-8\";\n.input-module_input__-LMoi {\n  width: 10
 var styles$9 = {"input":"input-module_input__-LMoi","disabled":"input-module_disabled__40ZHw","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
 styleInject(css_248z$e);
 
+/**
+ * A class that encapsulates an array of FormGroup instances along with optional array-level validation.
+ *
+ * @template T - An object type representing the shape of a single form group's value.
+ */
+class FormArray {
+  /**
+   * Array-level validators that validate the entire array of form group values.
+   * @private
+   */
+  internalArrayValidation;
+  /**
+   * The FormGroup instances managed by this array.
+   * @private
+   */
+  groups;
+  /**
+   * Solid store setter for the groups array.
+   * @private
+   */
+  setGroups;
+  /**
+   * Array-level errors (from array-level validators only).
+   * Per-item errors live in each FormGroup.
+   * @private
+   */
+  arrayErrors = [];
+  /**
+   * Snapshot of initial groups for reset.
+   * @private
+   */
+  _initialGroups;
+  /**
+   * Creates an instance of FormArray.
+   *
+   * @param groups - An array of FormGroup instances representing the initial items.
+   * @param arrayValidators - Optional array-level validators (e.g., min/max item count).
+   */
+  constructor(groups = [], arrayValidators = []) {
+    const [storeGroups, setStoreGroups] = createStore([...groups]);
+    this.groups = storeGroups;
+    this.setGroups = setStoreGroups;
+    this.internalArrayValidation = arrayValidators;
+    this._initialGroups = [...groups];
+  }
+  /**
+   * Returns the number of items in the array.
+   */
+  get length() {
+    return this.groups.length;
+  }
+  /**
+   * Returns true if any validator (array-level or within any group) exists matching the provided errKey.
+   * If no errKey provided, returns true when any validator exists at all.
+   */
+  hasAnyValidator(errKey) {
+    if (!errKey) {
+      return this.internalArrayValidation.length > 0 || this.groups.some(g => g.hasAnyValidator());
+    }
+    const inArray = this.internalArrayValidation.some(v => v.errKey === errKey);
+    if (inArray) return true;
+    return this.groups.some(g => g.hasAnyValidator(errKey));
+  }
+  /**
+   * Resets the array to its initial groups and clears array-level errors.
+   * Each initial FormGroup is reset to its own initial state.
+   */
+  reset() {
+    this._initialGroups.forEach(g => g.reset());
+    this.setGroups(() => [...this._initialGroups]);
+    this.arrayErrors = [];
+  }
+  /**
+   * Gets the current values of all form groups in the array.
+   *
+   * @returns An array of cloned plain-object values from each FormGroup.
+   */
+  get() {
+    return this.groups.map(g => g.get());
+  }
+  /**
+   * Gets the value of a specific form group in the array.
+   *
+   * @param index - The index of the group.
+   * @returns A cloned copy of the group's value, or undefined if out of bounds.
+   */
+  getAt(index) {
+    if (index < 0 || index >= this.groups.length) {
+      return undefined;
+    }
+    return this.groups[index].get();
+  }
+  /**
+   * Gets the FormGroup instance at the specified index.
+   *
+   * @param index - The index of the group.
+   * @returns The FormGroup instance, or undefined if out of bounds.
+   */
+  getGroup(index) {
+    if (index < 0 || index >= this.groups.length) {
+      return undefined;
+    }
+    return this.groups[index];
+  }
+  /**
+   * Returns a shallow copy of all FormGroup instances.
+   */
+  getGroups() {
+    return [...this.groups];
+  }
+  /**
+   * Gets a property value from the FormGroup at the specified index.
+   *
+   * @param index - The index of the group.
+   * @param key - The property key to retrieve.
+   * @returns The property value, or undefined if not found.
+   */
+  getProperty(index, key) {
+    const group = this.getGroup(index);
+    return group ? group.get(key) : undefined;
+  }
+  /**
+   * Sets the values of all groups. Updates existing groups in-place and
+   * discards any excess groups. Does not create new groups for excess values.
+   *
+   * @param values - The new values for the groups.
+   */
+  set(values) {
+    const len = Math.min(values.length, this.groups.length);
+    for (let i = 0; i < len; i++) {
+      const val = values[i];
+      for (const key in val) {
+        this.groups[i].set(key, val[key]);
+      }
+    }
+    // If fewer values than groups, remove excess groups
+    if (values.length < this.groups.length) {
+      this.setGroups(old => old.slice(0, values.length));
+    }
+  }
+  /**
+   * Sets the value of a group at the specified index.
+   *
+   * @param index - The index of the group to update.
+   * @param value - The new value for the group.
+   */
+  setAt(index, value) {
+    const group = this.getGroup(index);
+    if (!group) {
+      console.error(`Index ${index} out of bounds.`);
+      return;
+    }
+    for (const key in value) {
+      group.set(key, value[key]);
+    }
+  }
+  /**
+   * Sets a property value on the FormGroup at the specified index.
+   *
+   * @param index - The index of the group.
+   * @param key - The property key to set.
+   * @param value - The new value for the property.
+   */
+  setProperty(index, key, value) {
+    const group = this.getGroup(index);
+    if (!group) {
+      console.error(`Index ${index} out of bounds.`);
+      return;
+    }
+    group.set(key, value);
+  }
+  /**
+   * Removes a group at the specified index.
+   *
+   * @param index - The index of the group to remove.
+   */
+  remove(index) {
+    this.setGroups(old => {
+      const copy = [...old];
+      copy.splice(index, 1);
+      return copy;
+    });
+  }
+  /**
+   * Replaces a group at the specified index with a new FormGroup.
+   *
+   * @param index - The index of the group to replace.
+   * @param group - The new FormGroup instance.
+   */
+  replace(index, group) {
+    this.setGroups(old => {
+      const copy = [...old];
+      copy[index] = group;
+      return copy;
+    });
+  }
+  /**
+   * Adds a new FormGroup to the array.
+   *
+   * @param group - The FormGroup instance to add.
+   */
+  add(group) {
+    this.setGroups(old => [...old, group]);
+  }
+  /**
+   * Checks if any validation errors exist.
+   *
+   * @param index - (Optional) The index of the group to check for errors.
+   * If not provided, checks all groups and array-level errors.
+   * @returns `true` if any errors are found, otherwise `false`.
+   */
+  hasError(index) {
+    if (index !== undefined && index !== null) {
+      const group = this.getGroup(index);
+      if (!group) return false;
+      return group.hasAnyError();
+    }
+    const anyGroupError = this.groups.some(g => g.hasAnyError());
+    const anyArrayError = this.arrayErrors.some(e => e.hasError);
+    return anyGroupError || anyArrayError;
+  }
+  /**
+   * Checks if a specific validator error exists for a group at the given index.
+   *
+   * @param index - The index of the group.
+   * @param errKey - The key identifying the specific error to check for.
+   * @returns `true` if the specific error is present, otherwise `false`.
+   */
+  hasValidator(index, errKey) {
+    const group = this.getGroup(index);
+    if (!group) return false;
+    return group.hasAnyValidator(errKey);
+  }
+  /**
+   * Gets all errors for the form array.
+   * Each inner array contains the errors from one FormGroup plus array-level errors.
+   *
+   * @returns An array of error arrays for each group.
+   */
+  getErrors() {
+    return this.groups.map(g => {
+      return [...g.getAllErrors(), ...Clone(this.arrayErrors)];
+    });
+  }
+  /**
+   * Gets errors for a specific group in the array.
+   *
+   * @param index - The index of the group.
+   * @returns An array of errors for the group, or an empty array if not found.
+   */
+  getErrorsAt(index) {
+    const group = this.getGroup(index);
+    if (!group) return [];
+    return [...group.getAllErrors(), ...Clone(this.arrayErrors)];
+  }
+  /**
+   * Gets only array-level errors (not per-group errors).
+   */
+  getArrayErrors() {
+    return Clone(this.arrayErrors);
+  }
+  /**
+   * Validates the form array using current values.
+   *
+   * @param index - Optional index to validate just one group.
+   * @returns True if validation passes, false otherwise.
+   */
+  validateCurrent(index) {
+    return this.validate(index);
+  }
+  /**
+   * Validates the form array.
+   *
+   * @param index - (Optional) The index of a single group to validate.
+   * If not provided, validates all groups and array-level validators.
+   * @returns `true` if all validations pass, otherwise `false`.
+   */
+  validate(index) {
+    // Run array-level validators
+    const values = this.get();
+    this.arrayErrors = this.internalArrayValidation.map(validator => ({
+      key: validator.errKey,
+      hasError: !validator.revalidate(values)
+    }));
+    const arrayValid = this.arrayErrors.every(e => !e.hasError);
+    if (index !== undefined && index !== null) {
+      const group = this.getGroup(index);
+      if (!group) return false;
+      const groupValid = group.validate();
+      return groupValid && arrayValid;
+    }
+    // Validate all groups
+    const groupResults = this.groups.map(g => g.validate());
+    const allGroupsValid = groupResults.every(Boolean);
+    return allGroupsValid && arrayValid;
+  }
+}
+
 var _tmpl$$j = /*#__PURE__*/template(`<form>`);
 const FormContext = createContext();
 const useFormContext = () => {
   return useContext(FormContext);
 };
 const Form = props => {
-  const startData = props.data.get() ?? {};
+  if (props.data instanceof FormArray) {
+    const fa = props.data;
+    return createComponent(ArrayProvider, {
+      formArray: fa,
+      get children() {
+        return createComponent(FormInnerArray, {
+          get onSubmit() {
+            return props.onSubmit;
+          },
+          get children() {
+            return props.children;
+          },
+          formArray: fa
+        });
+      }
+    });
+  }
+  const fg = props.data;
+  const startData = fg.get() ?? {};
   // Custom shallow clone preserving FormArray instances (already handled in FormGroup.get)
   const initialValue = {};
   Object.keys(startData).forEach(k => {
@@ -1507,11 +1823,17 @@ const Form = props => {
   });
   return createComponent(Provider, {
     value: initialValue,
-    get formGroup() {
-      return props.data;
-    },
+    formGroup: fg,
     get children() {
-      return createComponent(FormInner, props);
+      return createComponent(FormInner, {
+        data: fg,
+        get onSubmit() {
+          return props.onSubmit;
+        },
+        get children() {
+          return props.children;
+        }
+      });
     }
   });
 };
@@ -1521,7 +1843,7 @@ const FormInner = props => {
   const submitFunction = e => {
     const submitData = CloneStore(formData?.data ?? {});
     e.preventDefault();
-    if (formData.formGroup.validate()) {
+    if (formData.formGroup?.validate()) {
       props?.onSubmit?.(submitData);
     }
   };
@@ -1538,6 +1860,27 @@ const FormInner = props => {
     return _el$;
   })();
 };
+const FormInnerArray = props => {
+  const [formRef, setFormRef] = createSignal();
+  const submitFunction = e => {
+    e.preventDefault();
+    if (props.formArray.validateCurrent()) {
+      props.onSubmit(props.formArray.get());
+    }
+  };
+  createEffect(() => {
+    formRef()?.addEventListener('submit', submitFunction);
+  });
+  onCleanup(() => {
+    formRef()?.removeEventListener('submit', submitFunction);
+  });
+  return (() => {
+    var _el$2 = _tmpl$$j();
+    use(setFormRef, _el$2);
+    insert(_el$2, () => props.children);
+    return _el$2;
+  })();
+};
 const Provider = props => {
   const defaultData = props.value ?? {};
   const [data, setData] = createStore(defaultData);
@@ -1565,19 +1908,136 @@ const Provider = props => {
     }
   });
 };
+const ArrayProvider = props => {
+  const [data, setData] = createStore({});
+  return createComponent(FormContext.Provider, {
+    get value() {
+      return {
+        data,
+        setData,
+        formArray: props.formArray
+      };
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+/**
+ * Hook that resolves form binding from direct props, with FormField context as fallback.
+ *
+ * Supports three binding modes:
+ * 1. **FormGroup (simple)**: `formName` binds to `formGroup.data[formName]`
+ * 2. **FormArray (top-level)**: `formIndex` + `formName` binds to `formArray.getAt(formIndex)[formName]`
+ * 3. **FormArray (within FormGroup)**: `formArrayName` + `formIndex` + `formName` binds to
+ *    `formGroup.data[formArrayName].getAt(formIndex)[formName]`
+ *
+ * Priority: direct props > FormField context > undefined
+ */
+function useDirectFormBinding(props) {
+  const fieldContext = useFormProvider();
+  const formContext = useFormContext();
+  const resolvedFormName = props.formName ?? fieldContext?.formName;
+  // Determine which FormArray we're targeting (if any)
+  const resolvedFormArray = createMemo(() => {
+    if (props.formIndex === undefined) return undefined;
+    // Top-level FormArray
+    if (formContext?.formArray) {
+      return formContext.formArray;
+    }
+    // FormArray within FormGroup
+    if (props.formArrayName && formContext?.formGroup) {
+      const field = formContext.formGroup.getR(props.formArrayName);
+      if (field instanceof FormArray) {
+        return field;
+      }
+    }
+    return undefined;
+  });
+  const isFormArray = createMemo(() => !!resolvedFormArray());
+  const getValue = () => {
+    const fa = resolvedFormArray();
+    if (fa && props.formIndex !== undefined && resolvedFormName) {
+      return fa.getProperty(props.formIndex, resolvedFormName);
+    }
+    // Simple FormGroup binding
+    if (resolvedFormName && formContext?.data) {
+      return formContext.data[resolvedFormName];
+    }
+    return undefined;
+  };
+  const setValue = val => {
+    const fa = resolvedFormArray();
+    if (fa && props.formIndex !== undefined && resolvedFormName) {
+      fa.setProperty(props.formIndex, resolvedFormName, val);
+      return;
+    }
+    // Simple FormGroup binding
+    if (resolvedFormName && formContext?.formGroup) {
+      formContext.formGroup.set(resolvedFormName, val);
+      formContext.setData?.(resolvedFormName, val);
+    }
+  };
+  const markDirty = () => {
+    const fa = resolvedFormArray();
+    if (fa && props.formIndex !== undefined && resolvedFormName) {
+      const group = fa.getGroup(props.formIndex);
+      if (group) {
+        group.markDirty(resolvedFormName);
+      }
+      return;
+    }
+    if (resolvedFormName && formContext?.formGroup) {
+      const meta = formContext.formGroup.getMeta(resolvedFormName);
+      if (meta && !meta.dirty) {
+        formContext.formGroup.markDirty(resolvedFormName);
+      }
+    }
+  };
+  const validate = () => {
+    const fa = resolvedFormArray();
+    if (fa && props.formIndex !== undefined) {
+      return fa.validateCurrent(props.formIndex);
+    }
+    if (resolvedFormName && formContext?.formGroup) {
+      return formContext.formGroup.validate(resolvedFormName);
+    }
+    return undefined;
+  };
+  return {
+    formName: resolvedFormName,
+    getValue,
+    setValue,
+    markDirty,
+    validate,
+    formGroup: formContext?.formGroup,
+    formArray: resolvedFormArray(),
+    isFormArray: isFormArray()
+  };
+}
 
 var _tmpl$$i = /*#__PURE__*/template(`<input>`);
 const Input = props => {
-  const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange"]);
+  const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange", "formName", "formIndex", "formArrayName"]);
   const context = useFormProvider();
   const formContext = useFormContext();
+  const binding = useDirectFormBinding({
+    formName: props.formName,
+    formIndex: props.formIndex,
+    formArrayName: props.formArrayName
+  });
+  const effectiveFormName = binding.formName;
   // Determine the input's value using form context or provided prop value
   const inputValue = createMemo(() => {
     if (!isNullish(props?.value)) {
       return props.value;
     }
-    if (!isNullish(formContext?.data?.[context.formName ?? ""])) {
-      return formContext.data[context.formName ?? ""];
+    if (binding.isFormArray) {
+      return binding.getValue();
+    }
+    if (!isNullish(formContext?.data?.[effectiveFormName ?? ""])) {
+      return formContext.data[effectiveFormName ?? ""];
     }
     if (!isNullish(context.getValue)) {
       return context.getValue();
@@ -1586,20 +2046,23 @@ const Input = props => {
   });
   const isRequired = createMemo(() => {
     if (context && formContext) {
-      const key = context?.formName ?? "";
+      const key = effectiveFormName ?? "";
       return formContext?.formGroup?.hasValidator?.(key, 'required');
     }
     return Object.keys(normalProps).includes("required") && props?.required !== false || props?.required === true;
   });
   // onChange only handles non-checkbox values
   const onChange = e => {
-    if (!isNullish(formContext?.setData) && !!formContext?.formGroup?.get) {
+    if (binding.isFormArray) {
+      binding.setValue(e.currentTarget.value);
+      context?.setTextInside?.(!isNullish(e.currentTarget.value) && e.currentTarget.value?.trim() !== "");
+    } else if (!isNullish(formContext?.setData) && !!formContext?.formGroup?.get) {
       const textInside = !isNullish(e.currentTarget.value) && e.currentTarget.value?.trim() !== "";
       context?.setTextInside?.(textInside);
-      formContext.formGroup?.set?.(context.formName ?? "", e.currentTarget.value);
+      formContext.formGroup?.set?.(effectiveFormName ?? "", e.currentTarget.value);
       formContext?.setData?.(old => ({
         ...old,
-        [context.formName ?? ""]: e.currentTarget.value
+        [effectiveFormName ?? ""]: e.currentTarget.value
       }));
     } else if (!isNullish(context.getName) && !!context?.getName?.()) {
       if (e.currentTarget.value.trim()) {
@@ -1618,7 +2081,7 @@ const Input = props => {
       // Force a non-checkbox field type
       context.setFieldType(props.type === "checkbox" ? "text" : props.type ?? "text");
       if (!isNullish(formContext?.data)) {
-        const raw = formContext.data[context.formName ?? ""];
+        const raw = formContext.data[effectiveFormName ?? ""];
         if (typeof raw === 'string') {
           const formValue = raw.trim();
           if (formValue) {
@@ -1680,6 +2143,10 @@ const Input = props => {
         if (props.disabled) return;
         if (!isNullish(context.getName)) {
           context.setFocused?.(true);
+          if (effectiveFormName && formContext?.formGroup?.markDirty) {
+            const meta = formContext.formGroup.getMeta(effectiveFormName);
+            if (meta && !meta.dirty) formContext.formGroup.markDirty(effectiveFormName);
+          }
         }
       },
       "onBlur": e => {
@@ -1687,12 +2154,12 @@ const Input = props => {
         if (!isNullish(context.getName)) {
           context?.setFocused?.(prev => {
             if (prev) {
-              formContext?.formGroup?.validate?.(context?.formName ?? "");
+              formContext?.formGroup?.validate?.(effectiveFormName ?? "");
             }
             return false;
           });
           const noValue = !e.currentTarget?.value?.trim();
-          const noFormValue = !formContext?.data?.[context?.formName ?? ""];
+          const noFormValue = !formContext?.data?.[effectiveFormName ?? ""];
           const noContextValue = !context?.getValue();
           context.setTextInside(noValue && noFormValue && noContextValue);
         }
@@ -1721,12 +2188,18 @@ var _tmpl$$h = /*#__PURE__*/template(`<label><input type=checkbox><span>`),
 function Checkbox(props) {
   const field = useFormProvider();
   const formCtx = useFormContext();
-  const formName = field?.formName;
+  const binding = useDirectFormBinding({
+    formName: props.formName,
+    formIndex: props.formIndex,
+    formArrayName: props.formArrayName
+  });
+  const formName = binding.formName;
   // Internal state for uncontrolled usage outside form context
   const [internalChecked, setInternalChecked] = createSignal(props.defaultChecked ?? false);
-  // Derive current checked state with priority: controlled prop -> form context -> field local value -> internal state
+  // Derive current checked state with priority: controlled prop -> FormArray -> form context -> field local value -> internal state
   const checkedState = createMemo(() => {
     if (props.checked !== undefined) return !!props.checked;
+    if (binding.isFormArray) return !!binding.getValue();
     if (formName && formCtx?.data) return !!formCtx.data[formName];
     if (field?.getValue) return !!field.getValue();
     return internalChecked();
@@ -1741,7 +2214,9 @@ function Checkbox(props) {
   });
   const commitValue = next => {
     if (props.checked === undefined) {
-      if (formName && formCtx?.formGroup) {
+      if (binding.isFormArray) {
+        binding.setValue(next);
+      } else if (formName && formCtx?.formGroup) {
         formCtx.formGroup.set(formName, next);
         formCtx.setData?.(formName, next);
       } else if (field?.setValue) {
@@ -1856,6 +2331,9 @@ function getEntryAmount() {
 function ignoreWindowManager(element) {
   manager.ignoreElement(element);
 }
+function unignoreWindowManager(element) {
+  manager.unignoreElement(element);
+}
 // Unregister the given element.
 function unregisterWindowManager(entry) {
   manager.unregister(entry);
@@ -2081,6 +2559,7 @@ function Select(props) {
   const [selectRef, setSelectRef] = createSignal();
   const [dropdownRef, setDropdownRef] = createSignal();
   const [mobilePopupRef, setMobilePopupRef] = createSignal();
+  let mobileOptionsRef;
   // Resolved rendering mode: 'popup' for fullscreen mobile popup, 'desktop' for traditional dropdown
   const resolvedMode = createMemo(() => {
     const mode = props.mobileMode ?? 'auto';
@@ -2091,11 +2570,17 @@ function Select(props) {
   });
   const form = useFormProvider();
   const formContext = useFormContext();
-  const hasForm = !!form?.formName || !!form?.getName || !!form?.getValue || !!form?.setValue || !!form?.getTextInside;
+  const binding = useDirectFormBinding({
+    formName: props.formName,
+    formIndex: props.formIndex,
+    formArrayName: props.formArrayName
+  });
+  const effectiveFormName = binding.formName;
+  const hasForm = !!effectiveFormName || !!effectiveFormName || !!form?.getName || !!form?.getValue || !!form?.setValue || !!form?.getTextInside;
   const hasFormContext = hasForm && !!formContext?.formGroup;
   const currentValue = () => {
     if (hasFormContext) {
-      return formContext.data?.[form?.formName ?? ''];
+      return formContext.data?.[effectiveFormName ?? ''];
     }
     if (hasForm) {
       return form.getValue();
@@ -2163,9 +2648,9 @@ function Select(props) {
   // Function to handle selecting/toggling an option for single or multi-select
   // When not using a form or greater FormContext
   const selectValue = val => {
-    if (form?.formName && formContext?.formGroup?.markDirty) {
-      const meta = formContext.formGroup.getMeta(form?.formName);
-      if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
+    if (effectiveFormName && formContext?.formGroup?.markDirty) {
+      const meta = formContext.formGroup.getMeta(effectiveFormName);
+      if (meta && !meta.dirty) formContext.formGroup.markDirty(effectiveFormName);
     }
     if (isMultiple) {
       // For multi-select, toggle the value in the array
@@ -2176,9 +2661,16 @@ function Select(props) {
       } else {
         newSelected = [...current, val];
       }
+      // Preserve scroll position in mobile popup before reactive updates
+      const savedScrollTop = mobileOptionsRef?.scrollTop;
       setSelected(() => newSelected);
       props?.onChange?.(newSelected);
       props?.onSelect?.(newSelected);
+      if (savedScrollTop != null && mobileOptionsRef) {
+        queueMicrotask(() => {
+          mobileOptionsRef.scrollTop = savedScrollTop;
+        });
+      }
     } else {
       setSelected(() => val);
       props?.onChange?.(val);
@@ -2287,7 +2779,7 @@ function Select(props) {
     setOpen(false);
     form?.setFocused?.(prev => {
       if (prev) {
-        formContext?.formGroup?.validate?.(form?.formName ?? '');
+        formContext?.formGroup?.validate?.(effectiveFormName ?? '');
       }
       return false;
     });
@@ -2329,7 +2821,7 @@ function Select(props) {
     setOpen(false);
     form?.setFocused?.(prev => {
       if (prev) {
-        formContext?.formGroup?.validate?.(form?.formName ?? '');
+        formContext?.formGroup?.validate?.(effectiveFormName ?? '');
       }
       return false;
     });
@@ -2406,7 +2898,8 @@ function Select(props) {
     isDisabled,
     closeDropdown: () => {
       if (!isMultiple) setOpen(false);
-    }
+    },
+    formName: effectiveFormName
   }));
   // --- Keyboard handler ---
   const handleKeyDown = e => {
@@ -2513,6 +3006,10 @@ function Select(props) {
     _el$7.addEventListener("focus", () => {
       if (isDisabled()) return;
       form?.setFocused?.(true);
+      if (effectiveFormName && formContext?.formGroup?.markDirty) {
+        const meta = formContext.formGroup.getMeta(effectiveFormName);
+        if (meta && !meta.dirty) formContext.formGroup.markDirty(effectiveFormName);
+      }
     });
     _el$7._$owner = getOwner();
     _el$8.$$click = e => {
@@ -2608,6 +3105,8 @@ function Select(props) {
                     use(setMobilePopupRef, _el$14);
                     insert(_el$16, mobilePopupTitle);
                     _el$17.$$click = () => closeMobilePopup();
+                    var _ref$ = mobileOptionsRef;
+                    typeof _ref$ === "function" ? use(_ref$, _el$18) : mobileOptionsRef = _el$18;
                     insert(_el$18, () => props.children);
                     insert(_el$14, createComponent(Show, {
                       when: isMultiple,
@@ -2735,30 +3234,30 @@ function Option(props) {
   };
   const selectFormContextValue = value => {
     if (formContext) {
-      const currentValue = formContext.data[formField?.formName ?? ''];
+      const currentValue = formContext.data[select?.formName ?? formField?.formName ?? ''];
       formField?.setFocused?.(true);
       if (Array.isArray(currentValue)) {
         if (currentValue.includes(value)) {
           const setValue = currentValue.filter(val => val !== value);
-          formContext.formGroup.set(formField?.formName ?? '', setValue);
+          formContext?.formGroup?.set?.(select?.formName ?? formField?.formName ?? '', setValue);
           formContext.setData(old => ({
             ...old,
-            [formField?.formName ?? '']: setValue
+            [select?.formName ?? formField?.formName ?? '']: setValue
           }));
           return true;
         } else {
-          formContext.formGroup.set(formField?.formName ?? '', [...currentValue, value]);
+          formContext?.formGroup?.set?.(select?.formName ?? formField?.formName ?? '', [...currentValue, value]);
           formContext.setData(old => ({
             ...old,
-            [formField?.formName ?? '']: [...currentValue, value]
+            [select?.formName ?? formField?.formName ?? '']: [...currentValue, value]
           }));
           return true;
         }
       } else {
-        formContext.formGroup.set(formField?.formName ?? '', value);
+        formContext?.formGroup?.set?.(select?.formName ?? formField?.formName ?? '', value);
         formContext.setData(old => ({
           ...old,
-          [formField?.formName ?? '']: value
+          [select?.formName ?? formField?.formName ?? '']: value
         }));
         return true;
       }
@@ -2770,7 +3269,7 @@ function Option(props) {
     e.stopPropagation();
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
-    if (!formField?.getName?.()) {
+    if (!formField?.getName?.() && !select?.formName) {
       select.selectValue?.(props.value);
     } else {
       // Form handled the value — still need to close for single select
@@ -2825,14 +3324,23 @@ styleInject(css_248z$b);
 var _tmpl$$e = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
-  const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
+  const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent", "formName", "formIndex", "formArrayName"]);
   const fieldCtx = useFormProvider();
   const formCtx = useFormContext();
-  const formName = fieldCtx?.formName;
+  const binding = useDirectFormBinding({
+    formName: props.formName,
+    formIndex: props.formIndex,
+    formArrayName: props.formArrayName
+  });
+  const formName = binding.formName;
   // Internal state only used when not provided externally and not in form context.
   const [internal, setInternal] = createSignal(customProps.text ? customProps.text() : "");
-  // Determine current value priority: FormGroup -> external accessor -> internal state
+  // Determine current value priority: FormArray -> FormGroup -> external accessor -> internal state
   const areaValue = createMemo(() => {
+    if (binding.isFormArray) {
+      const val = binding.getValue();
+      return val !== undefined && val !== null ? String(val) : '';
+    }
     if (formName && formCtx?.data && !isNullish(formCtx.data[formName])) {
       return formCtx.data[formName];
     }
@@ -2886,7 +3394,9 @@ const TextArea = props => {
     if (props.disabled) return;
     const newVal = e.currentTarget.value;
     // Update whichever source is active
-    if (formName && formCtx?.formGroup) {
+    if (binding.isFormArray) {
+      binding.setValue(newVal);
+    } else if (formName && formCtx?.formGroup) {
       formCtx.formGroup.set(formName, newVal);
       formCtx.setData?.(formName, newVal);
     } else if (customProps.setText) {
@@ -3593,19 +4103,27 @@ function RadioGroup(props) {
   radioGroupCount++;
   const groupName = props.name ?? `radio-group-${radioGroupCount}`;
   const [internalValue, setInternalValue] = createSignal(props.defaultValue);
-  const formField = useFormProvider();
+  useFormProvider();
   const formContext = useFormContext();
+  const binding = useDirectFormBinding({
+    formName: props.formName,
+    formIndex: props.formIndex,
+    formArrayName: props.formArrayName
+  });
+  const effectiveFormName = binding.formName;
   const selectedValue = () => props.value !== undefined ? props.value : internalValue();
   const setSelectedValue = val => {
     if (props.value === undefined) {
       setInternalValue(val);
     }
-    // Bridge to FormGroup if inside a FormField with formName
-    if (formField?.formName && formContext?.formGroup?.set) {
-      formContext.formGroup.set(formField.formName, val);
+    // Bridge to FormGroup/FormArray
+    if (binding.isFormArray && effectiveFormName) {
+      binding.setValue(val);
+    } else if (effectiveFormName && formContext?.formGroup?.set) {
+      formContext.formGroup.set(effectiveFormName, val);
       formContext.setData(old => ({
         ...old,
-        [formField.formName]: val
+        [effectiveFormName]: val
       }));
     }
     props.onChange?.(val);
@@ -3798,334 +4316,6 @@ function Radio(props) {
 }
 delegateEvents(["keydown"]);
 
-/**
- * A class that encapsulates an array of form controls along with their validation logic.
- *
- * @template T - An object type representing the shape of a single form control's value.
- */
-class FormArray {
-  /**
-   * An array of array-level validators. Each validator validates the entire array of form control values.
-   * Each element is a ValidatorResult function that returns a validation result for the entire array.
-   *
-   * @private
-   */
-  internalArrayValidation;
-  /**
-   * An array of control-level validators. Each element is a tuple where the first value is not used
-   * in this class and the second value is an array of validators that validate a single control value.
-   *
-   * @private
-   */
-  internalValidation;
-  /**
-   * A function to update the current state of control-level validations.
-   *
-   * @private
-   */
-  setValidation;
-  /**
-   * An array of error arrays. Each inner array holds the errors corresponding to a single form control.
-   *
-   * @private
-   */
-  errors = [];
-  /**
-   * The current values of the form controls in the array.
-   *
-   * @private
-   */
-  internalValues;
-  /**
-   * A function to update the current values of the form controls.
-   *
-   * @private
-   */
-  setValues;
-  // Snapshots of initial validation defs & values for reset purposes
-  _initialValidationDefs;
-  _initialValuesSnapshot;
-  /**
-   * Creates an instance of FormArray.
-   *
-   * @param arrayValidation - A tuple where the first element is an initial array of control-level validation definitions
-   * and the second element is an array of array-level validators.
-   * @param initialValues - Optional initial values for the form controls.
-   */
-  constructor(arrayValidation, initialValues = []) {
-    const [valid, setValid] = createStore(arrayValidation[0]);
-    const [values, setValues] = createStore(initialValues);
-    this.internalArrayValidation = arrayValidation[1];
-    this.internalValidation = valid;
-    this.setValidation = setValid;
-    this.internalValues = values;
-    this.setValues = setValues;
-    this._initialValidationDefs = [...arrayValidation[0]];
-    this._initialValuesSnapshot = Array.isArray(initialValues) ? Clone(initialValues) : Clone([initialValues]);
-  }
-  /**
-   * Returns true if any validator (array-level or control-level) exists matching the provided errKey.
-   * If no errKey provided, returns true when any validator exists at all.
-   */
-  hasAnyValidator(errKey) {
-    if (!errKey) {
-      return this.internalArrayValidation.length > 0 || this.internalValidation.some(v => v[1].length > 0);
-    }
-    const inArray = this.internalArrayValidation.some(v => v.errKey === errKey);
-    if (inArray) return true;
-    return this.internalValidation.some(v => v[1].some(val => val.errKey === errKey));
-  }
-  /**
-   * Resets the array to its initial validation definitions and values.
-   * Clears any accumulated errors and added dynamic controls.
-   */
-  reset() {
-    this.setValidation(() => [...this._initialValidationDefs]);
-    this.setValues(() => Clone(this._initialValuesSnapshot));
-    this.errors = [];
-  }
-  /**
-   * Gets the current values of the form controls in the array.
-   *
-   * @returns A cloned copy of the values array.
-   */
-  get() {
-    // Return a cloned snapshot so external mutation of returned array/value objects
-    // can't silently mutate internal reactive state or bypass validation/meta tracking.
-    return Clone(this.internalValues);
-  }
-  /**
-   * Gets the value of a specific control in the array.
-   *
-   * @param index - The index of the control.
-   * @returns A cloned copy of the control value.
-   */
-  getAt(index) {
-    if (index < 0 || index >= this.internalValues.length) {
-      return undefined;
-    }
-    return CloneStore(this.internalValues[index]);
-  }
-  /**
-   * Gets a property value from an object at the specified index.
-   *
-   * @param index - The index of the control.
-   * @param key - The property key to retrieve.
-   * @returns The property value, or undefined if not found.
-   */
-  getProperty(index, key) {
-    const item = this.getAt(index);
-    return item ? item[key] : undefined;
-  }
-  /**
-   * Sets the values of all controls in the array.
-   *
-   * @param values - The new values for the controls.
-   */
-  set(values) {
-    this.setValues(Clone(values));
-  }
-  /**
-   * Sets the value of a control at the specified index.
-   *
-   * @param index - The index of the control to update.
-   * @param value - The new value for the control.
-   */
-  setAt(index, value) {
-    if (index < 0 || index >= this.internalValues.length) {
-      console.error(`Index ${index} out of bounds.`);
-      return;
-    }
-    this.setValues(index, Clone(value));
-  }
-  /**
-   * Sets a property value on an object at the specified index.
-   *
-   * @param index - The index of the control.
-   * @param key - The property key to set.
-   * @param value - The new value for the property.
-   */
-  setProperty(index, key, value) {
-    if (index < 0 || index >= this.internalValues.length) {
-      console.error(`Index ${index} out of bounds.`);
-      return;
-    }
-    this.setValues(index, oldValue => {
-      const newValue = {
-        ...oldValue
-      };
-      newValue[key] = Clone(value);
-      return newValue;
-    });
-  }
-  /**
-   * Removes a control at the specified index.
-   *
-   * @param index - The index of the control to remove.
-   */
-  remove(index) {
-    // Remove validation
-    this.setValidation(old => {
-      const copy = [...old];
-      copy.splice(index, 1);
-      return copy;
-    });
-    // Remove value
-    this.setValues(old => {
-      const copy = [...old];
-      copy.splice(index, 1);
-      return copy;
-    });
-    // Remove errors
-    if (this.errors.length > index) {
-      this.errors.splice(index, 1);
-    }
-  }
-  /**
-   * Replaces a control at the specified index with new validation and value.
-   *
-   * @param index - The index of the control to replace.
-   * @param controlValidation - The new validation to apply for the control.
-   * @param value - The new value for the control.
-   */
-  replace(index, controlValidation, value) {
-    this.setValidation(old => {
-      const copy = [...old];
-      copy.splice(index, 1, controlValidation);
-      return copy;
-    });
-    if (value !== undefined) {
-      this.setValues(index, Clone(value));
-    }
-  }
-  /**
-   * Adds a new control to the array with validation and optional value.
-   *
-   * @param controlValidation - The validation definition to add.
-   * @param value - Optional value for the new control.
-   */
-  add(controlValidation, value) {
-    this.setValidation(old => {
-      return [...old, controlValidation];
-    });
-    this.setValues(old => {
-      return [...old, value ? Clone(value) : {}];
-    });
-  }
-  /**
-   * Checks if any validation errors exist.
-   *
-   * @param index - (Optional) The index of the control to check for errors.
-   * If not provided, it checks the entire form array.
-   * @returns `true` if any errors are found, otherwise `false`.
-   */
-  hasError(index) {
-    if (isNullish(index)) {
-      // Check errors for all controls if no index is provided.
-      return this.errors.flat().some(error => error.hasError);
-    }
-    // Check errors for a specific control.
-    return this.errors[index].some(error => error.hasError);
-  }
-  /**
-   * Checks if a specific validator error exists for a control at the given index.
-   *
-   * @param index - The index of the control.
-   * @param errKey - The key identifying the specific error to check for.
-   * @returns `true` if the specific error is present, otherwise `false`.
-   */
-  hasValidator(index, errKey) {
-    return this.errors[index].some(error => error.key === errKey);
-  }
-  /**
-   * Gets all errors for the form array.
-   *
-   * @returns An array of error arrays for each control.
-   */
-  getErrors() {
-    return Clone(this.errors);
-  }
-  /**
-   * Gets errors for a specific control in the array.
-   *
-   * @param index - The index of the control.
-   * @returns An array of errors for the control, or an empty array if not found.
-   */
-  getErrorsAt(index) {
-    if (index < 0 || index >= this.errors.length) {
-      return [];
-    }
-    return Clone(this.errors[index]);
-  }
-  /**
-   * Validates the form array using current values.
-   *
-   * @param index - Optional index to validate just one control.
-   * @returns True if validation passes, false otherwise.
-   */
-  validateCurrent(index) {
-    return this.validate(this.internalValues, index);
-  }
-  /**
-   * Validates the provided form control values.
-   *
-   * @param values - The array of form control values.
-   * @param index - (Optional) The index of a single control to validate.
-   * If not provided, the method validates all controls in the form array.
-   * @returns `true` if all validations pass, otherwise `false`.
-   */
-  validate(values, index) {
-    if (isNullish(values)) {
-      console.error('Data is null');
-      return false;
-    }
-    // Validate all controls in the form array.
-    if (isNullish(index)) {
-      // Always evaluate array-level validators even if the array is empty
-      const arrayLevelErrors = this.internalArrayValidation.map(validator => ({
-        key: validator.errKey,
-        hasError: !validator.revalidate(values)
-      }));
-      if (values.length === 0) {
-        this.errors = [arrayLevelErrors]; // store array-level errors at index 0 placeholder
-        return this.errors.flat().every(error => !error.hasError);
-      }
-      this.errors = values.map((value, i) => {
-        const controlErrors = this.internalValidation.map(([propKey, validators]) => {
-          const currentVal = value[propKey];
-          return validators.map(validator => ({
-            key: validator.errKey,
-            hasError: !validator.revalidate(currentVal)
-          }));
-        });
-        const arrayErrors = this.internalArrayValidation.map(validator => ({
-          key: validator.errKey,
-          hasError: !validator.revalidate(values)
-        }));
-        const merged = [...controlErrors.flat(), ...arrayErrors];
-        this.errors[i] = merged;
-        return merged;
-      });
-      return this.errors.flat().every(error => !error.hasError);
-    }
-    // Validate a specific control in the form array.
-    const value = values[index];
-    const controlErrors = this.internalValidation.map(([propKey, validators]) => {
-      const currentVal = value[propKey];
-      return validators.map(validator => ({
-        key: validator.errKey,
-        hasError: !validator.revalidate(currentVal)
-      }));
-    });
-    const arrayErrors = this.internalArrayValidation.map(validator => ({
-      key: validator.errKey,
-      hasError: !validator.revalidate(values)
-    }));
-    this.errors[index] = [...controlErrors.flat(), ...arrayErrors];
-    return this.errors[index].every(error => !error.hasError);
-  }
-}
-
 var css_248z$2 = ".formfield-module_formField__w6mH9:focus-within > legend, .formfield-module_has-focus__9ingx > legend {\n  top: -8px !important;\n  font-size: 0.75rem !important;\n}\n\n.formfield-module_formField__w6mH9 {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n  border: none;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  margin-top: 0px !important;\n  margin-bottom: 0px !important;\n}\n.formfield-module_formField__w6mH9 > legend {\n  position: absolute;\n  left: 12px;\n  top: calc(50% - 0.5em);\n  font-size: 1rem;\n  transition: top 0.25s ease, font-size 0.25s ease;\n  pointer-events: none;\n}\n.formfield-module_formField__w6mH9 input::-moz-placeholder, .formfield-module_formField__w6mH9 select::-moz-placeholder {\n  opacity: 0 !important;\n  -moz-transition: opacity 0.25s ease;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 input::placeholder,\n.formfield-module_formField__w6mH9 select::placeholder {\n  opacity: 0 !important;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: 8px;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  width: auto;\n  min-width: 95%;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  padding-bottom: 8px;\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) {\n  position: relative;\n  height: 48px !important;\n  padding: 0px !important;\n  width: 100%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) legend {\n  height: 16px;\n  max-height: 16px;\n  transition: all 0.25s ease;\n  top: calc(50% - 1em);\n  z-index: 1;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select] {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  padding: 0px !important;\n  margin: 0px !important;\n  height: 48px !important;\n  border-radius: 4px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: auto;\n  min-width: 95%;\n  z-index: 0;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select]:nth-child(n) {\n  border-radius: 4px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  position: absolute;\n  height: 24px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number] {\n  background-color: transparent !important;\n  color: var(--on-primary-color, #fff);\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_topMargin__dahW5 {\n  margin-top: 12px;\n}\n\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has([is=coles-solid-select]) [is=coles-solid-select] {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.formfield-module_legendStyle__gnI49 {\n  background-color: transparent;\n  opacity: var(--text-emphasis-medium, 87%);\n  width: 100%;\n  transition: all 0.3s ease;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.formfield-module_errorContainer__HR4PL {\n  position: relative;\n  min-height: 2rem;\n}\n\n.formfield-module_error__wNBh2 {\n  position: absolute;\n  background: transparent;\n  color: var(--error-color, #B00020);\n  font-size: 10px;\n}";
 var style = {"formField":"formfield-module_formField__w6mH9","has-focus":"formfield-module_has-focus__9ingx","primary":"formfield-module_primary__7BYyQ","legendStyle":"formfield-module_legendStyle__gnI49","errorContainer":"formfield-module_errorContainer__HR4PL","error":"formfield-module_error__wNBh2"};
 styleInject(css_248z$2);
@@ -4156,16 +4346,6 @@ const FormField2 = props => {
     if (Array.isArray(val) && val.length === 0) return false;
     return true;
   };
-  // Track dirty meta so legend can float once a field has been modified even if some components
-  // didn't properly synchronize their internal value signals yet.
-  const isDirty = () => {
-    if (!local?.formName) return false;
-    try {
-      return !!formContext?.formGroup?.getMeta?.(local.formName)?.dirty;
-    } catch {
-      return false;
-    }
-  };
   const shouldFloat = createMemo(() => {
     let currentVal;
     const hasFormContext = !!local?.formName && !!formContext?.formGroup;
@@ -4185,7 +4365,7 @@ const FormField2 = props => {
     // Float when there is a value, or focused, or meta marked dirty (programmatic set),
     // or legacy input marked dirty-on-focus even if still empty (metaDirty && no value yet)
     const hasAnyValue = hasValue(currentVal);
-    return hasAnyValue || context?.getFocused?.() || metaDirty && hasAnyValue || isDirty() && hasAnyValue;
+    return hasAnyValue || context?.getFocused?.() || metaDirty;
   });
   // Effect: if underlying meta resets to pristine and value cleared, ensure focused state cleared
   createEffect(() => {
@@ -4202,7 +4382,7 @@ const FormField2 = props => {
   const theChildren = children(() => props.children);
   const formErrors = () => {
     if (!local?.formName) return [];
-    const allErrors = (formContext?.formGroup.getErrors(local.formName) ?? []).filter(e => e.hasError);
+    const allErrors = (formContext?.formGroup?.getErrors?.(local.formName) ?? []).filter(e => e.hasError);
     if (allErrors.length === 0) return [];
     let errKeys = allErrors.map(e => e.key);
     if (errKeys.includes('required')) {
@@ -4459,6 +4639,19 @@ class FormGroup {
   errors;
   meta = {};
   keys = [];
+  /** Reactive memo that returns a cloned snapshot of the full form state.
+   *  FormArray fields resolve via `.get()` (plain array), others via `CloneStore`. */
+  formChangeValue;
+  /** Returns a per-field reactive accessor. Each call creates an independent memo. */
+  fieldChangeValue = key => {
+    return createMemo(() => {
+      const val = this.internalDataSignal[0][key];
+      if (val instanceof FormArray) {
+        return val.get();
+      }
+      return CloneStore(val);
+    });
+  };
   constructor(data) {
     this.data = data;
     const newData = {};
@@ -4489,6 +4682,20 @@ class FormGroup {
     this.internalDataSignal = createStore(newData);
     this.validators = newValidators;
     this.errors = createSignal(newErrors);
+    // Initialise formChangeValue here (after internalDataSignal exists) to avoid
+    // eager evaluation in Solid dev mode when createMemo is used as a field initialiser.
+    this.formChangeValue = createMemo(() => {
+      const current = this.internalDataSignal[0];
+      return this.keys.reduce((acc, key) => {
+        const val = current[key];
+        if (val instanceof FormArray) {
+          acc[key] = val.get();
+        } else {
+          acc[key] = CloneStore(val);
+        }
+        return acc;
+      }, {});
+    });
   }
   /**
    * INTERNAL: returns the reactive internal store reference (DO NOT MUTATE outside FormGroup).
@@ -4629,6 +4836,42 @@ class FormGroup {
   markDirty(key) {
     this.meta[key].dirty = true;
   }
+  /** Returns true if any field in the group has validation errors. */
+  hasAnyError() {
+    const errs = this.errors[0]();
+    for (const k of this.keys) {
+      const val = this.internalDataSignal[0][k];
+      if (val instanceof FormArray) {
+        if (val.hasError()) return true;
+      } else if (errs[k]?.some(e => e.hasError)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /** Returns true if any field has a validator, optionally matching errKey. */
+  hasAnyValidator(errKey) {
+    for (const k of this.keys) {
+      const val = this.internalDataSignal[0][k];
+      if (val instanceof FormArray) {
+        if (val.hasAnyValidator(errKey)) return true;
+      } else if (!errKey) {
+        if (this.validators[k]?.length > 0) return true;
+      } else {
+        if (this.validators[k]?.some(v => v.errKey === errKey)) return true;
+      }
+    }
+    return false;
+  }
+  /** Returns a flat array of all field errors across the group. */
+  getAllErrors() {
+    const errs = this.errors[0]();
+    const result = [];
+    for (const k of this.keys) {
+      if (errs[k]) result.push(...errs[k]);
+    }
+    return result;
+  }
   reset() {
     for (const k of this.keys) {
       const m = this.meta[k];
@@ -4675,15 +4918,14 @@ class FormGroup {
     }
   }
   /**
-   * Adds an item to a FormArray control
+   * Adds a FormGroup item to a FormArray control.
    *
    * @param key - The key of the FormArray control
-   * @param controlValidation - The validation for the new item
-   * @param value - Optional initial value for the new item
+   * @param group - The FormGroup instance to add
    */
-  addToArray(key, controlValidation, value) {
+  addToArray(key, group) {
     if (this.internalDataSignal[0][key] instanceof FormArray) {
-      this.internalDataSignal[0][key].add(controlValidation, value);
+      this.internalDataSignal[0][key].add(group);
     }
   }
   /**
@@ -4766,6 +5008,24 @@ class FormGroup {
   }
 }
 
+function useFormFieldBinding(key) {
+  const ctx = useFormContext();
+  if (!ctx.formGroup) {
+    throw new Error('useFormFieldBinding requires a FormGroup. It cannot be used with FormArray as the top-level Form data.');
+  }
+  const fg = ctx.formGroup;
+  const value = createMemo(() => fg.getR(key));
+  return {
+    value,
+    setValue: v => fg.set(key, v),
+    errors: () => fg.getErrors(key) ?? [],
+    hasError: () => fg.hasError(key),
+    touched: () => fg.getMeta(key)?.touched,
+    dirty: () => fg.getMeta(key)?.dirty,
+    validate: () => fg.validate(key)
+  };
+}
+
 function createTableContext() {
   return createContext({});
 }
@@ -5813,4 +6073,4 @@ const ColeError = props => {
   return [];
 };
 
-export { Body, Button, Carousel, Cell, Checkbox, Chip, Chipbar, Column, Container, ExpansionPanel, ColeError as FieldError, Form, FormArray, FormField, FormGroup, Header, Icon, Input, Menu, MenuDropdown, MenuItem, Modal, Option, Radio, RadioGroup, RadioGroupContext, Row, Select, Slide, SnackbarController, TabBar, Table, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext };
+export { Body, Button, Carousel, Cell, Checkbox, Chip, Chipbar, Column, Container, ExpansionPanel, ColeError as FieldError, Form, FormArray, FormField, FormGroup, Header, Icon, Input, Menu, MenuDropdown, MenuItem, Modal, Option, Radio, RadioGroup, RadioGroupContext, Row, Select, Slide, SnackbarController, TabBar, Table, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext, getEntryAmount, ignoreWindowManager, registerWindowManager, unignoreWindowManager, unregisterWindowManager, useDirectFormBinding, useFormFieldBinding };