@cute-widgets/base 20.0.5 → 21.0.0

package/fesm2022/cute-widgets-base-menu.mjs

@@ -1,19 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, DOCUMENT, ChangeDetectorRef, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, isDevMode, QueryList, EventEmitter, afterNextRender, Output, ContentChild, ContentChildren, ViewChild, Inject, Optional, Self, NgModule } from '@angular/core';
-import * as i4 from '@angular/cdk/a11y';
+import { InjectionToken, inject, ElementRef, DOCUMENT, ChangeDetectorRef, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, TemplateRef, ApplicationRef, Injector, ViewContainerRef, Directive, isDevMode, QueryList, signal, EventEmitter, afterNextRender, Output, ContentChild, ContentChildren, ViewChild, NgZone, Renderer2, NgModule } from '@angular/core';
 import { FocusMonitor, FocusKeyManager, isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
-import { Subject, merge, Subscription, of, asapScheduler } from 'rxjs';
-import { startWith, switchMap, takeUntil, filter, take, delay } from 'rxjs/operators';
+import { Subject, merge, Subscription, of } from 'rxjs';
+import { startWith, switchMap, takeUntil, take, filter, skipWhile } from 'rxjs/operators';
 import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { _animationsDisabled } from '@cute-widgets/base/core';
 import * as i1 from '@angular/cdk/menu';
 import { CdkMenu } from '@angular/cdk/menu';
-import * as i1$1 from '@angular/cdk/overlay';
-import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i3 from '@angular/cdk/bidi';
-import { CommonModule } from '@angular/common';
+import { Directionality } from '@angular/cdk/bidi';
+import { createRepositionScrollStrategy, createOverlayRef, OverlayConfig, createFlexibleConnectedPositionStrategy, ViewportRuler, ScrollDispatcher, OverlayModule } from '@angular/cdk/overlay';
+import { _getEventTarget, _getShadowRoot } from '@angular/cdk/platform';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 
 /**
  * @license Apache-2.0
@@ -135,10 +133,10 @@ class CuteMenuItem {
     _hasFocus() {
         return this._document && this._document.activeElement === this._getHostElement();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteMenuItem, isStandalone: true, selector: "[cute-menu-item]", inputs: { role: "role", disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.active": "_highlighted", "class.cute-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled", "disabled": "disabled || null" }, classAttribute: "cute-menu-item" }, exportAs: ["cuteMenuItem"], ngImport: i0, template: "<ng-content select=\"cute-icon, i[class], [cuteMenuItemIcon]\"></ng-content>\r\n<span class=\"cute-menu-item-text\"><ng-content></ng-content></span>\r\n\r\n@if (_triggersSubmenu) {\r\n  <svg class=\"cute-menu-item-submenu-icon\"\r\n       viewBox=\"0 0 5 10\"\r\n       focusable=\"false\"\r\n       aria-hidden=\"true\">\r\n    <polygon points=\"0,0 5,5 0,10\"/>\r\n  </svg>\r\n}\r\n", styles: [".cute-menu-item{display:flex;position:relative;justify-content:flex-start;cursor:pointer;width:100%;text-align:start;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:inherit;margin:0;padding:.25rem 1rem;align-items:center;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none;border:none;outline:none;background:none;pointer-events:auto}.cute-menu-item:hover,.cute-menu-item.active{outline:none;background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item[disabled]{opacity:.38;color:var(--bs-body-color);cursor:default}.cute-menu-item[disabled]:hover,.cute-menu-item[disabled]:focus{outline:none;background-color:var(--bs-body-bg)}.cute-menu-item[disabled]:after{display:block;position:absolute;content:\"\";inset:0}.cute-menu-item:not([disabled]).cdk-keyboard-focused{background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item>[role=img],.cute-menu-item i[class]{position:absolute;left:4px;width:24px;height:24px;line-height:24px;background-repeat:no-repeat;display:inline-block;fill:currentColor;text-align:center;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}[dir=rtl] .cute-menu-item>[role=img],[dir=rtl] .cute-menu-item i[class]{right:4px;left:auto}.cute-menu-item .cute-menu-item-text{margin-left:1rem}[dir=rtl] .cute-menu-item .cute-menu-item-text{margin-right:1rem;margin-left:auto}.cute-menu-item .cute-menu-item-submenu-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor;opacity:.75}[dir=rtl] .cute-menu-item .cute-menu-item-submenu-icon{left:12px;right:auto;transform:translateY(-50%) rotate(180deg)}.cute-menu-item-submenu-trigger{padding-right:2rem}[dir=rtl] .cute-menu-item-submenu-trigger{padding-right:1rem;padding-left:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CuteMenuItem, isStandalone: true, selector: "[cute-menu-item]", inputs: { role: "role", disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.active": "_highlighted", "class.cute-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled", "attr.disabled": "disabled || null" }, classAttribute: "cute-menu-item" }, exportAs: ["cuteMenuItem"], ngImport: i0, template: "<ng-content select=\"cute-icon, i[class], [cuteMenuItemIcon]\"></ng-content>\r\n<span class=\"cute-menu-item-text\"><ng-content></ng-content></span>\r\n\r\n@if (_triggersSubmenu) {\r\n  <svg class=\"cute-menu-item-submenu-icon\"\r\n       viewBox=\"0 0 5 10\"\r\n       focusable=\"false\"\r\n       aria-hidden=\"true\">\r\n    <polygon points=\"0,0 5,5 0,10\"/>\r\n  </svg>\r\n}\r\n", styles: [".cute-menu-item{display:flex;position:relative;justify-content:flex-start;cursor:pointer;width:100%;text-align:start;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:inherit;margin:0;padding:.25rem 1rem;align-items:center;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none;border:none;outline:none;background:none;pointer-events:auto}.cute-menu-item:hover,.cute-menu-item.active{outline:none;background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item[disabled]{opacity:.38;color:var(--bs-body-color);cursor:default}.cute-menu-item[disabled]:hover,.cute-menu-item[disabled]:focus{outline:none;background-color:var(--bs-body-bg)}.cute-menu-item[disabled]:after{display:block;position:absolute;content:\"\";inset:0}.cute-menu-item:not([disabled]).cdk-keyboard-focused{background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item>[role=img],.cute-menu-item i[class]{position:absolute;left:4px;width:24px;height:24px;line-height:24px;background-repeat:no-repeat;display:inline-block;fill:currentColor;text-align:center;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}[dir=rtl] .cute-menu-item>[role=img],[dir=rtl] .cute-menu-item i[class]{right:4px;left:auto}.cute-menu-item .cute-menu-item-text{margin-left:1rem}[dir=rtl] .cute-menu-item .cute-menu-item-text{margin-right:1rem;margin-left:auto}.cute-menu-item .cute-menu-item-submenu-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor;opacity:.75}[dir=rtl] .cute-menu-item .cute-menu-item-submenu-icon{left:12px;right:auto;transform:translateY(-50%) rotate(180deg)}.cute-menu-item-submenu-trigger{padding-right:2rem}[dir=rtl] .cute-menu-item-submenu-trigger{padding-right:1rem;padding-left:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuItem, decorators: [{
             type: Component,
             args: [{ selector: '[cute-menu-item]', exportAs: 'cuteMenuItem', host: {
                         '[attr.role]': 'role',
@@ -148,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         //'[class.disabled]': 'disabled',
                         '[attr.tabindex]': '_getTabIndex()',
                         '[attr.aria-disabled]': 'disabled',
-                        '[disabled]': 'disabled || null',
+                        '[attr.disabled]': 'disabled || null',
                         '(click)': '_checkDisabled($event)',
                         '(mouseenter)': '_handleMouseEnter()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"cute-icon, i[class], [cuteMenuItemIcon]\"></ng-content>\r\n<span class=\"cute-menu-item-text\"><ng-content></ng-content></span>\r\n\r\n@if (_triggersSubmenu) {\r\n  <svg class=\"cute-menu-item-submenu-icon\"\r\n       viewBox=\"0 0 5 10\"\r\n       focusable=\"false\"\r\n       aria-hidden=\"true\">\r\n    <polygon points=\"0,0 5,5 0,10\"/>\r\n  </svg>\r\n}\r\n", styles: [".cute-menu-item{display:flex;position:relative;justify-content:flex-start;cursor:pointer;width:100%;text-align:start;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:inherit;margin:0;padding:.25rem 1rem;align-items:center;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none;border:none;outline:none;background:none;pointer-events:auto}.cute-menu-item:hover,.cute-menu-item.active{outline:none;background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item[disabled]{opacity:.38;color:var(--bs-body-color);cursor:default}.cute-menu-item[disabled]:hover,.cute-menu-item[disabled]:focus{outline:none;background-color:var(--bs-body-bg)}.cute-menu-item[disabled]:after{display:block;position:absolute;content:\"\";inset:0}.cute-menu-item:not([disabled]).cdk-keyboard-focused{background-color:rgba(var(--bs-body-color-rgb),.04)}.cute-menu-item>[role=img],.cute-menu-item i[class]{position:absolute;left:4px;width:24px;height:24px;line-height:24px;background-repeat:no-repeat;display:inline-block;fill:currentColor;text-align:center;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}[dir=rtl] .cute-menu-item>[role=img],[dir=rtl] .cute-menu-item i[class]{right:4px;left:auto}.cute-menu-item .cute-menu-item-text{margin-left:1rem}[dir=rtl] .cute-menu-item .cute-menu-item-text{margin-right:1rem;margin-left:auto}.cute-menu-item .cute-menu-item-submenu-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:5px;height:10px;fill:currentColor;opacity:.75}[dir=rtl] .cute-menu-item .cute-menu-item-submenu-icon{left:12px;right:auto;transform:translateY(-50%) rotate(180deg)}.cute-menu-item-submenu-trigger{padding-right:2rem}[dir=rtl] .cute-menu-item-submenu-trigger{padding-right:1rem;padding-left:2rem}\n"] }]
@@ -265,10 +263,10 @@ class CuteMenuContent {
         this.detach();
         this._outlet?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteMenuContent, isStandalone: true, selector: "ng-template[cuteMenuContent]", providers: [{ provide: CUTE_MENU_CONTENT, useExisting: CuteMenuContent }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteMenuContent, isStandalone: true, selector: "ng-template[cuteMenuContent]", providers: [{ provide: CUTE_MENU_CONTENT, useExisting: CuteMenuContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cuteMenuContent]',
@@ -277,70 +275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- *
- * This code is a modification of the `@angular/material` original
- * code licensed under MIT-style License (https://angular.dev/license).
- */
-/**
- * Animations used by the cute-menu component.
- * Animation duration and timing values are based on:
- * https://material.io/guidelines/components/menus.html#menus-usage
- * @docs-private
- */
-const cuteMenuAnimations = {
-    /**
-     * This animation controls the menu panel's entry and exit from the page.
-     *
-     * When the menu panel is added to the DOM, it scales in and fades in its border.
-     *
-     * When the menu panel is removed from the DOM, it simply fades out after a brief
-     * delay to display the ripple.
-     */
-    transformMenu: trigger('transformMenu', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(0.8)',
-        })),
-        transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-            opacity: 1,
-            transform: 'scale(1)',
-        }))),
-        transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 }))),
-    ]),
-    /**
-     * This animation fades in the background color and content of the menu panel
-     * after its containing element is scaled in.
-     */
-    fadeInItems: trigger('fadeInItems', [
-        // TODO(crisbeto): this is inside the `transformMenu`
-        // now. Remove next time we do breaking changes.
-        state('showing', style({ opacity: 1 })),
-        transition('void => *', [
-            style({ opacity: 0 }),
-            animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
-        ]),
-    ]),
-};
-/**
- * @deprecated
- * @breaking-change 8.0.0
- * @docs-private
- */
-//export const fadeInItems = cuteMenuAnimations.fadeInItems;
-/**
- * @deprecated
- * @breaking-change 8.0.0
- * @docs-private
- */
-//export const transformMenu = cuteMenuAnimations.transformMenu;
-
 /**
  * @license Apache-2.0
  *
@@ -356,21 +290,17 @@ let menuPanelUid = 0;
 /** Injection token to be used to override the default options for `mat-menu`. */
 const CUTE_MENU_DEFAULT_OPTIONS = new InjectionToken('cute-menu-default-options', {
     providedIn: 'root',
-    factory: CUTE_MENU_DEFAULT_OPTIONS_FACTORY,
-});
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-function CUTE_MENU_DEFAULT_OPTIONS_FACTORY() {
-    return {
+    factory: () => ({
         overlapTrigger: false,
         xPosition: 'after',
         yPosition: 'below',
         backdropClass: 'cdk-overlay-transparent-backdrop',
-    };
-}
+    }),
+});
+/** Name of the enter animation `@keyframes`. */
+const ENTER_ANIMATION = '_cute-menu-enter';
+/** Name of the exit animation `@keyframes`. */
+const EXIT_ANIMATION = '_cute-menu-exit';
 class CuteMenu {
     /** Position of the menu in the X axis. */
     get xPosition() { return this._xPosition; }
@@ -393,7 +323,7 @@ class CuteMenu {
         this.setPositionClasses();
     }
     /**
-     * This method takes classes set on the host mat-menu element and applies them on the
+     * This method takes classes set on the host cute-menu element and applies them on the
      * menu template that displays in the overlay container.  Otherwise, it's difficult
      * to style the containing menu from outside the component.
      * @param classes list of class names
@@ -421,14 +351,17 @@ class CuteMenu {
         this._injector = inject(Injector);
         this._elevationPrefix = 'shadow';
         this._baseElevation = 1;
+        this._animationsDisabled = _animationsDisabled();
+        /** Only the direct descendant menu items. */
+        this._directDescendantItems = new QueryList();
         /** Config object to be passed into the menu's ngClass */
         this._classList = {};
         /** Current state of the panel animation. */
         this._panelAnimationState = 'void';
-        /** Only the direct descendant menu items. */
-        this._directDescendantItems = new QueryList();
         /** Emits whenever an animation on the menu completes. */
         this._animationDone = new Subject();
+        /** Whether the menu is animating. */
+        this._isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isAnimating" }] : []));
         /** Event emitted when the menu is closed. */
         this.closed = new EventEmitter();
         this.panelId = `cute-menu-panel-${menuPanelUid++}`;
@@ -597,8 +530,8 @@ class CuteMenu {
     /**
      * Adds classes to the menu panel based on its position. Can be used by
      * consumers to add specific styling based on the position.
-     * @param posX Position of the menu along the x axis.
-     * @param posY Position of the menu along the y axis.
+     * @param posX Position of the menu along the x-axis.
+     * @param posY Position of the menu along the y-axis.
      */
     setPositionClasses(posX = this.xPosition, posY = this.yPosition) {
         const classes = this._classList;
@@ -608,32 +541,52 @@ class CuteMenu {
         classes['cute-menu-below'] = posY === 'below';
         this._changeDetectorRef.markForCheck();
     }
-    /** Starts the entered animation. */
-    _startAnimation() {
-        // @breaking-change 8.0.0 Combine with _resetAnimation.
-        this._panelAnimationState = 'enter';
+    /** Callback that is invoked when the panel animation completes. */
+    _onAnimationDone(state) {
+        const isExit = state === EXIT_ANIMATION;
+        if (isExit || state === ENTER_ANIMATION) {
+            if (isExit) {
+                clearTimeout(this._exitFallbackTimeout);
+                this._exitFallbackTimeout = undefined;
+            }
+            this._animationDone.next(isExit ? 'void' : 'enter');
+            this._isAnimating.set(false);
+        }
     }
-    /** Resets the panel animation to its initial state. */
-    _resetAnimation() {
-        // @breaking-change 8.0.0 Combine with _startAnimation.
-        this._panelAnimationState = 'void';
+    _onAnimationStart(state) {
+        if (state === ENTER_ANIMATION || state === EXIT_ANIMATION) {
+            this._isAnimating.set(true);
+        }
     }
-    /** Callback that is invoked when the panel animation completes. */
-    _onAnimationDone(event) {
-        this._animationDone.next(event);
-        this._isAnimating = false;
-    }
-    _onAnimationStart(event) {
-        this._isAnimating = true;
-        // Scroll the content element to the top as soon as the animation starts. This is necessary,
-        // because we move focus to the first item while it's still being animated, which can throw
-        // the browser off when it determines the scroll position. Alternatively, we can move focus
-        // when the animation is done, however, moving focus asynchronously will interrupt screen
-        // readers which are in the process of reading out the menu already. We take the `element`
-        // from the `event` since we can't use a `ViewChild` to access the pane.
-        if (event.toState === 'enter' && this._keyManager?.activeItemIndex === 0) {
-            event.element.scrollTop = 0;
+    _setIsOpen(isOpen) {
+        this._panelAnimationState = isOpen ? 'enter' : 'void';
+        if (isOpen) {
+            if (this._keyManager?.activeItemIndex === 0) {
+                // Scroll the content element to the top as soon as the animation starts. This is necessary,
+                // because we move focus to the first item while it's still being animated, which can throw
+                // the browser off when it determines the scroll position. Alternatively we can move focus
+                // when the animation is done, however moving focus asynchronously will interrupt screen
+                // readers which are in the process of reading out the menu already. We take the `element`
+                // from the `event` since we can't use a `ViewChild` to access the pane.
+                const menuPanel = this._resolvePanel();
+                if (menuPanel) {
+                    menuPanel.scrollTop = 0;
+                }
+            }
         }
+        else if (!this._animationsDisabled) {
+            // Some apps do `* { animation: none !important; }` in tests which will prevent the
+            // `animationend` event from firing. Since the exit animation is loading-bearing for
+            // removing the content from the DOM, add a fallback timer.
+            this._exitFallbackTimeout = setTimeout(() => this._onAnimationDone(EXIT_ANIMATION), 200);
+        }
+        // Animation events won't fire when animations are disabled so we simulate them.
+        if (this._animationsDisabled) {
+            setTimeout(() => {
+                this._onAnimationDone(isOpen ? ENTER_ANIMATION : EXIT_ANIMATION);
+            });
+        }
+        this._changeDetectorRef.markForCheck();
     }
     /**
      * Sets up a stream that will keep track of any newly-added menu items and will update the list
@@ -653,7 +606,7 @@ class CuteMenu {
     _resolvePanel() {
         let menuPanel = null;
         if (this._directDescendantItems.length) {
-            // Because the `mat-menuPanel` is at the DOM insertion point, not inside the overlay, we don't
+            // Because the `cute-menuPanel` is at the DOM insertion point, not inside the overlay, we don't
             // have a nice way of getting a hold of the menuPanel panel. We can't use a `ViewChild` either
             // because the panel is inside an `ng-template`. We work around it by starting from one of
             // the items and walking up the DOM.
@@ -661,18 +614,21 @@ class CuteMenu {
         }
         return menuPanel;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteMenu, isStandalone: true, selector: "cute-menu", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], xPosition: "xPosition", yPosition: "yPosition", overlapTrigger: ["overlapTrigger", "overlapTrigger", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", (value) => (value == null ? null : booleanAttribute(value))], panelClass: ["class", "panelClass"] }, outputs: { closed: "closed" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "cute-menu" }, providers: [{ provide: CUTE_MENU_PANEL, useExisting: CuteMenu }], queries: [{ propertyName: "lazyContent", first: true, predicate: CUTE_MENU_CONTENT, descendants: true }, { propertyName: "_allItems", predicate: CuteMenuItem, descendants: true }, { propertyName: "items", predicate: CuteMenuItem }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cuteMenu"], hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0, template: "<ng-template>\r\n  <div\r\n    class=\"cute-menu-panel\"\r\n    [id]=\"panelId\"\r\n    [class]=\"_classList\"\r\n    (keydown)=\"_handleKeydown($event)\"\r\n    (click)=\"onClick($event)\"\r\n    [@transformMenu]=\"_panelAnimationState\"\r\n    (@transformMenu.start)=\"_onAnimationStart($event)\"\r\n    (@transformMenu.done)=\"_onAnimationDone($event)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"cute-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cute-menu{display:block}.cute-menu-panel{min-width:112px;max-width:280px;overflow:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;will-change:transform,opacity}.cute-menu-panel .cute-menu-content{display:block;width:100%;padding:.5rem 0;font-size:1rem;color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-menu-panel .cute-menu-content [role=separator]{margin:.5rem 0!important;max-height:1px}\n"], animations: [cuteMenuAnimations.transformMenu, cuteMenuAnimations.fadeInItems], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.0", type: CuteMenu, isStandalone: true, selector: "cute-menu", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], xPosition: "xPosition", yPosition: "yPosition", overlapTrigger: ["overlapTrigger", "overlapTrigger", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", (value) => (value == null ? null : booleanAttribute(value))], panelClass: ["class", "panelClass"] }, outputs: { closed: "closed" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "cute-menu" }, providers: [{ provide: CUTE_MENU_PANEL, useExisting: CuteMenu }], queries: [{ propertyName: "lazyContent", first: true, predicate: CUTE_MENU_CONTENT, descendants: true }, { propertyName: "_allItems", predicate: CuteMenuItem, descendants: true }, { propertyName: "items", predicate: CuteMenuItem }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cuteMenu"], hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0, template: "<ng-template>\r\n  <div\r\n    class=\"cute-menu-panel shadow\"\r\n    [id]=\"panelId\"\r\n    [class]=\"_classList\"\r\n    [class.cute-menu-panel-animations-disabled]=\"_animationsDisabled\"\r\n    [class.cute-menu-panel-exit-animation]=\"_panelAnimationState === 'void'\"\r\n    [class.cute-menu-panel-animating]=\"_isAnimating()\"\r\n    (click)=\"onClick($event)\"\r\n    (animationstart)=\"_onAnimationStart($event.animationName)\"\r\n    (animationend)=\"_onAnimationDone($event.animationName)\"\r\n    (animationcancel)=\"_onAnimationDone($event.animationName)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"cute-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cute-menu{display:none}.cute-menu-panel{min-width:112px;max-width:280px;overflow:hidden;box-sizing:border-box;outline:0;animation:_cute-menu-enter .12s cubic-bezier(0,0,.2,1);will-change:transform,opacity}.cute-menu-panel.cute-menu-panel-exit-animation{animation:_cute-menu-exit .1s 25ms linear forwards}.cute-menu-panel.cute-menu-panel-animations-disabled{animation:none}.cute-menu-panel.cute-menu-panel-animating{pointer-events:none}.cute-menu-panel.cute-menu-panel-animating:has(.cute-menu-content:empty){display:none}@media(forced-colors:active){.cute-menu-panel{outline:solid 1px}}.cute-menu-panel .cute-menu-content{display:block;width:100%;padding:.5rem 0;font-size:1rem;color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-menu-panel .cute-menu-content [role=separator]{margin:.5rem 0!important;max-height:1px}@keyframes _cute-menu-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _cute-menu-exit{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cute-menu', exportAs: 'cuteMenu', host: {
                         'class': 'cute-menu',
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                         '[attr.aria-describedby]': 'null',
-                    }, animations: [cuteMenuAnimations.transformMenu, cuteMenuAnimations.fadeInItems], providers: [{ provide: CUTE_MENU_PANEL, useExisting: CuteMenu }], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [CdkMenu], template: "<ng-template>\r\n  <div\r\n    class=\"cute-menu-panel\"\r\n    [id]=\"panelId\"\r\n    [class]=\"_classList\"\r\n    (keydown)=\"_handleKeydown($event)\"\r\n    (click)=\"onClick($event)\"\r\n    [@transformMenu]=\"_panelAnimationState\"\r\n    (@transformMenu.start)=\"_onAnimationStart($event)\"\r\n    (@transformMenu.done)=\"_onAnimationDone($event)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"cute-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cute-menu{display:block}.cute-menu-panel{min-width:112px;max-width:280px;overflow:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;will-change:transform,opacity}.cute-menu-panel .cute-menu-content{display:block;width:100%;padding:.5rem 0;font-size:1rem;color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-menu-panel .cute-menu-content [role=separator]{margin:.5rem 0!important;max-height:1px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { backdropClass: [{
+                    }, providers: [{ provide: CUTE_MENU_PANEL, useExisting: CuteMenu }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [CdkMenu], template: "<ng-template>\r\n  <div\r\n    class=\"cute-menu-panel shadow\"\r\n    [id]=\"panelId\"\r\n    [class]=\"_classList\"\r\n    [class.cute-menu-panel-animations-disabled]=\"_animationsDisabled\"\r\n    [class.cute-menu-panel-exit-animation]=\"_panelAnimationState === 'void'\"\r\n    [class.cute-menu-panel-animating]=\"_isAnimating()\"\r\n    (click)=\"onClick($event)\"\r\n    (animationstart)=\"_onAnimationStart($event.animationName)\"\r\n    (animationend)=\"_onAnimationDone($event.animationName)\"\r\n    (animationcancel)=\"_onAnimationDone($event.animationName)\"\r\n    tabindex=\"-1\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\r\n    [attr.aria-describedby]=\"ariaDescribedby || null\">\r\n    <div class=\"cute-menu-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cute-menu{display:none}.cute-menu-panel{min-width:112px;max-width:280px;overflow:hidden;box-sizing:border-box;outline:0;animation:_cute-menu-enter .12s cubic-bezier(0,0,.2,1);will-change:transform,opacity}.cute-menu-panel.cute-menu-panel-exit-animation{animation:_cute-menu-exit .1s 25ms linear forwards}.cute-menu-panel.cute-menu-panel-animations-disabled{animation:none}.cute-menu-panel.cute-menu-panel-animating{pointer-events:none}.cute-menu-panel.cute-menu-panel-animating:has(.cute-menu-content:empty){display:none}@media(forced-colors:active){.cute-menu-panel{outline:solid 1px}}.cute-menu-panel .cute-menu-content{display:block;width:100%;padding:.5rem 0;font-size:1rem;color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-menu-panel .cute-menu-content [role=separator]{margin:.5rem 0!important;max-height:1px}@keyframes _cute-menu-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _cute-menu-exit{0%{opacity:1}to{opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _allItems: [{
+                type: ContentChildren,
+                args: [CuteMenuItem, { descendants: true }]
+            }], backdropClass: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input,
@@ -696,9 +652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef]
-            }], _allItems: [{
-                type: ContentChildren,
-                args: [CuteMenuItem, { descendants: true }]
             }], items: [{
                 type: ContentChildren,
                 args: [CuteMenuItem, { descendants: false }]
@@ -736,31 +689,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * code licensed under MIT-style License (https://angular.dev/license).
  */
 /** Injection token that determines the scroll handling while the menu is open. */
-const CUTE_MENU_SCROLL_STRATEGY = new InjectionToken('cute-menu-scroll-strategy');
-/** @docs-private */
-function CUTE_MENU_SCROLL_STRATEGY_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
-}
-/** @docs-private */
-const CUTE_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = {
-    provide: CUTE_MENU_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: CUTE_MENU_SCROLL_STRATEGY_FACTORY,
-};
-/** Options for binding a passive event listener. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
+const CUTE_MENU_SCROLL_STRATEGY = new InjectionToken('cute-menu-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => {
+        const injector = inject(Injector);
+        return () => createRepositionScrollStrategy(injector);
+    },
+});
+/**
+ * Default top padding of the menu panel.
+ * @deprecated No longer being used. Will be removed.
+ * @breaking-change 15.0.0
+ */
+const MENU_PANEL_TOP_PADDING = 8;
+/** Mapping between menu panels and the last trigger that opened them. */
+const PANELS_TO_TRIGGERS = new WeakMap();
 /** Directive applied to an element that should trigger a `cute-menu`. */
-class CuteMenuTrigger {
-    /** References the menu instance that the trigger is associated with. */
-    get menu() { return this._menu; }
-    set menu(menu) {
-        if (menu === this._menu) {
+class CuteMenuTriggerBase {
+    /** Element reference that can be used in class compositions. */
+    get elementRef() { return this._element; }
+    /** Menu currently assigned to the trigger. */
+    get _menu() {
+        return this._menuInternal;
+    }
+    set _menu(menu) {
+        if (menu === this._menuInternal) {
             return;
         }
-        this._menu = menu;
+        this._menuInternal = menu;
         this._menuCloseSubscription.unsubscribe();
         if (menu) {
-            if (menu === this._parentCuteMenu && isDevMode()) {
+            if (menu === this._parentCuteMenu && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throwCuteMenuRecursiveError();
             }
             this._menuCloseSubscription = menu.closed.subscribe((reason) => {
@@ -771,65 +730,42 @@ class CuteMenuTrigger {
                 }
             });
         }
-        this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());
-    }
-    constructor(_overlay, _element, _viewContainerRef, scrollStrategy, parentMenu, 
-    // `CuteMenuTrigger` is commonly used in combination with a `CuteMenuItem`.
-    // tslint:disable-next-line: lightweight-tokens
-    _menuItemInstance, _dir, _focusMonitor, _ngZone) {
-        this._overlay = _overlay;
-        this._element = _element;
-        this._viewContainerRef = _viewContainerRef;
-        this._menuItemInstance = _menuItemInstance;
-        this._dir = _dir;
-        this._focusMonitor = _focusMonitor;
-        this._ngZone = _ngZone;
-        this._portal = null;
+        this._menuItemInstance?._setTriggersSubmenu(this._triggersSubmenu());
+    }
+    constructor(_canHaveBackdrop) {
+        this._canHaveBackdrop = _canHaveBackdrop;
+        this._element = inject(ElementRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._menuItemInstance = inject(CuteMenuItem, { optional: true, self: true });
+        this._dir = inject(Directionality, { optional: true });
+        this._focusMonitor = inject(FocusMonitor);
+        this._ngZone = inject(NgZone);
+        this._injector = inject(Injector);
+        this._scrollStrategy = inject(CUTE_MENU_SCROLL_STRATEGY);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._animationsDisabled = _animationsDisabled();
         this._overlayRef = null;
         this._menuOpen = false;
         this._closingActionsSubscription = Subscription.EMPTY;
-        this._hoverSubscription = Subscription.EMPTY;
         this._menuCloseSubscription = Subscription.EMPTY;
-        this._changeDetectorRef = inject(ChangeDetectorRef);
-        /**
-         * Handles touch start events on the trigger.
-         * Needs to be an arrow function, so we can easily use addEventListener and removeEventListener.
-         */
-        this._handleTouchStart = (event) => {
-            if (!isFakeTouchstartFromScreenReader(event)) {
-                this._openedBy = 'touch';
-            }
-        };
-        // Tracking input type is necessary, so it's possible to only autofocus
+        // Tracking input type is necessary so it's possible to only auto-focus
         // the first item of the list when the menu is opened via the keyboard
         this._openedBy = undefined;
-        this._menu = null;
-        /**
-         * Whether focus should be restored when the menu is closed.
-         * Note that disabling this option can have accessibility implications, and
-         * it's up to you to manage focus if you decide to turn it off.
-         */
-        this.restoreFocus = true;
-        /** Event emitted when the associated menu is opened. */
-        this.menuOpened = new EventEmitter();
-        /** Event emitted when the associated menu is closed. */
-        this.menuClosed = new EventEmitter();
-        this._scrollStrategy = scrollStrategy;
+        this._menuInternal = null;
+        const parentMenu = inject(CUTE_MENU_PANEL, { optional: true });
         this._parentCuteMenu = parentMenu instanceof CuteMenu ? parentMenu : undefined;
-        _element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-    }
-    ngAfterContentInit() {
-        this._handleHover();
     }
     ngOnDestroy() {
+        if (this._menu && this._ownsMenu(this._menu)) {
+            PANELS_TO_TRIGGERS.delete(this._menu);
+        }
+        this._pendingRemoval?.unsubscribe();
+        this._menuCloseSubscription.unsubscribe();
+        this._closingActionsSubscription.unsubscribe();
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = null;
         }
-        this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        this._menuCloseSubscription.unsubscribe();
-        this._closingActionsSubscription.unsubscribe();
-        this._hoverSubscription.unsubscribe();
     }
     /** Whether the menu is open. */
     get menuOpen() {
@@ -839,53 +775,69 @@ class CuteMenuTrigger {
     get dir() {
         return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
     }
-    get elementRef() {
-        return this._element;
-    }
-    /** Whether the menu triggers a submenu or a top-level one. */
-    triggersSubmenu() {
-        return !!(this._menuItemInstance && this._parentCuteMenu && this.menu);
+    /** Whether the menu triggers a sub-menu or a top-level one. */
+    _triggersSubmenu() {
+        return !!(this._menuItemInstance && this._parentCuteMenu && this._menu);
     }
-    /** Toggles the menu between the open and closed states. */
-    toggleMenu() {
-        return this._menuOpen ? this.closeMenu() : this.openMenu();
+    _closeMenu() {
+        this._menu?.closed.emit();
     }
-    /** Opens the menu. */
-    openMenu() {
-        const menu = this.menu;
+    /** Internal method to open menu providing option to auto focus on first item. */
+    _openMenu(autoFocus) {
+        if (this._triggerIsAriaDisabled()) {
+            return;
+        }
+        const menu = this._menu;
         if (this._menuOpen || !menu) {
             return;
         }
+        this._pendingRemoval?.unsubscribe();
+        const previousTrigger = PANELS_TO_TRIGGERS.get(menu);
+        PANELS_TO_TRIGGERS.set(menu, this);
+        // If the same menu is currently attached to another trigger,
+        // we need to close it so it doesn't end up in a broken state.
+        if (previousTrigger && previousTrigger !== this) {
+            previousTrigger._closeMenu();
+        }
         const overlayRef = this._createOverlay(menu);
         const overlayConfig = overlayRef.getConfig();
         const positionStrategy = overlayConfig.positionStrategy;
         this._setPosition(menu, positionStrategy);
-        overlayConfig.hasBackdrop =
-            menu.hasBackdrop == null ? !this.triggersSubmenu() : menu.hasBackdrop;
-        overlayRef.attach(this._getPortal(menu));
-        if (menu.lazyContent) {
-            menu.lazyContent.attach(this.menuData);
+        if (this._canHaveBackdrop) {
+            overlayConfig.hasBackdrop =
+                menu.hasBackdrop == null ? !this._triggersSubmenu() : menu.hasBackdrop;
+        }
+        else {
+            overlayConfig.hasBackdrop = false;
+        }
+        // We need the `hasAttached` check for the case where the user kicked off a removal animation,
+        // but re-entered the menu. Re-attaching the same portal will trigger an error otherwise.
+        if (!overlayRef.hasAttached()) {
+            overlayRef.attach(this._getPortal(menu));
+            menu.lazyContent?.attach(this.menuData);
         }
-        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
-        this._initMenu(menu);
+        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this._closeMenu());
+        menu.parentMenu = this._triggersSubmenu() ? this._parentCuteMenu : undefined;
+        menu.direction = this.dir;
+        //this._setMenuElevation(menu);
+        if (autoFocus) {
+            menu.focusFirstItem(this._openedBy || 'program');
+        }
+        this._setIsMenuOpen(true);
         if (menu instanceof CuteMenu) {
-            menu._startAnimation();
+            menu._setIsOpen(true);
             menu._directDescendantItems.changes.pipe(takeUntil(menu.closed)).subscribe(() => {
-                // Re-adjust the position without locking when the number of items
+                // Re-adjust the position without locking when the amount of items
                 // changes so that the overlay is allowed to pick a new optimal position.
                 positionStrategy.withLockedPosition(false).reapplyLastPosition();
                 positionStrategy.withLockedPosition(true);
             });
         }
     }
-    /** Closes the menu. */
-    closeMenu() {
-        this.menu?.closed.emit();
-    }
     /**
      * Focuses the menu trigger.
      * @param origin Source of the menu trigger's focus.
-     * @param options Focus options
+     * @param options Optional focus options.
      */
     focus(origin, options) {
         if (this._focusMonitor && origin) {
@@ -895,61 +847,47 @@ class CuteMenuTrigger {
             this._element.nativeElement.focus(options);
         }
     }
-    /**
-     * Updates the position of the menu to ensure that it fits all options within the viewport.
-     */
-    updatePosition() {
-        this._overlayRef?.updatePosition();
-    }
     /** Closes the menu and does the necessary cleanup. */
     _destroyMenu(reason) {
-        if (!this._overlayRef || !this.menuOpen) {
+        const overlayRef = this._overlayRef;
+        const menu = this._menu;
+        if (!overlayRef || !this.menuOpen) {
             return;
         }
-        const menu = this.menu;
         this._closingActionsSubscription.unsubscribe();
-        this._overlayRef.detach();
+        this._pendingRemoval?.unsubscribe();
+        // Note that we don't wait for the animation to finish if another trigger took
+        // over the menu, because the panel will end up empty which looks glitchy.
+        if (menu instanceof CuteMenu && this._ownsMenu(menu)) {
+            this._pendingRemoval = menu._animationDone.pipe(take(1)).subscribe(() => {
+                overlayRef.detach();
+                // Only detach the lazy content if no other trigger took over the menu, otherwise we may
+                // detach something we no longer own. Note that we don't use `this._ownsMenu` here,
+                // because the current trigger relinquishes ownership as soon as the closing sequence
+                // is kicked off whereas the animation takes some time to play out.
+                if (!PANELS_TO_TRIGGERS.has(menu)) {
+                    menu.lazyContent?.detach();
+                }
+            });
+            menu._setIsOpen(false);
+        }
+        else {
+            overlayRef.detach();
+            menu?.lazyContent?.detach();
+        }
+        if (menu && this._ownsMenu(menu)) {
+            PANELS_TO_TRIGGERS.delete(menu);
+        }
         // Always restore focus if the user is navigating using the keyboard or the menu was opened
         // programmatically. We don't restore for non-root triggers, because it can prevent focus
         // from making it back to the root trigger when closing a long chain of menus by clicking
         // on the backdrop.
-        if (this.restoreFocus && (reason === 'keydown' || !this._openedBy || !this.triggersSubmenu())) {
+        if (this.restoreFocus &&
+            (reason === 'keydown' || !this._openedBy || !this._triggersSubmenu())) {
             this.focus(this._openedBy);
         }
         this._openedBy = undefined;
-        if (menu instanceof CuteMenu) {
-            menu._resetAnimation();
-            if (menu.lazyContent) {
-                // Wait for the exit animation to finish before detaching the content.
-                menu._animationDone
-                    .pipe(filter(event => event.toState === 'void'), take(1), 
-                // Interrupt if the content got re-attached.
-                takeUntil(menu.lazyContent._attached))
-                    .subscribe({
-                    next: () => menu.lazyContent.detach(),
-                    // No matter whether the content got re-attached, reset the menu.
-                    complete: () => this._setIsMenuOpen(false),
-                });
-            }
-            else {
-                this._setIsMenuOpen(false);
-            }
-        }
-        else {
-            this._setIsMenuOpen(false);
-            menu?.lazyContent?.detach();
-        }
-    }
-    /**
-     * This method sets the menu state to open and focuses the first item if
-     * the menu was opened via the keyboard.
-     */
-    _initMenu(menu) {
-        menu.parentMenu = this.triggersSubmenu() ? this._parentCuteMenu : undefined;
-        menu.direction = this.dir;
-        this._setMenuElevation(menu);
-        menu.focusFirstItem(this._openedBy || 'program');
-        this._setIsMenuOpen(true);
+        this._setIsMenuOpen(false);
     }
     /** Updates the menu elevation based on the amount of parent menus that it has. */
     _setMenuElevation(menu) {
@@ -968,7 +906,7 @@ class CuteMenuTrigger {
         if (isOpen !== this._menuOpen) {
             this._menuOpen = isOpen;
             this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
-            if (this.triggersSubmenu()) {
+            if (this._triggersSubmenu()) {
                 this._menuItemInstance._setHighlighted(isOpen);
             }
             this._changeDetectorRef.markForCheck();
@@ -982,11 +920,12 @@ class CuteMenuTrigger {
         if (!this._overlayRef) {
             const config = this._getOverlayConfig(menu);
             this._subscribeToPositions(menu, config.positionStrategy);
-            this._overlayRef = this._overlay.create(config);
-            // Consume the `keydownEvents` in order to prevent them from going to another overlay.
-            // Ideally we'd also have our keyboard event logic in here, however doing so will
-            // break anybody that may have implemented the `CuteMenuPanel` themselves.
-            this._overlayRef.keydownEvents().subscribe();
+            this._overlayRef = createOverlayRef(this._injector, config);
+            this._overlayRef.keydownEvents().subscribe(event => {
+                if (this._menu instanceof CuteMenu) {
+                    this._menu._handleKeydown(event);
+                }
+            });
         }
         return this._overlayRef;
     }
@@ -996,16 +935,15 @@ class CuteMenuTrigger {
      */
     _getOverlayConfig(menu) {
         return new OverlayConfig({
-            positionStrategy: this._overlay
-                .position()
-                .flexibleConnectedTo(this._element)
+            positionStrategy: createFlexibleConnectedPositionStrategy(this._injector, this._getOverlayOrigin())
                 .withLockedPosition()
                 .withGrowAfterOpen()
                 .withTransformOriginOn('.cute-menu-panel'),
             backdropClass: menu.backdropClass || 'cdk-overlay-transparent-backdrop',
             panelClass: menu.overlayPanelClass,
             scrollStrategy: this._scrollStrategy(),
-            direction: this._dir,
+            direction: this._dir || 'ltr',
+            disableAnimations: this._animationsDisabled,
         });
     }
     /**
@@ -1016,34 +954,28 @@ class CuteMenuTrigger {
     _subscribeToPositions(menu, position) {
         if (menu.setPositionClasses) {
             position.positionChanges.subscribe(change => {
-                const posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
-                const posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
-                // @breaking-change 15.0.0 Remove null check for `ngZone`.
-                // `positionChanges` fires outside of the `ngZone` and `setPositionClasses` might be
-                // updating something in the view, so we need to bring it back in.
-                if (this._ngZone) {
-                    this._ngZone.run(() => menu.setPositionClasses(posX, posY));
-                }
-                else {
+                this._ngZone.run(() => {
+                    const posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
+                    const posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
                     menu.setPositionClasses(posX, posY);
-                }
+                });
             });
         }
     }
     /**
      * Sets the appropriate positions on a position strategy
      * so the overlay connects with the trigger correctly.
-     * @param menu Menu panel
-     * @param positionStrategy Strategy whose position is to update.
+     * @param menu Menu panel.
+     * @param positionStrategy Strategy whose position to update.
      */
     _setPosition(menu, positionStrategy) {
         let [originX, originFallbackX] = menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
         let [overlayY, overlayFallbackY] = menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
         let [originY, originFallbackY] = [overlayY, overlayFallbackY];
         let [overlayX, overlayFallbackX] = [originX, originFallbackX];
-        let offsetY = 0;
-        if (this.triggersSubmenu()) {
-            // When the menu is a submenu, it should always align itself
+        let offsetY = 4; //0;
+        if (this._triggersSubmenu()) {
+            // When the menu is a sub-menu, it should always align itself
             // to the edges of the trigger, instead of overlapping it.
             overlayFallbackX = originX = menu.xPosition === 'before' ? 'start' : 'end';
             originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
@@ -1056,7 +988,6 @@ class CuteMenuTrigger {
             }
         }
         else if (!menu.overlapTrigger) {
-            offsetY = 4;
             originY = overlayY === 'top' ? 'bottom' : 'top';
             originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
         }
@@ -1081,13 +1012,147 @@ class CuteMenuTrigger {
     }
     /** Returns a stream that emits whenever an action that should close the menu occurs. */
     _menuClosingActions() {
-        const backdrop = this._overlayRef.backdropClick();
+        const outsideClicks = this._getOutsideClickStream(this._overlayRef);
         const detachments = this._overlayRef.detachments();
         const parentClose = this._parentCuteMenu ? this._parentCuteMenu.closed : of();
         const hover = this._parentCuteMenu
-            ? this._parentCuteMenu._hovered().pipe(filter(active => active !== this._menuItemInstance), filter(() => this._menuOpen))
+            ? this._parentCuteMenu
+                ._hovered()
+                .pipe(filter(active => this._menuOpen && active !== this._menuItemInstance))
             : of();
-        return merge(backdrop, parentClose, hover, detachments);
+        return merge(outsideClicks, parentClose, hover, detachments);
+    }
+    /** Gets the portal that should be attached to the overlay. */
+    _getPortal(menu) {
+        // Note that we can avoid this check by keeping the portal on the menu panel.
+        // While it would be cleaner, we'd have to introduce another required method on
+        // `CuteMenuPanel`, making it harder to consume.
+        if (!this._portal || this._portal.templateRef !== menu.templateRef) {
+            this._portal = new TemplatePortal(menu.templateRef, this._viewContainerRef);
+        }
+        return this._portal;
+    }
+    /**
+     * Determines whether the trigger owns a specific menu panel, at the current point in time.
+     * This allows us to distinguish the case where the same panel is passed into multiple triggers
+     * and multiple are open at a time.
+     */
+    _ownsMenu(menu) {
+        return PANELS_TO_TRIGGERS.get(menu) === this;
+    }
+    /**
+     * Detect if the trigger element is aria-disabled, indicating it should behave as
+     * disabled and not open the menu.
+     */
+    _triggerIsAriaDisabled() {
+        return booleanAttribute(this._element.nativeElement.getAttribute('aria-disabled'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuTriggerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteMenuTriggerBase, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuTriggerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Directive applied to an element that should trigger a `mat-menu`. */
+class CuteMenuTrigger extends CuteMenuTriggerBase {
+    /**
+     * @deprecated
+     * @breaking-change 8.0.0
+     */
+    get _deprecatedCuteMenuTriggerFor() {
+        return this.menu;
+    }
+    set _deprecatedCuteMenuTriggerFor(v) {
+        this.menu = v;
+    }
+    /** References the menu instance that the trigger is associated with. */
+    get menu() {
+        return this._menu;
+    }
+    set menu(menu) {
+        this._menu = menu;
+    }
+    constructor() {
+        super(true);
+        this._hoverSubscription = Subscription.EMPTY;
+        /**
+         * Whether focus should be restored when the menu is closed.
+         * Note that disabling this option can have accessibility implications
+         * and it's up to you to manage focus, if you decide to turn it off.
+         */
+        this.restoreFocus = true;
+        /** Event emitted when the associated menu is opened. */
+        this.menuOpened = new EventEmitter();
+        /**
+         * Event emitted when the associated menu is opened.
+         * @deprecated Switch to `menuOpened` instead
+         * @breaking-change 8.0.0
+         */
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onMenuOpen = this.menuOpened;
+        /** Event emitted when the associated menu is closed. */
+        this.menuClosed = new EventEmitter();
+        /**
+         * Event emitted when the associated menu is closed.
+         * @deprecated Switch to `menuClosed` instead
+         * @breaking-change 8.0.0
+         */
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onMenuClose = this.menuClosed;
+        const renderer = inject(Renderer2);
+        this._cleanupTouchstart = renderer.listen(this._element.nativeElement, 'touchstart', (event) => {
+            if (!isFakeTouchstartFromScreenReader(event)) {
+                this._openedBy = 'touch';
+            }
+        }, { passive: true });
+    }
+    /** Whether the menu triggers a sub-menu or a top-level one. */
+    triggersSubmenu() {
+        return super._triggersSubmenu();
+    }
+    /** Toggles the menu between the open and closed states. */
+    toggleMenu() {
+        return this.menuOpen ? this.closeMenu() : this.openMenu();
+    }
+    /** Opens the menu. */
+    openMenu() {
+        this._openMenu(true);
+    }
+    /** Closes the menu. */
+    closeMenu() {
+        this._closeMenu();
+    }
+    /**
+     * Updates the position of the menu to ensure that it fits all options within the viewport.
+     */
+    updatePosition() {
+        this._overlayRef?.updatePosition();
+    }
+    ngAfterContentInit() {
+        this._handleHover();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._cleanupTouchstart();
+        this._hoverSubscription.unsubscribe();
+    }
+    _getOverlayOrigin() {
+        return this._element;
+    }
+    _getOutsideClickStream(overlayRef) {
+        return overlayRef.backdropClick();
     }
     /** Handles mouse presses on the trigger. */
     _handleMousedown(event) {
@@ -1095,7 +1160,7 @@ class CuteMenuTrigger {
             // Since right or middle button clicks won't trigger the `click` event,
             // we shouldn't consider the menu as opened by mouse in those cases.
             this._openedBy = event.button === 0 ? 'mouse' : undefined;
-            // Since clicking on the trigger won't close the menu if it opens a submenu,
+            // Since clicking on the trigger won't close the menu if it opens a sub-menu,
             // we should prevent focus from moving onto it via click to avoid the
             // highlight from lingering on the menu item.
             if (this.triggersSubmenu()) {
@@ -1131,76 +1196,43 @@ class CuteMenuTrigger {
     /** Handles the cases where the user hovers over the trigger. */
     _handleHover() {
         // Subscribe to changes in the hovered item in order to toggle the panel.
-        if (!this.triggersSubmenu() || !this._parentCuteMenu) {
-            return;
-        }
-        this._hoverSubscription = this._parentCuteMenu
-            ._hovered()
-            // Since we might have multiple competing triggers for the same menu (e.g. a sub-menu
-            // with different data and triggers), we have to delay it by a tick to ensure that
-            // it won't be closed immediately after it is opened.
-            .pipe(filter(active => active === this._menuItemInstance && !active.disabled), delay(0, asapScheduler))
-            .subscribe(() => {
-            this._openedBy = 'mouse';
-            // If the same menu is used between multiple triggers, it might still be animating
-            // while the new trigger tries to re-open it. Wait for the animation to finish
-            // before doing so. Also interrupt if the user moves to another item.
-            if (this.menu instanceof CuteMenu && this.menu._isAnimating) {
-                // We need the `delay(0)` here in order to avoid
-                // 'changed after checked' errors in some cases. See #12194.
-                this.menu._animationDone
-                    .pipe(take(1), delay(0, asapScheduler), takeUntil(this._parentCuteMenu._hovered()))
-                    .subscribe(() => this.openMenu());
-            }
-            else {
-                this.openMenu();
-            }
-        });
-    }
-    /** Gets the portal that should be attached to the overlay. */
-    _getPortal(menu) {
-        // Note that we can avoid this check by keeping the portal on the menu panel.
-        // While it would be cleaner, we'd have to introduce another required method on
-        // `CuteMenuPanel`, making it harder to consume.
-        if (!this._portal || this._portal.templateRef !== menu.templateRef) {
-            this._portal = new TemplatePortal(menu.templateRef, this._viewContainerRef);
+        if (this.triggersSubmenu() && this._parentCuteMenu) {
+            this._hoverSubscription = this._parentCuteMenu._hovered().subscribe(active => {
+                if (active === this._menuItemInstance &&
+                    !active.disabled &&
+                    // Ignore hover events if the parent menu is in the process of being closed (see #31956).
+                    this._parentCuteMenu?._panelAnimationState !== 'void') {
+                    this._openedBy = 'mouse';
+                    // Open the menu, but do NOT auto-focus on first item when just hovering.
+                    // When VoiceOver is enabled, this is particularly confusing as the focus will
+                    // cause another hover event, and continue opening sub-menus without interaction.
+                    this._openMenu(false);
+                }
+            });
         }
-        return this._portal;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuTrigger, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: CUTE_MENU_SCROLL_STRATEGY }, { token: CUTE_MENU_PANEL, optional: true }, { token: CuteMenuItem, optional: true, self: true }, { token: i3.Directionality, optional: true }, { token: i4.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteMenuTrigger, isStandalone: true, selector: "[cuteMenuTriggerFor]", inputs: { menu: ["cuteMenuTriggerFor", "menu"], menuData: ["cuteMenuTriggerData", "menuData"], restoreFocus: ["cuteMenuTriggerRestoreFocus", "restoreFocus"] }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "_handleClick($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-haspopup": "menu ? \"menu\" : null", "attr.aria-expanded": "menuOpen", "attr.aria-controls": "menuOpen ? menu.panelId : null" }, classAttribute: "cute-menu-trigger" }, exportAs: ["cuteMenuTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteMenuTrigger, isStandalone: true, selector: "[cute-menu-trigger-for], [cuteMenuTriggerFor]", inputs: { _deprecatedCuteMenuTriggerFor: ["cute-menu-trigger-for", "_deprecatedCuteMenuTriggerFor"], menu: ["cuteMenuTriggerFor", "menu"], menuData: ["cuteMenuTriggerData", "menuData"], restoreFocus: ["cuteMenuTriggerRestoreFocus", "restoreFocus"] }, outputs: { menuOpened: "menuOpened", onMenuOpen: "onMenuOpen", menuClosed: "menuClosed", onMenuClose: "onMenuClose" }, host: { listeners: { "click": "_handleClick($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-haspopup": "menu ? \"menu\" : null", "attr.aria-expanded": "menuOpen", "attr.aria-controls": "menuOpen ? menu?.panelId : null" }, classAttribute: "cute-menu-trigger" }, exportAs: ["cuteMenuTrigger"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[cuteMenuTriggerFor]`,
-                    exportAs: 'cuteMenuTrigger',
+                    selector: '[cute-menu-trigger-for], [cuteMenuTriggerFor]',
                     host: {
                         'class': 'cute-menu-trigger',
                         '[attr.aria-haspopup]': 'menu ? "menu" : null',
                         '[attr.aria-expanded]': 'menuOpen',
-                        '[attr.aria-controls]': 'menuOpen ? menu.panelId : null',
+                        '[attr.aria-controls]': 'menuOpen ? menu?.panelId : null',
                         '(click)': '_handleClick($event)',
                         '(mousedown)': '_handleMousedown($event)',
                         '(keydown)': '_handleKeydown($event)',
                     },
-                    standalone: true,
+                    exportAs: 'cuteMenuTrigger',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CUTE_MENU_SCROLL_STRATEGY]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CUTE_MENU_PANEL]
-                }, {
-                    type: Optional
-                }] }, { type: CuteMenuItem, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i4.FocusMonitor }, { type: i0.NgZone }], propDecorators: { menu: [{
+        }], ctorParameters: () => [], propDecorators: { _deprecatedCuteMenuTriggerFor: [{
+                type: Input,
+                args: ['cute-menu-trigger-for']
+            }], menu: [{
                 type: Input,
                 args: ['cuteMenuTriggerFor']
             }], menuData: [{
@@ -1211,6 +1243,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['cuteMenuTriggerRestoreFocus']
             }], menuOpened: [{
                 type: Output
+            }], onMenuOpen: [{
+                type: Output
+            }], menuClosed: [{
+                type: Output
+            }], onMenuClose: [{
+                type: Output
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Trigger that opens a menu whenever the user right-clicks within its host element.
+ */
+class CuteContextMenuTrigger extends CuteMenuTriggerBase {
+    /** References the menu instance that the trigger is associated with. */
+    get menu() {
+        return this._menu;
+    }
+    set menu(menu) {
+        this._menu = menu;
+    }
+    constructor() {
+        super(false);
+        this._point = { x: 0, y: 0, initialX: 0, initialY: 0, initialScrollX: 0, initialScrollY: 0 };
+        this._triggerPressedControl = false;
+        this._document = inject(DOCUMENT);
+        this._viewportRuler = inject(ViewportRuler);
+        this._scrollDispatcher = inject(ScrollDispatcher);
+        /**
+         * Whether focus should be restored when the menu is closed.
+         * Note that disabling this option can have accessibility implications
+         * and it's up to you to manage focus, if you decide to turn it off.
+         */
+        this.restoreFocus = true;
+        /** Whether the context menu is disabled. */
+        this.disabled = false;
+        /** Event emitted when the associated menu is opened. */
+        this.menuOpened = new EventEmitter();
+        /** Event emitted when the associated menu is closed. */
+        this.menuClosed = new EventEmitter();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._scrollSubscription?.unsubscribe();
+    }
+    /** Handler for `contextmenu` events. */
+    _handleContextMenuEvent(event) {
+        if (!this.disabled) {
+            event.preventDefault();
+            // If the menu is already open, only update its position.
+            if (this.menuOpen) {
+                this._initializePoint(event.clientX, event.clientY);
+                this._updatePosition();
+            }
+            else {
+                this._openContextMenu(event);
+            }
+        }
+    }
+    _destroyMenu(reason) {
+        super._destroyMenu(reason);
+        this._scrollSubscription?.unsubscribe();
+    }
+    _getOverlayOrigin() {
+        return this._point;
+    }
+    _getOutsideClickStream(overlayRef) {
+        return overlayRef.outsidePointerEvents().pipe(skipWhile((event, index) => {
+            if (event.type === 'contextmenu') {
+                // Do not close when attempting to open a context menu within the trigger.
+                return this._isWithinMenuOrTrigger(_getEventTarget(event));
+            }
+            else if (event.type === 'auxclick') {
+                // Skip the first `auxclick` since it happens at
+                // the same time as the event that opens the menu.
+                if (index === 0) {
+                    return true;
+                }
+                // Do not close on `auxclick` within the menu since we want to reposition the menu
+                // instead. Note that we have to resolve the clicked element using its position,
+                // rather than `event.target`, because the `target` is set to the `body`.
+                this._rootNode ??= _getShadowRoot(this._element.nativeElement) || this._document;
+                return this._isWithinMenuOrTrigger(this._rootNode.elementFromPoint(event.clientX, event.clientY));
+            }
+            // Using a mouse, the `contextmenu` event can fire either when pressing the right button
+            // or left button + control. Most browsers won't dispatch a `click` event right after
+            // a `contextmenu` event triggered by left button + control, but Safari will (see #27832).
+            // This closes the menu immediately. To work around it, we check that both the triggering
+            // event and the current outside click event both had the control key pressed, and that
+            // that this is the first outside click event.
+            return this._triggerPressedControl && index === 0 && event.ctrlKey;
+        }));
+    }
+    /** Checks whether an element is within the trigger or the opened overlay. */
+    _isWithinMenuOrTrigger(target) {
+        if (!target) {
+            return false;
+        }
+        const element = this._element.nativeElement;
+        if (target === element || element.contains(target)) {
+            return true;
+        }
+        const overlay = this._overlayRef?.hostElement;
+        return overlay === target || !!overlay?.contains(target);
+    }
+    /** Opens the context menu. */
+    _openContextMenu(event) {
+        // A context menu can be triggered via a mouse right click or a keyboard shortcut.
+        if (event.button === 2) {
+            this._openedBy = 'mouse';
+        }
+        else {
+            this._openedBy = event.button === 0 ? 'keyboard' : undefined;
+        }
+        this._initializePoint(event.clientX, event.clientY);
+        this._triggerPressedControl = event.ctrlKey;
+        super._openMenu(true);
+        this._scrollSubscription?.unsubscribe();
+        this._scrollSubscription = this._scrollDispatcher.scrolled(0).subscribe(() => {
+            // When passing a point to the connected position strategy, the position
+            // won't update as the user is scrolling so we have to do it manually.
+            const position = this._viewportRuler.getViewportScrollPosition();
+            const point = this._point;
+            point.y = point.initialY + (point.initialScrollY - position.top);
+            point.x = point.initialX + (point.initialScrollX - position.left);
+            this._updatePosition();
+        });
+    }
+    /** Initializes the point representing the origin relative to which the menu will be rendered. */
+    _initializePoint(x, y) {
+        const scrollPosition = this._viewportRuler.getViewportScrollPosition();
+        const point = this._point;
+        point.x = point.initialX = x;
+        point.y = point.initialY = y;
+        point.initialScrollX = scrollPosition.left;
+        point.initialScrollY = scrollPosition.top;
+    }
+    /** Refreshes the position of the overlay. */
+    _updatePosition() {
+        const overlayRef = this._overlayRef;
+        if (overlayRef) {
+            const positionStrategy = overlayRef.getConfig()
+                .positionStrategy;
+            positionStrategy.setOrigin(this._point);
+            overlayRef.updatePosition();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.0", type: CuteContextMenuTrigger, isStandalone: true, selector: "[cuteContextMenuTriggerFor]", inputs: { menu: ["cuteContextMenuTriggerFor", "menu"], menuData: ["cuteContextMenuTriggerData", "menuData"], restoreFocus: ["cuteContextMenuTriggerRestoreFocus", "restoreFocus"], disabled: ["cuteContextMenuTriggerDisabled", "disabled", booleanAttribute] }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "contextmenu": "_handleContextMenuEvent($event)" }, properties: { "class.cute-context-menu-trigger-disabled": "disabled", "attr.aria-controls": "menuOpen ? menu?.panelId : null" }, classAttribute: "cute-context-menu-trigger" }, exportAs: ["cuteContextMenuTrigger"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteContextMenuTriggerFor]',
+                    host: {
+                        'class': 'cute-context-menu-trigger',
+                        '[class.cute-context-menu-trigger-disabled]': 'disabled',
+                        '[attr.aria-controls]': 'menuOpen ? menu?.panelId : null',
+                        '(contextmenu)': '_handleContextMenuEvent($event)',
+                    },
+                    exportAs: 'cuteContextMenuTrigger',
+                }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{
+                type: Input,
+                args: [{ alias: 'cuteContextMenuTriggerFor', required: true }]
+            }], menuData: [{
+                type: Input,
+                args: ['cuteContextMenuTriggerData']
+            }], restoreFocus: [{
+                type: Input,
+                args: ['cuteContextMenuTriggerRestoreFocus']
+            }], disabled: [{
+                type: Input,
+                args: [{ alias: 'cuteContextMenuTriggerDisabled', transform: booleanAttribute }]
+            }], menuOpened: [{
+                type: Output
             }], menuClosed: [{
                 type: Output
             }] } });
@@ -1224,32 +1441,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 const TYPES = [
-    CommonModule,
     CuteMenu,
     CuteMenuItem,
     CuteMenuContent,
     CuteMenuTrigger,
+    CuteContextMenuTrigger,
 ];
 class CuteMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuModule, imports: [CommonModule, CommonModule,
-            CuteMenu,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuModule, imports: [OverlayModule, CuteMenu,
             CuteMenuItem,
             CuteMenuContent,
-            CuteMenuTrigger], exports: [CommonModule,
-            CuteMenu,
+            CuteMenuTrigger,
+            CuteContextMenuTrigger], exports: [CdkScrollableModule, CuteMenu,
             CuteMenuItem,
             CuteMenuContent,
-            CuteMenuTrigger] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuModule, providers: [CUTE_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule, CommonModule, CommonModule] }); }
+            CuteMenuTrigger,
+            CuteContextMenuTrigger] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuModule, imports: [OverlayModule, CdkScrollableModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ...TYPES],
-                    exports: TYPES,
-                    declarations: [],
-                    providers: [CUTE_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                    imports: [OverlayModule, ...TYPES],
+                    exports: [CdkScrollableModule, ...TYPES],
                 }]
         }] });
 
@@ -1257,5 +1472,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUTE_MENU_CONTENT, CUTE_MENU_DEFAULT_OPTIONS, CUTE_MENU_DEFAULT_OPTIONS_FACTORY, CUTE_MENU_SCROLL_STRATEGY, CUTE_MENU_SCROLL_STRATEGY_FACTORY, CUTE_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER, CuteMenu, CuteMenuContent, CuteMenuItem, CuteMenuModule, CuteMenuTrigger };
+export { CUTE_MENU_CONTENT, CUTE_MENU_DEFAULT_OPTIONS, CUTE_MENU_PANEL, CUTE_MENU_SCROLL_STRATEGY, CuteContextMenuTrigger, CuteMenu, CuteMenuContent, CuteMenuItem, CuteMenuModule, CuteMenuTrigger, MENU_PANEL_TOP_PADDING };
 //# sourceMappingURL=cute-widgets-base-menu.mjs.map