@ui5/webcomponents 1.22.0 → 1.23.0-rc.0

package/src/themes/DayPicker.css

@@ -17,14 +17,15 @@
 }
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daytext {
-	height: 1.575rem;
-	padding-top: var(--_ui5_dp_two_calendar_item_text_padding_top)
+	height: 1.5625rem;
+	padding-inline-end: var(--_ui5_dp_two_calendar_item_text_padding_top)
 }
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daysectext {
-	font-size: 0.625rem;
+	font-size: 0.75rem;
 	height: var(--_ui5_dp_two_calendar_item_secondary_text_height);
-	padding: 0 0.375rem 0.375rem 50%;
+	padding-block: var(--_ui5_dp_two_calendar_item_secondary_text_padding_block);
+	padding-inline: 50% 0.4375rem;
 }
 
 .ui5-dp-weekname,
@@ -32,8 +33,8 @@
 .ui5-dp-item {
 	width: var(--_ui5_day_picker_item_width);
 	height: var(--_ui5_day_picker_item_height);
-	margin-top: var(--_ui5_daypicker_item_margin);
-	margin-right: var(--_ui5_daypicker_item_margin);
+	margin-block-start: var(--_ui5_daypicker_item_margin);
+	margin-inline-end: var(--_ui5_daypicker_item_margin);
 	font-family: "72override", var(--sapFontFamily);
 	border-radius: var(--_ui5_daypicker_item_border_radius);
 }
@@ -59,7 +60,7 @@
 }
 
 .ui5-dp-weeknumber-container {
-	padding-top: var(--_ui5_daypicker_weeknumbers_container_padding_top);
+	padding-block-start: var(--_ui5_daypicker_weeknumbers_container_padding_top);
 	flex-basis: 12.5%;
 }
 
@@ -148,6 +149,7 @@
 	border: 0.125rem solid var(--_ui5_daypicker_item_now_border_color);
 	content: "";
 	border-radius: var(--_ui5_daypicker_item_border_radius);
+	z-index: 1;
 }
 
 .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected {
@@ -163,6 +165,7 @@
 	border: var(--_ui5_daypicker_item_selected_border);
 	content: "";
 	border-radius: var(--_ui5_daypicker_item_border_radius_item);
+	z-index: 1;
 }
 
 .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext {
@@ -181,7 +184,7 @@
 	font-family: var(--_ui5_daypicker_item_selected_text_font);
 }
 
-.ui5-dp-item.ui5-dp-item--selected:hover .ui5-dp-daytext {
+.ui5-dp-item.ui5-dp-item--selected .ui5-dp-daytext {
 	background: var(--_ui5_daypicker_item_selected_daytext_hover_background);
 	color: var(--sapContent_Selected_TextColor);
 }
@@ -272,22 +275,18 @@
 /* styles for calendar with two types */
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected:not(.ui5-dp-item.ui5-dp-item--now) .ui5-dp-daytext::after{
-	border-width: 0.125rem;
-}
-
-.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext {
-	height: var(--_ui5_dp_two_calendar_item_primary_text_height);
-	padding-top: var(--_ui5_dp_two_calendar_item_now_text_padding_top);
+	border-width: 0.0625rem;
 }
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daysectext {
 	height: var(--_ui5_dp_two_calendar_item_secondary_text_height);
-	padding-top: 0;
-    border-radius: var(--_ui5_dp_two_calendar_item_secondary_text_border_radios);
+	padding-block-start: 0;
+	border-radius: var(--_ui5_dp_two_calendar_item_secondary_text_border_radios);
 }
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext {
-    border-radius: var(--_ui5_daypicker_two_calendar_item_border_radius);
+	border-radius: var(--_ui5_daypicker_two_calendar_item_border_radius);
+	margin-block-end: var(--_ui5_daypicker_two_calendar_item_margin_bottom);
 }
 
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item:focus::after {
@@ -314,7 +313,203 @@
 .ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected.ui5-dp-item--withsecondtype .ui5-dp-daytext:not(.ui5-dp-daysectext)::before {
 	content: var(--_ui5_daypicker_two_calendar_item_now_day_text_content);
 	position: absolute;
-	inset: 0.3125rem;
+	inset: 0.25rem;
 	border-radius: var(--_ui5_daypicker_two_calendar_item_selected_now_border_radius_focus);
-	outline: var(--_ui5_daypicker_item_selected__secondary_type_text_outline)
+	outline: var(--_ui5_daypicker_item_selected__secondary_type_text_outline);
+	z-index: 1;
+}
+
+/* Styles targeting special days, referenced in the Calendar Legend */
+
+.ui5-dp-specialday {
+	width: 100%;
+	height: 0.375rem;
+	position: absolute;
+	box-sizing: border-box;
+	inset-block-start: var(--_ui5_daypicker_special_day_top);
+	border-end-end-radius: var(--_ui5_daypicker_special_day_border_bottom_radius);
+	border-end-start-radius: var(--_ui5_daypicker_special_day_border_bottom_radius);
+	border-block-start: var(--_ui5_daypicker_special_day_border_top);
+}
+
+.ui5-dp-item--selected .ui5-dp-specialday {
+	width: var(--_ui5_daypicker_selected_item_special_day_width);
+}
+
+.ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-specialday {
+	inset-block-start: var(--_ui5_daypicker_selected_item_now_special_day_top);
+	width: var(--_ui5_daypicker_selected_item_now_special_day_width);
+	border-end-end-radius: var(--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius);
+	border-end-start-radius: var(--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius);
+}
+
+.ui5-dp-item--now .ui5-dp-specialday,
+.ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-specialday {
+	height: 0.3125rem;
+	border-end-end-radius: var(--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius_alternate);
+	border-end-start-radius: var(--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius_alternate);
+	inset-block-start: var(--_ui5_daypicker_item_now_specialday_top);
+	width: var(--_ui5_daypicker_item_now_specialday_width);
+}
+
+.ui5-dp-item:not(:focus).ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-specialday {
+	border-end-end-radius: var(--_ui5_daypicker_special_day_selected_border_radius_bottom); 
+	border-end-start-radius: var(--_ui5_daypicker_special_day_selected_border_radius_bottom);
+}
+
+.ui5-dp-item--now .ui5-dp-specialday {
+	width: var(--_ui5_daypicker_selected_item_now_special_day_width);
+	inset-block-start: var(--_ui5_daypicker_selected_item_now_special_day_top);
+}
+
+.ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-daytext {
+	border-radius: var(--_ui5-daypicker_item_selected_now_border_radius);
+}
+
+.ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now:focus::after,
+.ui5-dp-item[special-day].ui5-dp-item--now:focus::after {
+	margin: var(--_ui5_daypicker_item_now_focus_margin);
+}
+
+.ui5-dp-item.ui5-dp-item--now:focus .ui5-dp-specialday {
+	inset-block-start: var(--_ui5_daypicker_specialday_focused_top);
+	width: var(--_ui5_daypicker_specialday_focused_width);
+	border-end-end-radius: var(--_ui5_daypicker_specialday_focused_border_bottom);
+	border-end-start-radius: var(--_ui5_daypicker_specialday_focused_border_bottom);
+	height: 0.3125rem;
+}
+
+
+/* Styles for calendar with secondary calendar type and special dates */
+
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now::after,
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--now::after {
+	inset: var(--_ui5_daypicker_twocalendar_item_special_day_now_inset);
+	border-radius: var(--_ui5_daypicker_twocalendar_item_special_day_now_border_radius);
+	border-width: var(--_ui5_daypicker_twocalendar_item_special_day_after_border_width);
+	border-color: var(--_ui5_daypicker_item_selected_focus_color);
+}
+
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--now:not(.ui5-dp-item--selected)::after {
+	inset: 0.1875rem;
+}
+
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item .ui5-dp-specialday {
+	inset-block-start: var(--_ui5_daypicker_twocalendar_item_special_day_top);
+	inset-inline-end: var(--_ui5_daypicker_twocalendar_item_special_day_right);
+}
+
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item:not(.ui5-dp-item--now) .ui5-dp-daysectext {
+	padding-block: var(--_ui5_dp_two_calendar_item_secondary_text_padding);
+}
+
+.ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now.ui5-dp-item--withsecondtype:focus .ui5-dp-specialday {
+	inset-block-start: var(--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top);
+	inset-inline-end: var(--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right)
+}
+
+.ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now.ui5-dp-item--withsecondtype:focus .ui5-dp-daysectext {
+	padding-block: var(--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block);
+}
+
+.ui5-dp-item--withsecondtype .ui5-dp-daytext {
+	font-size: 0.75rem;
+}
+
+.ui5-dp-item.ui5-dp-item--withsecondtype .ui5-dp-specialday,
+.ui5-dp-item.ui5-dp-item--withsecondtype.ui5-dp-item--now:focus .ui5-dp-specialday,
+.ui5-dp-item.ui5-dp-item--withsecondtype:not(:focus).ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-specialday {
+	border-radius: 100%;
+	width: var(--_ui5_daypicker_twocalendar_item_special_day_dot);
+	inset-block-start: var(--_ui5_daypicker_twocalendar_item_special_day_top);
+	inset-inline-end: var(--_ui5_daypicker_twocalendar_item_special_day_right);
+	height: var(--_ui5_daypicker_twocalendar_item_special_day_dot);
+	border-block-start: none;
+}
+
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now:focus .ui5-dp-daytext {
+	margin-block-end: var(--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom);
+	padding-inline-end: var(--_ui5_daypicker_two_calendar_item_selected_focus_padding_right);
+}
+
+/* Colors for the different special days' types */
+
+.Type01 {
+	background: var(--sapLegendColor1);
+}
+
+.Type02 {
+	background: var(--sapLegendColor2);
+}
+
+.Type03 {
+	background: var(--sapLegendColor3);
+}
+
+.Type04 {
+	background: var(--sapLegendColor4);
+}
+
+.Type05 {
+	background: var(--sapLegendColor5);
+}
+
+.Type06 {
+	background: var(--sapLegendColor6);
+}
+
+.Type07 {
+	background: var(--sapLegendColor7);
+}
+
+.Type08 {
+	background: var(--sapLegendColor8);
+}
+
+.Type09 {
+	background: var(--sapLegendColor9);
+}
+
+.Type10 {
+	background: var(--sapLegendColor10);
+}
+
+.Type11 {
+	background: var(--sapLegendColor11);
+}
+
+.Type12 {
+	background: var(--sapLegendColor12);
+}
+
+.Type13 {
+	background: var(--sapLegendColor13);
+}
+
+.Type14 {
+	background: var(--sapLegendColor14);
+}
+
+.Type15 {
+	background: var(--sapLegendColor15);
+}
+
+.Type16 {
+	background: var(--sapLegendColor16);
+}
+
+.Type17 {
+	background: var(--sapLegendColor17);
+}
+
+.Type18 {
+	background: var(--sapLegendColor18);
+}
+
+.Type19 {
+	background: var(--sapLegendColor19);
+}
+
+.Type20 {
+	background: var(--sapLegendColor20);
 }

package/src/themes/NavigationMenu.css

@@ -13,7 +13,7 @@
     inset: 0;
  }
 
-.ui5-navigation-menu .ui5-navigation-menu-item { 
+.ui5-navigation-menu .ui5-navigation-menu-item {
     display: flex;
 	align-items: center;
 	width: 100%;
@@ -66,4 +66,10 @@
 
 .ui5-navigation-menu .ui5-menu-item[focused]:not([active]){
     background: none;
+}
+
+.ui5-sn-item-external-link-icon {
+	color: var(--_ui5_side_navigation_external_link_icon_color);
+	min-width: 2rem;
+	height: 0.875rem;
 }

package/src/themes/SplitButton.css

@@ -225,7 +225,7 @@
 	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
 	box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow, none)
 }
-[dir="rtl"].ui5-split-arrow-button[design="Emphasized"]:hover {
+:dir(rtl).ui5-split-arrow-button[design="Emphasized"]:hover {
 	box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl, none);
 }
 

package/src/themes/Switch.css

@@ -359,10 +359,10 @@
 }
 
 /* RTL */
-[dir="rtl"].ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+:dir(rtl).ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform_with_label);
 }
 
-[dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+:dir(rtl).ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
 }

package/src/themes/TreeItem.css

@@ -21,7 +21,7 @@
 }
 
 :host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
-:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+:host(:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
 	background: var(--sapList_Hover_Background);
 	cursor: pointer;
 }
@@ -42,7 +42,7 @@
 	background: var(--sapList_SelectionBackgroundColor);
 }
 
-:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+:host(:not([_mode="None"]):not([_mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
 	background-color: var(--sapList_Hover_SelectionBackground);
 	cursor: pointer;
 }

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

@@ -0,0 +1,4 @@
+:root {
+    --_ui5-calendar-legend-root-padding: 0.75rem;
+    --_ui5-calendar-legend-root-width: 18.5rem;
+}

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

@@ -0,0 +1,7 @@
+:root {
+	--_ui5-calendar-legend-item-box-margin: 0.25rem 0.5rem 0.25rem 0.25rem;
+	--_ui5-calendar-legend-item-root-focus-margin: 0;
+	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
+	--_ui5-calendar-legend-item-root-focus-border-radius: 0;
+	--_ui5-calendar-legend-item-root-width: 7.75rem;
+}

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

@@ -57,4 +57,33 @@
 	--_ui5_daypicker_two_calendar_item_no_select_focus_border_radius: 0.0625rem;
 	--_ui5_dp_two_calendar_item_secondary_text_border_radios: 0.25rem;
 	--_ui5_daypicker_two_calendar_item_now_selected_border_inset: 0.125rem;
+
+	--_ui5_daypicker_special_day_top: 2.5rem;
+	--_ui5_daypicker_special_day_border_bottom_radius: 0.25rem;
+	--_ui5_daypicker_special_day_before_border_color: var(--sapList_Background);
+	--_ui5_daypicker_selected_item_special_day_width: 100%;
+
+	--_ui5_daypicker_selected_item_now_special_day_top: 2.375rem;
+	--_ui5_daypicker_selected_item_now_special_day_width: calc(100% - 0.375rem);
+	--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius: 0;
+	--_ui5-daypicker_item_selected_now_border_radius: 0.25rem;
+	--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius_alternate: 0.0625rem;
+	--_ui5_daypicker_two_calendar_item_margin_bottom: 0;
+	--_ui5_daypicker_twocalendar_item_special_day_now_inset: 0.1875rem;
+	--_ui5_daypicker_twocalendar_item_special_day_now_border_radius: 0;
+	--_ui5_daypicker_item_now_focus_margin: 0.09375rem;
+	--_ui5_daypicker_special_day_border_top: 0.0625rem solid var(--_ui5_daypicker_special_day_before_border_color);
+	--_ui5_daypicker_special_day_selected_border_radius_bottom: 0.0625rem;
+
+	--_ui5_daypicker_specialday_focused_top: 2.375rem;
+	--_ui5_daypicker_specialday_focused_width: calc(100% - 0.375rem);
+	--_ui5_daypicker_specialday_focused_border_bottom: 0.0625rem;
+
+	--_ui5_daypicker_item_now_specialday_top: 2.375rem;
+	--_ui5_daypicker_item_now_specialday_width: calc(100% - 0.375rem);
+
+	--_ui5_daypicker_twocalendar_item_special_day_after_border_width: 0.125rem;
+	--_ui5_daypicker_twocalendar_item_special_day_dot: 0.375rem;
+	--_ui5_daypicker_twocalendar_item_special_day_top: 2rem;
+	--_ui5_daypicker_twocalendar_item_special_day_right: 1.4375rem;
 }

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

@@ -17,10 +17,17 @@
 	--_ui5_day_picker_item_height: 2.875rem;
 	--_ui5_day_picker_empty_height: 3rem;
 	--_ui5_day_picker_item_justify_content: space-between;
-	--_ui5_dp_two_calendar_item_now_text_padding_top: 0.387rem;
+	--_ui5_dp_two_calendar_item_now_text_padding_top: 0.375rem;
+	--_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_primary_text_height: 1.8125rem;
     --_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
-	--_ui5_dp_two_calendar_item_text_padding_top: 0.575rem;
+	--_ui5_dp_two_calendar_item_text_padding_top: 0.4375rem;
+	--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.5rem;
+	--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.5rem;
+	--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 0.5rem;
+	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0;
+	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
 
 	/* ColorPalette */
 	 --_ui5_color-palette-item-height: 1.75rem;
@@ -160,6 +167,14 @@
 	--_ui5_calendar_header_arrow_button_width: 2rem;
 	--_ui5_calendar_header_padding: 0;
 
+	/* Calendar Legend */
+	--_ui5-calendar-legend-root-padding: 0.5rem;
+	--_ui5-calendar-legend-root-width: 16.75rem;
+
+	/* Calendar Legend Item */
+	--_ui5-calendar-legend-item-box-margin: 0.125rem 0.5rem 0.125rem 0.125rem;
+	--_ui5-calendar-legend-item-root-focus-margin: -0.125rem;
+
 	/* CheckBox */
 	--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
 	--_ui5_checkbox_wrapped_content_margin_top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
@@ -194,10 +209,25 @@
 	--_ui5_day_picker_item_height: 2rem;
 	--_ui5_day_picker_empty_height: 2.125rem;
 	--_ui5_day_picker_item_justify_content: flex-end;
-	--_ui5_dp_two_calendar_item_now_text_padding_top: 0rem;
-    --_ui5_dp_two_calendar_item_primary_text_height: 1rem;
-    --_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
-	--_ui5_dp_two_calendar_item_text_padding_top: 0;
+	--_ui5_dp_two_calendar_item_now_text_padding_top: 0.5rem;
+	--_ui5_dp_two_calendar_item_primary_text_height: 1rem;
+	--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
+	--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
+
+	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
+	--_ui5_daypicker_specialday_focused_top: 1.5rem;
+	--_ui5_daypicker_special_day_top: 1.625rem;
+	--_ui5_daypicker_item_now_specialday_top: 1.5rem;
+	--_ui5_daypicker_twocalendar_item_special_day_top: 1.25rem;
+	--_ui5_daypicker_twocalendar_item_special_day_right: 1.25rem;
+	--_ui5_daypicker_two_calendar_item_margin_bottom: 0;
+	--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.625rem;
+	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 1.125rem;
+	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.125rem;
+	--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.375rem;
+	--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 1rem;
+	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: -0.25rem;
+	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
 
 	/* DateTimePicker */
 	--_ui5_datetime_picker_height: 20.5rem;

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

@@ -8,7 +8,7 @@
 	--_ui5_daypicker_item_border_radius_item: 0.0625rem;
 	--_ui5_daypicker_item_selected_border: none;
 	--_ui5_daypicker_item_not_selected_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContentColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.0625rem;
 	--_ui5_daypicker_item_no_selected_inset: 0.125rem;
 	--_ui5_daypicker_item_now_border_focus_after: 0.0625rem dotted var(--sapContent_FocusColor);

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

@@ -3,6 +3,8 @@
 @import "../base/Badge-parameters.css";
 @import "./BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";

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

@@ -5,6 +5,8 @@
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";

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

@@ -4,6 +4,8 @@
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

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

@@ -8,7 +8,7 @@
 	--_ui5_daypicker_item_border_radius_item: 0.0625rem;
 	--_ui5_daypicker_item_selected_border: none;
 	--_ui5_daypicker_item_not_selected_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.0625rem;
 	--_ui5_daypicker_item_no_selected_inset: 0.125rem;
 	--_ui5_daypicker_item_now_border_focus_after: 0.0625rem dotted var(--sapList_SelectionBorderColor);

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

@@ -5,6 +5,8 @@
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
 @import "../base/ColorPalette-parameters.css";

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

@@ -8,7 +8,7 @@
 	--_ui5_daypicker_item_border_radius_item: 0.0625rem;
 	--_ui5_daypicker_item_selected_border: none;
 	--_ui5_daypicker_item_not_selected_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContentColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.0625rem;
 	--_ui5_daypicker_item_no_selected_inset: 0.125rem;
 	--_ui5_daypicker_item_now_border_focus_after: 0.0625rem dotted var(--sapList_SelectionBorderColor);

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

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";

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

@@ -10,9 +10,9 @@
 	--_ui5_daypicker_item_border_radius_focus_after: 0.25rem;
 	--_ui5_daypicker_item_selected_border: none;
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContentColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.125rem;
-	--_ui5_daypicker_item_no_selected_inset: 0.0625rem;
+	--_ui5_daypicker_item_no_selected_inset: 0.09375rem;
 	--_ui5_daypicker_item_now_border_focus_after: 0.125rem dotted var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_now_border_radius_focus_after: 0.0625rem;
 	--_ui5_day_picker_item_selected_now_border: 0.1875rem solid var(--sapContent_ContrastFocusColor);
@@ -26,4 +26,6 @@
 	--_ui5_daypicker_two_calendar_item_now_selected_border_width: 0.125rem;
 	--_ui5_daypicker_item_selected_text_border: none;
 	--_ui5_daypicker_two_calendar_item_now_selected_border_inset: 0.125rem;
+
+	--_ui5_daypicker_two_calendar_item_no_selected_inset: 0.09375rem;
 }

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

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

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

@@ -10,9 +10,9 @@
 	--_ui5_daypicker_item_border_radius_item: 0.25rem;
 	--_ui5_daypicker_item_selected_border: none;
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_ContentColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.125rem;
-	--_ui5_daypicker_item_no_selected_inset: 0.0625rem;
+	--_ui5_daypicker_item_no_selected_inset: 0.09375rem;
 	--_ui5_daypicker_item_now_border_focus_after: 0.125rem dotted var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_now_border_radius_focus_after: 0.0625rem;
 	--_ui5_day_picker_item_selected_now_border: 0.1875rem solid var(--sapContent_ContrastFocusColor);
@@ -25,4 +25,6 @@
 	--_ui5_daypicker_two_calendar_item_now_selected_border_width: 0.125rem;
 	--_ui5_daypicker_item_selected_text_border: none;
 	--_ui5_daypicker_two_calendar_item_now_selected_border_inset: 0.125rem;
+
+	--_ui5_daypicker_two_calendar_item_no_selected_inset: 0.09375rem;
 }

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

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

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

@@ -0,0 +1,6 @@
+@import "../base/CalendarLegendItem-parameters.css";
+
+:root {
+	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
+	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
+}