@radix-ng/primitives 1.0.10 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @radix-ng/primitives
 
-> **Headless, signals-first UI primitives for Angular.**
+> **Headless, signals-first UI primitives with first-class Angular Forms support.**
 
 Radix NG is a low-level UI primitive library for Angular with a focus on accessibility,
 customization, and developer experience. The primitives are **headless** — they ship no styles and
@@ -30,18 +30,18 @@ Each primitive is its own secondary entry point — import only what you use:
 ```ts
 import { Component } from '@angular/core';
 import {
+  RdxCollapsiblePanelDirective,
   RdxCollapsibleRootDirective,
-  RdxCollapsibleTriggerDirective,
-  RdxCollapsibleContentDirective
+  RdxCollapsibleTriggerDirective
 } from '@radix-ng/primitives/collapsible';
 
 @Component({
   selector: 'app-demo',
-  imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsibleContentDirective],
+  imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsiblePanelDirective],
   template: `
     <div rdxCollapsibleRoot>
       <button rdxCollapsibleTrigger>Toggle</button>
-      <div rdxCollapsibleContent>Content</div>
+      <div rdxCollapsiblePanel>Content</div>
     </div>
   `
 })
@@ -51,6 +51,27 @@ export class DemoComponent {}
 Style the parts via the `data-*` attributes they expose (e.g. `[data-state="open"]`,
 `[data-disabled]`) with any CSS approach — Tailwind, CSS modules, vanilla CSS.
 
+## Angular forms, one Field contract
+
+The same controls and accessible Field parts work across every Angular form API while Angular owns
+the model and validation:
+
+```html
+<!-- Reactive Forms / ngModel -->
+<input rdxInput formControlName="email" rdxNgControlField />
+
+<!-- Signal Forms -->
+<input rdxInput [formField]="accountForm.email" rdxSignalField />
+```
+
+ControlValueAccessors remain available for Reactive and template-driven forms. The optional
+`@radix-ng/primitives/signal-forms` entry adds Angular Signal Forms without a separate Radix NG form
+model. Signal Forms is stable in Angular 22; Reactive Forms and `ngModel` remain supported on Angular
+21 and 22. Compare the [paired recipes and runtime-verified
+matrix](https://radix-ng.com/docs/?path=/docs/primitives-signal-forms--docs#one-recipe-two-angular-apis),
+and see the [migration guide](https://radix-ng.com/docs/?path=/docs/guides-forms-migration--docs) when
+upgrading from 1.0.10.
+
 ## Documentation
 
 - 📖 [radix-ng.com](https://radix-ng.com) — documentation, examples & API reference

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

@@ -8,7 +8,7 @@ import * as i1$2 from '@radix-ng/primitives/dismissable-layer';
 import { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@radix-ng/primitives/core';
-import { RdxFormUiControlBase, createFloatingRootContext, rdxDevWarning, isItemEqualToValue, itemToStringLabel, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, createFloatingRootContext, useNativeFormControl, serializeNativeFormValue, rdxDevWarning, isItemEqualToValue, itemToStringLabel, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 
@@ -89,6 +89,9 @@ const context = () => {
         dir: root.dir,
         value: root.value,
         inputValue: root.value,
+        name: root.name,
+        form: root.form,
+        inputOwnsFormValue: root.inputOwnsFormValue,
         open: root.open,
         present: root.present,
         multiple: root.alwaysFalse,
@@ -100,6 +103,11 @@ const context = () => {
         modal: root.modal,
         virtualized: root.virtualized,
         grid: root.grid,
+        invalidState: root.invalidState,
+        pendingState: root.formUi.pendingState,
+        validState: root.formUi.validState,
+        touchedState: root.touchedState,
+        dirtyState: root.dirtyState,
         filteredItems: engine.filteredItems,
         highlightedItem: engine.highlightedItem,
         highlightedIndex: engine.highlightedIndex,
@@ -142,9 +150,6 @@ const context = () => {
         setInputValue: (value) => root.setQuery(value),
         openAndHighlight: (edge, reason, event) => root.openAndHighlight(edge, reason, event),
         navigateByKeyboard: (direction, event) => root.navigateByKeyboard(direction, event),
-        invalidState: root.invalidState,
-        touchedState: root.touchedState,
-        dirtyState: root.dirtyState,
         select: (item, event) => root.handleSelect(item, event),
         selectIndex: (index, event) => root.selectIndex(index, event),
         selectHighlighted: (event) => root.selectHighlighted(event),
@@ -264,6 +269,12 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
         this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
         /** Whether a value is required (for forms). */
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Name used when serializing this composite control into native `FormData`. */
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Id of an external form that owns this control. */
+        this.form = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /** Whether keyboard navigation wraps at the list boundaries. */
         this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
@@ -304,6 +315,9 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
          */
         this.filter = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /** Locale for the default `contains` filter's string comparison. Defaults to the runtime locale. */
+        this.locale = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
         /** Maximum number of matching items to show. `-1` (default) means no limit. */
         this.limit = input(-1, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** The full set of item values for {@link virtualized} mode. */
@@ -328,16 +342,42 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
         /** Constant signals exposed to the combobox context (autocomplete is always single-value). */
         this.alwaysFalse = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alwaysFalse" }] : /* istanbul ignore next */ []));
+        this.inputOwnsFormValue = computed(() => this.engine.inputLayout() !== 'inside', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputOwnsFormValue" }] : /* istanbul ignore next */ []));
         this.noneMode = signal('none', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "noneMode" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.nativeFormControl = useNativeFormControl({
+            name: this.name,
+            form: this.form,
+            disabled: this.disabledState,
+            value: this.value,
+            serialize: serializeNativeFormValue,
+            hasNativeControl: this.inputOwnsFormValue,
+            syncNativeControl: () => {
+                const input = this.engine.inputElement();
+                if (input && this.inputOwnsFormValue()) {
+                    input.value = this.value();
+                }
+            },
+            defaultValue: () => this.defaultValue() ?? this.value(),
+            onReset: (value) => {
+                this.writeValue(value);
+                if (!this.resetNgControl(value)) {
+                    this.onChange?.(value);
+                }
+                this.formUi.resetInteractionState?.();
+            }
+        });
         this.requiredState = computed(() => this.required(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.invalidState = this.formUi.invalidState;
+        this.pendingState = this.formUi.pendingState;
+        this.validState = this.formUi.validState;
         /** @ignore */
         this.touchedState = this.formUi.touchedState;
         /** @ignore */
@@ -375,6 +415,7 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
             virtualized: this.virtualized,
             items: this.items,
             filter: this.filter,
+            locale: this.locale,
             limit: this.limit,
             grid: this.grid,
             rowOf: (element) => element.closest('[rdxAutocompleteRow]'),
@@ -538,7 +579,7 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
     }
     maybeSubmit() {
         if (this.submitOnItemClick()) {
-            this.engine.inputElement()?.form?.requestSubmit?.();
+            this.nativeFormControl.requestSubmit();
         }
     }
     selectHighlighted(event = new Event('autocomplete.item-press')) {
@@ -670,7 +711,7 @@ class RdxAutocompleteRoot extends RdxFormUiControlBase {
         this.cvaDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteRoot, isStandalone: true, selector: "[rdxAutocompleteRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, keepHighlight: { classPropertyName: "keepHighlight", publicName: "keepHighlight", isSignal: true, isRequired: false, transformFunction: null }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteRoot, isStandalone: true, selector: "[rdxAutocompleteRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, keepHighlight: { classPropertyName: "keepHighlight", publicName: "keepHighlight", isSignal: true, isRequired: false, transformFunction: null }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
             provideComboboxRootContext(context),
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true },
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
@@ -695,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.data-disabled]': 'disabledState() ? "" : undefined'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], keepHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepHighlight", required: false }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], keepHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepHighlight", required: false }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
 /**
  * Clears the input value. Hidden when there is nothing to clear.
@@ -905,18 +946,21 @@ class RdxAutocompleteInput {
         // `aria-autocomplete` tokens. Must reflect the static mechanism, not the transient inline preview.
         this.ariaAutocomplete = computed(() => this.root.mode(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || this.root.invalidState() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         /**
          * Tri-state *displayed* validity: the enclosing Field's gated `validState` when inside a `rdxFieldRoot`
          * (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), else the input's
          * own binary invalidity.
          */
-        this.displayValid = computed(() => this.fieldRootContext
-            ? this.fieldRootContext.validState()
-            : this.invalid() || this.root.invalidState()
-                ? false
-                : true, /* @ts-ignore */
+        this.displayValid = computed(() => {
+            if (this.fieldRootContext) {
+                return this.fieldRootContext.validState();
+            }
+            const rootValid = this.root.validState();
+            if (rootValid === null) {
+                return null;
+            }
+            return this.invalid() ? false : rootValid;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.root.disabledState() || Boolean(this.fieldRootContext?.disabledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
@@ -934,10 +978,7 @@ class RdxAutocompleteInput {
             if (!this.fieldRootContext) {
                 return undefined;
             }
-            const ids = [
-                ...this.fieldRootContext.descriptionIds(),
-                ...(this.fieldRootContext.invalidState() ? this.fieldRootContext.errorIds() : [])
-            ];
+            const ids = [...this.fieldRootContext.descriptionIds(), ...this.fieldRootContext.errorIds()];
             return ids.length ? ids.join(' ') : undefined;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
@@ -980,11 +1021,20 @@ class RdxAutocompleteInput {
         this.commitInput(event.target.value, event);
     }
     commitInput(value, event) {
+        // The edit itself is authoritative. Mobile keyboards, context-menu cut/paste, drag edits and
+        // IME commits may have no useful keydown, so carrying suppression from the previous key makes
+        // inline completion stale in either direction.
+        const suppressInline = shouldSuppressInlineCompletion(event, value, this.root.value());
         // Base UI opens on input only for a non-empty trimmed value — whitespace alone won't open it.
         if (!this.root.open() && value.trim() !== '') {
             this.root.setOpen(true, 'input-change', event);
         }
         this.root.setQuery(value);
+        // `onValueChange` is cancelable. Only attach this edit's suppression state if the requested
+        // value actually committed; a vetoed edit must leave the previous preview semantics intact.
+        if (this.root.value() === value) {
+            this.root.setSuppressInline(suppressInline);
+        }
     }
     onClick(event) {
         if (this.root.openOnInputClick()) {
@@ -1004,8 +1054,6 @@ class RdxAutocompleteInput {
         if (event.isComposing || this.composing) {
             return;
         }
-        // Backspace / Delete must never re-add an inline completion for the resulting edit.
-        this.root.setSuppressInline(event.key === 'Backspace' || event.key === 'Delete');
         if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
             return;
         }
@@ -1100,7 +1148,7 @@ class RdxAutocompleteInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteInput, isStandalone: true, selector: "input[rdxAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "attr.aria-haspopup": "root.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "root.open()", "attr.aria-controls": "root.listId", "attr.aria-labelledby": "root.labelId()", "attr.aria-activedescendant": "root.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "displayValid() === false ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "root.readOnly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "root.displayValue()", "attr.data-popup-open": "dataAttr(root.open())", "attr.data-list-empty": "dataAttr(root.visibleCount() === 0)", "attr.data-invalid": "dataAttr(displayValid() === false)", "attr.data-valid": "dataAttr(displayValid() === true)", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-touched": "dataAttr(touchedState())", "attr.data-dirty": "dataAttr(dirtyState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i1$2.RdxFloatingInsideElement }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteInput, isStandalone: true, selector: "input[rdxAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "attr.aria-haspopup": "root.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "root.open()", "attr.aria-controls": "root.listId", "attr.aria-labelledby": "root.labelId()", "attr.aria-activedescendant": "root.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "displayValid() === false ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "root.readOnly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "attr.name": "root.inputOwnsFormValue() ? root.name() : undefined", "attr.form": "root.form()", "value": "root.displayValue()", "attr.data-popup-open": "dataAttr(root.open())", "attr.data-list-empty": "dataAttr(root.visibleCount() === 0)", "attr.data-invalid": "dataAttr(displayValid() === false)", "attr.data-valid": "dataAttr(displayValid() === true)", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-touched": "dataAttr(touchedState())", "attr.data-dirty": "dataAttr(dirtyState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i1$2.RdxFloatingInsideElement }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteInput, decorators: [{
             type: Directive,
@@ -1125,6 +1173,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.disabled]': 'disabledState() ? "" : undefined',
                         '[attr.readonly]': 'root.readOnly() ? "" : undefined',
                         '[attr.required]': 'requiredState() ? "" : undefined',
+                        '[attr.name]': 'root.inputOwnsFormValue() ? root.name() : undefined',
+                        '[attr.form]': 'root.form()',
                         '[value]': 'root.displayValue()',
                         '[attr.data-popup-open]': 'dataAttr(root.open())',
                         '[attr.data-list-empty]': 'dataAttr(root.visibleCount() === 0)',
@@ -1146,6 +1196,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+/** Whether this concrete edit should keep inline completion hidden for its resulting value. */
+function shouldSuppressInlineCompletion(event, nextValue, previousValue) {
+    // A committed composition inserts text even though CompositionEvent has no `inputType`.
+    if (event.type === 'compositionend') {
+        return false;
+    }
+    const inputType = event.inputType;
+    if (inputType?.startsWith('delete')) {
+        return true;
+    }
+    if (inputType?.startsWith('insert')) {
+        return false;
+    }
+    // Synthetic/programmatic input and history edits may omit an inputType. Length is the safest
+    // fallback: shrinking must not immediately restore the suffix; equal/growing replacements may.
+    return nextValue.length < previousValue.length;
+}
 
 const attr = (value) => (value ? '' : undefined);
 /**