@tet/tet-components 1.4.36-testing → 1.4.37-staging

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

@@ -6,6 +6,8 @@ export class TetBusinessNavigation {
         this.menuItems = undefined;
         this.theme = 'light';
         this.expandable = false;
+        this.singleOpenMenu = true;
+        this.emitOnSelectedClick = false;
         this.language = 'lv';
         this.selectedItemId = undefined;
         this.mainMenuItemId = undefined;
@@ -32,8 +34,15 @@ export class TetBusinessNavigation {
         this.selectedItemId = id;
         this.mainMenuItemId = mainMenuId || id;
         localStorage.setItem('selectedSublevelId', JSON.stringify(mainMenuId ? id : ''));
-        this.menuClickEvent.emit({ id });
     }
+    /** Handles menu item click behavior and emits click events. */
+    onMenuItemClick = async (id, mainMenuId) => {
+        const wasSelected = this.selectedItemId === id;
+        await this.selectMenuItem(id, mainMenuId);
+        if (!wasSelected || this.emitOnSelectedClick) {
+            this.menuClickEvent.emit({ id });
+        }
+    };
     /** Sets the initial selected and open state for the navigation menu based on selected main or sublevel items. */
     handleNavInitialState() {
         this.mainMenuItemId = this.menuItems[0].id;
@@ -112,14 +121,17 @@ export class TetBusinessNavigation {
         this.expanded = !this.expanded;
     };
     /** Open and close sublevel menu items. */
-    toggleSublevels = (id) => {
-        if (this.selectedItemId !== id) {
-            this.selectedItemId = id;
-            this.menuClickEvent.emit({ id });
+    toggleSublevels = async (id) => {
+        await this.onMenuItemClick(id);
+        const isOpen = this.openedMenuIds.has(id);
+        if (this.singleOpenMenu) {
+            this.openedMenuIds = isOpen ? new Set() : new Set([id]);
+        }
+        else {
+            const newSet = new Set(this.openedMenuIds);
+            isOpen ? newSet.delete(id) : newSet.add(id);
+            this.openedMenuIds = newSet;
         }
-        const newSet = new Set(this.openedMenuIds);
-        newSet.has(id) ? newSet.delete(id) : newSet.add(id);
-        this.openedMenuIds = newSet;
         localStorage.setItem('selectedSublevelId', JSON.stringify(''));
     };
     /** Render second menu level */
@@ -127,7 +139,7 @@ export class TetBusinessNavigation {
         if (!this.openedMenuIds.has(id)) {
             return null;
         }
-        const renderSublevelItem = sublevels.map((item) => (h("button", { class: { 'business-navigation-item': true, 'sublevel': true, 'selected': this.selectedItemId === item.id }, key: item.id, onClick: () => this.selectMenuItem(item.id, id) }, h("span", { class: { 'business-navigation-item__title': true, 'sublevel': true } }, item.name))));
+        const renderSublevelItem = sublevels.map((item) => (h("button", { class: { 'business-navigation-item': true, 'sublevel': true, 'selected': this.selectedItemId === item.id }, key: item.id, onClick: () => this.onMenuItemClick(item.id, id) }, h("span", { class: { 'business-navigation-item__title': true, 'sublevel': true } }, item.name))));
         return h("div", { class: "business-navigation-item-sublevel" }, renderSublevelItem);
     };
     /** Render menu item */
@@ -135,7 +147,7 @@ export class TetBusinessNavigation {
         const { id, icon, name, sublevels } = menuItem;
         const { expanded, openedMenuIds } = this;
         const withSublevels = expanded && sublevels && sublevels.length > 0;
-        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': openedMenuIds.has(id) }, name: openedMenuIds.has(id) ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
+        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.onMenuItemClick(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': openedMenuIds.has(id) }, name: openedMenuIds.has(id) ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
     };
     /** Render button to expand and minimize the menu container. */
     renderExpandButton = () => {
@@ -147,7 +159,7 @@ export class TetBusinessNavigation {
     /** Render Functional Component*/
     render() {
         const { menuItems, theme, expandable } = this;
-        return (h("div", { key: 'ba4c02855e8335bf7b32bcb22b7c8858fdfb35bc', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'd209c8db158e5ab23d2a5224335e8421170ff2e0', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
+        return (h("div", { key: 'c0deb0698440cb860b679b18497a116355d74acb', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: '5c0ea277dbde5a6d38ba139214f09308d1f1a7c1', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
     }
     static get is() { return "tet-business-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -224,6 +236,42 @@ export class TetBusinessNavigation {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "singleOpenMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `expandable` is true, only one menu can be open at a time."
+                },
+                "attribute": "single-open-menu",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "emitOnSelectedClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, emits `menu-click-event` even if the clicked menu item is already selected."
+                },
+                "attribute": "emit-on-selected-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/simple/menu/tet-menu-mobile/tet-menu-mobile.css

@@ -379,8 +379,7 @@
   * @prop --menu-link-border-radius: The border-radius of the menu elements.
   * @prop --menu-text-color: The text color of the menu elements.
   * @prop --menu-item-theme-bg: The background color of the menu.
-  * @prop --menu-first-level-text-color-active: The text color of the first level menu element when active.
-  * @prop --menu-third-level-text-color-active: The text color of the third level menu element when active.
+  * @prop --menu-text-color-active: The text color of the menu element when active.
   * @prop --menu-border-bottom: The styling of the menu bottom border.
   * @prop --menu-link-active-background-color: The background color of the menu element link when active.
   * @prop --menu-link-hover-background-color: The background color of the menu element link on hover.
@@ -391,14 +390,14 @@
   --menu-list-expanded-margin-bottom: 1rem;
   --menu-list-expanded-margin-top: 0.375rem;
   --menu-dropdown-animation-speed: 0.2s;
-  --menu-link-border-radius: 0.625rem;
+  --menu-link-border-radius: 0.375rem;
   --menu-text-color: var(--tc-text-primary);
   --menu-item-theme-bg: var(--tc-layer-primary);
-  --menu-first-level-text-color-active: var(--tc-text-tertiary);
-  --menu-third-level-text-color-active: var(--tc-blue-40);
+  --menu-text-color-active: var(--tc-text-tertiary);
   --menu-border-bottom: 0.03125rem solid var(--tc-border-quaternary);
   --menu-link-active-background-color: var(--tc-menu-item-active);
   --menu-link-hover-background-color: var(--tc-menu-item-hover);
+  --menu-link-pressed-background-color: var(--tc-menu-item-pressed);
   --menu-item-theme-hover-bg: var(--tc-menu-item-hover);
   --menu-focus-outline-color: var(--tc-blue-40);
   --menu-badge-background: var(--tc-yellow-20);
@@ -480,12 +479,12 @@
 .menu--dark {
   --menu-text-color: var(--tc-text-primary-dark);
   --menu-item-theme-bg: var(--tc-layer-primary-dark);
-  --menu-first-level-text-color-active: var(--tc-text-tertiary-dark);
-  --menu-third-level-text-color-active: var(--tc-blue-40-dark);
+  --menu-text-color-active: var(--tc-text-tertiary-dark);
   --menu-border-bottom: 0.03125rem solid var(--tc-border-quaternary-dark);
   --menu-highlited-item-background-color: var(--tc-layer-primary-dark);
   --menu-link-active-background-color: var(--tc-menu-item-active-dark);
   --menu-link-hover-background-color: var(--tc-menu-item-hover-dark);
+  --menu-link-pressed-background-color: var(--tc-menu-item-pressed-dark);
   --menu-item-theme-hover-bg: var(--tc-menu-item-hover-dark);
   --menu-focus-outline-color: var(--tc-blue-40-dark);
   --menu-badge-background: var(--tc-grey-40-dark);
@@ -554,24 +553,35 @@
 .menu--expanded, .menu--hide-border {
   border-bottom-color: transparent;
 }
-.menu a {
+.menu a,
+.menu button {
   color: var(--menu-text-color);
   text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+}
+.menu a:hover,
+.menu button:hover {
+  background-color: var(--menu-link-hover-background-color);
+}
+.menu a:active,
+.menu button:active {
+  background-color: var(--menu-link-pressed-background-color);
 }
 .menu__first-level {
   font: 500 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
   align-items: center;
   display: flex;
+  width: 100%;
   flex-direction: row;
   padding: 0.5rem 1rem;
   border: 0.125rem solid transparent;
   background-color: var(--menu-item-theme-bg);
-  border-radius: 0.375rem;
+  border-radius: var(--menu-link-border-radius);
 }
 .menu__first-level-themed {
   position: relative;
   isolation: isolate;
-  color: var(--menu-text-color);
   background-image: linear-gradient(var(--menu-item-theme-bg)), var(--menu-item-theme-gradient);
   background-origin: border-box;
   background-clip: padding-box, border-box;
@@ -592,14 +602,30 @@
   --icon-size: 1.25rem;
   display: flex;
   align-self: center;
-  padding-right: 0.25rem;
+  padding-right: 0.5rem;
+}
+.menu--expanded .menu__first-level {
+  color: var(--menu-text-color-active);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
 }
 .menu--active .menu__first-level {
-  color: var(--menu-first-level-text-color-active);
+  color: var(--menu-text-color-active);
   background-color: var(--menu-item-theme-active-bg);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
 }
 .menu--active .menu__first-level-themed {
   color: var(--menu-text-color);
+  text-decoration: none;
   border-color: var(--menu-item-theme-active-bg);
   background-image: linear-gradient(var(--menu-item-theme-active-bg), var(--menu-item-theme-active-bg));
   background-size: 100% 100%;
@@ -610,13 +636,12 @@
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
   transition: outline 0s;
-  border-radius: 0.25rem;
   outline-offset: -0.125rem;
 }
 .menu__chevron {
   --icon-size: 1.25rem;
-  justify-self: end;
   margin-left: auto;
+  padding-left: 0.75rem;
 }
 .menu__dropdown {
   overflow: hidden;
@@ -637,66 +662,67 @@
 }
 .menu__dropdown__list li {
   list-style: none;
-  padding: 1px;
+  padding: 0.0625rem;
   border-radius: var(--menu-link-border-radius);
 }
-.menu__dropdown__list .sublist a {
+.menu__dropdown__list .sublist a,
+.menu__dropdown__list .sublist button {
   padding: 0.75rem 1rem 0.75rem 3rem;
 }
-.menu__dropdown a {
+.menu__dropdown a,
+.menu__dropdown button {
   padding: 0.625rem 1rem 0.625rem 1.75rem;
   display: flex;
+  border: 0;
   border-radius: var(--menu-link-border-radius);
-}
-.menu__dropdown a:hover {
-  background-color: var(--menu-item-theme-hover-bg);
-}
-.menu__dropdown a.menu__second-level {
-  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
-}
-.menu__dropdown a.menu__second-level:has(span) {
-  display: inline-block;
   width: 100%;
+  background-color: unset;
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
 }
-.menu__dropdown a.menu__second-level.menu--active {
-  background-color: transparent;
-}
-.menu__dropdown a.menu__second-level:focus-visible {
+.menu__dropdown a:focus-visible,
+.menu__dropdown button:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125rem;
   transition: outline 0s;
   outline-color: var(--menu-focus-outline-color);
 }
-.menu__dropdown a.menu__third-level {
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-}
-.menu__dropdown a.menu__third-level:has(span) {
-  display: inline-block;
-  width: 100%;
+.menu__dropdown a.menu__second-level.menu--expanded,
+.menu__dropdown button.menu__second-level.menu--expanded {
+  color: var(--menu-text-color-active);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+.menu__dropdown a.menu--active,
+.menu__dropdown button.menu--active {
+  background-color: var(--menu-item-theme-active-bg);
 }
-.menu__dropdown a.menu__third-level.menu--active {
-  background-color: transparent;
+.menu__dropdown a.menu--active.menu__second-level, .menu__dropdown a.menu--active.menu__third-level,
+.menu__dropdown button.menu--active.menu__second-level,
+.menu__dropdown button.menu--active.menu__third-level {
+  background-color: var(--menu-link-active-background-color);
 }
-.menu__dropdown a.menu__third-level:focus-visible {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: -0.125rem;
-  transition: outline 0s;
-  outline-color: var(--menu-focus-outline-color);
+.menu__dropdown a.menu--active.menu__second-level.menu--expandable:hover,
+.menu__dropdown button.menu--active.menu__second-level.menu--expandable:hover {
+  background-color: var(--menu-link-hover-background-color);
 }
-.menu__dropdown a.menu--active {
-  background-color: var(--menu-item-theme-active-bg);
+.menu__dropdown a.menu--active.menu__second-level.menu--expandable:active,
+.menu__dropdown button.menu--active.menu__second-level.menu--expandable:active {
+  background-color: var(--menu-link-pressed-background-color);
 }
-.menu__dropdown a.menu--active.menu__third-level {
-  color: var(--menu-third-level-text-color-active);
+.menu__dropdown a.menu--active.menu--expandable,
+.menu__dropdown button.menu--active.menu--expandable {
   background-color: unset;
-}
-.menu__dropdown a.menu--active.menu__third-level .menu--active-check {
-  --icon-size: 1.25rem;
-  display: block;
-  padding-left: 0.5rem;
-}
-.menu__dropdown a.menu--active:hover {
-  background-color: var(--menu-item-theme-hover-bg);
+  color: var(--menu-text-color-active);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
 }
 
 .badge {
@@ -704,8 +730,9 @@
   color: var(--menu-text-color);
   background-color: var(--menu-badge-background);
   margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
-  align-self: flex-end;
+  vertical-align: middle;
+  position: relative;
+  top: -0.0625em;
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
 }

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

@@ -7,28 +7,67 @@ export class TetMenuMobile {
         this.isActive = false;
         this.firstLevelTitle = '';
         this.firstLevelLink = '';
-        this.firstLevelId = null;
+        this.firstLevelId = undefined;
         this.subLevels = [];
         this.darkMode = false;
         this.highlightTheme = undefined;
         this.showAnimation = false;
         this.firstLevelIcon = '';
         this.hideBottomBorder = false;
+        this.openActiveMenu = false;
         this.isExpanded = false;
         this.hasDropdownContent = false;
         this.subMenuState = [];
     }
+    rootMenuId = 'tet-menu-mobile-root-dropdown';
     /**
      * The root element of the component.
      */
     rootElement;
+    getOpenSubMenusByActiveItems(items) {
+        const openKeys = new Set();
+        const walk = (levelItems) => {
+            let hasActiveInCurrentBranch = false;
+            levelItems.forEach(item => {
+                const childItems = item.subLevels || [];
+                const hasActiveChild = childItems.length ? walk(childItems) : false;
+                const isActiveBranch = Boolean(item.active) || hasActiveChild;
+                if (childItems.length && isActiveBranch) {
+                    openKeys.add(item.title);
+                }
+                if (isActiveBranch) {
+                    hasActiveInCurrentBranch = true;
+                }
+            });
+            return hasActiveInCurrentBranch;
+        };
+        walk(items);
+        return Array.from(openKeys);
+    }
+    syncExpandedStateWithActiveState(isActive) {
+        if (!this.openActiveMenu) {
+            return;
+        }
+        if (!isActive) {
+            this.isExpanded = false;
+            return;
+        }
+        if (this.hasDropdownContent) {
+            this.isExpanded = true;
+            this.subMenuState = this.getOpenSubMenusByActiveItems(this.subLevels);
+        }
+    }
+    onIsActiveChange(newIsActive) {
+        this.syncExpandedStateWithActiveState(newIsActive);
+    }
     /**
      * Lifecycle method.
      */
     componentWillLoad() {
-        const hasListStartSlot = Boolean(this.rootElement.querySelector('[slot="list-start"]'));
-        const hasListEndSlot = Boolean(this.rootElement.querySelector('[slot="list-end"]'));
+        const hasListStartSlot = Boolean(this.rootElement?.querySelector('[slot="list-start"]'));
+        const hasListEndSlot = Boolean(this.rootElement?.querySelector('[slot="list-end"]'));
         this.hasDropdownContent = hasListStartSlot || hasListEndSlot || Boolean(this.subLevels.length);
+        this.syncExpandedStateWithActiveState(this.isActive);
     }
     /**
      * Method trigering on the first level element click.
@@ -55,19 +94,28 @@ export class TetMenuMobile {
      */
     renderFirstLevel() {
         const { firstLevelTitle, firstLevelLink, firstLevelId } = this;
-        let href = 'javascript:void(0)';
-        const canBeClicked = !this.hasDropdownContent && firstLevelLink;
-        if (canBeClicked) {
-            href = firstLevelLink;
-        }
+        const hasNavigationLink = !this.hasDropdownContent && !!firstLevelLink;
+        const isToggleButton = this.hasDropdownContent;
         const isThemed = !!this.highlightTheme;
-        return (h("a", { id: firstLevelId, href: href, class: {
-                'menu__first-level': true,
-                'tet-font__label--l': true,
-                'menu__first-level-themed': !!this.highlightTheme,
-                'show-animation': this.showAnimation,
-                ...(this.highlightTheme && { [`theme-${this.highlightTheme}`]: true }),
-            }, onClick: this.firstLevelClick }, this.firstLevelIcon && h("tet-icon", { class: "menu__first-level-icon", name: this.firstLevelIcon, theme: this.darkMode ? 'dark' : 'light', type: this.isActive && !isThemed ? "secondary" : "primary" }), h("span", null, firstLevelTitle), this.renderChevron()));
+        const useSecondaryType = isThemed
+            ? (this.isExpanded && !this.isActive)
+            : (this.isExpanded || this.isActive);
+        const firstLevelContent = [
+            this.firstLevelIcon && (h("tet-icon", { class: "menu__first-level-icon", name: this.firstLevelIcon, theme: this.darkMode ? 'dark' : 'light', type: useSecondaryType ? 'secondary' : 'primary' })),
+            h("span", null, firstLevelTitle),
+            this.renderChevron(),
+        ];
+        const firstLevelClass = {
+            'menu__first-level': true,
+            'tet-font__label--l': true,
+            'menu__first-level-themed': !!this.highlightTheme,
+            'show-animation': this.showAnimation,
+            ...(this.highlightTheme && { [`theme-${this.highlightTheme}`]: true }),
+        };
+        if (isToggleButton) {
+            return (h("button", { id: firstLevelId, type: "button", "aria-controls": this.rootMenuId, "aria-expanded": this.isExpanded.toString(), class: firstLevelClass, onClick: this.firstLevelClick }, firstLevelContent));
+        }
+        return (h("a", { id: firstLevelId, href: hasNavigationLink ? firstLevelLink : undefined, class: firstLevelClass, onClick: this.firstLevelClick }, firstLevelContent));
     }
     /**
      * Renders the dropdown of the menu.
@@ -79,48 +127,56 @@ export class TetMenuMobile {
         }
         let renderedSubLevels = null;
         if (subLevels.length) {
-            renderedSubLevels = subLevels.map(subLevel => this.renderSubItem(subLevel));
+            renderedSubLevels = subLevels.map((subLevel, index) => this.renderSubItem(subLevel, false, index));
         }
-        return (h("div", { class: "menu__dropdown" }, h("ul", { class: "menu__dropdown__list" }, h("slot", { name: "list-start" }), renderedSubLevels, h("slot", { name: "list-end" }))));
+        return (h("div", { class: "menu__dropdown" }, h("ul", { class: "menu__dropdown__list", id: this.rootMenuId }, h("slot", { name: "list-start" }), renderedSubLevels, h("slot", { name: "list-end" }))));
     }
     /**
      * Renders the sub level item of the menu.
      * @param subLevel
      */
-    renderSubItem(subLevel, isSubLevel = false) {
-        const subMenuItems = subLevel.subLevels?.map(_subLevel => {
-            return this.renderSubItem(_subLevel, true);
+    renderSubItem(subLevel, isSubLevel = false, secondLevelIndex) {
+        const subMenuItems = subLevel.subLevels?.map((_subLevel, index) => {
+            return this.renderSubItem(_subLevel, true, index);
         });
-        let href = 'javascript:void(0)';
         const canBeClicked = !!subMenuItems?.length;
-        if (!canBeClicked) {
-            href = subLevel.link;
-        }
-        return (h("li", null, h("a", { id: subLevel.id, href: href, class: {
-                'menu--active': subLevel.active,
-                'menu__second-level': !isSubLevel,
-                'menu__third-level': isSubLevel
-            }, onClick: () => this.secondLevelClick(subLevel.title, canBeClicked), inert: !this.isExpanded }, subLevel.title, " ", !!subLevel.badge && h("span", { class: "badge" }, subLevel.badge), " ", subLevel.active && isSubLevel
-            && h("tet-icon", { class: "menu--active-check", name: "tc-check", theme: this.darkMode ? "dark" : "light" }), !!canBeClicked && this.renderSubChevron(subLevel.title)), !!this.subMenuState.includes(subLevel.title) && h("ul", { class: "sublist" }, subMenuItems)));
+        const hasNavigationLink = !canBeClicked;
+        const subMenuId = !isSubLevel && canBeClicked ? `tet-menu-mobile-submenu-${secondLevelIndex}` : undefined;
+        const useSecondaryType = !!subLevel.active || this.subMenuState.includes(subLevel.title);
+        const subItemClass = {
+            'menu--active': !!subLevel.active,
+            'menu__second-level': !isSubLevel,
+            'menu__third-level': isSubLevel,
+            'menu--expandable': canBeClicked,
+            'menu--expanded': this.subMenuState.includes(subLevel.title),
+        };
+        const subItemContent = [
+            subLevel.badge ? (h("div", null, subLevel.title, h("span", { class: "badge" }, subLevel.badge))) : (subLevel.title),
+            !!canBeClicked && this.renderSubChevron(subLevel.title, useSecondaryType),
+        ];
+        return (h("li", null, canBeClicked ? (h("button", { id: subLevel.id, type: "button", "aria-controls": subMenuId, "aria-expanded": this.subMenuState.includes(subLevel.title).toString(), class: subItemClass, onClick: () => this.secondLevelClick(subLevel.title, canBeClicked), inert: !this.isExpanded }, subItemContent)) : (h("a", { id: subLevel.id, href: hasNavigationLink ? subLevel.link : undefined, class: subItemClass, onClick: () => this.secondLevelClick(subLevel.title, canBeClicked), inert: !this.isExpanded }, subItemContent)), !!this.subMenuState.includes(subLevel.title) && h("ul", { class: "sublist", id: subMenuId }, subMenuItems)));
     }
     /**
      * Renders the chevron icon if the menu has content.
      */
     renderChevron() {
         const isThemed = !!this.highlightTheme;
+        const useSecondaryType = isThemed
+            ? (this.isExpanded && !this.isActive)
+            : (this.isExpanded || this.isActive);
         if (!this.hasDropdownContent) {
             return null;
         }
-        return (h("tet-icon", { class: "menu__chevron", name: this.isExpanded ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light", type: this.isActive && !isThemed ? "secondary" : "primary" }));
+        return (h("tet-icon", { class: "menu__chevron", name: this.isExpanded ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light", type: useSecondaryType ? 'secondary' : 'primary' }));
     }
     /**
      * Renders the chevron icon if the menu has content.
      */
-    renderSubChevron(key) {
-        return (h("tet-icon", { class: "menu__chevron", name: this.subMenuState.includes(key) ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light" }));
+    renderSubChevron(key, useSecondaryType = false) {
+        return (h("tet-icon", { class: "menu__chevron", name: this.subMenuState.includes(key) ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light", type: useSecondaryType ? "secondary" : "primary" }));
     }
     render() {
-        return (h(Host, { key: 'a94c795b37c506fcfd90797ab8db8f903b43814a' }, h("div", { key: 'a67d4b00cc8368b3a44b0fa1862c2d885cd38636', class: {
+        return (h(Host, { key: '259013548a8c3ce223f46676671f52af59b38457' }, h("div", { key: '3a036b3a3eeb1beb9f920fd3c6e7e8dae0cb111b', class: {
                 'menu': true,
                 'menu--expanded': this.isExpanded,
                 'menu--active': this.isActive,
@@ -205,14 +261,13 @@ export class TetMenuMobile {
                     "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
             },
             "subLevels": {
                 "type": "unknown",
@@ -330,6 +385,24 @@ export class TetMenuMobile {
                 "attribute": "hide-bottom-border",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "openActiveMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, expands the active root menu on load and opens its active expandable sub-menus."
+                },
+                "attribute": "open-active-menu",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -341,4 +414,10 @@ export class TetMenuMobile {
         };
     }
     static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "isActive",
+                "methodName": "onIsActiveChange"
+            }];
+    }
 }