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

package/dist/types/TableCellHorizontalAlign.d.ts

@@ -2,6 +2,7 @@
  * Alignment of the <ui5-table-cell> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableCellHorizontalAlign {
     /**

package/dist/types/TableCellHorizontalAlign.js

@@ -2,6 +2,7 @@
  * Alignment of the <ui5-table-cell> component.
  *
  * @public
+ * @experimental
  */
 var TableCellHorizontalAlign;
 (function (TableCellHorizontalAlign) {

package/dist/types/TableCellHorizontalAlign.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellHorizontalAlign.js","sourceRoot":"","sources":["../../src/types/TableCellHorizontalAlign.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,wBAyBJ;AAzBD,WAAK,wBAAwB;IACzB;;OAEG;IACH,yCAAa,CAAA;IAEb;;OAEG;IACH,2CAAe,CAAA;IAEf;;OAEG;IACH,2CAAe,CAAA;IAEf;;OAEG;IACH,uCAAW,CAAA;IAEX;;OAEG;IACH,6CAAiB,CAAA;AACrB,CAAC,EAzBI,wBAAwB,KAAxB,wBAAwB,QAyB5B;AAED,eAAe,wBAAwB,CAAC","sourcesContent":["/**\n * Alignment of the <ui5-table-cell> component.\n *\n * @public\n */\nenum TableCellHorizontalAlign {\n    /**\n     * @public\n     */\n    Left = \"Left\",\n\n    /**\n     * @public\n     */\n    Start = \"Start\",\n\n    /**\n     * @public\n     */\n    Right = \"Right\",\n\n    /**\n     * @public\n     */\n    End = \"End\",\n\n    /**\n     * @public\n     */\n    Center = \"Center\",\n}\n\nexport default TableCellHorizontalAlign;\n"]}
+{"version":3,"file":"TableCellHorizontalAlign.js","sourceRoot":"","sources":["../../src/types/TableCellHorizontalAlign.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,wBAyBJ;AAzBD,WAAK,wBAAwB;IACzB;;OAEG;IACH,yCAAa,CAAA;IAEb;;OAEG;IACH,2CAAe,CAAA;IAEf;;OAEG;IACH,2CAAe,CAAA;IAEf;;OAEG;IACH,uCAAW,CAAA;IAEX;;OAEG;IACH,6CAAiB,CAAA;AACrB,CAAC,EAzBI,wBAAwB,KAAxB,wBAAwB,QAyB5B;AAED,eAAe,wBAAwB,CAAC","sourcesContent":["/**\n * Alignment of the <ui5-table-cell> component.\n *\n * @public\n * @experimental\n */\nenum TableCellHorizontalAlign {\n    /**\n     * @public\n     */\n    Left = \"Left\",\n\n    /**\n     * @public\n     */\n    Start = \"Start\",\n\n    /**\n     * @public\n     */\n    Right = \"Right\",\n\n    /**\n     * @public\n     */\n    End = \"End\",\n\n    /**\n     * @public\n     */\n    Center = \"Center\",\n}\n\nexport default TableCellHorizontalAlign;\n"]}

package/dist/types/TableGrowingMode.d.ts

@@ -2,6 +2,7 @@
  * Growing mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableGrowingMode {
     /**

package/dist/types/TableGrowingMode.js

@@ -2,6 +2,7 @@
  * Growing mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 var TableGrowingMode;
 (function (TableGrowingMode) {

package/dist/types/TableGrowingMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,gBAcJ;AAdD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;;;OAKG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAdI,gBAAgB,KAAhB,gBAAgB,QAcpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t *\n\t * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}
+{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,gBAcJ;AAdD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;;;OAKG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAdI,gBAAgB,KAAhB,gBAAgB,QAcpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t *\n\t * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}

package/dist/types/TableOverflowMode.d.ts

@@ -2,6 +2,7 @@
  * Column mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableOverflowMode {
     /**

package/dist/types/TableOverflowMode.js

@@ -2,6 +2,7 @@
  * Column mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 var TableOverflowMode;
 (function (TableOverflowMode) {

package/dist/types/TableOverflowMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableOverflowMode.js","sourceRoot":"","sources":["../../src/types/TableOverflowMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,iBAYJ;AAZD,WAAK,iBAAiB;IACrB;;;OAGG;IACH,sCAAiB,CAAA;IAEjB;;;OAGG;IACH,oCAAe,CAAA;AAChB,CAAC,EAZI,iBAAiB,KAAjB,iBAAiB,QAYrB;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Column mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableOverflowMode {\n\t/**\n\t * Shows a scrollbar, when the table cannot fit all columns.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n\n\t/**\n\t * Pops in columns, that do not fit into the table anymore.\n\t * @public\n\t */\n\tPopin = \"Popin\"\n}\n\nexport default TableOverflowMode;\n"]}
+{"version":3,"file":"TableOverflowMode.js","sourceRoot":"","sources":["../../src/types/TableOverflowMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,iBAYJ;AAZD,WAAK,iBAAiB;IACrB;;;OAGG;IACH,sCAAiB,CAAA;IAEjB;;;OAGG;IACH,oCAAe,CAAA;AAChB,CAAC,EAZI,iBAAiB,KAAjB,iBAAiB,QAYrB;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Column mode of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableOverflowMode {\n\t/**\n\t * Shows a scrollbar, when the table cannot fit all columns.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n\n\t/**\n\t * Pops in columns, that do not fit into the table anymore.\n\t * @public\n\t */\n\tPopin = \"Popin\"\n}\n\nexport default TableOverflowMode;\n"]}

package/dist/types/TableSelectionMode.d.ts

@@ -2,6 +2,7 @@
  * Selection modes of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableSelectionMode {
     /**

package/dist/types/TableSelectionMode.js

@@ -2,6 +2,7 @@
  * Selection modes of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 var TableSelectionMode;
 (function (TableSelectionMode) {

package/dist/types/TableSelectionMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSelectionMode.js","sourceRoot":"","sources":["../../src/types/TableSelectionMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,kBAkBJ;AAlBD,WAAK,kBAAkB;IACtB;;;OAGG;IACH,mCAAa,CAAA;IAEb;;;OAGG;IACH,uCAAiB,CAAA;IAEjB;;;OAGG;IACH,2CAAqB,CAAA;AACtB,CAAC,EAlBI,kBAAkB,KAAlB,kBAAkB,QAkBtB;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Selection modes of the <ui5-table> component.\n *\n * @public\n */\nenum TableSelectionMode {\n\t/**\n\t * Default mode (no selection).\n\t * @public\n\t */\n\tNone = \"None\",\n\n\t/**\n\t * Single selection mode (only one table row can be selected).\n\t * @public\n\t */\n\tSingle = \"Single\",\n\n\t/**\n\t * Multi selection mode (more than one table row can be selected).\n\t * @public\n\t */\n\tMultiple = \"Multiple\",\n}\n\nexport default TableSelectionMode;\n"]}
+{"version":3,"file":"TableSelectionMode.js","sourceRoot":"","sources":["../../src/types/TableSelectionMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,kBAkBJ;AAlBD,WAAK,kBAAkB;IACtB;;;OAGG;IACH,mCAAa,CAAA;IAEb;;;OAGG;IACH,uCAAiB,CAAA;IAEjB;;;OAGG;IACH,2CAAqB,CAAA;AACtB,CAAC,EAlBI,kBAAkB,KAAlB,kBAAkB,QAkBtB;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Selection modes of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableSelectionMode {\n\t/**\n\t * Default mode (no selection).\n\t * @public\n\t */\n\tNone = \"None\",\n\n\t/**\n\t * Single selection mode (only one table row can be selected).\n\t * @public\n\t */\n\tSingle = \"Single\",\n\n\t/**\n\t * Multi selection mode (more than one table row can be selected).\n\t * @public\n\t */\n\tMultiple = \"Multiple\",\n}\n\nexport default TableSelectionMode;\n"]}

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

@@ -1775,6 +1775,11 @@
             { "name": "Subtle" }
           ]
         },
+        {
+          "name": "interactive-area-size",
+          "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+          "values": [{ "name": "Normal" }, { "name": "Large" }]
+        },
         {
           "name": "wrapping-type",
           "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.",
@@ -3806,7 +3811,7 @@
     },
     {
       "name": "ui5-table-header-cell",
-      "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n\n\n---\n\n\n",
+      "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **action** - Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.",
       "attributes": [
         {
           "name": "width",
@@ -3833,6 +3838,20 @@
           "description": "The text for the column when it pops in.",
           "values": []
         },
+        {
+          "name": "sort-indicator",
+          "description": "Defines the sort indicator of the column.",
+          "values": [
+            { "name": "None" },
+            { "name": "Ascending" },
+            { "name": "Descending" }
+          ]
+        },
+        {
+          "name": "popin-hidden",
+          "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+          "values": []
+        },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",
@@ -3847,6 +3866,18 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-table-header-cell-action-ai",
+      "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when a header cell action is clicked.",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "table-header-cell-action-base",
+      "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when a header cell action is clicked.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "ui5-table-header-row",
       "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.",
@@ -3932,7 +3963,7 @@
     },
     {
       "name": "ui5-table-row-action-navigation",
-      "description": "The `TableRowActionNavigation` class defines a navigation actio‚n for table rows.\n\n\n---\n\n\n",
+      "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`\n\n\n---\n\n\n",
       "attributes": [
         {
           "name": "interactive",

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.8.0-rc.0",
+  "version": "2.8.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3645,6 +3645,14 @@
                 "default": "\"Default\""
               }
             },
+            {
+              "name": "interactive-area-size",
+              "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+              "value": {
+                "type": "\"Normal\" | \"Large\"",
+                "default": "\"Normal\""
+              }
+            },
             {
               "name": "wrapping-type",
               "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.",
@@ -3734,6 +3742,11 @@
                 "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.",
                 "value": { "type": "\"Default\" | \"Emphasized\" | \"Subtle\"" }
               },
+              {
+                "name": "interactive-area-size",
+                "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+                "value": { "type": "\"Normal\" | \"Large\"" }
+              },
               {
                 "name": "wrapping-type",
                 "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.",
@@ -8014,7 +8027,7 @@
         },
         {
           "name": "ui5-table-header-cell",
-          "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n---\n",
+          "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n---\n\n\n### **Slots:**\n - **action** - Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.",
           "doc-url": "",
           "attributes": [
             {
@@ -8042,6 +8055,19 @@
               "description": "The text for the column when it pops in.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "sort-indicator",
+              "description": "Defines the sort indicator of the column.",
+              "value": {
+                "type": "\"None\" | \"Ascending\" | \"Descending\"",
+                "default": "\"None\""
+              }
+            },
+            {
+              "name": "popin-hidden",
+              "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of table cells.",
@@ -8051,6 +8077,12 @@
               }
             }
           ],
+          "slots": [
+            {
+              "name": "action",
+              "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported."
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
@@ -8079,6 +8111,16 @@
                 "description": "The text for the column when it pops in.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "sort-indicator",
+                "description": "Defines the sort indicator of the column.",
+                "value": { "type": "\"None\" | \"Ascending\" | \"Descending\"" }
+              },
+              {
+                "name": "popin-hidden",
+                "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of table cells.",
@@ -8090,6 +8132,27 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-table-header-cell-action-ai",
+          "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when a header cell action is clicked.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when a header cell action is clicked."
+            }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when a header cell action is clicked."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-table-header-row",
           "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.",
@@ -8247,7 +8310,7 @@
         },
         {
           "name": "ui5-table-row-action-navigation",
-          "description": "The `TableRowActionNavigation` class defines a navigation actio‚n for table rows.\n---\n",
+          "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.8.0-rc.0",
+  "version": "2.8.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -32,6 +32,7 @@
     "test:cypress:suite-1": "nps test-cy-ci-suite-1",
     "test:cypress:suite-2": "nps test-cy-ci-suite-2",
     "test:cypress:open": "nps test-cy-open",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
@@ -53,19 +54,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.8.0-rc.0",
-    "@ui5/webcomponents-icons": "2.8.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.0",
-    "@ui5/webcomponents-localization": "2.8.0-rc.0",
-    "@ui5/webcomponents-theming": "2.8.0-rc.0"
+    "@ui5/webcomponents-base": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.2",
+    "@ui5/webcomponents-localization": "2.8.0-rc.2",
+    "@ui5/webcomponents-theming": "2.8.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.8.0-rc.0",
-    "chromedriver": "^131.0.0",
+    "@ui5/webcomponents-tools": "2.8.0-rc.2",
+    "chromedriver": "^132.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "8ec6a8928a1f691e8ca272f0f2c32f49e46c6992"
+  "gitHead": "3f2bb39755164a9074948fca90a65818ac89af7c"
 }

package/src/AvatarTemplate.tsx

@@ -18,7 +18,7 @@ export default function AvatarTemplate(this: Avatar) {
 				<slot></slot>
 				:
 				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon}></Icon> }
+					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
 
 					{ this.initials &&
 					<>

package/src/ExpandableTextTemplate.tsx

@@ -23,7 +23,6 @@ export default function ExpandableTextTemplate(this: ExpandableText) {
 					accessibleName={this._accessibleNameForToggle}
 					accessibilityAttributes={this._accessibilityAttributesForToggle}
 					onClick={this._handleToggleClick}
-					onMouseDown={this._handleToggleMousedown}
 				>
 					{this._textForToggle}
 				</Link>

package/src/InputPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import type Input from "./Input.js";
 import Icon from "./Icon.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
@@ -8,10 +9,12 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
 
 			{this.hasValueStateMessage &&
 				<Popover

package/src/InputTemplate.tsx

@@ -1,11 +1,13 @@
 import type Input from "./Input.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
-type TemplateHook = () => void;
+type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -104,7 +106,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this) }
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
 		</>
 	);
 }

package/src/ListItemTemplate.tsx

@@ -145,7 +145,7 @@ function selectionElement(this: ListItem) {
 				onChange={this.onMultiSelectionComponentPress}
 			/>
 		);
-	case this.renderDeleteButton:
+	case this.modeDelete:
 		return (
 			<div class="ui5-li-deletebtn">
 				{
@@ -160,7 +160,6 @@ function selectionElement(this: ListItem) {
 								id={`${this._id}-deleteSelectionElement`}
 								design="Transparent"
 								icon={declineIcon}
-								disabled={this.disableDeleteButton}
 								onClick={this.onDelete}
 								tooltip={this.deleteText}
 							/>

package/src/ListTemplate.tsx

@@ -54,7 +54,7 @@ export default function ListTemplate(this: List) {
 						<slot></slot>
 
 						{this.showNoDataText &&
-							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata">
+							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
 								<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
 									{this.noDataText}
 								</div>

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -0,0 +1,150 @@
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import type MultiComboBox from "./MultiComboBox.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import Input from "./Input.js";
+import ToggleButton from "./ToggleButton.js";
+import SuggestionItem from "./SuggestionItem.js";
+import Icon from "./Icon.js";
+import List from "./List.js";
+import Popover from "./Popover.js";
+import CheckBox from "./CheckBox.js";
+
+export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
+	return (<>
+		<ResponsivePopover
+			placement="Bottom"
+			horizontalAlign="Start"
+			class={this.classes.popover}
+			id={this.responsivePopoverId}
+			hideArrow={true}
+			preventInitialFocus={true}
+			style={this.styles.suggestionsPopover}
+			onui5-selection-change={this._listSelectionChange}
+			onClose={this._afterClose}
+			onBeforeOpen={this._beforeOpen}
+			onBeforeClose={this._beforeClose}
+			onOpen={this._afterOpen}
+			onFocusOut={this._onPopoverFocusOut}
+			accessibleName={this._popupLabel}
+			open={this._open}
+			opener={this}
+		>
+			{this._isPhone && <>
+				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
+					<div class="row">
+						<span>{this._headerTitleText}</span>
+						<Button
+							class="ui5-responsive-popover-close-btn"
+							icon={decline}
+							design="Transparent"
+							onClick={this.handleCancel}
+						>
+						</Button>
+					</div>
+					<div class="row">
+						<Input
+							onInput={this._handleMobileInput}
+							onKeyDown={this._onMobileInputKeydown}
+							placeholder={this.placeholder}
+							valueState={this._dialogInputValueState}
+							showClearIcon={this.showClearIcon}
+							noTypeahead={this.noTypeahead}
+						>
+							{this._filteredItems.map(item => (
+								<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>
+							))}
+						</Input>
+						<ToggleButton
+							slot="header"
+							class="ui5-multi-combobox-toggle-button"
+							icon={multiSelectAll}
+							design="Transparent"
+							pressed={this._showAllItemsButtonPressed}
+							onClick={this.filterSelectedItems}
+							accessibleName={this._showSelectedButtonAccessibleNameText}
+						></ToggleButton>
+					</div>
+				</div>				{this.hasValueStateMessage &&
+					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+						{this.open && valueStateMessage.call(this)}
+					</div>
+				}
+
+				{selectAllWrapper.call(this)}
+			</>}
+
+			{!this._isPhone && <>
+				{this.hasValueStateMessage &&
+					<div slot="header" onKeyDown={this._onListHeaderKeydown} tabIndex={0} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+						{this.open && valueStateMessage.call(this)}
+					</div>
+				}
+
+				{selectAllWrapper.call(this)}
+			</>}
+
+			{this.filterSelected ?
+				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
+					{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
+				</List>
+				:
+				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
+					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+				</List>
+			}
+
+			{this._isPhone &&
+				<div slot="footer" class="ui5-responsive-popover-footer">
+					<Button
+						design="Transparent"
+						onClick={this.handleOK}
+					>{this._dialogOkButton}</Button>
+				</div>
+			}
+		</ResponsivePopover>
+
+		{this.hasValueStateMessage &&
+			<Popover
+				// skipRegistryUpdate={true}
+				preventInitialFocus={true}
+				preventFocusRestore={true}
+				hideArrow={true}
+				class="ui5-valuestatemessage-popover"
+				placement="Bottom"
+				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+				tabIndex={-1}
+				open={this.valueStateOpen}
+				opener={this}
+			>
+				<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+					<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+					{this.valueStateOpen && valueStateMessage.call(this)}
+				</div>
+			</Popover>
+		}
+	</>);
+}
+
+function valueStateMessage(this: MultiComboBox) {
+	return this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>;
+}
+
+function selectAllWrapper(this: MultiComboBox) {
+	if (this.showSelectAll) {
+		return (
+			<div class="ui5-mcb-select-all-header" onKeyDown={this._onListHeaderKeydown} tabIndex={0}>
+				<CheckBox
+					disabled={this.readonly}
+					checked={this._allSelected}
+					class="ui5-mcb-select-all-checkbox"
+					text={this.selectAllCheckboxLabel}
+					onChange={this._handleSelectAllCheckboxClick}
+				></CheckBox>
+			</div>
+		);
+	}
+}