@ui5/webcomponents 1.9.2 → 1.10.0

package/src/popup-utils/{PopoverRegistry.js → PopoverRegistry.ts}

@@ -1,27 +1,35 @@
 import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
+import type Popover from "../Popover.js";
+import { instanceOfPopover } from "../Popover.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
 
-let updateInterval = null;
+type RegisteredPopover = {
+	instance: Popover;
+	parentPopovers: Array<Popover>;
+}
+
+let updateInterval: Interval;
 const intervalTimeout = 300;
-const openedRegistry = [];
+const openedRegistry: Array<RegisteredPopover> = [];
 
-const repositionPopovers = event => {
+const repositionPopovers = () => {
 	openedRegistry.forEach(popover => {
 		popover.instance.reposition();
 	});
 };
 
-const attachGlobalScrollHandler = () => {
-	document.body.addEventListener("scroll", repositionPopovers, true);
-};
-
-const detachGlobalScrollHandler = () => {
-	document.body.removeEventListener("scroll", repositionPopovers, true);
+const closePopoversIfLostFocus = () => {
+	if (document.activeElement!.tagName === "IFRAME") {
+		getRegistry().reverse().forEach(popup => popup.instance.close(false, false, true));
+	}
 };
 
 const runUpdateInterval = () => {
 	updateInterval = setInterval(() => {
 		repositionPopovers();
+
+		closePopoversIfLostFocus();
 	}, intervalTimeout);
 };
 
@@ -29,6 +37,22 @@ const stopUpdateInterval = () => {
 	clearInterval(updateInterval);
 };
 
+const attachGlobalScrollHandler = () => {
+	document.body.addEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const detachGlobalScrollHandler = () => {
+	document.body.removeEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const attachScrollHandler = (popover: Popover) => {
+	popover && popover.shadowRoot!.addEventListener("scroll", repositionPopovers, { capture: true });
+};
+
+const detachScrollHandler = (popover: Popover) => {
+	popover && popover.shadowRoot!.removeEventListener("scroll", repositionPopovers, { capture: true });
+};
+
 const attachGlobalClickHandler = () => {
 	document.addEventListener("mousedown", clickHandler);
 };
@@ -37,11 +61,16 @@ const detachGlobalClickHandler = () => {
 	document.removeEventListener("mousedown", clickHandler);
 };
 
-const clickHandler = event => {
+const clickHandler = (event: MouseEvent) => {
 	const openedPopups = getOpenedPopups();
-	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
 
-	if (openedPopups.length === 0 || !isTopPopupPopover) {
+	if (openedPopups.length === 0) {
+		return;
+	}
+
+	const isTopPopupPopover = instanceOfPopover(openedPopups[openedPopups.length - 1].instance);
+
+	if (!isTopPopupPopover) {
 		return;
 	}
 
@@ -50,7 +79,7 @@ const clickHandler = event => {
 		const popup = openedPopups[i].instance;
 
 		// if popup is modal, opener is clicked, popup is dialog skip closing
-		if (popup.isModal || popup.isOpenerClicked(event)) {
+		if (popup.isModal || (popup as Popover).isOpenerClicked(event)) {
 			return;
 		}
 
@@ -62,15 +91,7 @@ const clickHandler = event => {
 	}
 };
 
-const attachScrollHandler = popover => {
-	popover && popover.shadowRoot.addEventListener("scroll", repositionPopovers, true);
-};
-
-const detachScrollHandler = popover => {
-	popover && popover.shadowRoot.removeEventListener("scroll", repositionPopovers);
-};
-
-const addOpenedPopover = instance => {
+const addOpenedPopover = (instance: Popover) => {
 	const parentPopovers = getParentPopoversIfNested(instance);
 
 	addOpenedPopup(instance, parentPopovers);
@@ -88,7 +109,7 @@ const addOpenedPopover = instance => {
 	}
 };
 
-const removeOpenedPopover = instance => {
+const removeOpenedPopover = (instance: Popover) => {
 	const popoversToClose = [instance];
 
 	for (let i = 0; i < openedRegistry.length; i++) {
@@ -100,7 +121,7 @@ const removeOpenedPopover = instance => {
 
 	for (let i = popoversToClose.length - 1; i >= 0; i--) {
 		for (let j = 0; j < openedRegistry.length; j++) {
-			let indexOfItemToRemove;
+			let indexOfItemToRemove = -1;
 			if (popoversToClose[i] === openedRegistry[j].instance) {
 				indexOfItemToRemove = j;
 			}
@@ -125,14 +146,14 @@ const getRegistry = () => {
 	return openedRegistry;
 };
 
-const getParentPopoversIfNested = instance => {
+const getParentPopoversIfNested = (instance: Popover) => {
 	let currentElement = instance.parentNode;
-	const parentPopovers = [];
+	const parentPopovers: Array<Popover> = [];
 
-	while (currentElement.parentNode) {
+	while (currentElement && currentElement.parentNode) {
 		for (let i = 0; i < openedRegistry.length; i++) {
-			if (currentElement && currentElement === openedRegistry[i].instance) {
-				parentPopovers.push(currentElement);
+			if (currentElement === openedRegistry[i].instance) {
+				parentPopovers.push(currentElement as Popover);
 			}
 		}
 

package/src/themes/Avatar.css

@@ -120,11 +120,14 @@
 }
 
 /* Shapes */
-:host([shape="Square"]),
-:host([shape="Square"]) ::slotted(*) {
+:host([shape="Square"]) {
 	border-radius: var(--ui5-avatar-border-radius);
 }
 
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: calc(var(--ui5-avatar-border-radius) - var(--ui5-avatar-border-radius-img-deduction));
+}
+
 :host(:not([color-scheme])),
 :host(:not([_has-image])),
 :host([_color-scheme="Accent6"]),

package/src/themes/BusyIndicator.css

@@ -73,7 +73,7 @@
 	flex-direction: column;
 }
 
-.ui5-busy-indicator-busy-area:focus {
+.ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
     border-radius: var(--_ui5_busy_indicator_focus_border_radius);

package/src/themes/Button.css

@@ -50,8 +50,8 @@
 	user-select: none;
 }
 
-:host(:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host(:not([hidden]).ui5_hovered) {
+:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host(:not([hidden]):not([disabled]).ui5_hovered) {
 	background: var(--sapButton_Hover_Background);
 	box-shadow: var(--sapContent_Interaction_Shadow);
 	border: 1px solid var(--sapButton_Hover_BorderColor);
@@ -98,7 +98,8 @@
 
 :host([disabled]) {
 	opacity: var(--sapContent_DisabledOpacity);
-	pointer-events: none;
+	pointer-events: unset;
+	cursor: default;
 }
 
 :host([has-icon]:not([icon-only])) .ui5-button-text{
@@ -161,8 +162,8 @@ bdi {
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
-:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Accept_Hover_Background);
 	border-color: var(--sapButton_Accept_Hover_BorderColor);
 	box-shadow: var(--sapContent_Positive_Shadow);
@@ -182,8 +183,8 @@ bdi {
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
-:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Reject_Hover_Background);
 	border-color: var(--sapButton_Reject_Hover_BorderColor);
 	box-shadow: var(--sapContent_Negative_Shadow);
@@ -203,8 +204,8 @@ bdi {
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
-:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Attention_Hover_Background);
 	border-color: var(--sapButton_Attention_Hover_BorderColor);
 	color: var(--sapButton_Attention_Hover_TextColor);
@@ -226,8 +227,8 @@ bdi {
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
-:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Emphasized_Hover_Background);
 	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
 	border-width: var(--_ui5_button_emphasized_border_width);
@@ -253,8 +254,8 @@ bdi {
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
-:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
-:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Lite_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
 	box-shadow: var(--sapContent_Interaction_Shadow);

package/src/themes/CardHeader.css

@@ -12,7 +12,7 @@
 	align-items: flex-start;
 }
 
-.ui5-card-header:not(.ui5-card-header-hide-focus):focus-within:before {
+.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -28,7 +28,24 @@
 	border-bottom-right-radius: var(--_ui5_card_header_focus_bottom_radius);
 }
 
-.ui5-card-header-focusable-element:focus {
+/* cannot be combined with the above style, because :has selector breaks the whole style if FF */
+.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus-visible):before {
+	outline: none;
+	content: "";
+	position: absolute;
+	border: var(--_ui5_card_header_focus_border);
+	pointer-events: none;
+	top: var(--_ui5_card_header_focus_offset);
+	left: var(--_ui5_card_header_focus_offset);
+	right: var(--_ui5_card_header_focus_offset);
+	bottom: var(--_ui5_card_header_focus_offset);
+	border-top-left-radius: var(--_ui5_card_header_focus_radius);
+	border-top-right-radius: var(--_ui5_card_header_focus_radius);
+	border-bottom-left-radius: var(--_ui5_card_header_focus_bottom_radius);
+	border-bottom-right-radius: var(--_ui5_card_header_focus_bottom_radius);
+}
+
+.ui5-card-header-focusable-element {
 	outline: none;
 }
 

package/src/themes/Carousel.css

@@ -8,7 +8,7 @@
     height: 100%;
 }
 
-.ui5-carousel-root:focus {
+.ui5-carousel-root:focus-visible {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
@@ -60,12 +60,12 @@
     justify-content: center;
     padding: 0 0.75rem;
     box-sizing: border-box;
-    transition: visibility 0.5s linear;
-    will-change: visibility;
+    transition: opacity 0.5s linear;
+    will-change: opacity;
 }
 
 .ui5-carousel-item--hidden {
-    visibility: hidden;
+    opacity: 0;
 }
 
 .ui5-carousel-navigation-arrows {

package/src/themes/DatePicker.css

@@ -16,7 +16,7 @@
 	border-radius: var(--_ui5-datepicker_border_radius);
 }
 
-:host([value-state="Error"]):not([disabled]):not([readonly]) {
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
 	background-color: var(--sapField_InvalidBackground);
 }
 
@@ -52,6 +52,12 @@
 	background-color: var(--_ui5-datepicker-hover-background);
 }
 
+:host([readonly]) {
+	border-color: var(--_ui5_input_readonly_border_color);
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--_ui5_input_readonly_background);
+}
+
 [slot="icon"] {
 	border-top-right-radius: var(--_ui5-datepicker_icon_border_radius);
     border-bottom-right-radius: var(--_ui5-datepicker_icon_border_radius);

package/src/themes/Dialog.css

@@ -79,11 +79,11 @@
 	color: var(--_ui5_dialog_header_warning_state_icon_color);
 }
 
-.ui5-popup-header-root:focus {
+.ui5-popup-header-root {
 	outline: none;
 }
 
-.ui5-popup-header-root:focus:after {
+.ui5-popup-header-root:focus-visible:after {
 	content: '';
 	position: absolute;
 	left: var(--_ui5_dialog_header_focus_left_offset);

package/src/themes/Icon.css

@@ -22,6 +22,38 @@
 	outline: none;
 }
 
+:host([design="Contrast"]) {
+	color: var(--sapContent_ContrastIconColor);
+}
+
+:host([design="Critical"]) {
+	color: var(--sapCriticalElementColor);
+}
+
+:host([design="Default"]) {
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="Information"]) {
+	color: var(--sapInformativeElementColor);
+}
+
+:host([design="Negative"]) {
+	color: var(--sapNegativeElementColor);
+}
+
+:host([design="Neutral"]) {
+	color: var(--sapNeutralElementColor);
+}
+
+:host([design="NonInteractive"]) {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([design="Positive"]) {
+	color: var(--sapPositiveElementColor);
+}
+
 :host([interactive][focused]) .ui5-icon-root {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);
@@ -35,6 +67,11 @@
 	vertical-align: top;
 }
 
+
+:host([interactive]) {
+	cursor: pointer;
+}
+
 /*
  * The Icon is currently the only component that enforces "LTR" direction inside its ShadowDOM
  * as some icons should not be mirrored in RTL (f.e. checkmark, search, etc.).

package/src/themes/Input.css

@@ -21,6 +21,9 @@
 	word-spacing: normal;
 	text-align: start;
 	transition: var(--_ui5_input_transition);
+}
+
+:host(:not([disabled])) {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--_ui5_input_background_color);
 }
@@ -430,12 +433,33 @@
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
+.ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_height);
+	padding: 0;
+	width: var(--_ui5_input_icon_width);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+:host([value-state]:not([value-state="None"]):not([value-state="Success"])) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_state_height);
+	vertical-align: top;
+}
 
+:host([value-state="Success"]) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_success_state_height);
+}
 
+[ui5-icon].ui5-input-clear-icon {
+	padding: 0;
+	color: inherit;
+}
 
 /* Chrome, Safari, Edge, Opera */
 [inner-input]::-webkit-outer-spin-button,
 [inner-input]::-webkit-inner-spin-button {
-  -webkit-appearance: inherit;
-  margin: inherit;
+	-webkit-appearance: inherit;
+	margin: inherit;
 }

package/src/themes/ListItem.css

@@ -27,6 +27,16 @@
 	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
+/* navigated */
+:host([navigated]) .ui5-li-root .ui5-li-navigated {
+	width: 0.1875rem;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: var(--sapList_SelectionBorderColor);
+}
+
 /* active */
 :host([active][actionable]) .ui5-li-root .ui5-li-icon {
 	color: var(--sapList_Active_TextColor);
@@ -65,6 +75,10 @@
 	height: 5rem;
 }
 
+:host([_has-image-content]) {
+	height: 5rem;
+}
+
 :host([image]) .ui5-li-content {
 	height: 3rem;
 }
@@ -141,13 +155,17 @@
 
 .ui5-li-img {
 	width: var(--_ui5_list_item_img_size);
-	min-width: var(--_ui5_list_item_img_size);
 	height: var(--_ui5_list_item_img_size);
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+.ui5-li-img,
+.ui5-li-imgContent {
+	min-width: var(--_ui5_list_item_img_size);
 	min-height: var(--_ui5_list_item_img_size);
 	margin-top: var(--_ui5_list_item_img_top_margin);
 	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
 	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
-	border-radius: var(--ui5-avatar-border-radius);
 }
 
 .ui5-li-img-inner {

package/src/themes/MultiComboBox.css

@@ -21,7 +21,3 @@
 	min-width: 0px;
 	height: 100%;
 }
-
-:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
-	color: var(--sapLinkColor);
-}

package/src/themes/MultiInput.css

@@ -6,8 +6,4 @@
 	width: auto;
 	min-width: 0px;
 	height: 100%;
-}
-
-:host([readonly]) .ui5-multi-input-tokenizer::part(n-more-text) {
-	color: var(--sapLinkColor);
-}
+}

package/src/themes/RadioButton.css

@@ -42,7 +42,7 @@
 }
 
 /* focused */
-:host(:not([disabled])) .ui5-radio-root:focus:before {
+:host(:not([disabled])) .ui5-radio-root:focus-visible:before {
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
@@ -56,11 +56,11 @@
 }
 
 /* horizon readonly focus */
-:host(:not([disabled])[readonly]) .ui5-radio-root:focus:before {
+:host(:not([disabled])[readonly]) .ui5-radio-root:focus-visible:before {
 	border: var(--_ui5_radio_button_border_width) var(--_ui5_radio_button_border_readonly_focus_style) var(--sapContent_FocusColor);
 }
 
-:host(:not([disabled])) .ui5-radio-root:focus {
+:host(:not([disabled])) .ui5-radio-root:focus-visible {
 	border-radius: var(--_ui5_radio_button_border_radius);
 	border: var(--_ui5_radio_button_focus_border);
 }
@@ -84,7 +84,7 @@
 	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
 }
 
-.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer, 
+.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer,
 :host([checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
 	fill: var(--_ui5_radio_button_hover_fill);
 }
@@ -100,7 +100,7 @@
 }
 
 /* with label */
-:host([text]) .ui5-radio-root:focus:before {
+:host([text]) .ui5-radio-root:focus-visible:before {
 	inset-inline: var(--_ui5_radio_button_focus_dist) 0;
 }
 
@@ -234,7 +234,7 @@
 	vertical-align: top;
 }
 
-.ui5-radio-inner:focus {
+.ui5-radio-inner {
 	outline: none;
 }
 

package/src/themes/Select.css

@@ -22,7 +22,7 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: var(--_ui5_select_label_olor);
+	color: var(--_ui5_select_label_color);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;

package/src/themes/TabInStrip.css

@@ -133,11 +133,11 @@
 }
 
 /* the outline offset when focused */
-.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after {
+.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
 	left: var(--_ui5_tc_headerItemContent_focus_offset);
 	right: var(--_ui5_tc_headerItemContent_focus_offset);
 }
@@ -151,12 +151,12 @@
 	opacity: var(--sapContent_DisabledOpacity);
 }
 
-.ui5-tab-strip-item:focus {
+.ui5-tab-strip-item {
 	outline: none;
 }
 
-.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before {
+.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -168,7 +168,7 @@
 	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
+.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -180,7 +180,7 @@
 	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
+.ui5-tab-strip-item--withIcon:focus-visible .ui5-tab-strip-item-icon-outer::before {
 	content: "";
 	pointer-events: none;
 	position: absolute;

package/src/themes/Table.css

@@ -23,7 +23,7 @@ table {
 }
 
 .ui5-table-header-row {
-	color: var(--sapTextColor);
+	color: var(--sapList_HeaderTextColor);
 	height: var(--ui5_table_header_row_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);

package/src/themes/TableCell.css

@@ -19,6 +19,10 @@ td {
 	padding-top: .25rem;
 }
 
+:host([_popined-inline]) {
+	padding-top: 0;
+}
+
 ::slotted([ui5-label]) {
 	color: inherit;
 }

package/src/themes/TableRow.css

@@ -42,6 +42,15 @@
 	font-size: var(--sapFontSize);
 }
 
+.ui5-table-cell-display-inline {
+	margin-inline-start: 0.5rem;
+}
+
+.ui5-table-display-inline-container {
+	display: flex;
+	align-items: center;
+}
+
 .ui5-table-multi-select-cell {
 	padding: .25rem 0;
 	box-sizing: border-box;