@sapudex/web-components 2.41.0 → 2.43.0

package/src/MastheadCountrySelector.ts

@@ -8,9 +8,6 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import {
-  isEnd, isHome, isTabNext, isTabPrevious,
-} from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
 import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
@@ -238,6 +235,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   _mastheadShell!: UDExMastheadShell;
   _countriesListHolderClassName = "udex-masthead-country-selector__list-wrap";
   _itemClassName = "udex-masthead-country-selector__item";
+  _boundHandleActiveRegionClose!: () => void;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -245,12 +243,23 @@ class UDExMastheadCountrySelector extends UI5Element {
   constructor() {
     super();
     this._activeCountries = [];
+    this._boundHandleActiveRegionClose = this.handleActiveRegionClose.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    this.closest("[udex-masthead-item]")?.addEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
+  }
+
+  onExitDOM(): void {
+    this.closest("[udex-masthead-item]")?.removeEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
   }
 
   onAfterRendering(): void {
     this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
-    this.setTabIndexForItems();
     this.handleOutsideClick();
 
     if (this.isSingleMode) {
@@ -262,9 +271,11 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  onEnterDOM(): void {
-    if (isDesktop()) {
-      this.setAttribute("desktop", "");
+  handleActiveRegionClose(): void {
+    if (!this.isSingleMode) {
+      this.handleSearchReset();
+      this._isActiveRegionOpen = false;
+      this.setActiveRegion(null);
     }
   }
 
@@ -280,26 +291,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  handleKeyDown(e: KeyboardEvent): void {
-    const item = e.target as UDExMastheadMenuItem;
-
-    if (item.hasAttribute("is-nav-item")) {
-      const isFirstItem = item === this.items[0];
-      const isLastItem = item === this.items[this.items.length - 1];
-
-      if (isTabNext(e) && !isLastItem) {
-        e.preventDefault();
-        this.focusNextItem(item);
-      }
-      if (isTabPrevious(e) && !isFirstItem) {
-        e.preventDefault();
-        this.focusPreviousItem(item);
-      }
-      this.handleHomeKey(e);
-      this.handleEndKey(e);
-    }
-  }
-
   handleSearch(e: CustomEvent): void {
     const searchTerm = e.detail.value.toLowerCase().trim() as string;
 
@@ -348,9 +339,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
       if (e.target !== this && !this.isMobile) {
-        this.handleSearchReset();
-        this._isActiveRegionOpen = false;
-        this.setActiveRegion(null);
+        this.handleActiveRegionClose();
       }
     });
   }
@@ -392,50 +381,12 @@ class UDExMastheadCountrySelector extends UI5Element {
     prevItem.focus({ preventScroll: true });
   }
 
-  focusLastItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const lastItem = this.items[lastItemIndex];
-
-    this.items[currentIndex]._tabIndex = "-1";
-    lastItem._tabIndex = "0";
-    lastItem.scrollIntoView({ block: "end" });
-    lastItem.focus({ preventScroll: true });
-  }
-
-  focusFirstItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+  focusFirstItem(): void {
     const firstItem = this.items[0];
-
-    this.items[currentIndex]._tabIndex = "-1";
     firstItem._tabIndex = "0";
     firstItem.focus();
   }
 
-  handleEndKey(e: KeyboardEvent): void {
-    if (isEnd(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.removeScrollableClassInCountryList();
-      }
-
-      this.focusLastItem(e);
-    }
-  }
-
-  handleHomeKey(e: KeyboardEvent): void {
-    if (isHome(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.addScrollableClassToCountryList();
-      }
-
-      this.focusFirstItem(e);
-    }
-  }
-
   handleSingleRegionMode(): void {
     this.setActiveRegion(this.regionsData[0]);
     this.setActiveCountries([...this.regionsData[0].countries]);
@@ -490,17 +441,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._activeCountries = countries;
   }
 
-  setTabIndexForItems(): void {
-    this.items.forEach((item, index) => {
-      if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {
-        item._tabIndex = index === this._activeRegionIndex ? "0" : "-1";
-        return;
-      }
-
-      item._tabIndex = index === 0 ? "0" : "-1";
-    });
-  }
-
   closeMenu():void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();

package/src/MessageStrip.ts

@@ -64,6 +64,39 @@ class UDExMessageStrip extends MessageStrip {
   @property({ type: Boolean })
     hideCloseButton!: boolean;
 
+  /**
+   * Defines custom status text for information type
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    statusInformationText!: string;
+
+  /**
+   * Defines custom status text for success type
+   * @default ""
+   * @public
+   */
+  @property()
+    statusSuccessText!: string;
+
+  /**
+   * Defines custom status text for error type
+   * @default ""
+   * @public
+   */
+  @property()
+    statusErrorText!: string;
+
+  /**
+   * Defines custom status text for warning type
+   * @default ""
+   * @public
+   */
+  @property()
+    statusWarningText!: string;
+
   /**
    * Defines accessible name for close icon
    *
@@ -105,10 +138,10 @@ class UDExMessageStrip extends MessageStrip {
 
   textStatusTypeMapping(): Record<string, string> {
     return {
-      [UDExMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),
-      [UDExMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),
-      [UDExMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),
-      [UDExMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),
+      [UDExMessageStripDesign.Information]: this.statusInformationText || this.getTranslation(MESSAGE_STRIP_INFORMATION),
+      [UDExMessageStripDesign.Positive]: this.statusSuccessText || this.getTranslation(MESSAGE_STRIP_SUCCESS),
+      [UDExMessageStripDesign.Negative]: this.statusErrorText || this.getTranslation(MESSAGE_STRIP_ERROR),
+      [UDExMessageStripDesign.Warning]: this.statusWarningText || this.getTranslation(MESSAGE_STRIP_WARNING),
       [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
     };
   }

package/src/Search.ts

@@ -295,6 +295,15 @@ class UDExSearch extends UI5Element {
    */
   @property({ type: String })
     suggestionList!: string;
+
+  /**
+   * Sets the maximum number of characters available in the input field.
+   *
+   * @public
+   */
+  @property({ type: Number })
+    maxlength?: number;
+
   /**
    * Width of the search component
    * @private

package/src/SearchTemplate.tsx

@@ -189,6 +189,7 @@ function renderSearchInput(this: UDExSearch, placeholder: boolean = false) {
       aria-label={this.accInfo.ariaLabel}
       aria-describedby="search-description"
       {...(placeholder ? { placeholder: this.effectivePlaceholder } : {})}
+      maxlength={this.maxlength}
       value={this.value}
       onInput={this.handleSearchChange}
       onKeyDown={this.handleKeyDown}

package/src/SearchableListBase.ts

@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
-import { UDExListMode } from "./types/List.js";
+import { UDExListMode, UDExListStyleType } from "./types/List.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
 import type { UDExProcessedItem } from "./types/SearchableListBase.js";
@@ -217,6 +217,24 @@ class UDExSearchableListBase extends UI5Element {
   @property()
     mode: `${UDExListMode}` = UDExListMode.SingleSelect;
 
+  /**
+   * Defines the list style type of the dropdown items.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    type: `${UDExListStyleType}` = UDExListStyleType.None;
+
+  /**
+   * Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    itemIcon: string = "";
+
   /**
    * Slot for items.
    *
@@ -382,13 +400,20 @@ class UDExSearchableListBase extends UI5Element {
       const { isGroup, item } = preparedItem;
 
       if (isGroup) {
-        preparedItem.groupItems = this.filterItemsForLabel(preparedItem.groupItems, str);
+        const groupHeaderMatches = this.checkAndUpdateLabel(item, str);
+        const filteredChildren = this.filterItemsForLabel(preparedItem.groupItems, str);
+
+        if (groupHeaderMatches) {
+          preparedItem.groupItems.forEach(child => this.checkAndUpdateLabel(child, str));
+        } else {
+          preparedItem.groupItems = filteredChildren;
+        }
 
-        if (hasSearchQuery && preparedItem.groupItems.length > 0) {
+        if (hasSearchQuery && (groupHeaderMatches || preparedItem.groupItems.length > 0)) {
           item.collapsed = false;
         }
 
-        return preparedItem.groupItems.length > 0;
+        return !hasSearchQuery || groupHeaderMatches || preparedItem.groupItems.length > 0;
       }
 
       return this.checkAndUpdateLabel(item, str);
@@ -413,6 +438,8 @@ class UDExSearchableListBase extends UI5Element {
       item.label = this.addSearchTermTag(cleanedLabel, str);
       return true;
     }
+
+    item.label = cleanedLabel;
     return false;
   }
 

package/src/SearchableListBaseTemplate.tsx

@@ -51,7 +51,9 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           accessible-role={this.accessibleRoleForList}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
-          mode={this.mode}>
+          mode={this.mode}
+          type={this.type}
+          item-icon={this.itemIcon}>
           {this._filteredItems.map((processedItem, index) => (
             processedItem.isGroup
               ? renderGroup.call(this, processedItem, index)
@@ -99,6 +101,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
     <UDExListGroupHeader
       key={index}
       role="group"
+      {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
       non-interactive={header.nonInteractive}
@@ -149,6 +152,15 @@ function renderListItem(
       rating-count={item.ratingCount}
       rating-max={item.ratingMax}
       label={item.label}
+      image={item.image}
+      image-alt={item.imageAlt}
+      image-badge-state={item.imageBadgeState}
+      image-shape={item.imageShape}
+      image-size={item.imageSize}
+      flag={item.flag}
+      flag-position={item.flagPosition}
+      size={item.size}
+      type={item.type}
       {...(accessibleRole ? { "accessible-role": accessibleRole } : {})}
       {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
     </UDExListItem>

package/src/SelectBox.ts

@@ -34,6 +34,7 @@ import SelectBoxTemplate from "./SelectBoxTemplate.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 import type { UDExSelectBaseEvents } from "./SelectBase.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -248,12 +249,15 @@ class UDExSelectBox extends UDExSelectBase {
     this.fireEventDropdownClose();
   }
 
-  handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
+  async handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
     tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
-    this.tokenizer.deleteToken(tag as Token, true);
+    this.tokenizer.deleteToken(tag as Token);
     this.handleDropdownItemPress(tagId);
     this.fireDecoratorEventRemove(tagId);
+    await renderFinished();
+    this._focused = true;
+    this._search.focus();
   }
 
   handleRemoveTruncatableTag() {
@@ -265,7 +269,15 @@ class UDExSelectBox extends UDExSelectBase {
 
   handleTagClick(e: CustomEvent) {
     const tag = e.detail.tag as UDExTag;
-    this.toggleTruncatedPopover(tag);
+
+    if (!tag.isTruncatable) {
+      this._showTagsDropdownContent = false;
+      tag.selected = false;
+    }
+
+    if (tag.isTruncatable && !this._open) {
+      this.toggleTruncatedPopover(tag);
+    }
   }
 
   handleUnselectTruncatableTag() {
@@ -384,17 +396,10 @@ class UDExSelectBox extends UDExSelectBase {
   }
 
   toggleTruncatedPopover(tag: UDExTag) {
-    if (!tag.isTruncatable) {
-      this._showTagsDropdownContent = false;
-      tag.selected = false;
-    }
-
-    if (tag.isTruncatable && !this._open) {
-      this._truncatableTag = tag;
-      this._truncatableTag.selected = true;
-      this._showTagsDropdownContent = true;
-      this.openDropdown();
-    }
+    this._truncatableTag = tag;
+    this._truncatableTag.selected = true;
+    this._showTagsDropdownContent = true;
+    this.openDropdown();
   }
 
   configureTokenizer() {

package/src/SelectBoxItem.ts

@@ -6,6 +6,8 @@ import property from "@ui5/webcomponents-base/decorators/property.js";
 import { UDExAdditionalTextState } from "./types/List.js";
 import UDExButton from "./Button.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
+import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 
 /**
  * @class
@@ -29,10 +31,18 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 @customElement({
   tag: "udex-select-box-item",
   renderer: litRender,
-  dependencies: [UDExButton],
+  dependencies: [UDExButton, UDExAvatar],
 })
 
 class UDExSelectBoxItem extends UDExListItemBase {
+  /**
+   * Defines the name of the UI5 Icon displayed for each item when type is Icon.
+   *
+   * @public
+   */
+  @property({ type: String })
+    itemIcon?: string;
+
   /**
    * Defines the additionalText, displayed at the end of the list item.
    *
@@ -50,6 +60,65 @@ class UDExSelectBoxItem extends UDExListItemBase {
   @property()
     additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;
 
+  /**
+   * Defines the image, displayed at the start of the item.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    flag?: boolean;
+
+  /**
+   * Defines the position for flag image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    flagPosition?: string;
+
+  /**
+   * Allows control over the image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    image?: string;
+
+  /**
+   * Allows control over the alternative text of the image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    imageAlt?: string;
+
+  /**
+   * Defines the image badge state of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    imageBadgeState?: `${UDExStatusBadgeValueState}`;
+
+  /**
+   * Defines the shape of the image.
+   *
+   * @default "Circle"
+   * @public
+   */
+  @property()
+    imageShape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;
+
+  /**
+   * Allows control over the size of the image.
+   *
+   * @default "S"
+   * @public
+   */
+  @property()
+    imageSize: `${UDExAvatarSize}` = UDExAvatarSize.S;
+
   /**
    * Slot for first icon.
    *

package/src/Tag.ts

@@ -265,6 +265,14 @@ class UDExTag extends UI5Element {
     }
   }
 
+  _onIconMouseDown(e: MouseEvent): void {
+    const target = e.currentTarget as HTMLElement;
+
+    if (target === this.shadowRoot?.querySelector("[ui5-icon]")) {
+      this.toBeDeleted = true;
+    }
+  }
+
   _handleResize() {
     if (this.isTruncatable) {
       this.title = this.text;

package/src/TagTemplate.tsx

@@ -76,6 +76,7 @@ function tagIcon(this: UDExTag, rootClass: string, iconType: string, isIconClick
       <UI5Icon
         class={`${rootClass}__icon ${rootClass}__icon--${iconType}`}
         name={this.icon}
+        onMouseDown={this._onIconMouseDown}
         {...(isIconClickable ? { onClick: this.iconClickHandler } : {})}>
       </UI5Icon>
     </>

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

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

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type MastheadCountrySelector from "../../MastheadCountrySelector.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector" @keydown="${this.handleKeyDown}">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div>`;}
+function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div>`;}
 function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }${ !this.hideSearch ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-country-selector__list-container"><div class="udex-masthead-country-selector__list-wrap" @scroll=${this.handleCountryListShadowVisible}><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</ul></div></div>`;}
 function block2 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__region-back-item" accessible-role="button" _accessible-Name="${ifDefined(this.backToRegionListAccessibleName)}" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-country-selector__region-back-item" accessible-role="button" _accessible-Name="${ifDefined(this.backToRegionListAccessibleName)}" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></udex-masthead-menu-item>`;}
 function block3 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-search", tags, suffix)} class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>` : html`<udex-search class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></udex-search><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>`;}

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
-export default `.udex-list{font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);list-style-type:none;padding:0;margin:0}.udex-list__hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}.udex-list__scroll-container{overflow:auto;height:100%}.udex-list__header-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE)}::slotted(udex-list-group-header:not(:last-child)){margin-bottom:var(--udexSpacer16, 16px);display:block}:host([mode="SingleContent"])::part(header){padding:var(--udexSpacer8, 8px) 0}:host([mode="RadioGroup"])::part(header),:host([mode="MultiSelect"])::part(header){padding:var(--udexSpacer8, 8px) var(--udexSpacer20, 20px)}
+export default `.udex-list{font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);list-style-type:none;padding:0;margin:0}.udex-list__hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}.udex-list__scroll-container{overflow:auto;height:100%}.udex-list__header-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400);padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE)}::slotted(udex-list-group-header:not(:last-child)){display:block}:host([mode="SingleContent"])::part(header){padding:var(--udexSpacer8, 8px) 0}:host([mode="RadioGroup"])::part(header),:host([mode="MultiSelect"])::part(header){padding:var(--udexSpacer8, 8px) var(--udexSpacer20, 20px)}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
-export default `:host{--udex-list-item-group-header-padding-vertical: var(--udexSpacer12, 12px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer16, 16px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-group-header-outline-border-color: var(--udexColorBlue10, #002A86)}.udex-list__header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;flex-direction:column}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--udexSpacer2, 2px)}.udex-list__group-list{list-style-type:none;padding:0;margin:0}.udex-list__group ::slotted([udex-list-item]){padding-inline-start:calc(var(--udexSpacer24) + var(--udexSpacer16));--udex-list-item-padding-inline-start: 0}.udex-list__header,.udex-list__group-header{font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group-list.udex-list__sticky{padding-top:59px}.udex-list__group-content{display:flex;border-top:1px solid var(--udex-list-item-group-header-border-color);padding:var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal);align-items:center;position:relative}.udex-list__group-content.udex-list_group-content__focusable:focus,.udex-list__group-content.udex-list_group-content__focusable:focus-visible{outline:none}.udex-list__group-content.udex-list_group-content__focusable:focus:before,.udex-list__group-content.udex-list_group-content__focusable:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-group-header-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}:host([mode="MultiSelect"]) .udex-list__group-header{border-bottom:1px solid var(--udex-list-item-group-header-border-color)}.udex-list__group_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group_large.udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__inactive-header{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE);display:flex;justify-content:space-between;align-items:center}.udex-list__inactive-header-content{display:flex;flex-direction:column}.udex-list__group-heading__icon{transform:rotate(-90deg);height:18px;width:18px;color:inherit;cursor:pointer;--udex-button-icon-s-size: 18px}.udex-list__group-heading__icon-wrapper{height:24px;width:24px;display:flex;justify-content:center;align-items:center;margin-inline-start:auto}:host(:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(-90deg)}:host([collapsible]) .udex-list__group-list__content,:host([collapsible])+.udex-list__group-list__content{max-height:var(--udex-list-content-max-height);overflow:hidden;transition:max-height .2s ease-in}:host([collapsible]) [udex-list-item][collapsed]+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__inactive-header+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__group-content+.udex-list__group-list__content,:host([collapsible][collapsed])+.udex-list__group-list__content,.udex-list__group-header[collapsible][collapsed]+.udex-list__group-list__content{max-height:0}:host([collapsible][mode="MultiSelect"]) header,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap{position:relative}:host([collapsible][mode="MultiSelect"]) header:focus,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus{outline:none}:host([collapsible][mode="MultiSelect"]) header:focus:before,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px)}
+export default `:host{--udex-list-item-group-header-padding-vertical: var(--udexSpacer12, 12px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer16, 16px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-group-header-outline-border-color: var(--udexColorBlue10, #002A86)}.udex-list__header{display:flex;flex-direction:column;width:100%}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--udexSpacer2, 2px)}.udex-list__group-list{list-style-type:none;padding:0;margin:0}.udex-list__group ::slotted([udex-list-item]){padding-inline-start:calc(var(--udexSpacer24) + var(--udexSpacer16));--udex-list-item-padding-inline-start: 0}.udex-list__header,.udex-list__group-header{font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyHeadingRegularXXXSFontSize, 18px);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-list__group-list.udex-list__sticky{padding-top:59px}.udex-list__group-content{display:flex;border-top:1px solid var(--udex-list-item-group-header-border-color);padding:var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal);align-items:center;position:relative}:host([mode="MultiSelect"][_no-border]) .udex-list__group-header,:host([_no-border]) .udex-list__group-content{border-top:none}.udex-list__group-content.udex-list_group-content__focusable:focus,.udex-list__group-content.udex-list_group-content__focusable:focus-visible{outline:none}.udex-list__group-content.udex-list_group-content__focusable:focus:before,.udex-list__group-content.udex-list_group-content__focusable:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-group-header-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}:host([mode="MultiSelect"]) .udex-list__group-header{border-top:1px solid var(--udex-list-item-group-header-border-color)}.udex-list__group_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group_large.udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__inactive-header{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE);display:flex;justify-content:space-between;align-items:center}.udex-list__inactive-header-content{display:flex;flex-direction:column}.udex-list__group-heading__icon{transform:rotate(-90deg);height:18px;width:18px;color:inherit;cursor:pointer;--udex-button-icon-s-size: 18px}:host(:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(-90deg)}:host([collapsible]) .udex-list__group-list__content,:host([collapsible])+.udex-list__group-list__content{max-height:var(--udex-list-content-max-height);overflow:hidden;transition:max-height .2s ease-in}:host([collapsible]) [udex-list-item][collapsed]+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__inactive-header+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__group-content+.udex-list__group-list__content,:host([collapsible][collapsed])+.udex-list__group-list__content,.udex-list__group-header[collapsible][collapsed]+.udex-list__group-list__content{max-height:0}:host([collapsible][mode="MultiSelect"]) header,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap{position:relative}:host([collapsible][mode="MultiSelect"]) header:focus,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus{outline:none}:host([collapsible][mode="MultiSelect"]) header:focus:before,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px)}
 `