@sapudex/web-components 2.54.0 → 2.55.0

package/dist/vscode.html-custom-data.json

@@ -1331,7 +1331,7 @@
     },
     {
       "name": "udex-footer",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **ask-joule-click** - Triggered on click interaction with \"Ask Joule\" link\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
       "attributes": [
         {
           "name": "about-links",
@@ -1343,6 +1343,16 @@
           "description": "Defines an \"about Sap\" column title",
           "values": []
         },
+        {
+          "name": "ask-joule-link",
+          "description": "Defines the Ask Joule link's href",
+          "values": []
+        },
+        {
+          "name": "ask-joule-position",
+          "description": "Defines the position of the Ask Joule item within the contact section.\nCan be \"start\" (before phone/email/chat) or \"end\" (after phone/email/chat).",
+          "values": [{ "name": "UDExFooterAskJoulePosition" }]
+        },
         {
           "name": "chat-with-us-link",
           "description": "Defines the Chat with us link's href",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.54.0",
+  "version": "2.55.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1898,7 +1898,7 @@
               "description": "Allows setting a custom role.",
               "value": {
                 "type": "\"None\" | \"Dialog\" | \"AlertDialog\"",
-                "default": "\"Dialog\""
+                "default": "\"None\""
               }
             },
             {
@@ -2973,7 +2973,7 @@
         },
         {
           "name": "udex-footer",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n- **ask-joule-click** - Triggered on click interaction with \"Ask Joule\" link\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **logo-click** - Triggered on click interaction with logo in footer\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
           "doc-url": "",
           "attributes": [
             {
@@ -2986,6 +2986,19 @@
               "description": "Defines an \"about Sap\" column title",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "ask-joule-link",
+              "description": "Defines the Ask Joule link's href",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "ask-joule-position",
+              "description": "Defines the position of the Ask Joule item within the contact section.\nCan be \"start\" (before phone/email/chat) or \"end\" (after phone/email/chat).",
+              "value": {
+                "type": "UDExFooterAskJoulePosition",
+                "default": "\"start\""
+              }
+            },
             {
               "name": "chat-with-us-link",
               "description": "Defines the Chat with us link's href",
@@ -3122,6 +3135,10 @@
               "name": "accordion-item-click",
               "description": "Triggered when the user clicks on an accordion item."
             },
+            {
+              "name": "ask-joule-click",
+              "description": "Triggered on click interaction with \"Ask Joule\" link"
+            },
             {
               "name": "back-to-top-click",
               "description": "Triggered on click interaction with \"Back to Top\" button"
@@ -3175,6 +3192,16 @@
                 "description": "Defines an \"about Sap\" column title",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "ask-joule-link",
+                "description": "Defines the Ask Joule link's href",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "ask-joule-position",
+                "description": "Defines the position of the Ask Joule item within the contact section.\nCan be \"start\" (before phone/email/chat) or \"end\" (after phone/email/chat).",
+                "value": { "type": "UDExFooterAskJoulePosition" }
+              },
               {
                 "name": "chat-with-us-link",
                 "description": "Defines the Chat with us link's href",
@@ -3305,6 +3332,10 @@
                 "name": "accordion-item-click",
                 "description": "Triggered when the user clicks on an accordion item."
               },
+              {
+                "name": "ask-joule-click",
+                "description": "Triggered on click interaction with \"Ask Joule\" link"
+              },
               {
                 "name": "back-to-top-click",
                 "description": "Triggered on click interaction with \"Back to Top\" button"

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.54.0",
+  "version": "2.55.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/BreadcrumbsTemplate.tsx

@@ -44,16 +44,18 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
                 ) : (
                   <>
                     <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
-                    <UDExLink
-                      onClick={this._onLinkPress}
-                      id={`${linkData._id}-link`}
-                      class={`${rootClass}__item ${this._rootClass}__item--visible`}
-                      href={linkData.href}
-                      target={linkData.target}
-                      accessibleName={linkData._accessibleNameText}
-                      data-ui5-stable={linkData.stableDomRef}>
-                      {linkData.textContent}
-                    </UDExLink>
+                    <span class={`${this._rootClass}__link-wrap`}>
+                      <UDExLink
+                        onClick={this._onLinkPress}
+                        id={`${linkData._id}-link`}
+                        class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                        href={linkData.href}
+                        target={linkData.target}
+                        accessibleName={linkData._accessibleNameText}
+                        data-ui5-stable={linkData.stableDomRef}>
+                        {linkData.textContent}
+                      </UDExLink>
+                    </span>
                   </>
                 )}
               </li>

package/src/FilterMenu.ts

@@ -296,11 +296,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleNameRef!: string;
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
   @property()
-    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;
+    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.None;
 
   /**
    * Allows setting a custom role for dropdown trigger.
@@ -414,15 +414,15 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   handleKeyDownResultBtn(e: KeyboardEvent): void {
     e.stopPropagation();
-    if (isTabNext(e) && !this.hasResetBtn) {
-      this.onDropdownClose();
+    if (isEscape(e) || (isTabNext(e) && !this.hasResetBtn)) {
+      this.onDropdownClose(e);
     }
   }
 
   handleKeyDownResetBtn(e: KeyboardEvent): void {
     e.stopPropagation();
-    if (isTabNext(e)) {
-      this.onDropdownClose();
+    if (isEscape(e) || isTabNext(e)) {
+      this.onDropdownClose(e);
     }
   }
 

package/src/Footer.ts

@@ -21,11 +21,13 @@ import UDExDivider from "./Divider.js";
 import UDExSocialMediaButton from "./SocialMediaButton.js";
 import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js";
 import type { UDExTarget } from "./types/common.js";
+import UDExFooterAskJoulePosition from "./types/FooterAskJoulePosition.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import FooterTemplate from "./FooterTemplate.js";
 import {
   ABOUT_SAP,
+  ASK_JOULE,
   CHAT_WITH_US,
   CONTACT_US,
   EMAIL,
@@ -79,7 +81,7 @@ type UDExFooterBaseEventDetail = {
   originalEvent: MouseEvent | Event,
 }
 
-type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click";
+type BaseEvents = "contact-chat-click" | "contact-phone-local-numbers-click" | "contact-email-click" | "contact-phone-click" | "logo-click" | "back-to-top-click" | "ask-joule-click";
 
 type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click" | "site-information-click" | "social-media-link-click";
 
@@ -152,6 +154,13 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
  * @allowPreventDefault
  */
 @event("contact-chat-click", { bubbles: true })
+/**
+ * Triggered on click interaction with "Ask Joule" link
+ * @public
+ * @param { MouseEvent | Event } originalEvent
+ * @allowPreventDefault
+ */
+@event("ask-joule-click", { bubbles: true })
 /**
  * Triggered on click interaction with a link within "Quick Links" category
  * @public
@@ -218,6 +227,7 @@ class UDExFooter extends UI5Element {
     "contact-phone-local-numbers-click": UDExFooterBaseEventDetail,
     "contact-email-click": UDExFooterBaseEventDetail,
     "contact-phone-click": UDExFooterBaseEventDetail,
+    "ask-joule-click": UDExFooterBaseEventDetail,
     "quick-links-click": UDExFooterDetailedClickEventDetail,
     "trending-click": UDExFooterDetailedClickEventDetail,
     "about-sap-click": UDExFooterDetailedClickEventDetail,
@@ -379,6 +389,25 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     chatWithUsLink: string = "";
 
+  /**
+   * Defines the Ask Joule link's href
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    askJouleLink: string = "";
+
+  /**
+   * Defines the position of the Ask Joule item within the contact section.
+   * Can be "start" (before phone/email/chat) or "end" (after phone/email/chat).
+   *
+   * @default "start"
+   * @public
+   */
+  @property({ type: String })
+    askJoulePosition: UDExFooterAskJoulePosition = UDExFooterAskJoulePosition.Start;
+
   /**
    * List of the Social links and their icons
    *
@@ -527,7 +556,7 @@ class UDExFooter extends UI5Element {
   }
 
   get isContactContainerVisible(): boolean {
-    return !!this.contactNumbersArray.length || !!this.contactUsLink || !!this.chatWithUsLink;
+    return !!this.contactNumbersArray.length || !!this.contactUsLink || !!this.chatWithUsLink || !!this.askJouleLink;
   }
 
   get phoneNumberAccessibleName(): string {
@@ -549,6 +578,10 @@ class UDExFooter extends UI5Element {
     return translate(UDExFooter, CHAT_WITH_US);
   }
 
+  get askJouleAccessibleName(): string {
+    return translate(UDExFooter, ASK_JOULE);
+  }
+
   get _quickLinksTitle(): string {
     return this.quickLinksTitle || translate(UDExFooter, QUICK_LINKS);
   }
@@ -652,6 +685,10 @@ class UDExFooter extends UI5Element {
     this.fireFooterBaseEvent(e, "contact-chat-click");
   }
 
+  _onAskJouleClick(e: MouseEvent): void {
+    this.fireFooterBaseEvent(e, "ask-joule-click");
+  }
+
   _onQuickLinksClick(e: MouseEvent): void {
     this.fireFooterDetailedClickEvent(e, "quick-links-click");
   }
@@ -677,7 +714,8 @@ class UDExFooter extends UI5Element {
   }
 
   fireFooterDetailedClickEvent(e: MouseEvent, eventName: DetailedEvents): void {
-    const sourceNode = e.composedPath()[0] as HTMLElement;
+    const target = e.composedPath()[0] as HTMLElement;
+    const sourceNode = (target.closest("a") ?? target);
     const { innerText, dataset: { id, name } } = sourceNode;
 
     this.fireDecoratorEvent(eventName, {

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/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 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 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 {