@sapudex/web-components 2.34.0 → 2.35.0

package/src/MastheadMenu.ts

@@ -156,14 +156,12 @@ class UDExMastheadMenu extends UI5Element {
 
   handleHomeKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const firstItem = this.links[0];
-    firstItem.focus();
+    this.focusInnerElement(this.links[0]);
   }
 
   handleEndKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const lastItem = this.links[this.links.length - 1];
-    lastItem.focus();
+    this.focusInnerElement(this.links[this.links.length - 1]);
   }
 
   handlePreviousItemFocus(e: KeyboardEvent): void {
@@ -208,7 +206,7 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[previousSelectIndex]);
     }
-    this.links[previousSelectIndex].focus();
+    this.focusInnerElement(this.links[previousSelectIndex]);
   }
 
   focusNextItem(item: UDExMastheadMenuItem): void {
@@ -217,13 +215,24 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[nextSelectIndex]);
     }
-    this.links[nextSelectIndex].focus();
+    this.focusInnerElement(this.links[nextSelectIndex]);
   }
 
   getCurrentIndex(item: UDExMastheadMenuItem): number {
     return this.links.indexOf(item);
   }
 
+  focusFirstItem(): void {
+    const firstItem = this.links[0];
+    if (firstItem) {
+      this.focusInnerElement(firstItem);
+    }
+  }
+
+  private focusInnerElement(item: UDExMastheadMenuItem): void {
+    item.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-menu-item")?.focus();
+  }
+
   scrollToItem(item: UDExMastheadMenuItem): void {
     item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
   }
@@ -261,6 +270,10 @@ class UDExMastheadMenu extends UI5Element {
   get overviewHeaderLinkText(): string {
     return translate(UDExMastheadMenu, OVERVIEW);
   }
+
+  get hasFourColumns(): boolean {
+    return this.itemsList.some(item => item.subMenuLinkItems.length === 4);
+  }
 }
 
 UDExMastheadMenu.define();

package/src/MastheadShell.hbs

@@ -151,6 +151,7 @@
             @click="{{handleLogoClick}}"
             role="link"
             href="{{homeUrl}}"
+            tabindex="0"
             title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
@@ -178,6 +179,7 @@
             @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
+            tabindex="0"
             title="{{siteLabelTitle}}"
             target="_self"
             aria-label="{{siteLabelAriaLabel}}"
@@ -196,6 +198,7 @@
                 class="udex-masthead-shell__co-brand-link"
                 @click="{{handleCoBrandClick}}"
                 href="{{coBrandUrl}}"
+                tabindex="0"
                 title="{{coBrandTitle}}"
                 aria-label="{{coBrandAriaLabel}}"
                 target="_self"

package/src/SearchableListBase.hbs

@@ -16,7 +16,15 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
+    <div class="udex-no-result">
+        <ui5-illustrated-message
+            name="NoSearchResults"
+            design="Dot"
+            title-text=" "
+            subtitle-text=" ">
+        </ui5-illustrated-message>
+        <span>{{getNoResultText}}</span>
+    </div>
 {{else if busy}}
     <udex-busy-indicator
         class="udex-busy-indicator"

package/src/SecondaryNavigationItem.ts

@@ -19,6 +19,8 @@ import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavi
 // Styles
 import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
 
+const DESKTOP_DROPDOWN_BOTTOM_GAP = 24;
+
 type UDExSecondaryNavigationItemClickEventDetail = {
   item: HTMLElement,
   index: number,
@@ -175,8 +177,12 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this._shouldFocusFirstSubItem = false;
     }
 
-    if (this._isMobileView && this.isOpen) {
-      this.setDropdownHeight();
+    if (this.isOpen) {
+      if (this._isMobileView) {
+        this.setMobileDropdownMaxHeight();
+      } else {
+        this.setDesktopDropdownMaxHeight();
+      }
     }
   }
 
@@ -184,6 +190,26 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
+  _handleWindowResize = (): void => {
+    if (!this.isOpen) { return; }
+
+    if (this._isMobileView) {
+      this.setMobileDropdownMaxHeight();
+    } else {
+      this.setDesktopDropdownMaxHeight();
+    }
+  };
+
+  onEnterDOM(): void {
+    super.onEnterDOM();
+    window.addEventListener("resize", this._handleWindowResize);
+  }
+
+  onExitDOM(): void {
+    super.onExitDOM();
+    window.removeEventListener("resize", this._handleWindowResize);
+  }
+
   handleSubItemClick(e: CustomEvent | KeyboardEvent): void {
     const originalEvent: PointerEvent | KeyboardEvent = (e instanceof CustomEvent && e.detail?.originalEvent) ? e.detail.originalEvent : e as KeyboardEvent;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
@@ -366,15 +392,21 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
-  setDropdownHeight(): void {
+  setDesktopDropdownMaxHeight(): void {
+    const { top } = this.dropdown.getBoundingClientRect();
+    const maxHeight = window.innerHeight - top - DESKTOP_DROPDOWN_BOTTOM_GAP;
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-desktop-max-height", `${maxHeight}px`);
+  }
+
+  setMobileDropdownMaxHeight(): void {
     if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
       const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
       const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
-      this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${maxDropdownHeight}px`);
+      this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${maxDropdownHeight}px`);
       return;
     }
 
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-max-height", `${this._maxHeight}`);
+    this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${this._maxHeight}`);
   }
 
   get _dropdownMaxHeightExceeds(): boolean {

package/src/SelectBase.ts

@@ -348,6 +348,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
   handleEscKeyPress(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopPropagation();
     this.closeDropdown();
     this._search.focus();
 
@@ -369,10 +370,12 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   onKeyDownSearch(e: KeyboardEvent) {
-    e.stopPropagation();
     const items = this._list?.getKeyboardNavigationItems();
     const hasItems = items && items.length > 0;
     const popoverOpened = this._popover.open;
+    if (!isEscape(e) || popoverOpened) {
+      e.stopPropagation();
+    }
     const isEscAndPopoverOpened = isEscape(e) && popoverOpened;
     const isDownAndPopoverClosed = isDown(e) && !popoverOpened;
     const isDownAndPopoverOpened = isDown(e) && popoverOpened;
@@ -508,9 +511,16 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   setSelectOption() {
-    const label = this.selectedItems[0]?.label;
-    const ratingLabel = `${this.selectedItems[0]?.ratingCount} ${translate(UDExSearchableListBase, STARS)}`;
-    this._selectedOption = label || ratingLabel || "";
+    if (!this.selectedItems[0]) {
+      this._selectedOption = "";
+      return;
+    }
+
+    const label = this.selectedItems[0].label;
+    const ratingLabel = this.selectedItems[0].ratingCount !== undefined
+      ? `${this.selectedItems[0].ratingCount} ${translate(UDExSearchableListBase, STARS)}`
+      : "";
+    this._selectedOption = label || ratingLabel;
   }
 
   updatePopoverWidth() {

package/src/SelectBox.ts

@@ -15,6 +15,8 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
@@ -89,6 +91,7 @@ type UDExSelectBoxRemoveEventDetail = {
     UDExListItem,
     UDExList,
     UDExTag,
+    IllustratedMessage,
     Tokenizer,
     Popover,
     Token,

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

@@ -5,23 +5,27 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListGroupHeader from "../../ListGroupHeader.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-heading">${ this.collapsible ? block1.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }</div> `;}
+function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-heading">${ this.collapsible ? block1.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div> `;}
 function block1 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-list" name="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block2.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }<div id="${ifDefined(this.ariaControlsId)}" role="region" class="udex-list__group-list__content"><div role="listbox" aria-label="group"><slot></slot></div></div></div>`;}
 function block2 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block3.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
 function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></header>` : html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></header>`;}
 function block4 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ">${ifDefined(this.supportingText)}</span>`;}
 function block5 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="group-heading" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}" accessible-role="button" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" collapsible=${ifDefined(this.collapsible)} ?collapsed=${this.collapsed} ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" @accordion-icon-click="${this.handleCollapseIconClick}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="group-heading" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}" accessible-role="button" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" collapsible=${ifDefined(this.collapsible)} ?collapsed=${this.collapsed} ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" @accordion-icon-click="${this.handleCollapseIconClick}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></udex-list-item>`;}
-function block6 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></div>` : html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></div>`;}
-function block7 (this: ListGroupHeader, 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 block8 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
-function block9 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="listbox" class="udex-list__group-list" name="group" aria-label="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block10.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }<slot></slot></div>`;}
-function block10 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block11.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }`;}
-function block11 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block12.call(this, context, tags, suffix) : undefined }</div></header>`;}
-function block12 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text">${ifDefined(this.supportingText)}</span>`;}
-function block13 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></udex-list-item>`;}
-function block14 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item">${ this.typeIcon ? block15.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block16.call(this, context, tags, suffix) : undefined }</div></div>`;}
-function block15 (this: ListGroupHeader, 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 block16 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
+function block6 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></div>` : html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></div>`;}
+function block7 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block8 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block9 (this: ListGroupHeader, 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 block10 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
+function block11 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="listbox" class="udex-list__group-list" name="group" aria-label="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block12.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }<slot></slot></div>`;}
+function block12 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block13.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }`;}
+function block13 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div></header>`;}
+function block14 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text">${ifDefined(this.supportingText)}</span>`;}
+function block15 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></udex-list-item>`;}
+function block16 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item">${ this.typeNumber ? block17.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block18.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block19.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block20.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block17 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block18 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block19 (this: ListGroupHeader, 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 block20 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
 
 function template(this: ListGroupHeader) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

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

@@ -5,45 +5,49 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListItem from "../../ListItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block21.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block5.call(this, context, tags, suffix) : undefined }${ this.image ? block6.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block8.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }${ this.collapsible ? block20.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block23.call(this, context, tags, suffix) : undefined } `;}
+function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block10.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }${ this.collapsible ? block22.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
 function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
 function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
 function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
-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>${ this.hasRating ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block11.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block13.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 suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
-function block11 (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 block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block15.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block16.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block17.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block18.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block19.call(this, context, tags, suffix) : undefined }</div>`;}
-function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
-function block17 (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 block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block20 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
-function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" role="${ifDefined(this.roleItem)}" aria-selected="${ifDefined(this.selected)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block22.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block23.call(this, context, tags, suffix) : undefined }${ this.image ? block24.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block26.call(this, context, tags, suffix) : block32.call(this, context, tags, suffix) }${ this.collapsible ? block38.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
-function block22 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
-function block23 (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 block24 (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 ? block25.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 ? block25.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
-function block25 (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 block26 (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 ? block27.call(this, context, tags, suffix) : undefined }<slot part="content"></slot>${ this.hasRating ? block28.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block29.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block30.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block31.call(this, context, tags, suffix) : undefined }</div>`;}
-function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
-function block29 (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 block30 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block33.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block34.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block35.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block36.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block37.call(this, context, tags, suffix) : undefined }</div>`;}
-function block33 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block34 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
-function block35 (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 block36 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block37 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block38 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
+function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block6 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block7 (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 block8 (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 ? block9.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 ? block9.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
+function block9 (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 block10 (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 ? block11.call(this, context, tags, suffix) : undefined }<slot part="content"></slot>${ this.hasRating ? block12.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block13.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block14.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block15.call(this, context, tags, suffix) : undefined }</div>`;}
+function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block13 (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 block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block17.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block18.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block19.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block21.call(this, context, tags, suffix) : undefined }</div>`;}
+function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block19 (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 block20 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block22 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
+function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" role="${ifDefined(this.roleItem)}" aria-selected="${ifDefined(this.selected)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block24.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block25.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block26.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.image ? block28.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block30.call(this, context, tags, suffix) : block36.call(this, context, tags, suffix) }${ this.collapsible ? block42.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
+function block25 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block27 (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 block28 (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 ? block29.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 ? block29.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
+function block29 (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 block30 (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 ? block31.call(this, context, tags, suffix) : undefined }<slot part="content"></slot>${ this.hasRating ? block32.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block33.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block34.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block35.call(this, context, tags, suffix) : undefined }</div>`;}
+function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block33 (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 block34 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block35 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block36 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block37.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block38.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block39.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block40.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block41.call(this, context, tags, suffix) : undefined }</div>`;}
+function block37 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block38 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block39 (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 block40 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block41 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block42 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
 
 function template(this: ListItem) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

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

@@ -17,7 +17,7 @@ function block8 (this: MastheadItem, context: UI5Element, tags: string[], suffix
 function block9 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
 function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
 function block11 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isProfileBtn ? block12.call(this, context, tags, suffix) : block23.call(this, context, tags, suffix) }`;}
-function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-masthead-item__btn udex-masthead-item__profile-btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.buttonAriaExpanded)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}" @click-default="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block13.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block21.call(this, context, tags, suffix) : block22.call(this, context, tags, suffix) }`;}
+function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-masthead-item__btn udex-masthead-item__profile-btn ${ifDefined(this.additionalClass)}" tabindex="0" aria-expanded="${ifDefined(this.buttonAriaExpanded)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}" @click-default="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block13.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block21.call(this, context, tags, suffix) : block22.call(this, context, tags, suffix) }`;}
 function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></ui5-icon>`;}
 function block14 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block15.call(this, context, tags, suffix) : block19.call(this, context, tags, suffix) }`;}
 function block15 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.imageLoadError ? block16.call(this, context, tags, suffix) : block17.call(this, context, tags, suffix) }${ this.imageAlt ? block18.call(this, context, tags, suffix) : undefined }`;}
@@ -28,7 +28,7 @@ function block19 (this: MastheadItem, context: UI5Element, tags: string[], suffi
 function block20 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
 function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
 function block22 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown"></div>`;}
-function block23 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.buttonAriaExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @click="${this.handleItemClick}">${ this.icon ? block24.call(this, context, tags, suffix) : block25.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block32.call(this, context, tags, suffix) : block33.call(this, context, tags, suffix) }`;}
+function block23 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" tabindex="0" aria-expanded="${ifDefined(this.buttonAriaExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @click="${this.handleItemClick}">${ this.icon ? block24.call(this, context, tags, suffix) : block25.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block32.call(this, context, tags, suffix) : block33.call(this, context, tags, suffix) }`;}
 function block24 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></ui5-icon>`;}
 function block25 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block26.call(this, context, tags, suffix) : block30.call(this, context, tags, suffix) }`;}
 function block26 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.imageLoadError ? block27.call(this, context, tags, suffix) : block28.call(this, context, tags, suffix) }${ this.imageAlt ? block29.call(this, context, tags, suffix) : undefined }`;}

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

@@ -7,13 +7,13 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="${ifDefined(this.mainClass)}" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }${ this.coBrandImage ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block12.call(this, context, tags, suffix) : undefined }<div class="${ifDefined(this.rightMenuClass)}">${ this.hasExploreSAP ? block14.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block15.call(this, context, tags, suffix) : undefined }${ this.hasJoule ? block16.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block17.call(this, context, tags, suffix) : undefined }${ this.hasSupport ? block18.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block19.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block20.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block21.call(this, context, tags, suffix) : undefined }</div></header> `;}
 function block1 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.homeUrl ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }`;}
-function block2 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleLogoClick}" role="link" href="${ifDefined(this.homeUrl)}" title="${ifDefined(this.logoTitle)}" target="_self" aria-label="${ifDefined(this.homepageAriaLabel)}" class="udex-masthead-shell__logo udex-masthead-shell__logo--link"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></a>`;}
+function block2 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleLogoClick}" role="link" href="${ifDefined(this.homeUrl)}" tabindex="0" title="${ifDefined(this.logoTitle)}" target="_self" aria-label="${ifDefined(this.homepageAriaLabel)}" class="udex-masthead-shell__logo udex-masthead-shell__logo--link"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></a>`;}
 function block3 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__logo"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></div>`;}
 function block4 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.siteLabelUrl ? block5.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
-function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" title="${ifDefined(this.siteLabelTitle)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
+function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" tabindex="0" title="${ifDefined(this.siteLabelTitle)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
 function block6 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__site-label">${ifDefined(this.siteLabel)}</div>`;}
 function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.coBrandUrl ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
-function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><a class="udex-masthead-shell__co-brand-link" @click="${this.handleCoBrandClick}" href="${ifDefined(this.coBrandUrl)}" title="${ifDefined(this.coBrandTitle)}" aria-label="${ifDefined(this.coBrandAriaLabel)}" target="_self" role="link"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></a></div>`;}
+function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><a class="udex-masthead-shell__co-brand-link" @click="${this.handleCoBrandClick}" href="${ifDefined(this.coBrandUrl)}" tabindex="0" title="${ifDefined(this.coBrandTitle)}" aria-label="${ifDefined(this.coBrandAriaLabel)}" target="_self" role="link"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></a></div>`;}
 function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></div>`;}
 function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
 function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}