@ui5/webcomponents 2.15.0-rc.3 → 2.16.0-rc.0

package/dist/types/SelectTwoColumnSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTwoColumnSeparator.js","sourceRoot":"","sources":["../../src/types/SelectTwoColumnSeparator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAK,wBAkBJ;AAlBD,WAAK,wBAAwB;IAC5B;;;OAGG;IACH,6CAAiB,CAAA;IAEjB;;;OAGG;IACH,yCAAa,CAAA;IAEb;;;OAGG;IACH,yDAA6B,CAAA;AAC9B,CAAC,EAlBI,wBAAwB,KAAxB,wBAAwB,QAkB5B;AAED,eAAe,wBAAwB,CAAC","sourcesContent":["/**\n * Defines the separator types for Select component two-column layout.\n * @public\n */\nenum SelectTwoColumnSeparator {\n\t/**\n\t * Will show bullet(·) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tBullet = \"Bullet\",\n\n\t/**\n\t *\tWill show N-dash(–) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tDash = \"Dash\",\n\n\t/**\n\t * \tWill show vertical line(|) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tVerticalLine = \"VerticalLine\",\n}\n\nexport default SelectTwoColumnSeparator;\n"]}

package/dist/types/TableGrowingMode.d.ts

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

package/dist/types/TableGrowingMode.js

@@ -2,7 +2,6 @@
  * 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;;;;;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"]}
+{"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"]}

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

@@ -3586,6 +3586,15 @@
           "description": "Defines the tooltip of the select.",
           "values": []
         },
+        {
+          "name": "two-column-separator",
+          "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
+          "values": [
+            { "name": "Bullet" },
+            { "name": "Dash" },
+            { "name": "VerticalLine" }
+          ]
+        },
         {
           "name": "value",
           "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.",

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.15.0-rc.3",
+  "version": "2.16.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7519,6 +7519,14 @@
               "description": "Defines the tooltip of the select.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "two-column-separator",
+              "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
+              "value": {
+                "type": "\"Bullet\" | \"Dash\" | \"VerticalLine\"",
+                "default": "\"Dash\""
+              }
+            },
             {
               "name": "value",
               "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.",
@@ -7616,6 +7624,11 @@
                 "description": "Defines the tooltip of the select.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "two-column-separator",
+                "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
+                "value": { "type": "\"Bullet\" | \"Dash\" | \"VerticalLine\"" }
+              },
               {
                 "name": "value",
                 "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.15.0-rc.3",
+  "version": "2.16.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,17 +52,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.15.0-rc.3",
-    "@ui5/webcomponents-icons": "2.15.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.15.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.15.0-rc.3",
-    "@ui5/webcomponents-localization": "2.15.0-rc.3",
-    "@ui5/webcomponents-theming": "2.15.0-rc.3"
+    "@ui5/webcomponents-base": "2.16.0-rc.0",
+    "@ui5/webcomponents-icons": "2.16.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.0",
+    "@ui5/webcomponents-localization": "2.16.0-rc.0",
+    "@ui5/webcomponents-theming": "2.16.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "patch:@custom-elements-manifest/analyzer@npm%3A0.10.6#~/.yarn/patches/@custom-elements-manifest-analyzer-npm-0.10.6-9b5ff0c50b.patch",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.15.0-rc.3",
+    "@ui5/webcomponents-tools": "2.16.0-rc.0",
     "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
     "eslint": "^7.22.0",
@@ -71,5 +71,5 @@
     "vite": "5.4.8",
     "vitest": "^3.0.2"
   },
-  "gitHead": "be8dc39a71bc2df6b14528e50a243ce48c9015c5"
+  "gitHead": "07b91ccebabfc50f7ae3112c66255423c2dde07d"
 }

package/src/SelectTemplate.tsx

@@ -13,7 +13,7 @@ export default function SelectTemplate(this: Select) {
 				}}
 				id={`${this._id}-select`}
 				onClick={this._onclick}
-				title={this.tooltip}
+				title={this._effectiveTooltip}
 			>
 				{!this.icon && this.selectedOptionIcon &&
 					<Icon

package/src/TableCellTemplate.tsx

@@ -3,13 +3,15 @@ import type TableCell from "./TableCell.js";
 export default function TableCellTemplate(this: TableCell) {
 	return (
 		<>
-			{ this._popin &&
+			{ this._popin ?
 				<>
-					<div class="popin-header" ref={this.injectHeaderNodes.bind(this)}></div>
-					<span class="popin-colon">{this._i18nPopinColon}</span>
+					<div id="popin-header" ref={this._injectHeaderNodes.bind(this)}></div>
+					<span id="popin-colon" aria-hidden="true">{this._i18nPopinColon}</span>
+					<slot id="popin-content"></slot>
 				</>
+				:
+				<slot></slot>
 			}
-			<slot></slot>
 		</>
 	);
 }

package/src/TableHeaderRowTemplate.tsx

@@ -15,8 +15,9 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 					aria-label={this._i18nSelection}
 					aria-description={this._selectionCellAriaDescription}
 					aria-colindex={ariaColIndex++}
+					data-ui5-table-selection-cell
 					data-ui5-table-cell-fixed
-					data-ui5-table-selection-component
+					data-ui5-table-acc-text=""
 				>
 					{ !this._isMultiSelect ?
 						<></>
@@ -42,20 +43,26 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				</TableHeaderCell>
 			}
 
-			{ this._visibleCells.map(cell => {
+			{ this.cells.flatMap(cell => {
+				if (cell._popin) {
+					cell.ariaColIndex = null;
+					return [];
+				}
 				cell.ariaColIndex = `${ariaColIndex++}`;
-				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
-					aria-label={this._i18nRowActions}
-				></TableHeaderCell>
+				>
+					<div id="actions-cell-content">{this._i18nRowActions}</div>
+				</TableHeaderCell>
 			}
 
 			{ this._popinCells.length > 0 &&
 				<TableHeaderCell id="popin-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowPopin}
 					data-excluded-from-navigation
 				></TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -3,17 +3,19 @@ import CheckBox from "./CheckBox.js";
 import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
 import type TableRow from "./TableRow.js";
 
-export default function TableRowTemplate(this: TableRow) {
+export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
-				<TableCell
-					id="selection-cell"
+				<TableCell id="selection-cell"
 					aria-selected={this._isSelected}
+					aria-colindex={ariaColIndex++}
+					data-ui5-table-selection-cell
 					data-ui5-table-cell-fixed
-					data-ui5-table-selection-component
+					data-ui5-table-acc-text=""
 				>
 					{ this._isMultiSelect ?
 						<CheckBox id="selection-component"
@@ -34,20 +36,27 @@ export default function TableRowTemplate(this: TableRow) {
 				</TableCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot}></slot>
-			))}
+			{ this.cells.flatMap(cell => {
+				if (cell._popin) {
+					cell.ariaColIndex = null;
+					return [];
+				}
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return [<slot name={cell._individualSlot}></slot>];
+			})}
 
 			{ this._rowActionCount > 0 &&
-				<TableCell id="actions-cell">
+				<TableCell id="actions-cell"
+					aria-colindex={ariaColIndex++}
+					data-ui5-table-acc-text={this._actionCellAccText}
+				>
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
 					))}
 
 					{ this._hasOverflowActions &&
-						<Button
-							id="overflow"
-							icon="overflow"
+						<Button id="overflow"
+							icon={iconOverflow}
 							design={ButtonDesign.Transparent}
 							onClick={this._onOverflowButtonClick}
 						></Button>
@@ -60,13 +69,19 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._renderNavigated &&
-				<TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>
+				<TableCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+				>
 					<div id="navigated"></div>
 				</TableCell>
 			}
 
 			{ this._popinCells.length > 0 &&
-				<TableCell id="popin-cell">
+				<TableCell id="popin-cell"
+					data-ui5-table-popin-cell
+					aria-colindex={ariaColIndex++}
+				>
 					{ this._popinCells.map(cell => (
 						<slot name={cell._individualSlot}></slot>
 					))}

package/src/i18n/messagebundle.properties

@@ -729,24 +729,42 @@ TABLE_NO_DATA=No Data
 TABLE_SINGLE_SELECTABLE=Single Selection Table
 #XACT: ARIA announcement for the table that allows multi selection
 TABLE_MULTI_SELECTABLE=Multi Selection Table
+#XACT: accessibility text for the cell that contains a single interactive element
+TABLE_CELL_SINGLE_CONTROL=Contains Control
+#XACT: accessibility text for the cell that contains multiple interactive elements
+TABLE_CELL_MULTIPLE_CONTROLS=Contains Controls
 #XACT: ARIA description for the selection column header when select all checkbox is shown
-TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contains Select All Checkbox
+TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Select All Checkbox
 #XACT: ARIA description for the selection column header when select all checkbox is checked
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Checked
 #XACT: ARIA description for the selection column header when select all checkbox is not checked
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Not Checked
 #XACT: ARIA description for the selection column header when clear all button is shown
-TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contains Clear All Button
-#XACT: ARIA description for the selection column header when clear all button is disabled
-TABLE_COLUMNHEADER_CLEARALL_DISABLED=Disabled
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button
+#XACT: ARIA announcement of a table row
+TABLE_ROW=Row
 #XACT: Description for the popin containing column header
 TABLE_ROW_POPIN=Row Popin
+#XACT: ARIA announcement for the position of a row among all table rows
+TABLE_ROW_INDEX={0} of {1}
+#XACT: ARIA announcement for the selected table row
+TABLE_ROW_SELECTED=Selected
+#XACT: ARIA announcement for the active clickable table rows
+TABLE_ROW_ACTIVE=Is Active
+#XACT: ARIA announcement for the navigable table rows
+TABLE_ROW_NAVIGABLE=Has Details
+#XACT: ARIA description for the column header row of the table
+TABLE_COLUMN_HEADER_ROW=Column Header Row
 #XTXT: Text for the growing button
 TABLE_MORE=More
 #XACT: ARIA description for the growing button
 TABLE_MORE_DESCRIPTION=To load more rows, press Enter or Space
 #XACT: ARIA description for the row action of the header cell
 TABLE_ROW_ACTIONS=Row Actions
+#XACT: Screenreader announcement when a single action is available
+TABLE_ROW_SINGLE_ACTION=1 row action available
+#XACT: Screenreader announcement when several actions are available
+TABLE_ROW_MULTIPLE_ACTIONS={0} row actions available
 #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
@@ -755,6 +773,14 @@ TABLE_GENERATED_BY_AI=Generated by AI
 TABLE_SELECT_ALL_ROWS=Select All Rows
 #XTOL: Tooltip of the header row checkbox to deselect all rows in the table
 TABLE_DESELECT_ALL_ROWS=Deselect All Rows
+#XACT: Accessibility state which should be announced by screenreaders if the element in a table cell is disabled
+TABLE_ACC_STATE_DISABLED=Disabled
+#XACT: state which should be announced by screenreaders if the element in a table cell is readonly
+TABLE_ACC_STATE_READONLY=Read Only
+#XACT: state which should be announced by screenreaders if the element in a table cell is required
+TABLE_ACC_STATE_REQUIRED=Required
+#XACT: state which should be announced by screenreaders if the table cell is empty
+TABLE_ACC_STATE_EMPTY=Empty
 
 #XFLD: Text for the "Yesterday" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_YESTERDAY_TEXT=Yesterday
@@ -779,8 +805,6 @@ DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
 
 #XFLD: Text for icon that navigates back to the previous page in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Navigate back
-#XACT: ARIA description for the column header row of the table
-TABLE_COLUMN_HEADER_ROW=Column Header Row
 
 #XFLD: Text for the "Last Days" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=Last X Days

package/src/i18n/messagebundle_en.properties

@@ -483,7 +483,7 @@ TABLE_MULTI_SELECTABLE=Multi Selection Table
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contains Select All Checkbox
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Checked
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Not Checked
-TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contains Clear All Button
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button
 TABLE_COLUMNHEADER_CLEARALL_DISABLED=Disabled
 TABLE_ROW_POPIN=Row Popin
 TABLE_MORE=More

package/src/i18n/messagebundle_fr.properties

@@ -482,7 +482,7 @@ TABLE_SINGLE_SELECTABLE=Table à sélection simple
 TABLE_MULTI_SELECTABLE=Table à sélection multiple
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contient la case à cocher Sélectionner tout
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Activé
-TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Non contrôlé
+TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Non activé
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contient le bouton Tout réinitialiser
 TABLE_COLUMNHEADER_CLEARALL_DISABLED=Désactivé
 TABLE_ROW_POPIN=Boîte de dialogue de ligne
@@ -511,25 +511,25 @@ DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Sélectionner des dates
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Revenir en arrière
 TABLE_COLUMN_HEADER_ROW=Ligne d''en-tête de colonne
 
-DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=X derniers jours
+DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=X derniers jours
 
-DYNAMIC_DATE_RANGE_NEXT_DAYS_TEXT=X prochains jours
+DYNAMIC_DATE_RANGE_NEXT_DAYS_TEXT=X prochains jours
 
-DYNAMIC_DATE_RANGE_LAST_WEEKS_TEXT=X dernières semaines
+DYNAMIC_DATE_RANGE_LAST_WEEKS_TEXT=X dernières semaines
 
-DYNAMIC_DATE_RANGE_NEXT_WEEKS_TEXT=X prochaines semaines
+DYNAMIC_DATE_RANGE_NEXT_WEEKS_TEXT=X prochaines semaines
 
-DYNAMIC_DATE_RANGE_LAST_MONTHS_TEXT=X derniers mois
+DYNAMIC_DATE_RANGE_LAST_MONTHS_TEXT=X derniers mois
 
-DYNAMIC_DATE_RANGE_NEXT_MONTHS_TEXT=X prochains mois
+DYNAMIC_DATE_RANGE_NEXT_MONTHS_TEXT=X prochains mois
 
-DYNAMIC_DATE_RANGE_LAST_QUARTERS_TEXT=X derniers trimestres
+DYNAMIC_DATE_RANGE_LAST_QUARTERS_TEXT=X derniers trimestres
 
-DYNAMIC_DATE_RANGE_NEXT_QUARTERS_TEXT=X prochains trimestres
+DYNAMIC_DATE_RANGE_NEXT_QUARTERS_TEXT=X prochains trimestres
 
-DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=X dernières années
+DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=X dernières années
 
-DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=X prochaines années
+DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=X prochaines années
 
 DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Valeur pour X
 
@@ -545,8 +545,8 @@ DYNAMIC_DATE_RANGE_QUARTERS_UNIT_TEXT=Trimestres
 
 DYNAMIC_DATE_RANGE_YEARS_UNIT_TEXT=Années
 
-DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=X derniers {0} (inclus)
+DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=X derniers {0} (inclus)
 
-DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X prochains {0} (inclus)
+DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X prochains {0} (inclus)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(Inclus)

package/src/themes/ListItem.css

@@ -194,19 +194,19 @@
 }
 
 :host([highlight="Negative"]) .ui5-li-highlight {
-	background: var(--sapNegativeTextColor);
+	background: var(--sapErrorBorderColor);
 }
 
 :host([highlight="Critical"]) .ui5-li-highlight {
-	background: var(--sapCriticalTextColor);
+	background: var(--sapWarningBorderColor);
 }
 
 :host([highlight="Positive"]) .ui5-li-highlight {
-	background: var(--sapPositiveTextColor);
+	background: var(--sapSuccessBorderColor);
 }
 
 :host([highlight="Information"]) .ui5-li-highlight {
-	background: var(--sapInformativeTextColor);
+	background: var(--sapInformationBorderColor);
 }
 
 /* wrapping */

package/src/themes/SliderTooltip.css

@@ -24,7 +24,7 @@
 	height: fit-content;
 	border: none;
 	padding: 0;
-	margin-top: -3.25rem;
+	margin-top: -3rem;
 	box-shadow: none;
 }
 

package/src/themes/TableCell.css

@@ -4,14 +4,15 @@
 	align-items: center;
 }
 
-:host([_popin]) .popin-header {
+:host([_popin]) #popin-header {
 	color: var(--sapContent_LabelColor);
 }
 
-.popin-colon {
+#popin-colon {
 	padding-inline-end: 0.5rem;
+	white-space: pre;
 }
 
-.popin-header {
+#popin-header {
 	display: contents;
 }

package/src/themes/TableHeaderRow.css

@@ -12,7 +12,7 @@
 :host([sticky]) {
 	position: sticky;
 	top: var(--ui5_grid_sticky_top, 0);
-	z-index: 2;
+	z-index: 3;
 }
 
 #popin-cell {
@@ -25,3 +25,8 @@
 	width: var(--_ui5_checkbox_inner_width_height);
 	height: var(--_ui5_checkbox_inner_width_height);
 }
+
+#actions-cell-content {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}