@ui5/webcomponents 1.8.0 → 1.9.1

package/dist/i18n/messagebundle_th.properties

@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=การเลือกรายการ
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=เลือกแถวทั้งหมด
 
+TAB_ARIA_DESIGN_POSITIVE=เชิงบวก
+
+TAB_ARIA_DESIGN_NEGATIVE=เชิงลบ
+
+TAB_ARIA_DESIGN_CRITICAL=วิกฤต
+
+TAB_ARIA_DESIGN_NEUTRAL=เป็นกลาง
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=ถัดไป
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=ก่อนหน้า

package/dist/i18n/messagebundle_tr.properties

@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=Kalem seçimi
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Tüm satırları seç
 
+TAB_ARIA_DESIGN_POSITIVE=Pozitif
+
+TAB_ARIA_DESIGN_NEGATIVE=Negatif
+
+TAB_ARIA_DESIGN_CRITICAL=Kritik
+
+TAB_ARIA_DESIGN_NEUTRAL=Nötr
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=Sonraki
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Önceki

package/dist/i18n/messagebundle_uk.properties

@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=Вибір позиції
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Вибрати всі рядки
 
+TAB_ARIA_DESIGN_POSITIVE=Додатне
+
+TAB_ARIA_DESIGN_NEGATIVE=Від’ємне
+
+TAB_ARIA_DESIGN_CRITICAL=Критично
+
+TAB_ARIA_DESIGN_NEUTRAL=Нейтрально
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=Далі
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Назад

package/dist/i18n/messagebundle_vi.properties

@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=Lựa chọn mục
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Lựa chọn tất cả hàng
 
+TAB_ARIA_DESIGN_POSITIVE=Dương
+
+TAB_ARIA_DESIGN_NEGATIVE=Âm
+
+TAB_ARIA_DESIGN_CRITICAL=Tới hạn
+
+TAB_ARIA_DESIGN_NEUTRAL=Trung tính
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=Kế tiếp
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Trước

package/dist/i18n/messagebundle_zh_CN.properties

@@ -31,9 +31,9 @@ BREADCRUMBS_CANCEL_BUTTON=取消
 
 BUSY_INDICATOR_TITLE=请稍候
 
-BUTTON_ARIA_TYPE_ACCEPT=肯定操作
+BUTTON_ARIA_TYPE_ACCEPT=积极操作
 
-BUTTON_ARIA_TYPE_REJECT=否定操作
+BUTTON_ARIA_TYPE_REJECT=消极操作
 
 BUTTON_ARIA_TYPE_EMPHASIZED=加重
 
@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=项目选择
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=选择所有行
 
+TAB_ARIA_DESIGN_POSITIVE=积极
+
+TAB_ARIA_DESIGN_NEGATIVE=消极
+
+TAB_ARIA_DESIGN_CRITICAL=临界
+
+TAB_ARIA_DESIGN_NEUTRAL=中性
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=下一个
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一个

package/dist/i18n/messagebundle_zh_TW.properties

@@ -179,6 +179,14 @@ ARIA_LABEL_ROW_SELECTION=項目選擇
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=選擇所有列
 
+TAB_ARIA_DESIGN_POSITIVE=正面
+
+TAB_ARIA_DESIGN_NEGATIVE=負面
+
+TAB_ARIA_DESIGN_CRITICAL=重要
+
+TAB_ARIA_DESIGN_NEUTRAL=一般
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=下一步
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一步

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -8,6 +8,7 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -41,13 +42,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.8.0",
-    "@ui5/webcomponents-icons": "1.8.0",
-    "@ui5/webcomponents-localization": "1.8.0",
-    "@ui5/webcomponents-theming": "1.8.0"
+    "@ui5/webcomponents-base": "1.9.1",
+    "@ui5/webcomponents-icons": "1.9.1",
+    "@ui5/webcomponents-localization": "1.9.1",
+    "@ui5/webcomponents-theming": "1.9.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.8.0",
-    "chromedriver": "105.0.1"
+    "@ui5/webcomponents-tools": "1.9.1",
+    "chromedriver": "106.0.1"
   }
 }

package/src/Avatar.js

@@ -84,7 +84,7 @@ const metadata = {
 		 * <li><code>Circle</code></li>
 		 * <li><code>Square</code></li>
 		 * </ul>
-		 * @type {AvatarShape}
+		 * @type {sap.ui.webcomponents.main.types.AvatarShape}
 		 * @defaultvalue "Circle"
 		 * @public
 		 */
@@ -104,7 +104,7 @@ const metadata = {
 		 * <li><code>L</code></li>
 		 * <li><code>XL</code></li>
 		 * </ul>
-		 * @type {AvatarSize}
+		 * @type {sap.ui.webcomponents.main.types.AvatarSize}
 		 * @defaultvalue "S"
 		 * @public
 		 */
@@ -138,7 +138,7 @@ const metadata = {
 		 * <li><code>Accent10</code></li>
 		 * <li><code>Placeholder</code></li>
 		 * </ul>
-		 * @type {AvatarColorScheme}
+		 * @type {sap.ui.webcomponents.main.types.AvatarColorScheme}
 		 * @defaultvalue "Accent6"
 		 * @public
 		 */
@@ -219,7 +219,7 @@ const metadata = {
 		 * &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>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>
 		 * &lt;/ui5-avatar>
 		 * <br><br>
 		 * <ui5-avatar initials="AB" color-scheme="Accent1">
@@ -276,7 +276,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Avatar
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-avatar
  * @since 1.0.0-rc.6
  * @implements sap.ui.webcomponents.main.IAvatar
@@ -314,7 +314,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective avatar size.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "S"
 	 * @private
 	 */
@@ -326,7 +326,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective background color.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "Accent6"
 	 * @private
 	 */
@@ -344,9 +344,11 @@ class Avatar extends UI5Element {
 	}
 
 	get validInitials() {
-		const validInitials = /^[a-zA-Z]{1,2}$/;
+		// initials should consist of only 1,2 or 3 latin letters
+		const validInitials = /^[a-zA-Z]{1,3}$/,
+			  areInitialsValid = this.initials && validInitials.test(this.initials);
 
-		if (this.initials && validInitials.test(this.initials)) {
+		if (areInitialsValid) {
 			return this.initials;
 		}
 
@@ -370,6 +372,35 @@ class Avatar extends UI5Element {
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
 	}
 
+	onEnterDOM() {
+		this._checkInitialsWidth();
+
+		if (!this.validInitials) {
+			// if initials are not valid,an icon should be shown inside the avatar
+			this._setFallbackIcon();
+		}
+	}
+
+	_setFallbackIcon() {
+		// the default icon shown inside the avatar,
+		// when the initials are not valid
+		this.icon = "employee";
+		return this.icon;
+	}
+
+	_checkInitialsWidth() {
+		// if initials` width is bigger than the avatar,
+		// an icon should be shown inside the avatar
+		const avatar = this.getDomRef(),
+			avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+		if (this.initials && this.initials.length === 3) {
+			if (avatarInitials.scrollWidth >= avatar.scrollWidth) {
+				this.icon = "employee";
+			}
+		}
+		return this.icon;
+	}
+
 	_onClickHandler(event) {
 		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
 		event.stopPropagation();

package/src/AvatarGroup.js

@@ -71,12 +71,12 @@ const metadata = {
 		 * <li><code>Group</code></li>
 		 * <li><code>Individual</code></li>
 		 * </ul>
-		 * @type {AvatarGroupType}
+		 * @type {sap.ui.webcomponents.main.types.AvatarGroupType}
 		 * @defaultValue "Group"
 		 * @public
 		 */
 		type: {
-			type: String,
+			type: AvatarGroupType,
 			defaultValue: AvatarGroupType.Group,
 		},
 
@@ -229,7 +229,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.AvatarGroup
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-avatar-group
  * @since 1.0.0-rc.11
  * @public
@@ -278,7 +278,7 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
 	 * @readonly
-	 * @type { HTMLElement[] }
+	 * @type {HTMLElement[]}
 	 * @defaultValue []
 	 * @public
 	 */
@@ -289,7 +289,7 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
 	 * @readonly
-	 * @type { AvatarColorScheme[] }
+	 * @type {sap.ui.webcomponents.main.types.AvatarColorScheme[]}
 	 * @defaultValue []
 	 * @public
 	 */

package/src/Breadcrumbs.js

@@ -69,7 +69,7 @@ const metadata = {
 		 * <b>Note:</b> The <code>Standard</code> breadcrumbs show the current page as the last item in the trail.
 		 * The last item contains only plain text and is not a link.
 		 *
-		 * @type {BreadcrumbsDesign}
+		 * @type {sap.ui.webcomponents.main.types.BreadcrumbsDesign}
 		 * @defaultvalue "Standard"
 		 * @public
 		*/
@@ -92,7 +92,7 @@ const metadata = {
 		 * <li><code>GreaterThan</code></li>
 		 * </ul>
 		 *
-		 * @type {BreadcrumbsSeparatorStyle}
+		 * @type {sap.ui.webcomponents.main.types.BreadcrumbsSeparatorStyle}
 		 * @defaultvalue "Slash"
 		 * @public
 		 */
@@ -104,7 +104,7 @@ const metadata = {
 		/**
 		 * Holds the number of items in the overflow.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -172,7 +172,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Breadcrumbs
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-breadcrumbs
  * @appenddocs BreadcrumbsItem
  * @public

package/src/BusyIndicator.js

@@ -59,7 +59,7 @@ const metadata = {
 		 * <li><code>Large</code></li>
 		 * </ul>
 		 *
-		 * @type {BusyIndicatorSize}
+		 * @type {sap.ui.webcomponents.main.types.BusyIndicatorSize}
 		 * @defaultvalue "Medium"
 		 * @public
 		 */
@@ -82,7 +82,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -139,7 +139,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.BusyIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-busy-indicator
  * @public
  * @since 0.12.0

package/src/Button.js

@@ -47,7 +47,7 @@ const metadata = {
 		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -315,7 +315,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Button
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-button
  * @implements sap.ui.webcomponents.main.IButton
  * @public

package/src/Calendar.js

@@ -41,7 +41,7 @@ const metadata = {
 		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
 		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
 		 * </ul>
-		 * @type {CalendarSelectionMode}
+		 * @type {sap.ui.webcomponents.main.types.CalendarSelectionMode}
 		 * @defaultvalue "Single"
 		 * @public
 		 */
@@ -240,7 +240,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Calendar
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-calendar
  * @appenddocs CalendarDate
  * @public

package/src/CalendarHeader.js

@@ -22,7 +22,7 @@ const metadata = {
 	properties: {
 		/**
 		 * Already normalized by Calendar
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 */
 		timestamp: {
@@ -31,7 +31,7 @@ const metadata = {
 
 		/**
 		 * Already normalized by Calendar
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		primaryCalendarType: {
@@ -42,7 +42,7 @@ const metadata = {
 		 * Already normalized by Calendar
 		 * @sience 1.0.0-rc.16
 		 * @defaultvalue undefined
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		secondaryCalendarType: {
@@ -51,7 +51,7 @@ const metadata = {
 
 		/**
 		 * Stores information for month button for secondary calendar type
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		*/
 		buttonTextForSecondaryCalendarType: {

package/src/CalendarPart.js

@@ -12,7 +12,7 @@ const metadata = {
 		/**
 		 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
 		 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @protected
 		 */
 		timestamp: {
@@ -31,7 +31,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.CalendarPart
- * @extends DateComponentBase
+ * @extends sap.ui.webcomponents.main.DateComponentBase
  * @public
  */
 class CalendarPart extends DateComponentBase {

package/src/CardHeader.js

@@ -90,7 +90,7 @@ const metadata = {
 		 * Define the <code>aria-level</code> attribute of the component
 		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
 		 * @private
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 3
 		 */
 		ariaLevel: {

package/src/Carousel.js

@@ -52,7 +52,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -63,7 +63,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -74,7 +74,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -112,7 +112,7 @@ const metadata = {
 
 		/**
 		 * Defines the index of the initially selected item.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * When set to "Content", the arrows are placed on the sides of the current page.
 		 * <br>
 		 * When set to "Navigation", the arrows are placed on the sides of the page indicator.
-		 * @type {CarouselArrowsPlacement}
+		 * @type {sap.ui.webcomponents.main.types.CarouselArrowsPlacement}
 		 * @defaultvalue "Content"
 		 * @public
 		 */
@@ -265,7 +265,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Carousel
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-carousel
  * @since 1.0.0-rc.6
  * @public

package/src/CheckBox.js

@@ -126,6 +126,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -157,7 +159,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -175,7 +177,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */

package/src/ColorPalette.js

@@ -69,7 +69,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the color palette
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 * @since 1.0.0-rc.16
 		 */
@@ -79,7 +79,7 @@ const metadata = {
 
 		/**
 		 * Defines the selected color.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		_selectedColor: {
@@ -88,7 +88,7 @@ const metadata = {
 
 		/**
 		 * Defines if the palette is in Popup or Embeded mode.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		popupMode: {
@@ -146,7 +146,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalette
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette
  * @since 1.0.0-rc.12
  * @appenddocs ColorPaletteItem

package/src/ColorPaletteItem.js

@@ -23,7 +23,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> The value should be a valid CSS color.
 		 *
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		value: {

package/src/ColorPalettePopover.js

@@ -58,7 +58,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		defaultColor: {
@@ -120,7 +120,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalettePopover
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette-popover
  * @public
  * @since 1.0.0-rc.16

package/src/ColorPicker.js

@@ -40,7 +40,7 @@ const metadata = {
 		 * 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.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		color: {
@@ -159,7 +159,7 @@ const metadata = {
  * @author SAP SE
  * @since 1.0.0-rc.12
  * @alias sap.ui.webcomponents.main.ColorPicker
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-picker
  * @public
  */

package/src/ComboBox.js

@@ -80,6 +80,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -141,7 +143,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -375,7 +377,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBox
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-combobox
  * @appenddocs ComboBoxItem ComboBoxGroupItem
  * @public
@@ -983,6 +985,7 @@ class ComboBox extends UI5Element {
 
 	_announceSelectedItem(indexOfItem) {
 		const currentItem = this._filteredItems[indexOfItem];
+		const currentItemAdditionalText = currentItem.additionalText;
 		const isGroupItem = currentItem && currentItem.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
 		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
@@ -990,7 +993,7 @@ class ComboBox extends UI5Element {
 		if (isGroupItem) {
 			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
 		} else {
-			announce(`${itemPositionText}`, "Polite");
+			announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), "Polite");
 		}
 	}
 

package/src/ComboBoxGroupItem.js

@@ -39,7 +39,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBoxGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-cb-group-item
  * @public
  * @implements sap.ui.webcomponents.main.IComboBoxItem