@radix-ng/primitives 1.0.7 → 1.0.8

package/types/radix-ng-primitives-form.d.ts

@@ -1,6 +1,7 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { RdxValidationMode } from '@radix-ng/primitives/core';
 
 /** A normalized external-error map: each field name maps to its message(s) in display order. */
 type RdxFormErrors = Record<string, string | string[]>;
@@ -20,8 +21,12 @@ interface RdxFormSubmitEvent {
 interface RdxFormFieldRegistration {
     /** The field's `name` (key external errors match against), or `undefined`. */
     name: () => string | undefined;
-    /** The field's merged invalid state (includes external errors). */
+    /** The field's **actual** invalid state (ungated, includes external errors) — drives the submit guard
+     * and `anyInvalid`. */
     invalid: () => boolean;
+    /** The field's **displayed** tri-state validity, gated by its `validationMode` — drives the form's
+     * presentation `data-invalid` so it stays neutral on load while its fields are. `null` = neutral. */
+    displayValid?: () => boolean | null;
     /** Whether the field is dirty. */
     dirty: () => boolean;
     /** Whether the field is touched. */
@@ -32,29 +37,66 @@ interface RdxFormFieldRegistration {
     resetState: () => void;
 }
 /**
- * External owner of form-level state (e.g. a future Signal Forms `[rdxSignalForm]` adapter). Mirrors
- * Field's `RdxFieldState` seam one level up. Each member is optional: a provided accessor wins over the
- * built-in registry/`errors`-input behavior; absent accessors leave the built-in behavior untouched.
- * Kept as framework-free `() =>` accessors (no `@angular/forms/signals` dependency). See ADR 0004.
+ * External owner of form-level state (e.g. the Signal Forms `[rdxSignalForm]` adapter). Mirrors Field's
+ * `RdxFieldState` seam one level up. Each member is optional. The aggregate accessors (`dirty`/`touched`/
+ * `submitting`) take over the corresponding form-level state; `invalid` is **merged** with the field
+ * registry (so a real registered-field error still counts); the per-name accessors route a field's client
+ * state by `name`. Kept as framework-free `() =>` accessors (no `@angular/forms/signals` dependency). See
+ * ADR 0004.
  */
 interface RdxFormState {
     invalid?: () => boolean;
     dirty?: () => boolean;
     touched?: () => boolean;
     submitting?: () => boolean;
-    /** Per-name external error source; while provided, the `errors` input + clear-on-edit are inert. */
+    /**
+     * Per-name **client** validation errors (e.g. `rdxSignalForm`'s Signal Forms name-routing). Surfaced
+     * through the Form's `clientErrorsFor` channel and gated by `validationMode` like any client validity.
+     * Independent of the Form's `errors` input (server errors), which stays eager.
+     */
     errorsFor?: (name: string) => string[];
+    /**
+     * Per-name `touched` / `dirty` for a name-routed field. Lets a `rdxFieldRoot` that has only a bare
+     * `[formField]` control (no `rdxSignalField` / `rdxFieldControl`) still reveal its error on blur under
+     * `validationMode="onBlur"`/`"onChange"` — the field reads its interaction state from here.
+     */
+    touchedFor?: (name: string) => boolean;
+    dirtyFor?: (name: string) => boolean;
 }
 interface RdxFormRootContext {
-    errorsFor: (name: string | undefined) => string[];
+    /**
+     * **Client** validation errors routed by a form-level provider (e.g. `rdxSignalForm`'s Signal Forms
+     * name-routing). These are gated by `validationMode` like any client validity — adding `rdxSignalForm`
+     * must not change error-display timing.
+     */
+    clientErrorsFor: (name: string | undefined) => string[];
+    /** **Server/external** errors from the Form's `errors` input. Shown eagerly (not gated). */
+    externalErrorsFor: (name: string | undefined) => string[];
+    /** Per-name `touched` / `dirty` from a form-level provider (`rdxSignalForm`); `false` when none. */
+    touchedFor: (name: string | undefined) => boolean;
+    dirtyFor: (name: string | undefined) => boolean;
     notifyEdited: (name: string | undefined) => void;
+    /**
+     * Whether a submit has been attempted (set before the validity check on submit, cleared on reset).
+     * A presentation-timing seam: an adapter can reveal a field's error after a submit attempt without the
+     * field having been touched, so the consumer never hand-rolls "mark touched on submit". Base UI's
+     * submit-attempt state, kept at the form level.
+     */
+    submitAttempted: Signal<boolean>;
+    /** The form's default validation-display mode; a `rdxFieldRoot` may override it per field. */
+    validationMode: Signal<RdxValidationMode>;
     /** Registers a field; returns its unregister callback. */
     register: (field: RdxFormFieldRegistration) => () => void;
     setStateProvider: (provider: RdxFormState | null) => RdxFormState | null;
+    /**
+     * Identity-checked teardown: roll the slot back to `previous` only if `provider` is still active,
+     * so an old adapter's destroy can't clobber a newer one (create-before-destroy on a view swap).
+     */
+    clearStateProvider: (provider: RdxFormState | null, previous: RdxFormState | null) => void;
     hasStateProvider: Signal<boolean>;
 }
 declare const injectFormRootContext: _radix_ng_primitives_core.InjectContext<RdxFormRootContext>;
-declare const provideFormRootContext: (useFactory: () => RdxFormRootContext) => i0.Provider;
+declare const provideFormRootContext: (useFactory: () => RdxFormRootContext) => _angular_core.Provider;
 /**
  * The top of the forms layer cake: a single directive on the native `<form>` element that aggregates
  * field state, maps external (server) errors onto fields by `name`, intercepts submit (values-as-object,
@@ -66,11 +108,20 @@ declare const provideFormRootContext: (useFactory: () => RdxFormRootContext) =>
 declare class RdxFormRoot {
     private readonly form;
     /** External/server validation errors keyed by `Field.Root` `name`. */
-    readonly errors: i0.InputSignal<RdxFormErrors | null | undefined>;
+    readonly errors: _angular_core.InputSignal<RdxFormErrors | null | undefined>;
+    /**
+     * When fields reveal their validity (error styling + message). The control/adapter always reports the
+     * actual state; this decides *when* the Field surfaces it. A `rdxFieldRoot` can override it per field.
+     * Server errors (`errors` above) always show regardless. Defaults to `'onBlur'`.
+     *
+     * @group Props
+     * @defaultValue 'onBlur'
+     */
+    readonly validationMode: _angular_core.InputSignal<RdxValidationMode>;
     /** Emits the remaining error map after a field's external error is cleared by a user edit (or reset). */
-    readonly onClearErrors: i0.OutputEmitterRef<RdxFormErrors>;
+    readonly onClearErrors: _angular_core.OutputEmitterRef<RdxFormErrors>;
     /** Emits the serialized form values when a valid form is submitted. */
-    readonly onFormSubmit: i0.OutputEmitterRef<RdxFormSubmitEvent>;
+    readonly onFormSubmit: _angular_core.OutputEmitterRef<RdxFormSubmitEvent>;
     private readonly fields;
     private readonly stateProvider;
     /** Whether an external adapter currently owns form-level state. */
@@ -82,33 +133,76 @@ declare class RdxFormRoot {
     private readonly clearedNames;
     /** The `errors` input minus cleared names, normalized to `string[]`. */
     private readonly effectiveErrors;
+    /** **Actual** aggregate invalidity (eager) — drives the submit guard / focus-first-invalid and is the
+     * value to read in app logic. Merges a form-level provider with the field registry. */
     readonly anyInvalid: Signal<boolean>;
     readonly anyDirty: Signal<boolean>;
     readonly anyTouched: Signal<boolean>;
     readonly submitting: Signal<boolean>;
-    /** Resolve a boolean aggregate: a registered provider's accessor wins, else OR over the registry. */
+    /**
+     * **Displayed** aggregate invalidity — the source for the host `data-invalid` (a presentation
+     * attribute). A field counts only once its own `validationMode` reveals it (`displayValid() === false`),
+     * so the form stays **neutral on load** while its fields are, instead of leaking the gated state.
+     * Distinct from {@link anyInvalid} (actual, eager).
+     *
+     * When **any** display-aware field is registered, those fields are the *authoritative* displayed
+     * source and win outright — a form-level provider's aggregate `invalid()` is **not** added on top
+     * (it would contradict a field that overrode its own `validationMode` to stay neutral; and the
+     * fields already reflect that provider's per-name state). The provider fallback applies only when no
+     * display-aware field carries the state, and then conservatively — under `validationMode="always"`
+     * or after a submit attempt, never from `anyTouched`.
+     */
+    readonly anyDisplayedInvalid: Signal<boolean>;
+    /**
+     * Whether a submit has been attempted on this form, exposed to fields via the context. Set true at the
+     * very start of {@link onSubmit} (before the validity check, so a field whose `validationMode` defers
+     * display, e.g. `onBlur`, reveals its error in time to block the submit) and cleared on native reset.
+     */
+    readonly submitAttempted: _angular_core.WritableSignal<boolean>;
+    /**
+     * Resolve a boolean aggregate. For `dirty` / `touched` a registered provider's accessor wins, else OR
+     * over the registry. For **`invalid`** the two are **merged** (`provider || registry`): a registered
+     * field's actual invalidity — e.g. a server `[errors]` entry — must still count (and block submit) even
+     * when a form-level provider (`rdxSignalForm`) reports the client model valid.
+     */
     private aggregate;
-    /** Resolves the external messages for a field name (provider source wins over the `errors` input). */
-    errorsFor(name: string | undefined): string[];
-    /** Clears a field's external error after a user edit, emitting the remaining map. */
+    /** Client validation errors from a form-level provider (`rdxSignalForm`); `[]` when none. Gated. */
+    clientErrorsFor(name: string | undefined): string[];
+    /** Per-name `touched` from a form-level provider (`rdxSignalForm`); `false` when none. */
+    touchedFor(name: string | undefined): boolean;
+    /** Per-name `dirty` from a form-level provider (`rdxSignalForm`); `false` when none. */
+    dirtyFor(name: string | undefined): boolean;
+    /**
+     * Server/external errors from the `errors` input (eager). A separate channel from {@link clientErrorsFor}:
+     * the `errors` input always applies, even alongside a form-level client provider (`rdxSignalForm`), so
+     * adding `rdxSignalForm` never disables your server errors.
+     */
+    externalErrorsFor(name: string | undefined): string[];
+    /** Clears a field's server error (the `errors` input) after a user edit, emitting the remaining map.
+     * Client provider errors (`rdxSignalForm`) are not affected — Signal Forms re-validates them itself. */
     notifyEdited(name: string | undefined): void;
     register(field: RdxFormFieldRegistration): () => void;
     /** Register (or clear with `null`) an external owner of form-level state; returns the previous one. */
     setStateProvider(provider: RdxFormState | null): RdxFormState | null;
+    /**
+     * Identity-checked teardown — roll back to `previous` only if `provider` is still active, so an
+     * old adapter's destroy can't clobber a newer one (create-before-destroy on a view swap).
+     */
+    clearStateProvider(provider: RdxFormState | null, previous: RdxFormState | null): void;
     onSubmit(event: SubmitEvent): void;
     onReset(): void;
     private readonly resetTimers;
     constructor();
     private remainingErrors;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFormRoot, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFormRoot, "form[rdxFormRoot]", ["rdxFormRoot"], { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "onClearErrors": "onClearErrors"; "onFormSubmit": "onFormSubmit"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFormRoot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFormRoot, "form[rdxFormRoot]", ["rdxFormRoot"], { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "validationMode": { "alias": "validationMode"; "required": false; "isSignal": true; }; }, { "onClearErrors": "onClearErrors"; "onFormSubmit": "onFormSubmit"; }, never, never, true, never>;
 }
 
 declare const _importsForm: (typeof RdxFormRoot)[];
 declare class RdxFormModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxFormModule, never, [typeof RdxFormRoot], [typeof RdxFormRoot]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<RdxFormModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFormModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxFormModule, never, [typeof RdxFormRoot], [typeof RdxFormRoot]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxFormModule>;
 }
 
 export { RdxFormModule, RdxFormRoot, _importsForm, injectFormRootContext, provideFormRootContext };

package/types/radix-ng-primitives-input.d.ts

@@ -133,7 +133,14 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
      * @group Emits
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
-    protected readonly invalidState: _angular_core.Signal<boolean>;
+    /** The input's own binary invalidity (its `invalid` input or a non-empty `errors` list). */
+    private readonly ownInvalid;
+    /**
+     * Tri-state *displayed* validity: inside a `rdxFieldRoot` the field's gated `validState` is the single
+     * source (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), otherwise
+     * the input's own binary invalidity. `true` valid / `false` invalid / `null` neutral.
+     */
+    protected readonly displayValid: _angular_core.Signal<boolean | null>;
     protected readonly disabledState: _angular_core.Signal<boolean>;
     protected readonly requiredState: _angular_core.Signal<boolean>;
     protected readonly filledState: _angular_core.Signal<boolean>;

package/types/radix-ng-primitives-number-field.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { RdxFormValueControl, RdxControlValueAccessor, NumberInput, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, RdxFormValueControl, RdxControlValueAccessor, NumberInput, BooleanInput, RdxCancelableChangeEventDetails, RdxFormUiTouchTarget } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_number_field from '@radix-ng/primitives/number-field';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as i1 from '@radix-ng/primitives/portal';
@@ -47,7 +47,7 @@ interface RdxNumberFieldValueChangeEvent {
  *
  * @see https://base-ui.com/react/components/number-field
  */
-declare class RdxNumberFieldRoot implements RdxFormValueControl<number | null> {
+declare class RdxNumberFieldRoot extends RdxFormUiControlBase implements RdxFormValueControl<number | null> {
     /** @ignore */
     protected readonly cva: RdxControlValueAccessor<number | null>;
     /** The id of the input element. */
@@ -138,6 +138,12 @@ declare class RdxNumberFieldRoot implements RdxFormValueControl<number | null> {
     hasPendingCommit: boolean;
     /** @ignore */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly invalidState: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly touchedState: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly dirtyState: _angular_core.Signal<boolean>;
     private readonly formatter;
     private readonly parser;
     /** @ignore The current numeric value (`null` when empty). */
@@ -170,8 +176,13 @@ declare class RdxNumberFieldRoot implements RdxFormValueControl<number | null> {
     registerInput(el: HTMLInputElement): void;
     /** @ignore Sets the displayed text without changing the numeric value. */
     setInputValue(text: string): void;
-    /** @ignore */
+    /**
+     * @ignore Mark the field touched — CVA for Reactive forms, plus the `touched` model + `touch`
+     * output for Signal Forms.
+     */
     markAsTouched(): void;
+    /** @ignore Bridge the CVA into `markAsTouched` (dual). */
+    protected formUiTouchTarget(): RdxFormUiTouchTarget;
     /**
      * @ignore
      * Validates and applies a candidate value, emitting `onValueChange` when it changes.

package/types/radix-ng-primitives-radio.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { RdxFormValueControl, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, RdxFormValueControl, BooleanInput, RdxCancelableChangeEventDetails, RdxFormUiTouchTarget } from '@radix-ng/primitives/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i1 from '@radix-ng/primitives/composite';
 import * as _radix_ng_primitives_radio from '@radix-ng/primitives/radio';
@@ -26,7 +26,7 @@ interface RadioRootContext {
 }
 declare const injectRadioRootContext: _radix_ng_primitives_core.InjectContext<RadioRootContext>;
 declare const provideRadioRootContext: (useFactory: () => RadioRootContext) => _angular_core.Provider;
-declare class RdxRadioGroupDirective implements ControlValueAccessor, RdxFormValueControl<string | null> {
+declare class RdxRadioGroupDirective extends RdxFormUiControlBase implements ControlValueAccessor, RdxFormValueControl<string | null> {
     private readonly elementRef;
     private readonly compositeRoot;
     /**
@@ -51,6 +51,9 @@ declare class RdxRadioGroupDirective implements ControlValueAccessor, RdxFormVal
     readonly onValueChange: _angular_core.OutputEmitterRef<RdxRadioValueChangeEvent>;
     private readonly disable;
     readonly disabledState: Signal<boolean>;
+    readonly invalidState: Signal<boolean>;
+    readonly touchedState: Signal<boolean>;
+    readonly dirtyState: Signal<boolean>;
     private readonly arrowNavigation;
     private readonly itemMetadata;
     private readonly disabledIndices;
@@ -71,6 +74,8 @@ declare class RdxRadioGroupDirective implements ControlValueAccessor, RdxFormVal
      * @ignore
      */
     select(value: string | null, event?: Event, reason?: RdxRadioValueChangeReason): void;
+    /** @ignore Bridge the CVA `onTouched` so `markAsTouched()` also notifies Reactive/template forms. */
+    protected formUiTouchTarget(): RdxFormUiTouchTarget;
     /**
      * Update the value of the radio group.
      * @param value The new value of the radio group.

package/types/radix-ng-primitives-select.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef, InjectionToken, OutputRef, WritableSignal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { AcceptableValue, RdxCancelableChangeEventDetails, RdxFloatingRootContext, Direction, ItemValueComparator, RdxTransitionStatus } from '@radix-ng/primitives/core';
+import { AcceptableValue, RdxCancelableChangeEventDetails, RdxFormUiControlBase, RdxFormValueControl, RdxFloatingRootContext, Direction, ItemValueComparator, RdxTransitionStatus, RdxFormUiStateContext } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_select from '@radix-ng/primitives/select';
 import * as i1 from '@radix-ng/primitives/composite';
 import { RdxCompositeItemRegistration } from '@radix-ng/primitives/composite';
@@ -330,7 +330,7 @@ interface RdxSelectValueChangeEvent {
     value: AcceptableValue | AcceptableValue[] | undefined;
     eventDetails: RdxSelectValueChangeEventDetails;
 }
-interface RdxSelectRootContext {
+interface RdxSelectRootContext extends RdxFormUiStateContext {
     triggerElement: WritableSignal<HTMLElement | null>;
     valueElement: WritableSignal<HTMLElement | null>;
     triggerPointerDownPosRef: WritableSignal<{
@@ -365,7 +365,7 @@ interface RdxSelectRootContext {
 }
 declare const injectSelectRootContext: _radix_ng_primitives_core.InjectContext<RdxSelectRootContext>;
 declare const provideSelectRootContext: (useFactory: () => RdxSelectRootContext) => _angular_core.Provider;
-declare class RdxSelectRoot {
+declare class RdxSelectRoot extends RdxFormUiControlBase implements RdxFormValueControl<AcceptableValue | AcceptableValue[] | undefined> {
     readonly contentId: string;
     readonly open: _angular_core.ModelSignal<boolean>;
     /** Whether the current open was initiated by **touch** (ADR 0016 §3 — gates the anchored scroll lock). */
@@ -475,8 +475,16 @@ declare class RdxSelectTrigger {
     readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly triggerInteraction: i2.RdxTriggerInteraction;
     protected readonly invalidState: _angular_core.Signal<boolean>;
+    /**
+     * Tri-state *displayed* validity: when inside a `rdxFieldRoot` the field's gated `validState` is the
+     * single source (so the field's `validationMode` keeps the trigger neutral until revealed), otherwise
+     * the trigger's own binary invalidity.
+     */
+    protected readonly displayValid: _angular_core.Signal<boolean | null>;
     protected readonly requiredState: _angular_core.Signal<boolean>;
     protected readonly readOnlyState: _angular_core.Signal<boolean>;
+    protected readonly touchedState: _angular_core.Signal<boolean>;
+    protected readonly dirtyState: _angular_core.Signal<boolean>;
     protected readonly filledState: _angular_core.Signal<boolean>;
     protected readonly focusedState: _angular_core.Signal<boolean>;
     protected readonly describedBy: _angular_core.Signal<string | undefined>;

package/types/radix-ng-primitives-signal-forms.d.ts

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { FieldTree } from '@angular/forms/signals';
+
+/**
+ * Bridges an Angular **Signal Forms** field into an enclosing `rdxFieldRoot` — with **no duplicate
+ * binding**. Place it on the control that already carries `[formField]`; it reads the bound field's
+ * state from that directive, so the field expression is written exactly once:
+ *
+ * ```html
+ * <div rdxFieldRoot>
+ *   <label rdxFieldLabel>Email</label>
+ *   <input rdxInput [formField]="loginForm.email" rdxSignalField />
+ *   <p rdxFieldError>Email is required.</p>
+ * </div>
+ * ```
+ *
+ * It owns no model and runs no validation — Signal Forms remains the source of truth. It only registers
+ * an {@link RdxFieldState} provider on the ancestor Field context so the field's `invalid` / `disabled` /
+ * `required` / `dirty` / `touched` data-attributes and the error *content* (`rdxFieldError.messages()`)
+ * read authoritative Signal Forms state. `filled` / `focused` stay on Field's DOM heuristic (partial
+ * ownership — the seam supports it).
+ *
+ * It reports the **actual** Signal Forms state only; the `Field` decides *when* to display it from its
+ * `validationMode` (default `'onBlur'` — neutral until the field is touched or the form submitted). So an
+ * empty required field is neutral on load with no manual `[invalid]`/`[touched]` wiring, and a pristine
+ * submit reveals the errors (the `Form` records the submit attempt before checking validity and blocks).
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+declare class RdxSignalField {
+    /** The co-located `[formField]` directive — the single source of the bound field's state. */
+    private readonly formField;
+    private readonly fieldContext;
+    constructor();
+    /** Current Signal Forms field state, read from the co-located `[formField]` directive. */
+    private state;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSignalField, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSignalField, "[formField][rdxSignalField]", ["rdxSignalField"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Bridges an Angular **Signal Forms** form into an enclosing `form[rdxFormRoot]`.
+ *
+ * ```html
+ * <form rdxFormRoot [rdxSignalForm]="loginForm">
+ *   <!-- fields bound with [formField] (+ rdxSignalField) -->
+ * </form>
+ * ```
+ *
+ * Registers an {@link RdxFormState} provider so the Form's aggregate `data-invalid` / `data-dirty` /
+ * `data-touched` / `data-submitting` attributes and the submit guard read authoritative Signal Forms
+ * state. This adapter owns only client-side state and `name`-routing; server errors stay a separate
+ * eager channel applied through `rdxFormRoot[errors]`, and Signal Forms' own `submit()` owns the
+ * submit lifecycle.
+ *
+ * `errorsFor(name)` routes a field's errors to a `rdxFieldRoot` by its `name`, walking the `FieldTree`
+ * so dotted paths into nested object/array fields resolve too (`address.street`, `items.0.name`). A
+ * field can surface messages from the form alone — no per-field `rdxSignalField` needed for errors.
+ * These are the **two modes** (per-field adapter vs form-level name routing) — prefer one per field; if
+ * a field carries both, `rdxFieldError.messages()` deduplicates by text so the shared message is not
+ * shown twice.
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+declare class RdxSignalForm {
+    /** The Signal Forms root field (from `form(...)`) whose aggregate state drives the enclosing Form. */
+    readonly form: i0.InputSignal<FieldTree<unknown>>;
+    private readonly formContext;
+    constructor();
+    /**
+     * Messages for the field at the dotted `name` path (`message ?? kind` per error). Walks the
+     * `FieldTree` so nested object/array fields resolve too — e.g. `address.street`, `items.0.name`.
+     */
+    private errorsFor;
+    /**
+     * The Signal Forms field *state* at the dotted `name` path, or `null` if it doesn't resolve. Walks the
+     * `FieldTree` so nested object/array fields work (`address.street`, `items.0.name`).
+     */
+    private fieldState;
+    /** The current Signal Forms root field state (a `FieldTree` is callable). */
+    private state;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSignalForm, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSignalForm, "form[rdxFormRoot][rdxSignalForm]", ["rdxSignalForm"], { "form": { "alias": "rdxSignalForm"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const _importsSignalForms: (typeof RdxSignalField | typeof RdxSignalForm)[];
+declare class RdxSignalFormsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSignalFormsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxSignalFormsModule, never, [typeof RdxSignalField, typeof RdxSignalForm], [typeof RdxSignalField, typeof RdxSignalForm]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdxSignalFormsModule>;
+}
+
+export { RdxSignalField, RdxSignalForm, RdxSignalFormsModule, _importsSignalForms };

package/types/radix-ng-primitives-slider.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
-import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { RdxControlValueAccessor, NumberInput, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
+import * as i2 from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, RdxControlValueAccessor, NumberInput, BooleanInput, RdxCancelableChangeEventDetails, RdxFormUiTouchTarget } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/composite';
 import * as _radix_ng_primitives_slider from '@radix-ng/primitives/slider';
@@ -131,7 +131,7 @@ interface RdxSliderThumbMetadata {
  *
  * @see https://base-ui.com/react/components/slider
  */
-declare class RdxSliderRoot {
+declare class RdxSliderRoot extends RdxFormUiControlBase {
     /** @ignore */
     protected readonly cva: RdxControlValueAccessor<SliderValue>;
     private readonly document;
@@ -172,7 +172,7 @@ declare class RdxSliderRoot {
      * @default 'ltr'
      */
     readonly dirInput: _angular_core.InputSignal<"ltr" | "rtl" | undefined>;
-    readonly dir: Signal<_radix_ng_primitives_core.Direction>;
+    readonly dir: Signal<i2.Direction>;
     /**
      * How thumbs behave when they meet in a range slider.
      * @default 'push'
@@ -272,7 +272,9 @@ declare class RdxSliderRoot {
     handleInputChange(valueInput: number, index: number, reason?: RdxSliderValueChangeReason, event?: Event): void;
     /** @ignore Emits the committed value at the end of a pointer drag. */
     commitValue(event?: Event, reason?: RdxSliderValueCommitReason): void;
-    /** @ignore */
+    /** @ignore Bridge the CVA into `markAsTouched` (dual). */
+    protected formUiTouchTarget(): RdxFormUiTouchTarget;
+    /** @ignore Mark touched: CVA (Reactive/template) + `touched` model + `touch` (Signal Forms). */
     markAsTouched(): void;
     /** @ignore */
     setDragging(dragging: boolean): void;
@@ -281,7 +283,7 @@ declare class RdxSliderRoot {
     /** @ignore */
     getOwnerWindow(): Window | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSliderRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSliderRoot, "div[rdxSliderRoot]", ["rdxSliderRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "largeStep": { "alias": "largeStep"; "required": false; "isSignal": true; }; "minStepsBetweenValues": { "alias": "minStepsBetweenValues"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "thumbCollisionBehavior": { "alias": "thumbCollisionBehavior"; "required": false; "isSignal": true; }; "thumbAlignment": { "alias": "thumbAlignment"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; "onValueCommitted": "onValueCommitted"; }, never, never, true, [{ directive: typeof i1.RdxCompositeList; inputs: {}; outputs: {}; }, { directive: typeof _radix_ng_primitives_core.RdxControlValueAccessor; inputs: { "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSliderRoot, "div[rdxSliderRoot]", ["rdxSliderRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "largeStep": { "alias": "largeStep"; "required": false; "isSignal": true; }; "minStepsBetweenValues": { "alias": "minStepsBetweenValues"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "thumbCollisionBehavior": { "alias": "thumbCollisionBehavior"; "required": false; "isSignal": true; }; "thumbAlignment": { "alias": "thumbAlignment"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; "onValueCommitted": "onValueCommitted"; }, never, never, true, [{ directive: typeof i1.RdxCompositeList; inputs: {}; outputs: {}; }, { directive: typeof i2.RdxFormUiStateHost; inputs: {}; outputs: {}; }, { directive: typeof i2.RdxControlValueAccessor; inputs: { "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**
@@ -431,7 +433,7 @@ declare class RdxSliderValue {
  *
  * @see https://base-ui.com/react/components/slider
  */
-declare const injectSliderRootContext: _radix_ng_primitives_core.InjectContext<RdxSliderRoot>;
+declare const injectSliderRootContext: i2.InjectContext<RdxSliderRoot>;
 declare const provideSliderRootContext: (useFactory: () => RdxSliderRoot) => _angular_core.Provider;
 
 declare class RdxSliderModule {

package/types/radix-ng-primitives-switch.d.ts

@@ -2,7 +2,7 @@ import * as _radix_ng_primitives_switch from '@radix-ng/primitives/switch';
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
-import { RdxCancelableChangeEventDetails, RdxFormCheckboxControl, RdxControlValueAccessor, BooleanInput } from '@radix-ng/primitives/core';
+import { RdxCancelableChangeEventDetails, RdxFormUiControlBase, RdxFormCheckboxControl, RdxControlValueAccessor, BooleanInput, RdxFormUiTouchTarget } from '@radix-ng/primitives/core';
 
 /**
  * The hidden native checkbox that mirrors the switch state for form submission and screen readers.
@@ -26,7 +26,7 @@ interface RdxSwitchCheckedChangeEvent {
  *
  * @see https://base-ui.com/react/components/switch
  */
-declare class RdxSwitchRoot implements RdxFormCheckboxControl {
+declare class RdxSwitchRoot extends RdxFormUiControlBase implements RdxFormCheckboxControl {
     /** @ignore */
     protected readonly cva: RdxControlValueAccessor<boolean | undefined>;
     readonly id: _angular_core.InputSignal<string>;
@@ -79,7 +79,20 @@ declare class RdxSwitchRoot implements RdxFormCheckboxControl {
     readonly checkedState: _angular_core.Signal<boolean>;
     /** @ignore */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly invalidState: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly touchedState: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly dirtyState: _angular_core.Signal<boolean>;
     constructor();
+    /** @ignore Bridge the CVA into `markAsTouched` (dual). */
+    protected formUiTouchTarget(): RdxFormUiTouchTarget;
+    /**
+     * Mark the switch touched — CVA for Reactive forms, plus the `touched` model + `touch` output for
+     * Signal Forms. Called on blur of the root button or the hidden input.
+     */
+    markAsTouched(): void;
     /** @ignore Toggles the checked state unless disabled or read-only. */
     toggle(event?: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchRoot, never>;

package/types/radix-ng-primitives-time-field.d.ts

@@ -1,10 +1,10 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal, InjectionToken, InputSignal, ModelSignal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { TimeValue, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, RdxFormValueControl, TimeValue, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
 import * as _internationalized_date from '@internationalized/date';
 
-declare class RdxTimeFieldRootDirective {
+declare class RdxTimeFieldRootDirective extends RdxFormUiControlBase implements RdxFormValueControl<TimeValue | undefined> {
     /**
      * The controlled checked state of the calendar.
      */
@@ -96,6 +96,24 @@ declare class RdxTimeFieldRootDirective {
      * @ignore
      */
     readonly isInvalid: Signal<boolean>;
+    /**
+     * @ignore Effective invalid: the built-in range check OR the form-driven `invalid` / `errors`
+     * (Signal Forms). Reflected on the root and segments.
+     */
+    readonly invalidState: Signal<boolean>;
+    /**
+     * @ignore Tri-state display validity: the enclosing Field's gated state when inside a `rdxFieldRoot`,
+     * else the time-field's own (parse + form) invalidity. Overrides the base default (`formUi` only).
+     */
+    readonly displayValid: Signal<boolean | null>;
+    /** @ignore */
+    readonly touchedState: Signal<boolean>;
+    /** @ignore */
+    readonly dirtyState: Signal<boolean>;
+    /** @ignore Whether the user has focused a segment — gates dirty tracking so a form/initial seed of `value` doesn't mark dirty. */
+    private readonly userInteracted;
+    /** @ignore Mark the field touched (model + `touch` output) for Signal Forms. Called on segment blur. */
+    markAsTouched(): void;
     /**
      * @ignore
      */
@@ -168,6 +186,8 @@ declare class RdxTimeFieldInputDirective {
      * @ignore
      */
     readonly isInvalid: _angular_core.Signal<boolean>;
+    /** @ignore Tri-state display validity from the root (gated by an enclosing Field). */
+    readonly displayValid: _angular_core.Signal<boolean | null>;
     /**
      * @ignore
      */
@@ -204,6 +224,10 @@ interface TimeFieldContextToken {
     value: ModelSignal<TimeValue | undefined>;
     placeholder: ModelSignal<TimeValue>;
     isInvalid: Signal<boolean>;
+    /** Effective invalid: the built-in range check OR the form-driven invalid state. */
+    invalidState: Signal<boolean>;
+    /** Tri-state displayed validity (`true`/`false`/`null`): the field's gated state inside a Field, else own. */
+    displayValid: Signal<boolean | null>;
     disabled: InputSignal<boolean>;
     readonly: InputSignal<boolean>;
     formatter: Signal<Formatter>;