@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/menu/menu.bench.js

@@ -1,12 +1,7 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition as menuButtonDefinition } from '../menu-button/menu-button.definition.js';
-import { definition as menuItemDefinition } from '../menu-item/menu-item.definition.js';
-import { definition as menuListDefinition } from '../menu-list/menu-list.definition.js';
-import { definition as menuDefinition } from './menu.definition.js';
-menuDefinition.define(FluentDesignSystem.registry);
-menuButtonDefinition.define(FluentDesignSystem.registry);
-menuListDefinition.define(FluentDesignSystem.registry);
-menuItemDefinition.define(FluentDesignSystem.registry);
+import '../menu-button/define.js';
+import '../menu-item/define.js';
+import '../menu-list/define.js';
+import './define.js';
 const itemRenderer = () => {
     const menu = document.createElement('fluent-menu');
     const menuButton = document.createElement('fluent-menu-button');

package/dist/esm/menu/menu.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.bench.js","sourceRoot":"","sources":["../../../src/menu/menu.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC9F,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEpE,cAAc,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACnD,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACzD,kBAAkB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACvD,kBAAkB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAEvD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE7D,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE9D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEhC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC3B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE7B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"menu.bench.js","sourceRoot":"","sources":["../../../src/menu/menu.bench.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE7D,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE9D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEhC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC3B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE7B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/menu/menu.d.ts

@@ -1,5 +1,4 @@
 import { FASTElement } from '@microsoft/fast-element';
-import type { MenuList } from '../menu-list/menu-list.js';
 /**
  * A Menu component that provides a customizable menu element.
  *
@@ -74,12 +73,28 @@ export declare class Menu extends FASTElement {
      * Holds the slotted menu list.
      * @public
      */
-    slottedMenuList: MenuList[];
+    slottedMenuList: HTMLElement[];
+    /**
+     * Sets up the component when the slotted menu list changes.
+     * @param prev - The previous items in the slotted menu list.
+     * @param next - The new items in the slotted menu list.
+     * @internal
+     */
+    slottedMenuListChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * Holds the slotted triggers.
      * @public
      */
     slottedTriggers: HTMLElement[];
+    /**
+     * Ensures the trigger is properly set up when the slotted triggers change.
+     * This includes setting ARIA attributes and adding event listeners based on the current property values.
+     *
+     * @param prev - The previous items in the slotted triggers list.
+     * @param next - The current items in the slotted triggers list.
+     * @internal
+     */
+    slottedTriggersChanged(prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * Holds the primary slot element.
      * @public
@@ -89,17 +104,25 @@ export declare class Menu extends FASTElement {
      * Defines whether the menu is open or not.
      * @internal
      */
-    private _open;
+    protected _open: boolean;
     /**
      * The trigger element of the menu.
      * @internal
      */
-    private _trigger?;
+    protected _trigger?: HTMLElement;
     /**
      * The menu list element of the menu which has the popover behavior.
      * @internal
      */
-    private _menuList?;
+    protected _menuList?: HTMLElement;
+    /**
+     * @internal
+     */
+    protected _triggerAbortController?: AbortController;
+    /**
+     * @internal
+     */
+    protected _menuListAbortController?: AbortController;
     /**
      * Called when the element is connected to the DOM.
      * Sets up the component.
@@ -114,7 +137,8 @@ export declare class Menu extends FASTElement {
     disconnectedCallback(): void;
     /**
      * Sets the component.
-     * Sets the trigger and menu list elements and adds event listeners.
+     * @deprecated This method is no longer used. Trigger and menu-list listeners are now
+     * managed by their respective slot-changed callbacks.
      * @public
      */
     setComponent(): void;
@@ -184,23 +208,15 @@ export declare class Menu extends FASTElement {
      */
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
     /**
-     * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger.
-     * Adds a 'toggle' event listener to the menu list.
-     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * Adds trigger-related event listeners.
      * @internal
      */
-    private addListeners;
+    protected addTriggerListeners(): void;
     /**
-     * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger.
-     * Also removes toggle event listener from the menu list.
-     * Also removes 'mouseover' event listeners from the trigger.
-     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * Adds menu-list event listeners.
      * @internal
      */
-    private removeListeners;
+    protected addMenuListListeners(): void;
     /**
      * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
      * pressed. Closes the menu when the Tab key is pressed.
@@ -222,5 +238,5 @@ export declare class Menu extends FASTElement {
      * @internal
      * @param e - The event triggered on document click.
      */
-    private documentClickHandler;
+    protected documentClickHandler: (e: any) => void;
 }

package/dist/esm/menu/menu.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-menu>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/menu/menu.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './menu.options.js';
+/**
+ * The async definition configuration for the `<fluent-menu>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=menu.definition-async.js.map

package/dist/esm/menu/menu.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.definition-async.js","sourceRoot":"","sources":["../../../src/menu/menu.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/menu/menu.definition.d.ts

@@ -1,9 +1,7 @@
-import { Menu } from './menu.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Menu Element.
+ * The definition for the `<fluent-menu>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-menu>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Menu>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/menu/menu.definition.js

@@ -1,17 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Menu } from './menu.js';
+import { tagName } from './menu.options.js';
 import { styles } from './menu.styles.js';
 import { template } from './menu.template.js';
 /**
- * The Fluent Menu Element.
+ * The definition for the `<fluent-menu>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-menu>
  */
-export const definition = Menu.compose({
-    name: `${FluentDesignSystem.prefix}-menu`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=menu.definition.js.map

package/dist/esm/menu/menu.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.definition.js","sourceRoot":"","sources":["../../../src/menu/menu.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,OAAO;IACzC,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"menu.definition.js","sourceRoot":"","sources":["../../../src/menu/menu.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/menu/menu.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { keyEnter, keyEscape, keySpace, keyTab } from '@microsoft/fast-web-utilities';
 import { MenuItem } from '../menu-item/menu-item.js';
 import { MenuItemRole } from '../menu-item/menu-item.options.js';
 /**
@@ -50,16 +49,6 @@ import { MenuItemRole } from '../menu-item/menu-item.options.js';
 export class Menu extends FASTElement {
     constructor() {
         super(...arguments);
-        /**
-         * Holds the slotted menu list.
-         * @public
-         */
-        this.slottedMenuList = [];
-        /**
-         * Holds the slotted triggers.
-         * @public
-         */
-        this.slottedTriggers = [];
         /**
          * Defines whether the menu is open or not.
          * @internal
@@ -111,9 +100,10 @@ export class Menu extends FASTElement {
             // @ts-expect-error - Baseline 2024
             if (e.type === 'toggle' && e.newState) {
                 // @ts-expect-error - Baseline 2024
-                const newState = e.newState === 'open';
-                this._trigger?.setAttribute('aria-expanded', `${newState}`);
-                this._open = newState;
+                const open = e.newState === 'open';
+                this._trigger?.setAttribute('aria-expanded', `${open}`);
+                this._menuList?.setAttribute('focusgroup', open ? 'menu' : 'none');
+                this._open = open;
                 if (this._open) {
                     this.focusMenuList();
                 }
@@ -132,8 +122,8 @@ export class Menu extends FASTElement {
             }
             const key = e.key;
             switch (key) {
-                case keySpace:
-                case keyEnter:
+                case ' ':
+                case 'Enter':
                     e.preventDefault();
                     this.toggleMenu();
                     break;
@@ -152,6 +142,41 @@ export class Menu extends FASTElement {
             }
         };
     }
+    /**
+     * Sets up the component when the slotted menu list changes.
+     * @param prev - The previous items in the slotted menu list.
+     * @param next - The new items in the slotted menu list.
+     * @internal
+     */
+    slottedMenuListChanged(prev, next) {
+        this._menuListAbortController?.abort();
+        if (!next?.length) {
+            return;
+        }
+        this._menuList = next[0];
+        this._menuList.popover = this.openOnContext ? 'manual' : '';
+        this.addMenuListListeners();
+    }
+    /**
+     * Ensures the trigger is properly set up when the slotted triggers change.
+     * This includes setting ARIA attributes and adding event listeners based on the current property values.
+     *
+     * @param prev - The previous items in the slotted triggers list.
+     * @param next - The current items in the slotted triggers list.
+     * @internal
+     */
+    slottedTriggersChanged(prev, next) {
+        this._triggerAbortController?.abort();
+        if (next?.length) {
+            const trigger = next[0];
+            this._trigger = trigger;
+            if (this._trigger?.isConnected) {
+                this._trigger.setAttribute('aria-haspopup', 'true');
+                this._trigger.setAttribute('aria-expanded', `${this._open}`);
+                this.addTriggerListeners();
+            }
+        }
+    }
     /**
      * Called when the element is connected to the DOM.
      * Sets up the component.
@@ -159,9 +184,9 @@ export class Menu extends FASTElement {
      */
     connectedCallback() {
         super.connectedCallback();
-        queueMicrotask(() => {
-            this.setComponent();
-        });
+        // Retained for backward compatibility. The trigger and menu list listeners are now managed by their respective
+        // slot-changed callbacks, so this method is no longer responsible for setting up the component. However, it is left in place to avoid breaking changes for any existing implementations that may be relying on it.
+        this.setComponent();
     }
     /**
      * Called when the element is disconnected from the DOM.
@@ -170,23 +195,16 @@ export class Menu extends FASTElement {
      */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeListeners();
+        this._triggerAbortController?.abort();
+        this._menuListAbortController?.abort();
     }
     /**
      * Sets the component.
-     * Sets the trigger and menu list elements and adds event listeners.
+     * @deprecated This method is no longer used. Trigger and menu-list listeners are now
+     * managed by their respective slot-changed callbacks.
      * @public
      */
-    setComponent() {
-        if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
-            this._trigger = this.slottedTriggers[0];
-            this._menuList = this.slottedMenuList[0];
-            this._trigger.setAttribute('aria-haspopup', 'true');
-            this._trigger.setAttribute('aria-expanded', `${this._open}`);
-            this._menuList.setAttribute('popover', this.openOnContext ? 'manual' : '');
-            this.addListeners();
-        }
-    }
+    setComponent() { }
     /**
      * Focuses on the menu list.
      * @public
@@ -214,11 +232,9 @@ export class Menu extends FASTElement {
      * @public
      */
     openOnHoverChanged(oldValue, newValue) {
-        if (newValue) {
-            this._trigger?.addEventListener('mouseover', this.openMenu);
-        }
-        else {
-            this._trigger?.removeEventListener('mouseover', this.openMenu);
+        if (this._trigger) {
+            this._triggerAbortController?.abort();
+            this.addTriggerListeners();
         }
     }
     /**
@@ -229,11 +245,9 @@ export class Menu extends FASTElement {
      * @param newValue - The new value of 'persistOnItemClick'.
      */
     persistOnItemClickChanged(oldValue, newValue) {
-        if (!newValue) {
-            this._menuList?.addEventListener('change', this.closeMenu);
-        }
-        else {
-            this._menuList?.removeEventListener('change', this.closeMenu);
+        if (this._menuList) {
+            this._menuListAbortController?.abort();
+            this.addMenuListListeners();
         }
     }
     /**
@@ -245,10 +259,14 @@ export class Menu extends FASTElement {
      */
     openOnContextChanged(oldValue, newValue) {
         if (newValue) {
-            this._trigger?.addEventListener('contextmenu', this.openMenu);
+            this._menuList?.setAttribute('popover', 'manual');
         }
         else {
-            this._trigger?.removeEventListener('contextmenu', this.openMenu);
+            this._menuList?.setAttribute('popover', '');
+        }
+        if (this._trigger) {
+            this._triggerAbortController?.abort();
+            this.addTriggerListeners();
         }
     }
     /**
@@ -267,53 +285,34 @@ export class Menu extends FASTElement {
         }
     }
     /**
-     * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger.
-     * Adds a 'toggle' event listener to the menu list.
-     * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * Adds trigger-related event listeners.
      * @internal
      */
-    addListeners() {
-        this._menuList?.addEventListener('toggle', this.toggleHandler);
-        this._trigger?.addEventListener('keydown', this.triggerKeydownHandler);
-        if (!this.persistOnItemClick) {
-            this._menuList?.addEventListener('change', this.closeMenu);
-        }
+    addTriggerListeners() {
+        this._triggerAbortController = new AbortController();
+        const { signal } = this._triggerAbortController;
+        this._trigger?.addEventListener('keydown', this.triggerKeydownHandler, { signal });
         if (this.openOnHover) {
-            this._trigger?.addEventListener('mouseover', this.openMenu);
+            this._trigger?.addEventListener('mouseover', this.openMenu, { signal });
         }
         else if (this.openOnContext) {
-            this._trigger?.addEventListener('contextmenu', this.openMenu);
-            document.addEventListener('click', this.documentClickHandler);
+            this._trigger?.addEventListener('contextmenu', this.openMenu, { signal });
+            document.addEventListener('click', this.documentClickHandler, { signal });
         }
         else {
-            this._trigger?.addEventListener('click', this.toggleMenu);
+            this._trigger?.addEventListener('click', this.toggleMenu, { signal });
         }
     }
     /**
-     * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger.
-     * Also removes toggle event listener from the menu list.
-     * Also removes 'mouseover' event listeners from the trigger.
-     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * Adds menu-list event listeners.
      * @internal
      */
-    removeListeners() {
-        this._menuList?.removeEventListener('toggle', this.toggleHandler);
-        this._trigger?.removeEventListener('keydown', this.triggerKeydownHandler);
+    addMenuListListeners() {
+        this._menuListAbortController = new AbortController();
+        const { signal } = this._menuListAbortController;
+        this._menuList?.addEventListener('toggle', this.toggleHandler, { signal });
         if (!this.persistOnItemClick) {
-            this._menuList?.removeEventListener('change', this.closeMenu);
-        }
-        if (this.openOnHover) {
-            this._trigger?.removeEventListener('mouseover', this.openMenu);
-        }
-        if (this.openOnContext) {
-            this._trigger?.removeEventListener('contextmenu', this.openMenu);
-            document.removeEventListener('click', this.documentClickHandler);
-        }
-        else {
-            this._trigger?.removeEventListener('click', this.toggleMenu);
+            this._menuList?.addEventListener('change', this.closeMenu, { signal });
         }
     }
     /**
@@ -329,14 +328,14 @@ export class Menu extends FASTElement {
         }
         const key = e.key;
         switch (key) {
-            case keyEscape:
+            case 'Escape':
                 e.preventDefault();
                 if (this._open) {
                     this.closeMenu();
                     this.focusTrigger();
                 }
                 break;
-            case keyTab:
+            case 'Tab':
                 if (this._open)
                     this.closeMenu();
                 if (e.shiftKey &&

package/dist/esm/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QAkGE;;;WAGG;QACO,UAAK,GAAY,KAAK,CAAC;QAwDjC;;;WAGG;QACI,eAAU,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF;;;WAGG;QACI,cAAS,GAAG,CAAC,KAAa,EAAE,EAAE;YACnC,sEAAsE;YACtE,IACE,KAAK,EAAE,MAAM,YAAY,QAAQ;gBACjC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,YAAY,CAAC,gBAAgB;oBAClE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,YAAY,CAAC,aAAa,CAAC,EACnE,CAAC;gBACD,OAAO;YACT,CAAC;YACD,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;YAErC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACzD,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACI,aAAQ,GAAG,CAAC,CAAS,EAAE,EAAE;YAC9B,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;YAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;QAsBF;;;;;WAKG;QACI,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACxC,mCAAmC;YACnC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACtC,mCAAmC;gBACnC,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC;gBACnC,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;gBACxD,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACnE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QA0IF;;;;;;WAMG;QACI,0BAAqB,GAAG,CAAC,CAAgB,EAAkB,EAAE;YAClE,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;YAClB,QAAQ,GAAG,EAAE,CAAC;gBACZ,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;oBAClB,MAAM;gBACR;oBACE,OAAO,IAAI,CAAC;YAChB,CAAC;QACH,CAAC,CAAC;QAEF;;;;WAIG;QACO,yBAAoB,GAAG,CAAC,CAAM,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,IAAI,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBACvF,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAhXC;;;;;OAKG;IACH,sBAAsB,CAAC,IAA+B,EAAE,IAA+B;QACrF,IAAI,CAAC,wBAAwB,EAAE,KAAK,EAAE,CAAC;QAEvC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5D,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IASD;;;;;;;OAOG;IACI,sBAAsB,CAAC,IAA+B,EAAE,IAA+B;QAC5F,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,CAAC;QAEtC,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;YACjB,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;YAExB,IAAI,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAC;gBAC/B,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACpD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC7D,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;IAoCD;;;;OAIG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,+GAA+G;QAC/G,mNAAmN;QACnN,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACI,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,CAAC;QACtC,IAAI,CAAC,wBAAwB,EAAE,KAAK,EAAE,CAAC;IACzC,CAAC;IAED;;;;;OAKG;IACI,YAAY,KAAU,CAAC;IA8C9B;;;OAGG;IACI,aAAa;QAClB,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,SAAU,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACI,YAAY;QACjB,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,QAAS,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAsBD;;;;;;;OAOG;IACI,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QAC5D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,CAAC;YACtC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACI,yBAAyB,CAAC,QAAiB,EAAE,QAAiB;QACnE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,wBAAwB,EAAE,KAAK,EAAE,CAAC;YACvC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACI,oBAAoB,CAAC,QAAiB,EAAE,QAAiB;QAC9D,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,CAAC;YACtC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACI,oBAAoB,CAAC,QAAiB,EAAE,QAAiB;QAC9D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IAED;;;OAGG;IACO,mBAAmB;QAC3B,IAAI,CAAC,uBAAuB,GAAG,IAAI,eAAe,EAAE,CAAC;QACrD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAEhD,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAEnF,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAC1E,CAAC;aAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;YAC1E,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED;;;OAGG;IACO,oBAAoB;QAC5B,IAAI,CAAC,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAC;QACtD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,wBAAwB,CAAC;QAEjD,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAE3E,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACzE,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACI,kBAAkB,CAAC,CAAgB;QACxC,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;QAElB,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,CAAC;gBACD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,IAAI,CAAC,KAAK;oBAAE,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjC,IACE,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ;oBACpC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAiB,CAAC,YAAY,KAAK,IAAI,CAAC,aAAa,EACxE,CAAC;oBACD,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,CAAC;qBAAM,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACtB,OAAO,IAAI,CAAC;gBACd,CAAC;YACH;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;CAmCF;AArZQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACzB;AAOtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACzB;AAOxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACzB;AAOxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAO7B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAOhB;IADN,UAAU;6CAC4B;AAyBhC;IADN,UAAU;6CAC4B;AA8BhC;IADN,UAAU;2CAC4B"}

package/dist/esm/menu/menu.options.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The tag name for the menu element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-menu";

package/dist/esm/menu/menu.options.js

@@ -0,0 +1,8 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+/**
+ * The tag name for the menu element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-menu`;
+//# sourceMappingURL=menu.options.js.map

package/dist/esm/menu/menu.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.options.js","sourceRoot":"","sources":["../../../src/menu/menu.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,OAAgB,CAAC"}

package/dist/esm/menu/menu.styles.css

@@ -0,0 +1,56 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-block;
+}
+
+::slotted([slot='trigger']) {
+  anchor-name: --menu-trigger;
+}
+
+::slotted([popover]) {
+  margin: 0;
+  max-height: var(--menu-max-height, auto);
+  position-anchor: --menu-trigger;
+  inset: unset;
+  inset-block-start: anchor(outside);
+  inset-inline-start: anchor(self-start);
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  position: fixed;
+  z-index: 1;
+}
+
+:host([split]) ::slotted([popover]) {
+  inset-inline-start: unset;
+  inset-inline-end: anchor(self-end);
+}
+
+::slotted([popover]:not(:popover-open)) {
+  display: none;
+}
+
+:host([split]) {
+  display: inline-flex;
+}
+
+:host([split]) ::slotted([slot='primary-action']) {
+  border-inline-end: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* Keeps focus visible visuals above trigger slot*/
+:host([split]) ::slotted([slot='primary-action']:focus-visible) {
+  z-index: 1;
+}
+
+:host([split]) ::slotted([slot='primary-action'][appearance='primary']) {
+  border-inline-end: var(--strokeWidthThin) solid white;
+}
+
+:host([split]) ::slotted([slot='trigger']) {
+  border-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}

package/dist/esm/menu/menu.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { colorNeutralStroke1, strokeWidthThin } from '../theme/design-tokens.js';
 /** Menu styles
  * @public
@@ -15,18 +15,17 @@ export const styles = css `
     margin: 0;
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
-    position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-block;
-    position: absolute;
+    inset: unset;
+    inset-block-start: anchor(outside);
+    inset-inline-start: anchor(self-start);
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    position: fixed;
     z-index: 1;
   }
 
   :host([split]) ::slotted([popover]) {
-    position-area: block-end span-inline-start;
-  }
-
-  ::slotted([popover]:popover-open) {
-    inset: unset;
+    inset-inline-start: unset;
+    inset-inline-end: anchor(self-end);
   }
 
   ::slotted([popover]:not(:popover-open)) {

package/dist/esm/menu/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiCF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAgCF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}

package/dist/esm/menu/menu.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-menu" shadowrootmode="open">
+  <template @keydown="{menuKeydownHandler($e)}">
+    {{styles}}
+    <slot name="primary-action" f-ref="{primaryAction}"></slot>
+    <slot name="trigger" f-slotted="{slottedTriggers filter elements()}"></slot>
+    <slot f-slotted="{slottedMenuList filter elements()}"></slot>
+  </template>
+</f-template>