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

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

@@ -0,0 +1,1744 @@
+import * as i0 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, 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, 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 * 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';
+
+/**
+ * Optional positioning anchor for the popup. Put it on the element the popup should align to — for
+ * example a wrapper that holds the input plus an icon/clear button. When present it takes precedence
+ * over the input. Reuses the combobox anchor behavior.
+ *
+ * @group Components
+ */
+class RdxAutocompleteAnchor {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteAnchor, isStandalone: true, selector: "[rdxAutocompleteAnchor]", exportAs: ["rdxAutocompleteAnchor"], hostDirectives: [{ directive: i1.RdxComboboxAnchor }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteAnchor]',
+                    exportAs: 'rdxAutocompleteAnchor',
+                    hostDirectives: [RdxComboboxAnchor]
+                }]
+        }] });
+
+/**
+ * An optional arrow that points from the popup to the anchor. Composes the popper arrow directly
+ * (the same building block the combobox arrow uses).
+ *
+ * @group Components
+ */
+class RdxAutocompleteArrow {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteArrow, isStandalone: true, selector: "[rdxAutocompleteArrow]", exportAs: ["rdxAutocompleteArrow"], hostDirectives: [{ directive: i1$1.RdxPopperArrow, inputs: ["width", "width", "height", "height"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteArrow]',
+                    exportAs: 'rdxAutocompleteArrow',
+                    hostDirectives: [{ directive: RdxPopperArrow, inputs: ['width', 'height'] }]
+                }]
+        }] });
+
+/**
+ * An overlay rendered beneath the popup in `modal` mode. Exposes `data-open` / `data-closed` for
+ * animation. Reuses the combobox backdrop.
+ *
+ * @group Components
+ */
+class RdxAutocompleteBackdrop {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteBackdrop, isStandalone: true, selector: "[rdxAutocompleteBackdrop]", exportAs: ["rdxAutocompleteBackdrop"], hostDirectives: [{ directive: i1.RdxComboboxBackdrop }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteBackdrop]',
+                    exportAs: 'rdxAutocompleteBackdrop',
+                    hostDirectives: [RdxComboboxBackdrop]
+                }]
+        }] });
+
+// 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 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: 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,
+        readonly: root.readOnly,
+        requiredState: root.requiredState,
+        openOnInputClick: root.openOnInputClick,
+        modal: root.modal,
+        virtualized: root.virtualized,
+        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) => 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: 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, 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,
+        registerChipsNav: () => undefined,
+        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 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. 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. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** Whether the popup is open. */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Initial open state when uncontrolled. */
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Filtering / inline-completion behavior. See {@link AutocompleteMode}. */
+        this.mode = input('list', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Text direction. */
+        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. */
+        this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), alias: 'readOnly', transform: booleanAttribute });
+        /** Whether a value is required (for forms). */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether keyboard navigation wraps at the list boundaries. */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Auto-highlight behavior (matches Base UI):
+         * - `false` (default): never auto-highlight;
+         * - `true` (also the bare `autoHighlight` attribute): highlight the first match as the query changes;
+         * - `'always'`: keep the first navigable item highlighted whenever the popup is open.
+         */
+        this.autoHighlight = input(false, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: coerceAutoHighlight });
+        /** Resolved auto-highlight mode. */
+        this.autoHighlightMode = computed(() => {
+            const value = this.autoHighlight();
+            if (value === 'always') {
+                return 'always';
+            }
+            if (value === true) {
+                return 'input-change';
+            }
+            return 'off';
+        }, ...(ngDevMode ? [{ debugName: "autoHighlightMode" }] : /* istanbul ignore next */ []));
+        /** 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. */
+        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 });
+        /** Whether the popup is modal: locks page scroll and makes outside content inert while open. */
+        this.modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether selecting an item requests submit of the closest form. */
+        this.submitOnItemClick = input(false, { ...(ngDevMode ? { debugName: "submitOnItemClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the list is laid out as a 2D grid (enables row/column arrow navigation). */
+        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` → 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 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 (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. */
+        this.onValueChange = output();
+        /** Emits when the popup opens or closes. */
+        this.onOpenChange = output();
+        /** Emits as the highlight moves, with the item's value, its index in {@link filteredItems}, and the reason. */
+        this.onItemHighlighted = output();
+        /** Emits after the open/close transition (including any exit animation) finishes. */
+        this.onOpenChangeComplete = output();
+        /** 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.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 (`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; 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 */ []));
+        /** 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)
+        });
+        /** 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();
+            if (initial !== undefined && untracked(this.value) === '') {
+                this.value.set(initial);
+            }
+        });
+        effect(() => {
+            if (untracked(this.open) === false && this.defaultOpen()) {
+                this.open.set(true);
+            }
+        });
+        // Virtualized object values can't be labelled from the DOM — warn once in dev.
+        if (isDevMode()) {
+            effect(() => {
+                if (!this.virtualized() || this.itemToStringValue()) {
+                    return;
+                }
+                if (this.items()?.some((value) => value !== null && typeof value === 'object')) {
+                    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');
+                }
+            });
+        }
+    }
+    setSuppressInline(value) {
+        this.engine.setSuppressInline(value);
+    }
+    /** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
+    openForBrowse(reason = 'none', event = new Event('autocomplete.open-change')) {
+        if (!this.open()) {
+            this.typed.set(false);
+        }
+        this.setOpen(true, reason, event);
+        this.engine.selectInputText();
+        if (this.autoHighlightMode() === 'always') {
+            this.engine.setPendingHighlightEdge('first');
+        }
+    }
+    /** Opens the popup and highlights the given edge once the list mounts. */
+    openAndHighlight(edge, reason = 'list-navigation', event = new Event('autocomplete.open-change')) {
+        if (!this.open()) {
+            this.typed.set(false);
+        }
+        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) {
+        const current = this.value();
+        if (!current) {
+            return false;
+        }
+        return value === current || isItemEqualToValue(value, current, this.isItemEqualToValue());
+    }
+    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, reason = 'none', event = new Event('autocomplete.open-change')) {
+        if (!this.open()) {
+            return;
+        }
+        if (!this.setOpen(false, reason, event)) {
+            return;
+        }
+        this.engine.clearHighlightState();
+        this.engine.clearInlinePreview();
+        if (revert) {
+            this.typed.set(false);
+        }
+        this.markAsTouched();
+    }
+    /** Updates the input text from user typing (marks it a fresh query, emits change). */
+    setQuery(value) {
+        this.commitValue(value, 'input-change');
+        this.typed.set(true);
+        // 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.engine.setPendingHighlightEdge('first-match');
+        }
+    }
+    labelFor(value) {
+        const custom = this.itemToStringValue();
+        if (custom) {
+            return custom(value);
+        }
+        const item = this.engine.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.isItemEqualToValue()));
+        return item ? item.textValue() : itemToStringLabel(value);
+    }
+    itemId(index) {
+        return this.engine.itemId(index);
+    }
+    isVisible(item) {
+        return this.engine.isVisible(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()), event);
+    }
+    /** Selects the filtered item at `index` (virtualized mode). */
+    selectIndex(index, event = new Event('autocomplete.item-press')) {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
+        const value = this.engine.filteredItems()[index];
+        if (value === undefined) {
+            return;
+        }
+        this.commitSelection(this.labelFor(value), event);
+    }
+    /** Commits a selection: the input value becomes the item's label, the popup closes. */
+    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.closePopup(false, 'item-press', event);
+        this.engine.restoreFocusAfterSelect(activeBefore);
+        this.maybeSubmit();
+    }
+    maybeSubmit() {
+        if (this.submitOnItemClick()) {
+            this.engine.inputElement()?.form?.requestSubmit?.();
+        }
+    }
+    selectHighlighted(event = new Event('autocomplete.item-press')) {
+        if (this.virtualized()) {
+            const index = this.engine.highlightedIndex();
+            if (index >= 0) {
+                this.selectIndex(index, event);
+            }
+            return;
+        }
+        const item = this.engine.highlightedItem();
+        if (item) {
+            this.handleSelect(item, event);
+        }
+    }
+    // --- 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 (direction === 1) {
+            this.engine.highlightNext();
+        }
+        else {
+            this.engine.highlightPrevious();
+        }
+    }
+    moveDown() {
+        this.engine.highlightNext();
+    }
+    moveUp() {
+        this.engine.highlightPrevious();
+    }
+    moveRight() {
+        this.engine.highlightNextColumn();
+    }
+    moveLeft() {
+        this.engine.highlightPreviousColumn();
+    }
+    highlightFirst(reason = 'keyboard') {
+        this.engine.highlightFirst(reason);
+    }
+    highlightLast(reason = 'keyboard') {
+        this.engine.highlightLast(reason);
+    }
+    highlightIndex(index, reason) {
+        this.engine.highlightIndex(index, reason);
+    }
+    setHighlight(item, reason) {
+        this.engine.setHighlight(item, reason);
+    }
+    clearHighlightState() {
+        this.engine.clearHighlightState();
+    }
+    isKeyboardActive() {
+        return this.engine.isKeyboardActive();
+    }
+    setKeyboardActive(value) {
+        this.engine.setKeyboardActive(value);
+    }
+    clearValue() {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
+        this.commitValue('', 'input-clear');
+        this.typed.set(true);
+        this.engine.clearInlinePreview();
+        this.engine.clearHighlightState();
+        this.engine.focusInput();
+    }
+    focusInput() {
+        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 ?? ''));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        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 }, 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 },
+            // 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: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteRoot]',
+                    exportAs: 'rdxAutocompleteRoot',
+                    providers: [
+                        provideComboboxRootContext(context),
+                        { 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 }] }], 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.
+ *
+ * @group Components
+ */
+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": "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: [RdxFloatingInsideElement],
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-label': 'Clear',
+                        '[hidden]': 'isEmpty()',
+                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * 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 {
+    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: Component,
+            args: [{
+                    selector: '[rdxAutocompleteEmpty]',
+                    exportAs: 'rdxAutocompleteEmpty',
+                    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'
+                    }
+                }]
+        }] });
+
+/**
+ * Groups related options under a shared label. Hides itself when all of its items are filtered out.
+ * Reuses the combobox group (and exposes the combobox group context for the label + items).
+ *
+ * @group Components
+ */
+class RdxAutocompleteGroup {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteGroup, isStandalone: true, selector: "[rdxAutocompleteGroup]", exportAs: ["rdxAutocompleteGroup"], hostDirectives: [{ directive: i1.RdxComboboxGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteGroup]',
+                    exportAs: 'rdxAutocompleteGroup',
+                    hostDirectives: [RdxComboboxGroup]
+                }]
+        }] });
+
+/**
+ * Accessible label for a {@link RdxAutocompleteGroup}. Wires itself up via `aria-labelledby`. Reuses
+ * the combobox group label.
+ *
+ * @group Components
+ */
+class RdxAutocompleteGroupLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteGroupLabel, isStandalone: true, selector: "[rdxAutocompleteGroupLabel]", exportAs: ["rdxAutocompleteGroupLabel"], hostDirectives: [{ directive: i1.RdxComboboxGroupLabel }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteGroupLabel]',
+                    exportAs: 'rdxAutocompleteGroupLabel',
+                    hostDirectives: [RdxComboboxGroupLabel]
+                }]
+        }] });
+
+/**
+ * Decorative icon inside the trigger. Hidden from assistive technology. Reuses the combobox icon.
+ *
+ * @group Components
+ */
+class RdxAutocompleteIcon {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteIcon, isStandalone: true, selector: "[rdxAutocompleteIcon]", exportAs: ["rdxAutocompleteIcon"], hostDirectives: [{ directive: i1.RdxComboboxIcon }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteIcon]',
+                    exportAs: 'rdxAutocompleteIcon',
+                    hostDirectives: [RdxComboboxIcon]
+                }]
+        }] });
+
+/**
+ * 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
+ * `aria-activedescendant`. In `both` / `inline` modes it shows the active item's inline completion
+ * with the completed suffix selected. Integrates with Field for labeling and validation state.
+ *
+ * @group Components
+ */
+class RdxAutocompleteInput {
+    constructor() {
+        this.root = inject(RdxAutocompleteRoot);
+        this.element = inject(ElementRef).nativeElement;
+        this.fieldRootContext = injectFieldRootContext(true);
+        /** The input id; Field labels and descriptions reference it for accessible relationships. */
+        this.id = input(injectId('rdx-autocomplete-input-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Marks the input as invalid independently of any Field state. */
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // Mirrors the configured mode (matches Base UI): 'list' | 'both' | 'inline' | 'none' — all valid
+        // `aria-autocomplete` tokens. Must reflect the static mechanism, not the transient inline preview.
+        this.ariaAutocomplete = computed(() => this.root.mode(), ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.root.disabledState() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.root.requiredState() || Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.filledState = computed(() => Boolean(this.root.value()) || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
+        this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
+        this.describedBy = computed(() => {
+            if (!this.fieldRootContext) {
+                return undefined;
+            }
+            const ids = [
+                ...this.fieldRootContext.descriptionIds(),
+                ...(this.fieldRootContext.invalidState() ? this.fieldRootContext.errorIds() : [])
+            ];
+            return ids.length ? ids.join(' ') : undefined;
+        }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        /** Whether an IME composition is in progress (CJK). While composing, don't filter or select. */
+        this.composing = false;
+        this.dataAttr = attr$1;
+        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());
+        });
+        // Select the completed part of an inline preview so the next keystroke replaces it: the suffix
+        // after the typed prefix when the label prefix-matches, otherwise the whole navigated label.
+        afterRenderEffect(() => {
+            const preview = this.root.inlinePreview();
+            if (preview === null) {
+                return;
+            }
+            const query = this.root.query();
+            const start = query && preview.toLowerCase().startsWith(query.toLowerCase()) ? query.length : 0;
+            this.element.setSelectionRange(start, preview.length);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (this.root.inputElement() === this.element) {
+                this.root.setInputElement(null);
+            }
+        });
+    }
+    onInput(event) {
+        if (this.composing || event.isComposing) {
+            return;
+        }
+        this.commitInput(event.target.value, event);
+    }
+    onCompositionEnd(event) {
+        this.composing = false;
+        this.commitInput(event.target.value, event);
+    }
+    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(event) {
+        if (this.root.openOnInputClick()) {
+            this.root.openForBrowse('input-press', event);
+        }
+    }
+    onFocus() {
+        this.fieldRootContext?.setFocused(true);
+    }
+    onBlur() {
+        this.fieldRootContext?.setFocused(false);
+        this.fieldRootContext?.setTouched(true);
+    }
+    onKeydown(event) {
+        if (event.isComposing || this.composing) {
+            return;
+        }
+        // Backspace / Delete must never re-add an inline completion for the resulting edit.
+        this.root.setSuppressInline(event.key === 'Backspace' || event.key === 'Delete');
+        if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+            return;
+        }
+        const open = this.root.open();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.root.setKeyboardActive(true);
+                if (!open) {
+                    this.root.openAndHighlight('first', 'list-navigation', event);
+                }
+                else {
+                    this.root.moveDown();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.root.setKeyboardActive(true);
+                if (!open) {
+                    this.root.openAndHighlight('last', 'list-navigation', event);
+                }
+                else {
+                    this.root.moveUp();
+                }
+                break;
+            case 'ArrowRight':
+                if (open && this.root.grid()) {
+                    event.preventDefault();
+                    this.root.setKeyboardActive(true);
+                    this.root.moveRight();
+                }
+                break;
+            case 'ArrowLeft':
+                if (open && this.root.grid()) {
+                    event.preventDefault();
+                    this.root.setKeyboardActive(true);
+                    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()
+                        ? this.root.highlightedIndex() >= 0
+                        : this.root.highlightedItem() !== null;
+                    if (hasHighlight) {
+                        event.preventDefault();
+                        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, 'none', event);
+                    }
+                }
+                break;
+            case 'Escape':
+                if (open) {
+                    event.preventDefault();
+                    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':
+                // 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($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, 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()',
+                        '[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())',
+                        '(input)': 'onInput($event)',
+                        '(click)': 'onClick($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(compositionstart)': 'composing = true',
+                        '(compositionend)': 'onCompositionEnd($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+
+const attr = (value) => (value ? '' : undefined);
+/**
+ * Optional wrapper around the input and its adornments (icon, clear, trigger). Mirrors the input's
+ * state via `data-*` so the whole group can be styled together (focus ring, disabled, etc.).
+ *
+ * @group Components
+ */
+class RdxAutocompleteInputGroup {
+    constructor() {
+        this.root = inject(RdxAutocompleteRoot);
+        this.dataAttr = attr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteInputGroup, isStandalone: true, selector: "[rdxAutocompleteInputGroup]", host: { properties: { "attr.data-popup-open": "dataAttr(root.open())", "attr.data-disabled": "dataAttr(root.disabledState())", "attr.data-required": "dataAttr(root.requiredState())", "attr.data-filled": "dataAttr(!!root.value())" } }, exportAs: ["rdxAutocompleteInputGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteInputGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteInputGroup]',
+                    exportAs: 'rdxAutocompleteInputGroup',
+                    host: {
+                        '[attr.data-popup-open]': 'dataAttr(root.open())',
+                        '[attr.data-disabled]': 'dataAttr(root.disabledState())',
+                        '[attr.data-required]': 'dataAttr(root.requiredState())',
+                        '[attr.data-filled]': 'dataAttr(!!root.value())'
+                    }
+                }]
+        }] });
+
+/**
+ * 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 {
+        isSelected: item.isSelected,
+        isHighlighted: item.isHighlighted,
+        disabled: item.disabled,
+        value: item.value
+    };
+};
+/**
+ * A selectable suggestion. Registers itself with the root for filtering and navigation. Highlight is
+ * virtual (`data-highlighted` + `aria-activedescendant` on the input) — items never take DOM focus.
+ * Selecting an item writes its text into the input. Unlike the combobox item, the `value` is optional;
+ * when omitted, selection falls back to the option's text content (autocomplete's value is the input string).
+ *
+ * @group Components
+ */
+class RdxAutocompleteItem {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        this.id = injectId('rdx-autocomplete-item-');
+        /**
+         * 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. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The option's index in the list. Required in virtualized mode. */
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+        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()) {
+                return;
+            }
+            if (!this.textValueInput()) {
+                const clone = this.element.cloneNode(true);
+                clone.querySelectorAll('[rdxAutocompleteItemIndicator]').forEach((node) => node.remove());
+                this.autoTextValue.set(clone.textContent?.trim() ?? '');
+            }
+            this.rootContext.registerItem(this);
+            this.group?.registerItem(this);
+        });
+        destroyRef.onDestroy(() => {
+            if (this.virtualized()) {
+                return;
+            }
+            this.rootContext.unregisterItem(this);
+            this.group?.unregisterItem(this);
+        });
+        // Keep the highlighted option in view while navigating a scrollable popup. `block: 'nearest'`
+        // makes hover a no-op (the item is already visible) and only scrolls on keyboard navigation.
+        afterRenderEffect(() => {
+            if (!this.virtualized() && this.isHighlighted()) {
+                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();
+    }
+    commitSelection() {
+        if (this.virtualized()) {
+            this.rootContext.selectIndex(this.index() ?? -1);
+        }
+        else {
+            this.rootContext.select(this);
+        }
+    }
+    onPointerMove() {
+        // Hover highlighting disabled: leave `data-highlighted` to keyboard/auto-highlight only.
+        if (!this.rootContext.highlightItemOnHover()) {
+            return;
+        }
+        if (this.rootContext.isKeyboardActive()) {
+            this.rootContext.setKeyboardActive(false);
+            return;
+        }
+        if (this.disabled()) {
+            return;
+        }
+        if (this.virtualized()) {
+            this.rootContext.highlightIndex(this.index() ?? -1, 'pointer');
+        }
+        else if (this.isVisible()) {
+            this.rootContext.setHighlight(this, 'pointer');
+        }
+    }
+    // Clear a pointer-driven highlight when the cursor leaves the list (unless `keepHighlight`).
+    // Moving to another element inside the list keeps it (the next item's move re-highlights).
+    onPointerLeave(event) {
+        if (event.pointerType === 'touch' ||
+            !this.rootContext.open() ||
+            !this.rootContext.highlightItemOnHover() ||
+            this.rootContext.keepHighlight()) {
+            return;
+        }
+        const related = event.relatedTarget;
+        const list = related && document.getElementById(this.rootContext.listId);
+        if (list && list.contains(related)) {
+            return;
+        }
+        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: { 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,
+            args: [{
+                    selector: '[rdxAutocompleteItem]',
+                    exportAs: 'rdxAutocompleteItem',
+                    providers: [provideComboboxItemContext(itemContext)],
+                    host: {
+                        '[attr.role]': 'role()',
+                        '[attr.id]': 'elementId()',
+                        // 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-highlighted]': 'isHighlighted() ? "" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[hidden]': '!isVisible()',
+                        '[attr.data-hidden]': 'isVisible() ? undefined : ""',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(mouseup)': 'onMouseUp($event)',
+                        '(click)': 'onClick()',
+                        '(pointermove)': 'onPointerMove()',
+                        '(pointerleave)': 'onPointerLeave($event)'
+                    }
+                }]
+        }], 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,
+ * which reads the item context provided by {@link RdxAutocompleteItem}.
+ *
+ * @group Components
+ */
+class RdxAutocompleteItemIndicator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteItemIndicator, isStandalone: true, selector: "[rdxAutocompleteItemIndicator]", exportAs: ["rdxAutocompleteItemIndicator"], hostDirectives: [{ directive: i1.RdxComboboxItemIndicator }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteItemIndicator]',
+                    exportAs: 'rdxAutocompleteItemIndicator',
+                    hostDirectives: [RdxComboboxItemIndicator]
+                }]
+        }] });
+
+/**
+ * An accessible label for the autocomplete. Registers its id so the input (and trigger) reference it
+ * via `aria-labelledby`. Reuses the combobox label behavior.
+ *
+ * @group Components
+ */
+class RdxAutocompleteLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteLabel, isStandalone: true, selector: "[rdxAutocompleteLabel]", exportAs: ["rdxAutocompleteLabel"], hostDirectives: [{ directive: i1.RdxComboboxLabel }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteLabel]',
+                    exportAs: 'rdxAutocompleteLabel',
+                    hostDirectives: [RdxComboboxLabel]
+                }]
+        }] });
+
+/**
+ * The listbox (or grid) container for suggestions. Carries the id referenced by the input's
+ * `aria-controls`, and switches its role to `grid` when the root has `grid` enabled.
+ *
+ * @group Components
+ */
+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: { 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,
+            args: [{
+                    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',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }] });
+
+/**
+ * The popup surface. Composes the popper content (for `data-side` / `data-align`) and a dismissable
+ * layer for outside-dismiss. It does **not** trap focus — focus stays in the input throughout. When
+ * the input lives **inside** the popup (the "input in popup" / emoji-picker pattern), it moves focus
+ * to the input once the popup is positioned.
+ *
+ * @group Components
+ */
+class RdxAutocompletePopup {
+    constructor() {
+        this.root = inject(RdxAutocompleteRoot);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
+        this.popper = injectPopperContentWrapperContext();
+        this.element = inject(ElementRef).nativeElement;
+        // 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);
+        // 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
+        // call `focus()` while the element is still unfocusable and silently no-op. Running after the
+        // render guarantees the input is focusable.
+        afterRenderEffect(() => {
+            if (!this.popper.isPositioned() || !this.root.open()) {
+                return;
+            }
+            const input = this.root.inputElement();
+            if (input && input.closest('[rdxAutocompletePopup]')) {
+                // 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: { 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, 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',
+                        '(focusin)': 'onFocusIn($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Structural directive that teleports the autocomplete popup into a container (default
+ * `document.body`) while the autocomplete is open, keeping it mounted until any CSS exit `@keyframes`
+ * finishes. Composes the structural {@link RdxComboboxPortal} (which reads the open state from the
+ * combobox root context provided by `RdxAutocompleteRoot`).
+ *
+ * Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxAutocompletePortal rdxAutocompletePositioner>` — or as an explicit
+ * `<ng-template rdxAutocompletePortal>`. For a custom container use the explicit form with `[container]`.
+ *
+ * @group Components
+ */
+class RdxAutocompletePortal {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePortal, isStandalone: true, selector: "ng-template[rdxAutocompletePortal]", exportAs: ["rdxAutocompletePortal"], hostDirectives: [{ directive: i1.RdxComboboxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxAutocompletePortal]',
+                    exportAs: 'rdxAutocompletePortal',
+                    hostDirectives: [{ directive: RdxComboboxPortal, inputs: ['container'] }]
+                }]
+        }] });
+/**
+ * Dev-mode guard: `rdxAutocompletePortal` is now structural, so the old `<div rdxAutocompletePortal>`
+ * markup would silently stop portaling — fail loudly instead.
+ *
+ * @group Components
+ */
+class RdxAutocompletePortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            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.', 'components/autocomplete');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePortalMisuseGuard, isStandalone: true, selector: "[rdxAutocompletePortal]:not(ng-template)", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePortalMisuseGuard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompletePortal]:not(ng-template)'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * A visual separator between groups of suggestions (`role="separator"`). Reuses the combobox separator.
+ *
+ * @group Components
+ */
+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: RdxAutocompleteSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteSeparator]',
+                    exportAs: 'rdxAutocompleteSeparator',
+                    hostDirectives: [RdxComboboxSeparator]
+                }]
+        }] });
+
+/**
+ * A polite live region for async status (loading, result counts) announced without moving focus.
+ * Reuses the combobox status region.
+ *
+ * @group Components
+ */
+class RdxAutocompleteStatus {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteStatus, isStandalone: true, selector: "[rdxAutocompleteStatus]", exportAs: ["rdxAutocompleteStatus"], hostDirectives: [{ directive: i1.RdxComboboxStatus }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteStatus]',
+                    exportAs: 'rdxAutocompleteStatus',
+                    hostDirectives: [RdxComboboxStatus]
+                }]
+        }] });
+
+/**
+ * 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
+ */
+class RdxAutocompleteTrigger {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteTrigger, isStandalone: true, selector: "button[rdxAutocompleteTrigger]", exportAs: ["rdxAutocompleteTrigger"], hostDirectives: [{ directive: i1.RdxComboboxTrigger }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxAutocompleteTrigger]',
+                    exportAs: 'rdxAutocompleteTrigger',
+                    hostDirectives: [RdxComboboxTrigger]
+                }]
+        }] });
+
+/**
+ * Renders the current input value as text. Useful for a read-only display of the committed value.
+ * Read `slotText()` in the template. Exposes `data-placeholder` while the value is empty.
+ *
+ * @example
+ * <span #value="rdxAutocompleteValue" rdxAutocompleteValue placeholder="Empty">{{ value.slotText() }}</span>
+ *
+ * @group Components
+ */
+class RdxAutocompleteValue {
+    constructor() {
+        this.root = inject(RdxAutocompleteRoot);
+        /** Text shown when the value is empty. */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => !this.root.value(), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        /** The current input value, or the `placeholder` when empty. */
+        this.slotText = computed(() => this.root.value() || (this.placeholder() ?? ''), ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompleteValue, isStandalone: true, selector: "[rdxAutocompleteValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxAutocompleteValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteValue]',
+                    exportAs: 'rdxAutocompleteValue',
+                    host: {
+                        '[attr.data-placeholder]': 'isEmpty() ? "" : undefined'
+                    }
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+const _importsAutocomplete = [
+    RdxAutocompleteRoot,
+    RdxAutocompleteAnchor,
+    RdxAutocompleteLabel,
+    RdxAutocompleteInputGroup,
+    RdxAutocompleteInput,
+    RdxAutocompleteValue,
+    RdxAutocompleteTrigger,
+    RdxAutocompleteIcon,
+    RdxAutocompleteClear,
+    RdxAutocompletePortal,
+    RdxAutocompletePortalMisuseGuard,
+    RdxAutocompleteBackdrop,
+    RdxAutocompletePositioner,
+    RdxAutocompletePopup,
+    RdxAutocompleteArrow,
+    RdxAutocompleteList,
+    RdxAutocompleteRow,
+    RdxAutocompleteSeparator,
+    RdxAutocompleteItem,
+    RdxAutocompleteItemIndicator,
+    RdxAutocompleteGroup,
+    RdxAutocompleteGroupLabel,
+    RdxAutocompleteEmpty,
+    RdxAutocompleteStatus
+];
+class RdxAutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteModule, imports: [RdxAutocompleteRoot,
+            RdxAutocompleteAnchor,
+            RdxAutocompleteLabel,
+            RdxAutocompleteInputGroup,
+            RdxAutocompleteInput,
+            RdxAutocompleteValue,
+            RdxAutocompleteTrigger,
+            RdxAutocompleteIcon,
+            RdxAutocompleteClear,
+            RdxAutocompletePortal,
+            RdxAutocompletePortalMisuseGuard,
+            RdxAutocompleteBackdrop,
+            RdxAutocompletePositioner,
+            RdxAutocompletePopup,
+            RdxAutocompleteArrow,
+            RdxAutocompleteList,
+            RdxAutocompleteRow,
+            RdxAutocompleteSeparator,
+            RdxAutocompleteItem,
+            RdxAutocompleteItemIndicator,
+            RdxAutocompleteGroup,
+            RdxAutocompleteGroupLabel,
+            RdxAutocompleteEmpty,
+            RdxAutocompleteStatus], exports: [RdxAutocompleteRoot,
+            RdxAutocompleteAnchor,
+            RdxAutocompleteLabel,
+            RdxAutocompleteInputGroup,
+            RdxAutocompleteInput,
+            RdxAutocompleteValue,
+            RdxAutocompleteTrigger,
+            RdxAutocompleteIcon,
+            RdxAutocompleteClear,
+            RdxAutocompletePortal,
+            RdxAutocompletePortalMisuseGuard,
+            RdxAutocompleteBackdrop,
+            RdxAutocompletePositioner,
+            RdxAutocompletePopup,
+            RdxAutocompleteArrow,
+            RdxAutocompleteList,
+            RdxAutocompleteRow,
+            RdxAutocompleteSeparator,
+            RdxAutocompleteItem,
+            RdxAutocompleteItemIndicator,
+            RdxAutocompleteGroup,
+            RdxAutocompleteGroupLabel,
+            RdxAutocompleteEmpty,
+            RdxAutocompleteStatus] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._importsAutocomplete],
+                    exports: [..._importsAutocomplete]
+                }]
+        }] });
+
+/**
+ * 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, RdxAutocompleteSeparator, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
+//# sourceMappingURL=radix-ng-primitives-autocomplete.mjs.map