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

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

@@ -0,0 +1,1786 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, booleanAttribute, Injector, model, input, computed, numberAttribute, output, signal, effect, untracked, isDevMode, ElementRef, afterNextRender, afterRenderEffect, DestroyRef, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/combobox';
+import { RdxComboboxAnchor, RdxComboboxBackdrop, provideComboboxRootContext, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, injectComboboxRootContext, injectComboboxGroupContext, provideComboboxItemContext, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxPortal, RdxComboboxStatus, RdxComboboxTrigger } from '@radix-ng/primitives/combobox';
+import * as i1$1 from '@radix-ng/primitives/popper';
+import { RdxPopperArrow, RdxPopper, RdxPopperAnchor, injectPopperContentWrapperContext, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayerBranch, RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { useTransitionStatus, injectId, useFilter, useListHighlight, isItemEqualToValue, itemToStringLabel, useScrollLock } from '@radix-ng/primitives/core';
+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]
+                }]
+        }] });
+
+/**
+ * Builds the {@link RdxComboboxRootContext} the autocomplete parts consume. Autocomplete reuses the
+ * combobox parts (List, Popup, Positioner, Item, …) verbatim, so the root exposes the exact combobox
+ * context shape — configured for a single-value, `selectionMode: 'none'` control whose value is the
+ * input string. Autocomplete-specific state (mode, inline completion, grid) is read by the local
+ * parts via direct injection of {@link RdxAutocompleteRoot}.
+ */
+const context = () => {
+    const root = inject(RdxAutocompleteRoot);
+    return {
+        listId: root.listId,
+        labelId: root.labelId,
+        setLabelId: (id) => root.labelId.set(id),
+        dir: root.dir,
+        value: root.value,
+        inputValue: root.value,
+        open: root.open,
+        multiple: root.alwaysFalse,
+        selectionMode: root.noneMode,
+        disabledState: root.disabledState,
+        readonly: root.readOnly,
+        requiredState: root.requiredState,
+        openOnInputClick: root.openOnInputClick,
+        modal: root.modal,
+        virtualized: root.virtualized,
+        filteredItems: root.filteredItems,
+        highlightedItem: root.highlightedItem,
+        highlightedIndex: root.highlightedIndex.asReadonly(),
+        activeId: root.activeId,
+        itemId: (index) => root.itemId(index),
+        isKeyboardActive: () => root.isKeyboardActive(),
+        setKeyboardActive: (value) => root.setKeyboardActive(value),
+        transitionStatus: root.transitionStatus,
+        registerTransitionElement: root.registerTransitionElement,
+        visibleCount: root.visibleCount,
+        isVisible: (item) => root.isVisible(item),
+        isSelected: (value) => root.isSelectedValue(value),
+        registerItem: (item) => root.registerItem(item),
+        unregisterItem: (item) => root.unregisterItem(item),
+        highlight: root.highlight,
+        highlightNext: () => root.moveDown(),
+        highlightPrevious: () => root.moveUp(),
+        highlightFirst: () => root.highlightFirst('keyboard'),
+        highlightLast: () => root.highlightLast('keyboard'),
+        highlightIndex: (index, reason) => root.highlightIndex(index, reason),
+        setHighlight: (item, reason) => root.setHighlight(item, reason),
+        clearHighlight: () => root.clearHighlightState(),
+        highlightItemOnHover: root.highlightItemOnHover,
+        keepHighlight: root.keepHighlight,
+        inputElement: root.inputElement.asReadonly(),
+        setInputElement: (el) => root.inputElement.set(el),
+        registerTrigger: (el) => (root.triggerElement = el),
+        focusInput: () => root.focusInput(),
+        openPopup: () => root.setOpen(true),
+        openForBrowse: () => root.openForBrowse(),
+        closePopup: (revert = true) => root.closePopup(revert),
+        setInputValue: (value) => root.setQuery(value),
+        openAndHighlight: (edge) => root.openAndHighlight(edge),
+        select: (item) => root.handleSelect(item),
+        selectIndex: (index) => root.selectIndex(index),
+        selectHighlighted: () => root.selectHighlighted(),
+        clearSelection: () => root.clearValue(),
+        removeValue: () => undefined,
+        removeLastValue: () => undefined,
+        registerChipsNav: () => undefined,
+        focusLastChip: () => false,
+        labelFor: (value) => root.labelFor(value),
+        markAsTouched: () => root.markAsTouched()
+    };
+};
+/**
+ * `autoHighlight` transform: pass `'always'` through verbatim, coerce everything else as a boolean
+ * attribute (so the bare `autoHighlight` attribute reads `true`).
+ *
+ * Kept as a named module-level function rather than an inline `transform` arrow: compodoc 1.2.1
+ * (the metadata source for the API contract and Storybook ArgTypes) hangs parsing an inline arrow
+ * combined with explicit generic union type arguments on `input()`. A plain function reference sidesteps it.
+ */
+function coerceAutoHighlight(value) {
+    return value === 'always' ? 'always' : booleanAttribute(value);
+}
+/**
+ * Root of an Autocomplete — a text input with a filtered list of suggestions. Built on the combobox
+ * engine with `selectionMode: 'none'`, so its value **is** the input string: typing, selecting an
+ * item, or clearing all change a single string value. Owns input text, open state, filtering, inline
+ * completion, and highlight-model navigation, and provides them to the combobox parts. Implements
+ * `ControlValueAccessor` (the form value is the input string).
+ *
+ * @group Components
+ */
+class RdxAutocompleteRoot {
+    constructor() {
+        this.injector = inject(Injector);
+        /** 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.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /** 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. `true` (default) paints `data-highlighted`
+         * on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
+         * from the `data-highlighted` (keyboard) state. Clicking an item still selects it.
+         */
+        this.highlightItemOnHover = input(true, { ...(ngDevMode ? { debugName: "highlightItemOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether a pointer-driven highlight is kept when the cursor leaves the list. `false` (default)
+         * clears the highlight on pointer-leave; `true` retains the last hovered item highlighted. Keyboard
+         * navigation and auto-highlight are unaffected.
+         */
+        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` (default): locale-aware "contains" via {@link useFilter};
+         * - a function: custom matching;
+         * - `null`: built-in filtering disabled (the consumer controls which items exist).
+         */
+        this.filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /** Maximum number of matching items to show. `-1` (default) means no limit. */
+        this.limit = input(-1, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The full set of item values, used as the source of truth for filtering and navigation in
+         * {@link virtualized} mode (where only a window of `RdxAutocompleteItem` is mounted).
+         */
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Whether the list is externally virtualized (navigation runs over {@link items} by index). */
+        this.virtualized = input(false, { ...(ngDevMode ? { debugName: "virtualized" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** How item values are compared for equality (function or object key). */
+        this.by = input(...(ngDevMode ? [undefined, { debugName: "by" }] : /* istanbul ignore next */ []));
+        /** 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();
+        this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
+        /** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
+        this.transitionStatus = this.transition.status;
+        /** Registers the popup element whose animation determines transition completion. */
+        this.registerTransitionElement = this.transition.registerElement;
+        this.listId = injectId('rdx-autocomplete-list-');
+        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+        /** Constant signals exposed to the combobox context (autocomplete is always single-value). */
+        this.alwaysFalse = signal(false, ...(ngDevMode ? [{ debugName: "alwaysFalse" }] : /* istanbul ignore next */ []));
+        this.noneMode = signal('none', ...(ngDevMode ? [{ debugName: "noneMode" }] : /* istanbul ignore next */ []));
+        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.required(), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.defaultFilter = useFilter();
+        /** Whether built-in filtering applies in the current mode. */
+        this.filteringMode = computed(() => this.mode() === 'list' || this.mode() === 'both', ...(ngDevMode ? [{ debugName: "filteringMode" }] : /* istanbul ignore next */ []));
+        /** Whether inline completion applies in the current mode. */
+        this.inlineMode = computed(() => this.mode() === 'both' || this.mode() === 'inline', ...(ngDevMode ? [{ debugName: "inlineMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the input text is a fresh user query rather than a committed selection's label. While
+         * `false` (just opened, or showing a committed selection), the list is unfiltered so the user can
+         * browse; it flips `true` on the first keystroke.
+         */
+        this.typed = signal(false, ...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
+        /** The text the user actually typed, used as the filter query. */
+        this.query = computed(() => (this.typed() ? (this.value() ?? '') : ''), ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        /** Transient inline-completion preview (the active item's label), or `null`. */
+        this.inlinePreview = signal(null, ...(ngDevMode ? [{ debugName: "inlinePreview" }] : /* istanbul ignore next */ []));
+        /** What the input element displays: the inline preview if any, else the committed value. */
+        this.displayValue = computed(() => this.inlinePreview() ?? this.value() ?? '', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        /** Suppresses inline completion for the current edit (set while a delete key is pressed). */
+        this.suppressInline = false;
+        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        /** Registered items, sorted into DOM order. */
+        this.orderedItems = computed(() => [...this._items()].sort((a, b) => domOrder(a.element, b.element)), ...(ngDevMode ? [{ debugName: "orderedItems" }] : /* istanbul ignore next */ []));
+        /** Matching items in DOM order, capped at `limit`. The set of items the list shows. */
+        this.visibleItems = computed(() => {
+            const matching = this.orderedItems().filter((item) => this.matchesFilter(item));
+            const limit = this.limit();
+            return limit >= 0 ? matching.slice(0, limit) : matching;
+        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        this.visibleSet = computed(() => new Set(this.visibleItems()), ...(ngDevMode ? [{ debugName: "visibleSet" }] : /* istanbul ignore next */ []));
+        /** The filtered item values an external virtualizer should render. */
+        this.filteredItems = computed(() => {
+            const data = this.items();
+            if (data === undefined) {
+                return this.visibleItems().map((item) => item.value());
+            }
+            const limit = this.limit();
+            const cap = (arr) => (limit >= 0 ? arr.slice(0, limit) : arr);
+            if (!this.filteringMode()) {
+                return cap(data);
+            }
+            const filter = this.filter();
+            if (filter === null) {
+                return cap(data);
+            }
+            const query = this.query();
+            if (!query) {
+                return cap(data);
+            }
+            const matcher = filter ?? this.defaultFilter.contains;
+            return cap(data.filter((value) => matcher(this.textFor(value), query, value)));
+        }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        this.visibleCount = computed(() => this.virtualized() ? this.filteredItems().length : this.visibleItems().length, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+        this.highlight = useListHighlight({
+            items: this.orderedItems,
+            isNavigable: (item) => this.isVisible(item) && !item.disabled(),
+            getId: (item) => item.id,
+            loop: this.loopFocus,
+            injector: this.injector
+        });
+        this.highlightedItem = this.highlight.highlightedItem;
+        /** Highlighted index into {@link filteredItems} in virtualized mode (`-1` when cleared). */
+        this.highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+        /** Why the highlight last moved; read when emitting {@link onItemHighlighted}. */
+        this.highlightReason = signal('none', ...(ngDevMode ? [{ debugName: "highlightReason" }] : /* istanbul ignore next */ []));
+        this.activeId = computed(() => {
+            if (this.virtualized()) {
+                const index = this.highlightedIndex();
+                return index >= 0 ? this.itemId(index) : undefined;
+            }
+            return this.highlight.activeId();
+        }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+        /**
+         * What to highlight once the list has mounted (items register asynchronously after opening):
+         * an end edge, or `'first-match'` (the first item whose label starts with the query — used by
+         * auto-highlight so inline completion lands on a real prefix match even when the list is static).
+         */
+        this.pendingHighlightEdge = signal(null, ...(ngDevMode ? [{ debugName: "pendingHighlightEdge" }] : /* istanbul ignore next */ []));
+        this.keyboardActive = false;
+        /** The trigger element, used as a focus fallback when the input lives inside the popup. */
+        this.triggerElement = null;
+        // 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);
+            }
+        });
+        // Emit open changes and drive the open/close transition (skip the initial run).
+        let previousOpen = untracked(this.open);
+        effect(() => {
+            const open = this.open();
+            if (open === previousOpen) {
+                return;
+            }
+            previousOpen = open;
+            untracked(() => {
+                this.onOpenChange.emit(open);
+                this.transition.start(open);
+            });
+        });
+        // Emit highlight changes (skip the initial run).
+        let highlightInitialized = false;
+        effect(() => {
+            const item = this.highlightedItem();
+            const index = this.highlightedIndex();
+            if (!highlightInitialized) {
+                highlightInitialized = true;
+                return;
+            }
+            untracked(() => {
+                const reason = this.highlightReason();
+                if (this.virtualized()) {
+                    const value = index >= 0 ? (this.filteredItems()[index] ?? null) : null;
+                    this.onItemHighlighted.emit({ value, index, reason });
+                }
+                else {
+                    const value = item ? item.value() : null;
+                    const itemIndex = item ? this.visibleItems().indexOf(item) : -1;
+                    this.onItemHighlighted.emit({ value, index: itemIndex, reason });
+                }
+            });
+        });
+        // Inline completion: mirror the active item's label into the input (with the completed suffix
+        // selected by the input directive). Recomputes whenever the highlight or query changes.
+        effect(() => {
+            const item = this.highlightedItem();
+            const query = this.query();
+            const reason = this.highlightReason();
+            untracked(() => this.recomputeInlinePreview(item, query, reason));
+        });
+        // Apply a deferred open-edge highlight once items (DOM refs) or filtered data have registered.
+        effect(() => {
+            const edge = this.pendingHighlightEdge();
+            const count = this.virtualized() ? this.filteredItems().length : this.orderedItems().length;
+            if (!this.open() || edge === null || count === 0) {
+                return;
+            }
+            untracked(() => {
+                this.highlightReason.set('none');
+                if (this.virtualized()) {
+                    this.highlightedIndex.set(this.resolveVirtualizedEdge(edge, count));
+                }
+                else if (edge === 'last') {
+                    this.highlight.last();
+                }
+                else if (edge === 'first-match') {
+                    this.highlight.set(this.firstMatchItem() ?? this.firstVisibleNavigable());
+                }
+                else {
+                    this.highlight.first();
+                }
+                this.pendingHighlightEdge.set(null);
+            });
+        });
+        // autoHighlight 'always': keep the first navigable item highlighted whenever the popup is open.
+        effect(() => {
+            this.orderedItems();
+            this.visibleCount();
+            if (this.autoHighlightMode() === 'always' && this.open()) {
+                untracked(() => {
+                    if (this.virtualized()) {
+                        const length = this.filteredItems().length;
+                        const index = this.highlightedIndex();
+                        if ((index < 0 || index >= length) && length > 0) {
+                            this.highlightReason.set('none');
+                            this.highlightedIndex.set(0);
+                        }
+                    }
+                    else if (this.highlightedItem() === null) {
+                        this.highlightReason.set('none');
+                        this.highlight.first();
+                    }
+                });
+            }
+        });
+        // Virtualized self-heal: clear a highlight that filtering pushed out of range.
+        effect(() => {
+            if (!this.virtualized()) {
+                return;
+            }
+            const length = this.filteredItems().length;
+            untracked(() => {
+                const index = this.highlightedIndex();
+                if (index >= length && index !== -1) {
+                    this.highlightReason.set('none');
+                    this.highlightedIndex.set(-1);
+                }
+            });
+        });
+        // Virtualized object values can't be labelled from the DOM — warn once in dev.
+        if (isDevMode()) {
+            let warned = false;
+            effect(() => {
+                if (warned || !this.virtualized() || this.itemToStringValue()) {
+                    return;
+                }
+                if (this.items()?.some((value) => value !== null && typeof value === 'object')) {
+                    warned = true;
+                    console.warn('[rdxAutocompleteRoot] `virtualized` with object item values needs `itemToStringValue` ' +
+                        'to render correct labels; falling back to a generic label.');
+                }
+            });
+        }
+    }
+    recomputeInlinePreview(item, query, reason) {
+        // Pointer hover must not rewrite the input (matches Base UI); only typing / keyboard nav complete it.
+        if (!this.inlineMode() || this.suppressInline || !item || reason === 'pointer') {
+            this.inlinePreview.set(null);
+            return;
+        }
+        const label = item.textValue();
+        if (label && query && label.toLowerCase().startsWith(query.toLowerCase())) {
+            // Type-ahead: keep the typed prefix (preserving its casing) and complete the rest.
+            this.inlinePreview.set(query + label.slice(query.length));
+            return;
+        }
+        // Keyboard navigation to an item that doesn't prefix-match the query: show its full label so the
+        // input reflects the highlighted option. Typing (reason 'none') never jumps to a non-prefix label.
+        if (reason === 'keyboard' && label) {
+            this.inlinePreview.set(label);
+            return;
+        }
+        this.inlinePreview.set(null);
+    }
+    setSuppressInline(value) {
+        this.suppressInline = value;
+    }
+    /** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
+    openForBrowse() {
+        if (!this.open()) {
+            this.typed.set(false);
+        }
+        this.setOpen(true);
+        this.selectInputText();
+        if (this.autoHighlightMode() === 'always') {
+            this.pendingHighlightEdge.set('first');
+        }
+    }
+    /** Opens the popup and highlights the given edge once the list mounts. */
+    openAndHighlight(edge) {
+        if (!this.open()) {
+            this.typed.set(false);
+        }
+        this.setOpen(true);
+        this.selectInputText();
+        this.pendingHighlightEdge.set(edge);
+    }
+    /** Whether the item matches the active query (ignores the `limit` cap). */
+    matchesFilter(item) {
+        if (!this.filteringMode()) {
+            return true;
+        }
+        const filter = this.filter();
+        if (filter === null) {
+            return true;
+        }
+        const query = this.query();
+        const matcher = filter ?? this.defaultFilter.contains;
+        return matcher(item.textValue(), query, item.value());
+    }
+    /** Whether the item is shown in the list (matches the query and is within `limit`). */
+    isVisible(item) {
+        return this.visibleSet().has(item);
+    }
+    /** The first visible, navigable item whose label starts with the query (for inline completion). */
+    firstMatchItem() {
+        const query = this.query();
+        if (!query) {
+            return null;
+        }
+        const lower = query.toLowerCase();
+        return (this.visibleItems().find((item) => !item.disabled() && item.textValue().toLowerCase().startsWith(lower)) ??
+            null);
+    }
+    /** The first visible, navigable item (auto-highlight fallback when no prefix match exists). */
+    firstVisibleNavigable() {
+        return this.visibleItems().find((item) => !item.disabled()) ?? null;
+    }
+    /** Resolves a pending edge to a virtualized index. */
+    resolveVirtualizedEdge(edge, count) {
+        if (edge === 'last') {
+            return count - 1;
+        }
+        if (edge === 'first-match') {
+            const query = this.query();
+            if (query) {
+                const lower = query.toLowerCase();
+                const index = this.filteredItems().findIndex((value) => this.textFor(value).toLowerCase().startsWith(lower));
+                if (index >= 0) {
+                    return index;
+                }
+            }
+        }
+        return 0;
+    }
+    isKeyboardActive() {
+        return this.keyboardActive;
+    }
+    setKeyboardActive(value) {
+        this.keyboardActive = value;
+    }
+    /** 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.by());
+    }
+    registerItem(item) {
+        this._items.update((items) => [...items, item]);
+    }
+    unregisterItem(item) {
+        this._items.update((items) => items.filter((i) => i !== item));
+    }
+    setOpen(open) {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
+        this.open.set(open);
+    }
+    closePopup(revert = true) {
+        if (!this.open()) {
+            return;
+        }
+        this.open.set(false);
+        this.clearHighlightState();
+        this.inlinePreview.set(null);
+        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.pendingHighlightEdge.set('first-match');
+        }
+    }
+    /** Selects all input text so the next keystroke replaces a committed label. */
+    selectInputText() {
+        this.inputElement()?.select();
+    }
+    labelFor(value) {
+        const custom = this.itemToStringValue();
+        if (custom) {
+            return custom(value);
+        }
+        const item = this.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.by()));
+        return item ? item.textValue() : itemToStringLabel(value);
+    }
+    /** Label text for a raw item value (virtualized mode, no DOM element to read from). */
+    textFor(value) {
+        const custom = this.itemToStringValue();
+        return custom ? custom(value) : itemToStringLabel(value);
+    }
+    /** Deterministic id for the item at `index` in virtualized mode (matches `aria-activedescendant`). */
+    itemId(index) {
+        return `${this.listId}-item-${index}`;
+    }
+    handleSelect(item) {
+        if (this.disabledState() || this.readOnly() || item.disabled()) {
+            return;
+        }
+        this.commitSelection(item.textValue() || this.labelFor(item.value()));
+    }
+    /** Selects the filtered item at `index` (virtualized mode). */
+    selectIndex(index) {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
+        const value = this.filteredItems()[index];
+        if (value === undefined) {
+            return;
+        }
+        this.commitSelection(this.labelFor(value));
+    }
+    /** Commits a selection: the input value becomes the item's label, the popup closes. */
+    commitSelection(label) {
+        this.inlinePreview.set(null);
+        this.commitValue(label, 'item-press');
+        this.typed.set(false);
+        this.open.set(false);
+        this.clearHighlightState();
+        this.restoreFocusAfterSelect();
+        this.maybeSubmit();
+    }
+    maybeSubmit() {
+        if (this.submitOnItemClick()) {
+            this.inputElement()?.form?.requestSubmit?.();
+        }
+    }
+    selectHighlighted() {
+        if (this.virtualized()) {
+            const index = this.highlightedIndex();
+            if (index >= 0) {
+                this.selectIndex(index);
+            }
+            return;
+        }
+        const item = this.highlightedItem();
+        if (item) {
+            this.handleSelect(item);
+        }
+    }
+    // --- Highlight navigation facade (mode-aware: index-based when virtualized, grid-aware, else DOM-ref) ---
+    moveDown() {
+        this.highlightReason.set('keyboard');
+        if (this.virtualized()) {
+            this.stepIndex(1);
+        }
+        else if (this.grid()) {
+            this.gridVertical(1);
+        }
+        else {
+            this.highlight.next();
+        }
+    }
+    moveUp() {
+        this.highlightReason.set('keyboard');
+        if (this.virtualized()) {
+            this.stepIndex(-1);
+        }
+        else if (this.grid()) {
+            this.gridVertical(-1);
+        }
+        else {
+            this.highlight.previous();
+        }
+    }
+    /** Grid: move to the next cell in DOM order. Non-grid: no-op (caret movement). */
+    moveRight() {
+        if (!this.grid() || this.virtualized()) {
+            return;
+        }
+        this.highlightReason.set('keyboard');
+        this.highlight.next();
+    }
+    moveLeft() {
+        if (!this.grid() || this.virtualized()) {
+            return;
+        }
+        this.highlightReason.set('keyboard');
+        this.highlight.previous();
+    }
+    highlightFirst(reason = 'keyboard') {
+        this.highlightReason.set(reason);
+        if (this.virtualized()) {
+            this.highlightedIndex.set(this.filteredItems().length > 0 ? 0 : -1);
+        }
+        else {
+            this.highlight.first();
+        }
+    }
+    highlightLast(reason = 'keyboard') {
+        this.highlightReason.set(reason);
+        if (this.virtualized()) {
+            const length = this.filteredItems().length;
+            this.highlightedIndex.set(length > 0 ? length - 1 : -1);
+        }
+        else {
+            this.highlight.last();
+        }
+    }
+    highlightIndex(index, reason) {
+        if (index < 0 || index >= this.filteredItems().length) {
+            return;
+        }
+        this.highlightReason.set(reason);
+        this.highlightedIndex.set(index);
+    }
+    setHighlight(item, reason) {
+        this.highlightReason.set(reason);
+        this.highlight.set(item);
+    }
+    clearHighlightState() {
+        this.highlight.clear();
+        this.highlightedIndex.set(-1);
+    }
+    stepIndex(direction) {
+        const length = this.filteredItems().length;
+        if (length === 0) {
+            this.highlightedIndex.set(-1);
+            return;
+        }
+        const current = this.highlightedIndex();
+        if (current < 0) {
+            this.highlightedIndex.set(direction === 1 ? 0 : length - 1);
+            return;
+        }
+        let next = current + direction;
+        const loop = this.loopFocus();
+        if (next < 0) {
+            next = loop ? length - 1 : 0;
+        }
+        else if (next >= length) {
+            next = loop ? 0 : length - 1;
+        }
+        this.highlightedIndex.set(next);
+    }
+    /** Grid vertical move: keep the column index, jump to the adjacent row. */
+    gridVertical(direction) {
+        const rows = this.gridRows();
+        if (rows.length === 0) {
+            return;
+        }
+        const current = this.highlightedItem();
+        if (!current) {
+            const row = direction === 1 ? rows[0] : rows[rows.length - 1];
+            this.highlight.set(row[0] ?? null);
+            return;
+        }
+        let rowIndex = rows.findIndex((row) => row.includes(current));
+        const col = rowIndex >= 0 ? rows[rowIndex].indexOf(current) : 0;
+        const loop = this.loopFocus();
+        rowIndex += direction;
+        if (rowIndex < 0) {
+            rowIndex = loop ? rows.length - 1 : 0;
+        }
+        else if (rowIndex >= rows.length) {
+            rowIndex = loop ? 0 : rows.length - 1;
+        }
+        const targetRow = rows[rowIndex];
+        this.highlight.set(targetRow[Math.min(col, targetRow.length - 1)] ?? null);
+    }
+    /** Visible items grouped into rows by their nearest `[rdxAutocompleteRow]` ancestor (DOM order). */
+    gridRows() {
+        const rows = new Map();
+        for (const item of this.visibleItems()) {
+            const key = item.element.closest('[rdxAutocompleteRow]');
+            const bucket = rows.get(key);
+            if (bucket) {
+                bucket.push(item);
+            }
+            else {
+                rows.set(key, [item]);
+            }
+        }
+        return [...rows.values()];
+    }
+    clearValue() {
+        this.commitValue('', 'input-clear');
+        this.typed.set(true);
+        this.inlinePreview.set(null);
+        this.focusInput();
+    }
+    focusInput() {
+        this.inputElement()?.focus();
+    }
+    restoreFocusAfterSelect() {
+        const input = this.inputElement();
+        if (input && !input.closest('[rdxAutocompletePopup]')) {
+            input.focus();
+        }
+        else {
+            this.triggerElement?.focus();
+        }
+    }
+    markAsTouched() {
+        this.onTouched?.();
+    }
+    commitValue(value, reason) {
+        this.value.set(value);
+        this.onValueChange.emit({ value, reason });
+        this.onChange?.(value);
+    }
+    // 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 }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, keepHighlight: { classPropertyName: "keepHighlight", publicName: "keepHighlight", isSignal: true, isRequired: false, transformFunction: null }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
+            provideComboboxRootContext(context),
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxAutocompleteRoot, multi: true }
+        ], 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 }
+                    ],
+                    hostDirectives: [RdxPopper],
+                    host: {
+                        '[attr.data-disabled]': 'disabledState() ? "" : undefined'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], keepHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepHighlight", required: false }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+/** DOM-order comparator for two elements (precedes → -1, follows → 1). */
+function domOrder(a, b) {
+    const position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return 0;
+}
+
+/**
+ * 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 */ []));
+    }
+    onClick() {
+        this.root.clearValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteClear, isStandalone: true, selector: "button[rdxAutocompleteClear]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Clear" }, listeners: { "click": "onClick()" }, properties: { "hidden": "isEmpty()", "attr.disabled": "root.disabledState() ? \"\" : undefined" } }, exportAs: ["rdxAutocompleteClear"], hostDirectives: [{ directive: i2.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteClear, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxAutocompleteClear]',
+                    exportAs: 'rdxAutocompleteClear',
+                    hostDirectives: [RdxDismissableLayerBranch],
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-label': 'Clear',
+                        '[hidden]': 'isEmpty()',
+                        '[attr.disabled]': 'root.disabledState() ? "" : undefined',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * Shown only when no items match the current query. Reuses the combobox empty part.
+ *
+ * @group Components
+ */
+class RdxAutocompleteEmpty {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteEmpty, isStandalone: true, selector: "[rdxAutocompleteEmpty]", exportAs: ["rdxAutocompleteEmpty"], hostDirectives: [{ directive: i1.RdxComboboxEmpty }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteEmpty]',
+                    exportAs: 'rdxAutocompleteEmpty',
+                    hostDirectives: [RdxComboboxEmpty]
+                }]
+        }] });
+
+/**
+ * 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]
+                }]
+        }] });
+
+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.inputElement.set(this.element);
+        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.inputElement.set(null);
+            }
+        });
+    }
+    onInput(event) {
+        if (this.composing || event.isComposing) {
+            return;
+        }
+        this.commitInput(event.target.value);
+    }
+    onCompositionEnd(event) {
+        this.composing = false;
+        this.commitInput(event.target.value);
+    }
+    commitInput(value) {
+        if (!this.root.open()) {
+            this.root.setOpen(true);
+        }
+        this.root.setQuery(value);
+    }
+    onClick() {
+        if (this.root.openOnInputClick()) {
+            this.root.openForBrowse();
+        }
+    }
+    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');
+                }
+                else {
+                    this.root.moveDown();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.root.setKeyboardActive(true);
+                if (!open) {
+                    this.root.openAndHighlight('last');
+                }
+                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 'Enter':
+                if (open) {
+                    const hasHighlight = this.root.virtualized()
+                        ? this.root.highlightedIndex() >= 0
+                        : this.root.highlightedItem() !== null;
+                    if (hasHighlight) {
+                        event.preventDefault();
+                        this.root.selectHighlighted();
+                    }
+                    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);
+                    }
+                }
+                break;
+            case 'Escape':
+                if (open) {
+                    event.preventDefault();
+                    this.root.closePopup(true);
+                }
+                break;
+            case 'Tab':
+                if (open) {
+                    this.root.closePopup(true);
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompleteInput, isStandalone: true, selector: "input[rdxAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off" }, listeners: { "input": "onInput($event)", "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "attr.aria-expanded": "root.open()", "attr.aria-controls": "root.listId", "attr.aria-labelledby": "root.labelId()", "attr.aria-activedescendant": "root.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "root.readOnly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "root.displayValue()", "attr.data-popup-open": "dataAttr(root.open())", "attr.data-list-empty": "dataAttr(root.visibleCount() === 0)", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i2.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[rdxAutocompleteInput]',
+                    exportAs: 'rdxAutocompleteInput',
+                    hostDirectives: [RdxPopperAnchor, RdxDismissableLayerBranch],
+                    host: {
+                        role: 'combobox',
+                        autocomplete: 'off',
+                        '[attr.aria-autocomplete]': 'ariaAutocomplete()',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-expanded]': 'root.open()',
+                        '[attr.aria-controls]': 'root.listId',
+                        '[attr.aria-labelledby]': 'root.labelId()',
+                        '[attr.aria-activedescendant]': 'root.activeId()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
+                        '[attr.aria-required]': 'requiredState() ? "true" : undefined',
+                        '[attr.aria-disabled]': 'disabledState() ? "true" : undefined',
+                        '[attr.disabled]': 'disabledState() ? "" : undefined',
+                        '[attr.readonly]': 'root.readOnly() ? "" : undefined',
+                        '[attr.required]': 'requiredState() ? "" : undefined',
+                        '[value]': 'root.displayValue()',
+                        '[attr.data-popup-open]': 'dataAttr(root.open())',
+                        '[attr.data-list-empty]': 'dataAttr(root.visibleCount() === 0)',
+                        '[attr.data-invalid]': 'dataAttr(invalidState())',
+                        '[attr.data-valid]': 'dataAttr(!invalidState())',
+                        '[attr.data-disabled]': 'dataAttr(disabledState())',
+                        '[attr.data-required]': 'dataAttr(requiredState())',
+                        '[attr.data-filled]': 'dataAttr(filledState())',
+                        '[attr.data-focused]': 'dataAttr(focusedState())',
+                        '(input)': 'onInput($event)',
+                        '(click)': 'onClick()',
+                        '(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())'
+                    }
+                }]
+        }] });
+
+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 option's value. When omitted, selecting the item writes its text content into the input. */
+        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** 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 */ []));
+        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 */ []));
+        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);
+        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' });
+            }
+        });
+    }
+    onPointerDown(event) {
+        event.preventDefault();
+        this.rootContext.setKeyboardActive(false);
+    }
+    onPointerUp() {
+        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: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValueInput: { classPropertyName: "textValueInput", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointermove": "onPointerMove()", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.id": "elementId()", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-setsize": "ariaSetSize()", "attr.aria-posinset": "ariaPosInSet()", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "hidden": "!isVisible()", "attr.data-hidden": "isVisible() ? undefined : \"\"" } }, providers: [provideComboboxItemContext(itemContext)], exportAs: ["rdxAutocompleteItem"], ngImport: i0 }); }
+}
+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: {
+                        role: 'option',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
+                        '[attr.aria-setsize]': 'ariaSetSize()',
+                        '[attr.aria-posinset]': 'ariaPosInSet()',
+                        '[attr.data-selected]': 'isSelected() ? "" : undefined',
+                        '[attr.data-highlighted]': 'isHighlighted() ? "" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[hidden]': '!isVisible()',
+                        '[attr.data-hidden]': 'isVisible() ? undefined : ""',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(mousedown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointermove)': 'onPointerMove()',
+                        '(pointerleave)': 'onPointerLeave($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+/**
+ * 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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompleteList, isStandalone: true, selector: "[rdxAutocompleteList]", host: { properties: { "attr.role": "root.grid() ? \"grid\" : \"listbox\"", "attr.id": "root.listId" } }, exportAs: ["rdxAutocompleteList"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompleteList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompleteList]',
+                    exportAs: 'rdxAutocompleteList',
+                    host: {
+                        '[attr.role]': 'root.grid() ? "grid" : "listbox"',
+                        '[attr.id]': 'root.listId'
+                    }
+                }]
+        }] });
+
+/**
+ * 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.dismissableLayer = inject(RdxDismissableLayer);
+        this.popper = injectPopperContentWrapperContext();
+        this.element = inject(ElementRef).nativeElement;
+        useScrollLock(this.root.modal);
+        const unregister = this.root.registerTransitionElement(this.element);
+        inject(DestroyRef).onDestroy(unregister);
+        this.dismissableLayer.dismiss.subscribe(() => this.root.closePopup(true));
+        // 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]')) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxAutocompletePopup, isStandalone: true, selector: "[rdxAutocompletePopup]", host: { properties: { "attr.data-state": "root.open() ? \"open\" : \"closed\"", "attr.data-open": "root.open() ? \"\" : undefined", "attr.data-closed": "root.open() ? undefined : \"\"", "attr.data-starting-style": "root.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "root.transitionStatus() === \"ending\" ? \"\" : undefined" } }, providers: [
+            provideRdxDismissableLayerConfig(() => ({
+                disableOutsidePointerEvents: inject(RdxAutocompleteRoot).modal
+            }))
+        ], exportAs: ["rdxAutocompletePopup"], hostDirectives: [{ directive: i1$1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePopup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompletePopup]',
+                    exportAs: 'rdxAutocompletePopup',
+                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
+                    providers: [
+                        provideRdxDismissableLayerConfig(() => ({
+                            disableOutsidePointerEvents: inject(RdxAutocompleteRoot).modal
+                        }))
+                    ],
+                    host: {
+                        '[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'
+                    }
+                }]
+        }], 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()) {
+            throw new Error('[rdxAutocompletePortal] is now a structural directive. ' +
+                'Use `*rdxAutocompletePortal` on the positioner element or `<ng-template rdxAutocompletePortal>`. ' +
+                'rdxAutocompletePortalPresence has been removed. See https://radix-ng.com/components/autocomplete.md');
+        }
+    }
+    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: () => [] });
+
+/**
+ * Positions the popup relative to the input anchor using the popper engine. Composes the popper
+ * content wrapper directly (the same building block the combobox positioner uses) and re-exposes its
+ * positioning inputs.
+ *
+ * @group Components
+ */
+class RdxAutocompletePositioner {
+    constructor() {
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.sideOffset = input(4, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
+        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.updatePositionStrategy = input('optimized', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAutocompletePositioner, isStandalone: true, selector: "[rdxAutocompletePositioner]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "{\n            'boxSizing': 'border-box',\n            '--radix-autocomplete-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-autocomplete-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-autocomplete-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-autocomplete-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-autocomplete-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, exportAs: ["rdxAutocompletePositioner"], hostDirectives: [{ directive: i1$1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAutocompletePositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAutocompletePositioner]',
+                    exportAs: 'rdxAutocompletePositioner',
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[style]': `{
+            'boxSizing': 'border-box',
+            '--radix-autocomplete-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-autocomplete-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-autocomplete-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-autocomplete-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-autocomplete-trigger-height': 'var(--radix-popper-anchor-height)'
+        }`
+                    }
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }] } });
+
+/**
+ * A row in a grid-layout autocomplete list. Groups the items in one row so the root can navigate by
+ * row (ArrowUp / ArrowDown) and within a row (ArrowLeft / ArrowRight). Only meaningful when the root
+ * has `grid` enabled; the root resolves an item's row from its nearest `[rdxAutocompleteRow]` ancestor.
+ *
+ * @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'
+                    }
+                }]
+        }] });
+
+/**
+ * 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. Carries `tabindex="-1"` so it never steals focus from the input.
+ * Reuses the combobox trigger behavior.
+ *
+ * @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,
+    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,
+            RdxAutocompleteItem,
+            RdxAutocompleteItemIndicator,
+            RdxAutocompleteGroup,
+            RdxAutocompleteGroupLabel,
+            RdxAutocompleteEmpty,
+            RdxAutocompleteStatus], exports: [RdxAutocompleteRoot,
+            RdxAutocompleteAnchor,
+            RdxAutocompleteLabel,
+            RdxAutocompleteInputGroup,
+            RdxAutocompleteInput,
+            RdxAutocompleteValue,
+            RdxAutocompleteTrigger,
+            RdxAutocompleteIcon,
+            RdxAutocompleteClear,
+            RdxAutocompletePortal,
+            RdxAutocompletePortalMisuseGuard,
+            RdxAutocompleteBackdrop,
+            RdxAutocompletePositioner,
+            RdxAutocompletePopup,
+            RdxAutocompleteArrow,
+            RdxAutocompleteList,
+            RdxAutocompleteRow,
+            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, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
+//# sourceMappingURL=radix-ng-primitives-autocomplete.mjs.map