@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/SuggestionGroupItem.js

@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-suggestion-group-item",
+	properties: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+		/**
+		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-suggestion-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-input</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionGroupItem
+ * @extends UI5Element
+ * @tagname ui5-suggestion-group-item
+ * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @public
+ * @since 1.0.0-rc.15
+ */
+class SuggestionItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Indicates the "grouping" nature of the component
+	 * to avoid tag name checks tag name to diferenciate from the standard suggestion item.
+	 * @protected
+	 */
+	get groupItem() {
+		return true;
+	}
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;

package/src/SuggestionItem.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import SuggestionListItem from "./SuggestionListItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import ListItemType from "./types/ListItemType.js";
 
 /**
@@ -12,7 +11,7 @@ const metadata = {
 	tag: "ui5-suggestion-item",
 	properties: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-suggestion-item</code>.
+		 * Defines the text of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -53,7 +52,7 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the 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">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
@@ -89,44 +88,32 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the item.
+		 * Defines the <code>additionalText</code>, displayed in the end of the item.
 		 * @type {string}
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
 		 * @type {ValueState}
-         * @defaultvalue "None"
+		 * @defaultvalue "None"
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
-
-		/**
-		 * Defines the item to be displayed as a group item.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted
-		 * and only the <code>text</code> will be displayed.
-		 * @type {boolean}
-         * @defaultvalue false
-		 * @public
-		 */
-		group: {
-			type: Boolean,
-		},
 	},
-	slots: {
+	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
-	events: {
+	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
 };
 
@@ -139,6 +126,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.SuggestionItem
  * @extends UI5Element
  * @tagname ui5-suggestion-item
+ * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public
  */
 class SuggestionItem extends UI5Element {
@@ -146,11 +134,10 @@ class SuggestionItem extends UI5Element {
 		return metadata;
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			SuggestionListItem.define(),
-			GroupHeaderListItem.define(),
-		]);
+	static get dependencies() {
+		return [
+			SuggestionListItem,
+		];
 	}
 }
 

package/src/SuggestionListItem.hbs

@@ -1,25 +1,33 @@
 {{>include "./StandardListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-title-wrapper">
+	<div class="ui5-li-text-wrapper">
 		{{#if hasTitle}}
 			<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{/if}}
 		{{#if hasDescription}}
-			<span part="description" class="ui5-li-desc">
-				{{#if richDescription.length}}
-					<slot name="richDescription"></slot>
-				{{else}}
-					{{description}}
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">
+					{{#if richDescription.length}}
+						<slot name="richDescription"></slot>
+					{{else}}
+						{{description}}
+					{{/if}}
+				</span>
+
+				{{#if additionalText}}
+					<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
 				{{/if}}
-			</span>
+			</div>
 		{{/if}}
 		{{#unless typeActive}}
 			<span class="ui5-hidden-text">{{type}}</span>
 		{{/unless}}
 	</div>
-	{{#if info}}
-		<span part="info" class="ui5-li-info">{{info}}</span>
-	{{/if}}
+	{{#unless hasDescription}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
 {{/inline}}
 

package/src/SuggestionListItem.js

@@ -7,7 +7,7 @@ import SuggestionListItemTemplate from "./generated/templates/SuggestionListItem
 const metadata = {
 	tag: "ui5-li-suggestion-item",
 	managedSlots: true,
-	slots: {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionListItem.prototype */ {
 		/**
 		 * Defines a description that can contain HTML.
 		 * <b>Note:</b> If not specified, the <code>description</code> property will be used.
@@ -21,7 +21,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 		"default": {
-			propertyName: "title",
+			propertyName: "titleText",
 		},
 	},
 };
@@ -31,11 +31,22 @@ const metadata = {
  * The <code>ui5-li-suggestion-item</code> represents the suggestion item in the <code>ui5-input</code>
  * suggestion popover.
  *
+ * <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-li-suggestion-item</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the suggestion list item</li>
+ * <li>description - Used to style the description of the suggestion list item</li>
+ * <li>info - Used to style the info of the suggestion list item</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends UI5Element
- * @tagname ui5-suggestion-item
+ * @extends StandardListItem
+ * @tagname ui5-li-suggestion-item
  */
 class SuggestionListItem extends StandardListItem {
 	static get metadata() {
@@ -48,11 +59,11 @@ class SuggestionListItem extends StandardListItem {
 
 	onBeforeRendering(...params) {
 		super.onBeforeRendering(...params);
-		this.hasTitle = !!this.title.length;
+		this.hasTitle = !!this.titleText.length;
 	}
 
 	get effectiveTitle() {
-		return this.title.map(el => el.textContent).join("");
+		return this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join("");
 	}
 
 	get hasDescription() {

package/src/Switch.hbs

@@ -21,14 +21,30 @@
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
-				<span class="ui5-switch-handle" part="handle"></span>
+				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
+					<ui5-icon
+						name="{{sapNextIcon}}"
+						class="ui5-switch-handle-icon"
+					></ui5-icon>
+				</span>
 			</div>
 		</div>
 	</div>
+
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>

package/src/Switch.js

@@ -2,10 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/accept.js";
-import "@ui5/webcomponents-icons/dist/icons/decline.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
+import SwitchDesign from "./types/SwitchDesign.js";
 
 import {
 	SWITCH_ON,
@@ -15,7 +17,6 @@ import {
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
-
 // Styles
 import switchCss from "./generated/themes/Switch.css.js";
 
@@ -28,12 +29,25 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
 
 		/**
-		 * Defines if the <code>ui5-switch</code> is checked.
+		 * Defines the component design.
 		 * <br><br>
-		 * <b>Note:</b> The property can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-switch</code>, or by
-		 * pressing the <code>Enter</code> or <code>Space</code> key.
+		 * <b>Note:</b> If <code>Graphical</code> type is set,
+		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
 		 *
+		 * @public
+		 * @type {SwitchDesign}
+		 * @defaultValue "Textual"
+		 */
+		design: {
+			type: SwitchDesign,
+			defaultValue: SwitchDesign.Textual,
+		},
+
+		/**
+		 * Defines if the component is checked.
+		 * <br><br>
+		 * <b>Note:</b> The property can be changed with user interaction,
+		 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -43,9 +57,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-switch</code> is disabled.
+		 * Defines whether the component is disabled.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.
+		 * <b>Note:</b> A disabled component is noninteractive.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -56,10 +70,11 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text of the <code>ui5-switch</code> when switched on.
+		 * Defines the text, displayed when the component is checked.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -69,9 +84,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text of the <code>ui5-switch</code> when switched off.
+		 * Defines the text, displayed when the component is not checked.
 		 * <br><br>
 		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -79,24 +95,11 @@ const metadata = {
 		textOff: {
 			type: String,
 		},
-
-		/**
-		 * Defines the <code>ui5-switch</code> type.
-		 * <br><br>
-		 * <b>Note:</b> If <code>graphical</code> type is set,
-		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		graphical: {
-			type: Boolean,
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-switch</code> checked state changes.
+		 * Fired when the component checked state changes.
 		 *
 		 * @public
 		 * @event
@@ -114,13 +117,25 @@ const metadata = {
  * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
  * but texts longer than 3 letters will be cutted off.
  * <br>
- * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (&lt;ui5-switch style="width: 200px">), and set widths, depending on the texts they would use.
+ * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
  * <br>
  * Note: the component would not automatically stretch to fit the whole text width.
  *
  * <h3>Keyboard Handling</h3>
  * The state can be changed by pressing the Space and Enter keys.
  *
+ * <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-switch</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>slider - Used to style the track, where the handle is being slid</li>
+ * <li>text-on - Used to style the <code>textOn</code> property text</li>
+ * <li>text-off - Used to style the <code>textOff</code> property text</li>
+ * <li>handle - Used to style the handle of the switch</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Switch";</code>
@@ -150,10 +165,8 @@ class Switch extends UI5Element {
 		return SwitchTemplate;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	get sapNextIcon() {
+		return this.checked ? "accept" : "less";
 	}
 
 	_onclick(event) {
@@ -185,6 +198,14 @@ class Switch extends UI5Element {
 		}
 	}
 
+	get graphical() {
+		return this.design === SwitchDesign.Graphical;
+	}
+
+	get hasNoLabel() {
+		return !(this.graphical || this.textOn || this.textOff);
+	}
+
 	get _textOn() {
 		return this.graphical ? "" : this.textOn;
 	}
@@ -216,22 +237,23 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || this.i18nBundle.getText(SWITCH_ON);
+		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || this.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
 	}
 
 	get hiddenText() {
 		return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	static async onDefine() {
-		await Promise.all([
-			Icon.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		Switch.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Tab.js

@@ -1,7 +1,7 @@
 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 SemanticColor from "./types/SemanticColor.js";
-import TabLayout from "./types/TabLayout.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
 import CustomListItem from "./CustomListItem.js";
@@ -66,7 +66,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon source URI to be displayed as graphical element within the <code>ui5-tab</code>.
+		 * Defines the icon source URI to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous built-in icons.
 		 * 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>.
 		 *
@@ -79,40 +79,31 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tab</code> semantic color.
+		 * Defines the component's design color.
 		 * <br><br>
-		 * The color is applied to:
+		 * The design is applied to:
 		 * <ul>
-		 * <li>the <code>ui5-tab</code> icon</li>
-		 * <li>the <code>text</code> when <code>ui5-tab</code> overflows</li>
+		 * <li>the component icon</li>
+		 * <li>the <code>text</code> when the component overflows</li>
 		 * <li>the tab selection line</li>
 		 * </ul>
 		 *
 		 * <br><br>
-		 * Available semantic colors are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
+		 * Available designs are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> The color value depends on the current theme.
+		 * <b>Note:</b> The design depends on the current theme.
 		 * @type {SemanticColor}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
-		semanticColor: {
+		design: {
 			type: SemanticColor,
 			defaultValue: SemanticColor.Default,
 		},
 
 		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
-		/**
-		 * Specifies if the <code>ui5-tab</code> is selected.
+		 * Specifies if the component is selected.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -143,6 +134,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.Tab
  * @extends UI5Element
  * @tagname ui5-tab
+ * @implements sap.ui.webcomponents.main.ITab
  * @public
  */
 class Tab extends UI5Element {
@@ -170,11 +162,21 @@ class Tab extends UI5Element {
 		return css;
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			Icon.define(),
-			CustomListItem.define(),
-		]);
+	static get dependencies() {
+		return [
+			Icon,
+			CustomListItem,
+		];
+	}
+
+	get displayText() {
+		let text = this.text;
+
+		if (this._isInline && this.additionalText) {
+			text += ` (${this.additionalText})`;
+		}
+
+		return text;
 	}
 
 	get isSeparator() {
@@ -182,11 +184,27 @@ class Tab extends UI5Element {
 	}
 
 	get stripPresentation() {
-		return this.constructor.stripTemplate(this);
+		return executeTemplate(this.constructor.stripTemplate, this);
 	}
 
 	get overflowPresentation() {
-		return this.constructor.overflowTemplate(this);
+		return executeTemplate(this.constructor.overflowTemplate, this);
+	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
+
+	/**
+	 * Returns the DOM reference of the tab that is placed in the header.
+	 * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
+	 *
+	 * @function
+	 * @public
+	 * @since 1.0.0-rc.16
+	 */
+	getTabInStripDomRef() {
+		return this._getTabInStripDomRef;
 	}
 
 	getFocusDomRef() {
@@ -252,10 +270,14 @@ class Tab extends UI5Element {
 			classes.push("ui5-tab-strip-item--disabled");
 		}
 
-		if (this.tabLayout === TabLayout.Inline) {
+		if (this._isInline) {
 			classes.push("ui5-tab-strip-item--inline");
 		}
 
+		if (this.additionalText) {
+			classes.push("ui5-tab-strip-item--withAddionalText");
+		}
+
 		if (!this.icon && !this._mixedMode) {
 			classes.push("ui5-tab-strip-item--textOnly");
 		}
@@ -268,8 +290,8 @@ class Tab extends UI5Element {
 			classes.push("ui5-tab-strip-item--mixedMode");
 		}
 
-		if (this.semanticColor !== SemanticColor.Default) {
-			classes.push(`ui5-tab-strip-item--${this.semanticColor.toLowerCase()}`);
+		if (this.design !== SemanticColor.Default) {
+			classes.push(`ui5-tab-strip-item--${this.design.toLowerCase()}`);
 		}
 
 		return classes.join(" ");
@@ -278,8 +300,8 @@ class Tab extends UI5Element {
 	get headerSemanticIconClasses() {
 		const classes = ["ui5-tab-strip-item-semanticIcon"];
 
-		if (this.semanticColor !== SemanticColor.Default) {
-			classes.push(`ui5-tab-strip-item-semanticIcon--${this.semanticColor.toLowerCase()}`);
+		if (this.design !== SemanticColor.Default) {
+			classes.push(`ui5-tab-strip-item-semanticIcon--${this.design.toLowerCase()}`);
 		}
 
 		return classes.join(" ");
@@ -288,8 +310,8 @@ class Tab extends UI5Element {
 	get overflowClasses() {
 		const classes = ["ui5-tab-overflow-item"];
 
-		if (this.semanticColor !== SemanticColor.Default) {
-			classes.push(`ui5-tab-overflow-item--${this.semanticColor.toLowerCase()}`);
+		if (this.design !== SemanticColor.Default) {
+			classes.push(`ui5-tab-overflow-item--${this.design.toLowerCase()}`);
 		}
 
 		if (this.disabled) {