@ui5/webcomponents 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/dist/Tokenizer.js

@@ -4,7 +4,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -27,6 +27,9 @@ import styles from "./generated/themes/Tokenizer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
+// reuse suggestions focus styling for NMore popup
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+
 /**
  * @public
  */
@@ -125,7 +128,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get staticAreaTemplate() {
@@ -147,7 +150,6 @@ class Tokenizer extends UI5Element {
 		});
 
 		this._scrollEnablement = new ScrollEnablement(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	async onBeforeRendering() {
@@ -273,7 +275,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	get _nMoreText() {
-		return this.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this._nMoreCount]);
+		return Tokenizer.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
 	}
 
 	get showNMore() {
@@ -285,11 +287,11 @@ class Tokenizer extends UI5Element {
 	}
 
 	get tokenizerLabel() {
-		return this.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
 	}
 
 	get morePopoverTitle() {
-		return this.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
 	}
 
 	get overflownTokens() {
@@ -297,13 +299,20 @@ class Tokenizer extends UI5Element {
 			return [];
 		}
 
+		// Reset the overflow prop of the tokens first in order
+		// to use their dimensions for calculation because already
+		// hidden tokens are set to 'display: none'
+		this._getTokens().forEach(token => {
+			token.overflows = false;
+		});
+
 		return this._getTokens().filter(token => {
 			const isRTL = this.effectiveDir === "rtl";
 			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenEnd = tokenRect[elementEnd];
-			const parentEnd = parentRect[elementEnd];
+			const tokenEnd = parseInt(tokenRect[elementEnd]);
+			const parentEnd = parseInt(parentRect[elementEnd]);
 
 			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
 
@@ -353,7 +362,6 @@ class Tokenizer extends UI5Element {
 			popoverValueStateMessage: {
 				"width": isPhone() ? "100%" : `${this.popoverMinWidth}px`,
 				"min-height": "2rem",
-				"padding": isPhone() ? "0.25rem 1rem" : "0.3rem 0.625rem",
 			},
 			popoverHeader: {
 				"min-height": "2rem",
@@ -368,14 +376,14 @@ class Tokenizer extends UI5Element {
 		const iTokenCount = this._getTokens().length;
 
 		if (iTokenCount === 0) {
-			return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_TOKEN);
+			return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_TOKEN);
 		}
 
 		if (iTokenCount === 1) {
-			return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
+			return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
 		}
 
-		return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
 	}
 
 	/**
@@ -400,7 +408,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Tokenizer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	async getPopover() {

package/dist/Tree.js

@@ -158,6 +158,32 @@ const metadata = {
 			},
 		},
 
+		/**
+		 * Fired when the mouse cursor enters the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseover": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the mouse cursor leaves the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseout": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when a tree item is activated.
 		 *
@@ -337,6 +363,18 @@ class Tree extends UI5Element {
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
+	_onListItemMouseOver(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseover", { item: treeItem });
+	}
+
+	_onListItemMouseOut(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseout", { item: treeItem });
+	}
+
 	_onListSelectionChange(event) {
 		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
 		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);

package/dist/TreeListItem.js

@@ -1,7 +1,8 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.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 { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -238,12 +239,6 @@ class TreeListItem extends ListItem {
 		];
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	onBeforeRendering() {
 		this.actionable = false;
 	}
@@ -254,6 +249,14 @@ class TreeListItem extends ListItem {
 		return allClasses;
 	}
 
+	get styles() {
+		return {
+			preContent: {
+				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+			},
+		};
+	}
+
 	get effectiveLevel() {
 		return this.level - 1;
 	}
@@ -286,7 +289,7 @@ class TreeListItem extends ListItem {
 			posinset: this._posinset,
 			setsize: this._setsize,
 			ariaSelectedText: this.ariaSelectedText,
-			listItemAriaLabel: this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
+			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
 		};
 	}
 
@@ -316,11 +319,11 @@ class TreeListItem extends ListItem {
 	}
 
 	get iconAccessibleName() {
-		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TreeListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/WheelSlider.js

@@ -397,25 +397,25 @@ class WheelSlider extends UI5Element {
 		this._selectElementByIndex(nextElementIndex);
 	}
 
-	_onkeydown(е) {
+	_onkeydown(e) {
 		if (!this.expanded) {
 			return;
 		}
 
-		if (isUp(е)) {
-			this._onArrowUp(е);
+		if (isUp(e)) {
+			this._onArrowUp(e);
 		}
 
-		if (isDown(е)) {
-			this._onArrowDown(е);
+		if (isDown(e)) {
+			this._onArrowDown(e);
 		}
 
-		if (isPageDown(е)) {
-			this._selectLimitCell(е, false);
+		if (isPageDown(e)) {
+			this._selectLimitCell(e, false);
 		}
 
-		if (isPageUp(е)) {
-			this._selectLimitCell(е, true);
+		if (isPageUp(e)) {
+			this._selectLimitCell(e, true);
 		}
 	}
 

package/dist/api.json

@@ -110,7 +110,7 @@
           "name": "colorScheme",
           "readonly": "true",
           "visibility": "public",
-          "type": "Array",
+          "type": "AvatarColorScheme[]",
           "description": "Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.",
           "defaultValue": "[]"
         },
@@ -118,7 +118,7 @@
           "name": "hiddenItems",
           "readonly": "true",
           "visibility": "public",
-          "type": "Array",
+          "type": "HTMLElement[]",
           "description": "Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.",
           "defaultValue": "[]"
         },
@@ -288,12 +288,6 @@
           "description": "Defines the link href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported.",
           "defaultValue": "\"\""
         },
-        {
-          "name": "stableDomRef",
-          "visibility": "public",
-          "type": "string",
-          "description": "Defines the stable selector that you can use via <code>getStableDomRef</code> method."
-        },
         {
           "name": "target",
           "visibility": "public",
@@ -593,7 +587,15 @@
           "visibility": "public",
           "since": "1.0.0-rc.16",
           "type": "String",
-          "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set.",
+          "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.",
+          "defaultValue": "\"\""
+        },
+        {
+          "name": "accessibleNameRef",
+          "visibility": "public",
+          "since": "1.0.0-rc.16",
+          "type": "String",
+          "description": "Defines the IDs of the elements that label the component.",
           "defaultValue": "\"\""
         }
       ],
@@ -943,8 +945,7 @@
           "name": "defaultColor",
           "visibility": "public",
           "type": "CSSColor",
-          "description": "Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>",
-          "defaultValue": "\"\""
+          "description": "Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"
         },
         {
           "name": "showDefaultColor",
@@ -1011,7 +1012,7 @@
         {
           "name": "color",
           "visibility": "public",
-          "type": "String",
+          "type": "CSSColor",
           "description": "Defines the currently selected color of the component. <br><br> <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property."
         }
       ],
@@ -1310,7 +1311,7 @@
       "static": true,
       "visibility": "public",
       "extends": "DateComponentBase",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;</code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by <code>dateValue</code> property by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;</code></pre>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -1559,6 +1560,20 @@
       "description": "<h3 class=\"comment-api-title\">Overview</h3> The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n<h3>Usage</h3> The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices). For the <code>ui5-daterange-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateRangePicker.js\";</code>\n\n<h3>Keyboard Handling</h3> The <code>ui5-daterange-picker</code> provides advanced keyboard handling. <br>\n\nWhen the <code>ui5-daterange-picker</code> input field is focused the user can increment or decrement respectively the range start or end date, depending on where the cursor is. The following shortcuts are available: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "dateValue",
+          "readonly": "true",
+          "visibility": "public",
+          "type": "Date",
+          "description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
+        },
+        {
+          "name": "dateValueUTC",
+          "readonly": "true",
+          "visibility": "public",
+          "type": "Date",
+          "description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
+        },
         {
           "name": "delimiter",
           "visibility": "public",
@@ -2116,7 +2131,7 @@
           "name": "previewItem",
           "readonly": "true",
           "visibility": "public",
-          "type": "ui5-suggestion-item",
+          "type": "sap.ui.webcomponents.main.IInputSuggestionItem",
           "description": "The suggestion item on preview."
         },
         {
@@ -2222,7 +2237,7 @@
         },
         {
           "name": "suggestion-scroll",
-          "visibility": "public",
+          "visibility": "protected",
           "since": "1.0.0-rc.8",
           "parameters": [
             {
@@ -2469,7 +2484,7 @@
       "static": true,
       "visibility": "public",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is а container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3> The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is a container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3> The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -2523,7 +2538,7 @@
           "visibility": "public",
           "since": "1.0.0-rc.13",
           "type": "ListGrowingMode",
-          "description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.",
+          "description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.",
           "defaultValue": "\"None\""
         },
         {
@@ -2707,14 +2722,14 @@
       "kind": "class",
       "name": "sap.ui.webcomponents.main.MessageStrip",
       "basename": "MessageStrip",
-      "tagname": "ui5-messagestrip",
+      "tagname": "ui5-message-strip",
       "resource": "MessageStrip.js",
       "module": "MessageStrip",
       "static": true,
       "visibility": "public",
       "since": "0.9.0",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-messagestrip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-messagestrip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-message-strip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-message-strip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -2832,7 +2847,7 @@
       "visibility": "public",
       "since": "0.11.0",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\nIn the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-mcb-item</code> that you provide. Example: <code>&lt;ui5-mcb-item stable-dom-ref=\"item1\"&gt;&lt;/ui5-mcb-item&gt;</code></li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -2972,13 +2987,6 @@
           "type": "boolean",
           "description": "Defines the selected state of the component.",
           "defaultValue": "false"
-        },
-        {
-          "name": "stableDomRef",
-          "visibility": "public",
-          "since": "1.0.0-rc.11",
-          "type": "string",
-          "description": "Defines the stable selector that you can use via getStableDomRef method."
         }
       ],
       "slots": []
@@ -3069,13 +3077,6 @@
           "description": "Defines the selected state of the component.",
           "defaultValue": "false"
         },
-        {
-          "name": "stableDomRef",
-          "visibility": "public",
-          "since": "1.0.0-rc.11",
-          "type": "string",
-          "description": "Defines the stable selector that you can use via getStableDomRef method."
-        },
         {
           "name": "value",
           "visibility": "public",
@@ -3751,11 +3752,18 @@
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component uses the available width. <br><br> <b>Note:</b> There can be just one selected <code>item</code> at a time.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButton\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "accessibleName",
+          "visibility": "public",
+          "since": "1.0.3",
+          "type": "String",
+          "description": "Sets the accessible aria name of the component."
+        },
         {
           "name": "selectedItem",
           "readonly": "true",
           "visibility": "public",
-          "type": "ui5-segmented-button-item",
+          "type": "sap.ui.webcomponents.main.ISegmentedButtonItem",
           "description": "Currently selected item."
         }
       ],
@@ -3829,7 +3837,7 @@
       "visibility": "public",
       "since": "0.8.0",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>Stable DOM Refs</h3>\n\nIn 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>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -3873,7 +3881,7 @@
           "name": "selectedOption",
           "readonly": "true",
           "visibility": "public",
-          "type": "ui5-option",
+          "type": "sap.ui.webcomponents.main.ISelectOption",
           "description": "Currently selected option."
         },
         {
@@ -4429,14 +4437,14 @@
           "name": "textOff",
           "visibility": "public",
           "type": "string",
-          "description": "Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).",
+          "description": "Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.",
           "defaultValue": "\"\""
         },
         {
           "name": "textOn",
           "visibility": "public",
           "type": "string",
-          "description": "Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).",
+          "description": "Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.",
           "defaultValue": "\"\""
         }
       ],
@@ -4498,13 +4506,6 @@
           "description": "Specifies if the component is selected.",
           "defaultValue": "false"
         },
-        {
-          "name": "stableDomRef",
-          "visibility": "public",
-          "since": "1.0.0-rc.8",
-          "type": "string",
-          "description": "Defines the stable selector that you can use via getStableDomRef method."
-        },
         {
           "name": "text",
           "visibility": "public",
@@ -4520,6 +4521,14 @@
           "type": "Node[]",
           "description": "Defines the tab content."
         }
+      ],
+      "methods": [
+        {
+          "name": "getTabInStripDomRef",
+          "visibility": "public",
+          "since": "1.0.0-rc.16",
+          "description": "Returns the DOM reference of the tab that is placed in the header. <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method."
+        }
       ]
     },
     {
@@ -4533,7 +4542,7 @@
       "static": true,
       "visibility": "public",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for: <ul> <li>Each <code>ui5-tab</code> Example: <code><ui5-tab stable-dom-ref=\"in-stock\"></ui5-tab></code></li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -4635,7 +4644,7 @@
           "visibility": "public",
           "since": "1.0.0-rc.12",
           "type": "TableGrowingMode",
-          "description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.",
+          "description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.",
           "defaultValue": "\"None\""
         },
         {
@@ -4681,7 +4690,7 @@
           "name": "stickyColumnHeader",
           "visibility": "public",
           "type": "boolean",
-          "description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Limitations:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>",
+          "description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Restrictions:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>",
           "defaultValue": "false"
         }
       ],
@@ -5413,6 +5422,20 @@
           "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the deleted item." } ],
           "description": "Fired when the Delete button of any tree item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the component <code>mode</code> property is set to <code>Delete</code>."
         },
+        {
+          "name": "item-mouseout",
+          "visibility": "public",
+          "since": "1.0.0-rc.16",
+          "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
+          "description": "Fired when the mouse cursor leaves the tree item borders."
+        },
+        {
+          "name": "item-mouseover",
+          "visibility": "public",
+          "since": "1.0.0-rc.16",
+          "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
+          "description": "Fired when the mouse cursor enters the tree item borders."
+        },
         {
           "name": "item-toggle",
           "allowPreventDefault": "true",