@radix-ng/primitives 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -1,7 +1,7 @@
 import * as _radix_ng_primitives_field from '@radix-ng/primitives/field';
 import * as _angular_core from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
+import { BooleanInput, RdxValidationError } from '@radix-ng/primitives/core';
 
 /**
  * Connects a form control to the field label, description, error, and state.
@@ -11,8 +11,11 @@ import { BooleanInput } from '@radix-ng/primitives/core';
 declare class RdxFieldControl {
     protected readonly rootContext: {
         controlId: _angular_core.WritableSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
         descriptionIds: _angular_core.WritableSignal<string[]>;
         errorIds: _angular_core.WritableSignal<string[]>;
+        messages: _angular_core.Signal<string[]>;
+        notifyEdited: () => void;
         invalidState: _angular_core.Signal<boolean>;
         disabledState: _angular_core.Signal<boolean>;
         requiredState: _angular_core.Signal<boolean>;
@@ -60,8 +63,11 @@ declare class RdxFieldControl {
 declare class RdxFieldDescription {
     protected readonly rootContext: {
         controlId: _angular_core.WritableSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
         descriptionIds: _angular_core.WritableSignal<string[]>;
         errorIds: _angular_core.WritableSignal<string[]>;
+        messages: _angular_core.Signal<string[]>;
+        notifyEdited: () => void;
         invalidState: _angular_core.Signal<boolean>;
         disabledState: _angular_core.Signal<boolean>;
         requiredState: _angular_core.Signal<boolean>;
@@ -101,8 +107,11 @@ declare class RdxFieldDescription {
 declare class RdxFieldError {
     protected readonly rootContext: {
         controlId: _angular_core.WritableSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
         descriptionIds: _angular_core.WritableSignal<string[]>;
         errorIds: _angular_core.WritableSignal<string[]>;
+        messages: _angular_core.Signal<string[]>;
+        notifyEdited: () => void;
         invalidState: _angular_core.Signal<boolean>;
         disabledState: _angular_core.Signal<boolean>;
         requiredState: _angular_core.Signal<boolean>;
@@ -128,6 +137,12 @@ declare class RdxFieldError {
      * @group Props
      */
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * 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:
+     * `<p rdxFieldError #err="rdxFieldError">{{ err.messages().join(' ') }}</p>`.
+     */
+    readonly messages: _angular_core.Signal<string[]>;
     constructor();
     protected readonly dataAttr: (value: boolean) => "" | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFieldError, never>;
@@ -142,8 +157,11 @@ declare class RdxFieldError {
 declare class RdxFieldLabel {
     protected readonly rootContext: {
         controlId: _angular_core.WritableSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
         descriptionIds: _angular_core.WritableSignal<string[]>;
         errorIds: _angular_core.WritableSignal<string[]>;
+        messages: _angular_core.Signal<string[]>;
+        notifyEdited: () => void;
         invalidState: _angular_core.Signal<boolean>;
         disabledState: _angular_core.Signal<boolean>;
         requiredState: _angular_core.Signal<boolean>;
@@ -195,11 +213,23 @@ interface RdxFieldState {
     touched?: () => boolean;
     filled?: () => boolean;
     focused?: () => boolean;
+    /**
+     * Optional source of error *content* (not just the invalid boolean). When provided and non-empty
+     * it forces `invalidState` true, and its messages (`message ?? kind` per error) surface through
+     * `RdxFieldError.messages()` ahead of any enclosing Form's external messages. Uses `core`'s
+     * framework-free shim type so the seam stays free of `@angular/forms/signals` (ADR 0004 amendment).
+     */
+    errors?: () => RdxValidationError[];
 }
 declare const fieldRootContext: () => {
     controlId: _angular_core.WritableSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
     descriptionIds: _angular_core.WritableSignal<string[]>;
     errorIds: _angular_core.WritableSignal<string[]>;
+    /** Combined external messages (state provider's, then enclosing Form's), for `RdxFieldError`. */
+    messages: _angular_core.Signal<string[]>;
+    /** Notify an enclosing Form that this field's control was edited (composite-control opt-in). */
+    notifyEdited: () => void;
     invalidState: _angular_core.Signal<boolean>;
     disabledState: _angular_core.Signal<boolean>;
     requiredState: _angular_core.Signal<boolean>;
@@ -228,8 +258,13 @@ declare const fieldRootContext: () => {
 type RdxFieldRootContext = ReturnType<typeof fieldRootContext>;
 declare const injectFieldRootContext: _radix_ng_primitives_core.InjectContext<{
     controlId: _angular_core.WritableSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
     descriptionIds: _angular_core.WritableSignal<string[]>;
     errorIds: _angular_core.WritableSignal<string[]>;
+    /** Combined external messages (state provider's, then enclosing Form's), for `RdxFieldError`. */
+    messages: _angular_core.Signal<string[]>;
+    /** Notify an enclosing Form that this field's control was edited (composite-control opt-in). */
+    notifyEdited: () => void;
     invalidState: _angular_core.Signal<boolean>;
     disabledState: _angular_core.Signal<boolean>;
     requiredState: _angular_core.Signal<boolean>;
@@ -257,8 +292,13 @@ declare const injectFieldRootContext: _radix_ng_primitives_core.InjectContext<{
 }>;
 declare const provideFieldRootContext: (useFactory: () => {
     controlId: _angular_core.WritableSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
     descriptionIds: _angular_core.WritableSignal<string[]>;
     errorIds: _angular_core.WritableSignal<string[]>;
+    /** Combined external messages (state provider's, then enclosing Form's), for `RdxFieldError`. */
+    messages: _angular_core.Signal<string[]>;
+    /** Notify an enclosing Form that this field's control was edited (composite-control opt-in). */
+    notifyEdited: () => void;
     invalidState: _angular_core.Signal<boolean>;
     disabledState: _angular_core.Signal<boolean>;
     requiredState: _angular_core.Signal<boolean>;
@@ -337,6 +377,15 @@ declare class RdxFieldRoot {
      * @group Props
      */
     readonly focused: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Identifies the field to an enclosing Form for external (server) error matching. Fields without a
+     * `name` never match external errors.
+     *
+     * @group Props
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** The enclosing Form, if any. All Form-related behavior is a no-op when this is `null`. */
+    private readonly formContext;
     readonly controlId: _angular_core.WritableSignal<string>;
     readonly descriptionIds: _angular_core.WritableSignal<string[]>;
     readonly errorIds: _angular_core.WritableSignal<string[]>;
@@ -348,6 +397,12 @@ declare class RdxFieldRoot {
     private readonly stateProvider;
     /** Whether an external adapter currently owns field state. */
     readonly hasStateProvider: _angular_core.Signal<boolean>;
+    /** Error content from a registered state provider (e.g. a Signal Forms adapter). */
+    private readonly providerErrors;
+    /** External messages from the enclosing Form matched by this field's `name`. */
+    readonly externalErrors: _angular_core.Signal<string[]>;
+    /** Provider messages first (`message ?? kind`), then the Form's external messages. */
+    readonly messages: _angular_core.Signal<string[]>;
     readonly invalidState: _angular_core.Signal<boolean>;
     readonly disabledState: _angular_core.Signal<boolean>;
     readonly requiredState: _angular_core.Signal<boolean>;
@@ -356,6 +411,20 @@ declare class RdxFieldRoot {
     readonly filledState: _angular_core.Signal<boolean>;
     readonly focusedState: _angular_core.Signal<boolean>;
     protected readonly dataAttr: (value: boolean) => "" | undefined;
+    constructor();
+    /** Notify the enclosing Form (if any) that this field's control was edited (clear-on-edit). */
+    notifyEdited(): void;
+    /** Reset interaction state on native form reset: touched/dirty/focused → false, filled re-synced. */
+    resetState(): void;
+    /** Focus the field's control (used by the Form's first-invalid-focus on blocked submit). */
+    private focusControl;
+    private readonly host;
+    /**
+     * The field's control element, found by `controlId` but scoped to this field's own subtree — a
+     * duplicate or consumer-reused id elsewhere on the page can't steal focus/reset. The control
+     * registers its id through `setControlId`, so this matches the same element the labels point at.
+     */
+    private controlElement;
     /**
      * Register an external owner of field state, returning the previous one.
      * @ignore
@@ -367,7 +436,7 @@ declare class RdxFieldRoot {
      */
     private resolve;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFieldRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFieldRoot, "[rdxFieldRoot]", ["rdxFieldRoot"], { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "focused": { "alias": "focused"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFieldRoot, "[rdxFieldRoot]", ["rdxFieldRoot"], { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "focused": { "alias": "focused"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { RdxFieldControl, RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot, injectFieldRootContext, provideFieldRootContext };

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

@@ -0,0 +1,124 @@
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import * as _angular_core from '@angular/core';
+
+/** A normalized external-error map: each field name maps to its message(s) in display order. */
+type RdxFormErrors = Record<string, string | string[]>;
+/** Payload of {@link RdxFormRoot.onFormSubmit}. */
+interface RdxFormSubmitEvent {
+    /** The form's values serialized from `FormData` (repeated names collapse into arrays). */
+    values: Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+    /** The original native submit event (already `preventDefault`-ed). */
+    event: SubmitEvent;
+}
+/**
+ * What a {@link RdxFieldRoot} registers with an enclosing Form. Structural `() =>` accessors keep the
+ * Form entry free of any import from `field` (acyclic ng-packagr graph: `field` → `form`).
+ */
+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). */
+    invalid: () => boolean;
+    /** Whether the field is dirty. */
+    dirty: () => boolean;
+    /** Whether the field is touched. */
+    touched: () => boolean;
+    /** Focus the field's control (by its `controlId`). */
+    focus: () => void;
+    /** Reset the field's interaction state (touched/dirty/focused → false, filled re-sync). */
+    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.
+ */
+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. */
+    errorsFor?: (name: string) => string[];
+}
+declare const formRootContext: () => {
+    errorsFor: (name: string | undefined) => string[];
+    notifyEdited: (name: string | undefined) => void;
+    register: (field: RdxFormFieldRegistration) => () => void;
+    setStateProvider: (provider: RdxFormState | null) => RdxFormState | null;
+    hasStateProvider: _angular_core.Signal<boolean>;
+};
+type RdxFormRootContext = ReturnType<typeof formRootContext>;
+declare const injectFormRootContext: _radix_ng_primitives_core.InjectContext<{
+    errorsFor: (name: string | undefined) => string[];
+    notifyEdited: (name: string | undefined) => void;
+    register: (field: RdxFormFieldRegistration) => () => void;
+    setStateProvider: (provider: RdxFormState | null) => RdxFormState | null;
+    hasStateProvider: _angular_core.Signal<boolean>;
+}>;
+declare const provideFormRootContext: (useFactory: () => {
+    errorsFor: (name: string | undefined) => string[];
+    notifyEdited: (name: string | undefined) => void;
+    register: (field: RdxFormFieldRegistration) => () => void;
+    setStateProvider: (provider: RdxFormState | null) => RdxFormState | null;
+    hasStateProvider: _angular_core.Signal<boolean>;
+}) => _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,
+ * focus the first invalid field), and resets field interaction state on native `reset`. It owns no
+ * values and runs no validation — Angular form systems (or Field inputs) remain the source of validity.
+ *
+ * @group Components
+ */
+declare class RdxFormRoot {
+    private readonly form;
+    /** External/server validation errors keyed by `Field.Root` `name`. */
+    readonly errors: _angular_core.InputSignal<RdxFormErrors | null | undefined>;
+    /** Emits the remaining error map after a field's external error is cleared by a user edit (or reset). */
+    readonly onClearErrors: _angular_core.OutputEmitterRef<RdxFormErrors>;
+    /** Emits the serialized form values when a valid form is submitted. */
+    readonly onFormSubmit: _angular_core.OutputEmitterRef<RdxFormSubmitEvent>;
+    private readonly fields;
+    private readonly stateProvider;
+    /** Whether an external adapter currently owns form-level state. */
+    readonly hasStateProvider: _angular_core.Signal<boolean>;
+    /**
+     * Names whose external error has been cleared by a user edit. Reset to empty whenever a new `errors`
+     * object reference is assigned — the server just spoke, so everything it said is live again.
+     */
+    private readonly clearedNames;
+    /** The `errors` input minus cleared names, normalized to `string[]`. */
+    private readonly effectiveErrors;
+    readonly anyInvalid: _angular_core.Signal<boolean>;
+    readonly anyDirty: _angular_core.Signal<boolean>;
+    readonly anyTouched: _angular_core.Signal<boolean>;
+    readonly submitting: _angular_core.Signal<boolean>;
+    /** Resolve a boolean aggregate: a registered provider's accessor wins, else OR over the registry. */
+    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. */
+    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;
+    onSubmit(event: SubmitEvent): void;
+    onReset(): void;
+    private readonly resetTimers;
+    constructor();
+    private remainingErrors;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFormRoot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFormRoot, "form[rdxFormRoot]", ["rdxFormRoot"], { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "onClearErrors": "onClearErrors"; "onFormSubmit": "onFormSubmit"; }, never, never, true, never>;
+}
+
+declare const _importsForm: (typeof RdxFormRoot)[];
+declare class 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 };
+export type { RdxFormErrors, RdxFormFieldRegistration, RdxFormRootContext, RdxFormState, RdxFormSubmitEvent };

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

@@ -1,7 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { RdxFormValueControl, BooleanInput } from '@radix-ng/primitives/core';
+import { RdxFormValueControl, BooleanInput, RdxValidationError, NumberInput } from '@radix-ng/primitives/core';
 
-type RdxInputValue = string | number | readonly string[];
+/**
+ * The input value. Native text inputs always produce strings, so the model is
+ * `string` — matching Signal Forms' `FormValueControl<string>` round-trip.
+ */
+type RdxInputValue = string;
 interface RdxInputValueChangeEventDetails {
     event: Event;
     cancel: () => void;
@@ -24,30 +28,44 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
     private defaultValueApplied;
     private readonly filledValue;
     private readonly focusedValue;
+    private readonly dirtyValue;
     /**
      * The input id. Field labels and descriptions use this value for accessible relationships.
      *
      * @group Props
      */
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The name of the input, submitted with the form data and used by Form-level
+     * error matching.
+     *
+     * @group Props
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
     /**
      * The controlled input value.
      *
      * @group Props
      */
-    readonly value: _angular_core.ModelSignal<RdxInputValue | undefined>;
+    readonly value: _angular_core.ModelSignal<string | undefined>;
     /**
      * The initial value when the input is uncontrolled.
      *
      * @group Props
      */
-    readonly defaultValue: _angular_core.InputSignal<RdxInputValue | undefined>;
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
     /**
      * Whether the input is disabled.
      *
      * @group Props
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the input is read-only.
+     *
+     * @group Props
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Whether the input is required.
      *
@@ -60,17 +78,69 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
      * @group Props
      */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the input has been touched. A two-way model: the input sets it on
+     * blur (emitting `touchedChange`, which Signal Forms' `[formField]` listens
+     * to), and a form system can write it back.
+     *
+     * @group Props
+     */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the input value has changed from its initial value. Merged with the
+     * internally tracked state; a form system can own it through this input.
+     *
+     * @group Props
+     */
+    readonly dirty: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Validation errors for the input. A non-empty list marks the input invalid.
+     *
+     * @group Props
+     */
+    readonly errors: _angular_core.InputSignal<readonly RdxValidationError[]>;
+    /**
+     * Minimum number of characters.
+     *
+     * @group Props
+     */
+    readonly minLength: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
+    /**
+     * Maximum number of characters.
+     *
+     * @group Props
+     */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
+    /**
+     * Patterns the value must match. Reflected to the native `pattern` attribute
+     * only when exactly one pattern is provided (the attribute holds a single regex).
+     *
+     * @group Props
+     */
+    readonly pattern: _angular_core.InputSignal<readonly RegExp[]>;
     /**
      * Emits when the input value changes.
      *
      * @group Emits
      */
     readonly onValueChange: _angular_core.OutputEmitterRef<RdxInputValueChangeEvent>;
+    /**
+     * Emits on blur, notifying a form system the input was touched. Stable
+     * Angular 22 Signal Forms listens to this `touch` output; the 21.x
+     * experimental implementation listens to the `touched` model's
+     * `touchedChange` instead — both are emitted, covering either version.
+     *
+     * @group Emits
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly disabledState: _angular_core.Signal<boolean>;
     protected readonly requiredState: _angular_core.Signal<boolean>;
     protected readonly filledState: _angular_core.Signal<boolean>;
     protected readonly focusedState: _angular_core.Signal<boolean>;
+    protected readonly touchedState: _angular_core.Signal<boolean>;
+    protected readonly dirtyState: _angular_core.Signal<boolean>;
+    protected readonly patternAttr: _angular_core.Signal<string | undefined>;
     protected readonly describedBy: _angular_core.Signal<string | undefined>;
     constructor();
     onFocus(): void;
@@ -80,7 +150,7 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
     private writeValue;
     protected readonly dataAttr: (value: boolean) => "" | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxInputDirective, "input[rdxInput]", ["rdxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxInputDirective, "input[rdxInput]", ["rdxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "onValueChange": "onValueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { RdxInputDirective };

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

@@ -7,7 +7,6 @@ import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primi
 import * as _radix_ng_primitives_menu from '@radix-ng/primitives/menu';
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 import * as i1$1 from '@radix-ng/primitives/portal';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 import * as i3 from '@radix-ng/primitives/focus-scope';
 
 type RdxMenuTransitionStatus = 'starting' | 'ending' | undefined;
@@ -230,16 +229,26 @@ declare class RdxMenuSubTrigger {
 }
 
 /**
- * Moves the menu to a different part of the DOM.
- * Applied on ng-template — no host bindings (ng-template is not a real DOM node).
+ * Structural directive that teleports the menu popup into a container (default `document.body`) while
+ * the menu is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * This replaces the consumer-owned `@if (root.open())` mount: it adds both teleporting *and*
+ * exit-animation support. Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxMenuPortal rdxMenuPositioner>` — or as an explicit `<ng-template rdxMenuPortal>`. For a
+ * custom container, or a backdrop alongside the positioner (multi-root), use the explicit form.
  */
 declare class RdxMenuPortal {
-    /**
-     * Optional container to portal the content into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenuPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMenuPortal, "[rdxMenuPortal]", ["rdxMenuPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMenuPortal, "ng-template[rdxMenuPortal]", ["rdxMenuPortal"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxMenuPortal` is a structural directive. The old `<div rdxMenuPortal>` markup
+ * would silently stop portaling — fail loudly instead.
+ */
+declare class RdxMenuPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenuPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMenuPortalMisuseGuard, "[rdxMenuPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -616,9 +625,9 @@ declare class RdxMenuRadioItemIndicator {
 
 declare class RdxMenuModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenuModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxMenuModule, never, [typeof RdxMenuRoot, typeof RdxMenuTrigger, typeof RdxMenuSubTrigger, typeof RdxMenuPortal, typeof RdxMenuPositioner, typeof RdxMenuPopup, typeof RdxMenuViewport, typeof RdxMenuBackdrop, typeof RdxMenuArrow, typeof RdxMenuItem, typeof RdxMenuLinkItem, typeof RdxMenuGroup, typeof RdxMenuGroupLabel, typeof RdxMenuSeparator, typeof RdxMenuCheckboxItem, typeof RdxMenuCheckboxItemIndicator, typeof RdxMenuRadioGroup, typeof RdxMenuRadioItem, typeof RdxMenuRadioItemIndicator], [typeof RdxMenuRoot, typeof RdxMenuTrigger, typeof RdxMenuSubTrigger, typeof RdxMenuPortal, typeof RdxMenuPositioner, typeof RdxMenuPopup, typeof RdxMenuViewport, typeof RdxMenuBackdrop, typeof RdxMenuArrow, typeof RdxMenuItem, typeof RdxMenuLinkItem, typeof RdxMenuGroup, typeof RdxMenuGroupLabel, typeof RdxMenuSeparator, typeof RdxMenuCheckboxItem, typeof RdxMenuCheckboxItemIndicator, typeof RdxMenuRadioGroup, typeof RdxMenuRadioItem, typeof RdxMenuRadioItemIndicator]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxMenuModule, never, [typeof RdxMenuRoot, typeof RdxMenuTrigger, typeof RdxMenuSubTrigger, typeof RdxMenuPortal, typeof RdxMenuPortalMisuseGuard, typeof RdxMenuPositioner, typeof RdxMenuPopup, typeof RdxMenuViewport, typeof RdxMenuBackdrop, typeof RdxMenuArrow, typeof RdxMenuItem, typeof RdxMenuLinkItem, typeof RdxMenuGroup, typeof RdxMenuGroupLabel, typeof RdxMenuSeparator, typeof RdxMenuCheckboxItem, typeof RdxMenuCheckboxItemIndicator, typeof RdxMenuRadioGroup, typeof RdxMenuRadioItem, typeof RdxMenuRadioItemIndicator], [typeof RdxMenuRoot, typeof RdxMenuTrigger, typeof RdxMenuSubTrigger, typeof RdxMenuPortal, typeof RdxMenuPortalMisuseGuard, typeof RdxMenuPositioner, typeof RdxMenuPopup, typeof RdxMenuViewport, typeof RdxMenuBackdrop, typeof RdxMenuArrow, typeof RdxMenuItem, typeof RdxMenuLinkItem, typeof RdxMenuGroup, typeof RdxMenuGroupLabel, typeof RdxMenuSeparator, typeof RdxMenuCheckboxItem, typeof RdxMenuCheckboxItemIndicator, typeof RdxMenuRadioGroup, typeof RdxMenuRadioItem, typeof RdxMenuRadioItemIndicator]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxMenuModule>;
 }
 
-export { RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
+export { RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPortalMisuseGuard, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
 export type { CheckedState, RdxMenuAutoFocus, RdxMenuAutoFocusInput, RdxMenuCheckboxItemContext, RdxMenuOrientation, RdxMenuRadioGroupContext, RdxMenuRadioItemContext, RdxMenuRootContext, RdxMenuTransitionStatus, RdxMenuTriggerInteraction, RdxMenuTriggerInteractionHandler };

package/types/radix-ng-primitives-navigation-menu.d.ts

@@ -1,26 +1,37 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, Signal, ElementRef } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/presence';
+import * as i1 from '@radix-ng/primitives/portal';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { RdxTransitionStatus, BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
 import * as _radix_ng_primitives_navigation_menu from '@radix-ng/primitives/navigation-menu';
 import * as i1$2 from '@radix-ng/primitives/roving-focus';
-import * as i1$3 from '@radix-ng/primitives/portal';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 
 /**
- * Mounts the popup while the menu is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the navigation menu popup into a container (default
+ * `document.body`) while the menu is open, and keeps it mounted until any CSS exit `@keyframes`
+ * finishes.
  *
- * ```html
- * <ng-template rdxNavigationMenuPortalPresence>…</ng-template>
- * ```
+ * Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxNavigationMenuPortal rdxNavigationMenuPositioner>` — or as an explicit
+ * `<ng-template rdxNavigationMenuPortal>`. For a custom container use the explicit form with
+ * `[container]`.
  */
-declare class RdxNavigationMenuPortalPresence {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortalPresence, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortalPresence, "ng-template[rdxNavigationMenuPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+declare class RdxNavigationMenuPortal {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortal, "ng-template[rdxNavigationMenuPortal]", ["rdxNavigationMenuPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxNavigationMenuPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxNavigationMenuPortal>` markup would silently stop portaling — fail
+ * loudly instead.
+ */
+declare class RdxNavigationMenuPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortalMisuseGuard, "[rdxNavigationMenuPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 type NavigationMenuOrientation = 'horizontal' | 'vertical';
@@ -300,19 +311,6 @@ declare class RdxNavigationMenuLink {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuLink, "[rdxNavigationMenuLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
 }
 
-/**
- * Moves the navigation menu popup to a different part of the DOM (by default `document.body`).
- */
-declare class RdxNavigationMenuPortal {
-    protected readonly rootContext: _radix_ng_primitives_navigation_menu.RdxNavigationMenuRootContext;
-    /**
-     * Optional container to portal the popup into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortal, "[rdxNavigationMenuPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$3.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
-}
-
 /**
  * An optional backdrop rendered behind the popup.
  */
@@ -477,12 +475,12 @@ declare class RdxNavigationMenuViewport {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuViewport, "[rdxNavigationMenuViewport]", never, { "forceMount": { "alias": "forceMount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare const navigationMenuImports: (typeof RdxNavigationMenuPortalPresence)[];
+declare const navigationMenuImports: (typeof RdxNavigationMenuPortal)[];
 declare class RdxNavigationMenuModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxNavigationMenuModule, never, [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalPresence, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport], [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalPresence, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxNavigationMenuModule, never, [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalMisuseGuard, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport], [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalMisuseGuard, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxNavigationMenuModule>;
 }
 
-export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalPresence, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
+export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalMisuseGuard, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
 export type { NavigationMenuDirection, NavigationMenuOrientation, RdxNavigationMenuContentEntry, RdxNavigationMenuOpenChange, RdxNavigationMenuOpenChangeReason, RdxNavigationMenuRootContext };