@tet/tet-components 1.4.71-testing → 1.4.72-production

package/dist/collection/components/simple/menu/tet-menu/tet-menu.js

@@ -8,47 +8,312 @@ export class TetMenu {
         this.active = false;
         this.clickable = false;
         this.firstLevelTitle = '';
-        this.firstLevelId = null;
+        this.firstLevelId = undefined;
         this.firstLevelLink = '';
         this.firstLevelIcon = '';
         this.menuItemTheme = '';
         this.showMenuItemAnimation = true;
         this.subLevels = [];
         this.darkMode = false;
+        this.parentSelector = '';
+        this.isMegaMenuLayout = false;
         this.isSubmenuLeft = false;
+        this.megaActiveSubLevelIndex = -1;
+        this.isMegaMenuOpen = false;
+        this.isMegaMenuEscapeClosed = false;
     }
+    /** The host element. */
+    el;
+    /** Stores 3rd level hover handlers to avoid duplicate listeners. */
+    thirdLevelMouseEnterHandlers = new WeakMap();
+    /** Parent element used for mega-menu close-on-parent-leave binding. */
+    megaParentElement = null;
     /**
      * Listener for windows resize events
      */
     onWindowResize() {
+        this.syncLayout();
+    }
+    /**
+     * Handles host mouse leave to reset mega-menu leave-related state.
+     */
+    onHostMouseLeave() {
+        this.handleMenuMouseLeave();
+    }
+    /**
+     * Handles host focus-in to reopen mega-menu after Escape dismissal when needed.
+     */
+    onHostFocusIn() {
+        this.handleMenuFocusIn();
+    }
+    /**
+     * Recalculates interactive layout values.
+     */
+    syncLayout = () => {
+        if (!this.isMegaMenuEnabled()) {
+            this.setMegaParentElement(null);
+        }
         this.setupThirdLevelEvent();
+        this.updateDropdownLayout();
+    };
+    /**
+     * Determines whether mega-menu logic should be active.
+     */
+    isMegaMenuEnabled() {
+        return this.isMegaMenuLayout && this.type === 'main' && this.subLevels.length > 0;
     }
+    /**
+     * Binds/updates parent mouseleave listener for mega-menu close behavior.
+     */
+    setMegaParentElement(parentElement) {
+        if (this.megaParentElement === parentElement) {
+            return;
+        }
+        if (this.megaParentElement) {
+            this.megaParentElement.removeEventListener('mouseleave', this.handleMegaParentMouseLeave);
+        }
+        this.megaParentElement = parentElement;
+        this.megaParentElement?.addEventListener('mouseleave', this.handleMegaParentMouseLeave);
+    }
+    /**
+     * Closes mega-menu and clears active 2nd-level state.
+     */
+    closeMegaMenu = () => {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        this.isMegaMenuOpen = false;
+        this.clearMegaActiveSubLevel();
+    };
+    /**
+     * Clears focus inside shadow root so :focus-within does not immediately reopen mega-menu.
+     */
+    blurFocusedMenuItem() {
+        const focusedMenuItem = this.el.shadowRoot?.activeElement;
+        focusedMenuItem?.blur();
+    }
+    /**
+     * Handles parent mouseleave for mega-menu close behavior.
+     */
+    handleMegaParentMouseLeave = () => {
+        this.closeMegaMenu();
+    };
+    /**
+     * Opens mega-menu and notifies sibling mega-menu instances to close.
+     */
+    openMegaMenu() {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        this.isMegaMenuEscapeClosed = false;
+        this.isMegaMenuOpen = true;
+        globalThis.dispatchEvent(new CustomEvent('tet-menu-mega-open', { detail: this.el }));
+    }
+    /**
+     * Handles first-level pointer/focus entry:
+     * opens mega menu when available or notifies mega siblings to close.
+     */
+    handleFirstLevelInteraction = () => {
+        if (this.isMegaMenuEnabled()) {
+            this.syncLayout();
+            this.openMegaMenu();
+            return;
+        }
+        globalThis.dispatchEvent(new CustomEvent('tet-menu-mega-open', { detail: this.el }));
+    };
+    /**
+     * Resets Escape-dismissed state once pointer fully leaves this menu trigger area.
+     */
+    handleMenuMouseLeave = () => {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        this.clearMegaActiveSubLevel();
+        this.isMegaMenuEscapeClosed = false;
+    };
+    /**
+     * Reopens mega menu when focus re-enters menu content after an Escape dismissal.
+     */
+    handleMenuFocusIn = () => {
+        if (!this.isMegaMenuEnabled() || !this.isMegaMenuEscapeClosed) {
+            return;
+        }
+        this.openMegaMenu();
+    };
+    /**
+     * Handles Escape to close mega-menu for both hover-open and keyboard-focus-open states.
+     */
+    onWindowKeyDown(event) {
+        if (!this.isMegaMenuEnabled() || event.key !== 'Escape') {
+            return;
+        }
+        const eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        const isEventFromCurrentMenu = eventPath.includes(this.el);
+        if (!this.isMegaMenuOpen && !isEventFromCurrentMenu) {
+            return;
+        }
+        this.isMegaMenuEscapeClosed = true;
+        this.closeMegaMenu();
+        this.blurFocusedMenuItem();
+    }
+    /**
+     * Closes current mega-menu when another menu instance announces open state.
+     */
+    onExternalMegaMenuOpen(event) {
+        if (!this.isMegaMenuEnabled() || event.detail === this.el) {
+            return;
+        }
+        this.isMegaMenuEscapeClosed = true;
+        this.closeMegaMenu();
+    }
+    /**
+     * Sets active second-level item in mega-menu mode.
+     */
+    setMegaActiveSubLevel(index, hasSubMenuItems) {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        this.megaActiveSubLevelIndex = hasSubMenuItems ? index : -1;
+    }
+    /**
+     * Mirrors non-mega keyboard behavior:
+     * tabbing from a 2nd-level item with submenu should enter 3rd-level links.
+     */
+    handleMegaSecondLevelKeyDown(event, index, hasSubMenuItems) {
+        if (!this.isMegaMenuEnabled() || !hasSubMenuItems || event.key !== 'Tab' || event.shiftKey) {
+            return;
+        }
+        event.preventDefault();
+        this.setMegaActiveSubLevel(index, hasSubMenuItems);
+        globalThis.requestAnimationFrame(() => {
+            const firstThirdLevelLink = this.el.shadowRoot?.querySelector('.menu__dropdown__mega-third-list a');
+            firstThirdLevelLink?.focus();
+        });
+    }
+    /**
+     * Handles Tab navigation within mega-menu 3rd-level links.
+     */
+    handleMegaThirdLevelLinkKeyDown = (event) => {
+        if (!this.isMegaMenuEnabled() || event.key !== 'Tab') {
+            return;
+        }
+        const megaThirdLevelLinks = Array.from(this.el.shadowRoot?.querySelectorAll('.menu__dropdown__mega-third-list a') ?? []);
+        if (megaThirdLevelLinks.length === 0) {
+            return;
+        }
+        const currentAnchor = event.currentTarget;
+        const currentIndex = megaThirdLevelLinks.indexOf(currentAnchor);
+        if (currentIndex < 0) {
+            return;
+        }
+        if (event.shiftKey) {
+            if (currentIndex > 0) {
+                event.preventDefault();
+                megaThirdLevelLinks[currentIndex - 1]?.focus();
+                return;
+            }
+            const activeSecondLevelIndex = this.megaActiveSubLevelIndex;
+            if (activeSecondLevelIndex < 0) {
+                return;
+            }
+            event.preventDefault();
+            const secondLevelLinks = this.el.shadowRoot?.querySelectorAll('.menu__dropdown__list--mega > li > a');
+            secondLevelLinks?.[activeSecondLevelIndex]?.focus();
+            return;
+        }
+        if (currentIndex < megaThirdLevelLinks.length - 1) {
+            event.preventDefault();
+            megaThirdLevelLinks[currentIndex + 1]?.focus();
+            return;
+        }
+        const activeSecondLevelIndex = this.megaActiveSubLevelIndex;
+        if (activeSecondLevelIndex < 0) {
+            return;
+        }
+        const secondLevelLinks = this.el.shadowRoot?.querySelectorAll('.menu__dropdown__list--mega > li > a');
+        const nextSecondLevelLink = secondLevelLinks?.[activeSecondLevelIndex + 1];
+        if (nextSecondLevelLink) {
+            event.preventDefault();
+            nextSecondLevelLink.focus();
+        }
+    };
+    /**
+     * Clears active second-level item in mega-menu mode.
+     */
+    clearMegaActiveSubLevel = () => {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        this.megaActiveSubLevelIndex = -1;
+    };
     /**
      * Renders the first menu level.
      */
     renderFirstLevel() {
-        const { firstLevelTitle, firstLevelLink, firstLevelId, firstLevelIcon, menuItemTheme, showMenuItemAnimation, active, clickable, type } = this;
+        const { firstLevelTitle, firstLevelLink, firstLevelId, firstLevelIcon, menuItemTheme, showMenuItemAnimation, active, subLevels, clickable, type } = this;
         const link = clickable && firstLevelLink.length !== 0 ? firstLevelLink : 'javascript:void(0)';
         const icon = firstLevelIcon ? this.renderIcon({ name: firstLevelIcon, invertIcon: true }) : '';
+        const hasActiveDescendant = type === 'main' && this.hasActiveSubLevels(subLevels);
+        const isFirstLevelActive = (active || hasActiveDescendant) && type !== 'login';
         let menuItemThemeClass = '', showAnimation = false;
         if (type === 'main') {
             menuItemThemeClass = menuItemTheme ? `menu__first-level--theme-${menuItemTheme}` : '';
             showAnimation = showMenuItemAnimation;
         }
-        return (h("a", { id: firstLevelId, href: link, class: {
+        return (h("a", { id: firstLevelId, href: link, part: "first-level", onMouseEnter: this.handleFirstLevelInteraction, onFocus: this.handleFirstLevelInteraction, class: {
                 'menu__first-level': true,
-                'menu--active': active && type !== 'login',
+                'menu--active': isFirstLevelActive,
                 'menu__first-level--themed': menuItemThemeClass.length > 0,
                 ...(menuItemThemeClass && { [menuItemThemeClass]: true }),
                 ...(showAnimation && { 'show-animation': true })
             } }, icon, firstLevelTitle, this.renderChevron()));
     }
+    /**
+     * Checks whether any nested sub-level item is marked as active.
+     */
+    hasActiveSubLevels(items) {
+        return items.some((item) => !!item.active || this.hasActiveSubLevels(item.subLevels ?? []));
+    }
     /**
      * Emit event when the component has been rendered.
      * Calculates available space on screen after first full render to correctly render 3rd level navigation.
      */
     componentDidRender() {
-        this.setupThirdLevelEvent();
+        this.syncLayout();
+    }
+    disconnectedCallback() {
+        this.setMegaParentElement(null);
+    }
+    /**
+     * Syncs dropdown size and position with parent container.
+     */
+    updateDropdownLayout() {
+        if (!this.isMegaMenuEnabled()) {
+            return;
+        }
+        const dropdown = this.el.shadowRoot?.querySelector('.menu__dropdown');
+        if (!dropdown) {
+            return;
+        }
+        const parentSelector = this.parentSelector?.trim();
+        const parentElement = parentSelector
+            ? this.el.closest(parentSelector)
+            : this.el.parentElement;
+        if (!parentElement) {
+            this.setMegaParentElement(null);
+            dropdown.style.removeProperty('top');
+            dropdown.style.removeProperty('--menu-dropdown-hover-bridge-height');
+            return;
+        }
+        this.setMegaParentElement(parentElement);
+        const parentRect = parentElement.getBoundingClientRect();
+        if (parentRect.width <= 0) {
+            return;
+        }
+        const menuRect = this.el.getBoundingClientRect();
+        const hoverBridgeHeight = Math.max(0, parentRect.bottom - menuRect.bottom);
+        dropdown.style.top = `${parentRect.bottom}px`;
+        dropdown.style.setProperty('--menu-dropdown-hover-bridge-height', `${hoverBridgeHeight}px`);
     }
     /**
      * Renders the chevron icon if the menu has sub-levels.
@@ -70,7 +335,7 @@ export class TetMenu {
         if (!subLevel.active || type !== 'language') {
             return '';
         }
-        return (h("tet-icon", { name: "check", class: "menu__dropdown__list__checkmark", theme: this.darkMode ? 'dark' : 'light' }));
+        return (h("tet-icon", { name: "tc-check", class: "menu__dropdown__list__checkmark", theme: this.darkMode ? 'dark' : 'light' }));
     }
     /**
      * Renders the dropdown of the menu.
@@ -80,51 +345,71 @@ export class TetMenu {
         if (subLevels.length < 1) {
             return '';
         }
-        const renderedSubLevels = subLevels.map((subLevel) => this.renderSubItem(subLevel));
-        return (h("div", { class: "menu__dropdown" }, h("ul", { class: "menu__dropdown__list" }, renderedSubLevels)));
+        const isMegaMenuEnabled = this.isMegaMenuEnabled();
+        const megaIndex = isMegaMenuEnabled ? this.megaActiveSubLevelIndex : -1;
+        const activeMegaSubLevels = megaIndex >= 0 ? (subLevels[megaIndex]?.subLevels ?? []) : [];
+        const renderedSubLevels = subLevels.map((subLevel, index) => this.renderSubItem(subLevel, index, isMegaMenuEnabled));
+        const list = (h("ul", { class: { 'menu__dropdown__list': true, 'menu__dropdown__list--mega': isMegaMenuEnabled } }, renderedSubLevels));
+        return (h("div", { class: { 'menu__dropdown': true, 'menu__dropdown--mega': isMegaMenuEnabled } }, isMegaMenuEnabled
+            ? (h("div", { class: "tet-grid" }, h("div", { class: "menu__dropdown__wrapper tet-grid__cell tet-grid__cell--span-all" }, h("div", { class: "menu__dropdown__mega-lists" }, list, h("div", { class: "menu__dropdown__mega-third" }, activeMegaSubLevels.length > 0 && (h("ul", { class: "menu__dropdown__mega-third-list" }, activeMegaSubLevels.map((_subLevel) => this.renderSublevelItem(_subLevel)))))), h("div", { class: "menu__dropdown__mega-banner" }, h("slot", { name: "banner" })))))
+            : list));
     }
     /**
      * Renders the sub-levels of the menu.
      * @param subLevel
      */
-    renderSubItem(subLevel) {
+    renderSubItem(subLevel, index, isMegaMenuEnabled) {
         const subMenuItems = subLevel.subLevels?.map((_subLevel) => {
             return this.renderSublevelItem(_subLevel);
         });
+        const hasSubMenuItems = !!subMenuItems?.length;
+        const hasActiveDescendant = this.hasActiveSubLevels(subLevel.subLevels ?? []);
+        const subMenuChevronName = 'chevron-right';
         let iconLeft = '';
         let iconRight = '';
-        if (subLevel.iconLeft) {
-            iconLeft = this.renderIcon({
-                name: subLevel.iconLeft,
-                right: false,
-                id: subLevel.id,
-                size: subLevel.iconSize,
-                useDefaultColor: subLevel.useDefaultColor
-            });
-        }
-        else if (subLevel.imageSrc) {
-            iconLeft = this.renderImage(subLevel);
-        }
-        if (subLevel.iconRight) {
-            iconRight = this.renderIcon({
-                name: subLevel.iconRight,
-                right: true,
-                id: subLevel.id,
-                size: subLevel.iconSize
-            });
-        }
-        const subTitle = subLevel.subTitle && subLevel.subTitle.length !== 0 ? (h("div", { class: "menu__dropdown__list__sub-title" }, subLevel.subTitle)) : ('');
-        const itemId = subLevel.id?.toString() || null;
-        return (h("li", null, h("a", { id: itemId, href: subLevel.link, class: {
-                'menu--active': subLevel.active,
-                'menu--highlighted': subLevel.highlighted,
-                'line-top': subLevel.lineTop,
-                'text-color-secondary': subLevel.textColorSecondary,
-                'translation-none': subLevel.translationNone,
-                'menu--submenu': !!subMenuItems?.length
+        if (!this.isMegaMenuLayout) {
+            if (subLevel.iconLeft) {
+                iconLeft = this.renderIcon({
+                    name: subLevel.iconLeft,
+                    right: false,
+                    id: subLevel.id,
+                    size: subLevel.iconSize,
+                    useDefaultColor: subLevel.useDefaultColor
+                });
+            }
+            else if (subLevel.imageSrc) {
+                iconLeft = this.renderImage(subLevel);
+            }
+            if (subLevel.iconRight) {
+                iconRight = this.renderIcon({
+                    name: subLevel.iconRight,
+                    right: true,
+                    id: subLevel.id,
+                    size: subLevel.iconSize
+                });
+            }
+        }
+        const subTitle = subLevel.subTitle && subLevel.subTitle.length !== 0 ? (h("div", { class: {
+                "menu__dropdown__list__sub-title": true,
+                "menu__dropdown__list__sub-title--mega": this.isMegaMenuLayout,
+            } }, subLevel.subTitle)) : ('');
+        const itemId = subLevel.id?.toString();
+        const subList = hasSubMenuItems && !isMegaMenuEnabled ? (h("div", { class: {
+                left: !isMegaMenuEnabled && this.isSubmenuLeft,
+                right: !isMegaMenuEnabled && !this.isSubmenuLeft,
+                menu__sublist: true
+            } }, h("ul", { class: { content: true } }, subMenuItems))) : null;
+        return (h("li", null, h("a", { id: itemId, href: subLevel.link, onMouseEnter: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onFocus: () => this.setMegaActiveSubLevel(index, hasSubMenuItems), onKeyDown: (event) => this.handleMegaSecondLevelKeyDown(event, index, hasSubMenuItems), class: {
+                'menu--active': !!subLevel.active || hasActiveDescendant,
+                'menu--mega-current': isMegaMenuEnabled && index === this.megaActiveSubLevelIndex,
+                'menu--highlighted': !!subLevel.highlighted,
+                'line-top': !!subLevel.lineTop,
+                'text-color-secondary': !!subLevel.textColorSecondary,
+                'translation-none': !!subLevel.translationNone,
+                'menu--submenu': hasSubMenuItems
             }, tabIndex: 0 }, iconLeft, h("div", null, !!subLevel.badgeText
             ? h("span", { class: "menu__badge" }, subLevel.badgeText)
-            : null, h("div", null, subLevel.title), subTitle, this.renderCheckmark(subLevel)), iconRight, !!subMenuItems && (h("tet-icon", { class: "menu__chevron", name: "chevron-right", theme: this.darkMode ? 'dark' : 'light' })), !!subMenuItems && (h("div", { class: { left: this.isSubmenuLeft, right: !this.isSubmenuLeft, menu__sublist: true } }, h("ul", { class: { content: true } }, subMenuItems))))));
+            : null, h("div", null, subLevel.title), subTitle, this.renderCheckmark(subLevel)), iconRight, hasSubMenuItems && (h("tet-icon", { class: "menu__chevron", name: subMenuChevronName, theme: this.darkMode ? 'dark' : 'light' }))), subList));
     }
     /**
      * Renders the sub-levels of the menu.
@@ -133,31 +418,33 @@ export class TetMenu {
     renderSublevelItem(subLevel) {
         let iconLeft = '';
         let iconRight = '';
-        if (subLevel.iconLeft) {
-            iconLeft = this.renderIcon({
-                name: subLevel.iconLeft,
-                right: false,
-                id: subLevel.id,
-                size: subLevel.iconSize,
-                useDefaultColor: subLevel.useDefaultColor
-            });
-        }
-        else if (subLevel.imageSrc) {
-            iconLeft = this.renderImage(subLevel);
-        }
-        if (subLevel.iconRight) {
-            iconRight = this.renderIcon({
-                name: subLevel.iconRight,
-                right: true,
-                id: subLevel.id,
-                size: subLevel.iconSize
-            });
-        }
-        return (h("li", null, h("a", { id: subLevel.id, href: subLevel.link, class: {
-                'menu--active': subLevel.active,
-                'menu--highlighted': subLevel.highlighted,
-                'line-top': subLevel.lineTop,
-                'text-color-secondary': subLevel.textColorSecondary
+        if (!this.isMegaMenuLayout) {
+            if (subLevel.iconLeft) {
+                iconLeft = this.renderIcon({
+                    name: subLevel.iconLeft,
+                    right: false,
+                    id: subLevel.id,
+                    size: subLevel.iconSize,
+                    useDefaultColor: subLevel.useDefaultColor
+                });
+            }
+            else if (subLevel.imageSrc) {
+                iconLeft = this.renderImage(subLevel);
+            }
+            if (subLevel.iconRight) {
+                iconRight = this.renderIcon({
+                    name: subLevel.iconRight,
+                    right: true,
+                    id: subLevel.id,
+                    size: subLevel.iconSize
+                });
+            }
+        }
+        return (h("li", null, h("a", { id: subLevel.id, href: subLevel.link, onKeyDown: this.handleMegaThirdLevelLinkKeyDown, class: {
+                'menu--active': !!subLevel.active,
+                'menu--highlighted': !!subLevel.highlighted,
+                'line-top': !!subLevel.lineTop,
+                'text-color-secondary': !!subLevel.textColorSecondary
             }, tabIndex: 0 }, iconLeft, h("div", null, h("div", null, h("span", null, subLevel.title), !!subLevel.badgeText
             ? h("span", { class: "menu__badge" }, subLevel.badgeText)
             : null), this.renderCheckmark(subLevel)), iconRight)));
@@ -182,41 +469,60 @@ export class TetMenu {
         return (h("div", { class: "menu__icon" }, h("img", { src: subLevel.imageSrc, alt: "" })));
     }
     setupThirdLevelEvent() {
-        const tetMenus = document.querySelectorAll('tet-menu');
-        tetMenus.forEach((tetMenu) => {
-            const thirdLevelmenus = tetMenu.shadowRoot.querySelectorAll('.menu__sublist');
-            if (thirdLevelmenus) {
-                thirdLevelmenus.forEach((thirdLevelmenu) => {
-                    const parent = thirdLevelmenu.closest('a');
-                    parent.addEventListener('mouseenter', () => {
-                        const windowWidth = window.innerWidth;
-                        const windowHeight = window.innerHeight;
-                        const parentRect = parent.getBoundingClientRect();
-                        const thirdRectParent = thirdLevelmenu.offsetParent || null;
-                        const offsetRect = thirdRectParent ? thirdRectParent.getBoundingClientRect() : { top: 0 };
-                        const thirdLevelmenuWidth = thirdLevelmenu.offsetWidth;
-                        const thirdLevelmenuHeight = thirdLevelmenu.offsetHeight;
-                        // Desired top position in viewport coordinates
-                        const bottomPadding = 10;
-                        const desiredTopViewport = Math.max(10, Math.min(parentRect.top, windowHeight - thirdLevelmenuHeight - bottomPadding));
-                        const desiredTopOffset = desiredTopViewport - offsetRect.top;
-                        thirdLevelmenu.style.top = `${desiredTopOffset}px`;
-                        thirdLevelmenu.style.bottom = '';
-                        const parentRight = parentRect.right;
-                        this.isSubmenuLeft = windowWidth < parentRight + thirdLevelmenuWidth;
-                    });
-                });
+        if (this.isMegaMenuEnabled()) {
+            return;
+        }
+        const thirdLevelmenus = this.el.shadowRoot?.querySelectorAll('.menu__sublist');
+        if (!thirdLevelmenus) {
+            return;
+        }
+        thirdLevelmenus.forEach((thirdLevelmenu) => {
+            const menuItem = thirdLevelmenu.closest('li');
+            if (!menuItem) {
+                return;
+            }
+            const parent = menuItem.querySelector('a');
+            if (!parent) {
+                return;
             }
+            const existingHandler = this.thirdLevelMouseEnterHandlers.get(parent);
+            if (existingHandler) {
+                parent.removeEventListener('mouseenter', existingHandler);
+                this.thirdLevelMouseEnterHandlers.delete(parent);
+            }
+            thirdLevelmenu.style.removeProperty('top');
+            thirdLevelmenu.style.removeProperty('bottom');
+            const onMouseEnter = () => {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const parentRect = parent.getBoundingClientRect();
+                const thirdRectParent = thirdLevelmenu.offsetParent || null;
+                const offsetRect = thirdRectParent ? thirdRectParent.getBoundingClientRect() : { top: 0 };
+                const thirdLevelmenuWidth = thirdLevelmenu.offsetWidth;
+                const thirdLevelmenuHeight = thirdLevelmenu.offsetHeight;
+                // Desired top position in viewport coordinates
+                const bottomPadding = 10;
+                const desiredTopViewport = Math.max(10, Math.min(parentRect.top, windowHeight - thirdLevelmenuHeight - bottomPadding));
+                const desiredTopOffset = desiredTopViewport - offsetRect.top;
+                thirdLevelmenu.style.top = `${desiredTopOffset}px`;
+                thirdLevelmenu.style.bottom = '';
+                const parentRight = parentRect.right;
+                this.isSubmenuLeft = windowWidth < parentRight + thirdLevelmenuWidth;
+            };
+            parent.addEventListener('mouseenter', onMouseEnter);
+            this.thirdLevelMouseEnterHandlers.set(parent, onMouseEnter);
         });
     }
     render() {
         const { type } = this;
-        return (h(Host, { key: 'e2d8b43766609775d960b7aaa03d6feb75f1a659' }, h("div", { key: 'f9af384dd73f665ceec77c22a0947347066e082a', class: {
+        return (h(Host, { key: '981d8a58d272ace848d7a6c4c82e7916a4282991' }, h("div", { key: '3eb7afce24ff6373a43bc4405fbba7cb6a421e85', class: {
                 menu: true,
                 menu__main: type === 'main',
                 menu__language: type === 'language',
                 menu__login: type === 'login',
-                menu__dark: this.darkMode
+                menu__dark: this.darkMode,
+                'menu--mega-open': this.isMegaMenuEnabled() && this.isMegaMenuOpen,
+                'menu--mega-escape-closed': this.isMegaMenuEnabled() && this.isMegaMenuEscapeClosed
             } }, this.renderFirstLevel(), this.renderSubLevels())));
     }
     static get is() { return "tet-menu"; }
@@ -263,7 +569,7 @@ export class TetMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether the menu item should appear as active."
+                    "text": "Determines whether the menu item should appear as active.\nFor `type=\"main\"`, it is also treated as active when any nested child item is active."
                 },
                 "attribute": "active",
                 "reflect": false,
@@ -314,14 +620,13 @@ export class TetMenu {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The id of the first menu level."
                 },
                 "attribute": "first-level-id",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "firstLevelLink": {
                 "type": "string",
@@ -440,14 +745,54 @@ export class TetMenu {
                 "attribute": "dark-mode",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "parentSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selector of the parent element."
+                },
+                "attribute": "parent-selector",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isMegaMenuLayout": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables mega-menu behavior for main type menus by aligning the dropdown to the parent container."
+                },
+                "attribute": "is-mega-menu-layout",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isSubmenuLeft": {}
+            "isSubmenuLeft": {},
+            "megaActiveSubLevelIndex": {},
+            "isMegaMenuOpen": {},
+            "isMegaMenuEscapeClosed": {}
         };
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "resize",
@@ -455,6 +800,30 @@ export class TetMenu {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onHostMouseLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusin",
+                "method": "onHostFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onWindowKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "tet-menu-mega-open",
+                "method": "onExternalMegaMenuOpen",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }