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

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

@@ -1,13 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, booleanAttribute, Injector, model, input, computed, numberAttribute, output, signal, effect, untracked, isDevMode, ElementRef, afterNextRender, afterRenderEffect, DestroyRef, NgModule } from '@angular/core';
+import { Directive, inject, booleanAttribute, Injector, ElementRef, model, input, computed, numberAttribute, output, signal, effect, untracked, isDevMode, ChangeDetectionStrategy, Component, afterNextRender, afterRenderEffect, DestroyRef, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/combobox';
-import { RdxComboboxAnchor, RdxComboboxBackdrop, provideComboboxRootContext, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, injectComboboxRootContext, injectComboboxGroupContext, provideComboboxItemContext, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxPortal, RdxComboboxStatus, RdxComboboxTrigger } from '@radix-ng/primitives/combobox';
+import { RdxComboboxAnchor, RdxComboboxBackdrop, useComboboxEngine, provideComboboxRootContext, injectComboboxRootContext, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, injectComboboxGroupContext, provideComboboxItemContext, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxPortal, RdxComboboxSeparator, RdxComboboxStatus, RdxComboboxTrigger } from '@radix-ng/primitives/combobox';
 import * as i1$1 from '@radix-ng/primitives/popper';
-import { RdxPopperArrow, RdxPopper, RdxPopperAnchor, injectPopperContentWrapperContext, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import * as i2 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayerBranch, RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import { RdxPopperArrow, RdxPopper, RdxPopperContentWrapper, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor, injectPopperContentWrapperContext, RdxPopperContent } from '@radix-ng/primitives/popper';
+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 { useTransitionStatus, injectId, useFilter, useListHighlight, isItemEqualToValue, itemToStringLabel, useScrollLock } from '@radix-ng/primitives/core';
+import * as i2 from '@radix-ng/primitives/core';
+import { 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 { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 
 /**
@@ -68,23 +70,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+// The engine stays private to the root; the context factory (a free function) reads it through this registry.
+const engineRegistry = new WeakMap();
 /**
  * Builds the {@link RdxComboboxRootContext} the autocomplete parts consume. Autocomplete reuses the
- * combobox parts (List, Popup, Positioner, Item, …) verbatim, so the root exposes the exact combobox
- * context shape — configured for a single-value, `selectionMode: 'none'` control whose value is the
- * input string. Autocomplete-specific state (mode, inline completion, grid) is read by the local
- * parts via direct injection of {@link RdxAutocompleteRoot}.
+ * combobox parts (List, Popup, Positioner, Item, …) verbatim, so it provides the exact combobox context
+ * shape — configured for a single-value, `selectionMode: 'none'` control whose value **is** the input
+ * string. The shared engine supplies registry / filtering / highlight / inline; the root supplies the
+ * string-value semantics. Autocomplete-specific parts (mode, inline, grid) inject {@link RdxAutocompleteRoot}.
  */
 const context = () => {
     const root = inject(RdxAutocompleteRoot);
+    const engine = engineRegistry.get(root);
     return {
-        listId: root.listId,
-        labelId: root.labelId,
-        setLabelId: (id) => root.labelId.set(id),
+        listId: engine.listId,
+        labelId: engine.labelId,
+        setLabelId: (id) => engine.setLabelId(id),
         dir: root.dir,
         value: root.value,
         inputValue: root.value,
         open: root.open,
+        present: root.present,
         multiple: root.alwaysFalse,
         selectionMode: root.noneMode,
         disabledState: root.disabledState,
@@ -93,42 +99,52 @@ const context = () => {
         openOnInputClick: root.openOnInputClick,
         modal: root.modal,
         virtualized: root.virtualized,
-        filteredItems: root.filteredItems,
-        highlightedItem: root.highlightedItem,
-        highlightedIndex: root.highlightedIndex.asReadonly(),
-        activeId: root.activeId,
-        itemId: (index) => root.itemId(index),
-        isKeyboardActive: () => root.isKeyboardActive(),
-        setKeyboardActive: (value) => root.setKeyboardActive(value),
-        transitionStatus: root.transitionStatus,
-        registerTransitionElement: root.registerTransitionElement,
-        visibleCount: root.visibleCount,
-        isVisible: (item) => root.isVisible(item),
+        grid: root.grid,
+        filteredItems: engine.filteredItems,
+        highlightedItem: engine.highlightedItem,
+        highlightedIndex: engine.highlightedIndex,
+        activeId: engine.activeId,
+        itemId: (index) => engine.itemId(index),
+        isKeyboardActive: () => engine.isKeyboardActive(),
+        setKeyboardActive: (value) => engine.setKeyboardActive(value),
+        transitionStatus: engine.transitionStatus,
+        registerTransitionElement: engine.registerTransitionElement,
+        visibleCount: engine.visibleCount,
+        isVisible: (item) => engine.isVisible(item),
         isSelected: (value) => root.isSelectedValue(value),
-        registerItem: (item) => root.registerItem(item),
-        unregisterItem: (item) => root.unregisterItem(item),
-        highlight: root.highlight,
-        highlightNext: () => root.moveDown(),
-        highlightPrevious: () => root.moveUp(),
-        highlightFirst: () => root.highlightFirst('keyboard'),
-        highlightLast: () => root.highlightLast('keyboard'),
-        highlightIndex: (index, reason) => root.highlightIndex(index, reason),
-        setHighlight: (item, reason) => root.setHighlight(item, reason),
-        clearHighlight: () => root.clearHighlightState(),
+        registerItem: (item) => engine.registerItem(item),
+        unregisterItem: (item) => engine.unregisterItem(item),
+        highlight: engine.highlight,
+        highlightNext: () => engine.highlightNext('keyboard'),
+        highlightPrevious: () => engine.highlightPrevious('keyboard'),
+        highlightNextColumn: () => engine.highlightNextColumn('keyboard'),
+        highlightPreviousColumn: () => engine.highlightPreviousColumn('keyboard'),
+        highlightFirst: () => engine.highlightFirst('keyboard'),
+        highlightLast: () => engine.highlightLast('keyboard'),
+        highlightIndex: (index, reason) => engine.highlightIndex(index, reason),
+        setHighlight: (item, reason) => engine.setHighlight(item, reason),
+        clearHighlight: () => engine.clearHighlightState(),
         highlightItemOnHover: root.highlightItemOnHover,
         keepHighlight: root.keepHighlight,
-        inputElement: root.inputElement.asReadonly(),
-        setInputElement: (el) => root.inputElement.set(el),
-        registerTrigger: (el) => (root.triggerElement = el),
-        focusInput: () => root.focusInput(),
-        openPopup: () => root.setOpen(true),
-        openForBrowse: () => root.openForBrowse(),
-        closePopup: (revert = true) => root.closePopup(revert),
+        inputElement: engine.inputElement,
+        setInputElement: (el) => engine.setInputElement(el),
+        inputLayout: engine.inputLayout,
+        setInputLayout: (layout) => engine.setInputLayout(layout),
+        openedByTouch: engine.openedByTouch,
+        setOpenedByTouch: (value) => engine.setOpenedByTouch(value),
+        popupMounted: engine.popupMounted,
+        setPopupMounted: (value) => engine.setPopupMounted(value),
+        registerTrigger: (el) => engine.setTrigger(el),
+        focusInput: () => engine.focusInput(),
+        openPopup: (reason, event) => root.setOpen(true, reason, event),
+        openForBrowse: (reason, event) => root.openForBrowse(reason, event),
+        closePopup: (revert = true, reason, event) => root.closePopup(revert, reason, event),
         setInputValue: (value) => root.setQuery(value),
-        openAndHighlight: (edge) => root.openAndHighlight(edge),
-        select: (item) => root.handleSelect(item),
-        selectIndex: (index) => root.selectIndex(index),
-        selectHighlighted: () => root.selectHighlighted(),
+        openAndHighlight: (edge, reason, event) => root.openAndHighlight(edge, reason, event),
+        navigateByKeyboard: (direction, event) => root.navigateByKeyboard(direction, event),
+        select: (item, event) => root.handleSelect(item, event),
+        selectIndex: (index, event) => root.selectIndex(index, event),
+        selectHighlighted: (event) => root.selectHighlighted(event),
         clearSelection: () => root.clearValue(),
         removeValue: () => undefined,
         removeLastValue: () => undefined,
@@ -136,31 +152,91 @@ const context = () => {
         focusLastChip: () => false,
         labelFor: (value) => root.labelFor(value),
         markAsTouched: () => root.markAsTouched()
+        // `value`/`inputValue` are the input string here, not `ComboboxValue`.
     };
 };
 /**
  * `autoHighlight` transform: pass `'always'` through verbatim, coerce everything else as a boolean
- * attribute (so the bare `autoHighlight` attribute reads `true`).
- *
- * Kept as a named module-level function rather than an inline `transform` arrow: compodoc 1.2.1
- * (the metadata source for the API contract and Storybook ArgTypes) hangs parsing an inline arrow
- * combined with explicit generic union type arguments on `input()`. A plain function reference sidesteps it.
+ * attribute (so the bare `autoHighlight` attribute reads `true`). Kept as a named function (compodoc
+ * hangs on an inline arrow combined with union-generic `input()`).
  */
 function coerceAutoHighlight(value) {
     return value === 'always' ? 'always' : booleanAttribute(value);
 }
 /**
- * Root of an Autocomplete — a text input with a filtered list of suggestions. Built on the combobox
- * engine with `selectionMode: 'none'`, so its value **is** the input string: typing, selecting an
- * item, or clearing all change a single string value. Owns input text, open state, filtering, inline
- * completion, and highlight-model navigation, and provides them to the combobox parts. Implements
+ * Root of an Autocomplete — a text input with a filtered list of suggestions. A thin configuration over
+ * the shared combobox engine (ADR 0014) with `selectionMode: 'none'`, so its value **is** the input
+ * string: typing, selecting an item, or clearing all change a single string value. Implements
  * `ControlValueAccessor` (the form value is the input string).
  *
  * @group Components
  */
 class RdxAutocompleteRoot {
+    // --- engine-backed surface read by the parts / tests ---
+    get listId() {
+        return this.engine.listId;
+    }
+    get labelId() {
+        return this.engine.labelId;
+    }
+    get inputElement() {
+        return this.engine.inputElement;
+    }
+    setInputElement(el) {
+        this.engine.setInputElement(el);
+    }
+    setInputLayout(layout) {
+        this.engine.setInputLayout(layout);
+    }
+    setPopupMounted(value) {
+        this.engine.setPopupMounted(value);
+    }
+    get inputLayout() {
+        return this.engine.inputLayout;
+    }
+    get openedByTouch() {
+        return this.engine.openedByTouch;
+    }
+    get popupMounted() {
+        return this.engine.popupMounted;
+    }
+    get highlight() {
+        return this.engine.highlight;
+    }
+    get highlightedItem() {
+        return this.engine.highlightedItem;
+    }
+    get highlightedIndex() {
+        return this.engine.highlightedIndex;
+    }
+    get activeId() {
+        return this.engine.activeId;
+    }
+    get filteredItems() {
+        return this.engine.filteredItems;
+    }
+    get visibleCount() {
+        return this.engine.visibleCount;
+    }
+    get inlinePreview() {
+        return this.engine.inlinePreview;
+    }
+    get transitionStatus() {
+        return this.engine.transitionStatus;
+    }
+    get registerTransitionElement() {
+        return this.engine.registerTransitionElement;
+    }
+    get triggerElement() {
+        return this.engine.triggerElement;
+    }
     constructor() {
         this.injector = inject(Injector);
+        /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         /** The input text. This is the form value (controlled / uncontrolled via {@link defaultValue}). */
         this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Initial input text when uncontrolled. */
@@ -172,7 +248,8 @@ class RdxAutocompleteRoot {
         /** Filtering / inline-completion behavior. See {@link AutocompleteMode}. */
         this.mode = input('list', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /** Text direction. */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.dir = injectDirection(this.dirInput);
         /** Whether the autocomplete is disabled. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the autocomplete is read-only. */
@@ -199,17 +276,9 @@ class RdxAutocompleteRoot {
             }
             return 'off';
         }, ...(ngDevMode ? [{ debugName: "autoHighlightMode" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether moving the pointer over an item highlights it. `true` (default) paints `data-highlighted`
-         * on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
-         * from the `data-highlighted` (keyboard) state. Clicking an item still selects it.
-         */
+        /** Whether moving the pointer over an item highlights it. */
         this.highlightItemOnHover = input(true, { ...(ngDevMode ? { debugName: "highlightItemOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Whether a pointer-driven highlight is kept when the cursor leaves the list. `false` (default)
-         * clears the highlight on pointer-leave; `true` retains the last hovered item highlighted. Keyboard
-         * navigation and auto-highlight are unaffected.
-         */
+        /** Whether a pointer-driven highlight is kept when the cursor leaves the list. */
         this.keepHighlight = input(false, { ...(ngDevMode ? { debugName: "keepHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether clicking the input opens the popup. Defaults to `false` (Base UI default). */
         this.openOnInputClick = input(false, { ...(ngDevMode ? { debugName: "openOnInputClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -221,22 +290,18 @@ class RdxAutocompleteRoot {
         this.grid = input(false, { ...(ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Filter applied to items against the input query (only when {@link mode} is `'list'` / `'both'`).
-         * - `undefined` (default): locale-aware "contains" via {@link useFilter};
-         * - a function: custom matching;
-         * - `null`: built-in filtering disabled (the consumer controls which items exist).
+         * `undefined` → locale-aware contains; a function → custom `(value, query, itemToString)`; `null` →
+         * built-in filtering disabled.
          */
         this.filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : /* 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, used as the source of truth for filtering and navigation in
-         * {@link virtualized} mode (where only a window of `RdxAutocompleteItem` is mounted).
-         */
+        /** The full set of item values for {@link virtualized} mode. */
         this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
         /** Whether the list is externally virtualized (navigation runs over {@link items} by index). */
         this.virtualized = input(false, { ...(ngDevMode ? { debugName: "virtualized" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** How item values are compared for equality (function or object key). */
-        this.by = input(...(ngDevMode ? [undefined, { debugName: "by" }] : /* istanbul ignore next */ []));
+        /** How item values are compared for equality (a comparator function or an object key). Base UI prop name. */
+        this.isItemEqualToValue = input(...(ngDevMode ? [undefined, { debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
         /** Converts an item value to its string label (filter text + input text on selection). */
         this.itemToStringValue = input(...(ngDevMode ? [undefined, { debugName: "itemToStringValue" }] : /* istanbul ignore next */ []));
         /** Emits when the input value changes (typing, selection, or clear), with the reason. */
@@ -247,100 +312,54 @@ class RdxAutocompleteRoot {
         this.onItemHighlighted = output();
         /** Emits after the open/close transition (including any exit animation) finishes. */
         this.onOpenChangeComplete = output();
-        this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
-        /** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
-        this.transitionStatus = this.transition.status;
-        /** Registers the popup element whose animation determines transition completion. */
-        this.registerTransitionElement = this.transition.registerElement;
-        this.listId = injectId('rdx-autocomplete-list-');
-        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
-        this.inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
         /** Constant signals exposed to the combobox context (autocomplete is always single-value). */
         this.alwaysFalse = signal(false, ...(ngDevMode ? [{ debugName: "alwaysFalse" }] : /* istanbul ignore next */ []));
         this.noneMode = signal('none', ...(ngDevMode ? [{ debugName: "noneMode" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.required(), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
-        this.defaultFilter = useFilter();
-        /** Whether built-in filtering applies in the current mode. */
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        /** Whether built-in filtering applies in the current mode (`list` / `both`). */
         this.filteringMode = computed(() => this.mode() === 'list' || this.mode() === 'both', ...(ngDevMode ? [{ debugName: "filteringMode" }] : /* istanbul ignore next */ []));
-        /** Whether inline completion applies in the current mode. */
+        /** Whether inline completion applies in the current mode (`both` / `inline`). */
         this.inlineMode = computed(() => this.mode() === 'both' || this.mode() === 'inline', ...(ngDevMode ? [{ debugName: "inlineMode" }] : /* istanbul ignore next */ []));
         /**
          * Whether the input text is a fresh user query rather than a committed selection's label. While
-         * `false` (just opened, or showing a committed selection), the list is unfiltered so the user can
-         * browse; it flips `true` on the first keystroke.
+         * `false` (just opened, or showing a committed selection), the list is unfiltered; it flips `true`
+         * on the first keystroke.
          */
         this.typed = signal(false, ...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
         /** The text the user actually typed, used as the filter query. */
         this.query = computed(() => (this.typed() ? (this.value() ?? '') : ''), ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-        /** Transient inline-completion preview (the active item's label), or `null`. */
-        this.inlinePreview = signal(null, ...(ngDevMode ? [{ debugName: "inlinePreview" }] : /* istanbul ignore next */ []));
-        /** What the input element displays: the inline preview if any, else the committed value. */
-        this.displayValue = computed(() => this.inlinePreview() ?? this.value() ?? '', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-        /** Suppresses inline completion for the current edit (set while a delete key is pressed). */
-        this.suppressInline = false;
-        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
-        /** Registered items, sorted into DOM order. */
-        this.orderedItems = computed(() => [...this._items()].sort((a, b) => domOrder(a.element, b.element)), ...(ngDevMode ? [{ debugName: "orderedItems" }] : /* istanbul ignore next */ []));
-        /** Matching items in DOM order, capped at `limit`. The set of items the list shows. */
-        this.visibleItems = computed(() => {
-            const matching = this.orderedItems().filter((item) => this.matchesFilter(item));
-            const limit = this.limit();
-            return limit >= 0 ? matching.slice(0, limit) : matching;
-        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
-        this.visibleSet = computed(() => new Set(this.visibleItems()), ...(ngDevMode ? [{ debugName: "visibleSet" }] : /* istanbul ignore next */ []));
-        /** The filtered item values an external virtualizer should render. */
-        this.filteredItems = computed(() => {
-            const data = this.items();
-            if (data === undefined) {
-                return this.visibleItems().map((item) => item.value());
-            }
-            const limit = this.limit();
-            const cap = (arr) => (limit >= 0 ? arr.slice(0, limit) : arr);
-            if (!this.filteringMode()) {
-                return cap(data);
-            }
-            const filter = this.filter();
-            if (filter === null) {
-                return cap(data);
-            }
-            const query = this.query();
-            if (!query) {
-                return cap(data);
-            }
-            const matcher = filter ?? this.defaultFilter.contains;
-            return cap(data.filter((value) => matcher(this.textFor(value), query, value)));
-        }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
-        this.visibleCount = computed(() => this.virtualized() ? this.filteredItems().length : this.visibleItems().length, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
-        this.highlight = useListHighlight({
-            items: this.orderedItems,
-            isNavigable: (item) => this.isVisible(item) && !item.disabled(),
-            getId: (item) => item.id,
-            loop: this.loopFocus,
-            injector: this.injector
+        /** The shared engine: item registry, filtering, highlight navigation (grid), inline, transition. */
+        this.engine = useComboboxEngine({
+            injector: this.injector,
+            listIdPrefix: 'rdx-autocomplete-list-',
+            popupSelector: '[rdxAutocompletePopup]',
+            open: this.open,
+            query: this.query,
+            filteringEnabled: this.filteringMode,
+            loopFocus: this.loopFocus,
+            autoHighlightMode: this.autoHighlightMode,
+            virtualized: this.virtualized,
+            items: this.items,
+            filter: this.filter,
+            limit: this.limit,
+            grid: this.grid,
+            rowOf: (element) => element.closest('[rdxAutocompleteRow]'),
+            inlineMode: this.inlineMode,
+            itemToString: (value) => this.labelFor(value),
+            onItemHighlighted: (details) => this.onItemHighlighted.emit(details),
+            onOpenChange: () => { },
+            onOpenChangeComplete: (open) => this.onOpenChangeComplete.emit(open)
         });
-        this.highlightedItem = this.highlight.highlightedItem;
-        /** Highlighted index into {@link filteredItems} in virtualized mode (`-1` when cleared). */
-        this.highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
-        /** Why the highlight last moved; read when emitting {@link onItemHighlighted}. */
-        this.highlightReason = signal('none', ...(ngDevMode ? [{ debugName: "highlightReason" }] : /* istanbul ignore next */ []));
-        this.activeId = computed(() => {
-            if (this.virtualized()) {
-                const index = this.highlightedIndex();
-                return index >= 0 ? this.itemId(index) : undefined;
-            }
-            return this.highlight.activeId();
-        }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
-        /**
-         * What to highlight once the list has mounted (items register asynchronously after opening):
-         * an end edge, or `'first-match'` (the first item whose label starts with the query — used by
-         * auto-highlight so inline completion lands on a real prefix match even when the list is static).
-         */
-        this.pendingHighlightEdge = signal(null, ...(ngDevMode ? [{ debugName: "pendingHighlightEdge" }] : /* istanbul ignore next */ []));
-        this.keyboardActive = false;
-        /** The trigger element, used as a focus fallback when the input lives inside the popup. */
-        this.triggerElement = null;
+        /** What the input element displays: the inline preview if any, else the committed value. */
+        this.displayValue = computed(() => this.engine.inlinePreview() ?? this.value() ?? '', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        engineRegistry.set(this, this.engine);
+        // Keep the dismissal reference in sync with the input (the anchor) so a press / focus on it counts
+        // as "inside" and never dismisses (ADR 0015).
+        effect(() => this.floatingContext.setReferenceElement(this.engine.inputElement() ?? null));
         // Apply uncontrolled defaults once.
         effect(() => {
             const initial = this.defaultValue();
@@ -353,219 +372,41 @@ class RdxAutocompleteRoot {
                 this.open.set(true);
             }
         });
-        // Emit open changes and drive the open/close transition (skip the initial run).
-        let previousOpen = untracked(this.open);
-        effect(() => {
-            const open = this.open();
-            if (open === previousOpen) {
-                return;
-            }
-            previousOpen = open;
-            untracked(() => {
-                this.onOpenChange.emit(open);
-                this.transition.start(open);
-            });
-        });
-        // Emit highlight changes (skip the initial run).
-        let highlightInitialized = false;
-        effect(() => {
-            const item = this.highlightedItem();
-            const index = this.highlightedIndex();
-            if (!highlightInitialized) {
-                highlightInitialized = true;
-                return;
-            }
-            untracked(() => {
-                const reason = this.highlightReason();
-                if (this.virtualized()) {
-                    const value = index >= 0 ? (this.filteredItems()[index] ?? null) : null;
-                    this.onItemHighlighted.emit({ value, index, reason });
-                }
-                else {
-                    const value = item ? item.value() : null;
-                    const itemIndex = item ? this.visibleItems().indexOf(item) : -1;
-                    this.onItemHighlighted.emit({ value, index: itemIndex, reason });
-                }
-            });
-        });
-        // Inline completion: mirror the active item's label into the input (with the completed suffix
-        // selected by the input directive). Recomputes whenever the highlight or query changes.
-        effect(() => {
-            const item = this.highlightedItem();
-            const query = this.query();
-            const reason = this.highlightReason();
-            untracked(() => this.recomputeInlinePreview(item, query, reason));
-        });
-        // Apply a deferred open-edge highlight once items (DOM refs) or filtered data have registered.
-        effect(() => {
-            const edge = this.pendingHighlightEdge();
-            const count = this.virtualized() ? this.filteredItems().length : this.orderedItems().length;
-            if (!this.open() || edge === null || count === 0) {
-                return;
-            }
-            untracked(() => {
-                this.highlightReason.set('none');
-                if (this.virtualized()) {
-                    this.highlightedIndex.set(this.resolveVirtualizedEdge(edge, count));
-                }
-                else if (edge === 'last') {
-                    this.highlight.last();
-                }
-                else if (edge === 'first-match') {
-                    this.highlight.set(this.firstMatchItem() ?? this.firstVisibleNavigable());
-                }
-                else {
-                    this.highlight.first();
-                }
-                this.pendingHighlightEdge.set(null);
-            });
-        });
-        // autoHighlight 'always': keep the first navigable item highlighted whenever the popup is open.
-        effect(() => {
-            this.orderedItems();
-            this.visibleCount();
-            if (this.autoHighlightMode() === 'always' && this.open()) {
-                untracked(() => {
-                    if (this.virtualized()) {
-                        const length = this.filteredItems().length;
-                        const index = this.highlightedIndex();
-                        if ((index < 0 || index >= length) && length > 0) {
-                            this.highlightReason.set('none');
-                            this.highlightedIndex.set(0);
-                        }
-                    }
-                    else if (this.highlightedItem() === null) {
-                        this.highlightReason.set('none');
-                        this.highlight.first();
-                    }
-                });
-            }
-        });
-        // Virtualized self-heal: clear a highlight that filtering pushed out of range.
-        effect(() => {
-            if (!this.virtualized()) {
-                return;
-            }
-            const length = this.filteredItems().length;
-            untracked(() => {
-                const index = this.highlightedIndex();
-                if (index >= length && index !== -1) {
-                    this.highlightReason.set('none');
-                    this.highlightedIndex.set(-1);
-                }
-            });
-        });
         // Virtualized object values can't be labelled from the DOM — warn once in dev.
         if (isDevMode()) {
-            let warned = false;
             effect(() => {
-                if (warned || !this.virtualized() || this.itemToStringValue()) {
+                if (!this.virtualized() || this.itemToStringValue()) {
                     return;
                 }
                 if (this.items()?.some((value) => value !== null && typeof value === 'object')) {
-                    warned = true;
-                    console.warn('[rdxAutocompleteRoot] `virtualized` with object item values needs `itemToStringValue` ' +
-                        'to render correct labels; falling back to a generic label.');
+                    rdxDevWarning('autocomplete/virtualized-item-label', '`rdxAutocompleteRoot` `virtualized` with object item values needs `itemToStringValue` ' +
+                        'to render correct labels; falling back to a generic label.', 'components/autocomplete');
                 }
             });
         }
     }
-    recomputeInlinePreview(item, query, reason) {
-        // Pointer hover must not rewrite the input (matches Base UI); only typing / keyboard nav complete it.
-        if (!this.inlineMode() || this.suppressInline || !item || reason === 'pointer') {
-            this.inlinePreview.set(null);
-            return;
-        }
-        const label = item.textValue();
-        if (label && query && label.toLowerCase().startsWith(query.toLowerCase())) {
-            // Type-ahead: keep the typed prefix (preserving its casing) and complete the rest.
-            this.inlinePreview.set(query + label.slice(query.length));
-            return;
-        }
-        // Keyboard navigation to an item that doesn't prefix-match the query: show its full label so the
-        // input reflects the highlighted option. Typing (reason 'none') never jumps to a non-prefix label.
-        if (reason === 'keyboard' && label) {
-            this.inlinePreview.set(label);
-            return;
-        }
-        this.inlinePreview.set(null);
-    }
     setSuppressInline(value) {
-        this.suppressInline = value;
+        this.engine.setSuppressInline(value);
     }
     /** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
-    openForBrowse() {
+    openForBrowse(reason = 'none', event = new Event('autocomplete.open-change')) {
         if (!this.open()) {
             this.typed.set(false);
         }
-        this.setOpen(true);
-        this.selectInputText();
+        this.setOpen(true, reason, event);
+        this.engine.selectInputText();
         if (this.autoHighlightMode() === 'always') {
-            this.pendingHighlightEdge.set('first');
+            this.engine.setPendingHighlightEdge('first');
         }
     }
     /** Opens the popup and highlights the given edge once the list mounts. */
-    openAndHighlight(edge) {
+    openAndHighlight(edge, reason = 'list-navigation', event = new Event('autocomplete.open-change')) {
         if (!this.open()) {
             this.typed.set(false);
         }
-        this.setOpen(true);
-        this.selectInputText();
-        this.pendingHighlightEdge.set(edge);
-    }
-    /** Whether the item matches the active query (ignores the `limit` cap). */
-    matchesFilter(item) {
-        if (!this.filteringMode()) {
-            return true;
-        }
-        const filter = this.filter();
-        if (filter === null) {
-            return true;
-        }
-        const query = this.query();
-        const matcher = filter ?? this.defaultFilter.contains;
-        return matcher(item.textValue(), query, item.value());
-    }
-    /** Whether the item is shown in the list (matches the query and is within `limit`). */
-    isVisible(item) {
-        return this.visibleSet().has(item);
-    }
-    /** The first visible, navigable item whose label starts with the query (for inline completion). */
-    firstMatchItem() {
-        const query = this.query();
-        if (!query) {
-            return null;
-        }
-        const lower = query.toLowerCase();
-        return (this.visibleItems().find((item) => !item.disabled() && item.textValue().toLowerCase().startsWith(lower)) ??
-            null);
-    }
-    /** The first visible, navigable item (auto-highlight fallback when no prefix match exists). */
-    firstVisibleNavigable() {
-        return this.visibleItems().find((item) => !item.disabled()) ?? null;
-    }
-    /** Resolves a pending edge to a virtualized index. */
-    resolveVirtualizedEdge(edge, count) {
-        if (edge === 'last') {
-            return count - 1;
-        }
-        if (edge === 'first-match') {
-            const query = this.query();
-            if (query) {
-                const lower = query.toLowerCase();
-                const index = this.filteredItems().findIndex((value) => this.textFor(value).toLowerCase().startsWith(lower));
-                if (index >= 0) {
-                    return index;
-                }
-            }
-        }
-        return 0;
-    }
-    isKeyboardActive() {
-        return this.keyboardActive;
-    }
-    setKeyboardActive(value) {
-        this.keyboardActive = value;
+        this.setOpen(true, reason, event);
+        this.engine.selectInputText();
+        this.engine.setPendingHighlightEdge(edge);
     }
     /** Whether the item's value/label matches the current input value (combobox context contract). */
     isSelectedValue(value) {
@@ -573,27 +414,33 @@ class RdxAutocompleteRoot {
         if (!current) {
             return false;
         }
-        return value === current || isItemEqualToValue(value, current, this.by());
+        return value === current || isItemEqualToValue(value, current, this.isItemEqualToValue());
     }
-    registerItem(item) {
-        this._items.update((items) => [...items, item]);
-    }
-    unregisterItem(item) {
-        this._items.update((items) => items.filter((i) => i !== item));
-    }
-    setOpen(open) {
-        if (this.disabledState() || this.readOnly()) {
-            return;
+    setOpen(open, reason = 'none', event = new Event('autocomplete.open-change')) {
+        if (open === this.open()) {
+            return true;
         }
+        if (open && (this.disabledState() || this.readOnly())) {
+            return false;
+        }
+        const change = this.createOpenChangeEvent(open, reason, event);
+        this.onOpenChange.emit(change.payload);
+        if (change.eventDetails.isCanceled()) {
+            return false;
+        }
+        this.preventUnmountOnClose.set(open ? false : change.shouldPreventUnmountOnClose());
         this.open.set(open);
+        return true;
     }
-    closePopup(revert = true) {
+    closePopup(revert = true, reason = 'none', event = new Event('autocomplete.open-change')) {
         if (!this.open()) {
             return;
         }
-        this.open.set(false);
-        this.clearHighlightState();
-        this.inlinePreview.set(null);
+        if (!this.setOpen(false, reason, event)) {
+            return;
+        }
+        this.engine.clearHighlightState();
+        this.engine.clearInlinePreview();
         if (revert) {
             this.typed.set(false);
         }
@@ -606,236 +453,169 @@ class RdxAutocompleteRoot {
         // Inline modes (`both` / `inline`) implicitly highlight the first prefix match so the input can
         // be inline-completed even without an explicit `autoHighlight`.
         if (this.autoHighlightMode() !== 'off' || (this.inlineMode() && value.length > 0)) {
-            this.pendingHighlightEdge.set('first-match');
+            this.engine.setPendingHighlightEdge('first-match');
         }
     }
-    /** Selects all input text so the next keystroke replaces a committed label. */
-    selectInputText() {
-        this.inputElement()?.select();
-    }
     labelFor(value) {
         const custom = this.itemToStringValue();
         if (custom) {
             return custom(value);
         }
-        const item = this.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.by()));
+        const item = this.engine.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.isItemEqualToValue()));
         return item ? item.textValue() : itemToStringLabel(value);
     }
-    /** Label text for a raw item value (virtualized mode, no DOM element to read from). */
-    textFor(value) {
-        const custom = this.itemToStringValue();
-        return custom ? custom(value) : itemToStringLabel(value);
-    }
-    /** Deterministic id for the item at `index` in virtualized mode (matches `aria-activedescendant`). */
     itemId(index) {
-        return `${this.listId}-item-${index}`;
+        return this.engine.itemId(index);
+    }
+    isVisible(item) {
+        return this.engine.isVisible(item);
     }
-    handleSelect(item) {
+    registerItem(item) {
+        this.engine.registerItem(item);
+    }
+    unregisterItem(item) {
+        this.engine.unregisterItem(item);
+    }
+    handleSelect(item, event = new Event('autocomplete.item-press')) {
         if (this.disabledState() || this.readOnly() || item.disabled()) {
             return;
         }
-        this.commitSelection(item.textValue() || this.labelFor(item.value()));
+        this.commitSelection(item.textValue() || this.labelFor(item.value()), event);
     }
     /** Selects the filtered item at `index` (virtualized mode). */
-    selectIndex(index) {
+    selectIndex(index, event = new Event('autocomplete.item-press')) {
         if (this.disabledState() || this.readOnly()) {
             return;
         }
-        const value = this.filteredItems()[index];
+        const value = this.engine.filteredItems()[index];
         if (value === undefined) {
             return;
         }
-        this.commitSelection(this.labelFor(value));
+        this.commitSelection(this.labelFor(value), event);
     }
     /** Commits a selection: the input value becomes the item's label, the popup closes. */
-    commitSelection(label) {
-        this.inlinePreview.set(null);
+    commitSelection(label, event = new Event('autocomplete.item-press')) {
+        // Capture focus before `commitValue` emits `onValueChange`, so restoration is skipped when the
+        // consumer moves focus in that callback (e.g. focusing a message field after an emoji press).
+        const activeBefore = typeof document !== 'undefined' ? document.activeElement : null;
+        this.engine.clearInlinePreview();
         this.commitValue(label, 'item-press');
         this.typed.set(false);
-        this.open.set(false);
-        this.clearHighlightState();
-        this.restoreFocusAfterSelect();
+        this.closePopup(false, 'item-press', event);
+        this.engine.restoreFocusAfterSelect(activeBefore);
         this.maybeSubmit();
     }
     maybeSubmit() {
         if (this.submitOnItemClick()) {
-            this.inputElement()?.form?.requestSubmit?.();
+            this.engine.inputElement()?.form?.requestSubmit?.();
         }
     }
-    selectHighlighted() {
+    selectHighlighted(event = new Event('autocomplete.item-press')) {
         if (this.virtualized()) {
-            const index = this.highlightedIndex();
+            const index = this.engine.highlightedIndex();
             if (index >= 0) {
-                this.selectIndex(index);
+                this.selectIndex(index, event);
             }
             return;
         }
-        const item = this.highlightedItem();
+        const item = this.engine.highlightedItem();
         if (item) {
-            this.handleSelect(item);
+            this.handleSelect(item, event);
         }
     }
-    // --- Highlight navigation facade (mode-aware: index-based when virtualized, grid-aware, else DOM-ref) ---
-    moveDown() {
-        this.highlightReason.set('keyboard');
-        if (this.virtualized()) {
-            this.stepIndex(1);
+    // --- highlight navigation facade (delegates to the engine; grid-aware) ---
+    navigateByKeyboard(direction, event = new Event('autocomplete.open-change')) {
+        this.engine.setKeyboardActive(true);
+        if (!this.open()) {
+            this.openAndHighlight(direction === 1 ? 'first' : 'last', 'list-navigation', event);
         }
-        else if (this.grid()) {
-            this.gridVertical(1);
+        else if (direction === 1) {
+            this.engine.highlightNext();
         }
         else {
-            this.highlight.next();
+            this.engine.highlightPrevious();
         }
     }
+    moveDown() {
+        this.engine.highlightNext();
+    }
     moveUp() {
-        this.highlightReason.set('keyboard');
-        if (this.virtualized()) {
-            this.stepIndex(-1);
-        }
-        else if (this.grid()) {
-            this.gridVertical(-1);
-        }
-        else {
-            this.highlight.previous();
-        }
+        this.engine.highlightPrevious();
     }
-    /** Grid: move to the next cell in DOM order. Non-grid: no-op (caret movement). */
     moveRight() {
-        if (!this.grid() || this.virtualized()) {
-            return;
-        }
-        this.highlightReason.set('keyboard');
-        this.highlight.next();
+        this.engine.highlightNextColumn();
     }
     moveLeft() {
-        if (!this.grid() || this.virtualized()) {
-            return;
-        }
-        this.highlightReason.set('keyboard');
-        this.highlight.previous();
+        this.engine.highlightPreviousColumn();
     }
     highlightFirst(reason = 'keyboard') {
-        this.highlightReason.set(reason);
-        if (this.virtualized()) {
-            this.highlightedIndex.set(this.filteredItems().length > 0 ? 0 : -1);
-        }
-        else {
-            this.highlight.first();
-        }
+        this.engine.highlightFirst(reason);
     }
     highlightLast(reason = 'keyboard') {
-        this.highlightReason.set(reason);
-        if (this.virtualized()) {
-            const length = this.filteredItems().length;
-            this.highlightedIndex.set(length > 0 ? length - 1 : -1);
-        }
-        else {
-            this.highlight.last();
-        }
+        this.engine.highlightLast(reason);
     }
     highlightIndex(index, reason) {
-        if (index < 0 || index >= this.filteredItems().length) {
-            return;
-        }
-        this.highlightReason.set(reason);
-        this.highlightedIndex.set(index);
+        this.engine.highlightIndex(index, reason);
     }
     setHighlight(item, reason) {
-        this.highlightReason.set(reason);
-        this.highlight.set(item);
+        this.engine.setHighlight(item, reason);
     }
     clearHighlightState() {
-        this.highlight.clear();
-        this.highlightedIndex.set(-1);
+        this.engine.clearHighlightState();
     }
-    stepIndex(direction) {
-        const length = this.filteredItems().length;
-        if (length === 0) {
-            this.highlightedIndex.set(-1);
-            return;
-        }
-        const current = this.highlightedIndex();
-        if (current < 0) {
-            this.highlightedIndex.set(direction === 1 ? 0 : length - 1);
-            return;
-        }
-        let next = current + direction;
-        const loop = this.loopFocus();
-        if (next < 0) {
-            next = loop ? length - 1 : 0;
-        }
-        else if (next >= length) {
-            next = loop ? 0 : length - 1;
-        }
-        this.highlightedIndex.set(next);
+    isKeyboardActive() {
+        return this.engine.isKeyboardActive();
     }
-    /** Grid vertical move: keep the column index, jump to the adjacent row. */
-    gridVertical(direction) {
-        const rows = this.gridRows();
-        if (rows.length === 0) {
-            return;
-        }
-        const current = this.highlightedItem();
-        if (!current) {
-            const row = direction === 1 ? rows[0] : rows[rows.length - 1];
-            this.highlight.set(row[0] ?? null);
-            return;
-        }
-        let rowIndex = rows.findIndex((row) => row.includes(current));
-        const col = rowIndex >= 0 ? rows[rowIndex].indexOf(current) : 0;
-        const loop = this.loopFocus();
-        rowIndex += direction;
-        if (rowIndex < 0) {
-            rowIndex = loop ? rows.length - 1 : 0;
-        }
-        else if (rowIndex >= rows.length) {
-            rowIndex = loop ? 0 : rows.length - 1;
-        }
-        const targetRow = rows[rowIndex];
-        this.highlight.set(targetRow[Math.min(col, targetRow.length - 1)] ?? null);
-    }
-    /** Visible items grouped into rows by their nearest `[rdxAutocompleteRow]` ancestor (DOM order). */
-    gridRows() {
-        const rows = new Map();
-        for (const item of this.visibleItems()) {
-            const key = item.element.closest('[rdxAutocompleteRow]');
-            const bucket = rows.get(key);
-            if (bucket) {
-                bucket.push(item);
-            }
-            else {
-                rows.set(key, [item]);
-            }
-        }
-        return [...rows.values()];
+    setKeyboardActive(value) {
+        this.engine.setKeyboardActive(value);
     }
     clearValue() {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
         this.commitValue('', 'input-clear');
         this.typed.set(true);
-        this.inlinePreview.set(null);
-        this.focusInput();
+        this.engine.clearInlinePreview();
+        this.engine.clearHighlightState();
+        this.engine.focusInput();
     }
     focusInput() {
-        this.inputElement()?.focus();
-    }
-    restoreFocusAfterSelect() {
-        const input = this.inputElement();
-        if (input && !input.closest('[rdxAutocompletePopup]')) {
-            input.focus();
-        }
-        else {
-            this.triggerElement?.focus();
-        }
+        this.engine.focusInput();
     }
     markAsTouched() {
         this.onTouched?.();
     }
     commitValue(value, reason) {
+        // Mirror combobox's guarded commit: never mutate the value while disabled or read-only
+        // (the input is the form value here, so Clear / item-press / typing must all be inert).
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
         this.value.set(value);
         this.onValueChange.emit({ value, reason });
         this.onChange?.(value);
     }
+    createOpenChangeEvent(open, reason, event) {
+        const change = createCancelableChangeEventDetails(reason, event, this.resolveOpenChangeTrigger(event));
+        return {
+            payload: {
+                open,
+                reason,
+                event: change.eventDetails.event,
+                trigger: change.eventDetails.trigger,
+                eventDetails: change.eventDetails
+            },
+            eventDetails: change.eventDetails,
+            shouldPreventUnmountOnClose: change.shouldPreventUnmountOnClose
+        };
+    }
+    resolveOpenChangeTrigger(event) {
+        const target = event.target;
+        if (target instanceof HTMLElement) {
+            return target;
+        }
+        return this.engine.triggerElement ?? this.engine.inputElement() ?? undefined;
+    }
     // ControlValueAccessor (the form value is the input string)
     writeValue(value) {
         untracked(() => this.value.set(value ?? ''));
@@ -850,9 +630,12 @@ class RdxAutocompleteRoot {
         this.cvaDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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 }, dir: { classPropertyName: "dir", 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 }, by: { classPropertyName: "by", publicName: "by", 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: "21.2.9", 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: [
             provideComboboxRootContext(context),
-            { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true }
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true },
+            // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxAutocompleteRoot).floatingContext)
         ], exportAs: ["rdxAutocompleteRoot"], hostDirectives: [{ directive: i1$1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRoot, decorators: [{
@@ -862,25 +645,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxAutocompleteRoot',
                     providers: [
                         provideComboboxRootContext(context),
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true },
+                        // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxAutocompleteRoot).floatingContext)
                     ],
                     hostDirectives: [RdxPopper],
                     host: {
                         '[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 }] }], dir: [{ 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 }] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", 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"] }] } });
-/** DOM-order comparator for two elements (precedes → -1, follows → 1). */
-function domOrder(a, b) {
-    const position = a.compareDocumentPosition(b);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-        return -1;
-    }
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-        return 1;
-    }
-    return 0;
-}
+        }], 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"] }] } });
 
 /**
  * Clears the input value. Hidden when there is nothing to clear.
@@ -891,45 +666,71 @@ class RdxAutocompleteClear {
     constructor() {
         this.root = inject(RdxAutocompleteRoot);
         this.isEmpty = computed(() => !this.root.value(), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        /** Disabled when the control is disabled or read-only (clearing is a mutation). */
+        this.isDisabled = computed(() => this.root.disabledState() || this.root.readOnly(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     }
     onClick() {
         this.root.clearValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteClear, isStandalone: true, selector: "button[rdxAutocompleteClear]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Clear" }, listeners: { "click": "onClick()" }, properties: { "hidden": "isEmpty()", "attr.disabled": "root.disabledState() ? \"\" : undefined" } }, exportAs: ["rdxAutocompleteClear"], hostDirectives: [{ directive: i2.RdxDismissableLayerBranch }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteClear, isStandalone: true, selector: "button[rdxAutocompleteClear]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Clear" }, listeners: { "click": "onClick()" }, properties: { "hidden": "isEmpty()", "attr.disabled": "isDisabled() ? \"\" : undefined" } }, exportAs: ["rdxAutocompleteClear"], hostDirectives: [{ directive: i1$2.RdxFloatingInsideElement }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteClear, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxAutocompleteClear]',
                     exportAs: 'rdxAutocompleteClear',
-                    hostDirectives: [RdxDismissableLayerBranch],
+                    hostDirectives: [RdxFloatingInsideElement],
                     host: {
                         type: 'button',
                         tabindex: '-1',
                         'aria-label': 'Clear',
                         '[hidden]': 'isEmpty()',
-                        '[attr.disabled]': 'root.disabledState() ? "" : undefined',
+                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '(click)': 'onClick()'
                     }
                 }]
         }] });
 
 /**
- * Shown only when no items match the current query. Reuses the combobox empty part.
+ * A polite, atomic live region announcing the "no results" message. Like the combobox empty part, the
+ * element stays mounted and visible at all times (never hidden/unmounted) so the transition to empty is
+ * announced; only its projected content is rendered conditionally.
  *
  * @group Components
  */
 class RdxAutocompleteEmpty {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteEmpty, isStandalone: true, selector: "[rdxAutocompleteEmpty]", exportAs: ["rdxAutocompleteEmpty"], hostDirectives: [{ directive: i1.RdxComboboxEmpty }], ngImport: i0 }); }
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        /** Whether no items match the current query (drives projection of the message). */
+        this.isEmpty = computed(() => this.rootContext.visibleCount() === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RdxAutocompleteEmpty, isStandalone: true, selector: "[rdxAutocompleteEmpty]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" }, properties: { "attr.data-empty": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxAutocompleteEmpty"], ngImport: i0, template: `
+        @if (isEmpty()) {
+            <ng-content />
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteEmpty, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
                     selector: '[rdxAutocompleteEmpty]',
                     exportAs: 'rdxAutocompleteEmpty',
-                    hostDirectives: [RdxComboboxEmpty]
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (isEmpty()) {
+            <ng-content />
+        }
+    `,
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                        // Present only while the message is shown. Lets consumers collapse the always-mounted region
+                        // (e.g. `data-[empty]:py-6`) without `display:none`/`hidden`, which would break the announcement.
+                        '[attr.data-empty]': 'isEmpty() ? "" : undefined'
+                    }
                 }]
         }] });
 
@@ -989,6 +790,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Positions the autocomplete popup relative to the input anchor using the popper engine.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the full popper positioning surface — the inputs
+ * (`side`, `sideOffset`, `align`, …), the `placed` output, and the host bindings — from
+ * {@link RdxPopperContentWrapper}, and only declares autocomplete's Base UI-aligned defaults through
+ * the config provider (the same building block the combobox positioner uses).
+ *
+ * @group Components
+ */
+class RdxAutocompletePositioner extends RdxPopperContentWrapper {
+    constructor() {
+        super();
+        const root = inject(RdxAutocompleteRoot);
+        const injector = inject(Injector);
+        const host = inject(ElementRef).nativeElement;
+        // A modal autocomplete isolates the background with an internal backdrop (Base UI); the input stays
+        // clickable through a cutout. (Autocomplete is non-modal by default — usually no backdrop.)
+        afterNextRender(() => setupInternalBackdrop(host, injector, {
+            isOpen: () => root.open(),
+            shouldRender: () => root.modal(),
+            cutout: () => root.inputElement() ?? null
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePositioner, isStandalone: true, selector: "[rdxAutocompletePositioner]", providers: [
+            ...provideRdxPopperContentWrapper(RdxAutocompletePositioner),
+            provideRdxPopperContentConfig({ sideOffset: 4, align: 'start' })
+        ], exportAs: ["rdxAutocompletePositioner"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompletePositioner]',
+                    exportAs: 'rdxAutocompletePositioner',
+                    providers: [
+                        ...provideRdxPopperContentWrapper(RdxAutocompletePositioner),
+                        provideRdxPopperContentConfig({ sideOffset: 4, align: 'start' })
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
 const attr$1 = (value) => (value ? '' : undefined);
 /**
  * The autocomplete text input. Holds DOM focus at all times; the highlighted option is referenced via
@@ -1027,7 +870,11 @@ class RdxAutocompleteInput {
         /** Whether an IME composition is in progress (CJK). While composing, don't filter or select. */
         this.composing = false;
         this.dataAttr = attr$1;
-        this.root.inputElement.set(this.element);
+        this.root.setInputElement(this.element);
+        // Report the layout (Base UI's `inputInsidePopup`): a positioner ancestor means the input lives
+        // inside the popup, so the Trigger becomes the focusable `role="combobox"`; otherwise the input
+        // is the tab stop and the Trigger is a `tabindex="-1"` toggle.
+        this.root.setInputLayout(inject(RdxAutocompletePositioner, { optional: true }) ? 'inside' : 'outside');
         afterNextRender(() => {
             this.fieldRootContext?.setControlId(this.id());
         });
@@ -1044,7 +891,7 @@ class RdxAutocompleteInput {
         });
         inject(DestroyRef).onDestroy(() => {
             if (this.root.inputElement() === this.element) {
-                this.root.inputElement.set(null);
+                this.root.setInputElement(null);
             }
         });
     }
@@ -1052,21 +899,22 @@ class RdxAutocompleteInput {
         if (this.composing || event.isComposing) {
             return;
         }
-        this.commitInput(event.target.value);
+        this.commitInput(event.target.value, event);
     }
     onCompositionEnd(event) {
         this.composing = false;
-        this.commitInput(event.target.value);
+        this.commitInput(event.target.value, event);
     }
-    commitInput(value) {
-        if (!this.root.open()) {
-            this.root.setOpen(true);
+    commitInput(value, event) {
+        // 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);
     }
-    onClick() {
+    onClick(event) {
         if (this.root.openOnInputClick()) {
-            this.root.openForBrowse();
+            this.root.openForBrowse('input-press', event);
         }
     }
     onFocus() {
@@ -1091,7 +939,7 @@ class RdxAutocompleteInput {
                 event.preventDefault();
                 this.root.setKeyboardActive(true);
                 if (!open) {
-                    this.root.openAndHighlight('first');
+                    this.root.openAndHighlight('first', 'list-navigation', event);
                 }
                 else {
                     this.root.moveDown();
@@ -1101,7 +949,7 @@ class RdxAutocompleteInput {
                 event.preventDefault();
                 this.root.setKeyboardActive(true);
                 if (!open) {
-                    this.root.openAndHighlight('last');
+                    this.root.openAndHighlight('last', 'list-navigation', event);
                 }
                 else {
                     this.root.moveUp();
@@ -1121,6 +969,22 @@ class RdxAutocompleteInput {
                     this.root.moveLeft();
                 }
                 break;
+            case 'Home':
+                // In a grid the search box is a filter, so Home/End jump to the first/last cell rather
+                // than moving the caret (outside a grid they keep their native text-editing behavior).
+                if (open && this.root.grid()) {
+                    event.preventDefault();
+                    this.root.setKeyboardActive(true);
+                    this.root.highlightFirst();
+                }
+                break;
+            case 'End':
+                if (open && this.root.grid()) {
+                    event.preventDefault();
+                    this.root.setKeyboardActive(true);
+                    this.root.highlightLast();
+                }
+                break;
             case 'Enter':
                 if (open) {
                     const hasHighlight = this.root.virtualized()
@@ -1128,42 +992,52 @@ class RdxAutocompleteInput {
                         : this.root.highlightedItem() !== null;
                     if (hasHighlight) {
                         event.preventDefault();
-                        this.root.selectHighlighted();
+                        this.root.selectHighlighted(event);
                     }
                     else if (!this.root.inlineMode()) {
                         // Non-inline: close and let native form submission proceed. Inline modes keep the
                         // popup open on Enter without a highlight (matches Base UI).
-                        this.root.closePopup(true);
+                        this.root.closePopup(true, 'none', event);
                     }
                 }
                 break;
             case 'Escape':
                 if (open) {
                     event.preventDefault();
-                    this.root.closePopup(true);
+                    this.root.closePopup(true, 'escape-key', event);
+                }
+                else if (!this.root.popupMounted()) {
+                    // Base UI: Escape on a closed autocomplete clears the input value (a no-op while
+                    // read-only / disabled). Guard on `popupMounted` so the same Escape that just closed
+                    // an open popup (the `open` branch above) doesn't also clear.
+                    this.root.clearValue();
                 }
                 break;
             case 'Tab':
-                if (open) {
-                    this.root.closePopup(true);
+                // Tab dismisses a real popup and lets focus move on. With no popup (the always-open,
+                // inline "command palette" layout), Tab must NOT close — it just moves focus within the
+                // surrounding dialog. Guard on `popupMounted` so closing doesn't tear down that dialog.
+                if (open && this.root.popupMounted()) {
+                    this.root.closePopup(true, 'none', event);
                 }
                 break;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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()", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "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": "invalidState() ? \"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(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i2.RdxDismissableLayerBranch }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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": "invalidState() ? \"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(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "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: "21.2.9", ngImport: i0, type: RdxAutocompleteInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxAutocompleteInput]',
                     exportAs: 'rdxAutocompleteInput',
-                    hostDirectives: [RdxPopperAnchor, RdxDismissableLayerBranch],
+                    hostDirectives: [RdxPopperAnchor, RdxFloatingInsideElement],
                     host: {
                         role: 'combobox',
                         autocomplete: 'off',
                         '[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()',
@@ -1185,7 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-filled]': 'dataAttr(filledState())',
                         '[attr.data-focused]': 'dataAttr(focusedState())',
                         '(input)': 'onInput($event)',
-                        '(click)': 'onClick()',
+                        '(click)': 'onClick($event)',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(keydown)': 'onKeydown($event)',
@@ -1224,6 +1098,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * A row in a grid-layout autocomplete list. Groups the items in one row so the root can navigate by
+ * row (ArrowUp / ArrowDown) and within a row (ArrowLeft / ArrowRight). Only meaningful when the root
+ * has `grid` enabled; the root resolves an item's row from its nearest `[rdxAutocompleteRow]` ancestor.
+ *
+ * @group Components
+ */
+class RdxAutocompleteRow {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteRow, isStandalone: true, selector: "[rdxAutocompleteRow]", host: { attributes: { "role": "row" } }, exportAs: ["rdxAutocompleteRow"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteRow]',
+                    exportAs: 'rdxAutocompleteRow',
+                    host: {
+                        role: 'row'
+                    }
+                }]
+        }] });
+
 const itemContext = () => {
     const item = inject(RdxAutocompleteItem);
     return {
@@ -1246,8 +1142,12 @@ class RdxAutocompleteItem {
         this.rootContext = injectComboboxRootContext();
         this.element = inject(ElementRef).nativeElement;
         this.id = injectId('rdx-autocomplete-item-');
-        /** The option's value. When omitted, selecting the item writes its text content into the input. */
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * The explicit `[value]`, or `undefined` when omitted. Read the resolved {@link value} instead —
+         * it falls back to the text content only when no value was bound (so explicit falsy values like
+         * `0` / `''` / `null` are preserved for the filter and selection).
+         */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
         /** Explicit text matched against the query and written to the input. Defaults to text content. */
         this.textValueInput = input('', { ...(ngDevMode ? { debugName: "textValueInput" } : /* istanbul ignore next */ {}), alias: 'textValue' });
         /** Whether the option is disabled. */
@@ -1257,15 +1157,31 @@ class RdxAutocompleteItem {
         this.virtualized = this.rootContext.virtualized;
         this.autoTextValue = signal('', ...(ngDevMode ? [{ debugName: "autoTextValue" }] : /* istanbul ignore next */ []));
         this.textValue = computed(() => this.textValueInput() || this.autoTextValue(), ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+        /**
+         * The option's effective value: the explicit `[value]` if bound (preserving `0` / `''` / `null`),
+         * otherwise the text content (autocomplete's value is the input string). Only an absent input —
+         * `undefined` — falls back, so a custom filter still sees the real `itemValue` for falsy values.
+         */
+        this.value = computed(() => {
+            const bound = this.valueInput();
+            return bound === undefined ? this.textValue() : bound;
+        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.elementId = computed(() => this.virtualized() ? this.rootContext.itemId(this.index() ?? -1) : this.id, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
         this.ariaSetSize = computed(() => this.virtualized() ? this.rootContext.filteredItems().length : undefined, ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
         this.ariaPosInSet = computed(() => (this.virtualized() ? (this.index() ?? -1) + 1 : undefined), ...(ngDevMode ? [{ debugName: "ariaPosInSet" }] : /* istanbul ignore next */ []));
+        /** The nearest enclosing grid row, if any (drives the `gridcell` role). */
+        this.row = inject(RdxAutocompleteRow, { optional: true });
+        /** `gridcell` only when actually inside a `RdxAutocompleteRow` of a grid list; otherwise `option`. */
+        this.role = computed(() => (this.rootContext.grid() && this.row ? 'gridcell' : 'option'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
         this.isVisible = computed(() => (this.virtualized() ? true : this.rootContext.isVisible(this)), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
         this.isSelected = computed(() => this.rootContext.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         this.isHighlighted = computed(() => this.virtualized()
             ? this.rootContext.highlightedIndex() === this.index()
             : this.rootContext.highlightedItem() === this, ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
         this.group = injectComboboxGroupContext(true);
+        // Whether a primary-button pointerdown started on **this** item. A normal press+release here is
+        // committed by `click`; `mouseup` is only the drag-end fallback for a press that began *elsewhere*.
+        this.pointerDownStarted = false;
         const destroyRef = inject(DestroyRef);
         afterNextRender(() => {
             if (this.virtualized()) {
@@ -1293,12 +1209,45 @@ class RdxAutocompleteItem {
                 this.element.scrollIntoView({ block: 'nearest' });
             }
         });
+        // Reset the press flag whenever the popup closes (matches Base UI), so a later drag-end onto
+        // this item isn't blocked by a stale press from an earlier interaction.
+        effect(() => {
+            if (!this.rootContext.open()) {
+                this.pointerDownStarted = false;
+            }
+        });
     }
     onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
         event.preventDefault();
         this.rootContext.setKeyboardActive(false);
+        this.pointerDownStarted = true;
+    }
+    onMouseDown(event) {
+        // Belt-and-suspenders for keeping focus on the input (and iOS Safari blur on tap).
+        if (event.button === 0) {
+            event.preventDefault();
+        }
+    }
+    onMouseUp(event) {
+        // Read-and-reset the press flag first (matches Base UI), so a press+release here doesn't leave
+        // it set and block a later drag-end onto this same item. Drag-end: commit when the primary
+        // button is released over the highlighted item while the press began on a *different* element
+        // (so `click` won't fire here). A press that began on this item is committed by `click` instead.
+        const startedHere = this.pointerDownStarted;
+        this.pointerDownStarted = false;
+        if (event.button !== 0 || startedHere || !this.isHighlighted()) {
+            return;
+        }
+        this.commitSelection();
+    }
+    onClick() {
+        // Primary selection trigger; also fires for programmatic `.click()`.
+        this.commitSelection();
     }
-    onPointerUp() {
+    commitSelection() {
         if (this.virtualized()) {
             this.rootContext.selectIndex(this.index() ?? -1);
         }
@@ -1342,7 +1291,7 @@ class RdxAutocompleteItem {
         this.rootContext.clearHighlight();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompleteItem, isStandalone: true, selector: "[rdxAutocompleteItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValueInput: { classPropertyName: "textValueInput", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointermove": "onPointerMove()", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.id": "elementId()", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-setsize": "ariaSetSize()", "attr.aria-posinset": "ariaPosInSet()", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "hidden": "!isVisible()", "attr.data-hidden": "isVisible() ? undefined : \"\"" } }, providers: [provideComboboxItemContext(itemContext)], exportAs: ["rdxAutocompleteItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompleteItem, isStandalone: true, selector: "[rdxAutocompleteItem]", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValueInput: { classPropertyName: "textValueInput", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "click": "onClick()", "pointermove": "onPointerMove()", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.role": "role()", "attr.id": "elementId()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-setsize": "ariaSetSize()", "attr.aria-posinset": "ariaPosInSet()", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "hidden": "!isVisible()", "attr.data-hidden": "isVisible() ? undefined : \"\"" } }, providers: [provideComboboxItemContext(itemContext)], exportAs: ["rdxAutocompleteItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteItem, decorators: [{
             type: Directive,
@@ -1351,25 +1300,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxAutocompleteItem',
                     providers: [provideComboboxItemContext(itemContext)],
                     host: {
-                        role: 'option',
+                        '[attr.role]': 'role()',
                         '[attr.id]': 'elementId()',
-                        '[attr.aria-selected]': 'isSelected()',
+                        // Autocomplete is always `selectionMode="none"`, so options carry no selection state: Base UI
+                        // omits `aria-selected` / `data-selected` here entirely (rather than rendering `false`).
                         '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
                         '[attr.aria-setsize]': 'ariaSetSize()',
                         '[attr.aria-posinset]': 'ariaPosInSet()',
-                        '[attr.data-selected]': 'isSelected() ? "" : undefined',
                         '[attr.data-highlighted]': 'isHighlighted() ? "" : undefined',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '[hidden]': '!isVisible()',
                         '[attr.data-hidden]': 'isVisible() ? undefined : ""',
                         '(pointerdown)': 'onPointerDown($event)',
-                        '(mousedown)': 'onPointerDown($event)',
-                        '(pointerup)': 'onPointerUp()',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(mouseup)': 'onMouseUp($event)',
+                        '(click)': 'onClick()',
                         '(pointermove)': 'onPointerMove()',
                         '(pointerleave)': 'onPointerLeave($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
 
 /**
  * Renders only when its item is selected (e.g. a checkmark). Reuses the combobox item indicator,
@@ -1419,8 +1369,27 @@ class RdxAutocompleteList {
     constructor() {
         this.root = inject(RdxAutocompleteRoot);
     }
+    onKeydown(event) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        // Base UI bails early when disabled / read-only — don't swallow Enter (e.g. a form submit).
+        if (this.root.disabledState() || this.root.readOnly()) {
+            return;
+        }
+        const hasHighlight = this.root.virtualized()
+            ? this.root.highlightedIndex() >= 0
+            : this.root.highlightedItem() !== null;
+        if (hasHighlight) {
+            // Base UI `stopEvent`: also stop propagation so a parent keydown handler doesn't re-handle
+            // Enter after the selection.
+            event.preventDefault();
+            event.stopPropagation();
+            this.root.selectHighlighted();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteList, isStandalone: true, selector: "[rdxAutocompleteList]", host: { properties: { "attr.role": "root.grid() ? \"grid\" : \"listbox\"", "attr.id": "root.listId" } }, exportAs: ["rdxAutocompleteList"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteList, isStandalone: true, selector: "[rdxAutocompleteList]", host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "root.grid() ? \"grid\" : \"listbox\"", "attr.id": "root.listId" } }, exportAs: ["rdxAutocompleteList"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteList, decorators: [{
             type: Directive,
@@ -1428,8 +1397,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxAutocompleteList]',
                     exportAs: 'rdxAutocompleteList',
                     host: {
+                        // Base UI: the list is a programmatic focus target (`tabindex="-1"`) and selects the highlighted
+                        // item on Enter, for custom layouts that move focus onto the list rather than the input.
+                        tabindex: '-1',
                         '[attr.role]': 'root.grid() ? "grid" : "listbox"',
-                        '[attr.id]': 'root.listId'
+                        '[attr.id]': 'root.listId',
+                        '(keydown)': 'onKeydown($event)'
                     }
                 }]
         }] });
@@ -1445,13 +1418,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxAutocompletePopup {
     constructor() {
         this.root = inject(RdxAutocompleteRoot);
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.popper = injectPopperContentWrapperContext();
         this.element = inject(ElementRef).nativeElement;
-        useScrollLock(this.root.modal);
+        // Activation policy (ADR 0016 §2 + §3): lock page scroll while a modal popup is OPEN, gated on
+        // `open` (not mounted) so the lock releases at close-start. For a **touch** open the anchored
+        // helper only locks when the popup is effectively viewport-width (a small dropdown stays
+        // swipe-to-dismissable on mobile, §3).
+        useAnchoredScrollLock(computed(() => this.root.open() && this.root.modal()), {
+            touchOpen: () => this.root.openedByTouch(),
+            element: () => this.element
+        });
         const unregister = this.root.registerTransitionElement(this.element);
-        inject(DestroyRef).onDestroy(unregister);
-        this.dismissableLayer.dismiss.subscribe(() => this.root.closePopup(true));
+        // Track mounted state so Escape can tell "closing this open popup" from "already closed".
+        this.root.setPopupMounted(true);
+        inject(DestroyRef).onDestroy(() => {
+            unregister();
+            this.root.setPopupMounted(false);
+        });
+        // The popup is this layer's floating element (the inside surface for containment checks).
+        this.floatingContext.setFloatingElement(this.element);
+        // Dismissal (ADR 0015): an outside press, or focus leaving everything, closes the autocomplete. The
+        // input / trigger / clear are registered as "inside" (RdxFloatingInsideElement), so the input keeping
+        // focus — or a press on those parts — never self-dismisses. Escape is owned by the input (it
+        // preventDefaults + closes), so the capability does not handle it (`escapeKey: false`).
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => false,
+            outsidePress: () => true,
+            focusOutside: () => true,
+            onDismiss: (reason, event) => this.root.closePopup(true, reason === 'focus-outside' ? 'focus-out' : 'outside-press', event)
+        });
         // For the "input inside the popup" pattern, move focus to the input once positioned. Use
         // `afterRenderEffect` (not `effect`): when `isPositioned` flips true the popup's final
         // position/visibility is applied in the *following* render, so a synchronous `effect` would
@@ -1463,35 +1460,57 @@ class RdxAutocompletePopup {
             }
             const input = this.root.inputElement();
             if (input && input.closest('[rdxAutocompletePopup]')) {
-                input.focus();
-                input.select();
+                // Base UI: a touch-open focuses the popup itself so Android keeps the virtual keyboard
+                // closed; mouse/keyboard opens focus (and select) the search input as usual.
+                if (this.root.openedByTouch()) {
+                    this.element.focus();
+                }
+                else {
+                    input.focus();
+                    input.select();
+                }
             }
         });
     }
+    /**
+     * Base UI focus handoff: if focus lands on the popup or the list (the `tabindex="-1"` programmatic
+     * focus targets), hand it back to the input so arrow-key navigation (`aria-activedescendant`) keeps
+     * working. Skipped for a touch interaction, where focus is parked on the popup to keep the Android
+     * virtual keyboard closed.
+     */
+    onFocusIn(event) {
+        if (this.root.openedByTouch()) {
+            return;
+        }
+        const input = this.root.inputElement();
+        const target = event.target;
+        if (!input || !target || target === input) {
+            return;
+        }
+        if (target === this.element || target.matches('[rdxAutocompleteList]')) {
+            input.focus();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePopup, isStandalone: true, selector: "[rdxAutocompletePopup]", host: { properties: { "attr.data-state": "root.open() ? \"open\" : \"closed\"", "attr.data-open": "root.open() ? \"\" : undefined", "attr.data-closed": "root.open() ? undefined : \"\"", "attr.data-starting-style": "root.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "root.transitionStatus() === \"ending\" ? \"\" : undefined" } }, providers: [
-            provideRdxDismissableLayerConfig(() => ({
-                disableOutsidePointerEvents: inject(RdxAutocompleteRoot).modal
-            }))
-        ], exportAs: ["rdxAutocompletePopup"], hostDirectives: [{ directive: i1$1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePopup, isStandalone: true, selector: "[rdxAutocompletePopup]", host: { attributes: { "tabindex": "-1" }, listeners: { "focusin": "onFocusIn($event)" }, properties: { "attr.role": "root.inputLayout() === \"inside\" ? \"dialog\" : \"presentation\"", "attr.data-state": "root.open() ? \"open\" : \"closed\"", "attr.data-open": "root.open() ? \"\" : undefined", "attr.data-closed": "root.open() ? undefined : \"\"", "attr.data-starting-style": "root.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "root.transitionStatus() === \"ending\" ? \"\" : undefined" } }, exportAs: ["rdxAutocompletePopup"], hostDirectives: [{ directive: i1$1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAutocompletePopup]',
                     exportAs: 'rdxAutocompletePopup',
-                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
-                    providers: [
-                        provideRdxDismissableLayerConfig(() => ({
-                            disableOutsidePointerEvents: inject(RdxAutocompleteRoot).modal
-                        }))
-                    ],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration],
                     host: {
+                        // Base UI: a `dialog` (focusable, tabindex -1) when the input lives inside the popup, otherwise
+                        // a presentational wrapper around the `listbox` (the List part owns the listbox role).
+                        tabindex: '-1',
+                        '[attr.role]': 'root.inputLayout() === "inside" ? "dialog" : "presentation"',
                         '[attr.data-state]': 'root.open() ? "open" : "closed"',
                         '[attr.data-open]': 'root.open() ? "" : undefined',
                         '[attr.data-closed]': 'root.open() ? undefined : ""',
                         '[attr.data-starting-style]': 'root.transitionStatus() === "starting" ? "" : undefined',
-                        '[attr.data-ending-style]': 'root.transitionStatus() === "ending" ? "" : undefined'
+                        '[attr.data-ending-style]': 'root.transitionStatus() === "ending" ? "" : undefined',
+                        '(focusin)': 'onFocusIn($event)'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -1529,9 +1548,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxAutocompletePortalMisuseGuard {
     constructor() {
         if (isDevMode()) {
-            throw new Error('[rdxAutocompletePortal] is now a structural directive. ' +
+            rdxDevError('autocomplete/portal-on-element', '`rdxAutocompletePortal` is now a structural directive. ' +
                 'Use `*rdxAutocompletePortal` on the positioner element or `<ng-template rdxAutocompletePortal>`. ' +
-                'rdxAutocompletePortalPresence has been removed. See https://radix-ng.com/components/autocomplete.md');
+                'rdxAutocompletePortalPresence has been removed.', 'components/autocomplete');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1545,84 +1564,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Positions the popup relative to the input anchor using the popper engine. Composes the popper
- * content wrapper directly (the same building block the combobox positioner uses) and re-exposes its
- * positioning inputs.
- *
- * @group Components
- */
-class RdxAutocompletePositioner {
-    constructor() {
-        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.sideOffset = input(4, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
-        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
-        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
-        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.updatePositionStrategy = input('optimized', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompletePositioner, isStandalone: true, selector: "[rdxAutocompletePositioner]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "{\n            'boxSizing': 'border-box',\n            '--radix-autocomplete-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-autocomplete-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-autocomplete-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-autocomplete-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-autocomplete-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, exportAs: ["rdxAutocompletePositioner"], hostDirectives: [{ directive: i1$1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxAutocompletePositioner]',
-                    exportAs: 'rdxAutocompletePositioner',
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'updatePositionStrategy'
-                            ]
-                        }
-                    ],
-                    host: {
-                        '[style]': `{
-            'boxSizing': 'border-box',
-            '--radix-autocomplete-content-transform-origin': 'var(--radix-popper-transform-origin)',
-            '--radix-autocomplete-content-available-width': 'var(--radix-popper-available-width)',
-            '--radix-autocomplete-content-available-height': 'var(--radix-popper-available-height)',
-            '--radix-autocomplete-trigger-width': 'var(--radix-popper-anchor-width)',
-            '--radix-autocomplete-trigger-height': 'var(--radix-popper-anchor-height)'
-        }`
-                    }
-                }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }] } });
-
-/**
- * A row in a grid-layout autocomplete list. Groups the items in one row so the root can navigate by
- * row (ArrowUp / ArrowDown) and within a row (ArrowLeft / ArrowRight). Only meaningful when the root
- * has `grid` enabled; the root resolves an item's row from its nearest `[rdxAutocompleteRow]` ancestor.
+ * A visual separator between groups of suggestions (`role="separator"`). Reuses the combobox separator.
  *
  * @group Components
  */
-class RdxAutocompleteRow {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteRow, isStandalone: true, selector: "[rdxAutocompleteRow]", host: { attributes: { "role": "row" } }, exportAs: ["rdxAutocompleteRow"], ngImport: i0 }); }
+class RdxAutocompleteSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteSeparator, isStandalone: true, selector: "[rdxAutocompleteSeparator]", exportAs: ["rdxAutocompleteSeparator"], hostDirectives: [{ directive: i1.RdxComboboxSeparator }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxAutocompleteRow]',
-                    exportAs: 'rdxAutocompleteRow',
-                    host: {
-                        role: 'row'
-                    }
+                    selector: '[rdxAutocompleteSeparator]',
+                    exportAs: 'rdxAutocompleteSeparator',
+                    hostDirectives: [RdxComboboxSeparator]
                 }]
         }] });
 
@@ -1646,8 +1601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 /**
- * Toggles the autocomplete popup. Carries `tabindex="-1"` so it never steals focus from the input.
- * Reuses the combobox trigger behavior.
+ * Toggles the autocomplete popup. Reuses the combobox trigger: a `tabindex="-1"` toggle when the input
+ * sits outside the popup, or the focusable `role="combobox"` control when the input is inside it.
  *
  * @group Components
  */
@@ -1714,6 +1669,7 @@ const _importsAutocomplete = [
     RdxAutocompleteArrow,
     RdxAutocompleteList,
     RdxAutocompleteRow,
+    RdxAutocompleteSeparator,
     RdxAutocompleteItem,
     RdxAutocompleteItemIndicator,
     RdxAutocompleteGroup,
@@ -1740,6 +1696,7 @@ class RdxAutocompleteModule {
             RdxAutocompleteArrow,
             RdxAutocompleteList,
             RdxAutocompleteRow,
+            RdxAutocompleteSeparator,
             RdxAutocompleteItem,
             RdxAutocompleteItemIndicator,
             RdxAutocompleteGroup,
@@ -1762,6 +1719,7 @@ class RdxAutocompleteModule {
             RdxAutocompleteArrow,
             RdxAutocompleteList,
             RdxAutocompleteRow,
+            RdxAutocompleteSeparator,
             RdxAutocompleteItem,
             RdxAutocompleteItemIndicator,
             RdxAutocompleteGroup,
@@ -1782,5 +1740,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxAutocompleteAnchor, RdxAutocompleteArrow, RdxAutocompleteBackdrop, RdxAutocompleteClear, RdxAutocompleteEmpty, RdxAutocompleteGroup, RdxAutocompleteGroupLabel, RdxAutocompleteIcon, RdxAutocompleteInput, RdxAutocompleteInputGroup, RdxAutocompleteItem, RdxAutocompleteItemIndicator, RdxAutocompleteLabel, RdxAutocompleteList, RdxAutocompleteModule, RdxAutocompletePopup, RdxAutocompletePortal, RdxAutocompletePortalMisuseGuard, RdxAutocompletePositioner, RdxAutocompleteRoot, RdxAutocompleteRow, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
+export { RdxAutocompleteAnchor, RdxAutocompleteArrow, RdxAutocompleteBackdrop, RdxAutocompleteClear, RdxAutocompleteEmpty, RdxAutocompleteGroup, RdxAutocompleteGroupLabel, RdxAutocompleteIcon, RdxAutocompleteInput, RdxAutocompleteInputGroup, RdxAutocompleteItem, RdxAutocompleteItemIndicator, RdxAutocompleteLabel, RdxAutocompleteList, RdxAutocompleteModule, RdxAutocompletePopup, RdxAutocompletePortal, RdxAutocompletePortalMisuseGuard, RdxAutocompletePositioner, RdxAutocompleteRoot, RdxAutocompleteRow, RdxAutocompleteSeparator, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
 //# sourceMappingURL=radix-ng-primitives-autocomplete.mjs.map