@sapudex/web-components 2.34.0 → 2.36.0

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/Wizard.ts

@@ -229,8 +229,8 @@ class UDExWizard extends UI5Wizard {
     this.attachStepsResizeObserver();
     this._calcCurrentBreakpoint();
     this.previouslySelectedStepIndex = this.selectedStepIndex;
-    this._currentStepTitle = this._steps[this.selectedStepIndex].titleText;
-    this._currentStepSubTitle = this._steps[this.selectedStepIndex].subtitleText;
+    this._currentStepTitle = this._steps[this.selectedStepIndex]?.titleText;
+    this._currentStepSubTitle = this._steps[this.selectedStepIndex]?.subtitleText;
   }
 
   get effectiveAccessibleName(): string {

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>`;}

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

@@ -7,7 +7,7 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.showSearch ? block1.call(this, context, tags, suffix) : undefined }${ this.isListEmpty ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) } `;}
 function block1 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-search", tags, suffix)} slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>` : html`<udex-search slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></udex-search><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>`;}
-function block2 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-no-result"><span>${ifDefined(this.getNoResultText)}</span></div>`;}
+function block2 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-no-result"><${scopeTag("ui5-illustrated-message", tags, suffix)} name="NoSearchResults" design="Dot" title-text=" " subtitle-text=" "></${scopeTag("ui5-illustrated-message", tags, suffix)}><span>${ifDefined(this.getNoResultText)}</span></div>` : html`<div class="udex-no-result"><ui5-illustrated-message name="NoSearchResults" design="Dot" title-text=" " subtitle-text=" "></ui5-illustrated-message><span>${ifDefined(this.getNoResultText)}</span></div>`;}
 function block3 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.busy ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
 function block4 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-busy-indicator", tags, suffix)} class="udex-busy-indicator" size="M" delay="${ifDefined(this.busyDelay)}" active></${scopeTag("udex-busy-indicator", tags, suffix)}>` : html`<udex-busy-indicator class="udex-busy-indicator" size="M" delay="${ifDefined(this.busyDelay)}" active></udex-busy-indicator>`;}
 function block5 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?tab-navigation-enabled="${this.tabNavigationEnabled}" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?tab-navigation-enabled="${this.tabNavigationEnabled}" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</udex-list>`;}

package/src/generated/themes/Breadcrumbs.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-breadcrumbs-item-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-breadcrumbs-margin: 0}.udex-breadcrumbs{font-family:var(--sapFontFamily);white-space:nowrap;outline:none;margin:var(--udex-breadcrumbs-margin)}.udex-breadcrumbs>ol{margin:0;padding:var(--udexSpacer2, 2px) 0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.udex-breadcrumbs>ol>li{display:inline-flex;align-items:baseline}.udex-breadcrumbs__separator:after{content:"/";padding:0 .125rem;color:var(--udex-breadcrumbs-item-color);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--udex-breadcrumbs-item-font-size);line-height:18px}:host([separators="DoubleSlash"]) .udex-breadcrumbs__separator:after{content:"//"}:host([separators="BackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\"}:host([separators="DoubleBackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\\\\\\\\\"}:host([separators="GreaterThan"]) .udex-breadcrumbs__separator:after{content:">"}:host([separators="DoubleGreaterThan"]) .udex-breadcrumbs__separator:after{content:">>"}.udex-breadcrumbs__trigger,.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],.udex-breadcrumbs__item[focused],.udex-breadcrumbs__item{font-family:var(--sapFontFamily);color:var(--udex-breadcrumbs-item-color);--sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);--sapFontSize: var(--udex-breadcrumbs-item-font-size);--sapLinkColor: var(--udex-breadcrumbs-item-color);--sapLink_Active_Color: var(--udex-breadcrumbs-item-color);--udex-link-text-decoration: none;position:relative}.udex-breadcrumbs__item{line-height:var(--udex-breadcrumbs-item-line-height)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper{display:flex}.udex-breadcrumbs__trigger{border:none;background:none;padding:0;cursor:pointer;height:12px;width:12px;margin:auto;--udex-link-icon-width: 12px;--udex-link-icon-height: 12px;--udex-link-line-height: 12px}.udex-breadcrumbs__trigger:focus{outline:solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);border-radius:var(--udexRadiusXXS, 2px)}.udex-breadcrumbs__trigger--opened [ui5-icon]{transform:rotate(180deg)}.udex-breadcrumbs__trigger,[ui5-link].udex-breadcrumbs__item{text-decoration:none;display:inline-flex}[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after{content:"";position:absolute;height:.0625rem;left:.125rem;right:.125rem;bottom:.125rem;background-color:var(--udex-breadcrumbs-item-color)}.udex-breadcrumbs__item--current-page{color:var(--udex-breadcrumbs-item-color);font-size:var(--udex-breadcrumbs-item-font-size);line-height:var(--udex-breadcrumbs-item-line-height)}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before{content:""}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]{padding-left:0}.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after{border-bottom:0}
+export default `:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-breadcrumbs-item-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-breadcrumbs-margin: 0}.udex-breadcrumbs{font-family:var(--sapFontFamily);white-space:nowrap;outline:none;margin:var(--udex-breadcrumbs-margin)}.udex-breadcrumbs>ol{margin:0;padding:0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.udex-breadcrumbs>ol>li{display:inline-flex;align-items:baseline}.udex-breadcrumbs__separator:after{content:"/";padding:0 .125rem;color:var(--udex-breadcrumbs-item-color);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--udex-breadcrumbs-item-font-size);line-height:18px}:host([separators="DoubleSlash"]) .udex-breadcrumbs__separator:after{content:"//"}:host([separators="BackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\"}:host([separators="DoubleBackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\\\\\\\\\"}:host([separators="GreaterThan"]) .udex-breadcrumbs__separator:after{content:">"}:host([separators="DoubleGreaterThan"]) .udex-breadcrumbs__separator:after{content:">>"}.udex-breadcrumbs__trigger,.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],.udex-breadcrumbs__item[focused],.udex-breadcrumbs__item{font-family:var(--sapFontFamily);color:var(--udex-breadcrumbs-item-color);--sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);--sapFontSize: var(--udex-breadcrumbs-item-font-size);--sapLinkColor: var(--udex-breadcrumbs-item-color);--sapLink_Active_Color: var(--udex-breadcrumbs-item-color);--udex-link-text-decoration: none;position:relative}.udex-breadcrumbs .udex-breadcrumbs__item::part(root){padding:3px 0}.udex-breadcrumbs__item{line-height:var(--udex-breadcrumbs-item-line-height)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper{display:flex}.udex-breadcrumbs__trigger{border:none;background:none;padding:0;cursor:pointer;height:24px;width:12px;margin:auto;--udex-link-icon-width: 12px;--udex-link-icon-height: 12px;--udex-link-line-height: 12px}.udex-breadcrumbs__trigger::part(root){display:flex;align-items:center;justify-content:center}.udex-breadcrumbs__trigger::part(icon){padding-inline-end:0}.udex-breadcrumbs__trigger:focus{outline:solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);border-radius:var(--udexRadiusXXS, 2px)}.udex-breadcrumbs__trigger--opened [ui5-icon]{transform:rotate(180deg)}.udex-breadcrumbs__trigger,[ui5-link].udex-breadcrumbs__item{text-decoration:none;display:inline-flex}[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after{content:"";position:absolute;height:.0625rem;left:.125rem;right:.125rem;bottom:.125rem;background-color:var(--udex-breadcrumbs-item-color)}.udex-breadcrumbs__item--current-page{color:var(--udex-breadcrumbs-item-color);font-size:var(--udex-breadcrumbs-item-font-size);line-height:var(--udex-breadcrumbs-item-line-height);padding:3px 0}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before{content:""}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]{padding-left:0}.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after{border-bottom:0}
 `

package/src/generated/themes/BreadcrumbsPopover.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-breadcrumbs-item-dropdown-color: var(--udex-breadcrumbs-item-color, var(--udexColorGrey6, #5B738B));--udex-breadcrumbs-current-item-color: var(--udexColorGrey9, #223548);--udex-breadcrumbs-dropdown-item-font-size: var(--udexTypographyNavigationMediumXSFontSize, 12px);--udex-breadcrumbs-dropdown-item-line-height: var(--udexTypographyNavigationLineHeight, 1.1);--udex-breadcrumbs-dropdown-box-shadow: var(--sapContent_Shadow2, 0px 10px 30px 0px rgba(34, 54, 73, .25))}.udex-breadcrumbs__popover{--udex-dropdown-vertical-distance: var(--udexSpacer4, 4px);--udex-dropdown-border-width: 0;--udex-dropdown-border-radius: 0;--udex-dropdown-pane-max-width: fit-content;--udex-dropdown-box-shadow: var(--udex-breadcrumbs-dropdown-box-shadow)}[ui5-icon]{width:.75rem;height:.75rem}.udex-breadcrumbs__popover-content{padding:var(--udexSpacer32) 52px var(--udexSpacer32) var(--udexSpacer20)}.udex-breadcrumbs__popover-content ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.udex-breadcrumbs__popover-content li{display:flex}.udex-breadcrumbs__popover-content .udex-breadcrumbs__item{font-size:var(--udex-breadcrumbs-dropdown-item-font-size);line-height:var(--udex-breadcrumbs-dropdown-item-line-height);color:var(--udex-breadcrumbs-item-dropdown-color);--udex-link-line-height: var(--udex-breadcrumbs-dropdown-item-line-height);--udex-link-icon-height: 12px;--udex-link-icon-width: 12px}.udex-breadcrumbs__popover-content .udex-breadcrumbs__item--current{color:var(--udex-breadcrumbs-current-item-color);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-breadcrumbs__popover::part(content){padding:0}.udex-breadcrumbs__popover-content:dir(rtl){padding:var(--udexSpacer32) var(--udexSpacer20) var(--udexSpacer32) 52px}li:has(.udex-breadcrumbs__item--with-icon):dir(ltr)~li .udex-breadcrumbs__item{padding-left:calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px))}li:has(.udex-breadcrumbs__item--with-icon):dir(rtl)~li .udex-breadcrumbs__item{padding-right:calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px))}.udex-breadcrumbs__item--1{margin-left:var(--udexSpacer12)}.udex-breadcrumbs__item--2{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--3{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--4{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--5{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--6{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--7{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--8{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--9{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--10{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--11{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--12{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--13{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--14{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--15{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--16{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--17{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--18{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--19{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--20{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--21{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--22{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--23{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--24{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--25{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--1:dir(rtl){margin-right:var(--udexSpacer12)}.udex-breadcrumbs__item--2:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--3:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--4:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--5:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--6:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--7:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--8:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--9:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--10:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--11:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--12:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--13:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--14:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--15:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--16:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--17:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--18:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--19:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--20:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--21:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--22:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--23:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--24:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--25:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}
+export default `:host{--udex-breadcrumbs-item-dropdown-color: var(--udex-breadcrumbs-item-color, var(--udexColorGrey6, #5B738B));--udex-breadcrumbs-current-item-color: var(--udexColorGrey9, #223548);--udex-breadcrumbs-dropdown-item-font-size: var(--udexTypographyNavigationMediumXSFontSize, 12px);--udex-breadcrumbs-dropdown-item-line-height: var(--udexTypographyNavigationLineHeight, 1.1);--udex-breadcrumbs-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 rgba(34, 54, 73, .25))}.udex-breadcrumbs__popover{--udex-dropdown-vertical-distance: 0;--udex-dropdown-horizontal-distance: -20px;--udex-dropdown-border-width: 0;--udex-dropdown-border-radius: 0;--udex-dropdown-pane-max-width: fit-content;--udex-dropdown-box-shadow: var(--udex-breadcrumbs-dropdown-box-shadow)}[ui5-icon]{width:.75rem;height:.75rem}.udex-breadcrumbs__popover-content{padding:var(--udexSpacer32) 52px var(--udexSpacer32) var(--udexSpacer20)}.udex-breadcrumbs__popover-content ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start}.udex-breadcrumbs__popover-content li{display:flex}.udex-breadcrumbs__popover-content .udex-breadcrumbs__item::part(root){padding:6px 0}.udex-breadcrumbs__popover-content .udex-breadcrumbs__item{font-size:var(--udex-breadcrumbs-dropdown-item-font-size);line-height:var(--udex-breadcrumbs-dropdown-item-line-height);color:var(--udex-breadcrumbs-item-dropdown-color);padding:0;--udex-link-line-height: var(--udex-breadcrumbs-dropdown-item-line-height);--udex-link-icon-height: 12px;--udex-link-icon-width: 12px}.udex-breadcrumbs__popover-content li:has(.udex-breadcrumbs__item--with-icon):dir(rtl)~li .udex-breadcrumbs__item{padding-right:0}.udex-breadcrumbs__popover-content li:has(.udex-breadcrumbs__item--with-icon):dir(ltr)~li .udex-breadcrumbs__item{padding-left:0}.udex-breadcrumbs__popover-content .udex-breadcrumbs__item--current{color:var(--udex-breadcrumbs-current-item-color);font-weight:var(--udexTypographyFontWeightMedium, 500);display:block;padding:6px 0}.udex-breadcrumbs__popover::part(content){padding:0}.udex-breadcrumbs__popover-content:dir(rtl){padding:var(--udexSpacer32) var(--udexSpacer20) var(--udexSpacer32) 52px}li:has(.udex-breadcrumbs__item--with-icon):dir(ltr)~li .udex-breadcrumbs__item{padding-left:calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px))}li:has(.udex-breadcrumbs__item--with-icon):dir(rtl)~li .udex-breadcrumbs__item{padding-right:calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px))}.udex-breadcrumbs__item--1{margin-left:var(--udexSpacer12)}.udex-breadcrumbs__item--2{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--3{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--4{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--5{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--6{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--7{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--8{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--9{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--10{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--11{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--12{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--13{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--14{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--15{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--16{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--17{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--18{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--19{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--20{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--21{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--22{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--23{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--24{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--25{margin-left:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--1:dir(rtl){margin-right:var(--udexSpacer12)}.udex-breadcrumbs__item--2:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--3:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--4:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--5:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--6:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--7:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--8:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--9:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--10:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--11:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--12:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--13:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--14:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--15:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--16:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--17:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--18:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--19:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--20:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--21:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--22:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--23:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--24:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}.udex-breadcrumbs__item--25:dir(rtl){margin-right:calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12))}
 `