@ui5/webcomponents 1.3.1 → 1.6.0

package/src/themes/TabInStrip.css

@@ -1,3 +1,5 @@
+@import "./TabSemanticIcon.css";
+
 .ui5-tab-strip-item {
 	height: var(--_ui5_tc_header_height);
 	color: var(--_ui5_tc_headerItem_color);
@@ -41,12 +43,35 @@
 	pointer-events: none;
 	transition: var(--_ui5_tc_headerItem_transition);
 }
+.ui5-tab-expand-button > [ui5-button] {
+	height: 1.5rem;
+	min-width: 1.5rem;
+	margin-top: 0.25rem;
+	margin-inline-start: 0.625rem;
+}
+
+.ui5-tab-expand-button > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_headerItem_color);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_headerItem_text_selected_color);
+}
+
+.ui5-tab-expand-button > [ui5-button]:hover:not([active]) {
+	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
+}
+
+.ui5-tab-single-click-icon {
+	margin-inline-start: 0.875rem;
+}
 
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
-	color: var(--_ui5_tc_headeritem_text_selected_color);
+	color: var(--_ui5_tc_headerItem_text_selected_color);
 }
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
-	color: var(--_ui5_tc_headeritem_text_selected_color);
+
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
+	color: var(--_ui5_tc_headerItem_text_selected_color);
 }
 
 .ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText {
@@ -58,11 +83,11 @@
 	display: flex;
 }
 
-.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
 	color: var(--_ui5_tc_headerItem_color);
 }
-.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
-.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-single-click-icon>[ui5-icon] {
+.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled) .ui5-tab-single-click-icon > [ui5-icon] {
 	color: var(--_ui5_tc_headerItem_text_hover_color);
 }
 
@@ -122,7 +147,7 @@
 
 .ui5-tab-strip-item--disabled {
 	cursor: default;
-	opacity: 0.5;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .ui5-tab-strip-item:focus {
@@ -166,27 +191,6 @@
 	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
 }
 
-.ui5-tab-strip-item-semanticIcon::before {
-	display: var(--_ui5_tc_headerItemSemanticIcon_display);
-	font-family: "SAP-icons";
-	font-size: 0.75rem;
-	margin-right: 0.25rem;
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-}
-
-.ui5-tab-strip-item-semanticIcon--positive::before {
-	content: "\e1ab";
-}
-
-.ui5-tab-strip-item-semanticIcon--negative::before {
-	content: "\e1ac";
-}
-
-.ui5-tab-strip-item-semanticIcon--critical::before {
-	content: "\e1ae";
-}
-
 /*** Icon and text Tab styles ***/
 
 .ui5-tab-strip-item-icon-outer {
@@ -196,7 +200,7 @@
 	position: relative;
 	border: var(--_ui5_tc_headerItemIcon_border);
 	border-radius: 50%;
-	margin-right: 0.25rem;
+	margin-inline-end: 0.25rem;
 	height: var(--_ui5_tc_item_icon_circle_size);
 	width: var(--_ui5_tc_item_icon_circle_size);
 	pointer-events: none;
@@ -221,7 +225,7 @@
 }
 
 .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-	display: block;
+	display: flex;
 }
 
 .ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
@@ -229,7 +233,7 @@
 }
 
 .ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-	margin-top: var(--_ui5_tc_item_add_text_margin_top);
+	margin-block-start: var(--_ui5_tc_item_add_text_margin_top);
 }
 
 /*** END Icon and text Tab styles ***/
@@ -269,7 +273,7 @@
 
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
 	font-size: 1.5rem;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 }
 
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText {
@@ -281,8 +285,7 @@
 
 /*** Semantic states ***/
 .ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
-.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer,
-.ui5-tab-strip-item-semanticIcon--positive::before {
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer {
 	color: var(--sapPositiveColor);
 	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
@@ -313,8 +316,7 @@
 }
 
 .ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
-.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer,
-.ui5-tab-strip-item-semanticIcon--negative::before {
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer {
 	color: var(--sapNegativeColor);
 	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
@@ -338,8 +340,7 @@
 }
 
 .ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
-.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer,
-.ui5-tab-strip-item-semanticIcon--critical::before {
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer {
 	color: var(--sapCriticalColor);
 	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
@@ -387,27 +388,11 @@
 }
 
 .ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
-	padding: 0px;
+	padding: 0;
 }
 
 .ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
-	padding: 0px 0.188rem;
-	color: var(--_ui5_tc_headeritem_additional_text_color);
-	font-weight: var(--_ui5_tc_headeritem_additional_text_font_weight);
-}
-/*** RTL ***/
-
-[dir=rtl] .ui5-tab-strip-item-semanticIcon::before {
-	margin-left: 0.25rem;
-	margin-right: 0;
-}
-
-[dir=rtl] .ui5-tab-strip-item-icon-outer {
-	margin-left: 0.25rem;
-	margin-right: 0;
-}
-
-[dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
-	margin-right: 0;
-	margin-left: 0.5rem;
+	padding: 0 0.188rem;
+	color: var(--_ui5_tc_headerItem_additional_text_color);
+	font-weight: var(--_ui5_tc_headerItem_additional_text_font_weight);
 }

package/src/themes/TabSemanticIcon.css

@@ -0,0 +1,18 @@
+.ui5-tab-semantic-icon {
+	display: var(--_ui5_tc_headerItemSemanticIcon_display);
+	height: var(--_ui5_tc_headerItemSemanticIcon_size);
+	width: var(--_ui5_tc_headerItemSemanticIcon_size);
+	margin-inline-end: 0.5rem;
+}
+
+.ui5-tab-semantic-icon--positive {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-tab-semantic-icon--negative {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-tab-semantic-icon--critical {
+	color: var(--sapCriticalElementColor);
+}

package/src/themes/TabSeparatorInOverflow.css

@@ -1,9 +1,10 @@
 .ui5-tc__separator {
 	min-height: 0.25rem;
 	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
-	margin-left: calc(var(--_ui5-indentation-level, 0) * 1rem);
-	margin-right: 0.5rem;
+	margin-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem);
+	margin-inline-end: 0.5rem;
 }
-[ui5-list]>.ui5-tc__separator:first-child {
+
+[ui5-list] > .ui5-tc__separator:first-child {
 	min-height: 0.5rem;
 }

package/src/themes/TableColumn.css

@@ -9,14 +9,10 @@ th {
 	font-size: var(--sapFontMediumSize);
 	padding: 0.5rem;
 	box-sizing: border-box;
-	text-align: left;
+	text-align: start;
 	vertical-align: middle;
 }
 
-th[dir="rtl"] {
-	text-align: right;
-}
-
 :host([first]) th {
 	padding-left: 1rem;
 }

package/src/themes/TableGroupRow.css

@@ -28,9 +28,5 @@ td {
 	word-break: break-word;
 	vertical-align: middle;
 	padding: .5rem .25rem .5rem 1rem;
-	text-align: left;
-}
-
-:host [dir="rtl"] td {
-	text-align: right;
+	text-align: start;
 }

package/src/themes/TextArea.css

@@ -35,25 +35,24 @@
 
 :host([focused]) .ui5-textarea-inner {
 	outline: var(--_ui5_textarea_focus_outline);
-	outline-offset: -3px;
+	outline-offset: var(--_ui5_textarea_focus_outline_offset);
 }
 
-:host([focused]:not([exceeding])) .ui5-textarea-inner {
+:host([focused]) .ui5-textarea-inner {
 	background-color: var(--sapField_Focus_Background);
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host(:not([value-state]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--_ui5_textarea_hover_box_shadow);
 	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner {
 	outline: var(--_ui5_textarea_value_state_focus_outline);
-	outline-offset: -4px;
+	outline-offset: var(--_ui5_textarea_value_state_focus_outline_offset);
 }
 
 .ui5-textarea-root {
@@ -146,13 +145,6 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-.ui5-textarea-inner:-ms-input-placeholder {
-	/* IE 10+ */
-	font-weight: normal;
-	font-style: var(--_ui5_textarea_placeholder_font_style);
-	color: var(--sapField_PlaceholderTextColor);
-}
-
 .ui5-textarea-inner:-moz-placeholder {
 	/* Firefox 18- */
 	font-weight: normal;
@@ -162,42 +154,44 @@
 
 :host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder {
 	/* Chrome/Opera/Safari */
-	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
 :host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder {
 	/* Firefox 19+ */
-	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
-	font-style: var(--_ui5_textarea_error_placeholder_font_style);
-	color: var(--_ui5_textarea_error_placeholder_color);
-}
-
-:host([value-state="Error"]) .ui5-textarea-inner:-ms-input-placeholder {
-	/* IE 10+ */
-	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
 :host([value-state="Error"]) .ui5-textarea-inner:-moz-placeholder {
 	/* Firefox 18- */
-	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
+:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+}
+
+:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+}
+
+:host(:not([value-state]):not([readonly]):hover) {
 	border-color: var(--sapField_Hover_BorderColor);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):hover) .ui5-textarea-inner {
+:host(:not([value-state]):not([readonly]):hover) .ui5-textarea-inner {
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state]:not([value-state="None"])) .ui5-textarea-inner {
 	border-width: var(--_ui5_textarea_state_border_width);
 }
 
@@ -210,20 +204,17 @@
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
 }
 
-:host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
-:host([exceeding]:not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Critical_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Warning"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner,
-:host([exceeding][focused]) .ui5-textarea-inner {
+:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
 	background-color: var(--sapField_Focus_Background);
@@ -235,12 +226,12 @@
 	background-color: var(--sapField_InvalidBackground);
 }
 
-:host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Error"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Negative_Shadow);
 	background-color: var(--_ui5_textarea_error_hover_background_color);
 }
 
-:host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Error"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
 	background-color: var(--_ui5_textarea_error_focused_background_color);
@@ -251,12 +242,12 @@
 	background-color: var(--sapField_InformationBackground);
 }
 
-:host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Informative_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
 	background-color: var(--sapField_Focus_Background);
@@ -267,12 +258,12 @@
 	background-color: var(--sapField_SuccessBackground);
 }
 
-:host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Positive_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
 	background-color: var(--sapField_Focus_Background);
@@ -292,30 +283,28 @@
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly])),
-:host([exceeding]) {
+:host([value-state="Warning"]:not([readonly])) {
 	border-color: var(--sapField_WarningColor);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_WarningBackground);
 }
 
-:host([value-state="Success"]:not([readonly]):not([exceeding])) {
+:host([value-state="Success"]:not([readonly])) {
 	border-color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Success"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_SuccessBackground);
 	border-width: var(--_ui5_textarea_success_border_width);
 }
 
-:host([value-state="Information"]:not([readonly]):not([exceeding])) {
+:host([value-state="Information"]:not([readonly])) {
 	border-color: var(--sapField_InformationColor);
 }
 
-:host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_InformationBackground);
 	border-width: var(--_ui5_textarea_information_border_width);
 }
@@ -363,4 +352,4 @@
 
 :host([focused]) ::-webkit-scrollbar {
 	background-image: none;
-}
+}

package/src/themes/Title.css

@@ -7,7 +7,7 @@
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
 	font-size: var(--sapFontHeader2Size);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: "72override", var(--sapFontHeaderFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }
 

package/src/themes/Toast.css

@@ -30,12 +30,6 @@
 	white-space: pre-line;
 }
 
-@media screen and (-ms-high-contrast: active) {
-    .ui5-toast-root {
-        border: 1px solid var(--sapPageFooter_BorderColor);
-    }
-}
-
 :host(:not([placement])) .ui5-toast-root {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;

package/src/themes/ToggleButton.css

@@ -2,11 +2,6 @@
 	display: inline-block;
 }
 
-/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */
-:host([disabled]) {
-	pointer-events: none;
-}
-
 :host([pressed]),
 :host([design="Default"][pressed]),
 :host([design="Transparent"][pressed]),
@@ -125,4 +120,4 @@
 	background: var(--sapButton_Attention_Selected_Background);
 	border-color: var(--sapButton_Attention_Selected_BorderColor);
 	color: var(--sapButton_Attention_Selected_TextColor);
-}
+}

package/src/themes/Token.css

@@ -1,15 +1,15 @@
 :host {
 	display: inline-block;
 	background: var(--_ui5_token_background);
-	border-width: 1px;
-	border-style: solid;
-	border-color: var(--sapButton_TokenBorderColor);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 	border-radius: var(--_ui5_token_border_radius);
 	color: var(--_ui5_token_text_color);
 	height: var(--_ui5_token_height);
 	box-sizing: border-box;
 	margin-top: var(--_ui5_token_top_margin);
 	margin-bottom: var(--_ui5_token_bottom_margin);
+	margin-inline-end: var(--_ui5_token_right_margin);
+	position: relative;
 }
 
 :host([overflows]) {
@@ -25,37 +25,22 @@
 :host([selected]:not([readonly]):not([focused])) {
 	color: var(--sapButton_Selected_TextColor);
 	background: var(--sapButton_Selected_Background);
-	border: 1px solid var(--sapButton_Selected_BorderColor);
-	box-shadow: var(--_ui5_token_selected_box_shadow);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 }
 
 :host([selected]:not([readonly]):hover) {
 	background: var(--_ui5_token_selected_hover_background);
 	border-color: var(--_ui5_token_selected_hover_border_color);
-	box-shadow: var(--sapContent_Selected_Shadow);
+	box-shadow: var(--sapContent_Interaction_Shadow);
 }
 
 :host([readonly]) {
 	background: var(--_ui5_token_readonly_background);
-	color: var(--sapContent_ForegroundTextColor);
+	color: var(--_ui5_token_readonly_color);
 }
 
 :host([readonly]) .ui5-token--wrapper {
-	padding-right: 0.3125rem;
-}
-
-:host([focused]:not([selected]):not([readonly]):not(:hover)) {
-	border: var(--_ui5_token_focused_border);
-}
-
-:host([focused][selected]:not([readonly]):hover) {
-	box-shadow: var(--sapContent_Selected_Shadow);
-	border: var(--_ui5_token_focused_selected_border);
-}
-
-:host([focused]:not([selected]):not([readonly]):hover) {
-	box-shadow: var(--sapContent_Interaction_Shadow);
-	border: var(--_ui5_token_focused_selected_border);
+	padding: 0 var(--_ui5_token_readonly_padding);
 }
 
 :host([selected]) .ui5-token--wrapper:focus {
@@ -74,8 +59,7 @@
 	height: 100%;
 	width: 100%;
 	cursor: default;
-	padding: 0.25rem 0;
-	padding-left: 0.3125rem;
+	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
@@ -83,10 +67,23 @@
 }
 
 .ui5-token--wrapper:focus {
-	outline-offset: -2px;
+	outline-offset: var(--_ui5_token_outline_offset);
 	outline: var(--_ui5_token_focus_outline);
 }
 
+.ui5-token--wrapper:focus::after {
+	content: var(--ui5_token_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_token_focus_outline_border_radius);
+	top: var(--_ui5_token_focus_offset);
+	bottom: var(--_ui5_token_focus_offset);
+	left: var(--_ui5_token_focus_offset);
+	right: var(--_ui5_token_focus_offset);
+}
+
 .ui5-token--text {
 	white-space: nowrap;
 }
@@ -107,11 +104,5 @@
 	width: var(--_ui5_token_icon_size);
 	height: var(--_ui5_token_icon_size);
 	padding: var(--_ui5_token_icon_padding);
-	color: var(--_ui5_token_icon_color);
-}
-
-/* RTL */
-:host(:not([readonly])) .ui5-token--wrapper[dir="rtl"] {
-	padding-right: var(--_ui5_token_wrapper_right_padding);
-	padding-left: var(--_ui5_token_wrapper_left_padding);
+	color: var(--sapContent_IconColor);
 }

package/src/themes/Tokenizer.css

@@ -15,7 +15,6 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: var(--_ui5_tokenizer_root_padding);
 	overflow-x: scroll;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
@@ -26,7 +25,7 @@
 }
 
 .ui5-tokenizer-root.ui5-tokenizer-nmore--wrapper {
-	overflow-x: hidden;
+	overflow: hidden;
 }
 
 .ui5-tokenizer--token--wrapper {
@@ -46,6 +45,7 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	overflow: auto;
+	padding-inline-start: var(--_ui5_tokenizer_padding);
 }
 
 .ui5-tokenizer--content.ui5-tokenizer-nmore--content {
@@ -54,32 +54,15 @@
 
 .ui5-tokenizer-more-text {
 	display: inline-block;
-	margin-left: .25rem;
+	margin-inline-start: .25rem;
 	cursor: pointer;
 	white-space: nowrap;
 	font-size: var(--sapFontSize);
-	font-weight: var(--_ui5_tokenizer_n_more_indicator_font_weight);
-	color: var(--_ui5_tokenizer_n_more_indicator_color);
+	font-weight: normal;
+	color: var(--sapField_TextColor);
 }
 
 :host([expanded]) .ui5-tokenizer--content {
 	overflow: hidden;
 	justify-content: flex-end;
-}
-
-::slotted([ui5-token]) {
-	margin-left: .25rem;
-}
-
-/* RTL */
-
-[dir="rtl"] .ui5-tokenizer-more-text {
-	margin-right: .25rem;
-	margin-left: 0;
-}
-
-[dir=rtl] ::slotted([ui5-token]) {
-	margin-right: .25rem;
-	margin-left: 0;
-}
-
+}

package/src/themes/TreeListItem.css

@@ -26,7 +26,7 @@
 	width: 0;
 	height: 0;
 	border-left: 0.375rem solid transparent;
-	border-bottom: .375rem solid var(--sapContent_IconColor);
+	border-bottom: .375rem solid var(--sapContent_NonInteractiveIconColor);
 	position: absolute;
 	right: 0.1875rem;
 	bottom: 0.125rem;