@radix-ng/primitives 0.44.0 → 0.51.0

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

@@ -16,15 +16,16 @@ class RdxNavigationMenuFocusProxyComponent {
         this.proxyFocus = new EventEmitter();
     }
     onFocus(event) {
-        const prevFocusedElement = event.relatedTarget;
+        const focusEvent = event;
+        const prevFocusedElement = focusEvent.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: "20.3.3", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxNavigationMenuFocusProxyComponent, isStandalone: true, selector: "rdx-navigation-menu-focus-proxy", inputs: { triggerElement: "triggerElement", contentElement: "contentElement" }, outputs: { proxyFocus: "proxyFocus" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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"
@@ -34,7 +35,7 @@ class RdxNavigationMenuFocusProxyComponent {
         ></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: RdxVisuallyHiddenDirective, selector: "[rdxVisuallyHidden]", inputs: ["feature"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-navigation-menu-focus-proxy',
@@ -60,12 +61,12 @@ class RdxNavigationMenuAriaOwnsComponent {
     constructor() {
         this.contentId = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxNavigationMenuAriaOwnsComponent, isStandalone: true, selector: "rdx-navigation-menu-aria-owns", inputs: { contentId: "contentId" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-navigation-menu-aria-owns',
@@ -284,16 +285,16 @@ class RdxNavigationMenuItemDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.context = injectNavigationMenu();
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.triggerOrLink = contentChild(RdxNavigationMenuFocusableOption, ...(ngDevMode ? [{ debugName: "triggerOrLink" }] : []));
-        this.triggerRef = signal(null, ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
-        this.contentRef = signal(null, ...(ngDevMode ? [{ debugName: "contentRef" }] : []));
-        this.focusProxyRef = signal(null, ...(ngDevMode ? [{ debugName: "focusProxyRef" }] : []));
-        this.wasEscapeCloseRef = signal(false, ...(ngDevMode ? [{ debugName: "wasEscapeCloseRef" }] : []));
-        this._restoreContentTabOrderRef = signal(null, ...(ngDevMode ? [{ debugName: "_restoreContentTabOrderRef" }] : []));
+        this.triggerOrLink = contentChild(RdxNavigationMenuFocusableOption, ...(ngDevMode ? [{ debugName: "triggerOrLink" }] : /* istanbul ignore next */ []));
+        this.triggerRef = signal(null, ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+        this.contentRef = signal(null, ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+        this.focusProxyRef = signal(null, ...(ngDevMode ? [{ debugName: "focusProxyRef" }] : /* istanbul ignore next */ []));
+        this.wasEscapeCloseRef = signal(false, ...(ngDevMode ? [{ debugName: "wasEscapeCloseRef" }] : /* istanbul ignore next */ []));
+        this._restoreContentTabOrderRef = signal(null, ...(ngDevMode ? [{ debugName: "_restoreContentTabOrderRef" }] : /* istanbul ignore next */ []));
     }
     get restoreContentTabOrderRef() {
         return this._restoreContentTabOrderRef;
@@ -404,10 +405,10 @@ class RdxNavigationMenuItemDirective {
     onRootContentClose() {
         this.onContentFocusOutside();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuItem]',
@@ -416,7 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     },
                     exportAs: 'rdxNavigationMenuItem'
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], triggerOrLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxNavigationMenuFocusableOption), { isSignal: true }] }] } });
 
 class RdxNavigationMenuContentDirective {
     constructor() {
@@ -431,7 +432,7 @@ class RdxNavigationMenuContentDirective {
          * Useful for animations or SEO.
          * @default false
          */
-        this.forceMount = input(false, ...(ngDevMode ? [{ debugName: "forceMount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @ignore */
         this.contentId = makeContentId(this.context.baseId, this.item.value());
         /** @ignore */
@@ -503,10 +504,10 @@ class RdxNavigationMenuContentDirective {
         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: "20.3.3", ngImport: i0, type: RdxNavigationMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuContent]'
@@ -514,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }], propDecorators: { rdxNavigationMenuContent: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }] } });
+            }], forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
 class RdxNavigationMenuIndicatorDirective {
     constructor() {
@@ -526,14 +527,14 @@ class RdxNavigationMenuIndicatorDirective {
          * Useful for animations.
          * @default false
          */
-        this.forceMount = input(false, ...(ngDevMode ? [{ debugName: "forceMount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** @ignore */
-        this._position = signal(null, ...(ngDevMode ? [{ debugName: "_position" }] : []));
+        this._position = signal(null, ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this._activeTrigger = signal(null, ...(ngDevMode ? [{ debugName: "_activeTrigger" }] : []));
+        this._activeTrigger = signal(null, ...(ngDevMode ? [{ debugName: "_activeTrigger" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this._resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.isVisible = computed(() => Boolean(this.context.value() || this.forceMount()), ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        this.isVisible = computed(() => Boolean(this.context.value() || this.forceMount()), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
         // set up effect for tracking active trigger and position
         effect(() => {
             // this effect runs when the current value changes
@@ -618,10 +619,10 @@ class RdxNavigationMenuIndicatorDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuIndicator]',
@@ -632,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         'aria-hidden': 'true'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
 const LINK_SELECT = 'navigationMenu.linkSelect';
 const ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
@@ -641,8 +642,8 @@ class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
         super(...arguments);
         this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
         this.uniqueId = generateId();
-        this.active = input(false, ...(ngDevMode ? [{ debugName: "active", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onSelect = input(...(ngDevMode ? [undefined, { debugName: "onSelect" }] : []));
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.onSelect = input(...(ngDevMode ? [undefined, { debugName: "onSelect" }] : /* istanbul ignore next */ []));
         this.elementRef = inject(ElementRef);
     }
     ngOnInit() {
@@ -652,6 +653,7 @@ class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
         this.elementRef.nativeElement.focus();
     }
     onClick(event) {
+        const mouseEvent = event;
         const target = event.target;
         // dispatch link select event
         const linkSelectEvent = new CustomEvent(LINK_SELECT, {
@@ -666,7 +668,7 @@ class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
         // dispatch event
         target.dispatchEvent(linkSelectEvent);
         // if not prevented and not meta key, dismiss content
-        if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
+        if (!linkSelectEvent.defaultPrevented && !mouseEvent.metaKey) {
             const dismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
                 bubbles: true,
                 cancelable: true
@@ -675,8 +677,9 @@ class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
         }
     }
     onKeydown(event) {
+        const keyEvent = event;
         // activate link on Enter or Space
-        if (event.key === ENTER || event.key === SPACE) {
+        if (keyEvent.key === ENTER || keyEvent.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
@@ -685,10 +688,10 @@ class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuLink]',
@@ -701,7 +704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     },
                     providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuLinkDirective }]
                 }]
-        }] });
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], onSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSelect", required: false }] }] } });
 
 class RdxNavigationMenuListDirective {
     constructor() {
@@ -713,7 +716,7 @@ class RdxNavigationMenuListDirective {
          * @private
          * @ignore
          */
-        this.items = contentChildren(forwardRef(() => RdxNavigationMenuItemDirective), ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{ descendants: true }]));
+        this.items = contentChildren(forwardRef(() => RdxNavigationMenuItemDirective), { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
     }
     /**
      * @ignore
@@ -767,16 +770,17 @@ class RdxNavigationMenuListDirective {
      * @ignore
      */
     onKeydown(event) {
+        const keyEvent = event;
         if (!this.keyManager.activeItem) {
             this.keyManager.setFirstItemActive();
         }
-        if (event.key === TAB && event.shiftKey) {
+        if (keyEvent.key === TAB && keyEvent.shiftKey) {
             if (this.keyManager.activeItemIndex === 0)
                 return;
             this.keyManager.setPreviousItemActive();
             event.preventDefault();
         }
-        else if (event.key === TAB) {
+        else if (keyEvent.key === TAB) {
             const items = this.items();
             if (this.keyManager.activeItemIndex === items.length - 1) {
                 return;
@@ -785,7 +789,7 @@ class RdxNavigationMenuListDirective {
             event.preventDefault();
         }
         else {
-            this.keyManager.onKeydown(event);
+            this.keyManager.onKeydown(keyEvent);
         }
     }
     /**
@@ -794,10 +798,10 @@ class RdxNavigationMenuListDirective {
     setActiveItem(item) {
         this.keyManager.setActiveItem(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuList]',
@@ -807,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(keydown)': 'onKeydown($event)'
                     }
                 }]
-        }] });
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => RdxNavigationMenuItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 // define action types for clearer intent
 var RdxNavigationMenuAction;
@@ -833,14 +837,14 @@ class RdxNavigationMenuDirective {
         this.document = injectDocument();
         this.window = injectWindow();
         // State
-        this.#value = signal('', ...(ngDevMode ? [{ debugName: "#value" }] : []));
-        this.#previousValue = signal('', ...(ngDevMode ? [{ debugName: "#previousValue" }] : []));
+        this.#value = signal('', ...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
+        this.#previousValue = signal('', ...(ngDevMode ? [{ debugName: "#previousValue" }] : /* istanbul ignore next */ []));
         this.baseId = `rdx-nav-menu-${generateId()}`;
-        this.#indicatorTrack = signal(null, ...(ngDevMode ? [{ debugName: "#indicatorTrack" }] : []));
-        this.#viewport = signal(null, ...(ngDevMode ? [{ debugName: "#viewport" }] : []));
-        this.#viewportContent = signal(new Map(), ...(ngDevMode ? [{ debugName: "#viewportContent" }] : []));
-        this.#rootNavigationMenu = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "#rootNavigationMenu" }] : []));
-        this.#userDismissedByClick = signal(false, ...(ngDevMode ? [{ debugName: "#userDismissedByClick" }] : []));
+        this.#indicatorTrack = signal(null, ...(ngDevMode ? [{ debugName: "#indicatorTrack" }] : /* istanbul ignore next */ []));
+        this.#viewport = signal(null, ...(ngDevMode ? [{ debugName: "#viewport" }] : /* istanbul ignore next */ []));
+        this.#viewportContent = signal(new Map(), ...(ngDevMode ? [{ debugName: "#viewportContent" }] : /* istanbul ignore next */ []));
+        this.#rootNavigationMenu = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "#rootNavigationMenu" }] : /* istanbul ignore next */ []));
+        this.#userDismissedByClick = signal(false, ...(ngDevMode ? [{ debugName: "#userDismissedByClick" }] : /* istanbul ignore next */ []));
         this.userDismissedByClick = () => this.#userDismissedByClick();
         this.resetUserDismissed = () => this.#userDismissedByClick.set(false);
         // delay timers
@@ -848,11 +852,11 @@ class RdxNavigationMenuDirective {
         this.closeTimerRef = 0;
         this.skipDelayTimerRef = 0;
         this.recentlyActivatedTimerRef = 0;
-        this.recentlyActivatedItem = signal(null, ...(ngDevMode ? [{ debugName: "recentlyActivatedItem" }] : []));
-        this.#isOpenDelayed = signal(true, ...(ngDevMode ? [{ debugName: "#isOpenDelayed" }] : []));
+        this.recentlyActivatedItem = signal(null, ...(ngDevMode ? [{ debugName: "recentlyActivatedItem" }] : /* istanbul ignore next */ []));
+        this.#isOpenDelayed = signal(true, ...(ngDevMode ? [{ debugName: "#isOpenDelayed" }] : /* istanbul ignore next */ []));
         // pointer tracking
-        this.#isPointerOverContent = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverContent" }] : []));
-        this.#isPointerOverTrigger = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverTrigger" }] : []));
+        this.#isPointerOverContent = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverContent" }] : /* istanbul ignore next */ []));
+        this.#isPointerOverTrigger = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverTrigger" }] : /* istanbul ignore next */ []));
         this.documentMouseLeaveHandler = null;
         this.actionSubject$ = new Subject();
         this.orientation = 'horizontal';
@@ -865,7 +869,7 @@ class RdxNavigationMenuDirective {
         this.cssOpeningAnimation = false;
         this.cssClosingAnimation = false;
         this.isRootMenu = true;
-        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : []));
+        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : /* istanbul ignore next */ []));
         // exposed state as functions for the token
         this.value = () => this.#value();
         this.previousValue = () => this.#previousValue();
@@ -1037,10 +1041,10 @@ class RdxNavigationMenuDirective {
             }, this.delayDuration);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.3", type: RdxNavigationMenuDirective, isStandalone: true, selector: "[rdxNavigationMenu]", inputs: { orientation: "orientation", dir: "dir", clickIgnoreDuration: ["clickIgnoreDuration", "clickIgnoreDuration", numberAttribute], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxNavigationMenuDirective, isStandalone: true, selector: "[rdxNavigationMenu]", inputs: { orientation: "orientation", dir: "dir", clickIgnoreDuration: ["clickIgnoreDuration", "clickIgnoreDuration", numberAttribute], 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenu]',
@@ -1082,10 +1086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 class RdxNavigationMenuSubDirective {
     constructor() {
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.valueChange = output();
-        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.previousValue = signal('', ...(ngDevMode ? [{ debugName: "previousValue" }] : []));
+        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.previousValue = signal('', ...(ngDevMode ? [{ debugName: "previousValue" }] : /* istanbul ignore next */ []));
         this.baseId = `rdx-nav-menu-sub-${generateId()}`;
         this.isRootMenu = false;
         this.parent = inject(RdxNavigationMenuDirective, { optional: true });
@@ -1117,10 +1121,10 @@ class RdxNavigationMenuSubDirective {
         this.value.set(value);
         this.valueChange.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuSubDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuSubDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuSub]',
@@ -1129,9 +1133,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[attr.data-orientation]': 'orientation()'
                     }
                 }]
-        }], propDecorators: { defaultValue: [{
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], defaultValue: [{
                 type: Input
-            }] } });
+            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption {
     constructor() {
@@ -1142,13 +1146,13 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.openOnHover = input(true, ...(ngDevMode ? [{ debugName: "openOnHover", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.openOnHover = input(true, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), 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();
-        }, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         this.focusProxyRef = null;
         this.ariaOwnsRef = null;
         this.hasPointerMoveOpened = false;
@@ -1229,8 +1233,9 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         }
     }
     onPointerMove(event) {
+        const pointerEvent = event;
         // ignore if not a mouse event, disabled, closed by click/escape, or already opened by this move
-        if (event.pointerType !== 'mouse' ||
+        if (pointerEvent.pointerType !== 'mouse' ||
             this.disabled() ||
             this.wasClickClose ||
             this.item.wasEscapeCloseRef() ||
@@ -1241,8 +1246,9 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         this.hasPointerMoveOpened = true;
     }
     onPointerLeave(event) {
+        const pointerEvent = event;
         // ignore if not a mouse event or disabled
-        if (event.pointerType !== 'mouse' || this.disabled() || !isRootNavigationMenu(this.context)) {
+        if (pointerEvent.pointerType !== 'mouse' || this.disabled() || !isRootNavigationMenu(this.context)) {
             return;
         }
         this.context.setTriggerPointerState?.(false); // Update context state
@@ -1274,9 +1280,10 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         }
     }
     onKeydown(event) {
+        const keyEvent = event;
         if (this.disabled())
             return;
-        if (event.key === ENTER || event.key === SPACE) {
+        if (keyEvent.key === ENTER || keyEvent.key === SPACE) {
             event.preventDefault(); // prevent default button behavior
             this.onClick();
             // if menu was opened by this keypress, move focus into the content
@@ -1289,13 +1296,13 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         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) {
+        if (keyEvent.key === ARROW_DOWN || keyEvent.key === TAB) {
+            if (keyEvent.key === ARROW_DOWN) {
                 event.preventDefault();
             }
             // if the menu is open, focus into the content
             if (this.open()) {
-                if (event.key === TAB) {
+                if (keyEvent.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();
@@ -1331,7 +1338,7 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
             }
         }
         // handle ArrowUp in horizontal orientation
-        if (isHorizontal && event.key === ARROW_UP) {
+        if (isHorizontal && keyEvent.key === ARROW_UP) {
             event.preventDefault();
             // emulate a left key press to move to the previous item
             const nextEvent = new KeyboardEvent('keydown', {
@@ -1344,7 +1351,7 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
         // 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) {
+        if (this.item.contentRef() && keyEvent.key === entryKey && keyEvent.key !== ARROW_DOWN) {
             // Skip if it's ArrowDown as we already handled it above
             event.preventDefault();
             if (!this.open()) {
@@ -1360,10 +1367,10 @@ class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxNavigationMenuTriggerDirective, isStandalone: true, selector: "[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuTriggerDirective, isStandalone: true, selector: "[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", 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", "attr.disabled": "disabled() ? \"\" : undefined", "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: "20.3.3", ngImport: i0, type: RdxNavigationMenuTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuTrigger]',
@@ -1373,7 +1380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '[attr.data-state]': 'open() ? "open" : "closed"',
                         '[attr.data-orientation]': 'context.orientation',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[disabled]': 'disabled() ? true : null',
+                        '[attr.disabled]': 'disabled() ? "" : undefined',
                         '[attr.aria-expanded]': 'open()',
                         '[attr.aria-controls]': 'contentId',
                         '[attr.aria-haspopup]': '"menu"',
@@ -1386,7 +1393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     },
                     providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuTriggerDirective }]
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }] } });
 
 class RdxNavigationMenuViewportDirective {
     constructor() {
@@ -1403,23 +1410,23 @@ class RdxNavigationMenuViewportDirective {
          * Useful for animations.
          * @default false
          */
-        this.forceMount = input(false, ...(ngDevMode ? [{ debugName: "forceMount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._contentNodes = signal(new Map(), ...(ngDevMode ? [{ debugName: "_contentNodes" }] : []));
-        this._activeContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_activeContentNode" }] : []));
-        this._leavingContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_leavingContentNode" }] : []));
-        this._viewportSize = signal(null, ...(ngDevMode ? [{ debugName: "_viewportSize" }] : []));
+        this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this._contentNodes = signal(new Map(), ...(ngDevMode ? [{ debugName: "_contentNodes" }] : /* istanbul ignore next */ []));
+        this._activeContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_activeContentNode" }] : /* istanbul ignore next */ []));
+        this._leavingContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_leavingContentNode" }] : /* istanbul ignore next */ []));
+        this._viewportSize = signal(null, ...(ngDevMode ? [{ debugName: "_viewportSize" }] : /* istanbul ignore next */ []));
         this.activeContentValue = computed(() => {
             if (!isRootNavigationMenu(this.context))
                 return null;
             return this.context.value() || this.context.previousValue();
-        }, ...(ngDevMode ? [{ debugName: "activeContentValue" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "activeContentValue" }] : /* istanbul ignore next */ []));
         this.isOpen = computed(() => {
             if (!isRootNavigationMenu(this.context))
                 return false;
             return Boolean(this.context.value() || this.forceMount());
-        }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.dataState = computed(() => getOpenStateLabel(this.isOpen()), ...(ngDevMode ? [{ debugName: "dataState" }] : []));
-        this.viewportSize = computed(() => this._viewportSize(), ...(ngDevMode ? [{ debugName: "viewportSize" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dataState = computed(() => getOpenStateLabel(this.isOpen()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.viewportSize = computed(() => this._viewportSize(), ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
         this._resizeObserver = new ResizeObserver(() => this.updateSize());
         this.setupViewportEffect();
     }
@@ -1437,6 +1444,7 @@ class RdxNavigationMenuViewportDirective {
         }
     }
     onKeydown(event) {
+        const keyEvent = event;
         if (!this.isOpen())
             return;
         const tabbableElements = getTabbableCandidates(this.elementRef.nativeElement);
@@ -1444,12 +1452,12 @@ class RdxNavigationMenuViewportDirective {
             return;
         const activeElement = this.document.activeElement;
         const currentIndex = tabbableElements.findIndex((el) => el === activeElement);
-        if (event.key === ARROW_DOWN) {
+        if (keyEvent.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) {
+        else if (keyEvent.key === ARROW_UP) {
             event.preventDefault();
             const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabbableElements.length - 1;
             tabbableElements[prevIndex]?.focus();
@@ -1722,10 +1730,10 @@ class RdxNavigationMenuViewportDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxNavigationMenuViewportDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewportDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuViewport]',
@@ -1739,7 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(pointerleave)': 'onPointerLeave()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
 const _imports = [
     RdxNavigationMenuDirective,
@@ -1755,8 +1763,8 @@ const _imports = [
     RdxNavigationMenuAriaOwnsComponent
 ];
 class RdxNavigationMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuDirective,
             RdxNavigationMenuSubDirective,
             RdxNavigationMenuListDirective,
             RdxNavigationMenuItemDirective,
@@ -1777,9 +1785,9 @@ class RdxNavigationMenuModule {
             RdxNavigationMenuViewportDirective,
             RdxNavigationMenuFocusProxyComponent,
             RdxNavigationMenuAriaOwnsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],