@ui5/webcomponents 1.7.1 → 1.9.0

package/src/Tab.js

@@ -1,6 +1,14 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+	TAB_ARIA_DESIGN_POSITIVE,
+	TAB_ARIA_DESIGN_NEGATIVE,
+	TAB_ARIA_DESIGN_CRITICAL,
+	TAB_ARIA_DESIGN_NEUTRAL,
+} from "./generated/i18n/i18n-defaults.js";
+
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -21,6 +29,13 @@ import css from "./generated/themes/Tab.css.js";
 import stripCss from "./generated/themes/TabInStrip.css.js";
 import overflowCss from "./generated/themes/TabInOverflow.css.js";
 
+const DESIGN_DESCRIPTIONS = {
+	[SemanticColor.Positive]: TAB_ARIA_DESIGN_POSITIVE,
+	[SemanticColor.Negative]: TAB_ARIA_DESIGN_NEGATIVE,
+	[SemanticColor.Neutral]: TAB_ARIA_DESIGN_NEUTRAL,
+	[SemanticColor.Critical]: TAB_ARIA_DESIGN_CRITICAL,
+};
+
 /**
  * @public
  */
@@ -124,7 +139,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> The design depends on the current theme.
-		 * @type {SemanticColor}
+		 * @type {sap.ui.webcomponents.main.types.SemanticColor}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -169,7 +184,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Tab
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tab
  * @implements sap.ui.webcomponents.main.ITab
  * @public
@@ -337,6 +352,10 @@ class Tab extends UI5Element {
 			labels.push(`${this._id}-icon`);
 		}
 
+		if (this._designDescription) {
+			labels.push(`${this._id}-designDescription`);
+		}
+
 		return labels.join(" ");
 	}
 
@@ -395,6 +414,14 @@ class Tab extends UI5Element {
 		}
 	}
 
+	get _designDescription() {
+		if (this.design === SemanticColor.Default) {
+			return null;
+		}
+
+		return Tab.i18nBundle.getText(DESIGN_DESCRIPTIONS[this.design]);
+	}
+
 	get semanticIconClasses() {
 		const classes = ["ui5-tab-semantic-icon"];
 
@@ -426,6 +453,10 @@ class Tab extends UI5Element {
 	get overflowState() {
 		return (this.disabled || this.isSingleClickArea) ? ListItemType.Inactive : ListItemType.Active;
 	}
+
+	static async onDefine() {
+		Tab.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Tab.define();

package/src/TabContainer.js

@@ -140,7 +140,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {TabContainerTabsPlacement}
+		 * @type {sap.ui.webcomponents.main.types.TabContainerTabsPlacement}
 		 * @defaultvalue "Top"
 		 * @since 1.0.0-rc.7
 		 * @private
@@ -181,7 +181,7 @@ const metadata = {
 		 * <li><code>Inline</code></li>
 		 * </ul>
 		 *
-		 * @type {TabLayout}
+		 * @type {sap.ui.webcomponents.main.types.TabLayout}
 		 * @defaultvalue "Standard"
 		 * @public
 		 */
@@ -206,7 +206,7 @@ const metadata = {
 		 * <li><code>StartAndEnd</code></li>
 		 * </ul>
 		 *
-		 * @type {TabsOverflowMode}
+		 * @type {sap.ui.webcomponents.main.types.TabsOverflowMode}
 		 * @defaultvalue "End"
 		 * @since 1.1.0
 		 * @public
@@ -626,6 +626,7 @@ class TabContainer extends UI5Element {
 	 * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
 	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
 	 * @public
+	 * @readonly
 	 *
 	 * @returns {sap.ui.webcomponents.main.ITab[]}
 	 */
@@ -1144,6 +1145,11 @@ class TabContainer extends UI5Element {
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
+	async _closeRespPopover() {
+		this.responsivePopover = await this._respPopover();
+		this.responsivePopover.close();
+	}
+
 	get classes() {
 		return {
 			root: {

package/src/TabInOverflow.hbs

@@ -4,7 +4,6 @@
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
 	._realTab="{{this}}"
 	style="{{this._style}}"
 >
@@ -13,15 +12,18 @@
 			{{#if this.semanticIconName}}
 				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
 			{{/if}}
-
 			{{#if this.icon}}
 				<ui5-icon name="{{this.icon}}"></ui5-icon>
 			{{/if}}
 			{{this.text}}
-
 			{{#if this.additionalText}}
 				({{this.additionalText}})
 			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
 		</div>
 	</div>
 </ui5-li-custom>

package/src/TabInStrip.hbs

@@ -14,7 +14,13 @@
 >
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
-			<ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+			<ui5-icon id="{{this._id}}-icon" name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+		</div>
+	{{/if}}
+
+	{{#if this._designDescription}}
+		<div id="{{this._id}}-designDescription" class="ui5-tab-strip-design-description">
+			{{this._designDescription}}
 		</div>
 	{{/if}}
 

package/src/TabSeparator.js

@@ -26,7 +26,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TabSeparator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tab-separator
  * @implements sap.ui.webcomponents.main.ITab
  * @public

package/src/Table.hbs

@@ -9,7 +9,6 @@
 		<thead>
 			<tr
 				id="{{_columnHeader.id}}"
-				role="row"
 				class="ui5-table-header-row"
 				aria-label="{{ariaLabelText}}"
 				tabindex="{{_columnHeader._tabIndex}}"
@@ -34,6 +33,7 @@
 				{{#each visibleColumns}}
 					<slot name="{{this._individualSlot}}"></slot>
 				{{/each}}
+				<th class="ui5-table-header-row-navigated"></th>
 			</tr>
 		</thead>
 
@@ -44,7 +44,7 @@
 
 			{{#unless rows.length}}
 				{{#unless hideNoData}}
-					<tr class="ui5-table-no-data-row-root" role="row">
+					<tr class="ui5-table-no-data-row-root">
 						<td colspan="{{visibleColumnsCount}}" role="cell">
 
 							<div class="ui5-table-no-data-row">

package/src/Table.js

@@ -35,7 +35,7 @@ import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being us
 import {
 	LOAD_MORE_TEXT,
 	ARIA_LABEL_SELECT_ALL_CHECKBOX,
-	TABLE_HEADER_ROW_TEXT,
+	TABLE_HEADER_ROW_INFORMATION,
 	TABLE_ROW_POSITION,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -166,7 +166,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * and the component will fallback to <code>growing="Button"</code>.
-		 * @type {TableGrowingMode}
+		 * @type {sap.ui.webcomponents.main.types.TableGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.12
 		 * @public
@@ -194,7 +194,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -242,7 +242,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>None</code></li>
 		 * <ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -516,7 +516,7 @@ class Table extends UI5Element {
 	onBeforeRendering() {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
-		const rowsCount = this.rows.length;
+		const rowsCount = this.rows.length + 1;
 		const selectedRows = this.selectedRows;
 
 		this.rows.forEach((row, index) => {
@@ -525,7 +525,7 @@ class Table extends UI5Element {
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
-			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 2, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -1131,7 +1131,8 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const rowsCount = this.rows.length + 1;
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_INFORMATION, rowsCount);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");

package/src/TableColumn.js

@@ -31,7 +31,7 @@ const metadata = {
 		 * <br>
 		 * For further responsive design options, see <code>demandPopin</code> property.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue Infinity
 		 * @public
 		 */

package/src/TableGroupRow.hbs

@@ -1,7 +1,6 @@
 <tr
 	class="ui5-table-group-row-root"
 	part="group-row"
-	role="row"
 	aria-label={{ariaLabelText}}
 	tabindex="{{_tabIndex}}"
 	@focusin="{{_onfocusin}}"

package/src/TableGroupRow.js

@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>MultiSelect</code></li>
 		 * </ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @private
 		 */

package/src/TableRow.hbs

@@ -11,15 +11,16 @@
 	@touchend="{{_ontouchend}}"
 	aria-label="{{ariaLabelText}}"
 	aria-selected="{{this.selected}}"
+	aria-current="{{_ariaCurrent}}"
 	data-sap-focus-ref
 	part="row"
-	role="row"
+	data-ui5-dir="{{effectiveDir}}"
 >
 
 	{{#if isMultiSelect}}
-		<td 
-			class="ui5-table-multi-select-cell" 
-			aria-hidden="true" 
+		<td
+			class="ui5-table-multi-select-cell"
+			aria-hidden="true"
 			role="presentation"
 		>
 			<ui5-checkbox
@@ -42,11 +43,15 @@
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	{{/if}}
+
+	<td class="ui5-table-row-navigated">
+		<div class="ui5-table-div-navigated"></div>
+	</td>
 </tr>
 
 {{#if shouldPopin}}
 	{{#each popinCells}}
-		<tr part="popin-row" role="row" class="{{this.classes}}"
+		<tr part="popin-row" class="{{this.classes}}"
 			@click="{{../_onrowclick}}"
 			@keydown="{{../_onkeydown}}"
 			@keyup="{{../_onkeyup}}">
@@ -58,6 +63,12 @@
 					<slot name="{{this.cell._individualSlot}}"></slot>
 				</div>
 			</td>
+
+			<td class="ui5-table-row-navigated">
+				<div class="ui5-table-div-navigated"></div>
+			</td>
 		</tr>
 	{{/each}}
 {{/if}}
+
+

package/src/TableRow.js

@@ -14,7 +14,11 @@ import CheckBox from "./CheckBox.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	ARIA_LABEL_ROW_SELECTION,
+	LIST_ITEM_NOT_SELECTED,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/TableRow.css.js";
@@ -44,7 +48,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
 		/**
 		 * Defines the mode of the row (None, SingleSelect, MultiSelect).
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @private
@@ -65,7 +69,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press,
 		 * while with type <code>Inactive</code> - will not.
 		 *
-		 * @type {TableRowType}
+		 * @type {sap.ui.webcomponents.main.types.TableRowType}
 		 * @defaultvalue "Inactive"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -98,7 +102,17 @@ const metadata = {
 		active: {
 			type: Boolean,
 		},
-
+		/**
+		 * Indicates if the table row is navigated.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.9.0
+		 * @public
+		*/
+		navigated: {
+			type: Boolean,
+		},
 		_columnsInfo: {
 			type: Object,
 			multiple: true,
@@ -215,8 +229,11 @@ class TableRow extends UI5Element {
 		const itemSelectable = isSingleSelect || this.isMultiSelect;
 		const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
 		const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
+		const rowElements = Array.from(this.shadowRoot.querySelectorAll("tr") || []);
+		const elements = rowElements.map(getLastTabbableElement);
+		const lastFocusableElement = elements.pop();
 
-		if (isTabNext(event) && activeElement === (getLastTabbableElement(this) || this.root)) {
+		if (isTabNext(event) && activeElement === (lastFocusableElement || this.root)) {
 			this.fireEvent("_forward-after", { target: activeElement });
 		}
 
@@ -307,6 +324,10 @@ class TableRow extends UI5Element {
 		return this.getRootNode().activeElement.hasAttribute(attr);
 	}
 
+	get _ariaCurrent() {
+		return this.navigated ? true : undefined;
+	}
+
 	activate() {
 		if (this.type === TableRowType.Active) {
 			this.active = true;
@@ -384,11 +405,18 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelText() {
+		const isSelected = this.selected ? TableRow.i18nBundle.getText(LIST_ITEM_SELECTED) : TableRow.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		const isRowSelectable = this.isSingleSelect || this.isMultiSelect;
 		const ariaLabel = this.cells.map((cell, index) => {
 			const columText = this.getColumnTextByIdx(index);
 			const cellText = this.getCellText(cell);
 			return `${columText} ${cellText}`;
 		}).join(" ");
+
+		if (isRowSelectable) {
+			return `${ariaLabel}. ${this._ariaPosition}. ${isSelected}`;
+		}
+
 		return `${ariaLabel}. ${this._ariaPosition}`;
 	}
 

package/src/TextArea.js

@@ -19,9 +19,14 @@ import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
 
 import {
+	VALUE_STATE_SUCCESS,
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -115,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> If <code>maxlength</code> property is set,
 		 * the component turns into "Warning" state once the characters exceeds the limit.
 		 * In this case, only the "Error" state is considered and can be applied.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.7
 		 * @public
@@ -135,7 +140,7 @@ const metadata = {
 		 * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>
 		 * </ul>
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -147,7 +152,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of characters that the <code>value</code> can have.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue null
 		 * @public
 		 */
@@ -188,7 +193,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of lines that the component can grow.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -619,10 +624,14 @@ class TextArea extends UI5Element {
 		}
 
 		if (this.hasCustomValueState) {
-			return this.valueStateMessageText.map(el => el.textContent).join(" ");
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 		}
 
-		return this.valueStateText;
+		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+	}
+
+	get valueStateDefaultText() {
+		return this.valueStateTextMappings[this.valueState];
 	}
 
 	get ariaInvalid() {
@@ -649,14 +658,6 @@ class TextArea extends UI5Element {
 		return this.valueStateMessage.map(x => x.cloneNode(true));
 	}
 
-	get valueStateText() {
-		if (this.valueState !== ValueState.Error) {
-			return this.valueStateTextMappings()[ValueState.Warning];
-		}
-
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
 	get _valueStatePopoverHorizontalAlign() {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
@@ -675,14 +676,24 @@ class TextArea extends UI5Element {
 		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 	}
 
-	valueStateTextMappings() {
+	get valueStateTextMappings() {
 		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS),
 			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
 			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	static get dependencies() {
 		return [Popover, Icon];
 	}

package/src/TextAreaPopover.hbs

@@ -22,6 +22,6 @@
 			{{this}}
 		{{/each}}
 	{{else}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{/if}}
 {{/inline}}

package/src/TimePicker.js

@@ -108,7 +108,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TimePicker
- * @extends TimePickerBase
+ * @extends sap.ui.webcomponents.main.TimePickerBase
  * @tagname ui5-time-picker
  * @public
  * @since 1.0.0-rc.6
@@ -138,7 +138,7 @@ class TimePicker extends TimePickerBase {
 	 * Currently selected time represented as JavaScript Date instance
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {

package/src/TimePickerBase.js

@@ -50,6 +50,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -69,7 +71,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -151,7 +153,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TimePickerBase
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @public
  * @since 1.0.0-rc.6
  */

package/src/TimeSelection.js

@@ -160,7 +160,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TimeSelection
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-time-selection
  * @private
  * @since 1.0.0-rc.12

package/src/Title.js

@@ -24,7 +24,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
 		 */
@@ -37,7 +37,7 @@ const metadata = {
 		 * Defines the component level.
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
 		 *
-		 * @type {TitleLevel}
+		 * @type {sap.ui.webcomponents.main.types.TitleLevel}
 		 * @defaultvalue "H2"
 		 * @public
 		*/

package/src/Toast.js

@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> The minimum supported value is <code>500</code> ms
 		 * and even if a lower value is set, the duration would remain <code>500</code> ms.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 3000
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 		 * <li><code>BottomEnd</code></li>
 		 * </ul>
 		 *
-		 * @type {ToastPlacement}
+		 * @type {sap.ui.webcomponents.main.types.ToastPlacement}
 		 * @defaultvalue "BottomCenter"
 		 * @public
 		 */
@@ -137,7 +137,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Toast
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-toast
  * @public
  * @since 1.0.0-rc.6

package/src/ToggleButton.js

@@ -47,7 +47,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ToggleButton
- * @extends Button
+ * @extends sap.ui.webcomponents.main.Button
  * @tagname ui5-toggle-button
  * @public
  */