@radix-ng/primitives 1.0.5 → 1.0.6

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

@@ -4,7 +4,7 @@ import * as i1 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 * 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 { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, createFloatingRootContext, isItemEqualToValue, isNullish, createCancelableChangeEventDetails, itemToStringLabel, 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 { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
@@ -23,10 +23,10 @@ import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
  * @group Components
  */
 class RdxComboboxAnchor {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxAnchor, isStandalone: true, selector: "[rdxComboboxAnchor]", exportAs: ["rdxComboboxAnchor"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxAnchor, isStandalone: true, selector: "[rdxComboboxAnchor]", exportAs: ["rdxComboboxAnchor"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxAnchor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxAnchor]',
@@ -42,10 +42,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @group Components
  */
 class RdxComboboxArrow {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxArrow, isStandalone: true, selector: "[rdxComboboxArrow]", exportAs: ["rdxComboboxArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow, inputs: ["width", "width", "height", "height"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxArrow, isStandalone: true, selector: "[rdxComboboxArrow]", exportAs: ["rdxComboboxArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow, inputs: ["width", "width", "height", "height"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxArrow]',
@@ -68,33 +68,40 @@ 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 */ []));
+    const labelId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    const inputElement = signal(null, /* @ts-ignore */
+    ...(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 */ []));
+    const inputLayout = signal('unknown', /* @ts-ignore */
+    ...(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 */ []));
+    const openedByTouch = signal(false, /* @ts-ignore */
+    ...(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 */ []));
+    const popupMounted = signal(false, /* @ts-ignore */
+    ...(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 _items = signal([], /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orderedItems" }] : /* istanbul ignore next */ []));
     const matchesFilter = (item) => {
         if (!config.filteringEnabled()) {
             return true;
@@ -114,8 +121,10 @@ function useComboboxEngine(config) {
         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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    const visibleSet = computed(() => new Set(visibleItems()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSet" }] : /* istanbul ignore next */ []));
     const isVisible = (item) => visibleSet().has(item);
     const filteredItems = computed(() => {
         const data = config.items();
@@ -139,8 +148,10 @@ function useComboboxEngine(config) {
         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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    const visibleCount = computed(() => (config.virtualized() ? filteredItems().length : visibleItems().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
     const highlight = useListHighlight({
         items: orderedItems,
         isNavigable: (item) => isVisible(item) && !item.disabled(),
@@ -149,8 +160,10 @@ function useComboboxEngine(config) {
         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 highlightedIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    const highlightReason = signal('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightReason" }] : /* istanbul ignore next */ []));
     const itemId = (index) => `${listId}-item-${index}`;
     const activeId = computed(() => {
         if (config.virtualized()) {
@@ -158,13 +171,16 @@ function useComboboxEngine(config) {
             return index >= 0 ? itemId(index) : undefined;
         }
         return highlight.activeId();
-    }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    const pendingHighlightEdge = signal(null, /* @ts-ignore */
+    ...(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 */ []));
+    const inlinePreview = signal(null, /* @ts-ignore */
+    ...(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 = () => {
@@ -716,13 +732,17 @@ class RdxComboboxRoot {
             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 */ []));
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Initial value when uncontrolled. */
-        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        this.defaultValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /** The text currently in the input. */
-        this.inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+        this.inputValue = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
         /** Whether the popup is open. */
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /** Initial open state when uncontrolled. */
         this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether multiple values can be selected. Shorthand for `selectionMode="multiple"`. */
@@ -731,11 +751,14 @@ class RdxComboboxRoot {
          * Selection behavior. `'single'` / `'multiple'` commit a value; `'none'` filters without
          * selecting (a pure search/command UI). Defaults from the `multiple` shorthand.
          */
-        this.selectionMode = input(...(ngDevMode ? [undefined, { debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        this.selectionMode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         /** Resolved selection mode. */
-        this.mode = computed(() => this.selectionMode() ?? (this.multipleInput() ? 'multiple' : 'single'), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.mode = computed(() => this.selectionMode() ?? (this.multipleInput() ? 'multiple' : 'single'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /** Whether the combobox is in multiple-selection mode. */
-        this.multiple = computed(() => this.mode() === 'multiple', ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.multiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         /** In `'none'` mode, whether pressing an item fills the input with its label. */
         this.fillInputOnItemPress = input(true, { ...(ngDevMode ? { debugName: "fillInputOnItemPress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Text direction. */
@@ -766,7 +789,8 @@ class RdxComboboxRoot {
                 return 'input-change';
             }
             return 'off';
-        }, ...(ngDevMode ? [{ debugName: "autoHighlightMode" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoHighlightMode" }] : /* istanbul ignore next */ []));
         /**
          * Whether moving the pointer over an item highlights it. `true` (default) paints `data-highlighted`
          * on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
@@ -791,7 +815,8 @@ class RdxComboboxRoot {
          * - a function: custom matching;
          * - `null`: built-in filtering disabled (the consumer controls which items exist).
          */
-        this.filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.filter = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
         /** Maximum number of matching items to show. `-1` (default) means no limit. */
         this.limit = input(-1, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
@@ -799,7 +824,8 @@ class RdxComboboxRoot {
          * {@link virtualized} mode (where only a window of `RdxComboboxItem` is mounted). The filtered
          * subset is exposed as {@link filteredItems} for an external virtualizer to render.
          */
-        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+        this.items = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
         /**
          * Whether the list is externally virtualized — only a window of items is rendered, so navigation
          * runs over {@link items}/{@link filteredItems} by index instead of over mounted DOM elements.
@@ -814,12 +840,14 @@ class RdxComboboxRoot {
          */
         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 */ []));
+        this.isItemEqualToValue = input(/* @ts-ignore */
+        ...(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. */
+        this.itemToStringLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+        /** Emits before the selection changes; call `eventDetails.cancel()` to veto it. */
         this.onValueChange = output();
-        /** Emits when the input text changes. */
+        /** Emits before the input text changes; call `eventDetails.cancel()` to veto it. */
         this.onInputValueChange = output();
         /** Emits when the popup opens or closes. */
         this.onOpenChange = output();
@@ -830,23 +858,32 @@ class RdxComboboxRoot {
         this.onItemHighlighted = output();
         /** Emits after the open/close transition (including any exit animation) finishes. */
         this.onOpenChangeComplete = output();
-        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-        this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-        this.requiredState = computed(() => this.required(), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
-        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
-        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.required(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), /* @ts-ignore */
+        ...(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.typed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
         /** 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 */ []));
+        this.query = computed(() => (this.typed() ? (this.inputValue() ?? '') : ''), /* @ts-ignore */
+        ...(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 */ []));
+        this.filteringEnabled = signal(true, /* @ts-ignore */
+        ...(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 */ []));
+        this.noInline = signal(false, /* @ts-ignore */
+        ...(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,
@@ -979,11 +1016,15 @@ class RdxComboboxRoot {
         }
         this.markAsTouched();
     }
-    /** Updates the input text from user typing (marks the query as a fresh user query). */
-    setInputValue(value) {
+    /** Updates the input text from user typing (marks the query as a fresh user query). Cancelable. */
+    setInputValue(value, event = new Event('combobox.input-value-change')) {
+        const { eventDetails } = createCancelableChangeEventDetails('none', event, this.resolveOpenChangeTrigger(event));
+        this.onInputValueChange.emit({ value, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return;
+        }
         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
@@ -992,18 +1033,22 @@ class RdxComboboxRoot {
             this.mode() === 'single' &&
             !isNullish(this.value()) &&
             this.engine.inputLayout() !== 'inside') {
-            this.commitValue(null);
+            this.commitValue(null, 'input-clear', event);
         }
         // Auto-highlight the first match as the query changes (deferred so it lands after items mount).
         if (this.autoHighlightMode() !== 'off') {
             this.engine.setPendingHighlightEdge('first');
         }
     }
-    /** Sets the input text programmatically (a selection label / revert) — not a user query. */
+    /**
+     * Sets the input text programmatically (a selection label / revert) — not a user query. Emits
+     * `onInputValueChange` for observability but is not vetoable (it is a derived sync, not a user edit).
+     */
     setLabel(value) {
         this.inputValue.set(value);
         this.typed.set(false);
-        this.onInputValueChange.emit(value);
+        const { eventDetails } = createCancelableChangeEventDetails('none', new Event('combobox.input-value-change'));
+        this.onInputValueChange.emit({ value, eventDetails });
     }
     /** Resets the input text to the current selection's label (single mode) or empty. */
     revertInputValue() {
@@ -1046,8 +1091,12 @@ class RdxComboboxRoot {
         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.
-            this.onValueChange.emit(value);
+            // command-palette consumers can react (cancelable). Optionally fill the input, then close.
+            const { eventDetails } = createCancelableChangeEventDetails('item-press', event, this.resolveOpenChangeTrigger(event));
+            this.onValueChange.emit({ value, reason: 'item-press', eventDetails });
+            if (eventDetails.isCanceled()) {
+                return;
+            }
             if (this.fillInputOnItemPress()) {
                 this.setLabel(textValue);
             }
@@ -1065,7 +1114,9 @@ class RdxComboboxRoot {
             else {
                 current.splice(index, 1);
             }
-            this.commitValue(current);
+            if (!this.commitValue(current, 'item-press', event)) {
+                return;
+            }
             this.setLabel('');
             // Keep the input focused for adding more values — unless the consumer moved focus.
             if (typeof document === 'undefined' || document.activeElement === activeBefore) {
@@ -1073,7 +1124,9 @@ class RdxComboboxRoot {
             }
         }
         else {
-            this.commitValue(value);
+            if (!this.commitValue(value, 'item-press', event)) {
+                return;
+            }
             this.setLabel(textValue);
             this.closePopup(false, 'item-press', event);
             this.engine.restoreFocusAfterSelect(activeBefore);
@@ -1107,7 +1160,7 @@ class RdxComboboxRoot {
         // 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.commitValue(this.multiple() ? [] : null, 'clear-press');
         }
         this.setLabel('');
         this.engine.clearHighlightState();
@@ -1118,7 +1171,7 @@ class RdxComboboxRoot {
             return;
         }
         const next = this.value().filter((v) => !isItemEqualToValue(v, value, this.isItemEqualToValue()));
-        this.commitValue(next);
+        this.commitValue(next, 'chip-remove-press');
     }
     removeLastValue() {
         if (!this.multiple() || !Array.isArray(this.value())) {
@@ -1126,7 +1179,7 @@ class RdxComboboxRoot {
         }
         const current = this.value();
         if (current.length > 0) {
-            this.commitValue(current.slice(0, -1));
+            this.commitValue(current.slice(0, -1), 'chip-remove-press');
         }
     }
     focusInput() {
@@ -1148,13 +1201,18 @@ class RdxComboboxRoot {
      * 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) {
+    commitValue(value, reason = 'none', event = new Event('combobox.value-change')) {
         if (this.disabledState() || this.readOnly()) {
-            return;
+            return false;
+        }
+        const { eventDetails } = createCancelableChangeEventDetails(reason, event, this.resolveOpenChangeTrigger(event));
+        this.onValueChange.emit({ value, reason, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return false;
         }
         this.value.set(value);
-        this.onValueChange.emit(value);
         this.onChange?.(value);
+        return true;
     }
     createOpenChangeEvent(open, reason, event) {
         const change = createCancelableChangeEventDetails(reason, event, this.resolveOpenChangeTrigger(event));
@@ -1190,8 +1248,8 @@ class RdxComboboxRoot {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxRoot, isStandalone: true, selector: "[rdxComboboxRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, fillInputOnItemPress: { classPropertyName: "fillInputOnItemPress", publicName: "fillInputOnItemPress", isSignal: true, isRequired: false, transformFunction: null }, 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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 },
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
@@ -1199,7 +1257,7 @@ class RdxComboboxRoot {
             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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxRoot]',
@@ -1229,10 +1287,10 @@ class RdxComboboxBackdrop {
     constructor() {
         this.rootContext = injectComboboxRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxBackdrop, isStandalone: true, selector: "[rdxComboboxBackdrop]", host: { attributes: { "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxBackdrop, isStandalone: true, selector: "[rdxComboboxBackdrop]", host: { attributes: { "role": "presentation" }, properties: { "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxBackdrop]',
@@ -1240,7 +1298,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         // 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 : ""'
                     }
@@ -1275,10 +1332,10 @@ class RdxComboboxChips {
         chips[chips.length - 1].focus();
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxChips, isStandalone: true, selector: "[rdxComboboxChips]", host: { attributes: { "role": "toolbar" } }, exportAs: ["rdxComboboxChips"], hostDirectives: [{ directive: i1$1.RdxFloatingInsideElement }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChips, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxChips]',
@@ -1307,7 +1364,8 @@ class RdxComboboxChip {
         this.chips = inject(RdxComboboxChips, { optional: true });
         this.rootContext = injectComboboxRootContext();
         /** The value this chip represents. */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     onKeydown(event) {
         const list = this.chips?.getChips() ?? [];
@@ -1375,10 +1433,10 @@ class RdxComboboxChip {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxChip, isStandalone: true, selector: "[rdxComboboxChip]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "onKeydown($event)" } }, providers: [provideComboboxChipContext(chipContext)], exportAs: ["rdxComboboxChip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxChip]',
@@ -1406,10 +1464,10 @@ class RdxComboboxChipRemove {
         this.rootContext.removeValue(this.chipContext.value());
         this.rootContext.focusInput();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxChipRemove, isStandalone: true, selector: "button[rdxComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Remove" }, listeners: { "click": "onClick()" } }, exportAs: ["rdxComboboxChipRemove"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxChipRemove, isStandalone: true, selector: "button[rdxComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-label": "Remove" }, listeners: { "click": "onClick()" } }, exportAs: ["rdxComboboxChipRemove"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxChipRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxChipRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxComboboxChipRemove]',
@@ -1433,7 +1491,8 @@ class RdxComboboxClear {
         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 */ []));
+        this.isDisabled = computed(() => this.disabled() || this.rootContext.disabledState() || this.rootContext.readonly(), /* @ts-ignore */
+        ...(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
@@ -1448,7 +1507,8 @@ class RdxComboboxClear {
                 return value.length === 0;
             }
             return value === null || value === undefined;
-        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     }
     // Keep focus on the input — don't let the button take it on pointer/mouse down.
     onPointerDown(event) {
@@ -1457,10 +1517,10 @@ class RdxComboboxClear {
     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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxClear, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxComboboxClear]',
@@ -1493,16 +1553,17 @@ 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 */ []));
+        this.isEmpty = computed(() => this.rootContext.visibleCount() === 0, /* @ts-ignore */
+        ...(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.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxEmpty, decorators: [{
             type: Component,
             args: [{
                     selector: '[rdxComboboxEmpty]',
@@ -1542,10 +1603,14 @@ const [injectComboboxGroupContext, provideComboboxGroupContext] = createContext(
 class RdxComboboxGroup {
     constructor() {
         this.rootContext = injectComboboxRootContext();
-        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
-        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.hasItems = computed(() => this.items().length > 0, ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
-        this.hasVisibleItems = computed(() => this.items().some((item) => this.rootContext.isVisible(item)), ...(ngDevMode ? [{ debugName: "hasVisibleItems" }] : /* istanbul ignore next */ []));
+        this.labelId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.items = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.hasItems = computed(() => this.items().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
+        this.hasVisibleItems = computed(() => this.items().some((item) => this.rootContext.isVisible(item)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasVisibleItems" }] : /* istanbul ignore next */ []));
     }
     registerItem(item) {
         this.items.update((items) => [...items, item]);
@@ -1553,10 +1618,10 @@ class RdxComboboxGroup {
     unregisterItem(item) {
         this.items.update((items) => items.filter((i) => i !== item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxGroup, isStandalone: true, selector: "[rdxComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "hidden": "hasItems() && !hasVisibleItems()" } }, providers: [provideComboboxGroupContext(groupContext)], exportAs: ["rdxComboboxGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxGroup, isStandalone: true, selector: "[rdxComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "hidden": "hasItems() && !hasVisibleItems()" } }, providers: [provideComboboxGroupContext(groupContext)], exportAs: ["rdxComboboxGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxGroup]',
@@ -1587,10 +1652,10 @@ class RdxComboboxGroupLabel {
             }
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxGroupLabel, isStandalone: true, selector: "[rdxComboboxGroupLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxComboboxGroupLabel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxGroupLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxGroupLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxGroupLabel]',
@@ -1607,10 +1672,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @group Components
  */
 class RdxComboboxIcon {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxIcon, isStandalone: true, selector: "[rdxComboboxIcon]", host: { attributes: { "aria-hidden": "true" } }, exportAs: ["rdxComboboxIcon"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxIcon, isStandalone: true, selector: "[rdxComboboxIcon]", host: { attributes: { "aria-hidden": "true" } }, exportAs: ["rdxComboboxIcon"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxIcon]',
@@ -1646,13 +1711,13 @@ class RdxComboboxPositioner extends RdxPopperContentWrapper {
             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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxPositioner]',
@@ -1677,21 +1742,28 @@ class RdxComboboxInput {
         this.element = inject(ElementRef).nativeElement;
         this.fieldRootContext = injectFieldRootContext(true);
         /** The input id; Field labels and descriptions reference it for accessible relationships. */
-        this.id = input(injectId('rdx-combobox-input-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.id = input(injectId('rdx-combobox-input-'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** Marks the input as invalid independently of any Field state. */
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
-        this.disabledState = computed(() => this.rootContext.disabledState() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-        this.requiredState = computed(() => this.rootContext.requiredState() || Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
-        this.filledState = computed(() => !this.isEmptyValue() || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
-        this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.rootContext.disabledState() || Boolean(this.fieldRootContext?.disabledState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => this.rootContext.requiredState() || Boolean(this.fieldRootContext?.requiredState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.filledState = computed(() => !this.isEmptyValue() || Boolean(this.fieldRootContext?.filledState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
+        this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
         this.isEmptyValue = computed(() => {
             const value = this.rootContext.value();
             if (Array.isArray(value)) {
                 return value.length === 0;
             }
             return value === null || value === undefined;
-        }, ...(ngDevMode ? [{ debugName: "isEmptyValue" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmptyValue" }] : /* istanbul ignore next */ []));
         this.describedBy = computed(() => {
             if (!this.fieldRootContext) {
                 return undefined;
@@ -1701,7 +1773,8 @@ class RdxComboboxInput {
                 ...(this.fieldRootContext.invalidState() ? this.fieldRootContext.errorIds() : [])
             ];
             return ids.length ? ids.join(' ') : undefined;
-        }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
         /** Whether an IME composition is in progress (CJK). While composing, don't filter or select. */
         this.composing = false;
         this.dataAttr = attr$1;
@@ -1872,10 +1945,10 @@ class RdxComboboxInput {
             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($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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[rdxComboboxInput]',
@@ -1936,13 +2009,14 @@ class RdxComboboxInputGroup {
                 return value.length > 0;
             }
             return value !== null && value !== undefined;
-        }, ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInputGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxInputGroup]',
@@ -1964,10 +2038,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxRow]',
@@ -2001,7 +2075,8 @@ class RdxComboboxItem {
         this.element = inject(ElementRef).nativeElement;
         this.id = injectId('rdx-combobox-item-');
         /** The option's value. */
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Explicit text matched against the query. Defaults to the element's text content. */
         this.textValueInput = input('', { ...(ngDevMode ? { debugName: "textValueInput" } : /* istanbul ignore next */ {}), alias: 'textValue' });
         /** Whether the option is disabled. */
@@ -2010,30 +2085,41 @@ class RdxComboboxItem {
          * The option's index in the list. Required in virtualized mode — it drives the deterministic id
          * (for `aria-activedescendant`), highlight matching, and selection when only a window is mounted.
          */
-        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+        this.index = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
         this.virtualized = this.rootContext.virtualized;
-        this.autoTextValue = signal('', ...(ngDevMode ? [{ debugName: "autoTextValue" }] : /* istanbul ignore next */ []));
-        this.textValue = computed(() => this.textValueInput() || this.autoTextValue(), ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+        this.autoTextValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoTextValue" }] : /* istanbul ignore next */ []));
+        this.textValue = computed(() => this.textValueInput() || this.autoTextValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
         /** Host id: deterministic per-index in virtualized mode, otherwise a generated unique id. */
-        this.elementId = computed(() => this.virtualized() ? this.rootContext.itemId(this.index() ?? -1) : this.id, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
-        this.ariaSetSize = computed(() => this.virtualized() ? this.rootContext.filteredItems().length : undefined, ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
-        this.ariaPosInSet = computed(() => (this.virtualized() ? (this.index() ?? -1) + 1 : undefined), ...(ngDevMode ? [{ debugName: "ariaPosInSet" }] : /* istanbul ignore next */ []));
+        this.elementId = computed(() => this.virtualized() ? this.rootContext.itemId(this.index() ?? -1) : this.id, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
+        this.ariaSetSize = computed(() => this.virtualized() ? this.rootContext.filteredItems().length : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+        this.ariaPosInSet = computed(() => (this.virtualized() ? (this.index() ?? -1) + 1 : undefined), /* @ts-ignore */
+        ...(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 */ []));
+        this.role = computed(() => (this.rootContext.grid() && this.row ? 'gridcell' : 'option'), /* @ts-ignore */
+        ...(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 */ []));
+        this.selectable = computed(() => this.rootContext.selectionMode() !== 'none', /* @ts-ignore */
+        ...(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 */ []));
+        this.isVisible = computed(() => (this.virtualized() ? true : this.rootContext.isVisible(this)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.isSelected = computed(() => this.rootContext.isSelected(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         this.isHighlighted = computed(() => this.virtualized()
             ? this.rootContext.highlightedIndex() === this.index()
-            : this.rootContext.highlightedItem() === this, ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
+            : this.rootContext.highlightedItem() === this, /* @ts-ignore */
+        ...(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*.
@@ -2153,10 +2239,10 @@ 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: { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxItem]',
@@ -2193,10 +2279,10 @@ class RdxComboboxItemIndicator {
     constructor() {
         this.itemContext = injectComboboxItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxItemIndicator, isStandalone: true, selector: "[rdxComboboxItemIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "hidden": "!itemContext.isSelected()" } }, exportAs: ["rdxComboboxItemIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxItemIndicator, isStandalone: true, selector: "[rdxComboboxItemIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "hidden": "!itemContext.isSelected()" } }, exportAs: ["rdxComboboxItemIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxItemIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxItemIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxItemIndicator]',
@@ -2221,10 +2307,10 @@ class RdxComboboxLabel {
         this.rootContext.setLabelId(this.id);
         inject(DestroyRef).onDestroy(() => this.rootContext.setLabelId(undefined));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxLabel, isStandalone: true, selector: "[rdxComboboxLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxComboboxLabel"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxLabel, isStandalone: true, selector: "[rdxComboboxLabel]", host: { properties: { "attr.id": "id" } }, exportAs: ["rdxComboboxLabel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxLabel]',
@@ -2265,10 +2351,10 @@ class RdxComboboxList {
             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: { "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxList]',
@@ -2369,10 +2455,10 @@ class RdxComboboxPopup {
             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: { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxPopup, isStandalone: true, selector: "[rdxComboboxPopup]", host: { attributes: { "tabindex": "-1" }, listeners: { "focusin": "onFocusIn($event)" }, properties: { "attr.role": "rootContext.inputLayout() === \"inside\" ? \"dialog\" : \"presentation\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"", "attr.data-empty": "rootContext.visibleCount() === 0 ? \"\" : 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxPopup]',
@@ -2383,9 +2469,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         // 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-empty]': 'rootContext.visibleCount() === 0 ? "" : undefined',
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '(focusin)': 'onFocusIn($event)'
@@ -2410,12 +2496,13 @@ class RdxComboboxPortal {
          * forwarded to the composed {@link RdxPortalPresence}) so the autocomplete portal can re-expose it
          * through its own `hostDirectives`.
          */
-        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
+        this.container = input(/* @ts-ignore */
+        ...(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().present }))], exportAs: ["rdxComboboxPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxComboboxPortal]',
@@ -2439,10 +2526,10 @@ class RdxComboboxPortalMisuseGuard {
                 '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 }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxPortalMisuseGuard, isStandalone: true, selector: "[rdxComboboxPortal]:not(ng-template)", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxPortalMisuseGuard, isStandalone: true, selector: "[rdxComboboxPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxPortalMisuseGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxPortal]:not(ng-template)'
@@ -2456,10 +2543,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @group Components
  */
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: RdxComboboxSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxSeparator]',
@@ -2477,10 +2564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @group Components
  */
 class RdxComboboxStatus {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxComboboxStatus, isStandalone: true, selector: "[rdxComboboxStatus]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, exportAs: ["rdxComboboxStatus"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxStatus, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxStatus]',
@@ -2512,12 +2599,18 @@ class RdxComboboxTrigger {
     constructor() {
         this.rootContext = injectComboboxRootContext();
         this.element = inject(ElementRef).nativeElement;
+        /** Whether the trigger is currently pressed (pointer down), for Base UI's `data-pressed`. */
+        this.pressed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
         this.rootContext.registerTrigger(this.element);
         inject(DestroyRef).onDestroy(() => this.rootContext.registerTrigger(null));
     }
     // 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) {
+        if (!this.rootContext.disabledState()) {
+            this.pressed.set(true);
+        }
         this.rootContext.setOpenedByTouch(event.pointerType === 'touch');
     }
     onClick(event) {
@@ -2542,10 +2635,10 @@ class RdxComboboxTrigger {
             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" }, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxComboboxTrigger, isStandalone: true, selector: "button[rdxComboboxTrigger]", host: { attributes: { "type": "button" }, listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "pressed.set(false)", "pointercancel": "pressed.set(false)", "pointerleave": "pressed.set(false)", "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-pressed": "pressed() ? \"\" : 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxComboboxTrigger]',
@@ -2562,8 +2655,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-required]': 'rootContext.inputLayout() === "inside" && rootContext.requiredState() ? "true" : undefined',
                         '[attr.disabled]': 'rootContext.disabledState() ? "" : undefined',
                         '[attr.data-popup-open]': 'rootContext.open() ? "" : undefined',
+                        '[attr.data-pressed]': 'pressed() ? "" : undefined',
                         '[attr.data-disabled]': 'rootContext.disabledState() ? "" : undefined',
                         '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'pressed.set(false)',
+                        '(pointercancel)': 'pressed.set(false)',
+                        '(pointerleave)': 'pressed.set(false)',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeydown($event)'
                     }
@@ -2584,7 +2681,8 @@ class RdxComboboxValue {
     constructor() {
         this.rootContext = injectComboboxRootContext();
         /** Text shown when there is no selection. */
-        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
         /** The label(s) of the current selection, resolved via the root's `itemToStringLabel`/items. */
         this.selectedLabels = computed(() => {
             const value = this.rootContext.value();
@@ -2592,18 +2690,21 @@ class RdxComboboxValue {
                 return value.map((v) => this.rootContext.labelFor(v)).filter(Boolean);
             }
             return isNullish(value) ? [] : [this.rootContext.labelFor(value)].filter(Boolean);
-        }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
-        this.isEmpty = computed(() => this.selectedLabels().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => this.selectedLabels().length === 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         /** The selection joined for display, or the `placeholder` when empty. */
         this.slotText = computed(() => {
             const labels = this.selectedLabels();
             return labels.length ? labels.join(', ') : (this.placeholder() ?? '');
-        }, ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxComboboxValue, isStandalone: true, selector: "[rdxComboboxValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxComboboxValue"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxValue, isStandalone: true, selector: "[rdxComboboxValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "isEmpty() ? \"\" : undefined" } }, exportAs: ["rdxComboboxValue"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxValue, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxComboboxValue]',
@@ -2644,8 +2745,8 @@ const _importsCombobox = [
     RdxComboboxChipRemove
 ];
 class RdxComboboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, imports: [RdxComboboxRoot,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxModule, imports: [RdxComboboxRoot,
             RdxComboboxAnchor,
             RdxComboboxLabel,
             RdxComboboxInput,
@@ -2698,9 +2799,9 @@ class RdxComboboxModule {
             RdxComboboxChips,
             RdxComboboxChip,
             RdxComboboxChipRemove] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxComboboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._importsCombobox],