@sapudex/web-components 2.4.2 → 2.6.0

package/src/Carousel.ts

@@ -2,38 +2,44 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp,
-  isDown,
-  isRight,
-  isLeft,
+  isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
-import {
-  CAROUSEL_NEXT_ARROW_TEXT,
-  CAROUSEL_PREVIOUS_ARROW_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
+import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 
-import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
+import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
 
+export enum UDExCarouselButtonDesign {
+  Secondary = "Secondary",
+  Tertiary = "Tertiary",
+}
+
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-carousel</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Carousel.js";</code>
+ *
  * @constructor
  * @extends UI5Element
  * @tagname udex-carousel
@@ -41,11 +47,11 @@ export enum UDExCarouselNavigationPosition {
  */
 @customElement({
   tag: "udex-carousel",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: CarouselCss,
   template: CarouselTemplate,
-  dependencies: [UI5Carousel, UDExButton],
 })
+
 class UDExCarousel extends UI5Element {
   /**
    * Defines the position of the navigation.
@@ -100,11 +106,11 @@ class UDExCarousel extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  get nextPageText() {
+  get nextPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
   }
 
-  get previousPageText() {
+  get previousPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
   }
 
@@ -114,24 +120,24 @@ class UDExCarousel extends UI5Element {
     return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
-  get buttonDesign() {
+  get buttonDesign(): UDExCarouselButtonDesign {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
-      ? "Secondary"
-      : "Tertiary";
+      ? UDExCarouselButtonDesign.Secondary
+      : UDExCarouselButtonDesign.Tertiary;
   }
 
-  get showNavigationButtons() {
+  get showNavigationButtons(): { top: boolean; bottom: boolean } {
     return {
       top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
       bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
     };
   }
 
-  get _hidePageIndicator() {
+  get _hidePageIndicator(): boolean {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
-  get _carousel() {
+  get _carousel(): UI5Carousel | null {
     return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
   }
 

package/src/CarouselTemplate.tsx

@@ -0,0 +1,56 @@
+import type Carousel from "./Carousel.js";
+import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
+import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function CarouselTemplate(this: Carousel) {
+  return (
+    <div className={this.carouselClass} onKeyDown={this._onkeydown}>
+      {this.showNavigationButtons.top && navigation.call(this)}
+      <UI5Carousel
+        id="carousel"
+        hideNavigationArrows
+        arrowsPlacement={CarouselArrowsPlacement.Navigation}
+        accessibleName={this.accessibleName}
+        hidePageIndicator={this._hidePageIndicator}>
+        {this.items.map(item =>
+          <slot name={(item as SlottedChild)._individualSlot}></slot>
+        )}
+      </UI5Carousel>
+      {this.showNavigationButtons.bottom && navigation.call(this)}
+    </div>
+  );
+}
+
+function navigation(this: Carousel) {
+  const btnClassName = "udex-carousel__navigation-button";
+
+  return (
+    <div class="udex-carousel__navigation-wrapper" part="navigation">
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isPrevButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowLeft}
+        design={this.buttonDesign}
+        tooltip={this.previousPageText}
+        onClick={this._prevButtonClick}
+        part="prev-button">
+      </UDExButton>
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isNextButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowRight}
+        design={this.buttonDesign}
+        tooltip={this.nextPageText}
+        onClick={this._nextButtonClick}
+        part="next-button">
+      </UDExButton>
+    </div>
+  );
+}

package/src/ContactItemTemplate.tsx

@@ -1,11 +1,12 @@
 import type ContactItem from "./ContactItem.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExLink from "./Link.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 
 export default function ContactItemTemplate(this: ContactItem) {
   return (
     <div class="udex-contact-item">
-      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode="Decorative"></UI5Icon>}
+      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode={IconMode.Decorative}></UI5Icon>}
       <div class="udex-contact-item__content">
         {labelContent.call(this)}
         <p class="udex-contact-item__description"><slot></slot></p>

package/src/CountrySelector.ts

@@ -364,30 +364,25 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.open = true;
     this._search.focus();
     this._search.value = key;
-    this.onValueSearch(key);
+    this.fireChangeSearch();
   }
 
   handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
-  onValueSearch(searchValue: string) {
-    this._shouldFilterItems = true;
-    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireDecoratorEvent("change-search", { value: searchValue });
-  }
-
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
       this._dropdown.open = !this._dropdown.open;
     }
   }
 
-  handleValueSearch(e: CustomEvent) {
-    this.onValueSearch(e.detail.value as string);
+  handleValueSearch(e: CustomEvent): void {
+    this.onSearch(e);
+    this.fireChangeSearch();
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onSubmitSearch();
   }
 
@@ -428,6 +423,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  fireChangeSearch(): void {
+    this.fireDecoratorEvent("change-search", { value: this._search.value });
+  }
+
   getItemTemplate(country: Country) {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }

package/src/Divider.ts

@@ -1,10 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 
 // Template
-import DividerTemplate from "./generated/templates/DividerTemplate.lit.js";
+import DividerTemplate from "./DividerTemplate.js";
 
 // Styles
 import DividerCss from "./generated/themes/Divider.css.js";
@@ -14,7 +15,14 @@ import DividerCss from "./generated/themes/Divider.css.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-divider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Divider.js";</code>
+ *
  *
  * @constructor
  * @extends UI5Element
@@ -23,7 +31,7 @@ import DividerCss from "./generated/themes/Divider.css.js";
  */
 @customElement({
   tag: "udex-divider",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: DividerCss,
   template: DividerTemplate,
 })
@@ -38,7 +46,7 @@ class UDExDivider extends UI5Element {
     accessibleRole: string = "separator";
 
   get effectiveAccRole() {
-    return this.accessibleRole.toLowerCase();
+    return this.accessibleRole.toLowerCase() as AriaRole;
   }
 }
 

package/src/DividerTemplate.tsx

@@ -0,0 +1,11 @@
+import type Divider from "./Divider.js";
+
+export default function DividerTemplate(this: Divider) {
+  return (
+    <div
+      class="udex-divider-wrapper"
+      role={this.effectiveAccRole}>
+      <span class="udex-divider"></span>
+    </div>
+  );
+}

package/src/Dropdown.ts

@@ -5,6 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 /**
  * @class
@@ -27,7 +28,7 @@ import DropdownCss from "./generated/themes/Dropdown.css.js";
 @customElement({
   tag: "udex-dropdown",
   renderer: jsxRenderer,
-  styles: [Popover.styles, DropdownCss],
+  styles: [Popover.styles, DropdownCss, getEffectiveScrollbarStyle()],
 })
 
 class UDExDropdown extends Popover {

package/src/FilterMenu.ts

@@ -21,6 +21,7 @@ import UDExSearch from "./Search.js";
 import UDExButton from "./Button.js";
 import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import { Placement, HorizontalAlign } from "./types/Dropdown.js";
 import { UDExListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
@@ -35,6 +36,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 // Styles
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -65,7 +67,7 @@ type UDExFilterMenuResetClickEventDetail = {
 @customElement({
   tag: "udex-filter-menu",
   renderer: litRender,
-  styles: [FilterMenuCss, SearchableListCss],
+  styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
     Popover,
@@ -160,13 +162,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: Boolean })
     disableTargetOverlap?: boolean;
 
-  /**
-   * Allows control over the height.
-   * @public
-   */
-  @property({ type: String })
-    height?: string;
-
   /**
    * Determines on which side the component is placed at.
    *
@@ -433,15 +428,16 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
-  }
-
   _dropdownBeforeOpen(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "addEventListener");
+    }
+
     if (this.height) {
-      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
-      content.style.maxHeight = this.height;
+      this._setContentHeight();
     }
+
     this.fireDecoratorEvent("before-open");
   }
 
@@ -458,6 +454,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterClose(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
+    }
+
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -515,10 +516,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }
 
-  getPopover(): Popover {
-    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
-  }
-
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/HeroBanner.hbs

@@ -38,6 +38,7 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
+    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/List.ts

@@ -10,7 +10,6 @@ import {
   isHome,
   isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type UDExListItem from "./ListItem.js";
 import { UDExListStyleType, UDExListMode } from "./types/List.js";
 import type UDExListGroupHeader from "./ListGroupHeader.js";
@@ -29,6 +28,7 @@ import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import type { UDExListWithFirstLetterFocus } from "./utils/ListWithFirstLetterFocus.js";
 import UDExFirstLetterFocusHandler from "./utils/ListWithFirstLetterFocus.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 

package/src/MastheadCountrySelector.hbs

@@ -1,8 +1,6 @@
 <div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
     {{#if _isActiveRegionOpen}}
-        <span class="udex-masthead-country-selector__title">
-            {{countryTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
@@ -26,9 +24,10 @@
             non-interactive-submit-button
             show-submit-button>
         </udex-search>
+        <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
         <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
             {{#each _activeCountries}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                         @click="{{../fireEventCountryItemClick}}"
@@ -43,19 +42,16 @@
             {{/each}}
         </ul>
     {{else}}
-        <span class="udex-masthead-country-selector__title">
-            {{regionTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">
             {{#each regionsData}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-has-popup="true"
-                        accessible-role="button"
                         type="Button"
                         part="menu-item"
                         is-nav-item

package/src/MastheadCountrySelector.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import {
@@ -15,6 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -193,8 +196,12 @@ class UDExMastheadCountrySelector extends UI5Element {
   _activeCountries!: Array<Country>;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusRegionByIndex!: boolean;
+  _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   constructor() {
     super();
     this._activeCountries = [];
@@ -291,6 +298,10 @@ class UDExMastheadCountrySelector extends UI5Element {
       this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
     }
 
+    this._accSearchResultInfo = this._activeCountries.length
+      ? `${this._activeCountries.length} ${this.resultReturnedText}`
+      : this.noMatchesFoundText;
+
     this._shouldFocusBackBtn = false;
     this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
@@ -468,6 +479,14 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  get noMatchesFoundText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+  }
+
   get items(): Array<UDExMastheadMenuItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
     return items ? Array.from(items) : [];

package/src/MastheadItem.ts

@@ -10,6 +10,7 @@ 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
@@ -22,7 +23,6 @@ import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
@@ -312,6 +312,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
+    if (this.shouldFocusFirstElement) {
+      this.applyFocusToFirstElement();
+    }
+
     this.handleOutsideClick();
   }
 
@@ -419,7 +423,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   setDropdownInsetStart(): void {
-    const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+    const dropdown = this.dropdownHolder;
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
       const marginInlineStart = this.calculateMarginInlineStart(rect);
@@ -468,6 +472,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
+  async applyFocusToFirstElement(): Promise<void> {
+    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
+    if (focusedElement) {
+      focusedElement.focus();
+    }
+  }
+
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -498,6 +509,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       || this.isNavItemTarget(target);
   }
 
+  get dropdownHolder(): HTMLElement {
+    return this.getDomElement(".udex-masthead-item__dropdown")!;
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -549,6 +564,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
+  get shouldFocusFirstElement(): boolean {
+    return this.isDropdownOpened && !this._preventFocusOut;
+  }
+
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }

package/src/MastheadMenu.hbs

@@ -42,7 +42,9 @@
         category="{{this.category}}">
         {{#each this.items}}
             <li>
-                {{#if this.url}}
+                {{#if this.isDivider}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"
                         exportparts="menu-item"
@@ -53,8 +55,6 @@
                         label="{{this.title}}"
                         exportparts="badge">
                     </udex-masthead-menu-item>
-                {{else}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
                 {{/if}}
             </li>
         {{/each}}