@ui5/webcomponents 2.7.3 → 2.8.0-rc.1

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

@@ -291,7 +291,7 @@
         },
         {
           "name": "text",
-          "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+          "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
           "values": []
         }
       ],
@@ -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,15 @@
           "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": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",
@@ -3847,6 +3861,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 +3958,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.7.3",
+  "version": "2.8.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -629,7 +629,7 @@
             },
             {
               "name": "text",
-              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
@@ -645,7 +645,7 @@
               },
               {
                 "name": "text",
-                "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+                "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
                 "value": { "type": "string" }
               }
             ],
@@ -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,14 @@
               "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": "horizontal-align",
               "description": "Determines the horizontal alignment of table cells.",
@@ -8051,6 +8072,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 +8106,11 @@
                 "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": "horizontal-align",
                 "description": "Determines the horizontal alignment of table cells.",
@@ -8090,6 +8122,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 +8300,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.7.3",
+  "version": "2.8.0-rc.1",
   "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": "nps test-cy-single",
     "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.7.3",
-    "@ui5/webcomponents-icons": "2.7.3",
-    "@ui5/webcomponents-icons-business-suite": "2.7.3",
-    "@ui5/webcomponents-icons-tnt": "2.7.3",
-    "@ui5/webcomponents-localization": "2.7.3",
-    "@ui5/webcomponents-theming": "2.7.3"
+    "@ui5/webcomponents-base": "2.8.0-rc.1",
+    "@ui5/webcomponents-icons": "2.8.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.1",
+    "@ui5/webcomponents-localization": "2.8.0-rc.1",
+    "@ui5/webcomponents-theming": "2.8.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.3",
-    "chromedriver": "^131.0.0",
+    "@ui5/webcomponents-tools": "2.8.0-rc.1",
+    "chromedriver": "^132.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "3c8ad1de49fdfebae5a5a506f07b301cfa4be029"
+  "gitHead": "3c8f6db1b5cc6e4f23423ab0075c009e9e4965e4"
 }

package/src/InputPopoverTemplate.tsx

@@ -1,4 +1,3 @@
-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";
@@ -9,12 +8,10 @@ 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, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
-	const suggestionsList = hooks?.suggestionsList;
-
+export default function InputPopoverTemplate(this: Input) {
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) }
 
 			{this.hasValueStateMessage &&
 				<Popover

package/src/InputTemplate.tsx

@@ -1,13 +1,11 @@
 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 = () => JsxTemplateResult;
+type TemplateHook = () => void;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
-	const suggestionsList = hooks?.suggestionsList;
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -106,7 +104,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+			{ InputPopoverTemplate.call(this) }
 		</>
 	);
 }

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/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>
+		);
+	}
+}

package/src/MultiComboBoxTemplate.tsx

@@ -0,0 +1,121 @@
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import MultiComboboxPopoverTemplate from "./MultiComboBoxPopoverTemplate.js";
+import type MultiComboBox from "./MultiComboBox.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
+import Icon from "./Icon.js";
+
+export default function MultiComboBoxTemplate(this: MultiComboBox) {
+	return (<>
+		<div class="ui5-multi-combobox-root ui5-input-focusable-element">
+			<span id="ui5-multi-combobox-hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+
+			{this.hasValueState &&
+				<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+			}
+
+			<Tokenizer
+				slot="_beginContent"
+				preventPopoverOpen={true}
+				hidePopoverArrow={true}
+				readonly={this.readonly}
+				class="ui5-multi-combobox-tokenizer"
+				disabled={this.disabled}
+				onShowMoreItemsPress={this._showFilteredItems}
+				opener={this.morePopoverOpener}
+				popoverMinWidth={this._inputWidth}
+				onTokenDelete={this._tokenDelete}
+				onBeforeMorePopoverOpen={this.handleBeforeTokenizerPopoverOpen}
+				onFocusOut={this._tokenizerFocusOut}
+				onFocusIn={this._tokenizerFocusIn}
+				onClick={this._click}
+				onPaste={this._handlePaste}
+				onKeyDown={this._onTokenizerKeydown}
+				expanded={this._tokenizerExpanded}
+				open={this.tokenizerOpen}
+			>
+				{this.items.map((item, index) => {
+					if (item.isGroupItem) {
+						return item.items?.map((groupItem, groupItemIndex) => {
+							return groupItem.selected && <Token
+								readonly={this.readonly}
+								class="ui5-multi-combobox-token"
+								data-ui5-id={groupItem._id}
+								part={`token-${groupItemIndex}`}
+								text={groupItem.text}
+							/>;
+						});
+					}
+
+					return item.selected && <Token
+						readonly={this.readonly}
+						class="ui5-multi-combobox-token"
+						data-ui5-id={item._id}
+						part={`token-${index}`}
+						text={item.text}
+					/>;
+				})}
+			</Tokenizer>
+
+			<input
+				id="ui5-multi-combobox-input"
+				value={this.value}
+				inner-input
+				placeholder={this._getPlaceholder}
+				disabled={this.disabled}
+				readonly={this.readonly}
+				value-state={this.valueState}
+				onInput={this._inputLiveChange}
+				onChange={this._inputChange}
+				onKeyDown={this._onkeydown}
+				onClick={this._click}
+				onFocusIn={this.inputFocusIn}
+				onFocusOut={this.inputFocusOut}
+				onPaste={this._handlePaste}
+				role="combobox"
+				aria-haspopup="dialog"
+				aria-expanded={this.open}
+				aria-autocomplete="both"
+				aria-describedby={this.ariaDescribedByText}
+				aria-required={this.required}
+				aria-label={this.ariaLabelText}
+				aria-controls={this.responsivePopoverId}
+				autocomplete="off"
+				data-sap-focus-ref
+			/>
+
+			{this._effectiveShowClearIcon &&
+				<div
+					onClick={this._clear}
+					class="ui5-input-clear-icon-wrapper inputIcon"
+					tabIndex={-1}
+					onMouseDown={this._iconMouseDown}
+				>
+					<Icon tabIndex={-1} class="ui5-input-clear-icon" name={decline} accessible-name={this.clearIconAccessibleName}></Icon>
+				</div>
+			}
+
+			{this.icon &&
+				<slot name="icon"></slot>
+			}
+
+			{!this.readonly &&
+				<Icon name="slim-arrow-down"
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this._iconPressed,
+					}}
+					slot="icon"
+					tabIndex={-1}
+					onClick={this.togglePopoverByDropdownIcon}
+					onMouseDown={this._onIconMousedown}
+					onFocusIn={this._forwardFocusToInner}
+					// pressed={this.open}
+					accessibleName={this._iconAccessibleNameText}
+				></Icon>
+			}
+		</div>
+
+		{MultiComboboxPopoverTemplate.call(this)}
+	</>);
+}

package/src/TableCell.hbs

@@ -1,12 +1,7 @@
 {{#if _popin}}
-	{{#if _popinText}}
-		{{_popinText}}
-		<span class="popin-colon">{{_i18nPopinColon}}</span>
-	{{else if _popinHeader}}
-		{{_popinHeader}}
-		<span class="popin-colon">{{_i18nPopinColon}}</span>
-	{{/if}}
-	<slot></slot>
-{{else}}
-	<slot></slot>
-{{/if}}
+	{{#each _popinHeaderNodes}}
+		{{this}}
+	{{/each}}
+	<span class="popin-colon">{{_i18nPopinColon}}</span>
+{{/if}}
+<slot></slot>

package/src/TableHeaderCell.hbs

@@ -1 +1,5 @@
-<slot></slot>
+<slot name="action"></slot>
+<slot></slot>
+{{#if _sortIcon}}
+    <ui5-icon name="{{_sortIcon}}"></ui5-icon>
+{{/if}}

package/src/TableHeaderCellActionBase.hbs

@@ -0,0 +1,6 @@
+<ui5-button
+    icon="{{_icon}}"
+    tooltip="{{_tooltip}}"
+    @click={{_onClick}}
+    design="Transparent">
+</ui5-button>

package/src/TableRowActionBase.hbs

@@ -3,7 +3,6 @@
 {{else if _isInteractive}}
     <ui5-button
         icon="{{_icon}}"
-        text="{{_text}}"
         tooltip="{{_text}}"
         @click={{_onActionClick}}
         design="Transparent">
@@ -12,6 +11,6 @@
     <ui5-icon
         name="{{_icon}}"
         tooltip="{{_text}}"
-        design="Transparent">
+        design="NonInteractive">
     </ui5-icon>
 {{/if}}

package/src/TimePickerPopoverTemplate.tsx

@@ -31,7 +31,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
-				{this.hasValueStateText && valueStateTextHeader.call(this)}
+				{this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this)}
 
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}