@ui5/webcomponents 2.9.0-rc.0 → 2.9.0-rc.2

package/dist/types/SearchPopupMode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Defines the content visualisation of ui5-search popup.
+ * @public
+ */
+declare enum SearchPopupMode {
+    /**
+     * Defines the content visualisation of ui5-search popup as illustrated message.
+     * @public
+     */
+    Illustration = "Illustration",
+    /**
+     * Defines the content visualisation of ui5-search popup as list of items.
+     * @public
+     */
+    List = "List",
+    /**
+     * Defines the content visualisation of ui5-search popup as loading spinner.
+     * @public
+     */
+    Loading = "Loading"
+}
+export default SearchPopupMode;

package/dist/types/SearchPopupMode.js

@@ -0,0 +1,24 @@
+/**
+ * Defines the content visualisation of ui5-search popup.
+ * @public
+ */
+var SearchPopupMode;
+(function (SearchPopupMode) {
+    /**
+     * Defines the content visualisation of ui5-search popup as illustrated message.
+     * @public
+     */
+    SearchPopupMode["Illustration"] = "Illustration";
+    /**
+     * Defines the content visualisation of ui5-search popup as list of items.
+     * @public
+     */
+    SearchPopupMode["List"] = "List";
+    /**
+     * Defines the content visualisation of ui5-search popup as loading spinner.
+     * @public
+     */
+    SearchPopupMode["Loading"] = "Loading";
+})(SearchPopupMode || (SearchPopupMode = {}));
+export default SearchPopupMode;
+//# sourceMappingURL=SearchPopupMode.js.map

package/dist/types/SearchPopupMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPopupMode.js","sourceRoot":"","sources":["../../src/types/SearchPopupMode.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACF,IAAK,eAkBL;AAlBA,WAAK,eAAe;IACpB;;;OAGG;IACH,gDAA6B,CAAA;IAE7B;;;OAGG;IACH,gCAAa,CAAA;IAEb;;;OAGG;IACH,sCAAmB,CAAA;AACpB,CAAC,EAlBK,eAAe,KAAf,eAAe,QAkBpB;AAED,eAAe,eAAe,CAAC","sourcesContent":["/**\n * Defines the content visualisation of ui5-search popup.\n * @public\n */\n enum SearchPopupMode {\n\t/**\n\t * Defines the content visualisation of ui5-search popup as illustrated message.\n\t * @public\n\t */\n\tIllustration = \"Illustration\",\n\n\t/**\n\t * Defines the content visualisation of ui5-search popup as list of items.\n\t * @public\n\t */\n\tList = \"List\",\n\n\t/**\n\t * Defines the content visualisation of ui5-search popup as loading spinner.\n\t * @public\n\t */\n\tLoading = \"Loading\",\n}\n\nexport default SearchPopupMode;\n"]}

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

@@ -1707,6 +1707,16 @@
           "description": "Receives id(or many ids) of the elements that label the input.",
           "values": []
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the input.",
+          "values": []
+        },
         {
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
@@ -2394,11 +2404,6 @@
           "name": "open",
           "description": "Indicates whether the items picker is open.",
           "values": []
-        },
-        {
-          "name": "is-open",
-          "description": "Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -2530,6 +2535,16 @@
           "description": "Receives id(or many ids) of the elements that label the input.",
           "values": []
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the input.",
+          "values": []
+        },
         {
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
@@ -3194,7 +3209,7 @@
     },
     {
       "name": "ui5-select",
-      "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n1. With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n2. With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Keyboard Handling\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **live-change** - Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.\n\n### **CSS Parts:**\n - **popover** - Used to style the popover element",
+      "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **live-change** - Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.\n\n### **CSS Parts:**\n - **popover** - Used to style the popover element",
       "attributes": [
         {
           "name": "disabled",
@@ -3750,7 +3765,7 @@
         },
         {
           "name": "overflow-mode",
-          "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+          "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
           "values": [{ "name": "Scroll" }, { "name": "Popin" }]
         },
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.9.0-rc.0",
+  "version": "2.9.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3415,6 +3415,16 @@
               "description": "Receives id(or many ids) of the elements that label the input.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the input.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-icon",
               "description": "Defines whether the clear icon of the input will be shown.",
@@ -3537,6 +3547,16 @@
                 "description": "Receives id(or many ids) of the elements that label the input.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the input.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-icon",
                 "description": "Defines whether the clear icon of the input will be shown.",
@@ -4944,11 +4964,6 @@
               "name": "open",
               "description": "Indicates whether the items picker is open.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "is-open",
-              "description": "Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.",
-              "value": { "type": "any", "default": "false" }
             }
           ],
           "slots": [
@@ -5067,11 +5082,6 @@
                 "name": "open",
                 "description": "Indicates whether the items picker is open.",
                 "value": { "type": "boolean" }
-              },
-              {
-                "name": "is-open",
-                "description": "Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.",
-                "value": { "type": "any" }
               }
             ],
             "events": [
@@ -5279,6 +5289,16 @@
               "description": "Receives id(or many ids) of the elements that label the input.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the input.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-icon",
               "description": "Defines whether the clear icon of the input will be shown.",
@@ -5403,6 +5423,16 @@
                 "description": "Receives id(or many ids) of the elements that label the input.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the input.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-icon",
                 "description": "Defines whether the clear icon of the input will be shown.",
@@ -6755,7 +6785,7 @@
         },
         {
           "name": "ui5-select",
-          "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n1. With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n2. With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Keyboard Handling\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **live-change** - Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.\n\n### **CSS Parts:**\n - **popover** - Used to style the popover element",
+          "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **live-change** - Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.\n\n### **CSS Parts:**\n - **popover** - Used to style the popover element",
           "doc-url": "",
           "attributes": [
             {
@@ -7881,7 +7911,7 @@
             },
             {
               "name": "overflow-mode",
-              "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+              "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
               "value": {
                 "type": "\"Scroll\" | \"Popin\"",
                 "default": "\"Scroll\""
@@ -7958,7 +7988,7 @@
               },
               {
                 "name": "overflow-mode",
-                "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+                "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
                 "value": { "type": "\"Scroll\" | \"Popin\"" }
               },
               {
@@ -8251,7 +8281,7 @@
             {
               "name": "position",
               "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
-              "value": { "type": "number", "default": "-1" }
+              "value": { "type": "number | undefined", "default": "undefined" }
             },
             {
               "name": "interactive",
@@ -8290,7 +8320,7 @@
               {
                 "name": "position",
                 "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
-                "value": { "type": "number" }
+                "value": { "type": "number | undefined" }
               },
               {
                 "name": "interactive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.9.0-rc.0",
+  "version": "2.9.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.9.0-rc.0",
-    "@ui5/webcomponents-localization": "2.9.0-rc.0",
-    "@ui5/webcomponents-theming": "2.9.0-rc.0"
+    "@ui5/webcomponents-base": "2.9.0-rc.2",
+    "@ui5/webcomponents-icons": "2.9.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.9.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.9.0-rc.2",
+    "@ui5/webcomponents-localization": "2.9.0-rc.2",
+    "@ui5/webcomponents-theming": "2.9.0-rc.2"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.9.0-rc.0",
+    "@ui5/webcomponents-tools": "2.9.0-rc.2",
     "chromedriver": "^133.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "7b5afeeb1f94c3ad54b2e79ac79d0d9e36f0cb7d"
+  "gitHead": "17eb194560a6db21bab9da6eb69b599ac504fd78"
 }

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type Breadcrumbs from "./Breadcrumbs.js";
 import Button from "./Button.js";
 import List from "./List.js";
@@ -5,6 +6,10 @@ import ListItemStandard from "./ListItemStandard.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 
 export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+	const itemsToDisplay = isPhone()
+		? this._mobilePopoverItems
+		: this._overflowItemsData;
+
 	return (
 		<ResponsivePopover
 			class="ui5-breadcrumbs-popover"
@@ -21,7 +26,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
 				separators="None"
 				onSelectionChange={this._onOverflowListItemSelect}
 			>
-				{this._overflowItemsData.map(item =>
+				{itemsToDisplay.map(item =>
 					<ListItemStandard
 						id={`${item._id}-li`}
 						accessibleName={item.accessibleName}

package/src/InputTemplate.tsx

@@ -36,6 +36,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}
+						enterkeyhint={this.hint}
 						aria-controls={this.accInfo.ariaControls}
 						aria-invalid={this.accInfo.ariaInvalid}
 						aria-haspopup={this.accInfo.ariaHasPopup}
@@ -63,6 +64,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<div
 							tabindex={-1}
 							class="ui5-input-clear-icon-wrapper inputIcon"
+							part="clear-icon-wrapper"
 							onClick={this._clear}
 							onMouseDown={this._iconMouseDown}
 						>
@@ -102,6 +104,10 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
 					}
 
+					{this.accInfo.accessibleDescription &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+					}
+
 					{this.hasValueState &&
 						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 					}

package/src/ListItemTemplate.tsx

@@ -99,8 +99,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		<span
 			id={`${this._id}-invisibleText`}
 			class="ui5-hidden-text">
-			{this._accInfo.listItemAriaLabel}
-			{this.accessibleName}
+			{this.ariaLabelledByText}
 		</span>
 		<span
 			id={`${this._id}-invisibleText-describedby`}

package/src/MenuItemTemplate.tsx

@@ -1,4 +1,3 @@
-import type { JsxTemplate } from "@ui5/webcomponents-base";
 import type MenuItem from "./MenuItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
@@ -11,16 +10,12 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-export type MenuItemHooks = ListItemHooks & {
-	listItemPostContent: JsxTemplate,
-}
-
-const predefinedHooks: Partial<MenuItemHooks> = {
+const predefinedHooks: Partial<ListItemHooks> = {
 	listItemContent,
 	iconBegin,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
 	return <>
@@ -78,7 +73,7 @@ function iconBegin(this: MenuItem) {
 function listItemPostContent(this: MenuItem) {
 	return this.hasSubmenu && <ResponsivePopover
 		id={`${this._id}-menu-rp`}
-		class="ui5-menu-rp .ui5-menu-rp-sub-menu"
+		class="ui5-menu-rp ui5-menu-rp-sub-menu"
 		preventInitialFocus={true}
 		preventFocusRestore={true}
 		hideArrow={true}

package/src/SelectTemplate.tsx

@@ -15,7 +15,7 @@ export default function SelectTemplate(this: Select) {
 				onClick={this._onclick}
 				title={this.tooltip}
 			>
-				{this.selectedOptionIcon &&
+				{!this.icon && this.selectedOptionIcon &&
 					<Icon
 						mode="Decorative"
 						class="ui5-select-option-icon"
@@ -47,7 +47,16 @@ export default function SelectTemplate(this: Select) {
 					}
 				</div>
 
-				{!this.readonly &&
+				{this.icon &&
+					<Icon
+						name={this.icon}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{!this.icon && !this.readonly &&
 					<Icon
 						part="icon"
 						name={slimArrowDown}
@@ -63,7 +72,6 @@ export default function SelectTemplate(this: Select) {
 					</span>
 				}
 			</div>
-
 			{SelectPopoverTemplate.call(this)}
 		</>
 	);

package/src/TableHeaderCellActionBaseTemplate.tsx

@@ -1,4 +1,5 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
 
 export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {
@@ -7,7 +8,7 @@ export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellA
 			icon={this._icon}
 			tooltip={this._tooltip}
 			onClick={this._onClick}
-			design="Transparent"
+			design={ButtonDesign.Transparent}
 		></Button>
 	);
 }

package/src/TableHeaderCellTemplate.tsx

@@ -1,9 +1,8 @@
 import Icon from "./Icon.js";
 import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
-import type TableHeaderCell from "./TableHeaderCell.js";
-
 import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
 import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import type TableHeaderCell from "./TableHeaderCell.js";
 
 export default function TableHeaderCellTemplate(this: TableHeaderCell) {
 	return (

package/src/TableHeaderRowTemplate.tsx

@@ -27,7 +27,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>

package/src/TableRowActionBaseTemplate.tsx

@@ -1,5 +1,7 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import Icon from "./Icon.js";
+import IconDesign from "./types/IconDesign.js";
 import type TableRowActionBase from "./TableRowActionBase.js";
 
 export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
@@ -13,14 +15,14 @@ export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
 						icon={this._icon}
 						tooltip={this._text}
 						onClick={this._onActionClick}
-						design="Transparent"
+						design={ButtonDesign.Transparent}
 					></Button>
 					:
 					<Icon
 						name={this._icon}
 						accessibleName={this._text}
 						showTooltip={true}
-						design="NonInteractive"
+						design={IconDesign.NonInteractive}
 					></Icon>
 			}
 		</>

package/src/TableRowTemplate.tsx

@@ -1,8 +1,9 @@
-import type TableRow from "./TableRow.js";
 import TableCell from "./TableCell.js";
 import CheckBox from "./CheckBox.js";
 import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import type TableRow from "./TableRow.js";
 
 export default function TableRowTemplate(this: TableRow) {
 	return (
@@ -37,7 +38,7 @@ export default function TableRowTemplate(this: TableRow) {
 				<slot name={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell">
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
@@ -47,7 +48,7 @@ export default function TableRowTemplate(this: TableRow) {
 						<Button
 							id="overflow"
 							icon="overflow"
-							design="Transparent"
+							design={ButtonDesign.Transparent}
 							onClick={this._onOverflowButtonClick}
 						></Button>
 					}

package/src/TokenTemplate.tsx

@@ -28,6 +28,7 @@ export default function TokenTemplate(this: Token) {
 							accessibleName={this.tokenDeletableText}
 							showTooltip={true}
 							onClick={this._delete}
+							onMouseDown={this._onmousedown}
 						/>
 					}
 				</div>

package/src/i18n/messagebundle.properties

@@ -103,7 +103,7 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
-#XACT: ARIA announcement for the ettribute 'aria-roledescription' of the Carousel component
+#XACT: ARIA announcement for the attribute 'aria-roledescription' of the Carousel component
 CAROUSEL_ARIA_ROLE_DESCRIPTION=Carousel
 
 #XFLD: Label of the container holding the colors
@@ -249,6 +249,9 @@ LINK_SUBTLE=Subtle
 #XFLD: Emphasized link description label
 LINK_EMPHASIZED=Emphasized
 
+#XACT: ARIA announcement for the active clickable list items
+LIST_ITEM_ACTIVE=Is Active
+
 #XACT: ARIA announcement for the position of the list items in an entire list
 LIST_ITEM_POSITION=List item {0} of {1}
 

package/src/i18n/messagebundle_ar.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=الصفحة السابقة
 
 CAROUSEL_NEXT_ARROW_TEXT=الصفحة التالية
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=شريط التمرير
+
 COLORPALETTE_CONTAINER_LABEL=لوحة الألوان - الألوان المحددة مسبقًا
 
 COLORPALETTE_POPOVER_TITLE=لوحة الألوان

package/src/i18n/messagebundle_bg.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Предишна страница
 
 CAROUSEL_NEXT_ARROW_TEXT=Следваща страница
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Карусел
+
 COLORPALETTE_CONTAINER_LABEL=Цветова палитра - предварително определени цветове
 
 COLORPALETTE_POPOVER_TITLE=Цветова палитра

package/src/i18n/messagebundle_ca.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Pàgina anterior
 
 CAROUSEL_NEXT_ARROW_TEXT=Pàgina següent
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Carrusel
+
 COLORPALETTE_CONTAINER_LABEL=Paleta de colors - colors predefinits
 
 COLORPALETTE_POPOVER_TITLE=Paleta de colors

package/src/i18n/messagebundle_cnr.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Prethodna stranica
 
 CAROUSEL_NEXT_ARROW_TEXT=Sljedeća stranica
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Karusel
+
 COLORPALETTE_CONTAINER_LABEL=Paleta boja - prethodno definisane boje
 
 COLORPALETTE_POPOVER_TITLE=Paleta boja

package/src/i18n/messagebundle_cs.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Předchozí strana
 
 CAROUSEL_NEXT_ARROW_TEXT=Následující strana
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Karusel
+
 COLORPALETTE_CONTAINER_LABEL=Barevná paleta – předdefinované barvy
 
 COLORPALETTE_POPOVER_TITLE=Barevná paleta

package/src/i18n/messagebundle_cy.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Tudalen Flaenorol
 
 CAROUSEL_NEXT_ARROW_TEXT=Tudalen Nesaf
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Carwsél
+
 COLORPALETTE_CONTAINER_LABEL=Palet Lliwiau - Lliwiau Parod
 
 COLORPALETTE_POPOVER_TITLE=Palet Lliwiau

package/src/i18n/messagebundle_da.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Forrige side
 
 CAROUSEL_NEXT_ARROW_TEXT=Næste side
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Karrusel
+
 COLORPALETTE_CONTAINER_LABEL=Farvepalet - foruddefinerede farver
 
 COLORPALETTE_POPOVER_TITLE=Farvepalet