@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/themes/FileUploader.css

@@ -1,66 +1,183 @@
 @import "./FormComponents.css";
+@import "./Input.css";
+@import "./InputIcon.css";
+@import "./ValueStateVariables.css";
 
 :host {
 	display: inline-block;
 }
 
-.ui5-file-uploader-root {
-	position: relative;
+:host([hide-input]) {
+	width: max-content;
+	height: max-content;
 }
 
-.ui5-file-uploader-root input[type=file] {
-	opacity: 0;
+:host([hide-input]) .ui5-file-uploader-form {
 	position: absolute;
 	top: 0;
 	left: 0;
-	height: 100%;
 	width: 100%;
-	font-size: 0;
+	height: 100%;
+	display: block;
 }
 
-.ui5-file-uploader-root input[type=file]:not([disabled]) {
-	cursor: pointer;
+.ui5-file-uploader-root,
+.ui5-file-uploader-form {
+	position: relative;
+	width: inherit;
+	height: inherit;
+}
+
+.ui5-file-uploader-root .ui5-file-uploader-native-input {
+	position: relative;
+	display: block;
+	width: inherit;
+	height: inherit;
+	opacity: 0;
+	font-size: 0;
 }
 
-.ui5-file-uploader-mask {
+.ui5-file-uploader-display-container {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	width: inherit;
+	height: inherit;
 	display: flex;
+	column-gap: 0.5rem;
 	align-items: center;
 }
 
-.ui5-file-uploader-mask [ui5-input] {
-	margin-right: 0.25rem;
+.ui5-file-uploader-display-elements {
+	height: inherit;
+	flex: 1;
+	display: flex;
+	position: relative;
+	box-sizing: border-box;
 }
 
-:host([value-state="None"]:not([disabled]):hover) [ui5-input],
-:host(:not([value-state]):not([disabled]):hover) [ui5-input] {
-	border: var(--_ui5_file_uploader_hover_border);
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_Shadow);
+.ui5-file-uploader-tokenizer,
+.ui5-file-uploader-display-input {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	height: 100%;
+	border: none;
+	outline: none;
+	cursor: pointer;
 }
 
-:host([value-state="Negative"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
-	box-shadow: var(--sapField_Hover_InvalidShadow);
+.ui5-file-uploader-clear-icon,
+.ui5-file-uploader-value-help-icon {
+	position: absolute;
+	cursor: pointer;
 }
 
-:host([value-state="Critical"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_WarningShadow);
+.ui5-file-uploader-tokenizer {
+	max-width: var(--_ui5_file_uploader_tokenizer_width);
+}
+
+.ui5-file-uploader-display-input {
+	width: var(--_ui5_file_uploader_display_input_width);
+}
+
+.ui5-file-uploader-clear-icon {
+	inset-inline-end: var(--_ui5_input_icon_width);
+}
+
+.ui5-file-uploader-value-help-icon {
+	inset-inline-end: 0rem;
+}
+
+/* Input styles overrides */
+:host(:not([readonly])),
+:host([readonly][disabled]),
+:host([focused]:not([opened])),
+:host([value-state="None"]:not([readonly]):hover),
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])),
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover),
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover),
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])),
+:host([value-state="Positive"]:not([readonly]):not([disabled])),
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"][focused]:not([opened]):not([readonly])),
+:host([value-state="Information"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host(:not([value-state]):not([readonly]):hover) {
+	box-shadow: none;
+	background: none;
+	border: none;
 }
 
-:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] {
+:host(:not([readonly])) .ui5-file-uploader-display-elements,
+:host([readonly][disabled]) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Shadow);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5_input_border_radius);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
+}
+
+/* Value state styles */
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements {
+	box-shadow: var(--ui5_value_state-box-shadow);
+	background: var(--ui5_value_state-background);
+	background-color: var(--ui5_value_state-background-color);
+}
+
+/* Value state hover styles */
+:host([value-state="None"]:not([readonly]):hover) .ui5-file-uploader-display-elements,
+:host(:not([value-state]):not([readonly]):hover) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Hover_Shadow);
+	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
-:host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements {
+	background-color: var(--_ui5_input_value_state_error_hover_background);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements{
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
-:host(:not([disabled]):active) [ui5-button] {
-	background-color: var(--sapButton_Active_Background);
-	border-color: var(--sapButton_Active_BorderColor);
-	color: var(--sapButton_Active_TextColor);
-	text-shadow: none;
+/* Value state focus styles */
+:host([focused][hide-input]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus)::after,
+:host([focused]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+:host([focused]:not([opened]):not([readonly]):not([hide-input]))
+	.ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::after {
+	border-color: var(--ui5_value_state-focus-outline, var(--_ui5_input_focus_outline_color));
 }

package/src/themes/Form.css

@@ -3,6 +3,7 @@
 
 :host {
 	display: block;
+	container-type: inline-size;
 }
 
 .ui5-form-root {
@@ -10,7 +11,6 @@
 	flex-direction: column;
 	background-color: var(--sapGroup_ContentBackground);
     border-radius: 0.75rem;
-	container-type: inline-size;
 }
 
 .ui5-form-header {
@@ -49,3 +49,7 @@
 ::slotted([ui5-form-group]) {
 	display: contents;
 }
+
+dl {
+	all: unset;
+}

package/src/themes/FormItem.css

@@ -1,3 +1,8 @@
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+}
+
 :host([column-span="1"]) {
 	grid-column: span 1;
 }
@@ -23,21 +28,20 @@
 }
 
 .ui5-form-item-root {
-	container-type: inline-size;
 	background-color: inherit;
 	color: inherit;
 }
 
 .ui5-form-item-layout {
 	display: grid;
-	grid-template-columns: var(--ui5-form-item-layout);
+	grid-template-columns: var(--ui5-form-item-layout, 4fr 8fr 0fr);
 	align-items: center;
 }
 
 .ui5-form-item-label {
-	padding: var(--ui5-form-item-label-padding);
-	padding-inline-end: var(--ui5-form-item-label-padding-end);
-	justify-self: var(--ui5-form-item-label-justify);
+	padding: var(--ui5-form-item-label-padding, 0.125rem 0);
+	padding-inline-end: 0.85rem;
+	justify-self: var(--ui5-form-item-label-justify, end);
 }
 
 .ui5-form-item-content {
@@ -90,5 +94,8 @@
 	:host {
 		order: var(--ui5-form-item-order-Xl, unset);
 	}
+}
 
+dd {
+	all: unset;
 }

package/src/themes/FormItemSpan.css

@@ -1,11 +1,16 @@
-/* 
-* By default, 
+/*
+* By default:
 * - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0
 * - in S size, it  the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically.
 *
 * The ratio can be changed via the labelSpan and the emptySpan properties.
 */
 
+:host {
+	--ui5-form-item-label-justify-internal: start;
+	--ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem;
+}
+
 @container (max-width: 600px) {
 	.ui5-form-item,
 	.ui5-form-group {
@@ -14,8 +19,8 @@
 
 	:host([label-span-s="12"]) .ui5-form-item,
 	:host([label-span-s="12"]) .ui5-form-group {
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
 
@@ -27,8 +32,8 @@
 
 	:host([label-span-m="12"]) .ui5-form-item,
 	:host([label-span-m="12"]) .ui5-form-group {
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
 
@@ -40,8 +45,8 @@
 
 	:host([label-span-l="12"]) .ui5-form-item,
 	:host([label-span-l="12"]) .ui5-form-group {
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }
 
@@ -53,7 +58,7 @@
 
 	:host([label-span-xl="12"]) .ui5-form-item,
 	:host([label-span-xl="12"]) .ui5-form-group {
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
 }

package/src/themes/GrowingButton.css

@@ -46,7 +46,7 @@
 
 .ui5-growing-button-text {
 	text-align: center;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/themes/Input.css

@@ -13,7 +13,7 @@
 	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	font-size: var(--sapFontSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-style: normal;
 	border: var(--_ui5-input-border);
 	border-radius: var(--_ui5_input_border_radius);
@@ -509,3 +509,8 @@
 	-webkit-appearance: inherit;
 	margin: inherit;
 }
+
+
+[ui5-responsive-popover] [ui5-input] {
+	width: 100%;
+}

package/src/themes/InputSharedStyles.css

@@ -4,20 +4,18 @@
 	- readonly and disabled states
 */
 
+:host([disabled]) {
+	cursor: default;
+	pointer-events: none;
+	background: none;
+}
+
 :host([readonly]:not([disabled])) {
 	border-color: var(--_ui5_input_readonly_border_color);
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--_ui5_input_readonly_background);
 }
 
-:host([disabled]) {
-	opacity: var(--_ui5_input_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-	background-color: var(--_ui5-input_disabled_background);
-	border-color: var(--_ui5_input_disabled_border_color);
-}
-
 :host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }

package/src/themes/Label.css

@@ -5,7 +5,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapContent_LabelColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	cursor: text;

package/src/themes/List.css

@@ -17,7 +17,8 @@
 }
 
 .ui5-list-root,
-.ui5-list-busy-indicator {
+.ui5-list-busy-indicator,
+.ui5-list-container {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -50,7 +51,7 @@
 	text-overflow: ellipsis;
 	box-sizing: border-box;
 	font-size: var(--sapFontHeader4Size); 
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	color: var(--sapGroup_TitleTextColor);
 	height: 3rem;
 	line-height: 3rem;
@@ -64,7 +65,7 @@
 	box-sizing: border-box;
 	-webkit-text-size-adjust: none;	/* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */
 	font-size: var(--sapFontSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	line-height: 2rem;
 	background-color: var(--sapList_FooterBackground);
 	color: var(--ui5_list_footer_text_color);
@@ -89,7 +90,7 @@
 	outline: none;
     min-height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	position: relative;
 }
 
@@ -111,4 +112,11 @@
 :host([growing="Scroll"]) .ui5-list-end-marker {
 	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
 	display: inline-block;
+}
+
+:host([sticky-header]) ::slotted([slot="header"]),
+:host([sticky-header]) .ui5-list-header {
+	position: sticky;
+    top: 0;
+    z-index: 100;
 }

package/src/themes/ListItem.css

@@ -91,7 +91,7 @@
 }
 
 :host([has-title][description]) .ui5-li-title {
-	padding-bottom: 0.375rem;
+	padding-bottom: 0.5rem;
 }
 
 .ui5-li-text-wrapper {
@@ -99,7 +99,6 @@
 }
 
 :host([description]) .ui5-li-text-wrapper {
-	height: 100%;
 	justify-content: space-between;
 	padding: 0.125rem 0;
 }
@@ -167,15 +166,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([ui5-li][_selection-mode="SingleStart"]) .ui5-li-root {
+:host([_selection-mode="SingleStart"][wrapping-type]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root {
+:host([_selection-mode="Multiple"][wrapping-type]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([ui5-li][_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([_selection-mode="SingleEnd"][wrapping-type]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
@@ -195,19 +194,19 @@
 }
 
 :host([highlight="Negative"]) .ui5-li-highlight {
-	background: var(--sapNegativeTextColor);
+	background: var(--sapErrorBorderColor);
 }
 
 :host([highlight="Critical"]) .ui5-li-highlight {
-	background: var(--sapCriticalTextColor);
+	background: var(--sapWarningBorderColor);
 }
 
 :host([highlight="Positive"]) .ui5-li-highlight {
-	background: var(--sapPositiveTextColor);
+	background: var(--sapSuccessBorderColor);
 }
 
 :host([highlight="Information"]) .ui5-li-highlight {
-	background: var(--sapInformativeTextColor);
+	background: var(--sapInformationBorderColor);
 }
 
 /* wrapping */

package/src/themes/ListItemBase.css

@@ -88,7 +88,7 @@
 	flex: auto;
 	overflow: hidden;
 	max-width: 100%;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	color: var(--sapList_TextColor);
 }
 

package/src/themes/ListItemCustom.css

@@ -29,3 +29,15 @@
 [ui5-radio-button].ui5-li-singlesel-radiobtn {
 	min-width: var(--_ui5_custom_list_item_rb_min_width);
 }
+
+:host([_selection-mode="SingleStart"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_selection-mode="Multiple"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_selection-mode="SingleEnd"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 1rem 0;
+}

package/src/themes/ListItemGroupHeader.css

@@ -6,6 +6,10 @@
 	color: var(--sapList_TableGroupHeaderTextColor);
 }
 
+:host([wrapping-type="Normal"]) {
+	height: auto;
+}
+
 :host([has-border]) {
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
 }

package/src/themes/Menu.css

@@ -19,6 +19,14 @@
 
 .ui5-menu-busy-indicator {
 	width: 100%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.ui5-menu-busy-indicator-main {
+	min-height: var(--_ui5_list_item_base_height);
 }
 
 .ui5-menu-dialog-header {
@@ -53,3 +61,12 @@
 .ui5-menu-back-button {
 	margin-right: 1rem;
 }
+
+.ui5-menu-dialog-footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 1rem;
+	width: 100%;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+}

package/src/themes/MenuItem.css

@@ -5,11 +5,6 @@
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
 }
 
-.ui5-menu-rp.ui5-menu-rp-sub-menu[actual-placement="Start"] {
-	margin-top: 0.25rem;
-	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
-}
-
 :host([disabled]) {
 	pointer-events: initial;
 	opacity: initial;
@@ -49,10 +44,6 @@
 	background-color: var(--sapList_Hover_Background);
 }
 
-:host(:not([is-phone]))::part(native-li) {
-	padding: var(--_ui5_menu_item_padding);
-}
-
 :host::part(additional-text) {
 	margin: unset;
 	margin-inline-start: 1rem;
@@ -67,6 +58,7 @@
 	white-space: nowrap;
 	pointer-events: none;
 	display: inline-block;
+	font-size: var(--sapFontSize);
 }
 
 .ui5-menu-item-dummy-icon {
@@ -84,6 +76,7 @@
 }
 
 :host(:not([is-phone]))::part(native-li) {
+	user-select: none;
 	padding: var(--_ui5_menu_item_padding);
 }
 
@@ -117,6 +110,26 @@
 	min-height: var(--_ui5_list_item_icon_size);
 	display: inline-block;
 	vertical-align: middle;
-	padding-inline-end: 0.5rem;
+	padding-inline-end: 0.75rem;
 	pointer-events: none;
 }
+
+.ui5-menu-item-checked {
+	padding-inline-start: 0.5rem;
+	padding-inline-end: 0;
+	font-weight: normal;
+	text-align: center;
+}
+
+.ui5-menu-item-icon-checked {
+	color: var(--sapContent_BusyColor);
+	padding-top: 0.25rem;
+}
+
+.ui5-menu-busy-indicator {
+	position: absolute;
+	width: 100%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/themes/MessageStrip.css

@@ -77,7 +77,7 @@
 	width: 100%;
 	color: var(--sapTextColor);
 	line-height: 1.2;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 }
 

package/src/themes/MonthPicker.css

@@ -13,7 +13,7 @@
 	padding: 2rem 0 1rem 0;
 	display: flex;
 	flex-direction: column;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	justify-content: center;
 	align-items: center;
@@ -40,7 +40,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	cursor: default;
+	cursor: pointer;
 	outline: none;
 	position: relative;
 	border: var(--_ui5_monthpicker_item_border);