@ui5/webcomponents 0.0.0-df5b4199a → 0.0.0-e03cd01f3

package/src/themes/Calendar.css

@@ -15,8 +15,7 @@
     width: var(--_ui5_calendar_width);
     padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
-    flex-direction: column-reverse;
-    justify-content: flex-end;
+    flex-direction: column;
     overflow: hidden;
 }
 

package/src/themes/CalendarHeader.css

@@ -24,6 +24,8 @@
 	padding: 0;
 	font-size: var(--sapFontSize);
 	user-select: none;
+	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -41,10 +43,6 @@
 	display: none;
 }
 
-.ui5-calheader-arrowbtn:focus {
-	outline: none;
-}
-
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Lite_TextColor);
@@ -103,7 +101,7 @@
 	user-select: none;
 }
 
-.ui5-calheader-middlebtn:focus {
+.ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
 	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
@@ -111,13 +109,13 @@
 	background: var(--_ui5_calendar_header_middle_button_focus_background);
 }
 
-.ui5-calheader-middlebtn:focus:active {
+.ui5-calheader-middlebtn:focus:active, .ui5-calheader-arrowbtn:focus:active {
 	outline: var(--_ui5_calendar_header_middle_button_focus_active_outline);
 	outline-offset: -0.0625rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_active_background)
 }
 
-.ui5-calheader-middlebtn:focus::after {
+.ui5-calheader-middlebtn:focus::after, .ui5-calheader-arrowbtn:focus::after {
 	content: "";
 	display: var(--_ui5_calendar_header_middle_button_focus_after_display);
 	width: var(--_ui5_calendar_header_middle_button_focus_after_width);
@@ -128,6 +126,6 @@
 	left: var(--_ui5_calendar_header_middle_button_focus_after_left_offset);
 }
 
-.ui5-calheader-middlebtn:focus:active::after {
+.ui5-calheader-middlebtn:focus:active::after, .ui5-calheader-arrowbtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }

package/src/themes/CheckBox.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/DatePicker.css

@@ -1,6 +1,7 @@
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 @import "./InputSharedStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RadioButton.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RatingIndicator.css

@@ -1,3 +1,5 @@
+ @import "./FormComponents.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	font-size: 24px;

package/src/themes/SliderBase.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host([disabled]) {
 	opacity: var(--_ui5_slider_disabled_opacity);
@@ -9,7 +10,6 @@
 :host {
 	box-sizing: border-box;
 	cursor: pointer;
-	vertical-align: top;
 	width: 100%;
 }
 

package/src/themes/StepInput.css

@@ -5,7 +5,6 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	width: 100%;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;

package/src/themes/Suggestions.css

@@ -21,4 +21,8 @@
 
 .native-input-wrapper .ui5-input-inner-phone {
 	margin: 0;
+}
+
+.native-input-wrapper .ui5-multi-input-mobile-dialog-button {
+	margin-inline-start: 0.5rem;
 }

package/src/themes/Switch.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/TabInStrip.css

@@ -154,7 +154,7 @@
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-	bottom: -0.9375rem;
+	bottom: -1rem;
 }
 
 .ui5-tab-strip-item--disabled {

package/src/themes/TableGrowing.css

@@ -6,6 +6,7 @@
 	flex-direction: column;
 	cursor: pointer;
 	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {

package/src/themes/Text.css

@@ -15,7 +15,7 @@
 }
 
 :host(:not([max-lines="1"])) {
-	display: -webkit-box;
+	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;

package/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,6 +40,11 @@
 	pointer-events: none;
 }
 
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
 :host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);

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

@@ -1,10 +1,10 @@
-:root, [dir="ltr"] {
+:root,
+:dir(ltr) {
 	--_ui5_rotation_90deg: rotate(90deg);
 	--_ui5_rotation_minus_90deg: rotate(-90deg);
 
 	--_ui5_icon_transform_scale: none;
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_90deg);
-	--_ui5_timeline_scroll_container_offset: 0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: 0.1875rem 0 0 0.1875rem;
 	--_ui5_popover_right_arrow_margin: 0.1875rem 0 0 -0.375rem;
@@ -15,15 +15,11 @@
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem 0 0 0.5rem;
 	--_ui5_progress_indicator_remaining_bar_border_radius: 0 0.5rem 0.5rem 0;
 	--_ui5_menu_submenu_margin_offset: -0.25rem 0;
-
-	--_ui5-shellbar-notification-btn-count-offset: 0.125rem;
 }
 
-[dir="rtl"],
-[dir="rtl"] :host {
+:dir(rtl) {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
-	--_ui5_timeline_scroll_container_offset: -0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: .1875rem .125rem 0 0;
 	--_ui5_popover_right_arrow_margin: .1875rem .25rem 0 0;
@@ -38,5 +34,4 @@
 
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0px;
-	--_ui5-shellbar-notification-btn-count-offset: auto;
 }

package/src/themes/sap_horizon/SliderBase-parameters.css

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);

package/src/themes/sap_horizon/rtl-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem;

package/src/themes/sap_horizon_dark/SliderBase-parameters.css

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);

package/src/themes/sap_horizon_dark/rtl-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }