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

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/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/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.
 

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/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);