@sapudex/web-components 2.17.0 → 2.18.0

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.17.0",
+  "version": "2.18.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -342,7 +342,7 @@
               "name": "design",
               "description": "Defines the design of text type component.",
               "value": {
-                "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\"",
+                "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Grey-Light\" | \"Grey-Dark\" | \"Red-Light\" | \"Red-Dark\" | \"Mango-Light\" | \"Mango-Dark\" | \"Green-Light\" | \"Green-Dark\" | ... 9 more ... | \"Raspberry-Dark\"",
                 "default": "\"Information\""
               }
             },
@@ -388,7 +388,7 @@
                 "name": "design",
                 "description": "Defines the design of text type component.",
                 "value": {
-                  "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\""
+                  "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Grey-Light\" | \"Grey-Dark\" | \"Red-Light\" | \"Red-Dark\" | \"Mango-Light\" | \"Mango-Dark\" | \"Green-Light\" | \"Green-Dark\" | ... 9 more ... | \"Raspberry-Dark\""
                 }
               },
               {
@@ -2366,7 +2366,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 - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\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- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" 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",
+          "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 - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\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- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" 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- **accordion-item-click** - Triggered when the user clicks on an accordion item.",
           "doc-url": "",
           "attributes": [
             {
@@ -2534,6 +2534,10 @@
             {
               "name": "social-media-link-click",
               "description": "Triggered on click interaction with any of the social media links within footer"
+            },
+            {
+              "name": "accordion-item-click",
+              "description": "Triggered when the user clicks on an accordion item."
             }
           ],
           "js": {
@@ -2703,6 +2707,10 @@
               {
                 "name": "social-media-link-click",
                 "description": "Triggered on click interaction with any of the social media links within footer"
+              },
+              {
+                "name": "accordion-item-click",
+                "description": "Triggered when the user clicks on an accordion item."
               }
             ]
           }

package/package-scripts.cjs

@@ -2,14 +2,16 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
   port: 8080,
-  typescript: true,
+  jsx: true,
+  legacy: true
 };
 
 const scripts = getScripts(options);
 
 // Change baseline Vite dev server config to not open app in browser since we use Storybook
 const customWatchBundle = scripts.watch.bundle.split(' ');
-customWatchBundle[1] = './config/dev-server.mjs';
+customWatchBundle[1] = require.resolve('./config/dev-server.mjs');
+customWatchBundle[0] = 'node';
 scripts.watch.bundle = customWatchBundle.join(' ');
 
 module.exports = {

package/package.json

@@ -1,14 +1,14 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "ui5": {
     "webComponentsPackage": true
   },
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "npx eslint .",
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.14.0",
-    "@ui5/webcomponents-base": "2.14.0",
-    "@ui5/webcomponents-fiori": "2.14.0",
-    "@ui5/webcomponents-icons": "2.14.0",
-    "@ui5/webcomponents-localization": "2.14.0",
-    "@ui5/webcomponents-theming": "2.14.0",
+    "@ui5/webcomponents": "2.17.0",
+    "@ui5/webcomponents-base": "2.17.0",
+    "@ui5/webcomponents-fiori": "2.17.0",
+    "@ui5/webcomponents-icons": "2.17.0",
+    "@ui5/webcomponents-localization": "2.17.0",
+    "@ui5/webcomponents-theming": "2.17.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.14.0",
+    "@ui5/webcomponents-tools": "2.17.0",
     "chromedriver": "142.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/Accordion.ts

@@ -8,7 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
 import {
-  isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext,
+  isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./AccordionTemplate.js";
 import type UDExAccordionItem from "./AccordionItem.js";
@@ -210,11 +210,11 @@ class UDExAccordion extends UI5Element {
       focusOnItem(len - 1);
     }
 
-    if (isTabPrevious(e) || isUp(e)) {
+    if (isTabPrevious(e)) {
       focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);
     }
 
-    if (isTabNext(e) || isDown(e)) {
+    if (isTabNext(e)) {
       focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);
     }
   }

package/src/AccordionItem.ts

@@ -17,6 +17,11 @@ export enum UDExAccordionItemTitleSize {
   Large = "Large"
 }
 
+type UDExAccordionItemClickEventDetail = {
+  name: string | undefined;
+  expanded: boolean;
+}
+
 /**
  * @class
  *
@@ -58,7 +63,7 @@ export enum UDExAccordionItemTitleSize {
 class UDExAccordionItem extends UI5Element {
   eventDetails!: {
     "accordion-item-focus": void,
-    "accordion-item-click": void,
+    "accordion-item-click": UDExAccordionItemClickEventDetail,
   };
   /**
    * Defines the Badge at the end of the label item.
@@ -177,7 +182,7 @@ class UDExAccordionItem extends UI5Element {
     e.preventDefault();
     this.expanded = !this.expanded;
     this.setContentHeight();
-    this.fireDecoratorEvent("accordion-item-click");
+    this.fireDecoratorEvent("accordion-item-click", { name: this.label, expanded: this.expanded });
   }
 
   focusHandler() {
@@ -206,3 +211,4 @@ class UDExAccordionItem extends UI5Element {
 UDExAccordionItem.define();
 
 export default UDExAccordionItem;
+export type { UDExAccordionItemClickEventDetail };

package/src/AccordionItemTemplate.tsx

@@ -55,6 +55,7 @@ export default function AccordionItemTemplate(this: AccordionItem) {
       </button>
       <div
         id={ariaControlsId}
+        aria-hidden={!this.expanded}
         aria-labelledby={ariaLabelledbyId}
         className={`${rootClass}__content ${titleClass}`}
         onKeyDown={this.contentKeydown}

package/src/Assets.ts

@@ -1,5 +1,5 @@
-import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
-import "@ui5/webcomponents-localization/dist/Assets.js";
+// ui5 web components packages assets (main & fiori)
+import "@ui5/webcomponents-fiori/dist/Assets.js";
 
 // own web-components package assets
 import "./generated/json-imports/Themes.js";

package/src/AssetsVariables.ts

@@ -19,6 +19,19 @@ const variablesOverwrite = `
   ${getScopedVarName("--ui5_carousel_active_dot_border")}: 1px solid var(--udexColorBlue8, #0057D2);
 
   /* Calendar & Date Picker */
+  ${getScopedVarName("--_ui5_calendar_width")}: 371px;
+  ${getScopedVarName("--_ui5_calendar_height")}: auto;
+  ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: var(--udexSpacer8, 8px);
+  ${getScopedVarName("--_ui5_calendar_left_right_padding")}: var(--udexSpacer8, 8px);
+  ${getScopedVarName("--_ui5_calendar_header_height")}: 42px;
+  ${getScopedVarName("--_ui5_calendar_header_arrow_button_width")}: 42px;
+  ${getScopedVarName("--_ui5_day_picker_item_width")}: 42px;
+  ${getScopedVarName("--_ui5_day_picker_item_height")}: 42px;
+  ${getScopedVarName("--_ui5_daypicker_weekname_color")}: var(--udexColorGrey6, #5B738B);
+  ${getScopedVarName("--_ui5_month_picker_item_height")}: 36px;
+  ${getScopedVarName("--_ui5_monthpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
+  ${getScopedVarName("--_ui5_year_picker_item_height")}: 36px;
+  ${getScopedVarName("--_ui5_yearpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
   ${getScopedVarName("--_ui5_daypicker_daynames_container_height")}: 42px;
   ${getScopedVarName("--_ui5_daypicker_dayname_color")}: var(--udexColorGrey6, #5B738B);
   ${getScopedVarName("--_ui5_daypicker_item_now_border_color")}: var(--udexColorPink8, #A100C2);

package/src/AvatarGroup.ts

@@ -3,6 +3,7 @@ import AvatarGroup from "@ui5/webcomponents/dist/AvatarGroup.js";
 import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
 // Styles
@@ -61,22 +62,14 @@ const avatarOffsets = {
 class UDExAvatarGroup extends AvatarGroup {
   constructor() {
     super();
-
-    this._itemNavigation = new ItemNavigation(this, {
-      getItemsCallback: () => {
-        return this._isIndividual
-          ? this.items.slice(0, this._hiddenStartIndex).map(
-            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
-          )
-          : [];
-      },
-    });
   }
+
   onEnterDOM(): void {
     super.onEnterDOM();
     const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
     container?.addEventListener("mouseenter", this._onHover.bind(this, true));
     container?.addEventListener("mouseleave", this._onHover.bind(this, false));
+    this._initializeItemNavigation();
   }
 
   onExitDOM(): void {
@@ -86,6 +79,19 @@ class UDExAvatarGroup extends AvatarGroup {
     container?.removeEventListener("mouseleave", this._onHover.bind(this, false));
   }
 
+  async _initializeItemNavigation() {
+    await renderFinished();
+    this._itemNavigation = new ItemNavigation(this, {
+      getItemsCallback: () => {
+        return this._isIndividual
+          ? this.items.slice(0, this._hiddenStartIndex).map(
+            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
+          )
+          : [];
+      },
+    });
+  }
+
   _onHover(hover: boolean) {
     if (this._isGroup) {
       this.items.every(avatar => {
@@ -102,6 +108,10 @@ class UDExAvatarGroup extends AvatarGroup {
     this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);
   }
 
+  _isValidSize(size: string): boolean {
+    return Object.values(UDExAvatarSize).includes(size as UDExAvatarSize);
+  }
+
   _prepareAvatars() {
     this._colorIndex = 0;
     const visibleColors = Object.values(UDExAvatarColorScheme);
@@ -118,7 +128,7 @@ class UDExAvatarGroup extends AvatarGroup {
       }
 
       if (index !== this._itemsCount - 1 || this._customOverflowButton) {
-        const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;
+        const avatarSize = this._isValidSize(avatar.effectiveSize) ? avatar.effectiveSize : UDExAvatarSize.S;
         avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];
       }
     });

package/src/Breadcrumbs.ts

@@ -18,7 +18,11 @@ import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
-import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
+import {
+  AVAILABLE_VALUES,
+  BREADCRUMBS_ARIA_LABEL,
+  BREADCRUMBS_OVERFLOW_ARIA_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -312,13 +316,17 @@ class UDExBreadcrumbs extends UI5Element {
     return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
   }
 
-  get _accessibleNameText(): string {
+  get _breadcrumbsAccessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
   }
 
   get _dropdownArrowAccessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
   }
+
+  get _dropdownAccessibleNameText(): string {
+    return UDExBreadcrumbs.i18nBundle.getText(AVAILABLE_VALUES);
+  }
 }
 
 UDExBreadcrumbs.define();

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -9,6 +9,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
       id={`udex-${this._id}-breadcrumbs__popover`}
       opener={`udex-${this._id}-breadcrumbs__opener`}
       class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}
+      accessibleName={this._dropdownAccessibleNameText}
       placement={Placement.Bottom}
       horizontalAlign={HorizontalAlign.Start}
       onKeyDown={this._handleKeydown}

package/src/BreadcrumbsTemplate.tsx

@@ -11,14 +11,14 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
     <>
       <nav
         class={`${this._rootClass} ui5-breadcrumbs-root`}
-        aria-label={this._accessibleNameText}>
+        aria-label={this._breadcrumbsAccessibleNameText}>
         <ol onFocusIn={this._onfocusin}>
           <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
             <UDExLink
               id={`udex-${this._id}-breadcrumbs__opener`}
               class={`${this._rootClass}__trigger ${this._triggerClass}`}
               onClick={this._toggleDropdown}
-              aria-label={this._dropdownArrowAccessibleNameText}
+              accessibleName={this._dropdownArrowAccessibleNameText}
               accessibleRole={UDExButtonAccessibleRole.Button}
               icon={slimArrowDown}
               aria-haspopup="true">

package/src/EventRibbonTemplate.tsx

@@ -8,7 +8,7 @@ export default function EventRibbonTemplate(this: UDExEventRibbon) {
   return (
     <a
       onKeyDown={this.handleKeyDown}
-      aria-labelledby={`${this.eventText ? `${this._id}-text` : ""} ${this._id}-link-text`}
+      aria-labelledby={`${this._id}__logo-alt ${this.eventText ? `${this._id}-text` : ""} ${this._id}-link-text`}
       class={{
         [`${rootClass}__container`]: true,
         [`${rootClass}__container-with-background-image`]: this.backgroundImage
@@ -17,6 +17,7 @@ export default function EventRibbonTemplate(this: UDExEventRibbon) {
       href={url}>
       <div class={`${rootClass}__logo`}>
         <img class={`${logoClass}`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+        <span id={`${this._id}__logo-alt`} class="hidden-text">{this.eventLogoAlt}</span>
       </div>
       {this.eventText && <p class={`${rootClass}__text`} id={`${this._id}-text`}>{this.eventText}</p>}
       <div class={`${rootClass}__link-container`}>

package/src/Footer.ts

@@ -10,6 +10,7 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type { UDExAccordionItemClickEventDetail } from "./AccordionItem.js";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
@@ -35,6 +36,7 @@ import {
   COPYRIGHT,
   PUBLIC_SECURITY_NETWORK_NUMBER,
   ICP_NUMBER,
+  BACK_TO_TOP,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -171,6 +173,12 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
  */
 @event("social-media-link-click", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ */
+@event("accordion-item-click", { bubbles: true })
+
 class UDExFooter extends UI5Element {
   eventDetails!: {
     "logo-click": UDExFooterBaseEventDetail,
@@ -184,6 +192,7 @@ class UDExFooter extends UI5Element {
     "about-sap-click": UDExFooterDetailedClickEventDetail,
     "site-information-click":UDExFooterDetailedClickEventDetail,
     "social-media-link-click": UDExFooterDetailedClickEventDetail,
+    "accordion-item-click": UDExAccordionItemClickEventDetail,
   };
   /**
    * Defines the Logo default title
@@ -561,6 +570,10 @@ class UDExFooter extends UI5Element {
     return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
   }
 
+  get backToTopTitle(): string {
+    return UDExFooter.i18nBundle.getText(BACK_TO_TOP);
+  }
+
   _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }
@@ -613,6 +626,10 @@ class UDExFooter extends UI5Element {
       sourceNode,
     });
   }
+
+  handleAccordionItemClick(e: CustomEvent<UDExAccordionItemClickEventDetail>): void {
+    this.fireDecoratorEvent("accordion-item-click", e.detail);
+  }
 }
 
 UDExFooter.define();

package/src/FooterTemplate.tsx

@@ -160,49 +160,51 @@ export default function FooterTemplate(this: Footer) {
         )}
 
         <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
-      </div>
 
-      <div className={`${rootClass}__copyright`}>
-        {this.isChineseLang && (
-          <span className={`${rootClass}__copyright-chinese-text`}>
-            <a
-              href={this.chineseIcpNumberLink}
-              title={this.chineseICPNumber}
-              className={`${rootClass}__copyright-chinese-link`}
-              target="_blank"
-              rel="noopener noreferrer">
-              {this.chineseICPNumber}
-            </a>
-            {this.chineseSecurityNetworkNumber}
-          </span>
+        <div className={`${rootClass}__copyright`}>
+          {this.isChineseLang && (
+            <span className={`${rootClass}__copyright-chinese-text`}>
+              <a
+                href={this.chineseIcpNumberLink}
+                title={this.chineseICPNumber}
+                className={`${rootClass}__copyright-chinese-link`}
+                target="_blank"
+                rel="noopener noreferrer">
+                {this.chineseICPNumber}
+              </a>
+              {this.chineseSecurityNetworkNumber}
+            </span>
+          )}
+          <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
+        </div>
+
+        {this.socialLinksArray.length > 0 && (
+          <ul className={`${rootClass}__social-container`}>
+            {this.socialLinksArray.map((social, index) => (
+              <UDExSocialMediaButton
+                {...{ role: "listitem" }}
+                key={index}
+                type={social.name}
+                url={social.url}
+                target={social.target}
+                accessible-name={social.accessibleName}
+                data-name={social.name}
+                data-id={social.id}
+                onui5-click={this._onSocialMediaLinkClick}>
+              </UDExSocialMediaButton>
+            ))}
+          </ul>
         )}
-        <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
       </div>
 
-      {this.socialLinksArray.length > 0 && (
-        <div className={`${rootClass}__social-container`}>
-          {this.socialLinksArray.map((social, index) => (
-            <UDExSocialMediaButton
-              key={index}
-              type={social.name}
-              url={social.url}
-              target={social.target}
-              accessible-name={social.accessibleName}
-              data-name={social.name}
-              data-id={social.id}
-              onui5-click={this._onSocialMediaLinkClick}>
-            </UDExSocialMediaButton>
-          ))}
-        </div>
-      )}
-
       <UDExButton
         class={`${rootClass}__back-to-top-button`}
         icon={backToTop}
         onClick={this.onBackToTopClick}
         design={UDExButtonDesign.Tertiary}
         size={UDExButtonSize.Large}
-        accessibleName="back to top">
+        tooltip={this.backToTopTitle}
+        accessibleName={this.backToTopTitle}>
       </UDExButton>
     </footer>
   );
@@ -213,7 +215,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
     <UDExAccordion class={`${rootClass}__accordion`}>
       {this.quickLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._quickLinksTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._quickLinksTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list udex-footer__links-list--mobile`}>
               {this.quickLinksArray.map((link, index) => (
                 <li key={index}>
@@ -237,7 +239,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.trendingLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._trendingTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._trendingTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
               {this.trendingLinksArray.map((link, index) => (
                 <li key={index}>
@@ -261,7 +263,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.aboutLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
               {this.aboutLinksArray.map((link, index) => (
                 <li key={index}>
@@ -285,7 +287,7 @@ function mobileNavigation(this: Footer, rootClass: string) {
 
       {this.siteInformationLinksArray.length > 0 && (
         <>
-          <UDExAccordionItem label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
+          <UDExAccordionItem onAccordionItemClick={this.handleAccordionItemClick} label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
             <ul className={`${rootClass}__links-list rootClass__links-list--mobile`}>
               {this.siteInformationLinksArray.map((link, index) => (
                 <li key={index}>

package/src/MediaPlayer.ts

@@ -1,19 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/play.js";
-import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
-import UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
+import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
+import type UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
 
 // Template
-import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.js";
+import MediaPlayerTemplate from "./MediaPlayerTemplate.js";
 
 // Styles
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
@@ -58,10 +56,9 @@ type UDExMediaPlayerVideoProgressEventDetail = {
  */
 @customElement({
   tag: "udex-media-player",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MediaPlayerCss,
   template: MediaPlayerTemplate,
-  dependencies: [Icon, UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],
 })
 /**
  * Fires when video is played
@@ -585,7 +582,7 @@ class UDExMediaPlayer extends UI5Element {
     return this._youtubeSrc || this._vimeoSrc;
   }
 
-  get _tracks() {
+  get _tracks(): Array<HTMLTrackElement> {
     return this.getSlottedNodes("caption");
   }