@sapudex/web-components 2.48.0 → 2.49.0

package/src/PromoTile.ts

@@ -240,7 +240,7 @@ class UDExPromoTile extends UI5Element {
     const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
     const isDarkMode = this._colorMode === UDExPromoTileMode.dark;
     const defaultButtonDesign = isDarkMode ? UDExButtonDesign.Secondary : UDExButtonDesign.Primary;
-    const modeColor = isDarkMode ? "var(--udexCoreTextLight)" : "inherit";
+    const modeColor = isDarkMode ? "var(--udexColorNeutralWhite)" : "inherit";
 
     if (this._button) {
       this._button.design = this.buttonDesign || defaultButtonDesign;

package/src/SearchableListBase.ts

@@ -247,11 +247,11 @@ class UDExSearchableListBase extends UI5Element {
   /**
    * Defines the default accessible role for the list component.
    *
-   * @default "list"
+   * @default "listbox"
    * @public
    */
   @property({ type: String })
-    defaultAccessibleRole: string = "list";
+    defaultAccessibleRole: string = "listbox";
 
   /**
    * Defines the filtered items for the component.
@@ -582,7 +582,7 @@ class UDExSearchableListBase extends UI5Element {
     if (firstItem.isGroup) {
       list.focusHeader(firstItem);
     } else {
-      firstItem.focus();
+      list.focusItem(firstItem);
     }
   }
 
@@ -720,6 +720,18 @@ class UDExSearchableListBase extends UI5Element {
     return this.modeMultiSelect && isGrouping;
   }
 
+  /**
+   * Whether the dropdown list should use the ARIA tree pattern
+   * (role="tree"/"treeitem" with aria-expanded / aria-selected / aria-checked).
+   *
+   * Base implementation is never a tree. Subclasses that support grouped
+   * hierarchical navigation (e.g. UDExFilterMenu) override this with their
+   * own mode/collapsible rules.
+   */
+  get isTreeStructure(): boolean {
+    return false;
+  }
+
   get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
@@ -743,16 +755,21 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get roleForGroupList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : "none";
+    // Host is always transparent; the shadow-inner div carries the widget role
+    // (tree/listbox) via accessibleRoleForList.
+    return "none";
   }
 
   get accessibleRoleForList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
+    if (this.isTreeStructure) {
+      return "tree";
+    }
+    return this.defaultAccessibleRole;
   }
 
   get listItemRole(): string {
-    if (this.accessibleRoleForList === "list") {
-      return "listitem";
+    if (this.isTreeStructure) {
+      return "treeitem";
     }
 
     if (this.accessibleRoleForList === "listbox") {

package/src/SearchableListBaseTemplate.tsx

@@ -49,6 +49,7 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           id="udex-list"
           role={this.roleForGroupList as AriaRole}
           accessible-role={this.accessibleRoleForList}
+          {...(this.isTreeStructure && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {})}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
           mode={this.mode}
@@ -97,10 +98,12 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
 function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
+  const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
   return (
     <UDExListGroupHeader
       key={index}
-      role="group"
+      role={this.isTreeStructure ? "none" : "group"}
+      _tree-mode={this.isTreeStructure || undefined}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
@@ -118,7 +121,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onSecondIconClick={this.fireSecondIconClickEvent}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
       )}
     </UDExListGroupHeader>
   );

package/src/SelectBase.ts

@@ -225,6 +225,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._trigger = this.trigger;
     this.handleDirection();
 
+    if (this._list) {
+      this._list._scrollIntoView = "Nearest";
+    }
+
     if (this._requestRender) {
       this._requestRender = false;
     }
@@ -299,12 +303,18 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (isRight(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, false)) {
+        return;
+      }
       this._handleArrowRightInRow(e.target as HTMLElement);
       return;
     }
 
     if (isLeft(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, true)) {
+        return;
+      }
       this._handleArrowLeftInRow(e.target as HTMLElement);
       return;
     }
@@ -617,6 +627,51 @@ class UDExSelectBase extends UDExSearchableListBase {
     return (iconSlot === "firstIcon" || iconSlot === "secondIcon") ? iconSlot : null;
   }
 
+  /**
+   * Collapses (Left) or expands (Right) a collapsible group header when the arrow key
+   * is pressed while focus is on that header. Mirrors List.handleArrowLeft/Right, but is
+   * needed here because SelectBox intercepts Left/Right at the popover level (for icon-row
+   * navigation) before the event would reach the List's own handler.
+   *
+   * Returns true when a collapse/expand was handled, so the caller skips icon-row handling.
+   */
+  _handleGroupHeaderCollapse(target: HTMLElement, collapse: boolean): boolean {
+    const header = this._resolveCollapsibleGroupHeader(target);
+    if (!header) { return false; }
+
+    // Left only collapses an expanded group; Right only expands a collapsed one.
+    if (collapse && !header.collapsed) {
+      header.collapsed = true;
+      this._list.setCollapsedItems(true, header);
+      return true;
+    }
+    if (!collapse && header.collapsed) {
+      header.collapsed = false;
+      this._list.setCollapsedItems(false, header);
+      return true;
+    }
+    // Target is a collapsible header but already in the requested state — still consume
+    // the key so it does not fall through to icon-row navigation.
+    return header.isGroup;
+  }
+
+  /**
+   * Resolves the collapsible group-header host from a keydown target, walking up through
+   * shadow host boundaries (the focused element can be the header's inner wrapper/list-item).
+   */
+  _resolveCollapsibleGroupHeader(target: HTMLElement): UDExListItemBase | null {
+    let node: Node | null = target;
+    while (node) {
+      const el = node as UDExListItemBase;
+      if (el.isGroup && typeof el.hasAttribute === "function" && el.hasAttribute("collapsible")) {
+        return el;
+      }
+      const root = node.getRootNode() as ShadowRoot | Document;
+      node = (root as ShadowRoot).host ?? null;
+    }
+    return null;
+  }
+
   _handleArrowRightInRow(target: HTMLElement): void {
     const iconSlot = this._getIconButtonSlot(target);
     if (!iconSlot) {
@@ -642,7 +697,7 @@ class UDExSelectBase extends UDExSearchableListBase {
       const firstIcon = parentItem.querySelector<HTMLElement>("[slot=\"firstIcon\"]");
       firstIcon?.focus();
     } else if (iconSlot === "firstIcon") {
-      (parentItem as UDExListItemBase).focus();
+      this._list.focusItem(parentItem as UDExListItemBase);
     }
   }
 
@@ -680,7 +735,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     this._list.unsetTabIndexByIndex(items, currentIndex);
     this._list.setTabIndexByIndex(items, targetIndex);
-    items[targetIndex].focus();
+    this._list.focusItem(items[targetIndex]);
     this._selectedOption = items[targetIndex].label;
   }
 
@@ -697,7 +752,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (lastItem.isGroup) {
       this._list.focusHeader(lastItem);
     } else {
-      lastItem.focus();
+      this._list.focusItem(lastItem);
     }
   }
 

package/src/SelectBoxTemplate.tsx

@@ -76,6 +76,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             <UI5Popover
               id={this.popoverId}
               allow-target-overlap={this.allowTargetOverlap}
+              accessible-role="None"
               onKeyDown={this.handleKeyDownDropdown}
               {...({
                 onSelectAll: this.handleSelectAll,

package/src/TabNavigation.ts

@@ -139,6 +139,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Defines the orientation of the tab navigation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. Only `Horizontal` orientation should be used.
    * @public
    * @default "Horizontal"
    */
@@ -149,6 +150,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the placement of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Start"
    */
@@ -159,6 +161,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the vertical alignment of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Top"
    */
@@ -168,6 +171,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Enables automatic tab switching for Vertical orientation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default false
    */
@@ -178,6 +182,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the interval in milliseconds between automatic tab switches.
    * Applies only when autoPlay is enabled.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation with autoPlay.
    * @public
    * @default 5000
    */
@@ -256,6 +261,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines optional content rendered below the tab list in Vertical orientation.
    * Use to place a button or any action element beneath the tabs.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This slot only applies to Vertical orientation.
    * @slot footer
    * @public
    */

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

@@ -5,27 +5,30 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListGroupHeader from "../../ListGroupHeader.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-heading">${ this.collapsible ? block1.call(this, context, tags, suffix) : 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">${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">${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">${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">${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>`;}
-function block20 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
+function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="${ifDefined(this.groupWrapperRole)}" ${ !this.isTreeAccessibleRole ? block1.call(this, context, tags, suffix) : undefined }>${ this.collapsible ? block2.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }</div> `;}
+function block1 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`aria-labelledby="group-heading"`;}
+function block2 (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.useListItemHeader ? block3.call(this, context, tags, suffix) : block7.call(this, context, tags, suffix) }<div id="${ifDefined(this.ariaControlsId)}" role="${ifDefined(this.contentRegionRole)}" class="udex-list__group-list__content">${ !this.isTreeAccessibleRole ? block12.call(this, context, tags, suffix) : undefined }<slot></slot>${ !this.isTreeAccessibleRole ? block13.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block4.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
+function block4 (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 ? block5.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 ? block5.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 block5 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ">${ifDefined(this.supportingText)}</span>`;}
+function block6 (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="${ifDefined(this.collapsibleHeaderAccessibleRole)}" _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="${ifDefined(this.collapsibleHeaderAccessibleRole)}" _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 block7 (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="${ifDefined(this.singleCollapsibleHeaderRole)}" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block8.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block9.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block10.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 ? block11.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="${ifDefined(this.singleCollapsibleHeaderRole)}" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block8.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block9.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block10.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 ? block11.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 block8 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block9 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block10 (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 block11 (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 block12 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="listbox" aria-label="group">`;}
+function block13 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`</div>`;}
+function block14 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="${ifDefined(this.nonCollapsibleContainerRole)}" class="udex-list__group-list" name="group" aria-label="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block15.call(this, context, tags, suffix) : block19.call(this, context, tags, suffix) }<slot></slot></div>`;}
+function block15 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block16.call(this, context, tags, suffix) : block18.call(this, context, tags, suffix) }`;}
+function block16 (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 ? block17.call(this, context, tags, suffix) : undefined }</div></header>`;}
+function block17 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text">${ifDefined(this.supportingText)}</span>`;}
+function block18 (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)}" accessible-role="${ifDefined(this.nonCollapsibleHeaderAccessibleRole)}"></${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)}" accessible-role="${ifDefined(this.nonCollapsibleHeaderAccessibleRole)}"></udex-list-item>`;}
+function block19 (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 ? block20.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block21.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block22.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 ? block23.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block20 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block21 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block22 (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 block23 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
 
 function template(this: ListGroupHeader) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

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

@@ -6,8 +6,8 @@ import type ListItem from "../../ListItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block23.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block10.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }${ this.collapsible ? block22.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
-function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
+function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" aria-checked="${ifDefined(this.ariaCheckedValue)}" aria-selected="${ifDefined(this.ariaSelectedValue)}" aria-expanded="${ifDefined(this.ariaExpandedValue)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block10.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }${ this.collapsible ? block22.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}" ?aria-hidden="${this.checkboxAriaHidden}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}" ?aria-hidden="${this.checkboxAriaHidden}"></udex-checkbox>`;}
 function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
 function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
 function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}

package/src/generated/themes/Accordion.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-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;margin-inline-start:auto}.udex-accordion__btn::part(button){padding-inline:var(--udexSpacer12,12px)}
+export default `:host{--udex-accordion-heading-color: var(--sapTitleColor, var(--udexColorNeutralBlack));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;margin-inline-start:auto}.udex-accordion__btn::part(button){padding-inline:var(--udexSpacer12,12px)}
 `

package/src/generated/themes/AccordionItem.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-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--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(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;--udex-accordion-item-button-icon-m-size: 16px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.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)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-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:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host(:dir(rtl)) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}:host([expanded]:dir(rtl)) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}.udex-accordion-item__icon{height:var(--udex-accordion-item-button-icon-m-size);width:var(--udex-accordion-item-button-icon-m-size);color:var(--udex-accordion-item-icon-color)}.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}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
+export default `:host{--udex-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexColorNeutralBlack));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--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(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;--udex-accordion-item-button-icon-m-size: 16px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.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)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-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:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host(:dir(rtl)) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}:host([expanded]:dir(rtl)) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}.udex-accordion-item__icon{height:var(--udex-accordion-item-button-icon-m-size);width:var(--udex-accordion-item-button-icon-m-size);color:var(--udex-accordion-item-icon-color)}.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}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
 `

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

@@ -0,0 +1,9 @@
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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-accordion-spotlight-nav-width: 25%;--udex-accordion-spotlight-nav-gap: var(--udexSpacer16, 16px);--udex-accordion-spotlight-nav-gap-mobile: var(--udexSpacer16, 16px);--udex-accordion-spotlight-nav-color: var(--udexColorGrey7, #475E75);--udex-accordion-spotlight-nav-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-accordion-spotlight-nav-font-family: var(--sapFontFamily, sans-serif);--udex-accordion-spotlight-gap: var(--udexSpacer48, 48px);--udex-accordion-spotlight-btn-color: var(--udexColorNeutralBlack, #000);--udex-accordion-spotlight-btn-color-hover: var(--udexColorBlue8, #0057D2);--udex-accordion-spotlight-btn-color-active: var(--udexColorBlue8, #0057D2);--udex-accordion-spotlight-btn-font-size: var(--udexTypographyHeadingRegularXXSFontSize, 20px);--udex-accordion-spotlight-btn-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-spotlight-btn-font-family: var(--sapFontFamily, sans-serif);--udex-accordion-spotlight-btn-line-height: 1.1;--udex-accordion-spotlight-btn-padding: var(--udexSpacer16, 16px);--udex-accordion-spotlight-indicator-color: var(--udexColorBlue8, #0057D2);--udex-accordion-spotlight-indicator-width: 3px;--udex-accordion-spotlight-border-color: var(--udexColorGrey3, #D5DADD);--udex-accordion-spotlight-content-font-family: var(--sapFontFamily, sans-serif);--udex-accordion-spotlight-content-font-size: var(--udexTypographyBodyXSFontSize, 14px);--udex-accordion-spotlight-content-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-accordion-spotlight-transition: color .2s ease-in;--udex-accordion-spotlight-panel-duration: .5s;--udex-accordion-spotlight-panel-easing: ease;--udex-accordion-spotlight-media-width: 100%;--udex-accordion-spotlight-border-radius: var(--udexRadiusM, 8px);display:block}.udex-accordion-spotlight{display:flex;gap:var(--udex-accordion-spotlight-gap);width:100%;overflow:hidden}.udex-accordion-spotlight__nav{flex:0 0 var(--udex-accordion-spotlight-nav-width);align-self:var(--udex-accordion-spotlight-nav-alignment, flex-start);font-family:var(--udex-accordion-spotlight-nav-font-family);font-size:var(--udex-accordion-spotlight-nav-font-size);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-accordion-spotlight-nav-color);line-height:var(--udex-accordion-spotlight-content-line-height)}.udex-accordion-spotlight__nav-holder{gap:var(--udex-accordion-spotlight-nav-gap);border-inline-start:1px solid var(--udex-accordion-spotlight-border-color);box-sizing:border-box;display:flex;flex-direction:column}.udex-accordion-spotlight__play-button{margin-block-end:var(--udexSpacer16, 16px);align-self:flex-start;margin-inline-start:var(--udexSpacer16, 16px)}:host([vertical-alignment="Center"]){--udex-accordion-spotlight-nav-alignment: center}:host([placement="End"]) .udex-accordion-spotlight__nav{order:1}.udex-accordion-spotlight__nav-item{position:relative;padding:var(--udex-accordion-spotlight-btn-padding);display:flex;flex-direction:column;align-items:flex-start}.udex-accordion-spotlight-item__expand{display:grid;grid-template-rows:0fr;opacity:0;width:100%;margin-block-start:0;transition:grid-template-rows var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),margin-block-start var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing)}.udex-accordion-spotlight-item__expand--open{grid-template-rows:1fr;opacity:1;margin-block-start:var(--udexSpacer16, 16px)}.udex-accordion-spotlight-item__expand-inner{overflow:hidden;display:flex;flex-direction:column;gap:var(--udexSpacer16, 16px);padding-inline:4px;margin-inline:-4px;padding-block-end:4px;margin-block-end:-4px}.udex-accordion-spotlight-item__button{background:none;border:0;padding:0;border-radius:0;cursor:pointer;display:flex;flex-direction:column;text-align:start;color:var(--udex-accordion-spotlight-btn-color);font-family:var(--udex-accordion-spotlight-btn-font-family);font-size:var(--udex-accordion-spotlight-btn-font-size);font-weight:var(--udex-accordion-spotlight-btn-font-weight);line-height:var(--udex-accordion-spotlight-btn-line-height)}.udex-accordion-spotlight-item__button:hover{color:var(--udex-accordion-spotlight-btn-color-hover)}.udex-accordion-spotlight-item__button:focus,.udex-accordion-spotlight-item__button:focus-visible{outline:none}:host([desktop]) .udex-accordion-spotlight-item__button:focus,.udex-accordion-spotlight-item__button:focus-visible{outline:2px solid var(--udex-accordion-spotlight-indicator-color);border-radius:var(--udexRadiusXXS, 2px)}.udex-accordion-spotlight-item__button--active{color:var(--udex-accordion-spotlight-btn-color-active)}.udex-accordion-spotlight-item__button--active:before{content:"";position:absolute;inset-inline-start:-1px;inset-block:0;width:var(--udex-accordion-spotlight-indicator-width);background-color:var(--udex-accordion-spotlight-indicator-color);border-start-end-radius:var(--udexRadiusXXS, 2px);border-end-end-radius:var(--udexRadiusXXS, 2px);z-index:1}.udex-accordion-spotlight__content{flex:1 1 0;font-family:var(--udex-accordion-spotlight-content-font-family);font-size:var(--udex-accordion-spotlight-content-font-size);line-height:var(--udex-accordion-spotlight-content-line-height);padding-inline-start:var(--udexSpacer16, 16px);display:grid}.udex-accordion-spotlight__content>.udex-accordion-spotlight__panel{grid-area:1 / 1;display:block;transition:opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing)}.udex-accordion-spotlight__panel{opacity:0;height:0;pointer-events:none}.udex-accordion-spotlight__panel--open{opacity:1;height:auto;pointer-events:auto}.udex-accordion-spotlight__panel-inner{overflow:hidden}.udex-accordion-spotlight-item__links{display:flex;flex-direction:column;gap:var(--udexSpacer4, 4px)}.udex-accordion-spotlight__footer{margin-block-start:var(--udexSpacer20, 20px);margin-inline-start:var(--udexSpacer16, 16px)}.udex-accordion-spotlight__media{flex:1 1 0;display:flex;align-items:var(--udex-accordion-spotlight-nav-alignment, flex-start);overflow:hidden}.udex-accordion-spotlight__media ::slotted(img),.udex-accordion-spotlight__media ::slotted(video){display:block;width:var(--udex-accordion-spotlight-media-width);border-radius:var(--udex-accordion-spotlight-border-radius)}@media (prefers-reduced-motion: reduce){.udex-accordion-spotlight__panel,.udex-accordion-spotlight-item__expand,.udex-accordion-spotlight-item__button{transition:none}}@media (max-width: 979px){.udex-accordion-spotlight__nav-item:has(~.udex-accordion-spotlight__nav-item){margin-bottom:var(--udex-accordion-spotlight-nav-gap-mobile)}.udex-accordion-spotlight__nav-holder{gap:0}.udex-accordion-spotlight__media{width:100%;flex:0 0 auto;margin-block-start:var(--udexSpacer16, 16px)}.udex-accordion-spotlight{flex-direction:column;gap:0}.udex-accordion-spotlight__nav{flex:0 0 100%;width:100%}.udex-accordion-spotlight__panel{height:inherit;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing),opacity var(--udex-accordion-spotlight-panel-duration) var(--udex-accordion-spotlight-panel-easing)}.udex-accordion-spotlight__panel--open{grid-template-rows:1fr;margin:var(--udexSpacer8, 8px) 0 var(--udexSpacer24, 24px)}.udex-accordion-spotlight__panel-inner{padding-inline-start:var(--udexSpacer16, 16px);font-family:var(--udex-accordion-spotlight-content-font-family);font-size:var(--udex-accordion-spotlight-content-font-size);line-height:var(--udex-accordion-spotlight-content-line-height)}}
+`

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

@@ -0,0 +1,9 @@
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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{display:contents}
+`

package/src/generated/themes/Badge.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-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-medium-font-size: .875rem;--udex-info-badge-text-medium-line-height: 1.313rem;--udex-info-badge-text-medium-height: 1.813rem;--udex-info-badge-text-medium-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-medium-font-size: .875rem;--udex-info-badge-number-medium-line-height: 1rem;--udex-info-badge-number-medium-height: 1rem;--udex-info-badge-number-medium-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-badge-min-width: 20px;--udex-neutral-badge-color-neutral-border-color: var(--udexColorBlue8, #0057D2);--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-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));--udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));--udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));--udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));--udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-positive-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-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));--udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));--udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-blue-background: var(--udexColorBlue8, #0057D2);--udex-number-badge-color-red-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-red-background: var(--sapNegativeBackgroundColor, #d20a0a);--udex-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-light-border-color: var(--udexColorGrey3, #D5DADD);--udex-text-badge-grey-light-text-color: var(--udexColorGrey8, #354A5F);--udex-text-badge-grey-light-background: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-border-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-dark-text-color: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-background: var(--udexColorGrey8, #354A5F);--udex-text-badge-red-light-border-color: var(--udexColorRed3, #FFB2D2);--udex-text-badge-red-light-text-color: var(--udexColorRed8, #AA0808);--udex-text-badge-red-light-background: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-border-color: var(--udexColorRed9, #840606);--udex-text-badge-red-dark-text-color: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-background: var(--udexColorRed8, #AA0808);--udex-text-badge-mango-light-border-color: var(--udexColorMango3, #FFDF72);--udex-text-badge-mango-light-text-color: var(--udexColorMango8, #A93E00);--udex-text-badge-mango-light-background: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-border-color: var(--udexColorMango9, #8D2A00);--udex-text-badge-mango-dark-text-color: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-background: var(--udexColorMango8, #A93E00);--udex-text-badge-green-light-border-color: var(--udexColorGreen3, #BDE986);--udex-text-badge-green-light-text-color: var(--udexColorGreen8, #256F3A);--udex-text-badge-green-light-background: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-border-color: var(--udexColorGreen9, #1E592F);--udex-text-badge-green-dark-text-color: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-background: var(--udexColorGreen8, #256F3A);--udex-text-badge-teal-light-border-color: var(--udexColorTeal3, #64EDD2);--udex-text-badge-teal-light-text-color: var(--udexColorTeal8, #046C7A);--udex-text-badge-teal-light-background: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-border-color: var(--udexColorTeal9, #035663);--udex-text-badge-teal-dark-text-color: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-background: var(--udexColorTeal8, #046C7A);--udex-text-badge-blue-light-border-color: var(--udexColorBlue3, #A6E0FF);--udex-text-badge-blue-light-text-color: var(--udexColorBlue8, #0057D2);--udex-text-badge-blue-light-background: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-border-color: var(--udexColorBlue9, #0040B0);--udex-text-badge-blue-dark-text-color: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-background: var(--udexColorBlue8, #0057D2);--udex-text-badge-indigo-light-border-color: var(--udexColorIndigo3, #D3B6FF);--udex-text-badge-indigo-light-text-color: var(--udexColorIndigo8, #470CED);--udex-text-badge-indigo-light-background: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-border-color: var(--udexColorIndigo9, #2C13AD);--udex-text-badge-indigo-dark-text-color: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-background: var(--udexColorIndigo8, #470CED);--udex-text-badge-pink-light-border-color: var( --udexColorPink3, #FFAFED);--udex-text-badge-pink-light-text-color: var(--udexColorPink8, #A100C2);--udex-text-badge-pink-light-background: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-border-color: var(--udexColorPink9, #7800A4);--udex-text-badge-pink-dark-text-color: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-background: var(--udexColorPink8, #A100C2);--udex-text-badge-raspberry-light-border-color: var(--udexColorRaspberry3, #FECBDA);--udex-text-badge-raspberry-light-text-color: var(--udexColorRaspberry8, #BA066C);--udex-text-badge-raspberry-light-background: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-border-color: var(--udexColorRaspberry9, #9B015D);--udex-text-badge-raspberry-dark-text-color: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-background: var(--udexColorRaspberry8, #BA066C)}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;justify-content:center;align-items:center;gap:var(--udexSpacer4, 4px);min-width:var(--udex-badge-min-width)}.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--medium{line-height:var(--udex-info-badge-text-medium-line-height);height:var(--udex-info-badge-text-medium-height);font-size:var(--udex-info-badge-text-medium-font-size);padding:var(--udex-info-badge-text-medium-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--information{background:var(--udex-info-badge-color-information-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-information-border-color);color:var(--udex-info-badge-color-information-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--neutral .udex-badge__icon{color:var(--udex-neutral-badge-color-neutral-border-color)}.udex-badge--text.udex-badge--positive{background:var(--udex-info-badge-color-positive-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-positive-border-color);color:var(--udex-info-badge-color-positive-text-color)}.udex-badge--text.udex-badge--negative{background:var(--udex-info-badge-color-negative-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-negative-border-color);color:var(--udex-info-badge-color-negative-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--text.udex-badge--grey-dark{background:var(--udex-text-badge-grey-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-dark-border-color);color:var(--udex-text-badge-grey-dark-text-color)}.udex-badge--text.udex-badge--grey-light{background:var(--udex-text-badge-grey-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-light-border-color);color:var(--udex-text-badge-grey-light-text-color)}.udex-badge--text.udex-badge--red-dark{background:var(--udex-text-badge-red-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-dark-border-color);color:var(--udex-text-badge-red-dark-text-color)}.udex-badge--text.udex-badge--red-light{background:var(--udex-text-badge-red-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-light-border-color);color:var(--udex-text-badge-red-light-text-color)}.udex-badge--text.udex-badge--mango-dark{background:var(--udex-text-badge-mango-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-dark-border-color);color:var(--udex-text-badge-mango-dark-text-color)}.udex-badge--text.udex-badge--mango-light{background:var(--udex-text-badge-mango-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-light-border-color);color:var(--udex-text-badge-mango-light-text-color)}.udex-badge--text.udex-badge--green-dark{background:var(--udex-text-badge-green-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-dark-border-color);color:var(--udex-text-badge-green-dark-text-color)}.udex-badge--text.udex-badge--green-light{background:var(--udex-text-badge-green-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-light-border-color);color:var(--udex-text-badge-green-light-text-color)}.udex-badge--text.udex-badge--teal-dark{background:var(--udex-text-badge-teal-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-dark-border-color);color:var(--udex-text-badge-teal-dark-text-color)}.udex-badge--text.udex-badge--teal-light{background:var(--udex-text-badge-teal-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-light-border-color);color:var(--udex-text-badge-teal-light-text-color)}.udex-badge--text.udex-badge--blue-dark{background:var(--udex-text-badge-blue-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-dark-border-color);color:var(--udex-text-badge-blue-dark-text-color)}.udex-badge--text.udex-badge--blue-light{background:var(--udex-text-badge-blue-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-light-border-color);color:var(--udex-text-badge-blue-light-text-color)}.udex-badge--text.udex-badge--indigo-dark{background:var(--udex-text-badge-indigo-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-dark-border-color);color:var(--udex-text-badge-indigo-dark-text-color)}.udex-badge--text.udex-badge--indigo-light{background:var(--udex-text-badge-indigo-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-light-border-color);color:var(--udex-text-badge-indigo-light-text-color)}.udex-badge--text.udex-badge--pink-dark{background:var(--udex-text-badge-pink-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-dark-border-color);color:var(--udex-text-badge-pink-dark-text-color)}.udex-badge--text.udex-badge--pink-light{background:var(--udex-text-badge-pink-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-light-border-color);color:var(--udex-text-badge-pink-light-text-color)}.udex-badge--text.udex-badge--raspberry-dark{background:var(--udex-text-badge-raspberry-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-dark-border-color);color:var(--udex-text-badge-raspberry-dark-text-color)}.udex-badge--text.udex-badge--raspberry-light{background:var(--udex-text-badge-raspberry-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-light-border-color);color:var(--udex-text-badge-raspberry-light-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--medium{padding:var(--udex-info-badge-number-medium-padding);height:var(--udex-info-badge-number-medium-height);line-height:var(--udex-info-badge-number-medium-line-height);font-size:var(--udex-info-badge-number-medium-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--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
+export default `:host{--udex-info-badge-text-radius: .375rem;--udex-info-badge-number-radius: 1rem;--udex-info-badge-text-border-width: 1px;--udex-info-badge-text-medium-font-size: .875rem;--udex-info-badge-text-medium-line-height: 1.313rem;--udex-info-badge-text-medium-height: 1.813rem;--udex-info-badge-text-medium-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-medium-font-size: .875rem;--udex-info-badge-number-medium-line-height: 1rem;--udex-info-badge-number-medium-height: 1rem;--udex-info-badge-number-medium-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-badge-min-width: 20px;--udex-neutral-badge-color-neutral-border-color: var(--udexColorBlue8, #0057D2);--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-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));--udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));--udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexColorBlue1, #ebf8ff));--udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexColorGreen7, #188918));--udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);--udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexColorGreen1, #f5fae5));--udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexColorMango7, #c35500));--udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);--udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexColorMango1, #fff8d6));--udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexColorRed7, #d20a0a));--udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);--udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexColorRed1, #ffeaf4));--udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-blue-background: var(--udexColorBlue8, #0057D2);--udex-number-badge-color-red-text-color: var(--udexColorNeutralWhite,#ffffff);--udex-number-badge-color-red-background: var(--sapNegativeBackgroundColor, #d20a0a);--udex-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);--udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-light-border-color: var(--udexColorGrey3, #D5DADD);--udex-text-badge-grey-light-text-color: var(--udexColorGrey8, #354A5F);--udex-text-badge-grey-light-background: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-border-color: var(--udexColorGrey9, #223548);--udex-text-badge-grey-dark-text-color: var(--udexColorGrey1, #F5F6F7);--udex-text-badge-grey-dark-background: var(--udexColorGrey8, #354A5F);--udex-text-badge-red-light-border-color: var(--udexColorRed3, #FFB2D2);--udex-text-badge-red-light-text-color: var(--udexColorRed8, #AA0808);--udex-text-badge-red-light-background: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-border-color: var(--udexColorRed9, #840606);--udex-text-badge-red-dark-text-color: var(--udexColorRed1, #FFEAF4);--udex-text-badge-red-dark-background: var(--udexColorRed8, #AA0808);--udex-text-badge-mango-light-border-color: var(--udexColorMango3, #FFDF72);--udex-text-badge-mango-light-text-color: var(--udexColorMango8, #A93E00);--udex-text-badge-mango-light-background: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-border-color: var(--udexColorMango9, #8D2A00);--udex-text-badge-mango-dark-text-color: var(--udexColorMango1, #FFF8D6);--udex-text-badge-mango-dark-background: var(--udexColorMango8, #A93E00);--udex-text-badge-green-light-border-color: var(--udexColorGreen3, #BDE986);--udex-text-badge-green-light-text-color: var(--udexColorGreen8, #256F3A);--udex-text-badge-green-light-background: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-border-color: var(--udexColorGreen9, #1E592F);--udex-text-badge-green-dark-text-color: var(--udexColorGreen1, #F5FAE5);--udex-text-badge-green-dark-background: var(--udexColorGreen8, #256F3A);--udex-text-badge-teal-light-border-color: var(--udexColorTeal3, #64EDD2);--udex-text-badge-teal-light-text-color: var(--udexColorTeal8, #046C7A);--udex-text-badge-teal-light-background: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-border-color: var(--udexColorTeal9, #035663);--udex-text-badge-teal-dark-text-color: var(--udexColorTeal1, #DAFDF5);--udex-text-badge-teal-dark-background: var(--udexColorTeal8, #046C7A);--udex-text-badge-blue-light-border-color: var(--udexColorBlue3, #A6E0FF);--udex-text-badge-blue-light-text-color: var(--udexColorBlue8, #0057D2);--udex-text-badge-blue-light-background: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-border-color: var(--udexColorBlue9, #0040B0);--udex-text-badge-blue-dark-text-color: var(--udexColorBlue1, #EBF8FF);--udex-text-badge-blue-dark-background: var(--udexColorBlue8, #0057D2);--udex-text-badge-indigo-light-border-color: var(--udexColorIndigo3, #D3B6FF);--udex-text-badge-indigo-light-text-color: var(--udexColorIndigo8, #470CED);--udex-text-badge-indigo-light-background: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-border-color: var(--udexColorIndigo9, #2C13AD);--udex-text-badge-indigo-dark-text-color: var(--udexColorIndigo1, #F1ECFF);--udex-text-badge-indigo-dark-background: var(--udexColorIndigo8, #470CED);--udex-text-badge-pink-light-border-color: var( --udexColorPink3, #FFAFED);--udex-text-badge-pink-light-text-color: var(--udexColorPink8, #A100C2);--udex-text-badge-pink-light-background: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-border-color: var(--udexColorPink9, #7800A4);--udex-text-badge-pink-dark-text-color: var(--udexColorPink1, #FFF0FA);--udex-text-badge-pink-dark-background: var(--udexColorPink8, #A100C2);--udex-text-badge-raspberry-light-border-color: var(--udexColorRaspberry3, #FECBDA);--udex-text-badge-raspberry-light-text-color: var(--udexColorRaspberry8, #BA066C);--udex-text-badge-raspberry-light-background: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-border-color: var(--udexColorRaspberry9, #9B015D);--udex-text-badge-raspberry-dark-text-color: var(--udexColorRaspberry1, #FFF0F5);--udex-text-badge-raspberry-dark-background: var(--udexColorRaspberry8, #BA066C)}.udex-badge{box-sizing:border-box;font-family:var(--sapFontFamily, sans-serif);font-size:var(--udex-tags-font-size);display:inline-flex;justify-content:center;align-items:center;gap:var(--udexSpacer4, 4px);min-width:var(--udex-badge-min-width)}.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--medium{line-height:var(--udex-info-badge-text-medium-line-height);height:var(--udex-info-badge-text-medium-height);font-size:var(--udex-info-badge-text-medium-font-size);padding:var(--udex-info-badge-text-medium-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--information{background:var(--udex-info-badge-color-information-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-information-border-color);color:var(--udex-info-badge-color-information-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--neutral .udex-badge__icon{color:var(--udex-neutral-badge-color-neutral-border-color)}.udex-badge--text.udex-badge--positive{background:var(--udex-info-badge-color-positive-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-positive-border-color);color:var(--udex-info-badge-color-positive-text-color)}.udex-badge--text.udex-badge--negative{background:var(--udex-info-badge-color-negative-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-negative-border-color);color:var(--udex-info-badge-color-negative-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--text.udex-badge--grey-dark{background:var(--udex-text-badge-grey-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-dark-border-color);color:var(--udex-text-badge-grey-dark-text-color)}.udex-badge--text.udex-badge--grey-light{background:var(--udex-text-badge-grey-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-grey-light-border-color);color:var(--udex-text-badge-grey-light-text-color)}.udex-badge--text.udex-badge--red-dark{background:var(--udex-text-badge-red-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-dark-border-color);color:var(--udex-text-badge-red-dark-text-color)}.udex-badge--text.udex-badge--red-light{background:var(--udex-text-badge-red-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-red-light-border-color);color:var(--udex-text-badge-red-light-text-color)}.udex-badge--text.udex-badge--mango-dark{background:var(--udex-text-badge-mango-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-dark-border-color);color:var(--udex-text-badge-mango-dark-text-color)}.udex-badge--text.udex-badge--mango-light{background:var(--udex-text-badge-mango-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-mango-light-border-color);color:var(--udex-text-badge-mango-light-text-color)}.udex-badge--text.udex-badge--green-dark{background:var(--udex-text-badge-green-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-dark-border-color);color:var(--udex-text-badge-green-dark-text-color)}.udex-badge--text.udex-badge--green-light{background:var(--udex-text-badge-green-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-green-light-border-color);color:var(--udex-text-badge-green-light-text-color)}.udex-badge--text.udex-badge--teal-dark{background:var(--udex-text-badge-teal-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-dark-border-color);color:var(--udex-text-badge-teal-dark-text-color)}.udex-badge--text.udex-badge--teal-light{background:var(--udex-text-badge-teal-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-teal-light-border-color);color:var(--udex-text-badge-teal-light-text-color)}.udex-badge--text.udex-badge--blue-dark{background:var(--udex-text-badge-blue-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-dark-border-color);color:var(--udex-text-badge-blue-dark-text-color)}.udex-badge--text.udex-badge--blue-light{background:var(--udex-text-badge-blue-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-blue-light-border-color);color:var(--udex-text-badge-blue-light-text-color)}.udex-badge--text.udex-badge--indigo-dark{background:var(--udex-text-badge-indigo-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-dark-border-color);color:var(--udex-text-badge-indigo-dark-text-color)}.udex-badge--text.udex-badge--indigo-light{background:var(--udex-text-badge-indigo-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-indigo-light-border-color);color:var(--udex-text-badge-indigo-light-text-color)}.udex-badge--text.udex-badge--pink-dark{background:var(--udex-text-badge-pink-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-dark-border-color);color:var(--udex-text-badge-pink-dark-text-color)}.udex-badge--text.udex-badge--pink-light{background:var(--udex-text-badge-pink-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-pink-light-border-color);color:var(--udex-text-badge-pink-light-text-color)}.udex-badge--text.udex-badge--raspberry-dark{background:var(--udex-text-badge-raspberry-dark-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-dark-border-color);color:var(--udex-text-badge-raspberry-dark-text-color)}.udex-badge--text.udex-badge--raspberry-light{background:var(--udex-text-badge-raspberry-light-background);box-shadow:inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-text-badge-raspberry-light-border-color);color:var(--udex-text-badge-raspberry-light-text-color)}.udex-badge--number{border-radius:var(--udex-info-badge-number-radius)}.udex-badge--number.udex-badge--medium{padding:var(--udex-info-badge-number-medium-padding);height:var(--udex-info-badge-number-medium-height);line-height:var(--udex-info-badge-number-medium-line-height);font-size:var(--udex-info-badge-number-medium-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--neutral{color:var(--udex-number-badge-color-neutral-text-color);background:var(--udex-number-badge-color-neutral-background)}
 `

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

@@ -0,0 +1,9 @@
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
+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([surface-container]){--udex-busy-indicator-backdrop-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);--udex-busy-indicator-container-background: var(--sapBaseColor, #fff);--udex-busy-indicator-container-border-radius: var(--udexRadiusXL, 16px);--udex-busy-indicator-container-padding-vertical: var(--udexSpacer24, 24px);--udex-busy-indicator-container-padding-horizontal: var(--udexSpacer48, 48px)}:host([surface-container]) .ui5-busy-indicator-busy-area{background:transparent}:host([surface-container]) .ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content{background:var(--udex-busy-indicator-backdrop-background)}:host([surface-container]) .ui5-busy-indicator-circles-wrapper{background:var(--udex-busy-indicator-container-background);border-radius:var(--udex-busy-indicator-container-border-radius);padding:var(--udex-busy-indicator-container-padding-vertical) var(--udex-busy-indicator-container-padding-horizontal);box-shadow:var(--sapContent_Shadow3)}
+`