@radix-ng/primitives 1.0.6 → 1.0.8

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-separator.d.ts

@@ -22,13 +22,6 @@ declare class RdxSeparatorRootDirective {
      */
     readonly orientation: _angular_core.InputSignal<Orientation>;
     protected readonly orientationState: _angular_core.WritableSignal<Orientation>;
-    /**
-     * Computes the `aria-orientation` attribute. It is set to "vertical" only when
-     * the separator orientation is vertical. Horizontal is the implicit ARIA default.
-     *
-     * @ignore
-     */
-    protected readonly computedAriaOrientation: _angular_core.Signal<"vertical" | undefined>;
     updateOrientation(value: Orientation): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "[rdxSeparatorRoot]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

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>;

package/types/radix-ng-primitives-toggle-group.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 { DataOrientation, RdxCancelableChangeEventDetails, BooleanInput, Direction } from '@radix-ng/primitives/core';
+import { DataOrientation, RdxCancelableChangeEventDetails, RdxFormUiControlBase, RdxFormValueControl, BooleanInput, RdxFormUiTouchTarget, Direction } from '@radix-ng/primitives/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i1 from '@radix-ng/primitives/composite';
 
@@ -18,8 +18,12 @@ interface RdxToggleGroupContext {
     readonly orientation: Signal<DataOrientation>;
     /** Whether the group value was initialized by `value` or `defaultValue`. */
     readonly isValueInitialized: Signal<boolean>;
-    /** Toggle the pressed state of `value` within the group. */
-    toggle(value: string, event?: Event, eventDetails?: RdxCancelableChangeEventDetails<RdxToggleGroupContextChangeReason>): void;
+    /**
+     * Set the pressed state of `value` within the group. The item computes the next pressed boolean
+     * (Base UI parity — the item is the source of truth), so the group applies it rather than
+     * re-deriving the toggle from its current value set.
+     */
+    toggle(value: string, nextPressed: boolean, event?: Event, eventDetails?: RdxCancelableChangeEventDetails<RdxToggleGroupContextChangeReason>): void;
 }
 declare const injectToggleGroupContext: _radix_ng_primitives_core.InjectContext<RdxToggleGroupContext>;
 declare const provideToggleGroupContext: (useFactory: () => RdxToggleGroupContext) => _angular_core.Provider;
@@ -37,7 +41,7 @@ declare function toggleGroupContext(instance: RdxToggleGroupBase): RdxToggleGrou
  * ({@link RdxToggleGroup}) or omit it when an ancestor already owns focus, e.g. a toolbar
  * ({@link RdxToggleGroupWithoutFocus}).
  */
-declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
+declare abstract class RdxToggleGroupBase extends RdxFormUiControlBase implements ControlValueAccessor, RdxFormValueControl<string[] | undefined> {
     /**
      * The pressed values. Always an array — a single value is `[value]`. Use with `(onValueChange)`
      * for controlled state.
@@ -75,10 +79,12 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
     private onChange?;
     protected onTouched?: () => void;
     constructor();
+    /** @ignore Bridge the CVA `onTouched` so `markAsTouched()` also notifies Reactive/template forms. */
+    protected formUiTouchTarget(): RdxFormUiTouchTarget;
     /** @ignore Extra disabled state inherited from composite parents such as Toolbar. */
     protected isExternallyDisabled(): boolean;
     /** @ignore */
-    toggle(value: string, event?: Event, eventDetails?: RdxToggleGroupValueChangeEventDetails): void;
+    toggle(value: string, nextPressed: boolean, event?: Event, eventDetails?: RdxToggleGroupValueChangeEventDetails): void;
     /** @ignore */
     writeValue(value: string[] | string | null): void;
     /** @ignore */
@@ -114,7 +120,7 @@ declare class RdxToggleGroup extends RdxToggleGroupBase {
     private readonly activeIndex;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroup, "[rdxToggleGroup]", ["rdxToggleGroup"], { "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroup, "[rdxToggleGroup]", ["rdxToggleGroup"], { "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeRoot; inputs: {}; outputs: {}; }, { directive: typeof _radix_ng_primitives_core.RdxFormUiStateHost; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -128,7 +134,7 @@ declare class RdxToggleGroupWithoutFocus extends RdxToggleGroupBase {
     private readonly toolbarGroupContext;
     protected isExternallyDisabled(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocus, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocus, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocus, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_core.RdxFormUiStateHost; inputs: {}; outputs: {}; }]>;
 }
 
 export { RdxToggleGroup, RdxToggleGroupBase, RdxToggleGroupWithoutFocus, injectToggleGroupContext, provideToggleGroupContext, toggleGroupContext };

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

@@ -1,7 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/composite';
-import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
 type RdxTogglePressedChangeReason = 'none';
 type RdxTogglePressedChangeEventDetails = RdxCancelableChangeEventDetails<RdxTogglePressedChangeReason>;
@@ -57,16 +56,17 @@ declare class RdxToggle {
     constructor();
     /** @ignore */
     protected onClick(event?: Event): void;
-    /** @ignore */
+    /**
+     * @ignore
+     * Non-native hosts emulate a native `<button>` (Base UI `useButton`): Enter activates on keydown,
+     * Space is `preventDefault`-ed on keydown (to suppress page scroll) and activates on keyup.
+     */
     protected onKeyDown(event: KeyboardEvent): void;
+    /** @ignore Space activates on keyup for non-native hosts (native-button semantics). */
+    protected onKeyUp(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggle, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggle, "[rdxToggle]", ["rdxToggle"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
-declare class RdxToggleVisuallyHiddenInputDirective {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleVisuallyHiddenInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleVisuallyHiddenInputDirective, "input[rdxToggleVisuallyHiddenInput]", ["rdxToggleVisuallyHiddenInput"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxVisuallyHiddenInputBubbleDirective; inputs: { "name": "name"; "required": "required"; "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
-}
-
-export { RdxToggle, RdxToggleVisuallyHiddenInputDirective };
+export { RdxToggle };
 export type { RdxTogglePressedChangeEvent, RdxTogglePressedChangeEventDetails, RdxTogglePressedChangeReason };

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

@@ -94,6 +94,8 @@ declare class RdxToolbarInput {
     readonly isDisabled: _angular_core.Signal<boolean>;
     private appliedDefault;
     constructor();
+    /** @ignore Block pointer interaction while disabled (Base UI input `defaultProps`). */
+    protected onInteraction(event: Event): void;
     private handleCaretKeydown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarInput, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;