@ui5/webcomponents 1.9.1 → 1.9.3

package/src/themes/TextArea.css

@@ -7,72 +7,109 @@
 :host {
 	width: 100%;
 	color: var(--sapField_TextColor);
+	min-height: var(--__ui5_textarea_min_height);
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
-	border-color: var(--sapField_BorderColor);
-	border-radius: var(--sapField_BorderCornerRadius);
 	box-sizing: border-box;
-	line-height: 1.4;
+	line-height: var(--_ui5_textarea_line_height);
 	letter-spacing: normal;
 	word-spacing: normal;
 	margin: var(--_ui5_textarea_margin);
 }
 
-:host([disabled]) {
-	opacity: var(--_ui5_input_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-	border-color: var(--sapField_ReadOnly_BorderColor);
-	-webkit-text-fill-color: var(--sapContent_DisabledTextColor);
-	color: var(--sapContent_DisabledTextColor);
-}
-
-:host([disabled]) .ui5-textarea-inner {
+:host(:not([value-state]):not([readonly]):not([focused])) .ui5-textarea-wrapper, :host([value-state][disabled]) .ui5-textarea-wrapper {
 	background: var(--sapField_BackgroundStyle);
-	background-color: var(--_ui5_textarea_disabled_background_color);
-}
-
-:host([focused]) .ui5-textarea-inner {
-	outline: var(--_ui5_textarea_focus_outline);
-	outline-offset: var(--_ui5_textarea_focus_outline_offset);
-}
-
-:host([focused]) .ui5-textarea-inner {
-	background-color: var(--sapField_Focus_Background);
-	background-image: none;
-	box-shadow: var(--_ui5_textarea_focus_box_shadow);
+	background-color: var(--sapField_Background);
 }
 
-:host(:not([value-state]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
-	box-shadow: var(--_ui5_textarea_hover_box_shadow);
+:host(:not([value-state]):not([readonly]):not([disabled]):hover) .ui5-textarea-wrapper {
 	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_textarea_hover_border);
 }
 
-:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner {
-	outline: var(--_ui5_textarea_value_state_focus_outline);
-	outline-offset: var(--_ui5_textarea_value_state_focus_outline_offset);
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	box-shadow: var(--_ui5_textarea_hover_box_shadow);
 }
 
 .ui5-textarea-root {
-	height: 100%;
-	min-height: var(--_ui5_input_height);
+	width: 100%;
+	height: inherit;
+	min-height: var(--__ui5_textarea_min_height);
 	display: inline-flex;
 	vertical-align: top;
 	outline: none;
 	box-sizing: border-box;
 	border-radius: inherit;
 	border-color: inherit;
+	position: relative;
+	outline: none;
 }
 
-.ui5-textarea-inner {
+.ui5-textarea-wrapper {
+	position: relative;
+	box-sizing: border-box;
 	width: 100%;
+	border-bottom: none;
+	display: flex;
 	height: 100%;
+	background-color: var(--sapField_Background);
+	border-color: var(--sapField_BorderColor);
+	border-radius: var(--sapField_BorderCornerRadius);
+	border-width: var(--sapField_BorderWidth);
+	border-style: var(--sapField_BorderStyle);
+	outline: none;
+}
+
+:host([disabled]) .ui5-textarea-wrapper {
+	opacity: var(--_ui5_textarea_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+:host([value-state]) .ui5-textarea-wrapper {
+	border-color: inherit;
+}
+
+:host([focused]) .ui5-textarea-wrapper {
+	background-color: var(--sapField_Focus_Background);
+	background-image: none;
+	box-shadow: none;
+}
+
+:host([focused]) .ui5-textarea-wrapper::after {
+	content: var(--_ui5_textarea_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_textarea_focus_outline_color);
+	border-radius: var(--_ui5_textarea_focus_border_radius);
+	top: var(--_ui5_textarea_focus_offset);
+	bottom: var(--_ui5_textarea_focus_offset);
+	left: var(--_ui5_textarea_focus_offset);
+	right: var(--_ui5_textarea_focus_offset);
+}
+
+:host([focused][value-state="Error"]:not([disabled])) .ui5-textarea-wrapper::after,
+:host([focused][value-state="Warning"]:not([disabled])) .ui5-textarea-wrapper::after,
+:host([focused][value-state="Information"]:not([disabled])) .ui5-textarea-wrapper::after {
+	top: var(--_ui5_textarea_value_state_focus_offset);
+	bottom: var(--_ui5_textarea_value_state_focus_offset);
+	left: var(--_ui5_textarea_value_state_focus_offset);
+	right: var(--_ui5_textarea_value_state_focus_offset);
+}
+
+.ui5-textarea-inner {
+	border: none;
+	box-sizing: border-box;
+	width: 100%;
 	min-width: 6rem;
 	margin: 0;
-	padding: var(--_ui5_textarea_padding);
-	box-sizing: border-box;
+	padding-top: var(--_ui5_textarea_padding_top);
+	padding-bottom: var(--_ui5_textarea_padding_bottom);
+	padding-left: var(--_ui5_textarea_padding_left);
+	padding-right: var(--_ui5_textarea_padding_right);
 	color: inherit;
 	font-size: inherit;
 	font-family: inherit;
@@ -81,50 +118,120 @@
 	-moz-appearance: textfield;
 	overflow: auto;
 	resize: none;
-	border-color: inherit;
-	border-radius: inherit;
-	border-width: var(--_ui5_textarea_inner_border_width);
-	border-style: var(--sapField_BorderStyle);
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
-	background: var(--sapField_BackgroundStyle);
-	background-color: var(--sapField_Background);
-}
-
-:host([growing]) .ui5-textarea-root {
-	position: relative;
+	background: transparent;
+	outline: none;
 }
 
 :host([growing]) .ui5-textarea-inner {
-	position: absolute;
+	box-sizing: border-box;
+	height: 100%;
+  	position: absolute;
 	top: 0;
 	left: 0;
 }
 
 .ui5-textarea-mirror {
-	line-height: 1.4;
+	box-sizing: border-box;
+	line-height: var(--_ui5_textarea_line_height);
 	visibility: hidden;
 	width: 100%;
+	max-height: 94vh;
+	min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 	word-break: break-all;
-	padding: var(--_ui5_textarea_padding);
+	padding-top: var(--_ui5_textarea_padding_top);
+	padding-bottom: var(--_ui5_textarea_padding_bottom);
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	white-space: pre-wrap;
-	box-sizing: border-box;
+}
+
+:host([style*="height"]) .ui5-textarea-root,
+:host([growing][style*="height"]) .ui5-textarea-wrapper {
+	height: inherit;
+	min-height: var(--__ui5_textarea_min_height);
+}
+
+:host([rows]) .ui5-textarea-inner, :host([rows]) .ui5-textarea-mirror {
+	min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+/* If the 'rows' property is not set it defaults to 2 in the native TextArea element */
+:host:not([rows]) .ui5-textarea-inner {
+	min-height: calc(2 * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+:host([growing]):not([growing-max-lines]) .ui5-textarea-inner {
+	max-height: 100%;
+}
+
+:host([growing-max-lines]) .ui5-textarea-mirror {
+	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+:host([rows="1"]) .ui5-textarea-inner {
+	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+:host([growing-max-lines="1"]) .ui5-textarea-inner, :host([growing-max-lines="1"]) .ui5-textarea-mirror {
+	max-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+:host([rows="1"][growing-max-lines]) .ui5-textarea-inner, :host([rows="1"][growing-max-lines]) .ui5-textarea-mirror {
+	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+}
+
+:host([rows="1"][value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([rows="1"][value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
+	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
+}
+
+:host([value-state="Error"]) .ui5-textarea-mirror,
+:host([value-state="Warning"]) .ui5-textarea-mirror {
+	padding-top: var(--_ui5_textarea_padding_top_error_warning);
+	padding-bottom: var(--_ui5_textarea_padding_bottom_error_warning);
+	min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
+}
+
+:host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-mirror
+:host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-mirror {
+	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
+	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
+}
+
+:host([value-state="Information"]) .ui5-textarea-mirror {
+	padding-top: var(--_ui5_textarea_padding_top_information);
+	padding-bottom: var(--_ui5_textarea_padding_bottom_information);
+	min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information));
+}
+
+:host([rows="1"][value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information));
+	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information));
+}
+
+:host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-mirror {
+	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top__ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom__ui5_textarea_padding_top_information);
+	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_information);
 }
 
 :host([readonly]) {
 	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
-:host([readonly][focused]) .ui5-textarea-root .ui5-textarea-inner {
+:host([readonly][focused]) .ui5-textarea-root .ui5-textarea-wrapper {
 	background-image: none;
 }
 
-:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
+:host([readonly]) .ui5-textarea-root .ui5-textarea-wrapper {
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
 :host([show-exceeded-text]) .ui5-textarea-root {
@@ -166,151 +273,136 @@
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
-:host([value-state="Error"]) .ui5-textarea-inner:-moz-placeholder {
-	/* Firefox 18- */
+:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
 	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);
+	color: var(--sapField_PlaceholderTextColor);
 }
 
 :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);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
 }
 
-: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([readonly]):hover) .ui5-textarea-inner {
-	background-color: var(--sapField_Hover_Background);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--sapField_InvalidColor);
 }
 
-:host([value-state]:not([value-state="None"])) .ui5-textarea-inner {
-	border-width: var(--_ui5_textarea_state_border_width);
+:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	background-color: var(--_ui5_textarea_focused_value_state_error_background);
+	border-color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Error"]) .ui5-textarea-inner,
-:host([value-state="Warning"]) .ui5-textarea-inner {
-	font-style: var(--_ui5_input_error_warning_font_style);
+:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_error_focus_outline_color);
 }
 
-:host([value-state="Warning"]) .ui5-textarea-inner {
-	font-weight: var(--_ui5_input_warning_font_weight);
+:host([value-state="Error"]:not([readonly]):not([focused]):not([disabled]):hover) .ui5-textarea-wrapper {
+	background-color: var(--_ui5_textarea_error_hover_background_color);
+	box-shadow: var(--_ui5_textarea_value_state_error_hover_box_shadow);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
-	background: var(--sapField_WarningBackgroundStyle);
-	background-color: var(--sapField_WarningBackground);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	font-style: var(--_ui5_textarea_error_warning_font_style);
+	font-weight: var(--_ui5_textarea_error_warning_font_weight);
+	padding-top: var(--_ui5_textarea_padding_top_error_warning);
 }
 
-: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="Error"]:not([disabled]):not([readonly])) .ui5-textarea-inner,
+:host([value-state="Warning"]:not([disabled]):not([readonly])) .ui5-textarea-inner {
+	padding-bottom: var(--_ui5_textarea_padding_bottom_error_warning);
+}	
 
-: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);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper,
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	border-style: var(--_ui5_textarea_error_warning_border_style);
+	border-width: var(--_ui5_textarea_state_border_width);
 }
 
-:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
-	font-weight: var(--_ui5_input_error_font_weight);
-	background: var(--sapField_InvalidBackgroundStyle);
-	background-color: var(--sapField_InvalidBackground);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	border-style: none;
 }
 
-: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="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--sapField_WarningColor);
 }
 
-: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);
+:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper {
+	background-color: var(--_ui5_textarea_focused_value_state_warning_background);
+	border-color: var(--sapField_WarningColor);
 }
 
-:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
-	background: var(--sapField_InformationBackgroundStyle);
-	background-color: var(--sapField_InformationBackground);
+:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_warning_focus_outline_color);
 }
 
-:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
-	box-shadow: var(--sapContent_Informative_Shadow);
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
 	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_textarea_value_state_warning_hover_box_shadow);
 }
 
-: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);
-}
-
-:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
+	border-color: var(--sapField_SuccessColor);
+	border-width: var(--sapField_BorderWidth);
 }
 
-: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([readonly])) .ui5-textarea-inner {
-	background-image: none;
-	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
-	background-color: var(--sapField_Focus_Background);
+:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper {
+	background-color: var(--_ui5_textarea_focused_value_state_success_background);
+	border-color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Error"]:not([readonly])) {
-	border-color: var(--sapField_InvalidColor);
+:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_success_focus_outline_color);
 }
 
-:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
-	background-color: var(--sapField_InvalidBackground);
-}
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
-	border-style: var(--_ui5_input_error_warning_border_style);
-}
-
-:host([value-state="Warning"]:not([readonly])) {
-	border-color: var(--sapField_WarningColor);
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_textarea_value_state_success_hover_box_shadow);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
-	background-color: var(--sapField_WarningBackground);
+:host([value-state][value-state="Success"]) .ui5-textarea-inner {
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Success"]:not([readonly])) {
-	border-color: var(--sapField_SuccessColor);
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	padding-top: var(--_ui5_textarea_padding_top_information);
+	padding-bottom: var(--_ui5_textarea_padding_bottom_information);
 }
 
-: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([disabled])) .ui5-textarea-wrapper {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--sapField_InformationColor);
 }
 
-:host([value-state="Information"]:not([readonly])) {
+:host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-wrapper {
+	background-color: var(--_ui5_textarea_focused_value_state_information_background);
 	border-color: var(--sapField_InformationColor);
 }
 
-:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
-	background-color: var(--sapField_InformationBackground);
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	border-width: var(--_ui5_textarea_information_border_width);
+	border-style: var(--_ui5_textarea_error_warning_border_style);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_textarea_value_state_information_hover_box_shadow);
 }
 
 .ui5-textarea-exceeded-text {
-	overflow: hidden;
 	align-self: flex-end;
 	padding: 0.125rem 0.125rem 0.5rem;
 	color: var(--sapContent_LabelColor);
@@ -318,6 +410,10 @@
 	font-size: var(--sapFontSmallSize);
 }
 
+:host([readonly]) .ui5-textarea-exceeded-text, :host([disabled]) .ui5-textarea-exceeded-text {
+	display: none;
+}
+
 :host :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);

package/src/themes/{TreeListItem.css → TreeItem.css}

@@ -40,11 +40,11 @@
 	padding-inline-start: 0;
 }
 
-:host(:not([level="1"])) {
+:host(:not([level="1"])) .ui5-li-root {
 	border-color: var(--sapList_AlternatingBackground);
 }
 
-:host([_toggle-button-end][selected]:not([level="1"])) {
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root {
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
@@ -99,3 +99,50 @@
 	justify-content: space-between;
 	width: 100%;
 }
+
+/* move host styles to .ui5-li-root as the focused element of [ui5-tree-item]
+is the .ui5-li-root and not the host. The host height expands to fill subtree */
+
+:host {
+    height: unset;
+}
+
+.ui5-li-root {
+    height: var(--_ui5_list_item_base_height);
+}
+
+/* selected */
+:host([selected]) {
+    background: unset;
+}
+:host([selected]) .ui5-li-root {
+    background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([has-border]) {
+    border-bottom: unset;
+}
+:host([has-border]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-border-bottom);
+}
+
+/* focused & selected */
+:host(:not([focused])[selected][has-border]) {
+    border-bottom: unset;
+}
+:host(:not([focused])[selected][has-border]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([focused][selected]) {
+    border-bottom: unset;
+}
+:host([focused][selected]) .ui5-li-root {
+    border-bottom: var(--ui5-listitem-focused-selected-border-bottom);
+}
+
+.ui5-tree-li-subtree {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

package/src/themes/ValueStateMessage.css

@@ -1,4 +1,5 @@
 .ui5-valuestatemessage-popover {
+	border-radius: var(--_ui5_value_state_message_popover_border_radius);
 	box-shadow: var(--_ui5_value_state_message_popover_box_shadow);
 }
 

package/src/themes/base/TabContainer-parameters.css

@@ -5,6 +5,10 @@
 	--_ui5_tc_header_height_text_with_additional_text: var(--_ui5_tc_item_text_only_with_additional_text_height);
 	--_ui5_tc_header_box_shadow: var(--sapContent_HeaderShadow);
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapObjectHeader_Background);
+	--_ui5_tc_header_background: var(--sapObjectHeader_Background);
+	--_ui5_tc_header_background_translucent: var(--sapObjectHeader_Background);
+	--_ui5_tc_content_background: var(--sapBackgroundColor);
+	--_ui5_tc_content_background_translucent: var(--sapGroup_ContentBackground);
 
 	/* Header Item */
 	--_ui5_tc_headeritem_padding: 0 1rem;

package/src/themes/base/TextArea-parameters.css

@@ -1,26 +1,44 @@
 :root {
-	--_ui5_textarea_focus_after_width: 1px;
-	--_ui5_textarea_warning_border_style: solid;
 	--_ui5_textarea_state_border_width: 0.125rem;
 	--_ui5_textarea_information_border_width: 0.125rem;
-	--_ui5_textarea_focus_box_shadow: none;
-	--_ui5_textarea_value_state_warning_focus_box_shadow: none;
-	--_ui5_textarea_value_state_error_focus_box_shadow: none;
-	--_ui5_textarea_value_state_success_focus_box_shadow: none;
-	--_ui5_textarea_hover_box_shadow: none;
-	--_ui5_textarea_inner_border_width: var(--sapField_BorderWidth);
-	--_ui5_textarea_success_border_width: 1px;
-	--_ui5_textarea_focus_outline: var(--_ui5_textarea_focus_after_width) dotted var(--sapContent_FocusColor);
-	--_ui5_textarea_focus_outline_offset: -3px;
-	--_ui5_textarea_value_state_focus_outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	--_ui5_textarea_value_state_focus_outline_offset: -4px;
-	--_ui5_textarea_after_element_display: none;
 	--_ui5_textarea_placeholder_font_style: italic;
-	--_ui5_input_warning_font_weight: normal;
 	--_ui5_textarea_value_state_error_warning_placeholder_font_weight: normal;
 	--_ui5_textarea_error_placeholder_font_style: italic;
 	--_ui5_textarea_error_placeholder_color: var(--sapField_PlaceholderTextColor);
-	--_ui5_textarea_disabled_background_color: var(--sapField_ReadOnly_Background);
 	--_ui5_textarea_error_hover_background_color: var(--sapField_Hover_Background);
-	--_ui5_textarea_error_focused_background_color: var(--sapField_Focus_Background);
+	--_ui5_textarea_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor);
+	--_ui5_textarea_hover_box_shadow: none;
+	--_ui5_textarea_error_warning_border_style: solid;
+	--_ui5_textarea_disabled_opacity: 0.4;
+	--_ui5_textarea_line_height: 1.4;
+	--_ui5_textarea_focus_pseudo_element_content: '';
+	--_ui5_textarea_focused_value_state_error_background: var(--sapField_InvalidBackground);
+	--_ui5_textarea_focused_value_state_warning_background: var(--sapField_WarningBackground);
+	--_ui5_textarea_focused_value_state_success_background: var(--sapField_SuccessBackground);
+	--_ui5_textarea_focused_value_state_information_background: var(--sapField_InformationBackground);
+	--_ui5_textarea_focused_value_state_error_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_textarea_focused_value_state_warning_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_textarea_focused_value_state_success_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_textarea_focus_offset: 1px;
+	--_ui5_textarea_value_state_focus_offset: 1px;
+	--_ui5_textarea_focus_outline_color: var(--sapContent_FocusColor);
+	--__ui5_textarea_min_height: 2.25rem;
+	--_ui5_textarea_padding_top_error_warning: 0.375rem;
+	--_ui5_textarea_padding_bottom_error_warning: 0.375rem;
+	--_ui5_textarea_padding_top_information: 0.375rem;
+	--_ui5_textarea_padding_bottom_information: 0.375rem;
+	--_ui5_textarea_margin: 0.25rem 0;
+	--_ui5_textarea_exceeded_text_height: 1rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_textarea_padding_top_error_warning: 0.0625rem;
+	--_ui5_textarea_padding_bottom_error_warning: 0.0625rem;
+	--_ui5_textarea_padding_top_information: 0.0625rem;
+	--_ui5_textarea_padding_bottom_information: 0.0625rem;
+	--_ui5_textarea_exceeded_text_height: 0.375rem;
+	--_ui5_textarea_margin: 0.1875rem 0;
+	--__ui5_textarea_min_height: 1.625rem;
 }