@sapudex/web-components 0.199.3 → 0.225.0

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

@@ -4,16 +4,18 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Search from "../../Search.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }<div class="udex-search__icons">${ this.isShowResetButton ? block5.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block6.call(this, context, tags, suffix) : undefined }${ this.showSubmitButton ? block7.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
-function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
-function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" aria-label="Search" placeholder="${ifDefined(this.label)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
-function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.accInfo.ariaDescription ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
+function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
+function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" placeholder="${ifDefined(this.effectivePlaceholder)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
 function block4 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClasses)}">${ifDefined(this.label)}</label>`;}
-function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><ui5-icon class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></ui5-icon></ui5-button>`;}
-function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></ui5-button>`;}
-function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonInteractiveSubmitButton ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
-function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></ui5-icon>`;}
-function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></ui5-button>`;}
+function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span role="status" id="search-description" class="hidden" aria-hidden="true">${ifDefined(this.accInfo.ariaDescription)}</span>`;}
+function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><ui5-icon class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></ui5-icon></ui5-button>`;}
+function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></udex-control-button>`;}
+function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></ui5-button>`;}
+function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></ui5-icon>`;}
+function block10 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></ui5-button>`;}
+function block11 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></udex-control-button>`;}
 
 
 export default block0;

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

@@ -7,14 +7,16 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.showSearch ? block1.call(this, context, tags, suffix) : undefined }${ this.isListEmpty ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) } `;}
 function block1 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-search", tags, suffix)} slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}>` : html`<udex-search slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></udex-search>`;}
 function block2 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-no-result"><span>${ifDefined(this.getNoResultText)}&lrm;</span></div>`;}
-function block3 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
-function block4 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.isGroup ? block5.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
-function block5 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.item.isSelectAllHeader ? block6.call(this, context, tags, suffix, item, index) : block8.call(this, context, tags, suffix, item, index) }`;}
-function block6 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-select-all", tags, suffix)} _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-select-all", tags, suffix)}>` : html`<udex-list-select-all _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</udex-list-select-all>`;}
-function block7 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
-function block8 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-group-header", tags, suffix)} role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-group-header", tags, suffix)}>` : html`<udex-list-group-header role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</udex-list-group-header>`;}
-function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
-function block10 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
+function block3 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.busy ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
+function block4 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-busy-indicator", tags, suffix)} class="udex-busy-indicator" size="Medium" delay="${ifDefined(this.busyDelay)}" active></${scopeTag("ui5-busy-indicator", tags, suffix)}>` : html`<ui5-busy-indicator class="udex-busy-indicator" size="Medium" delay="${ifDefined(this.busyDelay)}" active></ui5-busy-indicator>`;}
+function block5 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
+function block6 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.isGroup ? block7.call(this, context, tags, suffix, item, index) : block12.call(this, context, tags, suffix, item, index) }`;}
+function block7 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.item.isSelectAllHeader ? block8.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
+function block8 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-select-all", tags, suffix)} _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-select-all", tags, suffix)}>` : html`<udex-list-select-all _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</udex-list-select-all>`;}
+function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block10 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-group-header", tags, suffix)} role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-group-header", tags, suffix)}>` : html`<udex-list-group-header role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</udex-list-group-header>`;}
+function block11 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block12 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
 
 
 export default block0;

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

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

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

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

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SecondaryNavigation from "../../SecondaryNavigation.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.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)} @keydown="${this.handleKeyDown}" 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 @keydown="${this.handleKeyDown}" 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 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)} @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" 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 @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" 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`<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>`;}

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

@@ -5,13 +5,13 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${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}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" 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="${ifDefined(this.popoverId)}" 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)}></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-tag-icon-click="${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}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" 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="${ifDefined(this.popoverId)}" 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></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 block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-single-label" 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("udex-tag-group", tags, suffix)} class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagPress)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?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("udex-tag-group", tags, suffix)}>` : html`<udex-tag-group class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagPress)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?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)) }</udex-tag-group>`;}
 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)} text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></udex-tag>`;}
-function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} .accessibilityAttributes="${ifDefined(this.accessibilityAttributes)}" class="udex-text-field__trigger" size="Large" icon="navigation-down-arrow" tabindex="${ifDefined(this.triggerTabIndex)}" accessible-name="${ifDefined(this.iconAccessibleNameText)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}" _is-combobox-role></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button .accessibilityAttributes="${ifDefined(this.accessibilityAttributes)}" class="udex-text-field__trigger" size="Large" icon="navigation-down-arrow" tabindex="${ifDefined(this.triggerTabIndex)}" accessible-name="${ifDefined(this.iconAccessibleNameText)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}" _is-combobox-role></udex-control-button>`;}
+function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" aria-label="${ifDefined(this.accessibilityAttributes.ariaLabel)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><${scopeTag("ui5-icon", tags, suffix)} name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" aria-label="${ifDefined(this.accessibilityAttributes.ariaLabel)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><ui5-icon name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></ui5-icon></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/StepInputTemplate.lit.ts

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type StepInput from "../../StepInput.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-step-input__root" @keydown="${this._onkeydown}"><${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-step-input__root" @keydown="${this._onkeydown}"><udex-text-field type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></udex-text-field>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-step-input__root"><${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" @ui5-keydown="${ifDefined(this._onkeydown)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-step-input__root"><udex-text-field type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" @ui5-keydown="${ifDefined(this._onkeydown)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></udex-text-field>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} class="udex-step-input__button udex-step-input__button_dec" title="${ifDefined(this.decIconTitle)}" accessible-name="${ifDefined(this.decIconTitle)}" icon="less" size="Large" design="${ifDefined(this.valueState)}" @click="${this._decValue}" @mousedown="${this._decSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._decIconInactive}" ?active="${this.decIconActive}" ?readonly="${this.readonly}"></${scopeTag("udex-control-button", tags, suffix)}><${scopeTag("udex-control-button", tags, suffix)} class="udex-step-input__button udex-step-input__button_inc" title="${ifDefined(this.incIconTitle)}" accessible-name="${ifDefined(this.incIconTitle)}" icon="add" size="Large" design="${ifDefined(this.valueState)}" @click="${this._incValue}" @mousedown="${this._incSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._incIconInactive}" ?active="${this.incIconActive}" ?readonly="${this.readonly}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button class="udex-step-input__button udex-step-input__button_dec" title="${ifDefined(this.decIconTitle)}" accessible-name="${ifDefined(this.decIconTitle)}" icon="less" size="Large" design="${ifDefined(this.valueState)}" @click="${this._decValue}" @mousedown="${this._decSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._decIconInactive}" ?active="${this.decIconActive}" ?readonly="${this.readonly}"></udex-control-button><udex-control-button class="udex-step-input__button udex-step-input__button_inc" title="${ifDefined(this.incIconTitle)}" accessible-name="${ifDefined(this.incIconTitle)}" icon="add" size="Large" design="${ifDefined(this.valueState)}" @click="${this._incValue}" @mousedown="${this._incSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._incIconInactive}" ?active="${this.incIconActive}" ?readonly="${this.readonly}"></udex-control-button>`;}
 
 

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 }<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 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)}" autocomplete="${ifDefined(this.autocomplete)}" ?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)}" role="${ifDefined(this.inputRole)}" 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)}" tooltip=${ifDefined(this.showButtonTooltip)} ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></${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}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></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}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></${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}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></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/TileTemplate.lit.ts

@@ -4,9 +4,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Tile from "../../Tile.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-tile" part="tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" aria-label="${ifDefined(this.accessibleName)}" @keydown=${this._onkeydown} @click=${this._onclick}><slot></slot></a>`;}
-function block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tile" part="tile" @click=${this._onclick}><slot></slot></div>`;}
+function block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }`;}
+function block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="hidden" id="tileDescription">${ifDefined(this.accessibleName)}</span><a class="udex-tile" part="tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="link" aria-describedby="tileDescription" @keydown="${this._onkeydown}" @click="${this._onclick}"><slot></slot></a>`;}
+function block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tile" part="tile" @click="${this._onclick}"><slot></slot></div>`;}
 
 
 export default block0;

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

@@ -7,7 +7,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.open ? block1.call(this, context, tags, suffix) : undefined } `;}
 function block1 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="ui5-toast-root udex-toast" role="alert" tabindex="0">${ this.withIcon ? block2.call(this, context, tags, suffix) : undefined }<bdi><slot></slot></bdi>${ this.showCloseIcon ? block3.call(this, context, tags, suffix) : undefined }</div>`;}
 function block2 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-toast__icon" name="${ifDefined(this.iconName)}" design="${ifDefined(this.iconDesign)}" ui5-icon=""></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-toast__icon" name="${ifDefined(this.iconName)}" design="${ifDefined(this.iconDesign)}" ui5-icon=""></ui5-icon>`;}
-function block3 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click=${this.closeToast}></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click=${this.closeToast}></udex-button>`;}
+function block3 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click="${this.closeToast}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click="${this.closeToast}"></udex-button>`;}
 
 
 export default block0;

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-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 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/templates/WizardTemplate.lit.ts

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: Wizard, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${classMap(this.classes.root as ClassMapValue)}" aria-label="${ifDefined(this.ariaLabelText)}" role="region" ?indeterminate="${this.indeterminate}" part="ui5-wiz-root"><nav class="ui5-wiz-nav" part="navigator" aria-label="${ifDefined(this.navAriaLabelText)}" tabindex="-1"><div class="ui5-wiz-nav-list" role="list" aria-label="${ifDefined(this.listAriaLabelText)}" aria-describedby="wiz-nav-descr" aria-controls="${ifDefined(this._id)}-wiz-content">${ repeat(this._stepsInHeader, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></nav><span id="wiz-nav-descr" class="ui5-hidden-text">${ifDefined(this.navAriaDescribedbyText)}</span><div id="${ifDefined(this._id)}-wiz-content" class="ui5-wiz-content" @scroll="${this.onScroll}">${ repeat(this._steps, (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: Wizard, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-wizard-tab", tags, suffix)} title-text="${ifDefined(item.titleText)}" subtitle-text="${ifDefined(item.subtitleText)}" icon="${ifDefined(item.icon)}" number="${ifDefined(item.number)}" breakpoint="${ifDefined(item.breakpoint)}" ?completed="${item.completed}" ?disabled="${item.disabled}" ?selected="${item.selected}" ?hide-separator="${item.hideSeparator}" ?active-separator="${item.activeSeparator}" ?branching-separator="${item.branchingSeparator}" ._wizardTabAccInfo="${ifDefined(item.accInfo)}" data-ui5-content-ref-id="${ifDefined(item.refStepId)}" data-ui5-index="${ifDefined(item.pos)}" _tab-index="${ifDefined(item.tabIndex)}" @ui5-selection-change-requested="${ifDefined(this.onSelectionChangeRequested)}" @ui5-focused="${ifDefined(this.onStepInHeaderFocused)}" @click="${this._onGroupedTabClick}" style=${styleMap(item.styles)}></${scopeTag("udex-wizard-tab", tags, suffix)}>` : html`<udex-wizard-tab title-text="${ifDefined(item.titleText)}" subtitle-text="${ifDefined(item.subtitleText)}" icon="${ifDefined(item.icon)}" number="${ifDefined(item.number)}" breakpoint="${ifDefined(item.breakpoint)}" ?completed="${item.completed}" ?disabled="${item.disabled}" ?selected="${item.selected}" ?hide-separator="${item.hideSeparator}" ?active-separator="${item.activeSeparator}" ?branching-separator="${item.branchingSeparator}" ._wizardTabAccInfo="${ifDefined(item.accInfo)}" data-ui5-content-ref-id="${ifDefined(item.refStepId)}" data-ui5-index="${ifDefined(item.pos)}" _tab-index="${ifDefined(item.tabIndex)}" @ui5-selection-change-requested="${ifDefined(this.onSelectionChangeRequested)}" @ui5-focused="${ifDefined(this.onStepInHeaderFocused)}" @click="${this._onGroupedTabClick}" style=${styleMap(item.styles)}></udex-wizard-tab>`;}
+function block1 (this: Wizard, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-wizard-tab", tags, suffix)} title-text="${ifDefined(item.titleText)}" subtitle-text="${ifDefined(item.subtitleText)}" icon="${ifDefined(item.icon)}" number="${ifDefined(item.number)}" breakpoint="${ifDefined(item.breakpoint)}" ?completed="${item.completed}" ?disabled="${item.disabled}" ?selected="${item.selected}" ?hide-separator="${item.hideSeparator}" ?active-separator="${item.activeSeparator}" ?branching-separator="${item.branchingSeparator}" ._wizardTabAccInfo="${ifDefined(item.accInfo)}" data-ui5-content-ref-id="${ifDefined(item.refStepId)}" data-ui5-index="${ifDefined(item.pos)}" _tab-index="${ifDefined(item.tabIndex)}" @ui5-selection-change-requested="${ifDefined(this.onSelectionChangeRequested)}" @ui5-focused="${ifDefined(this.onStepInHeaderFocused)}" @click="${this._onGroupedTabClick}" style="${styleMap(item.styles)}"></${scopeTag("udex-wizard-tab", tags, suffix)}>` : html`<udex-wizard-tab title-text="${ifDefined(item.titleText)}" subtitle-text="${ifDefined(item.subtitleText)}" icon="${ifDefined(item.icon)}" number="${ifDefined(item.number)}" breakpoint="${ifDefined(item.breakpoint)}" ?completed="${item.completed}" ?disabled="${item.disabled}" ?selected="${item.selected}" ?hide-separator="${item.hideSeparator}" ?active-separator="${item.activeSeparator}" ?branching-separator="${item.branchingSeparator}" ._wizardTabAccInfo="${ifDefined(item.accInfo)}" data-ui5-content-ref-id="${ifDefined(item.refStepId)}" data-ui5-index="${ifDefined(item.pos)}" _tab-index="${ifDefined(item.tabIndex)}" @ui5-selection-change-requested="${ifDefined(this.onSelectionChangeRequested)}" @ui5-focused="${ifDefined(this.onStepInHeaderFocused)}" @click="${this._onGroupedTabClick}" style="${styleMap(item.styles)}"></udex-wizard-tab>`;}
 function block2 (this: Wizard, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="ui5-wiz-content-item" ?hidden="${item.disabled}" ?selected="${item.selected}" ?stretch="${item.stretch}" part="step-content" aria-label="${ifDefined(item.stepContentAriaLabel)}" role="region" data-ui5-content-item-ref-id="${ifDefined(item._id)}"><div class="ui5-wiz-content-item-wrapper"><slot name="${ifDefined(item._individualSlot)}"></slot></div></div>`;}
 
 

package/src/generated/themes/Accordion.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/Accordion.css.ts",content:`:host{--udex-accordion-heading-color: var(--sapTitleColor, var(--udexCoreHeadingDark));font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px)}.udex-accordion__head{display:flex;justify-content:space-between;margin-bottom:var(--udexSpacer16, 16px)}.udex-accordion__headline{font-size:var(--sapFontHeader3Size,var(--udexTypographyHeadingRegularXSFontSize, 24px));font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyHeadingLineHeight, 26px);margin:var(--udexSpacer8, 8px);color:var(--udex-accordion-heading-color)}.udex-accordion__btn{height:42px}.udex-accordion__btn::part(button){padding-inline:var(--udexSpacer12,12px)}.udex-accordion__list{list-style:none;padding:0;margin-inline:0}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/Accordion.css.ts",content:`:host{--udex-accordion-heading-color: var(--sapTitleColor, var(--udexCoreHeadingDark));font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px)}.udex-accordion__head{display:flex;justify-content:space-between;margin-bottom:var(--udexSpacer16, 16px)}.udex-accordion__headline{font-size:var(--sapFontHeader3Size,var(--udexTypographyHeadingRegularXSFontSize, 24px));font-weight:var(--udexTypographyFontWeightRegular, 400);line-height:var(--udexTypographyHeadingLineHeight, 26px);margin:var(--udexSpacer8, 8px);color:var(--udex-accordion-heading-color)}.udex-accordion__btn{height:42px}.udex-accordion__btn::part(button){padding-inline:var(--udexSpacer12,12px)}
 `};
 export default styleData;
 	

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(--sapTitleColor, var(--udexCoreHeadingDark));--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(--sapShell_BorderColor, var(--udexColorGrey3));--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)}
+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(--sapTitleColor, var(--udexCoreHeadingDark));--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(--sapShell_BorderColor, var(--udexColorGrey3));--udex-accordion-item-border-width: 1px;--udex-accordion-item-background-color: transparent;--udex-accordion-item-hover-background-color: var(--udexColorGrey1, #F5F6F7);--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{display:flex;align-items:center;cursor:pointer;border:none;background:var(--udex-accordion-item-background-color);width:100%;font-family:inherit;color:var(--udex-accordion-item-headline-color);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)}.udex-accordion-item__header:hover{background-color:var(--udex-accordion-item-hover-background-color)}: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}:host(:dir(rtl)) .udex-accordion-item__icon{transform:rotate(0)}:host([expanded]) .udex-accordion-item__icon{transform:rotate(90deg)}:host([expanded]:dir(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;text-align:start}.udex-accordion-item__content{display:none;margin:var(--udex-accordion-item-content-margin)}:host([expanded]) .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-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));--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-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));--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-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));--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-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));--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-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink8));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink8));--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-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));--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-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));--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-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));--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-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));--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-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-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-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-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-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-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-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-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-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-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-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-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-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-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-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-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-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-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)}
+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-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));--udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));--udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));--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-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));--udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));--udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));--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-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));--udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));--udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));--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-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));--udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));--udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));--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-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink8));--udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));--udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink8));--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-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));--udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));--udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));--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-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));--udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));--udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));--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-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));--udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));--udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));--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-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));--udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));--udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));--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(--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([disabled]){pointer-events:none}:host([shape="Square"]) .udex-avatar{border-radius:var(--udex-avatar-radius-s)}: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-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-icon-color)}:host([color-scheme="Mango"]) .udex-avatar{background-color:var(--udex-avatar-mango-default-background-color);color:var(--udex-avatar-mango-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-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-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-icon-color)}:host([color-scheme="Raspberry"]) .udex-avatar{background-color:var(--udex-avatar-raspberry-default-background-color);color:var(--udex-avatar-raspberry-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-icon-color)}:host([color-scheme="Pink"]) .udex-avatar{background-color:var(--udex-avatar-pink-default-background-color);color:var(--udex-avatar-pink-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-icon-color)}:host([color-scheme="Indigo"]) .udex-avatar{background-color:var(--udex-avatar-indigo-default-background-color);color:var(--udex-avatar-indigo-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-icon-color)}:host([color-scheme="Teal"]) .udex-avatar{background-color:var(--udex-avatar-teal-default-background-color);color:var(--udex-avatar-teal-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-icon-color)}:host([color-scheme="Green"]) .udex-avatar{background-color:var(--udex-avatar-green-default-background-color);color:var(--udex-avatar-green-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-icon-color)}:host([color-scheme="Grey"]) .udex-avatar{background-color:var(--udex-avatar-grey-default-background-color);color:var(--udex-avatar-grey-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-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-badge-icon-color: inherit;--udex-badge-icon-size: var(--udexSpacer12, 12px);--udex-neutral-badge-color-neutral-border-color: var(--sapMessage_NeutralBorderColor, var(--udexColorGrey4, #a9b4be));--udex-neutral-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-neutral-badge-color-neutral-background: var(--sapNeutralBackground, var(--udexColorNeutralWhite, #ffffff));--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-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548)}.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;gap:var(--udexSpacer4, 4px)}.udex-badge__icon{height:var(--udex-badge-icon-size);min-width:var(--udex-badge-icon-size);color:var(--udex-badge-icon-color)}.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--neutral{background:var(--udex-neutral-badge-color-neutral-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-neutral-badge-color-neutral-border-color);color:var(--udex-neutral-badge-color-neutral-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)}.udex-badge--number.udex-badge--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
+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: 1rem;--udex-info-badge-number-large-height: 1rem;--udex-info-badge-number-large-padding: 0 var(--udexSpacer4);--udex-info-badge-number-small-font-size: .75rem;--udex-info-badge-number-small-line-height: .875rem;--udex-info-badge-number-small-height: .875rem;--udex-info-badge-number-small-padding: 0 var(--udexSpacer4);--udex-badge-icon-color: inherit;--udex-badge-icon-size: var(--udexSpacer12, 12px);--udex-neutral-badge-color-neutral-border-color: var(--sapMessage_NeutralBorderColor, var(--udexColorGrey4, #a9b4be));--udex-neutral-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-neutral-badge-color-neutral-background: var(--sapNeutralBackground, var(--udexColorNeutralWhite, #ffffff));--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-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548)}.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;gap:var(--udexSpacer4, 4px)}.udex-badge__icon{height:var(--udex-badge-icon-size);min-width:var(--udex-badge-icon-size);color:var(--udex-badge-icon-color)}.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--neutral{background:var(--udex-neutral-badge-color-neutral-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-neutral-badge-color-neutral-border-color);color:var(--udex-neutral-badge-color-neutral-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:var(--udex-info-badge-number-large-padding);height:var(--udex-info-badge-number-large-height);line-height:var(--udex-info-badge-number-large-line-height);font-size:var(--udex-info-badge-number-large-font-size)}.udex-badge--number.udex-badge--small{padding:var(--udex-info-badge-number-small-padding);height:var(--udex-info-badge-number-small-height);font-size:var(--udex-info-badge-number-small-font-size);line-height:var(--udex-info-badge-number-small-line-height)}.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)}.udex-badge--number.udex-badge--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
 `};
 export default styleData;