@ui5/webcomponents 1.8.0 → 1.9.1

package/src/MultiInput.js

@@ -15,6 +15,7 @@ import styles from "./generated/themes/MultiInput.css.js";
 import Token from "./Token.js";
 import Tokenizer from "./Tokenizer.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/value-help.js";
 
 /**
  * @public
@@ -98,7 +99,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiInput
- * @extends Input
+ * @extends sap.ui.webcomponents.main.Input
  * @tagname ui5-multi-input
  * @appenddocs Token
  * @since 1.0.0-rc.9

package/src/Panel.js

@@ -109,7 +109,7 @@ const metadata = {
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
-		 * @type {PanelAccessibleRole}
+		 * @type {sap.ui.webcomponents.main.types.PanelAccessibleRole}
 		 * @defaultvalue "Form"
 		 * @public
 		 */
@@ -123,7 +123,7 @@ const metadata = {
 		 * set by the <code>headerText</code>.
 		 * <br><br>
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
-		 * @type {TitleLevel}
+		 * @type {sap.ui.webcomponents.main.types.TitleLevel}
 		 * @defaultvalue "H2"
 		 * @public
 		*/

package/src/Popover.js

@@ -48,7 +48,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverPlacementType}
+		 * @type {sap.ui.webcomponents.main.types.PopoverPlacementType}
 		 * @defaultvalue "Right"
 		 * @public
 		 */
@@ -68,7 +68,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverHorizontalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverHorizontalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -88,7 +88,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverVerticalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverVerticalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -148,7 +148,7 @@ const metadata = {
 		/**
 		 * Defines the ID or DOM Reference of the element that the popover is shown at
 		 * @public
-		 * @type {DOMReference}
+		 * @type {sap.ui.webcomponents.base.types.DOMReference}
 		 * @defaultvalue ""
 		 * @since 1.2.0
 		 */
@@ -278,7 +278,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Popover
- * @extends Popup
+ * @extends sap.ui.webcomponents.main.Popup
  * @tagname ui5-popover
  * @since 1.0.0-rc.6
  * @public

package/src/ProgressIndicator.js

@@ -48,7 +48,7 @@ const metadata = {
 		 *
 		 * <b>Note:</b>
 		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -83,7 +83,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -117,7 +117,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ProgressIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-progress-indicator
  * @public
  * @since 1.0.0-rc.8

package/src/RadioButton.hbs

@@ -1,10 +1,9 @@
 <div class="ui5-radio-root {{classes.main}}"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
+	aria-label="{{ariaLabelText}}"
 	tabindex="{{tabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
@@ -19,7 +18,7 @@
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
- 		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{ariaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
@@ -29,4 +28,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RadioButton.js

@@ -70,6 +70,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.9.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the component is checked or not.
 		 * <br><br>
@@ -79,6 +91,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -109,7 +123,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,7 +186,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
 		 */
@@ -363,8 +377,9 @@ class RadioButton extends UI5Element {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? element.value : "";
+				nativeInput.value = element.value;
+				nativeInput.type = "radio";
+				nativeInput.checked = element.checked;
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -477,10 +492,6 @@ class RadioButton extends UI5Element {
 		};
 	}
 
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}

package/src/RangeSlider.js

@@ -31,8 +31,10 @@ const metadata = {
 		 * Defines start point of a selection - position of a first handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		startValue: {
@@ -43,8 +45,10 @@ const metadata = {
 		 * Defines end point of a selection - position of a second handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		endValue: {
@@ -111,7 +115,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RangeSlider
- * @extends SliderBase
+ * @extends sap.ui.webcomponents.main.SliderBase
  * @tagname ui5-range-slider
  * @since 1.0.0-rc.11
  * @public

package/src/RatingIndicator.js

@@ -42,7 +42,7 @@ const metadata = {
 		 * <li>1.3 - 1.7 -> 1.5</li>
 		 * <li>1.8 - 1.9 -> 2</li>
 		 * <ul>
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 
 		/**
 		 * The number of displayed rating symbols.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 5
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -169,7 +169,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RatingIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8

package/src/ResponsivePopover.js

@@ -74,7 +74,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ResponsivePopover
- * @extends Popover
+ * @extends sap.ui.webcomponents.main.Popover
  * @tagname ui5-responsive-popover
  * @since 1.0.0-rc.6
  * @public

package/src/SegmentedButton.js

@@ -273,7 +273,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISegmentedButtonItem }
+	 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem}
 	 * @public
 	 */
 	get selectedItem() {

package/src/SegmentedButtonItem.js

@@ -14,7 +14,7 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -86,7 +86,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends ToggleButton
+ * @extends sap.ui.webcomponents.main.ToggleButton
  * @tagname ui5-segmented-button-item
  * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
  * @public

package/src/Select.js

@@ -161,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -358,9 +358,9 @@ class Select extends UI5Element {
 	}
 
 	/**
-	 * Currently selected option.
+	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISelectOption }
+	 * @type {sap.ui.webcomponents.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {

package/src/Slider.js

@@ -23,8 +23,10 @@ const metadata = {
 		/**
 		 * Current value of the slider
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -99,7 +101,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Slider
- * @extends SliderBase
+ * @extends sap.ui.webcomponents.main.SliderBase
  * @tagname ui5-slider
  * @since 1.0.0-rc.11
  * @public

package/src/SliderBase.js

@@ -20,7 +20,7 @@ const metadata = {
 		/**
 		 * Defines the minimum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -31,7 +31,7 @@ const metadata = {
 		/**
 		 * Defines the maximum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
 		 * @public
 		 */
@@ -44,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -59,7 +59,7 @@ const metadata = {
 		 * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
 		 * tickmark will be labelled, which means every 4th value number.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */

package/src/SplitButton.js

@@ -73,7 +73,7 @@ const metadata = {
 		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -120,7 +120,7 @@ const metadata = {
 		/**
 		 * Accessibility-related properties for inner elements of the Split Button
 		 *
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 */
 		_splitButtonAccInfo: {
@@ -272,7 +272,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SplitButton
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-split-button
  * @public
  * @since 1.1.0

package/src/StandardListItem.js

@@ -76,7 +76,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</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}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -104,7 +104,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @private
 		 * @since 1.5.0
@@ -162,7 +162,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StandardListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li
  * @implements sap.ui.webcomponents.main.IListItem
  * @public

package/src/StepInput.js

@@ -42,7 +42,7 @@ const metadata = {
 		/**
 		 * Defines a value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -54,7 +54,7 @@ const metadata = {
 		/**
 		 * Defines a minimum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @public
 		 */
 		min: {
@@ -64,7 +64,7 @@ const metadata = {
 		/**
 		 * Defines a maximum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @public
 		 */
 		max: {
@@ -74,7 +74,7 @@ const metadata = {
 		/**
 		 * Defines a step of increasing/decreasing the value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -177,7 +177,7 @@ const metadata = {
 		/**
 		 * Determines the number of digits after the decimal point of the component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -356,7 +356,7 @@ const INITIAL_SPEED = 120; // milliseconds
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StepInput
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-step-input
  * @since 1.0.0-rc.13
  * @public

package/src/SuggestionGroupItem.js

@@ -32,7 +32,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-group-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

package/src/SuggestionItem.js

@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while when <code>Inactive</code> or <code>Detail</code> - will not.
 		 *
-		 * @type {ListItemType}
+		 * @type {sap.ui.webcomponents.main.types.ListItemType}
 		 * @defaultvalue "Active"
 		 * @public
 		 * @since 1.0.0-rc.8
@@ -101,7 +101,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -124,7 +124,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

package/src/SuggestionListItem.js

@@ -45,7 +45,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends StandardListItem
+ * @extends sap.ui.webcomponents.main.StandardListItem
  * @tagname ui5-li-suggestion-item
  */
 class SuggestionListItem extends StandardListItem {

package/src/Switch.hbs

@@ -9,6 +9,7 @@
 	@keydown="{{_onkeydown}}"
 	tabindex="{{tabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">

package/src/Switch.js

@@ -31,7 +31,7 @@ const metadata = {
 		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
 		 *
 		 * @public
-		 * @type {SwitchDesign}
+		 * @type {sap.ui.webcomponents.main.types.SwitchDesign}
 		 * @defaultValue "Textual"
 		 */
 		design: {
@@ -46,6 +46,8 @@ const metadata = {
 		 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -120,6 +122,19 @@ const metadata = {
 			type: String,
 			defaultValue: "",
 		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * <br>
+		 * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.9.0
+		 */
+		 tooltip: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
 

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
@@ -404,7 +419,7 @@ class Tab extends UI5Element {
 			return null;
 		}
 
-		return this.design;
+		return Tab.i18nBundle.getText(DESIGN_DESCRIPTIONS[this.design]);
 	}
 
 	get semanticIconClasses() {
@@ -438,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();