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

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

@@ -1,19 +1,18 @@
 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 { 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 * 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, 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 * as i3 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 * 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'];
@@ -300,32 +299,40 @@ 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.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 */ []));
@@ -347,6 +354,35 @@ class RdxSelectPopup {
          */
         this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
         this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /**
+         * 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' });
+            }
+        });
         // Lock page scroll while a modal popup is open (content mounts only while open).
         useScrollLock(this.rootContext.modal);
         // The popup's animation determines when the open/close transition (onOpenChangeComplete) is done.
@@ -368,7 +404,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())
@@ -470,20 +507,20 @@ 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: [
+    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(() => {
                 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 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFocusScope }, { directive: i3.RdxDismissableLayer }, { 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],
+                    hostDirectives: [RdxPopperContent, RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
                     providers: [
                         provideSelectPopupContext(context$1),
                         provideRdxDismissableLayerConfig(() => {
@@ -495,6 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     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 +549,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);
@@ -590,7 +625,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,51 +743,50 @@ 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()) {
+            throw new Error('[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');
+        }
+    }
+    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 {
     constructor() {
@@ -812,7 +846,7 @@ class RdxSelectPositioner {
         this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
     }
     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: [
+    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)
@@ -851,35 +885,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         // 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)',
+          '--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)',
         }`
                     }
                 }]
         }], 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'
-                    }
-                }]
-        }] });
-
 /**
  * A visual divider between groups of items.
  *
@@ -1071,6 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const _importsSelect = [
     RdxSelectRoot,
     RdxSelectPortal,
+    RdxSelectPortalMisuseGuard,
     RdxSelectTrigger,
     RdxSelectValue,
     RdxSelectPopup,
@@ -1080,9 +1096,7 @@ const _importsSelect = [
     RdxSelectItemText,
     RdxSelectGroupLabel,
     RdxSelectGroup,
-    RdxSelectPositionerContent,
     RdxSelectPositioner,
-    RdxSelectPortalPresence,
     RdxSelectIcon,
     RdxSelectSeparator,
     RdxSelectBackdrop
@@ -1092,5 +1106,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