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

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

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, booleanAttribute, Injector, model, input, computed, numberAttribute, output, signal, effect, untracked, isDevMode, ElementRef, DestroyRef, afterNextRender, afterRenderEffect, NgModule } from '@angular/core';
+import { Directive, signal, computed, untracked, effect, inject, booleanAttribute, Injector, ElementRef, model, input, numberAttribute, output, isDevMode, DestroyRef, ChangeDetectionStrategy, Component, afterNextRender, afterRenderEffect, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
-import { RdxPopperAnchor, RdxPopperArrow, RdxPopper, injectPopperContentWrapperContext, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
+import { RdxPopperAnchor, RdxPopperArrow, RdxPopper, RdxPopperContentWrapper, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, injectPopperContentWrapperContext, RdxPopperContent } 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 i2 from '@radix-ng/primitives/core';
+import { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, createFloatingRootContext, isItemEqualToValue, isNullish, itemToStringLabel, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayerBranch, RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 import * as i1$2 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
@@ -52,60 +54,606 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * The shared Combobox engine (ADR 0014): item registry, filtering, highlight-model navigation,
+ * open/close transition, and the reactive effects that tie them together — everything Combobox and
+ * Autocomplete have in common. Value/selection semantics, open orchestration, and forms integration
+ * stay in each root; the root configures the engine and reads its state for the DI context.
+ *
+ * Must be called in an injection context (it runs effects and `inject`-based hooks).
+ *
+ * @internal Not part of the public API — exported only for the autocomplete entry; may change without notice.
+ */
+function useComboboxEngine(config) {
+    const { injector } = config;
+    const defaultFilter = useFilter();
+    const listId = injectId(config.listIdPrefix);
+    const labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    const inputElement = signal(null, ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+    // Where the text input lives relative to the popup (Base UI's `inputInsidePopup`), reported by the
+    // input on mount from its positioner ancestor. Drives the Trigger's role:
+    //   - `outside` → the input is the tab stop; the Trigger is a `tabindex="-1"` toggle.
+    //   - `inside`  → the Trigger is the focusable `role="combobox"` control (`aria-haspopup="dialog"`).
+    //   - `unknown` → no input has mounted yet (e.g. the input lives in a not-yet-opened popup); the
+    //     Trigger stays a normal focusable button so it is reachable by `Tab` before the first open.
+    const inputLayout = signal('unknown', ...(ngDevMode ? [{ debugName: "inputLayout" }] : /* istanbul ignore next */ []));
+    // Whether the popup was opened by a touch interaction. When the input lives inside the popup, a
+    // touch-open focuses the popup (not the input) so Android doesn't raise the virtual keyboard
+    // (Base UI; iOS handles this itself). Reset to `false` on keyboard/mouse opens.
+    const openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+    // Whether the popup directive is currently mounted (open through the close/exit animation, until the
+    // presence machine unmounts it). Distinguishes "Escape closed the popup" (still mounted this tick)
+    // from "Escape on an already-closed combobox" (unmounted) — Base UI's `mounted`, since `open()`
+    // flips synchronously when the input's Escape handler (or the dismiss mechanism) closes the popup.
+    const popupMounted = signal(false, ...(ngDevMode ? [{ debugName: "popupMounted" }] : /* istanbul ignore next */ []));
+    let triggerElement = null;
+    // Tracks whether the last interaction was the keyboard, so the highlight doesn't jump to an item
+    // the cursor happens to rest on when arrow-key navigation scrolls the list under a still pointer.
+    let keyboardActive = false;
+    const _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    const orderedItems = computed(() => {
+        const items = [..._items()];
+        return items.sort((a, b) => domOrder(a.element, b.element));
+    }, ...(ngDevMode ? [{ debugName: "orderedItems" }] : /* istanbul ignore next */ []));
+    const matchesFilter = (item) => {
+        if (!config.filteringEnabled()) {
+            return true;
+        }
+        const filter = config.filter();
+        if (filter === null) {
+            return true;
+        }
+        const query = config.query();
+        // Custom filter: Base UI shape `(value, query, itemToString)`. Default: locale-aware contains
+        // on the item's own text (the element content), no value→text round-trip.
+        return filter
+            ? filter(item.value(), query, config.itemToString)
+            : defaultFilter.contains(item.textValue(), query);
+    };
+    const visibleItems = computed(() => {
+        const matching = orderedItems().filter((item) => matchesFilter(item));
+        const limit = config.limit();
+        return limit >= 0 ? matching.slice(0, limit) : matching;
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    const visibleSet = computed(() => new Set(visibleItems()), ...(ngDevMode ? [{ debugName: "visibleSet" }] : /* istanbul ignore next */ []));
+    const isVisible = (item) => visibleSet().has(item);
+    const filteredItems = computed(() => {
+        const data = config.items();
+        if (data === undefined) {
+            return visibleItems().map((item) => item.value());
+        }
+        const limit = config.limit();
+        const cap = (arr) => (limit >= 0 ? arr.slice(0, limit) : arr);
+        if (!config.filteringEnabled()) {
+            return cap(data);
+        }
+        const filter = config.filter();
+        if (filter === null) {
+            return cap(data);
+        }
+        const query = config.query();
+        if (!query) {
+            return cap(data);
+        }
+        // Virtualized: no DOM to read text from, so resolve each value through `itemToString`.
+        return cap(data.filter((value) => filter
+            ? filter(value, query, config.itemToString)
+            : defaultFilter.contains(config.itemToString(value), query)));
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    const visibleCount = computed(() => (config.virtualized() ? filteredItems().length : visibleItems().length), ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+    const highlight = useListHighlight({
+        items: orderedItems,
+        isNavigable: (item) => isVisible(item) && !item.disabled(),
+        getId: (item) => item.id,
+        loop: config.loopFocus,
+        injector
+    });
+    const highlightedItem = highlight.highlightedItem;
+    const highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    const highlightReason = signal('none', ...(ngDevMode ? [{ debugName: "highlightReason" }] : /* istanbul ignore next */ []));
+    const itemId = (index) => `${listId}-item-${index}`;
+    const activeId = computed(() => {
+        if (config.virtualized()) {
+            const index = highlightedIndex();
+            return index >= 0 ? itemId(index) : undefined;
+        }
+        return highlight.activeId();
+    }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    // `'first-match'` highlights the first item whose label prefix-matches the query (inline modes),
+    // so inline completion lands on a real prefix even when the list is static.
+    const pendingHighlightEdge = signal(null, ...(ngDevMode ? [{ debugName: "pendingHighlightEdge" }] : /* istanbul ignore next */ []));
+    // Inline completion (autocomplete `both` / `inline`): a transient preview of the highlighted item's
+    // label mirrored into the input. `null` when off. `suppressInline` skips it for a deleting edit.
+    const inlinePreview = signal(null, ...(ngDevMode ? [{ debugName: "inlinePreview" }] : /* istanbul ignore next */ []));
+    let suppressInline = false;
+    /** The first visible, navigable item whose label starts with the query (for inline completion). */
+    const firstMatchItem = () => {
+        const query = config.query();
+        if (!query) {
+            return null;
+        }
+        const lower = query.toLowerCase();
+        return (visibleItems().find((item) => !item.disabled() && item.textValue().toLowerCase().startsWith(lower)) ?? null);
+    };
+    /** The first visible, navigable item (auto-highlight fallback when no prefix match exists). */
+    const firstVisibleNavigable = () => visibleItems().find((item) => !item.disabled()) ?? null;
+    /** Resolves a pending edge to a virtualized index (`'first-match'` → first prefix match, else 0). */
+    const resolveVirtualizedEdge = (edge, count) => {
+        if (edge === 'last') {
+            return count - 1;
+        }
+        if (edge === 'first-match') {
+            const query = config.query();
+            if (query) {
+                const lower = query.toLowerCase();
+                const index = filteredItems().findIndex((value) => config.itemToString(value).toLowerCase().startsWith(lower));
+                if (index >= 0) {
+                    return index;
+                }
+            }
+        }
+        return 0;
+    };
+    /** The active highlight's label, DOM-ref or virtualized (resolved from the index). `null` when none. */
+    const activeLabel = () => {
+        if (config.virtualized()) {
+            const index = highlightedIndex();
+            const value = index >= 0 ? filteredItems()[index] : undefined;
+            return value === undefined ? null : config.itemToString(value);
+        }
+        return highlightedItem()?.textValue() ?? null;
+    };
+    const recomputeInlinePreview = (label, query, reason) => {
+        // Pointer hover must not rewrite the input (matches Base UI); only typing / keyboard nav complete it.
+        if (!config.inlineMode() || suppressInline || !label || reason === 'pointer') {
+            inlinePreview.set(null);
+            return;
+        }
+        if (query && label.toLowerCase().startsWith(query.toLowerCase())) {
+            // Type-ahead: keep the typed prefix (preserving its casing) and complete the rest.
+            inlinePreview.set(query + label.slice(query.length));
+            return;
+        }
+        // Keyboard navigation to a non-prefix item: show its full label so the input reflects it.
+        if (reason === 'keyboard') {
+            inlinePreview.set(label);
+            return;
+        }
+        inlinePreview.set(null);
+    };
+    const transition = useTransitionStatus(config.onOpenChangeComplete);
+    // --- effects ---
+    // Emit open changes and drive the open/close transition (skip the initial run).
+    let previousOpen = untracked(config.open);
+    effect(() => {
+        const open = config.open();
+        if (open === previousOpen) {
+            return;
+        }
+        previousOpen = open;
+        untracked(() => {
+            // Drop a deferred open-edge highlight when the popup closes — otherwise a pending
+            // 'first' (e.g. ArrowDown opened an empty list, then it closed) would unexpectedly
+            // highlight on the next plain open, even without autoHighlight.
+            if (!open) {
+                pendingHighlightEdge.set(null);
+            }
+            config.onOpenChange(open);
+            transition.start(open);
+        });
+    }, { injector });
+    // 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 = highlightedItem();
+        const index = highlightedIndex();
+        if (!highlightInitialized) {
+            highlightInitialized = true;
+            return;
+        }
+        untracked(() => {
+            if (config.virtualized()) {
+                const value = index >= 0 ? (filteredItems()[index] ?? null) : null;
+                // No active highlight (e.g. filtering pushed the index out of range) carries no
+                // interaction — report 'none', not a stale 'keyboard'/'pointer' reason.
+                config.onItemHighlighted({ value, index, reason: value === null ? 'none' : highlightReason() });
+            }
+            else {
+                const value = item ? item.value() : null;
+                const itemIndex = item ? visibleItems().indexOf(item) : -1;
+                // DOM-mode self-heal in `useListHighlight` clears `highlighted` without touching
+                // `highlightReason`; treat a null highlight as 'none' so the emit isn't mis-reported.
+                config.onItemHighlighted({
+                    value,
+                    index: itemIndex,
+                    reason: item === null ? 'none' : highlightReason()
+                });
+            }
+        });
+    }, { injector });
+    // Apply a deferred open-edge highlight once items (DOM refs) or filtered data have registered.
+    effect(() => {
+        const edge = pendingHighlightEdge();
+        const count = config.virtualized() ? filteredItems().length : orderedItems().length;
+        if (!config.open() || edge === null || count === 0) {
+            return;
+        }
+        untracked(() => {
+            // Programmatic move — reset the reason so the emit reports 'none', not a stale interaction.
+            highlightReason.set('none');
+            if (config.virtualized()) {
+                highlightedIndex.set(resolveVirtualizedEdge(edge, count));
+            }
+            else if (edge === 'last') {
+                highlight.last();
+            }
+            else if (edge === 'first-match') {
+                highlight.set(firstMatchItem() ?? firstVisibleNavigable());
+            }
+            else {
+                highlight.first();
+            }
+            pendingHighlightEdge.set(null);
+        });
+    }, { injector });
+    // Inline completion: mirror the active item's label into the input. Tracks the DOM-ref highlight,
+    // the virtualized index, the query, the reason, and `inlineMode` — so virtualized navigation and a
+    // `both → list` mode switch both recompute (and clear) the preview. No-op (null) when off (combobox).
+    effect(() => {
+        config.inlineMode();
+        highlightedItem();
+        highlightedIndex();
+        const query = config.query();
+        const reason = highlightReason();
+        untracked(() => recomputeInlinePreview(activeLabel(), query, reason));
+    }, { injector });
+    // autoHighlight 'always': keep the first navigable item highlighted whenever the popup is open.
+    effect(() => {
+        orderedItems();
+        visibleCount();
+        if (config.autoHighlightMode() === 'always' && config.open()) {
+            untracked(() => {
+                if (config.virtualized()) {
+                    const length = filteredItems().length;
+                    const index = highlightedIndex();
+                    if ((index < 0 || index >= length) && length > 0) {
+                        highlightReason.set('none');
+                        highlightedIndex.set(0);
+                    }
+                }
+                else if (highlightedItem() === null) {
+                    highlightReason.set('none');
+                    highlight.first();
+                }
+            });
+        }
+    }, { injector });
+    // Virtualized self-heal: clear a highlight that filtering has pushed out of range.
+    effect(() => {
+        if (!config.virtualized()) {
+            return;
+        }
+        const length = filteredItems().length;
+        untracked(() => {
+            const index = highlightedIndex();
+            if (index >= length && index !== -1) {
+                highlightReason.set('none');
+                highlightedIndex.set(-1);
+            }
+        });
+    }, { injector });
+    // --- navigation facade (mode-aware: index-based when virtualized, else DOM-ref) ---
+    const stepIndex = (direction) => {
+        const length = filteredItems().length;
+        if (length === 0) {
+            highlightedIndex.set(-1);
+            return;
+        }
+        const current = highlightedIndex();
+        if (current < 0) {
+            highlightedIndex.set(direction === 1 ? 0 : length - 1);
+            return;
+        }
+        let next = current + direction;
+        const loop = config.loopFocus();
+        if (next < 0) {
+            next = loop ? length - 1 : 0;
+        }
+        else if (next >= length) {
+            next = loop ? 0 : length - 1;
+        }
+        highlightedIndex.set(next);
+    };
+    // --- grid navigation (DOM-ref mode only) ---
+    /** Visible items grouped into rows by their enclosing row element (DOM order). */
+    const gridRows = () => {
+        const rows = new Map();
+        for (const item of visibleItems()) {
+            const key = config.rowOf(item.element);
+            const bucket = rows.get(key);
+            if (bucket) {
+                bucket.push(item);
+            }
+            else {
+                rows.set(key, [item]);
+            }
+        }
+        return [...rows.values()];
+    };
+    /** Grid vertical move: keep the column index, jump to the adjacent row (wraps when looping). */
+    const gridVertical = (direction) => {
+        const rows = gridRows();
+        if (rows.length === 0) {
+            return;
+        }
+        const current = highlightedItem();
+        if (!current) {
+            const row = direction === 1 ? rows[0] : rows[rows.length - 1];
+            highlight.set(row[0] ?? null);
+            return;
+        }
+        let rowIndex = rows.findIndex((row) => row.includes(current));
+        const col = rowIndex >= 0 ? rows[rowIndex].indexOf(current) : 0;
+        const loop = config.loopFocus();
+        rowIndex += direction;
+        if (rowIndex < 0) {
+            rowIndex = loop ? rows.length - 1 : 0;
+        }
+        else if (rowIndex >= rows.length) {
+            rowIndex = loop ? 0 : rows.length - 1;
+        }
+        const targetRow = rows[rowIndex];
+        highlight.set(targetRow[Math.min(col, targetRow.length - 1)] ?? null);
+    };
+    return {
+        listId,
+        labelId: labelId.asReadonly(),
+        setLabelId(id) {
+            labelId.set(id);
+        },
+        inputElement: inputElement.asReadonly(),
+        setInputElement(el) {
+            inputElement.set(el);
+        },
+        inputLayout: inputLayout.asReadonly(),
+        setInputLayout(layout) {
+            inputLayout.set(layout);
+        },
+        openedByTouch: openedByTouch.asReadonly(),
+        setOpenedByTouch(value) {
+            openedByTouch.set(value);
+        },
+        popupMounted: popupMounted.asReadonly(),
+        setPopupMounted(value) {
+            popupMounted.set(value);
+        },
+        get triggerElement() {
+            return triggerElement;
+        },
+        setTrigger(el) {
+            triggerElement = el;
+        },
+        orderedItems,
+        visibleItems,
+        visibleCount,
+        filteredItems,
+        isVisible,
+        registerItem(item) {
+            _items.update((items) => [...items, item]);
+        },
+        unregisterItem(item) {
+            _items.update((items) => items.filter((i) => i !== item));
+        },
+        highlight,
+        highlightedItem,
+        highlightedIndex: highlightedIndex.asReadonly(),
+        activeId,
+        itemId,
+        setHighlightReason(reason) {
+            highlightReason.set(reason);
+        },
+        setPendingHighlightEdge(edge) {
+            pendingHighlightEdge.set(edge);
+        },
+        /** Transient inline-completion preview (autocomplete inline modes); `null` when inactive. */
+        inlinePreview: inlinePreview.asReadonly(),
+        /** Suppress inline completion for the current edit (e.g. while a delete key is held). */
+        setSuppressInline(value) {
+            suppressInline = value;
+        },
+        /** Clear the inline preview synchronously (on select / clear / close, before the effect runs). */
+        clearInlinePreview() {
+            inlinePreview.set(null);
+        },
+        highlightNext(reason = 'keyboard') {
+            highlightReason.set(reason);
+            if (config.virtualized()) {
+                stepIndex(1);
+            }
+            else if (config.grid()) {
+                gridVertical(1);
+            }
+            else {
+                highlight.next();
+            }
+        },
+        highlightPrevious(reason = 'keyboard') {
+            highlightReason.set(reason);
+            if (config.virtualized()) {
+                stepIndex(-1);
+            }
+            else if (config.grid()) {
+                gridVertical(-1);
+            }
+            else {
+                highlight.previous();
+            }
+        },
+        // Grid horizontal moves (next/previous cell in DOM order). No-op outside grid mode.
+        highlightNextColumn(reason = 'keyboard') {
+            if (!config.grid() || config.virtualized()) {
+                return;
+            }
+            highlightReason.set(reason);
+            highlight.next();
+        },
+        highlightPreviousColumn(reason = 'keyboard') {
+            if (!config.grid() || config.virtualized()) {
+                return;
+            }
+            highlightReason.set(reason);
+            highlight.previous();
+        },
+        highlightFirst(reason = 'keyboard') {
+            highlightReason.set(reason);
+            if (config.virtualized()) {
+                highlightedIndex.set(filteredItems().length > 0 ? 0 : -1);
+            }
+            else {
+                highlight.first();
+            }
+        },
+        highlightLast(reason = 'keyboard') {
+            highlightReason.set(reason);
+            if (config.virtualized()) {
+                const length = filteredItems().length;
+                highlightedIndex.set(length > 0 ? length - 1 : -1);
+            }
+            else {
+                highlight.last();
+            }
+        },
+        highlightIndex(index, reason) {
+            if (index < 0 || index >= filteredItems().length) {
+                return;
+            }
+            highlightReason.set(reason);
+            highlightedIndex.set(index);
+        },
+        setHighlight(item, reason) {
+            highlightReason.set(reason);
+            highlight.set(item);
+        },
+        clearHighlightState() {
+            highlight.clear();
+            highlightedIndex.set(-1);
+        },
+        isKeyboardActive() {
+            return keyboardActive;
+        },
+        setKeyboardActive(value) {
+            keyboardActive = value;
+        },
+        transitionStatus: transition.status,
+        registerTransitionElement: transition.registerElement,
+        focusInput() {
+            inputElement()?.focus();
+        },
+        selectInputText() {
+            inputElement()?.select();
+        },
+        /**
+         * Restore focus after a selection: the input when it sits outside the popup, otherwise the
+         * trigger. Skipped when the consumer moved focus during the `onValueChange` callback — pass the
+         * `document.activeElement` captured *before* the emit so we don't clobber a consumer's choice
+         * (e.g. focusing an external message field after inserting an emoji).
+         */
+        restoreFocusAfterSelect(previousActiveElement) {
+            if (typeof document !== 'undefined' && document.activeElement !== previousActiveElement) {
+                return;
+            }
+            const input = inputElement();
+            if (input && !input.closest(config.popupSelector)) {
+                input.focus();
+            }
+            else {
+                triggerElement?.focus();
+            }
+        }
+    };
+}
+/** DOM-order comparator for two elements (precedes → -1, follows → 1). */
+function domOrder(a, b) {
+    const position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return 0;
+}
+
+// The engine stays private to the root (it owns mutable internals); the context factory — a free
+// function, so it can't reach a `private` field — reads it through this registry instead.
+const engineRegistry = new WeakMap();
 const context = () => {
     const root = inject(RdxComboboxRoot);
+    const engine = engineRegistry.get(root);
     return {
-        listId: root.listId,
-        labelId: root.labelId,
-        setLabelId: (id) => root.labelId.set(id),
+        listId: engine.listId,
+        labelId: engine.labelId,
+        setLabelId: (id) => engine.setLabelId(id),
         dir: root.dir,
         value: root.value,
         inputValue: root.inputValue,
         open: root.open,
+        present: root.present,
         multiple: root.multiple,
         selectionMode: root.mode,
         disabledState: root.disabledState,
-        readonly: root.readonly,
+        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),
+        grid: root.grid,
+        filteredItems: engine.filteredItems,
+        highlightedItem: engine.highlightedItem,
+        highlightedIndex: engine.highlightedIndex,
+        activeId: engine.activeId,
+        itemId: (index) => engine.itemId(index),
+        isKeyboardActive: () => engine.isKeyboardActive(),
+        setKeyboardActive: (value) => engine.setKeyboardActive(value),
+        transitionStatus: engine.transitionStatus,
+        registerTransitionElement: engine.registerTransitionElement,
+        visibleCount: engine.visibleCount,
+        isVisible: (item) => engine.isVisible(item),
         isSelected: (value) => root.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(),
+        registerItem: (item) => engine.registerItem(item),
+        unregisterItem: (item) => engine.unregisterItem(item),
+        highlight: engine.highlight,
+        highlightNext: () => engine.highlightNext('keyboard'),
+        highlightPrevious: () => engine.highlightPrevious('keyboard'),
+        highlightNextColumn: () => engine.highlightNextColumn('keyboard'),
+        highlightPreviousColumn: () => engine.highlightPreviousColumn('keyboard'),
+        highlightFirst: () => engine.highlightFirst('keyboard'),
+        highlightLast: () => engine.highlightLast('keyboard'),
+        highlightIndex: (index, reason) => engine.highlightIndex(index, reason),
+        setHighlight: (item, reason) => engine.setHighlight(item, reason),
+        clearHighlight: () => engine.clearHighlightState(),
         highlightItemOnHover: root.highlightItemOnHover,
         keepHighlight: root.keepHighlight,
-        inputElement: root.inputElement.asReadonly(),
-        setInputElement: (el) => root.inputElement.set(el),
-        registerTrigger: (el) => (root.triggerElement = el),
-        focusInput: () => root.focusInput(),
-        openPopup: () => root.setOpen(true),
-        openForBrowse: () => root.openForBrowse(),
-        closePopup: (revert = true) => root.closePopup(revert),
+        inputElement: engine.inputElement,
+        setInputElement: (el) => engine.setInputElement(el),
+        inputLayout: engine.inputLayout,
+        setInputLayout: (layout) => engine.setInputLayout(layout),
+        openedByTouch: engine.openedByTouch,
+        setOpenedByTouch: (value) => engine.setOpenedByTouch(value),
+        popupMounted: engine.popupMounted,
+        setPopupMounted: (value) => engine.setPopupMounted(value),
+        registerTrigger: (el) => engine.setTrigger(el),
+        focusInput: () => engine.focusInput(),
+        openPopup: (reason, event) => root.setOpen(true, reason, event),
+        openForBrowse: (reason, event) => root.openForBrowse(reason, event),
+        closePopup: (revert = true, reason, event) => root.closePopup(revert, reason, event),
         setInputValue: (value) => root.setInputValue(value),
-        openAndHighlight: (edge) => root.openAndHighlight(edge),
-        select: (item) => root.handleSelect(item),
-        selectIndex: (index) => root.selectIndex(index),
-        selectHighlighted: () => root.selectHighlighted(),
+        openAndHighlight: (edge, reason, event) => root.openAndHighlight(edge, reason, event),
+        navigateByKeyboard: (direction, event) => root.navigateByKeyboard(direction, event),
+        select: (item, event) => root.handleSelect(item, event),
+        selectIndex: (index, event) => root.selectIndex(index, event),
+        selectHighlighted: (event) => root.selectHighlighted(event),
         clearSelection: () => root.clearSelection(),
         removeValue: (value) => root.removeValue(value),
         removeLastValue: () => root.removeLastValue(),
@@ -128,15 +676,45 @@ function coerceAutoHighlight(value) {
     return value === 'always' || value === 'input-change' ? value : booleanAttribute(value);
 }
 /**
- * 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.
+ * Root of a Combobox — a filterable select. Owns selection, input text, open state, and the forms
+ * integration, and delegates filtering / highlight-model navigation / the open-close transition to the
+ * shared {@link useComboboxEngine} (ADR 0014). Exposes everything to the parts through
+ * {@link RdxComboboxRootContext}. Implements `ControlValueAccessor`.
  *
  * @group Components
  */
 class RdxComboboxRoot {
+    /** The list element id referenced by `aria-controls` / `aria-activedescendant` (engine-backed). */
+    get listId() {
+        return this.engine.listId;
+    }
+    /** The currently highlighted item (engine-backed; read by parts and tests). */
+    get highlightedItem() {
+        return this.engine.highlightedItem;
+    }
+    /** Number of items the list currently shows (engine-backed). */
+    get visibleCount() {
+        return this.engine.visibleCount;
+    }
+    /** The filtered item values an external virtualizer should render (engine-backed). */
+    get filteredItems() {
+        return this.engine.filteredItems;
+    }
+    /** Highlighted index into {@link filteredItems} in virtualized mode (engine-backed). */
+    get highlightedIndex() {
+        return this.engine.highlightedIndex;
+    }
+    /** The active option's id for `aria-activedescendant` (engine-backed). */
+    get activeId() {
+        return this.engine.activeId;
+    }
     constructor() {
         this.injector = inject(Injector);
+        /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         /** 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. */
@@ -161,11 +739,12 @@ class RdxComboboxRoot {
         /** 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 */ []));
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.dir = injectDirection(this.dirInput);
         /** 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 the combobox is read-only. Base UI prop name. */
+        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. */
@@ -228,8 +807,14 @@ class RdxComboboxRoot {
          * 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 */ []));
+        /**
+         * Whether the list is laid out as a 2D grid: `ArrowUp`/`ArrowDown` move between rows (keeping the
+         * column), `ArrowLeft`/`ArrowRight` move within a row. Wrap items in `RdxComboboxRow`; the list
+         * switches to `role="grid"`. Not supported together with {@link virtualized}.
+         */
+        this.grid = input(false, { ...(ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** How item values are compared for equality (a comparator function or an object key). Base UI prop name. */
+        this.isItemEqualToValue = input(...(ngDevMode ? [undefined, { debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
         /** Converts 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. */
@@ -245,97 +830,51 @@ class RdxComboboxRoot {
         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();
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         /**
          * 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
+        /** The active query: the typed text once the user starts typing, otherwise empty (browse mode). */
+        this.query = computed(() => (this.typed() ? (this.inputValue() ?? '') : ''), ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        /** Built-in filtering always applies for combobox (the `none` filter is handled inside the engine). */
+        this.filteringEnabled = signal(true, ...(ngDevMode ? [{ debugName: "filteringEnabled" }] : /* istanbul ignore next */ []));
+        /** Combobox never inline-completes (that's an autocomplete mode). */
+        this.noInline = signal(false, ...(ngDevMode ? [{ debugName: "noInline" }] : /* istanbul ignore next */ []));
+        /** The shared engine: item registry, filtering, highlight navigation, and the open-close transition. */
+        this.engine = useComboboxEngine({
+            injector: this.injector,
+            listIdPrefix: 'rdx-combobox-list-',
+            popupSelector: '[rdxComboboxPopup]',
+            open: this.open,
+            query: this.query,
+            filteringEnabled: this.filteringEnabled,
+            loopFocus: this.loopFocus,
+            autoHighlightMode: this.autoHighlightMode,
+            virtualized: this.virtualized,
+            items: this.items,
+            filter: this.filter,
+            limit: this.limit,
+            grid: this.grid,
+            rowOf: (element) => element.closest('[rdxComboboxRow]'),
+            inlineMode: this.noInline,
+            itemToString: (value) => this.labelFor(value),
+            onItemHighlighted: (details) => this.onItemHighlighted.emit(details),
+            onOpenChange: () => { },
+            onOpenChangeComplete: (open) => this.onOpenChangeComplete.emit(open)
         });
-        this.highlightedItem = this.highlight.highlightedItem;
-        /** Highlighted index into {@link filteredItems} in virtualized mode (`-1` when cleared). */
-        this.highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
-        /** Why the highlight last moved; read when emitting {@link onItemHighlighted}. */
-        this.highlightReason = signal('none', ...(ngDevMode ? [{ debugName: "highlightReason" }] : /* istanbul ignore next */ []));
-        this.activeId = computed(() => {
-            if (this.virtualized()) {
-                const index = this.highlightedIndex();
-                return index >= 0 ? this.itemId(index) : undefined;
-            }
-            return this.highlight.activeId();
-        }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
-        /** 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;
+        // Expose the (private) engine to the context factory, which is a free function.
+        engineRegistry.set(this, this.engine);
+        // Keep the dismissal reference in sync with the input (the anchor) so a press / focus on it counts
+        // as "inside" and never dismisses (ADR 0015).
+        effect(() => this.floatingContext.setReferenceElement(this.engine.inputElement() ?? null));
         // Apply uncontrolled defaults once.
         effect(() => {
             const initial = this.defaultValue();
@@ -348,105 +887,6 @@ class RdxComboboxRoot {
                 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()) {
@@ -464,46 +904,41 @@ class RdxComboboxRoot {
         }
     }
     /** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
-    openForBrowse() {
+    openForBrowse(reason = 'none', event = new Event('combobox.open-change')) {
         if (!this.open()) {
             this.typed.set(false);
         }
-        this.setOpen(true);
-        this.selectInputText();
+        this.setOpen(true, reason, event);
+        this.engine.selectInputText();
         if (this.autoHighlightMode() === 'always') {
-            this.pendingHighlightEdge.set('first');
+            this.engine.setPendingHighlightEdge('first');
         }
     }
     /** Opens the popup and highlights the given edge once the list mounts. */
-    openAndHighlight(edge) {
+    openAndHighlight(edge, reason = 'list-navigation', event = new Event('combobox.open-change')) {
         if (!this.open()) {
             this.typed.set(false);
         }
-        this.setOpen(true);
-        this.selectInputText();
-        this.pendingHighlightEdge.set(edge);
+        this.setOpen(true, reason, event);
+        this.engine.selectInputText();
+        this.engine.setPendingHighlightEdge(edge);
     }
-    /** Whether the item matches the active query (ignores the `limit` cap). */
-    matchesFilter(item) {
-        const filter = this.filter();
-        if (filter === null) {
-            return true;
+    /**
+     * Keyboard list navigation shared by the input and the chips: opens the popup and highlights the
+     * leading/trailing edge when closed, otherwise steps the highlight. `direction` is `1` (down) or
+     * `-1` (up). Centralized so the input and chip key handlers can't drift apart.
+     */
+    navigateByKeyboard(direction, event = new Event('combobox.open-change')) {
+        this.engine.setKeyboardActive(true);
+        if (!this.open()) {
+            this.openAndHighlight(direction === 1 ? 'first' : 'last', 'list-navigation', event);
+        }
+        else if (direction === 1) {
+            this.engine.highlightNext();
+        }
+        else {
+            this.engine.highlightPrevious();
         }
-        // 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') {
@@ -511,28 +946,34 @@ class RdxComboboxRoot {
         }
         const current = this.value();
         if (this.multiple()) {
-            return Array.isArray(current) && current.some((v) => isItemEqualToValue(v, value, this.by()));
+            return Array.isArray(current) && current.some((v) => isItemEqualToValue(v, value, this.isItemEqualToValue()));
         }
-        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));
+        return !isNullish(current) && isItemEqualToValue(current, value, this.isItemEqualToValue());
     }
-    setOpen(open) {
-        if (this.disabledState() || this.readonly()) {
-            return;
+    setOpen(open, reason = 'none', event = new Event('combobox.open-change')) {
+        if (open === this.open()) {
+            return true;
+        }
+        if (open && (this.disabledState() || this.readOnly())) {
+            return false;
         }
+        const change = this.createOpenChangeEvent(open, reason, event);
+        this.onOpenChange.emit(change.payload);
+        if (change.eventDetails.isCanceled()) {
+            return false;
+        }
+        this.preventUnmountOnClose.set(open ? false : change.shouldPreventUnmountOnClose());
         this.open.set(open);
+        return true;
     }
-    closePopup(revert = true) {
+    closePopup(revert = true, reason = 'none', event = new Event('combobox.open-change')) {
         if (!this.open()) {
             return;
         }
-        this.open.set(false);
-        this.clearHighlightState();
+        if (!this.setOpen(false, reason, event)) {
+            return;
+        }
+        this.engine.clearHighlightState();
         if (revert) {
             this.revertInputValue();
         }
@@ -543,9 +984,19 @@ class RdxComboboxRoot {
         this.inputValue.set(value);
         this.typed.set(true);
         this.onInputValueChange.emit(value);
+        // Base UI: emptying the field clears a single selection — but only when the input is OUTSIDE the
+        // popup. With the input inside the popup, the search box and the committed value are independent,
+        // so clearing the search must not deselect. (multiple keeps its chips; `none` has no committed
+        // value.) The guarded `commitValue` is a no-op when read-only / disabled.
+        if (value === '' &&
+            this.mode() === 'single' &&
+            !isNullish(this.value()) &&
+            this.engine.inputLayout() !== 'inside') {
+            this.commitValue(null);
+        }
         // Auto-highlight the first match as the query changes (deferred so it lands after items mount).
         if (this.autoHighlightMode() !== 'off') {
-            this.pendingHighlightEdge.set('first');
+            this.engine.setPendingHighlightEdge('first');
         }
     }
     /** Sets the input text programmatically (a selection label / revert) — not a user query. */
@@ -554,10 +1005,6 @@ class RdxComboboxRoot {
         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()) {
@@ -572,37 +1019,31 @@ class RdxComboboxRoot {
         if (custom) {
             return custom(value);
         }
-        const item = this.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.by()));
+        const item = this.engine.orderedItems().find((i) => isItemEqualToValue(i.value(), value, this.isItemEqualToValue()));
         return item ? item.textValue() : itemToStringLabel(value);
     }
-    /** 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()) {
+    handleSelect(item, event = new Event('combobox.item-press')) {
+        if (this.disabledState() || this.readOnly() || item.disabled()) {
             return;
         }
-        this.handleSelectValue(item.value(), item.textValue() || this.labelFor(item.value()));
+        this.handleSelectValue(item.value(), item.textValue() || this.labelFor(item.value()), event);
     }
     /** Selects the filtered item at `index` (virtualized mode). The label comes from {@link labelFor}. */
-    selectIndex(index) {
-        if (this.disabledState() || this.readonly()) {
+    selectIndex(index, event = new Event('combobox.item-press')) {
+        if (this.disabledState() || this.readOnly()) {
             return;
         }
-        const value = this.filteredItems()[index];
+        const value = this.engine.filteredItems()[index];
         if (value === undefined) {
             return;
         }
-        this.handleSelectValue(value, this.labelFor(value));
+        this.handleSelectValue(value, this.labelFor(value), event);
     }
     /** Commits a selection from a resolved value/label, independent of whether a DOM item exists. */
-    handleSelectValue(value, textValue) {
+    handleSelectValue(value, textValue, event = new Event('combobox.item-press')) {
+        // Capture focus *before* emitting `onValueChange` so focus restoration can be skipped when the
+        // consumer moves focus in that callback (e.g. focusing an external field after an emoji press).
+        const activeBefore = typeof document !== 'undefined' ? document.activeElement : null;
         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.
@@ -610,15 +1051,14 @@ class RdxComboboxRoot {
             if (this.fillInputOnItemPress()) {
                 this.setLabel(textValue);
             }
-            this.open.set(false);
-            this.clearHighlightState();
-            this.restoreFocusAfterSelect();
+            this.closePopup(false, 'item-press', event);
+            this.engine.restoreFocusAfterSelect(activeBefore);
             this.maybeSubmit();
             return;
         }
         if (this.multiple()) {
             const current = Array.isArray(this.value()) ? [...this.value()] : [];
-            const index = current.findIndex((v) => isItemEqualToValue(v, value, this.by()));
+            const index = current.findIndex((v) => isItemEqualToValue(v, value, this.isItemEqualToValue()));
             if (index === -1) {
                 current.push(value);
             }
@@ -627,124 +1067,57 @@ class RdxComboboxRoot {
             }
             this.commitValue(current);
             this.setLabel('');
-            this.focusInput();
+            // Keep the input focused for adding more values — unless the consumer moved focus.
+            if (typeof document === 'undefined' || document.activeElement === activeBefore) {
+                this.engine.focusInput();
+            }
         }
         else {
             this.commitValue(value);
             this.setLabel(textValue);
-            this.open.set(false);
-            this.clearHighlightState();
-            this.restoreFocusAfterSelect();
+            this.closePopup(false, 'item-press', event);
+            this.engine.restoreFocusAfterSelect(activeBefore);
         }
         this.maybeSubmit();
     }
     /** Requests submit of the closest form when `submitOnItemClick` is enabled. */
     maybeSubmit() {
         if (this.submitOnItemClick()) {
-            this.inputElement()?.form?.requestSubmit?.();
+            this.engine.inputElement()?.form?.requestSubmit?.();
         }
     }
-    selectHighlighted() {
+    selectHighlighted(event = new Event('combobox.item-press')) {
         if (this.virtualized()) {
-            const index = this.highlightedIndex();
+            const index = this.engine.highlightedIndex();
             if (index >= 0) {
-                this.selectIndex(index);
+                this.selectIndex(index, event);
             }
             return;
         }
-        const item = this.highlightedItem();
+        const item = this.engine.highlightedItem();
         if (item) {
-            this.handleSelect(item);
-        }
-    }
-    // --- 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.handleSelect(item, event);
         }
-        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);
+    clearSelection() {
+        // Read-only / disabled comboboxes are not user-mutable (Base UI blocks Clear here too).
+        if (this.disabledState() || this.readOnly()) {
             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;
+        // In `none` mode there is no committed value to clear — only the input text. Otherwise reset
+        // the selection. Also drop any highlight (Base UI resets the active/selected indices here).
+        if (this.mode() !== 'none') {
+            this.commitValue(this.multiple() ? [] : null);
         }
-        this.highlightedIndex.set(next);
-    }
-    clearSelection() {
-        this.commitValue(this.multiple() ? [] : null);
         this.setLabel('');
-        this.focusInput();
+        this.engine.clearHighlightState();
+        this.engine.focusInput();
     }
     removeValue(value) {
         if (!this.multiple() || !Array.isArray(this.value())) {
             return;
         }
-        const next = this.value().filter((v) => !isItemEqualToValue(v, value, this.by()));
+        const next = this.value().filter((v) => !isItemEqualToValue(v, value, this.isItemEqualToValue()));
         this.commitValue(next);
     }
     removeLastValue() {
@@ -757,21 +1130,7 @@ class RdxComboboxRoot {
         }
     }
     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();
-        }
+        this.engine.focusInput();
     }
     /** Registered by `RdxComboboxChips` so the input can hand keyboard focus to the chips. */
     registerChipsNav(fn) {
@@ -784,11 +1143,40 @@ class RdxComboboxRoot {
     markAsTouched() {
         this.onTouched?.();
     }
+    /**
+     * The single guarded value-mutation point for all user-driven changes (selection toggle, Clear,
+     * chip removal, Backspace). Read-only / disabled comboboxes never mutate here — programmatic form
+     * writes go through {@link writeValue}, which is intentionally not guarded. (ADR 0014, Finding 1.)
+     */
     commitValue(value) {
+        if (this.disabledState() || this.readOnly()) {
+            return;
+        }
         this.value.set(value);
         this.onValueChange.emit(value);
         this.onChange?.(value);
     }
+    createOpenChangeEvent(open, reason, event) {
+        const change = createCancelableChangeEventDetails(reason, event, this.resolveOpenChangeTrigger(event));
+        return {
+            payload: {
+                open,
+                reason,
+                event: change.eventDetails.event,
+                trigger: change.eventDetails.trigger,
+                eventDetails: change.eventDetails
+            },
+            eventDetails: change.eventDetails,
+            shouldPreventUnmountOnClose: change.shouldPreventUnmountOnClose
+        };
+    }
+    resolveOpenChangeTrigger(event) {
+        const target = event.target;
+        if (target instanceof HTMLElement) {
+            return target;
+        }
+        return this.engine.triggerElement ?? this.engine.inputElement() ?? undefined;
+    }
     // ControlValueAccessor
     writeValue(value) {
         untracked(() => this.value.set(value));
@@ -803,9 +1191,12 @@ class RdxComboboxRoot {
         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 }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, keepHighlight: { classPropertyName: "keepHighlight", publicName: "keepHighlight", isSignal: true, isRequired: false, transformFunction: null }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, 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: [
+    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 }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, keepHighlight: { classPropertyName: "keepHighlight", publicName: "keepHighlight", isSignal: true, isRequired: false, transformFunction: null }, openOnInputClick: { classPropertyName: "openOnInputClick", publicName: "openOnInputClick", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, submitOnItemClick: { classPropertyName: "submitOnItemClick", publicName: "submitOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", onValueChange: "onValueChange", onInputValueChange: "onInputValueChange", onOpenChange: "onOpenChange", onItemHighlighted: "onItemHighlighted", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-disabled": "disabledState() ? \"\" : undefined" } }, providers: [
             provideComboboxRootContext(context),
-            { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true }
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true },
+            // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxComboboxRoot).floatingContext)
         ], exportAs: ["rdxComboboxRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxRoot, decorators: [{
@@ -815,14 +1206,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxComboboxRoot',
                     providers: [
                         provideComboboxRootContext(context),
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxComboboxRoot, multi: true },
+                        // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxComboboxRoot).floatingContext)
                     ],
                     hostDirectives: [RdxPopper],
                     host: {
                         '[attr.data-disabled]': 'disabledState() ? "" : undefined'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], 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 }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], keepHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepHighlight", required: false }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], fillInputOnItemPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillInputOnItemPress", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], keepHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepHighlight", required: false }] }], openOnInputClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnInputClick", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], submitOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnItemClick", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onInputValueChange: [{ type: i0.Output, args: ["onInputValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onItemHighlighted: [{ type: i0.Output, args: ["onItemHighlighted"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
@@ -836,7 +1230,7 @@ class RdxComboboxBackdrop {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxBackdrop, isStandalone: true, selector: "[rdxComboboxBackdrop]", host: { attributes: { "role": "presentation" }, 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,
@@ -844,7 +1238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxComboboxBackdrop]',
                     exportAs: 'rdxComboboxBackdrop',
                     host: {
-                        'aria-hidden': 'true',
+                        // A decorative overlay — Base UI marks it `role="presentation"` (excluded from the a11y tree).
+                        role: 'presentation',
                         '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
                         '[attr.data-open]': 'rootContext.open() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.open() ? undefined : ""'
@@ -854,7 +1249,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * 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).
+ * arrow-key navigation across the chips (the chips themselves handle the key events). Uses
+ * `role="toolbar"` (Base UI): it keeps NVDA in focus mode while arrow-navigating the chips, where a
+ * plain `list` would drop into browse mode.
  *
  * @group Components
  */
@@ -879,16 +1276,16 @@ class RdxComboboxChips {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxChips, isStandalone: true, selector: "[rdxComboboxChips]", host: { attributes: { "role": "toolbar" } }, exportAs: ["rdxComboboxChips"], hostDirectives: [{ directive: i1$1.RdxFloatingInsideElement }], 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],
+                    hostDirectives: [RdxFloatingInsideElement],
                     host: {
-                        role: 'list'
+                        role: 'toolbar'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -916,21 +1313,35 @@ class RdxComboboxChip {
         const list = this.chips?.getChips() ?? [];
         const index = list.indexOf(this.element);
         switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                // Leave the chips and engage the list: focus must return to the input so
+                // `aria-activedescendant` navigation works, then run the same nav as the input.
+                event.preventDefault();
+                this.rootContext.focusInput();
+                this.rootContext.navigateByKeyboard(event.key === 'ArrowDown' ? 1 : -1);
+                break;
             case 'ArrowLeft':
-                if (index > 0) {
+            case 'ArrowRight': {
+                // Direction-aware: in RTL the visual arrows flip. "Forward" steps toward the input
+                // (the next chip, then the input); "backward" steps toward the first chip.
+                const rtl = this.rootContext.dir() === 'rtl';
+                const forward = (event.key === 'ArrowRight') !== rtl;
+                if (forward) {
                     event.preventDefault();
-                    list[index - 1].focus();
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (index < list.length - 1) {
-                    list[index + 1].focus();
+                    if (index < list.length - 1) {
+                        list[index + 1].focus();
+                    }
+                    else {
+                        this.rootContext.focusInput();
+                    }
                 }
-                else {
-                    this.rootContext.focusInput();
+                else if (index > 0) {
+                    event.preventDefault();
+                    list[index - 1].focus();
                 }
                 break;
+            }
             case 'Home':
                 if (list.length) {
                     event.preventDefault();
@@ -965,7 +1376,7 @@ class RdxComboboxChip {
         }
     }
     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 }); }
+    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: { "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,
@@ -974,7 +1385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxComboboxChip',
                     providers: [provideComboboxChipContext(chipContext)],
                     host: {
-                        role: 'listitem',
+                        // No explicit role (Base UI): a focusable child of the `toolbar` chips container.
                         tabindex: '-1',
                         '(keydown)': 'onKeydown($event)'
                     }
@@ -1020,7 +1431,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxComboboxClear {
     constructor() {
         this.rootContext = injectComboboxRootContext();
+        /** Disables just this clear button (in addition to the combobox's own disabled / read-only state). */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isDisabled = computed(() => this.disabled() || this.rootContext.disabledState() || this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether there is nothing to clear, mirroring Base UI's visibility rule: in `none` mode the
+         * button tracks the input text (a pure search field has no selection), otherwise it tracks the
+         * selected value(s).
+         */
         this.isEmpty = computed(() => {
+            if (this.rootContext.selectionMode() === 'none') {
+                return (this.rootContext.inputValue() ?? '') === '';
+            }
             const value = this.rootContext.value();
             if (Array.isArray(value)) {
                 return value.length === 0;
@@ -1028,49 +1450,76 @@ class RdxComboboxClear {
             return value === null || value === undefined;
         }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     }
+    // Keep focus on the input — don't let the button take it on pointer/mouse down.
+    onPointerDown(event) {
+        event.preventDefault();
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxClear, isStandalone: true, selector: "button[rdxComboboxClear]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Clear" }, listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onPointerDown($event)", "click": "onClick()" }, properties: { "hidden": "isEmpty()", "attr.disabled": "isDisabled() ? \"\" : undefined" } }, exportAs: ["rdxComboboxClear"], hostDirectives: [{ directive: i1$1.RdxFloatingInsideElement }], 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],
+                    hostDirectives: [RdxFloatingInsideElement],
                     host: {
                         type: 'button',
                         tabindex: '-1',
                         'aria-label': 'Clear',
                         '[hidden]': 'isEmpty()',
-                        '[attr.disabled]': 'rootContext.disabledState() ? "" : undefined',
+                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(mousedown)': 'onPointerDown($event)',
                         '(click)': 'onClick()'
                     }
                 }]
-        }] });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
- * Shown only when no items match the current query.
+ * A polite, atomic live region announcing the "no results" message. Mirrors Base UI: the element
+ * stays **mounted and visible at all times** so screen readers reliably announce the transition to
+ * empty — only its *content* is rendered conditionally (projected when nothing matches, removed
+ * otherwise). It must never be hidden/unmounted (`hidden`, `display:none`, `aria-hidden`, `@if`):
+ * pulling the region out of the accessibility tree at the same instant its text appears is exactly
+ * what suppresses the announcement.
  *
  * @group Components
  */
 class RdxComboboxEmpty {
     constructor() {
         this.rootContext = injectComboboxRootContext();
+        /** Whether no items match the current query (drives projection of the message). */
+        this.isEmpty = computed(() => this.rootContext.visibleCount() === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RdxComboboxEmpty, isStandalone: true, selector: "[rdxComboboxEmpty]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" }, properties: { "attr.data-empty": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxComboboxEmpty"], ngImport: i0, template: `
+        @if (isEmpty()) {
+            <ng-content />
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxEmpty, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
                     selector: '[rdxComboboxEmpty]',
                     exportAs: 'rdxComboboxEmpty',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (isEmpty()) {
+            <ng-content />
+        }
+    `,
                     host: {
-                        role: 'presentation',
-                        '[hidden]': 'rootContext.visibleCount() > 0'
+                        role: 'status',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                        // Present only while the message is shown. Lets consumers collapse the always-mounted region
+                        // (e.g. `data-[empty]:py-6`) without `display:none`/`hidden`, which would break the announcement.
+                        '[attr.data-empty]': 'isEmpty() ? "" : undefined'
                     }
                 }]
         }] });
@@ -1131,6 +1580,12 @@ class RdxComboboxGroupLabel {
         this.groupContext = injectComboboxGroupContext();
         this.id = injectId('rdx-combobox-group-label-');
         this.groupContext.labelId.set(this.id);
+        // Clear the registration on unmount so the group doesn't reference a removed label's id.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.groupContext.labelId() === this.id) {
+                this.groupContext.labelId.set(undefined);
+            }
+        });
     }
     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 }); }
@@ -1166,7 +1621,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
-const attr = (value) => (value ? '' : undefined);
+/**
+ * Positions the combobox popup relative to the input anchor using the popper engine.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the full popper positioning surface — the inputs
+ * (`side`, `sideOffset`, `align`, …), the `placed` output, and the host bindings — from
+ * {@link RdxPopperContentWrapper}, and only declares combobox's Base UI-aligned defaults through the
+ * config provider. `provideRdxPopperContentWrapper` re-wires the `useExisting` alias + context that
+ * the popup and arrow resolve (Angular does not inherit a base directive's `providers`).
+ *
+ * @group Components
+ */
+class RdxComboboxPositioner extends RdxPopperContentWrapper {
+    constructor() {
+        super();
+        const rootContext = injectComboboxRootContext();
+        const injector = inject(Injector);
+        const host = inject(ElementRef).nativeElement;
+        // A modal combobox isolates the background with an internal backdrop (Base UI); the input stays
+        // clickable through a cutout. (Combobox is non-modal by default — usually no backdrop.)
+        afterNextRender(() => setupInternalBackdrop(host, injector, {
+            isOpen: () => rootContext.open(),
+            shouldRender: () => rootContext.modal(),
+            cutout: () => rootContext.inputElement() ?? null
+        }));
+    }
+    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: "14.0.0", version: "21.2.9", type: RdxComboboxPositioner, isStandalone: true, selector: "[rdxComboboxPositioner]", providers: [
+            ...provideRdxPopperContentWrapper(RdxComboboxPositioner),
+            provideRdxPopperContentConfig({ sideOffset: 4, align: 'start' })
+        ], exportAs: ["rdxComboboxPositioner"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxPositioner]',
+                    exportAs: 'rdxComboboxPositioner',
+                    providers: [
+                        ...provideRdxPopperContentWrapper(RdxComboboxPositioner),
+                        provideRdxPopperContentConfig({ sideOffset: 4, align: 'start' })
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+const attr$1 = (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.
@@ -1206,8 +1704,12 @@ class RdxComboboxInput {
         }, ...(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.dataAttr = attr$1;
         this.rootContext.setInputElement(this.element);
+        // Report the layout (Base UI's `inputInsidePopup`): a positioner ancestor means the input lives
+        // inside the popup (e.g. a command palette), so the Trigger becomes the focusable
+        // `role="combobox"`; otherwise the input is the tab stop and the Trigger is a `tabindex="-1"` toggle.
+        this.rootContext.setInputLayout(inject(RdxComboboxPositioner, { optional: true }) ? 'inside' : 'outside');
         afterNextRender(() => {
             this.fieldRootContext?.setControlId(this.id());
         });
@@ -1222,22 +1724,31 @@ class RdxComboboxInput {
         if (this.composing || event.isComposing) {
             return;
         }
-        this.commitInput(event.target.value);
+        this.commitInput(event.target.value, event);
     }
     onCompositionEnd(event) {
         this.composing = false;
-        this.commitInput(event.target.value);
-    }
-    commitInput(value) {
-        if (!this.rootContext.open()) {
-            this.rootContext.openPopup();
+        this.commitInput(event.target.value, event);
+    }
+    commitInput(value, event) {
+        // Base UI: clearing the field closes the popup only when the input is OUTSIDE it (and doesn't
+        // open on click). When the input lives inside the popup, emptying the search must keep the popup
+        // open (closing it would dismiss the field the user is typing in); otherwise typing (including
+        // down to empty in browse mode) opens it.
+        if (value === '' && !this.rootContext.openOnInputClick() && this.rootContext.inputLayout() !== 'inside') {
+            this.rootContext.closePopup(false, 'input-clear', event);
+        }
+        else if (!this.rootContext.open() && value.trim() !== '') {
+            // Base UI opens on input only for a non-empty trimmed value — whitespace alone won't open it.
+            this.rootContext.openPopup('input-change', event);
         }
-        // setInputValue applies any autoHighlight (deferred until items mount).
+        // setInputValue applies any autoHighlight (deferred until items mount) and, in single mode,
+        // deselects when the field is emptied.
         this.rootContext.setInputValue(value);
     }
-    onClick() {
+    onClick(event) {
         if (this.rootContext.openOnInputClick()) {
-            this.rootContext.openForBrowse();
+            this.rootContext.openForBrowse('input-press', event);
         }
     }
     onFocus() {
@@ -1248,8 +1759,9 @@ class RdxComboboxInput {
         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.
+        // Don't interfere with IME composition or text-editing shortcuts / range selection. Shift+Arrows
+        // and modified Home/End keep moving/extending the caret; Ctrl/Meta combos stay browser shortcuts.
+        // (Plain Home/End navigate the grid below, but only in `grid` mode.)
         if (event.isComposing || this.composing) {
             return;
         }
@@ -1260,23 +1772,11 @@ class RdxComboboxInput {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this.rootContext.setKeyboardActive(true);
-                if (!open) {
-                    this.rootContext.openAndHighlight('first');
-                }
-                else {
-                    this.rootContext.highlightNext();
-                }
+                this.rootContext.navigateByKeyboard(1, event);
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this.rootContext.setKeyboardActive(true);
-                if (!open) {
-                    this.rootContext.openAndHighlight('last');
-                }
-                else {
-                    this.rootContext.highlightPrevious();
-                }
+                this.rootContext.navigateByKeyboard(-1, event);
                 break;
             case 'Enter':
                 if (open) {
@@ -1286,33 +1786,69 @@ class RdxComboboxInput {
                     if (hasHighlight) {
                         // Select the highlighted item (and prevent an accidental form submit).
                         event.preventDefault();
-                        this.rootContext.selectHighlighted();
+                        this.rootContext.selectHighlighted(event);
                     }
                     else {
                         // Nothing highlighted: just close, and let the form submit.
-                        this.rootContext.closePopup(true);
+                        this.rootContext.closePopup(true, 'none', event);
                     }
                 }
                 break;
             case 'Escape':
-                // Just close the popup (reverting the in-progress query); never clear the selection.
                 if (open) {
+                    // Close the popup, reverting the in-progress query; keep the selection.
                     event.preventDefault();
-                    this.rootContext.closePopup(true);
+                    this.rootContext.closePopup(true, 'escape-key', event);
+                }
+                else if (!this.rootContext.popupMounted()) {
+                    // Base UI: Escape on a closed combobox clears the input text and the selection
+                    // (`clearSelection` resets both, a no-op while read-only / disabled). Guard on
+                    // `popupMounted`: the input's own Escape handler (the `open` branch above) already set
+                    // `open()` false when this same Escape just closed an open popup — in that case the
+                    // popup is still mounted (exiting) and we must not also clear.
+                    this.rootContext.clearSelection();
                 }
                 break;
             case 'Tab':
-                if (open) {
-                    this.rootContext.closePopup(true);
+                // Tab dismisses a real popup and lets focus move on. With no popup mounted (an always-open
+                // inline layout) Tab must NOT close — it just moves focus on. Guard on `popupMounted`.
+                if (open && this.rootContext.popupMounted()) {
+                    this.rootContext.closePopup(true, 'none', event);
                 }
                 break;
+            case 'ArrowRight':
+                // In a grid, the horizontal arrows move within a row.
+                if (open && this.rootContext.grid()) {
+                    event.preventDefault();
+                    this.rootContext.setKeyboardActive(true);
+                    this.rootContext.highlightNextColumn();
+                    break;
+                }
+                this.maybeStepIntoChips('ArrowRight', event);
+                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()) {
+                if (open && this.rootContext.grid()) {
+                    event.preventDefault();
+                    this.rootContext.setKeyboardActive(true);
+                    this.rootContext.highlightPreviousColumn();
+                    break;
+                }
+                this.maybeStepIntoChips('ArrowLeft', event);
+                break;
+            case 'Home':
+                // In a grid the search box is a filter, so Home/End jump to the first/last cell rather
+                // than moving the caret (outside a grid they keep their native text-editing behavior).
+                if (open && this.rootContext.grid()) {
+                    event.preventDefault();
+                    this.rootContext.setKeyboardActive(true);
+                    this.rootContext.highlightFirst();
+                }
+                break;
+            case 'End':
+                if (open && this.rootContext.grid()) {
                     event.preventDefault();
+                    this.rootContext.setKeyboardActive(true);
+                    this.rootContext.highlightLast();
                 }
                 break;
             case 'Backspace':
@@ -1322,20 +1858,35 @@ class RdxComboboxInput {
                 break;
         }
     }
+    /**
+     * From the very start of the input in `multiple` mode, step into the chips. The key that points
+     * toward the chips is direction-aware: `ArrowLeft` in LTR, `ArrowRight` in RTL.
+     */
+    maybeStepIntoChips(key, event) {
+        const towardChips = this.rootContext.dir() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        if (key === towardChips &&
+            this.rootContext.multiple() &&
+            this.element.selectionStart === 0 &&
+            this.element.selectionEnd === 0 &&
+            this.rootContext.focusLastChip()) {
+            event.preventDefault();
+        }
+    }
     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 }); }
+    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($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "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.RdxFloatingInsideElement }], 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],
+                    hostDirectives: [RdxPopperAnchor, RdxFloatingInsideElement],
                     host: {
                         role: 'combobox',
                         autocomplete: 'off',
                         'aria-autocomplete': 'list',
                         '[attr.id]': 'id()',
+                        '[attr.aria-haspopup]': 'rootContext.grid() ? "grid" : "listbox"',
                         '[attr.aria-expanded]': 'rootContext.open()',
                         '[attr.aria-controls]': 'rootContext.listId',
                         '[attr.aria-labelledby]': 'rootContext.labelId()',
@@ -1358,7 +1909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-filled]': 'dataAttr(filledState())',
                         '[attr.data-focused]': 'dataAttr(focusedState())',
                         '(input)': 'onInput($event)',
-                        '(click)': 'onClick()',
+                        '(click)': 'onClick($event)',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(keydown)': 'onKeydown($event)',
@@ -1368,12 +1919,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
 
+const attr = (value) => (value ? '' : undefined);
+/**
+ * Optional wrapper around the input and its adornments (icon, clear, trigger). Mirrors the combobox
+ * state via `data-*` so the whole group can be styled together (focus ring, disabled, etc.).
+ *
+ * @group Components
+ */
+class RdxComboboxInputGroup {
+    constructor() {
+        this.rootContext = injectComboboxRootContext();
+        /** Whether a value is selected (a non-empty array in multiple mode, or a non-nullish single value). */
+        this.filled = computed(() => {
+            const value = this.rootContext.value();
+            if (Array.isArray(value)) {
+                return value.length > 0;
+            }
+            return value !== null && value !== undefined;
+        }, ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+        this.dataAttr = attr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxInputGroup, isStandalone: true, selector: "[rdxComboboxInputGroup]", host: { properties: { "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-disabled": "dataAttr(rootContext.disabledState())", "attr.data-required": "dataAttr(rootContext.requiredState())", "attr.data-filled": "dataAttr(filled())" } }, exportAs: ["rdxComboboxInputGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxInputGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxInputGroup]',
+                    exportAs: 'rdxComboboxInputGroup',
+                    host: {
+                        '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
+                        '[attr.data-disabled]': 'dataAttr(rootContext.disabledState())',
+                        '[attr.data-required]': 'dataAttr(rootContext.requiredState())',
+                        '[attr.data-filled]': 'dataAttr(filled())'
+                    }
+                }]
+        }] });
+
+/**
+ * A row in a grid-layout combobox list. Groups the items in one row so the root can navigate by row
+ * (`ArrowUp` / `ArrowDown`) and within a row (`ArrowLeft` / `ArrowRight`). Only meaningful when the
+ * root has `grid` enabled; the root resolves an item's row from its nearest `[rdxComboboxRow]` ancestor.
+ *
+ * @group Components
+ */
+class RdxComboboxRow {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxRow, isStandalone: true, selector: "[rdxComboboxRow]", host: { attributes: { "role": "row" } }, exportAs: ["rdxComboboxRow"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxComboboxRow]',
+                    exportAs: 'rdxComboboxRow',
+                    host: {
+                        role: 'row'
+                    }
+                }]
+        }] });
+
 const itemContext = () => {
     const item = inject(RdxComboboxItem);
     return {
         isSelected: item.isSelected,
         isHighlighted: item.isHighlighted,
         disabled: item.disabled,
+        // Read-only `Signal` (not `InputSignal`) so autocomplete's computed `value` is assignable too.
         value: item.value
     };
 };
@@ -1407,6 +2018,16 @@ class RdxComboboxItem {
         this.elementId = computed(() => this.virtualized() ? this.rootContext.itemId(this.index() ?? -1) : this.id, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
         this.ariaSetSize = computed(() => this.virtualized() ? this.rootContext.filteredItems().length : undefined, ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
         this.ariaPosInSet = computed(() => (this.virtualized() ? (this.index() ?? -1) + 1 : undefined), ...(ngDevMode ? [{ debugName: "ariaPosInSet" }] : /* istanbul ignore next */ []));
+        /** The nearest enclosing grid row, if any (drives the `gridcell` role). */
+        this.row = inject(RdxComboboxRow, { optional: true });
+        /** `gridcell` only when actually inside a `RdxComboboxRow` of a grid list; otherwise `option`. */
+        this.role = computed(() => (this.rootContext.grid() && this.row ? 'gridcell' : 'option'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether selection is a meaningful concept here (Base UI's `selectable`). In `selectionMode="none"`
+         * (every autocomplete option, and a pure-search combobox) options carry no selection state, so
+         * `aria-selected` / `data-selected` are omitted entirely rather than rendered as `false`.
+         */
+        this.selectable = computed(() => this.rootContext.selectionMode() !== 'none', ...(ngDevMode ? [{ debugName: "selectable" }] : /* 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 */ []));
@@ -1414,6 +2035,9 @@ class RdxComboboxItem {
             ? this.rootContext.highlightedIndex() === this.index()
             : this.rootContext.highlightedItem() === this, ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
         this.group = injectComboboxGroupContext(true);
+        // Whether a primary-button pointerdown started on **this** item. A normal press+release here is
+        // committed by `click`; `mouseup` is only the drag-end fallback for a press that began *elsewhere*.
+        this.pointerDownStarted = false;
         const destroyRef = inject(DestroyRef);
         afterNextRender(() => {
             // Virtualized items are not registered: the root navigates over `items` data by index, and
@@ -1445,18 +2069,51 @@ class RdxComboboxItem {
                 this.element.scrollIntoView({ block: 'nearest' });
             }
         });
+        // Reset the press flag whenever the popup closes (matches Base UI), so a later drag-end onto
+        // this item isn't blocked by a stale press from an earlier interaction.
+        effect(() => {
+            if (!this.rootContext.open()) {
+                this.pointerDownStarted = false;
+            }
+        });
     }
     onPointerDown(event) {
-        // Keep focus on the input; prevent the item from stealing focus on pointer/mouse down.
+        if (event.button !== 0) {
+            return;
+        }
+        // Keep focus on the input; prevent the item from stealing focus.
         event.preventDefault();
         this.rootContext.setKeyboardActive(false);
+        this.pointerDownStarted = true;
     }
-    onPointerUp() {
+    onMouseDown(event) {
+        // Belt-and-suspenders for keeping focus on the input (and iOS Safari blur on tap).
+        if (event.button === 0) {
+            event.preventDefault();
+        }
+    }
+    onMouseUp(event) {
+        // Read-and-reset the press flag first (matches Base UI), so a press+release here doesn't leave
+        // it set and block a later drag-end onto this same item. Drag-end: commit when the primary
+        // button is released over the highlighted item while the press began on a *different* element
+        // (so `click` won't fire here). A press that began on this item is committed by `click` instead.
+        const startedHere = this.pointerDownStarted;
+        this.pointerDownStarted = false;
+        if (event.button !== 0 || startedHere || !this.isHighlighted()) {
+            return;
+        }
+        this.commitSelection(event);
+    }
+    onClick(event) {
+        // Primary selection trigger; also fires for programmatic `.click()`.
+        this.commitSelection(event);
+    }
+    commitSelection(event) {
         if (this.virtualized()) {
-            this.rootContext.selectIndex(this.index() ?? -1);
+            this.rootContext.selectIndex(this.index() ?? -1, event);
         }
         else {
-            this.rootContext.select(this);
+            this.rootContext.select(this, event);
         }
     }
     onPointerMove() {
@@ -1497,7 +2154,7 @@ class RdxComboboxItem {
         this.rootContext.clearHighlight();
     }
     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()", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.id": "elementId()", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-setsize": "ariaSetSize()", "attr.aria-posinset": "ariaPosInSet()", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "hidden": "!isVisible()", "attr.data-hidden": "isVisible() ? undefined : \"\"" } }, providers: [provideComboboxItemContext(itemContext)], exportAs: ["rdxComboboxItem"], ngImport: i0 }); }
+    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: { listeners: { "pointerdown": "onPointerDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "click": "onClick($event)", "pointermove": "onPointerMove()", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.role": "role()", "attr.id": "elementId()", "attr.aria-selected": "selectable() ? isSelected() : undefined", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-setsize": "ariaSetSize()", "attr.aria-posinset": "ariaPosInSet()", "attr.data-selected": "selectable() && 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,
@@ -1506,20 +2163,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxComboboxItem',
                     providers: [provideComboboxItemContext(itemContext)],
                     host: {
-                        role: 'option',
+                        '[attr.role]': 'role()',
                         '[attr.id]': 'elementId()',
-                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.aria-selected]': 'selectable() ? isSelected() : undefined',
                         '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
                         '[attr.aria-setsize]': 'ariaSetSize()',
                         '[attr.aria-posinset]': 'ariaPosInSet()',
-                        '[attr.data-selected]': 'isSelected() ? "" : undefined',
+                        '[attr.data-selected]': 'selectable() && isSelected() ? "" : undefined',
                         '[attr.data-highlighted]': 'isHighlighted() ? "" : undefined',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '[hidden]': '!isVisible()',
                         '[attr.data-hidden]': 'isVisible() ? undefined : ""',
                         '(pointerdown)': 'onPointerDown($event)',
-                        '(mousedown)': 'onPointerDown($event)',
-                        '(pointerup)': 'onPointerUp()',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(mouseup)': 'onMouseUp($event)',
+                        '(click)': 'onClick($event)',
                         '(pointermove)': 'onPointerMove()',
                         '(pointerleave)': 'onPointerLeave($event)'
                     }
@@ -1578,7 +2236,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * The listbox container for options. Carries the id referenced by the input's `aria-controls`.
+ * The listbox container for options. Carries the id referenced by the input's `aria-controls`, exposes
+ * `data-empty` while no options match the current query (Base UI's `ComboboxList` empty state), and
+ * switches its `role` to `grid` when the root has `grid` enabled.
  *
  * @group Components
  */
@@ -1586,8 +2246,27 @@ class RdxComboboxList {
     constructor() {
         this.rootContext = injectComboboxRootContext();
     }
+    onKeydown(event) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        // Base UI bails early when disabled / read-only — don't swallow Enter (e.g. a form submit).
+        if (this.rootContext.disabledState() || this.rootContext.readonly()) {
+            return;
+        }
+        const hasHighlight = this.rootContext.virtualized()
+            ? this.rootContext.highlightedIndex() >= 0
+            : this.rootContext.highlightedItem() !== null;
+        if (hasHighlight) {
+            // Base UI `stopEvent`: also stop propagation so a parent keydown handler doesn't re-handle
+            // Enter after the selection.
+            event.preventDefault();
+            event.stopPropagation();
+            this.rootContext.selectHighlighted();
+        }
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxList, isStandalone: true, selector: "[rdxComboboxList]", host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.id": "rootContext.listId", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined", "attr.data-empty": "rootContext.visibleCount() === 0 ? \"\" : undefined" } }, exportAs: ["rdxComboboxList"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxList, decorators: [{
             type: Directive,
@@ -1595,9 +2274,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxComboboxList]',
                     exportAs: 'rdxComboboxList',
                     host: {
-                        role: 'listbox',
+                        // Base UI: the list is a programmatic focus target (`tabindex="-1"`) and selects the highlighted
+                        // item on Enter, for custom layouts that move focus onto the list rather than the input.
+                        tabindex: '-1',
+                        '[attr.role]': 'rootContext.grid() ? "grid" : "listbox"',
                         '[attr.id]': 'rootContext.listId',
-                        '[attr.aria-multiselectable]': 'rootContext.multiple() ? "true" : undefined'
+                        '[attr.aria-multiselectable]': 'rootContext.multiple() ? "true" : undefined',
+                        '[attr.data-empty]': 'rootContext.visibleCount() === 0 ? "" : undefined',
+                        '(keydown)': 'onKeydown($event)'
                     }
                 }]
         }] });
@@ -1611,19 +2295,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxComboboxPopup {
     constructor() {
         this.rootContext = injectComboboxRootContext();
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.popper = injectPopperContentWrapperContext();
         this.element = inject(ElementRef).nativeElement;
-        // 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);
+        // Activation policy (ADR 0016 §2 + §3): lock page scroll while a modal popup is OPEN. The gate
+        // keys on `open` (not mounted), so the lock releases at close-start — before the exit animation
+        // finishes — even though the popup stays mounted through it. For a **touch** open the anchored
+        // helper only locks when the popup is effectively viewport-width, so a small dropdown stays
+        // swipe-to-dismissable on mobile (§3).
+        useAnchoredScrollLock(computed(() => this.rootContext.open() && this.rootContext.modal()), {
+            touchOpen: () => this.rootContext.openedByTouch(),
+            element: () => this.element
+        });
         // 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));
+        // Track mounted state so Escape can tell "closing this open popup" from "already closed".
+        this.rootContext.setPopupMounted(true);
+        inject(DestroyRef).onDestroy(() => {
+            unregister();
+            this.rootContext.setPopupMounted(false);
+        });
+        // The popup is this layer's floating element (the inside surface for containment checks).
+        this.floatingContext.setFloatingElement(this.element);
+        // Dismissal (ADR 0015): an outside press, or focus leaving everything, closes the combobox. The
+        // input / trigger / chips / clear are registered as "inside" (RdxFloatingInsideElement), so the
+        // input keeping focus — or a press on those parts — never self-dismisses. Escape is owned by the
+        // input (it preventDefaults + closes), so the capability does not handle it (`escapeKey: false`).
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => false,
+            outsidePress: () => true,
+            focusOutside: () => true,
+            onDismiss: (reason, event) => this.rootContext.closePopup(true, reason === 'focus-outside' ? 'focus-out' : 'outside-press', event)
+        });
         // For the "input inside the popup" pattern, move focus to the input once the popup is
         // positioned. Use `afterRenderEffect` (not `effect`): when `isPositioned` flips true the
         // popup's final position/visibility is applied in the *following* render, so a synchronous
@@ -1634,33 +2338,57 @@ class RdxComboboxPopup {
             }
             const input = this.rootContext.inputElement();
             if (input && input.closest('[rdxComboboxPopup]')) {
-                input.focus();
-                input.select();
+                // Base UI: a touch-open focuses the popup itself so Android keeps the virtual keyboard
+                // closed; mouse/keyboard opens focus (and select) the search input as usual.
+                if (this.rootContext.openedByTouch()) {
+                    this.element.focus();
+                }
+                else {
+                    input.focus();
+                    input.select();
+                }
             }
         });
     }
+    /**
+     * Base UI focus handoff: if focus lands on the popup or the list (the `tabindex="-1"` programmatic
+     * focus targets), hand it back to the input so arrow-key navigation (`aria-activedescendant`) keeps
+     * working. Skipped for a touch interaction, where focus is intentionally parked on the popup to keep
+     * the Android virtual keyboard closed.
+     */
+    onFocusIn(event) {
+        if (this.rootContext.openedByTouch()) {
+            return;
+        }
+        const input = this.rootContext.inputElement();
+        const target = event.target;
+        if (!input || !target || target === input) {
+            return;
+        }
+        if (target === this.element || target.matches('[rdxComboboxList]')) {
+            input.focus();
+        }
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxPopup, isStandalone: true, selector: "[rdxComboboxPopup]", host: { attributes: { "tabindex": "-1" }, listeners: { "focusin": "onFocusIn($event)" }, properties: { "attr.role": "rootContext.inputLayout() === \"inside\" ? \"dialog\" : \"presentation\"", "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" } }, exportAs: ["rdxComboboxPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }], 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 }))
-                    ],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration],
                     host: {
+                        // Base UI: a `dialog` (focusable, tabindex -1) when the input lives inside the popup, otherwise
+                        // a presentational wrapper around the `listbox` (the List part owns the listbox role).
+                        tabindex: '-1',
+                        '[attr.role]': 'rootContext.inputLayout() === "inside" ? "dialog" : "presentation"',
                         '[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'
+                        '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
+                        '(focusin)': 'onFocusIn($event)'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -1685,7 +2413,7 @@ class RdxComboboxPortal {
         this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
     }
     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: "17.1.0", version: "21.2.9", type: RdxComboboxPortal, isStandalone: true, selector: "ng-template[rdxComboboxPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: injectComboboxRootContext().open }))], exportAs: ["rdxComboboxPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxPortal, isStandalone: true, selector: "ng-template[rdxComboboxPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: injectComboboxRootContext().present }))], exportAs: ["rdxComboboxPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortal, decorators: [{
             type: Directive,
@@ -1693,7 +2421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'ng-template[rdxComboboxPortal]',
                     exportAs: 'rdxComboboxPortal',
                     hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
-                    providers: [provideRdxPresenceContext(() => ({ present: injectComboboxRootContext().open }))]
+                    providers: [provideRdxPresenceContext(() => ({ present: injectComboboxRootContext().present }))]
                 }]
         }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
 /**
@@ -1706,9 +2434,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxComboboxPortalMisuseGuard {
     constructor() {
         if (isDevMode()) {
-            throw new Error('[rdxComboboxPortal] is now a structural directive. ' +
+            rdxDevError('combobox/portal-on-element', '`rdxComboboxPortal` is now a structural directive. ' +
                 'Use `*rdxComboboxPortal` on the positioner element or `<ng-template rdxComboboxPortal>`. ' +
-                'rdxComboboxPortalPresence has been removed. See https://radix-ng.com/components/combobox.md');
+                'rdxComboboxPortalPresence has been removed.', 'components/combobox');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1722,63 +2450,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Positions the popup relative to the input anchor using the popper engine. Re-exposes the popper
- * positioning inputs.
+ * A visual separator between groups of options. Carries `role="separator"` with a horizontal
+ * orientation (it divides rows in a vertical list), so assistive tech announces the grouping break.
  *
  * @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 }); }
+class RdxComboboxSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxSeparator, isStandalone: true, selector: "[rdxComboboxSeparator]", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" } }, exportAs: ["rdxComboboxSeparator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPositioner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxComboboxPositioner]',
-                    exportAs: 'rdxComboboxPositioner',
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'updatePositionStrategy'
-                            ]
-                        }
-                    ],
+                    selector: '[rdxComboboxSeparator]',
+                    exportAs: 'rdxComboboxSeparator',
                     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)'
-        }`
+                        role: 'separator',
+                        'aria-orientation': 'horizontal'
                     }
                 }]
-        }], 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.
@@ -1787,7 +2478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 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 }); }
+    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", "aria-atomic": "true" } }, exportAs: ["rdxComboboxStatus"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxStatus, decorators: [{
             type: Directive,
@@ -1796,13 +2487,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     exportAs: 'rdxComboboxStatus',
                     host: {
                         role: 'status',
-                        'aria-live': 'polite'
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true'
                     }
                 }]
         }] });
 
 /**
- * Toggles the combobox popup. Carries `tabindex="-1"` so it never steals focus from the input.
+ * Toggles the combobox popup. Its semantics depend on the layout (Base UI's `inputInsidePopup`):
+ *
+ * - **Input outside the popup** (default): a `tabindex="-1"` toggle button (`aria-haspopup="listbox"`)
+ *   that never steals focus from the input — `Tab` lands directly on the input.
+ * - **Input inside the popup** (e.g. a command palette / emoji picker): the trigger becomes the primary
+ *   `role="combobox"` control — `tabindex="0"` (reachable via `Tab`), `aria-haspopup="dialog"`, and
+ *   `ArrowDown`/`ArrowUp` open the popup (which moves focus to the inner input and highlights an item).
+ *
+ * The trigger stays `Tab`-reachable by default and is demoted to `tabindex="-1"` only once an input is
+ * detected *outside* the popup — so a trigger whose input lives in a not-yet-opened popup is focusable
+ * from the first render (`inputLayout` is `unknown` until that input mounts).
  *
  * @group Components
  */
@@ -1813,35 +2515,57 @@ class RdxComboboxTrigger {
         this.rootContext.registerTrigger(this.element);
         inject(DestroyRef).onDestroy(() => this.rootContext.registerTrigger(null));
     }
-    onClick() {
+    // Record whether the opening interaction is touch, so the popup can keep focus off the inner input
+    // (and Android's virtual keyboard closed) when the input lives inside the popup.
+    onPointerDown(event) {
+        this.rootContext.setOpenedByTouch(event.pointerType === 'touch');
+    }
+    onClick(event) {
         if (this.rootContext.open()) {
-            this.rootContext.closePopup(true);
+            this.rootContext.closePopup(true, 'trigger-press', event);
         }
         else {
             this.rootContext.focusInput();
-            this.rootContext.openForBrowse();
+            this.rootContext.openForBrowse('trigger-press', event);
+        }
+    }
+    onKeydown(event) {
+        if (this.rootContext.disabledState() || this.rootContext.readonly()) {
+            return;
+        }
+        // ArrowDown/ArrowUp open the popup and seed the first/last highlight; the popup's own
+        // auto-focus then moves focus to the input (whether it lives inside or outside the popup).
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            // A keyboard open must focus the input, not the popup — clear any prior touch flag.
+            this.rootContext.setOpenedByTouch(false);
+            this.rootContext.openAndHighlight(event.key === 'ArrowUp' ? 'last' : 'first', 'list-navigation', event);
         }
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxTrigger, isStandalone: true, selector: "button[rdxComboboxTrigger]", host: { attributes: { "type": "button" }, listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "rootContext.inputLayout() === \"outside\" ? \"-1\" : \"0\"", "attr.role": "rootContext.inputLayout() === \"inside\" ? \"combobox\" : undefined", "attr.aria-haspopup": "rootContext.inputLayout() === \"inside\" ? \"dialog\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-required": "rootContext.inputLayout() === \"inside\" && rootContext.requiredState() ? \"true\" : undefined", "attr.disabled": "rootContext.disabledState() ? \"\" : undefined", "attr.data-popup-open": "rootContext.open() ? \"\" : undefined", "attr.data-disabled": "rootContext.disabledState() ? \"\" : undefined" } }, exportAs: ["rdxComboboxTrigger"], hostDirectives: [{ directive: i1$1.RdxFloatingInsideElement }], 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],
+                    hostDirectives: [RdxFloatingInsideElement],
                     host: {
                         type: 'button',
-                        tabindex: '-1',
-                        'aria-label': 'Open',
+                        '[attr.tabindex]': 'rootContext.inputLayout() === "outside" ? "-1" : "0"',
+                        '[attr.role]': 'rootContext.inputLayout() === "inside" ? "combobox" : undefined',
+                        '[attr.aria-haspopup]': 'rootContext.inputLayout() === "inside" ? "dialog" : "listbox"',
                         '[attr.aria-expanded]': 'rootContext.open()',
                         '[attr.aria-controls]': 'rootContext.listId',
                         '[attr.aria-labelledby]': 'rootContext.labelId()',
+                        '[attr.aria-required]': 'rootContext.inputLayout() === "inside" && rootContext.requiredState() ? "true" : undefined',
                         '[attr.disabled]': 'rootContext.disabledState() ? "" : undefined',
                         '[attr.data-popup-open]': 'rootContext.open() ? "" : undefined',
                         '[attr.data-disabled]': 'rootContext.disabledState() ? "" : undefined',
-                        '(click)': 'onClick()'
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -1895,6 +2619,7 @@ const _importsCombobox = [
     RdxComboboxAnchor,
     RdxComboboxLabel,
     RdxComboboxInput,
+    RdxComboboxInputGroup,
     RdxComboboxValue,
     RdxComboboxTrigger,
     RdxComboboxIcon,
@@ -1906,10 +2631,12 @@ const _importsCombobox = [
     RdxComboboxPopup,
     RdxComboboxArrow,
     RdxComboboxList,
+    RdxComboboxRow,
     RdxComboboxItem,
     RdxComboboxItemIndicator,
     RdxComboboxGroup,
     RdxComboboxGroupLabel,
+    RdxComboboxSeparator,
     RdxComboboxEmpty,
     RdxComboboxStatus,
     RdxComboboxChips,
@@ -1922,6 +2649,7 @@ class RdxComboboxModule {
             RdxComboboxAnchor,
             RdxComboboxLabel,
             RdxComboboxInput,
+            RdxComboboxInputGroup,
             RdxComboboxValue,
             RdxComboboxTrigger,
             RdxComboboxIcon,
@@ -1933,10 +2661,12 @@ class RdxComboboxModule {
             RdxComboboxPopup,
             RdxComboboxArrow,
             RdxComboboxList,
+            RdxComboboxRow,
             RdxComboboxItem,
             RdxComboboxItemIndicator,
             RdxComboboxGroup,
             RdxComboboxGroupLabel,
+            RdxComboboxSeparator,
             RdxComboboxEmpty,
             RdxComboboxStatus,
             RdxComboboxChips,
@@ -1945,6 +2675,7 @@ class RdxComboboxModule {
             RdxComboboxAnchor,
             RdxComboboxLabel,
             RdxComboboxInput,
+            RdxComboboxInputGroup,
             RdxComboboxValue,
             RdxComboboxTrigger,
             RdxComboboxIcon,
@@ -1956,10 +2687,12 @@ class RdxComboboxModule {
             RdxComboboxPopup,
             RdxComboboxArrow,
             RdxComboboxList,
+            RdxComboboxRow,
             RdxComboboxItem,
             RdxComboboxItemIndicator,
             RdxComboboxGroup,
             RdxComboboxGroupLabel,
+            RdxComboboxSeparator,
             RdxComboboxEmpty,
             RdxComboboxStatus,
             RdxComboboxChips,
@@ -1979,5 +2712,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * 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, RdxComboboxPortalMisuseGuard, RdxComboboxPositioner, RdxComboboxRoot, RdxComboboxStatus, RdxComboboxTrigger, RdxComboboxValue, _importsCombobox, injectComboboxChipContext, injectComboboxGroupContext, injectComboboxItemContext, injectComboboxRootContext, provideComboboxChipContext, provideComboboxGroupContext, provideComboboxItemContext, provideComboboxRootContext };
+export { RdxComboboxAnchor, RdxComboboxArrow, RdxComboboxBackdrop, RdxComboboxChip, RdxComboboxChipRemove, RdxComboboxChips, RdxComboboxClear, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, RdxComboboxInput, RdxComboboxInputGroup, RdxComboboxItem, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxList, RdxComboboxModule, RdxComboboxPopup, RdxComboboxPortal, RdxComboboxPortalMisuseGuard, RdxComboboxPositioner, RdxComboboxRoot, RdxComboboxRow, RdxComboboxSeparator, RdxComboboxStatus, RdxComboboxTrigger, RdxComboboxValue, _importsCombobox, injectComboboxChipContext, injectComboboxGroupContext, injectComboboxItemContext, injectComboboxRootContext, provideComboboxChipContext, provideComboboxGroupContext, provideComboboxItemContext, provideComboboxRootContext, useComboboxEngine };
 //# sourceMappingURL=radix-ng-primitives-combobox.mjs.map