@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/dist/RadioButton.js

@@ -2,8 +2,9 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import {
 	isSpace,
 	isEnter,
@@ -14,6 +15,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Label from "./Label.js";
 import RadioButtonGroup from "./RadioButtonGroup.js";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
@@ -24,18 +26,22 @@ import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-de
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
 
+let isGlobalHandlerAttached = false;
+let activeRadio = null;
+
 /**
  * @public
  */
 const metadata = {
-	tag: "ui5-radiobutton",
+	tag: "ui5-radio-button",
+	altTag: "ui5-radiobutton",
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is disabled.
+		 * Defines whether the component is disabled.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-radiobutton</code> is completely noninteractive.
+		 * <b>Note:</b> A disabled component is completely noninteractive.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -46,9 +52,9 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is read-only.
+		 * Defines whether the component is read-only.
 		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-radiobutton</code> is not editable,
+		 * <b>Note:</b> A read-only component is not editable,
 		 * but still provides visual feedback upon user interaction.
 		 *
 		 * @type {boolean}
@@ -60,22 +66,23 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is selected or not.
+		 * Defines whether the component is checked or not.
 		 * <br><br>
 		 * <b>Note:</b> The property value can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-radiobutton</code>,
+		 * either by clicking/tapping on the component,
 		 * or by using the Space or Enter key.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		selected: {
+		checked: {
 			type: Boolean,
 		},
 
 		/**
-		 * Defines the text of the <code>ui5-radiobutton</code>.
+		 * Defines the text of the component.
 		 *
 		 * @type  {string}
 		 * @defaultvalue ""
@@ -86,7 +93,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-radiobutton</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -105,7 +112,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the <code>ui5-radiobutton</code>.
+		 * Defines the name of the component.
 		 * Radio buttons with the same <code>name</code> will form a radio button group.
 		 *
 		 * <br><br>
@@ -122,7 +129,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-radiobutton</code> so that it can be submitted as
+		 * will be created inside the component so that it can be submitted as
 		 * part of an HTML form.
 		 *
 		 * @type {string}
@@ -134,7 +141,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the form value of the <code>ui5-radiobutton</code>.
+		 * Defines the form value of the component.
 		 * When a form with a radio button group is submitted, the group's value
 		 * will be the value of the currently selected radio button.
 		 * <br>
@@ -150,16 +157,45 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space.
+		 * Defines whether the component text wraps when there is not enough space.
 		 * <br><br>
-		 * <b>Note:</b> By default, the text truncates when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
 		},
 
 		_tabIndex: {
@@ -167,6 +203,14 @@ const metadata = {
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
+		/**
+		 * Defines the active state (pressed or not) of the component.
+		 * @private
+		 */
+		 active: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 		/**
@@ -183,12 +227,13 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-radiobutton</code> selected state changes.
+		 * Fired when the component checked state changes.
 		 *
 		 * @event
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		select: {},
+		change: {},
 	},
 };
 
@@ -197,17 +242,17 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-radiobutton</code> component enables users to select a single option from a set of options.
- * When a <code>ui5-radiobutton</code> is selected by the user, the
- * <code>select</code> event is fired.
- * When a <code>ui5-radiobutton</code> that is within a group is selected, the one
+ * The <code>ui5-radio-button</code> component enables users to select a single option from a set of options.
+ * When a <code>ui5-radio-button</code> is selected by the user, the
+ * <code>change</code> event is fired.
+ * When a <code>ui5-radio-button</code> that is within a group is selected, the one
  * that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
  * <br>
- * <b>Note:</b> If <code>ui5-radiobutton</code> is not part of a group, it can be selected once, but can not be deselected back.
+ * <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.
  *
  * <h3>Keyboard Handling</h3>
  *
- * Once the <code>ui5-radiobutton</code> is on focus, it might be selected by pressing the Space and Enter keys.
+ * Once the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys.
  * <br>
  * The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
  * while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
@@ -222,14 +267,23 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RadioButton
  * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-radiobutton
+ * @tagname ui5-radio-button
  * @public
  */
 class RadioButton extends UI5Element {
 	constructor() {
 		super();
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._deactivate = () => {
+			if (activeRadio) {
+				activeRadio.active = false;
+			}
+		};
+
+		if (!isGlobalHandlerAttached) {
+			document.addEventListener("mouseup", this._deactivate);
+			isGlobalHandlerAttached = true;
+		}
 	}
 
 	static get metadata() {
@@ -253,19 +307,20 @@ class RadioButton extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		RadioButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
 		this.syncGroup();
+
 		this._enableFormSupport();
 	}
 
 	syncGroup() {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
-		const oldSelected = this._selected;
-		const currentSelected = this.selected;
+		const oldChecked = this._checked;
+		const currentChecked = this.checked;
 
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
@@ -281,20 +336,20 @@ class RadioButton extends UI5Element {
 			RadioButtonGroup.enforceSingleSelection(this, currentGroup);
 		}
 
-		if (this.name && currentSelected !== oldSelected) {
+		if (this.name && currentChecked !== oldChecked) {
 			RadioButtonGroup.updateTabOrder(this.name);
 		}
 
 		this._name = this.name;
-		this._selected = this.selected;
+		this._checked = this.checked;
 	}
 
 	_enableFormSupport() {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.selected;
-				nativeInput.value = element.selected ? element.value : "";
+				nativeInput.disabled = element.disabled || !element.checked;
+				nativeInput.value = element.checked ? element.value : "";
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -329,10 +384,12 @@ class RadioButton extends UI5Element {
 
 	_onkeydown(event) {
 		if (isSpace(event)) {
+			this.active = true;
 			return event.preventDefault();
 		}
 
 		if (isEnter(event)) {
+			this.active = true;
 			return this.toggle();
 		}
 
@@ -349,6 +406,21 @@ class RadioButton extends UI5Element {
 		if (isSpace(event)) {
 			this.toggle();
 		}
+
+		this.active = false;
+	}
+
+	_onmousedown() {
+		this.active = true;
+		activeRadio = this; // eslint-disable-line
+	}
+
+	_onmouseup() {
+		this.active = false;
+	}
+
+	_onfocusout() {
+		this.active = false;
 	}
 
 	toggle() {
@@ -357,8 +429,8 @@ class RadioButton extends UI5Element {
 		}
 
 		if (!this.name) {
-			this.selected = !this.selected;
-			this.fireEvent("select");
+			this.checked = !this.checked;
+			this.fireEvent("change");
 			return this;
 		}
 
@@ -367,20 +439,19 @@ class RadioButton extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readonly || this.selected);
+		return !(this.disabled || this.readonly || this.checked);
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
 	get classes() {
 		return {
+			main: {},
 			inner: {
 				"ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			},
@@ -395,8 +466,8 @@ class RadioButton extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+	get ariaLabelText() {
+		return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {

package/dist/RadioButtonGroup.js

@@ -7,12 +7,12 @@ class RadioButtonGroup {
 		return this.groups.get(groupName);
 	}
 
-	static getSelectedRadioFromGroup(groupName) {
-		return this.selectedRadios.get(groupName);
+	static getCheckedRadioFromGroup(groupName) {
+		return this.checkedRadios.get(groupName);
 	}
 
 	static removeGroup(groupName) {
-		this.selectedRadios.delete(groupName);
+		this.checkedRadios.delete(groupName);
 		return this.groups.delete(groupName);
 	}
 
@@ -33,7 +33,7 @@ class RadioButtonGroup {
 		}
 
 		const group = this.getGroup(groupName);
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
 		// Remove the radio button from the given group
 		group.forEach((_radioBtn, idx, arr) => {
@@ -42,8 +42,8 @@ class RadioButtonGroup {
 			}
 		});
 
-		if (selectedRadio === radioBtn) {
-			this.selectedRadios.set(groupName, null);
+		if (checkedRadio === radioBtn) {
+			this.checkedRadios.set(groupName, null);
 		}
 
 		// Remove the group if it is empty
@@ -55,8 +55,8 @@ class RadioButtonGroup {
 	}
 
 	static createGroup(radioBtn, groupName) {
-		if (radioBtn.selected) {
-			this.selectedRadios.set(groupName, radioBtn);
+		if (radioBtn.checked) {
+			this.checkedRadios.set(groupName, radioBtn);
 		}
 
 		this.groups.set(groupName, [radioBtn]);
@@ -82,11 +82,11 @@ class RadioButtonGroup {
 		}
 
 		const group = this.getGroup(groupName);
-		const hasSelectedRadio = group.some(radioBtn => radioBtn.selected);
+		const hasCheckedRadio = group.some(radioBtn => radioBtn.checked);
 
 		group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => {
-			if (hasSelectedRadio) {
-				radioBtn._tabIndex = radioBtn.selected ? "0" : "-1";
+			if (hasCheckedRadio) {
+				radioBtn._tabIndex = radioBtn.checked ? "0" : "-1";
 			} else {
 				radioBtn._tabIndex = idx === 0 ? "0" : "-1";
 			}
@@ -113,25 +113,25 @@ class RadioButtonGroup {
 	}
 
 	static updateSelectionInGroup(radioBtnToSelect, groupName) {
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
-		this._deselectRadio(selectedRadio);
+		this._deselectRadio(checkedRadio);
 		this._selectRadio(radioBtnToSelect);
-		this.selectedRadios.set(groupName, radioBtnToSelect);
+		this.checkedRadios.set(groupName, radioBtnToSelect);
 	}
 
 	static _deselectRadio(radioBtn) {
 		if (radioBtn) {
-			radioBtn.selected = false;
+			radioBtn.checked = false;
 		}
 	}
 
 	static _selectRadio(radioBtn) {
 		if (radioBtn) {
 			radioBtn.focus();
-			radioBtn.selected = true;
-			radioBtn._selected = true;
-			radioBtn.fireEvent("select");
+			radioBtn.checked = true;
+			radioBtn._checked = true;
+			radioBtn.fireEvent("change");
 		}
 	}
 
@@ -171,17 +171,17 @@ class RadioButtonGroup {
 	}
 
 	static enforceSingleSelection(radioBtn, groupName) {
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
-
-		if (radioBtn.selected) {
-			if (!selectedRadio) {
-				this.selectedRadios.set(groupName, radioBtn);
-			} else if (radioBtn !== selectedRadio) {
-				this._deselectRadio(selectedRadio);
-				this.selectedRadios.set(groupName, radioBtn);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
+
+		if (radioBtn.checked) {
+			if (!checkedRadio) {
+				this.checkedRadios.set(groupName, radioBtn);
+			} else if (radioBtn !== checkedRadio) {
+				this._deselectRadio(checkedRadio);
+				this.checkedRadios.set(groupName, radioBtn);
 			}
-		} else if (radioBtn === selectedRadio) {
-			this.selectedRadios.set(groupName, null);
+		} else if (radioBtn === checkedRadio) {
+			this.checkedRadios.set(groupName, null);
 		}
 
 		this.updateTabOrder(groupName);
@@ -194,11 +194,11 @@ class RadioButtonGroup {
 		return this._groups;
 	}
 
-	static get selectedRadios() {
-		if (!this._selectedRadios) {
-			this._selectedRadios = new Map();
+	static get checkedRadios() {
+		if (!this._checkedRadios) {
+			this._checkedRadios = new Map();
 		}
-		return this._selectedRadios;
+		return this._checkedRadios;
 	}
 }
 

package/dist/RangeSlider.js

@@ -1,11 +1,12 @@
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isEscape,
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js";
 
 // Texts
@@ -53,20 +54,19 @@ const metadata = {
 /**
  * @class
  *
- * Represents a numerical interval and two handles (grips) to select a sub-range within it.
- *
  * <h3 class="comment-api-title">Overview</h3>
+ * Represents a numerical interval and two handles (grips) to select a sub-range within it.
  * The purpose of the component to enable visual selection of sub-ranges within a given interval.
  *
  * <h3>Structure</h3>
  * The most important properties of the Range Slider are:
  * <ul>
- * <li>min - The minimum value of the slider range</li>
- * <li>max - The maximum value of the slider range</li>
- * <li>value - The current value of the slider</li>
- * <li>step - Determines the increments in which the slider will move</li>
- * <li>showTooltip - Determines if a tooltip should be displayed above the handle</li>
- * <li>showTickmarks - Displays a visual divider between the step values</li>
+ * <li>min - The minimum value of the slider range.</li>
+ * <li>max - The maximum value of the slider range.</li>
+ * <li>value - The current value of the slider.</li>
+ * <li>step - Determines the increments in which the slider will move.</li>
+ * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>
+ * <li>showTickmarks - Displays a visual divider between the step values.</li>
  * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>
  * </ul>
  * <h4>Notes:</h4>
@@ -75,11 +75,27 @@ const metadata = {
  * <li>The entire range can be moved along the interval.</li>
  * </ul>
  * <h3>Usage</h3>
- * The most common usecase is to select and move sub-ranges on a continuous numerical scale.
+ * The most common use case is to select and move sub-ranges on a continuous numerical scale.
  *
  * <h3>Responsive Behavior</h3>
  * You can move the currently selected range by clicking on it and dragging it along the interval.
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <ul>
+ * <li><code>Left or Down Arrow</code> - Moves a component's handle or the entire selection one step to the left;</li>
+ * <li><code>Right or Up Arrow</code> - Moves a component's handle or the entire selection one step to the right;</li>
+ * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;</li>
+ * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;</li>
+ * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>
+ * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>
+ * <li><code>Home</code> - Moves the entire selection or the selected handle to the beginning of the component's range;</li>
+ * <li><code>End</code> - Moves the entire selection or the selected handle to the end of the component's range;</li>
+ * <li><code>Page Up</code> - Same as <code>Right or Up Arrow + Ctrl/Cmd</code>;</li>
+ * <li><code>Page Down</code> - Same as <code>Left or Down Arrow + Ctrl/Cmd</code>;</li>
+ * <li><code>Escape</code> - Resets the <code>startValue</code> and <code>endValue</code> properties to the values prior the component focusing;</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/RangeSlider";</code>
@@ -109,11 +125,14 @@ class RangeSlider extends SliderBase {
 		};
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
 		this._stateStorage.endValue = null;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get tooltipStartValue() {
@@ -131,7 +150,7 @@ class RangeSlider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return this.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION);
+		return RangeSlider.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION);
 	}
 
 	get _ariaHandlesText() {
@@ -140,11 +159,11 @@ class RangeSlider extends SliderBase {
 		const ariaHandlesText = {};
 
 		if ((isRTL && !isReversed) || (!isRTL && isReversed)) {
-			ariaHandlesText.startHandleText = this.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
-			ariaHandlesText.endHandleText = this.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
+			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
+			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
 		} else {
-			ariaHandlesText.startHandleText = this.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
-			ariaHandlesText.endHandleText = this.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
+			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
+			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
 		}
 
 		return ariaHandlesText;
@@ -177,6 +196,10 @@ class RangeSlider extends SliderBase {
 			this._setInitialValue("startValue", this.startValue);
 			this._setInitialValue("endValue", this.endValue);
 		}
+
+		if (this.showTooltip) {
+			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
+		}
 	}
 
 	/**
@@ -194,10 +217,15 @@ class RangeSlider extends SliderBase {
 	_onfocusout(event) {
 		if (this._isFocusing()) {
 			this._preventFocusOut();
-		} else {
-			this._setAffectedValue(null);
-			this._setInitialValue("startValue", null);
-			this._setInitialValue("endValue", null);
+			return;
+		}
+
+		this._setAffectedValue(null);
+		this._setInitialValue("startValue", null);
+		this._setInitialValue("endValue", null);
+
+		if (this.showTooltip) {
+			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
 		}
 	}
 
@@ -479,7 +507,7 @@ class RangeSlider extends SliderBase {
 	 * - mouse press position - cursor coordinates relative to the start/end handles
 	 * - selected inner element via a keyboard navigation
 	 *
-	 * @param {String} valuePropAffectedByInteraction The value that will get modified by the interaction
+	 * @param {string} valuePropAffectedByInteraction The value that will get modified by the interaction
 	 * @private
 	 */
 	_setAffectedValue(valuePropAffectedByInteraction) {
@@ -710,7 +738,7 @@ class RangeSlider extends SliderBase {
 	get styles() {
 		return {
 			progress: {
-				"transform": `scaleX(${this._selectedRange})`,
+				"width": `${this._selectedRange * 100}%`,
 				"transform-origin": `${this.directionStart} top`,
 				[this.directionStart]: `${this._firstHandlePositionFromStart}%`,
 			},
@@ -737,7 +765,7 @@ class RangeSlider extends SliderBase {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		RangeSlider.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }