@radix-ng/primitives 0.32.4 → 0.33.1

package/fesm2022/radix-ng-primitives-navigation-menu.mjs

@@ -0,0 +1,1771 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, ElementRef, input, contentChild, signal, Directive, NgZone, TemplateRef, booleanAttribute, Renderer2, computed, effect, untracked, runInInjectionContext, contentChildren, forwardRef, numberAttribute, output, ViewContainerRef, DestroyRef, NgModule } from '@angular/core';
+import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
+import { injectDocument, ESCAPE, ENTER, SPACE, TAB, injectWindow, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/roving-focus';
+import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, map, debounce, timer, tap } from 'rxjs';
+import { usePresence } from '@radix-ng/primitives/presence';
+
+class RdxNavigationMenuFocusProxyComponent {
+    constructor() {
+        this.triggerElement = null;
+        this.contentElement = null;
+        this.proxyFocus = new EventEmitter();
+    }
+    onFocus(event) {
+        const prevFocusedElement = event.relatedTarget;
+        const wasTriggerFocused = prevFocusedElement === this.triggerElement;
+        const wasFocusFromContent = this.contentElement ? this.contentElement.contains(prevFocusedElement) : false;
+        if (wasTriggerFocused || !wasFocusFromContent) {
+            this.proxyFocus.emit(wasTriggerFocused ? 'start' : 'end');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RdxNavigationMenuFocusProxyComponent, isStandalone: true, selector: "rdx-navigation-menu-focus-proxy", inputs: { triggerElement: "triggerElement", contentElement: "contentElement" }, outputs: { proxyFocus: "proxyFocus" }, ngImport: i0, template: `
+        <span
+            [attr.tabindex]="0"
+            [attr.aria-hidden]="true"
+            (focus)="onFocus($event)"
+            rdxVisuallyHidden
+            feature="focusable"
+        ></span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: RdxVisuallyHiddenDirective, selector: "[rdxVisuallyHidden]", inputs: ["feature"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-navigation-menu-focus-proxy',
+                    template: `
+        <span
+            [attr.tabindex]="0"
+            [attr.aria-hidden]="true"
+            (focus)="onFocus($event)"
+            rdxVisuallyHidden
+            feature="focusable"
+        ></span>
+    `,
+                    imports: [RdxVisuallyHiddenDirective]
+                }]
+        }], propDecorators: { triggerElement: [{
+                type: Input
+            }], contentElement: [{
+                type: Input
+            }], proxyFocus: [{
+                type: Output
+            }] } });
+class RdxNavigationMenuAriaOwnsComponent {
+    constructor() {
+        this.contentId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RdxNavigationMenuAriaOwnsComponent, isStandalone: true, selector: "rdx-navigation-menu-aria-owns", inputs: { contentId: "contentId" }, ngImport: i0, template: `
+        <span [attr.aria-owns]="contentId" rdxVisuallyHidden feature="fully-hidden"></span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: RdxVisuallyHiddenDirective, selector: "[rdxVisuallyHidden]", inputs: ["feature"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-navigation-menu-aria-owns',
+                    template: `
+        <span [attr.aria-owns]="contentId" rdxVisuallyHidden feature="fully-hidden"></span>
+    `,
+                    imports: [RdxVisuallyHiddenDirective]
+                }]
+        }], propDecorators: { contentId: [{
+                type: Input
+            }] } });
+
+const RDX_NAVIGATION_MENU_TOKEN = new InjectionToken('RdxNavigationMenuToken');
+function injectNavigationMenu() {
+    return inject(RDX_NAVIGATION_MENU_TOKEN);
+}
+function isRootNavigationMenu(context) {
+    return context.isRootMenu;
+}
+function provideNavigationMenuContext(provider) {
+    return {
+        provide: RDX_NAVIGATION_MENU_TOKEN,
+        useExisting: provider
+    };
+}
+
+var RdxNavigationMenuAnimationStatus;
+(function (RdxNavigationMenuAnimationStatus) {
+    RdxNavigationMenuAnimationStatus["OPEN_STARTED"] = "open_started";
+    RdxNavigationMenuAnimationStatus["OPEN_ENDED"] = "open_ended";
+    RdxNavigationMenuAnimationStatus["CLOSED_STARTED"] = "closed_started";
+    RdxNavigationMenuAnimationStatus["CLOSED_ENDED"] = "closed_ended";
+})(RdxNavigationMenuAnimationStatus || (RdxNavigationMenuAnimationStatus = {}));
+/**
+ * A stub class solely used to query a single type of focusable element in the navigation menu.
+ */
+class RdxNavigationMenuFocusableOption {
+    focus() {
+        throw new Error('Method not implemented.');
+    }
+}
+
+const ROOT_CONTENT_DISMISS$1 = 'navigationMenu.rootContentDismiss';
+/**
+ * Generate a unique ID
+ */
+function generateId() {
+    return Math.random().toString(36).substring(2, 11);
+}
+/**
+ * Get the open state for data-state attribute
+ */
+function getOpenStateLabel(open) {
+    return open ? 'open' : 'closed';
+}
+/**
+ * Create a trigger ID from base ID and value
+ */
+function makeTriggerId(baseId, value) {
+    return `${baseId}-trigger-${value}`;
+}
+/**
+ * Create a content ID from base ID and value
+ */
+function makeContentId(baseId, value) {
+    return `${baseId}-content-${value}`;
+}
+/**
+ * Get the motion attribute for animations
+ */
+function getMotionAttribute(currentValue, previousValue, itemValue, itemValues, dir) {
+    // reverse values in RTL
+    const values = dir === 'rtl' ? [...itemValues].reverse() : itemValues;
+    const currentIndex = currentValue !== null ? values.indexOf(currentValue) : -1;
+    const prevIndex = previousValue !== null ? values.indexOf(previousValue) : -1;
+    const isSelected = itemValue === currentValue;
+    const wasSelected = itemValue === previousValue && previousValue !== null;
+    // Preserve motion attribute for items not directly involved in the transition
+    // (This matches React's behaviour, using a ref/signal might be needed
+    // in the component using this function to fully replicate React's prevMotionAttributeRef)
+    // For now, returning null if not involved, as per the original code's intent here.
+    if (!isSelected && !wasSelected) {
+        return null;
+    }
+    // handle transitions between items
+    if (currentIndex !== -1 && prevIndex !== -1) {
+        // if moving to this item (isSelected)
+        if (isSelected) {
+            return currentIndex > prevIndex ? 'from-end' : 'from-start';
+        }
+        // if moving away from this item (wasSelected)
+        if (wasSelected) {
+            return currentIndex > prevIndex ? 'to-start' : 'to-end';
+        }
+    }
+    // handle initial open (prevIndex is -1, currentIndex is valid)
+    if (isSelected && prevIndex === -1) {
+        return null;
+    }
+    // handle closing entirely (currentIndex is -1, prevIndex is valid)
+    if (wasSelected && currentIndex === -1) {
+        return null;
+    }
+    // fallback if none of the above conditions met (should ideally not happen with clear states)
+    return null;
+}
+/**
+ * Focus the first element in a list of candidates
+ * @param candidates Array of elements that can receive focus
+ * @param preventScroll Whether to prevent scrolling when focusing
+ * @param activateKeyboardNav Whether to dispatch a dummy keydown event to activate keyboard navigation handlers
+ * @returns Whether focus was successfully moved
+ */
+function focusFirst(candidates, preventScroll = false, activateKeyboardNav = true) {
+    const prevFocusedElement = document.activeElement;
+    // sort candidates by tabindex to ensure proper order
+    const sortedCandidates = [...candidates].sort((a, b) => {
+        const aIndex = a.tabIndex || 0;
+        const bIndex = b.tabIndex || 0;
+        return aIndex - bIndex;
+    });
+    const success = sortedCandidates.some((candidate) => {
+        // if focus is already where we want it, do nothing
+        if (candidate === prevFocusedElement)
+            return true;
+        try {
+            candidate.focus({ preventScroll });
+            return document.activeElement !== prevFocusedElement;
+        }
+        catch (e) {
+            console.error('Error focusing element:', e);
+            return false;
+        }
+    });
+    // if focus was moved successfully and we want to activate keyboard navigation,
+    // dispatch a dummy keypress to ensure keyboard handlers are activated
+    if (success && activateKeyboardNav && document.activeElement !== prevFocusedElement) {
+        try {
+            // dispatch a no-op keydown event to activate any keyboard handlers
+            document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {
+                bubbles: true,
+                cancelable: true,
+                key: 'Tab',
+                code: 'Tab'
+            }));
+        }
+        catch (e) {
+            console.error('Error dispatching keyboard event:', e);
+        }
+    }
+    return success;
+}
+/**
+ * Get all tabbable candidates in a container
+ */
+function getTabbableCandidates(container) {
+    if (!container || !container.querySelectorAll)
+        return [];
+    const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), ' +
+        'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), ' +
+        '[contenteditable="true"]:not([tabindex="-1"])';
+    // use querySelector for better browser support
+    const elements = Array.from(container.querySelectorAll(TABBABLE_SELECTOR));
+    // filter out elements that are hidden, have display:none, etc.
+    return elements.filter((element) => {
+        if (element.tabIndex < 0)
+            return false;
+        if (element.hasAttribute('disabled'))
+            return false;
+        if (element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true')
+            return false;
+        // Check if element or any parent is hidden
+        let current = element;
+        while (current) {
+            const style = window.getComputedStyle(current);
+            if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+                return false;
+            }
+            current = current.parentElement;
+        }
+        return true;
+    });
+}
+/**
+ * Remove elements from tab order and return a function to restore them
+ */
+function removeFromTabOrder(candidates) {
+    const originalValues = new Map();
+    candidates.forEach((candidate) => {
+        // Store original tabindex
+        originalValues.set(candidate, candidate.getAttribute('tabindex'));
+        // Set to -1 to remove from tab order
+        candidate.setAttribute('tabindex', '-1');
+    });
+    // Return restore function
+    return () => {
+        candidates.forEach((candidate) => {
+            const originalValue = originalValues.get(candidate);
+            if (originalValue == null) {
+                candidate.removeAttribute('tabindex');
+            }
+            else {
+                candidate.setAttribute('tabindex', originalValue);
+            }
+        });
+    };
+}
+/**
+ * Wrap array around itself at given start index
+ */
+function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+
+class RdxNavigationMenuItemDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.context = injectNavigationMenu();
+        this.value = input('');
+        /**
+         * @ignore
+         */
+        this.triggerOrLink = contentChild(RdxNavigationMenuFocusableOption);
+        this.triggerRef = signal(null);
+        this.contentRef = signal(null);
+        this.focusProxyRef = signal(null);
+        this.wasEscapeCloseRef = signal(false);
+        this._restoreContentTabOrderRef = signal(null);
+    }
+    get restoreContentTabOrderRef() {
+        return this._restoreContentTabOrderRef;
+    }
+    /**
+     * Handle keyboard entry into content from trigger
+     */
+    onEntryKeyDown() {
+        // Check if we're using a viewport in a root menu
+        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
+            const viewport = this.context.viewport();
+            if (viewport) {
+                // find tabbable elements in the viewport
+                const candidates = getTabbableCandidates(viewport);
+                if (candidates.length) {
+                    this.ensureTabOrder();
+                    // focus the first element
+                    focusFirst(candidates);
+                    return;
+                }
+            }
+        }
+        // fallback to content if no viewport or no tabbable elements in viewport
+        if (this.contentRef()) {
+            // restore tab order if needed
+            const restoreFn = this._restoreContentTabOrderRef();
+            if (restoreFn)
+                restoreFn();
+            // find and focus first tabbable element
+            const candidates = getTabbableCandidates(this.contentRef());
+            if (candidates.length) {
+                focusFirst(candidates);
+            }
+        }
+    }
+    focus() {
+        this.triggerOrLink()?.focus();
+    }
+    /**
+     * Ensure elements are in the tab order by restoring any previously removed tabindex values
+     */
+    ensureTabOrder() {
+        const restoreFn = this._restoreContentTabOrderRef();
+        if (restoreFn) {
+            restoreFn();
+            this._restoreContentTabOrderRef.set(null);
+        }
+    }
+    /**
+     * Handle focus coming from the focus proxy element
+     * @param side Which side the focus is coming from (start = from trigger, end = from after content)
+     */
+    onFocusProxyEnter(side = 'start') {
+        // check for viewport first
+        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
+            const viewport = this.context.viewport();
+            if (viewport) {
+                const candidates = getTabbableCandidates(viewport);
+                if (candidates.length) {
+                    this.ensureTabOrder();
+                    // focus first or last element depending on direction
+                    focusFirst(side === 'start' ? candidates : [...candidates].reverse());
+                    return;
+                }
+            }
+        }
+        // fallback to content
+        if (this.contentRef()) {
+            // restore tab order if needed
+            const restoreFn = this._restoreContentTabOrderRef();
+            if (restoreFn)
+                restoreFn();
+            // find and focus appropriate element based on direction
+            const candidates = getTabbableCandidates(this.contentRef());
+            if (candidates.length) {
+                // Focus first or last element depending on which direction we're coming from
+                focusFirst(side === 'start' ? candidates : [...candidates].reverse());
+            }
+        }
+    }
+    /**
+     * Handle focus moving outside of the content
+     * Remove elements from tab order when not focused
+     */
+    onContentFocusOutside() {
+        // get all tabbable elements from both viewport and content
+        let allCandidates = [];
+        // check viewport first
+        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
+            const viewport = this.context.viewport();
+            if (viewport) {
+                allCandidates = getTabbableCandidates(viewport);
+            }
+        }
+        // ... also check direct content
+        if (this.contentRef()) {
+            const contentCandidates = getTabbableCandidates(this.contentRef());
+            allCandidates = [...allCandidates, ...contentCandidates];
+        }
+        // remove from tab order and store restore function
+        if (allCandidates.length) {
+            this._restoreContentTabOrderRef.set(removeFromTabOrder(allCandidates));
+        }
+    }
+    /**
+     * Handle content being closed from root menu
+     */
+    onRootContentClose() {
+        this.onContentFocusOutside();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.4", type: RdxNavigationMenuItemDirective, isStandalone: true, selector: "[rdxNavigationMenuItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.value": "value()" } }, queries: [{ propertyName: "triggerOrLink", first: true, predicate: RdxNavigationMenuFocusableOption, descendants: true, isSignal: true }], exportAs: ["rdxNavigationMenuItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuItem]',
+                    host: {
+                        '[attr.value]': 'value()'
+                    },
+                    exportAs: 'rdxNavigationMenuItem'
+                }]
+        }] });
+
+class RdxNavigationMenuContentDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.template = inject(TemplateRef);
+        this.document = injectDocument();
+        this.item = inject(RdxNavigationMenuItemDirective);
+        this.context = injectNavigationMenu();
+        /**
+         * Used to keep the content rendered and available in the DOM, even when closed.
+         * Useful for animations or SEO.
+         * @default false
+         */
+        this.forceMount = input(false, { transform: booleanAttribute });
+        /** @ignore */
+        this.contentId = makeContentId(this.context.baseId, this.item.value());
+        /** @ignore */
+        this.triggerId = makeTriggerId(this.context.baseId, this.item.value());
+        this.escapeHandler = null;
+    }
+    set rdxNavigationMenuContent(value) {
+        // structural directive requires this input even if unused
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.item.contentRef.set(this.elementRef.nativeElement);
+        // register template with viewport in root menu via context
+        if (isRootNavigationMenu(this.context) && this.context.onViewportContentChange) {
+            this.context.onViewportContentChange(this.item.value(), {
+                ref: this.elementRef,
+                templateRef: this.template,
+                forceMount: this.forceMount(),
+                value: this.item.value(),
+                getMotionAttribute: this.getMotionAttribute.bind(this),
+                additionalAttrs: {
+                    id: this.contentId,
+                    'aria-labelledby': this.triggerId,
+                    role: 'menu'
+                }
+            });
+        }
+        // add Escape key handler
+        this.escapeHandler = (event) => {
+            if (event.key === ESCAPE && this.context.value() === this.item.value()) {
+                // mark that this close was triggered by Escape
+                this.item.wasEscapeCloseRef.set(true);
+                // close the content
+                if (this.context.onItemDismiss) {
+                    this.context.onItemDismiss();
+                }
+                // refocus the trigger
+                setTimeout(() => {
+                    const trigger = this.item.triggerRef();
+                    if (trigger)
+                        trigger.focus();
+                }, 0);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.ngZone.runOutsideAngular(() => {
+            if (this.escapeHandler) {
+                this.document.addEventListener('keydown', this.escapeHandler);
+            }
+        });
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        // unregister from viewport
+        if (isRootNavigationMenu(this.context) && this.context.onViewportContentRemove) {
+            this.context.onViewportContentRemove(this.item.value());
+        }
+        // remove escape key handler
+        if (this.escapeHandler) {
+            this.document.removeEventListener('keydown', this.escapeHandler);
+            this.escapeHandler = null;
+        }
+    }
+    /** @ignore - Compute motion attribute for animations */
+    getMotionAttribute() {
+        if (!isRootNavigationMenu(this.context))
+            return null;
+        const itemValues = Array.from(this.context.viewportContent?.() ?? new Map()).map(([value]) => value);
+        return getMotionAttribute(this.context.value(), this.context.previousValue(), this.item.value(), itemValues, this.context.dir);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuContentDirective, isStandalone: true, selector: "[rdxNavigationMenuContent]", inputs: { rdxNavigationMenuContent: { classPropertyName: "rdxNavigationMenuContent", publicName: "rdxNavigationMenuContent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuContent]'
+                }]
+        }], propDecorators: { rdxNavigationMenuContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class RdxNavigationMenuIndicatorDirective {
+    constructor() {
+        this.context = injectNavigationMenu();
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        /**
+         * Used to keep the indicator rendered and available in the DOM, even when hidden.
+         * Useful for animations.
+         * @default false
+         */
+        this.forceMount = input(false, { transform: booleanAttribute });
+        /** @ignore */
+        this._position = signal(null);
+        /** @ignore */
+        this._activeTrigger = signal(null);
+        /** @ignore */
+        this._resizeObserver = new ResizeObserver(() => this.updatePosition());
+        this.isVisible = computed(() => Boolean(this.context.value() || this.forceMount()));
+        // set up effect for tracking active trigger and position
+        effect(() => {
+            // this effect runs when the current value changes
+            const value = this.context.value();
+            untracked(() => {
+                if (value && isRootNavigationMenu(this.context)) {
+                    this.findAndSetActiveTrigger();
+                }
+            });
+        });
+        // initialize observers for position tracking
+        runInInjectionContext(this.context, () => {
+            if (isRootNavigationMenu(this.context) && this.context.indicatorTrack) {
+                const track = this.context.indicatorTrack();
+                if (track) {
+                    // observe size changes on the track
+                    this._resizeObserver.observe(track);
+                }
+                // initial position update if menu is open
+                if (this.context.value()) {
+                    setTimeout(() => this.findAndSetActiveTrigger(), 0);
+                }
+            }
+        });
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._resizeObserver.disconnect();
+    }
+    /** @ignore */
+    findAndSetActiveTrigger() {
+        if (!isRootNavigationMenu(this.context) || !this.context.indicatorTrack)
+            return;
+        const track = this.context.indicatorTrack();
+        if (!track)
+            return;
+        // find all triggers within the track
+        const triggers = Array.from(track.querySelectorAll('[rdxNavigationMenuTrigger]'));
+        // find the active trigger based on the current menu value
+        const activeTrigger = triggers.find((trigger) => {
+            const item = trigger.closest('[rdxNavigationMenuItem]');
+            if (!item)
+                return false;
+            const value = item.getAttribute('value');
+            return value === this.context.value();
+        });
+        if (activeTrigger && activeTrigger !== this._activeTrigger()) {
+            this._activeTrigger.set(activeTrigger);
+            this.updatePosition();
+        }
+    }
+    /** @ignore */
+    updatePosition() {
+        const trigger = this._activeTrigger();
+        if (!trigger)
+            return;
+        const isHorizontal = this.context.orientation === 'horizontal';
+        // calculate new position
+        const newPosition = {
+            size: isHorizontal ? trigger.offsetWidth : trigger.offsetHeight,
+            offset: isHorizontal ? trigger.offsetLeft : trigger.offsetTop
+        };
+        // only update if position has changed
+        if (JSON.stringify(newPosition) !== JSON.stringify(this._position())) {
+            this._position.set(newPosition);
+            // apply position styles
+            const styles = isHorizontal
+                ? {
+                    position: 'absolute',
+                    left: '0',
+                    width: `${newPosition.size}px`,
+                    transform: `translateX(${newPosition.offset}px)`
+                }
+                : {
+                    position: 'absolute',
+                    top: '0',
+                    height: `${newPosition.size}px`,
+                    transform: `translateY(${newPosition.offset}px)`
+                };
+            Object.entries(styles).forEach(([key, value]) => {
+                this.renderer.setStyle(this.elementRef.nativeElement, key, value);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuIndicatorDirective, isStandalone: true, selector: "[rdxNavigationMenuIndicator]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "isVisible() ? \"visible\" : \"hidden\"", "attr.data-orientation": "context.orientation", "style.display": "isVisible() ? null : \"none\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuIndicator]',
+                    host: {
+                        '[attr.data-state]': 'isVisible() ? "visible" : "hidden"',
+                        '[attr.data-orientation]': 'context.orientation',
+                        '[style.display]': 'isVisible() ? null : "none"',
+                        'aria-hidden': 'true'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const LINK_SELECT = 'navigationMenu.linkSelect';
+const ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
+class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
+    constructor() {
+        super(...arguments);
+        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
+        this.uniqueId = generateId();
+        this.active = input(false, { transform: booleanAttribute });
+        this.onSelect = input();
+        this.elementRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.rovingFocusItem.tabStopId = this.elementRef.nativeElement.id || `link-${this.uniqueId}`;
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    onClick(event) {
+        const target = event.target;
+        // dispatch link select event
+        const linkSelectEvent = new CustomEvent(LINK_SELECT, {
+            bubbles: true,
+            cancelable: true
+        });
+        // add one-time listener for onSelect handler
+        const onSelect = this.onSelect();
+        if (onSelect) {
+            target.addEventListener(LINK_SELECT, onSelect, { once: true });
+        }
+        // dispatch event
+        target.dispatchEvent(linkSelectEvent);
+        // if not prevented and not meta key, dismiss content
+        if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
+            const dismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
+                bubbles: true,
+                cancelable: true
+            });
+            target.dispatchEvent(dismissEvent);
+        }
+    }
+    onKeydown(event) {
+        // activate link on Enter or Space
+        if (event.key === ENTER || event.key === SPACE) {
+            // prevent default behavior like scrolling (Space) or form submission (Enter) BEFORE simulating the click.
+            event.preventDefault();
+            // simulate a click event on the link element itself
+            const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+            this.elementRef.nativeElement.dispatchEvent(clickEvent);
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuLinkDirective, isStandalone: true, selector: "[rdxNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, onSelect: { classPropertyName: "onSelect", publicName: "onSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-active": "active() ? \"\" : undefined", "attr.aria-current": "active() ? \"page\" : undefined" } }, providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuLinkDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuLink]',
+                    hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ['focusable'] }],
+                    host: {
+                        '[attr.data-active]': 'active() ? "" : undefined',
+                        '[attr.aria-current]': 'active() ? "page" : undefined',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    },
+                    providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuLinkDirective }]
+                }]
+        }] });
+
+class RdxNavigationMenuListDirective {
+    constructor() {
+        this.context = injectNavigationMenu();
+        this.elementRef = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
+        /**
+         * @private
+         * @ignore
+         */
+        this.items = contentChildren(forwardRef(() => RdxNavigationMenuItemDirective), { descendants: true });
+    }
+    /**
+     * @ignore
+     */
+    ngAfterContentInit() {
+        const items = this.items();
+        this.keyManager = new FocusKeyManager(items);
+        if (this.context.orientation === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.context.dir || 'ltr');
+        }
+        else {
+            this.keyManager.withVerticalOrientation();
+        }
+    }
+    /**
+     * @ignore
+     */
+    ngAfterViewInit() {
+        this.rovingFocusGroup.orientation = this.context.orientation;
+        this.rovingFocusGroup.dir = this.context.dir;
+        // looping typically only applies to the root menu bar
+        if (isRootNavigationMenu(this.context)) {
+            this.rovingFocusGroup.loop = this.context.loop ?? false;
+        }
+        else {
+            this.rovingFocusGroup.loop = false;
+        }
+        if (isRootNavigationMenu(this.context) && this.context.onIndicatorTrackChange) {
+            const listElement = this.elementRef.nativeElement;
+            const parent = listElement.parentNode;
+            // ensure parent exists and list hasn't already been wrapped
+            if (parent && !listElement.parentElement?.hasAttribute('data-radix-navigation-menu-list-wrapper')) {
+                // create a wrapper div with relative positioning
+                const wrapper = this.renderer.createElement('div');
+                this.renderer.setAttribute(wrapper, 'data-radix-navigation-menu-list-wrapper', ''); // Add marker
+                this.renderer.setStyle(wrapper, 'position', 'relative');
+                // insert the wrapper before the list element in the parent
+                this.renderer.insertBefore(parent, wrapper, listElement);
+                // move the list element inside the new wrapper
+                this.renderer.appendChild(wrapper, listElement);
+                // register the wrapper element as the track for the indicator positioning
+                this.context.onIndicatorTrackChange(wrapper);
+            }
+            else if (listElement.parentElement?.hasAttribute('data-radix-navigation-menu-list-wrapper')) {
+                // if wrapper somehow already exists, ensure context has the correct reference
+                this.context.onIndicatorTrackChange(listElement.parentElement);
+            }
+        }
+    }
+    /**
+     * @ignore
+     */
+    onKeydown(event) {
+        if (!this.keyManager.activeItem) {
+            this.keyManager.setFirstItemActive();
+        }
+        if (event.key === TAB && event.shiftKey) {
+            if (this.keyManager.activeItemIndex === 0)
+                return;
+            this.keyManager.setPreviousItemActive();
+            event.preventDefault();
+        }
+        else if (event.key === TAB) {
+            const items = this.items();
+            if (this.keyManager.activeItemIndex === items.length - 1) {
+                return;
+            }
+            this.keyManager.setNextItemActive();
+            event.preventDefault();
+        }
+        else {
+            this.keyManager.onKeydown(event);
+        }
+    }
+    /**
+     * @ignore
+     */
+    setActiveItem(item) {
+        this.keyManager.setActiveItem(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.4", type: RdxNavigationMenuListDirective, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { attributes: { "role": "menubar" }, listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => RdxNavigationMenuItemDirective), descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuList]',
+                    hostDirectives: [RdxRovingFocusGroupDirective],
+                    host: {
+                        role: 'menubar',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }] });
+
+// define action types for clearer intent
+var RdxNavigationMenuAction;
+(function (RdxNavigationMenuAction) {
+    RdxNavigationMenuAction["OPEN"] = "open";
+    RdxNavigationMenuAction["CLOSE"] = "close";
+})(RdxNavigationMenuAction || (RdxNavigationMenuAction = {}));
+class RdxNavigationMenuDirective {
+    // State
+    #value;
+    #previousValue;
+    #indicatorTrack;
+    #viewport;
+    #viewportContent;
+    #rootNavigationMenu;
+    #userDismissedByClick;
+    #isOpenDelayed;
+    // pointer tracking
+    #isPointerOverContent;
+    #isPointerOverTrigger;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.document = injectDocument();
+        this.window = injectWindow();
+        // State
+        this.#value = signal('');
+        this.#previousValue = signal('');
+        this.baseId = `rdx-nav-menu-${generateId()}`;
+        this.#indicatorTrack = signal(null);
+        this.#viewport = signal(null);
+        this.#viewportContent = signal(new Map());
+        this.#rootNavigationMenu = signal(this.elementRef.nativeElement);
+        this.#userDismissedByClick = signal(false);
+        this.userDismissedByClick = () => this.#userDismissedByClick();
+        this.resetUserDismissed = () => this.#userDismissedByClick.set(false);
+        // delay timers
+        this.openTimerRef = 0;
+        this.closeTimerRef = 0;
+        this.skipDelayTimerRef = 0;
+        this.#isOpenDelayed = signal(true);
+        // pointer tracking
+        this.#isPointerOverContent = signal(false);
+        this.#isPointerOverTrigger = signal(false);
+        this.documentMouseLeaveHandler = null;
+        this.actionSubject$ = new Subject();
+        this.orientation = 'horizontal';
+        this.dir = 'ltr';
+        this.delayDuration = 200;
+        this.skipDelayDuration = 300;
+        this.loop = false;
+        this.cssAnimation = false;
+        this.cssOpeningAnimation = false;
+        this.cssClosingAnimation = false;
+        this.isRootMenu = true;
+        this.cssAnimationStatus = signal(null);
+        // exposed state as functions for the token
+        this.value = () => this.#value();
+        this.previousValue = () => this.#previousValue();
+        this.rootNavigationMenu = () => this.#rootNavigationMenu();
+        this.indicatorTrack = () => this.#indicatorTrack();
+        this.viewport = () => this.#viewport();
+        this.viewportContent = () => this.#viewportContent();
+        // exposed pointer state
+        this.setTriggerPointerState = (isOver) => this.#isPointerOverTrigger.set(isOver);
+        this.setContentPointerState = (isOver) => this.#isPointerOverContent.set(isOver);
+        this.isPointerInSystem = () => this.#isPointerOverContent() || this.#isPointerOverTrigger();
+        // exposed  animation state
+        this.getCssAnimation = () => this.cssAnimation;
+        this.getCssOpeningAnimation = () => this.cssOpeningAnimation;
+        this.getCssClosingAnimation = () => this.cssClosingAnimation;
+        effect(() => {
+            const value = this.#value();
+            if (value) {
+                this.window.clearTimeout(this.skipDelayTimerRef);
+                if (this.skipDelayDuration > 0) {
+                    this.#isOpenDelayed.set(false);
+                }
+            }
+            else {
+                // menu is closed, start skip delay timer
+                this.window.clearTimeout(this.skipDelayTimerRef);
+                this.skipDelayTimerRef = this.window.setTimeout(() => {
+                    this.#isOpenDelayed.set(true);
+                }, this.skipDelayDuration);
+            }
+        });
+        this.actionSubject$
+            .pipe(map((config) => {
+            // different delays for open vs close (better ux)
+            const duration = config.action === RdxNavigationMenuAction.OPEN ? this.delayDuration : 150;
+            return { ...config, duration };
+        }), debounce((config) => timer(config.duration)), tap((config) => {
+            switch (config.action) {
+                case RdxNavigationMenuAction.OPEN:
+                    if (config.itemValue) {
+                        this.setValue(config.itemValue);
+                    }
+                    break;
+                case RdxNavigationMenuAction.CLOSE:
+                    // only close if not hovering over any part of the system
+                    if (!this.isPointerInSystem()) {
+                        this.setValue('');
+                    }
+                    break;
+            }
+        }), takeUntilDestroyed())
+            .subscribe();
+        // set up document mouseleave handler to close menu when mouse leaves window
+        this.documentMouseLeaveHandler = () => this.handleClose();
+        this.document.addEventListener('mouseleave', this.documentMouseLeaveHandler);
+    }
+    ngOnDestroy() {
+        this.window.clearTimeout(this.openTimerRef);
+        this.window.clearTimeout(this.closeTimerRef);
+        this.window.clearTimeout(this.skipDelayTimerRef);
+        // clean up document event listener
+        if (this.documentMouseLeaveHandler) {
+            document.removeEventListener('mouseleave', this.documentMouseLeaveHandler);
+        }
+    }
+    onIndicatorTrackChange(track) {
+        this.#indicatorTrack.set(track);
+    }
+    onViewportChange(viewport) {
+        this.#viewport.set(viewport);
+    }
+    onTriggerEnter(itemValue) {
+        // skip opening if user explicitly dismissed this menu
+        if (this.#userDismissedByClick() && itemValue === this.#previousValue()) {
+            return;
+        }
+        this.window.clearTimeout(this.openTimerRef);
+        this.window.clearTimeout(this.closeTimerRef);
+        if (this.#isOpenDelayed()) {
+            this.handleDelayedOpen(itemValue);
+        }
+        else {
+            this.handleOpen(itemValue);
+        }
+    }
+    onTriggerLeave() {
+        this.window.clearTimeout(this.openTimerRef);
+        this.startCloseTimer();
+    }
+    onContentEnter() {
+        this.window.clearTimeout(this.closeTimerRef);
+    }
+    onContentLeave() {
+        this.startCloseTimer();
+    }
+    handleClose() {
+        this.actionSubject$.next({ action: RdxNavigationMenuAction.CLOSE });
+    }
+    onItemSelect(itemValue) {
+        const wasOpen = this.#value() === itemValue;
+        const newValue = wasOpen ? '' : itemValue;
+        // if user is closing an open menu, mark as user-dismissed
+        if (wasOpen) {
+            this.#userDismissedByClick.set(true);
+        }
+        else {
+            this.#userDismissedByClick.set(false);
+        }
+        this.setValue(newValue);
+    }
+    onItemDismiss() {
+        this.setValue('');
+    }
+    onViewportContentChange(contentValue, contentData) {
+        const newMap = new Map(this.#viewportContent());
+        newMap.set(contentValue, contentData);
+        this.#viewportContent.set(newMap);
+    }
+    onViewportContentRemove(contentValue) {
+        const newMap = new Map(this.#viewportContent());
+        if (newMap.has(contentValue)) {
+            newMap.delete(contentValue);
+            this.#viewportContent.set(newMap);
+        }
+    }
+    setValue(value) {
+        // Store previous value before changing
+        this.#previousValue.set(this.#value());
+        this.#value.set(value);
+    }
+    startCloseTimer() {
+        this.window.clearTimeout(this.closeTimerRef);
+        this.closeTimerRef = this.window.setTimeout(() => {
+            // only close if not hovering over any part of the system
+            if (!this.isPointerInSystem()) {
+                this.setValue('');
+            }
+        }, 150);
+    }
+    handleOpen(itemValue) {
+        this.window.clearTimeout(this.closeTimerRef);
+        this.setValue(itemValue);
+    }
+    handleDelayedOpen(itemValue) {
+        const isOpenItem = this.#value() === itemValue;
+        if (isOpenItem) {
+            // if the item is already open, clear close timer
+            this.window.clearTimeout(this.closeTimerRef);
+        }
+        else {
+            // otherwise, start the open timer
+            this.openTimerRef = this.window.setTimeout(() => {
+                this.window.clearTimeout(this.closeTimerRef);
+                this.setValue(itemValue);
+            }, this.delayDuration);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.4", type: RdxNavigationMenuDirective, isStandalone: true, selector: "[rdxNavigationMenu]", inputs: { orientation: "orientation", dir: "dir", delayDuration: ["delayDuration", "delayDuration", numberAttribute], skipDelayDuration: ["skipDelayDuration", "skipDelayDuration", numberAttribute], loop: ["loop", "loop", booleanAttribute], cssAnimation: ["cssAnimation", "cssAnimation", booleanAttribute], cssOpeningAnimation: ["cssOpeningAnimation", "cssOpeningAnimation", booleanAttribute], cssClosingAnimation: ["cssClosingAnimation", "cssClosingAnimation", booleanAttribute] }, host: { attributes: { "aria-label": "Main", "role": "navigation" }, properties: { "attr.data-orientation": "orientation", "attr.dir": "dir" } }, providers: [provideNavigationMenuContext(RdxNavigationMenuDirective)], exportAs: ["rdxNavigationMenu"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenu]',
+                    providers: [provideNavigationMenuContext(RdxNavigationMenuDirective)],
+                    host: {
+                        '[attr.data-orientation]': 'orientation',
+                        '[attr.dir]': 'dir',
+                        'aria-label': 'Main',
+                        role: 'navigation'
+                    },
+                    exportAs: 'rdxNavigationMenu'
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], delayDuration: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], skipDelayDuration: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], loop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cssAnimation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cssOpeningAnimation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cssClosingAnimation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class RdxNavigationMenuSubDirective {
+    constructor() {
+        this.orientation = input('horizontal');
+        this.valueChange = output();
+        this.value = signal('');
+        this.previousValue = signal('');
+        this.baseId = `rdx-nav-menu-sub-${generateId()}`;
+        this.isRootMenu = false;
+        this.parent = inject(RdxNavigationMenuDirective, { optional: true });
+    }
+    set defaultValue(val) {
+        if (val)
+            this.value.set(val);
+    }
+    get dir() {
+        if (!this.parent) {
+            return 'ltr';
+        }
+        return this.parent.dir || 'ltr';
+    }
+    get rootNavigationMenu() {
+        return this.parent?.rootNavigationMenu() || null;
+    }
+    onTriggerEnter(itemValue) {
+        this.setValue(itemValue);
+    }
+    onItemSelect(itemValue) {
+        this.setValue(itemValue);
+    }
+    onItemDismiss() {
+        this.setValue('');
+    }
+    setValue(value) {
+        this.previousValue.set(this.value());
+        this.value.set(value);
+        this.valueChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuSubDirective, isStandalone: true, selector: "[rdxNavigationMenuSub]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-orientation": "orientation()" } }, providers: [provideNavigationMenuContext(RdxNavigationMenuSubDirective)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuSubDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuSub]',
+                    providers: [provideNavigationMenuContext(RdxNavigationMenuSubDirective)],
+                    host: {
+                        '[attr.data-orientation]': 'orientation()'
+                    }
+                }]
+        }], propDecorators: { defaultValue: [{
+                type: Input
+            }] } });
+
+class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption {
+    constructor() {
+        super();
+        this.context = injectNavigationMenu();
+        this.item = inject(RdxNavigationMenuItemDirective);
+        this.list = inject(RdxNavigationMenuListDirective);
+        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.triggerId = makeTriggerId(this.context.baseId, this.item.value());
+        this.contentId = makeContentId(this.context.baseId, this.item.value());
+        this.open = computed(() => {
+            return this.item.value() === this.context.value();
+        });
+        this.focusProxyRef = null;
+        this.ariaOwnsRef = null;
+        this.hasPointerMoveOpened = false;
+        this.wasClickClose = false;
+        effect(() => {
+            this.rovingFocusItem.focusable = !this.disabled();
+        });
+        effect(() => {
+            const isOpen = this.open();
+            untracked(() => {
+                // handle focus proxy and aria-owns when open state changes
+                if (isOpen) {
+                    this.createAccessibilityComponents();
+                }
+                else {
+                    this.removeAccessibilityComponents();
+                    if (!this.item.wasEscapeCloseRef()) {
+                        this.item.onRootContentClose();
+                    }
+                    this.hasPointerMoveOpened = false;
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this.item.triggerRef.set(this.elementRef.nativeElement);
+        // configure the static part of the roving focus item directive instance
+        this.rovingFocusItem.tabStopId = this.item.value();
+    }
+    ngOnDestroy() {
+        this.removeAccessibilityComponents();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    createAccessibilityComponents() {
+        if (this.focusProxyRef || this.ariaOwnsRef) {
+            return;
+        }
+        // create focus proxy component
+        this.focusProxyRef = this.viewContainerRef.createComponent(RdxNavigationMenuFocusProxyComponent);
+        this.focusProxyRef.instance.triggerElement = this.elementRef.nativeElement;
+        this.focusProxyRef.instance.contentElement = this.item.contentRef();
+        this.focusProxyRef.instance.proxyFocus.subscribe((direction) => {
+            this.item.onFocusProxyEnter(direction);
+        });
+        // store reference in item directive
+        this.item.focusProxyRef.set(this.focusProxyRef.location.nativeElement);
+        // only add aria-owns component if using viewport
+        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
+            this.ariaOwnsRef = this.viewContainerRef.createComponent(RdxNavigationMenuAriaOwnsComponent);
+            this.ariaOwnsRef.instance.contentId = this.contentId;
+        }
+    }
+    removeAccessibilityComponents() {
+        if (this.focusProxyRef) {
+            this.focusProxyRef.destroy();
+            this.focusProxyRef = null;
+            this.item.focusProxyRef.set(null);
+        }
+        if (this.ariaOwnsRef) {
+            this.ariaOwnsRef.destroy();
+            this.ariaOwnsRef = null;
+        }
+    }
+    onPointerEnter() {
+        // ignore if disabled or not the root menu (hover logic primarily for root)
+        if (this.disabled() || !isRootNavigationMenu(this.context))
+            return;
+        this.wasClickClose = false; // Reset click close flag on enter
+        this.item.wasEscapeCloseRef.set(false); // Reset escape flag
+        this.context.setTriggerPointerState?.(true); // Update context state
+        // if the menu isn't already open for this item, trigger the enter logic (handles delays)
+        if (!this.open()) {
+            this.context.onTriggerEnter?.(this.item.value());
+        }
+    }
+    onPointerMove(event) {
+        // ignore if not a mouse event, disabled, closed by click/escape, or already opened by this move
+        if (event.pointerType !== 'mouse' ||
+            this.disabled() ||
+            this.wasClickClose ||
+            this.item.wasEscapeCloseRef() ||
+            this.hasPointerMoveOpened ||
+            !isRootNavigationMenu(this.context)) {
+            return;
+        }
+        // trigger enter logic (handles delays) and mark that this move initiated an open attempt
+        this.context.onTriggerEnter?.(this.item.value());
+        this.hasPointerMoveOpened = true;
+    }
+    onPointerLeave(event) {
+        // ignore if not a mouse event or disabled
+        if (event.pointerType !== 'mouse' || this.disabled() || !isRootNavigationMenu(this.context)) {
+            return;
+        }
+        this.context.setTriggerPointerState?.(false); // Update context state
+        this.context.onTriggerLeave?.(); // Trigger leave logic (handles delays)
+        this.hasPointerMoveOpened = false; // Reset flag
+        // reset user dismissal flag if pointer leaves the whole system (trigger + content)
+        if (this.context.resetUserDismissed) {
+            // relay slightly to allow pointer movement to content area without resetting dismissal state
+            setTimeout(() => {
+                if (!this.context.isPointerInSystem?.()) {
+                    this.context.resetUserDismissed?.();
+                }
+            }, 50); // small delay for tolerance
+        }
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        // manually set the `KeyManager` active item to this trigger
+        this.list.setActiveItem(this.item);
+        if (this.context.onItemSelect) {
+            this.context.onItemSelect(this.item.value());
+            // track if this click action resulted in closing the menu
+            this.wasClickClose = !this.open();
+            // reset escape flag if menu was opened by click
+            if (this.open()) {
+                this.item.wasEscapeCloseRef.set(false);
+            }
+        }
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        if (event.key === ENTER || event.key === SPACE) {
+            event.preventDefault(); // prevent default button behavior
+            this.onClick();
+            // if menu was opened by this keypress, move focus into the content
+            if (this.open()) {
+                // defer focus slightly to ensure content is ready
+                setTimeout(() => this.item.onEntryKeyDown(), 0);
+            }
+            return;
+        }
+        const isHorizontal = this.context.orientation === 'horizontal';
+        const isRTL = this.context.dir === 'rtl';
+        // handle `ArrowDown` specifically for viewport navigation
+        if (event.key === ARROW_DOWN || event.key === TAB) {
+            if (event.key === ARROW_DOWN) {
+                event.preventDefault();
+            }
+            // if the menu is open, focus into the content
+            if (this.open()) {
+                if (event.key === TAB) {
+                    // needed to ensure that the `keyManager` on the list directive does not activate
+                    // any focus updates, shifting focus to the subsequent focusable list item
+                    event.stopImmediatePropagation();
+                }
+                // direct focus handling for viewport case
+                if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
+                    // get the viewport element
+                    const viewport = this.context.viewport();
+                    if (viewport) {
+                        // find all tabbable elements in the viewport
+                        const tabbables = getTabbableCandidates(viewport);
+                        if (tabbables.length > 0) {
+                            // focus the first tabbable element directly
+                            setTimeout(() => {
+                                tabbables[0].focus();
+                            }, 0);
+                            return;
+                        }
+                    }
+                }
+                // fallback to the standard entry key down approach
+                setTimeout(() => this.item.onEntryKeyDown(), 0);
+                return;
+            }
+            // if not open but in horizontal orientation, emulate right key navigation
+            if (isHorizontal) {
+                const nextEvent = new KeyboardEvent('keydown', {
+                    key: isRTL ? ARROW_LEFT : ARROW_RIGHT,
+                    bubbles: true
+                });
+                this.elementRef.nativeElement.dispatchEvent(nextEvent);
+                return;
+            }
+        }
+        // handle ArrowUp in horizontal orientation
+        if (isHorizontal && event.key === ARROW_UP) {
+            event.preventDefault();
+            // emulate a left key press to move to the previous item
+            const nextEvent = new KeyboardEvent('keydown', {
+                key: isRTL ? ARROW_RIGHT : ARROW_LEFT,
+                bubbles: true
+            });
+            this.elementRef.nativeElement.dispatchEvent(nextEvent);
+            return;
+        }
+        // handle vertical navigation and entry into content
+        const verticalEntryKey = isRTL ? ARROW_LEFT : ARROW_RIGHT;
+        const entryKey = isHorizontal ? ARROW_DOWN : verticalEntryKey;
+        if (this.item.contentRef() && event.key === entryKey && event.key !== ARROW_DOWN) {
+            // Skip if it's ArrowDown as we already handled it above
+            event.preventDefault();
+            if (!this.open()) {
+                // if closed, open the menu first
+                this.context.onItemSelect?.(this.item.value());
+                // defer focus movement into content until after state update and render
+                setTimeout(() => this.item.onEntryKeyDown(), 0);
+            }
+            else {
+                // if already open, just move focus into the content
+                this.item.onEntryKeyDown();
+            }
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuTriggerDirective, isStandalone: true, selector: "[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "pointerenter": "onPointerEnter()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "id": "triggerId", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-orientation": "context.orientation", "attr.data-disabled": "disabled() ? \"\" : undefined", "disabled": "disabled() ? true : null", "attr.aria-expanded": "open()", "attr.aria-controls": "contentId", "attr.aria-haspopup": "\"menu\"" } }, providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuTriggerDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuTrigger]',
+                    hostDirectives: [RdxRovingFocusItemDirective],
+                    host: {
+                        '[id]': 'triggerId',
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-orientation]': 'context.orientation',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[disabled]': 'disabled() ? true : null',
+                        '[attr.aria-expanded]': 'open()',
+                        '[attr.aria-controls]': 'contentId',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '(pointerenter)': 'onPointerEnter()',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                        type: 'button'
+                    },
+                    providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuTriggerDirective }]
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxNavigationMenuViewportDirective {
+    constructor() {
+        this.context = injectNavigationMenu();
+        this.document = injectDocument();
+        this.window = injectWindow();
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Used to keep the viewport rendered and available in the DOM, even when closed.
+         * Useful for animations.
+         * @default false
+         */
+        this.forceMount = input(false, { transform: booleanAttribute });
+        this._contentNodes = signal(new Map());
+        this._activeContentNode = signal(null);
+        this._leavingContentNode = signal(null);
+        this._viewportSize = signal(null);
+        this.activeContentValue = computed(() => {
+            if (!isRootNavigationMenu(this.context))
+                return null;
+            return this.context.value() || this.context.previousValue();
+        });
+        this.isOpen = computed(() => {
+            if (!isRootNavigationMenu(this.context))
+                return false;
+            return Boolean(this.context.value() || this.forceMount());
+        });
+        this.dataState = computed(() => getOpenStateLabel(this.isOpen()));
+        this.viewportSize = computed(() => this._viewportSize());
+        this._resizeObserver = new ResizeObserver(() => this.updateSize());
+        this.setupViewportEffect();
+    }
+    ngOnInit() {
+        if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
+            this.context.onViewportChange(this.elementRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this._resizeObserver.disconnect();
+        // clean up any remaining nodes/views/subscriptions
+        this._contentNodes().forEach((node) => this.cleanupAfterLeave(node));
+        if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
+            this.context.onViewportChange(null);
+        }
+    }
+    onKeydown(event) {
+        if (!this.isOpen())
+            return;
+        const tabbableElements = getTabbableCandidates(this.elementRef.nativeElement);
+        if (!tabbableElements.length)
+            return;
+        const activeElement = this.document.activeElement;
+        const currentIndex = tabbableElements.findIndex((el) => el === activeElement);
+        if (event.key === ARROW_DOWN) {
+            event.preventDefault();
+            const nextIndex = currentIndex >= 0 && currentIndex < tabbableElements.length - 1 ? currentIndex + 1 : 0;
+            tabbableElements[nextIndex]?.focus();
+        }
+        else if (event.key === ARROW_UP) {
+            event.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabbableElements.length - 1;
+            tabbableElements[prevIndex]?.focus();
+        }
+    }
+    onPointerEnter() {
+        if (isRootNavigationMenu(this.context) && this.context.onContentEnter) {
+            this.context.onContentEnter();
+        }
+        if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
+            this.context.setContentPointerState(true);
+        }
+    }
+    onPointerLeave() {
+        if (isRootNavigationMenu(this.context) && this.context.onContentLeave) {
+            this.context.onContentLeave();
+        }
+        if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
+            this.context.setContentPointerState(false);
+        }
+    }
+    setupViewportEffect() {
+        effect(() => {
+            const currentActiveValue = this.context.value();
+            const previousActiveValue = this.context.previousValue();
+            const forceMount = this.forceMount();
+            untracked(() => {
+                // ensure context is root before proceeding
+                if (!isRootNavigationMenu(this.context) || !this.context.viewportContent) {
+                    return;
+                }
+                const allContentData = this.context.viewportContent();
+                const currentNodesMap = this._contentNodes();
+                let enteringNode = null;
+                let leavingNode = this._leavingContentNode(); // get potentially already leaving node
+                // 1. Identify Entering Node
+                if (currentActiveValue && allContentData.has(currentActiveValue)) {
+                    enteringNode = this.getOrCreateContentNode(currentActiveValue);
+                }
+                // 2. Identify Leaving Node
+                const nodeThatWasActive = previousActiveValue ? currentNodesMap.get(previousActiveValue) : null;
+                // if there was a previously active node, it's different from the entering one,
+                // and it's not already leaving, mark it for removal.
+                if (nodeThatWasActive && nodeThatWasActive !== enteringNode && nodeThatWasActive !== leavingNode) {
+                    // if another node was already leaving, force complete its transition
+                    if (leavingNode) {
+                        this.forceCompleteLeaveTransition(leavingNode);
+                    }
+                    leavingNode = nodeThatWasActive;
+                    this._leavingContentNode.set(leavingNode);
+                }
+                // 3. Handle Entering Node
+                if (enteringNode) {
+                    // cancel any pending leave transition for this node if it was leaving
+                    if (enteringNode === leavingNode) {
+                        this.cancelLeaveTransition(enteringNode);
+                        leavingNode = null;
+                        this._leavingContentNode.set(null);
+                    }
+                    // ensure it's in the DOM and set state to open
+                    this.addNodeToDOM(enteringNode);
+                    this.setNodeState(enteringNode, 'open'); // Triggers enter animation via data-state
+                    this._activeContentNode.set(enteringNode);
+                    this.updateSize(); // Update size based on the entering node
+                }
+                else {
+                    // no node entering, clear active node state
+                    this._activeContentNode.set(null);
+                }
+                // 4. Handle Leaving Node
+                if (leavingNode) {
+                    if (forceMount) {
+                        // if forceMount, just mark as closed, don't trigger removal animation
+                        this.setNodeState(leavingNode, 'closed');
+                        this._leavingContentNode.set(null); // No longer considered "leaving"
+                    }
+                    else {
+                        // start the leave transition (usePresence handles DOM removal)
+                        this.startLeaveTransition(leavingNode);
+                    }
+                }
+            });
+        });
+    }
+    // gets or creates the ContentNode (wrapper + view)
+    getOrCreateContentNode(contentValue) {
+        const existingNode = this._contentNodes().get(contentValue);
+        if (existingNode && !existingNode.embeddedView.destroyed) {
+            return existingNode;
+        }
+        // create if doesn't exist or view was destroyed
+        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
+            return null;
+        const allContentData = this.context.viewportContent();
+        const contentData = allContentData.get(contentValue);
+        const templateRef = contentData?.templateRef;
+        if (!templateRef) {
+            console.error(`No templateRef found for content value: ${contentValue}`);
+            return null;
+        }
+        try {
+            const embeddedView = this.viewContainerRef.createEmbeddedView(templateRef);
+            const container = this.renderer.createElement('div');
+            this.renderer.setAttribute(container, 'class', 'NavigationMenuContentWrapper');
+            this.renderer.setAttribute(container, 'data-content-value', contentValue);
+            embeddedView.rootNodes.forEach((node) => this.renderer.appendChild(container, node));
+            const newNode = {
+                embeddedView,
+                element: container,
+                contentValue,
+                state: 'closed'
+            };
+            const newMap = new Map(this._contentNodes());
+            newMap.set(contentValue, newNode);
+            this._contentNodes.set(newMap);
+            return newNode;
+        }
+        catch (error) {
+            console.error(`Error creating content node for ${contentValue}:`, error);
+            return null;
+        }
+    }
+    // adds node element to viewport DOM if not already present
+    addNodeToDOM(node) {
+        if (!this.elementRef.nativeElement.contains(node.element)) {
+            this.renderer.appendChild(this.elementRef.nativeElement, node.element);
+            // observe size only when added to DOM
+            this._resizeObserver.observe(node.element);
+        }
+    }
+    // removes node element from viewport DOM
+    removeNodeFromDOM(node) {
+        if (this.elementRef.nativeElement.contains(node.element)) {
+            this._resizeObserver.unobserve(node.element); // stop observing before removal
+            this.renderer.removeChild(this.elementRef.nativeElement, node.element);
+        }
+    }
+    // updates the data-state and motion attributes
+    setNodeState(node, state) {
+        if (node.state === state)
+            return; // avoid redundant updates
+        node.state = state;
+        this.renderer.setAttribute(node.element, 'data-state', state);
+        // apply motion attribute based on context
+        if (isRootNavigationMenu(this.context) && this.context.viewportContent) {
+            const contentData = this.context.viewportContent().get(node.contentValue);
+            if (contentData?.getMotionAttribute) {
+                // get motion based on current state transition
+                const motionAttr = contentData.getMotionAttribute();
+                if (motionAttr) {
+                    this.renderer.setAttribute(node.element, 'data-motion', motionAttr);
+                }
+                else {
+                    this.renderer.removeAttribute(node.element, 'data-motion');
+                }
+            }
+            else {
+                this.renderer.removeAttribute(node.element, 'data-motion');
+            }
+        }
+        // apply A11y attributes (might only be needed on open?)
+        if (state === 'open') {
+            this.applyA11yAttributes(node);
+        }
+    }
+    // apply A11y attributes to the first child element
+    applyA11yAttributes(node) {
+        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
+            return;
+        const contentData = this.context.viewportContent().get(node.contentValue);
+        if (contentData?.additionalAttrs && node.embeddedView.rootNodes.length > 0) {
+            const firstRootNode = node.embeddedView.rootNodes[0];
+            if (firstRootNode) {
+                Object.entries(contentData.additionalAttrs).forEach(([attr, value]) => {
+                    this.renderer.setAttribute(firstRootNode, attr, value);
+                });
+            }
+        }
+    }
+    startLeaveTransition(node) {
+        // ensure node exists and isn't already leaving with an active subscription
+        if (!node || node.transitionSubscription) {
+            node.transitionSubscription?.unsubscribe();
+            return;
+        }
+        const startFn = () => {
+            this.setNodeState(node, 'closed');
+            return () => this.cleanupAfterLeave(node);
+        };
+        const options = {
+            animation: true, // assuming CSS animations/transitions handle the exit
+            state: 'continue' // start the leave process
+        };
+        node.transitionSubscription = usePresence(this.zone, node.element, startFn, options)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            complete: () => {
+                this.cleanupAfterLeave(node);
+            }
+        });
+    }
+    /**
+     * Cleanup function called after leave animation finishes
+     * @param node The node that is leaving
+     */
+    cleanupAfterLeave(node) {
+        // check if this node is still marked as the one leaving
+        if (this._leavingContentNode() === node) {
+            this.removeNodeFromDOM(node);
+            if (!this.forceMount() && node.embeddedView && !node.embeddedView.destroyed) {
+                node.embeddedView.destroy();
+                // Remove from cache if destroyed
+                const newMap = new Map(this._contentNodes());
+                newMap.delete(node.contentValue);
+                this._contentNodes.set(newMap);
+            }
+            node.transitionSubscription = null;
+            this._leavingContentNode.set(null);
+        }
+        else {
+            // if this node is NOT the one currently marked as leaving, it means
+            // a new transition started before this one finished. Just clean up DOM/Sub.
+            this.removeNodeFromDOM(node);
+            node.transitionSubscription?.unsubscribe();
+            node.transitionSubscription = null;
+        }
+    }
+    /**
+     * Cancels an ongoing leave transition (e.g., if user hovers back)
+     * @param node The node that is leaving
+     */
+    cancelLeaveTransition(node) {
+        node.transitionSubscription?.unsubscribe();
+        node.transitionSubscription = null;
+    }
+    /**
+     * Force completes a leave transition (e.g., if another leave starts)
+     * @param node The node that is leaving
+     */
+    forceCompleteLeaveTransition(node) {
+        if (node && node.transitionSubscription) {
+            node.transitionSubscription.unsubscribe();
+            // perform cleanup immediately
+            this.cleanupAfterLeave(node);
+        }
+    }
+    updateSize() {
+        const activeNode = this._activeContentNode()?.element; // measure the currently active node
+        if (!activeNode || !activeNode.isConnected)
+            return;
+        const firstChild = activeNode.firstChild;
+        if (!firstChild)
+            return;
+        this.window.requestAnimationFrame(() => {
+            // keep rAF here for measurement stability
+            activeNode.getBoundingClientRect(); // force layout
+            const width = Math.ceil(firstChild.offsetWidth);
+            const height = Math.ceil(firstChild.offsetHeight);
+            if (width !== 0 || height !== 0) {
+                const currentSize = this._viewportSize();
+                if (!currentSize || currentSize.width !== width || currentSize.height !== height) {
+                    this._viewportSize.set({ width, height });
+                }
+            }
+            else if (this._viewportSize() !== null) {
+                this._viewportSize.set(null);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuViewportDirective, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.data-state": "dataState()", "attr.data-orientation": "context.orientation", "style.--radix-navigation-menu-viewport-width.px": "viewportSize()?.width", "style.--radix-navigation-menu-viewport-height.px": "viewportSize()?.height" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuViewportDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuViewport]',
+                    host: {
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-orientation]': 'context.orientation',
+                        '[style.--radix-navigation-menu-viewport-width.px]': 'viewportSize()?.width',
+                        '[style.--radix-navigation-menu-viewport-height.px]': 'viewportSize()?.height',
+                        '(keydown)': 'onKeydown($event)',
+                        '(pointerenter)': 'onPointerEnter()',
+                        '(pointerleave)': 'onPointerLeave()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const _imports = [
+    RdxNavigationMenuDirective,
+    RdxNavigationMenuSubDirective,
+    RdxNavigationMenuListDirective,
+    RdxNavigationMenuItemDirective,
+    RdxNavigationMenuTriggerDirective,
+    RdxNavigationMenuLinkDirective,
+    RdxNavigationMenuIndicatorDirective,
+    RdxNavigationMenuContentDirective,
+    RdxNavigationMenuViewportDirective,
+    RdxNavigationMenuFocusProxyComponent,
+    RdxNavigationMenuAriaOwnsComponent
+];
+class RdxNavigationMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuDirective,
+            RdxNavigationMenuSubDirective,
+            RdxNavigationMenuListDirective,
+            RdxNavigationMenuItemDirective,
+            RdxNavigationMenuTriggerDirective,
+            RdxNavigationMenuLinkDirective,
+            RdxNavigationMenuIndicatorDirective,
+            RdxNavigationMenuContentDirective,
+            RdxNavigationMenuViewportDirective,
+            RdxNavigationMenuFocusProxyComponent,
+            RdxNavigationMenuAriaOwnsComponent], exports: [RdxNavigationMenuDirective,
+            RdxNavigationMenuSubDirective,
+            RdxNavigationMenuListDirective,
+            RdxNavigationMenuItemDirective,
+            RdxNavigationMenuTriggerDirective,
+            RdxNavigationMenuLinkDirective,
+            RdxNavigationMenuIndicatorDirective,
+            RdxNavigationMenuContentDirective,
+            RdxNavigationMenuViewportDirective,
+            RdxNavigationMenuFocusProxyComponent,
+            RdxNavigationMenuAriaOwnsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RDX_NAVIGATION_MENU_TOKEN, RdxNavigationMenuAction, RdxNavigationMenuAnimationStatus, RdxNavigationMenuAriaOwnsComponent, RdxNavigationMenuContentDirective, RdxNavigationMenuDirective, RdxNavigationMenuFocusProxyComponent, RdxNavigationMenuFocusableOption, RdxNavigationMenuIndicatorDirective, RdxNavigationMenuItemDirective, RdxNavigationMenuLinkDirective, RdxNavigationMenuListDirective, RdxNavigationMenuModule, RdxNavigationMenuSubDirective, RdxNavigationMenuTriggerDirective, RdxNavigationMenuViewportDirective, injectNavigationMenu, isRootNavigationMenu, provideNavigationMenuContext };
+//# sourceMappingURL=radix-ng-primitives-navigation-menu.mjs.map