@radix-ng/primitives 1.0.7 → 1.0.8

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, signal, computed, inject, ElementRef, DestroyRef, Directive, effect, afterNextRender } from '@angular/core';
-import { createContext, injectId, rdxCheckLabelElement } from '@radix-ng/primitives/core';
+import { createContext, injectId, RDX_DEFAULT_VALIDATION_MODE, isValidationRevealed, RDX_FIELD_VALIDITY, rdxCheckLabelElement } from '@radix-ng/primitives/core';
 import { injectFormRootContext } from '@radix-ng/primitives/form';
 
-const attr$4 = (value) => (value ? '' : undefined);
-const addId = (ids, id) => (ids.includes(id) ? ids : [...ids, id]);
-const removeId = (ids, id) => ids.filter((item) => item !== id);
+const attr$5 = (value) => (value ? '' : undefined);
+const addId$1 = (ids, id) => (ids.includes(id) ? ids : [...ids, id]);
+const removeId$1 = (ids, id) => ids.filter((item) => item !== id);
 const fieldRootContext = () => {
     const root = injectFieldRoot();
     return {
@@ -13,10 +13,13 @@ const fieldRootContext = () => {
         name: root.name,
         descriptionIds: root.descriptionIds,
         errorIds: root.errorIds,
-        /** Combined external messages (state provider's, then enclosing Form's), for `RdxFieldError`. */
+        /** Combined messages for `RdxFieldError`: client (provider + form name-routing, when revealed) then
+         * server (`errors` input, always). */
         messages: root.messages,
         /** Notify an enclosing Form that this field's control was edited (composite-control opt-in). */
         notifyEdited: () => root.notifyEdited(),
+        validState: root.validState,
+        formSubmitAttempted: root.formSubmitAttempted,
         invalidState: root.invalidState,
         disabledState: root.disabledState,
         requiredState: root.requiredState,
@@ -25,10 +28,10 @@ const fieldRootContext = () => {
         filledState: root.filledState,
         focusedState: root.focusedState,
         setControlId: (id) => root.controlId.set(id),
-        addDescriptionId: (id) => root.descriptionIds.update((ids) => addId(ids, id)),
-        removeDescriptionId: (id) => root.descriptionIds.update((ids) => removeId(ids, id)),
-        addErrorId: (id) => root.errorIds.update((ids) => addId(ids, id)),
-        removeErrorId: (id) => root.errorIds.update((ids) => removeId(ids, id)),
+        addDescriptionId: (id) => root.descriptionIds.update((ids) => addId$1(ids, id)),
+        removeDescriptionId: (id) => root.descriptionIds.update((ids) => removeId$1(ids, id)),
+        addErrorId: (id) => root.errorIds.update((ids) => addId$1(ids, id)),
+        removeErrorId: (id) => root.errorIds.update((ids) => removeId$1(ids, id)),
         setFocused: (value) => root.focusedValue.set(value),
         setFilled: (value) => root.filledValue.set(value),
         setDirty: (value) => root.dirtyValue.set(value),
@@ -40,6 +43,7 @@ const fieldRootContext = () => {
          * provider so adapters can restore it on teardown.
          */
         setStateProvider: (provider) => root.setStateProvider(provider),
+        clearStateProvider: (provider, previous) => root.clearStateProvider(provider, previous),
         hasStateProvider: root.hasStateProvider
     };
 };
@@ -108,6 +112,14 @@ class RdxFieldRoot {
          */
         this.name = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * Overrides when this field reveals its validity (error styling + message). Falls back to the
+         * enclosing `rdxFormRoot`'s `validationMode`, then `'onBlur'`. Server errors always show regardless.
+         *
+         * @group Props
+         */
+        this.validationMode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "validationMode" }] : /* istanbul ignore next */ []));
         /** The enclosing Form, if any. All Form-related behavior is a no-op when this is `null`. */
         this.formContext = injectFormRootContext(true);
         this.controlId = signal(injectId('rdx-field-control-'), /* @ts-ignore */
@@ -133,37 +145,108 @@ class RdxFieldRoot {
         /** Error content from a registered state provider (e.g. a Signal Forms adapter). */
         this.providerErrors = computed(() => this.stateProvider()?.errors?.() ?? [], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "providerErrors" }] : /* istanbul ignore next */ []));
-        /** External messages from the enclosing Form matched by this field's `name`. */
-        this.externalErrors = computed(() => this.formContext?.errorsFor(this.name()) ?? [], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "externalErrors" }] : /* istanbul ignore next */ []));
-        /** Provider messages first (`message ?? kind`), then the Form's external messages. */
-        this.messages = computed(() => [
-            ...this.providerErrors().map((error) => error.message ?? error.kind),
-            ...this.externalErrors()
-        ], /* @ts-ignore */
+        /** **Client** validation errors routed by a form-level provider (`rdxSignalForm`) — gated by `validationMode`. */
+        this.clientErrors = computed(() => this.formContext?.clientErrorsFor(this.name()) ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clientErrors" }] : /* istanbul ignore next */ []));
+        /** **Server/external** errors from the Form's `errors` input — shown eagerly (never gated). */
+        this.serverErrors = computed(() => this.formContext?.externalErrorsFor(this.name()) ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
+        /** Whether the enclosing Form has had a submit attempted; `false` when standalone. A presentation
+         * seam an adapter can read to reveal errors after a submit attempt (Base UI's submit-attempt state). */
+        this.formSubmitAttempted = computed(() => this.formContext?.submitAttempted() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formSubmitAttempted" }] : /* istanbul ignore next */ []));
+        /**
+         * Client messages first (per-field `rdxSignalField` provider, then form-level `rdxSignalForm`
+         * name-routing) — only once `validationMode` reveals client validity — then the Form's **server**
+         * messages (the `errors` input), which always show. **Deduped by text**: a field can receive the same
+         * Signal Forms error from both a per-field provider and the form-level routing (they read the same
+         * field state), so deduping renders it once while still surfacing distinct messages from each source.
+         */
+        this.messages = computed(() => {
+            // **Client** messages (per-field `rdxSignalField` provider + form-level `rdxSignalForm` routing)
+            // surface only once the field's `validationMode` reveals them; **server** messages (the `errors`
+            // input) always show. So a neutral field stays empty and the polite live region announces on reveal.
+            const client = this.validationRevealed()
+                ? [...this.providerErrors().map((error) => error.message ?? error.kind), ...this.clientErrors()]
+                : [];
+            const seen = new Set();
+            const result = [];
+            for (const message of [...client, ...this.serverErrors()]) {
+                if (message && !seen.has(message)) {
+                    seen.add(message);
+                    result.push(message);
+                }
+            }
+            return result;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
-        // External errors (provider content or Form server errors) force invalid regardless of the input or
-        // a provider's `invalid` accessor — a server error must show even when client-side validity passes.
-        this.invalidState = computed(() => {
-            if (this.externalErrors().length > 0 || this.providerErrors().length > 0) {
-                return true;
+        /** Effective validation-display mode: this field's override → the enclosing Form's → the default. */
+        this.effectiveValidationMode = computed(() => this.validationMode() ?? this.formContext?.validationMode() ?? RDX_DEFAULT_VALIDATION_MODE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveValidationMode" }] : /* istanbul ignore next */ []));
+        /** Whether client-side validity is revealed yet, per {@link effectiveValidationMode} + interaction. */
+        this.validationRevealed = computed(() => isValidationRevealed(this.effectiveValidationMode(), {
+            touched: this.touchedState(),
+            dirty: this.dirtyState(),
+            submitAttempted: this.formSubmitAttempted()
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validationRevealed" }] : /* istanbul ignore next */ []));
+        /**
+         * Client-side invalidity (gated by `validationMode`): the per-field provider's error content / `invalid`
+         * (`rdxSignalField`), a form-level provider's name-routed errors (`rdxSignalForm`), or the `[invalid]`
+         * input. Excludes server errors (which are eager).
+         */
+        this.clientInvalidState = computed(() => this.providerErrors().length > 0 ||
+            this.clientErrors().length > 0 ||
+            this.resolve('invalid', () => this.invalid()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clientInvalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * Tri-state *displayed* validity (`boolean | null`) — the source for `data-valid` / `data-invalid`.
+         * Server errors show immediately; client-side validity (including `rdxSignalForm` name-routing) stays
+         * **neutral** (`null`) until the field's {@link effectiveValidationMode} reveals it, then `false`/`true`.
+         */
+        this.validState = computed(() => {
+            if (this.serverErrors().length > 0) {
+                return false;
+            }
+            if (!this.validationRevealed()) {
+                return null;
             }
-            return this.resolve('invalid', () => this.invalid());
+            return this.clientInvalidState() ? false : true;
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validState" }] : /* istanbul ignore next */ []));
+        /**
+         * Boolean **displayed** invalidity (= `validState() === false`), used by `rdxFieldError` (hidden) and
+         * `rdxFieldControl`'s `aria-describedby` error linking. A neutral (`null`) `validState` reads as not
+         * invalid here, so the error region stays hidden until the field's mode reveals it.
+         */
+        this.invalidState = computed(() => this.validState() === false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * Boolean **actual** invalidity — ungated by the display mode. The enclosing Form aggregates this into
+         * `anyInvalid` (→ submit-block / focus-first-invalid), so a field that is really invalid but displayed
+         * neutral still blocks submit. The form's presentation `data-invalid` comes from the *displayed*
+         * aggregate (`anyDisplayedInvalid`) instead — not from this. Server errors + provider error content +
+         * the provider/input `invalid`.
+         */
+        this.actualInvalidState = computed(() => this.serverErrors().length > 0 || this.clientInvalidState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actualInvalidState" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.resolve('disabled', () => this.disabled()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.resolve('required', () => this.required()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
-        this.dirtyState = computed(() => this.resolve('dirty', () => this.dirty() || this.dirtyValue()), /* @ts-ignore */
+        // `touched`/`dirty` also OR in the enclosing Form's per-name state (`rdxSignalForm` name-routing), so a
+        // field with only a bare `[formField]` (no `rdxSignalField`/`rdxFieldControl`) still reveals on blur.
+        this.dirtyState = computed(() => this.resolve('dirty', () => this.dirty() || this.dirtyValue()) ||
+            (this.formContext?.dirtyFor(this.name()) ?? false), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dirtyState" }] : /* istanbul ignore next */ []));
-        this.touchedState = computed(() => this.resolve('touched', () => this.touched() || this.touchedValue()), /* @ts-ignore */
+        this.touchedState = computed(() => this.resolve('touched', () => this.touched() || this.touchedValue()) ||
+            (this.formContext?.touchedFor(this.name()) ?? false), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "touchedState" }] : /* istanbul ignore next */ []));
         this.filledState = computed(() => this.resolve('filled', () => this.filled() ?? this.filledValue()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
         this.focusedState = computed(() => this.resolve('focused', () => this.focused() ?? this.focusedValue()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
-        this.dataAttr = attr$4;
+        this.dataAttr = attr$5;
         this.host = inject(ElementRef).nativeElement;
         // Register with an enclosing Form (if any) for aggregate state, submit guard, and reset; a
         // standalone field never enters this branch and behaves exactly as before.
@@ -171,7 +254,11 @@ class RdxFieldRoot {
         if (formContext) {
             const registration = {
                 name: () => this.name(),
-                invalid: () => this.invalidState(),
+                // `invalid` reports *actual* validity (ungated) — `form.anyInvalid` + the submit guard must
+                // reflect real state even before a field reveals it. `displayValid` reports the *gated*
+                // tri-state so the form's presentation `data-invalid` stays neutral on load.
+                invalid: () => this.actualInvalidState(),
+                displayValid: () => this.validState(),
                 dirty: () => this.dirtyState(),
                 touched: () => this.touchedState(),
                 focus: () => this.focusControl(),
@@ -215,26 +302,47 @@ class RdxFieldRoot {
         this.stateProvider.set(provider);
         return previous;
     }
+    /**
+     * Identity-checked teardown — roll back to `previous` only if `provider` is still active. Prevents
+     * an old adapter's destroy from clobbering a newer adapter that registered after it (create-before-
+     * destroy during a structural view swap).
+     */
+    clearStateProvider(provider, previous) {
+        if (this.stateProvider() === provider) {
+            this.stateProvider.set(previous);
+        }
+    }
     /**
      * Prefer the registered provider's value for `key` when it exposes one,
-     * otherwise fall back to the root inputs / DOM-derived signals.
+     * otherwise fall back to the root inputs / DOM-derived signals. `errors` (content) and `valid`
+     * (tri-state `boolean | null`) are resolved separately, so they're excluded from this boolean key.
      */
     resolve(key, fallback) {
         const accessor = this.stateProvider()?.[key];
         return accessor ? accessor() : fallback();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFieldRoot, isStandalone: true, selector: "[rdxFieldRoot]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "notifyEdited()", "change": "notifyEdited()" }, properties: { "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-dirty": "dataAttr(dirtyState())", "attr.data-touched": "dataAttr(touchedState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, providers: [provideFieldRootContext(fieldRootContext)], exportAs: ["rdxFieldRoot"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFieldRoot, isStandalone: true, selector: "[rdxFieldRoot]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validationMode: { classPropertyName: "validationMode", publicName: "validationMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "notifyEdited()", "change": "notifyEdited()" }, properties: { "attr.data-invalid": "dataAttr(validState() === false)", "attr.data-valid": "dataAttr(validState() === true)", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-dirty": "dataAttr(dirtyState())", "attr.data-touched": "dataAttr(touchedState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, providers: [
+            provideFieldRootContext(fieldRootContext),
+            // Expose the tri-state display validity so controls inside the field reflect it (single source).
+            { provide: RDX_FIELD_VALIDITY, useFactory: () => inject(RdxFieldRoot).validState }
+        ], exportAs: ["rdxFieldRoot"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxFieldRoot]',
                     exportAs: 'rdxFieldRoot',
-                    providers: [provideFieldRootContext(fieldRootContext)],
+                    providers: [
+                        provideFieldRootContext(fieldRootContext),
+                        // Expose the tri-state display validity so controls inside the field reflect it (single source).
+                        { provide: RDX_FIELD_VALIDITY, useFactory: () => inject(RdxFieldRoot).validState }
+                    ],
                     host: {
-                        '[attr.data-invalid]': 'dataAttr(invalidState())',
-                        '[attr.data-valid]': 'dataAttr(!invalidState())',
+                        // Tri-state: `data-invalid` when displayed-invalid, `data-valid` only when displayed-valid,
+                        // and **neither** when neutral (`validState()` is `null`).
+                        '[attr.data-invalid]': 'dataAttr(validState() === false)',
+                        '[attr.data-valid]': 'dataAttr(validState() === true)',
                         '[attr.data-disabled]': 'dataAttr(disabledState())',
                         '[attr.data-required]': 'dataAttr(requiredState())',
                         '[attr.data-dirty]': 'dataAttr(dirtyState())',
@@ -245,12 +353,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(change)': 'notifyEdited()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMode", required: false }] }] } });
 function injectFieldRoot() {
     return inject(RdxFieldRoot);
 }
 
-const attr$3 = (value) => (value ? '' : undefined);
+const attr$4 = (value) => (value ? '' : undefined);
 /**
  * Connects a form control to the field label, description, error, and state.
  *
@@ -276,7 +384,7 @@ class RdxFieldControl {
             return ids.length ? ids.join(' ') : undefined;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-        this.dataAttr = attr$3;
+        this.dataAttr = attr$4;
         effect(() => {
             this.rootContext.setControlId(this.id());
         });
@@ -305,7 +413,7 @@ class RdxFieldControl {
         return element.value ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFieldControl, isStandalone: true, selector: "[rdxFieldControl]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "syncFilled()", "change": "syncFilled()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "rootContext.invalidState() ? \"true\" : undefined", "attr.aria-required": "!isNativeFormControl() && rootContext.requiredState() ? \"true\" : undefined", "attr.aria-disabled": "!isNativeFormControl() && rootContext.disabledState() ? \"true\" : undefined", "attr.disabled": "isNativeFormControl() && rootContext.disabledState() ? \"\" : undefined", "attr.required": "isNativeFormControl() && rootContext.requiredState() ? \"\" : undefined", "attr.data-invalid": "dataAttr(rootContext.invalidState())", "attr.data-valid": "dataAttr(!rootContext.invalidState())", "attr.data-disabled": "dataAttr(rootContext.disabledState())", "attr.data-required": "dataAttr(rootContext.requiredState())", "attr.data-dirty": "dataAttr(rootContext.dirtyState())", "attr.data-touched": "dataAttr(rootContext.touchedState())", "attr.data-filled": "dataAttr(rootContext.filledState())", "attr.data-focused": "dataAttr(rootContext.focusedState())" } }, exportAs: ["rdxFieldControl"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFieldControl, isStandalone: true, selector: "[rdxFieldControl]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "syncFilled()", "change": "syncFilled()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "rootContext.validState() === false ? \"true\" : undefined", "attr.aria-required": "!isNativeFormControl() && rootContext.requiredState() ? \"true\" : undefined", "attr.aria-disabled": "!isNativeFormControl() && rootContext.disabledState() ? \"true\" : undefined", "attr.disabled": "isNativeFormControl() && rootContext.disabledState() ? \"\" : undefined", "attr.required": "isNativeFormControl() && rootContext.requiredState() ? \"\" : undefined", "attr.data-invalid": "dataAttr(rootContext.validState() === false)", "attr.data-valid": "dataAttr(rootContext.validState() === true)", "attr.data-disabled": "dataAttr(rootContext.disabledState())", "attr.data-required": "dataAttr(rootContext.requiredState())", "attr.data-dirty": "dataAttr(rootContext.dirtyState())", "attr.data-touched": "dataAttr(rootContext.touchedState())", "attr.data-filled": "dataAttr(rootContext.filledState())", "attr.data-focused": "dataAttr(rootContext.focusedState())" } }, exportAs: ["rdxFieldControl"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldControl, decorators: [{
             type: Directive,
@@ -315,15 +423,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     host: {
                         '[attr.id]': 'id()',
                         '[attr.aria-describedby]': 'describedBy()',
-                        '[attr.aria-invalid]': 'rootContext.invalidState() ? "true" : undefined',
+                        // `aria-invalid`/`data-*` follow the field's tri-state `validState`: while it is neutral (`null`,
+                        // e.g. a field whose `validationMode` defers display (e.g. `onBlur`) before interaction) the control emits no `aria-invalid`
+                        // and neither `data-valid` nor `data-invalid`, matching the field root.
+                        '[attr.aria-invalid]': 'rootContext.validState() === false ? "true" : undefined',
                         // On a native control the native `required`/`disabled` attributes already convey the state, so
                         // `aria-required`/`aria-disabled` are only emitted on non-native (custom) controls.
                         '[attr.aria-required]': '!isNativeFormControl() && rootContext.requiredState() ? "true" : undefined',
                         '[attr.aria-disabled]': '!isNativeFormControl() && rootContext.disabledState() ? "true" : undefined',
                         '[attr.disabled]': 'isNativeFormControl() && rootContext.disabledState() ? "" : undefined',
                         '[attr.required]': 'isNativeFormControl() && rootContext.requiredState() ? "" : undefined',
-                        '[attr.data-invalid]': 'dataAttr(rootContext.invalidState())',
-                        '[attr.data-valid]': 'dataAttr(!rootContext.invalidState())',
+                        '[attr.data-invalid]': 'dataAttr(rootContext.validState() === false)',
+                        '[attr.data-valid]': 'dataAttr(rootContext.validState() === true)',
                         '[attr.data-disabled]': 'dataAttr(rootContext.disabledState())',
                         '[attr.data-required]': 'dataAttr(rootContext.requiredState())',
                         '[attr.data-dirty]': 'dataAttr(rootContext.dirtyState())',
@@ -338,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
-const attr$2 = (value) => (value ? '' : undefined);
+const attr$3 = (value) => (value ? '' : undefined);
 /**
  * Describes the field control.
  *
@@ -354,7 +465,7 @@ class RdxFieldDescription {
          */
         this.id = input(injectId('rdx-field-description-'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.dataAttr = attr$2;
+        this.dataAttr = attr$3;
         effect((onCleanup) => {
             const id = this.id();
             this.rootContext.addDescriptionId(id);
@@ -377,7 +488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
-const attr$1 = (value) => (value ? '' : undefined);
+const attr$2 = (value) => (value ? '' : undefined);
 /**
  * Describes an invalid field control.
  *
@@ -394,12 +505,13 @@ class RdxFieldError {
         this.id = input(injectId('rdx-field-error-'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
-         * The field's external messages (state provider's, then enclosing Form's), `[]` when none. Render
-         * them explicitly via the `exportAs` reference — the directive never injects text content itself:
+         * The field's validation messages — client (provider / form name-routing, once `validationMode`
+         * reveals them) then server (the Form's `errors` input, always); `[]` when none. Render them
+         * explicitly via the `exportAs` reference — the directive never injects text content itself:
          * `<p rdxFieldError #err="rdxFieldError">{{ err.messages().join(' ') }}</p>`.
          */
         this.messages = this.rootContext.messages;
-        this.dataAttr = attr$1;
+        this.dataAttr = attr$2;
         effect((onCleanup) => {
             const id = this.id();
             this.rootContext.addErrorId(id);
@@ -424,6 +536,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+const attr$1 = (value) => (value ? '' : undefined);
+const addId = (ids, id) => (ids.includes(id) ? ids : [...ids, id]);
+const removeId = (ids, id) => ids.filter((item) => item !== id);
+/**
+ * The field item context **re-provides** {@link RdxFieldRootContext} so a label, description, and control
+ * placed inside the item associate with the **item's** control (own `controlId` / `descriptionIds`),
+ * while all validation state (`invalidState` / `dirtyState` / `touchedState` / `filledState` /
+ * `focusedState` / `requiredState`, errors and messages) is **delegated to the enclosing `rdxFieldRoot`**.
+ * `disabledState` is the item's `disabled` OR'd with the root's. The enclosing root is reached with
+ * `skipSelf` (the item provides the same token), so there is no circular injection.
+ */
+const fieldItemContext = () => {
+    const item = inject(RdxFieldItem);
+    const root = item.root;
+    return {
+        controlId: item.controlId,
+        name: root.name,
+        descriptionIds: item.descriptionIds,
+        errorIds: root.errorIds,
+        messages: root.messages,
+        notifyEdited: () => root.notifyEdited(),
+        validState: root.validState,
+        formSubmitAttempted: root.formSubmitAttempted,
+        invalidState: root.invalidState,
+        disabledState: item.disabledState,
+        requiredState: root.requiredState,
+        dirtyState: root.dirtyState,
+        touchedState: root.touchedState,
+        filledState: root.filledState,
+        focusedState: root.focusedState,
+        setControlId: (id) => item.controlId.set(id),
+        addDescriptionId: (id) => item.descriptionIds.update((ids) => addId(ids, id)),
+        removeDescriptionId: (id) => item.descriptionIds.update((ids) => removeId(ids, id)),
+        addErrorId: (id) => root.errorIds.update((ids) => addId(ids, id)),
+        removeErrorId: (id) => root.errorIds.update((ids) => removeId(ids, id)),
+        setFocused: (value) => root.focusedValue.set(value),
+        setFilled: (value) => root.filledValue.set(value),
+        setDirty: (value) => root.dirtyValue.set(value),
+        setTouched: (value) => root.touchedValue.set(value),
+        setStateProvider: (provider) => root.setStateProvider(provider),
+        clearStateProvider: (provider, previous) => root.clearStateProvider(provider, previous),
+        hasStateProvider: root.hasStateProvider
+    };
+};
+/**
+ * Groups an individual item in a checkbox group or radio group with its own label and description.
+ *
+ * Use inside a `rdxFieldRoot` (typically wrapping a group) when each control needs its own label /
+ * description: the item scopes those associations to its control while reflecting the field's validation
+ * state. Mirrors Base UI's `Field.Item`.
+ *
+ * @group Components
+ */
+class RdxFieldItem {
+    constructor() {
+        /** The enclosing field root (items are leaves under the root, so `skipSelf` reaches it). */
+        this.root = inject(RdxFieldRoot, { skipSelf: true });
+        /**
+         * Whether the wrapped control should ignore user interaction. The `disabled` on `rdxFieldRoot` takes
+         * precedence (it is OR'd in).
+         *
+         * @group Props
+         * @defaultValue false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** This item's control id — label / description / control inside the item associate with it. */
+        this.controlId = signal(injectId('rdx-field-item-control-'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+        /** Description ids for this item's control `aria-describedby`. */
+        this.descriptionIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionIds" }] : /* istanbul ignore next */ []));
+        /** The item's effective disabled state: the root's disabled OR the item's. */
+        this.disabledState = computed(() => this.root.disabledState() || this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.dataAttr = attr$1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFieldItem, isStandalone: true, selector: "[rdxFieldItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-invalid": "dataAttr(root.validState() === false)", "attr.data-valid": "dataAttr(root.validState() === true)", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(root.requiredState())", "attr.data-dirty": "dataAttr(root.dirtyState())", "attr.data-touched": "dataAttr(root.touchedState())", "attr.data-filled": "dataAttr(root.filledState())", "attr.data-focused": "dataAttr(root.focusedState())" } }, providers: [
+            provideFieldRootContext(fieldItemContext),
+            // Items delegate validity to the root; expose the root's tri-state to controls inside the item.
+            { provide: RDX_FIELD_VALIDITY, useFactory: () => inject(RdxFieldItem).root.validState }
+        ], exportAs: ["rdxFieldItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFieldItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxFieldItem]',
+                    exportAs: 'rdxFieldItem',
+                    providers: [
+                        provideFieldRootContext(fieldItemContext),
+                        // Items delegate validity to the root; expose the root's tri-state to controls inside the item.
+                        { provide: RDX_FIELD_VALIDITY, useFactory: () => inject(RdxFieldItem).root.validState }
+                    ],
+                    host: {
+                        // Tri-state, mirroring the root: neither attribute while the root's `validState` is neutral.
+                        '[attr.data-invalid]': 'dataAttr(root.validState() === false)',
+                        '[attr.data-valid]': 'dataAttr(root.validState() === true)',
+                        '[attr.data-disabled]': 'dataAttr(disabledState())',
+                        '[attr.data-required]': 'dataAttr(root.requiredState())',
+                        '[attr.data-dirty]': 'dataAttr(root.dirtyState())',
+                        '[attr.data-touched]': 'dataAttr(root.touchedState())',
+                        '[attr.data-filled]': 'dataAttr(root.filledState())',
+                        '[attr.data-focused]': 'dataAttr(root.focusedState())'
+                    }
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
 const attr = (value) => (value ? '' : undefined);
 /**
  * Labels the field control.
@@ -466,5 +685,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxFieldControl, RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot, injectFieldRootContext, provideFieldRootContext };
+export { RdxFieldControl, RdxFieldDescription, RdxFieldError, RdxFieldItem, RdxFieldLabel, RdxFieldRoot, injectFieldRootContext, provideFieldRootContext };
 //# sourceMappingURL=radix-ng-primitives-field.mjs.map