@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/src/themes/TabContainer.css

@@ -6,6 +6,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	container-type: inline-size;
 }
 
 .ui5-tc-root {
@@ -19,7 +20,6 @@
 
 .ui5-tc__header {
 	position: relative;
-	padding: 0 1rem;
 	display: flex;
 	align-items: center;
 	background-color: var(--_ui5_tc_header_background);
@@ -67,6 +67,11 @@
 
 .ui5-tc__overflow.ui5-tc__overflow--end {
 	padding-inline-start: 0.188rem;
+	margin-inline-end: 1rem;
+}
+
+.ui5-tc__overflow.ui5-tc__overflow--start {
+	margin-inline-start: 1rem;
 }
 
 .ui5-tc__overflow[hidden] {
@@ -74,11 +79,18 @@
 }
 
 .ui5-tc__overflow > [ui5-button] {
-	margin-top: 0.25rem;
 	border-radius: 0.75rem;
 	height: 1.5rem;
 }
 
+.ui5-tc__overflow > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
+.ui5-tc__overflow > [ui5-button]:not([active]):hover {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
 .ui5-tc__overflow > [ui5-button][focused] {
 	outline-offset: 0.125rem;
 	--_ui5_button_focused_border: none;
@@ -93,7 +105,6 @@
 	position: relative;
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
-	padding: 1rem 2rem;
 	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
@@ -131,19 +142,30 @@
 }
 
 /*** Responsive paddings ***/
-
-:host([media-range="S"]) .ui5-tc__header {
+.ui5-tc__header {
 	padding: 0;
 }
 
-:host([media-range="S"]) .ui5-tc__content {
+.ui5-tc__content {
 	padding: 1rem;
 }
 
-:host([media-range="XL"]) .ui5-tc__header {
-	padding: 0 2rem;
+@container (min-width: 600px) {
+	.ui5-tc__header {
+		padding: 0 1rem;
+	}
+
+	.ui5-tc__content {
+		padding: 1rem 2rem;
+	}
 }
 
-:host([media-range="XL"]) .ui5-tc__content {
-	padding: 1rem 3rem;
+@container (min-width: 1440px) {
+	.ui5-tc__header {
+		padding: 0 2rem;
+	}
+	
+	.ui5-tc__content {
+		padding: 1rem 3rem;
+	}
 }

package/src/themes/TabInOverflow.css

@@ -39,7 +39,6 @@
 	display: flex;
 	align-items: center;
 	position: relative;
-	padding-inline: 1rem 0.5rem;
 	height: var(--_ui5_tc_item_text);
 	pointer-events: none;
 	font-size: 0.875rem;

package/src/themes/TabInStrip.css

@@ -4,7 +4,7 @@
 	height: var(--_ui5_tc_header_height);
 	color: var(--_ui5_tc_headerItem_color);
 	cursor: pointer;
-	padding: var(--_ui5_tc_headeritem_padding);
+	padding: 0 var(--_ui5_tc_headeritem_padding);
 	font-size: var(--sapFontSmallSize);
 	font-weight: var(--_ui5_tc_headeritem_text_font_weight);
 	text-shadow: var(--sapContent_TextShadow);
@@ -35,20 +35,31 @@
 
 .ui5-tab-strip-itemContent {
 	display: flex;
+	height: 100%;
 	min-width: 0;
 	justify-content: center;
 	flex-direction: column;
-	padding: var(--_ui5_tc_headerItemContent_padding);
 	border: var(--_ui5_tc_headerItemContent_default_focus_border);
 	border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
-	pointer-events: none;
 	transition: var(--_ui5_tc_headerItem_transition);
 }
+
+.ui5-tab-expand-button {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: relative;
+	z-index: 1;
+	background-color: var(--_ui5_tc_header_background);
+	padding-inline-end: 0.188rem;
+}
+
 .ui5-tab-expand-button > [ui5-button] {
 	height: 1.5rem;
 	min-width: 1.5rem;
-	margin-top: 0.25rem;
-	margin-inline-start: 0.625rem;
+	margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
+	--_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
+	--_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
 }
 
 .ui5-tab-expand-button > [ui5-button]:not([active]) {
@@ -63,8 +74,28 @@
 	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
 }
 
+.ui5-tab-expand-button-separator {
+	display: var(--_ui5_tc_headerItem_expand_button_separator_display);
+	position: relative;
+	width: 0.0625rem;
+	right: -0.0625rem;
+	height: 0.625rem;
+	background: var(--sapTextColor);
+	margin-inline-start: 0.0625rem;
+	z-index: 2;
+	margin-left: 0.625rem;
+}
+
+.ui5-tab-expand-button:hover {
+	z-index: 2;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
+	background: var(--_ui5_tc_headerItem_text_selected_color);
+}
+
 .ui5-tab-single-click-icon {
-	margin-inline-start: 0.875rem;
+	margin-inline-start:  var(--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start);
 }
 
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
@@ -87,12 +118,16 @@
 .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):not(.ui5-tab-strip-item--disabled) .ui5-tab-single-click-icon > [ui5-icon] {
+
+/* hover effects */
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--twoClickArea):not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative):hover,
+.ui5-tab-strip-item--twoClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative) .ui5-tab-strip-itemContent:hover,
+.ui5-tab-strip-item--singleClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled):hover .ui5-tab-single-click-icon > [ui5-icon] {
 	color: var(--_ui5_tc_headerItem_text_hover_color);
 }
 
-/* the outline when hover or selected */
+
+/* selection indicator */
 .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 {
@@ -107,39 +142,11 @@
 	height: var(--_ui5_tc_headerItemContent_border_height);
 }
 
-/* the outline when hover and not selected */
-.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
-	border-color: var(--_ui5_tc_headerItem_hover_border_bg);
-	background-color: var(--_ui5_tc_headerItem_hover_border_bg);
-}
-
-/* the outline when hover and selected */
-.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
-	background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
-}
-
-/* the outline offset when hover and 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,
+/* selection indicator offset in text only and mixed modes */
 .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 {
-	left: var(--_ui5_tc_headerItemContent_offset);
-	right: var(--_ui5_tc_headerItemContent_offset);
-}
-
-/* the outline offset when focused */
-.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
-	left: var(--_ui5_tc_headerItemContent_focus_offset);
-	right: var(--_ui5_tc_headerItemContent_focus_offset);
+	left: var(--_ui5_tc_headeritem_padding);
+	right: var(--_ui5_tc_headeritem_padding);
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
@@ -155,8 +162,8 @@
 	outline: none;
 }
 
-.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before {
+.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);
 	content: "";
 	pointer-events: none;
@@ -168,7 +175,7 @@
 	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::before {
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -180,7 +187,7 @@
 	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--withIcon:focus-visible .ui5-tab-strip-item-icon-outer::before {
+.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
 	content: "";
 	pointer-events: none;
 	position: absolute;
@@ -292,7 +299,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 {
-	color: var(--sapPositiveColor);
+	color: var(--_ui5_tc_headerItem_positive_color);
 	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
@@ -323,7 +330,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 {
-	color: var(--sapNegativeColor);
+	color: var(--_ui5_tc_headerItem_negative_color);
 	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
@@ -347,7 +354,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 {
-	color: var(--sapCriticalColor);
+	color: var(--_ui5_tc_headerItem_critical_color);
 	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
 
@@ -371,7 +378,7 @@
 
 .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);
+	color: var(--_ui5_tc_headerItem_neutral_color);
 	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 

package/src/themes/Table.css

@@ -67,6 +67,7 @@ tr {
 	bottom: 0;
 	top: 0;
 	outline: none;
+	z-index: 100;
 }
 
 :host([busy]) .ui5-table-busy-ind {

package/src/themes/TableCell.css

@@ -4,7 +4,7 @@
 	font-size: 0.875rem;
 	height: var(--ui5_table_row_height);
 	box-sizing: border-box;
-	color: var(--sapContent_LabelColor);
+	color: var(--sapList_TextColor);
 	word-break: break-word;
 	vertical-align: middle;
 }

package/src/themes/TableColumn.css

@@ -7,6 +7,7 @@ th {
 	width: inherit;
 	font-weight: var(--ui5_table_header_row_font_weight);
 	font-size: var(--sapFontMediumSize);
+	font-family: var(--ui5_table_header_row_font_family);
 	padding: 0.5rem;
 	box-sizing: border-box;
 	text-align: start;
@@ -20,4 +21,5 @@ th {
 th ::slotted([ui5-label]) {
 	font-weight: var(--ui5_table_header_row_font_weight);
 	font-size: var(--sapFontMediumSize);
+	font-family: var(--ui5_table_header_row_font_family);
 }

package/src/themes/TableRow.css

@@ -31,6 +31,10 @@
 	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;
 }

package/src/themes/TextArea.css

@@ -9,7 +9,7 @@
 	width: 100%;
 	min-width: 6rem;
 	color: var(--sapField_TextColor);
-	min-height: var(--__ui5_textarea_min_height);
+	min-height: var(--_ui5_textarea_min_height);
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
@@ -18,7 +18,9 @@
 	margin: var(--_ui5_textarea_margin);
 }
 
-:host(:not([value-state]):not([readonly]):not([disabled]):not([focused])) .ui5-textarea-wrapper,
+: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);
@@ -33,13 +35,13 @@
 
 :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(--_ui5_textarea_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_Shadow);
 }
 
 .ui5-textarea-root {
 	width: 100%;
 	height: inherit;
-	min-height: var(--__ui5_textarea_min_height);
+	min-height: var(--_ui5_textarea_min_height);
 	display: inline-flex;
 	vertical-align: top;
 	outline: none;
@@ -62,6 +64,7 @@
 	border-radius: var(--sapField_BorderCornerRadius);
 	border-width: var(--sapField_BorderWidth);
 	border-style: var(--sapField_BorderStyle);
+	padding: var(--_ui5_textarea_wrapper_padding);
 	outline: none;
 }
 
@@ -71,6 +74,11 @@
 	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;
 }
@@ -152,12 +160,13 @@
 	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);
+	min-height: var(--_ui5_textarea_min_height);
 }
 
 :host([rows]) .ui5-textarea-inner, :host([rows]) .ui5-textarea-mirror {
@@ -226,15 +235,15 @@
 	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_information);
 }
 
-:host([readonly]) {
+:host([readonly]:not([disabled])) {
 	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
-:host([readonly]) .ui5-textarea-inner {
+: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]) .ui5-textarea-root .ui5-textarea-wrapper {
+: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);
@@ -296,6 +305,7 @@
 	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 {
@@ -309,7 +319,7 @@
 
 :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);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
 :host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
@@ -323,6 +333,7 @@
 :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,
@@ -335,6 +346,7 @@
 	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 {
@@ -348,7 +360,7 @@
 
 :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);
+	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
 :host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
@@ -356,6 +368,8 @@
 	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 {
@@ -370,7 +384,7 @@
 
 :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);
+	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
 :host([value-state][value-state="Success"]) .ui5-textarea-inner {
@@ -385,6 +399,8 @@
 	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 {
@@ -399,7 +415,7 @@
 
 :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);
+	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
 .ui5-textarea-exceeded-text {
@@ -414,30 +430,24 @@
 	display: none;
 }
 
-:host(:not([disabled])) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
-	background: var(--sapField_BackgroundStyle);
-	background-color: var(--sapScrollBar_TrackColor);
+: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: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
 :host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
-	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
 :host([value-state="Information"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
-	background: var(--sapField_InformationBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
 :host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
-	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 

package/src/themes/TimePicker.css

@@ -14,6 +14,7 @@
 	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"]) {
@@ -37,6 +38,7 @@
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
+	margin: inherit;
 }
 
 .ui5-time-picker-input-icon-button {

package/src/themes/TimePickerClock.css

@@ -0,0 +1,134 @@
+.ui5-tp-clock {
+	position: relative;
+	width: auto;
+	padding: 0.5625rem;
+	outline: none;
+	display: none;
+}
+
+.ui5-tp-clock-active {
+	display: block;
+}
+
+.ui5-tp-clock-dial {
+	position: relative;
+	width: auto;
+	display: block;
+	border-radius: 100%;
+	background-color: var(--sapLegend_WorkingBackground);
+	text-align: center;
+	z-index: 1;
+}
+
+.ui5-tp-clock-dial::before {
+	content: attr(data-label);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--sapContent_LabelColor);
+	top: 2.75rem;
+	left: 2.75rem;
+	bottom: 2.75rem;
+	right: 2.75rem;
+	border-radius: 100%;
+	z-index: 2;
+}
+
+.ui5-tp-clock-dial::after {
+	content: "";
+	display: block;
+	padding-bottom: 100%;
+}
+
+.ui5-tp-clock-inner .ui5-tp-clock-dial::before {
+	background-color: var(--sapLegend_WorkingBackground);
+}
+
+.ui5-tp-clock-cover {
+	position: absolute;
+	top: 0.5625rem;
+	left: 0.5625rem;
+	bottom: 0.5625rem;
+	right: 0.5625rem;
+	border-radius: 100%;
+	z-index: 10;
+	touch-action: none;
+}
+
+.ui5-tp-clock-item {
+	position: absolute;
+	top: 0px;
+	left: 50%;
+	display: inline-block;
+	width: 2.75rem;
+	height: 100%;
+	z-index: 3;
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Chrome, Edge, Opera and Firefox */
+}
+
+.ui5-tp-clock-item.ui5-tp-clock-marker {
+	z-index: 4;
+}
+
+.ui5-tp-clock-dot {
+	display: block;
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.3125rem;
+	margin: 0 auto 0.25rem auto;
+	border-radius: 100%;
+	background-color: var(--sapField_BorderColor);
+}
+
+.ui5-tp-clock-mid-dot {
+	display: block;
+	box-sizing: border-box;
+	width: 0.125rem;
+	height: 0.1875rem;
+	margin: 0 auto 0.375rem auto;
+	border-radius: 100%;
+	background-color: var(--sapField_BorderColor);
+}
+
+.ui5-tp-clock-marker {
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.5625rem;
+	margin: 0 auto;
+	border-radius: 100%;
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+
+.ui5-tp-clock-number {
+	box-sizing: border-box;
+	display: inline-block;
+	width: 2.75rem;
+	height: 2.75rem;
+	border-radius: 100%;
+	line-height: 2.75rem;
+	text-align: center;
+	vertical-align: top;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--sapTextColor);
+}
+
+.ui5-tp-clock-number.ui5-tp-clock-number-hover:not(.ui5-tp-clock-selected) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-tp-clock-selected {
+	color: var(--sapButton_Selected_TextColor);
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+