@ui5/webcomponents 1.6.0 → 1.7.0

package/dist/i18n/messagebundle_sv.properties

@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=Expandera nod
 
 TREE_ITEM_COLLAPSE_NODE=Komprimera nod
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=Värdestatus Fel
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=Värdestatus Varning
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=Värdestatus OK
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=Värdestatus Information
 
 VALUE_STATE_ERROR=Ogiltig inmatning
 

package/dist/i18n/messagebundle_th.properties

@@ -109,11 +109,11 @@ LINK_EMPHASIZED=เน้น
 
 LIST_ITEM_POSITION=รายการในลิสต์ {0} จาก {1}
 
-LIST_ITEM_SELECTED=รายการที่เลือก
+LIST_ITEM_SELECTED=ที่เลือก
 
 LIST_ITEM_NOT_SELECTED=ไม่ได้เลือก
 
-LIST_ITEM_GROUP_HEADER=ข้อมูลส่วนหัวของกลุ่ม
+LIST_ITEM_GROUP_HEADER=ส่วนหัวของกลุ่ม
 
 ARIA_LABEL_LIST_ITEM_CHECKBOX=โหมดการเลือกหลายรายการ
 
@@ -159,11 +159,11 @@ RATING_INDICATOR_TEXT=ตัวบ่งชี้การจัดอันด
 
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=ปฏิเสธ
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=กลุ่มปุ่มที่มีการแบ่งเซกเมนต์
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=กลุ่มปุ่มที่แบ่งเซกเมนต์
 
 SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=กด SPACE หรือ ENTER เพื่อเลือกรายการ
 
-SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่มีการแบ่งเซกเมนต์
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่แบ่งเซกเมนต์
 
 SLIDER_ARIA_DESCRIPTION=ตัวจัดการแถบเลื่อน
 
@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=ขยายโหนด
 
 TREE_ITEM_COLLAPSE_NODE=ย่อรวมโหนด
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=สถานะของค่า - ผิดพลาด
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=สถานะของค่า - คำเตือน
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=สถานะของค่า - สำเร็จ
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=สถานะของค่า - ข้อมูล
 
 VALUE_STATE_ERROR=การป้อนข้อมูลไม่ถูกต้อง
 

package/dist/i18n/messagebundle_tr.properties

@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=Düğümü genişlet
 
 TREE_ITEM_COLLAPSE_NODE=Düğümü daralt
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=Hata değer durumu
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=Uyarı değer durumu
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=Başarı değer durumu
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=Bilgi değer durumu
 
 VALUE_STATE_ERROR=Geçersiz giriş
 

package/dist/i18n/messagebundle_uk.properties

@@ -143,7 +143,7 @@ VALUE_STATE_ERROR_ALREADY_SELECTED=Це значення вже вибрано.
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=Багатозначне введення
 
-MULTIINPUT_SHOW_MORE_TOKENS={0} Більше
+MULTIINPUT_SHOW_MORE_TOKENS=Ще {0}
 
 PANEL_ICON=Розгорнути/згорнути
 
@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=Розгорнути вузол
 
 TREE_ITEM_COLLAPSE_NODE=Згорнути вузол
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=Стан значення: помилка
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=Стан значення: застереження
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=Стан значення: успіх
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=Стан значення: інформація
 
 VALUE_STATE_ERROR=Недійсний запис
 

package/dist/i18n/messagebundle_vi.properties

@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=Mở rộng nút
 
 TREE_ITEM_COLLAPSE_NODE=Thu gọn nút
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=Đánh giá tình trạng lỗi
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=Đánh giá tình trạng cảnh báo
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=Đánh giá tình trạng thành công
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=Thông tin tình trạng giá trị
 
 VALUE_STATE_ERROR=Mục nhập không hợp lệ
 

package/dist/i18n/messagebundle_zh_CN.properties

@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=展开节点
 
 TREE_ITEM_COLLAPSE_NODE=折叠节点
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=值状态错误
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=值状态警告
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=值状态成功
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=值状态信息
 
 VALUE_STATE_ERROR=无效输入
 

package/dist/i18n/messagebundle_zh_TW.properties

@@ -231,13 +231,13 @@ TREE_ITEM_EXPAND_NODE=展開節點
 
 TREE_ITEM_COLLAPSE_NODE=收縮節點
 
-VALUE_STATE_TYPE_ERROR=Value State Error
+VALUE_STATE_TYPE_ERROR=值狀態 (錯誤)
 
-VALUE_STATE_TYPE_WARNING=Value State Warning
+VALUE_STATE_TYPE_WARNING=值狀態 (警告)
 
-VALUE_STATE_TYPE_SUCCESS=Value State Success
+VALUE_STATE_TYPE_SUCCESS=值狀態 (成功)
 
-VALUE_STATE_TYPE_INFORMATION=Value State Information
+VALUE_STATE_TYPE_INFORMATION=值狀態資訊
 
 VALUE_STATE_ERROR=無效輸入項
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -41,13 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.6.0",
-    "@ui5/webcomponents-icons": "1.6.0",
-    "@ui5/webcomponents-localization": "1.6.0",
-    "@ui5/webcomponents-theming": "1.6.0"
+    "@ui5/webcomponents-base": "1.7.0",
+    "@ui5/webcomponents-icons": "1.7.0",
+    "@ui5/webcomponents-localization": "1.7.0",
+    "@ui5/webcomponents-theming": "1.7.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.6.0",
-    "chromedriver": "102.0.0"
+    "@ui5/webcomponents-tools": "1.7.0",
+    "chromedriver": "104.0.0"
   }
 }

package/src/Avatar.hbs

@@ -17,4 +17,6 @@
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
+
+	<slot name="badge"></slot>
 </div>

package/src/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/src/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/src/Breadcrumbs.hbs

@@ -6,7 +6,7 @@
 
         <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" 
             ?hidden="{{_isOverflowEmpty}}">
-            <ui5-link @click="{{_openRespPopover}}"
+            <ui5-link @ui5-click="{{_openRespPopover}}"
                 accessible-role="button"
                 aria-label="{{_dropdownArrowAccessibleNameText}}"
                 aria-haspopup="{{_ariaHasPopup}}">

package/src/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/src/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/src/CalendarHeader.hbs

@@ -2,6 +2,7 @@
 	<div
 		data-ui5-cal-header-btn-prev
 		class="{{classes.prevButton}}"
+		role="button"
 		@mousedown={{onPrevButtonClick}}
 		title="{{_prevButtonText}}"
 	>
@@ -14,6 +15,7 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isMonthButtonHidden}}"
 			tabindex="0"
+			role="button"
 			aria-label="{{accInfo.ariaLabelMonthButton}}"
 			@click={{onMonthButtonClick}}
 			@keydown={{onMonthButtonKeyDown}}
@@ -29,6 +31,7 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isYearButtonHidden}}"
 			tabindex="0"
+			role="button"
 			@click={{onYearButtonClick}}
 			@keydown={{onYearButtonKeyDown}}
 			@keyup={{onYearButtonKeyUp}}
@@ -43,6 +46,7 @@
 	<div
 		data-ui5-cal-header-btn-next
 		class="{{classes.nextButton}}"
+		role="button"
 		@mousedown={{onNextButtonClick}}
 		title={{_nextButtonText}}
 	>

package/src/CardHeader.hbs

@@ -6,6 +6,7 @@
 	@click="{{_click}}"
 	@keydown="{{_keydown}}"
 	@keyup="{{_keyup}}"
+	part="root"
 >
 	<div
 		class="ui5-card-header-focusable-element"

package/src/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/src/Carousel.hbs

@@ -8,7 +8,7 @@
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"
 >
-    <div class="{{classes.viewport}}">
+    <div class="{{classes.viewport}}" part="content">
         <div class="{{classes.content}}" style="{{styles.content}}">
             {{#each items}}
                  <div id="{{id}}"

package/src/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/src/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/src/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/src/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/src/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/src/Dialog.hbs

@@ -8,7 +8,11 @@
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
 			@mousedown="{{_onDragMouseDown}}"
-			part="header">
+			part="header"
+			state="{{this.state}}">
+			{{#if hasValueState}}
+			<ui5-icon class="ui5-dialog-value-state-icon" name="{{_dialogStateIcon}}"></ui5-icon>
+			{{/if}}
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}

package/src/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/src/Icon.hbs

@@ -20,6 +20,8 @@
 	{{/if}}
 
 	<g role="presentation">
-		<path d="{{pathData}}"/>
+		{{#each pathData}}
+			<path d="{{this}}"></path>
+		{{/each}}
 	</g>
 </svg>

package/src/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;