@ui5/webcomponents 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0](https://github.com/SAP/ui5-webcomponents/compare/v1.6.0...v1.7.0) (2022-09-02)
+
+
+### Bug Fixes
+
+* correct imports of horizon Badge CSS files ([#5673](https://github.com/SAP/ui5-webcomponents/issues/5673)) ([583a63d](https://github.com/SAP/ui5-webcomponents/commit/583a63ddc93717fe3a7f047888ca964a53091415))
+* correctly calculate accessibleNameRef ([#5520](https://github.com/SAP/ui5-webcomponents/issues/5520)) ([a872c9b](https://github.com/SAP/ui5-webcomponents/commit/a872c9be58ee38f2d81d65e1a977cf7c80a380fd)), closes [#5452](https://github.com/SAP/ui5-webcomponents/issues/5452)
+* remove woff files and woff/ttf usage ([#5629](https://github.com/SAP/ui5-webcomponents/issues/5629)) ([e4175cd](https://github.com/SAP/ui5-webcomponents/commit/e4175cdf000ace65758e75fb70545edd872197b8))
+* **ui5-avatar-group:** width calculations for (non-)Chromium browsers adjusted ([#5737](https://github.com/SAP/ui5-webcomponents/issues/5737)) ([2741705](https://github.com/SAP/ui5-webcomponents/commit/274170508f944d1cbcd3df7e2a66d7cc55a9c2cd)), closes [#5643](https://github.com/SAP/ui5-webcomponents/issues/5643)
+* **ui5-breadcrumbs:** current location misalignment is fixed ([#5585](https://github.com/SAP/ui5-webcomponents/issues/5585)) ([b685860](https://github.com/SAP/ui5-webcomponents/commit/b685860f56ad8669969a5d7df087ea26cdaf8351))
+* **ui5-button:** adjust icon role ([#5714](https://github.com/SAP/ui5-webcomponents/issues/5714)) ([5b446f5](https://github.com/SAP/ui5-webcomponents/commit/5b446f52d2634ba400f2fbe2938d48fdd6c056af)), closes [#5505](https://github.com/SAP/ui5-webcomponents/issues/5505) [#5596](https://github.com/SAP/ui5-webcomponents/issues/5596) [#5687](https://github.com/SAP/ui5-webcomponents/issues/5687)
+* **ui5-button:** announce is now correct when button is icon only with tooltip ([#5592](https://github.com/SAP/ui5-webcomponents/issues/5592)) ([7703945](https://github.com/SAP/ui5-webcomponents/commit/77039457ce0492894e416cdd0ecac0f9baaf8746)), closes [#5386](https://github.com/SAP/ui5-webcomponents/issues/5386)
+* **ui5-button:** correct calculation of the min width of an icon button ([#5701](https://github.com/SAP/ui5-webcomponents/issues/5701)) ([005ada0](https://github.com/SAP/ui5-webcomponents/commit/005ada03f47f9b7657cf714cee4bfe3f6559acc8))
+* **ui5-button:** correct text shadow in contrast themes ([#5750](https://github.com/SAP/ui5-webcomponents/issues/5750)) ([7fb7e4c](https://github.com/SAP/ui5-webcomponents/commit/7fb7e4cc4aa7dc6a7566226fc46513441e39cfde)), closes [#5420](https://github.com/SAP/ui5-webcomponents/issues/5420)
+* **ui5-button:** provide tooltip for icon-only buttons ([#5734](https://github.com/SAP/ui5-webcomponents/issues/5734)) ([d49427f](https://github.com/SAP/ui5-webcomponents/commit/d49427f4a07d1f1c744bbc8f9964307662718440)), closes [#5687](https://github.com/SAP/ui5-webcomponents/issues/5687) [#5596](https://github.com/SAP/ui5-webcomponents/issues/5596) [#5505](https://github.com/SAP/ui5-webcomponents/issues/5505)
+* **ui5-calendar:** adjust high contrast belize themes ([#5756](https://github.com/SAP/ui5-webcomponents/issues/5756)) ([4d19f91](https://github.com/SAP/ui5-webcomponents/commit/4d19f91f13f355f35d97b702fb4c8ccba0118a4b)), closes [#5377](https://github.com/SAP/ui5-webcomponents/issues/5377)
+* **ui5-calendar:** adjust the role attribute of the header actions elements ([#5723](https://github.com/SAP/ui5-webcomponents/issues/5723)) ([3acd9bf](https://github.com/SAP/ui5-webcomponents/commit/3acd9bf5b44b1de3d919e46a5292dfbdae2ad340)), closes [#5708](https://github.com/SAP/ui5-webcomponents/issues/5708)
+* **ui5-calendar:** align year and month picker focus to horizon ([#5692](https://github.com/SAP/ui5-webcomponents/issues/5692)) ([02816a9](https://github.com/SAP/ui5-webcomponents/commit/02816a944f392aded156d4725fef86f9c5382746)), closes [#5644](https://github.com/SAP/ui5-webcomponents/issues/5644)
+* **ui5-date-picker:** focus out now closes the popup ([#5603](https://github.com/SAP/ui5-webcomponents/issues/5603)) ([0a7fcac](https://github.com/SAP/ui5-webcomponents/commit/0a7fcac976f56c3598ebe20af9acde4d8d1cd2d0)), closes [#5532](https://github.com/SAP/ui5-webcomponents/issues/5532)
+* **ui5-date-picker:** remove background whitespace ([#5764](https://github.com/SAP/ui5-webcomponents/issues/5764)) ([2ad0c44](https://github.com/SAP/ui5-webcomponents/commit/2ad0c4480fbaea02ea8c5f6c25ab62490bddd641)), closes [#5640](https://github.com/SAP/ui5-webcomponents/issues/5640)
+* **ui5-daterange-picker:** handle single date value ([#5769](https://github.com/SAP/ui5-webcomponents/issues/5769)) ([ce8a446](https://github.com/SAP/ui5-webcomponents/commit/ce8a446b32cd56b2e6d547c8f75b1f56b5426c99))
+* **ui5-input:** additional check added for robustness ([#5619](https://github.com/SAP/ui5-webcomponents/issues/5619)) ([7275652](https://github.com/SAP/ui5-webcomponents/commit/72756520d7d7183bcee8db94ccd7e0e817024ff5)), closes [#5580](https://github.com/SAP/ui5-webcomponents/issues/5580)
+* **ui5-input:** allows changing value in selection change event handler ([#5677](https://github.com/SAP/ui5-webcomponents/issues/5677)) ([46b175f](https://github.com/SAP/ui5-webcomponents/commit/46b175f8a6e1ff52adb6b1bf237e8df5fc482455))
+* **ui5-input:** correction of change event ([#5671](https://github.com/SAP/ui5-webcomponents/issues/5671)) ([b89f91c](https://github.com/SAP/ui5-webcomponents/commit/b89f91c0a2f8afb336f2269cc441566b3ebfdd2c))
+* **ui5-input:** fix item selection bugs ([#5372](https://github.com/SAP/ui5-webcomponents/issues/5372)) ([274efaa](https://github.com/SAP/ui5-webcomponents/commit/274efaaa212e3152d27665f1809e649a75f67001))
+* **ui5-link:** multiple click events ([#5642](https://github.com/SAP/ui5-webcomponents/issues/5642)) ([74fd5b9](https://github.com/SAP/ui5-webcomponents/commit/74fd5b91fd83bf28c0f4347df92b3721eb11577d))
+* **ui5-list:** unexpected spaces between group items ([#5726](https://github.com/SAP/ui5-webcomponents/issues/5726)) ([d69932c](https://github.com/SAP/ui5-webcomponents/commit/d69932c02afec12d0b9d6c600459abe1a1673395)), closes [#3869](https://github.com/SAP/ui5-webcomponents/issues/3869) [#5720](https://github.com/SAP/ui5-webcomponents/issues/5720)
+* **ui5-menu:** opening a submenu no longer throws a console error ([#5591](https://github.com/SAP/ui5-webcomponents/issues/5591)) ([1b5caf7](https://github.com/SAP/ui5-webcomponents/commit/1b5caf761079017d7edbe4bff2fa9949390896f8)), closes [#5582](https://github.com/SAP/ui5-webcomponents/issues/5582)
+* **ui5-menu:** prevent closing sub menu when hovering over icon ([#5670](https://github.com/SAP/ui5-webcomponents/issues/5670)) ([36cb3d2](https://github.com/SAP/ui5-webcomponents/commit/36cb3d20b2c51920f7bb31b2a44895060e456977)), closes [#5669](https://github.com/SAP/ui5-webcomponents/issues/5669)
+* **ui5-multiinput:** prevented token-delete event firing when readonly ([#5613](https://github.com/SAP/ui5-webcomponents/issues/5613)) ([c8f4178](https://github.com/SAP/ui5-webcomponents/commit/c8f417819a8628afeff2ca496a4d72335190463e)), closes [#5448](https://github.com/SAP/ui5-webcomponents/issues/5448)
+* **ui5-panel:** recognizable panel heading ([#5628](https://github.com/SAP/ui5-webcomponents/issues/5628)) ([6f1b250](https://github.com/SAP/ui5-webcomponents/commit/6f1b250813d858baaeabada4996daecfb8da9a08))
+* **ui5-panel:** toggle ui5-panel correctly on Enter key ([#5660](https://github.com/SAP/ui5-webcomponents/issues/5660)) ([137d8f3](https://github.com/SAP/ui5-webcomponents/commit/137d8f395b7ebd6df2f180a6fcec83bdb959b931))
+* **ui5-popup:** Synchronous opening of a popup from another popup with Enter key now works ([#4975](https://github.com/SAP/ui5-webcomponents/issues/4975)) ([1bb87f5](https://github.com/SAP/ui5-webcomponents/commit/1bb87f5a3ced8b11741deec6e64a6ad6a0af08cf)), closes [#4861](https://github.com/SAP/ui5-webcomponents/issues/4861)
+* **ui5-select:** selected option in dropdown is now read out ([#5589](https://github.com/SAP/ui5-webcomponents/issues/5589)) ([f8ab6ed](https://github.com/SAP/ui5-webcomponents/commit/f8ab6ede3ff8ee1b972c0cdeb8399d446b4888b0))
+* **ui5-slider, ui5-range-slider:** apply correct handle's icon ([#5612](https://github.com/SAP/ui5-webcomponents/issues/5612)) ([1706174](https://github.com/SAP/ui5-webcomponents/commit/1706174a9f052f293d87338b7cb00241b911d9d4))
+* **ui5-tabcontainer:** update tab strip on tab selection ([#5449](https://github.com/SAP/ui5-webcomponents/issues/5449)) ([bbc9246](https://github.com/SAP/ui5-webcomponents/commit/bbc9246647854a4a509a6fe9c368cfd89a9cddb9)), closes [#5172](https://github.com/SAP/ui5-webcomponents/issues/5172) [#5116](https://github.com/SAP/ui5-webcomponents/issues/5116)
+* **ui5-textarea:** show exceeded text when maxLength is 0 ([#5691](https://github.com/SAP/ui5-webcomponents/issues/5691)) ([52db670](https://github.com/SAP/ui5-webcomponents/commit/52db67087dfbcd61770755b6220a73fe1fe0195a)), closes [#5384](https://github.com/SAP/ui5-webcomponents/issues/5384)
+* **ui5-time-picker:** remove ampm translation ([#5751](https://github.com/SAP/ui5-webcomponents/issues/5751)) ([4943ef9](https://github.com/SAP/ui5-webcomponents/commit/4943ef94683b197e1a3ee6c9995e05187d9b52d2)), closes [#5181](https://github.com/SAP/ui5-webcomponents/issues/5181)
+* **ui5-tokenizer:** adjust scrolling behavior ([#5281](https://github.com/SAP/ui5-webcomponents/issues/5281)) ([572ca8d](https://github.com/SAP/ui5-webcomponents/commit/572ca8d58ccb6e189d4874c0f77b8558e1987a70))
+* **ui5-tree:** include `targetItem` in `selection-change` event ([#5631](https://github.com/SAP/ui5-webcomponents/issues/5631)) ([dc73fe2](https://github.com/SAP/ui5-webcomponents/commit/dc73fe284ef23200c734f4d62308bd9ace2e0fcf)), closes [#5430](https://github.com/SAP/ui5-webcomponents/issues/5430)
+
+
+### Features
+
+* **framework:** reset scrollbar styles class ([#5623](https://github.com/SAP/ui5-webcomponents/issues/5623)) ([c3f3063](https://github.com/SAP/ui5-webcomponents/commit/c3f306383f971744886b99cc60911dcba924720b))
+* **icons:** update to 4.14.0 5.0.2 SAP-Icons font ([#5605](https://github.com/SAP/ui5-webcomponents/issues/5605)) ([d794c0b](https://github.com/SAP/ui5-webcomponents/commit/d794c0b84ea03581cd969a84dc5c05383ec91b60))
+* **ui5-avatar:** introduce badge support ([#5418](https://github.com/SAP/ui5-webcomponents/issues/5418)) ([816edf0](https://github.com/SAP/ui5-webcomponents/commit/816edf048ddeb67bc6332d85d38bb93431a6b1fb))
+* **ui5-carousel:** add new CSS Shadow part ([#5700](https://github.com/SAP/ui5-webcomponents/issues/5700)) ([b60ff3f](https://github.com/SAP/ui5-webcomponents/commit/b60ff3ff0bfd48af58838ef1b40d4bbe5f7cab76))
+* **ui5-dialog:** add state property ([#5587](https://github.com/SAP/ui5-webcomponents/issues/5587)) ([c680e7c](https://github.com/SAP/ui5-webcomponents/commit/c680e7cb3a1e1cc6e34ff1ac11b106c8314c04e9))
+* **ui5-icon:** support SVGs with multiple paths  ([#5630](https://github.com/SAP/ui5-webcomponents/issues/5630)) ([ce17ca5](https://github.com/SAP/ui5-webcomponents/commit/ce17ca559ce507b8e10f20d7f80dab48908a8305)), closes [#5347](https://github.com/SAP/ui5-webcomponents/issues/5347) [#5526](https://github.com/SAP/ui5-webcomponents/issues/5526)
+* **ui5-menu-item:** add new `accessibleName` property ([#5727](https://github.com/SAP/ui5-webcomponents/issues/5727)) ([51987c8](https://github.com/SAP/ui5-webcomponents/commit/51987c8db1b3d152c585cb242fcb05dd54e6b80d)), closes [#5514](https://github.com/SAP/ui5-webcomponents/issues/5514) [#5656](https://github.com/SAP/ui5-webcomponents/issues/5656)
+* **ui5-popover:** new type DOMReference for opener ([#5609](https://github.com/SAP/ui5-webcomponents/issues/5609)) ([1a4de12](https://github.com/SAP/ui5-webcomponents/commit/1a4de12b37a2cb82be2af010758f4641acf7385d))
+* **ui5-tabcontainer:** make tab-select event preventable ([#5661](https://github.com/SAP/ui5-webcomponents/issues/5661)) ([928f4fc](https://github.com/SAP/ui5-webcomponents/commit/928f4fc62181aa4e562eec4d8e06b5e39918c9b2)), closes [#5116](https://github.com/SAP/ui5-webcomponents/issues/5116)
+
+
+### Reverts
+
+* Revert "fix(ui5-button): adjust icon role" (#5722) ([22170f4](https://github.com/SAP/ui5-webcomponents/commit/22170f4c9ca591de8c807a5495c95443de51e056)), closes [#5722](https://github.com/SAP/ui5-webcomponents/issues/5722) [#5714](https://github.com/SAP/ui5-webcomponents/issues/5714)
+
+
+
+
+
 # [1.6.0](https://github.com/SAP/ui5-webcomponents/compare/v1.5.0...v1.6.0) (2022-07-25)
 
 

package/dist/Avatar.js

@@ -54,7 +54,7 @@ const metadata = {
 		 * <br>
 		 * <pre>&lt;ui5-avatar icon="employee"></pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -208,6 +208,34 @@ const metadata = {
 			propertyName: "image",
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the optional badge that will be used for visual affordance.
+		 * <b>Note:</b> While the slot allows for custom badges, to achieve
+		 * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
+		 * in the corresponding <code>icon</code> slot, without text nodes.
+		 * <br><br>
+		 * Example:
+		 * <br><br>
+		 * &lt;ui5-avatar><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp&lt;/ui5-badge><br>
+		 * &lt;/ui5-avatar>
+		 * <br><br>
+		 * <ui5-avatar initials="AB" color-scheme="Accent1">
+		 * <ui5-badge slot="badge">
+		 * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
+		 * </ui5-badge>
+		 * </ui5-avatar>
+		 *
+		 * @type {HTMLElement}
+		 * @slot badge
+		 * @public
+		 * @since 1.7.0
+		 */
+		badge: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 		/**

package/dist/AvatarGroup.js

@@ -8,6 +8,7 @@ import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 
 import {
 	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
@@ -376,13 +377,21 @@ class AvatarGroup extends UI5Element {
 		// if in "Group" mode overflow button size is equal to the offset from second item
 		if (this._isGroup) {
 			let item = this.items[1];
+			let ltrEffectiveWidth;
 
 			// in some cases when second avatar is overflowed the offset of the button is the right one
 			if (!item || item.hidden) {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft - this.offsetLeft;
+			ltrEffectiveWidth = item.offsetLeft;
+
+			if (!isChrome()) {
+				// additional subtractions required for non-Chromium browsers
+				ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
+			}
+
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
 		}
 
 		return button.offsetWidth;
@@ -518,6 +527,7 @@ class AvatarGroup extends UI5Element {
 	 */
 	_getWidthToItem(item) {
 		const isRTL = this.effectiveDir === "rtl";
+		let ltrWidthToItem;
 
 		if (isRTL) {
 			// in RTL the total width is equal to difference of the parent container width and
@@ -526,7 +536,15 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft - this.offsetLeft;
+		ltrWidthToItem = item.offsetLeft;
+
+		if (!isChrome()) {
+			// for non-Chromium browsers offsetLeft may differ
+			// to normalize it, the Avatar Group's offset-left is subtracted
+			ltrWidthToItem = item.offsetLeft - this.offsetLeft;
+		}
+
+		return ltrWidthToItem;
 	}
 
 	/**

package/dist/BreadcrumbsItem.js

@@ -77,7 +77,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcumbs</code>.
+ * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcrumbs</code>.
  *
  * @constructor
  * @author SAP SE

package/dist/Button.js

@@ -75,7 +75,7 @@ const metadata = {
 		 * <br><br>
 		 * Example:
 		 *
-		 * See all the available icons within the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -114,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the tooltip of the component.
 		 * <br>
-		 * <b>Note:</b> We recommend setting tooltip to icon-only components.
+		 * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
@@ -466,7 +466,7 @@ class Button extends UI5Element {
 			return "";
 		}
 
-		return this.isIconOnly ? "img" : "presentation";
+		return this.showIconTooltip ? "img" : "presentation";
 	}
 
 	get isIconOnly() {

package/dist/CardHeader.js

@@ -133,6 +133,7 @@ const metadata = {
  * <br>
  * The <code>ui5-card</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>root - Used to style the root DOM element of the CardHeader</li>
  * <li>title - Used to style the title of the CardHeader</li>
  * <li>subtitle - Used to style the subtitle of the CardHeader</li>
  * <li>status - Used to style the status of the CardHeader</li>

package/dist/Carousel.js

@@ -238,6 +238,15 @@ const metadata = {
  * with the following keyboard shortcuts:
  * <br>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <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-carousel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
+ * </ul>
+ *
  * * <h4>Fast Navigation</h4>
  * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
  * In order to use this functionality, you need to import the following module:

package/dist/CheckBox.js

@@ -99,7 +99,7 @@ const metadata = {
 		/**
 		* Defines whether the component is displayed as partially checked.
 		* <br><br>
-		* <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
 		* interaction and the resulting visual state depends on the values of the <code>indeterminate</code>
 		* and <code>checked</code> properties:
 		* <ul>

package/dist/DatePicker.js

@@ -15,6 +15,10 @@ import {
 	isShow,
 	isF4,
 	isEnter,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
@@ -476,6 +480,10 @@ class DatePicker extends DateComponentBase {
 			}
 		}
 
+		if ((this._getInput().isEqualNode(event.target) && this.isOpen()) && (isTabNext(event) || isTabPrevious(event) || isF6Next(event) || isF6Previous(event))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}

package/dist/DateRangePicker.js

@@ -294,8 +294,14 @@ class DateRangePicker extends DatePicker {
 		const valuesArray = [];
 		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
-		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
-		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		// if format successfully parse the value, the value contains only single date
+		if (this.getFormat().parse(value)) {
+			valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+			valuesArray[1] = "";
+		} else {
+			valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+			valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		}
 
 		return valuesArray;
 	}

package/dist/DateTimePicker.js

@@ -101,7 +101,7 @@ const metadata = {
  * <li>typing in the input field</li>
  * </ul>
  *
- * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
+ * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
  *
  * <h3>Formatting</h3>
  *

package/dist/Dialog.js

@@ -4,9 +4,14 @@ import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popup from "./Popup.js";
-import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/resize-corner.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";
 
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
@@ -20,6 +25,15 @@ import dialogCSS from "./generated/themes/Dialog.css.js";
  */
 const STEP_SIZE = 16;
 
+/**
+ * Defines the icons corresponding to the dialog's state.
+ */
+const ICON_PER_STATE = {
+	[ValueState.Error]: "error",
+	[ValueState.Warning]: "alert",
+	[ValueState.Success]: "sys-enter-2",
+	[ValueState.Information]: "information",
+};
 /**
  * @public
  */
@@ -123,6 +137,20 @@ const metadata = {
 		onDesktop: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the state of the <code>Dialog</code>.
+		 * <br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		state: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
 	},
 };
 
@@ -286,6 +314,18 @@ class Dialog extends Popup {
 		return minHeight;
 	}
 
+	get hasValueState() {
+		return this.state !== ValueState.None;
+	}
+
+	get _dialogStateIcon() {
+		return ICON_PER_STATE[this.state];
+	}
+
+	get _role() {
+		return (this.state === ValueState.Error || this.state === ValueState.Warning) ? "alertdialog" : "dialog";
+	}
+
 	_show() {
 		super._show();
 		this._center();

package/dist/Icon.js

@@ -35,9 +35,9 @@ const metadata = {
 		 * <br>
 		 *
 		 * To browse all available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
 		 * <br>
 		 *
 		 * Example:
@@ -121,7 +121,7 @@ const metadata = {
 		 */
 		pathData: {
 			type: String,
-			noAttribute: true,
+			multiple: true,
 		},
 
 		/**
@@ -186,15 +186,15 @@ const metadata = {
  * <ul>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons" class="api-table-content-cell-link">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
- * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt" class="api-table-content-cell-link">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
- * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * <li>
  * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite" class="api-table-content-cell-link">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
- * <ui5-link target="_blank" href="https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
  * </li>
  * </ul>
  *
@@ -373,7 +373,7 @@ class Icon extends UI5Element {
 
 		// in case a new valid name is set, show the icon
 		this.invalid = false;
-		this.pathData = iconData.pathData;
+		this.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];
 		this.accData = iconData.accData;
 		this.ltr = iconData.ltr;
 		this.packageName = iconData.packageName;

package/dist/Input.js

@@ -603,9 +603,6 @@ class Input extends UI5Element {
 		// Indicates if the user selection has been canceled with [ESC].
 		this.suggestionSelectionCanceled = false;
 
-		// Indicates if the change event has already been fired
-		this._changeFiredValue = null;
-
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -771,6 +768,12 @@ class Input extends UI5Element {
 	}
 
 	_onkeyup(event) {
+		// The native Delete event does not update the value property "on time".
+		// So, the (native) change event is always fired with the old value
+		if (isDelete(event)) {
+			this.value = event.target.value;
+		}
+
 		this._keyDown = false;
 		this._backspaceKeyDown = false;
 	}
@@ -823,7 +826,6 @@ class Input extends UI5Element {
 		}
 
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER, event);
 			this.lastConfirmedValue = this.value;
 
 			if (this.FormSupport) {
@@ -967,8 +969,8 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (this._changeFiredValue !== this.getInputDOMRefSync().value) {
-			this._changeFiredValue = this.getInputDOMRefSync().value;
+		if (this.previousValue !== this.getInputDOMRefSync().value) {
+			this.previousValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
@@ -996,7 +998,7 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-		const eventType = event.inputType || event.detail.inputType;
+		const eventType = event.inputType || (event.detail && event.detail.inputType);
 
 		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
@@ -1183,9 +1185,11 @@ class Input extends UI5Element {
 			return;
 		}
 
+		const innerInput = this.getInputDOMRefSync();
+		const value = this.valueBeforeAutoComplete || this.value;
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.valueBeforeAutoComplete !== itemText;
+			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -1196,6 +1200,7 @@ class Input extends UI5Element {
 			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
+			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
 		this.valueBeforeItemPreview = "";

package/dist/Label.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -145,8 +144,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const ownerNode = findNodeOwner(this);
-		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
+		const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/dist/Link.js

@@ -349,6 +349,7 @@ class Link extends UI5Element {
 			shiftKey,
 		} = event;
 
+		event.stopImmediatePropagation();
 		event.isMarked = "link";
 
 		const executeEvent = this.fireEvent("click", {
@@ -373,7 +374,7 @@ class Link extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
+		if (isEnter(event) && !this.href) {
 			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
@@ -393,6 +394,7 @@ class Link extends UI5Element {
 		if (this.href && !event.defaultPrevented) {
 			const customEvent = new MouseEvent("click");
 
+			customEvent.stopImmediatePropagation();
 			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}

package/dist/List.js

@@ -13,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -343,6 +344,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -624,6 +626,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -692,6 +703,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}

package/dist/Menu.js

@@ -180,7 +180,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/Menu.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -397,11 +397,11 @@ class Menu extends UI5Element {
 	}
 
 	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
+		if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
 			// close opened sub-menu if there is any opened
 			this._closeItemSubMenu(this._openedSubMenuItem, true);
 		}
-		if (item.hasChildren) {
+		if (item && item.hasChildren) {
 			// create new sub-menu
 			this._createSubMenu(item, actionId);
 			this._openItemSubMenu(item, opener, actionId);
@@ -434,7 +434,7 @@ class Menu extends UI5Element {
 			// respect mouseover only on desktop
 			const item = event.target.associatedItem;
 
-			if (item.hasChildren && item._subMenu) {
+			if (item && item.hasChildren && item._subMenu) {
 				// try to close the sub-menu
 				item._preventSubMenuClose = false;
 				this._closeItemSubMenu(item);