@ui5/webcomponents 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* correct scoping issues with several components ([#4820](https://github.com/SAP/ui5-webcomponents/issues/4820)) ([621dc20](https://github.com/SAP/ui5-webcomponents/commit/621dc20))
+* **inputs:** import used icons ([#4712](https://github.com/SAP/ui5-webcomponents/issues/4712)) ([2041ff3](https://github.com/SAP/ui5-webcomponents/commit/2041ff3))
+* **popovers:** correct list items height of input dropdowns ([#4650](https://github.com/SAP/ui5-webcomponents/issues/4650)) ([11f8ada](https://github.com/SAP/ui5-webcomponents/commit/11f8ada)), closes [#4616](https://github.com/SAP/ui5-webcomponents/issues/4616)
+* **templates:** replace HTML comments with HBS ones ([#4681](https://github.com/SAP/ui5-webcomponents/issues/4681)) ([ddc38eb](https://github.com/SAP/ui5-webcomponents/commit/ddc38eb)), closes [/github.com/SAP/ui5-webcomponents/blob/master/packages/tools/lib/hbs2lit/src/partialsVisitor.js#L95](https://github.com//github.com/SAP/ui5-webcomponents/blob/master/packages/tools/lib/hbs2lit/src/partialsVisitor.js/issues/L95)
+* **ui5-badge:** update color-scheme parameters ([#4678](https://github.com/SAP/ui5-webcomponents/issues/4678)) ([c7d75ef](https://github.com/SAP/ui5-webcomponents/commit/c7d75ef)), closes [#3940](https://github.com/SAP/ui5-webcomponents/issues/3940)
+* **ui5-button:** remove focus on phone and tablet ([#4746](https://github.com/SAP/ui5-webcomponents/issues/4746)) ([31915d7](https://github.com/SAP/ui5-webcomponents/commit/31915d7))
+* **ui5-calendar:** adjust picker styles ([#4672](https://github.com/SAP/ui5-webcomponents/issues/4672)) ([3afe7a8](https://github.com/SAP/ui5-webcomponents/commit/3afe7a8))
+* **ui5-color-palette-popover:** showDefaultColor works ([#4802](https://github.com/SAP/ui5-webcomponents/issues/4802)) ([f93f22f](https://github.com/SAP/ui5-webcomponents/commit/f93f22f))
+* **ui5-color-palette-popover:** update documentation ([#4778](https://github.com/SAP/ui5-webcomponents/issues/4778)) ([34f629e](https://github.com/SAP/ui5-webcomponents/commit/34f629e))
+* **ui5-color-picker:** adjust hue value update when user presses over the main color section ([#4601](https://github.com/SAP/ui5-webcomponents/issues/4601)) ([4b03374](https://github.com/SAP/ui5-webcomponents/commit/4b03374)), closes [#4540](https://github.com/SAP/ui5-webcomponents/issues/4540)
+* **ui5-color-picker:** enable hex value input change on enter ([#4621](https://github.com/SAP/ui5-webcomponents/issues/4621)) ([cf45552](https://github.com/SAP/ui5-webcomponents/commit/cf45552)), closes [#4541](https://github.com/SAP/ui5-webcomponents/issues/4541)
+* **ui5-combobox:** prevent dropdown closing on scroll ([#4773](https://github.com/SAP/ui5-webcomponents/issues/4773)) ([199e860](https://github.com/SAP/ui5-webcomponents/commit/199e860))
+* **ui5-date-picker:** remove combobox role ([#4706](https://github.com/SAP/ui5-webcomponents/issues/4706)) ([2d457c9](https://github.com/SAP/ui5-webcomponents/commit/2d457c9))
+* **ui5-daterange-picker:** change delimiter dynamically ([#4693](https://github.com/SAP/ui5-webcomponents/issues/4693)) ([ec02855](https://github.com/SAP/ui5-webcomponents/commit/ec02855)), closes [#2925](https://github.com/SAP/ui5-webcomponents/issues/2925)
+* **ui5-file-uploader:** fixing the console warning ([#4605](https://github.com/SAP/ui5-webcomponents/issues/4605)) ([197f3f9](https://github.com/SAP/ui5-webcomponents/commit/197f3f9)), closes [#4592](https://github.com/SAP/ui5-webcomponents/issues/4592)
+* **ui5-input:** aria-invalid is now properly rendered ([#4734](https://github.com/SAP/ui5-webcomponents/issues/4734)) ([81a00d7](https://github.com/SAP/ui5-webcomponents/commit/81a00d7)), closes [#4723](https://github.com/SAP/ui5-webcomponents/issues/4723)
+* **ui5-input:** delete whole value of ui5-input with type number when… ([#4760](https://github.com/SAP/ui5-webcomponents/issues/4760)) ([0aa9979](https://github.com/SAP/ui5-webcomponents/commit/0aa9979))
+* **ui5-input:** improve lazy loading behaviour ([#4763](https://github.com/SAP/ui5-webcomponents/issues/4763)) ([35342be](https://github.com/SAP/ui5-webcomponents/commit/35342be))
+* **ui5-label:** allow focusing elements linked with for attribute inside a shadow root ([#4754](https://github.com/SAP/ui5-webcomponents/issues/4754)) ([bd7a8a1](https://github.com/SAP/ui5-webcomponents/commit/bd7a8a1)), closes [#4751](https://github.com/SAP/ui5-webcomponents/issues/4751)
+* **ui5-li-tree:** correct usage of i18nBudnle ([#4668](https://github.com/SAP/ui5-webcomponents/issues/4668)) ([67848d7](https://github.com/SAP/ui5-webcomponents/commit/67848d7))
+* **ui5-list:** fix separators in SAP Horizon ([#4805](https://github.com/SAP/ui5-webcomponents/issues/4805)) ([6a814b3](https://github.com/SAP/ui5-webcomponents/commit/6a814b3))
+* **ui5-list:** initial focus target ([#4809](https://github.com/SAP/ui5-webcomponents/issues/4809)) ([cf6dd1a](https://github.com/SAP/ui5-webcomponents/commit/cf6dd1a))
+* **ui5-multi-combobox:** add value selection on focus ([#4804](https://github.com/SAP/ui5-webcomponents/issues/4804)) ([08ea794](https://github.com/SAP/ui5-webcomponents/commit/08ea794))
+* **ui5-popup:** body styles are no longer modified  ([#4813](https://github.com/SAP/ui5-webcomponents/issues/4813)) ([1754496](https://github.com/SAP/ui5-webcomponents/commit/1754496)), closes [#4347](https://github.com/SAP/ui5-webcomponents/issues/4347)
+* **ui5-popup:** Usage of parts in Dialog, Popover, ResponsivePopover and TabContainer documented ([#4747](https://github.com/SAP/ui5-webcomponents/issues/4747)) ([f93909c](https://github.com/SAP/ui5-webcomponents/commit/f93909c)), closes [#4402](https://github.com/SAP/ui5-webcomponents/issues/4402)
+* **ui5-select:** incorrect popover styles when value state is used ([#4651](https://github.com/SAP/ui5-webcomponents/issues/4651)) ([2d8ce46](https://github.com/SAP/ui5-webcomponents/commit/2d8ce46))
+* **ui5-slider:** prevent handle's jumping on focus ([#4752](https://github.com/SAP/ui5-webcomponents/issues/4752)) ([dc2de5b](https://github.com/SAP/ui5-webcomponents/commit/dc2de5b))
+* **ui5-slider:** sets correct color to tickmarks based on theme ([#4677](https://github.com/SAP/ui5-webcomponents/issues/4677)) ([4aecd48](https://github.com/SAP/ui5-webcomponents/commit/4aecd48))
+* **ui5-switch:** adjust focus outline ([#4665](https://github.com/SAP/ui5-webcomponents/issues/4665)) ([0cb6580](https://github.com/SAP/ui5-webcomponents/commit/0cb6580)), closes [#2925](https://github.com/SAP/ui5-webcomponents/issues/2925)
+* **ui5-switch:** role checkbox is changed to role switch ([#4658](https://github.com/SAP/ui5-webcomponents/issues/4658)) ([ec6ca80](https://github.com/SAP/ui5-webcomponents/commit/ec6ca80)), closes [#4633](https://github.com/SAP/ui5-webcomponents/issues/4633)
+* **ui5-tabcontainer:** await for renderFinished in resize handler ([#4675](https://github.com/SAP/ui5-webcomponents/issues/4675)) ([cd8dc26](https://github.com/SAP/ui5-webcomponents/commit/cd8dc26)), closes [#4628](https://github.com/SAP/ui5-webcomponents/issues/4628)
+* **ui5-tabcontainer:** fix overflow button runtime error ([#4780](https://github.com/SAP/ui5-webcomponents/issues/4780)) ([08d75fa](https://github.com/SAP/ui5-webcomponents/commit/08d75fa)), closes [#4770](https://github.com/SAP/ui5-webcomponents/issues/4770)
+* **ui5-tabcontainer:** replace hardcoded text ([#4815](https://github.com/SAP/ui5-webcomponents/issues/4815)) ([439033c](https://github.com/SAP/ui5-webcomponents/commit/439033c)), closes [#4810](https://github.com/SAP/ui5-webcomponents/issues/4810)
+* describe all dependencies for some components ([#4807](https://github.com/SAP/ui5-webcomponents/issues/4807)) ([1cf148f](https://github.com/SAP/ui5-webcomponents/commit/1cf148f))
+* **ui5-table-row:** align checkbox vertically ([#4696](https://github.com/SAP/ui5-webcomponents/issues/4696)) ([62ae8dc](https://github.com/SAP/ui5-webcomponents/commit/62ae8dc))
+* **ui5-textarea:** enhance aria-invalid attribute handling ([#4767](https://github.com/SAP/ui5-webcomponents/issues/4767)) ([f2fd6fb](https://github.com/SAP/ui5-webcomponents/commit/f2fd6fb))
+* scoped bundles ([#4745](https://github.com/SAP/ui5-webcomponents/issues/4745)) ([2cd4c7e](https://github.com/SAP/ui5-webcomponents/commit/2cd4c7e))
+* **ui5-switch:** adjust focus outline ([#4717](https://github.com/SAP/ui5-webcomponents/issues/4717)) ([9d9d6c8](https://github.com/SAP/ui5-webcomponents/commit/9d9d6c8))
+
+
+### Features
+
+* add and update icons from 4.13 and 5.01 icon fonts  ([#4790](https://github.com/SAP/ui5-webcomponents/issues/4790)) ([a9e88f0](https://github.com/SAP/ui5-webcomponents/commit/a9e88f0))
+* **popups:** Implement declarative API for open/close ([#4653](https://github.com/SAP/ui5-webcomponents/issues/4653)) ([af70586](https://github.com/SAP/ui5-webcomponents/commit/af70586)), closes [#3527](https://github.com/SAP/ui5-webcomponents/issues/3527)
+* **ui5-breadcrumbs:** allow preventDefault in item-click event listener ([#4589](https://github.com/SAP/ui5-webcomponents/issues/4589)) ([ccb4c83](https://github.com/SAP/ui5-webcomponents/commit/ccb4c83))
+* **ui5-button:** add new `tooltip` property ([#4737](https://github.com/SAP/ui5-webcomponents/issues/4737)) ([df8f013](https://github.com/SAP/ui5-webcomponents/commit/df8f013)), closes [#4689](https://github.com/SAP/ui5-webcomponents/issues/4689)
+* **ui5-button:** implement accessibilityAttributes property ([#4655](https://github.com/SAP/ui5-webcomponents/issues/4655)) ([d27c4b5](https://github.com/SAP/ui5-webcomponents/commit/d27c4b5)), closes [#3546](https://github.com/SAP/ui5-webcomponents/issues/3546)
+* **ui5-input:** implement showClearIcon property ([#4641](https://github.com/SAP/ui5-webcomponents/issues/4641)) ([b1c1620](https://github.com/SAP/ui5-webcomponents/commit/b1c1620))
+* **ui5-link:** provide accessible-name support ([#4711](https://github.com/SAP/ui5-webcomponents/issues/4711)) ([6597afa](https://github.com/SAP/ui5-webcomponents/commit/6597afa)), closes [#4498](https://github.com/SAP/ui5-webcomponents/issues/4498)
+* **ui5-popup:** аdd default responsive paddings ([#4567](https://github.com/SAP/ui5-webcomponents/issues/4567)) ([ddc1e39](https://github.com/SAP/ui5-webcomponents/commit/ddc1e39)), closes [#4402](https://github.com/SAP/ui5-webcomponents/issues/4402)
+* **ui5-rating-indicator:** Accessibility enhancements ([#4736](https://github.com/SAP/ui5-webcomponents/issues/4736)) ([f8dc9f0](https://github.com/SAP/ui5-webcomponents/commit/f8dc9f0))
+* **ui5-switch:** provide accessible-name attribute support ([#4735](https://github.com/SAP/ui5-webcomponents/issues/4735)) ([ee6819f](https://github.com/SAP/ui5-webcomponents/commit/ee6819f)), closes [#4147](https://github.com/SAP/ui5-webcomponents/issues/4147)
+* **ui5-table:** extend keyboard handling ([#4550](https://github.com/SAP/ui5-webcomponents/issues/4550)) ([8daa764](https://github.com/SAP/ui5-webcomponents/commit/8daa764)), closes [#3090](https://github.com/SAP/ui5-webcomponents/issues/3090)
+* **ui5-table:** improve keyboard handling ([#4631](https://github.com/SAP/ui5-webcomponents/issues/4631)) ([f1f2b1b](https://github.com/SAP/ui5-webcomponents/commit/f1f2b1b))
+* **ui5-tokenizer:** Implement token range deletion ([#4750](https://github.com/SAP/ui5-webcomponents/issues/4750)) ([cece8d7](https://github.com/SAP/ui5-webcomponents/commit/cece8d7))
+* **ui5-tree:** make `item-click` event preventable ([#4708](https://github.com/SAP/ui5-webcomponents/issues/4708)) ([29967f0](https://github.com/SAP/ui5-webcomponents/commit/29967f0)), closes [#4502](https://github.com/SAP/ui5-webcomponents/issues/4502)
+
+
+
+
+
 ## [1.1.2](https://github.com/SAP/ui5-webcomponents/compare/v1.1.1...v1.1.2) (2022-01-26)
 
 

package/README.md

@@ -61,6 +61,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Select                   | `ui5-select`                | `import "@ui5/webcomponents/dist/Select.js";`              |
 | Select Option            | `ui5-option`                | comes with `ui5-select `                                   |
 | Slider                   | `ui5-slider`                | `import "@ui5/webcomponents/dist/Slider.js";`              |
+| Split Button             | `ui5-split-button`          | `import "@ui5/webcomponents/dist/SplitButton.js";`         |
 | Step Input               | `ui5-step-input`            | `import "@ui5/webcomponents/dist/StepInput.js";`           |
 | Suggestion Item          | `ui5-suggestion-item`       | comes with `InputSuggestions.js` feature - see below       |
 | Switch                   | `ui5-switch`                | `import "@ui5/webcomponents/dist/Switch.js";`              |

package/dist/Avatar.js

@@ -200,7 +200,7 @@ const metadata = {
 		 *		} <br />
 		 * </code>
 		 * @type {HTMLElement}
-		 * @slot
+		 * @slot image
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */

package/dist/AvatarGroup.js

@@ -329,9 +329,9 @@ class AvatarGroup extends UI5Element {
 		return this._isGroup ? this._getAriaHasPopup() : undefined;
 	}
 
-	get _overflowButtonAccInfo() {
+	get _overflowButtonAccAttributes() {
 		return {
-			ariaHaspopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+			hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
 		};
 	}
 

package/dist/Breadcrumbs.js

@@ -24,6 +24,7 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 
 // Templates
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
@@ -117,8 +118,10 @@ const metadata = {
 
 		/**
 		 * Fires when a <code>BreadcrumbsItem</code> is clicked.
+		 * <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.Breadcrumbs#item-click
+		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
 		 * @public
 		 */
@@ -387,7 +390,9 @@ class Breadcrumbs extends UI5Element {
 		const link = event.target,
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-link` === link.id);
-		this.fireEvent("item-click", { item });
+		if (!this.fireEvent("item-click", { item }, true)) {
+			event.preventDefault();
+		}
 	}
 
 	_onLabelPress() {
@@ -401,9 +406,10 @@ class Breadcrumbs extends UI5Element {
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-li` === listItem.id);
 
-		window.open(item.href, item.target || "_self", "noopener,noreferrer");
-		this.responsivePopover.close();
-		this.fireEvent("item-click", { item });
+		if (this.fireEvent("item-click", { item }, true)) {
+			window.open(item.href, item.target || "_self", "noopener,noreferrer");
+			this.responsivePopover.close();
+		}
 	}
 
 	async _respPopover() {
@@ -562,6 +568,7 @@ class Breadcrumbs extends UI5Element {
 			List,
 			StandardListItem,
 			Icon,
+			Button,
 		];
 	}
 

package/dist/BusyIndicator.js

@@ -39,7 +39,7 @@ const metadata = {
 
 		/**
 		 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @defaultvalue ""
 		 * @since 1.0.0-rc.7

package/dist/Button.js

@@ -9,6 +9,7 @@ import {
 	isPhone,
 	isTablet,
 	isCombi,
+	isDesktop,
 	isSafari,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
@@ -117,10 +118,10 @@ const metadata = {
 		 * <b>Note:</b> Tooltips should only be set to icon-only buttons.
 		 * @type {string}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.11
+		 * @public
+		 * @since 1.2.0
 		 */
-		title: {
+		tooltip: {
 			type: String,
 		},
 
@@ -157,9 +158,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -172,7 +173,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0
@@ -183,13 +184,35 @@ const metadata = {
 		},
 
 		/**
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.2.0
 		 */
-		ariaExpanded: {
-			type: String,
+		accessibilityAttributes: {
+			type: Object,
 		},
 
 		/**
@@ -204,10 +227,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_buttonAccInfo: {
-			type: Object,
-		},
-
 		/**
 		 * Defines the tabIndex of the component.
 		 * @private
@@ -418,7 +437,9 @@ class Button extends UI5Element {
 			return;
 		}
 		this.active = false;
-		this.focused = false;
+		if (isDesktop()) {
+			this.focused = false;
+		}
 	}
 
 	_onfocusin(event) {
@@ -427,7 +448,9 @@ class Button extends UI5Element {
 		}
 
 		event.isMarked = "button";
-		this.focused = true;
+		if (isDesktop()) {
+			this.focused = true;
+		}
 	}
 
 	get hasButtonType() {
@@ -441,15 +464,6 @@ class Button extends UI5Element {
 		}).length;
 	}
 
-	get accInfo() {
-		return {
-			"ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
-			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
-			"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
-			"title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title),
-		};
-	}
-
 	static typeTextMappings() {
 		return {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,
@@ -473,7 +487,7 @@ class Button extends UI5Element {
 	}
 
 	get showIconTooltip() {
-		return this.iconOnly && !this.title;
+		return this.iconOnly && !this.tooltip;
 	}
 
 	get ariaLabelText() {

package/dist/Calendar.js

@@ -277,7 +277,7 @@ class Calendar extends CalendarPart {
 
 		// Create tags for the selected dates that don't already exist in DOM
 		selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
-			const dateElement = document.createElement("ui5-date");
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag());
 			dateElement.value = value;
 			this.appendChild(dateElement);
 		});

package/dist/Card.js

@@ -53,7 +53,7 @@ const metadata = {
 		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
 		 *
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.16
@@ -65,7 +65,7 @@ const metadata = {
 		/**
 		 * Defines the IDs of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.16

package/dist/CheckBox.js

@@ -35,7 +35,7 @@ const metadata = {
 
 		/**
 		 * Receives id(or many ids) of the elements that label the component
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0
@@ -46,9 +46,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @defaultvalue ""
 		 * @since 1.1.0

package/dist/ColorPalette.js

@@ -116,7 +116,7 @@ const metadata = {
 		 * @event sap.ui.webcomponents.main.ColorPalette#item-click
 		 * @public
 		 * @since 1.0.0-rc.15
-		 * @param {String} color the selected color
+		 * @param {string} color the selected color
 		 */
 		"item-click": {
 			details: {

package/dist/ColorPaletteItem.js

@@ -43,7 +43,7 @@ const metadata = {
 		/**
 		 * Defines the index of the item inside of the ColorPalette.
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		index: {
 			type: String,
@@ -52,7 +52,7 @@ const metadata = {
 		/**
 		 * Defines if the ColorPalette is on phone mode.
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 */
 		phone: {
 			type: Boolean,

package/dist/ColorPalettePopover.js

@@ -68,8 +68,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
 		/**
 		 * Defines the content of the component.
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
+		 * @slot colors
 		 * @public
 		 */
 		"default": {
@@ -84,7 +84,7 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.ColorPalettePopover#item-click
 		 * @public
-		 * @param {String} color the selected color
+		 * @param {string} color the selected color
 		 */
 		"item-click": {
 			details: {

package/dist/ColorPicker.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -41,7 +42,7 @@ const metadata = {
 		/**
 		 * Defines the HEX code of the currently selected color
 		 * *Note*: If Alpha(transperancy) is set it is not included in this property. Use <code>color</code> property.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		hex: {
@@ -52,7 +53,7 @@ const metadata = {
 
 		/**
 		 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		_mainColor: {
@@ -87,6 +88,20 @@ const metadata = {
 			defaultValue: 0,
 		},
 
+		/**
+		 * @private
+		 */
+		_isSelectedColorChanged: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		 _isHueValueChanged: {
+			type: Boolean,
+		},
+
 		/**
 		 * @private
 		 */
@@ -326,6 +341,8 @@ class ColorPicker extends UI5Element {
 		this.selectedHue = event.target.value;
 		this._hue = this.selectedHue;
 		this._setMainColor(this._hue);
+		// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
+		this._isHueValueChanged = true;
 
 		const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
 
@@ -343,6 +360,10 @@ class ColorPicker extends UI5Element {
 			newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
 		}
 
+		if (newValue === this.hex) {
+			return;
+		}
+
 		this.hex = newValue;
 		if (newValue.length !== 6 || !hexRegex.test(newValue)) {
 			this._wrongHEX = true;
@@ -425,17 +446,26 @@ class ColorPicker extends UI5Element {
 			y: y - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
+		// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
+		this._isSelectedColorChanged = true;
+
 		const tempColor = this._calculateColorFromCoordinates(x, y);
 		if (tempColor) {
 			this._setColor(HSLToRGB(tempColor));
 		}
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._handleHEXChange(event);
+		}
+	}
+
 	_calculateColorFromCoordinates(x, y) {
 		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
 		// and HSL format, the color will be parsed to RGB
 
-		const h = Math.round(this._hue / 4.25), // 0 ≤ H < 360
+		const h = this._hue / 4.25, // 0 ≤ H < 360
 			// 0 ≤ S ≤ 1
 			s = 1 - +(Math.round((y / 256) + "e+2") + "e-2"), // eslint-disable-line
 			// 0 ≤ V ≤ 1
@@ -488,7 +518,15 @@ class ColorPicker extends UI5Element {
 			y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
-		this._hue = this.selectedHue ? this.selectedHue : Math.round(hslColours.h * 4.25);
+		if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
+			this._isSelectedColorChanged = false;
+		} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
+			this._isHueValueChanged = false;
+			this._hue = this.selectedHue ? this.selectedHue : this._hue;
+		} else {
+			this._hue = Math.round(hslColours.h * 4.25);
+		}
+
 		this._setMainColor(this._hue);
 	}
 

package/dist/ComboBox.js

@@ -8,6 +8,10 @@ import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isBackSpace,
@@ -57,6 +61,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 
 /**
  * @public
@@ -206,9 +211,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -220,7 +225,7 @@ const metadata = {
 
 		/**
 		 * Receives id(or many ids) of the elements that label the component
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -468,7 +473,7 @@ class ComboBox extends UI5Element {
 			return;
 		}
 
-		if (!this.shadowRoot.contains(event.relatedTarget)) {
+		if (!this.shadowRoot.contains(event.relatedTarget) && (this.staticAreaItem !== event.relatedTarget)) {
 			this.focused = false;
 			!isPhone() && this._closeRespPopover(event);
 		}
@@ -1063,6 +1068,7 @@ class ComboBox extends UI5Element {
 			BusyIndicator,
 			Button,
 			StandardListItem,
+			GroupHeaderListItem,
 			Popover,
 			ComboBoxGroupItem,
 		];

package/dist/DatePicker.js

@@ -19,6 +19,7 @@ import {
 import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import HasPopup from "./types/HasPopup.js";
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
@@ -169,7 +170,7 @@ const metadata = {
 		/**
 		 * Defines the aria-label attribute for the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -180,7 +181,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -243,8 +244,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		change: {
 			details: {
@@ -263,8 +264,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		input: {
 			details: {
@@ -414,6 +415,7 @@ class DatePicker extends DateComponentBase {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 
+		this.value = this.normalizeValue(this.value);
 		this.liveValue = this.value;
 	}
 
@@ -600,6 +602,7 @@ class DatePicker extends DateComponentBase {
 	/**
 	 * Checks if a value is valid against the current date format of the DatePicker.
 	 * @param {string} value A value to be tested against the current date format
+	 * @returns {boolean}
 	 * @public
 	 */
 	isValid(value = "") {
@@ -671,9 +674,8 @@ class DatePicker extends DateComponentBase {
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
-			"ariaHasPopup": "true",
+			"ariaHasPopup": HasPopup.Grid,
 			"ariaAutoComplete": "none",
-			"role": "combobox",
 			"ariaControls": `${this._id}-responsive-popover`,
 			"ariaExpanded": this.isOpen(),
 			"ariaRequired": this.required,