@sapudex/web-components 2.54.0 → 2.56.0

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/HeroBanner.ts

@@ -8,6 +8,7 @@ import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
 import type UDExBreadcrumbs from "./Breadcrumbs.js";
+import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -155,6 +156,71 @@ class UDExHeroBanner extends UI5Element {
         this._calculateMediaButtonState();
       });
     }
+    this._handleSuggestionOpenedBound = this._showSearchBackdrop.bind(this);
+    this._handleSuggestionClosedBound = this._hideSearchBackdrop.bind(this);
+    this.addEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.addEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+  }
+
+  onExitDOM() {
+    this.removeEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+    this.removeEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+    this._removeBackdropScrollListener();
+    this._bodyBackdropEl?.remove();
+    this._bodyBackdropEl = null;
+  }
+
+  _handleSuggestionOpenedBound!: () => void;
+  _handleSuggestionClosedBound!: () => void;
+  _handleBackdropScrollBound!: () => void;
+  _bodyBackdropEl: HTMLElement | null = null;
+
+  private _getBackdropEl(): HTMLElement {
+    if (!this._bodyBackdropEl) {
+      ensureSearchBackdropStyles(this.ownerDocument);
+      const el = this.ownerDocument.createElement("div");
+      el.className = "udex-search-backdrop";
+      el.addEventListener("click", () => this.handleBackdropClick());
+      this.ownerDocument.body.appendChild(el);
+      this._bodyBackdropEl = el;
+    }
+    return this._bodyBackdropEl;
+  }
+
+  private _updateBackdropTop(): void {
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.top = `${this.getBoundingClientRect().bottom}px`;
+    }
+  }
+
+  private _addBackdropScrollListener(): void {
+    this._handleBackdropScrollBound = this._updateBackdropTop.bind(this);
+    window.addEventListener("scroll", this._handleBackdropScrollBound, { passive: true });
+  }
+
+  private _removeBackdropScrollListener(): void {
+    if (this._handleBackdropScrollBound) {
+      window.removeEventListener("scroll", this._handleBackdropScrollBound);
+    }
+  }
+
+  private _showSearchBackdrop(): void {
+    const backdrop = this._getBackdropEl();
+    this._updateBackdropTop();
+    this._addBackdropScrollListener();
+    backdrop.style.display = "block";
+  }
+
+  private _hideSearchBackdrop(): void {
+    this._removeBackdropScrollListener();
+    if (this._bodyBackdropEl) {
+      this._bodyBackdropEl.style.display = "none";
+    }
+  }
+
+  handleBackdropClick(): void {
+    const search = this.querySelector<any>("[udex-search]");
+    search?.onClosePopover?.();
   }
 
   _toggleMediaButton(): void {

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: [],
 })
 
 /**
@@ -598,6 +598,14 @@ class UDExList extends UI5Element {
     return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
   }
 
+  /**
+   * Role for SingleContent mode. listbox/option is for selection widgets only;
+   * SingleContent is informational so "list"/"listitem" is the correct semantic.
+   */
+  get singleContentRole(): string {
+    return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
+  }
+
   /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
   get _listAriaMultiSelectable(): string | undefined {
     return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;

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 {

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 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, Slot } 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: [
@@ -371,7 +372,11 @@ class UDExListItem extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+    if (this.accessibleRole.length > 0) {
+      return this.accessibleRole;
+    }
+    // SingleContent is informational (not a selection widget) — listitem is semantically correct
+    return this.modeSingleContent ? "listitem" : listItemRole;
   }
 
   get effectiveRole(): string {