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

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,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.8.0-rc.0",
+  "version": "2.8.0-rc.1",
   "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,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.8.0-rc.0",
+  "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.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.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.8.0-rc.0",
-    "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": "8ec6a8928a1f691e8ca272f0f2c32f49e46c6992"
+  "gitHead": "3c8f6db1b5cc6e4f23423ab0075c009e9e4965e4"
 }

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`}

package/src/TimePickerTemplate.tsx

@@ -26,7 +26,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					onFocusIn={this._onfocusin}
 					onKeyDown={this._onkeydown}
 				>
-					{this.valueStateMessage.length > 0 && !this.open &&
+					{this.shouldDisplayValueStateMessageOnDesktop &&
 						<slot
 							name="valueStateMessage"
 							slot="valueStateMessage"

package/src/i18n/messagebundle.properties

@@ -620,3 +620,7 @@ TABLE_MORE_DESCRIPTION=To load more rows, press Enter or Space
 TABLE_ROW_ACTIONS=Row Actions
 #XACT: ARIA description for the row action navigation
 TABLE_NAVIGATION=Navigation
+#XTOL: Tooltip for the AI button in the column header to indicate that the column is generated by AI
+TABLE_GENERATED_BY_AI=Generated by AI
+#XACT: ARIA description for the column header row of the table
+TABLE_COLUMN_HEADER_ROW=Column Header Row

package/src/i18n/messagebundle_ar.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=رفض
 
 MENU_POPOVER_ACCESSIBLE_NAME=حدد خيارًا من القائمة
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=تنقل
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=مقدمة تفاعلية
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=استخدام مفاتيح Shift+Arrow لتغيير الحجم

package/src/i18n/messagebundle_bg.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Отхвърляне
 
 MENU_POPOVER_ACCESSIBLE_NAME=Изберете опция от менюто
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Навигация
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Интерактивно заглавие
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Изберете Shift+стрелки, за да промените размера

package/src/i18n/messagebundle_ca.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Declinar
 
 MENU_POPOVER_ACCESSIBLE_NAME=Seleccionar una opció del menú
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navegació
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Capçalera interactiva
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Utilitzeu les tecles Majús+fletxa per ajustar la mida

package/src/i18n/messagebundle_cnr.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Odbij
 
 MENU_POPOVER_ACCESSIBLE_NAME=Odaberite opciju sa menija
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Usmjeravanje
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivno zaglavlje
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Koristite Shift+strelice na tastaturi za promjenu veličine

package/src/i18n/messagebundle_cs.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Odmítnout
 
 MENU_POPOVER_ACCESSIBLE_NAME=Vyberte možnost z menu
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigace
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivní hlavička
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Pro změnu velikosti použijte Shift+šipky