@sapudex/web-components 2.20.1 → 2.22.0

package/src/FooterTemplate.tsx

@@ -150,9 +150,7 @@ export default function FooterTemplate(this: Footer) {
           )}
         </div>
 
-        {this.isContactContainerVisible && (
-          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
-        )}
+        <UDExDivider class={`${rootClass}__divider`} accessibleRole="none"></UDExDivider>
 
         {this._shouldRenderMobileMenu ? (
           mobileNavigation.call(this, rootClass)
@@ -160,20 +158,20 @@ export default function FooterTemplate(this: Footer) {
           desktopNavigation.call(this, rootClass)
         )}
 
-        <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+        <UDExDivider class={`${rootClass}__divider`} accessibleRole="none"></UDExDivider>
 
         <div className={`${rootClass}__copyright`}>
           {this.isChineseLang && (
             <span className={`${rootClass}__copyright-chinese-text`}>
               <a
                 href={this.chineseIcpNumberLink}
-                title={this.chineseICPNumber}
+                title={this.chineseICPNumberText}
                 className={`${rootClass}__copyright-chinese-link`}
                 target="_blank"
                 rel="noopener noreferrer">
-                {this.chineseICPNumber}
+                {this.chineseICPNumberText}
               </a>
-              {this.chineseSecurityNetworkNumber}
+              {this.chineseSecurityNetworkNumberText}
             </span>
           )}
           <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
@@ -228,7 +226,6 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__quick-links`}
                     href={link.url}
                     data-id={link.id}
                     onClick={this._onQuickLinksClick}
@@ -238,9 +235,9 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 </li>
               ))}
             </ul>
-            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__quick-links`}>
+            <h6 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__quick-links`}>
               {this._quickLinksTitle}
-            </h3>
+            </h6>
           </UDExAccordionItem>
         </>
       )}
@@ -253,7 +250,6 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__footer__trending`}
                     href={link.url}
                     data-id={link.id}
                     onClick={this._onTrendingClick}
@@ -263,9 +259,9 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 </li>
               ))}
             </ul>
-            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__trending`}>
+            <h6 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__trending`}>
               {this._trendingTitle}
-            </h3>
+            </h6>
           </UDExAccordionItem>
         </>
       )}
@@ -278,7 +274,6 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__about`}
                     href={link.url}
                     data-id={link.id}
                     onClick={this._onAboutSapClick}
@@ -288,9 +283,9 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 </li>
               ))}
             </ul>
-            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__about`}>
+            <h6 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__about`}>
               {this._aboutSapTitle}
-            </h3>
+            </h6>
           </UDExAccordionItem>
         </>
       )}
@@ -303,7 +298,6 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__site-information`}
                     href={link.url}
                     data-id={link.id}
                     onClick={this._onSiteInformationClick}
@@ -313,9 +307,9 @@ function mobileNavigation(this: Footer, rootClass: string) {
                 </li>
               ))}
             </ul>
-            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__site-information`}>
+            <h6 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__site-information`}>
               {this._siteInformationTitle}
-            </h3>
+            </h6>
           </UDExAccordionItem>
         </>
       )}
@@ -328,16 +322,15 @@ function desktopNavigation(this: Footer, rootClass: string) {
     <div className={`${rootClass}__links`}>
       {this.quickLinksArray.length > 0 && (
         <div className={`${rootClass}__links-group ${rootClass}__quick-links`}>
-          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__quick-links`}>
+          <h6 className={`${rootClass}__links-item`} id={`${rootClass}__quick-links`}>
             {this._quickLinksTitle}
-          </h3>
-          <nav aria-labelledby={`${rootClass}__quick-links`}>
-            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+          </h6>
+          <nav>
+            <ul aria-labelledby={`${rootClass}__quick-links`} className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
               {this.quickLinksArray.map((link, index) => (
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__quick-links`}
                     data-id={link.id}
                     href={link.url}
                     onClick={this._onQuickLinksClick}
@@ -352,16 +345,15 @@ function desktopNavigation(this: Footer, rootClass: string) {
       )}
       {this.trendingLinksArray.length > 0 && (
         <div className={`${rootClass}__links-group ${rootClass}__trending-links`}>
-          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__trending`}>
+          <h6 className={`${rootClass}__links-item`} id={`${rootClass}__trending`}>
             {this._trendingTitle}
-          </h3>
-          <nav aria-labelledby={`${rootClass}__trending`}>
-            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+          </h6>
+          <nav>
+            <ul aria-labelledby={`${rootClass}__trending`} className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
               {this.trendingLinksArray.map((link, index) => (
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__footer__trending`}
                     data-id={link.id}
                     href={link.url}
                     onClick={this._onTrendingClick}
@@ -376,16 +368,15 @@ function desktopNavigation(this: Footer, rootClass: string) {
       )}
       {this.aboutLinksArray.length > 0 && (
         <div className={`${rootClass}__links-group ${rootClass}__about-links`}>
-          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__about`}>
+          <h6 className={`${rootClass}__links-item`} id={`${rootClass}__about`}>
             {this._aboutSapTitle}
-          </h3>
-          <nav aria-labelledby={`${rootClass}__about`}>
-            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+          </h6>
+          <nav>
+            <ul aria-labelledby={`${rootClass}__about`} className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
               {this.aboutLinksArray.map((link, index) => (
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__about`}
                     data-id={link.id}
                     href={link.url}
                     onClick={this._onAboutSapClick}
@@ -400,16 +391,15 @@ function desktopNavigation(this: Footer, rootClass: string) {
       )}
       {this.siteInformationLinksArray.length > 0 && (
         <div className={`${rootClass}__links-group ${rootClass}__site-information-links`}>
-          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__site-information`}>
+          <h6 className={`${rootClass}__links-item`} id={`${rootClass}__site-information`}>
             {this._siteInformationTitle}
-          </h3>
-          <nav aria-labelledby={`${rootClass}__site-information`}>
-            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+          </h6>
+          <nav>
+            <ul aria-labelledby={`${rootClass}__site-information`} className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
               {this.siteInformationLinksArray.map((link, index) => (
                 <li key={index}>
                   <a
                     target={link.target}
-                    aria-describedby={`${rootClass}__site-information`}
                     data-id={link.id}
                     href={link.url}
                     onClick={this._onSiteInformationClick}

package/src/ImageGridCloud.ts

@@ -0,0 +1,188 @@
+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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridCloudTemplate from "./ImageGridCloudTemplate.js";
+import type UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+
+// Styles
+import ImageGridCloudCss from "./generated/themes/ImageGridCloud.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+export enum UDExImageGridCloudVariable {
+  itemGapL = "--udex-image-grid-cloud-item-gap-l",
+  itemGapS = "--udex-image-grid-cloud-item-gap-s",
+  itemWidthL = "--udex-image-grid-cloud-item-width-l",
+  itemWidthS = "--udex-image-grid-cloud-item-width-s",
+  itemBorderWidth = "--udex-image-grid-cloud-item-border-width",
+}
+
+export enum UDExImageGridCloudSize {
+  Small = "Small",
+  Large = "Large",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloud.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-cloud",
+  renderer: jsxRenderer,
+  styles: ImageGridCloudCss,
+  template: ImageGridCloudTemplate,
+})
+
+class UDExImageGridCloud extends UI5Element {
+  /**
+   * Grayscale mode enhances visual harmony and can be used for minimal,
+   * professional layouts or to de-emphasize logos.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: Boolean })
+    grayscale?: boolean;
+
+  /**
+   * Defines the size of the items.
+   *
+   * @default "Large"
+   * @private
+   */
+  @property({ type: String })
+    size: `${UDExImageGridCloudSize}` = UDExImageGridCloudSize.Large;
+
+  /**
+   * Slot for image grid cloud items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExImageGridCloudItem>;
+
+  _rootId = "udex-image-grid-cloud";
+  _rowClassName = "udex-image-grid-cloud__row";
+  _container!: HTMLElement;
+  _items: Array<Element> = [];
+
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this.handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._container = this.containerElement;
+    this._items = this.itemsElements;
+    this.renderLayout();
+  }
+
+  handleResize(): void {
+    this.renderLayout();
+  }
+
+  renderLayout() {
+    if (this.isContainerEmpty) {
+      return;
+    }
+
+    const ITEM_WIDTH = this.itemWidth + this.itemHorizontalBorderWidth;
+    const GAP = this.itemGap;
+
+    const existingRows = Array.from(this._container.querySelectorAll(`.${this._rowClassName}`));
+    existingRows.forEach(row => row.remove());
+
+    const containerWidth = this._container.clientWidth;
+    const itemsPerRow = Math.max(Math.floor((containerWidth + GAP) / (ITEM_WIDTH + GAP)) || 0, 1);
+
+    let index = 0;
+    let rowIndex = 0;
+
+    while (index < this._items.length) {
+      const count = rowIndex % 2 === 0 ? itemsPerRow : Math.max(itemsPerRow - 1, 1);
+      const row = document.createElement("div");
+      row.className = this._rowClassName;
+
+      for (let i = 0; i < count && index < this._items.length; i++, index++) {
+        row.appendChild(this._items[index]);
+      }
+
+      this._container.appendChild(row);
+      rowIndex++;
+    }
+  }
+
+  _getVariableValue(variableName: string): string {
+    return window.getComputedStyle(this).getPropertyValue(`${variableName}`);
+  }
+
+  get itemWidth(): number {
+    const variableName = this.isSmallSize || this.isMobile
+      ? UDExImageGridCloudVariable.itemWidthS
+      : UDExImageGridCloudVariable.itemWidthL;
+    return parseInt(this._getVariableValue(variableName));
+  }
+
+  get itemGap(): number {
+    const variableName = this.isSmallSize || this.isMobile
+      ? UDExImageGridCloudVariable.itemGapS
+      : UDExImageGridCloudVariable.itemGapL;
+    return parseInt(this._getVariableValue(variableName));
+  }
+
+  get itemHorizontalBorderWidth(): number {
+    const border = parseInt(this._getVariableValue(UDExImageGridCloudVariable.itemBorderWidth));
+    return border * 2;
+  }
+
+  get isSmallSize(): boolean {
+    return this.size === UDExImageGridCloudSize.Small;
+  }
+
+  get containerElement(): HTMLElement {
+    return this.shadowRoot!.getElementById(this._rootId)!;
+  }
+
+  get itemsElements(): Array<Element> {
+    return Array.from(this.containerElement.children);
+  }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get isContainerEmpty(): boolean {
+    return !this._container || this._items.length === 0;
+  }
+}
+
+UDExImageGridCloud.define();
+
+export default UDExImageGridCloud;

package/src/ImageGridCloudItem.ts

@@ -0,0 +1,57 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+import ImageGridCloudItemTemplate from "./ImageGridCloudItemTemplate.js";
+
+// Styles
+import ImageGridCloudItemCss from "./generated/themes/ImageGridCloudItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloudItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-cloud-item",
+  renderer: jsxRenderer,
+  styles: ImageGridCloudItemCss,
+  template: ImageGridCloudItemTemplate,
+})
+
+class UDExImageGridCloudItem extends UI5Element {
+  /**
+   * Defines the source URL
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    src!: string;
+
+  /**
+   * Defines image alt text
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    alt!: string;
+}
+
+UDExImageGridCloudItem.define();
+
+export default UDExImageGridCloudItem;

package/src/ImageGridCloudItemTemplate.tsx

@@ -0,0 +1,11 @@
+import type ImageGridCloudItem from "./ImageGridCloudItem.js";
+
+export default function ImageGridCloudItemTemplate(this: ImageGridCloudItem) {
+  return (
+    <img
+      class="udex-image-grid-cloud-item-img"
+      src={this.src}
+      alt={this.alt}
+    />
+  );
+}

package/src/ImageGridCloudTemplate.tsx

@@ -0,0 +1,16 @@
+import type ImageGridCloud from "./ImageGridCloud.js";
+import UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+
+export default function ImageGridCloudTemplate(this: ImageGridCloud) {
+  return (
+    <div id="udex-image-grid-cloud">
+      {this.items.map(({ src, alt }) =>
+        <UDExImageGridCloudItem
+          class="udex-image-grid-cloud__item"
+          src={src}
+          alt={alt}>
+        </UDExImageGridCloudItem>
+      )}
+    </div>
+  );
+}

package/src/ImageGridTicker.ts

@@ -57,6 +57,7 @@ type UDExImageGridTickerPlayBtnClickEventDetail = {
  * Fired event when the user click on a play/paused button.
  *
  * @public
+ * @param {boolean} isPaused - Indicates whether the animation is paused.
  */
 @event("play-button-click", { bubbles: true })
 
@@ -78,12 +79,11 @@ class UDExImageGridTicker extends UI5Element {
    * Grayscale mode enhances visual harmony and can be used for minimal,
    * professional layouts or to de-emphasize logos.
    *
-   * @default false
+   * @default undefined
    * @public
    */
   @property({ type: Boolean })
-    grayscale = false;
-
+    grayscale?: boolean;
   /**
    * Indicates whether the image grid ticker is scrollable.
    *

package/src/LinkListItem.ts

@@ -42,6 +42,7 @@ type UDExListLinkItemClickEventDetail = {
 /**
  * Triggered when the user clicks on an item.
  * @public
+ * @param {Event} originalEvent the original event object
  */
 @event("item-click", { bubbles: true })
 

package/src/List.ts

@@ -63,6 +63,9 @@ type UDExListSelectionChangeEventDetail = {
    * Fired when selection is changed by user interaction
    *
    * @public
+   * @param {Array<UDExListItemBase>} listItems All items inside the list
+   * @param {Array<UDExListItemBase>} selectedItems Currently selected items
+   * @param {HTMLElement} item The item that triggered the event
    */
 @event("selection-change", { bubbles: true })
 

package/src/ListGroupHeader.ts

@@ -48,6 +48,7 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
    * Fired when selectable group header is pressed
    *
    * @public
+   * @param {HTMLElement} item The pressed group header item
    */
 @event("header-press", { bubbles: true })
 

package/src/ListItem.ts

@@ -78,12 +78,14 @@ type UDExListItemItemPressEventDetail = {
  * Fired event when the user click on a list item.
  *
  * @public
+ * @param {boolean} selected Indicates whether the item is selected or not
  */
 @event("item-press", { bubbles: true })
 /**
  * Fired event when the user focuses on a list item.
  *
  * @public
+ * @param {HTMLElement} item The focused list item
  */
 @event("item-focus", { bubbles: true })
 

package/src/ListItemBase.ts

@@ -34,12 +34,16 @@ type UDExListItemBaseEventDetail = {
  * Fired event when the user click on a first icon.
  *
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  */
 @event("first-icon-click", { bubbles: true })
 /**
  * Fired event when the user click on a second icon.
  *
  * @public
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  */
 @event("second-icon-click", { bubbles: true })
 

package/src/ListSelectAll.ts

@@ -49,6 +49,7 @@ type UDExListSelectAllSelectAllEventDetail = {
    * Fired when the user clicks on the Select All header.
    *
    * @public
+   * @param {HTMLElement} item The select all item
    */
 @event("select-all", { bubbles: true })
 

package/src/MastheadCountrySelector.ts

@@ -88,6 +88,12 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fires when region item is clicked
  *
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {Object} item the clicked region item
+ * @param {string} item.title the title of the region
+ * @param {Array} item.countries the countries of the region
+ * @param {AnalyticsName} analyticsName The analytics name for the event
+ * @param {HTMLElement} sourceNode The source node which triggered the event
  */
 @event("region-item-click", { bubbles: true })
 
@@ -95,6 +101,13 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fires when region item is clicked
  *
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {Object} item the clicked country item
+ * @param {string} item.displayTitle the display title of the country
+ * @param {string} item.countryCode the country code of the country
+ * @param {string} item.url the url of the country
+ * @param {AnalyticsName} analyticsName The analytics name for the event
+ * @param {HTMLElement} sourceNode The source node which triggered the event
  */
 @event("country-item-click", { bubbles: true })
 
@@ -102,6 +115,8 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  * Fired event when the user typed to search field.
  *
  * @public
+ * @param {string} value The search value
+ * @param {AnalyticsName} analyticsName The analytics name for the event
  */
 @event("country-selector-search", { bubbles: true })
 

package/src/MastheadItem.ts

@@ -105,6 +105,10 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {Event} originalEvent the original event object
+ * @param {UDExMastheadItem} item the clicked item
+ * @param {AnalyticsName} analyticsName the analytics name
+ * @param {HTMLElement} sourceNode the source node
  */
 @event("item-click", { bubbles: true })
 
@@ -113,6 +117,9 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} title the title of the item
+ * @param {UDExMastheadDropdownItemAction} action the action that caused the event
+ * @param {AnalyticsName} analyticsName the analytics name
  */
 @event("dropdown-closed", { bubbles: true })
 
@@ -121,6 +128,9 @@ type UDExMastheadDropdownEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} title the title of the item
+ * @param {UDExMastheadDropdownItemAction} action the action that caused the event
+ * @param {AnalyticsName} analyticsName the analytics name
  */
 @event("dropdown-opened", { bubbles: true })
 

package/src/MastheadMenu.ts

@@ -77,6 +77,12 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {string} category The category of the clicked menu item
+ * @param {Array<string>} analyticsPath The analytics path for the clicked menu item
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked menu item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {UDExMastheadMenuItem} item The clicked menu item
+ * @param {HTMLElement} sourceNode The source node of the clicked menu item
  */
 @event("menu-item-click", { bubbles: true })
 

package/src/MastheadMobileMenu.ts

@@ -70,6 +70,14 @@ type UDExMastheadMobileMenuExploreClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {PointerEvent | KeyboardEvent} originalEvent The original event object
+ * @param {UDExMastheadMenuItem} item The clicked item
+ * @param {string} [category] The category of the clicked item
+ * @param {boolean} isMobile Indicates whether the click happened in mobile menu
+ * @param {boolean} isBack Indicates whether the clicked item is a back button
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked item
+ * @param {Array<string>} analyticsPath The analytics path for the clicked item
+ * @param {HTMLElement} sourceNode The source node of the clicked item
  */
 @event("item-click", { cancelable: true, bubbles: false })
 
@@ -78,6 +86,9 @@ type UDExMastheadMobileMenuExploreClickEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {PointerEvent | KeyboardEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked item
+ * @param {HTMLElement} sourceNode The source node of the clicked item
  */
 @event("explorer-menu-click", { bubbles: true })