@ui5/webcomponents 1.24.0 → 1.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -48,16 +48,15 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.24.0",
-    "@ui5/webcomponents-icons": "1.24.0",
-    "@ui5/webcomponents-icons-business-suite": "1.24.0",
-    "@ui5/webcomponents-icons-tnt": "1.24.0",
-    "@ui5/webcomponents-localization": "1.24.0",
-    "@ui5/webcomponents-theming": "1.24.0"
+    "@ui5/webcomponents-base": "1.24.2",
+    "@ui5/webcomponents-icons": "1.24.2",
+    "@ui5/webcomponents-icons-business-suite": "1.24.2",
+    "@ui5/webcomponents-icons-tnt": "1.24.2",
+    "@ui5/webcomponents-localization": "1.24.2",
+    "@ui5/webcomponents-theming": "1.24.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.0",
-    "chromedriver": "^122.0.6"
-  },
-  "gitHead": "975b7c86db3497d35c974df0a6cde9dd3d21c70b"
-}
+    "@ui5/webcomponents-tools": "1.24.2",
+    "chromedriver": "^123.0.3"
+  }
+}

package/src/FileUploader.hbs

@@ -7,6 +7,8 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
+	@dragover="{{_ondrag}}"
+	@drop="{{_ondrop}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

package/src/MonthPicker.hbs

@@ -33,4 +33,4 @@
 
 		</div>
 	{{/each}}
-</div>
+</div>

package/src/ResponsivePopover.hbs

@@ -4,7 +4,8 @@
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}
 		stretch
-		_disable-initial-focus
+		?_disable-initial-focus="{{_disableInitialFocus}}"
+		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
 		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"

package/src/SelectPopover.hbs

@@ -50,7 +50,7 @@
 					id="{{this.id}}-li"
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
-					?focused="{{this._focused}}"
+					?focused="{{this.focused}}"
 					title="{{this.title}}"
 					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"

package/src/StepInput.hbs

@@ -35,7 +35,7 @@
 			class="ui5-step-input-input"
 			placeholder="{{placeholder}}"
 			type="{{type}}"
-			value="{{_valuePrecisioned}}"
+			value="{{_displayValue}}"
 			?disabled="{{disabled}}"
 			?required="{{required}}"
 			?readonly="{{readonly}}"

package/src/ToggleSpinButton.hbs

@@ -6,5 +6,4 @@
 	aria-valuemax="{{valueMax}}"
 	aria-valuenow="{{valueNow}}"
 	aria-valuetext="{{valueText}}"
-	role="spinbutton"
 {{/inline}}

package/src/themes/Calendar.css

@@ -11,6 +11,7 @@
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;
+    overflow: hidden;
 }
 
 .ui5-cal-root [ui5-calendar-header] {

package/src/themes/DayPicker.css

@@ -223,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);
 }
@@ -240,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);
 }

package/src/themes/Dialog.css

@@ -75,6 +75,7 @@
 
 .ui5-dialog-value-state-icon {
 	margin-inline-end: 0.5rem;
+	flex-shrink: 0;
 }
 
 :host([state="Error"]) .ui5-dialog-value-state-icon {

package/src/themes/Link.css

@@ -72,14 +72,14 @@
 }
 
 :host .ui5-link-root {
-	border: var(--_ui5_link_border);
+	outline-offset: -0.0625rem;
 	border-radius: var(--_ui5_link_focus_border-radius);
 }
 
 :host([focused]) .ui5-link-root,
 :host([design="Subtle"][focused]) .ui5-link-root {
 	background-color: var(--_ui5_link_focus_background_color);
-	border: var(--_ui5_link_border_focus);
+	outline: var(--_ui5_link_outline);
 	border-radius: var(--_ui5_link_focus_border-radius);
 	text-shadow: none;
 }

package/src/themes/MenuListItem.css

@@ -18,6 +18,11 @@
 	color: var(--sapContent_NonInteractiveIconColor);
 }
 
+:host([active][actionable]:not([disabled]))::part(content),
+:host([active][actionable]:not([disabled]))::part(additional-text)  {
+	color: var(--sapList_Active_TextColor);
+}
+
 :host([focused]:not([active]):not([disabled])) {
 	background-color: var(--sapList_Hover_Background);
 }

package/src/themes/MonthPicker.css

@@ -1,3 +1,4 @@
+
 :host(:not([hidden])) {
 	display: block;
 }
@@ -8,6 +9,7 @@
 }
 
 .ui5-mp-root {
+	box-sizing: border-box;
 	padding: 2rem 0 1rem 0;
 	display: flex;
 	flex-direction: column;
@@ -86,3 +88,24 @@
 	align-items: center;
 	width: 100%;
 }
+
+/* Switching to a two column layout */
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-root,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-root {
+	display: grid;
+	padding: 0.5625rem 0;
+	grid-template-columns: repeat(2, 1fr);
+	gap: var(--_ui5_monthpicker_item_margin);
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-item,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-item {
+	margin: 0;
+	width: auto;
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-quarter,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-quarter {
+	width: 100%;
+	display: contents;
+}

package/src/themes/ProgressIndicator.css

@@ -38,7 +38,6 @@
 	box-sizing: border-box;
 	border: var(--_ui5_progress_indicator_bar_border_max);
 	border-radius: var(--_ui5_progress_indicator_bar_border_radius);
-	z-index: 1;
 }
 
 .ui5-progress-indicator-min-value .ui5-progress-indicator-bar,

package/src/themes/SplitButton.css

@@ -48,6 +48,7 @@
 
 :host([disabled]:not([hidden])) {
 	pointer-events: none;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 :host([design="Positive"]:not([hidden])) {

package/src/themes/StepInput.css

@@ -20,6 +20,7 @@
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
 	position: relative;
+	margin: var(--_ui5_input_margin_top_bottom) 0;
 	min-width: var(--_ui5_step_input_min_width);
 	text-align: right;
 	user-select: none;

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

@@ -31,11 +31,11 @@
 	--_ui5_daypicker_item_now_outline: none;
 	--_ui5_daypicker_item_now_outline_offset: none;
 	--_ui5_daypicker_item_now_outline_offset_focus_after: var(--_ui5_daypicker_item_now_outline_offset);
-	--_ui5_daypicker_item_selected_between_border: 5%;
-	--_ui5_daypicker_item_selected_between_background: transparent;
+	--_ui5_daypicker_item_selected_between_border: 0.25rem;
+	--_ui5_daypicker_item_selected_between_background: var(--sapList_SelectionBackgroundColor);
 	--_ui5_daypicker_item_selected_between_text_background: var(--sapList_SelectionBackgroundColor);
 	--_ui5_daypicker_item_selected_between_text_font: inherit;
-	--_ui5_daypicker_item_selected_between_hover_background: inherit;
+	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_ui5_daypicker_item_now_box_shadow: inset 0 0 0 0.0625rem var(--_ui5_daypicker_item_selected_border_color);
 	--_ui5_daypicker_item_selected_text_outline: none;
 	--_ui5_daypicker_item_now_not_selected_inset: 0;

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

@@ -4,8 +4,7 @@
 	--_ui5_link_focused_hover_text_decoration: underline;
 	--_ui5_link_focused_hover_text_color: var(--sapLinkColor);
 	--_ui5_link_active_text_decoration: underline;
-	--_ui5_link_border: 0.0625rem dotted transparent;
-	--_ui5_link_border_focus: 0.0625rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.0625rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_focus_border-radius: 0;
 	--_ui5_link_focus_background_color: transparent;
 	--_ui5_link_focus_color: var(--sapLinkColor);

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

@@ -3,6 +3,5 @@
 :root {
 	--_ui5_link_text_decoration: underline;
 	--_ui5_link_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

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

@@ -3,6 +3,5 @@
 :root {
 	--_ui5_link_text_decoration: underline;
 	--_ui5_link_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

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

@@ -6,8 +6,7 @@
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 }

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

@@ -6,8 +6,7 @@
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 }

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

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

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

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

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

package/src/themes/sap_horizon_dark_exp/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

package/src/themes/sap_horizon_exp/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

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

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

package/src/themes/sap_horizon_hcb_exp/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 }

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

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

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

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

@@ -25,7 +25,6 @@
 	--_ui5_daypicker_item_selected_between_text_background: transparent;
 	--_ui5_daypicker_item_selected_between_text_font: var(--sapFontFamily);
 	--_ui5_daypicker_item_selected_text_font: var(--sapFontBoldFamily);
-	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_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_now_selected_outline_offset: -0.25rem;

package/src/themes/sap_horizon_hcw_exp/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 }