@sapudex/web-components 2.1.0 → 2.2.0

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

@@ -190,7 +190,7 @@
     },
     {
       "name": "udex-button",
-      "description": "\n\n\n---\n\n\n",
+      "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",
       "attributes": [
         {
           "name": "size",
@@ -255,6 +255,11 @@
             { "name": "Success" },
             { "name": "Error" }
           ]
+        },
+        {
+          "name": "wrapping-type",
+          "description": "Defines whether the component text wraps when there is not enough space..",
+          "values": [{ "name": "None" }, { "name": "Normal" }]
         }
       ],
       "references": []
@@ -1726,7 +1731,7 @@
     },
     {
       "name": "udex-media-player",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
       "attributes": [
         {
           "name": "options",
@@ -1836,7 +1841,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 - **ready** - Fires when video is ready\n- **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n\n### **Methods:**\n - **getPlayer(): _YT.Player | 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 - **ready** - Fires when video is ready\n- **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
       "attributes": [
         {
           "name": "source",
@@ -1943,6 +1948,11 @@
       "name": "udex-password-field",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n\n\n---\n\n\n",
       "attributes": [
+        {
+          "name": "autocomplete",
+          "description": "Defines the behaviour of autocomplete.",
+          "values": [{ "name": "on" }, { "name": "off" }]
+        },
         {
           "name": "disabled",
           "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -2928,7 +2938,13 @@
         {
           "name": "value-state",
           "description": "Defines the value state of the component.",
-          "values": [{ "name": "UDExStatusBadgeValueState" }]
+          "values": [
+            { "name": "Information" },
+            { "name": "Warning" },
+            { "name": "Success" },
+            { "name": "Error" },
+            { "name": "Edit" }
+          ]
         },
         {
           "name": "size",
@@ -3488,12 +3504,7 @@
         {
           "name": "value-state",
           "description": "Defines the value state of the component.",
-          "values": [
-            { "name": "Warning" },
-            { "name": "Success" },
-            { "name": "Error" },
-            { "name": "Standard" }
-          ]
+          "values": [{ "name": "UDExValueState" }]
         },
         {
           "name": "required",
@@ -3607,6 +3618,11 @@
           "description": "Defines if the text-field is active",
           "values": []
         },
+        {
+          "name": "autocomplete",
+          "description": "Defines the behaviour of autocomplete.",
+          "values": []
+        },
         {
           "name": "direction",
           "description": "Defines direction of the input.",

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.1.0",
+  "version": "2.2.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -430,7 +430,7 @@
         },
         {
           "name": "udex-button",
-          "description": "\n---\n",
+          "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",
           "doc-url": "",
           "attributes": [
             {
@@ -530,6 +530,14 @@
                 "type": "\"None\" | \"Success\" | \"Error\"",
                 "default": "\"None\""
               }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines whether the component text wraps when there is not enough space..",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "events": [],
@@ -539,6 +547,11 @@
                 "name": "value-state",
                 "description": "Defines the value state of the component.",
                 "value": { "type": "\"None\" | \"Success\" | \"Error\"" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines whether the component text wraps when there is not enough space..",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": []
@@ -3645,7 +3658,7 @@
         },
         {
           "name": "udex-media-player",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-media-player</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MediaPlayer.js\";</code>\n---\n\n\n### **Events:**\n - **videoStart** - Fires when video is played\n- **videoPause** - Fires when video is paused\n- **videoComplete** - Fires when video is watched\n- **videoReady** - Fires when video is ready\n- **videoProgress** - Fires when video watching progress changed\n- **video25** - Fires when 25% of video is watched\n- **video50** - Fires when 50% of video is watched\n- **video75** - Fires when 75% of video is watched\n\n### **Methods:**\n - **getPlayer(): _HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null_** - Returns video element\n\n### **Slots:**\n - **default** - Placeholder for all html `track` elements to provide video subtitles.\nExample: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\nMore information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track",
           "doc-url": "",
           "attributes": [
             {
@@ -3944,7 +3957,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### **Events:**\n - **ready** - Fires when video is ready\n- **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n\n### **Methods:**\n - **getPlayer(): _YT.Player | 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 - **ready** - Fires when video is ready\n- **ended** - Fires when video play ended\n- **pause** - Fires when video is paused\n- **playing** - Fires when video watching progress changed\n\n### **Methods:**\n - **getPlayer(): _YoutubePlayer | null_** - Returns video element",
           "doc-url": "",
           "attributes": [
             {
@@ -4176,6 +4189,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "\"on\" | \"off\"", "default": "\"off\"" }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -4245,6 +4263,11 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "\"on\" | \"off\"" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -6067,7 +6090,7 @@
               "name": "value-state",
               "description": "Defines the value state of the component.",
               "value": {
-                "type": "UDExStatusBadgeValueState",
+                "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\"",
                 "default": "\"Information\""
               }
             },
@@ -6091,7 +6114,9 @@
               {
                 "name": "value-state",
                 "description": "Defines the value state of the component.",
-                "value": { "type": "UDExStatusBadgeValueState" }
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\""
+                }
               },
               {
                 "name": "size",
@@ -7223,10 +7248,7 @@
             {
               "name": "value-state",
               "description": "Defines the value state of the component.",
-              "value": {
-                "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\"",
-                "default": "\"Standard\""
-              }
+              "value": { "type": "UDExValueState", "default": "\"Standard\"" }
             },
             {
               "name": "required",
@@ -7300,9 +7322,7 @@
               {
                 "name": "value-state",
                 "description": "Defines the value state of the component.",
-                "value": {
-                  "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\""
-                }
+                "value": { "type": "UDExValueState" }
               },
               {
                 "name": "required",
@@ -7416,6 +7436,11 @@
               "description": "Defines if the text-field is active",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "string", "default": "\"off\"" }
+            },
             {
               "name": "direction",
               "description": "Defines direction of the input.",
@@ -7511,6 +7536,11 @@
                 "description": "Defines if the text-field is active",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "direction",
                 "description": "Defines direction of the input.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -32,19 +32,19 @@
   },
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
-    "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "2.10.0",
-    "@ui5/webcomponents-base": "2.10.0",
-    "@ui5/webcomponents-fiori": "2.10.0",
-    "@ui5/webcomponents-icons": "2.10.0",
-    "@ui5/webcomponents-theming": "2.10.0",
+    "@types/youtube": "^0.1.2",
+    "@ui5/webcomponents": "2.12.0",
+    "@ui5/webcomponents-base": "2.12.0",
+    "@ui5/webcomponents-fiori": "2.12.0",
+    "@ui5/webcomponents-icons": "2.12.0",
+    "@ui5/webcomponents-theming": "2.12.0",
     "@vimeo/player": "^2.24.0",
     "cypress-real-events": "^1.14.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.10.0",
+    "@ui5/webcomponents-tools": "2.12.0",
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/Badge.ts

@@ -9,7 +9,7 @@ import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import {
   UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
@@ -81,7 +81,7 @@ class UDExBadge extends UI5Element {
   * @public
   */
     @property()
-      iconPlacement: `${IconPlacement}` = IconPlacement.End;
+      iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;
   /**
    * Defines icon name
   *
@@ -100,11 +100,11 @@ class UDExBadge extends UI5Element {
     default!: Array<Node>;
 
   get startIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.Start;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.End;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get textClasses(): string {

package/src/Breadcrumbs.hbs

@@ -3,19 +3,16 @@
 	aria-label="{{_accessibleNameText}}">
 	<ol @focusin="{{_onfocusin}}">
 		<li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper">
-			<button
+            <udex-link
                 id="udex-{{this._id}}-breadcrumbs__opener"
                 @click="{{_toggleDropdown}}"
                 class="udex-breadcrumbs__trigger {{_triggerClass}}"
-				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="true">
-                <ui5-icon
-                    name="slim-arrow-down"
-                    mode="Decorative"
-                    title="{{_dropdownArrowAccessibleNameText}}">
-                </ui5-icon>
-			</button>
+                accessible-role="button"
+                aria-label="{{_dropdownArrowAccessibleNameText}}"
+                icon="slim-arrow-down"
+                icon-placement="Start"
+                aria-haspopup="true">
+            </udex-link>
 		</li>
 		{{#each _linksData}}
             <li

package/src/Breadcrumbs.ts

@@ -122,6 +122,7 @@ class UDExBreadcrumbs extends UI5Element {
 
   _responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
+  _shouldFocusFirstVisibleItem!: boolean;
 
   onBeforeRendering(): void {
     this._preprocessItems();
@@ -130,7 +131,13 @@ class UDExBreadcrumbs extends UI5Element {
   onAfterRendering(): void {
     this._responsivePopover = this._getResponsePopover();
     this._initItemNavigation();
+    this._dropdownArrowLink.forcedTabIndex = "0";
     this._handleOutsideClick();
+
+    if (this._shouldFocusFirstVisibleItem) {
+      this._getFocusableItems()[1].focus();
+      this._shouldFocusFirstVisibleItem = false;
+    }
   }
 
   _preprocessItems(): void {
@@ -236,6 +243,12 @@ class UDExBreadcrumbs extends UI5Element {
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
+    if (isTabNext(e) && isLastItem) {
+      this._shouldFocusFirstVisibleItem = true;
+      this._toggleDropdown();
+      return;
+    }
+
     if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {
       this._toggleDropdown();
     }
@@ -267,7 +280,7 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
   get _links(): Array<UDExLink> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [udex-link]"));
   }
 
   /**

package/src/BreadcrumbsPopover.hbs

@@ -4,7 +4,9 @@
   class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
   placement="Bottom"
   horizontal-align="Start"
-  @keydown="{{_handleKeydown}}">
+  @keydown="{{_handleKeydown}}"
+  @close="{{_afterDropdownClose}}"
+  @open="{{_afterDropdownOpen}}">
   <div class="udex-breadcrumbs__popover-content">
     {{#each _dropdownItems}}
       {{#if this.icon}}

package/src/Button.ts

@@ -8,7 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
-import { UDExButtonDesign, UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
@@ -16,6 +17,16 @@ import ButtonCss from "./generated/themes/Button.css.js";
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Button.js";</code>
+ *
  * @constructor
  * @extends Button
  * @tagname udex-button

package/src/Checkbox.ts

@@ -6,10 +6,15 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
 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";
 
 // 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
  *
@@ -46,9 +51,37 @@ class UDExCheckbox extends CheckBox {
   /** @ts-expect-error */
     valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;
 
+  /**
+   * Defines whether the component text wraps when there is not enough space..
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    wrappingType: `${WrappingType}` = WrappingType.None;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this.shadowRoot?.querySelector(".ui5-checkbox-label")?.removeAttribute("required");
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   valueStateMappings(): Record<string, string> {
     return {
       [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),
@@ -56,11 +89,29 @@ class UDExCheckbox extends CheckBox {
     };
   }
 
+  _handleResize(): void {
+    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;
+
+    if (labelOverflows && this.wrappingType === WrappingType.Normal) {
+      this.label?.classList.add("udex-checkbox__label-multiline");
+    } else {
+      this.label?.classList.remove("udex-checkbox__label-multiline");
+    }
+  }
+
   get valueStateText(): string | undefined {
     if (this.valueState !== UDExCheckboxValueState.None) {
       return this.valueStateMappings()[this.valueState];
     }
   }
+
+  get label(): Label | null {
+    return this.shadowRoot!.querySelector<Label>("[ui5-label]");
+  }
+
+  get labelHeight(): number {
+    return this.label?.getBoundingClientRect().height || 0;
+  }
 }
 
 UDExCheckbox.define();

package/src/ControlButton.ts

@@ -5,7 +5,8 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-import { UDExButtonSize, UDExControlButtonDesign } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 
 /**
  * @class

package/src/DatePicker.ts

@@ -28,13 +28,13 @@ export enum UDExDatePickerSelectionMode {
   Range = "Range",
 }
 
-type UDExDatePickerSelectionChangeEventDetail = {
+export type UDExDatePickerSelectionChangeEventDetail = {
   selectedValues: Array<string>;
   selectedDates: Array<number | undefined>;
   timestamp: number | undefined;
 };
 
-type UDExDatePickerValueStateChangeEventDetail = {
+export type UDExDatePickerValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }

package/src/FilterMenu.hbs

@@ -38,6 +38,7 @@
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
+        accessible-role="{{accessibleRole}}"
         placement="{{placement}}"
         horizontal-align="{{horizontalAlign}}"
         @ui5-item-press="{{handleItemPress}}"

package/src/InputGroup.ts

@@ -15,12 +15,15 @@ import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
 
-export type UDExGroupValueState = Exclude<UDExValueState, "Warning">
+export enum UDExGroupValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
 
 export enum UDExOrientation {
   Vertical = "Vertical",

package/src/Link.ts

@@ -1,6 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import UI5Link from "@ui5/webcomponents/dist/Link.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Styles
@@ -25,18 +25,17 @@ export type AttributeValuePair = {
  * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @extends UI5Link
+ * @extends Link
  * @tagname udex-link
  * @public
  */
 @customElement({
   tag: "udex-link",
   renderer: jsxRenderer,
-  styles: [UI5Link.styles, LinkCss],
+  styles: [Link.styles, LinkCss],
 })
 
-class UDExLink extends UI5Link {
+class UDExLink extends Link {
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");

package/src/ListItem.ts

@@ -196,16 +196,16 @@ class UDExListItem extends UDExListItemBase {
    * @slot
    * @public
    */
-  @slot()
-    firstIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
   /**
    * Slot for second icon.
    *
    * @slot
    * @public
    */
-  @slot()
-    secondIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/MastheadItem.ts

@@ -549,7 +549,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MediaPlayer.ts

@@ -19,6 +19,8 @@ import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.j
 // Styles
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     videojs: any;
@@ -352,7 +354,7 @@ class UDExMediaPlayer extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null {
+  getPlayer(): HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null {
     if (this._youtubeSrc) {
       const player = this.shadowRoot?.querySelector("[udex-media-player-youtube]") as UDExMediaPlayerYoutube;
       return player?.getPlayer() || null;