@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/themes/CheckBox.css

@@ -36,7 +36,7 @@
 }
 
 /* readonly */
-:host([readonly]:not([value-state="Warning"]):not([value-state="Error"])) .ui5-checkbox-inner {
+:host([readonly]:not([value-state="Critical"]):not([value-state="Negative"])) .ui5-checkbox-inner {
 	background: var(--sapField_ReadOnly_Background);
 	border: var(--_ui5_checkbox_inner_readonly_border);
 	color: var(--sapField_TextColor);
@@ -61,30 +61,31 @@
 	align-self: center;
 }
 
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
+:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
+:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 
 /* value states */
-:host([value-state="Error"]) .ui5-checkbox-inner,
-:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Negative"]) .ui5-checkbox-inner,
+:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_InvalidBackground);
 	border: var(--_ui5_checkbox_inner_error_border);
 	color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_error_background_hover);
 }
 
-:host([value-state="Warning"]) .ui5-checkbox-inner,
-:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Critical"]) .ui5-checkbox-inner,
+:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_WarningBackground);
 	border: var(--_ui5_checkbox_inner_warning_border);
 	color: var(--_ui5_checkbox_inner_warning_color);
 }
 
-:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_warning_background_hover);
 }
 
@@ -99,31 +100,22 @@
 	background: var(--_ui5_checkbox_inner_information_background_hover);
 }
 
-
-:host([value-state="Success"]) .ui5-checkbox-inner,
-:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
+:host([value-state="Positive"]) .ui5-checkbox-inner,
+:host([value-state="Positive"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--sapField_SuccessBackground);
 	border: var(--_ui5_checkbox_inner_success_border);
 	color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
+:host([value-state="Positive"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--_ui5_checkbox_inner_success_background_hover);
 }
 
-:host([value-state="Warning"]) .ui5-checkbox-icon,
-:host([value-state="Warning"][indeterminate]) .ui5-checkbox-inner::after {
+:host([value-state="Critical"]) .ui5-checkbox-icon,
+:host([value-state="Critical"][indeterminate]) .ui5-checkbox-inner::after {
 	color: var(--_ui5_checkbox_checkmark_warning_color);
 }
 
-:host([text]) .ui5-checkbox-root {
-	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
-}
-
-:host([text]) .ui5-checkbox-root:focus::before {
-	inset-inline-end: 0;
-}
-
 .ui5-checkbox-root {
 	position: relative;
 	display: inline-flex;
@@ -141,7 +133,8 @@
 }
 
 /* focused */
-.ui5-checkbox-root:focus::before {
+:host([desktop]) .ui5-checkbox-root:focus-within::before,
+.ui5-checkbox-root:focus-visible::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
 	content: "";
 	position: absolute;
@@ -151,9 +144,13 @@
 	border-radius: var(--_ui5_checkbox_focus_border_radius);
 }
 
-:host .ui5-checkbox-root:focus {
-	border: var(--_ui5_checkbox_focus_border);
-	border-radius: 0.5rem;
+:host([text]) .ui5-checkbox-root {
+	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
+}
+
+:host([text]) .ui5-checkbox-root:focus-within::before,
+:host([text]) .ui5-checkbox-root:focus-visible::before {
+	inset-inline-end: 0;
 }
 
 /* hover */
@@ -224,7 +221,7 @@
 	height: var(--_ui5_checkbox_partially_icon_size);
 }
 
-.ui5-checkbox-inner input {
+:host input {
 	-webkit-appearance: none;
 	visibility: hidden;
 	width: 0;
@@ -253,4 +250,21 @@
 	transform: translate(-50%, -50%);
 }
 
+/* Display only mode */
+:host([display-only]) {
+	cursor: default;
+}
+
+:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] {
+	color: var(--sapTextColor);
+}
 
+:host([display-only]) .ui5-checkbox-display-only-icon-inner {
+	min-width: var(--_ui5_checkbox_inner_width_height);
+	max-width: var(--_ui5_checkbox_inner_width_height);
+	height: var(--_ui5_checkbox_inner_width_height);
+	max-height: var(--_ui5_checkbox_inner_width_height);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/src/themes/ColorPalette.css

@@ -2,8 +2,10 @@
 	display: inline-block;
 }
 
-:host(:not([hidden])[popup-mode]) {
+:host(:not([hidden])[popup-mode]),
+:host(:not([hidden])[on-phone]) {
 	width: 100%;
+	overflow: hidden;
 }
 
 
@@ -21,10 +23,46 @@
 }
 
 .ui5-cp-root.ui5-cp-root-phone .ui5-cp-item-container {
-	width: 18.5rem;
-	max-width: 19.5rem;
-	max-height: 13rem;
 	padding: 0.375rem 0.625rem;
+	width: 100%;
+	max-width: 100%;
+	max-height: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-cp-root-phone .ui5-cp-default-color-button,
+.ui5-cp-root-phone .ui5-cp-more-colors {
+	height: 2.875rem;
+}
+
+.ui5-cp-root-phone .ui5-cp-more-colors-wrapper,
+.ui5-cp-root-phone .ui5-cp-default-color-button-wrapper {
+	height: 2.875rem;
+}
+
+.ui5-cp-root-phone .ui5-cp-item-container{
+	display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 0.75rem;
+}
+
+.ui5-cp-root-phone .ui5-cp-recent-colors-container {
+	padding: 0.375rem 0.625rem;
+	display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 0.75rem;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-cp-root-phone .ui5-cp-recent-colors-wrapper{
+	max-width: 100%;
+	padding: 0px;
+	display: flex;
+	justify-content: center;
+	flex-flow: wrap;
+	max-height: var(--_ui5_color-palette-row-height);
+	overflow: hidden;
 }
 
 .ui5-cp-recent-colors-wrapper {
@@ -35,7 +73,6 @@
 
 .ui5-cp-root.ui5-cp-root-phone {
 	display: flex;
-	align-items: center;
 }
 
 .ui5-cp-item-container {

package/src/themes/ColorPaletteItem.css

@@ -15,13 +15,16 @@
 	border-radius: var(--_ui5_color-palette-item-hover-outer-border-radius);
 }
 
-:host(:not([hidden])[phone]) {
-	height: 2.75rem;
-	width: 2.75rem;
+:host(:not([hidden])[on-phone]) {
+	width: 100%;
+	padding-top: calc(100% - 2px); /* padding-top is used to base the height on dynamic width and we remove 2px for the top and bottom borders*/
 	border: 1px solid var(--sapContent_ForegroundBorderColor);
 	border-radius: 0.25rem;
 	display: inline-block;
-	margin: 0.375rem;
+	margin: 0px;
+	max-width: 4.5rem;
+	max-height: 4.5rem;
+	height: auto;
 }
 
 .ui5-cp-item {
@@ -32,11 +35,11 @@
 	height: 100%;
 }
 
-:host(:not([_disabled]):not([phone]):hover) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):hover) .ui5-cp-item {
 	border-radius: var(--_ui5_color-palette-item-hover-inner-border-radius);
 }
 
-:host(:not([_disabled])[phone]) .ui5-cp-item {
+:host(:not([_disabled])[on-phone]) .ui5-cp-item {
 	border-radius: 0.1875rem;
 }
 
@@ -46,15 +49,15 @@
 	box-sizing: border-box;
 }
 
-:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus{
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus{
 	outline: none;
 }
 
-:host(:not([_disabled]):not([phone]):focus) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):focus) .ui5-cp-item {
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:not(:hover)::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -67,7 +70,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled])) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:not(:hover)::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -80,7 +83,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -93,7 +96,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;

package/src/themes/ColorPalettePopover.css

@@ -9,6 +9,7 @@
 	width: 100%;
 	display: flex;
 	justify-content: flex-end;
+    align-items: center;
 	margin: 0.1875rem 0;
 }
 
@@ -16,10 +17,6 @@
 	padding: 0;
 }
 
-[ui5-title], [ui5-button] {
-	margin-bottom: 1rem;
-}
-
 .ui5-cp-item-container {
 	padding: 0.3125rem 0.6875rem;
 }

package/src/themes/ColorPicker.css

@@ -62,7 +62,7 @@
     width: 0.9375rem;
     height: 1.5rem;
     background: transparent;
-    margin-left: -2px;
+    margin-inline-start: -2px;
     margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
     box-sizing: border-box;
 }
@@ -219,17 +219,17 @@
     margin-top: var(--_ui5_color_picker_slider_handle_focus_margin_top);
 }
 
-[dir=rtl] [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
+:dir(rtl) [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
     background-image: -webkit-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
 }
 
-[dir="rtl"] .ui5-color-picker-alpha-slider::part(handle),
-[dir="rtl"] .ui5-color-picker-hue-slider::part(handle){
+:dir(rtl) .ui5-color-picker-alpha-slider::part(handle),
+:dir(rtl) .ui5-color-picker-hue-slider::part(handle){
 	--_ui5_slider_handle_margin_left: 0;
 }
 
-[dir="rtl"] .ui5-color-picker-sliders-wrapper {
+:dir(rtl) .ui5-color-picker-sliders-wrapper {
 	margin-left: 10px;
 }

package/src/themes/DatePicker.css

@@ -17,6 +17,10 @@
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-datepicker_border_radius);
 	margin: var(--_ui5_input_margin_top_bottom) 0;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
 :host(:not([disabled]):not([readonly]):active) {

package/src/themes/DateTimePickerPopover.css

@@ -68,10 +68,19 @@
 /* Phone mode */
 /* TODO: Improve that layouting */
 .ui5-dt-picker-content--phone.ui5-dt-picker-content {
-	min-width: auto;
+	min-width: 20rem;
 	height: calc(100% - 4rem);
 }
 
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-time-selection-clocks] {
+	height: var(--_ui5_datetime_timeview_phonemode_clocks_width);
+	width: auto;
+}
+
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-calendar] {
+	margin-bottom: var(--_ui5_datetime_dateview_phonemode_margin_bottom);
+}
+
 .ui5-dt-picker-content--phone .ui5-dt-cal {
 	width: 100%;
 }

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);
 }
@@ -220,11 +223,8 @@
 	outline: none;
 }
 
-.ui5-dp-item.ui5-dp-item--selected-between .ui5-dp-daytext,
-.ui5-dp-item[hovered] .ui5-dp-daytext {
-	border: var(--_ui5_daypicker_item_select_between_border);
+.ui5-dp-item.ui5-dp-item--selected-between .ui5-dp-daytext {
 	border-radius: var(--_ui5_daypicker_item_border_radius);
-	background-color: var(--_ui5_daypicker_item_selected_between_text_background);
 	color: var(--sapTextColor);
 	font-weight: var(--_ui5_daypicker_item_selected_between_text_font);
 }
@@ -237,8 +237,8 @@
 	border-radius: var(--_ui5_daypicker_item_now_selected_between_border_radius);
 }
 
-.ui5-dp-item.ui5-dp-item--selected-between,
-.ui5-dp-item[hovered] {
+.ui5-dp-item.ui5-dp-item--selected-between {
+	border: var(--_ui5_daypicker_item_select_between_border);
 	border-radius: var(--_ui5_daypicker_item_selected_between_border);
 	background: var(--_ui5_daypicker_item_selected_between_background);
 }
@@ -272,22 +272,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 +310,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);
 }