@schukai/monster 4.43.5 → 4.43.6

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,57 +64,57 @@ 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);
-    setTimeout(() => populateTabs.call(this), 0);
-  }
-
-  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);
+		setTimeout(() => populateTabs.call(this), 0);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		detachResizeObserver.call(this);
+	}
 }
 
 /**
@@ -123,22 +123,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"]',
+	);
 }
 
 /**
@@ -147,107 +147,107 @@ 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 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, () => {
-      // Desktop view where the hamburger menu is a dropdown
-      if (window.innerWidth > 768) {
-        computePosition(hamburgerButton, hamburgerNav, {
-          placement: "bottom-end",
-          strategy: "fixed",
-          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 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, () => {
+			// Desktop view where the hamburger menu is a dropdown
+			if (window.innerWidth > 768) {
+				computePosition(hamburgerButton, hamburgerNav, {
+					placement: "bottom-end",
+					strategy: "fixed",
+					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();
+	});
 }
 
 /**
@@ -257,20 +257,20 @@ 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, () =>
-      populateTabs.call(this),
-    );
-  });
-  this[resizeObserverSymbol].observe(this[navElementSymbol]);
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
+			populateTabs.call(this),
+		);
+	});
+	this[resizeObserverSymbol].observe(this[navElementSymbol]);
 }
 
 /**
@@ -279,10 +279,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];
+	}
 }
 
 /**
@@ -295,167 +295,167 @@ 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;
-
-    const immediateHide = () => {
-      submenu.style.display = "none";
-      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]?.();
-      clearTimeout(hideTimeout);
-
-      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 (level === 1 && !cleanup) {
-        cleanup = autoUpdate(parentLi, submenu, () => {
-          computePosition(parentLi, submenu, {
-            placement: "bottom-start",
-            strategy: "fixed",
-            middleware: [
-              offset(8),
-              flip({ fallbackPlacements: ["top-start"] }),
-              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(submenu.style, {
-              position: strategy,
-              left: `${x}px`,
-              top: `${y}px`,
-            });
-          });
-        });
-      }
-    };
-
-    const hideWithDelay = () => {
-      hideTimeout = setTimeout(immediateHide, 200);
-    };
-
-    parentLi.addEventListener("mouseenter", show);
-    parentLi.addEventListener("mouseleave", hideWithDelay);
-    submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
-    submenu.addEventListener("mouseleave", hideWithDelay);
-  } else {
-    // Click behavior
-    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,
-        });
-      });
-    }
-  }
-
-  // Recursive call for nested lists
-  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;
+
+		const immediateHide = () => {
+			submenu.style.display = "none";
+			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]?.();
+			clearTimeout(hideTimeout);
+
+			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 (level === 1 && !cleanup) {
+				cleanup = autoUpdate(parentLi, submenu, () => {
+					computePosition(parentLi, submenu, {
+						placement: "bottom-start",
+						strategy: "fixed",
+						middleware: [
+							offset(8),
+							flip({ fallbackPlacements: ["top-start"] }),
+							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(submenu.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
+					});
+				});
+			}
+		};
+
+		const hideWithDelay = () => {
+			hideTimeout = setTimeout(immediateHide, 200);
+		};
+
+		parentLi.addEventListener("mouseenter", show);
+		parentLi.addEventListener("mouseleave", hideWithDelay);
+		submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
+		submenu.addEventListener("mouseleave", hideWithDelay);
+	} else {
+		// Click behavior
+		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,
+				});
+			});
+		}
+	}
+
+	// Recursive call for nested lists
+	if (submenu.tagName === "UL") {
+		submenu
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, context, level + 1));
+	}
 }
 
 /**
@@ -466,20 +466,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;
 }
 
 /**
@@ -489,96 +489,96 @@ function cloneNavItem(item) {
  * @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 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 });
 }
 
 /**
@@ -588,7 +588,7 @@ function populateTabs() {
  * @returns {string} The combined string.
  */
 function html(strings) {
-  return strings.join("");
+	return strings.join("");
 }
 
 /**
@@ -597,7 +597,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>