@sapudex/web-components 2.17.1 → 2.19.0

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

@@ -163,7 +163,17 @@
             { "name": "Negative" },
             { "name": "Information" },
             { "name": "Positive" },
-            { "name": "Warning" }
+            { "name": "Warning" },
+            { "name": "Grey-Light" },
+            { "name": "Grey-Dark" },
+            { "name": "Red-Light" },
+            { "name": "Red-Dark" },
+            { "name": "Mango-Light" },
+            { "name": "Mango-Dark" },
+            { "name": "Green-Light" },
+            { "name": "Green-Dark" },
+            { "name": "... 9 more ..." },
+            { "name": "Raspberry-Dark" }
           ]
         },
         {
@@ -208,6 +218,12 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-busy-indicator",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-busy-indicator</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n\n\n---\n\n\n",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "udex-button",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Button.js\";</code>\n\n\n---\n\n\n",
@@ -1057,7 +1073,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 - **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\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.\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
       "attributes": [
         {
           "name": "logo-title",
@@ -1220,6 +1236,41 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-image-grid-ticker",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTicker.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **play-button-click** - Fired event when the user click on a play/paused button.\n\n### **Slots:**\n - **default** - Slot for image grid ticker items.",
+      "attributes": [
+        {
+          "name": "grayscale",
+          "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "udex-image-grid-ticker-item",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTickerItem.js\";</code>\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "Defines the source URL",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "Defines image alt text",
+          "values": []
+        },
+        {
+          "name": "tooltip",
+          "description": "Defines tooltip on hover",
+          "values": []
+        },
+        { "name": "href", "description": "Defines link URL", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "udex-input-group",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-input-group</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/InputGroup.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for input elements items.",

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.1",
+  "version": "2.19.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\""
                 }
               },
               {
@@ -482,6 +482,14 @@
             "events": []
           }
         },
+        {
+          "name": "udex-busy-indicator",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-busy-indicator</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "udex-button",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Button.js\";</code>\n---\n",
@@ -2366,7 +2374,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.\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
           "doc-url": "",
           "attributes": [
             {
@@ -2490,6 +2498,12 @@
               "value": { "type": "string", "default": "chineseICPDefaultLink" }
             }
           ],
+          "slots": [
+            {
+              "name": "customSocialLinks",
+              "description": "Defines the slot for custom Social Links."
+            }
+          ],
           "events": [
             {
               "name": "logo-click",
@@ -2534,6 +2548,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 +2721,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."
               }
             ]
           }
@@ -2805,6 +2827,98 @@
             "events": []
           }
         },
+        {
+          "name": "udex-image-grid-ticker",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTicker.js\";</code>\n---\n\n\n### **Events:**\n - **play-button-click** - Fired event when the user click on a play/paused button.\n\n### **Slots:**\n - **default** - Slot for image grid ticker items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "grayscale",
+              "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Slot for image grid ticker items."
+            }
+          ],
+          "events": [
+            {
+              "name": "play-button-click",
+              "description": "Fired event when the user click on a play/paused button."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "grayscale",
+                "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "play-button-click",
+                "description": "Fired event when the user click on a play/paused button."
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-image-grid-ticker-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTickerItem.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "Defines the source URL",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "alt",
+              "description": "Defines image alt text",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines tooltip on hover",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "href",
+              "description": "Defines link URL",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "Defines the source URL",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "alt",
+                "description": "Defines image alt text",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "tooltip",
+                "description": "Defines tooltip on hover",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "href",
+                "description": "Defines link URL",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "udex-input-group",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-input-group</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/InputGroup.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for input elements items.",

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.1",
+  "version": "2.19.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

@@ -51,6 +51,12 @@ const variablesOverwrite = `
   [udex-search] {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
   }
+  
+  [udex-upload] {
+    ${getScopedVarName("--_ui5_input_focus_offset")}: 2px;
+    ${getScopedVarName("--_ui5_input_focus_border_radius")}: 0.375rem;
+    ${getScopedVarName("--_ui5_input_focus_outline_color")}: var(--sapContent_FocusColor);
+  }
 
   .sapUiSizeCompact,
   .ui5-content-density-compact,

package/src/BusyIndicator.ts

@@ -0,0 +1,33 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import UI5BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-busy-indicator</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/BusyIndicator.js";</code>
+ *
+ * @constructor
+ * @extends UI5BusyIndicator
+ * @tagname udex-busy-indicator
+ * @public
+ */
+@customElement({
+  tag: "udex-busy-indicator",
+  renderer: jsxRenderer,
+  styles: [UI5BusyIndicator.styles],
+})
+
+class UDExBusyIndicator extends UI5BusyIndicator {}
+
+UDExBusyIndicator.define();
+
+export default UDExBusyIndicator;

package/src/FilterMenu.ts

@@ -9,7 +9,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import UDExBusyIndicator from "./BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -79,7 +79,7 @@ type UDExFilterMenuResetClickEventDetail = {
   dependencies: [
     Popover,
     Icon,
-    BusyIndicator,
+    UDExBusyIndicator,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,

package/src/Footer.ts

@@ -3,6 +3,7 @@ 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 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";
@@ -10,6 +11,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";
@@ -48,6 +50,7 @@ export type FooterLink = {
   title: string;
   url: string;
   target: UDExTarget;
+  role?: string;
 };
 
 export type FooterSocialLink = {
@@ -172,6 +175,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,
@@ -185,7 +194,18 @@ class UDExFooter extends UI5Element {
     "about-sap-click": UDExFooterDetailedClickEventDetail,
     "site-information-click":UDExFooterDetailedClickEventDetail,
     "social-media-link-click": UDExFooterDetailedClickEventDetail,
+    "accordion-item-click": UDExAccordionItemClickEventDetail,
   };
+
+  /**
+   * Defines the slot for custom Social Links.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, individualSlots: true })
+    customSocialLinks!: Array<UDExSocialMediaButton>;
+
   /**
    * Defines the Logo default title
    *
@@ -566,6 +586,10 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(BACK_TO_TOP);
   }
 
+  get hasSocialLinksSlot(): boolean {
+    return !!this.customSocialLinks.length;
+  }
+
   _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }
@@ -618,6 +642,10 @@ class UDExFooter extends UI5Element {
       sourceNode,
     });
   }
+
+  handleAccordionItemClick(e: CustomEvent<UDExAccordionItemClickEventDetail>): void {
+    this.fireDecoratorEvent("accordion-item-click", e.detail);
+  }
 }
 
 UDExFooter.define();