@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.60

package/dist/esm/link/link.template.js

@@ -0,0 +1,22 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * The template for the Link component.
+ * @public
+ */
+export function anchorTemplate() {
+    return html `
+    <template
+      tabindex="0"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+      <slot></slot>
+    </template>
+  `;
+}
+/**
+ * The template for the Link component.
+ * @public
+ */
+export const template = anchorTemplate();
+//# sourceMappingURL=link.template.js.map

package/dist/esm/link/link.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../src/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;GAInE,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,cAAc,EAAE,CAAC"}

package/dist/esm/menu/index.js

@@ -1,4 +1,4 @@
-export * from './menu.js';
+export { Menu } from './menu.js';
 export { template as MenuTemplate } from './menu.template.js';
 export { styles as MenuStyles } from './menu.styles.js';
 export { definition as MenuDefinition } from './menu.definition.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,31 @@
+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);
+const itemRenderer = () => {
+    const menu = document.createElement('fluent-menu');
+    const menuButton = document.createElement('fluent-menu-button');
+    const menuList = document.createElement('fluent-menu-list');
+    const menuItem = document.createElement('fluent-menu-item');
+    const menuItem2 = document.createElement('fluent-menu-item');
+    const menuItem3 = document.createElement('fluent-menu-item');
+    menuButton.setAttribute('slot', 'trigger');
+    menuButton.appendChild(document.createTextNode('Menu button'));
+    menuItem.appendChild(document.createTextNode('Menu item 1'));
+    menuItem2.appendChild(document.createTextNode('Menu item 2'));
+    menuItem3.appendChild(document.createTextNode('Menu item 3'));
+    menuList.appendChild(menuItem);
+    menuList.appendChild(menuItem2);
+    menuList.appendChild(menuItem3);
+    menu.appendChild(menuList);
+    menu.appendChild(menuButton);
+    return menu;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=menu.bench.js.map

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

@@ -0,0 +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"}

package/dist/esm/menu/menu.js

@@ -1,14 +1,45 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { autoUpdate, computePosition, flip, hide, size } from '@floating-ui/dom';
 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';
 /**
- * The Menu class represents a menu component.
+ * A Menu component that provides a customizable menu element.
+ * @class Menu
+ * @extends FASTElement
+ *
+ * @attr open-on-hover - Determines if the menu should open on hover.
+ * @attr open-on-context - Determines if the menu should open on right click.
+ * @attr close-on-scroll - Determines if the menu should close on scroll.
+ * @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
+ *
+ * @cssproperty --menu-max-height - The max-height of the menu.
+ *
+ * @slot trigger - Slot for the trigger elements.
+ * @slot - Default slot for the menu list.
+ *
+ * @method connectedCallback - Called when the element is connected to the DOM. Sets up the component.
+ * @method disconnectedCallback - Called when the element is disconnected from the DOM. Removes event listeners.
+ * @method setComponent - Sets the component state.
+ * @method toggleMenu - Toggles the open state of the menu.
+ * @method closeMenu - Closes the menu.
+ * @method openMenu - Opens the menu.
+ * @method focusMenuList - Focuses on the menu list.
+ * @method focusTrigger - Focuses on the menu trigger.
+ * @method openOnHoverChanged - Called whenever the 'openOnHover' property changes.
+ * @method persistOnItemClickChanged - Called whenever the 'persistOnItemClick' property changes.
+ * @method openOnContextChanged - Called whenever the 'openOnContext' property changes.
+ * @method closeOnScrollChanged - Called whenever the 'closeOnScroll' property changes.
+ * @method addListeners - Adds event listeners.
+ * @method removeListeners - Removes event listeners.
+ * @method menuKeydownHandler - Handles keyboard interaction for the menu.
+ * @method triggerKeydownHandler - Handles keyboard interaction for the trigger.
+ * @method documentClickHandler - Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+ *
+ * @summary The Menu component functions as a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
  * @public
  */
 export class Menu extends FASTElement {
@@ -34,11 +65,6 @@ export class Menu extends FASTElement {
          * @public
          */
         this.persistOnItemClick = false;
-        /**
-         * Defines whether the menu is open or not.
-         * @public
-         */
-        this.open = false;
         /**
          * Holds the slotted menu list.
          * @public
@@ -49,24 +75,34 @@ export class Menu extends FASTElement {
          * @public
          */
         this.slottedTriggers = [];
+        /**
+         * Defines whether the menu is open or not.
+         * @internal
+         */
+        this._open = false;
         /**
          * Toggles the open state of the menu.
          * @public
          */
         this.toggleMenu = () => {
-            if (this.open) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu();
-            }
+            var _a;
+            // @ts-expect-error - Baseline 2024
+            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(!this._open);
         };
         /**
          * Closes the menu.
          * @public
          */
-        this.closeMenu = () => {
-            this.open = false;
+        this.closeMenu = (event) => {
+            var _a;
+            // Keep menu open if the event target is a menu item checkbox or radio
+            if ((event === null || event === void 0 ? void 0 : event.target) instanceof MenuItem &&
+                (event.target.getAttribute('role') === MenuItemRole.menuitemcheckbox ||
+                    event.target.getAttribute('role') === MenuItemRole.menuitemradio)) {
+                return;
+            }
+            // @ts-expect-error - Baseline 2024
+            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
             if (this.closeOnScroll) {
                 document.removeEventListener('scroll', this.closeMenu);
             }
@@ -76,7 +112,9 @@ export class Menu extends FASTElement {
          * @public
          */
         this.openMenu = (e) => {
-            this.open = true;
+            var _a;
+            // @ts-expect-error - Baseline 2024
+            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(true);
             if (e && this.openOnContext) {
                 e.preventDefault();
             }
@@ -85,20 +123,30 @@ export class Menu extends FASTElement {
             }
         };
         /**
-         * The task to set the positioning of the menu.
-         * @protected
+         * Handles the 'toggle' event on the popover.
+         * @public
+         * @param e - the event
+         * @returns void
          */
-        this.setPositioningTask = () => {
-            this.setPositioning();
+        this.toggleHandler = (e) => {
+            var _a;
+            // @ts-expect-error - Baseline 2024
+            if (e.type === 'toggle' && e.newState) {
+                // @ts-expect-error - Baseline 2024
+                const newState = e.newState === 'open' ? true : false;
+                (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', `${newState}`);
+                this._open = newState;
+                this.focusMenuList();
+            }
         };
         /**
-         * Handles keyboard interaction for the trigger.
-         * Toggles the menu when the Space or Enter key is pressed.
-         * If the menu is open, focuses on the menu list.
+         * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
+         * is open, focuses on the menu list.
+         *
+         * @param e - the keyboard event
          * @public
-         * @param {KeyboardEvent} e - the keyboard event
          */
-        this.handleTriggerKeydown = (e) => {
+        this.triggerKeydownHandler = (e) => {
             if (e.defaultPrevented) {
                 return;
             }
@@ -108,21 +156,18 @@ export class Menu extends FASTElement {
                 case keyEnter:
                     e.preventDefault();
                     this.toggleMenu();
-                    if (this.open) {
-                        this.focusMenuList();
-                    }
                     break;
                 default:
                     return true;
             }
         };
         /**
-         * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
-         * @private
-         * @param {Event} e - The event triggered on document click.
+         * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+         * @internal
+         * @param e - The event triggered on document click.
          */
-        this.handleDocumentClick = (e) => {
-            if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
+        this.documentClickHandler = (e) => {
+            if (!e.composedPath().some((el) => el === this._trigger || el === this._menuList)) {
                 this.closeMenu();
             }
         };
@@ -142,9 +187,7 @@ export class Menu extends FASTElement {
      * @public
      */
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
         this.removeListeners();
     }
     /**
@@ -157,7 +200,8 @@ export class Menu extends FASTElement {
             this._trigger = this.slottedTriggers[0];
             this._menuList = this.slottedMenuList[0];
             this._trigger.setAttribute('aria-haspopup', 'true');
-            this._trigger.setAttribute('aria-expanded', `${this.open}`);
+            this._trigger.setAttribute('aria-expanded', `${this._open}`);
+            this._menuList.setAttribute('popover', this.openOnContext ? 'manual' : '');
             this.addListeners();
         }
     }
@@ -166,49 +210,26 @@ export class Menu extends FASTElement {
      * @public
      */
     focusMenuList() {
-        if (this.open && this._menuList) {
-            Updates.enqueue(() => {
-                this._menuList.focus();
-            });
-        }
+        Updates.enqueue(() => {
+            this._menuList.focus();
+        });
     }
     /**
      * Focuses on the menu trigger.
      * @public
      */
     focusTrigger() {
-        if (!this.open && this._trigger) {
-            Updates.enqueue(() => {
-                this._trigger.focus();
-            });
-        }
-    }
-    /**
-     * Called whenever the open state changes.
-     * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
-     * Sets menu list position
-     * emits openChanged event
-     * @public
-     * @param {boolean} oldValue - The previous value of 'open'.
-     * @param {boolean} newValue - The new value of 'open'.
-     */
-    openChanged(oldValue, newValue) {
-        var _a;
-        if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
-            this._trigger.setAttribute('aria-expanded', `${this.open}`);
-            if (this._menuList && this.open) {
-                Updates.enqueue(this.setPositioningTask);
-            }
-        }
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.$emit('onOpenChange', { open: newValue });
+        Updates.enqueue(() => {
+            this._trigger.focus();
+        });
     }
     /**
      * Called whenever the 'openOnHover' property changes.
      * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+     *
+     * @param oldValue - The previous value of 'openOnHover'.
+     * @param newValue - The new value of 'openOnHover'.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnHover'.
-     * @param {boolean} newValue - The new value of 'openOnHover'.
      */
     openOnHoverChanged(oldValue, newValue) {
         var _a, _b;
@@ -223,24 +244,24 @@ export class Menu extends FASTElement {
      * Called whenever the 'persistOnItemClick' property changes.
      * Adds or removes a 'click' event listener to the menu list based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
-     * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+     * @param oldValue - The previous value of 'persistOnItemClick'.
+     * @param newValue - The new value of 'persistOnItemClick'.
      */
     persistOnItemClickChanged(oldValue, newValue) {
         var _a, _b;
         if (!newValue) {
-            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.closeMenu);
+            (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.closeMenu);
         }
         else {
-            (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.closeMenu);
+            (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this.closeMenu);
         }
     }
     /**
      * Called whenever the 'openOnContext' property changes.
      * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'openOnContext'.
-     * @param {boolean} newValue - The new value of 'openOnContext'.
+     * @param oldValue - The previous value of 'openOnContext'.
+     * @param newValue - The new value of 'openOnContext'.
      */
     openOnContextChanged(oldValue, newValue) {
         var _a, _b;
@@ -255,8 +276,8 @@ export class Menu extends FASTElement {
      * Called whenever the 'closeOnScroll' property changes.
      * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
      * @public
-     * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
-     * @param {boolean} newValue - The new value of 'closeOnScroll'.
+     * @param oldValue - The previous value of 'closeOnScroll'.
+     * @param newValue - The new value of 'closeOnScroll'.
      */
     closeOnScrollChanged(oldValue, newValue) {
         if (newValue) {
@@ -266,100 +287,66 @@ export class Menu extends FASTElement {
             document.removeEventListener('scroll', this.closeMenu);
         }
     }
-    /**
-     * Sets the positioning of the menu.
-     * @protected
-     */
-    setPositioning() {
-        if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
-            this.cleanup = autoUpdate(this, this.positioningContainer, async () => {
-                var _a, _b;
-                const { middlewareData, x, y } = await computePosition(this._trigger, this.positioningContainer, {
-                    placement: 'bottom',
-                    strategy: 'fixed',
-                    middleware: [
-                        flip(),
-                        size({
-                            apply: ({ availableHeight, rects }) => {
-                                var _a;
-                                ((_a = this.positioningContainer) === null || _a === void 0 ? void 0 : _a.style) &&
-                                    Object.assign(this.positioningContainer.style, {
-                                        maxHeight: `${availableHeight}px`,
-                                        width: `${rects.reference.width}px`,
-                                    });
-                            },
-                        }),
-                        hide(),
-                    ],
-                });
-                if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
-                    this.open = false;
-                    return;
-                }
-                ((_b = this.positioningContainer) === null || _b === void 0 ? void 0 : _b.style) &&
-                    Object.assign(this.positioningContainer.style, {
-                        position: 'fixed',
-                        top: '0',
-                        left: '0',
-                        transform: `translate(${x}px, ${y}px)`,
-                    });
-            });
-        }
-    }
     /**
      * Adds event listeners.
-     * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+     * 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.
-     * @public
+     * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+     * @internal
      */
     addListeners() {
-        var _a, _b, _c, _d, _e;
-        document.addEventListener('click', this.handleDocumentClick);
-        (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleTriggerKeydown);
+        var _a, _b, _c, _d, _e, _f;
+        (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggleHandler);
+        (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.triggerKeydownHandler);
         if (!this.persistOnItemClick) {
-            (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.closeMenu);
+            (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.addEventListener('change', this.closeMenu);
         }
         if (this.openOnHover) {
-            (_c = this._trigger) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseover', this.openMenu);
+            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseover', this.openMenu);
         }
         else if (this.openOnContext) {
-            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', this.openMenu);
+            (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('contextmenu', this.openMenu);
+            document.addEventListener('click', this.documentClickHandler);
         }
         else {
-            (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.toggleMenu);
+            (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('click', this.toggleMenu);
         }
     }
     /**
      * Removes event listeners.
-     * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+     * 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.
-     * @private
+     * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
+     * @internal
      */
     removeListeners() {
-        var _a, _b, _c, _d, _e;
-        document.removeEventListener('click', this.handleDocumentClick);
-        (_a = this._trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleTriggerKeydown);
+        var _a, _b, _c, _d, _e, _f;
+        (_a = this._menuList) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggleHandler);
+        (_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.triggerKeydownHandler);
         if (!this.persistOnItemClick) {
-            (_b = this._menuList) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.closeMenu);
+            (_c = this._menuList) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.closeMenu);
         }
         if (this.openOnHover) {
-            (_c = this._trigger) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseover', this.openMenu);
+            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseover', this.openMenu);
         }
         if (this.openOnContext) {
-            (_d = this._trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener('contextmenu', this.openMenu);
+            (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener('contextmenu', this.openMenu);
+            document.removeEventListener('click', this.documentClickHandler);
         }
         else {
-            (_e = this._trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener('click', this.toggleMenu);
+            (_f = this._trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener('click', this.toggleMenu);
         }
     }
     /**
-     * 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.
+     * 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.
+     *
+     * @param e - the keyboard event
      * @public
-     * @param {KeyboardEvent} e - the keyboard event
      */
-    handleMenuKeydown(e) {
+    menuKeydownHandler(e) {
         if (e.defaultPrevented) {
             return;
         }
@@ -367,43 +354,37 @@ export class Menu extends FASTElement {
         switch (key) {
             case keyEscape:
                 e.preventDefault();
-                if (this.open) {
+                if (this._open) {
                     this.closeMenu();
                     this.focusTrigger();
                 }
                 break;
             case keyTab:
-                if (this.open) {
+                if (this._open)
                     this.closeMenu();
-                }
-                if (e.shiftKey) {
+                if (e.shiftKey && e.composedPath()[0] !== this._trigger) {
                     this.focusTrigger();
                 }
+                else if (e.shiftKey) {
+                    return true;
+                }
             default:
                 return true;
         }
     }
 }
 __decorate([
-    observable,
     attr({ attribute: 'open-on-hover', mode: 'boolean' })
 ], Menu.prototype, "openOnHover", void 0);
 __decorate([
-    observable,
     attr({ attribute: 'open-on-context', mode: 'boolean' })
 ], Menu.prototype, "openOnContext", void 0);
 __decorate([
-    observable,
     attr({ attribute: 'close-on-scroll', mode: 'boolean' })
 ], Menu.prototype, "closeOnScroll", void 0);
 __decorate([
-    observable,
     attr({ attribute: 'persist-on-item-click', mode: 'boolean' })
 ], Menu.prototype, "persistOnItemClick", void 0);
-__decorate([
-    observable,
-    attr({ mode: 'boolean' })
-], Menu.prototype, "open", void 0);
 __decorate([
     observable
 ], Menu.prototype, "slottedMenuList", void 0);

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":"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"}

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

@@ -1,17 +1,31 @@
 import { css } from '@microsoft/fast-element';
+import { display } from '../utils/index.js';
 /** Menu styles
  * @public
  */
 export const styles = css `
-  :host {
-    position: relative;
-    z-index: var(--z-index-menu, 1);
+  ${display('inline-block')}
+
+  ::slotted([slot='trigger']) {
+    anchor-name: --menu-trigger;
   }
-  .positioning-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    transform: translate(0, 0);
+
+  ::slotted([popover]) {
+    inset-area: block-end span-inline-end;
+    margin: 0;
+    max-height: var(--menu-max-height, auto);
+    position-anchor: --menu-trigger;
+    position-try-options: flip-block;
+    position: absolute;
+    z-index: 1;
+  }
+
+  ::slotted([popover]:popover-open) {
+    inset: unset;
+  }
+
+  ::slotted([popover]:not(:popover-open)) {
+    display: none;
   }
 `;
 //# sourceMappingURL=menu.styles.js.map

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;AAG9C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;CAWxB,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,mBAAmB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuB1B,CAAC"}