@radix-ng/primitives 1.0.10 → 1.1.1

package/fesm2022/radix-ng-primitives-core.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { forwardRef, input, booleanAttribute, output, linkedSignal, untracked, Directive, inject, isDevMode, HOST_TAG_NAME, ElementRef, InjectionToken, computed, APP_ID, Injectable, DOCUMENT, PLATFORM_ID, DestroyRef, signal, model, effect, afterNextRender, assertInInjectionContext, Injector } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { forwardRef, input, booleanAttribute, output, linkedSignal, untracked, Directive, inject, Injector, DestroyRef, signal, computed, isDevMode, HOST_TAG_NAME, ElementRef, InjectionToken, APP_ID, Injectable, DOCUMENT, PLATFORM_ID, model, effect, afterNextRender, assertInInjectionContext } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { getLocalTimeZone, CalendarDateTime, ZonedDateTime, getDayOfWeek, DateFormatter, createCalendar, toCalendar, CalendarDate, Time, startOfMonth, endOfMonth, today } from '@internationalized/date';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 
@@ -113,6 +113,103 @@ function injectControlValueAccessor() {
     return inject(RdxControlValueAccessor);
 }
 
+function toValidationErrors(errors) {
+    if (!errors) {
+        return [];
+    }
+    return Object.entries(errors).map(([kind, details]) => {
+        const message = typeof details === 'string'
+            ? details
+            : details && typeof details === 'object' && typeof details['message'] === 'string'
+                ? details['message']
+                : undefined;
+        return message === undefined ? { kind } : { kind, message };
+    });
+}
+/**
+ * Lazily connects to the same-host `NgControl` without creating a circular dependency while Angular
+ * is resolving its `ControlValueAccessor`. The unified `AbstractControl.events` stream mirrors
+ * programmatic value, status, validation, and interaction-state changes as well as user-driven ones.
+ *
+ * Must be called in an injection context.
+ *
+ * @ignore
+ */
+function injectNgControlState() {
+    const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
+    const connected = signal(false, { debugName: 'RdxNgControlState.connected' });
+    const name = signal(undefined, { debugName: 'RdxNgControlState.name' });
+    const value = signal(undefined, { debugName: 'RdxNgControlState.value' });
+    const valid = signal(false, { debugName: 'RdxNgControlState.valid' });
+    const invalid = signal(false, { debugName: 'RdxNgControlState.invalid' });
+    const pending = signal(false, { debugName: 'RdxNgControlState.pending' });
+    const disabled = signal(false, { debugName: 'RdxNgControlState.disabled' });
+    const rawErrors = signal(null, { debugName: 'RdxNgControlState.rawErrors' });
+    const errors = computed(() => toValidationErrors(rawErrors()), {
+        debugName: 'RdxNgControlState.errors'
+    });
+    const dirty = signal(false, { debugName: 'RdxNgControlState.dirty' });
+    const touched = signal(false, { debugName: 'RdxNgControlState.touched' });
+    let destroyed = false;
+    let unsubscribe;
+    let resetControl;
+    const connect = () => {
+        if (destroyed) {
+            return;
+        }
+        const ngControl = injector.get(NgControl, null, { self: true, optional: true });
+        const control = ngControl?.control;
+        // Signal Forms' `FormField` is also discoverable through Angular's forms DI integration, but
+        // it is not an `AbstractControl` and owns state through signals instead of `control.events`.
+        if (!control || typeof control.events?.subscribe !== 'function') {
+            return;
+        }
+        resetControl = (nextValue) => control.reset(nextValue);
+        const sync = () => {
+            name.set(ngControl.name == null ? undefined : String(ngControl.name));
+            value.set(control.value);
+            valid.set(control.valid);
+            invalid.set(control.invalid);
+            pending.set(control.pending);
+            disabled.set(control.disabled);
+            rawErrors.set(control.errors);
+            dirty.set(control.dirty);
+            touched.set(control.touched);
+        };
+        sync();
+        const subscription = control.events.subscribe(sync);
+        unsubscribe = () => subscription.unsubscribe();
+        connected.set(true);
+    };
+    // `NgControl` resolves its value accessor from this same element. Defer the lookup until every
+    // directive on the host has finished constructing to avoid a DI cycle.
+    queueMicrotask(connect);
+    destroyRef.onDestroy(() => {
+        destroyed = true;
+        unsubscribe?.();
+    });
+    return {
+        connected: connected.asReadonly(),
+        name: name.asReadonly(),
+        value: value.asReadonly(),
+        valid: valid.asReadonly(),
+        invalid: invalid.asReadonly(),
+        pending: pending.asReadonly(),
+        disabled: disabled.asReadonly(),
+        errors,
+        dirty: dirty.asReadonly(),
+        touched: touched.asReadonly(),
+        reset: (nextValue) => {
+            if (!resetControl) {
+                return false;
+            }
+            resetControl(nextValue);
+            return true;
+        }
+    };
+}
+
 /**
  * The `clamp` function restricts a number within a specified range by returning the value itself if it
  * falls within the range, or the closest boundary value if it exceeds the range.
@@ -1405,7 +1502,7 @@ function useDateField(props) {
             return prevValue;
         const str = prevValue.toString();
         if (str.length === 1) {
-            props.modelValue.set(undefined);
+            props.modelValue.set(null);
             return null;
         }
         return Number.parseInt(str.slice(0, -1));
@@ -1899,11 +1996,30 @@ function itemToStringLabel(value) {
     return String(value);
 }
 /**
- * Converts an item value to the string used for form serialization. Defaults to the same rules as
- * {@link itemToStringLabel}; kept as a separate export so a primitive can diverge label vs. value.
+ * Converts an item value to the string used for form serialization. A conventional `{ value, label }`
+ * item serializes its `value` member; other non-string values use Base UI-compatible JSON serialization
+ * with `String()` as a fallback. Kept separate so a primitive can diverge label vs. value.
  */
 function itemToStringValue(value) {
-    return itemToStringLabel(value);
+    if (value !== null && typeof value === 'object' && 'value' in value && 'label' in value) {
+        return serializeValue(value.value);
+    }
+    return serializeValue(value);
+}
+/** Base UI-compatible serialization fallback for native form values. */
+function serializeValue(value) {
+    if (isNullish(value)) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    try {
+        return JSON.stringify(value) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
 }
 /**
  * Compares two item values for equality using an optional {@link ItemValueComparator}.
@@ -2035,8 +2151,8 @@ function provideExistingToken(token, type) {
 
 /**
  * Builds the shared form-UI state and its mutators from a control's input signals, removing the
- * per-control copy-paste of the `invalidState`/`touchedState`/`dirtyState` computeds and the
- * `markAsTouched`/`markDirty` logic.
+ * per-control copy-paste of the validation/interaction computeds and the `markAsTouched`/`markDirty`
+ * logic.
  *
  * **Why the inputs stay on the control (not in here):** Angular's compiler only discovers
  * `input()`/`model()` declared as field initializers, and Signal Forms binds form-written state
@@ -2049,22 +2165,58 @@ function provideExistingToken(token, type) {
 function createFormUiState(options) {
     const dirtyValue = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirtyValue" }] : /* istanbul ignore next */ []));
+    const errorsState = computed(() => {
+        const ownErrors = options.errors() ?? [];
+        const ngControlErrors = options.ngControlState?.connected() ? options.ngControlState.errors() : [];
+        return ngControlErrors.length > 0 ? [...ownErrors, ...ngControlErrors] : ownErrors;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsState" }] : /* istanbul ignore next */ []));
+    const invalidState = computed(() => options.invalid() ||
+        errorsState().length > 0 ||
+        Boolean(options.ngControlState?.connected() && options.ngControlState.invalid()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+    const pendingState = computed(() => (options.pending?.() ?? false) ||
+        Boolean(options.ngControlState?.connected() && options.ngControlState.pending()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingState" }] : /* istanbul ignore next */ []));
+    const validState = computed(() => {
+        if (pendingState()) {
+            return null;
+        }
+        if (invalidState()) {
+            return false;
+        }
+        if (options.ngControlState?.connected() && options.ngControlState.disabled()) {
+            return null;
+        }
+        return true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validState" }] : /* istanbul ignore next */ []));
     return {
-        invalidState: computed(() => options.invalid() || (options.errors()?.length ?? 0) > 0),
-        touchedState: computed(() => options.touched()),
-        dirtyState: computed(() => options.dirty() || dirtyValue()),
+        invalidState,
+        pendingState,
+        validState,
+        errorsState,
+        touchedState: computed(() => options.ngControlState?.connected() ? options.ngControlState.touched() : options.touched()),
+        dirtyState: computed(() => options.ngControlState?.connected() ? options.ngControlState.dirty() : options.dirty() || dirtyValue()),
         markDirty: () => dirtyValue.set(true),
         markAsTouched: () => {
             options.cva?.markAsTouched();
             options.touched.set(true);
             options.touch.emit();
-        }
+        },
+        resetInteractionState: () => {
+            options.touched.set(false);
+            dirtyValue.set(false);
+        },
+        resetDirtyState: () => dirtyValue.set(false)
     };
 }
 /** Spread helper to wire {@link RdxFormUiStateContext} fields from an {@link RdxFormUiState} into a context factory. */
 function formUiStateContext(state) {
     return {
         invalidState: state.invalidState,
+        pendingState: state.pendingState,
+        validState: state.validState,
         touchedState: state.touchedState,
         dirtyState: state.dirtyState,
         markAsTouched: () => state.markAsTouched()
@@ -2084,15 +2236,21 @@ const RDX_FIELD_VALIDITY = new InjectionToken('RdxFieldValidity');
 /**
  * Tri-state display validity: when inside a `Field` the field's gated `validState` is the **single
  * source** (the control reflects it, including its `validationMode` neutral state); standalone, the
- * control's own binary invalidity.
+ * control's own tri-state validity (pending is neutral).
  *
  * **Contract:** inside a `Field` a control's own `invalid` / `errors` inputs are **not** displayed — the
  * Field owns displayed validity. Drive validity through the Field instead: bind `rdxSignalField`
  * (Signal Forms), or set `[invalid]` on `rdxFieldRoot`. The control's own `invalid`/`errors` are for
  * standalone use.
  */
-function resolveDisplayValid(fieldValidity, ownInvalid) {
-    return fieldValidity ? fieldValidity() : ownInvalid() ? false : true;
+function resolveDisplayValid(fieldValidity, ownInvalid, ownPending) {
+    if (fieldValidity) {
+        return fieldValidity();
+    }
+    if (ownPending?.()) {
+        return null;
+    }
+    return ownInvalid() ? false : true;
 }
 /**
  * Provide a control's {@link RdxFormUiState} on its host element so {@link RdxFormUiStateHost} can
@@ -2129,7 +2287,7 @@ class RdxFormUiStateHost {
         this.formUi = inject(RDX_FORM_UI_STATE);
         this.fieldValidity = inject(RDX_FIELD_VALIDITY, { optional: true });
         /** @ignore Tri-state display validity (enclosing Field's gated state, else own invalidity). */
-        this.displayValid = computed(() => resolveDisplayValid(this.fieldValidity, this.formUi.invalidState), /* @ts-ignore */
+        this.displayValid = computed(() => this.fieldValidity ? this.fieldValidity() : this.formUi.validState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiStateHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2152,7 +2310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }] });
 /**
  * Abstract base that declares the optional `FormUiControl` state inputs
- * (`invalid`/`errors`/`touched`/`dirty` + the `touch` output) once and builds the control's
+ * (`invalid`/`pending`/`errors`/`touched`/`dirty` + the `touch` output) once and builds the control's
  * {@link RdxFormUiState} from them, so a control directive can inherit the whole surface with a
  * single `extends` instead of re-declaring it.
  *
@@ -2170,6 +2328,8 @@ class RdxFormUiControlBase {
     constructor() {
         /** Whether the control is invalid. A non-empty {@link errors} list also marks it invalid. */
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether async validation is pending. Pending controls publish neither `data-valid` nor `data-invalid`. */
+        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the control has been touched. A `model()` so Signal Forms can write it; set on blur/focus-out. */
         this.touched = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
@@ -2180,15 +2340,20 @@ class RdxFormUiControlBase {
         ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** Emits when the control is touched, notifying Signal Forms (stable Angular 22 contract). */
         this.touch = output();
+        this.ngControlState = injectNgControlState();
         /** The shared form-UI state derived from the inputs above. Call `formUi.markDirty()` on value change. */
         this.formUi = createFormUiState({
             invalid: this.invalid,
+            pending: this.pending,
             errors: this.errors,
             touched: this.touched,
             touch: this.touch,
             dirty: this.dirty,
+            ngControlState: this.ngControlState,
             cva: this.formUiTouchTarget()
         });
+        /** Validation errors from the control inputs and a same-host Reactive/template-driven form control. */
+        this.validationErrors = this.formUi.errorsState;
         /** The enclosing Field's tri-state display validity, if any. `protected` so a control whose own
          * invalidity is richer than `formUi.invalidState` (e.g. date/time-field add a parse check) can build
          * its own `displayValid` from it. */
@@ -2196,27 +2361,58 @@ class RdxFormUiControlBase {
         /**
          * Tri-state *displayed* validity for controls that bind their own host attributes (radio, switch,
          * number-field): the enclosing Field's gated state when inside a `rdxFieldRoot`, else this control's
-         * own binary invalidity (`formUi.invalidState`). Bind `data-valid`/`data-invalid`/`aria-invalid` to
+         * own validity (`formUi.pendingState` is neutral; otherwise `formUi.invalidState` is binary). Bind
+         * `data-valid`/`data-invalid`/`aria-invalid` to
          * this so a neutral field shows neither. Controls whose `invalidState` is richer than
-         * `formUi.invalidState` override this with `resolveDisplayValid(this.fieldValidity, this.invalidState)`.
+         * `formUi.invalidState` override this with
+         * `resolveDisplayValid(this.fieldValidity, this.invalidState, this.formUi.pendingState)`.
          */
-        this.displayValid = computed(() => resolveDisplayValid(this.fieldValidity, this.formUi.invalidState), /* @ts-ignore */
+        this.displayValid = computed(() => this.fieldValidity ? this.fieldValidity() : this.formUi.validState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
+        // Reactive/template-driven forms own their NgControl interaction state. Signal Forms instead
+        // writes the public touched/dirty members, so standalone controls retain the existing fallback.
+        effect(() => {
+            if (this.ngControlState.connected()) {
+                this.touched.set(this.ngControlState.touched());
+                if (!this.ngControlState.dirty()) {
+                    this.formUi.resetDirtyState?.();
+                }
+                return;
+            }
+            if (!this.dirty()) {
+                this.formUi.resetDirtyState?.();
+            }
+        }, { debugName: 'RdxFormUiControlBase.syncInteractionState' });
     }
     /**
      * Override to bridge the control's `ControlValueAccessor` into `markAsTouched` (dual controls —
      * return `injectControlValueAccessor()` or a `{ markAsTouched }` adapter). Default: no CVA
-     * (Signal-Forms-only controls such as select).
+     * (Signal-Forms-only controls such as date-field).
      */
     formUiTouchTarget() {
         return null;
     }
+    /**
+     * Resets a same-host Reactive/template-driven control without reporting the reset as a user edit.
+     * Returns `false` when no Angular `NgControl` is connected, so a control can fall back to its CVA
+     * change callback for an unusually early native reset.
+     */
+    resetNgControl(value) {
+        return this.ngControlState.reset(value);
+    }
+    /**
+     * Reset control-owned interaction state. Angular Signal Forms calls this optional custom-control
+     * hook from `FieldState.reset()` after restoring the field value.
+     */
+    reset() {
+        this.formUi.resetInteractionState?.();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFormUiControlBase, isStandalone: true, inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFormUiControlBase, isStandalone: true, inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiControlBase, decorators: [{
             type: Directive
-        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /** The default validation-display mode when neither `rdxFieldRoot` nor `rdxFormRoot` sets one. */
 const RDX_DEFAULT_VALIDATION_MODE = 'onBlur';
@@ -3207,6 +3403,138 @@ function getActiveElement(root = document) {
     return activeElement;
 }
 
+/**
+ * Converts a scalar or array model to HTML form values. `null` and `undefined` represent no
+ * successful control; arrays deliberately become repeated entries under the same field name.
+ */
+function serializeNativeFormValue(value, itemToStringValue$1 = itemToStringValue) {
+    const values = Array.isArray(value) ? value : [value];
+    return values.flatMap((entry) => (entry == null ? [] : [itemToStringValue$1(entry)]));
+}
+const NOOP_NATIVE_FORM_CONTROL = {
+    ownerForm: () => null,
+    sync: () => undefined,
+    requestSubmit: () => undefined
+};
+/**
+ * Adds native form semantics to a composite control, rendering hidden inputs only when the control
+ * has no native successful control of its own.
+ *
+ * A hidden input is necessary for a headless root to enter the platform's successful-controls tree
+ * (including older engines that do not dispatch `formdata` for `new FormData(form)`). One input is
+ * created per serialized value, preserving repeated-field semantics; controls with their own native
+ * input use this solely for reset and imperative-submit coordination.
+ *
+ * Generated inputs are browser-only. Rendering imperative sibling nodes on the server would put DOM
+ * outside Angular's hydration graph; the client creates them after its view has been claimed instead.
+ */
+function useNativeFormControl(options) {
+    const host = inject(ElementRef).nativeElement;
+    const ownerDocument = host.ownerDocument;
+    const destroyRef = inject(DestroyRef);
+    if (!ownerDocument || !isPlatformBrowser(inject(PLATFORM_ID))) {
+        return NOOP_NATIVE_FORM_CONTROL;
+    }
+    const inputs = [];
+    let defaultValue;
+    let defaultValues = [];
+    let hasDefaultValue = false;
+    let alive = true;
+    let viewClaimed = false;
+    const ownerForm = () => {
+        const formId = options.form();
+        const candidate = formId
+            ? ownerDocument.getElementById(formId)
+            : typeof host.closest === 'function'
+                ? host.closest('form')
+                : host.parentElement?.closest('form');
+        return candidate?.localName === 'form' ? candidate : null;
+    };
+    const sync = () => {
+        options.syncNativeControl?.();
+        const name = options.name();
+        const form = options.form();
+        const disabled = options.disabled();
+        const nativeControlOwnsValue = options.hasNativeControl?.() ?? false;
+        const values = options.value && options.serialize ? options.serialize(options.value()) : [];
+        // During hydration Angular must claim every server-rendered sibling before an imperative input
+        // can be inserted. The after-render callback below performs the first DOM synchronization.
+        if (!viewClaimed) {
+            return;
+        }
+        const shouldRender = Boolean(name && options.serialize && !nativeControlOwnsValue);
+        const count = shouldRender ? values.length : 0;
+        while (inputs.length > count) {
+            inputs.pop()?.remove();
+        }
+        while (inputs.length < count) {
+            const input = ownerDocument.createElement('input');
+            input.type = 'hidden';
+            const previous = inputs.at(-1);
+            host.parentNode?.insertBefore(input, previous ? previous.nextSibling : host.nextSibling);
+            inputs.push(input);
+        }
+        for (let index = 0; index < inputs.length; index++) {
+            const input = inputs[index];
+            input.name = name;
+            input.value = values[index];
+            input.disabled = disabled;
+            if (form) {
+                input.setAttribute('form', form);
+            }
+            else {
+                input.removeAttribute('form');
+            }
+            // Native reset reads `defaultValue`; retain the original default rather than accidentally
+            // promoting later user edits to the reset baseline.
+            if (!input.hasAttribute('data-rdx-native-form-control')) {
+                input.defaultValue = defaultValues[index] ?? values[index];
+                input.setAttribute('data-rdx-native-form-control', '');
+            }
+        }
+    };
+    effect(() => {
+        if (!hasDefaultValue && options.defaultValue) {
+            defaultValue = options.defaultValue();
+            defaultValues = options.serialize ? options.serialize(defaultValue) : [];
+            hasDefaultValue = true;
+        }
+    });
+    effect(sync);
+    afterNextRender(() => {
+        viewClaimed = true;
+        untracked(sync);
+    });
+    const onReset = (event) => {
+        if (event.target !== ownerForm() || !options.onReset || !hasDefaultValue) {
+            return;
+        }
+        // Native controls reset after the event. Check `defaultPrevented` in the microtask so a later
+        // bubble listener can still cancel the reset before the model follows it.
+        queueMicrotask(() => {
+            if (alive && !event.defaultPrevented) {
+                untracked(() => options.onReset(defaultValue));
+            }
+        });
+    };
+    ownerDocument.addEventListener('reset', onReset, true);
+    destroyRef.onDestroy(() => {
+        alive = false;
+        ownerDocument.removeEventListener('reset', onReset, true);
+        for (const input of inputs) {
+            input.remove();
+        }
+    });
+    return {
+        ownerForm,
+        sync,
+        requestSubmit: () => {
+            untracked(sync);
+            ownerForm()?.requestSubmit();
+        }
+    };
+}
+
 /**
  * Creates a resize observer effect for element
  *
@@ -4284,5 +4612,5 @@ var RdxPositionAlign;
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, injectNgControlState, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, serializeNativeFormValue, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, useNativeFormControl, usePointerDrag, useScrollLock, useTransitionStatus, watch };
 //# sourceMappingURL=radix-ng-primitives-core.mjs.map