@ui5/webcomponents 2.18.0-rc.0 → 2.18.0-rc.2

package/src/BreadcrumbsTemplate.tsx

@@ -52,7 +52,6 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
 						<span
 							id={`${this._id}-labelWrapper`}
-							role="link"
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>

package/src/CalendarHeaderTemplate.tsx

@@ -16,6 +16,11 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onPrevButtonClick}
+				tabindex={this._previousButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipPrevButton}
+				aria-label={this.accInfo.ariaLabelPrevButton}
+				aria-description={this.accInfo.ariaLabelPrevButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
 			</div>
@@ -93,6 +98,11 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				tabindex={this._nextButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipNextButton}
+				aria-label={this.accInfo.ariaLabelNextButton}
+				aria-description={this.accInfo.ariaLabelNextButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutNextButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>

package/src/CalendarTemplate.tsx

@@ -13,6 +13,9 @@ export default function CalendarTemplate(this: Calendar) {
 				class="ui5-cal-root"
 				onKeyDown={this._onkeydown}
 			>
+				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
+					{ CalendarHeaderTemplate.call(this) }
+				</div>
 				<div id={`${this._id}-content`} class="ui5-cal-content">
 					<DayPicker
 						id={`${this._id}-daypicker`}
@@ -88,10 +91,6 @@ export default function CalendarTemplate(this: Calendar) {
 						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
 					/>
 				</div>
-
-				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
-					{ CalendarHeaderTemplate.call(this) }
-				</div>
 			</div>
 
 			<div

package/src/DatePickerTemplate.tsx

@@ -6,6 +6,6 @@ import type DatePicker from "./DatePicker.js";
 export default function DatePickerTemplate(this: DatePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { initialFocus: this.initialFocusId }),
 	];
 }

package/src/DateRangePickerTemplate.tsx

@@ -8,7 +8,7 @@ import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/FileUploaderTemplate.tsx

@@ -20,7 +20,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+				<div class="ui5-file-uploader-form">
 					<input
 						type="file"
 						class="ui5-file-uploader-native-input"
@@ -39,7 +39,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
-				</form>
+				</div>
 
 				{this.hideInput ? (
 					<slot></slot>

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -55,6 +55,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							icon={multiSelectAll}
 							design="Transparent"
 							pressed={this._showAllItemsButtonPressed}
+							disabled={this._getSelectedItems().length === 0}
 							onClick={this.filterSelectedItems}
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>

package/src/RangeSliderTemplate.tsx

@@ -70,14 +70,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.startValue.toString()}
+				value={this.tooltipStartValue}
+				valueState={this.tooltipStartValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-start-value
 				editable={this.editableTooltip}
 				followRef={this._startHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>
@@ -105,14 +109,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.endValue.toString()}
+				value={this.tooltipEndValue}
+				valueState={this.tooltipEndValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-end-value
 				editable={this.editableTooltip}
 				followRef={this._endHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTemplate.tsx

@@ -64,8 +64,12 @@ export function handles(this: Slider) {
 				max={this.max}
 				editable={this.editableTooltip}
 				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
+				valueState={this.tooltipValueState}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTooltipTemplate.tsx

@@ -9,9 +9,10 @@ export default function SliderTooltipTemplate(this: SliderTooltip) {
 					value={this.value}
 					type="Number"
 					accessibleNameRef="ui5-slider-InputLabel"
-					onKeyDown={this._keydown}
 					onFocusIn={this._onInputFocusin}
 					onFocusOut={this._onInputFocusOut}
+					onKeyDown={this._onInputKeydown}
+					onInput={this._onInputInput}
 					tabIndex={-1}
 					data-sap-focus-ref
 					valueState={this.valueState}

package/src/i18n/messagebundle.properties

@@ -16,6 +16,12 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interactive Card Header
 #XACT: ARIA announcement for the Avatar default tooltip
 AVATAR_TOOLTIP=Avatar
 
+#XACT: ARIA type description for interactive Avatar (when the Avatar is a button)
+AVATAR_TYPE_BUTTON=Button
+
+#XACT: ARIA type description for non-interactive Avatar (when the Avatar is an image)
+AVATAR_TYPE_IMAGE=Image
+
 #XACT: ARIA announcement for the Avatar default tooltip
 AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL={0} displayed, {1} hidden.
 
@@ -679,6 +685,30 @@ CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT = Shift + F4
 #XACT: Keyboard shortcut for year range button in the Calendar Header
 CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT = Shift + F4
 
+#XACT: Title for month next button in the Calendar Header
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE = Next Month
+
+#XACT: Title for year next button in the Calendar Header
+CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE = Next Year
+
+#XACT: Title for year range next button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE = Next Year Range
+
+#XACT: Keyboard shortcut for month next button in the Calendar Header
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT = Pageup
+
+#XACT: Title for month previous button in the Calendar Header
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE = Previous Month
+
+#XACT: Title for year previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE = Previous Year
+
+#XACT: Title for year range previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE = Previous Year Range
+
+#XACT: Keyboard shortcut for month previous button in the Calendar Header
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT = Pagedown
+
 #XACT: ARIA label for day picker selected range start
 DAY_PICKER_SELECTED_RANGE_START = {0} First date of range
 

package/src/themes/Calendar.css

@@ -15,8 +15,7 @@
     width: var(--_ui5_calendar_width);
     padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
-    flex-direction: column-reverse;
-    justify-content: flex-end;
+    flex-direction: column;
     overflow: hidden;
 }
 

package/src/themes/CalendarHeader.css

@@ -24,6 +24,8 @@
 	padding: 0;
 	font-size: var(--sapFontSize);
 	user-select: none;
+	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -41,10 +43,6 @@
 	display: none;
 }
 
-.ui5-calheader-arrowbtn:focus {
-	outline: none;
-}
-
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Lite_TextColor);
@@ -103,7 +101,7 @@
 	user-select: none;
 }
 
-.ui5-calheader-middlebtn:focus {
+.ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
 	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
@@ -111,13 +109,13 @@
 	background: var(--_ui5_calendar_header_middle_button_focus_background);
 }
 
-.ui5-calheader-middlebtn:focus:active {
+.ui5-calheader-middlebtn:focus:active, .ui5-calheader-arrowbtn:focus:active {
 	outline: var(--_ui5_calendar_header_middle_button_focus_active_outline);
 	outline-offset: -0.0625rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_active_background)
 }
 
-.ui5-calheader-middlebtn:focus::after {
+.ui5-calheader-middlebtn:focus::after, .ui5-calheader-arrowbtn:focus::after {
 	content: "";
 	display: var(--_ui5_calendar_header_middle_button_focus_after_display);
 	width: var(--_ui5_calendar_header_middle_button_focus_after_width);
@@ -128,6 +126,6 @@
 	left: var(--_ui5_calendar_header_middle_button_focus_after_left_offset);
 }
 
-.ui5-calheader-middlebtn:focus:active::after {
+.ui5-calheader-middlebtn:focus:active::after, .ui5-calheader-arrowbtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }

package/src/themes/CheckBox.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/DatePicker.css

@@ -1,6 +1,7 @@
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 @import "./InputSharedStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RadioButton.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RatingIndicator.css

@@ -1,3 +1,5 @@
+ @import "./FormComponents.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	font-size: 24px;

package/src/themes/SliderBase.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host([disabled]) {
 	opacity: var(--_ui5_slider_disabled_opacity);
@@ -9,7 +10,6 @@
 :host {
 	box-sizing: border-box;
 	cursor: pointer;
-	vertical-align: top;
 	width: 100%;
 }
 

package/src/themes/StepInput.css

@@ -5,7 +5,6 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	width: 100%;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;

package/src/themes/Switch.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/Text.css

@@ -15,7 +15,7 @@
 }
 
 :host(:not([max-lines="1"])) {
-	display: -webkit-box;
+	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;

package/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,6 +40,11 @@
 	pointer-events: none;
 }
 
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
 :host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);

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

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);

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

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);