@sapudex/web-components 2.53.0 → 2.55.0

package/src/FooterTemplate.tsx

@@ -6,6 +6,7 @@ import headset from "@ui5/webcomponents-icons/dist/headset.js";
 import email from "@ui5/webcomponents-icons/dist/email.js";
 import backToTop from "@ui5/webcomponents-icons/dist/back-to-top.js";
 import discussion from "@ui5/webcomponents-icons/dist/discussion-2.js";
+import da from "@ui5/webcomponents-icons/dist/da.js";
 
 import type Footer from "./Footer.js";
 import UDExLink from "./Link.js";
@@ -16,6 +17,7 @@ import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 import UDExButtonSize from "./types/ButtonSize.js";
+import UDExFooterAskJoulePosition from "./types/FooterAskJoulePosition.js";
 import type { AriaRole } from "@ui5/webcomponents-base";
 
 export default function FooterTemplate(this: Footer) {
@@ -60,6 +62,7 @@ export default function FooterTemplate(this: Footer) {
           )}
           {this.isContactContainerVisible && (
             <div className={`${rootClass}__contact`}>
+              {this.askJouleLink && this.askJoulePosition === UDExFooterAskJoulePosition.Start && askJouleBlock.call(this, rootClass)}
               {this.contactNumbersArray.length > 0 && (
                 <div className={`${rootClass}__numbers`}>
                   <div className={`${rootClass}__icon-container`}>
@@ -146,6 +149,7 @@ export default function FooterTemplate(this: Footer) {
                   </a>
                 </div>
               )}
+              {this.askJouleLink && this.askJoulePosition === UDExFooterAskJoulePosition.End && askJouleBlock.call(this, rootClass)}
             </div>
           )}
         </div>
@@ -336,7 +340,7 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     href={link.url}
                     onClick={this._onQuickLinksClick}
                     {...(link.role ? { "role": link.role as AriaRole } : {})}>
-                    {link.title}
+                    <span className="udex-footer__nav-link-text">{link.title}</span>
                   </a>
                 </li>
               ))}
@@ -359,7 +363,7 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     href={link.url}
                     onClick={this._onTrendingClick}
                     {...(link.role ? { "role": link.role as AriaRole } : {})}>
-                    {link.title}
+                    <span className="udex-footer__nav-link-text">{link.title}</span>
                   </a>
                 </li>
               ))}
@@ -382,7 +386,7 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     href={link.url}
                     onClick={this._onAboutSapClick}
                     {...(link.role ? { "role": link.role as AriaRole } : {})}>
-                    {link.title}
+                    <span className="udex-footer__nav-link-text">{link.title}</span>
                   </a>
                 </li>
               ))}
@@ -405,7 +409,7 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     href={link.url}
                     onClick={this._onSiteInformationClick}
                     {...(link.role ? { "role": link.role as AriaRole } : {})}>
-                    {link.title}
+                    <span className="udex-footer__nav-link-text">{link.title}</span>
                   </a>
                 </li>
               ))}
@@ -416,3 +420,23 @@ function desktopNavigation(this: Footer, rootClass: string) {
     </div>
   );
 }
+
+function askJouleBlock(this: Footer, rootClass: string) {
+  return (
+    <div className={`${rootClass}__ask-joule`}>
+      <div className={`${rootClass}__icon-container`}>
+        <UI5Icon
+          class={`${rootClass}__icon`}
+          name={da}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      </div>
+      <a
+        href={this.askJouleLink}
+        className={`${rootClass}__ask-joule-link`}
+        onClick={this._onAskJouleClick}>
+        {this.askJouleAccessibleName}
+      </a>
+    </div>
+  );
+}

package/src/ImageGridCloud.ts

@@ -4,7 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ImageGridCloudTemplate from "./ImageGridCloudTemplate.js";
 import type UDExImageGridCloudItem from "./ImageGridCloudItem.js";

package/src/ImageGridTable.ts

@@ -3,7 +3,7 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type UDExImageGridTableItem from "./ImageGridTableItem.js";
 import ImageGridTableTemplate from "./ImageGridTableTemplate.js";

package/src/ImageGridTableItem.ts

@@ -4,7 +4,7 @@ import { isDesktop } from "@ui5/webcomponents-base/Device.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { UDExTarget } from "./types/common.js";
 

package/src/ImageGridTicker.ts

@@ -3,7 +3,7 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";

package/src/InputGroup.ts

@@ -3,7 +3,7 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExCheckbox from "./Checkbox.js";
 import type UDExRadioButton from "./RadioButton.js";

package/src/LinkList.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type UDExLinkListItem from "./LinkListItem.js";
 import LinkListTemplate from "./LinkListTemplate.js";

package/src/List.ts

@@ -1,10 +1,10 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import {
   isUp, isDown, isHome, isEnd, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -17,15 +17,15 @@ import type UDExUploadItem from "./UploadItem.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE } from "./generated/i18n/i18n-defaults.js";
-import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 import translate from "./utils/translate.js";
-
-// Styles
-import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import type { UDExListWithFirstLetterFocus } from "./utils/ListWithFirstLetterFocus.js";
 import UDExFirstLetterFocusHandler from "./utils/ListWithFirstLetterFocus.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import ListTemplate from "./ListTemplate.js";
+
+// Styles
+import ListCss from "./generated/themes/List.css.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 
@@ -55,11 +55,11 @@ type UDExListSelectionChangeEventDetail = {
  * @public
  */
 @customElement({
+  languageAware: true,
   tag: "udex-list",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [ListCss, getEffectiveScrollbarStyle()],
   template: ListTemplate,
-  dependencies: [],
 })
 
 /**

package/src/ListGroupHeader.ts

@@ -1,13 +1,12 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import {
   isEnter, isLeft, isRight, isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
-import ListGroupHeaderTemplate from "./generated/templates/ListGroupHeaderTemplate.lit.js";
+import ListGroupHeaderTemplate from "./ListGroupHeaderTemplate.js";
 import { UDExListItemSize } from "./types/List.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import type UDExListItemBase from "./ListItemBase.js";
@@ -42,10 +41,10 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
  */
 @customElement({
   tag: "udex-list-group-header",
-  renderer: litRender,
+  languageAware: true,
+  renderer: jsxRenderer,
   styles: ListGroupHeaderCss,
   template: ListGroupHeaderTemplate,
-  dependencies: [Icon],
 })
 
 /**
@@ -56,6 +55,14 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
    */
 @event("header-press", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ * @param { string } name
+ * @param { boolean } expanded
+ */
+@event("accordion-icon-click", { bubbles: true })
+
 class UDExListGroupHeader extends UDExListGroupHeaderBase {
   eventDetails!: {
     "header-press": UDExListGroupHeaderBaseHeaderPressEventDetail,

package/src/ListGroupHeaderBase.ts

@@ -1,9 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import UDExListItemBase from "./ListItemBase.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 const listGroupHeaderClass: string = "udex-list__group-header";
 
@@ -20,7 +20,7 @@ const listGroupHeaderClass: string = "udex-list__group-header";
  */
 @customElement({
   languageAware: true,
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 class UDExListGroupHeaderBase extends UDExListItemBase {

package/src/ListGroupHeaderTemplate.tsx

@@ -0,0 +1,228 @@
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type UDExListGroupHeader from "./ListGroupHeader.js";
+import UDExListItem from "./ListItem.js";
+import UDExButton from "./Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+function SingleGroupHeader(this: UDExListGroupHeader) {
+  return (
+    <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part="group-item">
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+          name={this._icon}
+        />
+      )}
+      <div class="udex-list__header">
+        <span
+          id="group-heading"
+          class="udex-list__header-title"
+          {...({ innerHTML: this.label } as object)}>
+        </span>
+        {this.supportingText && (
+          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
+  return (
+    <div
+      class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}
+      part="group-item"
+      id={`${this._id}_group-content__focusable`}
+      role={this.singleCollapsibleHeaderRole as AriaRole}
+      tabIndex={0}
+      onKeyDown={this.handleKeyDown}
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      _tab-index={Number(this._effectiveTabIndex)}>
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          name={this._icon}
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+        />
+      )}
+      <div class="udex-list__header">
+        <span
+          id="group-heading"
+          class="udex-list__header-title"
+          {...({ innerHTML: this.label } as object)}>
+        </span>
+        {this.supportingText && (
+          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+        )}
+      </div>
+      <div class="udex-list__group-heading__icon-wrapper">
+        <UDExButton
+          size="Small"
+          design="Tertiary"
+          class="udex-list__group-heading__icon"
+          onClick={this.handleCollapseIconClick as unknown as EventListener}
+          tabindex={-1}
+          accessible-name={this.expandButtonAccessibleName}
+          icon={slimArrowRight}
+          {...({ "mode": "Interactive" } as object)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
+  if (this.isNonActiveHeader) {
+    return (
+      <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" {...({ innerHTML: this.label } as object)}></span>
+          {this.supportingText && (
+            <span class="udex-list__supporting-text">{this.supportingText}</span>
+          )}
+        </div>
+      </header>
+    );
+  }
+  return (
+    <UDExListItem
+      id="group-heading"
+      part="group-item"
+      role="none"
+      selected={this.selected}
+      indeterminate={this.indeterminate}
+      class={this.className}
+      mode={this.mode}
+      controlled={this.controlled}
+      onClick={this.handleHeaderPress}
+      onKeyDown={this.handleKeyDownPress}
+      type={this.type}
+      label={this.label}
+      size={this.size}
+      supportingText={this.supportingText}
+      accessible-role={this.nonCollapsibleHeaderAccessibleRole}
+      _additional-class-name={this._additionalClassName}
+      _tab-index={Number(this._effectiveTabIndex)}
+      _icon={this._icon}
+      _filtered={this._filtered}
+    />
+  );
+}
+
+function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
+  if (this.isNonActiveHeader) {
+    return (
+      <header
+        role="button"
+        id="group-heading"
+        class="udex-list__inactive-header udex-list__group-header-wrap"
+        tabIndex={Number(this._effectiveTabIndex)}
+        aria-expanded={this.expanded}
+        aria-controls={this.ariaControlsId}>
+        <div class="udex-list__inactive-header-content">
+          <span class="udex-list__header-title" {...({ innerHTML: this.label } as object)}></span>
+          {this.supportingText && (
+            <span class="udex-list__supporting-text">{this.supportingText}</span>
+          )}
+        </div>
+        <div class="udex-list__group-heading__icon-wrapper">
+          <UDExButton
+            class="udex-list__group-heading__icon"
+            size={UDExButtonSize.Small}
+            design={UDExButtonDesign.Tertiary}
+            tabindex={-1}
+            icon={slimArrowRight}
+            onClick={this.handleCollapseIconClick as EventListener}
+            accessible-name={this.expandButtonAccessibleName}
+            {...({ "mode": "Interactive" } as object)}
+          />
+        </div>
+      </header>
+    );
+  }
+  return (
+    <UDExListItem
+      id="group-heading"
+      part="group-item"
+      role="none"
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      selected={this.selected}
+      indeterminate={this.indeterminate}
+      collapsible={this.collapsible}
+      collapsed={this.collapsed}
+      class={this.className}
+      mode={this.mode}
+      controlled={this.controlled}
+      onClick={this.handleHeaderPress}
+      onKeyDown={this.handleKeyDownPress}
+      type={this.type}
+      label={this.label}
+      size={this.size}
+      supportingText={this.supportingText}
+      accessible-role={this.collapsibleHeaderAccessibleRole}
+      onAccordionIconClick={this.handleCollapseIconClick as EventListener}
+      _additional-class-name={this._additionalClassName}
+      _tab-index={Number(this._effectiveTabIndex)}
+      _icon={this._icon}
+      _filtered={this._filtered}
+    />
+  );
+}
+
+export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
+  return (
+    <div
+      part="item"
+      class="udex-list__group"
+      role={this.groupWrapperRole as AriaRole}
+      aria-labelledby={!this.isTreeAccessibleRole ? "group-heading" : undefined}>
+      {this.collapsible ? (
+        <div
+          class="udex-list__group-list"
+          onui5-item-press={this.getHandleGroupItemsClick}
+          {...({ name: "group" } as object)}>
+          {this.useListItemHeader
+            ? MultiOrRadioGroupHeaderCollapsible.call(this)
+            : SingleGroupHeaderCollapsible.call(this)
+          }
+          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+            {this.isTreeAccessibleRole ? (
+              <slot></slot>
+            ) : (
+              <div role="listbox" aria-label="group">
+                <slot></slot>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div
+          role={this.nonCollapsibleContainerRole as AriaRole}
+          class="udex-list__group-list"
+          aria-label="group"
+          onui5-item-press={this.getHandleGroupItemsClick}
+          {...({ name: "group" } as object)}>
+          {this.modeMultiSelectOrRadioGroup
+            ? MultiOrRadioGroupHeader.call(this)
+            : SingleGroupHeader.call(this)
+          }
+          <slot></slot>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ListItem.ts

@@ -1,8 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -24,11 +25,10 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
-import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
+import ListItemTemplate from "./ListItemTemplate.js";
 
 // Styles
 import ListItemCss from "./generated/themes/ListItem.css.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 const listItemClass: string = "udex-list__item";
 const listItemRole: string = "option";
@@ -64,7 +64,8 @@ type UDExListItemItemPressEventDetail = {
 
 @customElement({
   tag: "udex-list-item",
-  renderer: litRender,
+  languageAware: true,
+  renderer: jsxRenderer,
   styles: ListItemCss,
   template: ListItemTemplate,
   dependencies: [
@@ -215,7 +216,7 @@ class UDExListItem extends UDExListItemBase {
    * @public
    */
   @slot({ type: UDExButton })
-    firstIcon!: Array<UDExButton>;
+    firstIcon!: Slot<UDExButton>;
 
   /**
    * Slot for second icon.
@@ -224,7 +225,7 @@ class UDExListItem extends UDExListItemBase {
    * @public
    */
   @slot({ type: UDExButton })
-    secondIcon!: Array<UDExButton>;
+    secondIcon!: Slot<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/ListItemBase.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -37,7 +37,7 @@ type UDExListItemBaseAccordionClickEventDetail = {
  * @public
  */
 @customElement({
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 /**
@@ -261,17 +261,22 @@ class UDExListItemBase extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  onEnterDOM() {
+  onAfterRendering() {
     if (!this.collapsible) {
       return;
     }
     this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(".udex-list__group-list__content");
     if (this.contentElement) {
-      ResizeHandler.register(this.contentElement, this._resizeHandler);
       this.setContentHeight();
     }
   }
 
+  onEnterDOM() {
+    if (this.contentElement && this.collapsible) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+    }
+  }
+
   onExitDOM(): void {
     if (this.contentElement && this.collapsible) {
       ResizeHandler.deregister(this.contentElement, this._resizeHandler);