@sapudex/web-components 2.56.0 → 2.58.0

package/src/ListItem.ts

@@ -398,27 +398,38 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get ariaSelectedValue(): "true" | "false" | undefined {
-    if (this.effectiveRole !== "treeitem") {
+    // RadioGroup conveys its state through the radio control, never aria-selected.
+    if (this.modeRadioGroup) {
+      return undefined;
+    }
+    // MultiSelect treeitems convey state via aria-checked (see ariaCheckedValue).
+    // Every other selectable node — listbox options in both SingleSelect AND
+    // MultiSelect, plus SingleSelect treeitems — announces its state natively
+    // through aria-selected so the screen reader re-reads it when focus is on the
+    // item and when Enter/Space toggles it.
+    if (this.roleItem === "treeitem" && this.modeMultiSelect) {
       return undefined;
     }
-    // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
-    if (this.modeMultiSelect) {
+    // Gated on the actual rendered role of the [part=item] div — never the
+    // presentational inner div used in aria-activedescendant mode (SelectBox sets
+    // aria-selected on the host).
+    if (this.roleItem !== "treeitem" && this.roleItem !== "option") {
       return undefined;
     }
     return this.selected ? "true" : "false";
   }
 
   get ariaExpandedValue(): "true" | "false" | undefined {
+    // aria-expanded is exposed ONLY on collapsible headers — a node the user can
+    // actually expand/collapse. Non-collapsible group headers must NOT report an
+    // expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed
+    // structurally by the nested role="group", not by aria-expanded.
     if (!this.collapsible) {
       return undefined;
     }
     return this.expanded ? "true" : "false";
   }
 
-  get checkboxAriaHidden(): boolean {
-    return this.effectiveRole === "treeitem";
-  }
-
   get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }
@@ -450,14 +461,6 @@ class UDExListItem extends UDExListItemBase {
     return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
 
-  get itemDescribedBy(): string {
-    return `${this._id}-invisibleText-describedby`;
-  }
-
-  get itemState(): string {
-    return this.selected ? "Selected" : "Not selected";
-  }
-
   get ratingAriaLabel(): string {
     const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
     const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";

package/src/ListItemBase.ts

@@ -240,6 +240,27 @@ class UDExListItemBase extends UI5Element {
   @property({ type: Boolean })
     _useHostAriaRole: boolean = false;
 
+  /**
+   * Explicit 1-based position of this treeitem within its own group, for a grouped
+   * tree structure. The sibling-group tree markup makes JAWS/NVDA compute a flattened
+   * posinset/setsize across all groups; setting these explicitly restores the
+   * per-group count so each item announces "N of <items in this group>".
+   * Only rendered on real treeitems (never in aria-activedescendant mode).
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaPosInSet?: number;
+
+  /**
+   * Explicit set size (number of treeitems within this item's own group) — the
+   * companion to {@link _ariaPosInSet}.
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaSetSize?: number;
+
   /**
    * Defines the tab index of the component.
    *
@@ -311,6 +332,15 @@ class UDExListItemBase extends UI5Element {
 
   handleCollapseIconMouseDown(e: MouseEvent) {
     e.stopPropagation();
+    // In aria-activedescendant mode (SelectBox) DOM focus must stay on the search
+    // input. Preventing the mousedown default stops the chevron/header body div from
+    // stealing focus, which would otherwise trigger a focusout→refocus + scroll-into-view
+    // that shifts the chevron out from under the pointer and eats the first click.
+    // Real-focus components (FilterMenu/List) leave _useHostAriaRole false and are
+    // unaffected. The click still fires, so collapse/expand happens on the first click.
+    if (this._useHostAriaRole) {
+      e.preventDefault();
+    }
   }
 
   handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {

package/src/ListItemTemplate.tsx

@@ -126,7 +126,6 @@ function ContentList(this: UDExListItem) {
         )}
       </div>
       <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
-      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
     </div>
   );
 }
@@ -144,6 +143,8 @@ export default function ListItemTemplate(this: UDExListItem) {
           aria-checked={this.ariaCheckedValue}
           aria-selected={this.ariaSelectedValue}
           aria-expanded={this.ariaExpandedValue}
+          aria-posinset={this._ariaPosInSet || undefined}
+          aria-setsize={this._ariaSetSize || undefined}
           onFocusIn={this.handleFocusIn}
           onFocusOut={this.handleFocusOut}
           onClick={this.handleItemClick}
@@ -152,8 +153,7 @@ export default function ListItemTemplate(this: UDExListItem) {
           onKeyUp={this.handleKeyUp}
           onKeyDown={this.handleKeyDown}
           {...({ divider: this.divider, "_id": this._id } as object)}
-          data-selected={this.selected}
-          aria-describedby={this.itemDescribedBy}>
+          data-selected={this.selected}>
           {this.modeMultiSelect && (
             <UDExCheckbox
               class="udex-list__checkbox"
@@ -163,7 +163,7 @@ export default function ListItemTemplate(this: UDExListItem) {
               accessible-name={`checkbox ${this.stateAccessibleName}`}
               checked={this.selected}
               disabled={this.disabled}
-              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+              aria-hidden="true"
             />
           )}
           {this.modeRadioGroup && (

package/src/MastheadCountrySelector.ts

@@ -1,7 +1,7 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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";
@@ -9,8 +9,8 @@ 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 UDExMastheadMenuItem from "./MastheadMenuItem.js";
-import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
-import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+import { Mode as UDExSearchMode } from "./Search.js";
+import MastheadCountrySelectorTemplate from "./MastheadCountrySelectorTemplate.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
@@ -77,10 +77,10 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-country-selector",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadCountrySelectorCss,
   template: MastheadCountrySelectorTemplate,
-  dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],
+  dependencies: [UI5Icon, UDExMastheadMenuItem],
 })
 
 /**

package/src/MastheadCountrySelectorTemplate.tsx

@@ -0,0 +1,98 @@
+import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExSearch from "./Search.js";
+
+export default function MastheadCountrySelectorTemplate(this: UDExMastheadCountrySelector) {
+  return (
+    <div class="udex-masthead-country-selector">
+      {this._isActiveRegionOpen ? activeRegionView.call(this) : regionsView.call(this)}
+    </div>
+  );
+}
+
+function activeRegionView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.countryTitle}</span>
+      {!this.isSingleMode && (
+        <UDExMastheadMenuItem
+          class="udex-masthead-country-selector__region-back-item"
+          accessible-role="button"
+          onClick={this.backToRegions}
+          label={this._activeRegion?.title}
+          type="Button"
+          part="menu-item"
+          icon-start={true}
+          {...{ "_accessible-name": this.backToRegionListAccessibleName, "is-back": "" }}>
+        </UDExMastheadMenuItem>
+      )}
+      {!this.hideSearch && (
+        <>
+          <UDExSearch
+            class="udex-masthead-country-selector__search"
+            onui5-handle-value-search={this.handleSearch}
+            onui5-handle-value-reset={this.handleSearchReset}
+            onui5-submit-search-value={this.handleSearch}
+            language-voice={this.languageVoice}
+            label={this.searchLabel}
+            mode={this.homeSearchMode}
+            show-voice-button={this.showSearchVoiceButton}
+            non-interactive-submit-button={true}
+            show-submit-button={true}>
+          </UDExSearch>
+          <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
+        </>
+      )}
+      <div class="udex-masthead-country-selector__list-container">
+        <div class="udex-masthead-country-selector__list-wrap" onScroll={this.handleCountryListShadowVisible}>
+          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+            {this._activeCountries.map((country, index) => (
+              <li role="none" key={index}>
+                <UDExMastheadMenuItem
+                  class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
+                  onClick={this.handleCountryClick as any}
+                  url={country.url}
+                  label={country.displayTitle}
+                  index={index}
+                  part="menu-item"
+                  {...{
+                    "_country-code": country.countryCode,
+                    "is-nav-item": "",
+                    ...(country.active ? { "_is-active-country": "" } : {}),
+                  }}>
+                </UDExMastheadMenuItem>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function regionsView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.regionTitle}</span>
+      <ul class="udex-masthead-country-selector__list">
+        {this.regionsData.map((region, index) => (
+          <li key={index}>
+            <UDExMastheadMenuItem
+              onClick={this.handleRegionClick as any}
+              index={index}
+              accessible-role="button"
+              class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
+              aria-haspopup="true"
+              type="Button"
+              part="menu-item"
+              has-border={true}
+              icon-end={true}
+              label={region.title}
+              {...{ "is-nav-item": "" }}>
+            </UDExMastheadMenuItem>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/MastheadItem.ts

@@ -7,21 +7,18 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/world.js";
 import type UDExAvatar from "./Avatar.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+import MastheadItemTemplate from "./MastheadItemTemplate.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -94,7 +91,7 @@ type UDExMastheadDropdownEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   languageAware: true,
   styles: MastheadItemCss,
   template: MastheadItemTemplate,

package/src/MastheadItemTemplate.tsx

@@ -0,0 +1,178 @@
+import type UDExMastheadItem from "./MastheadItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExBadge from "./Badge.js";
+import arrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import worldIcon from "@ui5/webcomponents-icons/dist/world.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+
+export default function MastheadItemTemplate(this: UDExMastheadItem) {
+  if (this.hasHref) {
+    return link.call(this);
+  }
+  if (this.isProfileBtn) {
+    return profileButton.call(this);
+  }
+  return button.call(this);
+}
+
+function link(this: UDExMastheadItem) {
+  return (
+    <>
+      <a
+        id={this._id}
+        class={this.additionalClass}
+        role={this.accessibleRoleName as AriaRole}
+        aria-label={this.accessibleLabel}
+        target={this.target}
+        href={this.href}
+        aria-describedby={this.ariaDescribedBy}
+        onClick={this.handleItemClick as any}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        tabindex={0}>
+        {content.call(this)}
+        {badge.call(this)}
+      </a>
+      {this.isTargetBlank && (
+        <span id="new-win-desc" class="udex-masthead-hidden-text">
+          {this.openInNewWindowText}
+        </span>
+      )}
+    </>
+  );
+}
+
+function profileButton(this: UDExMastheadItem) {
+  return (
+    <>
+      <button
+        class={`udex-masthead-item__btn udex-masthead-item__profile-btn ${this.additionalClass}`}
+        id={this._id}
+        tabindex={0}
+        aria-expanded={this.buttonAriaExpanded}
+        aria-describedby={this.ariaDescribedBy}
+        aria-controls={`${this._id}_dropdown`}
+        aria-label={this.accessibleLabel}
+        onKeyDown={this.handleKeyDown}
+        onClick={this.handleItemClick as any}
+        onclick-default={this.handleItemClick}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}>
+        {content.call(this)}
+        {badge.call(this)}
+      </button>
+      {dropdown.call(this)}
+    </>
+  );
+}
+
+function button(this: UDExMastheadItem) {
+  return (
+    <>
+      <button
+        role={this.accessibleRoleName as AriaRole}
+        id={this._id}
+        class={`udex-masthead-item__btn ${this.additionalClass}`}
+        tabindex={0}
+        aria-expanded={this.buttonAriaExpanded}
+        aria-controls={`${this._id}_dropdown`}
+        aria-describedby={this.ariaDescribedBy}
+        aria-label={this.accessibleLabel}
+        onKeyDown={this.handleKeyDown}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onClick={this.handleItemClick as any}>
+        {content.call(this)}
+        {badge.call(this)}
+      </button>
+      {dropdown.call(this)}
+    </>
+  );
+}
+
+function content(this: UDExMastheadItem) {
+  if (this.icon) {
+    return (
+      <UI5Icon
+        class="udex-masthead-item__icon"
+        name={this.icon}
+        show-tooltip={this.iconAltText}
+        accessible-name={this.iconAltText}
+        mode={IconMode.Decorative}>
+      </UI5Icon>
+    );
+  }
+
+  if (this.image) {
+    return (
+      <>
+        {this.imageLoadError ? (
+          <UI5Icon
+            class="udex-masthead-item__icon"
+            name={worldIcon}
+            mode={IconMode.Decorative}>
+          </UI5Icon>
+        ) : (
+          <div class="udex-masthead-item__image-wrap">
+            <img
+              class="udex-masthead-item__image"
+              id={`${this._id}_image-alt`}
+              src={this.image}
+              aria-hidden={this.isCountrySelectorBtn}
+              alt={this.imageAlt}
+              onError={this.handleImageError}
+            />
+          </div>
+        )}
+        {this.imageAlt && (
+          <span id="image-desc" class="udex-masthead-hidden-text">
+            {this.imageAlt}
+          </span>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <span class="udex-masthead-item__text">
+      <slot></slot>
+      {this.hasArrowDown && (
+        <UI5Icon
+          class="udex-masthead-item__dropdown-icon"
+          name={arrowDownIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      )}
+    </span>
+  );
+}
+
+function dropdown(this: UDExMastheadItem) {
+  return this.isDropdownOpened ? (
+    <div
+      class="udex-masthead-item__dropdown"
+      id={`${this._id}_dropdown`}
+      onKeyDown={this.handleKeyDown}
+      onFocusOut={this.handleFocusout}>
+      <div class="udex-masthead-item__dropdown-holder">
+        <slot name="dropdown"></slot>
+      </div>
+    </div>
+  ) : (
+    <div id={`${this._id}_dropdown`}></div>
+  );
+}
+
+function badge(this: UDExMastheadItem) {
+  return this.numberBadge ? (
+    <UDExBadge
+      class="udex-masthead-item__badge"
+      type={UDExTypeBadgeDesign.Number}
+      numberDesign={UDExNumberBadgeDesign.Red}
+      size={UDExSizeBadgeDesign.Small}>
+      {this.numberBadge}
+    </UDExBadge>
+  ) : undefined;
+}

package/src/MastheadMenu.ts

@@ -1,7 +1,7 @@
 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 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 Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -11,11 +11,9 @@ import "@ui5/webcomponents-icons/dist/action.js";
 import {
   isTabNext, isTabPrevious, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
-import UDExDivider from "./Divider.js";
-import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+import MastheadMenuTemplate from "./MastheadMenuTemplate.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
@@ -31,6 +29,7 @@ export type Item = {
   title: string;
   url?: string;
   externalLink: boolean;
+  badge?: string;
   isDivider?: boolean;
   subItems?: Item[];
 };
@@ -74,10 +73,10 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-menu",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadMenuCss,
   template: MastheadMenuTemplate,
-  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem, UDExDivider],
+  dependencies: [Icon, UDExMastheadMenuItem],
 })
 
 /**

package/src/MastheadMenuItem.ts

@@ -1,20 +1,16 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/action.js";
-
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
 import { UDExTarget } from "./types/common.js";
 import translate from "./utils/translate.js";
 
-import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
+import MastheadMenuItemTemplate from "./MastheadMenuItemTemplate.js";
 
 // Styles
 import MastheadMenuItemCss from "./generated/themes/MastheadMenuItem.css.js";
@@ -45,7 +41,7 @@ export enum UDExItemType {
 @customElement({
   tag: "udex-masthead-menu-item",
   languageAware: true,
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadMenuItemCss,
   template: MastheadMenuItemTemplate,
   dependencies: [Icon],

package/src/MastheadMenuItemTemplate.tsx

@@ -0,0 +1,123 @@
+import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExBadge from "./Badge.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+import actionIcon from "@ui5/webcomponents-icons/dist/action.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import type { Booleanish } from "@ui5/webcomponents-base/thirdparty/preact/jsx.js";
+
+export default function MastheadMenuItemTemplate(this: UDExMastheadMenuItem) {
+  if (this.isActive) {
+    return activeItem.call(this);
+  }
+  if (this.isButtonType) {
+    return buttonItem.call(this);
+  }
+  return spanItem.call(this);
+}
+
+function activeItem(this: UDExMastheadMenuItem) {
+  return (
+    <>
+      <a
+        class={`udex-masthead-menu-item ${this.rootClass}`}
+        aria-describedby={this.ariaDescribedby || undefined}
+        role={this.accessibleRoleText as AriaRole}
+        href={this.url}
+        part={this.partAttr}
+        target={this.targetLink}
+        tabindex={Number(this._tabIndex)}>
+        {this.iconStart && arrowLeft()}
+        <span class={this.labelClass}>
+          {label.call(this)}
+        </span>
+        {this.iconEnd && arrowRight()}
+      </a>
+      {this.externalLink && (
+        <span id="new-win-desc" class="udex-masthead-hidden-text">
+          {this.openInNewWindowText}
+        </span>
+      )}
+      {this.badge && (
+        <UDExBadge
+          class="udex-masthead-menu-item-badge"
+          part="badge"
+          type={UDExTypeBadgeDesign.Number}
+          number-design={UDExNumberBadgeDesign.Blue}
+          size={UDExSizeBadgeDesign.Small}>
+          {this.badge}
+        </UDExBadge>
+      )}
+    </>
+  );
+}
+
+function buttonItem(this: UDExMastheadMenuItem) {
+  return (
+    <button
+      {...{ "_id": this.id }}
+      part="menu-item-button"
+      class={`udex-masthead-menu-item ${this.rootClass}`}
+      aria-label={this._accessibleName}
+      aria-haspopup={this.ariaHasPopup as Booleanish}
+      role={this.accessibleRoleText as AriaRole}
+      tabindex={Number(this._tabIndex)}>
+      {this.iconStart && arrowLeft()}
+      {this.label}
+      {this.iconEnd && arrowRight()}
+    </button>
+  );
+}
+
+function spanItem(this: UDExMastheadMenuItem) {
+  return (
+    <span class={`udex-masthead-menu-item ${this.rootClass}`} part="menu-item">
+      {this.iconStart && arrowLeft()}
+      {this.label}
+      {this.iconEnd && arrowRight()}
+    </span>
+  );
+}
+
+function label(this: UDExMastheadMenuItem) {
+  return this.externalLink ? (
+    <>
+      {this.leadingWordsOfLabel}
+      <span class="udex-masthead-menu-item__text-with-icon">
+        {this.lastWordOfLabel}
+        <UI5Icon
+          class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action"
+          name={actionIcon}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      </span>
+    </>
+  ) : (
+    <span>{this.label}</span>
+  );
+}
+
+function arrowLeft() {
+  return (
+    <UI5Icon
+      class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left"
+      part="left"
+      name={slimArrowLeftIcon}
+      mode={IconMode.Decorative}>
+    </UI5Icon>
+  );
+}
+
+function arrowRight() {
+  return (
+    <UI5Icon
+      class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right"
+      part="right"
+      name={slimArrowRightIcon}
+      mode={IconMode.Decorative}>
+    </UI5Icon>
+  );
+}