@sapudex/web-components 2.32.1 → 2.33.0

package/src/Tab.ts

@@ -26,6 +26,7 @@ export interface ITab extends UI5Element {
   numberBadge?: string;
   text?: string;
   bodyText?: string;
+  itemCountText?: string;
   showAttentionBadge?: boolean;
   accessibleName?: string;
   href?: string;
@@ -46,6 +47,7 @@ export interface ITab extends UI5Element {
   _tabIndex: string;
   _isMobile: boolean;
   _isVertical: boolean;
+  _isProcessTab: boolean;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -209,6 +211,15 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String, noAttribute: true })
     _width?: string;
 
+  /**
+   * Defines the item count text displayed above the tab label in Process Tab variant.
+   * Only rendered when the tab navigation uses the Process Tab variant.
+   *
+   * @public
+   */
+  @property({ type: String })
+    itemCountText?: string;
+
   /**
    * Defines the background color of the component.
    *
@@ -218,6 +229,15 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: Boolean })
     _iconWithoutBackground!: boolean;
 
+  /**
+   * Defines if the tab navigation is in process-tab variant.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isProcessTab: boolean = false;
+
   /**
    * Defines the content of the tab.
    *
@@ -251,6 +271,18 @@ class UDExTab extends UI5Element implements ITab {
     return null;
   }
 
+  get hasItemCountText(): boolean {
+    return this._isProcessTab && !!this.itemCountText;
+  }
+
+  get effectiveItemCountText(): string {
+    return this.itemCountText || "0";
+  }
+
+  get processTabClass(): string {
+    return this._isProcessTab ? " udex-tab-navigation__button-tab--process" : "";
+  }
+
   get isOnSelectedTab(): boolean {
     return this._realTab === this;
   }

package/src/TabHeader.hbs

@@ -6,7 +6,7 @@
         {{#if hasNotHref}}
             <button
                 id="{{this._id}}"
-                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}} {{processTabClass}}"
                 type="button"
                 role="tab"
                 tabindex="{{this._tabIndex}}"
@@ -22,7 +22,7 @@
         {{else}}
             <a
                 id="{{this._id}}"
-                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}} {{processTabClass}}"
                 href="{{href}}"
                 target="{{target}}"
                 role="tab"
@@ -48,7 +48,7 @@
     {{#if hasNotHref}}
         <button
             id="{{this._id}}"
-            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}} {{processTabClass}}"
             tabindex="{{this._tabIndex}}"
             type="button"
             role="tab"
@@ -64,7 +64,7 @@
     {{else}}
         <a
             id="{{this._id}}"
-            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}} {{processTabClass}}"
             tabindex="{{this.linkTabIndex}}"
             role="tab"
             aria-posinset="{{this._posinset}}"
@@ -92,21 +92,42 @@
             {{/if}}
         </span>
     {{/if}}
-    <p class="udex-tab-navigation__button-text {{classWithIcon}}">
-        {{text}}
-        {{#if numberBadge}}
-            <udex-badge
-                class="udex-tab-navigation__badge"
-                type="Number"
-                number-design="Blue"
-                size="Medium">
-                {{numberBadge}}
-            </udex-badge>
-        {{/if}}
-        {{#if hasNotIcon}}
-            <span class="udex-tab-navigation__button-badge"></span>
-        {{/if}}
-    </p>
+    {{#if _isProcessTab}}
+        <span class="udex-tab-navigation__button-text-block">
+            <span class="udex-tab-navigation__button-item-count">{{effectiveItemCountText}}</span>
+            <p class="udex-tab-navigation__button-text {{classWithIcon}}">
+                {{text}}
+                {{#if numberBadge}}
+                    <udex-badge
+                        class="udex-tab-navigation__badge"
+                        type="Number"
+                        number-design="Blue"
+                        size="Medium">
+                        {{numberBadge}}
+                    </udex-badge>
+                {{/if}}
+                {{#if hasNotIcon}}
+                    <span class="udex-tab-navigation__button-badge"></span>
+                {{/if}}
+            </p>
+        </span>
+    {{else}}
+        <p class="udex-tab-navigation__button-text {{classWithIcon}}">
+            {{text}}
+            {{#if numberBadge}}
+                <udex-badge
+                    class="udex-tab-navigation__badge"
+                    type="Number"
+                    number-design="Blue"
+                    size="Medium">
+                    {{numberBadge}}
+                </udex-badge>
+            {{/if}}
+            {{#if hasNotIcon}}
+                <span class="udex-tab-navigation__button-badge"></span>
+            {{/if}}
+        </p>
+    {{/if}}
     <span
         class="visually-hidden"
         id="udex-tab-navigation__{{this._id}}__accessible-name"

package/src/TabNavigation.hbs

@@ -40,22 +40,18 @@
                 {{/if}}
             {{/each}}
         </div>
-        <button
+        <udex-button
             class="udex-tab-navigation__button-more"
+            design="Tertiary"
+            size="Medium"
+            end-icon="navigation-down-arrow"
             @click="{{handleMoreButton}}"
             @keydown="{{handleFocusMoreButton}}"
-            tabindex="0"
             aria-haspopup="menu"
             aria-expanded="{{_isExpanded}}"
-            tooltip="{{moreButtonText}}"
             hidden>
             {{moreButtonText}}
-            <ui5-icon
-                class="udex-tab-navigation__button-more-icon"
-                name="navigation-down-arrow"
-                mode="Decorative">
-            </ui5-icon>
-        </button>
+        </udex-button>
         {{#if this._overflowItems.length}}
             {{tabNavigationPopover}}
         {{/if}}

package/src/TabNavigation.ts

@@ -192,7 +192,7 @@ class UDExTabNavigation extends UI5Element {
     _isPaused: boolean = false;
 
   /**
-   * Defines the background color of the component.
+   * !DEPRECATED! Defines the background color of the component.
    *
    * @public
    * @default false
@@ -200,6 +200,16 @@ class UDExTabNavigation extends UI5Element {
   @property({ type: Boolean })
     iconWithoutBackground!: boolean;
 
+  /**
+   * Enables the Process Tab variant, where each tab displays an icon
+   * alongside an optional item count text above the label.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    processTab: boolean = false;
+
   @property({ type: String })
     tabWidth: string = "auto";
 
@@ -350,6 +360,7 @@ class UDExTabNavigation extends UI5Element {
     const isMobile = BreakpointUtils.isAtMost("S");
     this.items.forEach((tab, index, arr) => {
       tab._iconWithoutBackground = this.iconWithoutBackground;
+      tab._isProcessTab = this.processTab;
       tab._posinset = index + 1;
       tab._setsize = arr.length;
       tab._contentId = this.getContentId(index);
@@ -395,7 +406,7 @@ class UDExTabNavigation extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("click", () => {
       if (this.getMoreButton()) {
-        this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
+        (this.getMoreButton() as UDExButton).toggled = false;
       }
     });
   }
@@ -512,12 +523,18 @@ class UDExTabNavigation extends UI5Element {
   }
 
   getItemWidth(itemDomRef: HTMLElement): number {
-    const tabTitle = itemDomRef.innerText;
+    const isProcessTab = itemDomRef.classList.contains("udex-tab-navigation__button-tab--process");
+    const tabTitle = isProcessTab
+      ? (itemDomRef.querySelector<HTMLElement>(".udex-tab-navigation__button-text")?.innerText?.trim() ?? itemDomRef.innerText)
+      : itemDomRef.innerText;
     const context = this.getItemContext();
     const { indentation, marginInlineEnd } = this.getItemIndentation(itemDomRef);
+    // For process tabs the icon container (32px) + gap (8px) is rendered inline before the text block
+    const processTabIconOffset = isProcessTab ? 40 : 0;
+    const effectiveIndentation = indentation + processTabIconOffset;
 
     if (tabTitle.length > this._maxTitleLength && tabTitle.length <= this._maxTitleLengthInSecondLines) {
-      const maxWidth = this.getMaxWidthItemTitle(tabTitle, context, indentation);
+      const maxWidth = this.getMaxWidthItemTitle(tabTitle, context, effectiveIndentation);
 
       this.setItemWidth(itemDomRef, maxWidth, marginInlineEnd);
 
@@ -525,7 +542,7 @@ class UDExTabNavigation extends UI5Element {
     }
 
     if (tabTitle.length > this._maxTitleLengthInSecondLines) {
-      const maxWidth = this.getOverloadMaxWidthItemTitle(tabTitle, context, indentation);
+      const maxWidth = this.getOverloadMaxWidthItemTitle(tabTitle, context, effectiveIndentation);
 
       this.setItemWidth(itemDomRef, maxWidth, marginInlineEnd);
 
@@ -533,7 +550,7 @@ class UDExTabNavigation extends UI5Element {
     }
 
     const textWidth = context.measureText(tabTitle).width;
-    return Math.ceil(textWidth) + indentation;
+    return Math.ceil(textWidth) + effectiveIndentation;
   }
 
   private setItemWidth(itemDomRef: HTMLElement, maxWidth: number, marginInlineEnd: number) {
@@ -714,7 +731,7 @@ class UDExTabNavigation extends UI5Element {
   handleClosePopover() {
     if (this._popover?.open) {
       this._popover.open = false;
-      this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
+      (this.getMoreButton() as UDExButton).toggled = false;
       this._isExpanded = false;
     }
   }
@@ -723,7 +740,7 @@ class UDExTabNavigation extends UI5Element {
     if (!this._popover?.open) {
       this._popover!.opener = this.getMoreButton();
       this._popover!.open = true;
-      this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
+      (this.getMoreButton() as UDExButton).toggled = true;
       this._isExpanded = true;
     }
   }

package/src/generated/templates/ListItemTemplate.lit.ts

@@ -13,12 +13,12 @@ function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: st
 function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
 function block6 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block7.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></${scopeTag("udex-avatar", tags, suffix)}>` : html`<udex-avatar class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block7.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
 function block7 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-badge", tags, suffix)} slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></${scopeTag("udex-status-badge", tags, suffix)}>` : html`<udex-status-badge slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></udex-status-badge>`;}
-function block8 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block9.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block10.call(this, context, tags, suffix) : undefined }${ this.hasFirstIcon ? block11.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block12.call(this, context, tags, suffix) : undefined }`;}
+function block8 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block9.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block10.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block11.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block12.call(this, context, tags, suffix) : undefined }</div>`;}
 function block9 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block10 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
 function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
 function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block15.call(this, context, tags, suffix) : undefined }${ this.hasFirstIcon ? block16.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block17.call(this, context, tags, suffix) : undefined }`;}
+function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block15.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block16.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block17.call(this, context, tags, suffix) : undefined }</div>`;}
 function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
 function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
@@ -29,12 +29,12 @@ function block20 (this: ListItem, context: UI5Element, tags: string[], suffix: s
 function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
 function block22 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block23.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></${scopeTag("udex-avatar", tags, suffix)}>` : html`<udex-avatar class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block23.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
 function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-badge", tags, suffix)} slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></${scopeTag("udex-status-badge", tags, suffix)}>` : html`<udex-status-badge slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></udex-status-badge>`;}
-function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block25.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block26.call(this, context, tags, suffix) : undefined }${ this.hasFirstIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block28.call(this, context, tags, suffix) : undefined }`;}
+function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block25.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block26.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block28.call(this, context, tags, suffix) : undefined }</div>`;}
 function block25 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
 function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
 function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block29 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block30.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block31.call(this, context, tags, suffix) : undefined }${ this.hasFirstIcon ? block32.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block33.call(this, context, tags, suffix) : undefined }`;}
+function block29 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block30.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block31.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block32.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block33.call(this, context, tags, suffix) : undefined }</div>`;}
 function block30 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
 function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}

package/src/generated/templates/SecondaryNavigationItemTemplate.lit.ts

@@ -6,12 +6,12 @@ import type SecondaryNavigationItem from "../../SecondaryNavigationItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isLink ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__item" role="${ifDefined(this.menuItemRole)}" ?active="${this.isActive}" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" tabindex="${ifDefined(this._tabIndex)}" aria-current="${ifDefined(this.ariaCurrent)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
-function block2 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button class="udex-secondary-navigation__item" role="${ifDefined(this.itemRole)}" tabindex="${ifDefined(this.menuOpenerTabIndex)}" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemEnterOrSpaceKeys}" @click="${this.openDropdown}"><span class="udex-secondary-navigation__item-text-wrap">${ifDefined(this.itemLabel)}${ this._subTitle ? block3.call(this, context, tags, suffix) : undefined }${ this.hasNestedItems ? block4.call(this, context, tags, suffix) : undefined }</span></button>${ this.isOpen ? block5.call(this, context, tags, suffix) : undefined }`;}
+function block1 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__item" tabindex="0" ?active="${this.isActive}" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" aria-current="${ifDefined(this.ariaCurrent)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
+function block2 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button class="udex-secondary-navigation__item" tabindex="0" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemEnterOrSpaceKeys}" @click="${this.openDropdown}"><span class="udex-secondary-navigation__item-text-wrap">${ifDefined(this.itemLabel)}${ this._subTitle ? block3.call(this, context, tags, suffix) : undefined }${ this.hasNestedItems ? block4.call(this, context, tags, suffix) : undefined }</span></button>${ this.isOpen ? block5.call(this, context, tags, suffix) : undefined }`;}
 function block3 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__item-sub-title">${ifDefined(this._subTitle)}</span>`;}
 function block4 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__item-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-secondary-navigation__item-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
-function block5 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__dropdown"><ul role="menu" class="udex-secondary-navigation__dropdown-list" @keydown="${this.handleSubItemKeyDown}">${ repeat(this._processedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</ul><div @keydown="${this.handleButtonsEscKey}"><slot></slot></div></div>`;}
-function block6 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)} index="${index}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)}></li>` : html`<li role="none"><udex-secondary-navigation-sub-item index="${index}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></udex-secondary-navigation-sub-item></li>`;}
+function block5 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__dropdown"><ul class="udex-secondary-navigation__dropdown-list" @keydown="${this.handleSubItemKeyDown}">${ repeat(this._processedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</ul><div @keydown="${this.handleButtonsEscKey}"><slot></slot></div></div>`;}
+function block6 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li><${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)} index="${index}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)}></li>` : html`<li><udex-secondary-navigation-sub-item index="${index}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></udex-secondary-navigation-sub-item></li>`;}
 
 function template(this: SecondaryNavigationItem) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/SecondaryNavigationSubItemTemplate.lit.ts

@@ -6,11 +6,11 @@ import type SecondaryNavigationSubItem from "../../SecondaryNavigationSubItem.js
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isBack ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onBackItemClick}" role="menuitem" aria-label="${ifDefined(this.backButtonAriaLabel)}" aria-haspopup="true" is-back class="udex-secondary-navigation__dropdown-item"><${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>${ifDefined(this.itemLabel)}</button>` : html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onBackItemClick}" role="menuitem" aria-label="${ifDefined(this.backButtonAriaLabel)}" aria-haspopup="true" is-back class="udex-secondary-navigation__dropdown-item"><ui5-icon class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left" mode="Decorative"></ui5-icon>${ifDefined(this.itemLabel)}</button>`;}
+function block1 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button @click="${this.onBackItemClick}" aria-label="${ifDefined(this.backButtonAriaLabel)}" tabindex="0" is-back class="udex-secondary-navigation__dropdown-item"><${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>${ifDefined(this.itemLabel)}</button>` : html`<button @click="${this.onBackItemClick}" aria-label="${ifDefined(this.backButtonAriaLabel)}" tabindex="0" is-back class="udex-secondary-navigation__dropdown-item"><ui5-icon class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left" mode="Decorative"></ui5-icon>${ifDefined(this.itemLabel)}</button>`;}
 function block2 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isButton ? block3.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
-function block3 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" aria-haspopup="${ifDefined(this.hasItems)}" ?sub-active="${this.isSubItemActive}" aria-label="${ifDefined(this.label)}" ?active="${this.active}" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}${ this.hasItems ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
+function block3 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button @click="${this.onItemClick}" aria-haspopup="${ifDefined(this.hasItems)}" ?sub-active="${this.isSubItemActive}" aria-label="${ifDefined(this.label)}" ?active="${this.active}" tabindex="0" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}${ this.hasItems ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
 function block4 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__dropdown-icon" name="slim-arrow-right" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-secondary-navigation__dropdown-icon" name="slim-arrow-right" mode="Decorative"></ui5-icon>`;}
-function block5 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" ?active="${this.active}" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}</a>`;}
+function block5 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.onItemClick}" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" ?active="${this.active}" tabindex="0" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}</a>`;}
 
 function template(this: SecondaryNavigationSubItem) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/SecondaryNavigationTemplate.lit.ts

@@ -5,15 +5,15 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type SecondaryNavigation from "../../SecondaryNavigation.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-nav-item-click="${ifDefined(this.handleMobileMenuOpenerClick)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-nav-item-click="${ifDefined(this.handleMobileMenuOpenerClick)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
+function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<nav class="udex-secondary-navigation__wrap"><ul class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</nav></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-nav-item-click="${ifDefined(this.handleMobileMenuOpenerClick)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<nav class="udex-secondary-navigation__wrap"><ul class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</nav></div><udex-secondary-navigation-item @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-nav-item-click="${ifDefined(this.handleMobileMenuOpenerClick)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
 function block1 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__breadcrumbs"><slot name="breadcrumbs"></slot></div>`;}
 function block2 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__heading">${ this.headingHref.length ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div>`;}
-function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" @click="${this.handleHeadingClick}" href="${ifDefined(this.headingHref)}">${ifDefined(this.heading)}</a>`;}
+function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" tabindex="0" @click="${this.handleHeadingClick}" href="${ifDefined(this.headingHref)}">${ifDefined(this.heading)}</a>`;}
 function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__title">${ifDefined(this.heading)}</span>`;}
-function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></udex-secondary-navigation-item></li>`;}
-function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></udex-secondary-navigation-item></li>`;}
+function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></udex-secondary-navigation-item></li>`;}
+function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></udex-secondary-navigation-item></li>`;}
 function block7 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
-function block8 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
+function block8 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons" @click="${this.handleMobileButtonsClick}"><slot name="buttons"></slot></div>`;}
 
 function template(this: SecondaryNavigation) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/TabHeaderTemplate.lit.ts

@@ -5,36 +5,52 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 type TabHeader = any;
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBodyTextOrLink ? block1.call(this, context, tags, suffix) : block17.call(this, context, tags, suffix) } `;}
-function block1 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__tab-wrapper" role="presentation" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block2.call(this, context, tags, suffix) : undefined }>${ this.hasNotHref ? block3.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }${ this.hasBodyText ? block15.call(this, context, tags, suffix) : undefined }${ this.hasLinkSlot ? block16.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBodyTextOrLink ? block1.call(this, context, tags, suffix) : block25.call(this, context, tags, suffix) } `;}
+function block1 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__tab-wrapper" role="presentation" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block2.call(this, context, tags, suffix) : undefined }>${ this.hasNotHref ? block3.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }${ this.hasBodyText ? block23.call(this, context, tags, suffix) : undefined }${ this.hasLinkSlot ? block24.call(this, context, tags, suffix) : undefined }</div>`;}
 function block2 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
-function block3 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" type="button" role="tab" tabindex="${ifDefined(this._tabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}">${ this.hasIcon ? block4.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block6.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block7.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block8.call(this, context, tags, suffix) : undefined }</button>`;}
+function block3 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}${ifDefined(this.processTabClass)}" type="button" role="tab" tabindex="${ifDefined(this._tabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}">${ this.hasIcon ? block4.call(this, context, tags, suffix) : undefined }${ this._isProcessTab ? block6.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }<span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block12.call(this, context, tags, suffix) : undefined }</button>`;}
 function block4 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block5.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block5.call(this, context, tags, suffix) : undefined }</span>`;}
 function block5 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block6 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
-function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block8 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
-function block9 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="tab" tabindex="${ifDefined(this.linkTabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}">${ this.hasIcon ? block10.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block12.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block13.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block14.call(this, context, tags, suffix) : undefined }</a>`;}
-function block10 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block11.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block11.call(this, context, tags, suffix) : undefined }</span>`;}
+function block6 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-text-block"><span class="udex-tab-navigation__button-item-count">${ifDefined(this.effectiveItemCountText)}</span><p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block7.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block8.call(this, context, tags, suffix) : undefined }</p></span>`;}
+function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block8 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block9 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block10.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block11.call(this, context, tags, suffix) : undefined }</p>`;}
+function block10 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
 function block11 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block12 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
-function block13 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block14 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
-function block15 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-body-text">${ifDefined(this.bodyText)}</p>`;}
-function block16 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__button-links">${unsafeHTML(this.linkSlotHtml)}</div>`;}
-function block17 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block18.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }`;}
-function block18 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this._tabIndex)}" type="button" role="tab" aria-describedby="udex-tab-navigation__${ifDefined(this._id)}__accessible-name" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block19.call(this, context, tags, suffix) : undefined }>${ this.hasIcon ? block20.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block22.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block23.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></button>`;}
-function block19 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
-function block20 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block21.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block21.call(this, context, tags, suffix) : undefined }</span>`;}
+function block12 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
+function block13 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}${ifDefined(this.processTabClass)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="tab" tabindex="${ifDefined(this.linkTabIndex)}" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}">${ this.hasIcon ? block14.call(this, context, tags, suffix) : undefined }${ this._isProcessTab ? block16.call(this, context, tags, suffix) : block19.call(this, context, tags, suffix) }<span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span>${ this.ariaDescribedByBodyText ? block22.call(this, context, tags, suffix) : undefined }</a>`;}
+function block14 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block15.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block15.call(this, context, tags, suffix) : undefined }</span>`;}
+function block15 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block16 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-text-block"><span class="udex-tab-navigation__button-item-count">${ifDefined(this.effectiveItemCountText)}</span><p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block17.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block18.call(this, context, tags, suffix) : undefined }</p></span>`;}
+function block17 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block18 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block19 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block20.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block21.call(this, context, tags, suffix) : undefined }</p>`;}
+function block20 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
 function block21 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block22 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
-function block23 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block24 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this.linkTabIndex)}" role="tab" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" ${ this.widthStyle ? block25.call(this, context, tags, suffix) : undefined } ._realTab="${ifDefined(this)}">${ this.hasIcon ? block26.call(this, context, tags, suffix) : undefined }<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block28.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block29.call(this, context, tags, suffix) : undefined }</p><span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></a>`;}
-function block25 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
-function block26 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block27.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block27.call(this, context, tags, suffix) : undefined }</span>`;}
-function block27 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
-function block28 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block22 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="visually-hidden">${ifDefined(this.bodyText)}</span>`;}
+function block23 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-body-text">${ifDefined(this.bodyText)}</p>`;}
+function block24 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tab-navigation__button-links">${unsafeHTML(this.linkSlotHtml)}</div>`;}
+function block25 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block26.call(this, context, tags, suffix) : block36.call(this, context, tags, suffix) }`;}
+function block26 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}${ifDefined(this.processTabClass)}" tabindex="${ifDefined(this._tabIndex)}" type="button" role="tab" aria-describedby="udex-tab-navigation__${ifDefined(this._id)}__accessible-name" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}" ._realTab="${ifDefined(this)}" ${ this.widthStyle ? block27.call(this, context, tags, suffix) : undefined }>${ this.hasIcon ? block28.call(this, context, tags, suffix) : undefined }${ this._isProcessTab ? block30.call(this, context, tags, suffix) : block33.call(this, context, tags, suffix) }<span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></button>`;}
+function block27 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
+function block28 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block29.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block29.call(this, context, tags, suffix) : undefined }</span>`;}
 function block29 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block30 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-text-block"><span class="udex-tab-navigation__button-item-count">${ifDefined(this.effectiveItemCountText)}</span><p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block31.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block32.call(this, context, tags, suffix) : undefined }</p></span>`;}
+function block31 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block32 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block33 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block34.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block35.call(this, context, tags, suffix) : undefined }</p>`;}
+function block34 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block35 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block36 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}${ifDefined(this.processTabClass)}" tabindex="${ifDefined(this.linkTabIndex)}" role="tab" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" ${ this.widthStyle ? block37.call(this, context, tags, suffix) : undefined } ._realTab="${ifDefined(this)}">${ this.hasIcon ? block38.call(this, context, tags, suffix) : undefined }${ this._isProcessTab ? block40.call(this, context, tags, suffix) : block43.call(this, context, tags, suffix) }<span class="visually-hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></a>`;}
+function block37 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`style="${styleMap(this.widthStyle)}"`;}
+function block38 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block39.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block39.call(this, context, tags, suffix) : undefined }</span>`;}
+function block39 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block40 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-text-block"><span class="udex-tab-navigation__button-item-count">${ifDefined(this.effectiveItemCountText)}</span><p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block41.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block42.call(this, context, tags, suffix) : undefined }</p></span>`;}
+function block41 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block42 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
+function block43 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block44.call(this, context, tags, suffix) : undefined }${ this.hasNotIcon ? block45.call(this, context, tags, suffix) : undefined }</p>`;}
+function block44 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Medium">${ifDefined(this.numberBadge)}</udex-badge>`;}
+function block45 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
 
 function template(this: TabHeader) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;