@sapudex/web-components 0.224.0 → 0.226.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": "0.224.0",
+  "version": "0.226.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1276,6 +1276,11 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines id (or many ids) of the elements that contain the ARIA name of the component.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "accessible-role",
               "description": "Allows setting a custom role.",
@@ -1446,6 +1451,11 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines id (or many ids) of the elements that contain the ARIA name of the component.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "accessible-role",
                 "description": "Allows setting a custom role.",
@@ -3167,7 +3177,7 @@
         },
         {
           "name": "udex-masthead-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **dropdown** - Slot for the dropdown\n- **default** - Slot for any content",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **dropdown-closed** - Fires when item is clicked\n- **dropdown-opened** - Fires when item is clicked\n\n### **Slots:**\n - **dropdown** - Slot for the dropdown\n- **default** - Slot for any content",
           "doc-url": "",
           "attributes": [
             {
@@ -3249,6 +3259,14 @@
             {
               "name": "item-click",
               "description": "Fires when item is clicked"
+            },
+            {
+              "name": "dropdown-closed",
+              "description": "Fires when item is clicked"
+            },
+            {
+              "name": "dropdown-opened",
+              "description": "Fires when item is clicked"
             }
           ],
           "js": {
@@ -3328,6 +3346,14 @@
               {
                 "name": "item-click",
                 "description": "Fires when item is clicked"
+              },
+              {
+                "name": "dropdown-closed",
+                "description": "Fires when item is clicked"
+              },
+              {
+                "name": "dropdown-opened",
+                "description": "Fires when item is clicked"
               }
             ]
           }
@@ -3481,7 +3507,7 @@
         },
         {
           "name": "udex-masthead-shell",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **search-close-click** - Fired event when the user clicks the search close button.\n- **search-opened** - Fired event when the search panel is opened.\n- **search-closed** - Fired event when the search panel is closed.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **support-click** - Fired event when the user clicks the support button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar\n- **support** - Slot for support",
           "doc-url": "",
           "attributes": [
             {
@@ -3561,7 +3587,8 @@
               "description": "Slot for 'Explore SAP' menu"
             },
             { "name": "cart", "description": "Slot for cart menu" },
-            { "name": "profile", "description": "Slot for avatar" }
+            { "name": "profile", "description": "Slot for avatar" },
+            { "name": "support", "description": "Slot for support" }
           ],
           "events": [
             {
@@ -3576,10 +3603,26 @@
               "name": "search-click",
               "description": "Fired event when the user clicks the search button trigger."
             },
+            {
+              "name": "search-close-click",
+              "description": "Fired event when the user clicks the search close button."
+            },
+            {
+              "name": "search-opened",
+              "description": "Fired event when the search panel is opened."
+            },
+            {
+              "name": "search-closed",
+              "description": "Fired event when the search panel is closed."
+            },
             {
               "name": "cart-click",
               "description": "Fired event when the user clicks the cart button trigger."
             },
+            {
+              "name": "support-click",
+              "description": "Fired event when the user clicks the support button trigger."
+            },
             {
               "name": "profile-click",
               "description": "Fired event when the user clicks the profile button trigger."
@@ -3673,10 +3716,26 @@
                 "name": "search-click",
                 "description": "Fired event when the user clicks the search button trigger."
               },
+              {
+                "name": "search-close-click",
+                "description": "Fired event when the user clicks the search close button."
+              },
+              {
+                "name": "search-opened",
+                "description": "Fired event when the search panel is opened."
+              },
+              {
+                "name": "search-closed",
+                "description": "Fired event when the search panel is closed."
+              },
               {
                 "name": "cart-click",
                 "description": "Fired event when the user clicks the cart button trigger."
               },
+              {
+                "name": "support-click",
+                "description": "Fired event when the user clicks the support button trigger."
+              },
               {
                 "name": "profile-click",
                 "description": "Fired event when the user clicks the profile button trigger."
@@ -4252,6 +4311,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "\"on\" | \"off\"" }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -4321,6 +4385,11 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "\"on\" | \"off\"" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -6660,6 +6729,11 @@
               "name": "sticky-column",
               "description": "Sticks the first column to the left of the table.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "custom-columns",
+              "description": "Defines the rows of the table.",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -6726,6 +6800,11 @@
                 "name": "sticky-column",
                 "description": "Sticks the first column to the left of the table.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "custom-columns",
+                "description": "Defines the rows of the table.",
+                "value": { "type": "string" }
               }
             ],
             "events": []
@@ -7396,6 +7475,11 @@
               "description": "Defines if the text-field is active",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "string", "default": "\"off\"" }
+            },
             {
               "name": "direction",
               "description": "Defines direction of the input.",
@@ -7491,6 +7575,11 @@
                 "description": "Defines if the text-field is active",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "direction",
                 "description": "Defines direction of the input.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.224.0",
+  "version": "0.226.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/FilterMenu.hbs

@@ -4,6 +4,7 @@
     @click="{{handleTriggerClick}}"
     @keydown="{{handleTriggerKeydown}}"
     aria-label="{{triggerButtonAccessibleName}}"
+    aria-labelledby="{{accessibleNameRef}}"
     aria-expanded="{{_open}}"
     aria-haspopup="true"
     role="{{triggerAccessibleRole}}"

package/src/FilterMenu.ts

@@ -278,6 +278,15 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property()
     accessibleName!: string;
 
+  /**
+   * Defines id (or many ids) of the elements that contain the ARIA name of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleNameRef!: string;
+
   /**
    * Allows setting a custom role.
    * @default "None"

package/src/HeroBanner.ts

@@ -89,7 +89,7 @@ class UDExHeroBanner extends UI5Element {
    * @public
    */
   @property({ type: String })
-  backgroundColor?: string;
+    backgroundColor?: string;
 
   /**
    * Allows control over the background-image to set css gradient.

package/src/MastheadItem.hbs

@@ -32,7 +32,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </span>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{else}}
@@ -48,7 +48,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{/if}}

package/src/MastheadItem.ts

@@ -10,7 +10,9 @@ 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 { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.js";
+import {
+  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT,
+} from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -21,6 +23,12 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+export enum DropdownItemAction {
+  Open = "Open",
+  Close = "Close",
+  ClickOutside = "Click Outside",
+}
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -51,6 +59,29 @@ export type ItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
+export type DropdownEventDetail = {
+  title: string,
+  action: DropdownItemAction,
+}
+
+export const DropdownBaseEventDetail = {
+  detail: {
+    title: { type: String },
+    action: { type: DropdownItemAction },
+  },
+};
+
+export const ItemBaseEvent = {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: Event,
+    },
+  },
+};
+
 /**
  * @class
  *
@@ -86,16 +117,23 @@ export type ItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("item-click", ItemBaseEvent)
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-closed", DropdownBaseEventDetail)
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-opened", DropdownBaseEventDetail)
 
 class UDExMastheadItem extends UI5Element implements IMastheadItem {
   /**
@@ -258,6 +296,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
+  _isEscPress!: boolean;
 
   static i18nBundle: I18nBundle;
 
@@ -278,10 +317,27 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
       this.setDropdownInsetStart();
     }
+
+    this.handleOutsideClick();
+    this._isEscPress = false;
+  }
+
+  handleOutsideClick(): void {
+    document.addEventListener("click", (e: Event) => {
+      const target = e.target as HTMLElement;
+      const item = target.closest("[udex-masthead-item]");
+      if (item !== this && !this.isMobile) {
+        if (this.isDropdownOpened) {
+          this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.ClickOutside);
+        }
+
+        this.selected = false;
+      }
+    });
   }
 
   handleFocusout(e: FocusEvent): void {
-    if (e.relatedTarget === null) {
+    if (e.relatedTarget === null || this._isEscPress) {
       return;
     }
 
@@ -302,6 +358,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
+    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -311,32 +368,56 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
+    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }
 
   handleItemClick(e: Event): void {
+    this.fireItemClickEvent(e);
     this.handleSelectedChange();
+    this.fireDropdownEvents();
+  }
 
+  handleSelectedChange(): void {
+    this.selected = this.isMobile ? true : !this.selected;
+  }
+
+  fireDropdownEvents(): void {
+    if (this.hasDropdownSlot) {
+      const { Open, Close } = DropdownItemAction;
+      const action = this.selected ? Open : Close;
+      if (this.selected) {
+        this.fireDropdownOpenEvent(this.eventItemTitle, action);
+      } else {
+        this.fireDropdownCloseEvent(this.eventItemTitle, action);
+      }
+    }
+  }
+
+  fireDropdownCloseEvent(title: string, action: DropdownItemAction): void {
+    this.fireEvent<DropdownEventDetail>("dropdown-closed", { title, action });
+  }
+
+  fireDropdownOpenEvent(title: string, action: DropdownItemAction): void {
+    this.fireEvent<DropdownEventDetail>("dropdown-opened", { title, action });
+  }
+
+  fireItemClickEvent(e: Event): void {
     this.fireEvent<ItemClickEventDetail>("item-click", {
       item: this,
       originalEvent: e,
     });
   }
 
-  handleSelectedChange(): void {
-    this.selected = this.isMobile ? true : !this.selected;
-  }
-
   setDropdownInsetStart(): void {
     const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
-      const dropdownHolder = this.getDomElement(".udex-masthead-item__dropdown-holder");
       const marginInlineStart = this.calculateMarginInlineStart(rect);
 
-      if (marginInlineStart !== null && dropdownHolder) {
-        dropdownHolder.style.marginInlineStart = `${marginInlineStart - 3}px`;
+      if (marginInlineStart !== null) {
+        dropdown.style.marginInlineStart = `${marginInlineStart - 3}px`;
       }
     }
   }
@@ -376,6 +457,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
+    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -398,8 +480,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     const iconClass = (this.icon || this.image) ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
     const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
+    const supportClass = this.isSupportBtn ? "udex-masthead-item__button--support" : "";
     const countrySelectorClass = this.isCountrySelectorBtn ? "udex-masthead-item__button--country-selector" : "";
-    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass}`.trim();
+    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass} ${supportClass}`.trim();
   }
 
   get profileAvatar(): UDExAvatar {
@@ -444,7 +527,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.join(" ").trim();
   }
 
-  get showDropdown(): boolean {
+  get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
 
@@ -468,12 +551,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "countrySelector";
   }
 
-  get accessibleLabel(): string {
-    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+  get isCartBtn(): boolean {
+    return this.getAttribute("slot") === "cart";
   }
 
-  get isMenuItem(): boolean {
-    return true;
+  get isSupportBtn(): boolean {
+    return this.getAttribute("slot") === "support";
+  }
+
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
   get isMobile(): boolean {
@@ -487,6 +574,30 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get openInNewWindowText(): string {
     return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
   }
+
+  get eventItemTitle(): string {
+    if (this.accessibleName) {
+      return this.accessibleName.trim();
+    }
+
+    if (this.isCartBtn) {
+      return UDExMastheadItem.i18nBundle.getText(CART);
+    }
+
+    if (this.isProfileBtn) {
+      return UDExMastheadItem.i18nBundle.getText(PROFILE);
+    }
+
+    if (this.isCountrySelectorBtn) {
+      return UDExMastheadItem.i18nBundle.getText(COUNTRY_SELECTOR);
+    }
+
+    if (this.isSupportBtn) {
+      return UDExMastheadItem.i18nBundle.getText(SUPPORT);
+    }
+
+    return this.firstChild?.nodeValue?.trim() || "";
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.hbs

@@ -34,7 +34,10 @@
 {{/inline}}
 
 {{#*inline "list"}}
-    <ul class="udex-masthead-menu__list" aria-labelledby="category-{{categoryId}}">
+    <ul
+        class="udex-masthead-menu__list"
+        aria-labelledby="category-{{categoryId}}"
+        category="{{this.category}}">
         {{#each this.items}}
             <li>
                 {{#if this.url}}

package/src/MastheadMenu.ts

@@ -8,7 +8,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
-import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 
@@ -35,6 +35,7 @@ export type MenuItem = {
 };
 
 export type MenuItemClickEventDetail = {
+  category?: string,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
 }
@@ -72,6 +73,9 @@ export type MenuItemClickEventDetail = {
  */
 @event("menu-item-click", {
   detail: {
+    category: {
+      type: String,
+    },
     item: {
       type: HTMLElement,
     },
@@ -130,10 +134,17 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: Event): void {
-    this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
-      item: e.target as UDExMastheadMenuItem,
-      originalEvent: e,
-    });
+    const item = e.target as UDExMastheadMenuItem;
+    const { url, type } = item;
+
+    if (url?.length) {
+      const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
+      this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
+        item,
+        originalEvent: e,
+        ...(type !== ItemType.Heading && { category: list?.getAttribute("category") || "" }),
+      });
+    }
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {

package/src/MastheadMobileMenu.hbs

@@ -148,7 +148,7 @@
     {{#if _category.url}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
-                @click="{{../handleMobileItemEvent}}"
+                @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
                 has-border>
@@ -159,7 +159,7 @@
         {{#if this.url}}
             <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
                 <udex-masthead-menu-item
-                    @click="{{../handleMobileItemEvent}}"
+                    @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
                     has-border>