@m3e/fab-menu 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/src/FabMenuItemElement.d.ts

@@ -33,6 +33,8 @@ declare const M3eFabMenuItemElement_base: import("node_modules/@m3e/core/dist/sr
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
+ * @fires click - Emitted when the element is clicked.
+ *
  * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
  * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
  * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.

package/dist/src/FabMenuItemElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FabMenuItemElement.d.ts","sourceRoot":"","sources":["../../src/FabMenuItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAiBvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6HpC;IAEF,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAI9E,wEAAwE;IACxE,IAAI,IAAI,IAAI,iBAAiB,GAAG,IAAI,CAEnC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;IACT,MAAM,IAAI,OAAO;CAqB3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,qBAAqB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"FabMenuItemElement.d.ts","sourceRoot":"","sources":["../../src/FabMenuItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAiBvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6HpC;IAEF,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAI9E,wEAAwE;IACxE,IAAI,IAAI,IAAI,iBAAiB,GAAG,IAAI,CAEnC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;IACT,MAAM,IAAI,OAAO;CAqB3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,qBAAqB,CAAC;KAC5C;CACF"}

package/dist/src/FabMenuTriggerElement.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, LitElement } from "lit";
 import { M3eFabMenuElement } from "./FabMenuElement";
-declare const M3eFabMenuTriggerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+declare const M3eFabMenuTriggerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & typeof LitElement;
 /**
  * An element, nested within a clickable element, used to open a floating action button (FAB) menu.
  *

package/dist/src/FabMenuTriggerElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FabMenuTriggerElement.d.ts","sourceRoot":"","sources":["../../src/FabMenuTriggerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,wBAAyB,SAAQ,6BAAiC;;IAC7E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAIF,yCAAyC;IACzC,IAAI,IAAI,IAAI,iBAAiB,GAAG,IAAI,CAEnC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAc3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAYvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}
+{"version":3,"file":"FabMenuTriggerElement.d.ts","sourceRoot":"","sources":["../../src/FabMenuTriggerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,wBAAyB,SAAQ,6BAAmB;;IAC/D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAIF,yCAAyC;IACzC,IAAI,IAAI,IAAI,iBAAiB,GAAG,IAAI,CAEnC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAc3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAYvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@m3e/fab-menu",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "FAB Menu for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
-  "homepage": "https://matraic.github.io/m3e/",
+  "homepage": "https://matraic.github.io/m3e/#/components/fab-menu.html",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/matraic/m3e.git"
@@ -27,8 +27,8 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.1",
-    "@m3e/fab": "1.0.0-rc.1",
+    "@m3e/core": "1.0.0-rc.3",
+    "@m3e/fab": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {

package/cem.config.mjs

@@ -1,16 +0,0 @@
-import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
-
-export default {
-  globs: ["src/**/*.ts"],
-  exclude: ["src/**/*.spec.ts"],
-  packagejson: true,
-  outdir: "dist",
-  litelement: true,
-  plugins: [
-    customElementVsCodePlugin({
-      outdir: "dist",
-      htmlFileName: "html-custom-data.json",
-      cssFileName: "css-custom-data.json",
-    }),
-  ],
-};

package/demo/index.html

@@ -1,60 +0,0 @@
-<!doctype html>
-<html lang="en" style="overflow-y: auto">
-  <head>
-    <title>Floating Action Button Menu for M3E</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Floating Action Button Menu for M3E" />
-    <base href="./" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
-      rel="stylesheet"
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
-          "@m3e/core": "../../core/dist/index.min.js",
-          "@m3e/core/a11y": "../../core/dist/a11y.min.js",
-          "@m3e/core/bidi": "../../core/dist/bidi.min.js",
-          "@m3e/core/anchoring": "../../core/dist/anchoring.min.js"
-        }
-      }
-    </script>
-    <script type="module" src="../../icon/dist/index.min.js"></script>
-    <script type="module" src="../../fab/dist/index.min.js"></script>
-    <script type="module" src="../../theme/dist/index.min.js"></script>
-    <script type="module" src="../dist/index.min.js"></script>
-    <style>
-      body {
-        font-family: "Roboto";
-      }
-      *:not(:defined) {
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <m3e-theme strong-focus>
-      <m3e-fab variant="primary" size="large" style="position: absolute; right: 1rem; bottom: 1rem">
-        <m3e-fab-menu-trigger for="fabmenu">
-          <m3e-icon name="edit"></m3e-icon>
-        </m3e-fab-menu-trigger>
-      </m3e-fab>
-      <m3e-fab-menu id="fabmenu" variant="secondary">
-        <m3e-fab-menu-item>First</m3e-fab-menu-item>
-        <m3e-fab-menu-item disabled>Second</m3e-fab-menu-item>
-        <m3e-fab-menu-item>Third</m3e-fab-menu-item>
-        <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
-        <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
-        <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
-      </m3e-fab-menu>
-    </m3e-theme>
-  </body>
-</html>

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "@m3e/core/a11y", "@m3e/core/bidi", "@m3e/core/anchoring", "@m3e/fab", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/FabMenuElement.ts

@@ -1,391 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
-import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { DesignToken, DisabledMixin, Role, ScrollController } from "@m3e/core";
-import { RovingTabIndexManager } from "@m3e/core/a11y";
-import { M3eDirectionality } from "@m3e/core/bidi";
-import { positionAnchor } from "@m3e/core/anchoring";
-
-import { M3eFabElement } from "@m3e/fab";
-
-import { FabMenuVariant } from "./FabMenuVariant";
-import { M3eFabMenuItemElement } from "./FabMenuItemElement";
-
-/**
- * @summary
- * A menu, opened from a floating action button (FAB), used to display multiple related actions.
- *
- * @description
- * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a
- * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access
- * to contextual actions in modern, visually rich interfaces.
- *
- * @example
- * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.
- * ```html
- * <m3e-fab variant="primary" size="large">
- *  <m3e-fab-menu-trigger for="fabmenu">
- *    <m3e-icon name="edit"></m3e-icon>
- *  </m3e-fab-menu-trigger>
- * </m3e-fab>
- * <m3e-fab-menu id="fabmenu" variant="secondary">
- *  <m3e-fab-menu-item>First</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
- * </m3e-fab-menu>
- * ```
- *
- * @tag m3e-fab-menu
- *
- * @slot - Renders the contents of the menu.
- *
- * @attr variant - The appearance variant of the menu.
- *
- * @cssprop --m3e-fab-menu-spacing - Vertical gap between menu items.
- * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.
- * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.
- * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.
- * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.
- * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.
- * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.
- * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.
- * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.
- * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.
- * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.
- * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.
- * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.
- * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.
- * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.
- * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.
- * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.
- */
-@customElement("m3e-fab-menu")
-export class M3eFabMenuElement extends Role(LitElement, "menu") {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      position: absolute;
-      flex-direction: column;
-      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);
-      padding: unset;
-      margin: unset;
-      border: unset;
-      overflow: visible;
-      max-width: var(--m3e-fab-menu-max-width, 17.5rem);
-      opacity: 0;
-      background-color: transparent;
-      display: none;
-      transition: ${unsafeCSS(
-        `opacity ${DesignToken.motion.spring.fastEffects}, 
-        transform ${DesignToken.motion.spring.fastSpatial},
-        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,
-        display ${DesignToken.motion.spring.fastEffects} allow-discrete`
-      )};
-    }
-    .base {
-      display: contents;
-    }
-    :host([variant="primary"]) .base {
-      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});
-      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});
-      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});
-      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});
-      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});
-    }
-    :host([variant="secondary"]) .base {
-      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});
-      --_fab-menu-item-container-color: var(
-        --m3e-secondary-fab-container-color,
-        ${DesignToken.color.secondaryContainer}
-      );
-      --_fab-menu-background-hover-color: var(
-        --m3e-secondary-fab-hover-color,
-        ${DesignToken.color.onSecondaryContainer}
-      );
-      --_fab-menu-background-focus-color: var(
-        --m3e-secondary-fab-focus-color,
-        ${DesignToken.color.onSecondaryContainer}
-      );
-      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});
-    }
-    :host([variant="tertiary"]) .base {
-      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});
-      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});
-      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});
-      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});
-      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});
-    }
-    :host {
-      transform: scaleX(0.8);
-    }
-    :host(.-left) {
-      align-items: flex-start;
-      transform-origin: left;
-    }
-    :host(.-right) {
-      align-items: flex-end;
-      transform-origin: right;
-    }
-    :host(:popover-open) {
-      transform: scaleX(1);
-      display: inline-flex;
-      opacity: 1;
-    }
-    :host::backdrop {
-      background-color: transparent;
-    }
-    @starting-style {
-      :host(:popover-open) {
-        opacity: 0;
-      }
-      :host(:popover-open) {
-        transform: scaleX(0.8);
-      }
-    }
-    @media (prefers-reduced-motion) {
-      :host {
-        transition: none;
-      }
-    }
-    @media (forced-colors: active) {
-      :host {
-        border-radius: ${DesignToken.shape.corner.medium};
-        border: 1px solid MenuText;
-        background-color: Menu;
-      }
-    }
-  `;
-
-  /** @private */ #fabTabIndex?: number;
-  /** @private */ #trigger?: HTMLElement;
-  /** @private */ #anchoringCleanup?: () => void;
-
-  /** @private */
-  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()
-    .withWrap()
-    .withHomeAndEnd()
-    .withVerticalOrientation();
-
-  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);
-  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);
-
-  /** @private */
-  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });
-
-  /** @private */
-  readonly #toggleHandler = (e: ToggleEvent) => {
-    if (e.newState === "closed") {
-      this.#anchoringCleanup?.();
-      this.#anchoringCleanup = undefined;
-    } else {
-      setTimeout(() => {
-        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));
-      }, 40);
-    }
-  };
-
-  /**
-   * The appearance variant of the menu.
-   * @default "primary"
-   */
-  @property({ reflect: true }) variant: FabMenuVariant = "primary";
-
-  /** Whether the menu is open. */
-  get isOpen() {
-    return this.#trigger !== undefined;
-  }
-
-  /**
-   * Opens the menu.
-   * @param {HTMLElement} trigger The element that triggered the menu.
-   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.
-   */
-  async show(trigger: HTMLElement): Promise<void> {
-    if (this.#trigger && this.#trigger !== trigger) {
-      this.hide();
-    }
-
-    this.#anchoringCleanup?.();
-    this.#anchoringCleanup = await positionAnchor(
-      this,
-      trigger,
-      {
-        position: M3eDirectionality.current === "ltr" ? "top-end" : "top-start",
-        inline: true,
-        shift: true,
-        flip: true,
-        offset: 8,
-      },
-      (x, y, position) => {
-        this.classList.toggle("-right", position.includes("end"));
-        this.classList.toggle("-left", position.includes("start"));
-        this.style.left = `${x}px`;
-        this.style.top = `${y}px`;
-      }
-    );
-
-    this.showPopover();
-
-    this.#trigger = trigger;
-    this.#trigger.ariaExpanded = "true";
-    this.#scrollController.observe(this.#trigger);
-
-    this.#attachFab();
-  }
-
-  /**
-   * Hides the menu.
-   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
-   */
-  hide(restoreFocus: boolean = false): void {
-    this.hidePopover();
-
-    if (this.#trigger) {
-      this.#trigger.ariaExpanded = "false";
-      if (restoreFocus) {
-        this.#trigger.focus();
-      }
-
-      this.#detachFab();
-
-      this.#scrollController.unobserve(this.#trigger);
-      this.#trigger = undefined;
-    }
-  }
-
-  /**
-   * Toggles the menu.
-   * @param {HTMLElement} trigger The element that triggered the menu.
-   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.
-   */
-  async toggle(trigger: HTMLElement): Promise<void> {
-    if (this.#trigger) {
-      this.hide();
-    } else {
-      await this.show(trigger);
-    }
-  }
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    this.tabIndex = -1;
-    this.setAttribute("popover", "manual");
-
-    this.addEventListener("keydown", this.#keyDownHandler);
-    this.addEventListener("toggle", this.#toggleHandler);
-    document.addEventListener("click", this.#documentClickHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this.removeEventListener("keydown", this.#keyDownHandler);
-    this.removeEventListener("toggle", this.#toggleHandler);
-    document.removeEventListener("click", this.#documentClickHandler);
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="base"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
-  }
-
-  /** @private */
-  #handleSlotChange(): void {
-    const { added } = this.#listManager.setItems([...this.querySelectorAll("m3e-fab-menu-item")]);
-    if (!this.#listManager.activeItem) {
-      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));
-    }
-  }
-
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    switch (e.key) {
-      case "Tab":
-        this.hide();
-        break;
-
-      case "Escape":
-        if (!e.shiftKey && !e.ctrlKey) {
-          this.hide(true);
-        }
-        break;
-
-      default:
-        this.#listManager.onKeyDown(e);
-        break;
-    }
-  }
-
-  /** @private */
-  #handleDocumentClick(e: MouseEvent): void {
-    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {
-      this.hide();
-    }
-  }
-
-  /** @private */
-  #attachFab(): void {
-    const fab = this.#trigger?.closest<M3eFabElement>("m3e-fab");
-    if (fab) {
-      this.#fabTabIndex = fab.tabIndex;
-      fab.addEventListener("keydown", this.#keyDownHandler);
-      this.#listManager.setItems([...this.#listManager.items, fab]);
-    }
-  }
-
-  /** @private */
-  #detachFab(): void {
-    const fab = this.#trigger?.closest<M3eFabElement>("m3e-fab");
-    if (fab) {
-      if (this.#fabTabIndex !== undefined) {
-        fab.tabIndex = this.#fabTabIndex;
-      }
-      fab.removeEventListener("keydown", this.#keyDownHandler);
-      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);
-    }
-  }
-}
-
-interface M3eFabMenuElementEventMap extends HTMLElementEventMap {
-  beforetoggle: ToggleEvent;
-  toggle: ToggleEvent;
-}
-
-export interface M3eFabMenuElement {
-  addEventListener<K extends keyof M3eFabMenuElementEventMap>(
-    type: K,
-    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  addEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof M3eFabMenuElementEventMap>(
-    type: K,
-    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-
-  removeEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-fab-menu": M3eFabMenuElement;
-  }
-}