@ui5/webcomponents 2.20.1 → 2.21.0-rc.1

package/src/themes/Switch.css

@@ -152,7 +152,7 @@
 	visibility: var(--_ui5_switch_text_hidden);
 }
 
-.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
+.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on,
 .ui5-switch-root.ui5-switch--checked.ui5-switch--desktop.ui5-switch--no-label .ui5-switch-text--on {
 	inset-inline-start: var(--_ui5_switch_text_active_left);
 }
@@ -362,4 +362,50 @@
 
 :dir(rtl).ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
-}
+}
+
+/* Readonly switch styling */
+:host([readonly]) .ui5-switch-root {
+	cursor: default;
+}
+
+:host([readonly]) .ui5-switch-track,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-track {
+	background: var(--sapField_ReadOnly_Background);
+	border: 0.0625rem var(--_ui5_switch_readonly_track_border_style) var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]) .ui5-switch-handle,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
+	background: var(--sapField_ReadOnly_Background);
+	border: 0.0625rem var(--_ui5_switch_readonly_handle_border_style) var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]) .ui5-switch-text--on,
+:host([readonly]) .ui5-switch-text--off,
+:host([readonly]) .ui5-switch-no-label-icon-on,
+:host([readonly]) .ui5-switch-no-label-icon-off,
+:host([readonly]) .ui5-switch-icon-on,
+:host([readonly]) .ui5-switch-icon-off,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-text--on,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-text--off {
+	color: var(--sapButton_Handle_TextColor);
+}
+
+/* Readonly switch - remove hover effects */
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--checked:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:hover .ui5-switch-handle {
+	box-shadow: none;
+}
+
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-track,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-track,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-handle {
+	background: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/Toolbar.css

@@ -32,12 +32,6 @@
 	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
 }
 
-.ui5-tb-spacer {
-	flex: 1 1 auto;
-	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
-	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
-}
-
 .ui5-tb-self-overflow {
 	min-width:  2.5rem;
 	flex-shrink: 1;

package/src/themes/YearPicker.css

@@ -50,8 +50,8 @@
 }
 
 .ui5-yp-item-sec-type {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-yp-item.ui5-yp-item--selected,

package/src/themes/YearRangePicker.css

@@ -50,8 +50,8 @@
 }
 
 .ui5-yrp-item-sec-type {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-yrp-item-one-column-view {

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

@@ -1,4 +1,5 @@
 :host {
+	/* Note: Dialog overwrites these variables. In case of change, check the Bar in Dialog's footer appearance */
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
 	--_ui5_bar-start-container-padding-start: 1rem;

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

@@ -0,0 +1,4 @@
+:host {
+	--_ui5_breadcrumbs_current_location_color: var(--sapContent_LabelColor);
+	--_ui5_breadcrumbs_separator_color: var(--sapContent_LabelColor);
+}

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

@@ -1,6 +1,7 @@
 :host {
 	--_ui5_input_width: 13.125rem;
 	--_ui5_input_min_width: 2.75rem;
+	--_ui5_input_min_width_tokenizer_available: 3rem;
 	--_ui5_input_height: var(--sapElement_Height);
 	--_ui5_input_margin_top_bottom: 0.25rem;
 	--_ui5_input_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor);
@@ -69,12 +70,13 @@
 	--_ui5_input_icon_wrapper_state_height: 100%;
 	--_ui5_input_icon_wrapper_success_state_height: 100%;
 	--_ui5-input-icons-count: 0;
-	--_ui5_input_tokenizer_min_width: 3.25rem;
+	--_ui5_input_tokenizer_min_width: 3.5rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_input_min_width: 2rem;
+		--_ui5_input_min_width_tokenizer_available: 2rem;
 		--_ui5_input_icon_width: 2rem;
 		--_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem;
 		--_ui5_input_error_warning_focused_icon_padding: .1875rem .375rem .1875rem .4375rem;

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

@@ -133,6 +133,10 @@
 
 	--_ui5_switch_icon_width: 0.75rem;
 	--_ui5_switch_icon_height: 0.75rem;
+
+	/* readonly - borders */
+	--_ui5_switch_readonly_track_border_style: dashed;
+	--_ui5_switch_readonly_handle_border_style: solid;
 }
 
 @container style(--ui5_content_density: compact) {

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

@@ -16,6 +16,7 @@
 	--_ui5_day_picker_item_height: 2.875rem;
 	--_ui5_day_picker_empty_height: 3rem;
 	--_ui5_day_picker_item_justify_content: space-between;
+	--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSize);
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 2rem;
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.4375rem;
 	--_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
@@ -225,6 +226,7 @@
 		--_ui5_day_picker_item_height: 2rem;
 		--_ui5_day_picker_empty_height: 2.125rem;
 		--_ui5_day_picker_item_justify_content: flex-end;
+		--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSmallSize);
 		--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
 		--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
 
@@ -269,6 +271,7 @@
 		--_ui5_input_inner_space_to_tokenizer: 0.125rem;
 		--_ui5_input_inner_space_to_n_more_text: 0.125rem;
 		--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
+		--_ui5_input_min_width_tokenizer_available: 2rem;
 
 		/* Menu */
 		--_ui5_menu_item_padding: 0 0.75rem 0 0.5rem;

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "../base/Bar-parameters.css";
+@import "../base/Breadcrumbs-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
@@ -57,4 +58,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "../base/rtl-parameters.css";
-@import "./sizes-parameters.css";
+@import "./sizes-parameters.css";

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "../base/Bar-parameters.css";
+@import "../base/Breadcrumbs-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
@@ -56,4 +57,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "../base/rtl-parameters.css";
-@import "./sizes-parameters.css";
+@import "./sizes-parameters.css";

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -2,7 +2,9 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "./Bar-parameters.css";
+@import "../base/Breadcrumbs-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/BusyIndicator-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
@@ -57,4 +59,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "../base/rtl-parameters.css";
+@import "../base/rtl-parameters.css";

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,7 +1,9 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
+@import "../base/Breadcrumbs-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/BusyIndicator-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
@@ -57,4 +59,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "../base/rtl-parameters.css";
+@import "../base/rtl-parameters.css";

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

@@ -1,3 +1,7 @@
+@import "../base/Breadcrumbs-parameters.css";
+
 :host {
 	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
-}
+	--_ui5_breadcrumbs_current_location_color: var(--sapTextColor);
+	--_ui5_breadcrumbs_separator_color: var(--sapTextColor);
+}

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

@@ -5,14 +5,14 @@
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
 	--_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;
-	--_ui5_calendar_header_arrow_button_border: none;
+	--_ui5_calendar_header_arrow_button_border: 0.0625rem solid var(--sapList_Hover_Background);
 	--_ui5_calendar_header_arrow_button_border_radius: 0.5rem;
 	--_ui5_calendar_header_arrow_button_box_shadow: 0 0 0.125rem 0 rgb(85 107 130 / 72%);
 	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;
 	--_ui5_calendar_header_middle_button_focus_border: none;
 	--_ui5_calendar_header_middle_button_focus_after_border: none;
 	--_ui5_calendar_header_middle_button_focus_background: transparent;
-	--_ui5_calendar_header_middle_button_focus_outline: 0.125rem solid var(--sapSelectedColor);
-	--_ui5_calendar_header_middle_button_focus_active_outline: 0.0625rem solid var(--sapSelectedColor);
+	--_ui5_calendar_header_middle_button_focus_outline: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_calendar_header_middle_button_focus_active_outline: 0.0625rem solid var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_active_background: transparent;
 }

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

@@ -7,7 +7,7 @@
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.125rem;
 	--_ui5_daypicker_item_no_selected_inset: 0.375rem;
-	--_ui5_daypicker_item_now_border_focus_after: 0.125rem solid var(--sapList_SelectionBorderColor);
+	--_ui5_daypicker_item_now_border_focus_after: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_now_border_radius_focus_after: 0.3125rem;
 	--_ui5_day_picker_item_selected_now_border_focus: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_day_picker_item_selected_now_border_radius_focus: 0.1875rem;
@@ -21,7 +21,7 @@
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
 	--_ui5_daypicker_item_now_box_shadow: inset 0 0 0 0.35rem var(--sapList_Background);
-	--_ui5_daypicker_item_selected_text_outline: 0.0625rem solid var(--sapSelectedColor);
+	--_ui5_daypicker_item_selected_text_outline: 0.0625rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_now_selected_outline_offset: -0.25rem;
 	--_ui5_daypicker_item_now_selected_between_inset: 0.25rem;
 	--_ui5_daypicker_item_now_selected_between_border: 0.0625rem solid var(--sapContent_Selected_ForegroundColor);
@@ -31,7 +31,7 @@
 	--_ui5_daypicker_item_selected_hover: var(--sapList_Hover_Background);
 	--_ui5_daypicker_item_now_inset: 0.3125rem;
 	--_ui5-dp-item_withsecondtype_border: 0.25rem;
-	--_ui5_daypicker_item_selected__secondary_type_text_outline: 0.0625rem solid var(--sapSelectedColor);
+	--_ui5_daypicker_item_selected__secondary_type_text_outline: 0.0625rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_two_calendar_item_now_day_text_content: "";
 	--_ui5_daypicker_two_calendar_item_now_selected_border_width: 0.125rem;
 	--_ui5_daypicker_two_calendar_item_border_radius: 0.5rem;

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

@@ -1,3 +1,7 @@
+@import "../base/Breadcrumbs-parameters.css";
+
 :host {
 	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
-}
+	--_ui5_breadcrumbs_current_location_color: var(--sapTextColor);
+	--_ui5_breadcrumbs_separator_color: var(--sapTextColor);
+}

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

@@ -12,7 +12,7 @@
 	--_ui5_calendar_header_middle_button_focus_border: none;
 	--_ui5_calendar_header_middle_button_focus_after_border: none;
 	--_ui5_calendar_header_middle_button_focus_background: transparent;
-	--_ui5_calendar_header_middle_button_focus_outline: 0.125rem solid var(--sapSelectedColor);
-	--_ui5_calendar_header_middle_button_focus_active_outline: 0.0625rem solid var(--sapSelectedColor);
+	--_ui5_calendar_header_middle_button_focus_outline: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_calendar_header_middle_button_focus_active_outline: 0.0625rem solid var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_active_background: transparent;
 }

package/src/themes/sap_horizon_hcb/Breadcrumbs-parameters.css

@@ -0,0 +1,6 @@
+@import "../base/Breadcrumbs-parameters.css";
+
+:host {
+	--_ui5_breadcrumbs_current_location_color: var(--sapTextColor);
+	--_ui5_breadcrumbs_separator_color: var(--sapTextColor);
+}

package/src/themes/sap_horizon_hcb/Switch-parameters.css

@@ -121,6 +121,10 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* readonly - solid borders for high contrast */
+	--_ui5_switch_readonly_track_border_style: solid;
+	--_ui5_switch_readonly_handle_border_style: solid;
 }
 
 @container style(--ui5_content_density: compact) {

package/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "./Bar-parameters.css";
+@import "./Breadcrumbs-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
@@ -57,4 +58,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "./rtl-parameters.css";

package/src/themes/sap_horizon_hcw/Breadcrumbs-parameters.css

@@ -0,0 +1,6 @@
+@import "../base/Breadcrumbs-parameters.css";
+
+:host {
+	--_ui5_breadcrumbs_current_location_color: var(--sapTextColor);
+	--_ui5_breadcrumbs_separator_color: var(--sapTextColor);
+}

package/src/themes/sap_horizon_hcw/Switch-parameters.css

@@ -122,6 +122,10 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* readonly - solid borders for high contrast */
+	--_ui5_switch_readonly_track_border_style: solid;
+	--_ui5_switch_readonly_handle_border_style: solid;
 }
 
 @container style(--ui5_content_density: compact) {

package/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "../base/Bar-parameters.css";
+@import "./Breadcrumbs-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
@@ -57,4 +58,4 @@
 @import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "./rtl-parameters.css";