@sapudex/web-components 2.31.0 → 2.32.0

package/dist/messagebundle_en.properties

@@ -105,7 +105,7 @@ AVATAR_TEXT=Avatar
 CALENDAR_ICON=Open Calendar icon
 LIST_ITEM_EDIT_ICON=Edit list item entry
 LIST_ITEM_DELETE_ICON=Delete list item entry
-BACK_BUTTON_LABEL=back button label
+BACK_BUTTON_LABEL=return back
 STATUS_BADGE_TEXT=Status Badge
 STATUS_BADGE_EDIT_TITLE=Click to edit profile
 STATUS_BADGE_INFORMATION_TITLE=Click to open profile information

package/dist/vscode.html-custom-data.json

@@ -2340,7 +2340,7 @@
     },
     {
       "name": "udex-media-player",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n- **videojsReady** - Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>.\n\n### **Methods:**\n - **registerPlugin(name: _string_, plugin: _(...args: any[]) => any_): _void_** - Registers a custom VideoJS plugin to be applied before player initialization.\nMust be called before the component renders.\nFor plugins registered after rendering, use the videojsReady event instead.\n- **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
       "attributes": [
         {
           "name": "options",
@@ -3115,7 +3115,7 @@
     },
     {
       "name": "udex-secondary-navigation",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n- **mobile-menu-opener-click** - The event is triggered on user interaction with the mobile menu opener\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
       "attributes": [
         {
           "name": "mobile-menu-opener-aria-label",
@@ -3930,7 +3930,7 @@
     },
     {
       "name": "udex-tab-navigation",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
       "attributes": [
         {
           "name": "ud-exsize-more-button",
@@ -3947,6 +3947,26 @@
           "description": "Defines the orientation of the tab navigation.",
           "values": [{ "name": "Vertical" }, { "name": "Horizontal" }]
         },
+        {
+          "name": "placement",
+          "description": "Defines the placement of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+          "values": [{ "name": "Start" }, { "name": "End" }]
+        },
+        {
+          "name": "vertical-alignment",
+          "description": "Defines the vertical alignment of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+          "values": [{ "name": "Top" }, { "name": "Center" }]
+        },
+        {
+          "name": "auto-play",
+          "description": "Enables automatic tab switching for Vertical orientation.",
+          "values": []
+        },
+        {
+          "name": "auto-play-interval",
+          "description": "Defines the interval in milliseconds between automatic tab switches.\nApplies only when autoPlay is enabled.",
+          "values": []
+        },
         {
           "name": "icon-without-background",
           "description": "Defines the background color of the component.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -5194,7 +5194,7 @@
         },
         {
           "name": "udex-media-player",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n- **videojsReady** - Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>.\n\n### **Methods:**\n - **registerPlugin(name: _string_, plugin: _(...args: any[]) => any_): _void_** - Registers a custom VideoJS plugin to be applied before player initialization.\nMust be called before the component renders.\nFor plugins registered after rendering, use the videojsReady event instead.\n- **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
           "doc-url": "",
           "attributes": [
             {
@@ -5299,6 +5299,10 @@
             {
               "name": "video75",
               "description": "Fires when 75% of video is watched"
+            },
+            {
+              "name": "videojsReady",
+              "description": "Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>."
             }
           ],
           "js": {
@@ -5398,6 +5402,10 @@
               {
                 "name": "video75",
                 "description": "Fires when 75% of video is watched"
+              },
+              {
+                "name": "videojsReady",
+                "description": "Fires when the VideoJS library is loaded but before the player is created.\nUse this event to register custom VideoJS plugins via\n<code>event.detail.videojs.registerPlugin()</code>."
               }
             ]
           }
@@ -6794,7 +6802,7 @@
         },
         {
           "name": "udex-secondary-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-secondary-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SecondaryNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **heading-click** - The event is triggered on user interaction with a secondary navigation heading\n- **mobile-menu-opener-click** - The event is triggered on user interaction with the mobile menu opener\n\n### **Slots:**\n - **breadcrumbs** - Slot for breadcrumbs.\n- **buttons** - Slot for action buttons.",
           "doc-url": "",
           "attributes": [
             {
@@ -6835,6 +6843,10 @@
             {
               "name": "heading-click",
               "description": "The event is triggered on user interaction with a secondary navigation heading"
+            },
+            {
+              "name": "mobile-menu-opener-click",
+              "description": "The event is triggered on user interaction with the mobile menu opener"
             }
           ],
           "js": {
@@ -6873,6 +6885,10 @@
               {
                 "name": "heading-click",
                 "description": "The event is triggered on user interaction with a secondary navigation heading"
+              },
+              {
+                "name": "mobile-menu-opener-click",
+                "description": "The event is triggered on user interaction with the mobile menu opener"
               }
             ]
           }
@@ -8499,7 +8515,7 @@
         },
         {
           "name": "udex-tab-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
           "doc-url": "",
           "attributes": [
             {
@@ -8526,6 +8542,26 @@
                 "default": "\"Horizontal\""
               }
             },
+            {
+              "name": "placement",
+              "description": "Defines the placement of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+              "value": { "type": "\"Start\" | \"End\"", "default": "\"Start\"" }
+            },
+            {
+              "name": "vertical-alignment",
+              "description": "Defines the vertical alignment of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+              "value": { "type": "\"Top\" | \"Center\"", "default": "\"Top\"" }
+            },
+            {
+              "name": "auto-play",
+              "description": "Enables automatic tab switching for Vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "auto-play-interval",
+              "description": "Defines the interval in milliseconds between automatic tab switches.\nApplies only when autoPlay is enabled.",
+              "value": { "type": "number", "default": "5000" }
+            },
             {
               "name": "icon-without-background",
               "description": "Defines the background color of the component.",
@@ -8536,6 +8572,10 @@
             {
               "name": "default",
               "description": "Defines the tabs and content."
+            },
+            {
+              "name": "footer",
+              "description": "Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs."
             }
           ],
           "events": [
@@ -8565,6 +8605,26 @@
                 "description": "Defines the orientation of the tab navigation.",
                 "value": { "type": "\"Vertical\" | \"Horizontal\"" }
               },
+              {
+                "name": "placement",
+                "description": "Defines the placement of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+                "value": { "type": "\"Start\" | \"End\"" }
+              },
+              {
+                "name": "vertical-alignment",
+                "description": "Defines the vertical alignment of the tab strip relative to the content area.\nApplies to Vertical orientation only.",
+                "value": { "type": "\"Top\" | \"Center\"" }
+              },
+              {
+                "name": "auto-play",
+                "description": "Enables automatic tab switching for Vertical orientation.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "auto-play-interval",
+                "description": "Defines the interval in milliseconds between automatic tab switches.\nApplies only when autoPlay is enabled.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "icon-without-background",
                 "description": "Defines the background color of the component.",

package/package.json

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

package/src/Breadcrumbs.ts

@@ -33,6 +33,12 @@ type UDExBreadcrumbsItemClickEventDetail = {
   ctrlKey?: boolean;
   metaKey?: boolean;
   shiftKey?: boolean;
+  source?: UDExBreadcrumbsClickEventSource;
+}
+
+enum UDExBreadcrumbsClickEventSource {
+  Main = "main",
+  Dropdown = "dropdown",
 }
 
 /**
@@ -66,6 +72,7 @@ type UDExBreadcrumbsItemClickEventDetail = {
  * @param { boolean } ctrlKey
  * @param { boolean } metaKey
  * @param { boolean } shiftKey
+ * @param { UDExBreadcrumbsClickEventSource } source The source of the click event
  */
 @event("item-click", { cancelable: true, bubbles: true })
 
@@ -173,7 +180,7 @@ class UDExBreadcrumbs extends UI5Element {
       return;
     }
 
-    if (this.fireDecoratorEvent("item-click", { item })) {
+    if (this.fireDecoratorEvent("item-click", { item, source: UDExBreadcrumbsClickEventSource.Dropdown })) {
       window.open(item.href, item.target || "_self", "noopener,noreferrer");
       this._toggleDropdown();
     }
@@ -198,6 +205,7 @@ class UDExBreadcrumbs extends UI5Element {
       ctrlKey,
       metaKey,
       shiftKey,
+      source: UDExBreadcrumbsClickEventSource.Main,
     })) {
       e.preventDefault();
     }

package/src/MastheadItem.ts

@@ -491,6 +491,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   calculateMarginInlineStart(rect: DOMRect): number | null {
     const { left, right } = rect;
+    const viewportWidth = document.documentElement.clientWidth;
 
     if (this.isLtrDirection && left < 0) {
       return left * -1 + 15;
@@ -500,12 +501,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       return left - 15;
     }
 
-    if (this.isRtlDirection && right > window.innerWidth) {
-      return right - window.innerWidth + 15;
+    if (this.isRtlDirection && right > viewportWidth) {
+      return right - viewportWidth + 15;
     }
 
-    if (this.isLtrDirection && right > window.innerWidth) {
-      return window.innerWidth - right - 15;
+    if (this.isLtrDirection && right > viewportWidth) {
+      return viewportWidth - right - 15;
     }
 
     return null;

package/src/MediaPlayer.ts

@@ -35,6 +35,10 @@ type UDExMediaPlayerVideoProgressEventDetail = {
   progress: number,
 }
 
+type UDExMediaPlayerVideojsReadyEventDetail = {
+  videojs: any,
+}
+
 /**
  * @class
  *
@@ -117,6 +121,15 @@ type UDExMediaPlayerVideoProgressEventDetail = {
  * @public
  */
 @event("video75", { bubbles: true })
+/**
+ * Fires when the VideoJS library is loaded but before the player is created.
+ * Use this event to register custom VideoJS plugins via
+ * <code>event.detail.videojs.registerPlugin()</code>.
+ *
+ * @public
+ * @param {object} videojs the VideoJS constructor object
+ */
+@event("videojsReady", { bubbles: true })
 class UDExMediaPlayer extends UI5Element {
   eventDetails!: {
     "videoStart": void,
@@ -127,6 +140,7 @@ class UDExMediaPlayer extends UI5Element {
     "video25": void,
     "video50": void,
     "video75": void,
+    "videojsReady": UDExMediaPlayerVideojsReadyEventDetail,
   };
   /**
    * Defines the options object of video.js element
@@ -251,6 +265,20 @@ class UDExMediaPlayer extends UI5Element {
   videoStart!: boolean;
   videoReady!: boolean;
   videoProgress!: number;
+  private _pendingPlugins: Array<{ name: string; plugin: (...args: any[]) => any }> = [];
+
+  /**
+   * Registers a custom VideoJS plugin to be applied before player initialization.
+   * Must be called before the component renders.
+   * For plugins registered after rendering, use the videojsReady event instead.
+   *
+   * @param name - The plugin name
+   * @param plugin - The plugin function or class
+   * @public
+   */
+  registerPlugin(name: string, plugin: (...args: any[]) => any): void {
+    this._pendingPlugins.push({ name, plugin });
+  }
 
   getPlayedTime = (target: EventTarget): number => {
     const progressControl = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
@@ -518,6 +546,13 @@ class UDExMediaPlayer extends UI5Element {
         window.videojs = videojs;
       }
 
+      this._pendingPlugins.forEach(({ name, plugin }) => {
+        videojs.registerPlugin(name, plugin);
+      });
+      this._pendingPlugins = [];
+
+      this.fireDecoratorEvent("videojsReady", { videojs });
+
       const options = this.getOptionsValue();
       const language: string = options?.language;
       if (language) {

package/src/SecondaryNavigation.hbs

@@ -70,6 +70,7 @@
         aria-label="{{mobileMenuOpenerAriaLabel}}"
         label="{{heading}}"
         mobile-link-title="{{title}}"
+        @ui5-nav-item-click="{{handleMobileMenuOpenerClick}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
         _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">

package/src/SecondaryNavigation.ts

@@ -34,8 +34,10 @@ type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
+  isMore?: boolean,
   isMobile?: boolean,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 };
 
@@ -45,6 +47,12 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
   sourceNode: HTMLElement,
 };
 
+type UDExSecondaryNavigationMobileMenuOpenerClickEventDetail = {
+  originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
+};
+
 /**
  * @class
  *
@@ -97,10 +105,23 @@ type UDExSecondaryNavigationHeadingClickEventDetail = {
  */
 @event("heading-click", { cancelable: true, bubbles: true })
 
+/**
+ * The event is triggered on user interaction with the mobile menu opener
+ *
+ * @allowPreventDefault
+ * @public
+ * @param {Event} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu opener
+ * @param {HTMLElement} sourceNode The source node of the mobile menu opener
+ *
+ */
+@event("mobile-menu-opener-click", { cancelable: true, bubbles: true })
+
 class UDExSecondaryNavigation extends UI5Element {
   eventDetails!: {
     "item-click": UDExSecondaryNavigationClickEventDetail,
     "heading-click": UDExSecondaryNavigationHeadingClickEventDetail,
+    "mobile-menu-opener-click": UDExSecondaryNavigationMobileMenuOpenerClickEventDetail,
   };
   /**
    * Defines an aria label for the mobile menu opener
@@ -247,7 +268,7 @@ class UDExSecondaryNavigation extends UI5Element {
     });
 
     if ((steps.at(-1) || 0) <= availableWidth) {
-      this._visibleItems.splice(0, Infinity, ...this.parsedItems);
+      this._visibleItems = [...this.parsedItems];
       this._showMoreButton = false;
       this.refreshRendering();
       return;
@@ -256,8 +277,8 @@ class UDExSecondaryNavigation extends UI5Element {
     if (this.parsedItems) {
       // @ts-ignore
       const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));
-      this._visibleItems.splice(0, Infinity, ...this.parsedItems.slice(0, lastVisibleIndex + 1));
-      this._overflowItems.splice(0, Infinity, ...this.parsedItems.slice(lastVisibleIndex + 1));
+      this._visibleItems = this.parsedItems.slice(0, lastVisibleIndex + 1);
+      this._overflowItems = this.parsedItems.slice(lastVisibleIndex + 1);
       this._showMoreButton = true;
       this.refreshRendering();
     }
@@ -345,7 +366,7 @@ class UDExSecondaryNavigation extends UI5Element {
       active,
       mobileLinkTitle,
       items: subItems,
-    });
+    }, this.getAnalyticsPath(title, path), title === this.moreButtonText);
 
     if (prevented) {
       e.preventDefault();
@@ -366,7 +387,9 @@ class UDExSecondaryNavigation extends UI5Element {
     const { originalEvent: actualOriginalEvent, index } = e.detail;
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item);
+    const analyticsPath = this.getAnalyticsPath(item.title, item.path);
+    const isMore = this._clickedNavItem?.title === this.moreButtonText;
+    const prevented = !this.fireEventItemClick(actualOriginalEvent, index, item, analyticsPath, isMore);
 
     if (prevented) {
       e.preventDefault();
@@ -397,10 +420,14 @@ class UDExSecondaryNavigation extends UI5Element {
     {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
+    analyticsPath: Array<string> = [],
+    isMore: boolean = false,
   ): boolean {
     return this.fireDecoratorEvent("item-click", {
       ...(this.isMobileScreen && { isMobile: true }),
+      ...(isMore && { isMore: true }),
       analyticsName: AnalyticsName.HeaderSub,
+      analyticsPath,
       sourceNode: e?.currentTarget as HTMLElement,
       originalEvent: e,
       clickedItem: {
@@ -415,25 +442,62 @@ class UDExSecondaryNavigation extends UI5Element {
     });
   }
 
+  getAnalyticsPath(clickedTitle: string, clickedPath?: string): Array<string> {
+    const getLabel = (item: NavItem) => (this.isMobileScreen ? (item.mobileLinkTitle || item.title) : item.title);
+    const findPath = (items: Array<NavItem>, parentPath: Array<string>): Array<string> | null => items.reduce<Array<string> | null>((found, item) => {
+      if (found !== null) {
+        return found;
+      }
+      if (item.title === clickedTitle && (!clickedPath || item.path === clickedPath)) {
+        return [...parentPath, getLabel(item)];
+      }
+      if (item.items?.length) {
+        return findPath(item.items, [...parentPath, getLabel(item)]);
+      }
+      return null;
+    }, null);
+    return findPath(this.parsedItems, []) || [];
+  }
+
   setActiveItem(navItems: Array<NavItem>, clickedItem: UDExSecondaryNavigationItemBase): void {
-    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase) => {
+    const updateNav = (items: Array<NavItem>, { title, path }: UDExSecondaryNavigationItemBase): boolean => {
+      let hasActiveDescendant = false;
+
       items.forEach(item => {
         if (item.title === title && (item.path === path || !item.path)) {
           item.active = true;
+          hasActiveDescendant = true;
           return;
         }
-        delete item.active;
 
         if (item.items) {
-          updateNav(item.items, clickedItem);
+          const childIsActive = updateNav(item.items, clickedItem);
+          if (childIsActive) {
+            item.active = true;
+            hasActiveDescendant = true;
+          } else {
+            delete item.active;
+          }
+        } else {
+          delete item.active;
         }
       });
+
+      return hasActiveDescendant;
     };
 
     updateNav(navItems, clickedItem);
     this.navItems = JSON.stringify(navItems);
   }
 
+  handleMobileMenuOpenerClick(e: CustomEvent): void {
+    this.fireDecoratorEvent("mobile-menu-opener-click", {
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e.target as HTMLElement,
+      originalEvent: e,
+    });
+  }
+
   handleOutsideClick(): void {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
@@ -545,4 +609,8 @@ class UDExSecondaryNavigation extends UI5Element {
 UDExSecondaryNavigation.define();
 
 export default UDExSecondaryNavigation;
-export type { UDExSecondaryNavigationClickEventDetail, UDExSecondaryNavigationHeadingClickEventDetail };
+export type {
+  UDExSecondaryNavigationClickEventDetail,
+  UDExSecondaryNavigationHeadingClickEventDetail,
+  UDExSecondaryNavigationMobileMenuOpenerClickEventDetail,
+};

package/src/SecondaryNavigationItem.ts

@@ -166,7 +166,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
-  _shouldResetTabIndex!: boolean;
   _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
@@ -187,11 +186,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this._tabIndex = "0";
       this._shouldSetTabIndex = false;
     }
-
-    if (this._shouldResetTabIndex) {
-      this._tabIndex = "-1";
-      this._shouldResetTabIndex = false;
-    }
   }
 
   onBeforeRendering() : void {

package/src/SecondaryNavigationSubItem.ts

@@ -121,7 +121,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
 
   get backButtonAriaLabel(): string {
     const label = translate(UDExSecondaryNavigationSubItem, BACK_BUTTON_LABEL);
-    return `${label} ${this.itemLabel}`;
+    return `${this.itemLabel}, ${label}`;
   }
 }
 

package/src/Tab.ts

@@ -299,6 +299,10 @@ class UDExTab extends UI5Element implements ITab {
     return this.effectiveSelected && this.hasBodyText && this._isVertical;
   }
 
+  get hasBodyTextOrLink(): boolean {
+    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
+  }
+
   get hasLinkSlot(): boolean {
     return this.link && this.link.length > 0;
   }
@@ -314,10 +318,6 @@ class UDExTab extends UI5Element implements ITab {
     return this.link.map(l => l.outerHTML).join("");
   }
 
-  get hasBodyTextOrLink(): boolean {
-    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
-  }
-
   get effectiveSelected(): boolean {
     return this.selected || this._selected;
   }

package/src/TabNavigation.hbs

@@ -4,6 +4,16 @@
         class="udex-tab-navigation__header"
         part="tab-navigation-header"
         @keydown="{{handleKeyDown}}">
+        {{#if showPlayButton}}
+            <udex-button
+                class="udex-tab-navigation__play-button"
+                design="Tertiary"
+                size="Large"
+                icon="{{playBtnIcon}}"
+                tooltip="{{playBtnTooltipText}}"
+                @click="{{onPlayButtonClick}}">
+            </udex-button>
+        {{/if}}
         <div
             id="{{_id}}-header-tabs"
             class="udex-tab-navigation__header-tabs"
@@ -49,6 +59,11 @@
         {{#if this._overflowItems.length}}
             {{tabNavigationPopover}}
         {{/if}}
+        {{#if showFooterSlot}}
+            <div class="udex-tab-navigation__footer" part="tab-navigation-footer">
+                <slot name="footer"></slot>
+            </div>
+        {{/if}}
     </div>
     <div
         class="udex-tab-navigation__content"