@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

package/dist/SegmentedButtonItem.js

@@ -1,6 +1,7 @@
 import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
 import ToggleButton from "./ToggleButton.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
 
 import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
@@ -9,10 +10,12 @@ 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.webcomponents.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
+		 * @type {ButtonDesign}
+		 * @defaultvalue "Default"
 		 * @public
 		 */
 		design: {
@@ -23,6 +26,8 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @public
 		 */
 		iconEnd: {
@@ -32,16 +37,8 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @public
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
-		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @public
 		 */
 		submits: {
@@ -52,7 +49,7 @@ const metadata = {
 		 * Defines the index of the item inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		posInSet: {
 			type: String,
@@ -62,7 +59,7 @@ const metadata = {
 		 * Defines how many items are inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		sizeOfSet: {
 			type: String,
@@ -73,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>
@@ -91,6 +88,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.SegmentedButtonItem
  * @extends ToggleButton
  * @tagname ui5-segmented-button-item
+ * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
  * @public
  */
 class SegmentedButtonItem extends ToggleButton {
@@ -102,8 +100,12 @@ class SegmentedButtonItem extends ToggleButton {
 		return SegmentedButtonItemTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	get ariaDescription() {
-		return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
+		return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 	}
 }
 

package/dist/Select.js

@@ -12,11 +12,16 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -26,6 +31,8 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
+	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -102,7 +109,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Select.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Select.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -172,9 +179,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @since 1.0.0-rc.9
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -186,7 +193,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the select.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -262,18 +269,10 @@ const metadata = {
  * </ul>
  * <br>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-option</code> that you provide.
- * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code>
+ * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Select
@@ -318,7 +317,6 @@ class Select extends UI5Element {
 		this._lastSelectedOption = null;
 		this._typedChars = "";
 		this._typingTimeoutID = -1;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -334,6 +332,8 @@ class Select extends UI5Element {
 				this._listWidth = this.responsivePopover.offsetWidth;
 			}
 		}
+
+		this._attachRealDomRefs();
 	}
 
 	_onfocusin() {
@@ -342,7 +342,6 @@ class Select extends UI5Element {
 
 	_onfocusout() {
 		this.focused = false;
-		this.itemSelectionAnnounce();
 	}
 
 	get _isPickerOpen() {
@@ -357,11 +356,11 @@ class Select extends UI5Element {
 	/**
 	 * Currently selected option.
 	 * @readonly
-	 * @type { ui5-option }
+	 * @type { sap.ui.webcomponents.main.ISelectOption }
 	 * @public
 	 */
 	get selectedOption() {
-		return this.options.find(option => option.selected);
+		return this._filteredItems.find(option => option.selected);
 	}
 
 	async _toggleRespPopover() {
@@ -378,15 +377,24 @@ class Select extends UI5Element {
 		}
 	}
 
+	async _attachRealDomRefs() {
+		this.responsivePopover = await this._respPopover();
+
+		this.options.forEach(option => {
+			option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
+		});
+	}
+
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
-		const opts = this.options.map((opt, index) => {
+		const options = this._filteredItems;
+		const syncOpts = options.map((opt, index) => {
 			if (opt.selected || opt.textContent === this.value) {
 				// The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
 				lastSelectedOptionIndex = index;
 			}
-			if (!opt.disabled && (firstEnabledOptionIndex === -1)) {
+			if (firstEnabledOptionIndex === -1) {
 				firstEnabledOptionIndex = index;
 			}
 
@@ -396,36 +404,37 @@ class Select extends UI5Element {
 			return {
 				selected: false,
 				_focused: false,
-				disabled: opt.disabled,
 				icon: opt.icon,
 				value: opt.value,
 				textContent: opt.textContent,
+				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
 		});
 
-		if (lastSelectedOptionIndex > -1 && !opts[lastSelectedOptionIndex].disabled) {
-			opts[lastSelectedOptionIndex].selected = true;
-			opts[lastSelectedOptionIndex]._focused = true;
-			this.options[lastSelectedOptionIndex].selected = true;
-			this.options[lastSelectedOptionIndex]._focused = true;
-			this._text = opts[lastSelectedOptionIndex].textContent;
+		if (lastSelectedOptionIndex > -1 && !syncOpts[lastSelectedOptionIndex].disabled) {
+			syncOpts[lastSelectedOptionIndex].selected = true;
+			syncOpts[lastSelectedOptionIndex]._focused = true;
+			options[lastSelectedOptionIndex].selected = true;
+			options[lastSelectedOptionIndex]._focused = true;
+			this._text = syncOpts[lastSelectedOptionIndex].textContent;
 			this._selectedIndex = lastSelectedOptionIndex;
 		} else {
 			this._text = "";
 			this._selectedIndex = -1;
-			if (opts[firstEnabledOptionIndex]) {
-				opts[firstEnabledOptionIndex].selected = true;
-				opts[firstEnabledOptionIndex]._focused = true;
-				this.options[firstEnabledOptionIndex].selected = true;
-				this.options[firstEnabledOptionIndex]._focused = true;
+			if (syncOpts[firstEnabledOptionIndex]) {
+				syncOpts[firstEnabledOptionIndex].selected = true;
+				syncOpts[firstEnabledOptionIndex]._focused = true;
+				options[firstEnabledOptionIndex].selected = true;
+				options[firstEnabledOptionIndex]._focused = true;
 				this._selectedIndex = firstEnabledOptionIndex;
-				this._text = this.options[firstEnabledOptionIndex].textContent;
+				this._text = options[firstEnabledOptionIndex].textContent;
 			}
 		}
 
-		this._syncedOptions = opts;
+		this._syncedOptions = syncOpts;
 	}
 
 	_enableFormSupport() {
@@ -462,14 +471,11 @@ class Select extends UI5Element {
 			this._handleSelectionChange();
 		} else if (isUp(event) || isDown(event)) {
 			this._handleArrowNavigation(event);
-		} else {
-			this._handleKeyboardNavigation(event);
 		}
 	}
 
 	_handleKeyboardNavigation(event) {
-		// Waiting for the actual symbol to trigger the keydown event
-		if (event.shiftKey && event.key === "Shift") {
+		if (isEnter(event)) {
 			return;
 		}
 
@@ -498,7 +504,7 @@ class Select extends UI5Element {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._getSelectedItemIndex(itemToSelect);
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -509,7 +515,7 @@ class Select extends UI5Element {
 	}
 
 	_searchNextItemByText(text) {
-		let orderedOptions = this.options.slice(0);
+		let orderedOptions = this._filteredItems.slice(0);
 		const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
 		const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
 
@@ -524,7 +530,7 @@ class Select extends UI5Element {
 	}
 
 	_handleEndKey(event) {
-		const lastIndex = this.options.length - 1;
+		const lastIndex = this._filteredItems.length - 1;
 
 		event.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, lastIndex);
@@ -541,13 +547,13 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
-		this.options[this._selectedIndex].selected = false;
+		this._filteredItems[this._selectedIndex].selected = false;
 		this._selectedIndex = index;
-		this.options[index].selected = true;
+		this._filteredItems[index].selected = true;
 	}
 
 	/**
@@ -555,7 +561,7 @@ class Select extends UI5Element {
 	 * @private
 	 */
 	_handleItemPress(event) {
-		const item = event.detail.item;
+		const item = event.detail.selectedItems[0];
 		const selectedItemIndex = this._getSelectedItemIndex(item);
 
 		this._handleSelectionChange(selectedItemIndex);
@@ -604,17 +610,19 @@ class Select extends UI5Element {
 	}
 
 	_changeSelectedItem(oldIndex, newIndex) {
-		this.options[oldIndex].selected = false;
-		this.options[oldIndex]._focused = false;
+		const options = this._filteredItems;
+
+		options[oldIndex].selected = false;
+		options[oldIndex]._focused = false;
 
-		this.options[newIndex].selected = true;
-		this.options[newIndex]._focused = true;
+		options[newIndex].selected = true;
+		options[newIndex]._focused = true;
 
 		this._selectedIndex = newIndex;
 
 		if (!this._isPickerOpen) {
 			// arrow pressed on closed picker - do selection change
-			this._fireChangeEvent(this.options[newIndex]);
+			this._fireChangeEvent(options[newIndex]);
 		}
 	}
 
@@ -628,7 +636,8 @@ class Select extends UI5Element {
 
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
-		this._lastSelectedOption = this.options[this._selectedIndex];
+		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -637,15 +646,16 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
+		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 
 		if (this._escapePressed) {
 			this._select(this._selectedIndexBeforeOpen);
 			this._escapePressed = false;
-		} else if (this._lastSelectedOption !== this.options[this._selectedIndex]) {
-			this._fireChangeEvent(this.options[this._selectedIndex]);
-			this._lastSelectedOption = this.options[this._selectedIndex];
+		} else if (this._lastSelectedOption !== this._filteredItems[this._selectedIndex]) {
+			this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
+			this._lastSelectedOption = this._filteredItems[this._selectedIndex];
 		}
 	}
 
@@ -658,13 +668,11 @@ class Select extends UI5Element {
 	}
 
 	get valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"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),
 		};
 	}
 
@@ -685,15 +693,15 @@ class Select extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _currentSelectedItem() {
-		return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`);
+		return this.shadowRoot.querySelector(`#${this._filteredItems[this._selectedIndex]._id}-li`);
 	}
 
 	get _currentlySelectedOption() {
-		return this.options[this._selectedIndex];
+		return this._filteredItems[this._selectedIndex];
 	}
 
 	get tabIndex() {
@@ -702,6 +710,20 @@ class Select extends UI5Element {
 		&& this.responsivePopover.opened) ? "-1" : "0";
 	}
 
+	 /**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
@@ -711,17 +733,23 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
+			popover: {
+				"ui5-select-popover-valuestate": this.hasValueState,
+			},
 		};
 	}
 
 	get styles() {
 		return {
 			popoverHeader: {
-				"width": `${this.offsetWidth}px`,
+				"max-width": `${this.offsetWidth}px`,
 			},
 			responsivePopoverHeader: {
-				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
-				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
+				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
+			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
 			},
 		};
 	}
@@ -747,17 +775,27 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}
 
+	get _filteredItems() {
+		return this.options.filter(option => !option.disabled);
+	}
+
 	itemSelectionAnnounce() {
-		const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
+		let text;
+		const optionsCount = this._filteredItems.length;
+		const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
 
 		if (this.focused && this._currentlySelectedOption) {
-			invisibleText.textContent = this._currentlySelectedOption.textContent;
-		} else {
-			invisibleText.textContent = "";
+			text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
+
+			announce(text, "Polite");
 		}
 	}
 
@@ -801,6 +839,10 @@ class Select extends UI5Element {
 			Button,
 		];
 	}
+
+	static async onDefine() {
+		Select.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Select.define();

package/dist/Slider.js

@@ -1,7 +1,8 @@
 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 } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 
 // Template
 import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
@@ -44,24 +45,24 @@ const metadata = {
  * <h3>Structure</h3>
  * The most important properties of the 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 range.</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>
  *
  * <h3>Usage</h3>
- * The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
+ * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
  *
  * <h3>Responsive Behavior</h3>
  * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and
  * resizing the width of the control. You can move the slider handle in several different ways:
  * <ul>
- * <li>Drag and drop to the desired value</li>
- * <li>Click/tap on the range bar to move the handle to that location</li>
+ * <li>Drag and drop the handle to the desired value.</li>
+ * <li>Click/tap on the range bar to move the handle to that location.</li>
  * </ul>
  *
  * <h3>CSS Shadow Parts</h3>
@@ -70,9 +71,9 @@ const metadata = {
  * <br>
  * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>progress-container - Used to style the progress container(the thin line) of the <code>ui5-slider</code></li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code></li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code></li>
+ * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
+ * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
+ * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
  * </ul>
  *
  * <h3>Keyboard Handling</h3>
@@ -82,12 +83,12 @@ const metadata = {
  * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>
  * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li>
  * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the 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>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 handle to the beginning of the range;</li>
  * <li><code>End</code> - Moves the handle to the end of the range;</li>
- * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code></li>
- * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code></li>
+ * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>
+ * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>
  * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>
  * </ul>
  *
@@ -116,7 +117,10 @@ class Slider extends SliderBase {
 		super();
 		this._stateStorage.value = null;
 		this._setInitialValue("value", null);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	static get dependencies() {
+		return [Icon];
 	}
 
 	/**
@@ -127,7 +131,7 @@ class Slider extends SliderBase {
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.
-	 * Update the visual UI representation of the Slider
+	 * Update the visual UI representation of the Slider.
 	 *
 	 */
 	onBeforeRendering() {
@@ -274,9 +278,6 @@ class Slider extends SliderBase {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
 			label: {
 				"width": `${this._labelWidth}%`,
 			},
@@ -308,11 +309,26 @@ class Slider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return this.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Slider.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [true, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			arr.push(this._effectiveMin + (i * this.step) <= this.value);
+		}
+
+		return arr;
 	}
 }