@sapudex/web-components 2.12.1 → 2.14.0

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

@@ -684,7 +684,7 @@
     },
     {
       "name": "udex-filter-menu",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
       "attributes": [
         {
           "name": "badge-value",
@@ -1180,7 +1180,7 @@
     },
     {
       "name": "udex-hero-banner",
-      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
+      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
       "attributes": [
         {
           "name": "background-image",
@@ -2508,7 +2508,7 @@
         {
           "name": "color-scheme",
           "description": "Defines the color scheme of the Promo Tile.",
-          "values": [{ "name": "UDExPromoTileColorSheme" }]
+          "values": [{ "name": "UDExPromoTileColorScheme" }]
         },
         {
           "name": "accessible-name",
@@ -2991,7 +2991,7 @@
     },
     {
       "name": "udex-select-box",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **remove** - Fired event when the user clicks on the reset button in the search.\n- **show-more** - Fired event when the user clicks on the More button.\n- **before-open** - Fired before the dropdown pane is opened.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **remove** - Fired event when the user clicks on the reset button in the search.\n- **show-more** - Fired event when the user clicks on the More button.\n- **before-open** - Fired before the dropdown pane is opened.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
       "attributes": [
         {
           "name": "disable-target-overlap",
@@ -3397,7 +3397,7 @@
     },
     {
       "name": "udex-social-media-button",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.\n\n### **Slots:**\n - **default** - Defines the slot for custom SVG icon.",
       "attributes": [
         {
           "name": "type",
@@ -4210,7 +4210,7 @@
     },
     {
       "name": "udex-tooltip",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tooltip</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tooltip</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "title",

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.12.1",
+  "version": "2.14.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1492,7 +1492,7 @@
         },
         {
           "name": "udex-filter-menu",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
           "doc-url": "",
           "attributes": [
             {
@@ -2709,7 +2709,7 @@
         },
         {
           "name": "udex-hero-banner",
-          "description": "\n---\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
+          "description": "\n---\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
           "doc-url": "",
           "attributes": [
             {
@@ -2750,6 +2750,10 @@
           ],
           "slots": [
             { "name": "content", "description": "Slot for primary content." },
+            {
+              "name": "mediaContent",
+              "description": "Slot for image or video content."
+            },
             {
               "name": "additionalContent",
               "description": "Slot for any additional content."
@@ -5395,52 +5399,61 @@
             {
               "name": "orientation",
               "description": "Defines the orientation of the Promo Tile component.",
-              "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+              "value": {
+                "type": "\"Vertical\" | \"Horizontal\"",
+                "default": "\"Vertical\""
+              }
             },
             {
               "name": "icon",
               "description": "Defines the UI5 icon name in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "image-label",
               "description": "Defines the image aria label and alt in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "logo-url",
               "description": "Defines the logo URL in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "header",
               "description": "Defines the header text of the promo tile.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "eyebrow",
               "description": "Defines the eyebrow text of the promo tile.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "button",
               "description": "Defines the CTA button label",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "button-design",
               "description": "Defines the CTA button design",
-              "value": { "type": "UDExButtonDesign | undefined" }
+              "value": {
+                "type": "UDExButtonDesign | undefined",
+                "default": "\"\""
+              }
             },
             {
               "name": "color-scheme",
               "description": "Defines the color scheme of the Promo Tile.",
-              "value": { "type": "UDExPromoTileColorSheme | undefined" }
+              "value": {
+                "type": "UDExPromoTileColorScheme | undefined",
+                "default": "\"\""
+              }
             },
             {
               "name": "accessible-name",
               "description": "Defines the accessible name of the component.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -5500,7 +5513,7 @@
               {
                 "name": "color-scheme",
                 "description": "Defines the color scheme of the Promo Tile.",
-                "value": { "type": "UDExPromoTileColorSheme | undefined" }
+                "value": { "type": "UDExPromoTileColorScheme | undefined" }
               },
               {
                 "name": "accessible-name",
@@ -6323,7 +6336,7 @@
         },
         {
           "name": "udex-select-box",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n---\n\n\n### **Events:**\n - **remove** - Fired event when the user clicks on the reset button in the search.\n- **show-more** - Fired event when the user clicks on the More button.\n- **before-open** - Fired before the dropdown pane is opened.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n---\n\n\n### **Events:**\n - **remove** - Fired event when the user clicks on the reset button in the search.\n- **show-more** - Fired event when the user clicks on the More button.\n- **before-open** - Fired before the dropdown pane is opened.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
           "doc-url": "",
           "attributes": [
             {
@@ -7225,7 +7238,7 @@
         },
         {
           "name": "udex-social-media-button",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.\n\n### **Slots:**\n - **default** - Defines the slot for custom SVG icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -7257,6 +7270,12 @@
               }
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the slot for custom SVG icon."
+            }
+          ],
           "events": [
             {
               "name": "click",
@@ -8948,7 +8967,7 @@
         },
         {
           "name": "udex-tooltip",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tooltip</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tooltip</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -9025,7 +9044,24 @@
               "description": "Defines the content of the component."
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "before-open",
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
+            },
+            {
+              "name": "open",
+              "description": "Fired after the component is opened."
+            },
+            {
+              "name": "before-close",
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
+            },
+            {
+              "name": "close",
+              "description": "Fired after the component is closed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -9090,7 +9126,24 @@
                 "value": { "type": "boolean" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "before-open",
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
+              },
+              {
+                "name": "open",
+                "description": "Fired after the component is opened."
+              },
+              {
+                "name": "before-close",
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
+              },
+              {
+                "name": "close",
+                "description": "Fired after the component is closed."
+              }
+            ]
           }
         },
         {

package/package.json

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

package/src/Accordion.ts

@@ -15,10 +15,6 @@ import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
 
-type UDExAccordionToggleItemsEventDetail = {
-  isOpen: boolean
-}
-
 export enum UDExAccordionHeadlineLevel {
   H1 = "H1",
   H2 = "H2",
@@ -28,6 +24,10 @@ export enum UDExAccordionHeadlineLevel {
   H6 = "H6"
 }
 
+type UDExAccordionToggleItemsEventDetail = {
+  isOpen: boolean
+}
+
 /**
  * @class
  *
@@ -218,3 +218,4 @@ class UDExAccordion extends UI5Element {
 UDExAccordion.define();
 
 export default UDExAccordion;
+export type { UDExAccordionToggleItemsEventDetail };

package/src/AccordionItem.ts

@@ -15,6 +15,7 @@ export enum UDExAccordionItemTitleSize {
   Standard = "Standard",
   Large = "Large"
 }
+
 /**
  * @class
  *

package/src/Breadcrumbs.ts

@@ -4,11 +4,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import {
-  isTabNext,
-  isTabPrevious,
-  isEscape,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
@@ -22,10 +18,7 @@ import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.j
 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 { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -33,7 +26,7 @@ import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js"
 
 const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
 
-export type UDExBreadcrumbsItemClickEventDetail = {
+type UDExBreadcrumbsItemClickEventDetail = {
   item: UDExBreadcrumbsItem;
   altKey?: boolean;
   ctrlKey?: boolean;
@@ -326,3 +319,4 @@ class UDExBreadcrumbs extends UI5Element {
 UDExBreadcrumbs.define();
 
 export default UDExBreadcrumbs;
+export type { UDExBreadcrumbsItemClickEventDetail };

package/src/Checkbox.ts

@@ -8,13 +8,14 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import type Label from "@ui5/webcomponents/dist/Label.js";
 
 // Styles
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
-import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
-import type Label from "@ui5/webcomponents/dist/Label.js";
 
 const LABEL_TEXT_HEIGHT = 18.5;
+
 /**
  * @class
  *

package/src/ContactItem.ts

@@ -117,3 +117,4 @@ class UDExContactItem extends UI5Element {
 UDExContactItem.define();
 
 export default UDExContactItem;
+export type { UDExContactItemClickEventDetail };

package/src/ControlButton.ts

@@ -1,12 +1,12 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 
 // Styles
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-import UDExButtonSize from "./types/ButtonSize.js";
-import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 
 /**
  * @class

package/src/CountrySelector.ts

@@ -2,11 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import {
-  isEscape,
-  isTabPrevious,
-  isTabNext,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEscape, isTabPrevious, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
@@ -519,3 +515,4 @@ class UDExCountrySelector extends UDExSearchableListBase {
 UDExCountrySelector.define();
 
 export default UDExCountrySelector;
+export type { UDExCountrySelectorChangeSearchEventDetail };

package/src/DatePicker.ts

@@ -28,13 +28,13 @@ export enum UDExDatePickerSelectionMode {
   Range = "Range",
 }
 
-export type UDExDatePickerSelectionChangeEventDetail = {
+type UDExDatePickerSelectionChangeEventDetail = {
   selectedValues: Array<string>;
   selectedDates: Array<number | undefined>;
   timestamp: number | undefined;
 };
 
-export type UDExDatePickerValueStateChangeEventDetail = {
+type UDExDatePickerValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }
@@ -561,3 +561,4 @@ class UDExDatePicker extends DateComponentBase {
 UDExDatePicker.define();
 
 export default UDExDatePicker;
+export type { UDExDatePickerSelectionChangeEventDetail, UDExDatePickerValueStateChangeEventDetail };

package/src/Dropdown.ts

@@ -24,7 +24,6 @@ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
  * @tagname udex-dropdown
  * @public
  */
-
 @customElement({
   tag: "udex-dropdown",
   renderer: jsxRenderer,

package/src/EventRibbon.ts

@@ -9,10 +9,10 @@ import { eventLogoText, UDExEventRibbonMode } from "./types/EventRibbon.js";
 import "@ui5/webcomponents-icons/add-calendar.js";
 import "@ui5/webcomponents-icons/media-play.js";
 import EventRibbonTemplate from "./EventRibbonTemplate.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 
 // Styles
 import EventRibbonCss from "./generated/themes/EventRibbon.css.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 
 /**
  * @class

package/src/EventRibbonTemplate.tsx

@@ -3,26 +3,25 @@ import type UDExEventRibbon from "./EventRibbon.js";
 
 export default function EventRibbonTemplate(this: UDExEventRibbon) {
   const rootClass = "udex-event-ribbon";
+  const logoClass = this.customEventLogo?.length ? `${rootClass}__logo-img ${rootClass}__custom-logo` : `${rootClass}__logo-img`;
   const { text, target, url } = this._eventLink;
   return (
     <a
       onKeyDown={this.handleKeyDown}
-      role="banner"
-      aria-label={this.eventText}
+      aria-labelledby={`${this.eventText ? `${this._id}-text` : ""} ${this._id}-link-text`}
       class={{
         [`${rootClass}__container`]: true,
         [`${rootClass}__container-with-background-image`]: this.backgroundImage
       }}
       target={target}
-      href={url}
-      title={text}>
+      href={url}>
       <div class={`${rootClass}__logo`}>
-        <img class={`${rootClass}__logo-img`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+        <img class={`${logoClass}`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
       </div>
-      {this.eventText && <p class={`${rootClass}__text`}>{this.eventText}</p>}
+      {this.eventText && <p class={`${rootClass}__text`} id={`${this._id}-text`}>{this.eventText}</p>}
       <div class={`${rootClass}__link-container`}>
         {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
-        <span class={`${rootClass}__link-text`}>{text}</span>
+        <span class={`${rootClass}__link-text`} id={`${this._id}-link-text`}>{text}</span>
       </div>
     </a>
   );

package/src/FilterMenu.ts

@@ -32,12 +32,18 @@ import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defau
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 
 // Styles
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
-import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+
+export type initialItemState = {
+  id: string,
+  selected: boolean,
+  indeterminate?: boolean,
+}
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -47,12 +53,6 @@ type UDExFilterMenuResetClickEventDetail = {
   restoredItems: Array<UDExListItemBase>,
 }
 
-type initialItemState = {
-  id: string,
-  selected: boolean,
-  indeterminate?: boolean,
-}
-
 /**
  * @class
  *
@@ -522,6 +522,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.fireDecoratorEvent("after-close");
   }
 
+  /**
+   * Close the dropdown.
+   * @public
+   */
+  close(): void {
+    this.onDropdownClose();
+  }
+
   get disableAllowTargetOverlap(): boolean {
     return !this.disableTargetOverlap;
   }
@@ -582,3 +590,4 @@ class UDExFilterMenu extends UDExSearchableListBase {
 UDExFilterMenu.define();
 
 export default UDExFilterMenu;
+export type { UDExFilterMenuResetClickEventDetail, UDExFilterMenuResultClickEventDetail };

package/src/FilterMenuGroupHeader.ts

@@ -21,7 +21,6 @@ import UDExFilterMenuItem from "./FilterMenuItem.js";
  * @extends UDExListGroupHeaderBase
  * @public
  */
-
 @customElement({
   tag: "udex-filter-menu-group-header",
   renderer: litRender,

package/src/FilterMenuItem.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExListItemBase from "./ListItemBase.js";
+
 /**
  * @class
  *

package/src/Footer.ts

@@ -625,3 +625,4 @@ class UDExFooter extends UI5Element {
 UDExFooter.define();
 
 export default UDExFooter;
+export type { UDExFooterBaseEventDetail, UDExFooterDetailedClickEventDetail };

package/src/HeroBanner.hbs

@@ -33,6 +33,9 @@
     </div>
   {{/if}}
 </div>
+{{#if hasMediaContent}}
+  <slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>
+{{/if}}
 
 {{#*inline "hero-content"}}
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>

package/src/HeroBanner.ts

@@ -7,7 +7,6 @@ import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
-
 import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js";
 
 // Styles
@@ -111,6 +110,15 @@ class UDExHeroBanner extends UI5Element {
   @slot()
     content?: Array<HTMLElement>;
 
+  /**
+   * Slot for image or video content.
+   *
+   * @slot
+   * @public
+   */
+  @slot()
+    mediaContent?: Array<HTMLElement>;
+
   /**
    * Slot for any additional content.
    *
@@ -157,6 +165,11 @@ class UDExHeroBanner extends UI5Element {
     }
     return heroBannerClasses.join(" ");
   }
+
+  get hasMediaContent() {
+    return !!this.mediaContent?.length;
+  }
+
   get hasAdditionalContent() {
     return !!this.additionalContent?.length;
   }

package/src/InputGroup.ts

@@ -3,7 +3,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExCheckbox from "./Checkbox.js";
 import type UDExRadioButton from "./RadioButton.js";

package/src/LinkList.ts

@@ -14,6 +14,7 @@ export enum UDExLinkListType {
   TileS = "TileS",
   TileL = "TileL",
 }
+
 /**
  * @class
  *