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

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

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, computed, signal, untracked, effect, Directive, InjectionToken, ElementRef, Injector, DestroyRef, afterNextRender, ContentChild, linkedSignal, 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, createFloatingRootContext, useTransitionStatus, isNullish, provideFloatingTree, provideFloatingRootContext, injectId, 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 { getInteractionTypeFromEvent } from '@radix-ng/primitives/floating-focus-manager';
 import * as i1 from '@radix-ng/primitives/popper';
-import { RdxPopper, RdxPopperContentWrapper, RdxPopperContent, RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import * as i3 from '@radix-ng/primitives/collection';
+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 i2 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
-import * as i1$1 from '@radix-ng/primitives/focus-scope';
+import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
+import * as i2 from '@radix-ng/primitives/focus-scope';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
-import * as i1$2 from '@radix-ng/primitives/portal';
-import { RdxPortal } from '@radix-ng/primitives/portal';
-import * as i1$3 from '@radix-ng/primitives/presence';
-import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortalPresence } from '@radix-ng/primitives/portal';
+import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 
 const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];
@@ -53,6 +53,17 @@ function focusFirst(candidates) {
     }
 }
 
+function createChangeEventDetails(reason, event) {
+    let canceled = false;
+    return {
+        reason,
+        event,
+        cancel: () => {
+            canceled = true;
+        },
+        isCanceled: () => canceled
+    };
+}
 const context$2 = () => {
     const context = inject(RdxSelectRoot);
     return {
@@ -66,6 +77,10 @@ const context$2 = () => {
         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,
@@ -85,32 +100,48 @@ 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.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));
@@ -151,34 +182,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 = createChangeEventDetails(reason, event);
+        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 = createChangeEventDetails(reason, resolvedEvent);
+        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
@@ -300,32 +386,41 @@ const [injectSelectPopupContext, provideSelectPopupContext] = createContext('Rdx
 const RDX_SELECT_POSITIONER_TOKEN = new InjectionToken('RDX_SELECT_POSITIONER_TOKEN');
 /**
  * The popup listbox. Holds DOM focus while open and navigates with the highlight model
- * (`aria-activedescendant`) — items are not individually focusable. (Renamed to `RdxSelectPopup` in a
- * later step; selector kept here during the navigation migration.)
+ * (`aria-activedescendant`) — items are not individually focusable.
+ *
+ * Since ADR 0010 §6 the popup is the **inner** element (the positioner is its ancestor): it carries
+ * `role="listbox"`, the `contentId`, and — via the composed {@link RdxPopperContent} — the
+ * `data-side` / `data-align` attributes and the until-positioned animation guard previously held by
+ * the deleted `rdxSelectPositionerContent`. `RdxPopperContent` also makes the popup the element the
+ * `RdxPopperContentWrapper` ancestor reads its content z-index from. In item-aligned mode there is no
+ * wrapper, so `RdxPopperContent` no-ops.
  *
  * @group Components
  */
 class RdxSelectPopup {
-    set positioner(port) {
-        if (port) {
-            port.placed.subscribe(() => {
-                this.highlightSelectedItem();
-                this.scrollSelectedIntoView();
-                this.isPositioned.set(true);
-            });
-        }
-    }
     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);
         this.rootContext = injectSelectRootContext();
-        /** Highlight-model navigation over the collected items (DOM order). */
+        /**
+         * The collected items (DOM order). Exposed so the `item-aligned` positioner — now the popup's
+         * **ancestor** — can read them without injecting {@link RdxCollectionProvider} (which the popup
+         * provides as a descendant, so an upward `inject` would not find it).
+         */
+        this.items = this.collection.items;
+        /**
+         * Highlight-model navigation over the collected items (DOM order). `loop` is disabled so arrow
+         * navigation stops at the first / last item instead of wrapping around — matching native
+         * `<select>` behavior.
+         */
         this.highlight = useListHighlight({
             items: this.collection.items,
             isNavigable: (item) => !item.disabled(),
             getId: (item) => item.element.id,
+            loop: signal(false),
             injector: this.injector
         });
         this.selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
@@ -340,20 +435,69 @@ 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 */ []));
-        // Lock page scroll while a modal popup is open (content mounts only while open).
-        useScrollLock(this.rootContext.modal);
+        /**
+         * The positioner — now an **ancestor** element — provides {@link RDX_SELECT_POSITIONER_TOKEN}
+         * (Popper or item-aligned). We react to its `placed` to highlight and scroll the selected item
+         * into view and flag the popup as positioned.
+         */
+        this.positioner = inject(RDX_SELECT_POSITIONER_TOKEN, { optional: true });
+        this.positioner?.placed.subscribe(() => {
+            this.highlightSelectedItem();
+            this.scrollSelectedIntoView();
+            this.isPositioned.set(true);
+            // In Popper mode the popup lives inside the positioner, which stays `visibility: hidden`
+            // until it is placed — so the mount-time `mountAutoFocus` call no-ops on the hidden
+            // listbox and keyboard navigation never starts. Focus it now that it is visible (skip if
+            // focus already moved inside, e.g. item-aligned mode or a re-placement).
+            const popup = this.content();
+            if (popup && !popup.contains(document.activeElement)) {
+                popup.focus({ preventScroll: true });
+            }
+        });
+        // Keep the highlighted item in view during keyboard navigation. The highlight model is pure
+        // state (it never moves DOM focus or scrolls), so without this the highlight can move past the
+        // visible viewport — behind the scroll buttons. Only keyboard moves scroll; hover highlights
+        // must not (the cursor is already over a visible item).
+        effect(() => {
+            const item = this.highlight.highlightedItem();
+            if (item && this.keyboardActive) {
+                item.element.scrollIntoView?.({ block: 'nearest' });
+            }
+        });
+        // 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));
+        // 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)
+        });
         const focusScope = inject(RdxFocusScope);
         afterNextRender(() => {
             focusScope.unmountAutoFocus.subscribe((event) => {
@@ -368,7 +512,8 @@ class RdxSelectPopup {
                 event.preventDefault();
                 this.content()?.focus({ preventScroll: true });
             });
-            this.content.set(this.currentElement.nativeElement.firstElementChild);
+            // The popup is now the listbox host itself (no longer the positioner's first child).
+            this.content.set(this.currentElement.nativeElement);
         });
         effect((onCleanup) => {
             if (!this.content())
@@ -390,8 +535,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);
@@ -410,6 +556,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() {
@@ -444,9 +605,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;
         }
@@ -470,31 +632,18 @@ 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: { "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(() => {
-                return {
-                    disableOutsidePointerEvents: injectSelectRootContext().modal
-                };
-            })
-        ], queries: [{ propertyName: "positioner", first: true, predicate: RDX_SELECT_POSITIONER_TOKEN, descendants: true }], hostDirectives: [{ directive: i1$1.RdxFocusScope }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxCollectionProvider }], ngImport: i0 }); }
+    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)], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFocusScope }, { 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: [RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
-                    providers: [
-                        provideSelectPopupContext(context$1),
-                        provideRdxDismissableLayerConfig(() => {
-                            return {
-                                disableOutsidePointerEvents: injectSelectRootContext().modal
-                            };
-                        })
-                    ],
+                    hostDirectives: [RdxPopperContent, RdxFocusScope, RdxFloatingNodeRegistration, RdxCollectionProvider],
+                    providers: [provideSelectPopupContext(context$1)],
                     host: {
                         role: 'listbox',
                         tabindex: '-1',
+                        '[id]': 'rootContext.contentId',
                         '[attr.aria-activedescendant]': 'highlight.activeId()',
                         '[attr.aria-multiselectable]': 'rootContext.multiple() ? "true" : undefined',
                         '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
@@ -511,10 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }`
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], positioner: [{
-                type: ContentChild,
-                args: [RDX_SELECT_POSITIONER_TOKEN, { descendants: true }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
 
 const context = () => {
     const context = inject(RdxSelectItem);
@@ -559,9 +705,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);
     }
@@ -590,7 +736,7 @@ class RdxSelectItem {
             this.onPointerUp(keyEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectItem, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)" }, properties: { "attr.id": "id", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], exportAs: ["rdxSelectItem"], hostDirectives: [{ directive: i3.RdxCollectionItem, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectItem, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)" }, properties: { "attr.id": "id", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], exportAs: ["rdxSelectItem"], hostDirectives: [{ directive: i4.RdxCollectionItem, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, decorators: [{
             type: Directive,
@@ -708,177 +854,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Structural directive that teleports the select popup into a container (default `document.body`)
+ * while the select is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * Apply it with the `*` microsyntax on the popup — `<div *rdxSelectPortal rdxSelectPopup>` — or as an
+ * explicit `<ng-template rdxSelectPortal>`. For a custom container use the explicit form with
+ * `[container]`. Unlike the previous attribute portal it no longer parks an empty wrapper `<div>` in
+ * `document.body` while the select is closed.
+ */
 class RdxSelectPortal {
-    constructor() {
-        /**
-         * Optional container to portal the content into. Defaults to `document.body` when not set.
-         */
-        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPortal, isStandalone: true, selector: "[rdxSelectPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPortal, isStandalone: true, selector: "ng-template[rdxSelectPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectSelectRootContext().open }))], exportAs: ["rdxSelectPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectPortal]',
-                    hostDirectives: [
-                        {
-                            directive: RdxPortal,
-                            inputs: ['container']
-                        }
-                    ]
+                    selector: 'ng-template[rdxSelectPortal]',
+                    exportAs: 'rdxSelectPortal',
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectSelectRootContext().open }))]
                 }]
-        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
-
-class RdxSelectPortalPresence {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPortalPresence, isStandalone: true, selector: "ng-template[rdxSelectPortalPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const context = injectSelectRootContext();
-                return { present: context.open };
-            })
-        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+        }] });
+/**
+ * Dev-mode guard: `rdxSelectPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxSelectPortal>` markup would silently stop portaling — fail loudly
+ * instead.
+ */
+class RdxSelectPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            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.', 'components/select');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPortalMisuseGuard, isStandalone: true, selector: "[rdxSelectPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxSelectPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectSelectRootContext();
-                            return { present: context.open };
-                        })
-                    ]
+                    selector: '[rdxSelectPortal]:not(ng-template)'
                 }]
-        }] });
+        }], 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-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-tooltip-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)
-                        }
+                        ...provideRdxPopperContentWrapper(RdxSelectPositioner),
+                        provideRdxPopperContentConfig({ align: 'start', updatePositionStrategy: 'always' }),
+                        { provide: RDX_SELECT_POSITIONER_TOKEN, useExisting: forwardRef(() => RdxSelectPositioner) }
                     ],
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'updatePositionStrategy'
-                            ]
-                        }
-                    ],
-                    host: {
-                        // re-namespace exposed content custom properties
-                        '[style]': `{
-          'boxSizing': 'border-box',
-          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
-          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',
-          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',
-          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',
-          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',
-        }`
-                    }
-                }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
-
-class RdxSelectPositionerContent {
-    constructor() {
-        this.rootContext = injectSelectRootContext();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositionerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPositionerContent, isStandalone: true, selector: "[rdxSelectPositionerContent]", host: { attributes: { "role": "listbox" }, properties: { "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositionerContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxSelectPositionerContent]',
-                    hostDirectives: [RdxPopperContent],
                     host: {
-                        role: 'listbox',
-                        '[id]': 'rootContext.contentId'
+                        // 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'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * A visual divider between groups of items.
@@ -932,18 +999,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
@@ -981,7 +1050,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();
         }
     }
@@ -1071,6 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const _importsSelect = [
     RdxSelectRoot,
     RdxSelectPortal,
+    RdxSelectPortalMisuseGuard,
     RdxSelectTrigger,
     RdxSelectValue,
     RdxSelectPopup,
@@ -1080,9 +1151,7 @@ const _importsSelect = [
     RdxSelectItemText,
     RdxSelectGroupLabel,
     RdxSelectGroup,
-    RdxSelectPositionerContent,
     RdxSelectPositioner,
-    RdxSelectPortalPresence,
     RdxSelectIcon,
     RdxSelectSeparator,
     RdxSelectBackdrop
@@ -1092,5 +1161,5 @@ const _importsSelect = [
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENT_MARGIN, OPEN_KEYS, RDX_SELECT_POSITIONER_TOKEN, RdxSelectBackdrop, RdxSelectGroup, RdxSelectGroupLabel, RdxSelectIcon, RdxSelectItem, RdxSelectItemIndicator, RdxSelectItemText, RdxSelectList, RdxSelectPopup, RdxSelectPortal, RdxSelectPortalPresence, RdxSelectPositioner, RdxSelectPositionerContent, RdxSelectRoot, RdxSelectSeparator, RdxSelectTrigger, RdxSelectValue, SELECTION_KEYS, _importsSelect, compare, focusFirst, injectSelectItemContext, injectSelectPopupContext, injectSelectRootContext, provideSelectItemContext, provideSelectPopupContext, provideSelectRootContext, shouldShowPlaceholder, valueComparator };
+export { CONTENT_MARGIN, OPEN_KEYS, RDX_SELECT_POSITIONER_TOKEN, RdxSelectBackdrop, RdxSelectGroup, RdxSelectGroupLabel, RdxSelectIcon, RdxSelectItem, RdxSelectItemIndicator, RdxSelectItemText, RdxSelectList, RdxSelectPopup, RdxSelectPortal, RdxSelectPortalMisuseGuard, RdxSelectPositioner, RdxSelectRoot, RdxSelectSeparator, RdxSelectTrigger, RdxSelectValue, SELECTION_KEYS, _importsSelect, compare, focusFirst, injectSelectItemContext, injectSelectPopupContext, injectSelectRootContext, provideSelectItemContext, provideSelectPopupContext, provideSelectRootContext, shouldShowPlaceholder, valueComparator };
 //# sourceMappingURL=radix-ng-primitives-select.mjs.map