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

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

@@ -1,617 +1,899 @@
 import * as i0 from '@angular/core';
-import { inject, Input, Component, NgZone, ElementRef, contentChild, Directive, ChangeDetectorRef, DestroyRef, forwardRef, contentChildren, viewChild, signal, computed, EventEmitter, booleanAttribute, Output, ContentChildren, NgModule } from '@angular/core';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Subscription, defer, merge, take, switchMap, delay, Subject, startWith, pairwise } from 'rxjs';
-import { ENTER, SPACE } from '@angular/cdk/keycodes';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i1 from '@angular/cdk/overlay';
-import { Overlay, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+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 { 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 { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import * as i1$1 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';
 
-class RdxSelectValueDirective {
-    constructor() {
-        this.select = inject(RdxSelectComponent);
+const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];
+const SELECTION_KEYS = [' ', 'Enter'];
+const CONTENT_MARGIN = 10;
+function valueComparator(value, currentValue, comparator) {
+    if (value === undefined)
+        return false;
+    else if (Array.isArray(value))
+        return value.some((val) => compare(val, currentValue, comparator));
+    else
+        return compare(value, currentValue, comparator);
+}
+function compare(value, currentValue, comparator) {
+    if (value === undefined || currentValue === undefined)
+        return false;
+    if (typeof value === 'string')
+        return value === currentValue;
+    if (typeof comparator === 'function')
+        return comparator(value, currentValue);
+    if (typeof comparator === 'string')
+        return value?.[comparator] === currentValue?.[comparator];
+    return isEqual(value, currentValue);
+}
+function shouldShowPlaceholder(value) {
+    return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
+}
+function focusFirst(candidates) {
+    const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement();
+    for (const candidate of candidates) {
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+        candidate.focus();
+        if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectValueDirective, isStandalone: true, selector: "[rdxSelectValue]", inputs: { placeholder: "placeholder" }, exportAs: ["rdxSelectValue"], ngImport: i0, template: `
-        {{ select.selectionModel.isEmpty() ? placeholder : select.selected }}
-    `, isInline: true, styles: [":host{pointer-events:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValueDirective, decorators: [{
-            type: Component,
-            args: [{ selector: '[rdxSelectValue]', standalone: true, exportAs: 'rdxSelectValue', template: `
-        {{ select.selectionModel.isEmpty() ? placeholder : select.selected }}
-    `, styles: [":host{pointer-events:none}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }] } });
 
-class RdxSelectTriggerDirective {
+const context$2 = () => {
+    const context = inject(RdxSelectRoot);
+    return {
+        triggerElement: context.triggerElement,
+        valueElement: context.valueElement,
+        triggerPointerDownPosRef: context.triggerPointerDownPosRef,
+        contentId: '',
+        dir: context.dir,
+        value: context.value,
+        multiple: context.multiple,
+        by: context.by,
+        open: context.open,
+        disabled: context.disabled,
+        optionsSet: context.optionsSet,
+        onOptionAdd: (option) => {
+            const existingOption = context.getOption(option());
+            if (existingOption) {
+                context.optionsSet().delete(existingOption);
+            }
+            context.optionsSet().add(option());
+        },
+        onOptionRemove: (option) => {
+            const existingOption = context.getOption(option());
+            if (existingOption) {
+                context.optionsSet().delete(existingOption);
+            }
+        },
+        onValueChange: context.handleValueChange,
+        onTriggerChange: (node) => {
+            context.triggerElement.set(node.nativeElement);
+        },
+        onValueElementChange: (node) => {
+            context.valueElement.set(node);
+        },
+        onOpenChange: (value) => {
+            context.open.set(value);
+        }
+    };
+};
+const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext');
+class RdxSelectRoot {
     constructor() {
-        this.ngZone = inject(NgZone);
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.select = inject(RdxSelectComponent);
-        this.value = contentChild.required(RdxSelectValueDirective);
-    }
-    ngAfterViewInit() {
-        this.select.triggerSize.set([this.nativeElement.offsetWidth, this.nativeElement.offsetHeight]);
-        this.observeTriggerResize();
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = null;
-    }
-    focus() {
-        this.nativeElement.focus();
-    }
-    observeTriggerResize() {
-        if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
-            return;
+        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 });
+        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 */ []));
+        this.isEmptyModelValue = computed(() => {
+            if (this.multiple() && Array.isArray(this.value())) {
+                return Array(this.value())?.length === 0;
+            }
+            else {
+                return isNullish(this.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
+        // `option` is rendered as a child **at the same time** as itself.
+        // Because it might take a few renders for our items to gather the information to build
+        // the native `option`(s), we generate a key on the `select` to make sure Vue re-builds it
+        // each time the options change.
+        this.nativeSelectKey = computed(() => {
+            return Array.from(this.optionsSet())
+                .map((option) => option.value)
+                .join(';');
+        }, ...(ngDevMode ? [{ debugName: "nativeSelectKey" }] : /* istanbul ignore next */ []));
+        this.triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
+        this.valueElement = signal(null, ...(ngDevMode ? [{ debugName: "valueElement" }] : /* istanbul ignore next */ []));
+        this.triggerPointerDownPosRef = signal({
+            x: 0,
+            y: 0
+        }, ...(ngDevMode ? [{ debugName: "triggerPointerDownPosRef" }] : /* istanbul ignore next */ []));
+    }
+    getOption(value) {
+        return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.by()));
+    }
+    handleValueChange(value) {
+        if (this.multiple()) {
+            const array = Array.isArray(this.value()) ? [...Array(this.value())] : [];
+            const index = array.findIndex((i) => compare(i, value, this.by()));
+            index === -1 ? array.push(value) : array.splice(index, 1);
+            this.value.set([...array]);
+        }
+        else {
+            this.value.set(value);
         }
-        this.ngZone.runOutsideAngular(() => {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.select.triggerSize.set([this.nativeElement.offsetWidth, this.nativeElement.offsetHeight]);
-            });
-            this.resizeObserver.observe(this.nativeElement);
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxSelectTriggerDirective, isStandalone: true, selector: "[rdxSelectTrigger]", host: { properties: { "attr.type": "\"button\"", "attr.role": "\"combobox\"", "attr.aria-autocomplete": "\"none\"", "attr.dir": "select.dir?.value", "attr.aria-expanded": "select.open", "attr.aria-required": "select.required", "attr.disabled": "select.disabled ? \"\" : null", "attr.data-disabled": "select.disabled ? \"\" : null", "attr.data-state": "select.open ? 'open': 'closed'", "attr.data-placeholder": "value().placeholder || null" } }, queries: [{ propertyName: "value", first: true, predicate: RdxSelectValueDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectTrigger]',
-                    standalone: true,
-                    host: {
-                        '[attr.type]': '"button"',
-                        '[attr.role]': '"combobox"',
-                        '[attr.aria-autocomplete]': '"none"',
-                        '[attr.dir]': 'select.dir?.value',
-                        '[attr.aria-expanded]': 'select.open',
-                        '[attr.aria-required]': 'select.required',
-                        '[attr.disabled]': 'select.disabled ? "" : null',
-                        '[attr.data-disabled]': 'select.disabled ? "" : null',
-                        '[attr.data-state]': "select.open ? 'open': 'closed'",
-                        '[attr.data-placeholder]': 'value().placeholder || null'
-                    }
+                    selector: '[rdxSelectRoot]',
+                    exportAs: 'rdxSelectRoot',
+                    providers: [provideSelectRootContext(context$2)],
+                    hostDirectives: [RdxPopper]
                 }]
-        }], propDecorators: { value: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxSelectValueDirective), { isSignal: true }] }] } });
+        }], 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 }] }] } });
 
-let nextId$1 = 0;
-class RdxSelectComponent {
-    constructor() {
-        this.overlay = inject(Overlay);
-        this.elementRef = inject(ElementRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.trigger = contentChild.required(RdxSelectTriggerDirective);
-        this.content = contentChild.required(forwardRef(() => RdxSelectContentDirective));
-        this.items = contentChildren(forwardRef(() => RdxSelectItemDirective), { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
-        this.overlayDir = viewChild.required(CdkConnectedOverlay);
-        /**
-         * Tuple type for the trigger element size. Set by the trigger element itself.
-         * The first element is the width and the second element is the height.
-         * @returns The size of the trigger element.
-         */
-        this.triggerSize = signal([0, 0], ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
-        /**
-         * The width of the trigger element.
-         * @returns The width of the trigger element.
-         */
-        this.triggerWidth = computed(() => this.triggerSize()[0], ...(ngDevMode ? [{ debugName: "triggerWidth" }] : /* istanbul ignore next */ []));
-        /**
-         * This position config ensures that the top "start" corner of the overlay
-         * is aligned with the top "start" of the origin by default (overlapping
-         * the trigger completely). If the panel cannot fit below the trigger, it
-         * will fall back to a position above the trigger.
-         */
-        this.positions = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom'
+const context$1 = () => {
+    const context = inject(RdxSelectContent);
+    return {
+        content: context.content,
+        viewport: context.viewport,
+        isPositioned: context.isPositioned,
+        selectedItem: context.selectedItem,
+        selectedItemText: context.selectedItemText,
+        onViewportChange: (node) => {
+            context.viewport.set(node);
+        },
+        onItemLeave: () => {
+            context.content()?.focus();
+        },
+        itemRefCallback: (node, value, disabled) => {
+            const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            if (isSelectedItem || isFirstValidItem) {
+                context.selectedItem.set(node);
             }
-        ];
-        this.closeSubscription = Subscription.EMPTY;
-        /**
-         * @ignore
-         */
-        this.dir = inject(Directionality, { optional: true });
+            if (isFirstValidItem) {
+                context.firstValidItemFoundRef.set(true);
+            }
+        },
+        itemTextRefCallback: (node, value, disabled) => {
+            const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            if (isSelectedItem || isFirstValidItem) {
+                context.selectedItemText.set(node);
+            }
+        }
+    };
+};
+const [injectSelectContentContext, provideSelectContentContext] = createContext('RdxSelectContent');
+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);
+            });
+        }
+    }
+    constructor() {
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.currentElement = inject(ElementRef);
+        this.collection = inject(RdxCollectionProvider);
+        this.rootContext = injectSelectRootContext();
+        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 */ []));
         /**
-         * @ignore
+         * Event handler called when the escape key is down.
+         * Can be prevented.
          */
-        this.id = `rdx-select-${nextId$1++}`;
-        this.open = false;
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
         /**
-         * The overlay width will be set to the trigger width if this is true.
-         * Otherwise, the overlay width will be set to the width of the content.
+         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
+         * Can be prevented.
          */
-        this.matchTriggerWidth = false;
-        this.onValueChange = new EventEmitter();
-        this.onOpenChange = new EventEmitter();
-        this.optionSelectionChanges = defer(() => {
-            const content = this.content();
-            if (content.options) {
-                return merge(...content.options.map((option) => option.onSelectionChange));
-            }
-            return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
+        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.onOpenChange(false));
+        const focusScope = inject(RdxFocusScope);
+        afterNextRender(() => {
+            focusScope.unmountAutoFocus.subscribe((event) => {
+                if (event.defaultPrevented)
+                    return;
+                this.rootContext.triggerElement()?.focus({ preventScroll: true });
+                event.preventDefault();
+            });
+            focusScope.mountAutoFocus.subscribe((event) => {
+                event.preventDefault();
+            });
+            this.content.set(this.currentElement.nativeElement.firstElementChild);
         });
-    }
-    /**
-     * The controlled value of the item to expand
-     */
-    set value(value) {
-        if (this._value !== value) {
-            this._value = value;
-            this.selectValue(value);
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    get value() {
-        return this._value ?? this.defaultValue;
-    }
-    get selected() {
-        return this.selectionModel.selected[0].viewValue || null;
-    }
-    ngOnInit() {
-        this.selectionModel = new SelectionModel();
-        this.selectionModel.changed.subscribe((changes) => {
-            if (changes.added.length) {
-                this.onValueChange.emit(this.selectionModel.selected[0].value);
+        effect((onCleanup) => {
+            if (!this.content())
+                return;
+            let pointerMoveDelta = { x: 0, y: 0 };
+            const handlePointerMove = (event) => {
+                pointerMoveDelta = {
+                    x: Math.abs(Math.round(event.pageX) - (this.rootContext.triggerPointerDownPosRef()?.x ?? 0)),
+                    y: Math.abs(Math.round(event.pageY) - (this.rootContext.triggerPointerDownPosRef()?.y ?? 0))
+                };
+            };
+            const handlePointerUp = (event) => {
+                // Prevent options from being untappable on touch devices
+                if (event.pointerType === 'touch')
+                    return;
+                // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.
+                if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
+                    event.preventDefault();
+                }
+                else {
+                    // otherwise, if the event was outside the content, close.
+                    if (!this.content()?.contains(event.target))
+                        this.rootContext.onOpenChange(false);
+                }
+                document.removeEventListener('pointermove', handlePointerMove);
+                this.rootContext.triggerPointerDownPosRef.set(null);
+            };
+            if (this.rootContext.triggerPointerDownPosRef() !== null) {
+                document.addEventListener('pointermove', handlePointerMove);
+                document.addEventListener('pointerup', handlePointerUp, {
+                    capture: true,
+                    once: true
+                });
             }
-            if (changes.removed.length) {
-                changes.removed.forEach((item) => (item.selected = false));
-            }
-        });
-    }
-    ngAfterContentInit() {
-        this.selectDefaultValue();
-        this.optionSelectionChanges.subscribe((event) => {
-            this.selectionModel.clear();
-            this.selectionModel.select(event.source);
-            this.close();
-            this.trigger().focus();
-        });
-        this.content().keyManager.tabOut.subscribe(() => {
-            if (this.open)
-                this.close();
+            onCleanup(() => {
+                document.removeEventListener('pointermove', handlePointerMove);
+                document.removeEventListener('pointerup', handlePointerUp, {
+                    capture: true
+                });
+            });
         });
-        if (this.defaultOpen) {
-            this.openPanel();
-        }
-    }
-    /**
-     * Callback that is invoked when the overlay panel has been attached.
-     */
-    onAttached() {
-        this.closeSubscription = this.closingActions()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .pipe(delay(0))
-            .subscribe(() => this.close());
     }
-    onDetach() {
-        this.close();
-        this.closeSubscription.unsubscribe();
-    }
-    /** Toggles the overlay panel open or closed. */
-    toggle() {
-        if (this.open) {
-            this.close();
-        }
-        else {
-            this.openPanel();
+    focusSelectedItem() {
+        if (this.selectedItem() && this.content()) {
+            focusFirst([this.selectedItem(), this.content()]);
         }
     }
-    openPanel() {
-        this.open = true;
-        this.onOpenChange.emit(this.open);
-    }
-    close() {
-        this.open = false;
-        this.onOpenChange.emit(this.open);
-    }
-    updateActiveItem(item) {
-        this.content().keyManager.updateActiveItem(item);
-    }
-    selectDefaultValue() {
-        if (!this.defaultValue)
-            return;
-        this.selectValue(this.defaultValue);
-    }
-    selectValue(value) {
-        const option = this.content()?.options.find((option) => option.value === value);
-        if (option) {
-            option.selected = true;
-            option.highlighted = true;
-            this.selectionModel.select(option);
-            this.updateActiveItem(option);
+    handleKeyDown(event) {
+        const keyEvent = event;
+        // select should not be navigated using tab key so we prevent it
+        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);
+            }
+            setTimeout(() => focusFirst(candidateNodes));
+            event.preventDefault();
         }
     }
-    closingActions() {
-        return merge(this.overlayDir().overlayRef.outsidePointerEvents(), this.overlayDir().overlayRef.detachments());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: RdxSelectComponent, isStandalone: true, selector: "[rdxSelect]", inputs: { defaultValue: "defaultValue", name: "name", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], matchTriggerWidth: ["matchTriggerWidth", "matchTriggerWidth", booleanAttribute], value: "value" }, outputs: { onValueChange: "onValueChange", onOpenChange: "onOpenChange" }, host: { listeners: { "click": "toggle()", "keydown": "content().keyManager.onKeydown($event)" }, properties: { "style.--radix-select-trigger-width.px": "triggerSize()[0]", "style.--radix-select-trigger-height.px": "triggerSize()[1]" } }, queries: [{ propertyName: "trigger", first: true, predicate: RdxSelectTriggerDirective, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => RdxSelectContentDirective), descendants: true, isSignal: true }, { propertyName: "items", predicate: i0.forwardRef(() => RdxSelectItemDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-content select="[rdxSelectTrigger]" />
-
-        <ng-template
-            [cdkConnectedOverlayOpen]="open"
-            [cdkConnectedOverlayOrigin]="elementRef"
-            [cdkConnectedOverlayPositions]="positions"
-            [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.reposition()"
-            [cdkConnectedOverlayMinWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
-            [cdkConnectedOverlayWidth]="matchTriggerWidth ? triggerWidth() : 'auto'"
-            (attach)="onAttached()"
-            (backdropClick)="close()"
-            (detach)="onDetach()"
-            cdkConnectedOverlayLockPosition
-            cdkConnectedOverlayHasBackdrop
-            cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-            cdkConnectedOverlay
-        >
-            <ng-content select="[rdxSelectContent]" />
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] }); }
+    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),
+            provideRdxDismissableLayerConfig(() => {
+                return {
+                    disableOutsidePointerEvents: signal(true)
+                };
+            })
+        ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContent, decorators: [{
+            type: Directive,
             args: [{
-                    selector: '[rdxSelect]',
-                    template: `
-        <ng-content select="[rdxSelectTrigger]" />
-
-        <ng-template
-            [cdkConnectedOverlayOpen]="open"
-            [cdkConnectedOverlayOrigin]="elementRef"
-            [cdkConnectedOverlayPositions]="positions"
-            [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.reposition()"
-            [cdkConnectedOverlayMinWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
-            [cdkConnectedOverlayWidth]="matchTriggerWidth ? triggerWidth() : 'auto'"
-            (attach)="onAttached()"
-            (backdropClick)="close()"
-            (detach)="onDetach()"
-            cdkConnectedOverlayLockPosition
-            cdkConnectedOverlayHasBackdrop
-            cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
-            cdkConnectedOverlay
-        >
-            <ng-content select="[rdxSelectContent]" />
-        </ng-template>
-    `,
+                    selector: '[rdxSelectContent]',
+                    hostDirectives: [RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
+                    providers: [
+                        provideSelectContentContext(context$1),
+                        provideRdxDismissableLayerConfig(() => {
+                            return {
+                                disableOutsidePointerEvents: signal(true)
+                            };
+                        })
+                    ],
                     host: {
-                        '[style.--radix-select-trigger-width.px]': 'triggerSize()[0]',
-                        '[style.--radix-select-trigger-height.px]': 'triggerSize()[1]',
-                        '(click)': 'toggle()',
-                        '(keydown)': 'content().keyManager.onKeydown($event)'
-                    },
-                    imports: [OverlayModule]
+                        role: 'listbox',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[dir]': 'rootContext.dir()',
+                        '(keydown)': 'handleKeyDown($event)',
+                        '[style]': `{
+            display: 'flex',
+            flexDirection: 'column',
+            outline: 'none'
+        }`
+                    }
                 }]
-        }], propDecorators: { trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxSelectTriggerDirective), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [forwardRef(() => RdxSelectContentDirective), { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => RdxSelectItemDirective), { ...{ descendants: true }, isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], defaultValue: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], defaultOpen: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], open: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], matchTriggerWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }], onValueChange: [{
-                type: Output
-            }], onOpenChange: [{
-                type: Output
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], positioner: [{
+                type: ContentChild,
+                args: [RDX_SELECT_POSITIONER_TOKEN, { descendants: true }]
             }] } });
 
-let nextId = 0;
-class RdxSelectItemChange {
-    constructor(source) {
-        this.source = source;
+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 }); }
 }
-class RdxSelectItemDirective {
-    get dataState() {
-        return this.selected ? 'checked' : 'unchecked';
-    }
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value || this.id;
-    }
-    /** Whether the SelectItem is disabled. */
-    set disabled(value) {
-        this._disabled = value;
-    }
-    get disabled() {
-        return this._disabled;
+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'
+                    }
+                }]
+        }] });
+
+const context = () => {
+    const context = inject(RdxSelectItem);
+    return {
+        value: context.value,
+        disabled: context.disabled,
+        isSelected: context.isSelected,
+        textId: context.textId,
+        onItemTextChange: (node) => {
+            context.textValue$.set(((context.textValue$() || node.textContent) ?? '').trim());
+        }
+    };
+};
+const [injectSelectItemContext, provideSelectItemContext] = createContext('RdxSelectItemContext');
+class RdxSelectItem {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.contentContext = injectSelectContentContext();
+        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.textId = injectId('rdx-select-item-text-');
+        this.afterNextRender = afterNextRender(() => {
+            this.contentContext.itemRefCallback(this.currentElement.nativeElement, this.value(), this.disabled());
+        });
+        this.SELECT_SELECT = 'select.select';
     }
-    get viewValue() {
-        return this.textValue ?? this.nativeElement.textContent;
+    onPointerDown(event) {
+        event.currentTarget.focus({ preventScroll: true });
     }
-    constructor() {
-        this.select = inject(RdxSelectComponent);
-        this.content = inject(RdxSelectContentDirective);
-        this.onSelectionChange = new EventEmitter();
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.highlighted = false;
-        /**
-         * The unique SelectItem id.
-         * @ignore
-         */
-        this.id = `rdx-select-item-${nextId++}`;
-        this.textValue = null;
-        this.content.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
-            if (value !== this) {
-                this.highlighted = false;
+    onPointerUp(event) {
+        if (event.defaultPrevented)
+            return;
+        const eventDetail = { originalEvent: event, value: this.value() };
+        handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.rootContext.onValueChange(this.value());
+            if (!this.rootContext.multiple()) {
+                this.rootContext.onOpenChange(false);
             }
-        });
+        }, eventDetail);
     }
-    /** Gets the label to be used when determining whether the option should be focused.
-     * @ignore
-     */
-    getLabel() {
-        return this.viewValue;
+    onPointerLeave(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.currentTarget === getActiveElement())
+            this.contentContext.onItemLeave?.();
     }
-    /**
-     * `Selects the option while indicating the selection came from the user. Used to
-     * determine if the select's view -> model callback should be invoked.`
-     * @ignore
-     */
-    selectViaInteraction() {
-        if (!this.disabled) {
-            this.selected = true;
-            this.onSelectionChange.emit(new RdxSelectItemChange(this));
+    onPointerMove(event) {
+        if (event.defaultPrevented)
+            return;
+        if (this.disabled()) {
+            this.contentContext.onItemLeave?.();
         }
-    }
-    /** @ignore */
-    handleKeydown(event) {
-        if (event.keyCode === ENTER || event.keyCode === SPACE) {
-            this.selectViaInteraction();
-            // Prevent the page from scrolling down and form submits.
-            event.preventDefault();
-            event.stopPropagation();
+        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 });
         }
     }
-    /** @ignore */
-    setActiveStyles() {
-        this.highlighted = true;
-        this.nativeElement.focus({ preventScroll: true });
-    }
-    /** @ignore */
-    setInactiveStyles() {
-        this.highlighted = false;
+    handleKeyDown(event) {
+        const keyEvent = event;
+        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();
     }
-    onPointerMove() {
-        if (!this.highlighted) {
-            this.nativeElement.focus({ preventScroll: true });
-            this.select.updateActiveItem(this);
-        }
+    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);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxSelectItemDirective, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: "value", textValue: "textValue", disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "focus": "content.highlighted.next(this)", "click": "selectViaInteraction()", "keydown": "handleKeydown($event)", "pointermove": "onPointerMove()" }, properties: { "attr.role": "\"option\"", "attr.data-state": "dataState", "attr.aria-selected": "selected", "attr.data-disabled": "disabled || null", "attr.data-highlighted": "highlighted || null", "attr.tabindex": "-1" } }, exportAs: ["rdxSelectItem"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSelectItem]',
-                    standalone: true,
-                    exportAs: 'rdxSelectItem',
+                    providers: [provideSelectItemContext(context)],
+                    hostDirectives: [
+                        {
+                            directive: RdxCollectionItem,
+                            inputs: ['value']
+                        }
+                    ],
                     host: {
-                        '[attr.role]': '"option"',
-                        '[attr.data-state]': 'dataState',
-                        '[attr.aria-selected]': 'selected',
-                        '[attr.data-disabled]': 'disabled || null',
-                        '[attr.data-highlighted]': 'highlighted || null',
-                        '[attr.tabindex]': '-1',
-                        '(focus)': 'content.highlighted.next(this)',
-                        '(click)': 'selectViaInteraction()',
-                        '(keydown)': 'handleKeydown($event)',
-                        '(pointermove)': 'onPointerMove()'
+                        role: 'option',
+                        '[attr.tabindex]': 'disabled() ? undefined : -1',
+                        '[attr.aria-selected]': 'isSelected() ? "checked" : "unchecked"',
+                        '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
+                        '[attr.data-highlighted]': 'isFocused() ? "" : undefined',
+                        '(focus)': 'isFocused.set(true)',
+                        '(blur)': 'isFocused.set(false)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(keydown)': 'handleKeyDown($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], textValue: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], 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 }] }] } });
 
-class RdxSelectContentDirective {
+class RdxSelectItemIndicator {
     constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.dir = inject(Directionality, { optional: true });
-        this.select = inject(RdxSelectComponent);
-        this.highlighted = new Subject();
-        this.highlighted.pipe(startWith(null), pairwise()).subscribe(([prev, item]) => {
-            if (prev) {
-                prev.highlighted = false;
-            }
-            if (item) {
-                item.highlighted = true;
-            }
-        });
-    }
-    initKeyManager() {
-        return new ActiveDescendantKeyManager(this.options)
-            .withTypeAhead()
-            .withVerticalOrientation()
-            .withHorizontalOrientation(this.dir?.value ?? 'ltr');
-    }
-    ngAfterContentInit() {
-        this.keyManager = this.initKeyManager();
+        this.itemContext = injectSelectItemContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectContentDirective, isStandalone: true, selector: "[rdxSelectContent]", host: { listeners: { "keydown": "keyManager.onKeydown($event)" }, properties: { "attr.role": "\"listbox\"", "attr.data-state": "select.open ? 'open': 'closed'", "attr.data-side": "true", "attr.data-align": "true" } }, queries: [{ propertyName: "options", predicate: RdxSelectItemDirective, descendants: true }], exportAs: ["rdxSelectContent"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectItemIndicator, isStandalone: true, selector: "[rdxSelectItemIndicator]", host: { properties: { "attr.aria-hidden": "true", "hidden": "!itemContext.isSelected()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemIndicator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectContent]',
-                    standalone: true,
-                    exportAs: 'rdxSelectContent',
+                    selector: '[rdxSelectItemIndicator]',
                     host: {
-                        '[attr.role]': '"listbox"',
-                        '[attr.data-state]': "select.open ? 'open': 'closed'",
-                        '[attr.data-side]': 'true',
-                        '[attr.data-align]': 'true',
-                        '(keydown)': 'keyManager.onKeydown($event)'
+                        '[attr.aria-hidden]': 'true',
+                        '[hidden]': '!itemContext.isSelected()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{
-                type: ContentChildren,
-                args: [RdxSelectItemDirective, { descendants: true }]
-            }] } });
+        }] });
 
-class RdxSelectGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectGroupDirective, isStandalone: true, selector: "[rdxSelectGroup]", host: { properties: { "attr.role": "\"group\"" } }, exportAs: ["rdxSelectGroup"], ngImport: i0 }); }
+class RdxSelectItemText {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.rootContext = injectSelectRootContext();
+        this.contentContext = injectSelectContentContext();
+        this.itemContext = injectSelectItemContext();
+        this.optionProps = computed(() => {
+            return {
+                value: this.itemContext.value(),
+                disabled: this.itemContext.disabled(),
+                textContent: this.elementRef.nativeElement.textContent ?? this.itemContext.value()?.toString() ?? ''
+            };
+        }, ...(ngDevMode ? [{ debugName: "optionProps" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.itemContext.onItemTextChange(this.elementRef.nativeElement);
+            this.contentContext.itemTextRefCallback(this.elementRef.nativeElement, this.itemContext.value(), this.itemContext.disabled());
+            this.rootContext.onOptionAdd(this.optionProps);
+        });
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => {
+            this.rootContext.onOptionRemove(this.optionProps);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectItemText, isStandalone: true, selector: "[rdxSelectItemText]", host: { properties: { "id": "itemContext.textId" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemText, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectGroup]',
-                    standalone: true,
-                    exportAs: 'rdxSelectGroup',
+                    selector: '[rdxSelectItemText]',
                     host: {
-                        '[attr.role]': '"group"'
+                        '[id]': 'itemContext.textId'
                     }
                 }]
+        }], 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectLabel]',
+                    host: {}
+                }]
         }] });
 
-class RdxSelectIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectIconDirective, isStandalone: true, selector: "[rdxSelectIcon]", host: { properties: { "attr.aria-hidden": "true" } }, exportAs: ["rdxSelectIcon"], ngImport: i0 }); }
+class RdxSelectPopperPositionContent {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+    }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionContent, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectIcon]',
-                    standalone: true,
-                    exportAs: 'rdxSelectIcon',
+                    selector: '[rdxSelectPopperPositionContent]',
+                    hostDirectives: [RdxPopperContent],
                     host: {
-                        '[attr.aria-hidden]': 'true'
+                        role: 'listbox',
+                        '[id]': 'rootContext.contentId'
                     }
                 }]
         }] });
 
-class RdxSelectItemIndicatorDirective {
+class RdxSelectPopperPositionWrapper {
     constructor() {
-        this.item = inject(RdxSelectItemDirective);
+        /**
+         * The preferred side of the anchor to render against when open.
+         * Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * The distance in pixels from the anchor.
+         */
+        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The preferred alignment against the anchor. May change when collisions occur.
+         */
+        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /**
+         * An offset in pixels from the `start` or `end` alignment options.
+         */
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The padding between the arrow and the edges of the content.
+         * If your content has border-radius, this will prevent it from overflowing the corners.
+         */
+        this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
+         */
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The element used as the collision boundary.
+         * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
+        /**
+         * The distance in pixels from the boundary edges where collision detection should occur.
+         * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
+         */
+        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+        /**
+         * The sticky behavior on the `align` axis.
+         * - `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary
+         * - `always` will keep the content in the boundary regardless.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the content when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether to update the position of the floating element on every animation frame if required.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the element is placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectItemIndicatorDirective, isStandalone: true, selector: "[rdxSelectItemIndicator]", host: { properties: { "attr.aria-hidden": "true", "style.display": "item.selected ? \"\" : \"none\"" } }, exportAs: ["rdxSelectItemIndicator"], ngImport: i0 }); }
+    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: [
+            {
+                provide: RDX_SELECT_POSITIONER_TOKEN,
+                useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+            }
+        ], 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: RdxSelectItemIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionWrapper, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectItemIndicator]',
-                    standalone: true,
-                    exportAs: 'rdxSelectItemIndicator',
+                    selector: '[rdxSelectPopperPositionWrapper]',
+                    providers: [
+                        {
+                            provide: RDX_SELECT_POSITIONER_TOKEN,
+                            useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+                        }
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
                     host: {
-                        '[attr.aria-hidden]': 'true',
-                        '[style.display]': 'item.selected ? "" : "none"'
+                        // re-namespace exposed content custom properties
+                        '[style]': `{
+          'boxSizing': 'border-box',
+          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
+          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',
+          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',
+          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',
+          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',
+        }`
                     }
                 }]
-        }] });
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
 
-class RdxSelectLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectLabelDirective, isStandalone: true, selector: "[rdxSelectLabel]", exportAs: ["rdxSelectLabel"], ngImport: i0 }); }
+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: RdxSelectLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectLabel]',
-                    standalone: true,
-                    exportAs: 'rdxSelectLabel'
+                    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxSelectPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectSelectRootContext();
+                            return { present: context.open };
+                        })
+                    ]
                 }]
         }] });
 
-class RdxSelectSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectSeparatorDirective, isStandalone: true, selector: "[rdxSelectSeparator]", host: { properties: { "attr.aria-hidden": "true" } }, exportAs: ["rdxSelectSeparator"], ngImport: i0 }); }
+class RdxSelectTrigger {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.elementRef = inject(ElementRef);
+        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 */ []));
+        afterNextRender(() => {
+            this.rootContext.onTriggerChange(this.elementRef);
+        });
+    }
+    handleOpen() {
+        if (!this.isDisabled()) {
+            this.rootContext.onOpenChange(true);
+        }
+    }
+    handlePointerOpen(event) {
+        const pointerEvent = event;
+        this.handleOpen();
+        this.rootContext.triggerPointerDownPosRef.set({
+            x: Math.round(pointerEvent.pageX),
+            y: Math.round(pointerEvent.pageY)
+        });
+    }
+    onClickHandler(event) {
+        // Whilst browsers generally have no issue focusing the trigger when clicking
+        // on a label, Safari seems to struggle with the fact that there's no `onClick`.
+        // We force `focus` in this case. Note: this doesn't create any other side-effect
+        // because we are preventing default in `onPointerDown` so effectively
+        // this only runs for a label 'click'
+        event?.currentTarget?.focus();
+    }
+    onPointerDown(event) {
+        const pointerEvent = event;
+        if (pointerEvent.pointerType === 'touch')
+            return event.preventDefault();
+        // prevent implicit pointer capture
+        // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
+        const target = event.target;
+        if (target.hasPointerCapture(pointerEvent.pointerId)) {
+            target.releasePointerCapture(pointerEvent.pointerId);
+        }
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click)
+        if (pointerEvent.button === 0 && pointerEvent.ctrlKey === false) {
+            this.handlePointerOpen(event);
+            // prevent trigger from stealing focus from the active item after opening.
+            event.preventDefault();
+        }
+    }
+    onPointerUp(event) {
+        const pointerEvent = event;
+        event.preventDefault();
+        // Only open on pointer up when using touch devices
+        if (pointerEvent.pointerType === 'touch')
+            this.handlePointerOpen(event);
+    }
+    onKeydown(event) {
+        const keyEvent = event;
+        if (OPEN_KEYS.includes(keyEvent.key)) {
+            this.handleOpen();
+            event.preventDefault();
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxSelectTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
+                    host: {
+                        role: 'combobox',
+                        type: 'button',
+                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '[dir]': 'rootContext.dir()',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '(click)': 'onClickHandler($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class RdxSelectValue {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.elementRef = inject(ElementRef);
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.slotText = computed(() => {
+            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 ?? ''];
+            }
+            return list.filter(Boolean);
+        }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.rootContext.valueElement.set(this.elementRef.nativeElement);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectValue, isStandalone: true, selector: "span[rdxSelectValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.pointer-events": "\"none\"" } }, exportAs: ["rdxSelectedValue"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValue, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSelectSeparator]',
-                    standalone: true,
-                    exportAs: 'rdxSelectSeparator',
+                    selector: 'span[rdxSelectValue]',
+                    exportAs: 'rdxSelectedValue',
                     host: {
-                        '[attr.aria-hidden]': 'true'
+                        '[style.pointer-events]': '"none"'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
-const _imports = [
-    RdxSelectContentDirective,
-    RdxSelectGroupDirective,
-    RdxSelectItemDirective,
-    RdxSelectItemIndicatorDirective,
-    RdxSelectLabelDirective,
-    RdxSelectComponent,
-    RdxSelectSeparatorDirective,
-    RdxSelectTriggerDirective,
-    RdxSelectValueDirective,
-    RdxSelectIconDirective
-];
-class RdxSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectModule, imports: [RdxSelectContentDirective,
-            RdxSelectGroupDirective,
-            RdxSelectItemDirective,
-            RdxSelectItemIndicatorDirective,
-            RdxSelectLabelDirective,
-            RdxSelectComponent,
-            RdxSelectSeparatorDirective,
-            RdxSelectTriggerDirective,
-            RdxSelectValueDirective,
-            RdxSelectIconDirective], exports: [RdxSelectContentDirective,
-            RdxSelectGroupDirective,
-            RdxSelectItemDirective,
-            RdxSelectItemIndicatorDirective,
-            RdxSelectLabelDirective,
-            RdxSelectComponent,
-            RdxSelectSeparatorDirective,
-            RdxSelectTriggerDirective,
-            RdxSelectValueDirective,
-            RdxSelectIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectModule, imports: [RdxSelectComponent] }); }
+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: RdxSelectModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectViewport, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    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,
+    RdxSelectTrigger,
+    RdxSelectValue,
+    RdxSelectContent,
+    RdxSelectViewport,
+    RdxSelectItemIndicator,
+    RdxSelectItem,
+    RdxSelectItemText,
+    RdxSelectLabel,
+    RdxSelectGroup,
+    RdxSelectPopperPositionContent,
+    RdxSelectPopperPositionWrapper,
+    RdxSelectPortalPresence
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxSelectComponent, RdxSelectContentDirective, RdxSelectGroupDirective, RdxSelectIconDirective, RdxSelectItemChange, RdxSelectItemDirective, RdxSelectItemIndicatorDirective, RdxSelectLabelDirective, RdxSelectModule, RdxSelectSeparatorDirective, RdxSelectTriggerDirective, RdxSelectValueDirective };
+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 };
 //# sourceMappingURL=radix-ng-primitives-select.mjs.map