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

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

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, computed, signal, Directive, InjectionToken, ElementRef, afterNextRender, effect, ContentChild, linkedSignal, DestroyRef, numberAttribute, forwardRef } from '@angular/core';
-import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import * as i3 from '@radix-ng/primitives/collection';
+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, 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 { isEqual, getActiveElement, createContext, isNullish, injectId, handleAndDispatchCustomEvent } from '@radix-ng/primitives/core';
-import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i3 from '@radix-ng/primitives/dismissable-layer';
 import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
-import * as 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 from '@radix-ng/primitives/popper';
-import { RdxPopper, RdxPopperContent, RdxPopperContentWrapper, RdxPopperAnchor } from '@radix-ng/primitives/popper';
-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'];
 const SELECTION_KEYS = [' ', 'Enter'];
@@ -62,9 +62,14 @@ const context$2 = () => {
         dir: context.dir,
         value: context.value,
         multiple: context.multiple,
-        by: context.by,
+        isItemEqualToValue: context.isItemEqualToValue,
+        itemToStringLabel: context.itemToStringLabel,
         open: context.open,
         disabled: context.disabled,
+        modal: context.modal,
+        isEmptyModelValue: context.isEmptyModelValue,
+        transitionStatus: context.transitionStatus,
+        registerTransitionElement: context.registerTransitionElement,
         optionsSet: context.optionsSet,
         onOptionAdd: (option) => {
             const existingOption = context.getOption(option());
@@ -91,23 +96,33 @@ const context$2 = () => {
         }
     };
 };
-const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext');
+const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext', 'components/select');
 class RdxSelectRoot {
     constructor() {
         this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         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 */ []));
-        /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */
-        this.by = input(...(ngDevMode ? [undefined, { debugName: "by" }] : /* istanbul ignore next */ []));
+        /** 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 after the open/close transition (including any exit animation) finishes. */
+        this.onOpenChangeComplete = output();
+        this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
+        /** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
+        this.transitionStatus = this.transition.status;
+        /** Registers the popup element whose animation determines transition completion. */
+        this.registerTransitionElement = this.transition.registerElement;
         this.isEmptyModelValue = computed(() => {
-            if (this.multiple() && Array.isArray(this.value())) {
-                return Array(this.value())?.length === 0;
-            }
-            else {
-                return isNullish(this.value());
+            const value = this.value();
+            if (this.multiple() && Array.isArray(value)) {
+                return value.length === 0;
             }
+            return isNullish(value);
         }, ...(ngDevMode ? [{ debugName: "isEmptyModelValue" }] : /* istanbul ignore next */ []));
         this.optionsSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "optionsSet" }] : /* istanbul ignore next */ []));
         // The native `select` only associates the correct default value if the corresponding
@@ -126,14 +141,24 @@ class RdxSelectRoot {
             x: 0,
             y: 0
         }, ...(ngDevMode ? [{ debugName: "triggerPointerDownPosRef" }] : /* istanbul ignore next */ []));
+        let previousOpen = untracked(this.open);
+        effect(() => {
+            const open = this.open();
+            if (open === previousOpen) {
+                return;
+            }
+            previousOpen = open;
+            untracked(() => this.transition.start(open));
+        });
     }
     getOption(value) {
-        return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.by()));
+        return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.isItemEqualToValue()));
     }
     handleValueChange(value) {
         if (this.multiple()) {
-            const array = Array.isArray(this.value()) ? [...Array(this.value())] : [];
-            const index = array.findIndex((i) => compare(i, value, this.by()));
+            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]);
         }
@@ -142,7 +167,7 @@ class RdxSelectRoot {
         }
     }
     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 }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange" }, 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 }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, decorators: [{
             type: Directive,
@@ -152,25 +177,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     providers: [provideSelectRootContext(context$2)],
                     hostDirectives: [RdxPopper]
                 }]
-        }], 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 }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: false }] }] } });
+        }], 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"] }] } });
+
+/**
+ * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
+ * it `position: fixed; inset: 0`. Exposes `data-open` / `data-closed` for animation.
+ *
+ * @group Components
+ */
+class RdxSelectBackdrop {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectBackdrop, isStandalone: true, selector: "[rdxSelectBackdrop]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"" } }, exportAs: ["rdxSelectBackdrop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectBackdrop]',
+                    exportAs: 'rdxSelectBackdrop',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[attr.data-open]': 'rootContext.open() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.open() ? undefined : ""'
+                    }
+                }]
+        }] });
+
+class RdxSelectGroup {
+    constructor() {
+        this.id = injectId('rdx-select-group-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectGroup, isStandalone: true, selector: "[rdxSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "id" } }, exportAs: ["rdxSelectGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectGroup]',
+                    exportAs: 'rdxSelectGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'id'
+                    }
+                }]
+        }] });
+
+class RdxSelectGroupLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectGroupLabel, isStandalone: true, selector: "[rdxSelectGroupLabel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectGroupLabel]',
+                    host: {}
+                }]
+        }] });
+
+/**
+ * Decorative icon inside the trigger (e.g. a chevron). Hidden from assistive technology.
+ *
+ * @group Components
+ */
+class RdxSelectIcon {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectIcon, isStandalone: true, selector: "[rdxSelectIcon]", host: { attributes: { "aria-hidden": "true" } }, exportAs: ["rdxSelectIcon"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectIcon]',
+                    exportAs: 'rdxSelectIcon',
+                    host: {
+                        'aria-hidden': 'true'
+                    }
+                }]
+        }] });
 
 const context$1 = () => {
-    const context = inject(RdxSelectContent);
+    const context = inject(RdxSelectPopup);
     return {
         content: context.content,
         viewport: context.viewport,
         isPositioned: context.isPositioned,
         selectedItem: context.selectedItem,
         selectedItemText: context.selectedItemText,
+        highlightedItem: context.highlight.highlightedItem,
+        isHighlighted: (item) => context.highlight.highlightedItem() === item,
+        highlightItem: (item) => context.highlight.set(item),
+        isKeyboardActive: () => context.isKeyboardActive(),
+        setKeyboardActive: (value) => context.setKeyboardActive(value),
         onViewportChange: (node) => {
             context.viewport.set(node);
         },
         onItemLeave: () => {
-            context.content()?.focus();
+            context.highlight.clear();
         },
         itemRefCallback: (node, value, disabled) => {
             const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
-            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.isItemEqualToValue());
             if (isSelectedItem || isFirstValidItem) {
                 context.selectedItem.set(node);
             }
@@ -180,34 +288,61 @@ const context$1 = () => {
         },
         itemTextRefCallback: (node, value, disabled) => {
             const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
-            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.isItemEqualToValue());
             if (isSelectedItem || isFirstValidItem) {
                 context.selectedItemText.set(node);
             }
         }
     };
 };
-const [injectSelectContentContext, provideSelectContentContext] = createContext('RdxSelectContent');
+const [injectSelectPopupContext, provideSelectPopupContext] = createContext('RdxSelectPopup', 'components/select');
 const RDX_SELECT_POSITIONER_TOKEN = new InjectionToken('RDX_SELECT_POSITIONER_TOKEN');
-class RdxSelectContent {
-    set positioner(port) {
-        if (port) {
-            port.placed.subscribe(() => {
-                this.focusSelectedItem();
-                this.isPositioned.set(true);
-            });
-        }
-    }
+/**
+ * The popup listbox. Holds DOM focus while open and navigates with the highlight model
+ * (`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 {
     constructor() {
         this.dismissableLayer = inject(RdxDismissableLayer);
         this.currentElement = inject(ElementRef);
         this.collection = inject(RdxCollectionProvider);
+        this.injector = inject(Injector);
         this.rootContext = injectSelectRootContext();
+        /**
+         * 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 */ []));
         this.selectedItemText = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItemText" }] : /* istanbul ignore next */ []));
         this.firstValidItemFoundRef = signal(false, ...(ngDevMode ? [{ debugName: "firstValidItemFoundRef" }] : /* istanbul ignore next */ []));
         this.viewport = signal(undefined, ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
         this.isPositioned = signal(false, ...(ngDevMode ? [{ debugName: "isPositioned" }] : /* istanbul ignore next */ []));
+        // Tracks whether the last interaction was the keyboard, so the highlight doesn't jump to an item
+        // the cursor happens to rest on when arrow-key navigation scrolls the list.
+        this.keyboardActive = false;
         /**
          * Event handler called when the escape key is down.
          * Can be prevented.
@@ -219,6 +354,40 @@ class RdxSelectContent {
          */
         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.
+        const unregisterTransition = this.rootContext.registerTransitionElement(this.currentElement.nativeElement);
+        inject(DestroyRef).onDestroy(unregisterTransition);
         this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
         this.dismissableLayer.dismiss.subscribe(() => this.rootContext.onOpenChange(false));
         const focusScope = inject(RdxFocusScope);
@@ -229,10 +398,14 @@ class RdxSelectContent {
                 this.rootContext.triggerElement()?.focus({ preventScroll: true });
                 event.preventDefault();
             });
+            // Focus the popup itself (not an item) — the listbox is the focus owner; items are
+            // navigated virtually via aria-activedescendant.
             focusScope.mountAutoFocus.subscribe((event) => {
                 event.preventDefault();
+                this.content()?.focus({ preventScroll: true });
             });
-            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())
@@ -275,56 +448,98 @@ class RdxSelectContent {
             });
         });
     }
-    focusSelectedItem() {
-        if (this.selectedItem() && this.content()) {
-            focusFirst([this.selectedItem(), this.content()]);
+    /** Highlights the selected item (or the first enabled one) when the popup opens. */
+    highlightSelectedItem() {
+        const items = this.collection.items();
+        const selected = items.find((item) => valueComparator(this.rootContext.value(), item.value(), this.rootContext.isItemEqualToValue()));
+        if (selected) {
+            this.highlight.set(selected);
         }
+        else {
+            this.highlight.first();
+        }
+    }
+    scrollSelectedIntoView() {
+        this.selectedItem()?.scrollIntoView?.({ block: 'nearest' });
+    }
+    setKeyboardActive(value) {
+        this.keyboardActive = value;
+    }
+    isKeyboardActive() {
+        return this.keyboardActive;
     }
     handleKeyDown(event) {
         const keyEvent = event;
+        if (keyEvent.isComposing)
+            return;
         // select should not be navigated using tab key so we prevent it
-        if (keyEvent.key === 'Tab')
+        if (keyEvent.key === 'Tab') {
             event.preventDefault();
-        if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(keyEvent.key)) {
-            const collectionItems = this.collection.items().map((i) => i.element);
-            let candidateNodes = [...collectionItems];
-            if (['ArrowUp', 'End'].includes(keyEvent.key))
-                candidateNodes = candidateNodes.slice().reverse();
-            if (['ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
-                const currentElement = event.target;
-                const currentIndex = candidateNodes.indexOf(currentElement);
-                candidateNodes = candidateNodes.slice(currentIndex + 1);
+            return;
+        }
+        if (SELECTION_KEYS.includes(keyEvent.key)) {
+            event.preventDefault();
+            const item = this.highlight.highlightedItem();
+            if (item && !item.disabled()) {
+                this.rootContext.onValueChange(item.value());
+                if (!this.rootContext.multiple())
+                    this.rootContext.onOpenChange(false);
             }
-            setTimeout(() => focusFirst(candidateNodes));
+            return;
+        }
+        if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(keyEvent.key)) {
             event.preventDefault();
+            this.keyboardActive = true;
+            switch (keyEvent.key) {
+                case 'ArrowDown':
+                    this.highlight.next();
+                    break;
+                case 'ArrowUp':
+                    this.highlight.previous();
+                    break;
+                case 'Home':
+                    this.highlight.first();
+                    break;
+                case 'End':
+                    this.highlight.last();
+                    break;
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectContent, isStandalone: true, selector: "[rdxSelectContent]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [
-            provideSelectContentContext(context$1),
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopup, isStandalone: true, selector: "[rdxSelectPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox", "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "id": "rootContext.contentId", "attr.aria-activedescendant": "highlight.activeId()", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [
+            provideSelectPopupContext(context$1),
             provideRdxDismissableLayerConfig(() => {
                 return {
-                    disableOutsidePointerEvents: signal(true)
+                    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: RdxSelectContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectContent]',
-                    hostDirectives: [RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
+                    selector: '[rdxSelectPopup]',
+                    hostDirectives: [RdxPopperContent, RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
                     providers: [
-                        provideSelectContentContext(context$1),
+                        provideSelectPopupContext(context$1),
                         provideRdxDismissableLayerConfig(() => {
                             return {
-                                disableOutsidePointerEvents: signal(true)
+                                disableOutsidePointerEvents: injectSelectRootContext().modal
                             };
                         })
                     ],
                     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"',
+                        '[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()',
                         '(keydown)': 'handleKeyDown($event)',
                         '[style]': `{
@@ -334,29 +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 }]
-            }] } });
-
-class RdxSelectGroup {
-    constructor() {
-        this.id = injectId('rdx-select-group-');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectGroup, isStandalone: true, selector: "[rdxSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "id" } }, exportAs: ["rdxSelectGroup"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxSelectGroup]',
-                    exportAs: 'rdxSelectGroup',
-                    host: {
-                        role: 'group',
-                        '[attr.aria-labelledby]': 'id'
-                    }
-                }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
 
 const context = () => {
     const context = inject(RdxSelectItem);
@@ -370,30 +563,33 @@ const context = () => {
         }
     };
 };
-const [injectSelectItemContext, provideSelectItemContext] = createContext('RdxSelectItemContext');
+const [injectSelectItemContext, provideSelectItemContext] = createContext('RdxSelectItemContext', 'components/select');
 class RdxSelectItem {
     constructor() {
         this.rootContext = injectSelectRootContext();
-        this.contentContext = injectSelectContentContext();
+        this.contentContext = injectSelectPopupContext();
+        this.collectionItem = inject(RdxCollectionItem);
         this.currentElement = inject(ElementRef);
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.textValue = input('', ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.textValue$ = linkedSignal(this.textValue, ...(ngDevMode ? [{ debugName: "textValue$" }] : /* istanbul ignore next */ []));
-        this.isSelected = computed(() => valueComparator(this.rootContext.value(), this.value(), this.rootContext.by()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.isSelected = computed(() => valueComparator(this.rootContext.value(), this.value(), this.rootContext.isItemEqualToValue()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+        /** Highlighted via the highlight model (keyboard / hover), not DOM focus. */
+        this.isHighlighted = computed(() => this.contentContext.isHighlighted(this.collectionItem), ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
+        /** Item id, referenced by the popup's `aria-activedescendant`. */
+        this.id = injectId('rdx-select-item-');
         this.textId = injectId('rdx-select-item-text-');
         this.afterNextRender = afterNextRender(() => {
             this.contentContext.itemRefCallback(this.currentElement.nativeElement, this.value(), this.disabled());
         });
         this.SELECT_SELECT = 'select.select';
     }
-    onPointerDown(event) {
-        event.currentTarget.focus({ preventScroll: true });
-    }
     onPointerUp(event) {
         if (event.defaultPrevented)
             return;
+        if (this.disabled())
+            return;
         const eventDetail = { originalEvent: event, value: this.value() };
         handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
             if (event.defaultPrevented)
@@ -407,19 +603,18 @@ class RdxSelectItem {
     onPointerLeave(event) {
         if (event.defaultPrevented)
             return;
-        if (event.currentTarget === getActiveElement())
-            this.contentContext.onItemLeave?.();
+        this.contentContext.onItemLeave?.();
     }
     onPointerMove(event) {
         if (event.defaultPrevented)
             return;
-        if (this.disabled()) {
-            this.contentContext.onItemLeave?.();
+        // Ignore pointer events synthesized by keyboard-driven scrolling (don't steal the highlight).
+        if (this.contentContext.isKeyboardActive()) {
+            this.contentContext.setKeyboardActive(false);
+            return;
         }
-        else {
-            // even though safari doesn't support this option, it's acceptable
-            // as it only means it might scroll a few pixels when using the pointer.
-            event.currentTarget?.focus({ preventScroll: true });
+        if (!this.disabled()) {
+            this.contentContext.highlightItem(this.collectionItem);
         }
     }
     handleKeyDown(event) {
@@ -427,52 +622,35 @@ class RdxSelectItem {
         if (event.defaultPrevented)
             return;
         if (SELECTION_KEYS.includes(keyEvent.key))
-            this.handleSelectCustomEvent(keyEvent);
-        // prevent page scroll if using the space key to select an item
-        if (keyEvent.key === ' ')
-            event.preventDefault();
-    }
-    async handleSelectCustomEvent(event) {
-        if (event.defaultPrevented)
-            return;
-        const eventDetail = { originalEvent: event, value: this.value() };
-        handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
-            if (event.defaultPrevented)
-                return;
-            if (!this.disabled()) {
-                this.rootContext.onValueChange(this.value());
-                if (!this.rootContext.multiple())
-                    this.rootContext.onOpenChange(false);
-            }
-        }, eventDetail);
+            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: { "focus": "isFocused.set(true)", "blur": "isFocused.set(false)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.tabindex": "disabled() ? undefined : -1", "attr.aria-selected": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-highlighted": "isFocused() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], hostDirectives: [{ directive: i3.RdxCollectionItem, inputs: ["value", "value"] }], 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,
             args: [{
                     selector: '[rdxSelectItem]',
+                    exportAs: 'rdxSelectItem',
                     providers: [provideSelectItemContext(context)],
                     hostDirectives: [
                         {
                             directive: RdxCollectionItem,
-                            inputs: ['value']
+                            inputs: ['value', 'disabled']
                         }
                     ],
                     host: {
                         role: 'option',
-                        '[attr.tabindex]': 'disabled() ? undefined : -1',
-                        '[attr.aria-selected]': 'isSelected() ? "checked" : "unchecked"',
+                        '[attr.id]': 'id',
+                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
                         '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
-                        '[attr.data-highlighted]': 'isFocused() ? "" : undefined',
-                        '(focus)': 'isFocused.set(true)',
-                        '(blur)': 'isFocused.set(false)',
-                        '(pointerdown)': 'onPointerDown($event)',
+                        '[attr.data-selected]': 'isSelected() ? "" : undefined',
+                        '[attr.data-highlighted]': 'isHighlighted() ? "" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '(pointerup)': 'onPointerUp($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
-                        '(pointermove)': 'onPointerMove($event)',
-                        '(keydown)': 'handleKeyDown($event)'
+                        '(pointermove)': 'onPointerMove($event)'
                     }
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -499,7 +677,7 @@ class RdxSelectItemText {
     constructor() {
         this.elementRef = inject((ElementRef));
         this.rootContext = injectSelectRootContext();
-        this.contentContext = injectSelectContentContext();
+        this.contentContext = injectSelectPopupContext();
         this.itemContext = injectSelectItemContext();
         this.optionProps = computed(() => {
             return {
@@ -531,38 +709,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class RdxSelectLabel {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectLabel, isStandalone: true, selector: "[rdxSelectLabel]", ngImport: i0 }); }
+class RdxSelectList {
+    constructor() {
+        this.contentContext = injectSelectPopupContext();
+        this.elementRef = inject((ElementRef));
+        this.prevScrollTopRef = signal(0, ...(ngDevMode ? [{ debugName: "prevScrollTopRef" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.contentContext?.onViewportChange(this.elementRef.nativeElement);
+        });
+    }
+    handleScroll(event) {
+        const viewport = event.currentTarget;
+        this.prevScrollTopRef.set(viewport.scrollTop);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectList, isStandalone: true, selector: "[rdxSelectList]", host: { attributes: { "role": "presentation" }, listeners: { "scroll": "handleScroll($event)" }, properties: { "attr.data-rdx-select-list": "\"\"", "style": "{\n            position: 'relative',\n            flex: 1,\n            overflow: 'hidden auto',\n            scrollbarWidth: 'none'\n        }" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectList, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectLabel]',
-                    host: {}
+                    selector: '[rdxSelectList]',
+                    host: {
+                        role: 'presentation',
+                        '[attr.data-rdx-select-list]': '""',
+                        '[style]': `{
+            position: 'relative',
+            flex: 1,
+            overflow: 'hidden auto',
+            scrollbarWidth: 'none'
+        }`,
+                        '(scroll)': 'handleScroll($event)'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class RdxSelectPopperPositionContent {
+/**
+ * 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 {
+    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: "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: 'ng-template[rdxSelectPortal]',
+                    exportAs: 'rdxSelectPortal',
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectSelectRootContext().open }))]
+                }]
+        }] });
+/**
+ * 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() {
-        this.rootContext = injectSelectRootContext();
+        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: RdxSelectPopperPositionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopperPositionContent, isStandalone: true, selector: "[rdxSelectPopperPositionContent]", host: { attributes: { "role": "listbox" }, properties: { "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
+    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: RdxSelectPopperPositionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectPopperPositionContent]',
-                    hostDirectives: [RdxPopperContent],
-                    host: {
-                        role: 'listbox',
-                        '[id]': 'rootContext.contentId'
-                    }
+                    selector: '[rdxSelectPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class RdxSelectPopperPositionWrapper {
+class RdxSelectPositioner {
     constructor() {
         /**
          * The preferred side of the anchor to render against when open.
@@ -619,22 +845,22 @@ class RdxSelectPopperPositionWrapper {
          */
         this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPopperPositionWrapper, isStandalone: true, selector: "[rdxSelectPopperPositionWrapper]", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPositioner, isStandalone: true, selector: "[rdxSelectPositioner]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "style": "{\n          'boxSizing': 'border-box',\n          '--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-select-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-select-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-select-trigger-height': 'var(--radix-popper-anchor-height)',\n        }" } }, providers: [
             {
                 provide: RDX_SELECT_POSITIONER_TOKEN,
-                useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+                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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPositioner, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectPopperPositionWrapper]',
+                    selector: '[rdxSelectPositioner]',
                     providers: [
                         {
                             provide: RDX_SELECT_POSITIONER_TOKEN,
-                            useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+                            useExisting: forwardRef(() => RdxSelectPositioner)
                         }
                     ],
                     hostDirectives: [
@@ -659,70 +885,66 @@ 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 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 }); }
-}
-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']
-                        }
-                    ]
-                }]
-        }], 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 }); }
+/**
+ * A visual divider between groups of items.
+ *
+ * @group Components
+ */
+class RdxSelectSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectSeparator, isStandalone: true, selector: "[rdxSelectSeparator]", host: { attributes: { "role": "separator", "aria-hidden": "true" } }, exportAs: ["rdxSelectSeparator"], 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: RdxSelectSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxSelectPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectSelectRootContext();
-                            return { present: context.open };
-                        })
-                    ]
+                    selector: '[rdxSelectSeparator]',
+                    exportAs: 'rdxSelectSeparator',
+                    host: {
+                        role: 'separator',
+                        'aria-hidden': 'true'
+                    }
                 }]
         }] });
 
+const attr = (value) => (value ? '' : undefined);
 class RdxSelectTrigger {
     constructor() {
         this.rootContext = injectSelectRootContext();
         this.elementRef = inject(ElementRef);
+        this.fieldRootContext = injectFieldRootContext(true);
+        /** The trigger id; Field labels and descriptions reference it for accessible relationships. */
+        this.id = input(injectId('rdx-select-trigger-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.requiredState = computed(() => Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.filledState = computed(() => !this.rootContext.isEmptyModelValue() || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
+        this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), ...(ngDevMode ? [{ debugName: "focusedState" }] : /* istanbul ignore next */ []));
+        this.describedBy = computed(() => {
+            if (!this.fieldRootContext) {
+                return undefined;
+            }
+            const ids = [
+                ...this.fieldRootContext.descriptionIds(),
+                ...(this.fieldRootContext.invalidState() ? this.fieldRootContext.errorIds() : [])
+            ];
+            return ids.length ? ids.join(' ') : undefined;
+        }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.dataAttr = attr;
         afterNextRender(() => {
             this.rootContext.onTriggerChange(this.elementRef);
+            this.fieldRootContext?.setControlId(this.id());
+            this.fieldRootContext?.setFilled(!this.rootContext.isEmptyModelValue());
         });
     }
     handleOpen() {
@@ -778,8 +1000,15 @@ class RdxSelectTrigger {
             event.preventDefault();
         }
     }
+    onFocus() {
+        this.fieldRootContext?.setFocused(true);
+    }
+    onBlur() {
+        this.fieldRootContext?.setFocused(false);
+        this.fieldRootContext?.setTouched(true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-disabled": "isDisabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-placeholder": "dataAttr(rootContext.isEmptyModelValue())", "attr.data-disabled": "dataAttr(isDisabled())", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, decorators: [{
             type: Directive,
@@ -789,17 +1018,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         role: 'combobox',
                         type: 'button',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
+                        '[attr.aria-required]': 'requiredState() ? "true" : undefined',
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '[dir]': 'rootContext.dir()',
                         '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
+                        '[attr.data-placeholder]': 'dataAttr(rootContext.isEmptyModelValue())',
+                        '[attr.data-disabled]': 'dataAttr(isDisabled())',
+                        '[attr.data-invalid]': 'dataAttr(invalidState())',
+                        '[attr.data-valid]': 'dataAttr(!invalidState())',
+                        '[attr.data-required]': 'dataAttr(requiredState())',
+                        '[attr.data-filled]': 'dataAttr(filledState())',
+                        '[attr.data-focused]': 'dataAttr(focusedState())',
                         '(click)': 'onClickHandler($event)',
                         '(pointerdown)': 'onPointerDown($event)',
                         '(pointerup)': 'onPointerUp($event)',
-                        '(keydown)': 'onKeydown($event)'
+                        '(keydown)': 'onKeydown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class RdxSelectValue {
     constructor() {
@@ -810,16 +1052,17 @@ class RdxSelectValue {
             return this.selectedLabel().length ? this.selectedLabel().join(', ') : this.placeholder();
         }, ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
         this.selectedLabel = computed(() => {
-            // eslint-disable-next-line no-useless-assignment
-            let list = [];
             const options = Array.from(this.rootContext.optionsSet());
-            const getOption = (value) => options.find((option) => valueComparator(value, option.value, this.rootContext.by()));
-            if (Array.isArray(this.rootContext.value())) {
-                list = Array(this.rootContext.value()).map((value) => getOption(value)?.textContent ?? '');
-            }
-            else {
-                list = [getOption(this.rootContext.value())?.textContent ?? ''];
-            }
+            const customLabel = this.rootContext.itemToStringLabel();
+            const labelFor = (value) => {
+                if (customLabel && value !== undefined && value !== null) {
+                    return customLabel(value);
+                }
+                const option = options.find((o) => valueComparator(value, o.value, this.rootContext.isItemEqualToValue()));
+                return option?.textContent ?? '';
+            };
+            const value = this.rootContext.value();
+            const list = Array.isArray(value) ? value.map((v) => labelFor(v)) : [labelFor(value)];
             return list.filter(Boolean);
         }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
@@ -840,60 +1083,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
-class RdxSelectViewport {
-    constructor() {
-        this.contentContext = injectSelectContentContext();
-        this.elementRef = inject((ElementRef));
-        this.prevScrollTopRef = signal(0, ...(ngDevMode ? [{ debugName: "prevScrollTopRef" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
-            this.contentContext?.onViewportChange(this.elementRef.nativeElement);
-        });
-    }
-    handleScroll(event) {
-        const viewport = event.currentTarget;
-        this.prevScrollTopRef.set(viewport.scrollTop);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectViewport, isStandalone: true, selector: "[rdxSelectViewport]", host: { attributes: { "role": "presentation" }, listeners: { "scroll": "handleScroll($event)" }, properties: { "attr.data-rdx-select-viewport": "\"\"", "style": "{\n            position: 'relative',\n            flex: 1,\n            overflow: 'hidden auto',\n            scrollbarWidth: 'none'\n        }" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectViewport, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxSelectViewport]',
-                    host: {
-                        role: 'presentation',
-                        '[attr.data-rdx-select-viewport]': '""',
-                        '[style]': `{
-            position: 'relative',
-            flex: 1,
-            overflow: 'hidden auto',
-            scrollbarWidth: 'none'
-        }`,
-                        '(scroll)': 'handleScroll($event)'
-                    }
-                }]
-        }], ctorParameters: () => [] });
-
 const _importsSelect = [
     RdxSelectRoot,
     RdxSelectPortal,
+    RdxSelectPortalMisuseGuard,
     RdxSelectTrigger,
     RdxSelectValue,
-    RdxSelectContent,
-    RdxSelectViewport,
+    RdxSelectPopup,
+    RdxSelectList,
     RdxSelectItemIndicator,
     RdxSelectItem,
     RdxSelectItemText,
-    RdxSelectLabel,
+    RdxSelectGroupLabel,
     RdxSelectGroup,
-    RdxSelectPopperPositionContent,
-    RdxSelectPopperPositionWrapper,
-    RdxSelectPortalPresence
+    RdxSelectPositioner,
+    RdxSelectIcon,
+    RdxSelectSeparator,
+    RdxSelectBackdrop
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENT_MARGIN, OPEN_KEYS, RDX_SELECT_POSITIONER_TOKEN, RdxSelectContent, RdxSelectGroup, RdxSelectItem, RdxSelectItemIndicator, RdxSelectItemText, RdxSelectLabel, RdxSelectPopperPositionContent, RdxSelectPopperPositionWrapper, RdxSelectPortal, RdxSelectPortalPresence, RdxSelectRoot, RdxSelectTrigger, RdxSelectValue, RdxSelectViewport, SELECTION_KEYS, _importsSelect, compare, focusFirst, injectSelectContentContext, injectSelectItemContext, injectSelectRootContext, provideSelectContentContext, provideSelectItemContext, 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