@radix-ng/primitives 1.0.10 → 1.1.1

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, signal, computed, untracked, effect, inject, booleanAttribute, Injector, ElementRef, model, input, numberAttribute, output, isDevMode, DestroyRef, ChangeDetectionStrategy, Component, afterNextRender, afterRenderEffect, NgModule } from '@angular/core';
+import { Directive, computed, signal, untracked, effect, inject, booleanAttribute, Injector, ElementRef, model, input, numberAttribute, output, isDevMode, DestroyRef, ChangeDetectionStrategy, Component, afterNextRender, afterRenderEffect, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopperAnchor, RdxPopperArrow, RdxPopper, RdxPopperContentWrapper, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, DROPDOWN_COLLISION_AVOIDANCE, injectPopperContentWrapperContext, RdxPopperContent } from '@radix-ng/primitives/popper';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@radix-ng/primitives/core';
-import { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, RdxFormUiControlBase, createFloatingRootContext, isItemEqualToValue, isNullish, createCancelableChangeEventDetails, itemToStringLabel, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
+import { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, RdxFormUiControlBase, createFloatingRootContext, useNativeFormControl, serializeNativeFormValue, isItemEqualToValue, isNullish, createCancelableChangeEventDetails, itemToStringLabel, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
 import { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
@@ -66,7 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 function useComboboxEngine(config) {
     const { injector } = config;
-    const defaultFilter = useFilter();
+    // Locale-aware default filter. A `computed` so changing `locale` rebuilds the collator and
+    // re-filters the list — mirrors Base UI, where `useFilter({ locale })` re-memoizes on change.
+    const defaultFilter = computed(() => useFilter({ locale: config.locale() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultFilter" }] : /* istanbul ignore next */ []));
     const listId = injectId(config.listIdPrefix);
     const labelId = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
@@ -95,34 +98,58 @@ function useComboboxEngine(config) {
     // Tracks whether the last interaction was the keyboard, so the highlight doesn't jump to an item
     // the cursor happens to rest on when arrow-key navigation scrolls the list under a still pointer.
     let keyboardActive = false;
-    const _items = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    // Keep registrations in a stable map. Copying the growing array on every item mount/unmount makes
+    // registering N options O(n²) before filtering or DOM-order sorting even begins. The numeric tick is
+    // only the reactive invalidation channel; Angular batches the registrations from one render, so
+    // `orderedItems` materializes and sorts the final collection once for that batch. This is the same
+    // stable-map pattern used by Base UI and our CompositeList.
+    const itemRegistry = new Map();
+    const itemRegistryTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemRegistryTick" }] : /* istanbul ignore next */ []));
     const orderedItems = computed(() => {
-        const items = [..._items()];
-        return items.sort((a, b) => domOrder(a.element, b.element));
+        itemRegistryTick();
+        return [...itemRegistry.values()]
+            .filter((item) => item.element.isConnected)
+            .sort((a, b) => domOrder(a.element, b.element));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orderedItems" }] : /* istanbul ignore next */ []));
-    const matchesFilter = (item) => {
+    const visibleItems = computed(() => {
+        const items = orderedItems();
+        const limit = config.limit();
+        if (limit === 0) {
+            return [];
+        }
+        // Read root signals once per query, not once per item. The early paths also avoid
+        // allocating/filtering when every registered item is known to be visible.
         if (!config.filteringEnabled()) {
-            return true;
+            return limit >= 0 ? items.slice(0, limit) : items;
         }
         const filter = config.filter();
         if (filter === null) {
-            return true;
+            return limit >= 0 ? items.slice(0, limit) : items;
         }
         const query = config.query();
-        // Custom filter: Base UI shape `(value, query, itemToString)`. Default: locale-aware contains
-        // on the item's own text (the element content), no value→text round-trip.
-        return filter
-            ? filter(item.value(), query, config.itemToString)
-            : defaultFilter.contains(item.textValue(), query);
-    };
-    const visibleItems = computed(() => {
-        const matching = orderedItems().filter((item) => matchesFilter(item));
-        const limit = config.limit();
-        return limit >= 0 ? matching.slice(0, limit) : matching;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        if (!filter && query.length === 0) {
+            return limit >= 0 ? items.slice(0, limit) : items;
+        }
+        const matching = [];
+        const contains = filter ? null : defaultFilter().contains;
+        for (const item of items) {
+            // Custom filter: Base UI shape `(value, query, itemToString)`. Default: locale-aware
+            // contains on the item's own text (the element content), no value→text round-trip.
+            const matches = filter
+                ? filter(item.value(), query, config.itemToString)
+                : contains(item.textValue(), query);
+            if (!matches) {
+                continue;
+            }
+            matching.push(item);
+            if (limit >= 0 && matching.length >= limit) {
+                break;
+            }
+        }
+        return matching;
+    }, { ...(ngDevMode ? { debugName: "visibleItems" } : /* istanbul ignore next */ {}), equal: sameItemOrder });
     const visibleSet = computed(() => new Set(visibleItems()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleSet" }] : /* istanbul ignore next */ []));
     const isVisible = (item) => visibleSet().has(item);
@@ -147,7 +174,7 @@ function useComboboxEngine(config) {
         // Virtualized: no DOM to read text from, so resolve each value through `itemToString`.
         return cap(data.filter((value) => filter
             ? filter(value, query, config.itemToString)
-            : defaultFilter.contains(config.itemToString(value), query)));
+            : defaultFilter().contains(config.itemToString(value), query)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     const visibleCount = computed(() => (config.virtualized() ? filteredItems().length : visibleItems().length), /* @ts-ignore */
@@ -221,7 +248,13 @@ function useComboboxEngine(config) {
     };
     const recomputeInlinePreview = (label, query, reason) => {
         // Pointer hover must not rewrite the input (matches Base UI); only typing / keyboard nav complete it.
-        if (!config.inlineMode() || suppressInline || !label || reason === 'pointer') {
+        if (!config.inlineMode() || !label || reason === 'pointer') {
+            inlinePreview.set(null);
+            return;
+        }
+        // Suppression belongs to the current edit only. Explicit keyboard navigation starts a new
+        // interaction and must still mirror the navigated label after a delete/cut edit.
+        if (suppressInline && reason !== 'keyboard') {
             inlinePreview.set(null);
             return;
         }
@@ -313,11 +346,14 @@ function useComboboxEngine(config) {
             pendingHighlightEdge.set(null);
         });
     }, { injector });
-    // Inline completion: mirror the active item's label into the input. Tracks the DOM-ref highlight,
-    // the virtualized index, the query, the reason, and `inlineMode` — so virtualized navigation and a
-    // `both → list` mode switch both recompute (and clear) the preview. No-op (null) when off (combobox).
+    // Inline completion: mirror the active item's label into the input. When inline mode is off, stop
+    // before reading query/highlight state so Combobox and list-mode Autocomplete do not subscribe this
+    // effect to the typing hot path. A `both → list` switch still clears the previous preview.
     effect(() => {
-        config.inlineMode();
+        if (!config.inlineMode()) {
+            untracked(() => inlinePreview.set(null));
+            return;
+        }
         highlightedItem();
         highlightedIndex();
         const query = config.query();
@@ -456,10 +492,19 @@ function useComboboxEngine(config) {
         filteredItems,
         isVisible,
         registerItem(item) {
-            _items.update((items) => [...items, item]);
+            if (itemRegistry.get(item.element) === item) {
+                return;
+            }
+            itemRegistry.set(item.element, item);
+            itemRegistryTick.update((tick) => tick + 1);
         },
         unregisterItem(item) {
-            _items.update((items) => items.filter((i) => i !== item));
+            // A stale cleanup must not delete a newer registration for the same host element.
+            if (itemRegistry.get(item.element) !== item) {
+                return;
+            }
+            itemRegistry.delete(item.element);
+            itemRegistryTick.update((tick) => tick + 1);
         },
         highlight,
         highlightedItem,
@@ -600,6 +645,21 @@ function domOrder(a, b) {
     }
     return 0;
 }
+/** Referential item-sequence equality used to keep unchanged filtering results stable across queries. */
+function sameItemOrder(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (previous.length !== next.length) {
+        return false;
+    }
+    for (let index = 0; index < previous.length; index++) {
+        if (previous[index] !== next[index]) {
+            return false;
+        }
+    }
+    return true;
+}
 
 // The engine stays private to the root (it owns mutable internals); the context factory — a free
 // function, so it can't reach a `private` field — reads it through this registry instead.
@@ -614,6 +674,9 @@ const context = () => {
         dir: root.dir,
         value: root.value,
         inputValue: root.inputValue,
+        name: root.name,
+        form: root.form,
+        inputOwnsFormValue: root.inputOwnsFormValue,
         open: root.open,
         present: root.present,
         multiple: root.multiple,
@@ -622,6 +685,8 @@ const context = () => {
         readonly: root.readOnly,
         requiredState: root.requiredState,
         invalidState: root.invalidState,
+        pendingState: root.formUi.pendingState,
+        validState: root.formUi.validState,
         touchedState: root.touchedState,
         dirtyState: root.dirtyState,
         openOnInputClick: root.openOnInputClick,
@@ -763,6 +828,9 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
         /** Whether the combobox is in multiple-selection mode. */
         this.multiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** Whether the visible text input owns native serialization in filter-only mode. */
+        this.inputOwnsFormValue = computed(() => this.mode() === 'none' && this.engine.inputLayout() !== 'inside', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputOwnsFormValue" }] : /* istanbul ignore next */ []));
         /** In `'none'` mode, whether pressing an item fills the input with its label. */
         this.fillInputOnItemPress = input(true, { ...(ngDevMode ? { debugName: "fillInputOnItemPress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Text direction. */
@@ -774,6 +842,12 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
         this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), 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 the committed selection 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 });
         /**
@@ -821,6 +895,9 @@ class RdxComboboxRoot 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 });
         /**
@@ -849,6 +926,9 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
         /** Converts a value to its display label. Defaults to the matching item's text. */
         this.itemToStringLabel = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+        /** Converts an item value to the string submitted by a native form. */
+        this.itemToStringValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "itemToStringValue" }] : /* istanbul ignore next */ []));
         /** Emits before the selection changes; call `eventDetails.cancel()` to veto it. */
         this.onValueChange = output();
         /** Emits before the input text changes; call `eventDetails.cancel()` to veto it. */
@@ -866,10 +946,52 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.nativeFormValue = computed(() => this.mode() === 'none' ? this.inputValue() : this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeFormValue" }] : /* istanbul ignore next */ []));
+        this.nativeFormControl = useNativeFormControl({
+            name: this.name,
+            form: this.form,
+            disabled: this.disabledState,
+            value: this.nativeFormValue,
+            serialize: (value) => {
+                const itemToStringValue = this.itemToStringValue();
+                return itemToStringValue
+                    ? serializeNativeFormValue(value, (entry) => itemToStringValue(entry))
+                    : serializeNativeFormValue(value);
+            },
+            hasNativeControl: this.inputOwnsFormValue,
+            syncNativeControl: () => {
+                const input = this.engine.inputElement();
+                if (input && this.inputOwnsFormValue()) {
+                    input.value = this.inputValue();
+                }
+            },
+            defaultValue: () => {
+                if (this.mode() === 'none') {
+                    return this.inputValue();
+                }
+                const defaultValue = this.defaultValue();
+                return defaultValue === undefined ? this.value() : defaultValue;
+            },
+            onReset: (value) => {
+                if (this.mode() === 'none') {
+                    this.setLabel(typeof value === 'string' ? value : '');
+                    this.formUi.resetInteractionState?.();
+                    return;
+                }
+                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 */
@@ -907,6 +1029,7 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
             virtualized: this.virtualized,
             items: this.items,
             filter: this.filter,
+            locale: this.locale,
             limit: this.limit,
             grid: this.grid,
             rowOf: (element) => element.closest('[rdxComboboxRow]'),
@@ -1146,7 +1269,7 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
     /** Requests submit of the closest form when `submitOnItemClick` is enabled. */
     maybeSubmit() {
         if (this.submitOnItemClick()) {
-            this.engine.inputElement()?.form?.requestSubmit?.();
+            this.nativeFormControl.requestSubmit();
         }
     }
     selectHighlighted(event = new Event('combobox.item-press')) {
@@ -1252,7 +1375,13 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
     }
     // ControlValueAccessor
     writeValue(value) {
-        untracked(() => this.value.set(value));
+        untracked(() => {
+            this.value.set(value);
+            // A programmatic form write (including reset) must keep the visible text aligned with the
+            // committed selection. User commits already set the exact item text and do not echo through
+            // this CVA callback; this path handles form-owned writes only.
+            this.revertInputValue();
+        });
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1264,7 +1393,7 @@ class RdxComboboxRoot extends RdxFormUiControlBase {
         this.cvaDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxRoot, isStandalone: true, selector: "[rdxComboboxRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", 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 }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, fillInputOnItemPress: { classPropertyName: "fillInputOnItemPress", publicName: "fillInputOnItemPress", 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 }, 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 }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", onValueChange: "onValueChange", onInputValueChange: "onInputValueChange", 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: RdxComboboxRoot, isStandalone: true, selector: "[rdxComboboxRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", 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 }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, fillInputOnItemPress: { classPropertyName: "fillInputOnItemPress", publicName: "fillInputOnItemPress", 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 }, 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 }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", onValueChange: "onValueChange", onInputValueChange: "onInputValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
             provideComboboxRootContext(context),
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true },
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
@@ -1289,7 +1418,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 }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], 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 }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], fillInputOnItemPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillInputOnItemPress", 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 }] }], 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 }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onInputValueChange: [{ type: i0.Output, args: ["onInputValueChange"] }], 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 }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], 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 }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], fillInputOnItemPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillInputOnItemPress", 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 }] }], 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 }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onInputValueChange: [{ type: i0.Output, args: ["onInputValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
@@ -1620,18 +1749,38 @@ class RdxComboboxGroup {
         this.rootContext = injectComboboxRootContext();
         this.labelId = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
-        this.items = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.hasItems = computed(() => this.items().length > 0, /* @ts-ignore */
+        // Group membership is unordered, so a stable Set avoids copying a growing array for every child
+        // registration. The tick keeps the two derived host states reactive.
+        this.items = new Set();
+        this.itemsTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemsTick" }] : /* istanbul ignore next */ []));
+        this.hasItems = computed(() => {
+            this.itemsTick();
+            return this.items.size > 0;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
-        this.hasVisibleItems = computed(() => this.items().some((item) => this.rootContext.isVisible(item)), /* @ts-ignore */
+        this.hasVisibleItems = computed(() => {
+            this.itemsTick();
+            for (const item of this.items) {
+                if (this.rootContext.isVisible(item)) {
+                    return true;
+                }
+            }
+            return false;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasVisibleItems" }] : /* istanbul ignore next */ []));
     }
     registerItem(item) {
-        this.items.update((items) => [...items, item]);
+        if (this.items.has(item)) {
+            return;
+        }
+        this.items.add(item);
+        this.itemsTick.update((tick) => tick + 1);
     }
     unregisterItem(item) {
-        this.items.update((items) => items.filter((i) => i !== item));
+        if (this.items.delete(item)) {
+            this.itemsTick.update((tick) => tick + 1);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxGroup, isStandalone: true, selector: "[rdxComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "hidden": "hasItems() && !hasVisibleItems()" } }, providers: [provideComboboxGroupContext(groupContext)], exportAs: ["rdxComboboxGroup"], ngImport: i0 }); }
@@ -1769,18 +1918,21 @@ class RdxComboboxInput {
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** Marks the input as invalid independently of any Field state. */
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.invalidState = computed(() => this.invalid() || this.rootContext.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.rootContext.invalidState()
-                ? false
-                : true, /* @ts-ignore */
+        this.displayValid = computed(() => {
+            if (this.fieldRootContext) {
+                return this.fieldRootContext.validState();
+            }
+            const rootValid = this.rootContext.validState();
+            if (rootValid === null) {
+                return null;
+            }
+            return this.invalid() ? false : rootValid;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.rootContext.disabledState() || Boolean(this.fieldRootContext?.disabledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
@@ -1806,10 +1958,7 @@ class RdxComboboxInput {
             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 */ []));
@@ -1986,7 +2135,7 @@ class RdxComboboxInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxInput, isStandalone: true, selector: "input[rdxComboboxInput]", 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", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.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": "rootContext.readonly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "rootContext.inputValue()", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-list-empty": "dataAttr(rootContext.visibleCount() === 0)", "attr.data-placeholder": "dataAttr(isEmptyValue())", "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: ["rdxComboboxInput"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxFloatingInsideElement }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxInput, isStandalone: true, selector: "input[rdxComboboxInput]", 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", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.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": "rootContext.readonly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "attr.name": "rootContext.inputOwnsFormValue() ? rootContext.name() : undefined", "attr.form": "rootContext.form()", "value": "rootContext.inputValue()", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-list-empty": "dataAttr(rootContext.visibleCount() === 0)", "attr.data-placeholder": "dataAttr(isEmptyValue())", "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: ["rdxComboboxInput"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxFloatingInsideElement }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, decorators: [{
             type: Directive,
@@ -2011,6 +2160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.disabled]': 'disabledState() ? "" : undefined',
                         '[attr.readonly]': 'rootContext.readonly() ? "" : undefined',
                         '[attr.required]': 'requiredState() ? "" : undefined',
+                        '[attr.name]': 'rootContext.inputOwnsFormValue() ? rootContext.name() : undefined',
+                        '[attr.form]': 'rootContext.form()',
                         '[value]': 'rootContext.inputValue()',
                         '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
                         '[attr.data-list-empty]': 'dataAttr(rootContext.visibleCount() === 0)',