@ui5/webcomponents 1.24.3 → 1.24.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.24.3",
+  "version": "1.24.5",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -48,16 +48,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.24.3",
-    "@ui5/webcomponents-icons": "1.24.3",
-    "@ui5/webcomponents-icons-business-suite": "1.24.3",
-    "@ui5/webcomponents-icons-tnt": "1.24.3",
-    "@ui5/webcomponents-localization": "1.24.3",
-    "@ui5/webcomponents-theming": "1.24.3"
+    "@ui5/webcomponents-base": "1.24.5",
+    "@ui5/webcomponents-icons": "1.24.5",
+    "@ui5/webcomponents-icons-business-suite": "1.24.5",
+    "@ui5/webcomponents-icons-tnt": "1.24.5",
+    "@ui5/webcomponents-localization": "1.24.5",
+    "@ui5/webcomponents-theming": "1.24.5"
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.24.3",
-    "chromedriver": "^123.0.3"
+    "chromedriver": "^124.0.4"
   },
-  "gitHead": "648717aabe3e9e1570ea54100edd5e922cd1b651"
+  "gitHead": "3837d57a145623534461a6cfdf8611bbdfede29c"
 }

package/src/Button.hbs

@@ -18,6 +18,7 @@
 	aria-controls="{{accessibilityAttributes.controls}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
+	aria-describedby="{{ariaDescribedbyText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{buttonAccessibleRole}}"
@@ -39,7 +40,7 @@
 	</span>
 
 	{{#if hasButtonType}}
-		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+		<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{{buttonTypeText}}</span>
 	{{/if}}
 </button>
 

package/src/Calendar.hbs

@@ -67,8 +67,8 @@
 			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
 			@ui5-previous-press="{{onHeaderPreviousPress}}"
 			@ui5-next-press="{{onHeaderNextPress}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 	></ui5-calendar-header>
 </div>
 

package/src/DatePickerPopover.hbs

@@ -3,6 +3,7 @@
 	allow-target-overlap
 	placement-type="Bottom"
 	horizontal-align="Left"
+	accessible-name="{{pickerAccessibleName}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
@@ -45,8 +46,8 @@
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
 		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-		@ui5-show-year-press="{{onHeaderShowYearPress}}"
+		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
 		._pickersMode="{{_calendarPickersMode}}"

package/src/DateTimePickerPopover.hbs

@@ -25,8 +25,8 @@
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>

package/src/MonthPicker.hbs

@@ -9,7 +9,7 @@
 	@click={{_selectMonth}}
 >
 	{{#each _months}}
-		<div class="ui5-mp-quarter">
+		<div role="row" class="ui5-mp-quarter">
 
 			{{#each this}}
 				<div

package/src/TimePickerPopover.hbs

@@ -6,6 +6,7 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
+	accessible-name="{{pickerAccessibleName}}"
 	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"

package/src/YearPicker.hbs

@@ -9,7 +9,7 @@
 	@click={{_selectYear}}
 >
 	{{#each _years}}
-		<div class="ui5-yp-interval-container">
+		<div role="row" class="ui5-yp-interval-container">
 			{{#each this}}
 				<div
 					data-sap-timestamp="{{this.timestamp}}"

package/src/i18n/messagebundle.properties

@@ -157,6 +157,15 @@ DATETIME_DESCRIPTION=Date Time Input
 #XACT: Aria information for the Date Range Picker
 DATERANGE_DESCRIPTION=Date Range Input
 
+#XACT: Aria information for the Date Picker popover
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date
+
+#XACT: Aria information for the Date Time Picker popover
+DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date and Time
+
+#XACT: Aria information for the Date Range Picker popover
+DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date Range
+
 DELETE=Delete
 
 FILEUPLOAD_BROWSE=Browse...
@@ -376,6 +385,9 @@ TIMEPICKER_CANCEL_BUTTON=Cancel
 #XACT: Aria information for the Time Picker
 TIMEPICKER_INPUT_DESCRIPTION=Time Input
 
+#XACT: Aria information for the Time Picker popover
+TIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Time
+
 #XACT: Aria information for the Time Picker Clock Dial
 TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial
 

package/src/themes/BusyIndicator.css

@@ -89,6 +89,10 @@
 	flex-direction: column;
 }
 
+:host(:not(:empty)) .ui5-busy-indicator-busy-area {
+	background-color: var(--_ui5_busy_indicator_block_layer);
+}
+
 .ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;

package/src/themes/TimePicker.css

@@ -1,6 +1,7 @@
 @import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
+@import "./InputSharedStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -43,28 +44,4 @@
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	margin: inherit;
-}
-
-.ui5-time-picker-input-icon-button {
-	border-left: 0.0625rem solid transparent;
-}
-
-.ui5-time-picker-input-icon-button {
-	border-left: 0.0625rem solid transparent;
-}
-
-.ui5-time-picker-input-icon-button:hover {
-	cursor: pointer;
-	border-left: var(--_ui5_time_picker_border);
-	background: var(--sapButton_Hover_Background);
-}
-
-.ui5-time-picker-input-icon-button:active {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
-}
-
-.ui5-time-picker-input-icon-button[pressed] {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
 }

package/src/themes/TreeItem.css

@@ -20,14 +20,14 @@
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
-:host([_toggle-button-end]: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);
+:host([_toggle-button-end]) .ui5-li-root-tree:hover,
+:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active])) .ui5-li-root-tree:hover {
 	cursor: pointer;
 }
 
-:host([_toggle-button-end]) .ui5-li-root-tree:hover {
-	cursor: pointer;
+:host([_toggle-button-end]: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);
 }
 
 :host(:not([level="1"]):not([active]):not([selected])) .ui5-li-root-tree {
@@ -44,7 +44,6 @@
 
 :host(:not([_mode="None"]):not([_mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
 	background-color: var(--sapList_Hover_SelectionBackground);
-	cursor: pointer;
 }
 
 .ui5-li-tree-toggle-box {

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

@@ -2,4 +2,5 @@
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_busy_indicator_focus_border_radius: 0px;
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
 }

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

@@ -0,0 +1,8 @@
+@import "../base/Switch-parameters.css";
+
+:root {
+	--_ui5_switch_track_active_background_color: var(--sapButton_Track_Background);
+	--_ui5_switch_track_hover_active_background_color: var(--sapButton_Track_Background);
+	--_ui5_switch_track_active_border_color: var(--sapContent_ForegroundBorderColor);
+	--_ui5_switch_track_hover_active_border_color: var(--sapButton_Hover_BorderColor);
+}

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

@@ -36,7 +36,7 @@
 @import "../base/Select-parameters.css";
 @import "./SplitButton-parameters.css";
 @import "./ToggleButton-parameters.css";
-@import "../base/Switch-parameters.css";
+@import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
 @import "./Table-parameters.css";
 @import "../base/TableColumn-parameters.css";

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

@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}

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

@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

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

@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}

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

@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

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

@@ -1,8 +1,3 @@
-[dir="rtl"] {
-	--_ui5_progress_indicator_bar_border_radius: 0.5rem;
-    --_ui5_progress_indicator_remaining_bar_border_radius: 0.25rem;
-}
-
 :root {
     --_ui5_progress_indicator_icon_visibility: inline-block;
 

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

@@ -1,6 +1,8 @@
 @import "../base/rtl-parameters.css";
 
 [dir="rtl"] {
+	--_ui5_progress_indicator_bar_border_radius: 0.5rem;
+	--_ui5_progress_indicator_remaining_bar_border_radius: 0.25rem;
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }