@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-33e059bcd

package/src/themes/TableRow.css

@@ -0,0 +1,126 @@
+:host {
+	display: contents;
+}
+
+:host([_busy]) .ui5-table-row-root {
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.ui5-table-row-root {
+	background-color: var(--sapList_Background);
+	color: var(--sapList_TextColor);
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: var(--ui5_table_focus_outline_offset);
+}
+
+.ui5-table-popin-row {
+	background-color: var(--sapList_Background);
+}
+
+.ui5-table-popin-row.all-columns-popped-in.popin-header {
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-popin-row td:not(.ui5-table-row-navigated) {
+	padding-top: .5rem;
+	padding-inline-start: 1rem;
+}
+
+:host([mode="MultiSelect"]) .ui5-table-popin-row td:not(.ui5-table-row-navigated) {
+	padding-inline-start: var(--ui5_table_multiselect_popin_row_padding);
+}
+
+.ui5-table-popin-row:last-child td {
+	padding-bottom: .5rem;
+}
+
+.ui5-table-row-popin-title {
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	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;
+	text-align: center;
+	vertical-align: middle;
+}
+
+:host([mode="SingleSelect"]) .ui5-table-row-root {
+	cursor: pointer;
+}
+:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell {
+	cursor: pointer;
+}
+
+:host ::slotted([ui5-table-cell]:not([popined])) {
+	padding: .25rem .5rem;
+}
+
+:host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
+	padding-inline-start: 1rem;
+}
+
+/** 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);
+}
+
+/** 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"]) .ui5-table-row-root:active ::slotted([ui5-table-cell]) {
+	color: var(--sapList_Active_TextColor);
+}
+
+/** Selected **/
+:host([selected]) .ui5-table-row-root:not(:active) {
+	background-color: var(--sapList_SelectionBackgroundColor);
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
+}
+
+/** 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);
+}
+
+/** Navigated **/
+:host([navigated]) .ui5-table-row-root:focus .ui5-table-div-navigated {
+    width: 0.09375rem;
+	top: 2px;
+	inset-inline-end: 2px;
+	bottom: 1px;
+}
+
+:host([navigated]) .ui5-table-row-navigated {
+    vertical-align: middle;
+    padding: 0;
+    position: relative;
+}
+
+:host([navigated]) .ui5-table-div-navigated {
+	width: 0.1875rem;
+    position: absolute;
+	inset: 0;
+    background-color: var(--sapList_SelectionBorderColor);
+}

package/src/themes/TapHighlightColor.css

@@ -0,0 +1,3 @@
+:host {
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}

package/src/themes/TextArea.css

@@ -0,0 +1,456 @@
+@import "./FormComponents.css";
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	width: 100%;
+	min-width: 6rem;
+	color: var(--sapField_TextColor);
+	min-height: var(--_ui5_textarea_min_height);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	font-style: normal;
+	box-sizing: border-box;
+	line-height: var(--_ui5_textarea_line_height);
+	margin: var(--_ui5_textarea_margin);
+}
+
+:host([value-state][disabled]) .ui5-textarea-wrapper,
+:host(:not([value-state]):not([readonly]):not([focused])) .ui5-textarea-wrapper,
+:host([readonly][disabled]) .ui5-textarea-wrapper,
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused])) .ui5-textarea-wrapper {
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapField_Background);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled]):hover) .ui5-textarea-wrapper,
+:host([value-state="None"]: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(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper,
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+.ui5-textarea-root {
+	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-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);
+	padding: var(--_ui5_textarea_wrapper_padding);
+	outline: none;
+}
+
+:host([disabled]) .ui5-textarea-wrapper {
+	opacity: var(--_ui5_textarea_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+:host(:not([readonly])) .ui5-textarea-wrapper,
+:host([readonly][disabled]) .ui5-textarea-wrapper {
+	box-shadow: var(--sapField_Shadow);
+}
+
+: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][readonly]) .ui5-textarea-wrapper::after {
+	top: var(--_ui5_textarea_readonly_focus_offset);
+	bottom: var(--_ui5_textarea_readonly_focus_offset);
+	left: var(--_ui5_textarea_readonly_focus_offset);
+	right: var(--_ui5_textarea_readonly_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%;
+	margin: 0;
+	padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom);
+	color: inherit;
+	font-size: inherit;
+	font-family: inherit;
+	font-style: inherit;
+	-webkit-appearance: none;
+	-moz-appearance: textfield;
+	overflow: auto;
+	resize: none;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	background: transparent;
+	outline: none;
+}
+
+:host([growing]) .ui5-textarea-inner {
+	box-sizing: border-box;
+	height: 100%;
+  	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.ui5-textarea-mirror {
+	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-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;
+	overflow-y: auto;
+}
+
+: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]:not([disabled])) {
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]:not([disabled])) .ui5-textarea-inner {
+	padding: var(--_ui5_textarea_padding_top_readonly) var(--_ui5_textarea_padding_right_and_left_readonly) var(--_ui5_textarea_padding_bottom_readonly);
+}
+
+:host([readonly]:not([disabled])) .ui5-textarea-root .ui5-textarea-wrapper {
+	background-color: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
+	border-style: var(--_ui5_textarea_readonly_border_style);
+}
+
+:host([show-exceeded-text]) .ui5-textarea-root {
+	flex-direction: column;
+}
+
+.ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	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;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	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_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_warning_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+: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(--sapField_PlaceholderTextColor);
+}
+
+:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder {
+	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="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--sapField_InvalidColor);
+	box-shadow: var(--sapField_InvalidShadow);
+}
+
+: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"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_error_focus_outline_color);
+}
+
+: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(--sapField_Hover_InvalidShadow);
+}
+
+: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: var(--_ui5_textarea_padding_top_error_warning) var(--_ui5_textarea_padding_right_and_left_error_warning) var(--_ui5_textarea_padding_bottom_error_warning);
+}
+
+: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);
+	padding: var(--_ui5_textarea_warning_error_wrapper_padding);
+}
+
+: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="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--sapField_WarningColor);
+	box-shadow: var(--sapField_WarningShadow);
+}
+
+: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="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--sapField_Hover_WarningShadow);
+}
+
+: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);
+	box-shadow: var(--sapField_SuccessShadow);
+	padding: var(--_ui5_textarea_success_wrapper_padding);
+}
+
+: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="Success"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+	border-color: var(--_ui5_textarea_focused_value_state_success_focus_outline_color);
+}
+
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--sapField_Hover_SuccessShadow);
+}
+
+:host([value-state][value-state="Success"]) .ui5-textarea-inner {
+	border-radius: var(--sapField_BorderCornerRadius);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	padding: var(--_ui5_textarea_padding_top_information) var(--_ui5_textarea_padding_right_and_left_information) var(--_ui5_textarea_padding_bottom_information);
+}
+
+: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);
+	box-shadow: var(--sapField_InformationShadow);
+	padding: var(--_ui5_textarea_information_wrapper_padding);
+}
+
+: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]):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(--sapField_Hover_InformationShadow);
+}
+
+.ui5-textarea-exceeded-text {
+	align-self: flex-end;
+	padding: 0.125rem 0.125rem 0.5rem;
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	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 {
+	border-top-right-radius: var(--sapField_BorderCornerRadius);
+	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
+}
+
+:host([value-state="Error"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Information"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([focused]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+	background-image: none;
+}

package/src/themes/TimePicker.css

@@ -0,0 +1,66 @@
+@import "./FormComponents.css";
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
+}
+
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border-radius: var(--_ui5-time_picker_border_radius);
+	margin: var(--_ui5_input_margin_top_bottom) 0;
+}
+
+:host([value-state="Error"]) {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host(:not([disabled]):hover) {
+	background: var(--sapField_Hover_Background);
+}
+
+.ui5-time-picker-root {
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+:host .ui5-time-picker-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	margin: inherit;
+}
+
+.ui5-time-picker-input-icon-button {
+	border-left: 0.0625rem solid transparent;
+}
+
+.ui5-time-picker-input-icon-button {
+	border-left: 0.0625rem solid transparent;
+}
+
+.ui5-time-picker-input-icon-button:hover {
+	cursor: pointer;
+	border-left: var(--_ui5_time_picker_border);
+	background: var(--sapButton_Hover_Background);
+}
+
+.ui5-time-picker-input-icon-button:active {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-time-picker-input-icon-button[pressed] {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+}