@schukai/monster 4.45.5 → 4.46.0

package/source/components/navigation/site-navigation.mjs

@@ -13,20 +13,20 @@
  */
 
 import {
-  CustomElement,
-  getSlottedElements,
-  registerCustomElement,
-  assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
+	assembleMethodSymbol,
 } from "../../dom/customelement.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { SiteNavigationStyleSheet } from "./stylesheet/site-navigation.mjs";
 import {
-  computePosition,
-  autoUpdate,
-  flip,
-  shift,
-  offset,
-  size,
+	computePosition,
+	autoUpdate,
+	flip,
+	shift,
+	offset,
+	size,
 } from "@floating-ui/dom";
 import { fireCustomEvent } from "../../dom/events.mjs";
 
@@ -64,59 +64,59 @@ const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
  * @fires monster-submenu-hide - Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.
  */
 class SiteNavigation extends CustomElement {
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/navigation/site@@instance");
-  }
-
-  /**
-   * Configuration options for the SiteNavigation component.
-   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-   *
-   * To set these options via an HTML tag, use the `data-monster-options` attribute.
-   * The individual configuration values are detailed in the table below.
-   *
-   * @property {Object} templates - Template definitions.
-   * @property {string} templates.main - The main HTML template for the component.
-   * @property {string} interactionModel="auto" - Defines the interaction with submenus. Possible values: `auto`, `click`, `hover`. With `auto`, `hover` is used on desktop and `click` is used in the hamburger menu.
-   * @property {Object} features - Container for additional feature flags.
-   * @property {boolean} features.resetOnClose=true - If `true`, all open submenus within the hamburger menu will be reset when it is closed.
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: { main: getTemplate() },
-      interactionModel: "auto", // 'auto', 'click', 'hover'
-      features: {
-        resetOnClose: true,
-      },
-    });
-  }
-
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-  }
-
-  static getCSSStyleSheet() {
-    return [SiteNavigationStyleSheet];
-  }
-
-  static getTag() {
-    return "monster-site-navigation";
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    attachResizeObserver.call(this);
-    requestAnimationFrame(() => {
-      populateTabs.call(this);
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    detachResizeObserver.call(this);
-  }
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/navigation/site@@instance");
+	}
+
+	/**
+	 * Configuration options for the SiteNavigation component.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * To set these options via an HTML tag, use the `data-monster-options` attribute.
+	 * The individual configuration values are detailed in the table below.
+	 *
+	 * @property {Object} templates - Template definitions.
+	 * @property {string} templates.main - The main HTML template for the component.
+	 * @property {string} interactionModel="auto" - Defines the interaction with submenus. Possible values: `auto`, `click`, `hover`. With `auto`, `hover` is used on desktop and `click` is used in the hamburger menu.
+	 * @property {Object} features - Container for additional feature flags.
+	 * @property {boolean} features.resetOnClose=true - If `true`, all open submenus within the hamburger menu will be reset when it is closed.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: { main: getTemplate() },
+			interactionModel: "auto", // 'auto', 'click', 'hover'
+			features: {
+				resetOnClose: true,
+			},
+		});
+	}
+
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	static getCSSStyleSheet() {
+		return [SiteNavigationStyleSheet];
+	}
+
+	static getTag() {
+		return "monster-site-navigation";
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		attachResizeObserver.call(this);
+		requestAnimationFrame(() => {
+			populateTabs.call(this);
+		});
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		detachResizeObserver.call(this);
+	}
 }
 
 /**
@@ -125,22 +125,22 @@ class SiteNavigation extends CustomElement {
  * @this {SiteNavigation}
  */
 function initControlReferences() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-  this[navElementSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="navigation"]',
-  );
-  this[visibleElementsSymbol] =
-    this.shadowRoot.querySelector("#visible-elements");
-  this[hiddenElementsSymbol] =
-    this.shadowRoot.querySelector("#hidden-elements");
-  this[hamburgerButtonSymbol] =
-    this.shadowRoot.querySelector("#hamburger-button");
-  this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="hamburger-nav"]',
-  );
-  this[hamburgerCloseButtonSymbol] = this.shadowRoot.querySelector(
-    '[part="hamburger-close-button"]',
-  );
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+	this[navElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="navigation"]',
+	);
+	this[visibleElementsSymbol] =
+		this.shadowRoot.querySelector("#visible-elements");
+	this[hiddenElementsSymbol] =
+		this.shadowRoot.querySelector("#hidden-elements");
+	this[hamburgerButtonSymbol] =
+		this.shadowRoot.querySelector("#hamburger-button");
+	this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="hamburger-nav"]',
+	);
+	this[hamburgerCloseButtonSymbol] = this.shadowRoot.querySelector(
+		'[part="hamburger-close-button"]',
+	);
 }
 
 /**
@@ -149,122 +149,122 @@ function initControlReferences() {
  * @this {SiteNavigation}
  */
 function initEventHandler() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-
-  const hamburgerButton = this[hamburgerButtonSymbol];
-  const hamburgerNav = this[hamburgerNavSymbol];
-  const hamburgerCloseButton = this[hamburgerCloseButtonSymbol];
-  let cleanup;
-
-  if (!hamburgerButton || !hamburgerNav || !hamburgerCloseButton) return;
-
-  const getBestPositionStrategy = (element) => {
-    let parent = element.parentElement;
-    while (parent) {
-      const parentPosition = window.getComputedStyle(parent).position;
-      if (["fixed", "sticky"].includes(parentPosition)) {
-        return "fixed";
-      }
-      parent = parent.parentElement;
-    }
-    return "absolute";
-  };
-
-  const handleOutsideClick = (event) => {
-    if (
-      !hamburgerButton.contains(event.target) &&
-      !hamburgerNav.contains(event.target)
-    ) {
-      hideMenu();
-    }
-  };
-
-  const hideMenu = () => {
-    hamburgerNav.style.display = "none";
-    document.body.classList.remove("monster-navigation-open");
-
-    fireCustomEvent(this, "monster-hamburger-hide", {
-      button: hamburgerButton,
-      menu: hamburgerNav,
-    });
-
-    if (this.getOption("features.resetOnClose") === true) {
-      this[hiddenElementsSymbol]
-        .querySelectorAll(".is-open")
-        .forEach((submenu) => submenu.classList.remove("is-open"));
-    }
-
-    if (cleanup) {
-      cleanup();
-      cleanup = undefined;
-    }
-    document.removeEventListener("click", handleOutsideClick);
-  };
-
-  this[hideHamburgerMenuSymbol] = hideMenu;
-
-  const showMenu = () => {
-    this[activeSubmenuHiderSymbol]?.();
-    hamburgerNav.style.display = "block";
-    document.body.classList.add("monster-navigation-open");
-
-    fireCustomEvent(this, "monster-hamburger-show", {
-      button: hamburgerButton,
-      menu: hamburgerNav,
-    });
-
-    hamburgerNav.scrollIntoView({ block: "start", behavior: "smooth" });
-
-    cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-      if (window.innerWidth > 768) {
-        const strategy = getBestPositionStrategy(this);
-
-        computePosition(hamburgerButton, hamburgerNav, {
-          placement: "bottom-end",
-          strategy: strategy,
-          middleware: [
-            offset(8),
-            flip(),
-            shift({ padding: 8 }),
-            size({
-              apply: ({ availableHeight, elements }) => {
-                Object.assign(elements.floating.style, {
-                  maxHeight: `${availableHeight}px`,
-                  overflowY: "auto",
-                });
-              },
-              padding: 8,
-            }),
-          ],
-        }).then(({ x, y, strategy }) => {
-          Object.assign(hamburgerNav.style, {
-            position: strategy,
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        });
-      } else {
-        // Mobile view (fullscreen overlay), position is handled by CSS
-        Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
-      }
-    });
-    setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
-  };
-
-  hamburgerButton.addEventListener("click", (event) => {
-    event.stopPropagation();
-    const isVisible = hamburgerNav.style.display === "block";
-    if (isVisible) {
-      hideMenu();
-    } else {
-      showMenu();
-    }
-  });
-
-  hamburgerCloseButton.addEventListener("click", (event) => {
-    event.stopPropagation();
-    hideMenu();
-  });
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const hamburgerNav = this[hamburgerNavSymbol];
+	const hamburgerCloseButton = this[hamburgerCloseButtonSymbol];
+	let cleanup;
+
+	if (!hamburgerButton || !hamburgerNav || !hamburgerCloseButton) return;
+
+	const getBestPositionStrategy = (element) => {
+		let parent = element.parentElement;
+		while (parent) {
+			const parentPosition = window.getComputedStyle(parent).position;
+			if (["fixed", "sticky"].includes(parentPosition)) {
+				return "fixed";
+			}
+			parent = parent.parentElement;
+		}
+		return "absolute";
+	};
+
+	const handleOutsideClick = (event) => {
+		if (
+			!hamburgerButton.contains(event.target) &&
+			!hamburgerNav.contains(event.target)
+		) {
+			hideMenu();
+		}
+	};
+
+	const hideMenu = () => {
+		hamburgerNav.style.display = "none";
+		document.body.classList.remove("monster-navigation-open");
+
+		fireCustomEvent(this, "monster-hamburger-hide", {
+			button: hamburgerButton,
+			menu: hamburgerNav,
+		});
+
+		if (this.getOption("features.resetOnClose") === true) {
+			this[hiddenElementsSymbol]
+				.querySelectorAll(".is-open")
+				.forEach((submenu) => submenu.classList.remove("is-open"));
+		}
+
+		if (cleanup) {
+			cleanup();
+			cleanup = undefined;
+		}
+		document.removeEventListener("click", handleOutsideClick);
+	};
+
+	this[hideHamburgerMenuSymbol] = hideMenu;
+
+	const showMenu = () => {
+		this[activeSubmenuHiderSymbol]?.();
+		hamburgerNav.style.display = "block";
+		document.body.classList.add("monster-navigation-open");
+
+		fireCustomEvent(this, "monster-hamburger-show", {
+			button: hamburgerButton,
+			menu: hamburgerNav,
+		});
+
+		hamburgerNav.scrollIntoView({ block: "start", behavior: "smooth" });
+
+		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
+			if (window.innerWidth > 768) {
+				const strategy = getBestPositionStrategy(this);
+
+				computePosition(hamburgerButton, hamburgerNav, {
+					placement: "bottom-end",
+					strategy: strategy,
+					middleware: [
+						offset(8),
+						flip(),
+						shift({ padding: 8 }),
+						size({
+							apply: ({ availableHeight, elements }) => {
+								Object.assign(elements.floating.style, {
+									maxHeight: `${availableHeight}px`,
+									overflowY: "auto",
+								});
+							},
+							padding: 8,
+						}),
+					],
+				}).then(({ x, y, strategy }) => {
+					Object.assign(hamburgerNav.style, {
+						position: strategy,
+						left: `${x}px`,
+						top: `${y}px`,
+					});
+				});
+			} else {
+				// Mobile view (fullscreen overlay), position is handled by CSS
+				Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
+			}
+		});
+		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
+	};
+
+	hamburgerButton.addEventListener("click", (event) => {
+		event.stopPropagation();
+		const isVisible = hamburgerNav.style.display === "block";
+		if (isVisible) {
+			hideMenu();
+		} else {
+			showMenu();
+		}
+	});
+
+	hamburgerCloseButton.addEventListener("click", (event) => {
+		event.stopPropagation();
+		hideMenu();
+	});
 }
 
 /**
@@ -274,22 +274,22 @@ function initEventHandler() {
  * @this {SiteNavigation}
  */
 function attachResizeObserver() {
-  this[resizeObserverSymbol] = new ResizeObserver(() => {
-    if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-      try {
-        this[timerCallbackSymbol].touch();
-        return;
-      } catch (e) {
-        delete this[timerCallbackSymbol];
-      }
-    }
-    this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-      requestAnimationFrame(() => {
-        populateTabs.call(this);
-      });
-    });
-  });
-  this[resizeObserverSymbol].observe(this);
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			requestAnimationFrame(() => {
+				populateTabs.call(this);
+			});
+		});
+	});
+	this[resizeObserverSymbol].observe(this);
 }
 
 /**
@@ -298,10 +298,10 @@ function attachResizeObserver() {
  * @this {SiteNavigation}
  */
 function detachResizeObserver() {
-  if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-    this[resizeObserverSymbol].disconnect();
-    delete this[resizeObserverSymbol];
-  }
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+		delete this[resizeObserverSymbol];
+	}
 }
 
 /**
@@ -314,240 +314,240 @@ function detachResizeObserver() {
  * @param {number} level The nesting level of the submenu (starts at 1).
  */
 function setupSubmenu(parentLi, context = "visible", level = 1) {
-  const submenu = parentLi.querySelector(
-    ":scope > ul, :scope > div[part='mega-menu']",
-  );
-  if (!submenu) return;
-
-  if (submenu.tagName === "UL") {
-    submenu.setAttribute("part", "submenu");
-  }
-
-  const interaction = this.getOption("interactionModel", "auto");
-  const isTouchDevice =
-    "ontouchstart" in window || navigator.maxTouchPoints > 0;
-
-  const effectiveInteraction =
-    interaction === "auto"
-      ? context === "visible"
-        ? "hover"
-        : "click"
-      : interaction;
-
-  const component = this;
-  let cleanup;
-
-  const immediateHide = () => {
-    submenu.style.display = "none";
-    Object.assign(submenu.style, {
-      maxHeight: "",
-      overflowY: "",
-    });
-    submenu
-      .querySelectorAll(
-        "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
-      )
-      .forEach((sub) => {
-        sub.style.display = "none";
-      });
-    fireCustomEvent(this, "monster-submenu-hide", {
-      context,
-      trigger: parentLi,
-      submenu,
-      level,
-    });
-    if (cleanup) {
-      cleanup();
-      cleanup = null;
-    }
-    if (level === 1 && component[activeSubmenuHiderSymbol] === immediateHide) {
-      component[activeSubmenuHiderSymbol] = null;
-    }
-  };
-
-  const show = () => {
-    component[hideHamburgerMenuSymbol]?.();
-    if (level === 1) {
-      if (
-        component[activeSubmenuHiderSymbol] &&
-        component[activeSubmenuHiderSymbol] !== immediateHide
-      ) {
-        component[activeSubmenuHiderSymbol]();
-      }
-      component[activeSubmenuHiderSymbol] = immediateHide;
-    } else {
-      [...parentLi.parentElement.children]
-        .filter((li) => li !== parentLi)
-        .forEach((sibling) => {
-          const siblingSubmenu = sibling.querySelector(
-            ":scope > ul, :scope > div[part='mega-menu']",
-          );
-          if (siblingSubmenu) {
-            siblingSubmenu.style.display = "none";
-          }
-        });
-    }
-    submenu.style.display = "block";
-    fireCustomEvent(this, "monster-submenu-show", {
-      context,
-      trigger: parentLi,
-      submenu,
-      level,
-    });
-    if (!cleanup) {
-      cleanup = autoUpdate(parentLi, submenu, () => {
-        const middleware = [offset(8), flip(), shift({ padding: 8 })];
-        const containsSubmenus = submenu.querySelector(
-          "ul, div[part='mega-menu']",
-        );
-        if (!containsSubmenus) {
-          middleware.push(
-            size({
-              apply: ({ availableHeight, elements }) => {
-                Object.assign(elements.floating.style, {
-                  maxHeight: `${availableHeight}px`,
-                  overflowY: "auto",
-                });
-              },
-              padding: 8,
-            }),
-          );
-        }
-        computePosition(parentLi, submenu, {
-          placement: level === 1 ? "bottom-start" : "right-start",
-          middleware: middleware,
-        }).then(({ x, y, strategy }) => {
-          Object.assign(submenu.style, {
-            position: strategy,
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        });
-      });
-    }
-  };
-
-  if (effectiveInteraction === "hover" && isTouchDevice) {
-    let lastTap = 0;
-    const DOUBLE_TAP_DELAY = 300;
-    const anchor = parentLi.querySelector(":scope > a");
-
-    if (!anchor) return;
-
-    const handleOutsideClickForSubmenu = (event) => {
-      if (
-        submenu.style.display === "block" &&
-        !parentLi.contains(event.target)
-      ) {
-        immediateHide();
-        document.removeEventListener(
-          "click",
-          handleOutsideClickForSubmenu,
-          true,
-        );
-      }
-    };
-
-    anchor.addEventListener("click", (event) => {
-      const now = Date.now();
-      const timeSinceLastTap = now - lastTap;
-      lastTap = now;
-
-      if (timeSinceLastTap < DOUBLE_TAP_DELAY && timeSinceLastTap > 0) {
-        lastTap = 0;
-        document.removeEventListener(
-          "click",
-          handleOutsideClickForSubmenu,
-          true,
-        );
-        immediateHide();
-      } else {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const isMenuOpen = submenu.style.display === "block";
-
-        if (isMenuOpen) {
-          document.removeEventListener(
-            "click",
-            handleOutsideClickForSubmenu,
-            true,
-          );
-          immediateHide();
-        } else {
-          show();
-          setTimeout(() => {
-            document.addEventListener(
-              "click",
-              handleOutsideClickForSubmenu,
-              true,
-            );
-          }, 0);
-        }
-      }
-    });
-  } else if (effectiveInteraction === "hover" && !isTouchDevice) {
-    let hideTimeout;
-    let isHovering = false;
-
-    const handleMouseEnter = () => {
-      isHovering = true;
-      clearTimeout(hideTimeout);
-      if (submenu.style.display !== "block") {
-        show();
-      }
-    };
-
-    const handleMouseLeave = () => {
-      isHovering = false;
-      hideTimeout = setTimeout(() => {
-        if (!isHovering) {
-          immediateHide();
-        }
-      }, 250);
-    };
-
-    parentLi.addEventListener("mouseenter", handleMouseEnter);
-    parentLi.addEventListener("mouseleave", handleMouseLeave);
-    submenu.addEventListener("mouseenter", handleMouseEnter);
-    submenu.addEventListener("mouseleave", handleMouseLeave);
-  } else {
-    const anchor = parentLi.querySelector(":scope > a");
-    if (anchor) {
-      anchor.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!submenu.classList.contains("is-open")) {
-          [...parentLi.parentElement.children]
-            .filter((li) => li !== parentLi)
-            .forEach((sibling) => {
-              const siblingSubmenu = sibling.querySelector(
-                ":scope > ul, :scope > div[part='mega-menu']",
-              );
-              if (siblingSubmenu) {
-                siblingSubmenu.classList.remove("is-open");
-              }
-            });
-        }
-        const isOpen = submenu.classList.toggle("is-open");
-        const eventName = isOpen
-          ? "monster-submenu-show"
-          : "monster-submenu-hide";
-        fireCustomEvent(this, eventName, {
-          context,
-          trigger: parentLi,
-          submenu,
-          level,
-        });
-      });
-    }
-  }
-
-  if (submenu.tagName === "UL") {
-    submenu
-      .querySelectorAll(":scope > li")
-      .forEach((li) => setupSubmenu.call(this, li, context, level + 1));
-  }
+	const submenu = parentLi.querySelector(
+		":scope > ul, :scope > div[part='mega-menu']",
+	);
+	if (!submenu) return;
+
+	if (submenu.tagName === "UL") {
+		submenu.setAttribute("part", "submenu");
+	}
+
+	const interaction = this.getOption("interactionModel", "auto");
+	const isTouchDevice =
+		"ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+	const effectiveInteraction =
+		interaction === "auto"
+			? context === "visible"
+				? "hover"
+				: "click"
+			: interaction;
+
+	const component = this;
+	let cleanup;
+
+	const immediateHide = () => {
+		submenu.style.display = "none";
+		Object.assign(submenu.style, {
+			maxHeight: "",
+			overflowY: "",
+		});
+		submenu
+			.querySelectorAll(
+				"ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
+			)
+			.forEach((sub) => {
+				sub.style.display = "none";
+			});
+		fireCustomEvent(this, "monster-submenu-hide", {
+			context,
+			trigger: parentLi,
+			submenu,
+			level,
+		});
+		if (cleanup) {
+			cleanup();
+			cleanup = null;
+		}
+		if (level === 1 && component[activeSubmenuHiderSymbol] === immediateHide) {
+			component[activeSubmenuHiderSymbol] = null;
+		}
+	};
+
+	const show = () => {
+		component[hideHamburgerMenuSymbol]?.();
+		if (level === 1) {
+			if (
+				component[activeSubmenuHiderSymbol] &&
+				component[activeSubmenuHiderSymbol] !== immediateHide
+			) {
+				component[activeSubmenuHiderSymbol]();
+			}
+			component[activeSubmenuHiderSymbol] = immediateHide;
+		} else {
+			[...parentLi.parentElement.children]
+				.filter((li) => li !== parentLi)
+				.forEach((sibling) => {
+					const siblingSubmenu = sibling.querySelector(
+						":scope > ul, :scope > div[part='mega-menu']",
+					);
+					if (siblingSubmenu) {
+						siblingSubmenu.style.display = "none";
+					}
+				});
+		}
+		submenu.style.display = "block";
+		fireCustomEvent(this, "monster-submenu-show", {
+			context,
+			trigger: parentLi,
+			submenu,
+			level,
+		});
+		if (!cleanup) {
+			cleanup = autoUpdate(parentLi, submenu, () => {
+				const middleware = [offset(8), flip(), shift({ padding: 8 })];
+				const containsSubmenus = submenu.querySelector(
+					"ul, div[part='mega-menu']",
+				);
+				if (!containsSubmenus) {
+					middleware.push(
+						size({
+							apply: ({ availableHeight, elements }) => {
+								Object.assign(elements.floating.style, {
+									maxHeight: `${availableHeight}px`,
+									overflowY: "auto",
+								});
+							},
+							padding: 8,
+						}),
+					);
+				}
+				computePosition(parentLi, submenu, {
+					placement: level === 1 ? "bottom-start" : "right-start",
+					middleware: middleware,
+				}).then(({ x, y, strategy }) => {
+					Object.assign(submenu.style, {
+						position: strategy,
+						left: `${x}px`,
+						top: `${y}px`,
+					});
+				});
+			});
+		}
+	};
+
+	if (effectiveInteraction === "hover" && isTouchDevice) {
+		let lastTap = 0;
+		const DOUBLE_TAP_DELAY = 300;
+		const anchor = parentLi.querySelector(":scope > a");
+
+		if (!anchor) return;
+
+		const handleOutsideClickForSubmenu = (event) => {
+			if (
+				submenu.style.display === "block" &&
+				!parentLi.contains(event.target)
+			) {
+				immediateHide();
+				document.removeEventListener(
+					"click",
+					handleOutsideClickForSubmenu,
+					true,
+				);
+			}
+		};
+
+		anchor.addEventListener("click", (event) => {
+			const now = Date.now();
+			const timeSinceLastTap = now - lastTap;
+			lastTap = now;
+
+			if (timeSinceLastTap < DOUBLE_TAP_DELAY && timeSinceLastTap > 0) {
+				lastTap = 0;
+				document.removeEventListener(
+					"click",
+					handleOutsideClickForSubmenu,
+					true,
+				);
+				immediateHide();
+			} else {
+				event.preventDefault();
+				event.stopPropagation();
+
+				const isMenuOpen = submenu.style.display === "block";
+
+				if (isMenuOpen) {
+					document.removeEventListener(
+						"click",
+						handleOutsideClickForSubmenu,
+						true,
+					);
+					immediateHide();
+				} else {
+					show();
+					setTimeout(() => {
+						document.addEventListener(
+							"click",
+							handleOutsideClickForSubmenu,
+							true,
+						);
+					}, 0);
+				}
+			}
+		});
+	} else if (effectiveInteraction === "hover" && !isTouchDevice) {
+		let hideTimeout;
+		let isHovering = false;
+
+		const handleMouseEnter = () => {
+			isHovering = true;
+			clearTimeout(hideTimeout);
+			if (submenu.style.display !== "block") {
+				show();
+			}
+		};
+
+		const handleMouseLeave = () => {
+			isHovering = false;
+			hideTimeout = setTimeout(() => {
+				if (!isHovering) {
+					immediateHide();
+				}
+			}, 250);
+		};
+
+		parentLi.addEventListener("mouseenter", handleMouseEnter);
+		parentLi.addEventListener("mouseleave", handleMouseLeave);
+		submenu.addEventListener("mouseenter", handleMouseEnter);
+		submenu.addEventListener("mouseleave", handleMouseLeave);
+	} else {
+		const anchor = parentLi.querySelector(":scope > a");
+		if (anchor) {
+			anchor.addEventListener("click", (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				if (!submenu.classList.contains("is-open")) {
+					[...parentLi.parentElement.children]
+						.filter((li) => li !== parentLi)
+						.forEach((sibling) => {
+							const siblingSubmenu = sibling.querySelector(
+								":scope > ul, :scope > div[part='mega-menu']",
+							);
+							if (siblingSubmenu) {
+								siblingSubmenu.classList.remove("is-open");
+							}
+						});
+				}
+				const isOpen = submenu.classList.toggle("is-open");
+				const eventName = isOpen
+					? "monster-submenu-show"
+					: "monster-submenu-hide";
+				fireCustomEvent(this, eventName, {
+					context,
+					trigger: parentLi,
+					submenu,
+					level,
+				});
+			});
+		}
+	}
+
+	if (submenu.tagName === "UL") {
+		submenu
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, context, level + 1));
+	}
 }
 
 /**
@@ -558,20 +558,20 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
  * @returns {HTMLLIElement} The cloned and configured list item.
  */
 function cloneNavItem(item) {
-  const liClone = item.cloneNode(true);
-  const aClone = liClone.querySelector("a");
-  let navItemPart = "nav-item";
-  let navLinkPart = "nav-link";
+	const liClone = item.cloneNode(true);
+	const aClone = liClone.querySelector("a");
+	let navItemPart = "nav-item";
+	let navLinkPart = "nav-link";
 
-  if (item.classList.contains("active")) {
-    navItemPart += " nav-item-active";
-    if (aClone) navLinkPart += " nav-link-active";
-  }
+	if (item.classList.contains("active")) {
+		navItemPart += " nav-item-active";
+		if (aClone) navLinkPart += " nav-link-active";
+	}
 
-  liClone.setAttribute("part", navItemPart);
-  if (aClone) aClone.setAttribute("part", navLinkPart);
+	liClone.setAttribute("part", navItemPart);
+	if (aClone) aClone.setAttribute("part", navLinkPart);
 
-  return liClone;
+	return liClone;
 }
 
 /**
@@ -588,122 +588,122 @@ function cloneNavItem(item) {
  * @this {SiteNavigation}
  */
 function populateTabs() {
-  const visibleList = this[visibleElementsSymbol];
-  const hiddenList = this[hiddenElementsSymbol];
-  const hamburgerButton = this[hamburgerButtonSymbol];
-  const navEl = this[navElementSymbol];
-
-  const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
-    (ul) => ul.parentElement === this,
-  );
-
-  visibleList.innerHTML = "";
-  hiddenList.innerHTML = "";
-  hamburgerButton.style.display = "none";
-  this.style.visibility = "hidden";
-
-  if (!topLevelUl) {
-    this.style.visibility = "visible";
-    return; // Nichts zu tun
-  }
-  const sourceItems = Array.from(topLevelUl.children).filter(
-    (n) => n.tagName === "LI",
-  );
-  if (sourceItems.length === 0) {
-    this.style.visibility = "visible";
-    return;
-  }
-
-  const navWidth = navEl.clientWidth;
-
-  const originalDisplay = hamburgerButton.style.display;
-  hamburgerButton.style.visibility = "hidden";
-  hamburgerButton.style.display = "flex";
-  const hamburgerWidth =
-    Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
-  hamburgerButton.style.display = originalDisplay;
-  hamburgerButton.style.visibility = "visible";
-
-  navEl.style.overflow = "hidden";
-  visibleList.style.flexWrap = "nowrap";
-  visibleList.style.visibility = "hidden"; // Inhalt der Liste während Manipulation ausblenden
-
-  const fit = [];
-  const rest = [];
-  let hasOverflow = false;
-
-  for (let i = 0; i < sourceItems.length; i++) {
-    const item = sourceItems[i];
-
-    if (hasOverflow) {
-      rest.push(item);
-      continue;
-    }
-
-    const liClone = cloneNavItem(item);
-    visibleList.appendChild(liClone);
-
-    const requiredWidth = liClone.offsetLeft + liClone.offsetWidth;
-    const availableWidth = navWidth - hamburgerWidth;
-    const SAFETY_MARGIN = 1; // 1px Sicherheitsmarge für Subpixel-Rendering
-
-    if (requiredWidth > availableWidth + SAFETY_MARGIN) {
-      hasOverflow = true;
-      rest.push(item);
-    } else {
-      fit.push(item);
-    }
-  }
-
-  if (fit.length > 0 && rest.length > 0) {
-    const lastVisibleItem = visibleList.children[fit.length - 1];
-    const visibleItemsWidth =
-      lastVisibleItem.offsetLeft + lastVisibleItem.offsetWidth;
-
-    const firstHiddenItemClone = cloneNavItem(rest[0]);
-    const submenu = firstHiddenItemClone.querySelector(
-      "ul, div[part='mega-menu']",
-    );
-    if (submenu) submenu.style.display = "none";
-
-    visibleList.appendChild(firstHiddenItemClone);
-    const firstHiddenItemWidth =
-      firstHiddenItemClone.getBoundingClientRect().width;
-    visibleList.removeChild(firstHiddenItemClone);
-
-    const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
-    if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {
-      fit.push(rest.shift());
-    }
-  }
-
-  navEl.style.overflow = "";
-  visibleList.style.flexWrap = "";
-  visibleList.innerHTML = "";
-
-  if (fit.length) {
-    const clonedVisible = fit.map(cloneNavItem);
-    visibleList.append(...clonedVisible);
-    visibleList
-      .querySelectorAll(":scope > li")
-      .forEach((li) => setupSubmenu.call(this, li, "visible", 1));
-  }
-
-  if (rest.length) {
-    const clonedHidden = rest.map(cloneNavItem);
-    hiddenList.append(...clonedHidden);
-    hamburgerButton.style.display = "flex";
-    hiddenList
-      .querySelectorAll(":scope > li")
-      .forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
-  }
-
-  visibleList.style.visibility = "visible";
-  this.style.visibility = "visible";
-  fireCustomEvent(this, "monster-layout-change", {
-    visibleItems: fit,
-    hiddenItems: rest,
-  });
+	const visibleList = this[visibleElementsSymbol];
+	const hiddenList = this[hiddenElementsSymbol];
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const navEl = this[navElementSymbol];
+
+	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
+		(ul) => ul.parentElement === this,
+	);
+
+	visibleList.innerHTML = "";
+	hiddenList.innerHTML = "";
+	hamburgerButton.style.display = "none";
+	this.style.visibility = "hidden";
+
+	if (!topLevelUl) {
+		this.style.visibility = "visible";
+		return; // Nichts zu tun
+	}
+	const sourceItems = Array.from(topLevelUl.children).filter(
+		(n) => n.tagName === "LI",
+	);
+	if (sourceItems.length === 0) {
+		this.style.visibility = "visible";
+		return;
+	}
+
+	const navWidth = navEl.clientWidth;
+
+	const originalDisplay = hamburgerButton.style.display;
+	hamburgerButton.style.visibility = "hidden";
+	hamburgerButton.style.display = "flex";
+	const hamburgerWidth =
+		Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
+	hamburgerButton.style.display = originalDisplay;
+	hamburgerButton.style.visibility = "visible";
+
+	navEl.style.overflow = "hidden";
+	visibleList.style.flexWrap = "nowrap";
+	visibleList.style.visibility = "hidden"; // Inhalt der Liste während Manipulation ausblenden
+
+	const fit = [];
+	const rest = [];
+	let hasOverflow = false;
+
+	for (let i = 0; i < sourceItems.length; i++) {
+		const item = sourceItems[i];
+
+		if (hasOverflow) {
+			rest.push(item);
+			continue;
+		}
+
+		const liClone = cloneNavItem(item);
+		visibleList.appendChild(liClone);
+
+		const requiredWidth = liClone.offsetLeft + liClone.offsetWidth;
+		const availableWidth = navWidth - hamburgerWidth;
+		const SAFETY_MARGIN = 1; // 1px Sicherheitsmarge für Subpixel-Rendering
+
+		if (requiredWidth > availableWidth + SAFETY_MARGIN) {
+			hasOverflow = true;
+			rest.push(item);
+		} else {
+			fit.push(item);
+		}
+	}
+
+	if (fit.length > 0 && rest.length > 0) {
+		const lastVisibleItem = visibleList.children[fit.length - 1];
+		const visibleItemsWidth =
+			lastVisibleItem.offsetLeft + lastVisibleItem.offsetWidth;
+
+		const firstHiddenItemClone = cloneNavItem(rest[0]);
+		const submenu = firstHiddenItemClone.querySelector(
+			"ul, div[part='mega-menu']",
+		);
+		if (submenu) submenu.style.display = "none";
+
+		visibleList.appendChild(firstHiddenItemClone);
+		const firstHiddenItemWidth =
+			firstHiddenItemClone.getBoundingClientRect().width;
+		visibleList.removeChild(firstHiddenItemClone);
+
+		const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
+		if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {
+			fit.push(rest.shift());
+		}
+	}
+
+	navEl.style.overflow = "";
+	visibleList.style.flexWrap = "";
+	visibleList.innerHTML = "";
+
+	if (fit.length) {
+		const clonedVisible = fit.map(cloneNavItem);
+		visibleList.append(...clonedVisible);
+		visibleList
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+	}
+
+	if (rest.length) {
+		const clonedHidden = rest.map(cloneNavItem);
+		hiddenList.append(...clonedHidden);
+		hamburgerButton.style.display = "flex";
+		hiddenList
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
+	}
+
+	visibleList.style.visibility = "visible";
+	this.style.visibility = "visible";
+	fireCustomEvent(this, "monster-layout-change", {
+		visibleItems: fit,
+		hiddenItems: rest,
+	});
 }
 
 /**
@@ -713,7 +713,7 @@ function populateTabs() {
  * @returns {string} The combined string.
  */
 function html(strings) {
-  return strings.join("");
+	return strings.join("");
 }
 
 /**
@@ -722,7 +722,7 @@ function html(strings) {
  * @returns {string} The HTML template string.
  */
 function getTemplate() {
-  return html`<div data-monster-role="control" part="control">
+	return html`<div data-monster-role="control" part="control">
     <nav data-monster-role="navigation" role="navigation" part="nav">
       <ul id="visible-elements" part="visible-list"></ul>
     </nav>