@ngrdt/menu 0.0.11 → 0.0.14

package/fesm2022/ngrdt-menu.mjs

@@ -1,7 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input, HostBinding, HostListener, EnvironmentInjector, booleanAttribute, Directive, ViewEncapsulation, numberAttribute, NgModule } from '@angular/core';
-import * as i2$1 from '@ngrdt/button';
-import { RDT_BUTTON_BASE_PROVIDER, RdtButtonOutletDirective } from '@ngrdt/button';
+import { InjectionToken, inject, ElementRef, DestroyRef, Renderer2, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, ViewChild, Input, HostBinding, HostListener, EnvironmentInjector, booleanAttribute, numberAttribute, Directive, ViewEncapsulation, QueryList, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,8 +9,9 @@ import * as i3 from '@ngrdt/router';
 import { RdtRouterService, RdtAnyRouteActiveDirective } from '@ngrdt/router';
 import * as i4 from '@ngrdt/shortcuts';
 import { RdtShortcutService, RdtShortcut, RdtKeyListenerDirective } from '@ngrdt/shortcuts';
-import { KB_CODE, RdtObjectUtils, RdtStringUtils } from '@ngrdt/utils';
+import { RdtStringUtils, KB_CODE, RdtObjectUtils } from '@ngrdt/utils';
 import { delay, of, map, first, Subscription, fromEvent, throttleTime, animationFrameScheduler } from 'rxjs';
+import { RDT_BUTTON_BASE_PROVIDER, RdtButtonOutletDirective } from '@ngrdt/button';
 
 var RdtMenuShortcutMode;
 (function (RdtMenuShortcutMode) {
@@ -28,6 +27,78 @@ const DEFAULT_MENU_VERTICAL_DIR = 'down';
 const RDT_MENU_HORIZONTAL_DIR_PROVIDER = new InjectionToken('RDT_MENU_HORIZONTAL_DIR');
 const RDT_MENU_VERTICAL_DIR_PROVIDER = new InjectionToken('RDT_MENU_VERTICAL_DIR');
 
+function parseMenuItems(items, injector, prefix = '') {
+    return items
+        .map((item) => {
+        let newPrefix;
+        if (item.dataTestId) {
+            newPrefix = item.dataTestId;
+        }
+        else if (prefix) {
+            newPrefix = RdtStringUtils.getDataTestId(item.label, prefix);
+        }
+        else {
+            newPrefix = RdtStringUtils.getDataTestId(item.label);
+        }
+        const newDataTestId = RdtStringUtils.getDataTestId(newPrefix, null, 'menu-item');
+        const res = {
+            label: item.label,
+            icon: item.icon,
+            shortcut: item.shortcut,
+            command: item.command,
+            visible: item.visible,
+            queryParams: item.queryParams,
+            requiredParent: item.requiredParent,
+            dataTestId: newDataTestId,
+        };
+        if (item.items) {
+            const childrenRes = res;
+            const parsedChildren = parseMenuItems(item.items, injector, newPrefix);
+            if (parsedChildren.length > 0) {
+                childrenRes.items = parsedChildren;
+            }
+            return childrenRes;
+        }
+        else if (item.routerLink) {
+            const linkRes = res;
+            linkRes.target = item.target ?? '_self';
+            if (item.routerLink) {
+                linkRes.routerLink = [item.routerLink.createAbsoluteUrl()];
+                if (!res.visible && item.routerLink.hasCanBeEnteredGuard) {
+                    const canBeEntered = item.routerLink.canBeEntered.bind(item.routerLink);
+                    linkRes.visible = () => canBeEntered(injector);
+                }
+            }
+            return linkRes;
+        }
+        else {
+            const linkRes = res;
+            if (item.externalLink) {
+                if (item.queryParams) {
+                    linkRes.externalLink = RdtStringUtils.appendQueryParams(item.externalLink, item.queryParams);
+                }
+                else {
+                    linkRes.externalLink = item.externalLink;
+                }
+            }
+            linkRes.target = item.target ?? '_blank';
+            return linkRes;
+        }
+    })
+        .filter((item) => !item.visible || item.visible())
+        .filter((item) => item.externalLink ||
+        item['routerLink'] ||
+        item.command ||
+        (item['items']?.length ?? 0) > 0);
+}
+var RdtMenuExpandSource;
+(function (RdtMenuExpandSource) {
+    RdtMenuExpandSource[RdtMenuExpandSource["Click"] = 0] = "Click";
+    RdtMenuExpandSource[RdtMenuExpandSource["Hover"] = 1] = "Hover";
+    RdtMenuExpandSource[RdtMenuExpandSource["Shortcut"] = 2] = "Shortcut";
+    RdtMenuExpandSource[RdtMenuExpandSource["Focus"] = 3] = "Focus";
+})(RdtMenuExpandSource || (RdtMenuExpandSource = {}));
+
 const INVISIBLE_CLASS = 'invisible';
 const FOCUS_VISIBLE = 'focus-visible';
 function getChildRoutesMapRec(item, map) {
@@ -160,7 +231,7 @@ class RdtMenuOverlayComponent {
     keyActions = {
         [KB_CODE.ARROW.UP]: (index) => this.focusPrevItem(index),
         [KB_CODE.ARROW.DOWN]: (index) => this.focusNextItem(index),
-        [KB_CODE.ARROW.RIGHT]: (index) => this.openSubmenu(index, 'first'),
+        [KB_CODE.ARROW.RIGHT]: (index) => this.openSubmenu(index, 'first', RdtMenuExpandSource.Shortcut),
         [KB_CODE.ARROW.LEFT]: () => this.closeSelf(),
         [KB_CODE.HOME]: () => this.focusItem(0),
         [KB_CODE.END]: () => this.focusItem(this.item.items.length - 1),
@@ -168,6 +239,17 @@ class RdtMenuOverlayComponent {
         [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
         [KB_CODE.SPACEBAR]: (index) => this.invokeItemClickByIndex(index),
     };
+    get selfExpandSrc() {
+        if (this.expanded) {
+            if (this.parentMenu) {
+                return this.parentMenu.expandedChild?.src;
+            }
+            else {
+                return this.topLevelMenu.expandedChild?.src;
+            }
+        }
+        return undefined;
+    }
     ngOnInit() {
         this.setClasses();
         this.listenTabKeyPress();
@@ -273,35 +355,26 @@ class RdtMenuOverlayComponent {
         this.recalculateChildren();
     }
     onItemPointerEnter(item) {
-        if (this.topLevelMenu.openOnHover) {
-            if (this.expandedChild !== item && menuItemHasChildren(item)) {
-                this.autofocusSubmenuItem = null;
-                this.expandedChild = item;
+        if (this.topLevelMenu.openOnHover &&
+            this.expandedChild?.src !== RdtMenuExpandSource.Click) {
+            this.autofocusSubmenuItem = null;
+            if (menuItemHasChildren(item)) {
+                this.expandedChild = { item, src: RdtMenuExpandSource.Hover };
+                this.expanded = true;
             }
-            let menu = this.parentMenu;
-            let item2 = this.item;
-            while (menu && !menu.expandedChild) {
-                menu.expandedChild = item2;
-                menu.expanded = true;
-                item2 = menu.item;
-                menu = menu.parentMenu;
+            else {
+                //console.log('expanded child', this.expandedChild);
+                this.expandedChild = null;
             }
         }
     }
-    onItemPointerLeave(item) {
-        if (this.expandedChild &&
-            this.topLevelMenu.openOnHover &&
-            this.expandedChild === item &&
-            menuItemHasChildren(item)) {
-            this.autofocusSubmenuItem = null;
-            this.expandedChild = null;
-        }
-    }
     onItemClick(item) {
         const hasChildren = menuItemHasChildren(item);
-        if (hasChildren && this.expandedChild !== item) {
+        if ((hasChildren && this.expandedChild?.item !== item) ||
+            (this.topLevelMenu.openOnHover &&
+                this.expandedChild?.src === RdtMenuExpandSource.Hover)) {
             this.autofocusSubmenuItem = null;
-            this.expandedChild = item;
+            this.expandedChild = { item, src: RdtMenuExpandSource.Click };
         }
         else {
             this.expandedChild = null;
@@ -327,7 +400,7 @@ class RdtMenuOverlayComponent {
     }
     closeSubmenus(focusExpanded = false) {
         if (focusExpanded && this.expandedChild) {
-            this.focusItem(this.expandedChild);
+            this.focusItem(this.expandedChild.item);
         }
         this.expandedChild = null;
         this.cd.markForCheck();
@@ -338,7 +411,7 @@ class RdtMenuOverlayComponent {
         this.autofocusSubmenuItem = null;
         this.autofocusItem = null;
         if (children.length > 0) {
-            this.expandAndGetChild(thisItem)
+            this.expandAndGetChild(thisItem, RdtMenuExpandSource.Focus)
                 .pipe(delay(1))
                 .subscribe((overlay) => {
                 overlay.focusItemRecursively(children);
@@ -355,11 +428,11 @@ class RdtMenuOverlayComponent {
             setTimeout(() => this.focusItem(thisItem), 1);
         }
     }
-    expandAndGetChild(item) {
+    expandAndGetChild(item, src) {
         if (this.item.items.indexOf(item) < 0) {
             throw new Error('Attempting to expand item that is not child item of this.item');
         }
-        this.expandedChild = item;
+        this.expandedChild = { item, src };
         this.cd.markForCheck();
         const child = this.children.find((child) => child.item === item);
         if (child) {
@@ -439,10 +512,10 @@ class RdtMenuOverlayComponent {
         const prev = (itemIndex - 1 + this.item.items.length) % this.item.items.length;
         this.focusItem(prev);
     }
-    openSubmenu(itemIndex, visibleFocus) {
+    openSubmenu(itemIndex, visibleFocus, src) {
         if (itemIndex < this.item.items.length &&
             menuItemHasChildren(this.item.items[itemIndex])) {
-            this.expandedChild = this.item.items[itemIndex];
+            this.expandedChild = { item: this.item.items[itemIndex], src };
             this.autofocusSubmenuItem = visibleFocus;
         }
     }
@@ -455,7 +528,7 @@ class RdtMenuOverlayComponent {
         }
     }
     checkActiveElement(event) {
-        if (this.topLevelMenu.closeOnFocusOut) {
+        if (this.topLevelMenu.closeOnFocusOut && !this.topLevelMenu.openOnHover) {
             const thisEl = this.elRef.nativeElement;
             const target = event.relatedTarget;
             if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
@@ -641,11 +714,11 @@ class RdtMenuOverlayComponent {
             .subscribe((event) => this.onTabKeyPress(event));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: { item: "item", level: "level", preferredHorizontalDir: "preferredHorizontalDir", preferredVerticalDir: "preferredVerticalDir", expanded: "expanded", autofocusItem: "autofocusItem", anchorElement: "anchorElement" }, host: { listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "this.expanded", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabindexAttr", "style.z-index": "this.zIndex" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (pointerleave)=\"onItemPointerLeave(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        (pointerenter)=\"onItemPointerEnter(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expandedChild\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span class=\"menu-item-icon\" *ngIf=\"item.items\">&gt;</span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [queryParams]=\"item.queryParams\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n      [level]=\"level + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--rdt-menu-item-background-route-active)}.menu-item:before{content:\"\";display:block;position:absolute;top:calc(-1 * var(--rdt-menu-item-hitbox-y));left:calc(-1 * var(--rdt-menu-item-hitbox-x));width:calc(100% + 2 * var(--rdt-menu-item-hitbox-x));height:calc(100% + 2 * var(--rdt-menu-item-hitbox-y));z-index:-1}.menu-item-content{display:flex;align-items:center;padding:var(--rdt-menu-item-padding);width:100%;background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color)}.menu-item-content:hover{background-color:var(--rdt-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--rdt-menu-item-background-focus);outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["anyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: { item: "item", level: "level", preferredHorizontalDir: "preferredHorizontalDir", preferredVerticalDir: "preferredVerticalDir", expanded: "expanded", autofocusItem: "autofocusItem", anchorElement: "anchorElement" }, host: { listeners: { "window:focusout": "checkActiveElement($event)" }, properties: { "class.expanded": "this.expanded", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabindexAttr", "style.z-index": "this.zIndex" } }, viewQueries: [{ propertyName: "menuItemContainer", first: true, predicate: ["menuItemContainer"], descendants: true }, { propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expandedChild?.item\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span\r\n            class=\"menu-item-icon rdt-menu-icon-right\"\r\n            *ngIf=\"item.items\"\r\n          ></span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [queryParams]=\"item.queryParams\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n      [level]=\"level + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item [aria-expanded=true].menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (pointerleave)=\"onItemPointerLeave(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        (pointerenter)=\"onItemPointerEnter(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expandedChild\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span class=\"menu-item-icon\" *ngIf=\"item.items\">&gt;</span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [queryParams]=\"item.queryParams\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n      [level]=\"level + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px));overflow-y:auto}:host.expanded{visibility:visible}.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-item-background)}.menu-item{cursor:pointer;position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{background-color:var(--rdt-menu-item-background-route-active)}.menu-item:before{content:\"\";display:block;position:absolute;top:calc(-1 * var(--rdt-menu-item-hitbox-y));left:calc(-1 * var(--rdt-menu-item-hitbox-x));width:calc(100% + 2 * var(--rdt-menu-item-hitbox-x));height:calc(100% + 2 * var(--rdt-menu-item-hitbox-y));z-index:-1}.menu-item-content{display:flex;align-items:center;padding:var(--rdt-menu-item-padding);width:100%;background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color)}.menu-item-content:hover{background-color:var(--rdt-menu-item-background-hover)}.menu-item-content.focus-visible:focus,.menu-item-content:focus-visible{background-color:var(--rdt-menu-item-background-focus);outline:none}\n"] }]
+            args: [{ selector: 'rdt-menu-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"menu-item-container\" role=\"presentation\" #menuItemContainer>\r\n  <li\r\n    *ngFor=\"let item of item.items; let i = index\"\r\n    role=\"presentation\"\r\n    class=\"menu-item\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerenter)=\"onItemPointerEnter(item)\"\r\n    rdtAnyRouteActive=\"menu-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expandedChild?.item\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO:\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"chevron_right\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-item-icon\"\r\n          />\r\n        -->\r\n          <span\r\n            class=\"menu-item-icon rdt-menu-icon-right\"\r\n            *ngIf=\"item.items\"\r\n          ></span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!-- TODO:\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-item-icon\"\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [queryParams]=\"item.queryParams\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <!-- Child menus exist only if this menu is expanded. -->\r\n    <!-- Only one invisible level is always attached to DOM, the rest does not exist. -->\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items && expanded\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"horizontalDir?.dir!\"\r\n      [preferredVerticalDir]=\"verticalDir?.dir!\"\r\n      [level]=\"level + 1\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: [":host{visibility:hidden;position:fixed;min-width:var(--rdt-menu-min-width);box-shadow:var(--rdt-menu-box-shadow);border-radius:var(--rdt-menu-border-radius);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - var(--rdt-menu-margin-top, 0px) - var(--rdt-menu-margin-bottom, 0px))}:host.expanded{visibility:visible}ul.menu-item-container{list-style-type:none;padding:var(--rdt-menu-padding-horizontal-padding) 0;border-radius:var(--rdt-menu-border-radius);background-color:var(--rdt-menu-background);margin-top:0;margin-bottom:0;margin-block-start:0;margin-block-end:0}.menu-item-content{cursor:pointer;display:flex;align-items:center;width:100%;padding:var(--rdt-menu-item-padding);background-color:var(--rdt-menu-item-background);color:var(--rdt-menu-item-text-color);border:var(--rdt-menu-item-border);outline:var(--rdt-menu-item-outline)}.menu-item{position:relative;box-sizing:border-box}.menu-item.menu-item-route-active>.menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-route-active-background);--rdt-menu-item-text-color: var(--rdt-menu-item-route-active-text-color);--rdt-menu-item-border: var(--rdt-menu-item-route-active-border);--rdt-menu-item-outline: var(--rdt-menu-item-route-active-outline)}.menu-item .menu-item-content:hover{--rdt-menu-item-background: var(--rdt-menu-item-hover-background);--rdt-menu-item-text-color: var(--rdt-menu-item-hover-text-color);--rdt-menu-item-border: var(--rdt-menu-item-hover-border);--rdt-menu-item-outline: var(--rdt-menu-item-hover-outline)}.menu-item [aria-expanded=true].menu-item-content{--rdt-menu-item-background: var(--rdt-menu-item-expanded-background);--rdt-menu-item-text-color: var(--rdt-menu-item-expanded-text-color);--rdt-menu-item-border: var(--rdt-menu-item-expanded-border);--rdt-menu-item-outline: var(--rdt-menu-item-expanded-outline)}.menu-item .menu-item-content.focus-visible:focus,.menu-item .menu-item-content:focus-visible{--rdt-menu-item-background: var(--rdt-menu-item-focus-background);--rdt-menu-item-text-color: var(--rdt-menu-item-focus-text-color);--rdt-menu-item-border: var(--rdt-menu-item-focus-border);--rdt-menu-item-outline: var(--rdt-menu-item-focus-outline)}.menu-item-icon.rdt-menu-icon-right{width:0;height:0;border-top:var(--rdt-menu-default-icon-size) solid transparent;border-bottom:var(--rdt-menu-default-icon-size) solid transparent;border-left:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-item-text-color)}\n"] }]
         }], propDecorators: { children: [{
                 type: ViewChildren,
                 args: [RdtMenuOverlayComponent]
@@ -694,8 +767,9 @@ class RdtMenuBaseComponent {
     // OPEN_SUBMENU will open its submenu and put focus on the first item in it
     // If item has command or routerLink, it will always be activated and everything closed
     shortcutMode = RdtMenuShortcutMode.OPEN_SUBMENU;
-    closeOnFocusOut = true;
+    closeOnFocusOut = false;
     openOnHover = false;
+    hitboxMargin = 10;
     cd = inject(ChangeDetectorRef);
     destroyRef = inject(DestroyRef);
     rdtRouter = inject(RdtRouterService);
@@ -708,7 +782,7 @@ class RdtMenuBaseComponent {
     children;
     focusableElements;
     classes = 'rdt-menu-base';
-    expanded = null;
+    expandedChild = null;
     autofocusSubmenuItem = null;
     parsedItems;
     get clientSize() {
@@ -719,6 +793,10 @@ class RdtMenuBaseComponent {
         return this._bodyMargin;
     }
     _bodyMargin;
+    get buttonContainerRect() {
+        return this._buttonContainerRect;
+    }
+    _buttonContainerRect;
     allParsedItems;
     childRoutesMap = new Map();
     shortcutSub = new Subscription();
@@ -726,8 +804,8 @@ class RdtMenuBaseComponent {
     keyActions = {
         [KB_CODE.ARROW.LEFT]: (index) => this.focusPrevItem(index),
         [KB_CODE.ARROW.RIGHT]: (index) => this.focusNextItem(index),
-        [KB_CODE.ARROW.DOWN]: (index) => this.openSubmenu(index, 'first'),
-        [KB_CODE.ARROW.UP]: (index) => this.openSubmenu(index, 'last'),
+        [KB_CODE.ARROW.DOWN]: (index) => this.openSubmenu(index, 'first', RdtMenuExpandSource.Shortcut),
+        [KB_CODE.ARROW.UP]: (index) => this.openSubmenu(index, 'last', RdtMenuExpandSource.Shortcut),
         [KB_CODE.HOME]: () => this.focusItem(0),
         [KB_CODE.END]: () => this.focusItem(this.parsedItems.length - 1),
         [KB_CODE.ENTER]: (index) => this.invokeItemClickByIndex(index),
@@ -762,35 +840,36 @@ class RdtMenuBaseComponent {
         });
     }
     closeSubmenus(focusExpanded = false) {
-        if (focusExpanded && this.expanded) {
-            this.focusItem(this.expanded);
+        if (focusExpanded && this.expandedChild) {
+            this.focusItem(this.expandedChild.item);
         }
-        this.expanded = null;
+        this.expandedChild = null;
         this.cd.markForCheck();
     }
     onItemClick(item) {
-        if (menuItemHasChildren(item) && this.expanded !== item) {
+        if ((menuItemHasChildren(item) && this.expandedChild?.item !== item) ||
+            (this.openOnHover &&
+                this.expandedChild?.src === RdtMenuExpandSource.Hover)) {
             this.autofocusSubmenuItem = null;
-            this.expanded = item;
+            this.expandedChild = { item, src: RdtMenuExpandSource.Click };
         }
         else {
-            this.expanded = null;
+            this.expandedChild = null;
         }
         if (typeof item.command === 'function') {
             item.command();
         }
     }
     onItemPointerEnter(item) {
-        if (this.openOnHover &&
-            this.expanded !== item &&
-            menuItemHasChildren(item)) {
-            this.autofocusSubmenuItem = null;
-            this.expanded = item;
-        }
-    }
-    onItemPointerLeave(item) {
-        if (this.openOnHover && this.expanded === item) {
-            this.expanded = null;
+        if (this.openOnHover) {
+            if (menuItemHasChildren(item) &&
+                this.expandedChild?.src !== RdtMenuExpandSource.Click) {
+                this.autofocusSubmenuItem = null;
+                this.expandedChild = { item, src: RdtMenuExpandSource.Hover };
+            }
+            else {
+                this.expandedChild = null;
+            }
         }
     }
     onKeyDown(itemIndex, event) {
@@ -879,12 +958,12 @@ class RdtMenuBaseComponent {
         }
         this.invokeItemClick(item);
     }
-    openSubmenu(itemIndex, visibleFocus) {
+    openSubmenu(itemIndex, visibleFocus, src) {
         if (itemIndex < this.parsedItems.length &&
             menuItemHasChildren(this.parsedItems[itemIndex])) {
             const item = this.parsedItems[itemIndex];
             this.autofocusSubmenuItem = visibleFocus;
-            this.expanded = item;
+            this.expandedChild = { item, src };
         }
     }
     focusItem(item) {
@@ -918,13 +997,27 @@ class RdtMenuBaseComponent {
             elRef.nativeElement.focus();
         }
     }
+    onPointerMove(event) {
+        if (this.openOnHover && this.expandedChild) {
+            const hitboxes = this.getHitboxes();
+            const isInside = hitboxes.some((hitbox) => this.isPointerInsideHitbox(hitbox.rect, event));
+            for (let i = hitboxes.length - 1; i >= 0; i--) {
+                const hitbox = hitboxes[i];
+                if (!hitbox.fixed && !isInside) {
+                    hitbox.close();
+                    break;
+                }
+            }
+        }
+    }
     // Closes menu if user navigates outside it using Tab.
     checkActiveElement(event) {
-        if (this.closeOnFocusOut) {
+        if (this.closeOnFocusOut && !this.openOnHover) {
+            console.log('focusout', event);
             const thisEl = this.elRef.nativeElement;
             const target = event.relatedTarget;
             if (!(target instanceof HTMLElement) || !thisEl.contains(target)) {
-                this.expanded = null;
+                this.expandedChild = null;
             }
         }
     }
@@ -936,6 +1029,7 @@ class RdtMenuBaseComponent {
         }
     }
     measure() {
+        this.measureButtonContainer();
         this.measureClientSize();
         this.readMargin();
     }
@@ -958,6 +1052,15 @@ class RdtMenuBaseComponent {
             height: this.document.body.clientHeight,
         };
     }
+    measureButtonContainer() {
+        const el = this.buttonContainer;
+        if (el) {
+            this._buttonContainerRect = el.getBoundingClientRect();
+        }
+        else {
+            this._buttonContainerRect = undefined;
+        }
+    }
     listenWindowResize() {
         fromEvent(window, 'resize')
             .pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), takeUntilDestroyed(this.destroyRef))
@@ -1001,10 +1104,10 @@ class RdtMenuBaseComponent {
             }
         }
         else {
-            this.activateItemRecursively(path);
+            this.activateItemRecursively(path, RdtMenuExpandSource.Shortcut);
         }
     }
-    activateItemRecursively(path) {
+    activateItemRecursively(path, src) {
         const children = [...path];
         if (this.shortcutMode === RdtMenuShortcutMode.OPEN_SUBMENU) {
             const last = children[children.length - 1];
@@ -1014,17 +1117,55 @@ class RdtMenuBaseComponent {
         }
         const thisItem = children.shift();
         if (children.length > 0) {
-            this.expanded = thisItem;
+            this.expandedChild = { item: thisItem, src };
             const overlay = this.children.find((child) => child.item === thisItem);
             overlay.focusItemRecursively(children);
         }
         else {
-            this.expanded = null;
+            this.expandedChild = null;
             this.focusItem(thisItem);
         }
     }
+    isPointerInsideHitbox(hitbox, event) {
+        const rect = hitbox;
+        const x = event.clientX;
+        const y = event.clientY;
+        return (x >= rect.left - this.hitboxMargin &&
+            x <= rect.right + this.hitboxMargin &&
+            y >= rect.top - this.hitboxMargin &&
+            y <= rect.bottom + this.hitboxMargin);
+    }
+    getHitboxes() {
+        const boxes = this.getOpenMenuBoundingBoxes();
+        const buttonContainerRect = this.buttonContainerRect;
+        if (buttonContainerRect) {
+            boxes.push({ rect: buttonContainerRect, fixed: true, close: () => { } });
+        }
+        return boxes;
+    }
+    getOpenMenuBoundingBoxes() {
+        const boxes = [];
+        this.children.forEach((overlay) => {
+            this.getOpenMenuBoundingBoxesRec(overlay, boxes);
+        });
+        return boxes;
+    }
+    getOpenMenuBoundingBoxesRec(overlay, boxes) {
+        if (overlay.expanded) {
+            let someByClick = false;
+            overlay.children.forEach((child) => (someByClick ||= this.getOpenMenuBoundingBoxesRec(child, boxes)));
+            const fixed = someByClick || overlay.selfExpandSrc === RdtMenuExpandSource.Click;
+            boxes.push({
+                rect: overlay.box,
+                fixed: fixed,
+                close: () => overlay.closeSelf(),
+            });
+            return fixed;
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBaseComponent, inputs: { preferredVerticalDir: "preferredVerticalDir", preferredHorizontalDir: "preferredHorizontalDir", shortcutMode: "shortcutMode", closeOnFocusOut: ["closeOnFocusOut", "closeOnFocusOut", booleanAttribute], openOnHover: ["openOnHover", "openOnHover", booleanAttribute] }, host: { listeners: { "window:focusout": "checkActiveElement($event)", "document:click": "onDocumentClick($event)" }, properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBaseComponent, inputs: { preferredVerticalDir: "preferredVerticalDir", preferredHorizontalDir: "preferredHorizontalDir", shortcutMode: "shortcutMode", closeOnFocusOut: ["closeOnFocusOut", "closeOnFocusOut", booleanAttribute], openOnHover: ["openOnHover", "openOnHover", booleanAttribute], hitboxMargin: ["hitboxMargin", "hitboxMargin", numberAttribute] }, host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:focusout": "checkActiveElement($event)", "document:click": "onDocumentClick($event)" }, properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "children", predicate: RdtMenuOverlayComponent, descendants: true }, { propertyName: "focusableElements", predicate: ["focusableItem"], descendants: true }], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBaseComponent, decorators: [{
             type: Directive
@@ -1040,6 +1181,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }], openOnHover: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], hitboxMargin: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], children: [{
                 type: ViewChildren,
                 args: [RdtMenuOverlayComponent]
@@ -1049,6 +1193,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }], classes: [{
                 type: HostBinding,
                 args: ['class']
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['window:pointermove', ['$event']]
             }], checkActiveElement: [{
                 type: HostListener,
                 args: ['window:focusout', ['$event']]
@@ -1057,132 +1204,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-function parseMenuItems(items, injector, prefix = '') {
-    return items
-        .map((item) => {
-        let newPrefix;
-        if (item.dataTestId) {
-            newPrefix = item.dataTestId;
-        }
-        else if (prefix) {
-            newPrefix = RdtStringUtils.getDataTestId(item.label, prefix);
-        }
-        else {
-            newPrefix = RdtStringUtils.getDataTestId(item.label);
-        }
-        const newDataTestId = RdtStringUtils.getDataTestId(newPrefix, null, 'menu-item');
-        const res = {
-            label: item.label,
-            icon: item.icon,
-            shortcut: item.shortcut,
-            command: item.command,
-            visible: item.visible,
-            queryParams: item.queryParams,
-            requiredParent: item.requiredParent,
-            dataTestId: newDataTestId,
-        };
-        if (item.items) {
-            const childrenRes = res;
-            const parsedChildren = parseMenuItems(item.items, injector, newPrefix);
-            if (parsedChildren.length > 0) {
-                childrenRes.items = parsedChildren;
-            }
-            return childrenRes;
-        }
-        else if (item.routerLink) {
-            const linkRes = res;
-            linkRes.target = item.target ?? '_self';
-            if (item.routerLink) {
-                linkRes.routerLink = [item.routerLink.createAbsoluteUrl()];
-                if (!res.visible && item.routerLink.hasCanBeEnteredGuard) {
-                    const canBeEntered = item.routerLink.canBeEntered.bind(item.routerLink);
-                    linkRes.visible = () => canBeEntered(injector);
-                }
-            }
-            return linkRes;
-        }
-        else {
-            const linkRes = res;
-            if (item.externalLink) {
-                if (item.queryParams) {
-                    linkRes.externalLink = RdtStringUtils.appendQueryParams(item.externalLink, item.queryParams);
-                }
-                else {
-                    linkRes.externalLink = item.externalLink;
-                }
-            }
-            linkRes.target = item.target ?? '_blank';
-            return linkRes;
-        }
-    })
-        .filter((item) => !item.visible || item.visible())
-        .filter((item) => item.externalLink ||
-        item['routerLink'] ||
-        item.command ||
-        (item['items']?.length ?? 0) > 0);
-}
-
-class RdtMenuComponent extends RdtMenuBaseComponent {
-    buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
-    dataTestId = '';
-    get item() {
-        return this._item;
-    }
-    set item(value) {
-        this._item = value;
-        this.allParsedItems = parseMenuItems([value], this.injector);
-        this.filterItems();
-    }
-    _item;
-    onPointerLeave() {
-        this.onItemPointerLeave(this.parsedItem);
-    }
-    get parsedItem() {
-        return this.parsedItems[0];
-    }
-    get buttonInputs() {
-        return {
-            tabIndex: 0,
-            dataTestId: this.dataTestId,
-            label: this.parsedItem.label,
-            icon: this.parsedItem.icon,
-            aria: {
-                role: 'menuitem',
-                'aria-haspopup': 'menu',
-                'aria-expanded': this.expanded === this.parsedItem,
-            },
-        };
-    }
-    toggle() {
-        this.onItemClick(this.parsedItem);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { dataTestId: "dataTestId", item: "item" }, host: { listeners: { "pointerleave": "onPointerLeave()" } }, providers: [
-            {
-                provide: RdtMenuBaseComponent,
-                useExisting: RdtMenuComponent,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"menu-button-container\"\r\n  (pointerenter)=\"onItemPointerEnter(parsedItem)\"\r\n>\r\n  <ng-template\r\n    rdtButtonOutlet\r\n    [inputs]=\"buttonInputs\"\r\n    (click$)=\"toggle()\"\r\n    #outlet=\"rdtButtonOutlet\"\r\n  />\r\n</div>\r\n\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"outlet.instance?.anchorElement\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu{display:block;position:relative}rdt-menu .menu-button-container{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RdtButtonOutletDirective, selector: "[rdtButtonOutlet]", inputs: ["inputs"], outputs: ["click$"], exportAs: ["rdtButtonOutlet"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: RdtMenuBaseComponent,
-                            useExisting: RdtMenuComponent,
-                        },
-                    ], template: "<div\r\n  class=\"menu-button-container\"\r\n  (pointerenter)=\"onItemPointerEnter(parsedItem)\"\r\n>\r\n  <ng-template\r\n    rdtButtonOutlet\r\n    [inputs]=\"buttonInputs\"\r\n    (click$)=\"toggle()\"\r\n    #outlet=\"rdtButtonOutlet\"\r\n  />\r\n</div>\r\n\r\n<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"outlet.instance?.anchorElement\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expanded === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu{display:block;position:relative}rdt-menu .menu-button-container{display:inline-block}\n"] }]
-        }], propDecorators: { dataTestId: [{
-                type: Input
-            }], item: [{
-                type: Input,
-                args: [{ required: true }]
-            }], onPointerLeave: [{
-                type: HostListener,
-                args: ['pointerleave']
-            }] } });
-
 class RdtMenuBarComponent extends RdtMenuBaseComponent {
+    buttonContainerRef;
+    get buttonContainer() {
+        return this.buttonContainerRef?.nativeElement;
+    }
     get items() {
         return this._items;
     }
@@ -1196,12 +1222,12 @@ class RdtMenuBarComponent extends RdtMenuBaseComponent {
     footerHeight = 0;
     roleAttr = 'menubar';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.7", type: RdtMenuBarComponent, selector: "rdt-menu-bar", inputs: { items: "items", headerHeight: ["headerHeight", "headerHeight", numberAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute] }, host: { properties: { "attr.role": "this.roleAttr" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: RdtMenuBarComponent, selector: "rdt-menu-bar", inputs: { items: "items", headerHeight: ["headerHeight", "headerHeight", numberAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute] }, host: { properties: { "attr.role": "this.roleAttr" } }, providers: [
             {
                 provide: RdtMenuBaseComponent,
                 useExisting: RdtMenuBarComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n  <li\r\n    *ngFor=\"let item of parsedItems; let i = index\"\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerleave)=\"onItemPointerLeave(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        (pointerenter)=\"onItemPointerEnter(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expanded\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-bar-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n          <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [target]=\"item.target!\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expanded\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item:before{content:\"\";display:block;position:absolute;top:calc(-1 * var(--rdt-menu-bar-item-hitbox-y));left:calc(-1 * var(--rdt-menu-bar-item-hitbox-x));width:calc(100% + 2 * var(--rdt-menu-bar-item-hitbox-x));height:calc(100% + 2 * var(--rdt-menu-bar-item-hitbox-y));z-index:-1}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["anyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "buttonContainerRef", first: true, predicate: ["buttonContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of parsedItems; track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"item === expandedChild?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.menu-bar-item-content:hover{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content.focus-visible:focus,.menu-bar-item .menu-bar-item-content:focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RdtAnyRouteActiveDirective, selector: "[rdtAnyRouteActive]", inputs: ["rdtAnyRouteActive", "watchedRoutes", "anyRouteActiveOptions", "ariaCurrentWhenActive"] }, { kind: "directive", type: i4.RdtKeyListenerDirective, selector: "[rdtKeyListener]", outputs: ["rdtKeyListener"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuBarComponent, decorators: [{
             type: Component,
@@ -1210,8 +1236,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             provide: RdtMenuBaseComponent,
                             useExisting: RdtMenuBarComponent,
                         },
-                    ], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\">\r\n  <li\r\n    *ngFor=\"let item of parsedItems; let i = index\"\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    (pointerleave)=\"onItemPointerLeave(item)\"\r\n    #anchorEl\r\n  >\r\n    <ng-container *ngIf=\"!item.routerLink && !item.externalLink\">\r\n      <button\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        (pointerenter)=\"onItemPointerEnter(item)\"\r\n        [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item === expanded\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        {{ item.label }}\r\n\r\n        <div class=\"menu-bar-item-right-content\">\r\n          <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n            {{ item.shortcut.label }}\r\n          </span>\r\n          <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n          <span class=\"menu-bar-item-icon\" *ngIf=\"item.items\">v</span>\r\n        </div>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        <span *ngIf=\"item.shortcut\" class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"item.routerLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [routerLink]=\"item.routerLink\"\r\n        [target]=\"item.target!\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"item.externalLink\">\r\n      <a\r\n        #focusableItem\r\n        class=\"menu-bar-item-content\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item)\"\r\n        [href]=\"item.externalLink\"\r\n        [target]=\"item.target\"\r\n        [attr.tabindex]=\"0\"\r\n        [attr.data-testid]=\"item.dataTestId\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n        />\r\n      </a>\r\n    </ng-container>\r\n\r\n    <rdt-menu-overlay\r\n      *ngIf=\"item.items\"\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expanded\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n  </li>\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;border:none;text-decoration:none}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--sub-menu-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;padding-left:0}.menu-bar-item{cursor:pointer;pointer-events:all;color:var(--white);margin:0 .5rem;position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-route-active)}.menu-bar-item[aria-expanded=true] .menu-bar-item-content{background-color:var(--rdt-menu-bar-item-background-expanded)}.menu-bar-item:before{content:\"\";display:block;position:absolute;top:calc(-1 * var(--rdt-menu-bar-item-hitbox-y));left:calc(-1 * var(--rdt-menu-bar-item-hitbox-x));width:calc(100% + 2 * var(--rdt-menu-bar-item-hitbox-x));height:calc(100% + 2 * var(--rdt-menu-bar-item-hitbox-y));z-index:-1}.menu-bar-item-content{display:flex;align-items:center;padding:var(--rdt-menu-bar-item-padding);color:inherit!important;border-radius:var(--rdt-menu-bar-item-border-radius);overflow:hidden;background-color:var(--rdt-menu-bar-item-background)}.menu-bar-item-content:hover{background-color:var(--rdt-menu-bar-item-background-hover)}.menu-bar-item-content.focus-visible:focus,.menu-bar-item-content:focus-visible{outline:none;background-color:var(--rdt-menu-bar-item-background-focus)}\n"] }]
-        }], propDecorators: { items: [{
+                    ], template: "<ul class=\"menu-bar-item-container\" role=\"presentation\" #buttonContainer>\r\n  @for(item of parsedItems; track item; let i = $index) {\r\n  <li\r\n    class=\"menu-bar-item\"\r\n    role=\"presentation\"\r\n    rdtAnyRouteActive=\"menu-bar-item-route-active\"\r\n    [watchedRoutes]=\"getChildRoutes(item)\"\r\n    (rdtKeyListener)=\"onKeyDown(i, $event)\"\r\n    #anchorEl\r\n  >\r\n    @if(!item.routerLink && !item.externalLink) {\r\n    <button\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      (pointerenter)=\"onItemPointerEnter(item)\"\r\n      [attr.aria-haspopup]=\"item.items ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"item === expandedChild?.item\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!-- TODO\r\n          <rdt-icon\r\n            *ngIf=\"item.items\"\r\n            name=\"expand_more\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n          <rdt-icon\r\n            *ngIf=\"item.icon\"\r\n            [name]=\"item.icon\"\r\n            class=\"menu-bar-item-icon\"\r\n            inverted\r\n          />\r\n        -->\r\n        @if(item.items) {\r\n        <span class=\"menu-bar-item-icon rdt-menu-icon-down\"></span>\r\n        }\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n    <ng-template #linkBody let-item>\r\n      {{ item.label }}\r\n\r\n      <div class=\"menu-bar-item-right-content\">\r\n        @if(item.shortcut) {\r\n        <span class=\"menu-item-shortcut\">\r\n          {{ item.shortcut.label }}\r\n        </span>\r\n        }\r\n        <!--\r\n        <rdt-icon\r\n          *ngIf=\"item.icon\"\r\n          [name]=\"item.icon\"\r\n          class=\"menu-bar-item-icon\"\r\n          inverted\r\n        />\r\n      --></div>\r\n    </ng-template>\r\n\r\n    @if(item.routerLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [routerLink]=\"item.routerLink\"\r\n      [target]=\"item.target!\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if(item.externalLink) {\r\n    <a\r\n      #focusableItem\r\n      class=\"menu-bar-item-content\"\r\n      role=\"menuitem\"\r\n      (click)=\"onItemClick(item)\"\r\n      [href]=\"item.externalLink\"\r\n      [target]=\"item.target\"\r\n      [attr.tabindex]=\"0\"\r\n      [attr.data-testid]=\"item.dataTestId\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"linkBody; context: { $implicit: item }\"\r\n      />\r\n    </a>\r\n    } @if (item.items) {\r\n    <rdt-menu-overlay\r\n      [item]=\"$any(item)\"\r\n      [expanded]=\"item === expandedChild?.item\"\r\n      [autofocusItem]=\"autofocusSubmenuItem\"\r\n      [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n      [preferredVerticalDir]=\"preferredVerticalDir\"\r\n      [level]=\"0\"\r\n      [anchorElement]=\"anchorEl\"\r\n    />\r\n    }\r\n  </li>\r\n  }\r\n</ul>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu-bar{-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--rdt-menu-bar-padding)}.menu-bar-item-container{display:flex;list-style-type:none;margin-bottom:0;margin-top:0;margin-block-start:0;margin-block-end:0;padding-left:0}.menu-bar-item{pointer-events:all;margin:var(--rdt-menu-bar-item-margin);position:relative;display:flex;align-items:center;justify-content:center}.menu-bar-item.menu-bar-item-route-active .menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-route-active-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-route-active-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-route-active-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-route-active-outline)}.menu-bar-item [aria-expanded=true].menu-bar-item-content{--rdt-menu-bar-item-background: var( --rdt-menu-bar-item-expanded-background );--rdt-menu-bar-item-text-color: var( --rdt-menu-bar-item-expanded-text-color );--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-expanded-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-expanded-outline)}.menu-bar-item-content{cursor:pointer;display:flex;align-items:center;overflow:hidden;padding:var(--rdt-menu-bar-item-padding);border-radius:var(--rdt-menu-bar-item-border-radius);border:var(--rdt-menu-bar-item-border);background-color:var(--rdt-menu-bar-item-background);color:var(--rdt-menu-bar-item-text-color);outline:var(--rdt-menu-bar-item-outline);font-size:inherit}.menu-bar-item-content:hover{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-hover-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-hover-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-hover-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-hover-outline)}.menu-bar-item .menu-bar-item-content.focus-visible:focus,.menu-bar-item .menu-bar-item-content:focus-visible{--rdt-menu-bar-item-background: var(--rdt-menu-bar-item-focus-background);--rdt-menu-bar-item-text-color: var(--rdt-menu-bar-item-focus-text-color);--rdt-menu-bar-item-border: var(--rdt-menu-bar-item-focus-border);--rdt-menu-bar-item-outline: var(--rdt-menu-bar-item-focus-outline)}.menu-bar-item-icon.rdt-menu-icon-down{width:0;height:0;border-left:var(--rdt-menu-default-icon-size) solid transparent;border-right:var(--rdt-menu-default-icon-size) solid transparent;border-top:var(--rdt-menu-default-icon-size) solid var(--rdt-menu-bar-item-text-color)}\n"] }]
+        }], propDecorators: { buttonContainerRef: [{
+                type: ViewChild,
+                args: ['buttonContainer', { static: true }]
+            }], items: [{
                 type: Input
             }], headerHeight: [{
                 type: Input,
@@ -1224,6 +1253,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['attr.role']
             }] } });
 
+class RdtMenuComponent extends RdtMenuBaseComponent {
+    buttonClass = inject(RDT_BUTTON_BASE_PROVIDER);
+    trigger;
+    dataTestId = '';
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = value;
+        const wrapper = {
+            label: '',
+            icon: '',
+            items: value,
+        };
+        this.allParsedItems = parseMenuItems([wrapper], this.injector);
+        this.filterItems();
+    }
+    _items;
+    focusableElements = new QueryList();
+    get buttonContainer() {
+        return this.anchorElement ?? undefined;
+    }
+    get parsedItem() {
+        return this.parsedItems[0];
+    }
+    get anchorElement() {
+        return this.trigger.anchorElement;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.trigger.tabIndex = 0;
+        this.trigger.dataTestId = this.dataTestId;
+        this.trigger.click$.subscribe(() => this.toggle());
+        this.listenPointerOver();
+        if (this.anchorElement) {
+            console.log('Anchor element:', this.anchorElement);
+            this.focusableElements.reset([{ nativeElement: this.anchorElement }]);
+        }
+    }
+    ngDoCheck() {
+        if (this.trigger) {
+            this.trigger.aria = {
+                role: 'menuitem',
+                'aria-haspopup': 'true',
+                'aria-expanded': this.expandedChild?.item === this.parsedItem,
+            };
+        }
+    }
+    toggle() {
+        this.onItemClick(this.parsedItem);
+        this.cd.markForCheck();
+    }
+    listenPointerOver() {
+        const target = this.anchorElement;
+        const listener = this.renderer.listen(target, 'pointerover', (event) => {
+            this.onItemPointerEnter(this.parsedItem);
+            this.cd.markForCheck();
+        });
+        this.destroyRef.onDestroy(() => listener());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RdtMenuComponent, selector: "rdt-menu", inputs: { trigger: "trigger", dataTestId: "dataTestId", items: "items" }, providers: [
+            {
+                provide: RdtMenuBaseComponent,
+                useExisting: RdtMenuComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"anchorElement!\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu{display:block;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RdtMenuOverlayComponent, selector: "rdt-menu-overlay", inputs: ["item", "level", "preferredHorizontalDir", "preferredVerticalDir", "expanded", "autofocusItem", "anchorElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: RdtMenuBaseComponent,
+                            useExisting: RdtMenuComponent,
+                        },
+                    ], template: "<rdt-menu-overlay\r\n  *ngIf=\"parsedItem\"\r\n  [anchorElement]=\"anchorElement!\"\r\n  [item]=\"$any(parsedItem)\"\r\n  [expanded]=\"expandedChild?.item === parsedItem\"\r\n  [autofocusItem]=\"autofocusSubmenuItem\"\r\n  [preferredHorizontalDir]=\"preferredHorizontalDir\"\r\n  [preferredVerticalDir]=\"preferredVerticalDir\"\r\n  [level]=\"0\"\r\n/>\r\n", styles: ["a.menu-bar-item-content,a.menu-item-content,button.menu-bar-item-content,button.menu-item-content{white-space:nowrap;appearance:none;text-decoration:none;box-sizing:border-box}.menu-item-right-content,.menu-bar-item-right-content{margin-left:auto;display:flex;align-items:center}.menu-item-shortcut,.menu-bar-item-shortcut{margin-left:2rem}.menu-item-icon,.menu-bar-item-icon{margin-left:.5rem;font-size:1.2rem}.dp3-menu-base ul{margin-bottom:0}.rdt-menu-root{margin-left:0}.rdt-menu-root.rdt-overlay-down{margin-top:var(--rdt-menu-overlay-margin-y)}.rdt-menu-root.rdt-overlay-up{margin-top:calc(-1 * var(--rdt-menu-overlay-margin-y))}.rdt-menu-sub.rdt-overlay-left{margin-left:calc(-1 * var(--rdt-menu-overlay-margin-x))}.rdt-menu-sub.rdt-overlay-right{margin-left:var(--rdt-menu-overlay-margin-x)}rdt-menu{display:block;position:relative}\n"] }]
+        }], propDecorators: { trigger: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dataTestId: [{
+                type: Input
+            }], items: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 class RdtMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: RdtMenuModule, declarations: [RdtMenuOverlayComponent,