@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/src/RangeSlider.js

@@ -26,13 +26,15 @@ const metadata = {
 	tag: "ui5-range-slider",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.RangeSlider.prototype */  {
+	properties: /** @lends sap.ui.webc.main.RangeSlider.prototype */  {
 		/**
 		 * Defines start point of a selection - position of a first handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		startValue: {
@@ -43,8 +45,10 @@ const metadata = {
 		 * Defines end point of a selection - position of a second handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 100
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		endValue: {
@@ -110,8 +114,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.RangeSlider
- * @extends SliderBase
+ * @alias sap.ui.webc.main.RangeSlider
+ * @extends sap.ui.webc.main.SliderBase
  * @tagname ui5-range-slider
  * @since 1.0.0-rc.11
  * @public
@@ -183,7 +187,7 @@ class RangeSlider extends SliderBase {
 	/**
 	 * Check if the previously saved state is outdated. That would mean
 	 * either it is the initial rendering or that a property has been changed
-	 * programatically - because the previous state is always updated in
+	 * programmatically - because the previous state is always updated in
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.
@@ -455,10 +459,6 @@ class RangeSlider extends SliderBase {
 	}
 
 	_handleUp() {
-		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
-			this.fireEvent("change");
-		}
-
 		this._swapValues();
 		this._setAffectedValueByFocusedElement();
 		this._setAffectedValue(null);
@@ -470,6 +470,10 @@ class RangeSlider extends SliderBase {
 		this.handleUpBase();
 
 		this.rangePressed = false;
+
+		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
+			this.fireEvent("change");
+		}
 	}
 
 	/**

package/src/RatingIndicator.js

@@ -18,6 +18,7 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
 import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
@@ -30,7 +31,7 @@ import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
 const metadata = {
 	tag: "ui5-rating-indicator",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	properties: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 
 		/**
 		 * The indicated value of the rating.
@@ -41,7 +42,7 @@ const metadata = {
 		 * <li>1.3 - 1.7 -> 1.5</li>
 		 * <li>1.8 - 1.9 -> 2</li>
 		 * <ul>
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -52,7 +53,7 @@ const metadata = {
 
 		/**
 		 * The number of displayed rating symbols.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 5
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -90,7 +91,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: undefined
@@ -117,10 +118,10 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	slots: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 		//
 	},
-	events: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	events: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 
 		/**
 		 * The event is fired when the value changes.
@@ -167,8 +168,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.RatingIndicator
- * @extends UI5Element
+ * @alias sap.ui.webc.main.RatingIndicator
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8
@@ -194,6 +195,10 @@ class RatingIndicator extends UI5Element {
 		RatingIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 

package/src/ResponsivePopover.js

@@ -17,7 +17,7 @@ import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
  */
 const metadata = {
 	tag: "ui5-responsive-popover",
-	properties: /** @lends sap.ui.webcomponents.main.ResponsivePopover.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ResponsivePopover.prototype */ {
 		/**
 		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
 		 * By default both the header and footer would be displayed.
@@ -73,8 +73,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ResponsivePopover
- * @extends Popover
+ * @alias sap.ui.webc.main.ResponsivePopover
+ * @extends sap.ui.webc.main.Popover
  * @tagname ui5-responsive-popover
  * @since 1.0.0-rc.6
  * @public
@@ -160,7 +160,7 @@ class ResponsivePopover extends Popover {
 	 * @returns {boolean}
 	 */
 	isOpen() {
-		return isPhone() ? this._dialog.isOpen() : super.isOpen();
+		return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
 	}
 
 	get _dialog() {
@@ -205,6 +205,14 @@ class ResponsivePopover extends Popover {
 		this.fireEvent(type, event.detail);
 	}
 
+	get isModal() {
+		if (!isPhone()) {
+			return super.isModal;
+		}
+
+		return this._dialog.isModal;
+	}
+
 	static async onDefine() {
 		ResponsivePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/SegmentedButton.js

@@ -4,7 +4,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isSpace,
 	isEnter,
@@ -23,11 +22,10 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
  */
 const metadata = {
 	tag: "ui5-segmented-button",
-	altTag: "ui5-segmentedbutton",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
+	properties: /** @lends sap.ui.webc.main.SegmentedButton.prototype */  {
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -40,7 +38,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+	slots: /** @lends sap.ui.webc.main.SegmentedButton.prototype */ {
 
 		/**
 		 * Defines the items of <code>ui5-segmented-button</code>.
@@ -48,7 +46,7 @@ const metadata = {
 		 * <b>Note:</b> Multiple items are allowed.
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.
-		 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem[]}
+		 * @type {sap.ui.webc.main.ISegmentedButtonItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -57,12 +55,12 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+	events: /** @lends sap.ui.webc.main.SegmentedButton.prototype */ {
 
 		/**
 		 * Fired when the selected item changes.
 		 *
-		 * @event sap.ui.webcomponents.main.SegmentedButton#selection-change
+		 * @event sap.ui.webc.main.SegmentedButton#selection-change
 		 * @param {HTMLElement} selectedItem the pressed item.
 		 * @public
 		 */
@@ -91,8 +89,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SegmentedButton
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.SegmentedButton
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-segmented-button
  * @since 1.0.0-rc.6
  * @appenddocs SegmentedButtonItem
@@ -175,15 +173,7 @@ class SegmentedButton extends UI5Element {
 
 		this.widths = this.items.map(item => {
 			// +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px
-			let width = item.offsetWidth + 1;
-
-			if (isIE()) {
-				// in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the
-				// longest item is in the middle, it truncates
-				width += 1;
-			}
-
-			return width;
+			return item.offsetWidth + 1;
 		});
 	}
 
@@ -282,7 +272,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISegmentedButtonItem }
+	 * @type {sap.ui.webc.main.ISegmentedButtonItem}
 	 * @public
 	 */
 	get selectedItem() {

package/src/SegmentedButtonItem.js

@@ -10,11 +10,11 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
  */
 const metadata = {
 	tag: "ui5-segmented-button-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webc.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -70,7 +70,7 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
  * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
  * <br><br>
@@ -85,10 +85,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends ToggleButton
+ * @alias sap.ui.webc.main.SegmentedButtonItem
+ * @extends sap.ui.webc.main.ToggleButton
  * @tagname ui5-segmented-button-item
- * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
+ * @implements sap.ui.webc.main.ISegmentedButtonItem
  * @public
  */
 class SegmentedButtonItem extends ToggleButton {

package/src/Select.js

@@ -30,6 +30,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
 	SELECT_ROLE_DESCRIPTION,
@@ -60,7 +64,7 @@ const metadata = {
 	tag: "ui5-select",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Select.prototype */ {
 
 		/**
 		 * Defines the component options.
@@ -71,7 +75,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
-		 * @type {sap.ui.webcomponents.main.ISelectOption[]}
+		 * @type {sap.ui.webc.main.ISelectOption[]}
 		 * @slot options
 		 * @public
 		 */
@@ -109,7 +113,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Select.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Select.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -157,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -179,7 +183,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @since 1.0.0-rc.9
@@ -233,7 +237,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	events: /** @lends sap.ui.webc.main.Select.prototype */ {
 		/**
 		 * Fired when the selected option changes.
 		 *
@@ -275,8 +279,8 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Select
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Select
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-select
  * @appenddocs Option
  * @public
@@ -354,9 +358,9 @@ class Select extends UI5Element {
 	}
 
 	/**
-	 * Currently selected option.
+	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISelectOption }
+	 * @type {sap.ui.webc.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {
@@ -637,7 +641,6 @@ class Select extends UI5Element {
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
 		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
-		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -646,7 +649,6 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
-		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 
@@ -669,17 +671,42 @@ class Select extends UI5Element {
 
 	get valueStateTextMappings() {
 		return {
-			"Success": Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": Select.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": Select.i18nBundle.getText(VALUE_STATE_WARNING),
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
+
+	get valueStateTypeMappings() {
+		return {
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
 		};
 	}
 
 	get valueStateText() {
+		let valueStateText;
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			valueStateText = this.valueStateDefaultText;
+		} else {
+			valueStateText = this.valueStateMessageText.map(el => el.textContent).join(" ");
+		}
+
+		return `${this.valueStateTypeText} ${valueStateText}`;
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
+	get valueStateTypeText() {
+		return this.valueStateTypeMappings[this.valueState];
+	}
+
 	get hasValueState() {
 		return this.valueState !== ValueState.None;
 	}

package/src/Slider.hbs

@@ -32,7 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
-			<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>

package/src/Slider.js

@@ -19,12 +19,14 @@ const metadata = {
 	tag: "ui5-slider",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Slider.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Slider.prototype */  {
 		/**
 		 * Current value of the slider
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -98,8 +100,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Slider
- * @extends SliderBase
+ * @alias sap.ui.webc.main.Slider
+ * @extends sap.ui.webc.main.SliderBase
  * @tagname ui5-slider
  * @since 1.0.0-rc.11
  * @public
@@ -127,7 +129,7 @@ class Slider extends SliderBase {
 	 *
 	 * Check if the previously saved state is outdated. That would mean
 	 * either it is the initial rendering or that a property has been changed
-	 * programatically - because the previous state is always updated in
+	 * programmatically - because the previous state is always updated in
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.

package/src/SliderBase.hbs

@@ -6,6 +6,7 @@
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	part="root-container"
 >
 	{{> handlesAriaText}}
 

package/src/SliderBase.js

@@ -4,7 +4,7 @@ import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import "@ui5/webcomponents-icons/dist/source-code.js";
+import "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import {
 	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -16,11 +16,11 @@ import styles from "./generated/themes/SliderBase.css.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */  {
+	properties: /** @lends sap.ui.webc.main.SliderBase.prototype */  {
 		/**
 		 * Defines the minimum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -31,7 +31,7 @@ const metadata = {
 		/**
 		 * Defines the maximum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 100
 		 * @public
 		 */
@@ -44,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -59,7 +59,7 @@ const metadata = {
 		 * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
 		 * tickmark will be labelled, which means every 4th value number.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -101,7 +101,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -126,7 +126,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ {
+	events: /** @lends sap.ui.webc.main.SliderBase.prototype */ {
 		/**
 		 * Fired when the value changes and the user has finished interacting with the slider.
 		 *
@@ -152,8 +152,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SliderBase
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.SliderBase
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-slider
  * @public
  */
@@ -587,7 +587,7 @@ class SliderBase extends UI5Element {
 		if (this.isPropertyUpdated("min", "max", ...values)) {
 			this.storePropertyState("min", "max");
 
-			// Here the value props are changed programatically (not by user interaction)
+			// Here the value props are changed programmatically (not by user interaction)
 			// and it won't be "stepified" (rounded to the nearest step). 'Clip' them within
 			// min and max bounderies and update the previous state reference.
 			values.forEach(valueType => {
@@ -614,7 +614,7 @@ class SliderBase extends UI5Element {
 	 * current state is changed due to a user action.
 	 *
 	 * Check if the previously saved state is outdated. That would mean
-	 * a property has been changed programatically because the previous state
+	 * a property has been changed programmatically because the previous state
 	 * is always updated in the interaction handlers.
 	 *
 	 * Will return true if any of the properties is not equal to its previously