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

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

@@ -0,0 +1,1923 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, Injector, model, input, booleanAttribute, computed, numberAttribute, output, signal, effect, untracked, isDevMode, ElementRef, DestroyRef, afterNextRender, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopperAnchor, RdxPopperArrow, RdxPopper, injectPopperContentWrapperContext, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { createContext, useTransitionStatus, injectId, useFilter, useListHighlight, isItemEqualToValue, isNullish, itemToStringLabel, useScrollLock } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayerBranch, RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import { injectFieldRootContext } from '@radix-ng/primitives/field';
+import * as i1$2 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$3 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+
+/**
+ * Optional positioning anchor for the popup. Put it on the element the popup should align to — for
+ * example a control that wraps chips + input in `multiple` mode. When present it takes precedence
+ * over the input (the popper resolves the first `RdxPopperAnchor` in DOM order, and this part sits
+ * above the input). When absent, the input itself is the anchor, which is ideal when the input fills
+ * the control.
+ *
+ * @group Components
+ */
+class RdxComboboxAnchor {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxAnchor, isStandalone: true, selector: "[rdxComboboxAnchor]", exportAs: ["rdxComboboxAnchor"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxAnchor]',
+                    exportAs: 'rdxComboboxAnchor',
+                    hostDirectives: [RdxPopperAnchor]
+                }]
+        }] });
+
+/**
+ * An optional arrow that points from the popup to the anchor. Composes the popper arrow, which keeps
+ * it aligned as the popup flips sides.
+ *
+ * @group Components
+ */
+class RdxComboboxArrow {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxArrow, isStandalone: true, selector: "[rdxComboboxArrow]", exportAs: ["rdxComboboxArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow, inputs: ["width", "width", "height", "height"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxArrow]',
+                    exportAs: 'rdxComboboxArrow',
+                    hostDirectives: [{ directive: RdxPopperArrow, inputs: ['width', 'height'] }]
+                }]
+        }] });
+
+const context = () => {
+    const root = inject(RdxComboboxRoot);
+    return {
+        listId: root.listId,
+        labelId: root.labelId,
+        setLabelId: (id) => root.labelId.set(id),
+        dir: root.dir,
+        value: root.value,
+        inputValue: root.inputValue,
+        open: root.open,
+        multiple: root.multiple,
+        selectionMode: root.mode,
+        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.isSelected(value),
+        registerItem: (item) => root.registerItem(item),
+        unregisterItem: (item) => root.unregisterItem(item),
+        highlight: root.highlight,
+        highlightNext: () => root.highlightNext('keyboard'),
+        highlightPrevious: () => root.highlightPrevious('keyboard'),
+        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(),
+        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.setInputValue(value),
+        openAndHighlight: (edge) => root.openAndHighlight(edge),
+        select: (item) => root.handleSelect(item),
+        selectIndex: (index) => root.selectIndex(index),
+        selectHighlighted: () => root.selectHighlighted(),
+        clearSelection: () => root.clearSelection(),
+        removeValue: (value) => root.removeValue(value),
+        removeLastValue: () => root.removeLastValue(),
+        registerChipsNav: (fn) => root.registerChipsNav(fn),
+        focusLastChip: () => root.focusLastChip(),
+        labelFor: (value) => root.labelFor(value),
+        markAsTouched: () => root.markAsTouched()
+    };
+};
+const [injectComboboxRootContext, provideComboboxRootContext] = createContext('RdxComboboxRootContext', 'components/combobox');
+/**
+ * Root of a Combobox — a filterable select. Owns selection, input text, open state, filtering, and
+ * highlight-model navigation, and exposes them to the parts through {@link RdxComboboxRootContext}.
+ * Implements `ControlValueAccessor` for forms.
+ *
+ * @group Components
+ */
+class RdxComboboxRoot {
+    constructor() {
+        this.injector = inject(Injector);
+        /** Selected value(s). A single value in single mode, an array in `multiple` mode. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Initial value when uncontrolled. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** The text currently in the input. */
+        this.inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* 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 });
+        /** Whether multiple values can be selected. Shorthand for `selectionMode="multiple"`. */
+        this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
+        /**
+         * Selection behavior. `'single'` / `'multiple'` commit a value; `'none'` filters without
+         * selecting (a pure search/command UI). Defaults from the `multiple` shorthand.
+         */
+        this.selectionMode = input(...(ngDevMode ? [undefined, { debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        /** Resolved selection mode. */
+        this.mode = computed(() => this.selectionMode() ?? (this.multipleInput() ? 'multiple' : 'single'), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Whether the combobox is in multiple-selection mode. */
+        this.multiple = computed(() => this.mode() === 'multiple', ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** In `'none'` mode, whether pressing an item fills the input with its label. */
+        this.fillInputOnItemPress = input(true, { ...(ngDevMode ? { debugName: "fillInputOnItemPress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Text direction. */
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /** Whether the combobox is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the combobox is read-only. */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether a value is required (for forms). */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether keyboard navigation wraps at the list boundaries. */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Auto-highlight behavior:
+         * - `false` (default): never auto-highlight;
+         * - `true` / `'input-change'`: 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 */ []));
+        /** Resolved auto-highlight mode. */
+        this.autoHighlightMode = computed(() => {
+            const value = this.autoHighlight();
+            if (value === 'always') {
+                return 'always';
+            }
+            if (value === true || value === 'input-change') {
+                return 'input-change';
+            }
+            return 'off';
+        }, ...(ngDevMode ? [{ debugName: "autoHighlightMode" }] : /* istanbul ignore next */ []));
+        /** Whether clicking the input opens the popup. */
+        this.openOnInputClick = input(true, { ...(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 });
+        /**
+         * Filter applied to items against the input query.
+         * - `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 `RdxComboboxItem` is mounted). The filtered
+         * subset is exposed as {@link filteredItems} for an external virtualizer to render.
+         */
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the list is externally virtualized — only a window of items is rendered, so navigation
+         * runs over {@link items}/{@link filteredItems} by index instead of over mounted DOM elements.
+         * Requires {@link items}, and {@link itemToStringLabel} for selection labels/filter text. Disabled
+         * items outside the rendered window are not skipped by keyboard navigation.
+         */
+        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 a value to its display label. Defaults to the matching item's text. */
+        this.itemToStringLabel = input(...(ngDevMode ? [undefined, { debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+        /** Emits when the selection changes. */
+        this.onValueChange = output();
+        /** Emits when the input text changes. */
+        this.onInputValueChange = 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. In virtualized mode, use `index` to call the virtualizer's `scrollToIndex`.
+         */
+        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-combobox-list-');
+        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : /* 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 the input text is a fresh user query rather than the current selection's label. While
+         * `false` (just opened, or showing a selected label), 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 */ []));
+        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        /** Registered items, sorted into DOM order. */
+        this.orderedItems = computed(() => {
+            const items = [...this._items()];
+            return items.sort((a, b) => {
+                const position = a.element.compareDocumentPosition(b.element);
+                if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+                    return -1;
+                }
+                if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+                    return 1;
+                }
+                return 0;
+            });
+        }, ...(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 (the analogue of Base UI's
+         * `useFilteredItems`). Driven by {@link items} when provided (virtualized mode), capped by
+         * {@link limit}; otherwise mirrors the values of the mounted {@link visibleItems}.
+         */
+        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);
+            const filter = this.filter();
+            if (filter === null) {
+                return cap(data);
+            }
+            const query = this.typed() ? (this.inputValue() ?? '') : '';
+            if (!query) {
+                return cap(data);
+            }
+            const matcher = filter ?? this.defaultFilter.contains;
+            return cap(data.filter((value) => matcher(this.textFor(value), query)));
+        }, ...(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 */ []));
+        /** Edge to highlight once the list has mounted (items register asynchronously after opening). */
+        this.pendingHighlightEdge = signal(null, ...(ngDevMode ? [{ debugName: "pendingHighlightEdge" }] : /* istanbul ignore next */ []));
+        // Tracks whether the last interaction was the keyboard, so the highlight doesn't jump to an item
+        // the cursor happens to rest on when arrow-key navigation scrolls the list under a still pointer.
+        this.keyboardActive = false;
+        /** The trigger element, used as a focus fallback when the input lives inside the popup. */
+        this.triggerElement = null;
+        this.chipsFocusLast = null;
+        // Apply uncontrolled defaults once.
+        effect(() => {
+            const initial = this.defaultValue();
+            if (initial !== undefined && untracked(this.value) === null) {
+                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). Tracks both the DOM-ref highlight and the
+        // virtualized index; only one is active per mode, so the other never fires spuriously.
+        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 });
+                }
+            });
+        });
+        // 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(() => {
+                // Programmatic move — reset the reason in both modes so the emit reports 'none', not a
+                // stale 'keyboard'/'pointer' left by the previous user interaction.
+                this.highlightReason.set('none');
+                if (this.virtualized()) {
+                    this.highlightedIndex.set(edge === 'first' ? 0 : count - 1);
+                }
+                else if (edge === 'first') {
+                    this.highlight.first();
+                }
+                else {
+                    this.highlight.last();
+                }
+                this.pendingHighlightEdge.set(null);
+            });
+        });
+        // autoHighlight 'always': keep the first navigable item highlighted whenever the popup is
+        // open. `visibleCount` re-runs this when filtering changes; the current highlight is read
+        // untracked to re-establish a highlight only after the self-heal clears it (no loop).
+        effect(() => {
+            this.orderedItems();
+            this.visibleCount();
+            if (this.autoHighlightMode() === 'always' && this.open()) {
+                untracked(() => {
+                    if (this.virtualized()) {
+                        // Re-seed when the index is cleared OR has fallen out of range, so this works
+                        // regardless of whether the self-heal effect ran first (no ordering dependency).
+                        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 has pushed out of range, so
+        // `activeId` never references an index past the end of the filtered list.
+        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 (items aren't registered) — without
+        // `itemToStringLabel`, selection/revert fall back to a generic label. Warn once in dev.
+        if (isDevMode()) {
+            let warned = false;
+            effect(() => {
+                if (warned || !this.virtualized() || this.itemToStringLabel()) {
+                    return;
+                }
+                if (this.items()?.some((value) => value !== null && typeof value === 'object')) {
+                    warned = true;
+                    console.warn('[rdxComboboxRoot] `virtualized` with object item values needs `itemToStringLabel` ' +
+                        'to render correct selection labels; falling back to a generic label.');
+                }
+            });
+        }
+    }
+    /** 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) {
+        const filter = this.filter();
+        if (filter === null) {
+            return true;
+        }
+        // Until the user types a fresh query, show the whole list (the input may still hold the
+        // selected item's label, which must not filter everything down to just that item).
+        const query = this.typed() ? (this.inputValue() ?? '') : '';
+        const matcher = filter ?? this.defaultFilter.contains;
+        return matcher(item.textValue(), query);
+    }
+    /** Whether the item is shown in the list (matches the query and is within `limit`). */
+    isVisible(item) {
+        return this.visibleSet().has(item);
+    }
+    isKeyboardActive() {
+        return this.keyboardActive;
+    }
+    setKeyboardActive(value) {
+        this.keyboardActive = value;
+    }
+    isSelected(value) {
+        if (this.mode() === 'none') {
+            return false;
+        }
+        const current = this.value();
+        if (this.multiple()) {
+            return Array.isArray(current) && current.some((v) => isItemEqualToValue(v, value, this.by()));
+        }
+        return !isNullish(current) && isItemEqualToValue(current, value, 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();
+        if (revert) {
+            this.revertInputValue();
+        }
+        this.markAsTouched();
+    }
+    /** Updates the input text from user typing (marks the query as a fresh user query). */
+    setInputValue(value) {
+        this.inputValue.set(value);
+        this.typed.set(true);
+        this.onInputValueChange.emit(value);
+        // Auto-highlight the first match as the query changes (deferred so it lands after items mount).
+        if (this.autoHighlightMode() !== 'off') {
+            this.pendingHighlightEdge.set('first');
+        }
+    }
+    /** Sets the input text programmatically (a selection label / revert) — not a user query. */
+    setLabel(value) {
+        this.inputValue.set(value);
+        this.typed.set(false);
+        this.onInputValueChange.emit(value);
+    }
+    /** Selects all input text so the next keystroke replaces a stale selection label. */
+    selectInputText() {
+        this.inputElement()?.select();
+    }
+    /** Resets the input text to the current selection's label (single mode) or empty. */
+    revertInputValue() {
+        if (this.multiple()) {
+            this.setLabel('');
+            return;
+        }
+        const current = this.value();
+        this.setLabel(isNullish(current) ? '' : this.labelFor(current));
+    }
+    labelFor(value) {
+        const custom = this.itemToStringLabel();
+        if (custom) {
+            return custom(value);
+        }
+        const item = this.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.by()));
+        return item ? item.textValue() : itemToStringLabel(value);
+    }
+    /** Filter/label text for a raw item value (virtualized mode, no DOM element to read from). */
+    textFor(value) {
+        const custom = this.itemToStringLabel();
+        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.handleSelectValue(item.value(), item.textValue() || this.labelFor(item.value()));
+    }
+    /** Selects the filtered item at `index` (virtualized mode). The label comes from {@link labelFor}. */
+    selectIndex(index) {
+        if (this.disabledState() || this.readonly()) {
+            return;
+        }
+        const value = this.filteredItems()[index];
+        if (value === undefined) {
+            return;
+        }
+        this.handleSelectValue(value, this.labelFor(value));
+    }
+    /** Commits a selection from a resolved value/label, independent of whether a DOM item exists. */
+    handleSelectValue(value, textValue) {
+        if (this.mode() === 'none') {
+            // No value is committed; `onValueChange` fires as a pointer/keyboard activation signal so
+            // command-palette consumers can react. Optionally fill the input, then close.
+            this.onValueChange.emit(value);
+            if (this.fillInputOnItemPress()) {
+                this.setLabel(textValue);
+            }
+            this.open.set(false);
+            this.clearHighlightState();
+            this.restoreFocusAfterSelect();
+            this.maybeSubmit();
+            return;
+        }
+        if (this.multiple()) {
+            const current = Array.isArray(this.value()) ? [...this.value()] : [];
+            const index = current.findIndex((v) => isItemEqualToValue(v, value, this.by()));
+            if (index === -1) {
+                current.push(value);
+            }
+            else {
+                current.splice(index, 1);
+            }
+            this.commitValue(current);
+            this.setLabel('');
+            this.focusInput();
+        }
+        else {
+            this.commitValue(value);
+            this.setLabel(textValue);
+            this.open.set(false);
+            this.clearHighlightState();
+            this.restoreFocusAfterSelect();
+        }
+        this.maybeSubmit();
+    }
+    /** Requests submit of the closest form when `submitOnItemClick` is enabled. */
+    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, else DOM-ref) ---
+    highlightNext(reason = 'keyboard') {
+        this.highlightReason.set(reason);
+        if (this.virtualized()) {
+            this.stepIndex(1);
+        }
+        else {
+            this.highlight.next();
+        }
+    }
+    highlightPrevious(reason = 'keyboard') {
+        this.highlightReason.set(reason);
+        if (this.virtualized()) {
+            this.stepIndex(-1);
+        }
+        else {
+            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();
+        }
+    }
+    /** Highlights a specific index in virtualized mode (e.g. pointer hover). Ignored if out of range. */
+    highlightIndex(index, reason) {
+        if (index < 0 || index >= this.filteredItems().length) {
+            return;
+        }
+        this.highlightReason.set(reason);
+        this.highlightedIndex.set(index);
+    }
+    /** Highlights a DOM-ref item (non-virtualized pointer hover). */
+    setHighlight(item, reason) {
+        this.highlightReason.set(reason);
+        this.highlight.set(item);
+    }
+    /** Clears whichever highlight model is active. */
+    clearHighlightState() {
+        this.highlight.clear();
+        this.highlightedIndex.set(-1);
+    }
+    /** Steps the virtualized highlight index by `direction`, wrapping when {@link loopFocus}. */
+    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);
+    }
+    clearSelection() {
+        this.commitValue(this.multiple() ? [] : null);
+        this.setLabel('');
+        this.focusInput();
+    }
+    removeValue(value) {
+        if (!this.multiple() || !Array.isArray(this.value())) {
+            return;
+        }
+        const next = this.value().filter((v) => !isItemEqualToValue(v, value, this.by()));
+        this.commitValue(next);
+    }
+    removeLastValue() {
+        if (!this.multiple() || !Array.isArray(this.value())) {
+            return;
+        }
+        const current = this.value();
+        if (current.length > 0) {
+            this.commitValue(current.slice(0, -1));
+        }
+    }
+    focusInput() {
+        this.inputElement()?.focus();
+    }
+    /**
+     * Restores focus after a selection closes the popup, so the keyboard can reopen it. When the
+     * input lives inside the popup it is about to unmount, so focus goes to the trigger instead;
+     * otherwise it returns to the input. Done synchronously while the input is still in the DOM.
+     */
+    restoreFocusAfterSelect() {
+        const input = this.inputElement();
+        if (input && !input.closest('[rdxComboboxPopup]')) {
+            input.focus();
+        }
+        else {
+            this.triggerElement?.focus();
+        }
+    }
+    /** Registered by `RdxComboboxChips` so the input can hand keyboard focus to the chips. */
+    registerChipsNav(fn) {
+        this.chipsFocusLast = fn;
+    }
+    /** Moves focus to the last chip, if any. Returns whether a chip was focused. */
+    focusLastChip() {
+        return this.chipsFocusLast?.() ?? false;
+    }
+    markAsTouched() {
+        this.onTouched?.();
+    }
+    commitValue(value) {
+        this.value.set(value);
+        this.onValueChange.emit(value);
+        this.onChange?.(value);
+    }
+    // ControlValueAccessor
+    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: RdxComboboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxRoot, isStandalone: true, selector: "[rdxComboboxRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, fillInputOnItemPress: { classPropertyName: "fillInputOnItemPress", publicName: "fillInputOnItemPress", isSignal: true, isRequired: false, transformFunction: null }, 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 }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", onValueChange: "onValueChange", onInputValueChange: "onInputValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
+            provideComboboxRootContext(context),
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true }
+        ], exportAs: ["rdxComboboxRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxRoot]',
+                    exportAs: 'rdxComboboxRoot',
+                    providers: [
+                        provideComboboxRootContext(context),
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, 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 }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], fillInputOnItemPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillInputOnItemPress", required: false }] }], 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 }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onInputValueChange: [{ type: i0.Output, args: ["onInputValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+
+/**
+ * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
+ * it `position: fixed; inset: 0`. Give it `pointer-events: auto` so a click on it dismisses the popup
+ * (with `modal`, the rest of the page is inert). Exposes `data-open` / `data-closed` for animation.
+ *
+ * @group Components
+ */
+class RdxComboboxBackdrop {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxBackdrop, isStandalone: true, selector: "[rdxComboboxBackdrop]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"" } }, exportAs: ["rdxComboboxBackdrop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxBackdrop]',
+                    exportAs: 'rdxComboboxBackdrop',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[attr.data-open]': 'rootContext.open() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.open() ? undefined : ""'
+                    }
+                }]
+        }] });
+
+/**
+ * Container for the selected-value chips in `multiple` mode. Sits before the input and coordinates
+ * arrow-key navigation across the chips (the chips themselves handle the key events).
+ *
+ * @group Components
+ */
+class RdxComboboxChips {
+    constructor() {
+        this.host = inject(ElementRef).nativeElement;
+        this.rootContext = injectComboboxRootContext();
+        this.rootContext.registerChipsNav(() => this.focusLast());
+        inject(DestroyRef).onDestroy(() => this.rootContext.registerChipsNav(null));
+    }
+    /** The chip elements in DOM order. */
+    getChips() {
+        return Array.from(this.host.querySelectorAll('[rdxComboboxChip]'));
+    }
+    /** Focuses the last chip. Returns whether there was one. */
+    focusLast() {
+        const chips = this.getChips();
+        if (chips.length === 0) {
+            return false;
+        }
+        chips[chips.length - 1].focus();
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxChips, isStandalone: true, selector: "[rdxComboboxChips]", host: { attributes: { "role": "list" } }, exportAs: ["rdxComboboxChips"], hostDirectives: [{ directive: i1$1.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChips, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxChips]',
+                    exportAs: 'rdxComboboxChips',
+                    hostDirectives: [RdxDismissableLayerBranch],
+                    host: {
+                        role: 'list'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const chipContext = () => {
+    const chip = inject(RdxComboboxChip);
+    return { value: chip.value };
+};
+const [injectComboboxChipContext, provideComboboxChipContext] = createContext('RdxComboboxChipContext', 'components/combobox');
+/**
+ * A single selected-value chip. Provide its `value` so {@link RdxComboboxChipRemove} can deselect it.
+ * Chips are focusable and navigable with the arrow keys; Backspace / Delete removes the chip.
+ *
+ * @group Components
+ */
+class RdxComboboxChip {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.chips = inject(RdxComboboxChips, { optional: true });
+        this.rootContext = injectComboboxRootContext();
+        /** The value this chip represents. */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    onKeydown(event) {
+        const list = this.chips?.getChips() ?? [];
+        const index = list.indexOf(this.element);
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (index > 0) {
+                    event.preventDefault();
+                    list[index - 1].focus();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < list.length - 1) {
+                    list[index + 1].focus();
+                }
+                else {
+                    this.rootContext.focusInput();
+                }
+                break;
+            case 'Home':
+                if (list.length) {
+                    event.preventDefault();
+                    list[0].focus();
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                this.rootContext.focusInput();
+                break;
+            case 'Backspace':
+            case 'Delete': {
+                event.preventDefault();
+                // The @for tracks by value, so the previous/next chip nodes survive this removal.
+                const prev = list[index - 1];
+                const next = list[index + 1];
+                this.rootContext.removeValue(this.value());
+                if (prev) {
+                    prev.focus();
+                }
+                else if (next) {
+                    next.focus();
+                }
+                else {
+                    this.rootContext.focusInput();
+                }
+                break;
+            }
+            case 'Escape':
+                this.rootContext.focusInput();
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxChip, isStandalone: true, selector: "[rdxComboboxChip]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem", "tabindex": "-1" }, listeners: { "keydown": "onKeydown($event)" } }, providers: [provideComboboxChipContext(chipContext)], exportAs: ["rdxComboboxChip"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxChip]',
+                    exportAs: 'rdxComboboxChip',
+                    providers: [provideComboboxChipContext(chipContext)],
+                    host: {
+                        role: 'listitem',
+                        tabindex: '-1',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Removes its chip's value from the selection, keeping focus in the input.
+ *
+ * @group Components
+ */
+class RdxComboboxChipRemove {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.chipContext = injectComboboxChipContext();
+    }
+    onClick() {
+        this.rootContext.removeValue(this.chipContext.value());
+        this.rootContext.focusInput();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxChipRemove, isStandalone: true, selector: "button[rdxComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Remove" }, listeners: { "click": "onClick()" } }, exportAs: ["rdxComboboxChipRemove"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChipRemove, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxComboboxChipRemove]',
+                    exportAs: 'rdxComboboxChipRemove',
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-label': 'Remove',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * Clears the current selection and the input text. Hidden when there is nothing to clear.
+ *
+ * @group Components
+ */
+class RdxComboboxClear {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.isEmpty = computed(() => {
+            const value = this.rootContext.value();
+            if (Array.isArray(value)) {
+                return value.length === 0;
+            }
+            return value === null || value === undefined;
+        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    }
+    onClick() {
+        this.rootContext.clearSelection();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxClear, isStandalone: true, selector: "button[rdxComboboxClear]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Clear" }, listeners: { "click": "onClick()" }, properties: { "hidden": "isEmpty()", "attr.disabled": "rootContext.disabledState() ? \"\" : undefined" } }, exportAs: ["rdxComboboxClear"], hostDirectives: [{ directive: i1$1.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxClear, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxComboboxClear]',
+                    exportAs: 'rdxComboboxClear',
+                    hostDirectives: [RdxDismissableLayerBranch],
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-label': 'Clear',
+                        '[hidden]': 'isEmpty()',
+                        '[attr.disabled]': 'rootContext.disabledState() ? "" : undefined',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * Shown only when no items match the current query.
+ *
+ * @group Components
+ */
+class RdxComboboxEmpty {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxEmpty, isStandalone: true, selector: "[rdxComboboxEmpty]", host: { attributes: { "role": "presentation" }, properties: { "hidden": "rootContext.visibleCount() > 0" } }, exportAs: ["rdxComboboxEmpty"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxEmpty]',
+                    exportAs: 'rdxComboboxEmpty',
+                    host: {
+                        role: 'presentation',
+                        '[hidden]': 'rootContext.visibleCount() > 0'
+                    }
+                }]
+        }] });
+
+const groupContext = () => {
+    const group = inject(RdxComboboxGroup);
+    return {
+        labelId: group.labelId,
+        registerItem: (item) => group.registerItem(item),
+        unregisterItem: (item) => group.unregisterItem(item)
+    };
+};
+const [injectComboboxGroupContext, provideComboboxGroupContext] = createContext('RdxComboboxGroupContext', 'components/combobox');
+/**
+ * Groups related options under a shared label. Hides itself when all of its items are filtered out,
+ * so a group heading never lingers above an empty section.
+ *
+ * @group Components
+ */
+class RdxComboboxGroup {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.hasItems = computed(() => this.items().length > 0, ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
+        this.hasVisibleItems = computed(() => this.items().some((item) => this.rootContext.isVisible(item)), ...(ngDevMode ? [{ debugName: "hasVisibleItems" }] : /* istanbul ignore next */ []));
+    }
+    registerItem(item) {
+        this.items.update((items) => [...items, item]);
+    }
+    unregisterItem(item) {
+        this.items.update((items) => items.filter((i) => i !== item));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxGroup, isStandalone: true, selector: "[rdxComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "hidden": "hasItems() && !hasVisibleItems()" } }, providers: [provideComboboxGroupContext(groupContext)], exportAs: ["rdxComboboxGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxGroup]',
+                    exportAs: 'rdxComboboxGroup',
+                    providers: [provideComboboxGroupContext(groupContext)],
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId()',
+                        '[hidden]': 'hasItems() && !hasVisibleItems()'
+                    }
+                }]
+        }] });
+
+/**
+ * Accessible label for a {@link RdxComboboxGroup}. Wires itself up via `aria-labelledby`.
+ *
+ * @group Components
+ */
+class RdxComboboxGroupLabel {
+    constructor() {
+        this.groupContext = injectComboboxGroupContext();
+        this.id = injectId('rdx-combobox-group-label-');
+        this.groupContext.labelId.set(this.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxGroupLabel, isStandalone: true, selector: "[rdxComboboxGroupLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxComboboxGroupLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxGroupLabel]',
+                    exportAs: 'rdxComboboxGroupLabel',
+                    host: {
+                        '[attr.id]': 'id'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Decorative icon inside the trigger. Hidden from assistive technology.
+ *
+ * @group Components
+ */
+class RdxComboboxIcon {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxIcon, isStandalone: true, selector: "[rdxComboboxIcon]", host: { attributes: { "aria-hidden": "true" } }, exportAs: ["rdxComboboxIcon"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxIcon]',
+                    exportAs: 'rdxComboboxIcon',
+                    host: {
+                        'aria-hidden': 'true'
+                    }
+                }]
+        }] });
+
+const attr = (value) => (value ? '' : undefined);
+/**
+ * The combobox text input. Holds DOM focus at all times; the highlighted option is referenced via
+ * `aria-activedescendant`. Integrates with Field for labeling, description, and validation state.
+ *
+ * @group Components
+ */
+class RdxComboboxInput {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        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-combobox-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 });
+        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.rootContext.disabledState() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.rootContext.requiredState() || Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.filledState = computed(() => !this.isEmptyValue() || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
+        this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
+        this.isEmptyValue = computed(() => {
+            const value = this.rootContext.value();
+            if (Array.isArray(value)) {
+                return value.length === 0;
+            }
+            return value === null || value === undefined;
+        }, ...(ngDevMode ? [{ debugName: "isEmptyValue" }] : /* 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;
+        this.rootContext.setInputElement(this.element);
+        afterNextRender(() => {
+            this.fieldRootContext?.setControlId(this.id());
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (this.rootContext.inputElement() === this.element) {
+                this.rootContext.setInputElement(null);
+            }
+        });
+    }
+    onInput(event) {
+        // Defer filtering until the composition ends so intermediate IME text doesn't filter/select.
+        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.rootContext.open()) {
+            this.rootContext.openPopup();
+        }
+        // setInputValue applies any autoHighlight (deferred until items mount).
+        this.rootContext.setInputValue(value);
+    }
+    onClick() {
+        if (this.rootContext.openOnInputClick()) {
+            this.rootContext.openForBrowse();
+        }
+    }
+    onFocus() {
+        this.fieldRootContext?.setFocused(true);
+    }
+    onBlur() {
+        this.fieldRootContext?.setFocused(false);
+        this.fieldRootContext?.setTouched(true);
+    }
+    onKeydown(event) {
+        // Don't interfere with IME composition or text-editing shortcuts / range selection. Home/End
+        // and Shift+Arrows must keep moving the caret, Ctrl/Meta combos stay browser shortcuts.
+        if (event.isComposing || this.composing) {
+            return;
+        }
+        if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+            return;
+        }
+        const open = this.rootContext.open();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.rootContext.setKeyboardActive(true);
+                if (!open) {
+                    this.rootContext.openAndHighlight('first');
+                }
+                else {
+                    this.rootContext.highlightNext();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.rootContext.setKeyboardActive(true);
+                if (!open) {
+                    this.rootContext.openAndHighlight('last');
+                }
+                else {
+                    this.rootContext.highlightPrevious();
+                }
+                break;
+            case 'Enter':
+                if (open) {
+                    const hasHighlight = this.rootContext.virtualized()
+                        ? this.rootContext.highlightedIndex() >= 0
+                        : this.rootContext.highlightedItem() !== null;
+                    if (hasHighlight) {
+                        // Select the highlighted item (and prevent an accidental form submit).
+                        event.preventDefault();
+                        this.rootContext.selectHighlighted();
+                    }
+                    else {
+                        // Nothing highlighted: just close, and let the form submit.
+                        this.rootContext.closePopup(true);
+                    }
+                }
+                break;
+            case 'Escape':
+                // Just close the popup (reverting the in-progress query); never clear the selection.
+                if (open) {
+                    event.preventDefault();
+                    this.rootContext.closePopup(true);
+                }
+                break;
+            case 'Tab':
+                if (open) {
+                    this.rootContext.closePopup(true);
+                }
+                break;
+            case 'ArrowLeft':
+                // From the very start of the input in multiple mode, step into the chips.
+                if (this.rootContext.multiple() &&
+                    this.element.selectionStart === 0 &&
+                    this.element.selectionEnd === 0 &&
+                    this.rootContext.focusLastChip()) {
+                    event.preventDefault();
+                }
+                break;
+            case 'Backspace':
+                if (this.rootContext.multiple() && this.element.value === '') {
+                    this.rootContext.removeLastValue();
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxInput, isStandalone: true, selector: "input[rdxComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "rootContext.readonly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "rootContext.inputValue()", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-list-empty": "dataAttr(rootContext.visibleCount() === 0)", "attr.data-placeholder": "dataAttr(isEmptyValue())", "attr.data-invalid": "dataAttr(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: ["rdxComboboxInput"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[rdxComboboxInput]',
+                    exportAs: 'rdxComboboxInput',
+                    hostDirectives: [RdxPopperAnchor, RdxDismissableLayerBranch],
+                    host: {
+                        role: 'combobox',
+                        autocomplete: 'off',
+                        'aria-autocomplete': 'list',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-expanded]': 'rootContext.open()',
+                        '[attr.aria-controls]': 'rootContext.listId',
+                        '[attr.aria-labelledby]': 'rootContext.labelId()',
+                        '[attr.aria-activedescendant]': 'rootContext.activeId()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
+                        '[attr.aria-required]': 'requiredState() ? "true" : undefined',
+                        '[attr.aria-disabled]': 'disabledState() ? "true" : undefined',
+                        '[attr.disabled]': 'disabledState() ? "" : undefined',
+                        '[attr.readonly]': 'rootContext.readonly() ? "" : undefined',
+                        '[attr.required]': 'requiredState() ? "" : undefined',
+                        '[value]': 'rootContext.inputValue()',
+                        '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
+                        '[attr.data-list-empty]': 'dataAttr(rootContext.visibleCount() === 0)',
+                        '[attr.data-placeholder]': 'dataAttr(isEmptyValue())',
+                        '[attr.data-invalid]': 'dataAttr(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 itemContext = () => {
+    const item = inject(RdxComboboxItem);
+    return {
+        isSelected: item.isSelected,
+        isHighlighted: item.isHighlighted,
+        disabled: item.disabled,
+        value: item.value
+    };
+};
+const [injectComboboxItemContext, provideComboboxItemContext] = createContext('RdxComboboxItemContext', 'components/combobox');
+/**
+ * A selectable option. Registers itself with the root for filtering and navigation. Highlight is
+ * virtual (`data-highlighted` + `aria-activedescendant` on the input) — items never take DOM focus.
+ *
+ * @group Components
+ */
+class RdxComboboxItem {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        this.id = injectId('rdx-combobox-item-');
+        /** The option's value. */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Explicit text matched against the query. Defaults to the element's 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 — it drives the deterministic id
+         * (for `aria-activedescendant`), highlight matching, and selection when only a window is mounted.
+         */
+        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 */ []));
+        /** Host id: deterministic per-index in virtualized mode, otherwise a generated unique id. */
+        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 */ []));
+        // Virtualized items are always rendered (the consumer only mounts the filtered window).
+        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(() => {
+            // Virtualized items are not registered: the root navigates over `items` data by index, and
+            // a windowed item mounting/unmounting must not churn the DOM-ordered registry or `labelFor`.
+            if (this.virtualized()) {
+                return;
+            }
+            if (!this.textValueInput()) {
+                // Derive the match/label text from the element, excluding decorative indicator text
+                // (e.g. a checkmark) so it doesn't pollute filtering or the input label.
+                const clone = this.element.cloneNode(true);
+                clone.querySelectorAll('[rdxComboboxItemIndicator]').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);
+        });
+    }
+    onPointerDown(event) {
+        // Keep focus on the input; prevent the item from stealing focus on pointer/mouse down.
+        event.preventDefault();
+        this.rootContext.setKeyboardActive(false);
+    }
+    onPointerUp() {
+        if (this.virtualized()) {
+            this.rootContext.selectIndex(this.index() ?? -1);
+        }
+        else {
+            this.rootContext.select(this);
+        }
+    }
+    onPointerMove() {
+        // Ignore the first move after keyboard navigation: arrow keys scroll the list under a still
+        // cursor, and the resulting pointer event must not yank the highlight off the keyboard target.
+        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');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxItem, isStandalone: true, selector: "[rdxComboboxItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, 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()" }, 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: ["rdxComboboxItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxItem]',
+                    exportAs: 'rdxComboboxItem',
+                    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()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], 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).
+ *
+ * @group Components
+ */
+class RdxComboboxItemIndicator {
+    constructor() {
+        this.itemContext = injectComboboxItemContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxItemIndicator, isStandalone: true, selector: "[rdxComboboxItemIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "hidden": "!itemContext.isSelected()" } }, exportAs: ["rdxComboboxItemIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxItemIndicator]',
+                    exportAs: 'rdxComboboxItemIndicator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[hidden]': '!itemContext.isSelected()'
+                    }
+                }]
+        }] });
+
+/**
+ * An accessible label for the combobox. Registers its id so the input (and trigger) reference it via
+ * `aria-labelledby`.
+ *
+ * @group Components
+ */
+class RdxComboboxLabel {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.id = injectId('rdx-combobox-label-');
+        this.rootContext.setLabelId(this.id);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setLabelId(undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxLabel, isStandalone: true, selector: "[rdxComboboxLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxComboboxLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxLabel]',
+                    exportAs: 'rdxComboboxLabel',
+                    host: {
+                        '[attr.id]': 'id'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The listbox container for options. Carries the id referenced by the input's `aria-controls`.
+ *
+ * @group Components
+ */
+class RdxComboboxList {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxList, isStandalone: true, selector: "[rdxComboboxList]", host: { attributes: { "role": "listbox" }, properties: { "attr.id": "rootContext.listId", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined" } }, exportAs: ["rdxComboboxList"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxList]',
+                    exportAs: 'rdxComboboxList',
+                    host: {
+                        role: 'listbox',
+                        '[attr.id]': 'rootContext.listId',
+                        '[attr.aria-multiselectable]': 'rootContext.multiple() ? "true" : undefined'
+                    }
+                }]
+        }] });
+
+/**
+ * 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.
+ *
+ * @group Components
+ */
+class RdxComboboxPopup {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.popper = injectPopperContentWrapperContext();
+        this.element = inject(ElementRef).nativeElement;
+        // The popup mounts only while open, so locking on `modal` locks scroll for as long as a modal
+        // popup is open and releases it on close.
+        useScrollLock(this.rootContext.modal);
+        // The popup's animation determines when the open/close transition (onOpenChangeComplete) is done.
+        const unregister = this.rootContext.registerTransitionElement(this.element);
+        inject(DestroyRef).onDestroy(unregister);
+        // The input keeps focus while the popup is open; it is registered as a layer branch, so
+        // focus/pointer interactions on it don't count as "outside" and won't self-dismiss. Escape
+        // is handled by the input (which calls preventDefault), so the layer won't dismiss for it.
+        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.closePopup(true));
+        // For the "input inside the popup" pattern, move focus to the input once the popup is
+        // positioned. Focusing earlier fails in the browser: the portal `appendChild` blurs the
+        // input and an unplaced popup isn't yet visible/focusable.
+        effect(() => {
+            if (!this.popper.isPositioned() || !this.rootContext.open()) {
+                return;
+            }
+            const input = this.rootContext.inputElement();
+            if (input && input.closest('[rdxComboboxPopup]')) {
+                untracked(() => {
+                    input.focus();
+                    input.select();
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxPopup, isStandalone: true, selector: "[rdxComboboxPopup]", host: { properties: { "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined" } }, providers: [
+            // In modal mode, make content outside the popup inert (Base UI's `modal`).
+            provideRdxDismissableLayerConfig(() => ({ disableOutsidePointerEvents: injectComboboxRootContext().modal }))
+        ], exportAs: ["rdxComboboxPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i1$1.RdxDismissableLayer }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPopup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxPopup]',
+                    exportAs: 'rdxComboboxPopup',
+                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
+                    providers: [
+                        // In modal mode, make content outside the popup inert (Base UI's `modal`).
+                        provideRdxDismissableLayerConfig(() => ({ disableOutsidePointerEvents: injectComboboxRootContext().modal }))
+                    ],
+                    host: {
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[attr.data-open]': 'rootContext.open() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.open() ? undefined : ""',
+                        '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
+                        '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Teleports the popup into a container (default `document.body`).
+ *
+ * @group Components
+ */
+class RdxComboboxPortal {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxPortal, isStandalone: true, selector: "[rdxComboboxPortal]", exportAs: ["rdxComboboxPortal"], hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxPortal]',
+                    exportAs: 'rdxComboboxPortal',
+                    hostDirectives: [{ directive: RdxPortal, inputs: ['container'] }]
+                }]
+        }] });
+
+/**
+ * Wraps the popup template in {@link RdxPresenceDirective} so it mounts/unmounts with the open state
+ * and can run enter/leave animations.
+ *
+ * @group Components
+ */
+class RdxComboboxPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxPortalPresence, isStandalone: true, selector: "ng-template[rdxComboboxPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectComboboxRootContext();
+                return { present: context.open };
+            })
+        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxComboboxPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectComboboxRootContext();
+                            return { present: context.open };
+                        })
+                    ]
+                }]
+        }] });
+
+/**
+ * Positions the popup relative to the input anchor using the popper engine. Re-exposes the popper
+ * positioning inputs.
+ *
+ * @group Components
+ */
+class RdxComboboxPositioner {
+    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: RdxComboboxPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxPositioner, isStandalone: true, selector: "[rdxComboboxPositioner]", 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-combobox-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-combobox-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-combobox-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-combobox-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-combobox-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, exportAs: ["rdxComboboxPositioner"], hostDirectives: [{ directive: i1.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: RdxComboboxPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxPositioner]',
+                    exportAs: 'rdxComboboxPositioner',
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[style]': `{
+            'boxSizing': 'border-box',
+            '--radix-combobox-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-combobox-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-combobox-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-combobox-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-combobox-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 polite live region for async status (loading, result counts) announced without moving focus.
+ *
+ * @group Components
+ */
+class RdxComboboxStatus {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxStatus, isStandalone: true, selector: "[rdxComboboxStatus]", host: { attributes: { "role": "status", "aria-live": "polite" } }, exportAs: ["rdxComboboxStatus"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxStatus]',
+                    exportAs: 'rdxComboboxStatus',
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite'
+                    }
+                }]
+        }] });
+
+/**
+ * Toggles the combobox popup. Carries `tabindex="-1"` so it never steals focus from the input.
+ *
+ * @group Components
+ */
+class RdxComboboxTrigger {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        this.rootContext.registerTrigger(this.element);
+        inject(DestroyRef).onDestroy(() => this.rootContext.registerTrigger(null));
+    }
+    onClick() {
+        if (this.rootContext.open()) {
+            this.rootContext.closePopup(true);
+        }
+        else {
+            this.rootContext.focusInput();
+            this.rootContext.openForBrowse();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxTrigger, isStandalone: true, selector: "button[rdxComboboxTrigger]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Open" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.disabled": "rootContext.disabledState() ? \"\" : undefined", "attr.data-popup-open": "rootContext.open() ? \"\" : undefined", "attr.data-disabled": "rootContext.disabledState() ? \"\" : undefined" } }, exportAs: ["rdxComboboxTrigger"], hostDirectives: [{ directive: i1$1.RdxDismissableLayerBranch }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxComboboxTrigger]',
+                    exportAs: 'rdxComboboxTrigger',
+                    hostDirectives: [RdxDismissableLayerBranch],
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-label': 'Open',
+                        '[attr.aria-expanded]': 'rootContext.open()',
+                        '[attr.aria-controls]': 'rootContext.listId',
+                        '[attr.aria-labelledby]': 'rootContext.labelId()',
+                        '[attr.disabled]': 'rootContext.disabledState() ? "" : undefined',
+                        '[attr.data-popup-open]': 'rootContext.open() ? "" : undefined',
+                        '[attr.data-disabled]': 'rootContext.disabledState() ? "" : undefined',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Renders the current selection's label(s) — typically inside a {@link RdxComboboxTrigger} for a
+ * select-like control. Read `slotText()` in the template, or compose your own from `selectedLabels()`.
+ * Exposes `data-placeholder` while nothing is selected.
+ *
+ * @example
+ * <span #value="rdxComboboxValue" rdxComboboxValue placeholder="Select…">{{ value.slotText() }}</span>
+ *
+ * @group Components
+ */
+class RdxComboboxValue {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        /** Text shown when there is no selection. */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** The label(s) of the current selection, resolved via the root's `itemToStringLabel`/items. */
+        this.selectedLabels = computed(() => {
+            const value = this.rootContext.value();
+            if (Array.isArray(value)) {
+                return value.map((v) => this.rootContext.labelFor(v)).filter(Boolean);
+            }
+            return isNullish(value) ? [] : [this.rootContext.labelFor(value)].filter(Boolean);
+        }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => this.selectedLabels().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        /** The selection joined for display, or the `placeholder` when empty. */
+        this.slotText = computed(() => {
+            const labels = this.selectedLabels();
+            return labels.length ? labels.join(', ') : (this.placeholder() ?? '');
+        }, ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxValue, isStandalone: true, selector: "[rdxComboboxValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxComboboxValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxValue]',
+                    exportAs: 'rdxComboboxValue',
+                    host: {
+                        '[attr.data-placeholder]': 'isEmpty() ? "" : undefined'
+                    }
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+const _importsCombobox = [
+    RdxComboboxRoot,
+    RdxComboboxAnchor,
+    RdxComboboxLabel,
+    RdxComboboxInput,
+    RdxComboboxValue,
+    RdxComboboxTrigger,
+    RdxComboboxIcon,
+    RdxComboboxClear,
+    RdxComboboxPortal,
+    RdxComboboxPortalPresence,
+    RdxComboboxBackdrop,
+    RdxComboboxPositioner,
+    RdxComboboxPopup,
+    RdxComboboxArrow,
+    RdxComboboxList,
+    RdxComboboxItem,
+    RdxComboboxItemIndicator,
+    RdxComboboxGroup,
+    RdxComboboxGroupLabel,
+    RdxComboboxEmpty,
+    RdxComboboxStatus,
+    RdxComboboxChips,
+    RdxComboboxChip,
+    RdxComboboxChipRemove
+];
+class RdxComboboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, imports: [RdxComboboxRoot,
+            RdxComboboxAnchor,
+            RdxComboboxLabel,
+            RdxComboboxInput,
+            RdxComboboxValue,
+            RdxComboboxTrigger,
+            RdxComboboxIcon,
+            RdxComboboxClear,
+            RdxComboboxPortal,
+            RdxComboboxPortalPresence,
+            RdxComboboxBackdrop,
+            RdxComboboxPositioner,
+            RdxComboboxPopup,
+            RdxComboboxArrow,
+            RdxComboboxList,
+            RdxComboboxItem,
+            RdxComboboxItemIndicator,
+            RdxComboboxGroup,
+            RdxComboboxGroupLabel,
+            RdxComboboxEmpty,
+            RdxComboboxStatus,
+            RdxComboboxChips,
+            RdxComboboxChip,
+            RdxComboboxChipRemove], exports: [RdxComboboxRoot,
+            RdxComboboxAnchor,
+            RdxComboboxLabel,
+            RdxComboboxInput,
+            RdxComboboxValue,
+            RdxComboboxTrigger,
+            RdxComboboxIcon,
+            RdxComboboxClear,
+            RdxComboboxPortal,
+            RdxComboboxPortalPresence,
+            RdxComboboxBackdrop,
+            RdxComboboxPositioner,
+            RdxComboboxPopup,
+            RdxComboboxArrow,
+            RdxComboboxList,
+            RdxComboboxItem,
+            RdxComboboxItemIndicator,
+            RdxComboboxGroup,
+            RdxComboboxGroupLabel,
+            RdxComboboxEmpty,
+            RdxComboboxStatus,
+            RdxComboboxChips,
+            RdxComboboxChip,
+            RdxComboboxChipRemove] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._importsCombobox],
+                    exports: [..._importsCombobox]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxComboboxAnchor, RdxComboboxArrow, RdxComboboxBackdrop, RdxComboboxChip, RdxComboboxChipRemove, RdxComboboxChips, RdxComboboxClear, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, RdxComboboxInput, RdxComboboxItem, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxList, RdxComboboxModule, RdxComboboxPopup, RdxComboboxPortal, RdxComboboxPortalPresence, RdxComboboxPositioner, RdxComboboxRoot, RdxComboboxStatus, RdxComboboxTrigger, RdxComboboxValue, _importsCombobox, injectComboboxChipContext, injectComboboxGroupContext, injectComboboxItemContext, injectComboboxRootContext, provideComboboxChipContext, provideComboboxGroupContext, provideComboboxItemContext, provideComboboxRootContext };
+//# sourceMappingURL=radix-ng-primitives-combobox.mjs.map