@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/TextArea.hbs

@@ -1,38 +1,39 @@
 <div
-	class="ui5-textarea-root"
-	style="{{styles.main}}"
+	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	{{#if growing}}
-		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="ui5-textarea-mirror" aria-hidden="true">
-			{{#each _mirrorText}}
-				{{this.text}}
 
-				<br />
-			{{/each}}
-		</div>
-	{{/if}}
 
-	<textarea
-		id="{{_id}}-inner"
-		class="ui5-textarea-inner"
-		placeholder="{{placeholder}}"
-		?disabled="{{disabled}}"
-		?readonly="{{readonly}}"
-		aria-label="{{ariaLabelText}}"
-		aria-describedby="{{ariaDescribedBy}}"
-		aria-invalid="{{ariaInvalid}}"
-		aria-required="{{required}}"
-		maxlength="{{_exceededTextProps.calcedMaxLength}}"
-		.value="{{value}}"
-		@input="{{_oninput}}"
-		@change="{{_onchange}}"
-		@keyup="{{_onkeyup}}"
-		@keydown="{{_onkeydown}}"
-		data-sap-focus-ref
-		part="textarea">
-	</textarea>
+	<div class="ui5-textarea-wrapper">
+		{{#if growing}}
+			<div id="{{_id}}-mirror" class="ui5-textarea-mirror" aria-hidden="true" >
+				{{#each _mirrorText}}
+					{{this.text}}
+					<br />
+				{{/each}}
+			</div>
+		{{/if}}
+		<textarea
+			id="{{_id}}-inner"
+			class="ui5-textarea-inner"
+			placeholder="{{placeholder}}"
+			?disabled="{{disabled}}"
+			?readonly="{{readonly}}"
+			aria-label="{{ariaLabelText}}"
+			aria-describedby="{{ariaDescribedBy}}"
+			aria-invalid="{{ariaInvalid}}"
+			aria-required="{{required}}"
+			maxlength="{{_exceededTextProps.calcedMaxLength}}"
+			.value="{{value}}"
+			@input="{{_oninput}}"
+			@change="{{_onchange}}"
+			@keyup="{{_onkeyup}}"
+			@keydown="{{_onkeydown}}"
+			data-sap-focus-ref
+			part="textarea">
+		</textarea>
+	</div>
 
 	{{> afterTextarea}}
 

package/src/TextArea.js

@@ -2,10 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.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
 		 */
@@ -176,7 +181,6 @@ const metadata = {
 		/**
 		 * Enables the component to automatically grow and shrink dynamically with its content.
 		 * <br><br>
-		 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -188,7 +192,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
 		 */
@@ -218,7 +222,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -406,12 +410,7 @@ class TextArea extends UI5Element {
 		this._mirrorText = this._tokenizeText(this.value);
 
 		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
-
-		if (this.growingMaxLines) {
-			// this should be complex calc between line height and paddings - TODO: make it stable
-			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
-		}
-
+		this._setCSSParams();
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -421,6 +420,14 @@ class TextArea extends UI5Element {
 	}
 
 	onAfterRendering() {
+		const nativeTextArea = this.getInputDomRef();
+
+		if (this.rows === 1) {
+			nativeTextArea.setAttribute("rows", 1);
+		} else {
+			nativeTextArea.removeAttribute("rows");
+		}
+
 		this.toggleValueStateMessage(this.openValueStateMsgPopover);
 		this._firstRendering = false;
 	}
@@ -467,20 +474,11 @@ class TextArea extends UI5Element {
 	_oninput(event) {
 		const nativeTextArea = this.getInputDomRef();
 
-		/* skip calling change event when an textarea with a placeholder is focused on IE
-			- value of the host and the internal textarea should be different in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (nativeTextArea.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 		if (event.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
 
-		if (skipFiring) {
-			return;
-		}
-
 		this.value = nativeTextArea.value;
 		this.fireEvent("input", {});
 
@@ -494,6 +492,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	_setCSSParams() {
+		this.style.setProperty("--_textarea_rows", this.rows || "2");
+		this.style.setProperty("--_textarea_growing_max_lines", this.growingMaxLines);
+	}
+
 	toggleValueStateMessage(toggle) {
 		if (toggle) {
 			this.openPopover();
@@ -504,7 +507,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-root .ui5-textarea-wrapper"));
 	}
 
 	async closePopover() {
@@ -544,9 +547,9 @@ class TextArea extends UI5Element {
 			leftCharactersCount;
 
 		if (this.showExceededText) {
-			const maxLength = this.maxlength || 0;
+			const maxLength = this.maxlength;
 
-			if (maxLength) {
+			if (maxLength !== null) {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
@@ -566,30 +569,20 @@ class TextArea extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-textarea-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 		};
 	}
 
 	get styles() {
-		const lineHeight = 1.4 * 16;
-		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
-
 		return {
-			mirror: {
-				"max-height": this._maxHeight,
-			},
-			main: {
-				width: "100%",
-				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
-			},
-			focusDiv: {
-				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
-				"max-height": (this._maxHeight),
-			},
 			valueStateMsgPopover: {
 				"max-width": `${this._width}px`,
 			},
@@ -601,7 +594,7 @@ class TextArea extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this);
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 
 		if (this.showExceededText) {
 			if (effectiveAriaLabelText) {
@@ -624,10 +617,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() {
@@ -639,7 +636,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState);
 	}
 
 	get hasCustomValueState() {
@@ -654,14 +651,6 @@ class TextArea extends UI5Element {
 		return this.valueStateMessage.map(x => x.cloneNode(true));
 	}
 
-	get valueStateText() {
-		if (this.valueState !== ValueState.Error && this.exceeding) {
-			return this.valueStateTextMappings()[ValueState.Warning];
-		}
-
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
 	get _valueStatePopoverHorizontalAlign() {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
@@ -680,14 +669,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

@@ -11,7 +11,6 @@ import {
  */
 const metadata = {
 	tag: "ui5-time-picker",
-	altTag: "ui5-timepicker",
 	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
@@ -108,7 +107,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 +137,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

@@ -14,6 +14,10 @@ import {
 	isPageDownShift,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/time-entry-request.js";
 import Icon from "./Icon.js";
@@ -46,6 +50,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -65,7 +71,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -147,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
  */
@@ -348,6 +354,10 @@ class TimePickerBase extends UI5Element {
 			this.togglePicker();
 		}
 
+		if ((this._getInput().isEqualNode(e.target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}

package/src/TimeSelection.hbs

@@ -16,7 +16,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="hours"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasMinutesSlider}}
@@ -29,7 +29,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="minutes"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasSecondsSlider}}
@@ -42,7 +42,7 @@
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
 				data-sap-slider="seconds"
-				?cyclic="{{_isCyclic}}"
+				cyclic
 		></ui5-wheelslider>
 	{{/if}}
 	{{#if _hasPeriodsSlider}}

package/src/TimeSelection.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
@@ -28,7 +28,6 @@ import {
 	TIMEPICKER_HOURS_LABEL,
 	TIMEPICKER_MINUTES_LABEL,
 	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -161,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
@@ -478,11 +477,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodSliderTitle() {
-		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
-	}
-
-	get _isCyclic() {
-		return !isIE();
+		return "AM/PM";
 	}
 
 	get classes() {

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/Title2.ts

@@ -0,0 +1,134 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import TitleLevel from "./types/TitleLevel.js";
+import WrappingType from "./types/WrappingType.js";
+
+// Template
+import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
+
+// Styles
+import titleCss from "./generated/themes/Title.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-title",
+	properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
+
+		/**
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
+		 * @defaultvalue "None"
+		 * @public
+		 */
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
+		/**
+		 * Defines the component level.
+		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.TitleLevel}
+		 * @defaultvalue "H2"
+		 * @public
+		*/
+		level: {
+			type: TitleLevel,
+			defaultValue: TitleLevel.H2,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-title</code> component is used to display titles inside a page.
+ * It is a simple, large-sized text with explicit header/title semantics.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Title";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Title
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-title
+ * @public
+ */
+class Title extends UI5Element {
+	level: TitleLevel = TitleLevel.H2;
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TitleTemplate;
+	}
+
+	static get styles() {
+		return titleCss;
+	}
+
+	get normalizedLevel() {
+		return this.level.toLowerCase();
+	}
+
+	get h1() {
+		return this.normalizedLevel === "h1";
+	}
+
+	get h2() {
+		return this.normalizedLevel === "h2";
+	}
+
+	get h3() {
+		return this.normalizedLevel === "h3";
+	}
+
+	get h4() {
+		return this.normalizedLevel === "h4";
+	}
+
+	get h5() {
+		return this.normalizedLevel === "h5";
+	}
+
+	get h6() {
+		return this.normalizedLevel === "h6";
+	}
+}
+
+Title.define();
+
+export default Title;

package/src/Toast.hbs

@@ -2,7 +2,6 @@
 	<div class="ui5-toast-root"
 		role="alert"
 		style="{{styles.root}}"
-		dir="{{effectiveDir}}"
 		@mouseover="{{_onmouseover}}"
 		@mouseleave="{{_onmouseleave}}"
 		@transitionend="{{_ontransitionend}}">

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