@sapudex/web-components 0.117.1 → 0.138.0

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

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

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

@@ -4,14 +4,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SelectBox from "../../SelectBox.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-dropdown", tags, suffix)} id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("udex-dropdown", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><udex-dropdown id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</udex-dropdown>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("ui5-popover", tags, suffix)} hide-arrow id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><ui5-popover hide-arrow id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</ui5-popover>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</span>`;}
 function block2 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
 function block3 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__text-holder"><span class="udex-text-field__single-label">${unsafeHTML(this._singleSelectedOption)}</span></div>`;}
 function block4 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-tokenizer", tags, suffix)} part="tokenizer" show-more @ui5-selectionChange="${ifDefined(this.handleTagPress)}" @keydown="${this.handleKeydownTokenizer}" prevent-popover-open class="${ifDefined(this.tokenizerClass)}" ?disabled="${this.disabled}" @ui5-show-more-items-press="${ifDefined(this.getHandlerShowMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</${scopeTag("ui5-tokenizer", tags, suffix)}>` : html`<ui5-tokenizer part="tokenizer" show-more @ui5-selectionChange="${ifDefined(this.handleTagPress)}" @keydown="${this.handleKeydownTokenizer}" prevent-popover-open class="${ifDefined(this.tokenizerClass)}" ?disabled="${this.disabled}" @ui5-show-more-items-press="${ifDefined(this.getHandlerShowMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</ui5-tokenizer>`;}
 function block5 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ !item.isGroup ? block6.call(this, context, tags, suffix, item, index) : undefined }`;}
 function block6 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} accessible-role="option" class="udex-text-field__token" @keydown="${this.handleKeyDownTag}" ?read-only="${this.isReadOrDisplayOnly}" data-id="${ifDefined(item._id)}" part="token-${index}" text="${ifDefined(item.label)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag accessible-role="option" class="udex-text-field__token" @keydown="${this.handleKeyDownTag}" ?read-only="${this.isReadOrDisplayOnly}" data-id="${ifDefined(item._id)}" part="token-${index}" text="${ifDefined(item.label)}" icon="decline"></udex-tag>`;}
-function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-text-field__trigger" role="combobox" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant><${scopeTag("ui5-icon", tags, suffix)} class="udex-text-field__icon" name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-text-field__trigger" role="combobox" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant><ui5-icon class="udex-text-field__icon" name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></ui5-icon></div>`;}
+function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} tabindex="${ifDefined(this.triggerTabIndex)}" class="udex-text-field__trigger" role="combobox" size="Large" icon="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button tabindex="${ifDefined(this.triggerTabIndex)}" class="udex-text-field__trigger" role="combobox" size="Large" icon="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant></udex-control-button>`;}
 function block8 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 function block9 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><${scopeTag("ui5-icon", tags, suffix)} @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><ui5-icon @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" name="decline"></ui5-icon></div>`;}
 function block10 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.searchableList)}`;}

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

@@ -4,8 +4,8 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Switch from "../../Switch.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-switch">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-switch__container" role="switch" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-checked="${ifDefined(this.checked)}" aria-disabled="${ifDefined(this.disabled)}" tabindex="${ifDefined(this.switchTabIndex)}" title="${ifDefined(this.tooltip)}" @click="${this.handleSwitchClick}" @keydown="${this.handleSwitchKeyDown}"><div class="udex-switch__track ${ifDefined(this.isActiveTrackClass)}"><div class="udex-switch__handle">${ this.isSemanticColor ? block2.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div></div><input id="udex-switch__input" type="checkbox" ?checked="${this.checked}" class="udex-switch__input" /></div></div>`;}
-function block1 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="udex-switch__input" class="udex-switch__label">${ifDefined(this.label)}</label>`;}
+function block0 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-switch">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-switch__container" role="switch" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.ariaLabeledBy)}" aria-checked="${ifDefined(this.checked)}" aria-disabled="${ifDefined(this.disabled)}" tabindex="${ifDefined(this.switchTabIndex)}" title="${ifDefined(this.tooltip)}" @click="${this.handleSwitchClick}" @keydown="${this.handleSwitchKeyDown}"><div class="udex-switch__track ${ifDefined(this.isActiveTrackClass)}"><div class="udex-switch__handle">${ this.isSemanticColor ? block2.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div></div><input id="${ifDefined(this._id)}-switch__input" type="checkbox" ?checked="${this.checked}" class="udex-switch__input" /></div></div>`;}
+function block1 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label id="${ifDefined(this._id)}-switch__label" for="${ifDefined(this._id)}-switch__input" class="udex-switch__label" part="label">${ifDefined(this.label)}</label>`;}
 function block2 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.checked ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }`;}
 function block3 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} name="accept" class="udex-switch__icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon name="accept" class="udex-switch__icon"></ui5-icon>`;}
 function block4 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} name="decline" class="udex-switch__icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon name="decline" class="udex-switch__icon"></ui5-icon>`;}

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

@@ -6,12 +6,12 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	
 function block0 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block1.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) } `;}
 function block1 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="${ifDefined(this._tabIndex)}" type="button" role="tab" aria-describedby="udex-tab-navigation__${ifDefined(this._id)}__accessible-name" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" aria-controls="${ifDefined(this._contentId)}" aria-selected="${ifDefined(this.effectiveSelected)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" ._realTab="${ifDefined(this)}" style="width: ${ifDefined(this._width)};">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }<span class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block4.call(this, context, tags, suffix) : undefined }</span>${ this.hasNotIcon ? block5.call(this, context, tags, suffix) : undefined }<span aria-hidden="true" class="hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></button>`;}
-function block2 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
+function block2 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
 function block3 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
 function block4 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</udex-badge>`;}
 function block5 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
 function block6 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="udex-tab-navigation__button-tab ${ifDefined(this.selectedClass)}${ifDefined(this.classWithIconWithoutBackground)}${ifDefined(this.buttonClassWithIcon)}" tabindex="-1" role="tab" aria-posinset="${ifDefined(this._posinset)}" aria-setsize="${ifDefined(this._setsize)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" style="max-width: ${ifDefined(this._maxWidth)}px; width: ${ifDefined(this._width)};" ._realTab="${ifDefined(this)}">${ this.hasIcon ? block7.call(this, context, tags, suffix) : undefined }<span class="udex-tab-navigation__button-text ${ifDefined(this.classWithIcon)}">${ifDefined(this.text)}${ this.numberBadge ? block9.call(this, context, tags, suffix) : undefined }</span>${ this.hasNotIcon ? block10.call(this, context, tags, suffix) : undefined }<span aria-hidden="true" class="hidden" id="udex-tab-navigation__${ifDefined(this._id)}__accessible-name">${ifDefined(this.accessibleNameText)}</span></a>`;}
-function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>`;}
+function block7 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-navigation__button-icon-outer" role="presentation" aria-hidden="true"><ui5-icon class="udex-tab-navigation__button-icon" name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block8.call(this, context, tags, suffix) : undefined }</span>`;}
 function block8 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}
 function block9 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-tab-navigation__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</udex-badge>`;}
 function block10 (this: TabHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-navigation__button-badge"></span>`;}

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

@@ -5,14 +5,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) } `;}
-function block1 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-overflow__button" role="tab">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
-function block2 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
+function block1 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-overflow__button" role="tab" aria-selected="${ifDefined(this.effectiveSelected)}" tabindex="${ifDefined(this._tabIndex)}">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
+function block2 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon" role="presentation" aria-hidden="true"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
 function block3 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
-function block4 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
-function block5 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" class="udex-tab-overflow__button" role="tab">${ this.hasIcon ? block6.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block8.call(this, context, tags, suffix) : undefined }</a>`;}
-function block6 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>`;}
+function block4 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge" role="presentation" aria-hidden="true"></span>`;}
+function block5 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" class="udex-tab-overflow__button" role="tab" aria-selected="${ifDefined(this.effectiveSelected)}" tabindex="${ifDefined(this._tabIndex)}">${ this.hasIcon ? block6.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block8.call(this, context, tags, suffix) : undefined }</a>`;}
+function block6 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon" role="presentation" aria-hidden="true"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon" role="presentation" aria-hidden="true"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>`;}
 function block7 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
-function block8 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
+function block8 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge" role="presentation" aria-hidden="true"></span>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	type TabNavigationPopover = any;
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></ui5-popover>`;}
+function block0 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" @ui5-after-open="${ifDefined(this.onFocusFirstItemPopover)}" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" @ui5-after-open="${ifDefined(this.onFocusFirstItemPopover)}" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></ui5-popover>`;}
 function block1 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabInOverflow)}`;}
 
 

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

@@ -4,9 +4,11 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TabNavigation from "../../TabNavigation.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="-1" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}></button></div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="-1" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></ui5-icon></button></div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}></button>${ifDefined(this.tabNavigationPopover)}</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></ui5-icon></button>${ifDefined(this.tabNavigationPopover)}</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>`;}
 function block1 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabNavigation)}`;}
-function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
+function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.selected ? block3.call(this, context, tags, suffix, item, index) : block4.call(this, context, tags, suffix, item, index) }`;}
+function block3 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}" aria-labelledby="${ifDefined(item._id)}" tabindex="${ifDefined(item._contentTabIndex)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
+function block4 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
 
 
 export default block0;

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

@@ -0,0 +1,13 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type TagGroup from "../../TagGroup.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div id="${ifDefined(this._id)}-tag-group" @ui5-selectionChange="${ifDefined(this.tagClickHandler)}" role="group"><${scopeTag("ui5-tokenizer", tags, suffix)} part="tokenizer" show-more prevent-popover-open ?disabled="${this.disabled}" id="${ifDefined(this._id)}-tag-group-tokenizer" class="udex-tag-group__tokenizer" @ui5-show-more-items-press="${ifDefined(this.showMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</${scopeTag("ui5-tokenizer", tags, suffix)}>${ this._isHiddenTags ? block2.call(this, context, tags, suffix) : undefined }</div> ` : html`<div id="${ifDefined(this._id)}-tag-group" @ui5-selectionChange="${ifDefined(this.tagClickHandler)}" role="group"><ui5-tokenizer part="tokenizer" show-more prevent-popover-open ?disabled="${this.disabled}" id="${ifDefined(this._id)}-tag-group-tokenizer" class="udex-tag-group__tokenizer" @ui5-show-more-items-press="${ifDefined(this.showMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ui5-tokenizer>${ this._isHiddenTags ? block2.call(this, context, tags, suffix) : undefined }</div> `;}
+function block1 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @iconClick="${this.tagIconClickHandler}">></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @iconClick="${this.tagIconClickHandler}">></udex-tag>`;}
+function block2 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-tooltip", tags, suffix)} @keydown="${this.handleShowMoreButtonKeydown}" id="${ifDefined(this._id)}-tag-group-tooltip" placement="${ifDefined(this.tooltipPlacement)}"><div role="group" class="udex-tag-group-tooltip__content">${ repeat(this.hiddenTags, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-tooltip", tags, suffix)}>` : html`<udex-tooltip @keydown="${this.handleShowMoreButtonKeydown}" id="${ifDefined(this._id)}-tag-group-tooltip" placement="${ifDefined(this.tooltipPlacement)}"><div role="group" class="udex-tag-group-tooltip__content">${ repeat(this.hiddenTags, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-tooltip>`;}
+function block3 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @iconClick="${this.tagIconClickHandler}">></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @iconClick="${this.tagIconClickHandler}">></udex-tag>`;}
+
+
+export default block0;

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

@@ -4,9 +4,19 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Tag from "../../Tag.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div tabindex="${ifDefined(this._tabIndex)}" class="${ifDefined(this.tagClasses)}" @click="${this.tagClickHandler}" @focusin="${this._focusin}" @focusout="${this._focusout}" @keydown="${this.tagKeyDown}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.accessibleName)}" aria-pressed="${ifDefined(this.selected)}">${ this.startIcon ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block2.call(this, context, tags, suffix) : undefined }</div>`;}
-function block1 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
-function block2 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
+function block0 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.readOnly ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
+function block1 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.tagClasses)}"><span class="udex-tag__text">${unsafeHTML(this.text)}</span></div>`;}
+function block2 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.href ? block3.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
+function block3 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a role="${ifDefined(this.accessibleRole)}" class="${ifDefined(this.tagClasses)}" @click="${this.tagLinkClickHandler}" href="${ifDefined(this.href)}">${ this.startIcon ? block4.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block5.call(this, context, tags, suffix) : undefined }</a>`;}
+function block4 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></ui5-icon>`;}
+function block5 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></ui5-icon>`;}
+function block6 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonSelectable ? block7.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }`;}
+function block7 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.tagClasses)}">${ this.startIcon ? block8.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block9.call(this, context, tags, suffix) : undefined }</div>`;}
+function block8 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></ui5-icon></button>`;}
+function block9 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></ui5-icon></button>`;}
+function block10 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div tabindex="${ifDefined(this._tabIndex)}" class="${ifDefined(this.tagClasses)}" @click="${this.tagClickHandler}" @focusin="${this._focusin}" @focusout="${this._focusout}" @keydown="${this.tagKeyDown}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.accessibleName)}" aria-pressed="${ifDefined(this.selected)}">${ this.startIcon ? block11.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block12.call(this, context, tags, suffix) : undefined }</div>`;}
+function block11 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
+function block12 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TextArea from "../../TextArea.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-textarea">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<textarea id="textarea" class="udex-textarea__field" part="textarea" .value="${ifDefined(this.value)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-label="${ifDefined(this.accessibleName)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @change="${this.handleChange}"></textarea>${ this._supportingText ? block3.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block4.call(this, context, tags, suffix) : undefined }${ this.readonly ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-textarea"><div class="udex-textarea__wrapper">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<textarea id="textarea" class="udex-textarea__field" part="textarea" .value="${ifDefined(this.value)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" ?aria-label="${this.accessibleName}" ?aria-describedby="${this.ariaDescribedBy}" ?aria-labelledby="${this.accessibleNameRef}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @click="${this.handleClick}" @blur="${this.handleBlur}" @change="${this.handleChange}"></textarea></div>${ this._supportingText ? block3.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block4.call(this, context, tags, suffix) : undefined }${ this.readonly ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label class="${ifDefined(this.labelClasses)}" for="textarea" part="label">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
 function block2 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
 function block3 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} supporting-text-alignment="Right" ?disabled="${this.disabled}" supporting-text="${ifDefined(this._supportingText)}" value-state="${ifDefined(this.fieldState)}"></${scopeTag("udex-status-message", tags, suffix)}><span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this._supportingText)}</span>` : html`<udex-status-message supporting-text-alignment="Right" ?disabled="${this.disabled}" supporting-text="${ifDefined(this._supportingText)}" value-state="${ifDefined(this.fieldState)}"></udex-status-message><span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this._supportingText)}</span>`;}

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

@@ -4,10 +4,10 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TextField from "../../TextField.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__container">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<input id="${ifDefined(this._id)}-input" class="udex-text-field__input" type="${ifDefined(this.type)}" .value="${ifDefined(this.value)}" @change="${this.handleChange}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeyDown}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.accInfo.ariaInvalid)}" aria-describedby="${ifDefined(this.accInfo.ariaDescribedBy)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" part="textfield-input" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" />${ this.icon ? block3.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block5.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block6.call(this, context, tags, suffix) : undefined }${ this.readonly ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__container">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__wrap"><input id="${ifDefined(this._id)}-input" class="udex-text-field__input" type="${ifDefined(this.type)}" .value="${ifDefined(this.value)}" @change="${this.handleChange}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" ?aria-disabled="${this.readonlyNotDisabled}" aria-invalid="${ifDefined(this.accInfo.ariaInvalid)}" aria-describedby="${ifDefined(this.accInfo.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.accInfo.ariaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" part="textfield-input" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" />${ this.icon ? block3.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block5.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block6.call(this, context, tags, suffix) : undefined }${ this.readonly ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="${ifDefined(this._id)}-input" class="${ifDefined(this.labelClasses)}" part="label">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
 function block2 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
-function block3 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} accessible-name="${ifDefined(this.accessibleIconName)}" ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" size="Large" design="${ifDefined(this.valueState)}" class="udex-text-field_icon-container" icon="${ifDefined(this.icon)}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button accessible-name="${ifDefined(this.accessibleIconName)}" ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" size="Large" design="${ifDefined(this.valueState)}" class="udex-text-field_icon-container" icon="${ifDefined(this.icon)}"></udex-control-button>`;}
+function block3 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} accessible-name="${ifDefined(this.accessibleIconName)}" tooltip=${ifDefined(this.showButtonTooltip)} ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" size="Large" design="${ifDefined(this.valueState)}" class="udex-text-field_icon-container" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button accessible-name="${ifDefined(this.accessibleIconName)}" tooltip=${ifDefined(this.showButtonTooltip)} ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" size="Large" design="${ifDefined(this.valueState)}" class="udex-text-field_icon-container" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}"></udex-control-button>`;}
 function block4 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 function block5 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this.supportingText)}</span>`;}
 function block6 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-valueStateDesc" class="hidden-text">${ifDefined(this.valueStateText)}</span>`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Tooltip from "../../Tooltip.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-responsive-popover", tags, suffix)} class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement-type="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name=${ifDefined(this.accessibleName)} accessible-name-ref=${ifDefined(this.accessibleNameRef)} accessible-role=${ifDefined(this.accessibleRole)} prevent-focus-restore>${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></${scopeTag("ui5-responsive-popover", tags, suffix)}>` : html`<ui5-responsive-popover class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement-type="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name=${ifDefined(this.accessibleName)} accessible-name-ref=${ifDefined(this.accessibleNameRef)} accessible-role=${ifDefined(this.accessibleRole)} prevent-focus-restore>${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></ui5-responsive-popover>`;}
+function block0 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement-type="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name=${ifDefined(this.accessibleName)} accessible-name-ref=${ifDefined(this.accessibleNameRef)} accessible-role=${ifDefined(this.accessibleRole)} prevent-focus-restore>${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover class="udex-tooltip__pane" ?hide-arrow="${this.hideArrow}" placement-type="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" vertical-align="${ifDefined(this.verticalAlign)}" accessible-name=${ifDefined(this.accessibleName)} accessible-name-ref=${ifDefined(this.accessibleNameRef)} accessible-role=${ifDefined(this.accessibleRole)} prevent-focus-restore>${ this.title ? block1.call(this, context, tags, suffix) : undefined }<slot></slot></ui5-popover>`;}
 function block1 (this: Tooltip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tooltip-title">${ifDefined(this.title)}</div>`;}
 
 

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

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/AccordionItem.css.ts",content:`:host{--udex-accordion-item-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-accordion-item-headline-color: var(--sapTextColor, var(--udexCoreTextDark));--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));--udex-accordion-item-border-width: .5px;--udex-accordion-item-header-padding: 12px 12px 12px 8px;--udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{align-items:center;color:var(--udex-accordion-item-headline-color);display:flex;font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1);border-bottom:var(--udex-accordion-item-border-width) solid var(--udex-accordion-item-border-color);cursor:pointer}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon{height:var(--udex-button-icon-l-size, 18px);width:var(--udex-button-icon-l-size, 18px);color:var(--udex-accordion-item-icon-color);transform:rotate(0)}.udex-accordion-item__icon-wrapper{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center}.rtl .udex-accordion-item__icon{transform:rotate(0)}.active .udex-accordion-item__icon{transform:rotate(90deg)}.rtl.active .udex-accordion-item__icon{transform:rotate(-90deg)}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex}.udex-accordion-item__content{display:none;margin:var(--udex-accordion-item-content-margin)}.active.udex-accordion-item{border:none}.active .udex-accordion-item__content{display:block}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/AccordionItem.css.ts",content:`:host{--udex-accordion-item-icon-color: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));--udex-accordion-item-headline-color: var(--sapTextColor, var(--udexCoreTextDark));--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));--udex-accordion-item-border-width: 1px;--udex-accordion-item-header-padding: var(--udexSpacer12, 12px) var(--udexSpacer12, 12px) var(--udexSpacer12, 12px) var(--udexSpacer8, 8px);--udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 42px;--udex-accordion-item-icon-height: 42px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{align-items:center;color:var(--udex-accordion-item-headline-color);display:flex;font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1);border-bottom:var(--udex-accordion-item-border-width) solid var(--udex-accordion-item-border-color);cursor:pointer}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon{height:var(--udex-button-icon-l-size, 18px);width:var(--udex-button-icon-l-size, 18px);color:var(--udex-accordion-item-icon-color);transform:rotate(0)}.udex-accordion-item__icon-wrapper{min-width:var(--udex-accordion-item-icon-width);height:var(--udex-accordion-item-icon-height);display:inline-flex;align-items:center;justify-content:center}.rtl .udex-accordion-item__icon{transform:rotate(0)}.active .udex-accordion-item__icon{transform:rotate(90deg)}.rtl.active .udex-accordion-item__icon{transform:rotate(-90deg)}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex}.udex-accordion-item__content{display:none;margin:var(--udex-accordion-item-content-margin)}.active.udex-accordion-item{border:none}.active .udex-accordion-item__content{display:block}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
 `};
 export default styleData;
 	

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

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Avatar.css.ts",content:`:host{--udex-avatar-badge-size-background-xs-and-s-and-m: 18px;--udex-avatar-badge-size-background-l: 20px;--udex-avatar-badge-size-background-xl: 28px;--udex-avatar-badge-size-icon-xs-and-s-and-m: 12px;--udex-avatar-badge-size-icon-l: 14px;--udex-avatar-badge-size-icon-xl: 16px;--udex-avatar-size-xs: 32px;--udex-avatar-size-s: 48px;--udex-avatar-size-m: 64px;--udex-avatar-size-l: 84px;--udex-avatar-size-xl: 120px;--udex-avatar-font-size-xs: 12px;--udex-avatar-font-size-s: 18px;--udex-avatar-font-size-m: 24px;--udex-avatar-font-size-l: 32px;--udex-avatar-font-size-xl: 48px;--udex-avatar-icon-size-xs: 16px;--udex-avatar-icon-size-s: 18px;--udex-avatar-icon-size-m: 24px;--udex-avatar-icon-size-l: 36px;--udex-avatar-icon-size-xl: 52px;--udex-avatar-radius-xs: var(--udexRadiusXS, 4px);--udex-avatar-radius-s: var(--udexRadiusXS, 4px);--udex-avatar-radius-m: var(--udexRadiusM, 8px);--udex-avatar-radius-l: var(--udexRadiusM, 8px);--udex-avatar-radius-xl: var(--udexRadiusXL, 16px);--udex-avatar-image-default-border-color: var(--udexColorGrey2, #EAECEE);--udex-avatar-image-hover-border-color: var(--udexColorGrey7, #475E75);--udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-backgound-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-hover-border-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-neutral-default-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-default-border-color: var(--sapAvatar_10_BorderColor, var(--udexColorGrey3));--udex-avatar-neutral-default-icon-color: var(--sapAvatar_10_TextColor , #0070F2);--udex-avatar-neutral-hover-backgound-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-hover-border-color: var(, var(--udexColorGrey5, #8396a8));--udex-avatar-neutral-hover-icon-color: var(--sapAvatar_10_TextColor, #0070F2);--udex-avatar-neutral-active-border-color: var(--udexColorBlue9, #0040B0);--udex-avatar-neutral-active-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-active-icon-color: var(--udexColorBlue9, #0040B0)}:host{font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px);display:inline-block}:host([interactive]) .udex-avatar:hover{box-shadow:none}::slotted(*){pointer-events:all}:host([color-scheme]) .udex-avatar.udex-avatar--with-image{background-color:#0000;border-color:var(--udex-avatar-image-default-border-color)}:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover{border-color:var(--udex-avatar-image-hover-border-color);background-color:#0000}.udex-avatar ::slotted([slot="badge"]){display:flex;justify-content:center;align-items:center;bottom:0;right:0}:host([size="XS"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="S"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="M"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="L"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-l);height:var(--udex-avatar-badge-size-background-l);font-size:var(--udex-avatar-badge-size-icon-l);padding:3px}:host([size="XL"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xl);height:var(--udex-avatar-badge-size-background-xl);font-size:var(--udex-avatar-badge-size-icon-xl);padding:6px}:host([show-attention-badge][size="XS"]) .udex-avatar:before{position:absolute;content:"";inset-block-start:0;inset-inline-end:0;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}:host([size="XS"]) .udex-avatar{width:var(--udex-avatar-size-xs);height:var(--udex-avatar-size-xs);font-size:var(--udex-avatar-font-size-xs)}:host([size="XS"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xs)}:host([size="S"]) .udex-avatar{width:var(--udex-avatar-size-s);height:var(--udex-avatar-size-s);font-size:var(--udex-avatar-font-size-s)}:host([size="S"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-s)}:host([size="M"]) .udex-avatar{width:var(--udex-avatar-size-m);height:var(--udex-avatar-size-m);font-size:var(--udex-avatar-font-size-m)}:host([size="M"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-m)}:host([size="L"]) .udex-avatar{width:var(--udex-avatar-size-l);height:var(--udex-avatar-size-l);font-size:var(--udex-avatar-font-size-l)}:host([size="L"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-l)}:host([size="XL"]) .udex-avatar{width:var(--udex-avatar-size-xl);height:var(--udex-avatar-size-xl);font-size:var(--udex-avatar-font-size-xl)}:host([size="XL"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xl)}:host([size="XS"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xs)}:host([size="XS"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xs)}:host([size="S"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-s)}:host([size="S"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-s)}:host([size="M"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-m)}:host([size="M"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-m)}:host([size="L"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-l)}:host([size="L"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-l)}:host([size="XL"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xl)}:host([size="XL"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xl)}:host([color-scheme="Blue"]) .udex-avatar{background-color:var(--udex-avatar-blue-default-background-color);color:var(--udex-avatar-blue-default-icon-color);border-color:var(--udex-avatar-blue-default-border-color)}:host([color-scheme="Blue"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-blue-default-background-color);border-color:var(--udex-avatar-blue-hover-border-color);color:var(--udex-avatar-blue-default-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-default-icon-color);border-color:var(--udex-avatar-mango-default-border-color)}:host([color-scheme="Mango"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-mango-default-background-color);border-color:var(--udex-avatar-mango-hover-border-color);color:var(--udex-avatar-mango-default-icon-color)}:host([disabled]) .udex-avatar:hover{border:0}:host([color-scheme="Red"]) .udex-avatar{background-color:var(--udex-avatar-red-default-background-color);color:var(--udex-avatar-red-default-icon-color);border-color:var(--udex-avatar-red-default-border-color)}:host([color-scheme="Red"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-red-default-background-color);border-color:var(--udex-avatar-red-hover-border-color);color:var(--udex-avatar-red-default-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-default-icon-color);border-color:var(--udex-avatar-raspberry-default-border-color)}:host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-raspberry-default-background-color);border-color:var(--udex-avatar-raspberry-hover-border-color);color:var(--udex-avatar-raspberry-default-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-default-icon-color);border-color:var(--udex-avatar-pink-default-border-color)}:host([color-scheme="Pink"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-pink-default-background-color);border-color:var(--udex-avatar-pink-hover-border-color);color:var(--udex-avatar-pink-default-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-default-icon-color);border-color:var(--udex-avatar-indigo-default-border-color)}:host([color-scheme="Indigo"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-indigo-default-background-color);border-color:var(--udex-avatar-indigo-hover-border-color);color:var(--udex-avatar-indigo-default-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-default-icon-color);border-color:var(--udex-avatar-teal-default-border-color)}:host([color-scheme="Teal"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-teal-default-background-color);border-color:var(--udex-avatar-teal-hover-border-color);color:var(--udex-avatar-teal-default-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-default-icon-color);border-color:var(--udex-avatar-green-default-border-color)}:host([color-scheme="Green"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-green-default-background-color);border-color:var(--udex-avatar-green-hover-border-color);color:var(--udex-avatar-green-default-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-default-icon-color);border-color:var(--udex-avatar-grey-default-border-color)}:host([color-scheme="Grey"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-grey-default-background-color);border-color:var(--udex-avatar-grey-hover-border-color);color:var(--udex-avatar-grey-default-icon-color)}:host([color-scheme="Transparent"]) .udex-avatar{background-color:var(--udex-avatar-transparent-default-background-color);color:var(--udex-avatar-transparent-default-icon-color);border-color:var(--udex-avatar-transparent-default-border-color)}:host([color-scheme="Transparent"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-transparent-default-background-color);border-color:var(--udex-avatar-transparent-hover-border-color);color:var(--udex-avatar-transparent-default-icon-color)}:host([color-scheme="Neutral"]) .udex-avatar{background-color:var(--udex-avatar-neutral-default-background-color);color:var(--udex-avatar-neutral-default-icon-color);border-color:var(--udex-avatar-neutral-default-border-color)}:host([color-scheme="Neutral"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-neutral-default-background-color);border-color:var(--udex-avatar-neutral-hover-border-color);color:var(--udex-avatar-neutral-default-icon-color)}:host([interactive]:not([hidden])) .udex-avatar:active,:host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active{border-color:var(--udex-avatar-neutral-active-border-color);background-color:var(--udex-avatar-neutral-active-background-color);color:var(--udex-avatar-neutral-active-icon-color)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Avatar.css.ts",content:`:host{--udex-avatar-badge-size-background-xs-and-s-and-m: 18px;--udex-avatar-badge-size-background-l: 20px;--udex-avatar-badge-size-background-xl: 28px;--udex-avatar-badge-size-icon-xs-and-s-and-m: 12px;--udex-avatar-badge-size-icon-l: 14px;--udex-avatar-badge-size-icon-xl: 16px;--udex-avatar-size-xs: 32px;--udex-avatar-size-s: 48px;--udex-avatar-size-m: 64px;--udex-avatar-size-l: 84px;--udex-avatar-size-xl: 120px;--udex-avatar-font-size-xs: 12px;--udex-avatar-font-size-s: 18px;--udex-avatar-font-size-m: 24px;--udex-avatar-font-size-l: 32px;--udex-avatar-font-size-xl: 48px;--udex-avatar-icon-size-xs: 16px;--udex-avatar-icon-size-s: 18px;--udex-avatar-icon-size-m: 24px;--udex-avatar-icon-size-l: 36px;--udex-avatar-icon-size-xl: 52px;--udex-avatar-radius-xs: var(--udexRadiusXS, 4px);--udex-avatar-radius-s: var(--udexRadiusXS, 4px);--udex-avatar-radius-m: var(--udexRadiusM, 8px);--udex-avatar-radius-l: var(--udexRadiusM, 8px);--udex-avatar-radius-xl: var(--udexRadiusXL, 16px);--udex-avatar-image-default-border-color: var(--udexColorGrey2, #EAECEE);--udex-avatar-image-hover-border-color: var(--udexColorGrey7, #475E75);--udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));--udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));--udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));--udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));--udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));--udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));--udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));--udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));--udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));--udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-default-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-backgound-color: hsla(0, 0%, 0%, 0);--udex-avatar-transparent-hover-border-color: var(--udexColorGrey9, #223548);--udex-avatar-transparent-hover-icon-color: var(--udexColorGrey9, #223548);--udex-avatar-neutral-default-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-default-border-color: var(--sapAvatar_10_BorderColor, var(--udexColorGrey3));--udex-avatar-neutral-default-icon-color: var(--sapAvatar_10_TextColor , #0070F2);--udex-avatar-neutral-hover-backgound-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-hover-border-color: var(, var(--udexColorGrey5, #8396a8));--udex-avatar-neutral-hover-icon-color: var(--sapAvatar_10_TextColor, #0070F2);--udex-avatar-neutral-active-border-color: var(--udexColorBlue9, #0040B0);--udex-avatar-neutral-active-background-color: var(--sapAvatar_10_Background, var(--udexColorNeuturalWhite));--udex-avatar-neutral-active-icon-color: var(--udexColorBlue9, #0040B0)}:host{font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px);display:inline-block}:host([hidden]){display:none}:host([interactive]) .udex-avatar:hover{box-shadow:none}::slotted(*){pointer-events:none}:host([color-scheme]) .udex-avatar.udex-avatar--with-image{background-color:#0000;border-color:var(--udex-avatar-image-default-border-color)}.udex-avatar ::slotted([slot="badge"]){display:flex;justify-content:center;align-items:center;bottom:0;right:0;pointer-events:all}:host([size="XS"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="S"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="M"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xs-and-s-and-m);height:var(--udex-avatar-badge-size-background-xs-and-s-and-m);font-size:var(--udex-avatar-badge-size-icon-xs-and-s-and-m);padding:3px}:host([size="L"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-l);height:var(--udex-avatar-badge-size-background-l);font-size:var(--udex-avatar-badge-size-icon-l);padding:3px}:host([size="XL"]) .udex-avatar ::slotted([slot="badge"]){width:var(--udex-avatar-badge-size-background-xl);height:var(--udex-avatar-badge-size-background-xl);font-size:var(--udex-avatar-badge-size-icon-xl);padding:6px}:host([show-attention-badge][size="XS"]) .udex-avatar:before{position:absolute;content:"";inset-block-start:0;inset-inline-end:0;z-index:1;width:6px;height:6px;border:1px solid #fff;border-radius:50%;background-color:var(--udexColorRed7)}:host([size="XS"]) .udex-avatar{width:var(--udex-avatar-size-xs);height:var(--udex-avatar-size-xs);font-size:var(--udex-avatar-font-size-xs)}:host([size="XS"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xs)}:host([size="S"]) .udex-avatar{width:var(--udex-avatar-size-s);height:var(--udex-avatar-size-s);font-size:var(--udex-avatar-font-size-s)}:host([size="S"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-s)}:host([size="M"]) .udex-avatar{width:var(--udex-avatar-size-m);height:var(--udex-avatar-size-m);font-size:var(--udex-avatar-font-size-m)}:host([size="M"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-m)}:host([size="L"]) .udex-avatar{width:var(--udex-avatar-size-l);height:var(--udex-avatar-size-l);font-size:var(--udex-avatar-font-size-l)}:host([size="L"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-l)}:host([size="XL"]) .udex-avatar{width:var(--udex-avatar-size-xl);height:var(--udex-avatar-size-xl);font-size:var(--udex-avatar-font-size-xl)}:host([size="XL"][icon]) .udex-avatar{font-size:var(--udex-avatar-icon-size-xl)}:host([size="XS"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xs)}:host([size="XS"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xs)}:host([size="S"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-s)}:host([size="S"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-s)}:host([size="M"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-m)}:host([size="M"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-m)}:host([size="L"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-l)}:host([size="L"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-l)}:host([size="XL"][shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-xl)}:host([size="XL"][shape="Square"]) .udex-avatar ::slotted(*:not([slot="badge"])){border-radius:var(--udex-avatar-radius-xl)}:host([color-scheme="Blue"]) .udex-avatar{background-color:var(--udex-avatar-blue-default-background-color);color:var(--udex-avatar-blue-default-icon-color);border-color:var(--udex-avatar-blue-default-border-color)}:host([hover][color-scheme="Blue"]) .udex-avatar,:host([color-scheme="Blue"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-blue-default-background-color);border-color:var(--udex-avatar-blue-hover-border-color);color:var(--udex-avatar-blue-default-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-default-icon-color);border-color:var(--udex-avatar-mango-default-border-color)}:host([hover][color-scheme="Mango"]) .udex-avatar,:host([color-scheme="Mango"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-mango-default-background-color);border-color:var(--udex-avatar-mango-hover-border-color);color:var(--udex-avatar-mango-default-icon-color)}:host([disabled]) .udex-avatar:hover{border:0}:host([color-scheme="Red"]) .udex-avatar{background-color:var(--udex-avatar-red-default-background-color);color:var(--udex-avatar-red-default-icon-color);border-color:var(--udex-avatar-red-default-border-color)}:host([hover][color-scheme="Red"]) .udex-avatar,:host([color-scheme="Red"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-red-default-background-color);border-color:var(--udex-avatar-red-hover-border-color);color:var(--udex-avatar-red-default-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-default-icon-color);border-color:var(--udex-avatar-raspberry-default-border-color)}:host([hover][color-scheme="Raspberry"]) .udex-avatar,:host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-raspberry-default-background-color);border-color:var(--udex-avatar-raspberry-hover-border-color);color:var(--udex-avatar-raspberry-default-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-default-icon-color);border-color:var(--udex-avatar-pink-default-border-color)}:host([hover][color-scheme="Pink"]) .udex-avatar,:host([color-scheme="Pink"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-pink-default-background-color);border-color:var(--udex-avatar-pink-hover-border-color);color:var(--udex-avatar-pink-default-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-default-icon-color);border-color:var(--udex-avatar-indigo-default-border-color)}:host([hover][color-scheme="Indigo"]) .udex-avatar,:host([color-scheme="Indigo"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-indigo-default-background-color);border-color:var(--udex-avatar-indigo-hover-border-color);color:var(--udex-avatar-indigo-default-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-default-icon-color);border-color:var(--udex-avatar-teal-default-border-color)}:host([hover][color-scheme="Teal"]) .udex-avatar,:host([color-scheme="Teal"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-teal-default-background-color);border-color:var(--udex-avatar-teal-hover-border-color);color:var(--udex-avatar-teal-default-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-default-icon-color);border-color:var(--udex-avatar-green-default-border-color)}:host([hover][color-scheme="Green"]) .udex-avatar,:host([color-scheme="Green"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-green-default-background-color);border-color:var(--udex-avatar-green-hover-border-color);color:var(--udex-avatar-green-default-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-default-icon-color);border-color:var(--udex-avatar-grey-default-border-color)}:host([hover][color-scheme="Grey"]) .udex-avatar,:host([color-scheme="Grey"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-grey-default-background-color);border-color:var(--udex-avatar-grey-hover-border-color);color:var(--udex-avatar-grey-default-icon-color)}:host([color-scheme="Transparent"]) .udex-avatar{background-color:var(--udex-avatar-transparent-default-background-color);color:var(--udex-avatar-transparent-default-icon-color);border-color:var(--udex-avatar-transparent-default-border-color)}:host([hover][color-scheme="Transparent"]) .udex-avatar,:host([color-scheme="Transparent"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-transparent-default-background-color);border-color:var(--udex-avatar-transparent-hover-border-color);color:var(--udex-avatar-transparent-default-icon-color)}:host([color-scheme="Neutral"]) .udex-avatar{background-color:var(--udex-avatar-neutral-default-background-color);color:var(--udex-avatar-neutral-default-icon-color);border-color:var(--udex-avatar-neutral-default-border-color)}:host([hover][color-scheme="Neutral"]) .udex-avatar,:host([color-scheme="Neutral"][interactive]) .udex-avatar:hover{background-color:var(--udex-avatar-neutral-default-background-color);border-color:var(--udex-avatar-neutral-hover-border-color);color:var(--udex-avatar-neutral-default-icon-color)}:host([hover]) .udex-avatar.udex-avatar--with-image,:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover{border-color:var(--udex-avatar-image-hover-border-color);background-color:#0000}:host([interactive]:not([hidden])) .udex-avatar:active,:host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active{border-color:var(--udex-avatar-neutral-active-border-color);background-color:var(--udex-avatar-neutral-active-background-color);color:var(--udex-avatar-neutral-active-icon-color)}
 `};
 export default styleData;
 	

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

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Badge.css.ts",content:`:host{--udex-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-large-font-size: .875rem;--udex-info-badge-text-large-line-height: 1.313rem;--udex-info-badge-text-large-height: 1.813rem;--udex-info-badge-text-large-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-text-small-font-size: .75rem;--udex-info-badge-text-small-line-height: 1.125rem;--udex-info-badge-text-small-height: 1.625rem;--udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-large-font-size: .875rem;--udex-info-badge-number-large-line-height: 1.313rem;--udex-info-badge-number-large-height: 1.813rem;--udex-info-badge-number-large-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-small-font-size: .75rem;--udex-info-badge-number-small-line-height: 1.125rem;--udex-info-badge-number-small-height: 1.625rem;--udex-info-badge-number-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-color-info-border-color: var( --sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2) );--udex-info-badge-color-info-text-color: var( --sapInformationColor, var(--udexColorBlue9, #0040b0) );--udex-info-badge-color-info-background: var( --sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff) );--udex-info-badge-color-success-border-color: var( --sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918) );--udex-info-badge-color-success-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-success-background: var( --sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5) );--udex-info-badge-color-warning-border-color: var( --sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500) );--udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);--udex-info-badge-color-warning-background: var( --sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6) );--udex-info-badge-color-error-border-color: var( --sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a) );--udex-info-badge-color-error-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-error-background: var( --sapErrorBackground, var(--udexCoreSemanticError1, #ffeaf4) );--udex-number-badge-color-blue-text-color: var( --udexColorNeutralWhite, #ffffff );--udex-number-badge-color-blue-background: var(--udexColorBlue7, #0070f2);--udex-number-badge-color-red-text-color: var( --udexColorNeutralWhite, #ffffff );--udex-number-badge-color-red-background: var( --sapNegativeBackgroundColor, #d20a0a );--udex-number-badge-color-white-text-color: var(--udexColorBlue7, #0070f2);--udex-number-badge-color-white-background: var( --udexColorNeutralWhite, #ffffff )}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;align-items:center}.udex-badge--text.udex-badge--large{line-height:var(--udex-info-badge-text-large-line-height);height:var(--udex-info-badge-text-large-height);font-size:var(--udex-info-badge-text-large-font-size);padding:var(--udex-info-badge-text-large-padding)}.udex-badge--text.udex-badge--small{line-height:var(--udex-info-badge-text-small-line-height);height:var(--udex-info-badge-text-small-height);font-size:var(--udex-info-badge-text-small-font-size);padding:var(--udex-info-badge-text-small-padding)}.udex-badge--text{border-radius:var(--udex-info-badge-text-radius)}.udex-badge--text.udex-badge--info{background:var(--udex-info-badge-color-info-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-info-border-color);color:var(--udex-info-badge-color-info-text-color)}.udex-badge--text.udex-badge--success{background:var(--udex-info-badge-color-success-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-success-border-color);color:var(--udex-info-badge-color-success-text-color)}.udex-badge--text.udex-badge--error{background:var(--udex-info-badge-color-error-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-error-border-color);color:var(--udex-info-badge-color-error-text-color)}.udex-badge--text.udex-badge--warning{background:var(--udex-info-badge-color-warning-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-warning-border-color);color:var(--udex-info-badge-color-warning-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--large{padding:0 var(--udexSpacer4);height:1rem;line-height:.938rem;font-size:.875rem}.udex-badge--number.udex-badge--small{padding:0 .1875rem;height:.875rem;font-size:.75rem;line-height:.875rem}.udex-badge--number.udex-badge--blue{color:var(--udex-number-badge-color-blue-text-color);background:var(--udex-number-badge-color-blue-background)}.udex-badge--number.udex-badge--red{color:var(--udex-number-badge-color-red-text-color);background:var(--udex-number-badge-color-red-background)}.udex-badge--number.udex-badge--white{color:var(--udex-number-badge-color-white-text-color);background:var(--udex-number-badge-color-white-background);font-weight:var(--udexTypographyFontWeightMedium)}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Badge.css.ts",content:`:host{--udex-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-large-font-size: .875rem;--udex-info-badge-text-large-line-height: 1.313rem;--udex-info-badge-text-large-height: 1.813rem;--udex-info-badge-text-large-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-text-small-font-size: .75rem;--udex-info-badge-text-small-line-height: 1.125rem;--udex-info-badge-text-small-height: 1.625rem;--udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-large-font-size: .875rem;--udex-info-badge-number-large-line-height: 1.313rem;--udex-info-badge-number-large-height: 1.813rem;--udex-info-badge-number-large-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-number-small-font-size: .75rem;--udex-info-badge-number-small-line-height: 1.125rem;--udex-info-badge-number-small-height: 1.625rem;--udex-info-badge-number-small-padding: var(--udexSpacer4) var(--udexSpacer8);--udex-info-badge-color-info-border-color: var( --sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2) );--udex-info-badge-color-info-text-color: var( --sapInformationColor, var(--udexColorBlue9, #0040b0) );--udex-info-badge-color-info-background: var( --sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff) );--udex-info-badge-color-success-border-color: var( --sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918) );--udex-info-badge-color-success-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-success-background: var( --sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5) );--udex-info-badge-color-warning-border-color: var( --sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500) );--udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);--udex-info-badge-color-warning-background: var( --sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6) );--udex-info-badge-color-error-border-color: var( --sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a) );--udex-info-badge-color-error-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-error-background: var( --sapErrorBackground, var(--udexCoreSemanticError1, #ffeaf4) );--udex-number-badge-color-blue-text-color: var( --udexColorNeutralWhite, #ffffff );--udex-number-badge-color-blue-background: var(--udexColorBlue7, #0070f2);--udex-number-badge-color-red-text-color: var( --udexColorNeutralWhite, #ffffff );--udex-number-badge-color-red-background: var( --sapNegativeBackgroundColor, #d20a0a );--udex-number-badge-color-white-text-color: var(--udexColorBlue7, #0070f2);--udex-number-badge-color-white-background: var( --udexColorNeutralWhite, #ffffff )}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;align-items:center}.udex-badge--text.udex-badge--large{line-height:var(--udex-info-badge-text-large-line-height);height:var(--udex-info-badge-text-large-height);font-size:var(--udex-info-badge-text-large-font-size);padding:var(--udex-info-badge-text-large-padding)}.udex-badge--text.udex-badge--small{line-height:var(--udex-info-badge-text-small-line-height);height:var(--udex-info-badge-text-small-height);font-size:var(--udex-info-badge-text-small-font-size);padding:var(--udex-info-badge-text-small-padding)}.udex-badge--text{border-radius:var(--udex-info-badge-text-radius)}.udex-badge--text.udex-badge--info{background:var(--udex-info-badge-color-info-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-info-border-color);color:var(--udex-info-badge-color-info-text-color)}.udex-badge--text.udex-badge--success{background:var(--udex-info-badge-color-success-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-success-border-color);color:var(--udex-info-badge-color-success-text-color)}.udex-badge--text.udex-badge--error{background:var(--udex-info-badge-color-error-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-error-border-color);color:var(--udex-info-badge-color-error-text-color)}.udex-badge--text.udex-badge--warning{background:var(--udex-info-badge-color-warning-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-warning-border-color);color:var(--udex-info-badge-color-warning-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--large{padding:0 var(--udexSpacer4);height:1rem;line-height:1rem;font-size:.875rem}.udex-badge--number.udex-badge--small{padding:0 .1875rem;height:.875rem;font-size:.75rem;line-height:.875rem}.udex-badge--number.udex-badge--blue{color:var(--udex-number-badge-color-blue-text-color);background:var(--udex-number-badge-color-blue-background)}.udex-badge--number.udex-badge--red{color:var(--udex-number-badge-color-red-text-color);background:var(--udex-number-badge-color-red-background)}.udex-badge--number.udex-badge--white{color:var(--udex-number-badge-color-white-text-color);background:var(--udex-number-badge-color-white-background);font-weight:var(--udexTypographyFontWeightMedium)}
 `};
 export default styleData;
 	

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

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/CountrySelector.css.ts",content:`:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-min-width: 320px;--udex-country-selector-max-width: 100%;--udex-country-selector-min-width-xs-and-s: 100%}.udex-country-selector__text{width:100%}.udex-country-selector__dropdown--hide-flag udex-list-item::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}@media (width < 640px){.udex-country-selector__trigger{min-width:var(--udex-country-selector-min-width-xs-and-s)}}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);min-width:var(--udex-country-selector-min-width);width:100%}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__icon{position:absolute;right:12px}.udex-country-selector__icon:dir(rtl){right:auto;left:12px}.udex-country-selector__icon{pointer-events:none}udex-dropdown[open] .udex-country-selector__icon{transform:rotate(180deg)}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}udex-text-field::part(label){transform:translateY(-110%);padding:0 var(--udexSpacer4, 4px);font-size:var(--udexTypographyBodyXXSFontSize, 12px);line-height:18px;background:linear-gradient(transparent 55%,var(--sapField_Background) 45%)}.udex-country-selector-item__image,.udex-country-selector__image{background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}udex-list-item::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}udex-text-field[readonly]::part(label){background:linear-gradient(var(--sapField_Background) 65%,var(--sapField_ReadOnly_Background) 35%)}udex-dropdown{--udex-dropdown-pane-max-width: 100%}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/CountrySelector.css.ts",content:`:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-min-width: 320px;--udex-country-selector-max-width: 100%;--udex-country-selector-min-width-xs-and-s: 100%;--udex-country-selector-text-offset-left: 50px;--udex-country-selector-text-offset-right: 36px}.udex-country-selector__text{width:100%}.udex-country-selector__dropdown--hide-flag udex-list-item::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}@media (width < 640px){.udex-country-selector__trigger{min-width:var(--udex-country-selector-min-width-xs-and-s)}}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);min-width:var(--udex-country-selector-min-width);width:100%}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}:host(:not([hide-flag-images])) udex-text-field[aria-expanded=false]:not([active]):not([value])::part(label){transform:translate(36px)}:host(:not([hide-flag-images])) udex-text-field[aria-expanded=false]:not([active]):not([value])::part(label):dir(rtl){transform:translate(-36px)}udex-text-field[aria-expanded=true]::part(label){line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 55%,var(--sapField_Background) 45%)}udex-text-field::part(label){background:linear-gradient(transparent 55%,var(--sapField_Background) 45%);padding:0 var(--udexSpacer4, 4px);max-width:calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)}udex-text-field[active]::part(label){padding:6px var(--udexSpacer4, 4px) 0}.udex-country-selector-item__image,.udex-country-selector__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}udex-list-item::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}udex-text-field[readonly]::part(label){background:var(--sapField_ReadOnly_Background)}udex-dropdown{--udex-dropdown-pane-max-width: 100%}udex-text-field{--udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left)}udex-text-field:dir(rtl){--udex-input-padding: 0 var(--udex-country-selector-text-offset-left) 0 var(--udex-country-selector-text-offset-right)}udex-text-field::part(textfield-input){text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.hidden-text{display:none}
 `};
 export default styleData;
 	

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

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Divider.css.ts",content:`.udex-divider{border-top:1px solid var(--udexCoreDividerLight, #D5DADD);display:block}.udex-divider-wrapper{padding:2px 0}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Divider.css.ts",content:`:host{--udex-divider-color: var(--udexCoreDividerLight, #D5DADD)}.udex-divider{border-top:1px solid var(--udex-divider-color);display:block}.udex-divider-wrapper{padding:var(--udexSpacer2) 0}
 `};
 export default styleData;