@schukai/monster 4.43.13 → 4.43.15

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,60 @@ 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 +126,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,120 +150,120 @@ 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,
-		});
-
-		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,
+    });
+
+    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();
+  });
 }
 
 /**
@@ -272,22 +273,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);
 }
 
 /**
@@ -296,10 +297,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];
+  }
 }
 
 /**
@@ -312,177 +313,177 @@ 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 useHover =
-		interaction === "hover" ||
-		(interaction === "auto" && context === "visible");
-
-	if (useHover) {
-		const component = this;
-		let cleanup;
-		let hideTimeout;
-		let isHovering = false;
-
-		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`,
-						});
-					});
-				});
-			}
-		};
-
-		const handleMouseEnter = () => {
-			isHovering = true; // Status auf "aktiv" setzen
-			clearTimeout(hideTimeout);
-			if (submenu.style.display !== "block") {
-				show();
-			}
-		};
-
-		const handleMouseLeave = () => {
-			isHovering = false; // Status auf "inaktiv" setzen
-			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 useHover =
+    interaction === "hover" ||
+    (interaction === "auto" && context === "visible");
+
+  if (useHover) {
+    const component = this;
+    let cleanup;
+    let hideTimeout;
+    let isHovering = false;
+
+    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`,
+            });
+          });
+        });
+      }
+    };
+
+    const handleMouseEnter = () => {
+      isHovering = true; // Status auf "aktiv" setzen
+      clearTimeout(hideTimeout);
+      if (submenu.style.display !== "block") {
+        show();
+      }
+    };
+
+    const handleMouseLeave = () => {
+      isHovering = false; // Status auf "inaktiv" setzen
+      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));
+  }
 }
 
 /**
@@ -493,20 +494,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;
 }
 
 /**
@@ -515,97 +516,132 @@ function cloneNavItem(item) {
  * @private
  * @this {SiteNavigation}
  */
+/**
+ * Misst den verfügbaren Platz und verteilt die Navigationselemente auf die sichtbare Liste
+ * und das Hamburger-Menü. Die Methode fügt Elemente nacheinander hinzu und prüft auf
+ * Überlauf (Overflow), um zu bestimmen, welche Elemente verschoben werden müssen.
+ * @private
+ * @this {SiteNavigation}
+ */
 function populateTabs() {
-	const visibleList = this[visibleElementsSymbol];
-	const hiddenList = this[hiddenElementsSymbol];
-	const hamburgerButton = this[hamburgerButtonSymbol];
-	const hamburgerNav = this[hamburgerNavSymbol];
-	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
-		(ul) => ul.parentElement === this,
-	);
-
-	if (!topLevelUl) {
-		visibleList.style.visibility = "visible";
-		hamburgerButton.style.display = "none";
-		return;
-	}
-
-	const sourceItems = Array.from(topLevelUl.children).filter(
-		(item) => item.tagName === "LI",
-	);
-
-	visibleList.style.visibility = "hidden";
-	hamburgerButton.style.display = "none";
-	hamburgerNav.style.display = "none";
-	visibleList.innerHTML = "";
-	hiddenList.innerHTML = "";
-
-	const originalDisplay = hamburgerButton.style.display;
-	hamburgerButton.style.visibility = "hidden";
-	hamburgerButton.style.display = "flex";
-	const hamburgerWidth = hamburgerButton.offsetWidth;
-	hamburgerButton.style.display = originalDisplay;
-	hamburgerButton.style.visibility = "visible";
-
-	const navWidth = this[navElementSymbol].clientWidth;
-	if (navWidth === 0) {
-		visibleList.style.visibility = "visible";
-		return;
-	}
-
-	const measurementList = visibleList.cloneNode(true);
-	Object.assign(measurementList.style, {
-		position: "absolute",
-		left: "0",
-		top: "0",
-		width: "auto",
-		visibility: "hidden",
-	});
-	this.shadowRoot.appendChild(measurementList);
-
-	const itemsToMove = [];
-	const availableWidthForTabs = navWidth - hamburgerWidth;
-
-	for (let i = 0; i < sourceItems.length; i++) {
-		const item = sourceItems[i];
-		const itemClone = item.cloneNode(true);
-		const submenu = itemClone.querySelector("ul, div[part='mega-menu']");
-		if (submenu) submenu.style.display = "none";
-
-		measurementList.appendChild(itemClone);
-		const isLastItem = i === sourceItems.length - 1;
-		const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
-
-		if (measurementList.scrollWidth > effectiveMaxWidth) {
-			break;
-		} else {
-			itemsToMove.push(item);
-		}
-	}
-	this.shadowRoot.removeChild(measurementList);
-
-	const visibleItems = itemsToMove;
-	const hiddenItems = sourceItems.slice(visibleItems.length);
-
-	if (visibleItems.length > 0) {
-		const clonedVisibleItems = visibleItems.map(cloneNavItem);
-		visibleList.append(...clonedVisibleItems);
-		visibleList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
-	}
-
-	if (hiddenItems.length > 0) {
-		const clonedHiddenItems = hiddenItems.map(cloneNavItem);
-		hiddenList.append(...clonedHiddenItems);
-		hamburgerButton.style.display = "flex";
-		hiddenList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
-	}
-
-	visibleList.style.visibility = "visible";
-	fireCustomEvent(this, "monster-layout-change", { visibleItems, hiddenItems });
+
+  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,
+  });
 }
 
 /**
@@ -615,7 +651,7 @@ function populateTabs() {
  * @returns {string} The combined string.
  */
 function html(strings) {
-	return strings.join("");
+  return strings.join("");
 }
 
 /**
@@ -624,7 +660,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>