@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/listbox/listbox.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Listbox } from './listbox.js';
+import { styles } from './listbox.styles.js';
+import { template } from './listbox.template.js';
+/**
+ * The Fluent Listbox Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-listbox>`
+ */
+export const definition = Listbox.compose({
+    name: `${FluentDesignSystem.prefix}-listbox`,
+    template,
+    styles,
+});
+//# sourceMappingURL=listbox.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.definition.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/listbox/listbox.js

@@ -0,0 +1,192 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { isDropdownOption } from '../option/option.options.js';
+import { toggleState } from '../utils/element-internals.js';
+import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
+import { uniqueId } from '../utils/unique-id.js';
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
+ *
+ * @tag fluent-listbox
+ *
+ * @slot - The default slot for the options.
+ *
+ * @remarks
+ * The listbox component represents a list of options that can be selected.
+ * It is intended to be used in conjunction with the {@link BaseDropdown | Dropdown} component.
+ *
+ * @public
+ */
+export class Listbox extends FASTElement {
+    /**
+     * Updates the multiple selection state of the listbox and its options.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev, next) {
+        this.elementInternals.ariaMultiSelectable = next ? 'true' : 'false';
+        toggleState(this.elementInternals, 'multiple', next);
+        Updates.enqueue(() => {
+            this.options.forEach(x => {
+                x.multiple = !!next;
+            });
+        });
+    }
+    /**
+     * Updates the enabled options collection when properties on the child options change.
+     *
+     * @param prev - the previous options
+     * @param next - the current options
+     *
+     * @internal
+     */
+    optionsChanged(prev, next) {
+        next?.forEach((option, index) => {
+            option.elementInternals.ariaPosInSet = `${index + 1}`;
+            option.elementInternals.ariaSetSize = `${next.length}`;
+        });
+    }
+    /**
+     * Handles the `beforetoggle` event on the listbox.
+     *
+     * @param e - the toggle event
+     * @returns true to allow the default popover behavior, undefined to prevent it
+     * @internal
+     */
+    beforetoggleHandler(e) {
+        if (!this.dropdown) {
+            return true;
+        }
+        if (this.dropdown.disabled) {
+            this.dropdown.open = false;
+            return;
+        }
+        this.dropdown.open = e.newState === 'open';
+        return true;
+    }
+    /**
+     * The collection of child options that are not disabled.
+     *
+     * @internal
+     */
+    get enabledOptions() {
+        return this.options?.filter(x => !x.disabled) ?? [];
+    }
+    /**
+     * The collection of child options that are selected.
+     *
+     * @public
+     */
+    get selectedOptions() {
+        return this.options?.filter(x => x.selected) ?? [];
+    }
+    /**
+     * Sets the `selected` state on a target option when clicked.
+     *
+     * @param e - The pointer event
+     * @public
+     */
+    clickHandler(e) {
+        if (this.dropdown) {
+            return true;
+        }
+        const target = e.target;
+        if (isDropdownOption(target)) {
+            this.selectOption(this.enabledOptions.indexOf(target));
+        }
+        return true;
+    }
+    constructor() {
+        super();
+        /**
+         * Sets the listbox ID to a unique value if one is not provided.
+         *
+         * @override
+         * @public
+         * @remarks
+         * HTML Attribute: `id`
+         */
+        this.id = uniqueId('listbox-');
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'listbox';
+    }
+    /**
+     * Handles observable subscriptions for the listbox.
+     *
+     * @param source - The source of the observed change
+     * @param propertyName - The name of the property that changed
+     *
+     * @internal
+     */
+    handleChange(source, propertyName) {
+        if (propertyName === 'multiple') {
+            this.multiple = source.multiple;
+            return;
+        }
+    }
+    /**
+     * Selects an option by index.
+     *
+     * @param index - The index of the option to select.
+     * @public
+     */
+    selectOption(index = this.selectedIndex) {
+        let selectedIndex = this.selectedIndex;
+        if (!this.multiple) {
+            this.enabledOptions.forEach((item, i) => {
+                const shouldCheck = i === index;
+                item.selected = shouldCheck;
+                if (shouldCheck) {
+                    selectedIndex = i;
+                }
+            });
+        }
+        else {
+            const option = this.enabledOptions[index];
+            if (option) {
+                option.selected = !option.selected;
+            }
+            selectedIndex = index;
+        }
+        this.selectedIndex = selectedIndex;
+    }
+    /**
+     * Handles the `slotchange` event for the default slot.
+     * Sets the `options` property to the list of slotted options.
+     *
+     * @param e - The slotchange event
+     * @public
+     */
+    slotchangeHandler(e) {
+        const target = e.target;
+        waitForConnectedDescendants(this, () => {
+            const options = target
+                .assignedElements()
+                .filter((option) => isDropdownOption(option));
+            this.options = options;
+        });
+    }
+}
+__decorate([
+    attr({ attribute: 'id', mode: 'fromView' })
+], Listbox.prototype, "id", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "multiple", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "options", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "selectedIndex", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "dropdown", void 0);
+//# sourceMappingURL=listbox.js.map

package/dist/esm/listbox/listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.js","sourceRoot":"","sources":["../../../src/listbox/listbox.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import type { Listbox } from './listbox.js';
+/**
+ * Predicate function that determines if the element should be considered a listbox.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a listbox.
+ * @public
+ */
+export declare function isListbox(element?: Node | null, tagName?: string): element is Listbox;

package/dist/esm/listbox/listbox.options.js

@@ -0,0 +1,15 @@
+/**
+ * Predicate function that determines if the element should be considered a listbox.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a listbox.
+ * @public
+ */
+export function isListbox(element, tagName = '-listbox') {
+    if (element?.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    return element.tagName.toLowerCase().endsWith(tagName);
+}
+//# sourceMappingURL=listbox.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.options.js","sourceRoot":"","sources":["../../../src/listbox/listbox.options.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,OAAqB,EAAE,UAAkB,UAAU;IAC3E,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC"}

package/dist/esm/listbox/listbox.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for the {@link (Listbox:class)} component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/listbox/listbox.styles.js

@@ -0,0 +1,62 @@
+import { css } from '@microsoft/fast-element';
+import { flipBlockState } from '../styles/states/index.js';
+import { borderRadiusMedium, colorNeutralBackground1, colorTransparentStroke, shadow16, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the {@link (Listbox:class)} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    box-shadow: ${shadow16};
+    box-sizing: border-box;
+    flex-direction: column;
+    margin: 0;
+    min-width: 160px;
+    padding: ${spacingHorizontalXS};
+    row-gap: ${spacingHorizontalXXS};
+    width: auto;
+  }
+
+  :host([popover]) {
+    inset: unset;
+    overflow: auto;
+  }
+
+  @supports (anchor-name: --anchor) {
+    :host([popover]) {
+      position: absolute;
+      margin-block-start: 0;
+      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-width: anchor-size(width);
+      position-anchor: --dropdown;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
+    }
+
+    @position-try --flip-block {
+      bottom: anchor(top);
+      top: unset;
+    }
+  }
+
+  @supports not (anchor-name: --anchor) {
+    :host([popover]) {
+      margin-block-start: var(--margin-offset, 0);
+      max-height: var(--listbox-max-height, 50vh);
+      position: fixed;
+    }
+
+    :host([popover]${flipBlockState}) {
+      margin-block-start: revert;
+      translate: 0 -100%;
+    }
+  }
+`;
+//# sourceMappingURL=listbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCd,cAAc;;;;;CAKlC,CAAC"}

package/dist/esm/listbox/listbox.template.d.ts

@@ -0,0 +1,16 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { Listbox } from './listbox.js';
+/**
+ * Generates a template for the {@link (Dropdown:class)} component.
+ *
+ * @returns The template object.
+ *
+ * @public
+ */
+export declare function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
+/**
+ * Template for the Listbox component.
+ *
+ * @public
+ */
+export declare const template: ElementViewTemplate<Listbox>;

package/dist/esm/listbox/listbox.template.js

@@ -0,0 +1,26 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Generates a template for the {@link (Dropdown:class)} component.
+ *
+ * @returns The template object.
+ *
+ * @public
+ */
+export function listboxTemplate() {
+    return html `
+    <template
+      id="${x => x.id}"
+      @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+      <slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot>
+    </template>
+  `;
+}
+/**
+ * Template for the Listbox component.
+ *
+ * @public
+ */
+export const template = listboxTemplate();
+//# sourceMappingURL=listbox.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;;;GAMG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG;;YAEJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;uBACE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAoB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;2BAEtC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;;GAE9D,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+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

@@ -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.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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.d.ts

@@ -0,0 +1,226 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { MenuList } from '../menu-list/menu-list.js';
+/**
+ * A Menu component that provides a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
+ * @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.
+ * @attr split - Determines if the menu is in split state.
+ *
+ * @cssproperty --menu-max-height - The max-height of the menu.
+ *
+ * @slot primary-action - Slot for the primary action elements. Used when in `split` state.
+ * @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 declare class Menu extends FASTElement {
+    /**
+     * Determines if the menu should open on hover.
+     * @public
+     */
+    openOnHover?: boolean;
+    /**
+     * Determines if the menu should open on right click.
+     * @public
+     */
+    openOnContext?: boolean;
+    /**
+     * Determines if the menu should close on scroll.
+     * @public
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Determines if the menu open state should persis on click of menu item
+     * @public
+     */
+    persistOnItemClick?: boolean;
+    /**
+     * Determines if the menu is in split state.
+     * @public
+     */
+    split?: boolean;
+    /**
+     * Holds the slotted menu list.
+     * @public
+     */
+    slottedMenuList: MenuList[];
+    /**
+     * Holds the slotted triggers.
+     * @public
+     */
+    slottedTriggers: HTMLElement[];
+    /**
+     * Holds the primary slot element.
+     * @public
+     */
+    primaryAction: HTMLSlotElement;
+    /**
+     * Defines whether the menu is open or not.
+     * @internal
+     */
+    private _open;
+    /**
+     * The trigger element of the menu.
+     * @internal
+     */
+    private _trigger?;
+    /**
+     * The menu list element of the menu which has the popover behavior.
+     * @internal
+     */
+    private _menuList?;
+    /**
+     * Called when the element is connected to the DOM.
+     * Sets up the component.
+     * @public
+     */
+    connectedCallback(): void;
+    /**
+     * Called when the element is disconnected from the DOM.
+     * Removes event listeners.
+     * @public
+     */
+    disconnectedCallback(): void;
+    /**
+     * Sets the component.
+     * Sets the trigger and menu list elements and adds event listeners.
+     * @public
+     */
+    setComponent(): void;
+    /**
+     * Toggles the open state of the menu.
+     * @public
+     */
+    toggleMenu: () => void;
+    /**
+     * Closes the menu.
+     * @public
+     */
+    closeMenu: (event?: Event) => void;
+    /**
+     * Opens the menu.
+     * @public
+     */
+    openMenu: (e?: Event) => void;
+    /**
+     * Focuses on the menu list.
+     * @public
+     */
+    focusMenuList(): void;
+    /**
+     * Focuses on the menu trigger.
+     * @public
+     */
+    focusTrigger(): void;
+    /**
+     * Handles the 'toggle' event on the popover.
+     * @public
+     * @param e - the event
+     * @returns void
+     */
+    toggleHandler: (e: Event) => void;
+    /**
+     * 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
+     */
+    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'persistOnItemClick' property changes.
+     * Adds or removes a 'click' event listener to the menu list based on the new value.
+     * @public
+     * @param oldValue - The previous value of 'persistOnItemClick'.
+     * @param newValue - The new value of 'persistOnItemClick'.
+     */
+    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'openOnContext' property changes.
+     * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+     * @public
+     * @param oldValue - The previous value of 'openOnContext'.
+     * @param newValue - The new value of 'openOnContext'.
+     */
+    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'closeOnScroll' property changes.
+     * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
+     * @public
+     * @param oldValue - The previous value of 'closeOnScroll'.
+     * @param newValue - The new value of 'closeOnScroll'.
+     */
+    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.
+     * @internal
+     */
+    private addListeners;
+    /**
+     * 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.
+     * @internal
+     */
+    private removeListeners;
+    /**
+     * 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
+     */
+    menuKeydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * 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
+     */
+    triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
+    /**
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * @internal
+     * @param e - The event triggered on document click.
+     */
+    private documentClickHandler;
+}