@sapudex/web-components 2.53.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",
@@ -2800,7 +2810,7 @@
     },
     {
       "name": "udex-media-player-vimeo",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-vimeo</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n\n### **Methods:**\n - **getPlayer(): _VimeoPlayer_** - Returns video element",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-vimeo</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n- **videoStart** - Fires when video starts playing for the first time or is replayed after ending\n\n### **Methods:**\n - **getPlayer(): _VimeoPlayer_** - Returns video element",
       "attributes": [
         {
           "name": "aspect-ratio-class",
@@ -2837,7 +2847,7 @@
     },
     {
       "name": "udex-media-player-youtube",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-youtube</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-youtube</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n- **videoStart** - Fires when video starts playing for the first time or is replayed after ending\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
       "attributes": [
         {
           "name": "aspect-ratio",

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.53.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"
@@ -6107,7 +6138,7 @@
         },
         {
           "name": "udex-media-player-vimeo",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-vimeo</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n---\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n\n### **Methods:**\n - **getPlayer(): _VimeoPlayer_** - Returns video element",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-vimeo</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n---\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n- **videoStart** - Fires when video starts playing for the first time or is replayed after ending\n\n### **Methods:**\n - **getPlayer(): _VimeoPlayer_** - Returns video element",
           "doc-url": "",
           "attributes": [
             {
@@ -6148,7 +6179,11 @@
               "name": "playing",
               "description": "Fires when video watching progress changed"
             },
-            { "name": "ready", "description": "Fires when video is ready" }
+            { "name": "ready", "description": "Fires when video is ready" },
+            {
+              "name": "videoStart",
+              "description": "Fires when video starts playing for the first time or is replayed after ending"
+            }
           ],
           "js": {
             "properties": [
@@ -6190,13 +6225,17 @@
                 "name": "playing",
                 "description": "Fires when video watching progress changed"
               },
-              { "name": "ready", "description": "Fires when video is ready" }
+              { "name": "ready", "description": "Fires when video is ready" },
+              {
+                "name": "videoStart",
+                "description": "Fires when video starts playing for the first time or is replayed after ending"
+              }
             ]
           }
         },
         {
           "name": "udex-media-player-youtube",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-youtube</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n---\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player-youtube</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n---\n\n\n### **Events:**\n - **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n- **ready** - Fires when video is ready\n- **videoStart** - Fires when video starts playing for the first time or is replayed after ending\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
           "doc-url": "",
           "attributes": [
             {
@@ -6235,7 +6274,11 @@
               "name": "playing",
               "description": "Fires when video watching progress changed"
             },
-            { "name": "ready", "description": "Fires when video is ready" }
+            { "name": "ready", "description": "Fires when video is ready" },
+            {
+              "name": "videoStart",
+              "description": "Fires when video starts playing for the first time or is replayed after ending"
+            }
           ],
           "js": {
             "properties": [
@@ -6274,7 +6317,11 @@
                 "name": "playing",
                 "description": "Fires when video watching progress changed"
               },
-              { "name": "ready", "description": "Fires when video is ready" }
+              { "name": "ready", "description": "Fires when video is ready" },
+              {
+                "name": "videoStart",
+                "description": "Fires when video starts playing for the first time or is replayed after ending"
+              }
             ]
           }
         },

package/package.json

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

package/src/Accordion.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";

package/src/AccordionItem.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";

package/src/Avatar.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -207,7 +207,7 @@ class UDExAvatar extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    badge!: Array<HTMLElement>;
+    badge!: Slot<HTMLElement>;
 
   /**
    * @private

package/src/Badge.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 BadgeTemplate from "./BadgeTemplate.js";
 import UDExIconPlacement from "./types/IconPlacement.js";

package/src/Breadcrumbs.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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";

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/Carousel.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";

package/src/Contact.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 ContactTemplate from "./ContactTemplate.js";
 import type UDExContactItem from "./ContactItem.js";

package/src/ContactItem.ts

@@ -1,7 +1,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 slot from "@ui5/webcomponents-base/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";

package/src/Feed.ts

@@ -1,8 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } 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 UDExButtonDesign from "./types/ButtonDesign.js";
 import FeedItem from "./FeedItem.js";
@@ -57,7 +58,7 @@ class UDExFeed extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement, individualSlots: true })
-    items!: Array<UDExFeedItem>;
+    items!: Slot<UDExFeedItem>;
 
   /**
    * Defines the UI5 icon name in the pictogram section.

package/src/FeedItem.ts

@@ -1,9 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { UDExTarget } from "./types/common.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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
@@ -149,7 +150,7 @@ class UDExFeedItem extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    avatar!: Array<HTMLElement>;
+    avatar!: Slot<HTMLElement>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

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

@@ -1,5 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";

package/src/Footer.ts

@@ -1,9 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -20,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,
@@ -78,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";
 
@@ -151,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
@@ -217,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,
@@ -232,7 +243,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement, individualSlots: true })
-    customSocialLinks!: Array<UDExSocialMediaButton>;
+    customSocialLinks!: Slot<UDExSocialMediaButton>;
 
   /**
    * Defines the Logo default title
@@ -378,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
    *
@@ -526,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 {
@@ -548,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);
   }
@@ -651,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");
   }
@@ -676,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, {