@ui5/webcomponents 1.0.1 → 1.1.2

package/src/themes/Input.css

@@ -135,6 +135,7 @@
 	visibility: hidden;
 }
 [inner-input]::-webkit-input-placeholder {
+	font-weight: normal;
 	font-style: var(--_ui5-input-placeholder-style);
 	color: var(--_ui5-input-placeholder-color);
 	padding-right: 0.125rem;
@@ -147,6 +148,7 @@
 	visibility: hidden;
 }
 [inner-input]::-moz-placeholder {
+	font-weight: normal;
 	font-style: var(--_ui5-input-placeholder-style);
 	color: var(--sapField_PlaceholderTextColor);
 	padding-right: 0.125rem;
@@ -159,6 +161,7 @@
 	visibility: hidden;
 }
 [inner-input]:-ms-input-placeholder {
+	font-weight: normal;
 	font-style: italic;
 	color: var(--sapField_PlaceholderTextColor);
 	padding-right: 0.125rem;
@@ -250,12 +253,23 @@
 :host([value-state="Error"]) [inner-input],
 :host([value-state="Warning"]) [inner-input] {
 	font-style: var(--_ui5_input_error_warning_font_style);
+	text-indent: var(--_ui5_input_error_warning_text_indent);
 }
 
 :host([value-state="Error"]) [inner-input] {
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
+:host([value-state="Warning"]) [inner-input] {
+	font-weight: var(--_ui5_input_warning_font_weight);
+}
+
+:host([value-state="Information"]) [inner-input] {
+	font-style: var(--_ui5_input_information_font_style);
+	font-weight: var(--_ui5_input_information_font_weight);
+	text-indent: var(--_ui5_input_information_text_indent);
+}
+
 :host([value-state="Error"]:not([readonly])) {
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--_ui5-input-value-state-error-border-color);

package/src/themes/List.css

@@ -5,6 +5,7 @@
 	display: block;
 	max-width: 100%;
 	width: 100%;
+	-webkit-tap-highlight-color: transparent;
 }
 
 :host([indent]) .ui5-list-root {

package/src/themes/Panel.css

@@ -58,6 +58,10 @@
 	transform: rotate(90deg);
 }
 
+:host(:not([collapsed])) [dir="rtl"] .ui5-panel-header-button {
+	transform: rotate(-90deg);
+}
+
 :host([fixed]) .ui5-panel-header-title {
 	width: 100%;
 }

package/src/themes/Popover.css

@@ -96,3 +96,7 @@
 :host([hide-arrow]) .ui5-popover-arrow {
 	display: none;
 }
+
+.ui5-popover-root {
+	min-width: 6.25rem;
+}

package/src/themes/PopupsCommon.css

@@ -1,7 +1,6 @@
 :host {
     display: none;
     position: fixed;
-    min-width: 6.25rem;
     background: var(--sapGroup_ContentBackground);
     box-shadow: var(--sapContent_Shadow2);
     border-radius: var(--_ui5-popup-border-radius);

package/src/themes/RadioButton.css

@@ -10,11 +10,14 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
-	cursor: pointer;
 	border-radius: var(--_ui5_radio_button_border_radius);
 	transition: var(--_ui5_radio_button_transition);
 }
 
+:host(:not([disabled])) .ui5-radio-root {
+	cursor: pointer;
+}
+
 /* checked */
 :host([checked]) {
 	color: var(--_ui5_radio_button_checked_fill);
@@ -152,7 +155,6 @@
 	border: var(--_ui5_radio_button_border);
 	border-radius: var(--_ui5_radio_button_border_radius);
 	transition: var(--_ui5_radio_button_transition);
-	cursor: pointer;
 }
 
 /* Inner */
@@ -187,7 +189,6 @@
 	align-items: center;
 	padding-right: var(--_ui5_radio_button_label_offset);
 	vertical-align: top;
-	cursor: default;
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;

package/src/themes/RatingIndicator.css

@@ -41,7 +41,6 @@
 	content: "\2605";
 	position: absolute;
 	top: 0;
-	left: 0;
 	width: 50%;
 	height: 100%;
 	color: var(--sapContent_RatedColor);

package/src/themes/SliderBase.css

@@ -89,7 +89,7 @@
 	outline: none;
 }
 
-.ui5-slider-progress:focus::before {
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
 	display: var(--_ui5_range_slider_legacy_progress_focus_display);
 	content: '';
 	position: absolute;
@@ -159,7 +159,8 @@
 	border: var(--_ui5_slider_handle_hover_border);
 }
 
-.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, .ui5-slider-inner .ui5-slider-handle:focus {
+.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
 	outline: var(--_ui5_slider_handle_outline);
 	outline-offset: var(--_ui5_slider_handle_outline_offset);
 	border: var(--_ui5_slider_handle_focus_border);

package/src/themes/SplitButton.css

@@ -0,0 +1,98 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	height: 100%;
+}
+
+.ui5-split-button-root {
+	display: inline-block;
+	position: relative;
+	width: inherit;
+}
+
+.ui5-split-text-button {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-right-width: 0;
+	margin-right: 2.1875rem;
+	vertical-align: top;
+	width: inherit;
+}
+
+.ui5-split-arrow-button-wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.ui5-split-arrow-button {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	width: 2.25rem;
+}
+
+.ui5-split-arrow-button[design="Transparent"] {
+	border-left-color: var(--sapButton_Lite_Hover_BorderColor);
+}
+
+.ui5-split-arrow-button[design="Emphasized"] {
+	border-left-color: var(--sapButton_Emphasized_TextColor);
+}
+
+:host([focused]) .ui5-split-button-root {
+	outline: 0;
+}
+
+:host([focused]) .ui5-split-button-root:after {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	outline: var(--_ui5_button_outline);
+	outline-offset: -0.1875rem;
+	border-radius: var(--_ui5_button_border_radius);
+}
+
+:host([design="Emphasized"]) ui5-button[focused] {
+	outline-color: transparent;
+}
+
+:host([design="Emphasized"][focused]) .ui5-split-button-root:after {
+	outline: var(--_ui5_button_emphasized_focused_border);
+}
+
+.ui5-split-text-button[dir="rtl"] {
+	border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0;
+	border-width: 1px 1px 1px 0;
+	margin-right: 0;
+	margin-left: 2.1875rem;
+}
+
+.ui5-split-arrow-button-wrapper[dir="rtl"] {
+	left: 0;
+	right: auto;
+}
+
+[dir="rtl"] .ui5-split-arrow-button {
+	border-radius: var(--_ui5_button_border_radius) 0 0 var(--_ui5_button_border_radius);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Transparent"] {
+	border-right-color: var(--sapButton_Lite_Hover_BorderColor);
+	border-left-color: var(--sapButton_Lite_BorderColor);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Transparent"]:not([disabled]):hover {
+	border-left-color: var(--sapButton_Lite_Hover_BorderColor);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"] {
+	border-right-color: var(--sapButton_Emphasized_TextColor);
+	border-left-color: var(--sapButton_Emphasized_BorderColor);
+}
+

package/src/themes/TabContainer.css

@@ -26,12 +26,6 @@
 	box-sizing: border-box;
 }
 
-.ui5-tc__headerInnerContainer {
-	position: relative;
-	flex: 1 1 100%;
-	min-width: 0; /* fixes chrome flex issue */
-}
-
 :host([tabs-placement="Bottom"]) .ui5-tc__header {
 	border-top: var(--_ui5_tc_header_border_bottom);
 }
@@ -40,66 +34,36 @@
 	height: var(--_ui5_tc_header_height_text_only);
 }
 
-.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditonalText.ui5-tc--standardTabLayout .ui5-tc__header {
+.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditionalText.ui5-tc--standardTabLayout .ui5-tc__header {
 	height: var(--_ui5_tc_header_height_text_with_additional_text);
 }
 
-.ui-tc__headerScrollContainer {
-	box-sizing: border-box;
+.ui5-tc__tabStrip {
+	flex: 1;
+	display: flex;
 	overflow: hidden;
-	flex: 1 1 100%;
-}
-
-.ui5-tc__headerList {
+	box-sizing: border-box;
 	position: relative;
-	display: flex;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.ui5-tc__separator {
-	width: 0;
-	border-left: 2px solid var(--sapList_BorderColor);
-	margin: 0.5rem 0.25rem;
+	white-space: nowrap;
 }
 
 .ui5-tc__separator:focus {
     outline: none;
 }
 
-.ui5-tc__headerArrow {
-	position: absolute;
-	top: 0;
-	bottom: 1px;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	color: var(--sapContent_IconColor);
-	background-color: var(--sapObjectHeader_Background);
-	padding: 0 0.25rem;
-	visibility: hidden;
-}
-
-.ui5-tc__headerArrowLeft {
-	left: 0;
-}
-
-.ui5-tc__headerArrowRight {
-	right: 0;
-}
-
-.ui5-tc__headerArrow:hover,
-.ui5-tc__headerArrow:active {
-	color: var(--sapHighlightColor);
+.ui5-tc__overflow {
+	flex: 0 0 0;
+	margin: 0 0.25rem;
 }
 
-.ui5-tc__headerArrow--visible {
-	visibility: visible;
+.ui5-tc__overflow[hidden] {
+	display: none;
 }
 
-.ui-tc__overflowButton {
-	margin: 0 0.25rem;
+.ui5-tc__overflow > [ui5-button] {
+	margin-top: 0.25rem;
+	border-radius: 0.75rem;
+	height: 1.5rem;
 }
 
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
@@ -117,7 +81,7 @@
 }
 
 :host([tabs-placement="Bottom"]) .ui5-tc__content {
-    border-top: var(--_ui5_tc_content_border_bottom);
+	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
 .ui5-tc__content--collapsed {
@@ -158,7 +122,7 @@
 }
 
 /*** RTL ***/
-[dir=rtl] .ui-tc__overflowButton {
+[dir=rtl] .ui5-tc__overflow {
 	margin-right: auto;
 	margin-left: 0.25rem;
 }

package/src/themes/TabInOverflow.css

@@ -1,49 +1,53 @@
 .ui5-tab-overflow-item {
-    color: var(--_ui5_tc_overflowItem_default_color);
+	color: var(--_ui5_tc_overflowItem_default_color);
 }
 
 .ui5-tab-overflow-item--disabled {
-    cursor: default;
-    opacity: 0.5;
+	cursor: default;
+	opacity: 0.5;
 }
 
 .ui5-tab-overflow-item--positive {
-    color: var(--_ui5_tc_overflowItem_positive_color);
-    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_positive_color);
+	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
 .ui5-tab-overflow-item--negative {
-    color: var(--_ui5_tc_overflowItem_negative_color);
-    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_negative_color);
+	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
 .ui5-tab-overflow-item--critical {
-    color: var(--_ui5_tc_overflowItem_critical_color);
-    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_critical_color);
+	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
 
 .ui5-tab-overflow-item--neutral {
-    color: var(--_ui5_tc_overflowItem_neutral_color);
-    border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_neutral_color);
+	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 
 .ui5-tab-overflow-item[active] .ui5-tab-overflow-itemContent {
-    color: var(--sapList_Active_TextColor);
+	color: var(--sapList_Active_TextColor);
 }
 
 .ui5-tab-overflow-itemContent {
-    display: flex;
-    align-items: center;
-    padding: 0 0.5rem;
-    height: var(--_ui5_tc_item_text);
-    pointer-events: none;
+	display: flex;
+	align-items: center;
+	padding: 0 0.5rem;
+	height: var(--_ui5_tc_item_text);
+	pointer-events: none;
 }
 
 .ui5-tab-overflow-item [ui5-icon] {
-    width: 1.375rem;
-    height: 1.375rem;
-    padding-right: 1rem;
-    color: var(--_ui5_tc_overflowItem_current_color);
+	width: 1.375rem;
+	height: 1.375rem;
+	padding-right: 1rem;
+	color: var(--_ui5_tc_overflowItem_current_color);
+}
+
+.ui5-tab-overflow-item[hidden] {
+	display: none;
 }
 
 .ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {