@sapudex/web-components 2.34.0 → 2.36.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.34.0",
+  "version": "2.36.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2127,7 +2127,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -2234,7 +2237,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -2346,7 +2351,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -2449,7 +2457,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -2562,7 +2572,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -2672,7 +2685,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -3711,7 +3726,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "height",
@@ -3770,7 +3788,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "height",
@@ -3890,7 +3910,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -4004,7 +4027,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -4183,7 +4208,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -4354,7 +4382,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -4475,7 +4505,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -4589,7 +4622,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -7632,7 +7667,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -7742,7 +7780,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -7863,7 +7903,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -7979,7 +8022,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",
@@ -8092,7 +8137,10 @@
             {
               "name": "type",
               "description": "Defines the type of the item.",
-              "value": { "type": "\"None\" | \"Icon\"", "default": "\"None\"" }
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "collapsible",
@@ -8202,7 +8250,9 @@
               {
                 "name": "type",
                 "description": "Defines the type of the item.",
-                "value": { "type": "\"None\" | \"Icon\"" }
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               },
               {
                 "name": "collapsible",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.34.0",
+  "version": "2.36.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -25,7 +25,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
             if (!item._isCurrentPageItem) { focusablePos++; }
             const posLabel = `${item.accessibleName || item.textContent || ""}, ${focusablePos} ${ofText} ${focusableCount}`;
             return item._isCurrentPageItem ? (
-              <li key={index} aria-hidden="true">
+              <li key={index}>
                 <span
                   id={`${item._id}-li`}
                   className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}

package/src/BreadcrumbsTemplate.tsx

@@ -32,7 +32,7 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
                 id={`${linkData._id}-link-wrapper`}>
                 {linkData._isCurrentPageItem ? (
                   <>
-                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <span className={`${this._rootClass}__separator`}></span>
                     <span
                       id={`${linkData._id}-link`}
                       class={`${rootClass}__item ${this._rootClass}__item--visible ${this._rootClass}__item--current-page`}

package/src/CountrySelector.ts

@@ -6,6 +6,8 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import type { Country } from "./data/CountryListISO3166.js";
 import { CountryListDB } from "./data/CountryListISO3166.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
 import UDExSearch from "./Search.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -63,6 +65,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
     UDExDropdown,
     UDExTextField,
     UDExStatusMessage,
+    IllustratedMessage,
   ],
 })
 

package/src/FilterMenu.ts

@@ -11,6 +11,8 @@ import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRo
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -80,6 +82,7 @@ type UDExFilterMenuResetClickEventDetail = {
   styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
+    IllustratedMessage,
     Popover,
     Icon,
     UDExBusyIndicator,

package/src/ListGroupHeader.hbs

@@ -125,6 +125,8 @@
 
 {{#*inline "single-group-header"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -145,13 +147,15 @@
 
 {{#*inline "single-group-header-collapsible"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
-        id="{{this._id}}_group-content__focusable"
-        role="button"
-        tabindex="0"
-        @keydown="{{handleKeyDown}}"
-        _tab-index="{{_effectiveTabIndex}}"
-        aria-expanded="{{expanded}}"
-        aria-controls="{{ariaControlsId}}">
+    id="{{this._id}}_group-content__focusable"
+    role="button"
+    tabindex="0"
+    @keydown="{{handleKeyDown}}"
+    _tab-index="{{_effectiveTabIndex}}"
+    aria-expanded="{{expanded}}"
+    aria-controls="{{ariaControlsId}}">
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"

package/src/ListItem.hbs

@@ -56,6 +56,8 @@
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
             </div>
         {{/if}}
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"

package/src/ListItemBase.ts

@@ -334,6 +334,14 @@ class UDExListItemBase extends UI5Element {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
+  get typeNumber(): boolean {
+    return this.type === UDExListStyleType.Number;
+  }
+
+  get typeCircle(): boolean {
+    return this.type === UDExListStyleType.Circle;
+  }
+
   get typeIcon(): boolean {
     return this.type === UDExListStyleType.Icon;
   }

package/src/MastheadItem.hbs

@@ -24,6 +24,7 @@
     <button
         id="{{this._id}}"
         class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
+        tabindex="0"
         aria-expanded="{{buttonAriaExpanded}}"
         aria-describedby="{{ariaDescribedBy}}"
         aria-controls="{{this._id}}_dropdown"
@@ -41,6 +42,7 @@
         role="{{accessibleRoleName}}"
         id="{{this._id}}"
         class="udex-masthead-item__btn {{additionalClass}}"
+        tabindex="0"
         aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"

package/src/MastheadItem.ts

@@ -8,7 +8,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEscape, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
@@ -324,6 +324,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _imageLoadError = false;
 
+  /**
+   * Defines if the item has the dropdown with four columns menu
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _hasFourColumnsMenu = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -338,13 +346,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   onBeforeRendering(): void {
     this.label = this.eventItemTitle;
+    if (this.hasFourColumnsMenu && !this.isExploreBtn) {
+      this._hasFourColumnsMenu = true;
+    }
   }
 
   onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
     this._mastheadShell = this.mastheadShell;
     this.handleDirection();
-    if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
+    if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn && !this.hasFourColumnsMenu) {
       this.setDropdownInsetStart();
     }
 
@@ -398,6 +409,20 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
         this.handleKeyEscape();
       }
     }
+    if (isTabNext(e) && this.isDropdownOpened) {
+      const button = this.getDomElement(".udex-masthead-item__btn, .udex-masthead-item__profile-btn");
+      if (button && e.currentTarget === button) {
+        this.handleTabIntoDropdown(e);
+      }
+    }
+  }
+
+  handleTabIntoDropdown(e: KeyboardEvent): void {
+    const menu = this.getSlottedNodes<UDExMastheadMenu>("dropdown")[0];
+    if (menu && typeof menu.focusFirstItem === "function") {
+      e.preventDefault();
+      menu.focusFirstItem();
+    }
   }
 
   handleKeyEscape(): void {
@@ -484,7 +509,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   recalculateDropdownPosition(): void {
     const dropdown = this.dropdownHolder;
-    if (dropdown) {
+    if (dropdown && !this.hasFourColumnsMenu) {
       dropdown.style.marginInlineStart = "";
       this.setDropdownInsetStart();
     }
@@ -704,6 +729,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get imageLoadError(): boolean {
     return this._imageLoadError && this.isCountrySelectorBtn;
   }
+
+  get dropdownMenu(): UDExMastheadMenu | undefined {
+    return this.getSlottedNodes<UDExMastheadMenu>("dropdown")
+      .find(el => el instanceof UDExMastheadMenu);
+  }
+
+  get hasFourColumnsMenu(): boolean {
+    return !!this.dropdownMenu?.hasFourColumns;
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.ts

@@ -156,14 +156,12 @@ class UDExMastheadMenu extends UI5Element {
 
   handleHomeKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const firstItem = this.links[0];
-    firstItem.focus();
+    this.focusInnerElement(this.links[0]);
   }
 
   handleEndKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const lastItem = this.links[this.links.length - 1];
-    lastItem.focus();
+    this.focusInnerElement(this.links[this.links.length - 1]);
   }
 
   handlePreviousItemFocus(e: KeyboardEvent): void {
@@ -208,7 +206,7 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[previousSelectIndex]);
     }
-    this.links[previousSelectIndex].focus();
+    this.focusInnerElement(this.links[previousSelectIndex]);
   }
 
   focusNextItem(item: UDExMastheadMenuItem): void {
@@ -217,13 +215,24 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[nextSelectIndex]);
     }
-    this.links[nextSelectIndex].focus();
+    this.focusInnerElement(this.links[nextSelectIndex]);
   }
 
   getCurrentIndex(item: UDExMastheadMenuItem): number {
     return this.links.indexOf(item);
   }
 
+  focusFirstItem(): void {
+    const firstItem = this.links[0];
+    if (firstItem) {
+      this.focusInnerElement(firstItem);
+    }
+  }
+
+  private focusInnerElement(item: UDExMastheadMenuItem): void {
+    item.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-menu-item")?.focus();
+  }
+
   scrollToItem(item: UDExMastheadMenuItem): void {
     item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
   }
@@ -261,6 +270,10 @@ class UDExMastheadMenu extends UI5Element {
   get overviewHeaderLinkText(): string {
     return translate(UDExMastheadMenu, OVERVIEW);
   }
+
+  get hasFourColumns(): boolean {
+    return this.itemsList.some(item => item.subMenuLinkItems.length === 4);
+  }
 }
 
 UDExMastheadMenu.define();

package/src/MastheadShell.hbs

@@ -151,6 +151,7 @@
             @click="{{handleLogoClick}}"
             role="link"
             href="{{homeUrl}}"
+            tabindex="0"
             title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
@@ -178,6 +179,7 @@
             @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
+            tabindex="0"
             title="{{siteLabelTitle}}"
             target="_self"
             aria-label="{{siteLabelAriaLabel}}"
@@ -196,6 +198,7 @@
                 class="udex-masthead-shell__co-brand-link"
                 @click="{{handleCoBrandClick}}"
                 href="{{coBrandUrl}}"
+                tabindex="0"
                 title="{{coBrandTitle}}"
                 aria-label="{{coBrandAriaLabel}}"
                 target="_self"

package/src/MediaPlayer.ts

@@ -670,4 +670,4 @@ class UDExMediaPlayer extends UI5Element {
 UDExMediaPlayer.define();
 
 export default UDExMediaPlayer;
-export type { UDExMediaPlayerVideoProgressEventDetail };
+export type { UDExMediaPlayerVideoProgressEventDetail, UDExMediaPlayerVideojsReadyEventDetail };

package/src/SearchableListBase.hbs

@@ -16,7 +16,15 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
+    <div class="udex-no-result">
+        <ui5-illustrated-message
+            name="NoSearchResults"
+            design="Dot"
+            title-text=" "
+            subtitle-text=" ">
+        </ui5-illustrated-message>
+        <span>{{getNoResultText}}</span>
+    </div>
 {{else if busy}}
     <udex-busy-indicator
         class="udex-busy-indicator"

package/src/SecondaryNavigationItem.ts

@@ -19,6 +19,8 @@ import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavi
 // Styles
 import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
 
+const DESKTOP_DROPDOWN_BOTTOM_GAP = 24;
+
 type UDExSecondaryNavigationItemClickEventDetail = {
   item: HTMLElement,
   index: number,
@@ -175,8 +177,12 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this._shouldFocusFirstSubItem = false;
     }
 
-    if (this._isMobileView && this.isOpen) {
-      this.setDropdownHeight();
+    if (this.isOpen) {
+      if (this._isMobileView) {
+        this.setMobileDropdownMaxHeight();
+      } else {
+        this.setDesktopDropdownMaxHeight();
+      }
     }
   }
 
@@ -184,6 +190,26 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
+  _handleWindowResize = (): void => {
+    if (!this.isOpen) { return; }
+
+    if (this._isMobileView) {
+      this.setMobileDropdownMaxHeight();
+    } else {
+      this.setDesktopDropdownMaxHeight();
+    }
+  };
+
+  onEnterDOM(): void {
+    super.onEnterDOM();
+    window.addEventListener("resize", this._handleWindowResize);
+  }
+
+  onExitDOM(): void {
+    super.onExitDOM();
+    window.removeEventListener("resize", this._handleWindowResize);
+  }
+
   handleSubItemClick(e: CustomEvent | KeyboardEvent): void {
     const originalEvent: PointerEvent | KeyboardEvent = (e instanceof CustomEvent && e.detail?.originalEvent) ? e.detail.originalEvent : e as KeyboardEvent;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
@@ -366,15 +392,21 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
-  setDropdownHeight(): void {
+  setDesktopDropdownMaxHeight(): void {
+    const { top } = this.dropdown.getBoundingClientRect();
+    const maxHeight = window.innerHeight - top - DESKTOP_DROPDOWN_BOTTOM_GAP;
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-desktop-max-height", `${maxHeight}px`);
+  }
+
+  setMobileDropdownMaxHeight(): void {
     if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
       const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
       const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
-      this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${maxDropdownHeight}px`);
+      this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${maxDropdownHeight}px`);
       return;
     }
 
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${this._maxHeight}`);
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${this._maxHeight}`);
   }
 
   get _dropdownMaxHeightExceeds(): boolean {