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

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, computed, signal, untracked, effect, Directive, InjectionToken, ElementRef, Injector, DestroyRef, afterNextRender, linkedSignal, isDevMode, numberAttribute, forwardRef } from '@angular/core';
-import { isEqual, getActiveElement, createContext, useTransitionStatus, isNullish, injectId, useListHighlight, useScrollLock, handleAndDispatchCustomEvent } from '@radix-ng/primitives/core';
+import { inject, model, signal, computed, ElementRef, input, booleanAttribute, output, untracked, effect, Directive, InjectionToken, Injector, DestroyRef, afterNextRender, linkedSignal, isDevMode, forwardRef } from '@angular/core';
+import * as i3 from '@radix-ng/primitives/core';
+import { isEqual, getActiveElement, createContext, injectId, createFloatingRootContext, useTransitionStatus, isNullish, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useListHighlight, useAnchoredScrollLock, RdxFloatingNodeRegistration, handleAndDispatchCustomEvent, rdxDevError, setupInternalBackdrop } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
+import * as i2 from '@radix-ng/primitives/floating-focus-manager';
+import { getInteractionTypeFromEvent, provideFloatingFocusManagerConfig, RdxFloatingFocusManager, createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
 import * as i1 from '@radix-ng/primitives/popper';
-import { RdxPopper, RdxPopperContent, RdxPopperContentWrapper, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContent, RdxPopperContentWrapper, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import * as i4 from '@radix-ng/primitives/collection';
 import { RdxCollectionProvider, RdxCollectionItem } from '@radix-ng/primitives/collection';
-import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import * as i3 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
-import * as i2 from '@radix-ng/primitives/focus-scope';
-import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
+import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
@@ -58,13 +58,17 @@ const context$2 = () => {
         triggerElement: context.triggerElement,
         valueElement: context.valueElement,
         triggerPointerDownPosRef: context.triggerPointerDownPosRef,
-        contentId: '',
+        contentId: context.contentId,
         dir: context.dir,
         value: context.value,
         multiple: context.multiple,
         isItemEqualToValue: context.isItemEqualToValue,
         itemToStringLabel: context.itemToStringLabel,
         open: context.open,
+        openedByTouch: context.openedByTouch,
+        openMethod: context.openMethod,
+        openInteractionType: context.openInteractionType,
+        closeInteractionType: context.closeInteractionType,
         disabled: context.disabled,
         modal: context.modal,
         isEmptyModelValue: context.isEmptyModelValue,
@@ -84,32 +88,49 @@ const context$2 = () => {
                 context.optionsSet().delete(existingOption);
             }
         },
-        onValueChange: context.handleValueChange,
+        onValueChange: (value, reason, event) => context.setValue(value, reason, event),
         onTriggerChange: (node) => {
             context.triggerElement.set(node.nativeElement);
         },
         onValueElementChange: (node) => {
             context.valueElement.set(node);
         },
-        onOpenChange: (value) => {
-            context.open.set(value);
-        }
+        onOpenChange: (value, reason, event) => context.setOpen(value, reason, event)
     };
 };
 const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext', 'components/select');
 class RdxSelectRoot {
     constructor() {
+        this.contentId = injectId('rdx-select-content-');
         this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Whether the current open was initiated by **touch** (ADR 0016 §3 — gates the anchored scroll lock). */
+        this.openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+        /** How the select was opened. Base UI names this state `openMethod`. */
+        this.openInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        /** How the select was closed. */
+        this.closeInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
+        /** Public Base UI-aligned alias for the open interaction type. */
+        this.openMethod = computed(() => this.openInteractionType(), ...(ngDevMode ? [{ debugName: "openMethod" }] : /* istanbul ignore next */ []));
+        /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the popup is modal: locks page scroll and makes outside content inert while open. */
         this.modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.dir = injectDirection(this.dirInput);
         /** How item values are compared for equality — a function `(a, b) => boolean` or an object key. */
         this.isItemEqualToValue = input(...(ngDevMode ? [undefined, { debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
         /** Converts a value to its display label (used by `RdxSelectValue`). */
         this.itemToStringLabel = input(...(ngDevMode ? [undefined, { debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+        /** Emits before an open-state change is committed; call `eventDetails.cancel()` to veto it. */
+        this.onOpenChange = output();
+        /** Emits before a value change is committed; call `eventDetails.cancel()` to veto it. */
+        this.onValueChange = output();
         /** Emits after the open/close transition (including any exit animation) finishes. */
         this.onOpenChangeComplete = output();
         this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
@@ -150,34 +171,89 @@ class RdxSelectRoot {
             previousOpen = open;
             untracked(() => this.transition.start(open));
         });
+        // A fresh open starts non-touch; the trigger flips it on a touch open. Reset whenever it closes.
+        effect(() => {
+            if (!this.open()) {
+                untracked(() => this.openedByTouch.set(false));
+            }
+        });
+        // Bridge the trigger into the floating context: the dismissal capability treats a press on the
+        // trigger (the reference) as "inside", and uses it for positioning containment (ADR 0015).
+        effect((onCleanup) => {
+            const trigger = this.triggerElement();
+            this.floatingContext.setReferenceElement(trigger);
+            if (trigger) {
+                this.floatingContext.triggers.add(trigger);
+                onCleanup(() => this.floatingContext.triggers.delete(trigger));
+            }
+        });
     }
     getOption(value) {
         return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.isItemEqualToValue()));
     }
-    handleValueChange(value) {
+    setValue(value, reason = 'none', event = new Event('select.value-change')) {
+        const nextValue = this.multiple()
+            ? (() => {
+                const current = this.value();
+                const array = Array.isArray(current) ? [...current] : [];
+                const index = array.findIndex((i) => compare(i, value, this.isItemEqualToValue()));
+                index === -1 ? array.push(value) : array.splice(index, 1);
+                return [...array];
+            })()
+            : value;
+        const { eventDetails } = createCancelableChangeEventDetails(reason, event, this.triggerElement() ?? undefined);
+        this.onValueChange.emit({ value: nextValue, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return false;
+        }
         if (this.multiple()) {
-            const current = this.value();
-            const array = Array.isArray(current) ? [...current] : [];
-            const index = array.findIndex((i) => compare(i, value, this.isItemEqualToValue()));
-            index === -1 ? array.push(value) : array.splice(index, 1);
-            this.value.set([...array]);
+            this.value.set(nextValue);
         }
         else {
-            this.value.set(value);
+            this.value.set(nextValue);
         }
+        return true;
+    }
+    setOpen(open, reason = 'none', event) {
+        const resolvedEvent = event ?? new Event('select.open-change');
+        const interactionType = getInteractionTypeFromEvent(event);
+        const { eventDetails } = createCancelableChangeEventDetails(reason, resolvedEvent, this.triggerElement() ?? undefined);
+        this.onOpenChange.emit({ open, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return false;
+        }
+        this.open.set(open);
+        if (open) {
+            this.openedByTouch.set(event?.pointerType === 'touch');
+            this.openInteractionType.set(interactionType);
+        }
+        else {
+            this.closeInteractionType.set(interactionType);
+        }
+        return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectRoot, isStandalone: true, selector: "[rdxSelectRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", 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: { open: "openChange", value: "valueChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideSelectRootContext(context$2)], exportAs: ["rdxSelectRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectRoot, isStandalone: true, selector: "[rdxSelectRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", 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: { open: "openChange", value: "valueChange", onOpenChange: "onOpenChange", onValueChange: "onValueChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+            provideSelectRootContext(context$2),
+            // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxSelectRoot).floatingContext)
+        ], exportAs: ["rdxSelectRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSelectRoot]',
                     exportAs: 'rdxSelectRoot',
-                    providers: [provideSelectRootContext(context$2)],
+                    providers: [
+                        provideSelectRootContext(context$2),
+                        // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxSelectRoot).floatingContext)
+                    ],
                     hostDirectives: [RdxPopper]
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
@@ -312,7 +388,8 @@ const RDX_SELECT_POSITIONER_TOKEN = new InjectionToken('RDX_SELECT_POSITIONER_TO
  */
 class RdxSelectPopup {
     constructor() {
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.currentElement = inject(ElementRef);
         this.collection = inject(RdxCollectionProvider);
         this.injector = inject(Injector);
@@ -347,12 +424,12 @@ class RdxSelectPopup {
          * Event handler called when the escape key is down.
          * Can be prevented.
          */
-        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        this.escapeKeyDown = output();
         /**
-         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
+         * Event handler called when a `pointerdown` event happens outside of the popup.
          * Can be prevented.
          */
-        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.pointerDownOutside = output();
         this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         /**
          * The positioner — now an **ancestor** element — provides {@link RDX_SELECT_POSITIONER_TOKEN}
@@ -383,27 +460,34 @@ class RdxSelectPopup {
                 item.element.scrollIntoView?.({ block: 'nearest' });
             }
         });
-        // Lock page scroll while a modal popup is open (content mounts only while open).
-        useScrollLock(this.rootContext.modal);
+        // Activation policy (ADR 0016 §2 + §3). Lock page scroll while the popup is OPEN and either modal
+        // **or** item-aligned — Base UI `(alignItemWithTriggerActive || modal) && open` (AC #3): an
+        // item-aligned select overlays the trigger, so the page must not scroll behind it even when
+        // `modal === false`. The gate keys on `open` (not mounted) so it releases at close-start. A
+        // **touch** open never uses item-aligned mode (the positioner falls back), so the lock there is
+        // driven by `modal` alone and the anchored helper only engages when the popup is viewport-width (§3).
+        const itemAlignedActive = computed(() => this.positioner?.alignItemWithTriggerActive?.() ?? false, ...(ngDevMode ? [{ debugName: "itemAlignedActive" }] : /* istanbul ignore next */ []));
+        useAnchoredScrollLock(computed(() => (itemAlignedActive() || this.rootContext.modal()) && this.rootContext.open()), {
+            touchOpen: () => this.rootContext.openedByTouch(),
+            element: () => this.currentElement.nativeElement
+        });
         // The popup's animation determines when the open/close transition (onOpenChangeComplete) is done.
         const unregisterTransition = this.rootContext.registerTransitionElement(this.currentElement.nativeElement);
         inject(DestroyRef).onDestroy(unregisterTransition);
-        this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
-        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.onOpenChange(false));
-        const focusScope = inject(RdxFocusScope);
+        // The popup (listbox) is this layer's floating element — the inside surface for containment.
+        this.floatingContext.setFloatingElement(this.currentElement.nativeElement);
+        // Dismissal (ADR 0015): Escape or an outside press closes the select. Focus-out does NOT close it
+        // — the listbox holds focus while open (items are navigated virtually), so a focus-out is not a
+        // dismissal (the legacy preventDefaulted it too).
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => true,
+            outsidePress: () => true,
+            focusOutside: () => false,
+            onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
+            onPointerDownOutside: (event) => this.pointerDownOutside.emit(event),
+            onDismiss: (reason, event) => this.rootContext.onOpenChange(false, reason === 'escape-key' ? 'escape-key' : reason === 'focus-outside' ? 'focus-out' : 'outside-press', event)
+        });
         afterNextRender(() => {
-            focusScope.unmountAutoFocus.subscribe((event) => {
-                if (event.defaultPrevented)
-                    return;
-                this.rootContext.triggerElement()?.focus({ preventScroll: true });
-                event.preventDefault();
-            });
-            // Focus the popup itself (not an item) — the listbox is the focus owner; items are
-            // navigated virtually via aria-activedescendant.
-            focusScope.mountAutoFocus.subscribe((event) => {
-                event.preventDefault();
-                this.content()?.focus({ preventScroll: true });
-            });
             // The popup is now the listbox host itself (no longer the positioner's first child).
             this.content.set(this.currentElement.nativeElement);
         });
@@ -427,8 +511,9 @@ class RdxSelectPopup {
                 }
                 else {
                     // otherwise, if the event was outside the content, close.
-                    if (!this.content()?.contains(event.target))
-                        this.rootContext.onOpenChange(false);
+                    if (!this.content()?.contains(event.target)) {
+                        this.rootContext.onOpenChange(false, 'outside-press', event);
+                    }
                 }
                 document.removeEventListener('pointermove', handlePointerMove);
                 this.rootContext.triggerPointerDownPosRef.set(null);
@@ -447,6 +532,21 @@ class RdxSelectPopup {
                 });
             });
         });
+        effect((onCleanup) => {
+            if (!itemAlignedActive() || !this.rootContext.open()) {
+                return;
+            }
+            const popup = this.content();
+            const view = popup?.ownerDocument.defaultView;
+            if (!view) {
+                return;
+            }
+            const handleResize = (event) => {
+                this.rootContext.onOpenChange(false, 'window-resize', event);
+            };
+            view.addEventListener('resize', handleResize);
+            onCleanup(() => view.removeEventListener('resize', handleResize));
+        });
     }
     /** Highlights the selected item (or the first enabled one) when the popup opens. */
     highlightSelectedItem() {
@@ -481,9 +581,10 @@ class RdxSelectPopup {
             event.preventDefault();
             const item = this.highlight.highlightedItem();
             if (item && !item.disabled()) {
-                this.rootContext.onValueChange(item.value());
-                if (!this.rootContext.multiple())
-                    this.rootContext.onOpenChange(false);
+                this.rootContext.onValueChange(item.value(), 'item-press', event);
+                if (!this.rootContext.multiple()) {
+                    this.rootContext.onOpenChange(false, 'item-press', event);
+                }
             }
             return;
         }
@@ -509,23 +610,46 @@ class RdxSelectPopup {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopup, isStandalone: true, selector: "[rdxSelectPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox", "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "id": "rootContext.contentId", "attr.aria-activedescendant": "highlight.activeId()", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined", "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", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [
             provideSelectPopupContext(context$1),
-            provideRdxDismissableLayerConfig(() => {
+            provideFloatingFocusManagerConfig(() => {
+                const rootContext = injectSelectRootContext();
+                const host = inject(ElementRef).nativeElement;
                 return {
-                    disableOutsidePointerEvents: injectSelectRootContext().modal
+                    modal: () => false,
+                    enabled: () => rootContext.open() || rootContext.transitionStatus() === 'ending',
+                    closeOnFocusOut: () => false,
+                    // The listbox owns DOM focus; items are navigated virtually through aria-activedescendant.
+                    initialFocus: () => host,
+                    restoreFocus: () => true,
+                    openInteractionType: () => rootContext.openInteractionType(),
+                    closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFocusScope }, { directive: i3.RdxDismissableLayer }, { directive: i4.RdxCollectionProvider }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingFocusManager, inputs: ["returnFocus", "finalFocus"] }, { directive: i3.RdxFloatingNodeRegistration }, { directive: i4.RdxCollectionProvider }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSelectPopup]',
-                    hostDirectives: [RdxPopperContent, RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
+                    hostDirectives: [
+                        RdxPopperContent,
+                        { directive: RdxFloatingFocusManager, inputs: ['returnFocus: finalFocus'] },
+                        RdxFloatingNodeRegistration,
+                        RdxCollectionProvider
+                    ],
                     providers: [
                         provideSelectPopupContext(context$1),
-                        provideRdxDismissableLayerConfig(() => {
+                        provideFloatingFocusManagerConfig(() => {
+                            const rootContext = injectSelectRootContext();
+                            const host = inject(ElementRef).nativeElement;
                             return {
-                                disableOutsidePointerEvents: injectSelectRootContext().modal
+                                modal: () => false,
+                                enabled: () => rootContext.open() || rootContext.transitionStatus() === 'ending',
+                                closeOnFocusOut: () => false,
+                                // The listbox owns DOM focus; items are navigated virtually through aria-activedescendant.
+                                initialFocus: () => host,
+                                restoreFocus: () => true,
+                                openInteractionType: () => rootContext.openInteractionType(),
+                                closeInteractionType: () => rootContext.closeInteractionType()
                             };
                         })
                     ],
@@ -594,9 +718,9 @@ class RdxSelectItem {
         handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
             if (event.defaultPrevented)
                 return;
-            this.rootContext.onValueChange(this.value());
+            this.rootContext.onValueChange(this.value(), 'item-press', event.detail.originalEvent);
             if (!this.rootContext.multiple()) {
-                this.rootContext.onOpenChange(false);
+                this.rootContext.onOpenChange(false, 'item-press', event.detail.originalEvent);
             }
         }, eventDetail);
     }
@@ -773,9 +897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxSelectPortalMisuseGuard {
     constructor() {
         if (isDevMode()) {
-            throw new Error('[rdxSelectPortal] is now a structural directive. ' +
+            rdxDevError('select/portal-on-element', '`rdxSelectPortal` is now a structural directive. ' +
                 'Use `*rdxSelectPortal` on the popup element or `<ng-template rdxSelectPortal>`. ' +
-                'rdxSelectPortalPresence has been removed. See https://radix-ng.com/components/select.md');
+                'rdxSelectPortalPresence has been removed.', 'components/select');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -788,112 +912,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class RdxSelectPositioner {
+/**
+ * Positions the select popup against the trigger using the popper engine.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the full popper positioning surface — the inputs
+ * (`side`, `sideOffset`, `align`, …), the `placed` output, and the host bindings — from
+ * {@link RdxPopperContentWrapper}, and declares select's Base UI-aligned defaults via the config
+ * provider. It also satisfies {@link RdxPositionerImpl} (via the inherited `placed`) so the popup can
+ * resolve it through {@link RDX_SELECT_POSITIONER_TOKEN}, the same as the item-aligned positioner.
+ */
+class RdxSelectPositioner extends RdxPopperContentWrapper {
     constructor() {
-        /**
-         * The preferred side of the anchor to render against when open.
-         * Will be reversed when collisions occur and avoidCollisions is enabled.
-         */
-        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        /**
-         * The distance in pixels from the anchor.
-         */
-        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * The preferred alignment against the anchor. May change when collisions occur.
-         */
-        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        /**
-         * An offset in pixels from the `start` or `end` alignment options.
-         */
-        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * The padding between the arrow and the edges of the content.
-         * If your content has border-radius, this will prevent it from overflowing the corners.
-         */
-        this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
-         */
-        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * The element used as the collision boundary.
-         * By default this is the viewport, though you can provide additional element(s) to be included in this check.
-         */
-        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
-        /**
-         * The distance in pixels from the boundary edges where collision detection should occur.
-         * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
-         */
-        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
-        /**
-         * The sticky behavior on the `align` axis.
-         * - `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary
-         * - `always` will keep the content in the boundary regardless.
-         */
-        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to hide the content when the trigger becomes fully occluded.
-         */
-        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Whether to update the position of the floating element on every animation frame if required.
-         */
-        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
-        /**
-         * Emits when the element is placed.
-         */
-        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
+        super();
+        this.positionerStyle = { boxSizing: 'border-box', ...legacyPopperVars('select') };
+        const rootContext = injectSelectRootContext();
+        const injector = inject(Injector);
+        const host = inject(ElementRef).nativeElement;
+        // Modal select isolates the background with an internal backdrop (finding #1 / Base UI) instead of
+        // a global pointer lock; the trigger stays clickable through a cutout (toggle-close).
+        afterNextRender(() => setupInternalBackdrop(host, injector, {
+            isOpen: () => rootContext.open(),
+            shouldRender: () => rootContext.modal(),
+            cutout: () => rootContext.triggerElement()
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPositioner, isStandalone: true, selector: "[rdxSelectPositioner]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "style": "{\n          'boxSizing': 'border-box',\n          '--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-select-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-select-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-select-trigger-height': 'var(--radix-popper-anchor-height)',\n        }" } }, providers: [
-            {
-                provide: RDX_SELECT_POSITIONER_TOKEN,
-                useExisting: forwardRef(() => RdxSelectPositioner)
-            }
-        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPositioner, isStandalone: true, selector: "[rdxSelectPositioner]", host: { properties: { "style": "positionerStyle" } }, providers: [
+            ...provideRdxPopperContentWrapper(RdxSelectPositioner),
+            provideRdxPopperContentConfig({ align: 'start', updatePositionStrategy: 'always' }),
+            { provide: RDX_SELECT_POSITIONER_TOKEN, useExisting: forwardRef(() => RdxSelectPositioner) }
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSelectPositioner]',
                     providers: [
-                        {
-                            provide: RDX_SELECT_POSITIONER_TOKEN,
-                            useExisting: forwardRef(() => RdxSelectPositioner)
-                        }
-                    ],
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'updatePositionStrategy'
-                            ]
-                        }
+                        ...provideRdxPopperContentWrapper(RdxSelectPositioner),
+                        provideRdxPopperContentConfig({ align: 'start', updatePositionStrategy: 'always' }),
+                        { provide: RDX_SELECT_POSITIONER_TOKEN, useExisting: forwardRef(() => RdxSelectPositioner) }
                     ],
                     host: {
-                        // re-namespace exposed content custom properties
-                        '[style]': `{
-          'boxSizing': 'border-box',
-          '--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',
-          '--radix-select-content-available-width': 'var(--radix-popper-available-width)',
-          '--radix-select-content-available-height': 'var(--radix-popper-available-height)',
-          '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
-          '--radix-select-trigger-height': 'var(--radix-popper-anchor-height)',
-        }`
+                        // The unified vars + placement attrs come from the wrapper (ADR 0012); only `box-sizing` and
+                        // the deprecated `--radix-select-*` aliases (still consumed by demos) remain here.
+                        '[style]': 'positionerStyle'
                     }
                 }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * A visual divider between groups of items.
@@ -926,6 +991,13 @@ class RdxSelectTrigger {
         this.id = input(injectId('rdx-select-trigger-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext.triggerElement(),
+            open: () => this.rootContext.open(),
+            disabled: () => this.isDisabled(),
+            contentId: () => this.rootContext.contentId
+        });
         this.invalidState = computed(() => Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
         this.filledState = computed(() => !this.rootContext.isEmptyModelValue() || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
@@ -947,18 +1019,20 @@ class RdxSelectTrigger {
             this.fieldRootContext?.setFilled(!this.rootContext.isEmptyModelValue());
         });
     }
-    handleOpen() {
+    handleOpen(reason, event) {
         if (!this.isDisabled()) {
-            this.rootContext.onOpenChange(true);
+            return this.rootContext.onOpenChange(true, reason, event);
         }
+        return false;
     }
     handlePointerOpen(event) {
         const pointerEvent = event;
-        this.handleOpen();
-        this.rootContext.triggerPointerDownPosRef.set({
-            x: Math.round(pointerEvent.pageX),
-            y: Math.round(pointerEvent.pageY)
-        });
+        if (this.handleOpen('trigger-press', event)) {
+            this.rootContext.triggerPointerDownPosRef.set({
+                x: Math.round(pointerEvent.pageX),
+                y: Math.round(pointerEvent.pageY)
+            });
+        }
     }
     onClickHandler(event) {
         // Whilst browsers generally have no issue focusing the trigger when clicking
@@ -970,6 +1044,7 @@ class RdxSelectTrigger {
     }
     onPointerDown(event) {
         const pointerEvent = event;
+        this.triggerInteraction.recordPointerDown(pointerEvent);
         if (pointerEvent.pointerType === 'touch')
             return event.preventDefault();
         // prevent implicit pointer capture
@@ -996,7 +1071,8 @@ class RdxSelectTrigger {
     onKeydown(event) {
         const keyEvent = event;
         if (OPEN_KEYS.includes(keyEvent.key)) {
-            this.handleOpen();
+            const reason = keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowDown' ? 'list-navigation' : 'trigger-press';
+            this.handleOpen(reason, event);
             event.preventDefault();
         }
     }
@@ -1008,7 +1084,7 @@ class RdxSelectTrigger {
         this.fieldRootContext?.setTouched(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-placeholder": "dataAttr(rootContext.isEmptyModelValue())", "attr.data-disabled": "dataAttr(isDisabled())", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-controls": "triggerInteraction.ariaControls()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "triggerInteraction.dataState()", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-placeholder": "dataAttr(rootContext.isEmptyModelValue())", "attr.data-disabled": "dataAttr(isDisabled())", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, decorators: [{
             type: Directive,
@@ -1020,12 +1096,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         type: 'button',
                         '[attr.id]': 'id()',
                         '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-controls]': 'triggerInteraction.ariaControls()',
                         '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
                         '[attr.aria-required]': 'requiredState() ? "true" : undefined',
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '[dir]': 'rootContext.dir()',
-                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
-                        '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
+                        '[attr.data-state]': 'triggerInteraction.dataState()',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
                         '[attr.data-placeholder]': 'dataAttr(rootContext.isEmptyModelValue())',
                         '[attr.data-disabled]': 'dataAttr(isDisabled())',
                         '[attr.data-invalid]': 'dataAttr(invalidState())',