@ui5/webcomponents 1.2.3 → 1.3.1

package/src/themes/TabInOverflow.css

@@ -34,9 +34,18 @@
 .ui5-tab-overflow-itemContent {
 	display: flex;
 	align-items: center;
-	padding: 0 0.5rem;
+	padding-right: 0.5rem;
 	height: var(--_ui5_tc_item_text);
 	pointer-events: none;
+	font-size: 0.875rem;
+}
+
+.ui5-tab-overflow-itemContent-wrapper {
+	padding-left: calc(var(--_ui5-indentation-level, 0) * 1rem);
+}
+
+.ui5-tab-overflow-item--selectedSubTab {
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
 .ui5-tab-overflow-item [ui5-icon] {
@@ -50,14 +59,11 @@
 	display: none;
 }
 
-.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
-	border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
-}
-
-.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
-	border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
+	top: var(--_ui5_tc_overflowItem_focus_offset);
+	right: var(--_ui5_tc_overflowItem_focus_offset);
+	bottom: var(--_ui5_tc_overflowItem_focus_offset);
+	left: var(--_ui5_tc_overflowItem_focus_offset);
 }
 
 .ui5-tab-container-responsive-popover::part(content) {

package/src/themes/TabInStrip.css

@@ -17,6 +17,7 @@
 }
 
 .ui5-tab-strip-itemText {
+	position: relative;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -44,25 +45,34 @@
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
 	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:hover:not(.ui5-tab-strip-item--selected).ui5-tab-strip-item--textOnly {
-	color: var(--_ui5_tc_headerItem_text_hover_color);
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText {
+	display: flex;
+	align-items: center;
 }
 
-.ui5-tab-strip-item:hover.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
-	color: var(--_ui5_tc_headeritem_text_selected_hover_color);
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon {
+	display: flex;
+}
+
+.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] {
+	color: var(--_ui5_tc_headerItem_text_hover_color);
 }
 
 /* the outline when hover or selected */
-.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
 	content: "";
 	position: absolute;
-	bottom: 1px;
+	bottom: 0;
 	left: 0;
 	right: 0;
 	border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
@@ -107,7 +117,7 @@
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-	bottom: -0.875rem;
+	bottom: -0.9375rem;
 }
 
 .ui5-tab-strip-item--disabled {
@@ -119,12 +129,29 @@
 	outline: none;
 }
 
-.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemText,
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
-	outline: var(--_ui5_tc_headerItem_focus_border);
+.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 {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
-	outline-offset: var(--_ui5_tc_headerItem_focus_offset);
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_text_focus_border_offset_left);
+	right: var(--_ui5_tc_headerItem_text_focus_border_offset_right);
+	top: var(--_ui5_tc_headerItem_text_focus_border_offset_top);
+	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
+}
+
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
+	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_left);
+	right: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right);
+	top: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top);
+	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
 }
 
 .ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
@@ -139,15 +166,6 @@
 	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
 }
 
-
-/* focused */
-.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer .ui5-tab-strip-itemContent,
-.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemContent,
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
-	border: var(--_ui5_tc_headerItemContent_focus_border);
-}
-
 .ui5-tab-strip-item-semanticIcon::before {
 	display: var(--_ui5_tc_headerItemSemanticIcon_display);
 	font-family: "SAP-icons";
@@ -182,6 +200,7 @@
 	height: var(--_ui5_tc_item_icon_circle_size);
 	width: var(--_ui5_tc_item_icon_circle_size);
 	pointer-events: none;
+	background-color: var(--_ui5_tc_headerItemIcon_background_color);
 }
 
 .ui5-tab-strip-item-icon {
@@ -225,7 +244,7 @@
 	line-height: var(--_ui5_tc_item_text_line_height);
 }
 
-.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--withAddionalText) .ui5-tab-strip-itemText {
+.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
 	padding: 0 0.188rem;
 }
 
@@ -253,8 +272,15 @@
 	margin-right: 0.5rem;
 }
 
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText {
+	color: var(--_ui5_tc_mixedMode_itemText_color);
+	font-family: var(--_ui5_tc_mixedMode_itemText_font_family);
+	font-size: var(--_ui5_tc_mixedMode_itemText_font_size);
+	font-weight: var(--_ui5_tc_mixedMode_itemText_font_weight);
+}
+
 /*** Semantic states ***/
-.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly,
+.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 {
 	color: var(--sapPositiveColor);
@@ -274,13 +300,19 @@
 	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
+.ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer::after {
+	border-color: var(--_ui5_tc_headerItem_neutral_border_color);
+	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
+}
+
 .ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
 	border-color: var(--_ui5_tc_headerItem_positive_border_color);
 	background-color: var(--_ui5_tc_headerItem_positive_border_bg);
 }
 
-.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly,
+.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 {
 	color: var(--sapNegativeColor);
@@ -305,7 +337,7 @@
 	background-color: var(--_ui5_tc_headerItem_negative_border_bg);
 }
 
-.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly,
+.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 {
 	color: var(--sapCriticalColor);
@@ -330,7 +362,7 @@
 	background-color: var(--_ui5_tc_headerItem_critical_border_bg);
 }
 
-.ui5-tab-strip-item--nutral.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
 	color: var(--sapNeutralColor);
 	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
@@ -353,7 +385,14 @@
 	border-color: var(--_ui5_tc_headerItem_neutral_border_color);
 	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
 }
+
+.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
+	padding: 0px;
+}
+
 .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 ***/

package/src/themes/TabSeparatorInOverflow.css

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

package/src/themes/Table.css

@@ -22,11 +22,12 @@ table {
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: var(--ui5_table_header_row_font_weight);
+	border-bottom: var(--ui5_table_header_row_border_width) solid var(--ui5_table_header_row_border_bottom_color);
 }
 
 .ui5-table-header-row:focus {
 	outline: var(--ui5_table_header_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: -0.125rem;
+	outline-offset: var(--ui5_table_focus_outline_offset);
 }
 
 tr {
@@ -88,4 +89,8 @@ tr {
 
 th {
 	background: var(--sapList_HeaderBackground);
-}
+}
+
+.ui5-table-focusarea {
+	position: fixed;
+}

package/src/themes/TableCell.css

@@ -14,13 +14,9 @@ td {
 	display: contents;
 }
 
-.ui5-table-popin-row td {
-	padding-left: 1rem;
-
-}
-
-:host([popined]) td {
+:host([popined]) {
 	padding-left: 0;
+	padding-top: .25rem;
 }
 
 ::slotted([ui5-label]) {

package/src/themes/TableColumn.css

@@ -4,12 +4,10 @@
 
 th {
 	background: var(--sapList_HeaderBackground);
-	border: none;
-	border-bottom: 1px solid var(--sapList_BorderColor);
 	width: inherit;
 	font-weight: var(--ui5_table_header_row_font_weight);
 	font-size: var(--sapFontMediumSize);
-	padding: 0.25rem;
+	padding: 0.5rem;
 	box-sizing: border-box;
 	text-align: left;
 	vertical-align: middle;

package/src/themes/TableGroupRow.css

@@ -8,18 +8,20 @@
 }
 
 .ui5-table-group-row-root {
-	height: 2rem;
-	border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
+	height: var(--ui5_table_group_row_height);
+	border-style: solid;
+	border-color: var(--sapList_TableGroupHeaderBorderColor);
+	border-width: var(--ui5_table_border_width);
 	background-color: var(--sapList_TableGroupHeaderBackground);
 	color: var(--sapList_TableGroupHeaderTextColor);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
-	font-weight: normal;
+	font-weight: var(--ui5_table_group_row_font-weight);
 }
 
 .ui5-table-group-row-root:focus {
 	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: -0.0625rem;
+	outline-offset: var(--ui5_table_focus_outline_offset);
 }
 
 td {

package/src/themes/TableRow.css

@@ -11,11 +11,12 @@
 	background-color: var(--sapList_Background);
 	color: var(--sapList_TextColor);
 	border-top: 1px solid var(--sapList_BorderColor);
+	height: var(--ui5_table_row_height);
 }
 
 .ui5-table-row-root:focus {
 	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: -0.0625rem;
+	outline-offset: var(--ui5_table_focus_outline_offset);
 }
 
 .ui5-table-popin-row {
@@ -27,10 +28,14 @@
 }
 
 .ui5-table-popin-row td {
-	padding: .25rem;
+	padding-top: .5rem;
 	padding-left: 1rem;
 }
 
+.ui5-table-popin-row:last-child td {
+	padding-bottom: .5rem;
+}
+
 .ui5-table-row-popin-title {
 	color: var(--sapContent_LabelColor);
 	font-family: "72override", var(--sapFontFamily);
@@ -51,35 +56,38 @@
 	cursor: pointer;
 }
 
-:host([type="Active"]) .ui5-table-row-root:hover,
-:host([mode="SingleSelect"]) .ui5-table-row-root:hover,
-:host([mode="SingleSelect"]) .ui5-table-row-root:active {
-	background-color: var(--sapList_Hover_Background);
+:host ::slotted([ui5-table-cell]:not([popined])) {
+	padding: .25rem .5rem;
 }
 
-:host([type="Active"][active]) .ui5-table-row-root,
-:host([selected][type="Active"][active]) .ui5-table-row-root:hover {
-	background-color: var(--sapList_Active_Background);
+:host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
+	padding-left: 1rem;
 }
 
-:host([selected]) .ui5-table-row-root {
-	background: var(--sapList_SelectionBackgroundColor);
-	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
+/** Hover **/
+:host([type="Active"]) .ui5-table-row-root:hover,
+:host([mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
+	background-color: var(--sapList_Hover_Background);
 }
 
-:host([selected][type="Active"]) .ui5-table-row-root:hover,
-:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover {
-	background: var(--sapList_Hover_SelectionBackground);
+/** Down/Active **/
+:host([type="Active"]) .ui5-table-row-root:active,
+:host([selected][type="Active"]) .ui5-table-row-root:active {
+	background-color: var(--sapList_Active_Background);
 }
 
-:host([type="Active"][active]) .ui5-table-row-root ::slotted([ui5-table-cell]) {
+:host([type="Active"]) .ui5-table-row-root:active ::slotted([ui5-table-cell]) {
 	color: var(--sapList_Active_TextColor);
 }
 
-:host ::slotted([ui5-table-cell]) {
-	padding: .5rem .25rem;
+/** Selected **/
+:host([selected]) .ui5-table-row-root:not(:active) {
+	background-color: var(--sapList_SelectionBackgroundColor);
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 }
 
-:host ::slotted([ui5-table-cell]:first-child) {
-	padding-left: 1rem;
+/** Hover on Selected **/
+:host([selected][type="Active"]) .ui5-table-row-root:hover:not(:active),
+:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
+	background-color: var(--sapList_Hover_SelectionBackground);
 }

package/src/themes/TextArea.css

@@ -16,6 +16,7 @@
 	line-height: 1.4;
 	letter-spacing: normal;
 	word-spacing: normal;
+	margin: var(--_ui5_textarea_margin);
 }
 
 :host([disabled]) {
@@ -28,7 +29,8 @@
 }
 
 :host([disabled]) .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_textarea_disabled_background_color);
 }
 
 :host([focused]) .ui5-textarea-inner {
@@ -44,10 +46,8 @@
 
 :host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--_ui5_textarea_hover_box_shadow);
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_Hover_BackgroundStyle);
+	background-color: var(--sapField_Hover_Background);
 }
 
 :host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
@@ -56,7 +56,6 @@
 	outline-offset: -4px;
 }
 
-
 .ui5-textarea-root {
 	height: 100%;
 	min-height: var(--_ui5_input_height);
@@ -71,6 +70,7 @@
 .ui5-textarea-inner {
 	width: 100%;
 	height: 100%;
+	min-width: 6rem;
 	margin: 0;
 	padding: var(--_ui5_textarea_padding);
 	box-sizing: border-box;
@@ -84,16 +84,13 @@
 	resize: none;
 	border-color: inherit;
 	border-radius: inherit;
-	background-color: var(--sapField_Background);
 	border-width: var(--_ui5_textarea_inner_border_width);
-	border-style: solid;
+	border-style: var(--sapField_BorderStyle);
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapField_Background);
 }
 
 :host([growing]) .ui5-textarea-root {
@@ -122,10 +119,14 @@
 	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
-:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+:host([readonly][focused]) .ui5-textarea-root .ui5-textarea-inner {
+	background-image: none;
 }
 
+:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapField_ReadOnly_Background);
+}
 
 :host([show-exceeded-text]) .ui5-textarea-root {
 	flex-direction: column;
@@ -159,6 +160,34 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
+: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-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-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-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
 :host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
 	border-color: var(--sapField_Hover_BorderColor);
 }
@@ -183,10 +212,8 @@
 
 :host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
 :host([exceeding]) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_warning_background_image);
-	background-size: 100% var(--sapField_WarningBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
 }
 
 :host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
@@ -199,33 +226,29 @@
 :host([exceeding][focused]) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
 	font-weight: var(--_ui5_input_error_font_weight);
-	background-image: var(--_ui5_textarea_error_background_image);
-	background-size: 100% var(--sapField_InvalidBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
 }
 
 :host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Negative_Shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_hover_background_color);
 }
 
 :host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_focused_background_color);
 }
 
 :host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_information_background_image);
-	background-size: 100% var(--sapField_InformationBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
 }
 
 :host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
@@ -236,14 +259,12 @@
 :host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui_textarea_success_background_image);
-	background-size: 100% var(--sapField_SuccessBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapField_SuccessBackground);
 }
 
 :host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
@@ -254,7 +275,7 @@
 :host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) {
@@ -296,7 +317,7 @@
 
 :host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
 	background-color: var(--sapField_InformationBackground);
-	border-width: var(--_ui5_textarea_state_border_width);
+	border-width: var(--_ui5_textarea_information_border_width);
 }
 
 .ui5-textarea-exceeded-text {
@@ -307,3 +328,39 @@
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 }
+
+:host ::-webkit-scrollbar {
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+	border-top-right-radius: var(--sapField_BorderCornerRadius);
+	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
+}
+
+:host([readonly]) ::-webkit-scrollbar {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Error"]) ::-webkit-scrollbar {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Warning"]) ::-webkit-scrollbar {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Information"]) ::-webkit-scrollbar {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Success"]) ::-webkit-scrollbar {
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([focused]) ::-webkit-scrollbar {
+	background-image: none;
+}