From dd658c561bfcf56a4634355d3ac1b0f0113f9b05 Mon Sep 17 00:00:00 2001
From: Nikolay Deshev <nikolay.deshev@sap.com>
Date: Mon, 14 Aug 2023 17:16:01 +0300
Subject: [PATCH 01/33] fix(ui5-multi-combobox): adjust 'paste' handling
 (#7440)

* fix(ui5-multi-combobox): adjust 'paste' handling

fixes #7330
---
 packages/main/src/MultiComboBox.hbs |  4 +++-
 packages/main/src/MultiComboBox.ts  | 36 ++++++++++++++++++++++-------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index fc159598a0cf..205008d12693 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -19,6 +19,7 @@
 		@focusout="{{_tokenizerFocusOut}}"
 		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
+		@paste={{_handlePaste}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
 	>
@@ -45,10 +46,11 @@
 		value-state="{{valueState}}"
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
-		@keydown="{{_onkeydown}}" // check paste handler
+		@keydown="{{_onkeydown}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}
+		@paste={{_handlePaste}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 747ae3e2121f..d3c210ebd6f6 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -29,7 +29,6 @@ import {
 	isHomeCtrl,
 	isEndCtrl,
 	isCtrlA,
-	isCtrlV,
 	isDeleteShift,
 	isInsertShift,
 	isInsertCtrl,
@@ -43,6 +42,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import {
 	isPhone,
 	isAndroid,
+	isFirefox,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -702,8 +702,8 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
-		if (isCtrlV(e) || isInsertShift(e)) {
-			this._handlePaste();
+		if (isInsertShift(e)) {
+			this._handleInsertPaste();
 			return;
 		}
 
@@ -735,8 +735,24 @@ class MultiComboBox extends UI5Element {
 		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(e) || isDelete(e) || isEscape(e) || isEnter(e));
 	}
 
-	async _handlePaste() {
-		if (this.readonly) {
+	_handlePaste(e:ClipboardEvent) {
+		e.preventDefault();
+
+		if (this.readonly || !e.clipboardData) {
+			return;
+		}
+
+		const pastedText = (e.clipboardData).getData("text/plain");
+
+		if (!pastedText) {
+			return;
+		}
+
+		this._createTokenFromText(pastedText);
+	}
+
+	async _handleInsertPaste() {
+		if (this.readonly || isFirefox()) {
 			return;
 		}
 
@@ -746,7 +762,11 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
-		const separatedText = pastedText.split(/\r\n|\r|\n|\t/g);
+		this._createTokenFromText(pastedText);
+	}
+
+	_createTokenFromText(pastedText: string) {
+		const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
 		const matchingItems = this.items.filter(item => separatedText.indexOf(item.text) > -1 && !item.selected);
 
 		if (separatedText.length > 1) {
@@ -1172,8 +1192,8 @@ class MultiComboBox extends UI5Element {
 			return this._tokenizer._fillClipboard(ClipboardDataOperation.copy, selectedTokens);
 		}
 
-		if (isCtrlV(e) || isInsertShift(e)) {
-			this._handlePaste();
+		if (isInsertShift(e)) {
+			this._handleInsertPaste();
 		}
 
 		if (isHome(e)) {

From d041a8581c6685330078d3de3e6d0cbcd1fb3ad2 Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Wed, 16 Aug 2023 10:43:51 +0300
Subject: [PATCH 02/33] docs(ui5-illustrated-message): respect changes of
 property size in story (#7442)

---
 .../fiori/IllustratedMessage/IllustratedMessage.stories.ts       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
index 97178ad1e5dc..33b183dc5301 100644
--- a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
+++ b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
@@ -29,6 +29,7 @@ const Template: UI5StoryArgs<IllustratedMessage, StoryArgsSlots> = (
     args
 ) => html` <ui5-illustrated-message
     name="${ifDefined(args.name)}"
+    size="${ifDefined(args.size)}"
     subtitle-text="${ifDefined(args.subtitleText)}"
     title-text="${ifDefined(args.titleText)}"
     accessible-name-ref="${ifDefined(args.accessibleNameRef)}"

From 2885a4d276bce1420c4e1589bd1fdc7e98933d05 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Wed, 16 Aug 2023 12:24:36 +0300
Subject: [PATCH 03/33] fix(ui5-split-button): add css variables for active
 state (#7450)

Added styling for the active state of the arrow split button.
---
 packages/main/src/themes/SplitButton.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css
index ab483d3027a7..8d243fe03003 100644
--- a/packages/main/src/themes/SplitButton.css
+++ b/packages/main/src/themes/SplitButton.css
@@ -98,6 +98,21 @@
 	width: 2.25rem;
 }
 
+.ui5-split-arrow-button[active][design="Default"],
+.ui5-split-arrow-button[active][design="Emphasized"],
+.ui5-split-arrow-button[active][design="Transparent"] {
+	background-color: var(--sapButton_Selected_Background);
+}
+.ui5-split-arrow-button[active][design="Negative"] {
+	background-color: var(--sapButton_Reject_Selected_Background);
+}
+.ui5-split-arrow-button[active][design="Positive"] {
+	background-color: var(--sapButton_Accept_Selected_Background);
+}
+.ui5-split-arrow-button[active][design="Attention"] {
+	background-color: var(--sapButton_Attention_Selected_Background);
+}
+
 .ui5-split-text-button[dir="rtl"]:hover {
 	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);

From 116594c40fd9ba2800b325f15ab2de9fe10222c8 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Wed, 16 Aug 2023 13:07:54 +0300
Subject: [PATCH 04/33] fix(ui5-select): fix header on phone & update items on
 options change (#7455)

The PR addresses two issues found accidentally when playing around with the component:
### 1. Header on phone
**before** - two headers are rendered
**now** - only one header is displayed, the slot attributes was missing from the div, that meant to be a header
### 2. Update of the Select's dropdown upon Option web component change:
**before**: The dropdown used to not reflect changes of the Option's text content. For example, if the content of Option is "Hello" and we change it dynamically to "World" - the change is not reflected in the dropdown immediately, but only after some interaction (that triggers re-rendering)
**now**: It does, because the Option invalidates itself upon text content changes, and this triggers Select's invalidation and the change is immediately reflected in the UI.
---
 packages/main/src/Option.ts         | 3 +++
 packages/main/src/SelectPopover.hbs | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts
index b826302d6e0c..8a8d12348474 100644
--- a/packages/main/src/Option.ts
+++ b/packages/main/src/Option.ts
@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import type { IOption } from "./Select.js";
 
@@ -109,6 +110,8 @@ class Option extends UI5Element implements IOption {
 	 * @slot
 	 * @public
 	 */
+	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
+	text!: Array<Node>;
 
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
index 46a2fdaf9672..47ef5d7fa925 100644
--- a/packages/main/src/SelectPopover.hbs
+++ b/packages/main/src/SelectPopover.hbs
@@ -12,7 +12,7 @@
 		style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
-			<div class="ui5-responsive-popover-header">
+			<div slot="header" class="ui5-responsive-popover-header">
 				<div class="row">
 					<span>{{_headerTitleText}}</span>
 					<ui5-button

From d3f6c2efba9cfda389ea4d700a375f75b3e2996b Mon Sep 17 00:00:00 2001
From: Peter Skelin <petar.skelin@sap.com>
Date: Wed, 16 Aug 2023 13:53:53 +0300
Subject: [PATCH 05/33] feat(framework): scope css variables per runtime and
 version (#7449)

---
 packages/base/src/CustomElementsScope.ts      |  2 ++
 packages/base/src/CustomElementsScopeUtils.ts | 15 ++++++++++
 packages/base/src/ManagedStyles.ts            | 13 ++------
 packages/base/src/StaticAreaItem.ts           |  3 --
 packages/base/src/UI5Element.ts               |  3 --
 packages/main/src/ColorPicker.ts              |  3 +-
 packages/main/src/ComboBox.ts                 |  3 +-
 packages/main/src/Input.ts                    |  3 +-
 packages/main/src/MultiInput.ts               |  3 +-
 packages/main/src/SegmentedButton.ts          |  3 +-
 packages/main/src/Select.ts                   |  3 +-
 packages/main/src/WheelSlider.ts              |  3 +-
 packages/main/src/themes/TextArea.css         |  6 ++--
 .../src/themes/base/TextArea-parameters.css   |  4 +--
 .../themes/sap_belize/TextArea-parameters.css |  4 +--
 .../sap_belize_hcb/TextArea-parameters.css    |  2 +-
 .../sap_belize_hcw/TextArea-parameters.css    |  2 +-
 .../components-package/postcss.components.js  |  9 ++++--
 .../components-package/postcss.themes.js      | 30 ++++---------------
 .../tools/lib/postcss-css-to-esm/index.js     |  2 +-
 .../tools/lib/postcss-css-to-json/index.js    |  2 +-
 .../tools/lib/postcss-scope-vars/index.js     | 24 +++++++++++++++
 packages/tools/package.json                   |  1 -
 yarn.lock                                     |  5 ----
 24 files changed, 79 insertions(+), 69 deletions(-)
 create mode 100644 packages/tools/lib/postcss-scope-vars/index.js

diff --git a/packages/base/src/CustomElementsScope.ts b/packages/base/src/CustomElementsScope.ts
index 7bd1dc0cd5f6..93b1e74af678 100644
--- a/packages/base/src/CustomElementsScope.ts
+++ b/packages/base/src/CustomElementsScope.ts
@@ -11,6 +11,7 @@ import {
 	getCustomElementsScopingRules,
 	shouldScopeCustomElement,
 	getEffectiveScopingSuffixForTag,
+	getScopedVarName,
 } from "./CustomElementsScopeUtils.js";
 import { registerFeature } from "./FeaturesRegistry.js";
 
@@ -30,4 +31,5 @@ export {
 	getCustomElementsScopingRules,
 	shouldScopeCustomElement,
 	getEffectiveScopingSuffixForTag,
+	getScopedVarName,
 };
diff --git a/packages/base/src/CustomElementsScopeUtils.ts b/packages/base/src/CustomElementsScopeUtils.ts
index 9f8e3d846834..31a6f1f9254e 100644
--- a/packages/base/src/CustomElementsScopeUtils.ts
+++ b/packages/base/src/CustomElementsScopeUtils.ts
@@ -1,3 +1,5 @@
+import VersionInfo from "./generated/VersionInfo.js";
+
 let suf: string;
 
 type Rules = {
@@ -105,6 +107,18 @@ const getEffectiveScopingSuffixForTag = (tag: string) => {
 	}
 };
 
+/**
+ * @public
+ * Used for getting a scoped name for a CSS variable using the same transformation used in the build
+ * @name the name of the css variable as written in the code
+ * @returns a variable name with the current version inserted as available at runtime
+ */
+const getScopedVarName = (name: string) => {
+	const versionStr = `v${VersionInfo.version.replaceAll(".", "-")}`;
+	const expr = /(--_?ui5)([^,:)\s]+)/g;
+	return name.replaceAll(expr, `$1-${versionStr}$2`);
+};
+
 export {
 	setCustomElementsScopingSuffix,
 	getCustomElementsScopingSuffix,
@@ -112,4 +126,5 @@ export {
 	getCustomElementsScopingRules,
 	shouldScopeCustomElement,
 	getEffectiveScopingSuffixForTag,
+	getScopedVarName,
 };
diff --git a/packages/base/src/ManagedStyles.ts b/packages/base/src/ManagedStyles.ts
index e50d96dc095c..65c00598ce61 100644
--- a/packages/base/src/ManagedStyles.ts
+++ b/packages/base/src/ManagedStyles.ts
@@ -2,7 +2,6 @@ import createStyleInHead from "./util/createStyleInHead.js";
 import createLinkInHead from "./util/createLinkInHead.js";
 import { shouldUseLinks, getUrl } from "./CSP.js";
 import { StyleData, StyleDataCSP } from "./types.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 import { isSafari } from "./Device.js";
 
 const getStyleId = (name: string, value: string) => {
@@ -10,11 +9,7 @@ const getStyleId = (name: string, value: string) => {
 };
 
 const createStyle = (data: StyleData, name: string, value = "") => {
-	let content = typeof data === "string" ? data : data.content;
-
-	if (content.includes("[_ui5host]")) {
-		content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
-	}
+	const content = typeof data === "string" ? data : data.content;
 
 	if (shouldUseLinks()) {
 		const attributes = {} as Record<string, any>;
@@ -34,11 +29,7 @@ const createStyle = (data: StyleData, name: string, value = "") => {
 };
 
 const updateStyle = (data: StyleData, name: string, value = "") => {
-	let content = typeof data === "string" ? data : data.content;
-
-	if (content.includes("[_ui5host]")) {
-		content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
-	}
+	const content = typeof data === "string" ? data : data.content;
 
 	if (shouldUseLinks()) {
 		const link = document.querySelector(`head>link[${name}="${value}"]`) as HTMLLinkElement;
diff --git a/packages/base/src/StaticAreaItem.ts b/packages/base/src/StaticAreaItem.ts
index ea46830ff9d6..074b45006c46 100644
--- a/packages/base/src/StaticAreaItem.ts
+++ b/packages/base/src/StaticAreaItem.ts
@@ -5,7 +5,6 @@ import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
 import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 import getEffectiveDir from "./locale/getEffectiveDir.js";
 import type UI5Element from "./UI5Element.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 
 const pureTagName = "ui5-static-area-item";
 const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
@@ -79,8 +78,6 @@ class StaticAreaItem extends HTMLElement {
 	}
 
 	_updateAdditionalAttrs() {
-		this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-		this.setAttribute("_ui5host", "");
 		this.setAttribute(pureTagName, "");
 		this.setAttribute(popupIntegrationAttr, "");
 	}
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index deb1ae8db0b5..e628b60310b4 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -25,7 +25,6 @@ import arraysAreEqual from "./util/arraysAreEqual.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
 import preloadLinks from "./theming/preloadLinks.js";
 import executeTemplate from "./renderer/executeTemplate.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
 import type { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
 
@@ -175,8 +174,6 @@ abstract class UI5Element extends HTMLElement {
 	async connectedCallback() {
 		const ctor = this.constructor as typeof UI5Element;
 
-		this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-		this.setAttribute("_ui5host", "");
 		this.setAttribute(ctor.getMetadata().getPureTag(), "");
 		if (ctor.getMetadata().supportsF6FastNavigation()) {
 			this.setAttribute("data-sap-ui-fastnavgroup", "true");
diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index 39e5a21bbc44..d7e8df84d899 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -9,6 +9,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import {
 	getRGBColor,
 	HSLToRGB,
@@ -206,7 +207,7 @@ class ColorPicker extends UI5Element {
 		const tempColor = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, 1)`;
 		this._setHex();
 		this._setValues();
-		this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
+		this.style.setProperty(getScopedVarName("--ui5_Color_Picker_Progress_Container_Color"), tempColor);
 	}
 
 	_handleMouseDown(e: MouseEvent) {
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 0ab2f1b5a791..40482f02802a 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -10,6 +10,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
@@ -464,7 +465,7 @@ class ComboBox extends UI5Element {
 
 		const slottedIconsCount = this.icon.length || 0;
 		const arrowDownIconsCount = this.readonly ? 0 : 1;
-		this.style.setProperty("--_ui5-input-icons-count", `${slottedIconsCount + arrowDownIconsCount}`);
+		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${slottedIconsCount + arrowDownIconsCount}`);
 	}
 
 	async onAfterRendering() {
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index dc08cd0b5086..8979e8601696 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -6,6 +6,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isPhone,
@@ -716,7 +717,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		}
 
 		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
 
 		this.FormSupport = getFeature<typeof FormSupportT>("FormSupport");
 		const hasItems = !!this.suggestionItems.length;
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index c0f17df4ad88..6b0240a56878 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -12,6 +12,7 @@ import {
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./generated/templates/MultiInputTemplate.lit.js";
@@ -349,7 +350,7 @@ class MultiInput extends Input {
 	onBeforeRendering() {
 		super.onBeforeRendering();
 
-		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
 		this.tokenizerAvailable = this.tokens && this.tokens.length > 0;
 	}
 
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index d99be489ff33..6357f1e99c90 100644
--- a/packages/main/src/SegmentedButton.ts
+++ b/packages/main/src/SegmentedButton.ts
@@ -7,6 +7,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import {
 	isSpace,
 	isEnter,
@@ -151,7 +152,7 @@ class SegmentedButton extends UI5Element {
 
 		this.normalizeSelection();
 
-		this.style.setProperty("--_ui5_segmented_btn_items_count", `${items.length}`);
+		this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${items.length}`);
 	}
 
 	normalizeSelection() {
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 6979e672c7ef..8d9314976761 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -32,6 +32,7 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import List from "./List.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import {
@@ -365,7 +366,7 @@ class Select extends UI5Element implements IFormElement {
 		this._syncSelection();
 		this._enableFormSupport();
 
-		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
 	}
 
 	onAfterRendering() {
diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts
index 34170b8fd124..06dc09819b1b 100644
--- a/packages/main/src/WheelSlider.ts
+++ b/packages/main/src/WheelSlider.ts
@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import {
 	isDown,
 	isUp,
@@ -212,7 +213,7 @@ class WheelSlider extends UI5Element {
 
 		if (this.shadowRoot!.querySelectorAll(".ui5-wheelslider-item").length) {
 			const itemComputedStyle = getComputedStyle(this.shadowRoot!.querySelector(".ui5-wheelslider-item")!);
-			const itemHeightValue = itemComputedStyle.getPropertyValue("--_ui5_wheelslider_item_height");
+			const itemHeightValue = itemComputedStyle.getPropertyValue(getScopedVarName("--_ui5_wheelslider_item_height"));
 			const onlyDigitsValue = itemHeightValue.replace("px", "");
 			return Number(onlyDigitsValue) || defaultSize;
 		}
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
index c9f283cbd444..52f77d6cd88f 100644
--- a/packages/main/src/themes/TextArea.css
+++ b/packages/main/src/themes/TextArea.css
@@ -9,7 +9,7 @@
 	width: 100%;
 	min-width: 6rem;
 	color: var(--sapField_TextColor);
-	min-height: var(--__ui5_textarea_min_height);
+	min-height: var(--_ui5_textarea_min_height);
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
@@ -40,7 +40,7 @@
 .ui5-textarea-root {
 	width: 100%;
 	height: inherit;
-	min-height: var(--__ui5_textarea_min_height);
+	min-height: var(--_ui5_textarea_min_height);
 	display: inline-flex;
 	vertical-align: top;
 	outline: none;
@@ -162,7 +162,7 @@
 :host([style*="height"]) .ui5-textarea-root,
 :host([growing][style*="height"]) .ui5-textarea-wrapper {
 	height: inherit;
-	min-height: var(--__ui5_textarea_min_height);
+	min-height: var(--_ui5_textarea_min_height);
 }
 
 :host([rows]) .ui5-textarea-inner, :host([rows]) .ui5-textarea-mirror {
diff --git a/packages/main/src/themes/base/TextArea-parameters.css b/packages/main/src/themes/base/TextArea-parameters.css
index 8a734364a80d..c243220fce20 100644
--- a/packages/main/src/themes/base/TextArea-parameters.css
+++ b/packages/main/src/themes/base/TextArea-parameters.css
@@ -22,7 +22,7 @@
 	--_ui5_textarea_readonly_focus_offset: 1px;
 	--_ui5_textarea_value_state_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapContent_FocusColor);
-	--__ui5_textarea_min_height: 2.25rem;
+	--_ui5_textarea_min_height: 2.25rem;
 	--_ui5_textarea_padding_right_and_left: 0.5625rem;
 	--_ui5_textarea_padding_right_and_left_error_warning: 0.5rem;
 	--_ui5_textarea_padding_right_and_left_information: 0.5rem;
@@ -57,5 +57,5 @@
 	--_ui5_textarea_padding_bottom_information: 0.0625rem;
 	--_ui5_textarea_exceeded_text_height: 0.375rem;
 	--_ui5_textarea_margin: 0.1875rem 0;
-	--__ui5_textarea_min_height: 1.625rem;
+	--_ui5_textarea_min_height: 1.625rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize/TextArea-parameters.css b/packages/main/src/themes/sap_belize/TextArea-parameters.css
index f9cacbf03e3a..3f8b4b7bcf70 100644
--- a/packages/main/src/themes/sap_belize/TextArea-parameters.css
+++ b/packages/main/src/themes/sap_belize/TextArea-parameters.css
@@ -1,7 +1,7 @@
 @import "../base/TextArea-parameters.css";
 
 :root {
-	--__ui5_textarea_min_height: 2.5rem;
+	--_ui5_textarea_min_height: 2.5rem;
 	--_ui5_textarea_padding_top: 0.5625rem;
 	--_ui5_textarea_padding_bottom:0.5625rem;
 	--_ui5_textarea_padding_top_readonly: 0.5625rem;
@@ -19,5 +19,5 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--__ui5_textarea_min_height: 1.625rem;
+	--_ui5_textarea_min_height: 1.625rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcb/TextArea-parameters.css b/packages/main/src/themes/sap_belize_hcb/TextArea-parameters.css
index eedf2ce1c561..d5eee8dd234d 100644
--- a/packages/main/src/themes/sap_belize_hcb/TextArea-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcb/TextArea-parameters.css
@@ -1,7 +1,7 @@
 @import "../base/TextArea-parameters.css";
 
 :root {
-	--__ui5_textarea_min_height: 2.5rem;
+	--_ui5_textarea_min_height: 2.5rem;
 	--_ui5_textarea_error_warning_border_style: dashed;
 	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
 	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
diff --git a/packages/main/src/themes/sap_belize_hcw/TextArea-parameters.css b/packages/main/src/themes/sap_belize_hcw/TextArea-parameters.css
index 21abc6260fdd..15e7cb608895 100644
--- a/packages/main/src/themes/sap_belize_hcw/TextArea-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcw/TextArea-parameters.css
@@ -1,7 +1,7 @@
 @import "../base/TextArea-parameters.css";
 
 :root {
-	--__ui5_textarea_min_height: 2.5rem;
+	--_ui5_textarea_min_height: 2.5rem;
 	--_ui5_textarea_error_warning_border_style: dashed;
 	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
 	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
diff --git a/packages/tools/components-package/postcss.components.js b/packages/tools/components-package/postcss.components.js
index 2dec13dde016..bd99875b4bf5 100644
--- a/packages/tools/components-package/postcss.components.js
+++ b/packages/tools/components-package/postcss.components.js
@@ -1,9 +1,11 @@
 const postcssImport = require('postcss-import');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const fs = require("fs");
+const fs = require("fs")
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
 module.exports = {
 		plugins: [
@@ -16,6 +18,7 @@ module.exports = {
 					},
 				]
 			}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+			postcssScopeVars({version: packageJSON.version}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }),
 		]
 }
diff --git a/packages/tools/components-package/postcss.themes.js b/packages/tools/components-package/postcss.themes.js
index 910af088e158..7d3da0c7cc7d 100644
--- a/packages/tools/components-package/postcss.themes.js
+++ b/packages/tools/components-package/postcss.themes.js
@@ -2,15 +2,17 @@ const postcssImport = require('postcss-import');
 const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const modifySelectors = require("modify-selectors");
 const fs = require("fs");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-const selectors = [".sapUiSizeCompact", ".ui5-content-density-compact", "[data-ui5-compact-size]", "[dir=\"rtl\"]", "[dir=\"ltr\"]"];
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const packageName = packageJSON.name;
 
 module.exports = {
 		plugins: [
+			postcssScopeVars({version: packageJSON.version}),
 			postcssImport(),
 			combineSelectors({
 				removeDuplicatedProperties: true
@@ -22,28 +24,6 @@ module.exports = {
 					},
 				]
 			},),
-			modifySelectors({
-				enable: true,
-				suffix: [
-					{
-						match: '*',
-						with: '[_ui5host]', // Add suffix to each selector in the file (:root => :root [_ui5host])
-					},
-				],
-			}),
-			modifySelectors({
-				enable: true,
-				modify: [
-					{
-						match: (selector) => {
-							return selectors.some($ => selector.startsWith($));
-						},
-						with: (selector) => {
-							return `${selector.replace(" ", "")}, ${selector}`;
-						},
-					},
-				]
-			}),
 			postcssCSStoJSON({ toReplace: 'src', packageName }),
 			postcssCSStoESM({ toReplace: 'src', packageName }),
 		]
diff --git a/packages/tools/lib/postcss-css-to-esm/index.js b/packages/tools/lib/postcss-css-to-esm/index.js
index 2d0f9bd7d458..003309cb154e 100644
--- a/packages/tools/lib/postcss-css-to-esm/index.js
+++ b/packages/tools/lib/postcss-css-to-esm/index.js
@@ -60,7 +60,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
-		Once (root) {
+		OnceExit(root) {
 			const tsMode = process.env.UI5_TS === "true";
 
 			let css = root.toString();
diff --git a/packages/tools/lib/postcss-css-to-json/index.js b/packages/tools/lib/postcss-css-to-json/index.js
index 6838db2e8175..62d751246c2c 100644
--- a/packages/tools/lib/postcss-css-to-json/index.js
+++ b/packages/tools/lib/postcss-css-to-json/index.js
@@ -15,7 +15,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-json',
-		Once (root) {
+		OnceExit (root) {
 			let css = root.toString();
 			css = proccessCSS(css);
 
diff --git a/packages/tools/lib/postcss-scope-vars/index.js b/packages/tools/lib/postcss-scope-vars/index.js
new file mode 100644
index 000000000000..801ab881f6df
--- /dev/null
+++ b/packages/tools/lib/postcss-scope-vars/index.js
@@ -0,0 +1,24 @@
+const name = "postcss-scope-vars";
+
+module.exports = (options) => {
+	const versionStr = "v" + options?.version?.replaceAll(".", "-");
+	return {
+		postcssPlugin: name,
+		prepare() {
+			return {
+				Declaration: (declaration) => {
+					if (declaration.__ui5_replaced) {
+						return;
+					}
+					// add version after ui5
+					const expr = /(--_?ui5)([^\,\:\)\s]+)/g
+					declaration.prop = declaration.prop.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.value = declaration.value.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.__ui5_replaced = true;
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;
diff --git a/packages/tools/package.json b/packages/tools/package.json
index ea510af9f516..e5de52b91bf4 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -51,7 +51,6 @@
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
-    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
diff --git a/yarn.lock b/yarn.lock
index 9c0446d8ee7a..ffc76f466b12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10699,11 +10699,6 @@ mocha@^10.0.0:
     yargs-parser "20.2.4"
     yargs-unparser "2.0.0"
 
-modify-selectors@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/modify-selectors/-/modify-selectors-2.0.0.tgz#0834a1511ad291c81c58ef5f069b74640b3f5ecd"
-  integrity sha512-Hm32mqJ27AZ0AnpwyX3mXpvevAM9eAq0BsmNNVk2CSE8zqUW2bXk4ZNnA1nsjtm1z/cQJJlVmP6AGMqb/KQpKg==
-
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"

From 712aa8f740fd1dd61b7eae490691580b41abbee5 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Thu, 17 Aug 2023 09:14:36 +0300
Subject: [PATCH 06/33] docs: update landing-page.html

---
 packages/playground/docs/landing-page.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/docs/landing-page.html b/packages/playground/docs/landing-page.html
index d708187143a1..d171a8444c5d 100644
--- a/packages/playground/docs/landing-page.html
+++ b/packages/playground/docs/landing-page.html
@@ -45,7 +45,7 @@
             <section class="welcome-section">
                 <h1 class="title">UI5&nbsp;<span class="orange">Web Components</span></h1>
                 <div class="description">Enterprise-flavored sugar on top of native APIs!</div>
-                <p class="version">Latest Version: <a href="https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.1">1.15.1</a></p>
+                <p class="version">Latest Version: <a href="https://github.com/SAP/ui5-webcomponents/releases/tag/v1.16.0">1.16.0</a></p>
                 <a href="./playground" class="get-started-button">Get Started</a>
             </section>
         </div>

From 6ab07172a4a1566c3c598ea1db8dae9b26b4d64e Mon Sep 17 00:00:00 2001
From: ui5-webcomponents-bot <ui5-webcomponents-bot@sap.com>
Date: Thu, 17 Aug 2023 08:18:07 +0000
Subject: [PATCH 07/33] chore(release): publish v1.17.0-rc.1 [ci skip]

---
 CHANGELOG.md                               | 21 +++++++++++++++++++++
 lerna.json                                 |  2 +-
 packages/base/CHANGELOG.md                 | 11 +++++++++++
 packages/base/package.json                 |  4 ++--
 packages/create-package/CHANGELOG.md       |  8 ++++++++
 packages/create-package/package.json       |  2 +-
 packages/fiori/CHANGELOG.md                |  8 ++++++++
 packages/fiori/package.json                | 12 ++++++------
 packages/icons-business-suite/CHANGELOG.md |  8 ++++++++
 packages/icons-business-suite/package.json |  6 +++---
 packages/icons-tnt/CHANGELOG.md            |  8 ++++++++
 packages/icons-tnt/package.json            |  6 +++---
 packages/icons/CHANGELOG.md                |  8 ++++++++
 packages/icons/package.json                |  6 +++---
 packages/localization/CHANGELOG.md         |  8 ++++++++
 packages/localization/package.json         |  6 +++---
 packages/main/CHANGELOG.md                 | 21 +++++++++++++++++++++
 packages/main/package.json                 | 12 ++++++------
 packages/playground/CHANGELOG.md           | 11 +++++++++++
 packages/playground/package.json           |  2 +-
 packages/theming/CHANGELOG.md              |  8 ++++++++
 packages/theming/package.json              |  6 +++---
 packages/tools/CHANGELOG.md                | 11 +++++++++++
 packages/tools/package.json                |  2 +-
 24 files changed, 164 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13c05906b709..5523e5511bbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Bug Fixes
+
+* **ui5-date-picker:** align value state to react binding ([#7396](https://github.com/SAP/ui5-webcomponents/issues/7396)) ([c6e6a7b](https://github.com/SAP/ui5-webcomponents/commit/c6e6a7b5674e4934e590e66d391b731c29101e4a)), closes [#6993](https://github.com/SAP/ui5-webcomponents/issues/6993)
+* **ui5-multi-combobox:** adjust 'paste' handling ([#7440](https://github.com/SAP/ui5-webcomponents/issues/7440)) ([dd658c5](https://github.com/SAP/ui5-webcomponents/commit/dd658c561bfcf56a4634355d3ac1b0f0113f9b05)), closes [#7330](https://github.com/SAP/ui5-webcomponents/issues/7330)
+* **ui5-select:** fix header on phone & update items on options change ([#7455](https://github.com/SAP/ui5-webcomponents/issues/7455)) ([116594c](https://github.com/SAP/ui5-webcomponents/commit/116594c40fd9ba2800b325f15ab2de9fe10222c8))
+* **ui5-split-button:** add css variables for active state ([#7450](https://github.com/SAP/ui5-webcomponents/issues/7450)) ([2885a4d](https://github.com/SAP/ui5-webcomponents/commit/2885a4d276bce1420c4e1589bd1fdc7e98933d05))
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+* **ui5-menu:** make the item click event cancellable ([#7360](https://github.com/SAP/ui5-webcomponents/issues/7360)) ([18b21bf](https://github.com/SAP/ui5-webcomponents/commit/18b21bfdb90ba2672aeb055d9443f1875cf381c7)), closes [#5600](https://github.com/SAP/ui5-webcomponents/issues/5600)
+* **ui5-multi-input, ui5-multi-combobox:** implement popover keyboard handling ([#7368](https://github.com/SAP/ui5-webcomponents/issues/7368)) ([3c047b4](https://github.com/SAP/ui5-webcomponents/commit/3c047b464fb6e6ece4c043531db239f991befd36))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 
diff --git a/lerna.json b/lerna.json
index 654c1815bc01..833ab9fe9cb6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -12,7 +12,7 @@
     "packages/playground",
     "packages/create-package"
   ],
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "command": {
     "publish": {
       "allowBranch": "*",
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
index 199d582c822b..bf3de5afa7be 100644
--- a/packages/base/CHANGELOG.md
+++ b/packages/base/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 
diff --git a/packages/base/package.json b/packages/base/package.json
index 6f310af9729a..474c67dfacba 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.116.0",
-    "@ui5/webcomponents-tools": "1.17.0-rc.0",
+    "@ui5/webcomponents-tools": "1.17.0-rc.1",
     "chromedriver": "114.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md
index 41c6bf741aef..17d8ab8d50f6 100644
--- a/packages/create-package/CHANGELOG.md
+++ b/packages/create-package/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package
diff --git a/packages/create-package/package.json b/packages/create-package/package.json
index 4a344a51cf9f..d631b64c30ee 100644
--- a/packages/create-package/package.json
+++ b/packages/create-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md
index 672e4f1ae677..4252ba690df1 100644
--- a/packages/fiori/CHANGELOG.md
+++ b/packages/fiori/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index 7d15832d625b..a14bb7fb97af 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -41,14 +41,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.17.0-rc.0",
-    "@ui5/webcomponents-base": "1.17.0-rc.0",
-    "@ui5/webcomponents-icons": "1.17.0-rc.0",
-    "@ui5/webcomponents-theming": "1.17.0-rc.0",
+    "@ui5/webcomponents": "1.17.0-rc.1",
+    "@ui5/webcomponents-base": "1.17.0-rc.1",
+    "@ui5/webcomponents-icons": "1.17.0-rc.1",
+    "@ui5/webcomponents-theming": "1.17.0-rc.1",
     "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0",
+    "@ui5/webcomponents-tools": "1.17.0-rc.1",
     "chromedriver": "114.0.0"
   }
 }
diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md
index f09f7cb67114..c00a515be3cc 100644
--- a/packages/icons-business-suite/CHANGELOG.md
+++ b/packages/icons-business-suite/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json
index 8e489fde95d8..3649daf6621d 100644
--- a/packages/icons-business-suite/package.json
+++ b/packages/icons-business-suite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-business-suite",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons-business-suite"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0"
+    "@ui5/webcomponents-tools": "1.17.0-rc.1"
   }
 }
diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md
index 5079f3058776..beccb8d0f153 100644
--- a/packages/icons-tnt/CHANGELOG.md
+++ b/packages/icons-tnt/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-tnt
diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json
index 42c15b1d7a1f..53f2dae847ba 100644
--- a/packages/icons-tnt/package.json
+++ b/packages/icons-tnt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-tnt",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons-tnt"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0"
+    "@ui5/webcomponents-tools": "1.17.0-rc.1"
   }
 }
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 5fac98e42b8a..be0e02e742f5 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 5f7627d21374..0dca8e219b78 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.SAP-icons",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0"
+    "@ui5/webcomponents-tools": "1.17.0-rc.1"
   }
 }
diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md
index 02ddade9679c..8e6aea18a643 100644
--- a/packages/localization/CHANGELOG.md
+++ b/packages/localization/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-localization
diff --git a/packages/localization/package.json b/packages/localization/package.json
index aff76327dd36..b717908527a9 100644
--- a/packages/localization/package.json
+++ b/packages/localization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-localization",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "Localization for UI5 Web Components",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@openui5/sap.ui.core": "1.116.0",
-    "@ui5/webcomponents-tools": "1.17.0-rc.0",
+    "@ui5/webcomponents-tools": "1.17.0-rc.1",
     "chromedriver": "114.0.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },
   "dependencies": {
     "@types/openui5": "^1.113.0",
-    "@ui5/webcomponents-base": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1"
   }
 }
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
index 9300177cd84a..8508b6a34898 100644
--- a/packages/main/CHANGELOG.md
+++ b/packages/main/CHANGELOG.md
@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Bug Fixes
+
+* **ui5-date-picker:** align value state to react binding ([#7396](https://github.com/SAP/ui5-webcomponents/issues/7396)) ([c6e6a7b](https://github.com/SAP/ui5-webcomponents/commit/c6e6a7b5674e4934e590e66d391b731c29101e4a)), closes [#6993](https://github.com/SAP/ui5-webcomponents/issues/6993)
+* **ui5-multi-combobox:** adjust 'paste' handling ([#7440](https://github.com/SAP/ui5-webcomponents/issues/7440)) ([dd658c5](https://github.com/SAP/ui5-webcomponents/commit/dd658c561bfcf56a4634355d3ac1b0f0113f9b05)), closes [#7330](https://github.com/SAP/ui5-webcomponents/issues/7330)
+* **ui5-select:** fix header on phone & update items on options change ([#7455](https://github.com/SAP/ui5-webcomponents/issues/7455)) ([116594c](https://github.com/SAP/ui5-webcomponents/commit/116594c40fd9ba2800b325f15ab2de9fe10222c8))
+* **ui5-split-button:** add css variables for active state ([#7450](https://github.com/SAP/ui5-webcomponents/issues/7450)) ([2885a4d](https://github.com/SAP/ui5-webcomponents/commit/2885a4d276bce1420c4e1589bd1fdc7e98933d05))
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+* **ui5-menu:** make the item click event cancellable ([#7360](https://github.com/SAP/ui5-webcomponents/issues/7360)) ([18b21bf](https://github.com/SAP/ui5-webcomponents/commit/18b21bfdb90ba2672aeb055d9443f1875cf381c7)), closes [#5600](https://github.com/SAP/ui5-webcomponents/issues/5600)
+* **ui5-multi-input, ui5-multi-combobox:** implement popover keyboard handling ([#7368](https://github.com/SAP/ui5-webcomponents/issues/7368)) ([3c047b4](https://github.com/SAP/ui5-webcomponents/commit/3c047b464fb6e6ece4c043531db239f991befd36))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 
diff --git a/packages/main/package.json b/packages/main/package.json
index 4312552c02b5..ada54888507c 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -43,13 +43,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.0",
-    "@ui5/webcomponents-icons": "1.17.0-rc.0",
-    "@ui5/webcomponents-localization": "1.17.0-rc.0",
-    "@ui5/webcomponents-theming": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1",
+    "@ui5/webcomponents-icons": "1.17.0-rc.1",
+    "@ui5/webcomponents-localization": "1.17.0-rc.1",
+    "@ui5/webcomponents-theming": "1.17.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0",
+    "@ui5/webcomponents-tools": "1.17.0-rc.1",
     "chromedriver": "114.0.0"
   }
 }
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
index d4b594bbee5a..ce4b1d94e7a4 100644
--- a/packages/playground/CHANGELOG.md
+++ b/packages/playground/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **ui5-multi-input, ui5-multi-combobox:** implement popover keyboard handling ([#7368](https://github.com/SAP/ui5-webcomponents/issues/7368)) ([3c047b4](https://github.com/SAP/ui5-webcomponents/commit/3c047b464fb6e6ece4c043531db239f991befd36))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-playground
diff --git a/packages/playground/package.json b/packages/playground/package.json
index dabd2f176d62..87e49de4c8be 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ui5/webcomponents-playground",
   "private": true,
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components Playground",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md
index 92540338985a..b15f63a27316 100644
--- a/packages/theming/CHANGELOG.md
+++ b/packages/theming/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 **Note:** Version bump only for package @ui5/webcomponents-theming
diff --git a/packages/theming/package.json b/packages/theming/package.json
index 1cb1b657aab5..fd5971ab2027 100644
--- a/packages/theming/package.json
+++ b/packages/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-theming",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.theming",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@sap-theming/theming-base-content": "11.6.4",
-    "@ui5/webcomponents-base": "1.17.0-rc.0"
+    "@ui5/webcomponents-base": "1.17.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.0",
+    "@ui5/webcomponents-tools": "1.17.0-rc.1",
     "cssnano": "^6.0.1",
     "globby": "^13.1.1",
     "json-beautify": "^1.1.1",
diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md
index 434045041813..a84aeaf25bd1 100644
--- a/packages/tools/CHANGELOG.md
+++ b/packages/tools/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 
diff --git a/packages/tools/package.json b/packages/tools/package.json
index e5de52b91bf4..76d12b42b563 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

From d0b8b01c053853915646b077860a247400cff691 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Fri, 18 Aug 2023 08:51:40 +0300
Subject: [PATCH 08/33] fix(ui5-page): enhance storybook samples (#7448)

---
 packages/fiori/src/Page.ts                    |  7 +---
 .../_stories/fiori/Page/Page.stories.ts       | 38 +++++++++++++++++--
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts
index 97e924af7928..84d3f49031c2 100644
--- a/packages/fiori/src/Page.ts
+++ b/packages/fiori/src/Page.ts
@@ -73,12 +73,7 @@ class Page extends UI5Element {
 	 * <br><br>
 	 * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
 	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>Solid</code></li> (default)
-	 * <li><code>Transparent</code></li>
-	 * <li><code>List</code></li>
-	 * </ul>
+	 *
 	 * @type {sap.ui.webc.fiori.types.PageBackgroundDesign}
 	 * @name sap.ui.webc.fiori.Page.prototype.backgroundDesign
 	 * @defaultvalue "Solid"
diff --git a/packages/playground/_stories/fiori/Page/Page.stories.ts b/packages/playground/_stories/fiori/Page/Page.stories.ts
index e7e754baa489..0a1aa2d02552 100644
--- a/packages/playground/_stories/fiori/Page/Page.stories.ts
+++ b/packages/playground/_stories/fiori/Page/Page.stories.ts
@@ -28,7 +28,7 @@ export default {
 const Template: UI5StoryArgs<Page, StoryArgsSlots> = (args) => {
     return html`
 <ui5-page
-    style="height: 700px; width: 500px"
+    style="height: 500px"
     background-design="${ifDefined(args.backgroundDesign)}"
 	?disable-scrolling="${ifDefined(args.disableScrolling)}"
 	?floating-footer="${ifDefined(args.floatingFooter)}"
@@ -39,8 +39,40 @@ const Template: UI5StoryArgs<Page, StoryArgsSlots> = (args) => {
 </ui5-page>`
 };
 
-export const PageWithFloatingFooter = Template.bind({});
-PageWithFloatingFooter.args = {
+export const Basic = Template.bind({});
+Basic.args = {
+    backgroundDesign: PageBackgroundDesign.Solid,
+	default: `
+    <div>
+        <p class="content-paragraph">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis massa sed elementum tempus egestas sed sed risus pretium. Eget nullam non nisi est sit amet facilisis. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus purus in massa tempor nec. Egestas quis ipsum suspendisse ultrices gravida dictum. Amet facilisis magna etiam tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Ac orci phasellus egestas tellus. Quis imperdiet massa tincidunt nunc.
+        </p>
+        <p class="content-paragraph">
+            Amet consectetur adipiscing elit duis tristique. Tortor condimentum lacinia quis vel eros. Elit sed vulputate mi sit amet mauris commodo quis imperdiet. Sed nisi lacus sed viverra tellus in hac habitasse. Praesent tristique magna sit amet purus gravida quis blandit. Magnis dis parturient montes nascetur ridiculus. Sit amet nulla facilisi morbi tempus iaculis urna id. Senectus et netus et malesuada fames. Faucibus ornare suspendisse sed nisi lacus sed. Facilisis volutpat est velit egestas dui id ornare arcu odio. In tellus integer feugiat scelerisque. Eu turpis egestas pretium aenean pharetra magna. Integer enim neque volutpat ac tincidunt vitae semper quis lectus.
+        </p>
+        <p class="content-paragraph">
+            Sodales ut eu sem integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Tellus rutrum tellus pellentesque eu tincidunt tortor. Etiam tempor orci eu lobortis elementum nibh. Velit laoreet id donec ultrices tincidunt arcu non sodales. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio ut sem nulla pharetra diam sit amet nisl. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Donec enim diam vulputate ut pharetra sit. Posuere ac ut consequat semper viverra nam libero. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices.
+        </p>
+    </div>`,
+	header: `
+    <ui5-bar design="Header" slot="header">
+        <ui5-button icon="home" tooltip="Go home" slot="startContent"></ui5-button>
+        <ui5-label slot="startContent">Title</ui5-label>
+        <ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+    </ui5-bar>`,
+	footer: `
+    <div slot="footer">
+        <ui5-bar>
+            <ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+            <ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+            <ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+        </ui5-bar>
+    </div>`,
+};
+
+
+export const WithFloatingFooter = Template.bind({});
+WithFloatingFooter.args = {
     backgroundDesign: PageBackgroundDesign.List,
     floatingFooter: true,
 	default: `

From dfc18f375d45183b36be13c14d98f5fc5683fb84 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Fri, 18 Aug 2023 08:52:37 +0300
Subject: [PATCH 09/33] fix(ui5-rating-indicator): enhance storybook samples
 (#7446)

---
 .../RatingIndicator.stories.ts                | 32 +++++--------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
index 9b55419e5367..16d83f8e5906 100644
--- a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
+++ b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
@@ -14,7 +14,7 @@ const component = "ui5-rating-indicator";
 let index = 0;
 
 export default {
-    title: "Main/RatingIndicator",
+    title: "Main/Rating Indicator",
     component: "RatingIndicator",
     parameters: {
         docs: {
@@ -36,41 +36,25 @@ const Template: UI5StoryArgs<RatingIndicator, StoryArgsSlots> = (args) => html`
 	accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
 ></ui5-rating-indicator>`;
 
-export const BasicRatingIndicator = Template.bind({});
-BasicRatingIndicator.args = {
+export const Basic = Template.bind({});
+Basic.args = {
 	value: 3.7
 };
 
-export const RatingIndicatorMax = Template.bind({});
-RatingIndicatorMax.args = {
+export const WithMaxValue = Template.bind({});
+WithMaxValue.args = {
 	value: 5,
 	max: 10
 };
-RatingIndicatorMax.storyName = "Rating Indicator with Max Value";
 
-
-export const DisabledRatingIndicator: StoryFn = Template.bind({});
-DisabledRatingIndicator.args = {
-	value: 5,
-	max: 10,
-	disabled: true
-};
-
-export const ReadonlyRatingIndicator: StoryFn = Template.bind({});
-ReadonlyRatingIndicator.args = {
-	value: 5,
-	max: 7,
-	readonly: true
-};
-
-export const RequiredRatingIndicatorWithLabel: StoryFn = Template.bind({});
-RequiredRatingIndicatorWithLabel.args = {
+export const WithRequiredLabel: StoryFn = Template.bind({});
+WithRequiredLabel.args = {
 	value: 5,
 	max: 7,
 	accessibleNameRef: "label-acc-name-ref",
 	required: true
 };
-RequiredRatingIndicatorWithLabel.decorators = [
+WithRequiredLabel.decorators = [
 	(story) => {
 	return html`
 	<ui5-label id="label-acc-name-ref" required="true" for="rating-indicator-${index+1}">Rate us</ui5-label>

From 62603b3e46061e1ccf761d58af5409aaad9f2a7c Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Fri, 18 Aug 2023 08:53:54 +0300
Subject: [PATCH 10/33] fix(ui5-wizard): enhance storybook samples (#7445)

---
 packages/playground/_stories/fiori/Wizard/Wizard.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts b/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts
index a91674466159..e699b573a981 100644
--- a/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts
+++ b/packages/playground/_stories/fiori/Wizard/Wizard.stories.ts
@@ -26,7 +26,7 @@ export default {
 
 let index = 0;
 
-export const WizardOverview: StoryFn = () => html`
+export const Basic: StoryFn = () => html`
 	<ui5-wizard id="wiz-${++index}">
 		<ui5-wizard-step icon="product" title-text="Product type" selected="">
 			<div style="display: flex; min-height: 200px; flex-direction: column;">
@@ -137,7 +137,7 @@ export const WizardOverview: StoryFn = () => html`
 	</script>
 `;
 
-export const WizardPageMode: StoryFn = () => html`
+export const PageMode: StoryFn = () => html`
 	<ui5-dialog id="dialog${++index}" stretch header-heading="Wizard">
 		<ui5-wizard id="wiz-${index}" content-layout="SingleStep">
 			<ui5-wizard-step icon="product" title-text="Product type" selected="">

From b77db6b04579cfa479fe0802406da691edca0b04 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Fri, 18 Aug 2023 11:47:54 +0300
Subject: [PATCH 11/33] fix(ui5-input): apply correct button's box-shadow on
 hover (#7439)

---
 packages/main/src/themes/sap_horizon/InputIcon-parameters.css   | 2 +-
 .../main/src/themes/sap_horizon_dark/InputIcon-parameters.css   | 2 +-
 .../src/themes/sap_horizon_dark_exp/InputIcon-parameters.css    | 2 +-
 .../main/src/themes/sap_horizon_exp/InputIcon-parameters.css    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/themes/sap_horizon/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon/InputIcon-parameters.css
index 47db52de67e9..d73b487942ca 100644
--- a/packages/main/src/themes/sap_horizon/InputIcon-parameters.css
+++ b/packages/main/src/themes/sap_horizon/InputIcon-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_input_icon_hover_bg: var(--sapField_Focus_Background);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
 	--_ui5_input_icon_border_radius: 0.25rem;
-	--_ui5_input_icon_box_shadow: var(--sapContent_Interaction_Shadow);
+	--_ui5_input_icon_box_shadow: var(--sapField_Hover_Shadow);
 	--_ui5_input_icon_border: none;
 	--_ui5_input_error_icon_box_shadow: var(--sapContent_Negative_Shadow);
 	--_ui5_input_warning_icon_box_shadow: var(--sapContent_Critical_Shadow);
diff --git a/packages/main/src/themes/sap_horizon_dark/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_dark/InputIcon-parameters.css
index 47db52de67e9..d73b487942ca 100644
--- a/packages/main/src/themes/sap_horizon_dark/InputIcon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/InputIcon-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_input_icon_hover_bg: var(--sapField_Focus_Background);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
 	--_ui5_input_icon_border_radius: 0.25rem;
-	--_ui5_input_icon_box_shadow: var(--sapContent_Interaction_Shadow);
+	--_ui5_input_icon_box_shadow: var(--sapField_Hover_Shadow);
 	--_ui5_input_icon_border: none;
 	--_ui5_input_error_icon_box_shadow: var(--sapContent_Negative_Shadow);
 	--_ui5_input_warning_icon_box_shadow: var(--sapContent_Critical_Shadow);
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/InputIcon-parameters.css
index 47db52de67e9..d73b487942ca 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/InputIcon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/InputIcon-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_input_icon_hover_bg: var(--sapField_Focus_Background);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
 	--_ui5_input_icon_border_radius: 0.25rem;
-	--_ui5_input_icon_box_shadow: var(--sapContent_Interaction_Shadow);
+	--_ui5_input_icon_box_shadow: var(--sapField_Hover_Shadow);
 	--_ui5_input_icon_border: none;
 	--_ui5_input_error_icon_box_shadow: var(--sapContent_Negative_Shadow);
 	--_ui5_input_warning_icon_box_shadow: var(--sapContent_Critical_Shadow);
diff --git a/packages/main/src/themes/sap_horizon_exp/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_exp/InputIcon-parameters.css
index 47db52de67e9..d73b487942ca 100644
--- a/packages/main/src/themes/sap_horizon_exp/InputIcon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/InputIcon-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_input_icon_hover_bg: var(--sapField_Focus_Background);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
 	--_ui5_input_icon_border_radius: 0.25rem;
-	--_ui5_input_icon_box_shadow: var(--sapContent_Interaction_Shadow);
+	--_ui5_input_icon_box_shadow: var(--sapField_Hover_Shadow);
 	--_ui5_input_icon_border: none;
 	--_ui5_input_error_icon_box_shadow: var(--sapContent_Negative_Shadow);
 	--_ui5_input_warning_icon_box_shadow: var(--sapContent_Critical_Shadow);

From 92987476d2238f512bae871aa1b8559a31b0a450 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Mon, 21 Aug 2023 09:36:47 +0300
Subject: [PATCH 12/33] fix(ui5-toast): enhance storybook samples (#7451)

fix(ui5-toast): enhance storybook sample
---
 packages/main/src/Toast.ts                          | 12 ------------
 .../playground/_stories/main/Toast/Toast.stories.ts | 13 +++++++------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts
index 2fb68dd33024..c830a085501d 100644
--- a/packages/main/src/Toast.ts
+++ b/packages/main/src/Toast.ts
@@ -78,18 +78,6 @@ class Toast extends UI5Element {
 	/**
 	 * Defines the placement of the component.
 	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>TopStart</code></li>
-	 * <li><code>TopCenter</code></li>
-	 * <li><code>TopEnd</code></li>
-	 * <li><code>MiddleStart</code></li>
-	 * <li><code>MiddleCenter</code></li>
-	 * <li><code>MiddleEnd</code></li>
-	 * <li><code>BottomStart</code></li>
-	 * <li><code>BottomCenter</code></li>
-	 * <li><code>BottomEnd</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.main.types.ToastPlacement}
 	 * @name sap.ui.webc.main.Toast.prototype.placement
diff --git a/packages/playground/_stories/main/Toast/Toast.stories.ts b/packages/playground/_stories/main/Toast/Toast.stories.ts
index 9f398f922b0c..83d278f1ffa8 100644
--- a/packages/playground/_stories/main/Toast/Toast.stories.ts
+++ b/packages/playground/_stories/main/Toast/Toast.stories.ts
@@ -48,17 +48,18 @@ const Template: UI5StoryArgs<Toast, StoryArgsSlots> = (args) => {
 
 export const Basic = Template.bind({});
 Basic.args = {
+	placement: ToastPlacement.BottomCenter,
 	default: "Basic Toast",
 };
 
-export const ToastDuration = Template.bind({});
-ToastDuration.args = {
-	default: "Long Toast",
+export const Duration = Template.bind({});
+Duration.args = {
 	duration: 4500,
+	default: "Long Toast",
 };
 
-export const ToastPlacements = Template.bind({});
-ToastPlacements.args = {
-	default: "Middle Center Toast",
+export const Placement = Template.bind({});
+Placement.args = {
 	placement: ToastPlacement.MiddleCenter,
+	default: "Middle Center Toast",
 };

From 52562ecb5f6c91a447210827c0ff27c9f726cf9b Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:36:54 +0300
Subject: [PATCH 13/33] fix(ui5-multi-combobox): adjust storybook sample
 (#7441)

---
 packages/main/src/MultiComboBox.ts            |  9 +---
 .../MultiComboBox/MultiComboBox.stories.ts    | 41 ++++++++-----------
 2 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index d3c210ebd6f6..739df848ad2f 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -305,13 +305,6 @@ class MultiComboBox extends UI5Element {
 	 * Defines the value state of the component.
 	 * <br><br>
 	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @name sap.ui.webc.main.MultiComboBox.prototype.valueState
@@ -377,7 +370,7 @@ class MultiComboBox extends UI5Element {
 	 *
 	 * @type {string}
 	 * @name sap.ui.webc.main.MultiComboBox.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @defaultvalue ""
 	 * @public
 	 * @since 1.4.0
 	 */
diff --git a/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts b/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts
index 17a6257df0b1..0af933505935 100644
--- a/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts
+++ b/packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts
@@ -15,7 +15,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 const component = "ui5-multi-combobox";
 
 export default {
-    title: "Main/MultiComboBox",
+    title: "Main/Multi-Combo Box",
     component: "MultiComboBox",
     subcomponents: {'MultiComboBoxItem' : 'MultiComboBoxItem', 'MultiComboBoxGroupItem' : 'MultiComboBoxGroupItem'},
     parameters: {
@@ -47,32 +47,24 @@ const Template: UI5StoryArgs<MultiComboBox, StoryArgsSlots> = (args) => html`
 </ui5-multi-combobox>`;
 
 
-export const BasicMultiComboBox = Template.bind({});
-BasicMultiComboBox.args = {
+export const Basic = Template.bind({});
+Basic.args = {
 	placeholder: 'Type your value',
-	default: `<ui5-mcb-item selected="" text="UI5"></ui5-mcb-item>`
-};
-
-export const MultiComboBoxItems = Template.bind({});
-MultiComboBoxItems.args = {
-	placeholder: 'Choose your countries',
 	default: `
+	<ui5-mcb-item text="Albania"></ui5-mcb-item>
 	<ui5-mcb-item selected="" text="Argentina"></ui5-mcb-item>
 	<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
 	<ui5-mcb-item text="Denmark"></ui5-mcb-item>
 	<ui5-mcb-item text="England"></ui5-mcb-item>
-	<ui5-mcb-item text="Albania"></ui5-mcb-item>
-	<ui5-mcb-item text="Morocco"></ui5-mcb-item>
-	<ui5-mcb-item text="Portugal"></ui5-mcb-item>
 	<ui5-mcb-item text="Germany"></ui5-mcb-item>
 	<ui5-mcb-item text="Philippines"></ui5-mcb-item>
-	<ui5-mcb-item text="Paraguay"></ui5-mcb-item>`
+	<ui5-mcb-item text="Portugal"></ui5-mcb-item>
+	<ui5-mcb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-mcb-item>
+	`
 };
 
-MultiComboBoxItems.storyName = "Multi Combo Box with items";
-
-export const MultiComboBoxFreeTextInput = Template.bind({});
-MultiComboBoxFreeTextInput.args = {
+export const MultiComboBoxCustomValue= Template.bind({});
+MultiComboBoxCustomValue.args = {
 	placeholder: 'Choose your state',
 	valueState: ValueState.Success,
 	allowCustomValues: true,
@@ -87,10 +79,10 @@ MultiComboBoxFreeTextInput.args = {
 	<ui5-mcb-item text="Error"></ui5-mcb-item>
 	<ui5-mcb-item text="Mistake"></ui5-mcb-item>`
 };
-MultiComboBoxFreeTextInput.storyName = "Multi Combo Box with free text input";
+MultiComboBoxCustomValue.storyName = "Custom Value";
 
-export const MultiComboBoxGroupingItems = Template.bind({});
-MultiComboBoxGroupingItems.args = {
+export const MultiComboBoxGrouping = Template.bind({});
+MultiComboBoxGrouping.args = {
 	placeholder: 'Select a country',
 	default: `
 	<ui5-mcb-group-item text="Asia"></ui5-mcb-group-item>
@@ -103,17 +95,18 @@ MultiComboBoxGroupingItems.args = {
 	<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
 	<ui5-mcb-item text="Germany"></ui5-mcb-item>
 	<ui5-mcb-item text="Italy"></ui5-mcb-item>
+	<ui5-mcb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-mcb-item>
 	<ui5-mcb-group-item text="North America"></ui5-mcb-group-item>
 	<ui5-mcb-item text="Canada"></ui5-mcb-item>
 	<ui5-mcb-item text="Granada"></ui5-mcb-item>
 	<ui5-mcb-item text="Haiti"></ui5-mcb-item>
 	<ui5-mcb-item text="United States"></ui5-mcb-item>`
 };
-MultiComboBoxGroupingItems.storyName = "Multi Combo Box with Grouping of Items";
+MultiComboBoxGrouping.storyName = "Grouping";
 
-export const MultiComboBoxLongText = Template.bind({});
-MultiComboBoxLongText.args = {
+export const MultiComboBoxLongToken = Template.bind({});
+MultiComboBoxLongToken.args = {
 	placeholder: 'MultiComboBox with single long token',
 	default: `<ui5-mcb-item selected="" text="Very long long long long long long long text"></ui5-mcb-item>`
 };
-MultiComboBoxLongText.storyName = "Multi Combo Box with single long token";
\ No newline at end of file
+MultiComboBoxLongToken.storyName = "Single Long Token";
\ No newline at end of file

From 0283e28b8993a37b98fc0acfb2e15d6fc6bc77f8 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Tue, 22 Aug 2023 10:18:50 +0300
Subject: [PATCH 14/33] fix(ui5-message-strip): enhance storybook samples
 (#7464)

---
 packages/main/src/MessageStrip.ts             |  3 ---
 .../main/MessageStrip/MessageStrip.stories.ts | 22 ++++---------------
 2 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts
index 2c0aae856e1e..ff880f5f3cea 100644
--- a/packages/main/src/MessageStrip.ts
+++ b/packages/main/src/MessageStrip.ts
@@ -100,9 +100,6 @@ type DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;
 class MessageStrip extends UI5Element {
 	/**
 	 * Defines the component type.
-	 * <br><br>
-	 * <b>Note:</b> Available options are <code>"Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
-	 * and <code>"Warning"</code>.
 	 *
 	 * @type {sap.ui.webc.main.types.MessageStripDesign}
 	 * @name sap.ui.webc.main.MessageStrip.prototype.design
diff --git a/packages/playground/_stories/main/MessageStrip/MessageStrip.stories.ts b/packages/playground/_stories/main/MessageStrip/MessageStrip.stories.ts
index 02cd6d11a5c1..03a5dcf21f40 100644
--- a/packages/playground/_stories/main/MessageStrip/MessageStrip.stories.ts
+++ b/packages/playground/_stories/main/MessageStrip/MessageStrip.stories.ts
@@ -13,7 +13,7 @@ import MessageStripDesign from "@ui5/webcomponents/dist/types/MessageStripDesign
 const component = "ui5-message-strip";
 
 export default {
-    title: "Main/MessageStrip",
+    title: "Main/Message Strip",
     component: "MessageStrip",
     parameters: {
         docs: {
@@ -40,21 +40,7 @@ Basic.args = {
   default: "Information MessageStrip",
 };
 
-export const MessageStripWithNoCloseButton = Template.bind({});
-MessageStripWithNoCloseButton.args = {
-  design: MessageStripDesign.Positive,
-  hideCloseButton: true,
-  default: "Positive MessageStrip With No Close Button",
-};
-
-export const MessageStripWithNoIcon = Template.bind({});
-MessageStripWithNoIcon.args = {
-  design: MessageStripDesign.Warning,
-  hideIcon: true,
-  default: "Warning MessageStrip With No Icon",
-};
-
-export const DynamicMessageStrip: StoryFn = () => html`
+export const Dynamic: StoryFn = () => html`
 <div class="wrapper">
 	<ui5-button id="button1">Generate MessageStrip</ui5-button>
 </div>
@@ -81,8 +67,8 @@ export const DynamicMessageStrip: StoryFn = () => html`
 `;
 
 
-export const CustomMessageStrip = Template.bind({});
-CustomMessageStrip.args = {
+export const Custom = Template.bind({});
+Custom.args = {
   design: MessageStripDesign.Negative,
   icon: `<img src="../assets/images/loading.gif" width="16" height="16" slot="icon">`,
   default: "Custom MessageStrip with animated gif",

From 52be839e70e1cb94b86e177ea3a1efc66fd7a981 Mon Sep 17 00:00:00 2001
From: Martin <martin.r.hristov@gmail.com>
Date: Tue, 22 Aug 2023 12:31:03 +0300
Subject: [PATCH 15/33] fix(ui5-panel): enhance storybook samples (#7403)

* docs(ui5-panel): simplify playground sample

* fix(ui5-panel): enhance storybook sample

* fix(ui5-panel): apply review comments

---------

Co-authored-by: Nia Peeva <nia.peeva@sap.com>
---
 .../_stories/main/Panel/Panel.stories.ts      | 186 +++++++-----------
 1 file changed, 67 insertions(+), 119 deletions(-)

diff --git a/packages/playground/_stories/main/Panel/Panel.stories.ts b/packages/playground/_stories/main/Panel/Panel.stories.ts
index d6547f0de874..2c1fa816bf29 100644
--- a/packages/playground/_stories/main/Panel/Panel.stories.ts
+++ b/packages/playground/_stories/main/Panel/Panel.stories.ts
@@ -44,40 +44,36 @@ const Template : UI5StoryArgs<Panel, StoryArgsSlots> = (args) => html`
 	${unsafeHTML(args.default)}
 </ui5-panel>`;
 
-export const BasicPanel = Template.bind({});
-BasicPanel.args = {
+export const Basic = Template.bind({});
+Basic.decorators = [
+	(story) => {
+		return html`
+			<style>
+				.content-color {
+					color: var(--sapField_TextColor);
+				}
+			</style>
+			${story()}`;
+	}
+]
+Basic.args = {
+	headerText: "Both expandable and expanded",
 	default: `
-	<h1 class="content-color">I am a native heading!</h1>
+	<ui5-title level="H1"> I am a heading! </ui5-title>
 	<ui5-label wrapping-type="Normal">Short text.</ui5-label>
 	<br/>
 	<ui5-label wrapping-type="Normal">Another text.</ui5-label>
 	<p class="content-color">Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna.
 		Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore
 		commodo Lorem laboris nisi Lorem.
-	</p>`,
-	headerText: "Both expandable and expanded"
-};
-
-export const PanelWithList = Template.bind({});
-PanelWithList.args = {
-	default: `
-	<ui5-list mode="MultiSelect">
-		<ui5-li key="country1">Argentina</ui5-li>
-		<ui5-li key="country2">Bulgaria</ui5-li>
-		<ui5-li key="country3">China</ui5-li>
-		<ui5-li key="country4">Germany</ui5-li>
-		<ui5-li key="country5">Hungary</ui5-li>
-		<ui5-li key="country6">England</ui5-li>
-		<ui5-li key="country7">USA</ui5-li>
-		<ui5-li key="country8">Canada</ui5-li>
-	</ui5-list>`,
-	headerText: "Select your country",
-	accessibleRole: PanelAccessibleRole.Complementary
+	</p>`
 };
 
-
-export const FixedPanel = Template.bind({});
-FixedPanel.args = {
+export const Fixed = Template.bind({});
+Fixed.args = {
+	headerText: "Country Of Birth",
+	accessibleRole: PanelAccessibleRole.Complementary,
+	fixed: true,
 	default: `
 	<ui5-list mode="SingleSelectBegin">
 		<ui5-li key="country1">Argentina</ui5-li>
@@ -85,106 +81,59 @@ FixedPanel.args = {
 		<ui5-li key="country3">China</ui5-li>
 		<ui5-li key="country4">Germany</ui5-li>
 	</ui5-list>`,
-	headerText: "Country Of Birth",
-	accessibleRole: PanelAccessibleRole.Complementary,
-	fixed: true
 };
-FixedPanel.storyName = "Fixed Panel (Can't be Collapsed/Expanded)";
 
 export const StickyHeader = Template.bind({});
 StickyHeader.decorators = [
 	(story) => {
-	return html`
-<style>
-	#panel-${index+1}::part(content) {
-		max-height: 50px;
-	}
-	#second-panel-stickyHeader::part(content) {
-		max-height: 100px;
-	}
-</style>
-<div style="height: 250px; overflow: scroll;">
-	${story()}
-<br />
-<ui5-panel id="second-panel-stickyHeader" sticky-header header-text="Second Panel with sticky header">
-	<ui5-title>Another Lorem ipsum!</ui5-title>
-
-	<ui5-label wrapping-type="Normal">
-		<span>
-			Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-			nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
-			Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
-			soluta incorrupte ex his.
-			Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
-			democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
-			elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
-			Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
-			no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
-			dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
-			persecuti cotidieque id eos, id ius omnesque vituperata.
-			Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-			nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
-			Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
-			soluta incorrupte ex his.
-			Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
-			democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
-			elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
-			Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
-			no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
-			dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
-			persecuti cotidieque id eos, id ius omnesque vituperata.
-			Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-			nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
-			Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
-			soluta incorrupte ex his.
-			Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
-			democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
-			elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
-			Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
-			no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
-			dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
-			persecuti cotidieque id eos, id ius omnesque vituperata.
-		</span>
-	</ui5-label>
-</ui5-panel>
-</div>`
+		return html`
+			<style>
+				#panel-${index+1} {
+					width: 90%;
+					margin: 0 auto 0 auto;
+				}
+				.content-color {
+					color: var(--sapField_TextColor);
+				}
+			</style>
+			<div style="height: 250px; overflow: scroll;">
+				${story()}
+			</div>`
 	}
 ]
 StickyHeader.args = {
+	headerText: "Sticky header",
+	stickyHeader: true,
 	default: `
 	<ui5-title>Lorem ipsum!</ui5-title>
-	<ui5-label id="contentSticky" wrapping-type="Normal">
-		<span>
-			Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-			nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
-			Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
-			soluta incorrupte ex his.
-			Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
-			democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
-			elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
-			Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
-			no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
-			dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
-			persecuti cotidieque id eos, id ius omnesque vituperata.
-			Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-			nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
-			Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
-			soluta incorrupte ex his.
-			Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
-			democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
-			elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
-			Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
-			no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
-			dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
-			persecuti cotidieque id eos, id ius omnesque vituperata.
-		</span>
-	</ui5-label>`,
-	headerText: "Sticky header",
-	stickyHeader: true
+	<p class="content-color">
+		Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
+		nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
+		Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
+		soluta incorrupte ex his.
+		Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
+		democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
+		elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
+		Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
+		no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
+		dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
+		persecuti cotidieque id eos, id ius omnesque vituperata.
+		Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
+		nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
+		Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
+		soluta incorrupte ex his.
+		Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
+		democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
+		elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
+		Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
+		no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
+		dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
+		persecuti cotidieque id eos, id ius omnesque vituperata.
+	</p>`,
 };
 
-export const PanelCustomHeader = Template.bind({});
-PanelCustomHeader.decorators = [
+export const CustomHeader = Template.bind({});
+CustomHeader.decorators = [
 	(story) => {
 	return html`
 <style>
@@ -198,14 +147,15 @@ PanelCustomHeader.decorators = [
 	${story()}`;
 	}
 ]
-PanelCustomHeader.args = {
+CustomHeader.args = {
+	accessibleRole: PanelAccessibleRole.Complementary,
 	header: `
 	<div slot="header" class="header">
 		<ui5-title>Countries</ui5-title>
 		<div>
-			<ui5-button>Edit</ui5-button>
 			<ui5-button design="Emphasized">Add</ui5-button>
 			<ui5-button design="Negative">Remove</ui5-button>
+			<ui5-button>Edit</ui5-button>
 		</div>
 	</div>`,
 	default: `
@@ -213,7 +163,5 @@ PanelCustomHeader.args = {
 		<ui5-li key="country1">Argentina</ui5-li>
 		<ui5-li key="country2">Bulgaria</ui5-li>
 		<ui5-li key="country3">China</ui5-li>
-	</ui5-list>`,
-	accessibleRole: PanelAccessibleRole.Complementary
-};
-PanelCustomHeader.storyName = "Panel with Custom Header";
+	</ui5-list>`
+};
\ No newline at end of file

From f942c9eab70d9129624e306bb8a255b221f8db4c Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Tue, 22 Aug 2023 23:56:23 +0300
Subject: [PATCH 16/33] fix(ui5-slider): enhance storybook samples (#7460)

* fix(ui5-slider): enhance storybook samples

* fix(ui5-slider): apply review comments
---
 .../main/RangeSlider/RangeSlider.stories.ts   | 66 ++++++++++++-------
 .../_stories/main/Slider/Slider.stories.ts    | 57 +++++++++++-----
 2 files changed, 81 insertions(+), 42 deletions(-)

diff --git a/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts b/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts
index 0335ac75cfbc..92df0eb0cf4c 100644
--- a/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts
+++ b/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts
@@ -13,7 +13,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 const component = "ui5-range-slider";
 
 export default {
-    title: "Main/RangeSlider",
+    title: "Main/Range Slider",
     component: "RangeSlider",
     parameters: {
         docs: {
@@ -35,38 +35,54 @@ const Template: UI5StoryArgs<RangeSlider, StoryArgsSlots> = (args) => html`
 	?show-tooltip="${ifDefined(args.showTooltip)}"
 ></ui5-range-slider>`;
 
-export const BasicRangeSlider = Template.bind({});
-BasicRangeSlider.args = {
+export const Basic = Template.bind({});
+Basic.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+Basic.args = {
+	min: 0,
+	max: 100,
+	step: 5,
+	disabled: false,
+	showTooltip: false,
+	showTickmarks: false,
+	labelInterval: 0,
+	startValue: 0,
 	endValue: 20
 };
 
-export const RangeSliderCustomValues = Template.bind({});
-RangeSliderCustomValues.args = {
-	min: 100,
-	max: 200,
-	startValue: 120,
-	endValue: 150
-};
-RangeSliderCustomValues.storyName = "Range Slider with Custom 'min', 'max', 'startValue' and 'endValue' Properties";
-
-export const RangeSliderTooltip = Template.bind({});
-RangeSliderTooltip.args = {
+export const WithTooltips = Template.bind({});
+WithTooltips.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+WithTooltips.args = {
 	startValue: 3,
 	endValue: 13,
 	showTooltip: true
 };
-RangeSliderTooltip.storyName = "Range Slider with Tooltips";
-
-export const RangeSliderTickmarksCustomStep = Template.bind({});
-RangeSliderTickmarksCustomStep.args = {
-	step: 2,
-	startValue: 12,
-	endValue: 24,
-	showTickmarks: true
-};
-RangeSliderTickmarksCustomStep.storyName = "Range Slider with Tickmarks and Custom Step";
 
 export const RangeSliderTickmarksTooltipLabel = Template.bind({});
+RangeSliderTickmarksTooltipLabel.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
 RangeSliderTickmarksTooltipLabel.args = {
 	min: 0,
 	max: 112,
@@ -77,4 +93,4 @@ RangeSliderTickmarksTooltipLabel.args = {
 	showTickmarks: true,
 	showTooltip: true
 };
-RangeSliderTickmarksTooltipLabel.storyName = "Range Slider with Tooltips, Tickmarks and Labels";
+RangeSliderTickmarksTooltipLabel.storyName = "With Tooltips, Tickmarks and Labels";
diff --git a/packages/playground/_stories/main/Slider/Slider.stories.ts b/packages/playground/_stories/main/Slider/Slider.stories.ts
index 02574952780d..ef3ad510d8f3 100644
--- a/packages/playground/_stories/main/Slider/Slider.stories.ts
+++ b/packages/playground/_stories/main/Slider/Slider.stories.ts
@@ -36,30 +36,53 @@ const Template: UI5StoryArgs<Slider, StoryArgsSlots> = (args) => html`
 	accessible-name="${ifDefined(args.accessibleName)}"
 ></ui5-slider>`;
 
-export const BasicSlider = Template.bind({});
+export const Basic = Template.bind({});
+Basic.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+Basic.args = {
+	min: 0,
+	max: 100,
+	step: 5,
+	disabled: false,
+	showTooltip: false,
+	showTickmarks: false,
+	labelInterval: 0
+};
 
-export const SliderTooltip = Template.bind({});
-SliderTooltip.args = {
+export const WithTooltip = Template.bind({});
+WithTooltip.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+WithTooltip.args = {
 	min: 0,
 	max: 20,
 	showTooltip: true,
 	labelInterval: 5
-
 };
-SliderTooltip.storyName = "Slider with Tooltip";
-
-export const DisabledTickmarksLabel = Template.bind({});
-DisabledTickmarksLabel.args = {
-	min: 20,
-	max: 100,
-	labelInterval: 5,
-	disabled: true,
-	showTickmarks: true
-};
-DisabledTickmarksLabel.storyName = "Disabled Slider with Tickmarks and Labels";
-
 
 export const TickmarksLabelTooltip = Template.bind({});
+TickmarksLabelTooltip.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
 TickmarksLabelTooltip.args = {
 	min: -20,
 	max: 20,
@@ -69,4 +92,4 @@ TickmarksLabelTooltip.args = {
 	labelInterval: 2,
 	showTickmarks: true
 };
-TickmarksLabelTooltip.storyName = "Slider Tooltip, Tickmarks and Labels";
\ No newline at end of file
+TickmarksLabelTooltip.storyName = "With Tooltip, Tickmarks and Labels";
\ No newline at end of file

From 40eb99c76c93229d43c79797dee970fa53e7c8ad Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Wed, 23 Aug 2023 11:13:06 +0300
Subject: [PATCH 17/33] fix(icons): fix "employee-approvals" icon cutt-off
 (#7461)

The employee-approvals icon used to be cut-off from the top (as the SVG"s y coordinates were running out of the viewbox) now the SVG path is corrected.

Fixes: #7410
---
 packages/icons/src/v5/SAP-icons.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/icons/src/v5/SAP-icons.json b/packages/icons/src/v5/SAP-icons.json
index 646bc6dcaa63..315eb3410f8e 100644
--- a/packages/icons/src/v5/SAP-icons.json
+++ b/packages/icons/src/v5/SAP-icons.json
@@ -755,7 +755,7 @@
       "path": "M422 64q38 0 64 26t26 64v204q0 38-26 64t-64 26H90q-38 0-64-26T0 358V154q0-38 26-64t64-26h332zM90 115q-11 0-22 7l167 108q8 7 21 7t21-7l166-109q-9-6-21-6H90zm332 282q17 0 28-11t11-28V171L305 273q-22 15-49 15-26 0-49-15L51 172v186q0 17 11 28t28 11h332z"
     },
     "employee-approvals": {
-      "path": "M369 292q0 11-7 19.5t-18 8.5q-8 0-15.5-6T316 294q-7-15-20-28t-28.5-22.5T234 229t-36-5h-12q-28 0-52.5 10.5t-43 28.5-29 42.5T51 358v7h179q11 0 18.5 7t7.5 18-7.5 18.5T230 416H26q-11 0-18.5-7.5T0 390v-32q0-56 29.5-100.5T107 190q-10-6-18-17t-13.5-25-8.5-29-3-28q0-26 10.5-48T103 4t41-26.5 48-9.5q27 0 50 10.5T282.5 6 310 46t10 48q0 13-2.5 27.5t-8.5 28-14.5 24T274 189q12 5 28 17t31 26.5 25.5 30T369 292zM192 19q-32 0-54.5 22.5T115 96t22.5 54.5T192 173t54.5-22.5T269 96t-22.5-54.5T192 19zm294 301q11 0 18.5 7.5T512 346q0 8-6 16l-94 109q-7 9-19 9-11 0-19-8l-47-52q-7-7-7-17 0-11 7.5-18.5T346 377q10 0 19 9l27 30 75-87q8-9 19-9z",
+      "path": "M369 324q0 11-7 19.5t-18 8.5q-8 0-15.5-6T316 326q-7-15-20-28t-28.5-22.5T234 261t-36-5h-12q-28 0-52.5 10.5t-43 28.5-29 42.5T51 390v7h179q11 0 18.5 7t7.5 18-7.5 18.5T230 448H26q-11 0-18.5-7.5T0 422v-32q0-56 29.5-100.5T107 222q-10-6-18-17t-13.5-25-8.5-29-3-28q0-26 10.5-48T103 36t41-26.5T192 0q27 0 50 10.5T282.5 38 310 78t10 48q0 13-2.5 27.5t-8.5 28-14.5 24T274 221q12 5 28 17t31 26.5 25.5 30T369 324zM192 51q-32 0-54.5 22.5T115 128t22.5 54.5T192 205t54.5-22.5T269 128t-22.5-54.5T192 51zm294 301q11 0 18.5 7.5T512 378q0 8-6 16l-94 109q-7 9-19 9-11 0-19-8l-47-52q-7-7-7-17 0-11 7.5-18.5T346 409q10 0 19 9l27 30 75-87q8-9 19-9z",
       "ltr": true
     },
     "employee-lookup": {

From e357fbef2df9113f1de194a8cd1b1191c7ef2eb1 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:29:25 +0300
Subject: [PATCH 18/33] chore: add list item shadow parts (#7474)

---
 packages/main/src/ListItem.hbs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
index 3811e95cd1bc..51d9b7886018 100644
--- a/packages/main/src/ListItem.hbs
+++ b/packages/main/src/ListItem.hbs
@@ -33,7 +33,7 @@
 			{{> selectionElement}}
 		{{/if}}
 
-		<div id="{{_id}}-content" class="ui5-li-content">
+		<div part="content" id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}
 			{{> listItemContent}}
@@ -43,6 +43,7 @@
 		{{#if typeDetail}}
 			<div class="ui5-li-detailbtn">
 				<ui5-button
+					part="edit-button"
 					design="Transparent"
 					icon="edit"
 					@click="{{onDetailClick}}"
@@ -77,6 +78,7 @@
 {{#*inline "selectionElement"}}
 	{{#if modeSingleSelect}}
 		<ui5-radio-button
+				part="radio"
 				?disabled="{{isInactive}}"
 				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
@@ -89,6 +91,7 @@
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
+				part="checkbox"
 				?disabled="{{isInactive}}"
 				?indeterminate={{indeterminate}}
 				tabindex="-1"
@@ -106,6 +109,7 @@
 				<slot name="deleteButton"></slot>
 			{{else}}
 			<ui5-button
+				part="delete-button"
 				tabindex="-1"
 				data-sap-no-tab-ref
 				id="{{_id}}-deleteSelectionElement"

From e9778e42a321bc65ab0a52fbdcc7957b4290ab13 Mon Sep 17 00:00:00 2001
From: ui5-webcomponents-bot <ui5-webcomponents-bot@sap.com>
Date: Thu, 24 Aug 2023 08:13:05 +0000
Subject: [PATCH 19/33] chore(release): publish v1.17.0-rc.2 [ci skip]

---
 CHANGELOG.md                               | 20 ++++++++++++++++++++
 lerna.json                                 |  2 +-
 packages/base/CHANGELOG.md                 |  8 ++++++++
 packages/base/package.json                 |  4 ++--
 packages/create-package/CHANGELOG.md       |  8 ++++++++
 packages/create-package/package.json       |  2 +-
 packages/fiori/CHANGELOG.md                | 11 +++++++++++
 packages/fiori/package.json                | 12 ++++++------
 packages/icons-business-suite/CHANGELOG.md |  8 ++++++++
 packages/icons-business-suite/package.json |  6 +++---
 packages/icons-tnt/CHANGELOG.md            |  8 ++++++++
 packages/icons-tnt/package.json            |  6 +++---
 packages/icons/CHANGELOG.md                | 11 +++++++++++
 packages/icons/package.json                |  6 +++---
 packages/localization/CHANGELOG.md         |  8 ++++++++
 packages/localization/package.json         |  6 +++---
 packages/main/CHANGELOG.md                 | 14 ++++++++++++++
 packages/main/package.json                 | 12 ++++++------
 packages/playground/CHANGELOG.md           | 18 ++++++++++++++++++
 packages/playground/package.json           |  2 +-
 packages/theming/CHANGELOG.md              |  8 ++++++++
 packages/theming/package.json              |  6 +++---
 packages/tools/CHANGELOG.md                |  8 ++++++++
 packages/tools/package.json                |  2 +-
 24 files changed, 163 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5523e5511bbf..4b4227fd5833 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+
+### Bug Fixes
+
+* **icons:** fix "employee-approvals" icon cutt-off ([#7461](https://github.com/SAP/ui5-webcomponents/issues/7461)) ([40eb99c](https://github.com/SAP/ui5-webcomponents/commit/40eb99c76c93229d43c79797dee970fa53e7c8ad)), closes [#7410](https://github.com/SAP/ui5-webcomponents/issues/7410)
+* **ui5-input:** apply correct button's box-shadow on hover ([#7439](https://github.com/SAP/ui5-webcomponents/issues/7439)) ([b77db6b](https://github.com/SAP/ui5-webcomponents/commit/b77db6b04579cfa479fe0802406da691edca0b04))
+* **ui5-message-strip:** enhance storybook samples ([#7464](https://github.com/SAP/ui5-webcomponents/issues/7464)) ([0283e28](https://github.com/SAP/ui5-webcomponents/commit/0283e28b8993a37b98fc0acfb2e15d6fc6bc77f8))
+* **ui5-multi-combobox:** adjust storybook sample ([#7441](https://github.com/SAP/ui5-webcomponents/issues/7441)) ([52562ec](https://github.com/SAP/ui5-webcomponents/commit/52562ecb5f6c91a447210827c0ff27c9f726cf9b))
+* **ui5-page:** enhance storybook samples ([#7448](https://github.com/SAP/ui5-webcomponents/issues/7448)) ([d0b8b01](https://github.com/SAP/ui5-webcomponents/commit/d0b8b01c053853915646b077860a247400cff691))
+* **ui5-panel:** enhance storybook samples ([#7403](https://github.com/SAP/ui5-webcomponents/issues/7403)) ([52be839](https://github.com/SAP/ui5-webcomponents/commit/52be839e70e1cb94b86e177ea3a1efc66fd7a981))
+* **ui5-rating-indicator:** enhance storybook samples ([#7446](https://github.com/SAP/ui5-webcomponents/issues/7446)) ([dfc18f3](https://github.com/SAP/ui5-webcomponents/commit/dfc18f375d45183b36be13c14d98f5fc5683fb84))
+* **ui5-slider:** enhance storybook samples ([#7460](https://github.com/SAP/ui5-webcomponents/issues/7460)) ([f942c9e](https://github.com/SAP/ui5-webcomponents/commit/f942c9eab70d9129624e306bb8a255b221f8db4c))
+* **ui5-toast:** enhance storybook samples ([#7451](https://github.com/SAP/ui5-webcomponents/issues/7451)) ([9298747](https://github.com/SAP/ui5-webcomponents/commit/92987476d2238f512bae871aa1b8559a31b0a450))
+* **ui5-wizard:** enhance storybook samples ([#7445](https://github.com/SAP/ui5-webcomponents/issues/7445)) ([62603b3](https://github.com/SAP/ui5-webcomponents/commit/62603b3e46061e1ccf761d58af5409aaad9f2a7c))
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 
diff --git a/lerna.json b/lerna.json
index 833ab9fe9cb6..ec1fc7a2d887 100644
--- a/lerna.json
+++ b/lerna.json
@@ -12,7 +12,7 @@
     "packages/playground",
     "packages/create-package"
   ],
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "command": {
     "publish": {
       "allowBranch": "*",
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
index bf3de5afa7be..751f042985af 100644
--- a/packages/base/CHANGELOG.md
+++ b/packages/base/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 
diff --git a/packages/base/package.json b/packages/base/package.json
index 474c67dfacba..bfb0b0846854 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.116.0",
-    "@ui5/webcomponents-tools": "1.17.0-rc.1",
+    "@ui5/webcomponents-tools": "1.17.0-rc.2",
     "chromedriver": "114.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md
index 17d8ab8d50f6..5e00b7b46269 100644
--- a/packages/create-package/CHANGELOG.md
+++ b/packages/create-package/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package
diff --git a/packages/create-package/package.json b/packages/create-package/package.json
index d631b64c30ee..9c1e2163bd2b 100644
--- a/packages/create-package/package.json
+++ b/packages/create-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md
index 4252ba690df1..0bd090fd18d2 100644
--- a/packages/fiori/CHANGELOG.md
+++ b/packages/fiori/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+
+### Bug Fixes
+
+* **ui5-page:** enhance storybook samples ([#7448](https://github.com/SAP/ui5-webcomponents/issues/7448)) ([d0b8b01](https://github.com/SAP/ui5-webcomponents/commit/d0b8b01c053853915646b077860a247400cff691))
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-fiori
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index a14bb7fb97af..90e6c86fe97f 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -41,14 +41,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.17.0-rc.1",
-    "@ui5/webcomponents-base": "1.17.0-rc.1",
-    "@ui5/webcomponents-icons": "1.17.0-rc.1",
-    "@ui5/webcomponents-theming": "1.17.0-rc.1",
+    "@ui5/webcomponents": "1.17.0-rc.2",
+    "@ui5/webcomponents-base": "1.17.0-rc.2",
+    "@ui5/webcomponents-icons": "1.17.0-rc.2",
+    "@ui5/webcomponents-theming": "1.17.0-rc.2",
     "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1",
+    "@ui5/webcomponents-tools": "1.17.0-rc.2",
     "chromedriver": "114.0.0"
   }
 }
diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md
index c00a515be3cc..57ab68caabdb 100644
--- a/packages/icons-business-suite/CHANGELOG.md
+++ b/packages/icons-business-suite/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json
index 3649daf6621d..1f93bc33f8ee 100644
--- a/packages/icons-business-suite/package.json
+++ b/packages/icons-business-suite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-business-suite",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons-business-suite"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1"
+    "@ui5/webcomponents-tools": "1.17.0-rc.2"
   }
 }
diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md
index beccb8d0f153..6e0867ed2336 100644
--- a/packages/icons-tnt/CHANGELOG.md
+++ b/packages/icons-tnt/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-tnt
diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json
index 53f2dae847ba..6916a4f1d820 100644
--- a/packages/icons-tnt/package.json
+++ b/packages/icons-tnt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-tnt",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons-tnt"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1"
+    "@ui5/webcomponents-tools": "1.17.0-rc.2"
   }
 }
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index be0e02e742f5..6d20de064306 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+
+### Bug Fixes
+
+* **icons:** fix "employee-approvals" icon cutt-off ([#7461](https://github.com/SAP/ui5-webcomponents/issues/7461)) ([40eb99c](https://github.com/SAP/ui5-webcomponents/commit/40eb99c76c93229d43c79797dee970fa53e7c8ad)), closes [#7410](https://github.com/SAP/ui5-webcomponents/issues/7410)
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0dca8e219b78..e8b66e391ec8 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.SAP-icons",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "directory": "packages/icons"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1"
+    "@ui5/webcomponents-tools": "1.17.0-rc.2"
   }
 }
diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md
index 8e6aea18a643..4023dbfa4e3c 100644
--- a/packages/localization/CHANGELOG.md
+++ b/packages/localization/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-localization
diff --git a/packages/localization/package.json b/packages/localization/package.json
index b717908527a9..7c03d30c82f4 100644
--- a/packages/localization/package.json
+++ b/packages/localization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-localization",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "Localization for UI5 Web Components",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@openui5/sap.ui.core": "1.116.0",
-    "@ui5/webcomponents-tools": "1.17.0-rc.1",
+    "@ui5/webcomponents-tools": "1.17.0-rc.2",
     "chromedriver": "114.0.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },
   "dependencies": {
     "@types/openui5": "^1.113.0",
-    "@ui5/webcomponents-base": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2"
   }
 }
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
index 8508b6a34898..955c32e93c40 100644
--- a/packages/main/CHANGELOG.md
+++ b/packages/main/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+
+### Bug Fixes
+
+* **ui5-input:** apply correct button's box-shadow on hover ([#7439](https://github.com/SAP/ui5-webcomponents/issues/7439)) ([b77db6b](https://github.com/SAP/ui5-webcomponents/commit/b77db6b04579cfa479fe0802406da691edca0b04))
+* **ui5-message-strip:** enhance storybook samples ([#7464](https://github.com/SAP/ui5-webcomponents/issues/7464)) ([0283e28](https://github.com/SAP/ui5-webcomponents/commit/0283e28b8993a37b98fc0acfb2e15d6fc6bc77f8))
+* **ui5-multi-combobox:** adjust storybook sample ([#7441](https://github.com/SAP/ui5-webcomponents/issues/7441)) ([52562ec](https://github.com/SAP/ui5-webcomponents/commit/52562ecb5f6c91a447210827c0ff27c9f726cf9b))
+* **ui5-toast:** enhance storybook samples ([#7451](https://github.com/SAP/ui5-webcomponents/issues/7451)) ([9298747](https://github.com/SAP/ui5-webcomponents/commit/92987476d2238f512bae871aa1b8559a31b0a450))
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 
diff --git a/packages/main/package.json b/packages/main/package.json
index ada54888507c..b5b6da951073 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -43,13 +43,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.17.0-rc.1",
-    "@ui5/webcomponents-icons": "1.17.0-rc.1",
-    "@ui5/webcomponents-localization": "1.17.0-rc.1",
-    "@ui5/webcomponents-theming": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2",
+    "@ui5/webcomponents-icons": "1.17.0-rc.2",
+    "@ui5/webcomponents-localization": "1.17.0-rc.2",
+    "@ui5/webcomponents-theming": "1.17.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1",
+    "@ui5/webcomponents-tools": "1.17.0-rc.2",
     "chromedriver": "114.0.0"
   }
 }
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
index ce4b1d94e7a4..ca9991e47ba6 100644
--- a/packages/playground/CHANGELOG.md
+++ b/packages/playground/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+
+### Bug Fixes
+
+* **ui5-message-strip:** enhance storybook samples ([#7464](https://github.com/SAP/ui5-webcomponents/issues/7464)) ([0283e28](https://github.com/SAP/ui5-webcomponents/commit/0283e28b8993a37b98fc0acfb2e15d6fc6bc77f8))
+* **ui5-multi-combobox:** adjust storybook sample ([#7441](https://github.com/SAP/ui5-webcomponents/issues/7441)) ([52562ec](https://github.com/SAP/ui5-webcomponents/commit/52562ecb5f6c91a447210827c0ff27c9f726cf9b))
+* **ui5-page:** enhance storybook samples ([#7448](https://github.com/SAP/ui5-webcomponents/issues/7448)) ([d0b8b01](https://github.com/SAP/ui5-webcomponents/commit/d0b8b01c053853915646b077860a247400cff691))
+* **ui5-panel:** enhance storybook samples ([#7403](https://github.com/SAP/ui5-webcomponents/issues/7403)) ([52be839](https://github.com/SAP/ui5-webcomponents/commit/52be839e70e1cb94b86e177ea3a1efc66fd7a981))
+* **ui5-rating-indicator:** enhance storybook samples ([#7446](https://github.com/SAP/ui5-webcomponents/issues/7446)) ([dfc18f3](https://github.com/SAP/ui5-webcomponents/commit/dfc18f375d45183b36be13c14d98f5fc5683fb84))
+* **ui5-slider:** enhance storybook samples ([#7460](https://github.com/SAP/ui5-webcomponents/issues/7460)) ([f942c9e](https://github.com/SAP/ui5-webcomponents/commit/f942c9eab70d9129624e306bb8a255b221f8db4c))
+* **ui5-toast:** enhance storybook samples ([#7451](https://github.com/SAP/ui5-webcomponents/issues/7451)) ([9298747](https://github.com/SAP/ui5-webcomponents/commit/92987476d2238f512bae871aa1b8559a31b0a450))
+* **ui5-wizard:** enhance storybook samples ([#7445](https://github.com/SAP/ui5-webcomponents/issues/7445)) ([62603b3](https://github.com/SAP/ui5-webcomponents/commit/62603b3e46061e1ccf761d58af5409aaad9f2a7c))
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 87e49de4c8be..5aec53a935b7 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ui5/webcomponents-playground",
   "private": true,
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components Playground",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md
index b15f63a27316..f94c534fd178 100644
--- a/packages/theming/CHANGELOG.md
+++ b/packages/theming/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 **Note:** Version bump only for package @ui5/webcomponents-theming
diff --git a/packages/theming/package.json b/packages/theming/package.json
index fd5971ab2027..b3af6c7c31de 100644
--- a/packages/theming/package.json
+++ b/packages/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-theming",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.theming",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@sap-theming/theming-base-content": "11.6.4",
-    "@ui5/webcomponents-base": "1.17.0-rc.1"
+    "@ui5/webcomponents-base": "1.17.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.17.0-rc.1",
+    "@ui5/webcomponents-tools": "1.17.0-rc.2",
     "cssnano": "^6.0.1",
     "globby": "^13.1.1",
     "json-beautify": "^1.1.1",
diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md
index a84aeaf25bd1..1f5cf5bed4a8 100644
--- a/packages/tools/CHANGELOG.md
+++ b/packages/tools/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
 
 
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 76d12b42b563..a39694d6e377 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

From 7a6039b79b4d716e5322671cb8fdb74b19664a99 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Fri, 25 Aug 2023 11:46:02 +0300
Subject: [PATCH 20/33] chore: upgrade to chromedriver 116 (#7476)

chore: upgrade to chromedrier 116
---
 packages/base/package.json         |  2 +-
 packages/fiori/package.json        |  2 +-
 packages/localization/package.json |  2 +-
 packages/main/package.json         |  2 +-
 yarn.lock                          | 22 +++++++++++-----------
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/base/package.json b/packages/base/package.json
index bfb0b0846854..8733fcb0d644 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -38,7 +38,7 @@
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0",
+    "chromedriver": "116.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index 90e6c86fe97f..1d9ced3b822e 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -49,6 +49,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0"
+    "chromedriver": "116.0.0"
   }
 }
diff --git a/packages/localization/package.json b/packages/localization/package.json
index 7c03d30c82f4..78fe21935153 100644
--- a/packages/localization/package.json
+++ b/packages/localization/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0",
+    "chromedriver": "116.0.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },
diff --git a/packages/main/package.json b/packages/main/package.json
index b5b6da951073..1a8143660549 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -50,6 +50,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0"
+    "chromedriver": "116.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index ffc76f466b12..a95137fb8c31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4603,7 +4603,7 @@ axe-core@4.2.3:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.3.tgz#2a3afc332f0031b42f602f4a3de03c211ca98f72"
   integrity sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==
 
-axios@^1.0.0, axios@^1.2.1:
+axios@^1.0.0, axios@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
   integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
@@ -5252,14 +5252,14 @@ chrome-launcher@^0.15.0:
     is-wsl "^2.2.0"
     lighthouse-logger "^1.0.0"
 
-chromedriver@114.0.0:
-  version "114.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-114.0.0.tgz#bcead893ca0064bb3353b6a8e0c2552b0b90a354"
-  integrity sha512-Yxx5diaOuQ0lvajAXABb+ikOiemZDlw3YfpDTFP2o1fbVSFue0AY0HdpqnFPRXxGEroGD0yPWz7MSyXcVEdnkA==
+chromedriver@116.0.0:
+  version "116.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-116.0.0.tgz#3f5d07b5427953270461791651d7b68cb6afe9fe"
+  integrity sha512-/TQaRn+RUAYnVqy5Vx8VtU8DvtWosU8QLM2u7BoNM5h55PRQPXF/onHAehEi8Sj/CehdKqH50NFdiumQAUr0DQ==
   dependencies:
     "@testim/chrome-version" "^1.1.3"
-    axios "^1.2.1"
-    compare-versions "^5.0.1"
+    axios "^1.4.0"
+    compare-versions "^6.0.0"
     extract-zip "^2.0.1"
     https-proxy-agent "^5.0.1"
     proxy-from-env "^1.1.0"
@@ -5500,10 +5500,10 @@ compare-func@^2.0.0:
     array-ify "^1.0.0"
     dot-prop "^5.1.0"
 
-compare-versions@^5.0.1:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.3.tgz#a9b34fea217472650ef4a2651d905f42c28ebfd7"
-  integrity sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==
+compare-versions@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a"
+  integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==
 
 compress-commons@^4.1.0:
   version "4.1.1"

From 174f4b462de254fd3eaab41a06d26c016c360d5d Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Fri, 25 Aug 2023 12:15:26 +0300
Subject: [PATCH 21/33] fix(framework): fix OpenUI5Support usage in applyTheme
 (#7485)

OpenUI5Support should have been imported as a type, not importing the feature itself. Importing the feature is done by the consumers, when they need better OpenUI5 integration.
---
 packages/base/src/theming/applyTheme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/base/src/theming/applyTheme.ts b/packages/base/src/theming/applyTheme.ts
index e42f398a3fb6..6e4688d6efb9 100644
--- a/packages/base/src/theming/applyTheme.ts
+++ b/packages/base/src/theming/applyTheme.ts
@@ -4,7 +4,7 @@ import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
-import OpenUI5Support from "../features/OpenUI5Support.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { getCurrentRuntimeIndex } from "../Runtimes.js";
 
@@ -56,7 +56,7 @@ const detectExternalTheme = async (theme: string) => {
 
 	// If OpenUI5Support is enabled, try to find out if it loaded variables
 	const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
-	if (openUI5Support && OpenUI5Support.isOpenUI5Detected()) {
+	if (openUI5Support && openUI5Support.isOpenUI5Detected()) {
 		const varsLoaded = openUI5Support.cssVariablesLoaded();
 		if (varsLoaded) {
 			return {

From 2f329fe2d237d24f05ed140658e39752d6d9d8ae Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova-bogdanova@sap.com>
Date: Fri, 25 Aug 2023 12:48:23 +0300
Subject: [PATCH 22/33] feat(ui5-toolbar): web component introduced (#7024)

---
 packages/main/bundle.common.js                |   5 +
 packages/main/src/Interfaces.ts               |  20 +
 packages/main/src/Toolbar.hbs                 |  20 +
 packages/main/src/Toolbar.ts                  | 593 ++++++++++++++++++
 packages/main/src/ToolbarButton.hbs           |  19 +
 packages/main/src/ToolbarButton.ts            | 226 +++++++
 packages/main/src/ToolbarItem.ts              | 140 +++++
 packages/main/src/ToolbarPopover.hbs          |  14 +
 packages/main/src/ToolbarPopoverButton.hbs    |  16 +
 packages/main/src/ToolbarPopoverSelect.hbs    |  12 +
 packages/main/src/ToolbarRegistry.ts          |  37 ++
 packages/main/src/ToolbarSelect.hbs           |  12 +
 packages/main/src/ToolbarSelect.ts            | 208 ++++++
 packages/main/src/ToolbarSelectOption.ts      |  51 ++
 packages/main/src/ToolbarSeparator.hbs        |   4 +
 packages/main/src/ToolbarSeparator.ts         |  50 ++
 packages/main/src/ToolbarSpacer.hbs           |   6 +
 packages/main/src/ToolbarSpacer.ts            |  66 ++
 .../main/src/i18n/messagebundle.properties    |   3 +
 packages/main/src/themes/Button.css           |   2 +-
 packages/main/src/themes/Toolbar.css          |  65 ++
 .../main/src/themes/ToolbarButtonPopover.css  |   3 +
 packages/main/src/themes/ToolbarPopover.css   |  12 +
 .../src/themes/base/Toolbar-parameters.css    |   7 +
 .../main/src/themes/base/sizes-parameters.css |   8 +
 .../themes/sap_belize/parameters-bundle.css   |   1 +
 .../sap_belize_hcb/parameters-bundle.css      |   1 +
 .../sap_belize_hcw/parameters-bundle.css      |   1 +
 .../themes/sap_fiori_3/parameters-bundle.css  |   1 +
 .../sap_fiori_3_dark/parameters-bundle.css    |   1 +
 .../sap_fiori_3_hcb/parameters-bundle.css     |   1 +
 .../sap_fiori_3_hcw/parameters-bundle.css     |   1 +
 .../sap_horizon/TableGroupRow-parameters.css  |   1 +
 .../themes/sap_horizon/parameters-bundle.css  |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 .../TableGroupRow-parameters.css              |   1 +
 packages/main/src/types/ToolbarAlign.ts       |  27 +
 .../src/types/ToolbarItemOverflowBehavior.ts  |  34 +
 packages/main/test/pages/Toolbar.html         | 256 ++++++++
 packages/main/test/pages/ToolbarButton.html   |  47 ++
 packages/main/test/pages/ToolbarSelect.html   |  64 ++
 packages/main/test/pages/styles/Toolbar.css   |  73 +++
 packages/main/test/specs/Toolbar.spec.js      |  54 ++
 .../main/test/specs/ToolbarButton.spec.js     |  97 +++
 .../main/test/specs/ToolbarSelect.spec.js     |  77 +++
 .../_stories/main/Toolbar/Toolbar.stories.ts  | 125 ++++
 packages/theming/css-vars-usage.json          |   1 +
 52 files changed, 2469 insertions(+), 1 deletion(-)
 create mode 100644 packages/main/src/Toolbar.hbs
 create mode 100644 packages/main/src/Toolbar.ts
 create mode 100644 packages/main/src/ToolbarButton.hbs
 create mode 100644 packages/main/src/ToolbarButton.ts
 create mode 100644 packages/main/src/ToolbarItem.ts
 create mode 100644 packages/main/src/ToolbarPopover.hbs
 create mode 100644 packages/main/src/ToolbarPopoverButton.hbs
 create mode 100644 packages/main/src/ToolbarPopoverSelect.hbs
 create mode 100644 packages/main/src/ToolbarRegistry.ts
 create mode 100644 packages/main/src/ToolbarSelect.hbs
 create mode 100644 packages/main/src/ToolbarSelect.ts
 create mode 100644 packages/main/src/ToolbarSelectOption.ts
 create mode 100644 packages/main/src/ToolbarSeparator.hbs
 create mode 100644 packages/main/src/ToolbarSeparator.ts
 create mode 100644 packages/main/src/ToolbarSpacer.hbs
 create mode 100644 packages/main/src/ToolbarSpacer.ts
 create mode 100644 packages/main/src/themes/Toolbar.css
 create mode 100644 packages/main/src/themes/ToolbarButtonPopover.css
 create mode 100644 packages/main/src/themes/ToolbarPopover.css
 create mode 100644 packages/main/src/themes/base/Toolbar-parameters.css
 create mode 100644 packages/main/src/types/ToolbarAlign.ts
 create mode 100644 packages/main/src/types/ToolbarItemOverflowBehavior.ts
 create mode 100644 packages/main/test/pages/Toolbar.html
 create mode 100644 packages/main/test/pages/ToolbarButton.html
 create mode 100644 packages/main/test/pages/ToolbarSelect.html
 create mode 100644 packages/main/test/pages/styles/Toolbar.css
 create mode 100644 packages/main/test/specs/Toolbar.spec.js
 create mode 100644 packages/main/test/specs/ToolbarButton.spec.js
 create mode 100644 packages/main/test/specs/ToolbarSelect.spec.js
 create mode 100644 packages/playground/_stories/main/Toolbar/Toolbar.stories.ts

diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js
index 2dea95e78e52..80f2b4e1b78b 100644
--- a/packages/main/bundle.common.js
+++ b/packages/main/bundle.common.js
@@ -85,6 +85,11 @@ import TimeSelectionClocks from "./dist/TimeSelectionClocks.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";
+import Toolbar from "./dist/Toolbar.js";
+import ToolbarButton from "./dist/ToolbarButton.js";
+import ToolbarSeparator from "./dist/ToolbarSeparator.js";
+import ToolbarSpacer from "./dist/ToolbarSpacer.js";
+import ToolbarSelect from "./dist/ToolbarSelect.js";
 import Tree from "./dist/Tree.js";
 import TreeList from "./dist/TreeList.js";
 import TreeItem from "./dist/TreeItem.js";
diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts
index b296ae536ffd..5cb6851aa478 100644
--- a/packages/main/src/Interfaces.ts
+++ b/packages/main/src/Interfaces.ts
@@ -187,6 +187,24 @@ const IToken = "sap.ui.webc.main.IToken";
  */
 const ITreeItem = "sap.ui.webc.main.ITreeItem";
 
+/**
+ * Interface for toolbar items for the purpose of <code>ui5-toolbar</code>
+ *
+ * @name sap.ui.webc.main.IToolbarItem
+ * @interface
+ * @public
+ */
+const IToolbarItem = "sap.ui.webc.main.IToolbarItem";
+
+/**
+ * Interface for toolbar select items for the purpose of <code>ui5-toolbar-select</code>
+ *
+ * @name sap.ui.webc.main.IToolbarSelectOption
+ * @interface
+ * @public
+ */
+const IToolbarSelectOption = "sap.ui.webc.main.IToolbarSelectOption";
+
 export {
 	IAvatar,
 	IBreadcrumbsItem,
@@ -209,4 +227,6 @@ export {
 	ITableRow,
 	IToken,
 	ITreeItem,
+	IToolbarItem,
+	IToolbarSelectOption,
 };
diff --git a/packages/main/src/Toolbar.hbs b/packages/main/src/Toolbar.hbs
new file mode 100644
index 000000000000..396b46538e35
--- /dev/null
+++ b/packages/main/src/Toolbar.hbs
@@ -0,0 +1,20 @@
+
+<div 
+	class="{{classes.items}}" 
+	role="{{accInfo.root.role}}"
+	aria-label="{{accInfo.root.accessibleName}}"
+>
+	{{#each standardItems}}
+		{{this.toolbarTemplate}}
+	{{/each}}
+
+	<ui5-button
+		aria-hidden="{{hideOverflowButton}}"
+		icon="overflow"
+		design="Transparent"
+		class="{{classes.overflowButton}}"
+		tooltip="{{accInfo.overflowButton.tooltip}}"
+		accessible-name="{{accInfo.overflowButton.accessibleName}}"
+		.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
+	></ui5-button>
+</div>
\ No newline at end of file
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
new file mode 100644
index 000000000000..2d5cf5703123
--- /dev/null
+++ b/packages/main/src/Toolbar.ts
@@ -0,0 +1,593 @@
+import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+
+import {
+	TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+import ToolbarTemplate from "./generated/templates/ToolbarTemplate.lit.js";
+import ToolbarCss from "./generated/themes/Toolbar.css.js";
+
+import ToolbarPopoverTemplate from "./generated/templates/ToolbarPopoverTemplate.lit.js";
+import ToolbarPopoverCss from "./generated/themes/ToolbarPopover.css.js";
+
+import ToolbarAlign from "./types/ToolbarAlign.js";
+import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import HasPopup from "./types/HasPopup.js";
+
+import type { ToolbarItem } from "./ToolbarItem.js";
+import {
+	getRegisteredToolbarItem,
+	getRegisteredStyles,
+	getRegisteredStaticAreaStyles,
+	getRegisteredDependencies,
+} from "./ToolbarRegistry.js";
+
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+
+function calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {
+	return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
+}
+
+function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): number {
+	return Number(styleSet.getPropertyValue(propertyName).replace("px", ""));
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-toolbar</code> component is used to create a horizontal layout with items.
+ * The items can be overflowing in a popover, when the space is not enough to show all of them.
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-toolbar</code> provides advanced keyboard handling.
+ * <br>
+ * <ul>
+ * <li>The control is not interactive, but can contain of interactive elements </li>
+ * <li>[TAB] - iterates through elements</li>
+ * </ul>
+ * <br>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/Toolbar";</code>
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Toolbar
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar
+ * @public
+ * @since 1.17.0
+ */
+@customElement({
+	tag: "ui5-toolbar",
+	languageAware: true,
+	renderer: litRender,
+	template: ToolbarTemplate,
+	staticAreaTemplate: ToolbarPopoverTemplate,
+})
+
+class Toolbar extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	/**
+	 * Indicated the direction in which the Toolbar items will be aligned.
+	 * Available options are:
+	 * <ul>
+	 * <li><code>End</code></li>
+	 * <li><code>Start</code></li>
+	 * </ul>
+	 * @type {sap.ui.webc.main.types.ToolbarAlign}
+	 * @public
+	 * @defaultvalue: "End"
+	 * @name sap.ui.webc.main.Toolbar.prototype.alignContent
+	 */
+	@property({ type: ToolbarAlign, defaultValue: ToolbarAlign.End })
+	alignContent!: `${ToolbarAlign}`;
+
+	/**
+	 * Calculated width of the whole toolbar.
+	 * @private
+	 * @name sap.ui.webc.main.Toolbar.prototype.width
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @defaultvalue false
+	 */
+	@property({ type: Integer })
+	width?: number;
+
+	/**
+	 * Calculated width of the toolbar content.
+	 * @private
+	 * @name sap.ui.webc.main.Toolbar.prototype.contentWidth
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @defaultvalue 0
+	 */
+	@property({ type: Integer })
+	contentWidth?: number;
+
+	/**
+	 * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on "Top" position.
+	 * @private
+	 * @type {Boolean}
+	 */
+	@property({ type: Boolean })
+	reverseOverflow!: boolean;
+
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Toolbar.prototype.accessibleName
+	 * @defaultvalue: ""
+	 * @public
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the input.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Toolbar.prototype.accessibleNameRef
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property({ defaultValue: "" })
+	accessibleNameRef!: string;
+
+	/**
+	* Slotted Toolbar items
+	* @type {sap.ui.webc.main.IToolbarItem[]}
+	* @name sap.ui.webc.main.Toolbar.prototype.items
+	* @slot items
+	* @public
+	*/
+	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+	items!: Array<ToolbarItem>
+
+	_onResize!: ResizeObserverCallback;
+	_onInteract!: EventListener;
+	itemsToOverflow: Array<ToolbarItem> = [];
+	itemsWidth = 0;
+	popoverOpen = false;
+	itemsWidthMeasured = false;
+
+	ITEMS_WIDTH_MAP: Map<string, number> = new Map();
+
+	static get styles() {
+		const styles = getRegisteredStyles();
+		return [
+			ToolbarCss,
+			...styles,
+		];
+	}
+
+	static get staticAreaStyles() {
+		const styles = getRegisteredStaticAreaStyles();
+		return [
+			ToolbarPopoverCss,
+			...styles,
+		];
+	}
+
+	static get dependencies() {
+		const deps = getRegisteredDependencies();
+		return [
+			Popover,
+			Button,
+			...deps,
+		];
+	}
+
+	static async onDefine() {
+		Toolbar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+
+		this._onResize = this.onResize.bind(this);
+		this._onInteract = (e: Event) => this.onInteract(e as CustomEvent);
+	}
+
+	/**
+	 * Read-only members
+	 */
+
+	get overflowButtonSize(): number {
+		return this.overflowButtonDOM?.getBoundingClientRect().width || 0;
+	}
+
+	get padding(): number {
+		const toolbarComputedStyle = getComputedStyle(this.getDomRef()!);
+		return calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-left"))
+			+ calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-right"));
+	}
+
+	get subscribedEvents() {
+		return this.items
+			.map((item: ToolbarItem) => Array.from(item.subscribedEvents.keys()))
+			.flat()
+			// remove duplicates
+			.filter((value, index, self) => self.indexOf(value) === index);
+	}
+
+	get alwaysOverflowItems() {
+		return this.items.filter((item: ToolbarItem) => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
+	}
+
+	get movableItems() {
+		return this.items.filter((item: ToolbarItem) => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
+	}
+
+	get overflowItems() {
+		// spacers and separators are ignored
+		const overflowItems = this.getItemsInfo(this.itemsToOverflow.filter(item => !item.ignoreSpace));
+		return this.reverseOverflow ? overflowItems.reverse() : overflowItems;
+	}
+
+	get standardItems() {
+		return this.getItemsInfo(this.items.filter(item => this.itemsToOverflow.indexOf(item) === -1));
+	}
+
+	get hideOverflowButton() {
+		return this.overflowItems.length === 0;
+	}
+
+	get classes() {
+		return {
+			items: {
+				"ui5-tb-items": true,
+				"ui5-tb-items-full-width": this.hasFlexibleSpacers,
+			},
+			overflow: {
+				"ui5-overflow-list--alignleft": this.hasItemWithText,
+			},
+			overflowButton: {
+				"ui5-tb-item": true,
+				"ui5-tb-overflow-btn": true,
+				"ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+			},
+		};
+	}
+
+	get interactiveItemsCount() {
+		return this.items.filter((item: ToolbarItem) => item.isInteractive).length;
+	}
+
+	/**
+	 * Accessibility
+	 */
+
+	get hasAriaSemantics() {
+		return this.interactiveItemsCount > 1;
+	}
+
+	get accessibleRole() {
+		return this.hasAriaSemantics ? "toolbar" : undefined;
+	}
+
+	get ariaLabelText() {
+		return this.hasAriaSemantics ? getEffectiveAriaLabelText(this) : undefined;
+	}
+
+	get accInfo() {
+		return {
+			root: {
+				role: this.accessibleRole,
+				accessibleName: this.ariaLabelText,
+			},
+			overflowButton: {
+				accessibleName: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
+				tooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
+				accessibilityAttributes: {
+					expanded: this.overflowButtonDOM?.accessibilityAttributes.expanded,
+					hasPopup: HasPopup.Menu,
+				},
+			},
+		};
+	}
+
+	/**
+	 * Toolbar Overflow Popover
+	 */
+
+	get overflowButtonDOM(): Button | null {
+		return this.shadowRoot!.querySelector(".ui5-tb-overflow-btn");
+	}
+
+	get itemsDOM() {
+		return this.shadowRoot!.querySelector(".ui5-tb-items");
+	}
+
+	get hasItemWithText(): boolean {
+		return this.itemsToOverflow.some((item: ToolbarItem) => item.containsText);
+	}
+
+	get hasFlexibleSpacers() {
+		return this.items.some((item: ToolbarItem) => item.hasFlexibleWidth);
+	}
+
+	/**
+	 * Lifecycle methods
+	 */
+	onEnterDOM() {
+		ResizeHandler.register(this, this._onResize);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._onResize);
+	}
+
+	onInvalidation(changeInfo: ChangeInfo) {
+		if (changeInfo.reason === "childchange" && changeInfo.child === this.itemsToOverflow[0]) {
+			this.onToolbarItemChange();
+		}
+	}
+
+	onBeforeRendering() {
+		this.detachListeners();
+		this.attachListeners();
+	}
+
+	async onAfterRendering() {
+		await renderFinished();
+
+		this.storeItemsWidth();
+		this.processOverflowLayout();
+	}
+
+	/**
+	 * Returns if the overflow popup is open.
+	 *
+	 * @public
+	 * @return { Promise<Boolean> }
+	 */
+	async isOverflowOpen(): Promise<boolean> {
+		const overflowPopover = await this.getOverflowPopover();
+		return overflowPopover!.isOpen();
+	}
+
+	async openOverflow(): Promise<void> {
+		const overflowPopover = await this.getOverflowPopover();
+		overflowPopover!.showAt(this.overflowButtonDOM!);
+		this.reverseOverflow = overflowPopover!.actualPlacementType === "Top";
+	}
+
+	async closeOverflow() {
+		const overflowPopover = await this.getOverflowPopover();
+		overflowPopover!.close();
+	}
+
+	toggleOverflow() {
+		if (this.popoverOpen) {
+			this.closeOverflow();
+		} else {
+			this.openOverflow();
+		}
+	}
+
+	async getOverflowPopover(): Promise<Popover | null> {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem!.querySelector<Popover>(".ui5-overflow-popover");
+	}
+
+	/**
+	 * Layout management
+	 */
+
+	processOverflowLayout() {
+		const containerWidth = this.offsetWidth - this.padding;
+		const contentWidth = this.itemsWidth;
+		const overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
+
+		// skip calculation if the width has not been changed or if the items width has not been changed
+		if (this.width === containerWidth && this.contentWidth === contentWidth) {
+			return;
+		}
+
+		this.distributeItems(overflowSpace);
+		this.width = containerWidth;
+		this.contentWidth = contentWidth;
+	}
+
+	storeItemsWidth() {
+		let totalWidth = 0;
+
+		this.items.forEach((item: ToolbarItem) => {
+			const itemWidth = this.getItemWidth(item);
+			totalWidth += itemWidth;
+			this.ITEMS_WIDTH_MAP.set(item._id, itemWidth);
+		});
+
+		this.itemsWidth = totalWidth;
+	}
+
+	distributeItems(overflowSpace = 0) {
+		const movableItems = this.movableItems.reverse();
+		let index = 0;
+		let currentItem = movableItems[index];
+
+		this.itemsToOverflow = [];
+
+		// distribute items that always overflow
+		this.distributeItemsThatAlwaysOverflow();
+
+		while (overflowSpace > 0 && currentItem) {
+			this.itemsToOverflow.unshift(currentItem);
+			overflowSpace -= this.getCachedItemWidth(currentItem?._id) || 0;
+			index++;
+			currentItem = movableItems[index];
+		}
+
+		// If the last bar item is a spacer, force it to the overflow even if there is enough space for it
+		if (index < movableItems.length) {
+			let lastItem = movableItems[index];
+			while (lastItem?.ignoreSpace) {
+				this.itemsToOverflow.unshift(lastItem);
+				index++;
+				lastItem = movableItems[index];
+			}
+		}
+	}
+
+	distributeItemsThatAlwaysOverflow() {
+		this.alwaysOverflowItems.forEach((item: ToolbarItem) => {
+			this.itemsToOverflow.push(item);
+		});
+	}
+
+	/**
+	 * Event Handlers
+	 */
+
+	onOverflowPopoverClosed() {
+		this.popoverOpen = false;
+		if (this.overflowButtonDOM) {
+			this.overflowButtonDOM.accessibilityAttributes.expanded = "false";
+		}
+	}
+
+	onOverflowPopoverOpened() {
+		this.popoverOpen = true;
+		if (this.overflowButtonDOM) {
+			this.overflowButtonDOM.accessibilityAttributes.expanded = "true";
+		}
+	}
+
+	onResize() {
+		if (!this.itemsWidth) {
+			return;
+		}
+
+		this.closeOverflow();
+		this.processOverflowLayout();
+	}
+
+	onInteract(e: CustomEvent) {
+		const target = e.target as HTMLElement;
+		const item = target.closest<ToolbarItem>(".ui5-tb-item") || target.closest<ToolbarItem>(".ui5-tb-popover-item");
+		const eventType: string = e.type;
+
+		if (target === this.overflowButtonDOM) {
+			this.toggleOverflow();
+			return;
+		}
+
+		if (!item) {
+			return;
+		}
+
+		const refItemId = target.getAttribute("data-ui5-external-action-item-id");
+
+		if (refItemId) {
+			const abstractItem = this.getItemByID(refItemId);
+			const prevented = !abstractItem?.fireEvent(eventType, e.detail, true);
+			const eventOptions = abstractItem?.subscribedEvents.get(eventType);
+
+			if (prevented || abstractItem?.preventOverflowClosing || eventOptions?.preventClosing) {
+				return;
+			}
+
+			this.closeOverflow();
+		}
+	}
+
+	/**
+	 * Private members
+	 */
+
+	async attachListeners() {
+		const popover = await this.getOverflowPopover();
+
+		this.subscribedEvents.forEach((e: string) => {
+			this.itemsDOM?.addEventListener(e, this._onInteract);
+			popover?.addEventListener(e, this._onInteract);
+		});
+	}
+
+	async detachListeners() {
+		const popover = await this.getOverflowPopover();
+
+		this.subscribedEvents.forEach((e: string) => {
+			this.itemsDOM?.removeEventListener(e, this._onInteract);
+			popover?.removeEventListener(e, this._onInteract);
+		});
+	}
+
+	onToolbarItemChange() {
+		// some items were updated reset the cache and trigger a re-render
+		this.itemsToOverflow = [];
+		this.contentWidth = 0; // re-render
+	}
+
+	getItemsInfo(items: Array<ToolbarItem>) {
+		return items.map((item: ToolbarItem) => {
+			const ElementClass = getRegisteredToolbarItem(item.constructor.name);
+
+			if (!ElementClass) {
+				return null;
+			}
+
+			const toolbarItem = {
+				toolbarTemplate: executeTemplate(ElementClass.toolbarTemplate, item),
+				toolbarPopoverTemplate: executeTemplate(ElementClass.toolbarPopoverTemplate, item),
+			};
+
+			return toolbarItem;
+		});
+	}
+
+	getItemWidth(item: ToolbarItem): number {
+		// Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally
+		if (item.ignoreSpace) {
+			return 0;
+		}
+		const id: string = item._id;
+		// Measure rendered width for spacers with width, and for normal items
+		const renderedItem = this.getRegisteredToolbarItemByID(id);
+
+		let itemWidth = 0;
+
+		if (renderedItem) {
+			const ItemCSSStyleSet = getComputedStyle(renderedItem);
+			itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end")
+				+ parsePxValue(ItemCSSStyleSet, "margin-inline-start");
+		} else {
+			itemWidth = this.getCachedItemWidth(id) || 0;
+		}
+
+		return Math.ceil(itemWidth);
+	}
+
+	getCachedItemWidth(id: string) {
+		return this.ITEMS_WIDTH_MAP.get(id);
+	}
+
+	getItemByID(id: string) {
+		return this.items.find(item => item._id === id);
+	}
+
+	getRegisteredToolbarItemByID(id: string): HTMLElement | null {
+		return this.itemsDOM!.querySelector(`[data-ui5-external-action-item-id="${id}"]`);
+	}
+}
+
+Toolbar.define();
+
+export default Toolbar;
diff --git a/packages/main/src/ToolbarButton.hbs b/packages/main/src/ToolbarButton.hbs
new file mode 100644
index 000000000000..a9f596fe4718
--- /dev/null
+++ b/packages/main/src/ToolbarButton.hbs
@@ -0,0 +1,19 @@
+<ui5-button
+	class="ui5-tb-button ui5-tb-item"
+	id="{{this.id}}"
+	style="{{this.styles}}"
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	tooltip="{{this.tooltip}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	.refItemId="{{this._id}}"
+>
+		{{this.text}}
+</ui5-button>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
new file mode 100644
index 000000000000..54d7f1f5634e
--- /dev/null
+++ b/packages/main/src/ToolbarButton.ts
@@ -0,0 +1,226 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+
+import ToolbarItem, { IEventOptions } from "./ToolbarItem.js";
+import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
+import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
+
+import ToolbarButtonPopoverCss from "./generated/themes/ToolbarButtonPopover.css.js";
+
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+
+/**
+ * @class
+ * The <code>ui5-toolbar-button</code> represents an abstract action,
+ * used in the <code>ui5-toolbar</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarButton
+ * @extends sap.ui.webc.main.ToolbarItem
+ * @since 1.17.0
+ * @public
+ */
+
+@customElement({
+	tag: "ui5-toolbar-button",
+	dependencies: [Button],
+})
+
+/**
+ * Fired when the component is activated either with a
+ * mouse/tap or by using the Enter or Space key.
+ * <br><br>
+ * <b>Note:</b> The event will not be fired if the <code>disabled</code>
+ * property is set to <code>true</code>.
+ *
+ * @event sap.ui.webc.main.ToolbarButton#click
+ * @public
+ * @native
+ */
+@event("click")
+
+class ToolbarButton extends ToolbarItem {
+	/**
+	 * Defines if the action is disabled.
+	 * <br><br>
+	 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
+	 *
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.disabled
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Defines the action design.
+	 * <b>The available values are:</b>
+	 *
+	 * <ul>
+	 * <li><code>Default</code></li>
+	 * <li><code>Emphasized</code></li>
+	 * <li><code>Positive</code></li>
+	 * <li><code>Negative</code></li>
+	 * <li><code>Transparent</code></li>
+	 * <li><code>Attention</code></li>
+	 * </ul>
+	 *
+	 * @type {ButtonDesign}
+	 * @defaultvalue "Default"
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.design
+	 * @public
+	 */
+	@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
+	design!: `${ButtonDesign}`;
+
+	/**
+	 * 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
+	 * <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}
+	 * @defaultvalue ""
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.icon
+	 * @public
+	 */
+	@property({ type: String })
+	icon!: string;
+
+	/**
+	 * Defines whether the icon should be displayed after the component text.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.iconEnd
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	iconEnd!: boolean;
+
+	/**
+	 * Defines the tooltip of the component.
+	 * <br>
+	 * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+	 * @type {string}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.tooltip
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	tooltip!: string;
+
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleName
+	 * @defaultvalue undefined
+	 * @public
+	 */
+	@property({ defaultValue: undefined })
+	accessibleName?: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleNameRef
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property({ defaultValue: "" })
+	accessibleNameRef!: string;
+
+	/**
+	 * An object of strings that defines several additional accessibility attribute values
+	 * for customization depending on the use case.
+	 *
+	 * It supports the following fields:
+	 *
+	 * <ul>
+	 * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+	 *			<ul>
+	 *				<li><code>true</code></li>
+	 *				<li><code>false</code></li>
+	 *			</ul>
+	 * 		</li>
+	 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
+	 * 			<ul>
+	 *				<li><code>Dialog</code></li>
+	 *				<li><code>Grid</code></li>
+	 *				<li><code>ListBox</code></li>
+	 *				<li><code>Menu</code></li>
+	 *				<li><code>Tree</code></li>
+	 * 			</ul>
+	 * 		</li>
+	 * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
+	 * </ul>
+	 * @type {object}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibilityAttributes
+	 * @public
+	 */
+	@property({ type: Object })
+	accessibilityAttributes!: { expanded: "true" | "false", hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree", controls: string};
+
+	/**
+	 * Button text
+	 * @public
+	 * @defaultvalue ""
+	 * @type {string}
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.text
+	 */
+	@property({ type: String })
+	text!: string;
+
+	/**
+	 * Button width
+	 * @name sap.ui.webc.main.ToolbarButton.prototype.width
+	 * @defaultvalue ""
+	 * @type {string}
+	 * @public
+	 */
+	@property({ type: String })
+	width!: string;
+
+	static get staticAreaStyles() {
+		return ToolbarButtonPopoverCss;
+	}
+
+	get styles() {
+		return {
+			width: this.width,
+			display: this.hidden ? "none" : "inline-block",
+		};
+	}
+
+	get containsText() {
+		return true;
+	}
+
+	static get toolbarTemplate() {
+		return ToolbarButtonTemplate;
+	}
+
+	static get toolbarPopoverTemplate() {
+		return ToolbarPopoverButtonTemplate;
+	}
+
+	get subscribedEvents(): Map<string, IEventOptions> {
+		const map = new Map();
+		map.set("click", { preventClosing: false });
+		return map;
+	}
+}
+
+registerToolbarItem(ToolbarButton);
+
+ToolbarButton.define();
+
+export default ToolbarButton;
diff --git a/packages/main/src/ToolbarItem.ts b/packages/main/src/ToolbarItem.ts
new file mode 100644
index 000000000000..0ef12927c4e2
--- /dev/null
+++ b/packages/main/src/ToolbarItem.ts
@@ -0,0 +1,140 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+
+import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+
+export type IEventOptions = {
+	preventClosing: boolean;
+}
+
+export interface IToolbarItem {
+	overflowPriority: `${ToolbarItemOverflowBehavior}`;
+	preventOverflowClosing: boolean;
+	ignoreSpace?: boolean;
+	containsText?: boolean;
+	hasFlexibleWidth?: boolean;
+	stableDomRef: string;
+}
+
+@customElement("ui5-tb-item")
+
+/**
+ * @class
+ * The <code>ui5-tb-item</code> represents an abstract class for items,
+ * used in the <code>ui5-toolbar</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+class ToolbarItem extends UI5Element implements IToolbarItem {
+	/**
+	 * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+	 * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+	 * Available options are:
+	 * <ul>
+	 * <li><code>NeverOverflow</code></li>
+	 * <li><code>AlwaysOverflow</code></li>
+	 * <li><code>Default</code></li>
+	 * </ul>
+	 * @public
+	 * @name sap.ui.webc.main.ToolbarItem.prototype.overflowPriority
+	 * @defaultvalue "Default"
+	 * @type {ToolbarItemOverflowBehavior}
+	 */
+	@property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
+	overflowPriority!: `${ToolbarItemOverflowBehavior}`;
+
+	/**
+	 * Defines if the toolbar overflow popup should close upon intereaction with the item.
+	 * It will close by default.
+	 * @type {Boolean}
+	 * @defaultvalue false
+	 * @public
+	 * @name sap.ui.webc.main.Toolbar.prototype.preventOverflowClosing
+	 */
+	@property({ type: Boolean })
+	preventOverflowClosing!: boolean;
+
+	/**
+	* Defines if the width of the item should be ignored in calculating the whole width of the toolbar
+	* @returns {Boolean}
+	* @protected
+	*/
+	get ignoreSpace(): boolean {
+		return false;
+	}
+
+	/**
+	 * Returns if the item contains text. Used to position the text properly inside the popover.
+	 * Aligned left if the item has text, default aligned otherwise.
+	 * @protected
+	 * @returns {Boolean}
+	 */
+	get containsText(): boolean {
+		return false;
+	}
+
+	/**
+	 * Returns if the item is flexible. An item that is returning true for this property will make
+	 * the toolbar expand to fill the 100% width of its container.
+	 * @protected
+	 * @returns {Boolean}
+	 */
+	get hasFlexibleWidth(): boolean {
+		return false;
+	}
+
+	/**
+	 * Returns if the item is interactive.
+	 * This value is used to determinate if the toolbar should have its accessibility role and attributes set.
+	 * At least two interactive items are needed for the toolbar to have the role="toolbar" attribute set.
+	 * @protected
+	 * @returns {Boolean}
+	 */
+	get isInteractive(): boolean {
+		return true;
+	}
+
+	/**
+	 * Returns the template for the toolbar item.
+	 * @protected
+	 * @returns {TemplateFunction}
+	 */
+	static get toolbarTemplate(): TemplateFunction {
+		throw new Error("Template must be defined");
+	}
+
+	/**
+	 * Returns the template for the toolbar item popover.
+	 * @protected
+	 * @returns {TemplateFunction}
+	 */
+	static get toolbarPopoverTemplate(): TemplateFunction {
+		throw new Error("Popover template must be defined");
+	}
+
+	/**
+	 * Returns the events that the item is subscribed to.
+	 * @protected
+	 * @returns {Map}
+	 */
+	get subscribedEvents(): Map<string, IEventOptions> {
+		return new Map();
+	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+}
+
+ToolbarItem.define();
+
+export type { ToolbarItem };
+export default ToolbarItem;
diff --git a/packages/main/src/ToolbarPopover.hbs b/packages/main/src/ToolbarPopover.hbs
new file mode 100644
index 000000000000..4d7d0420825a
--- /dev/null
+++ b/packages/main/src/ToolbarPopover.hbs
@@ -0,0 +1,14 @@
+<ui5-popover
+	class="ui5-overflow-popover"
+	placement-type="Bottom"
+	horizontal-align="Right"
+	@ui5-after-close="{{onOverflowPopoverClosed}}"
+	@ui5-after-open="{{onOverflowPopoverOpened}}"
+	no-arrow
+>
+	<div class="ui5-overflow-list {{classes.overflow}}">
+		{{#each overflowItems}}
+			{{this.toolbarPopoverTemplate}}
+		{{/each}}
+	</div>
+</ui5-popover>
diff --git a/packages/main/src/ToolbarPopoverButton.hbs b/packages/main/src/ToolbarPopoverButton.hbs
new file mode 100644
index 000000000000..4296eeadc8ce
--- /dev/null
+++ b/packages/main/src/ToolbarPopoverButton.hbs
@@ -0,0 +1,16 @@
+<ui5-button
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	tooltip="{{this.tooltip}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	class="ui5-tb-popover-button ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+>
+	{{this.text}}
+</ui5-button>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarPopoverSelect.hbs b/packages/main/src/ToolbarPopoverSelect.hbs
new file mode 100644
index 000000000000..38011e45caaa
--- /dev/null
+++ b/packages/main/src/ToolbarPopoverSelect.hbs
@@ -0,0 +1,12 @@
+<ui5-select 
+	class="ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarRegistry.ts b/packages/main/src/ToolbarRegistry.ts
new file mode 100644
index 000000000000..e62cebd76688
--- /dev/null
+++ b/packages/main/src/ToolbarRegistry.ts
@@ -0,0 +1,37 @@
+import getSharedResource from "@ui5/webcomponents-base/dist/getSharedResource.js";
+
+import type IToolbarItem from "./ToolbarItem.js";
+
+const registry = getSharedResource<Map<string, typeof IToolbarItem>>("ToolbarItem.registry", new Map());
+
+const registerToolbarItem = (ElementClass: typeof IToolbarItem) => {
+	registry.set(ElementClass.name, ElementClass);
+};
+
+const getRegisteredToolbarItem = (name: string) => {
+	if (!registry.has(name)) {
+		throw new Error(`No template found for ${name}`);
+	}
+
+	return registry.get(name);
+};
+
+const getRegisteredStyles = () => {
+	return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.styles);
+};
+
+const getRegisteredStaticAreaStyles = () => {
+	return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.staticAreaStyles);
+};
+
+const getRegisteredDependencies = () => {
+	return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.dependencies).flat();
+};
+
+export {
+	registerToolbarItem,
+	getRegisteredToolbarItem,
+	getRegisteredStyles,
+	getRegisteredStaticAreaStyles,
+	getRegisteredDependencies,
+};
diff --git a/packages/main/src/ToolbarSelect.hbs b/packages/main/src/ToolbarSelect.hbs
new file mode 100644
index 000000000000..072ea9c4f170
--- /dev/null
+++ b/packages/main/src/ToolbarSelect.hbs
@@ -0,0 +1,12 @@
+<ui5-select 
+	class="ui5-tb-item" 
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
new file mode 100644
index 000000000000..6043da142d86
--- /dev/null
+++ b/packages/main/src/ToolbarSelect.ts
@@ -0,0 +1,208 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+
+// Templates
+
+import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
+import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import ToolbarItem from "./ToolbarItem.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+import "./ToolbarSelectOption.js";
+import type { SelectChangeEventDetail } from "./Select.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
+ * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-option</code> component.
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/Select";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-toolbar-select</code>)
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelect
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-select
+ * @appenddocs sap.ui.webc.main.Option
+ * @public
+ * @since 1.17.0
+ */
+@customElement({
+	tag: "ui5-toolbar-select",
+	dependencies: [Select, Option],
+})
+
+/**
+ * Fired when the selected option changes.
+ *
+ * @event sap.ui.webc.main.ToolbarSelect#change
+ * @allowPreventDefault
+ * @param {HTMLElement} selectedOption the selected option.
+ * @public
+ */
+@event("change", {
+	detail: {
+		selectedOption: { type: HTMLElement },
+	},
+})
+
+/**
+ * Fired after the component's dropdown menu opens.
+ *
+ * @event sap.ui.webc.ToolbarSelect#open
+ * @public
+ */
+@event("open")
+/**
+ * Fired after the component's dropdown menu closes.
+ *
+ * @event sap.ui.webc.ToolbarSelect#close
+ * @public
+ */
+@event("close")
+
+class ToolbarSelect extends ToolbarItem {
+	@property({ type: String })
+	width!: string;
+
+	/**
+	 * Defines the component options.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> Only one selected option is allowed.
+	 * If more than one option is defined as selected, the last one would be considered as the selected one.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
+	 * @type {sap.ui.webc.main.ISelectOption[]}
+	 * @slot options
+	 * @name sap.ui.webc.main.ToolbarSelect.prototype.default
+	 * @public
+	 */
+	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+	options!: Array<Option>;
+
+	/**
+	 * Defines the value state of the component.
+	 * <br><br>
+	 *
+	 * @type {sap.ui.webc.base.types.ValueState}
+	 * @defaultvalue "None"
+	 * @name sap.ui.webc.main.ToolbarSelect.prototype.valueState
+	 * @public
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	valueState!: `${ValueState}`;
+
+	/**
+	 * Defines whether the component is in disabled state.
+	 * <br><br>
+	 * <b>Note:</b> A disabled component is noninteractive.
+	 *
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.ToolbarSelect.prototype.disabled
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @type {string}
+	 * @public
+	 * @defaultvalue ""
+	 * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleName
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the select.
+	 *
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleNameRef
+	 * @public
+	 */
+	@property()
+	accessibleNameRef!: string;
+
+	_onEvent: EventListener
+
+	static get toolbarTemplate() {
+		return ToolbarSelectTemplate;
+	}
+
+	static get toolbarPopoverTemplate() {
+		return ToolbarPopoverSelectTemplate;
+	}
+
+	get subscribedEvents() {
+		const map = new Map();
+
+		map.set("click", { preventClosing: true });
+		map.set("change", { preventClosing: false });
+		map.set("open", { preventClosing: true });
+		map.set("close", { preventClosing: true });
+
+		return map;
+	}
+
+	constructor() {
+		super();
+
+		this._onEvent = this._onEventHandler.bind(this);
+	}
+
+	onEnterDOM(): void {
+		this.attachEventListeners();
+	}
+
+	onExitDOM(): void {
+		this.detachEventListeners();
+	}
+
+	attachEventListeners(): void {
+		[...this.subscribedEvents.keys()].forEach(e => {
+			this.addEventListener(e, this._onEvent);
+		});
+	}
+
+	detachEventListeners(): void {
+		[...this.subscribedEvents.keys()].forEach(e => {
+			this.removeEventListener(e, this._onEvent);
+		});
+	}
+
+	_onEventHandler(e: Event): void {
+		if (e.type === "change") {
+			// update options
+			const selectedOption = (e as CustomEvent<SelectChangeEventDetail>).detail.selectedOption;
+			const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
+			this.options.forEach((option: Option, index: number) => {
+				if (index === selectedOptionIndex) {
+					option.setAttribute("selected", "");
+				} else {
+					option.removeAttribute("selected");
+				}
+			});
+		}
+	}
+}
+
+registerToolbarItem(ToolbarSelect);
+
+ToolbarSelect.define();
+
+export default ToolbarSelect;
diff --git a/packages/main/src/ToolbarSelectOption.ts b/packages/main/src/ToolbarSelectOption.ts
new file mode 100644
index 000000000000..40382932e378
--- /dev/null
+++ b/packages/main/src/ToolbarSelectOption.ts
@@ -0,0 +1,51 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSelectOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @tagname ui5-toolbar-select-option
+ * @implements sap.ui.webc.main.IToolbarSelectOption
+ * @public
+ * @since 1.17.0
+ */
+@customElement("ui5-toolbar-select-option")
+class ToolbarSelectOption extends UI5Element {
+	/**
+	 * Defines the selected state of the component.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.ToolbarSelectOption.prototype.selected
+	 * @public
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+
+	/**
+	 * 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[]}
+	 * @name sap.ui.webc.main.ToolbarSelectOption.prototype.default
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
+	text!: Array<Node>;
+}
+
+ToolbarSelectOption.define();
+
+export default ToolbarSelectOption;
diff --git a/packages/main/src/ToolbarSeparator.hbs b/packages/main/src/ToolbarSeparator.hbs
new file mode 100644
index 000000000000..5200768d19b7
--- /dev/null
+++ b/packages/main/src/ToolbarSeparator.hbs
@@ -0,0 +1,4 @@
+<div
+	class="ui5-tb-separator ui5-tb-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts
new file mode 100644
index 000000000000..1960d07df2b4
--- /dev/null
+++ b/packages/main/src/ToolbarSeparator.ts
@@ -0,0 +1,50 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ToolbarSeparatorTemplate from "./generated/templates/ToolbarSeparatorTemplate.lit.js";
+
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+
+import ToolbarItem from "./ToolbarItem.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-separator</code> is an element, used for visual separation between two elements.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSeparator
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-separator
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+@customElement({
+	tag: "ui5-toolbar-separator",
+})
+
+class ToolbarSeparator extends ToolbarItem {
+	static get toolbarTemplate() {
+		return ToolbarSeparatorTemplate;
+	}
+
+	static get toolbarPopoverTemplate() {
+		return ToolbarSeparatorTemplate;
+	}
+
+	get ignoreSpace() {
+		return true;
+	}
+
+	get isInteractive() {
+		return false;
+	}
+}
+
+registerToolbarItem(ToolbarSeparator);
+
+ToolbarSeparator.define();
+
+export default ToolbarSeparator;
diff --git a/packages/main/src/ToolbarSpacer.hbs b/packages/main/src/ToolbarSpacer.hbs
new file mode 100644
index 000000000000..e9c80e12d14a
--- /dev/null
+++ b/packages/main/src/ToolbarSpacer.hbs
@@ -0,0 +1,6 @@
+<div
+	class="ui5-tb-spacer ui5-tb-item"
+	style="{{this.styles}}"
+	role="separator"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>
diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts
new file mode 100644
index 000000000000..5ee6d1b6b125
--- /dev/null
+++ b/packages/main/src/ToolbarSpacer.ts
@@ -0,0 +1,66 @@
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
+
+import ToolbarItem from "./ToolbarItem.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-toolbar-spacer</code> is an element, used for taking needed space for toolbar items to take 100% width.
+ * It takes no space in calculating toolbar items width.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ToolbarSpacer
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar-spacer
+ * @abstract
+ * @since 1.17.0
+ * @public
+ */
+@customElement({
+	tag: "ui5-toolbar-spacer",
+})
+
+class ToolbarSpacer extends ToolbarItem {
+	/**
+	 * Spacer width
+	 * @public
+	 * @name sap.ui.webc.main.ToolbarSpacer.prototype.width
+	 */
+	@property({ type: String })
+	width!: string
+
+	get styles() {
+		return this.width ? { width: this.width } : { flex: "auto" };
+	}
+
+	get ignoreSpace() {
+		return this.width === "";
+	}
+
+	get hasFlexibleWidth() {
+		return this.width === "";
+	}
+
+	static get toolbarTemplate() {
+		return ToolbarSpacerTemplate;
+	}
+
+	static get toolbarPopoverTemplate() {
+		return ToolbarSpacerTemplate;
+	}
+
+	get isInteractive() {
+		return false;
+	}
+}
+
+registerToolbarItem(ToolbarSpacer);
+
+ToolbarSpacer.define();
+
+export default ToolbarSpacer;
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 36b6a376a5af..c0882fcc6f54 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -449,3 +449,6 @@ DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
 DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
 #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
 LABEL_COLON=:
+
+#XACT: ARIA announcement for the input field of the TimePicker
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Additional Options
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index afdca66f9561..9d2625524629 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -285,4 +285,4 @@ bdi {
 :host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
-}
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/Toolbar.css b/packages/main/src/themes/Toolbar.css
new file mode 100644
index 000000000000..1ec02191e74d
--- /dev/null
+++ b/packages/main/src/themes/Toolbar.css
@@ -0,0 +1,65 @@
+:host(:not([hidden])) {
+	width: 100%;
+	height: var(--_ui5-toolbar-height);
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--_ui5-toolbar-padding-left) 0 var(--_ui5-toolbar-padding-right);
+	box-sizing: border-box;
+	background: var(--ui5-toolbar-Background);
+	color: var(--sapButton_TextColor);
+	border-bottom: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+}
+
+:host([design="Solid"]) {
+	background: var(--sapBaseColor);
+}
+
+:host([design="Transparent"]) {
+	background: var(--sapToolbar_Background);
+}
+
+:host([styling="Clear"]) {
+	border-bottom: 0;
+}
+
+:host([align-content="Start"]) {
+	justify-content: flex-start;
+}
+
+.ui5-tb-items {
+	width: 100%;
+	height: 100%;
+	display: inherit;
+	align-items: inherit;
+	justify-content: inherit;
+}
+
+.ui5-tb-items-full-width {
+    width: 100%;
+}
+
+.ui5-tb-item[design="Transparent"] {
+	color: inherit;
+}
+
+.ui5-tb-item {
+    flex-shrink: 0;
+}
+
+.ui5-tb-item:not(:last-child) {
+	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
+	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
+}
+
+.ui5-tb-separator {
+	height: var(--_ui5-toolbar-separator-height);
+	width: 0.0625rem;
+	background: var(--sapToolbar_SeparatorColor);
+	box-sizing: border-box;
+}
+
+.ui5-tb-overflow-btn-hidden {
+	visibility: hidden;
+	position: absolute;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/ToolbarButtonPopover.css b/packages/main/src/themes/ToolbarButtonPopover.css
new file mode 100644
index 000000000000..200ca218d690
--- /dev/null
+++ b/packages/main/src/themes/ToolbarButtonPopover.css
@@ -0,0 +1,3 @@
+:not([icon-only]).ui5-tb-popover-button::part(button) {
+	justify-content: start;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/ToolbarPopover.css b/packages/main/src/themes/ToolbarPopover.css
new file mode 100644
index 000000000000..56f069b3a7fb
--- /dev/null
+++ b/packages/main/src/themes/ToolbarPopover.css
@@ -0,0 +1,12 @@
+.ui5-overflow-list {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 0 0.5rem;
+}
+
+.ui5-tb-popover-item {
+	width: 100%;
+	margin-bottom: 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Toolbar-parameters.css b/packages/main/src/themes/base/Toolbar-parameters.css
new file mode 100644
index 000000000000..bf25fcb376c5
--- /dev/null
+++ b/packages/main/src/themes/base/Toolbar-parameters.css
@@ -0,0 +1,7 @@
+:root {
+    --_ui5-toolbar-padding-left: 0.5rem;
+	--_ui5-toolbar-padding-right: 0.5rem;
+
+	--_ui5-toolbar-item-margin-left: 0;
+	--_ui5-toolbar-item-margin-right: 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 0c5b98d8078f..ee79623dcf75 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -144,6 +144,10 @@
 	/* SplitButton */
 	--_ui5_split_button_middle_separator_top: 0;
 	--_ui5_split_button_middle_separator_height: 2.25rem;
+
+	/* Toolbar */
+	--_ui5-toolbar-separator-height: 2rem;
+	--_ui5-toolbar-height: 2.75rem;
 }
 
 [data-ui5-compact-size],
@@ -349,4 +353,8 @@
 	--_ui5_vsd_sub_header_container_height: 2rem;
 	--_ui5_vsd_header_height: 4rem;
 	--_ui5_vsd_expand_content_height: 25.4375rem;
+
+	/* Toolbar */
+	--_ui5-toolbar-separator-height: 1.5rem;
+	--_ui5-toolbar-height: 2rem;
 }
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index 6dd3fc162e04..22b6ca623189 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -39,6 +39,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "../base/GrowingButton-parameters.css";
 @import "./TextArea-parameters.css";
 @import "./TimePicker-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 04115b02ad5a..c37904a0a9b4 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -38,6 +38,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "./TextArea-parameters.css";
 @import "../base/Toast-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index 5054e6401c30..2cd199225dee 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -38,6 +38,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "./TextArea-parameters.css";
 @import "../base/Toast-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index 03fa1bddc8e1..2fbcbf527f6b 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -44,6 +44,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "../base/TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "../base/GrowingButton-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 6e3bb2af9876..861f94262a6b 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -43,6 +43,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "../base/TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "../base/GrowingButton-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 673f22f6d09a..2dc914ffd49b 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -39,6 +39,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "./TextArea-parameters.css";
 @import "./TimePicker-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 673f22f6d09a..2dc914ffd49b 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -39,6 +39,7 @@
 @import "../base/TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "./TextArea-parameters.css";
 @import "./TimePicker-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index b7966fc8743e..7e0d8c58ac7a 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -58,6 +58,7 @@
 @import "./TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
 @import "./TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./StepInput-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "./sizes-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_dark/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_dark/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_exp/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_exp/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_exp/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_hcb/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_hcb/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_hcb_exp/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb_exp/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_hcw/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_hcw/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/TableGroupRow-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/TableGroupRow-parameters.css
index f6a1778375e2..32ea6f0fcb16 100644
--- a/packages/main/src/themes/sap_horizon_hcw_exp/TableGroupRow-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw_exp/TableGroupRow-parameters.css
@@ -1,4 +1,5 @@
 @import "../base/TableGroupRow-parameters.css";
+@import "../base/Toolbar-parameters.css";
 
 :root {
 	--ui5_table_group_row_font-weight: bold;
diff --git a/packages/main/src/types/ToolbarAlign.ts b/packages/main/src/types/ToolbarAlign.ts
new file mode 100644
index 000000000000..bb84504bbb13
--- /dev/null
+++ b/packages/main/src/types/ToolbarAlign.ts
@@ -0,0 +1,27 @@
+/**
+* Defines which direction the items of ui5-toolbar will be aligned.
+ *
+ * @readonly
+ * @enum {string}
+ * @public
+ * @type {string}
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.ToolbarAlign
+ */
+enum ToolbarAlign {
+	/**
+	 * @public
+	 * @type {Start}
+	 * Toolbar items are situated at the <code>start</code> of the Toolbar
+	 */
+	Start = "Start",
+
+	/**
+	 * @public
+	 * @type {End}
+	 * Toolbar items are situated at the <code>end</code> of the Toolbar
+	 */
+	End = "End",
+}
+
+export default ToolbarAlign;
diff --git a/packages/main/src/types/ToolbarItemOverflowBehavior.ts b/packages/main/src/types/ToolbarItemOverflowBehavior.ts
new file mode 100644
index 000000000000..c558db9a1e19
--- /dev/null
+++ b/packages/main/src/types/ToolbarItemOverflowBehavior.ts
@@ -0,0 +1,34 @@
+/**
+ * Defines the priority of the toolbar item to go inside overflow popover.
+ *
+ * @readonly
+ * @enum {string}
+ * @public
+ * @type {string}
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.ToolbarItemOverflowBehavior
+ */
+enum ToolbarItemOverflowBehavior {
+
+	/**
+	 * The item is presented inside the toolbar and goes in the popover, when there is not enough space.
+	 * @public
+	 * @type {Default}
+	 */
+	 Default = "Default",
+	/**
+	 * When set, the item will never go to the overflow popover.
+	 * @public
+	 * @type {NeverOverflow}
+	 */
+	NeverOverflow = "NeverOverflow",
+
+	/**
+	 * @public
+	 * When set, the item will be always part of the overflow part of ui5-toolbar.
+	 * @type {AlwaysOverflow}
+	 */
+	AlwaysOverflow = "AlwaysOverflow",
+}
+
+export default ToolbarItemOverflowBehavior;
diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
new file mode 100644
index 000000000000..33b2d076c200
--- /dev/null
+++ b/packages/main/test/pages/Toolbar.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+
+	<title>Toolbar</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<script src="../../bundle.esm.js" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/Toolbar.css">
+</head>
+<body>
+	<div id="toolbars-container">
+		<br /><br />
+
+		<ui5-title level="H3">Standard Toolbar</ui5-title>
+		<br />
+		<section>
+			<ui5-toolbar>
+				<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+				<ui5-toolbar-select id="toolbar-select">
+					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+				</ui5-toolbar-select>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="employee" text="Call me later"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+		<br /><br />
+
+		<ui5-title level="H3">Toolbar with start-aligned items</ui5-title>
+		<br />
+		<section>
+			<ui5-toolbar align-content="Start">
+				<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+		<br /><br />
+		<ui5-title level="H3">Two inline Toolbars with separator (with action on "User Menu" button)</ui5-title>
+		<br />
+		<section id="testSection">
+			<div class="main-wrapper">
+				<div class="first-toolbar-wrapper">
+					<ui5-toolbar id="otb_a">
+						<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+						<ui5-toolbar-button id="myOverflowBtn"  prevent-overflow-closing icon="employee" text="User Menu"></ui5-toolbar-button>
+					</ui5-toolbar>
+				</div>
+				<div class="second-toolbar-wrapper">
+					<ui5-toolbar id="otb_b">
+						<ui5-toolbar-separator overflow-priority="NeverOverflow"></ui5-toolbar-separator>
+					</ui5-toolbar>
+				</div>
+				<div class="third-toolbar-wrapper">
+					<ui5-toolbar id="otb_c">
+						<ui5-toolbar-button icon="decline" stable-dom-ref="tb-button-decline" overflow-priority="NeverOverflow" text="Left 2"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="employee" overflow-priority="NeverOverflow" text="Left 3"></ui5-toolbar-button>
+					</ui5-toolbar>
+				</div>
+			</div>
+
+		</section>
+		<br /><br />
+
+		<ui5-title level="H3">Toolbar with "AlwaysOverflow" overflow priority item (divided visually by internal separator)</ui5-title>
+		<br />
+
+		<section>
+			<ui5-toolbar id="otb_d">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-d" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+
+		<br /><br />
+
+		<ui5-title level="H3">Toolbar with "NeverOverflow" overflow priority item (divided visually by internal separator)</ui5-title>
+		<br />
+
+		<section>
+			<ui5-toolbar id="otb_e">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"  overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-e" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+		<br /><br />
+
+		<ui5-title level="H3">Toolbar with flexible spacers</ui5-title>
+		<br />
+
+		<section>
+			<ui5-toolbar id="otb_f">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-spacer></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+				<ui5-toolbar-spacer></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee_f"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+		<br /><br />
+
+		<ui5-title level="H3">Toolbar with fixed spacers</ui5-title>
+		<br />
+
+		<section>
+			<ui5-toolbar id="otb_g">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-spacer width="100px"></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-g"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</section>
+		<br /><br />
+		<ui5-title level="H3">Dynamic Title example</ui5-title>
+		<br />
+		<section id="titleRestSection">
+			<div class="dynamic-title-wrapper">
+				<div class="title-wrapper">
+					<ui5-breadcrumbs>
+						<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page </ui5-breadcrumbs-item>
+						<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
+						<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
+					</ui5-breadcrumbs>
+					<ui5-title level="H1" class="main-title">Header Title</ui5-title>
+					<ui5-title level="H4">Header Subtitle</ui5-title>
+				</div>
+				<div class="content-wrapper">
+					<ui5-toolbar align-content="Start">
+						<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+
+					</ui5-toolbar>
+		</div>
+				<div class="actions-wrapper">
+					<div class="first-toolbar-wrapper">
+						<ui5-toolbar>
+							<ui5-toolbar-button icon="edit"></ui5-toolbar-button>
+							<ui5-toolbar-button icon="delete"></ui5-toolbar-button>
+							<ui5-toolbar-button icon="copy"></ui5-toolbar-button>
+							<ui5-toolbar-button icon="share"></ui5-toolbar-button>
+						</ui5-toolbar>
+					</div>
+					<div class="second-toolbar-wrapper">
+						<ui5-toolbar>
+							<ui5-toolbar-separator overflow-priority="NeverOverflow"></ui5-toolbar-separator>
+						</ui5-toolbar>
+					</div>
+					<div class="third-toolbar-wrapper">
+						<ui5-toolbar>
+							<ui5-toolbar-button icon="full-screen" stable-dom-ref="tb-button-decline" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+							<ui5-toolbar-button icon="decline" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+						</ui5-toolbar>
+					</div>
+				</div>
+			</div>
+
+		</section>
+	</div>
+	<ui5-popover id="myPopup" placement="Bottom">
+		<div slot="header" style="padding: 0.5rem">Hello World</div>
+		<div>
+			<ui5-input placeholder="Hi"></ui5-input>
+
+			<ui5-list>
+				<ui5-li>Hello</ui5-li>
+				<ui5-li>World</ui5-li>
+				<ui5-li>Again</ui5-li>
+			</ui5-list>
+			<br/>
+			<ui5-button>Hi!</ui5-button>
+		</div>
+	</ui5-popover>
+	<ui5-slider value="100" id="toolbarSlider"></ui5-slider>
+	<script>
+		const items = document.querySelectorAll("ui5-toolbar-button");
+		const select = document.getElementById("toolbar-select");
+		const toolbarSlider = document.getElementById("toolbarSlider");
+
+		items.forEach(item => {
+			item.addEventListener("ui5-click", e => {
+				console.log("Clicked on " + e.target.getAttribute("text"));
+			});
+		});
+
+		select.addEventListener("ui5-change", e => {
+			console.log("Selected " + e.detail.selectedOption.getAttribute("text"));
+		});
+
+		select.addEventListener("ui5-open", e => {
+			console.log("Opened", e);
+		});
+
+		select.addEventListener("ui5-close", e => {
+			console.log("Closed", e);
+		});
+
+		toolbarSlider.addEventListener("input", e => {
+			document.getElementById("toolbars-container").setAttribute("style", "width:" + e.target.value + "%");
+		})
+	</script>
+	</body>
+</html>
diff --git a/packages/main/test/pages/ToolbarButton.html b/packages/main/test/pages/ToolbarButton.html
new file mode 100644
index 000000000000..cb17bf5751e0
--- /dev/null
+++ b/packages/main/test/pages/ToolbarButton.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+
+        <title>ToolbarButton</title>
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+        <meta charset="utf-8" />
+
+        <script src="../../bundle.esm.js" type="module"></script>
+    </head>
+    <body>
+        <ui5-label id="btn">Add</ui5-label>
+
+        <ui5-toolbar id="otb_d">
+            <ui5-toolbar-button
+                text="Back"
+                design="Emphasized"
+                disabled
+                icon="sap-icon://add"
+                icon-end
+                tooltip="Add"
+            ></ui5-toolbar-button>
+
+            <!-- accessible-name -->
+            <ui5-toolbar-button
+                icon="sap-icon://add"
+                accessible-name="Add"
+                accessible-name-ref="btn"
+            ></ui5-toolbar-button>
+        </ui5-toolbar>
+
+        <script>
+            const accButton = document.querySelector(
+                "ui5-toolbar-button[accessible-name]"
+            );
+            accButton.accessibilityAttributes = {
+                expanded: "true",
+                controls: "btn",
+                hasPopup: "dialog",
+            };
+        </script>
+    </body>
+</html>
diff --git a/packages/main/test/pages/ToolbarSelect.html b/packages/main/test/pages/ToolbarSelect.html
new file mode 100644
index 000000000000..a119e3ee29ec
--- /dev/null
+++ b/packages/main/test/pages/ToolbarSelect.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+
+        <title>ToolbarButton</title>
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+        <meta charset="utf-8" />
+
+        <script src="../../bundle.esm.js" type="module"></script>
+    </head>
+    <body>
+        <ui5-label id="title">Add</ui5-label>
+
+        <input type="text" placeholder="Opened">
+        <input type="text" placeholder="Closed">
+        <input type="text" placeholder="Changed">
+        <input type="text" placeholder="Clicked">
+
+        <ui5-toolbar id="toolbar-with-selects">
+            <ui5-toolbar-select value-state="Warning" accessible-name="Add" accessible-name-ref="title" id="toolbar-select">
+                <ui5-option>1</ui5-option>
+                <ui5-option selected>2</ui5-option>
+                <ui5-option>3</ui5-option>
+            </ui5-toolbar-select>
+
+            <!-- disabled -->
+
+            <ui5-toolbar-select disabled>
+                <ui5-option>1</ui5-option>
+                <ui5-option selected>2</ui5-option>
+                <ui5-option>3</ui5-option>
+            </ui5-toolbar-select>
+        </ui5-toolbar>
+
+        <script>
+            const select = document.querySelector("ui5-toolbar-select");
+            
+            const opened = document.querySelector("input[placeholder='Opened']");
+            const closed = document.querySelector("input[placeholder='Closed']");
+            const changed = document.querySelector("input[placeholder='Changed']");
+            const clicked = document.querySelector("input[placeholder='Clicked']");
+
+            select.addEventListener("ui5-change", (event) => {
+                changed.value++;
+            });
+
+            select.addEventListener("ui5-close", (event) => {
+                closed.value++;
+            });
+
+            select.addEventListener("ui5-open", (event) => {
+                opened.value++;
+            });
+
+            select.addEventListener("ui5-click", (event) => {
+                clicked.value++;
+            });
+        </script>
+    </body>
+</html>
diff --git a/packages/main/test/pages/styles/Toolbar.css b/packages/main/test/pages/styles/Toolbar.css
new file mode 100644
index 000000000000..d4826ae96283
--- /dev/null
+++ b/packages/main/test/pages/styles/Toolbar.css
@@ -0,0 +1,73 @@
+body {
+    background-color: var(--sapBackgroundColor);
+}
+
+#toolbars-container {
+    container: wrapper / inline-size;
+}
+.main-wrapper {
+    display:flex;
+    width: 100%;
+    flex-wrap: nowrap;
+}
+.dynamic-title-wrapper {
+    display: flex;
+    align-items: center;
+}
+.dynamic-title-wrapper ui5-toolbar {
+    border-bottom-color: transparent;
+}
+.first-toolbar-wrapper {
+    flex: 1;
+    min-width: 1px;
+}
+.third-toolbar-wrapper,
+.second-toolbar-wrapper {
+    flex: 0 1;
+}
+@container wrapper (max-width: 700px) {
+    .main-wrapper {
+        flex-direction: column;
+    }
+    .actions-wrapper {
+        flex-direction: column;
+    }
+    .first-toolbar-wrapper {
+        order: 2;
+    }
+    .third-toolbar-wrapper {
+        order: 1;
+    }
+    .second-toolbar-wrapper {
+        display: none;
+    }
+    .dynamic-title-wrapper {
+        align-items: flex-start;
+    }
+}
+
+@container wrapper (max-width: 500px) {
+    .main-title {
+        font-size: 16px;
+    }
+}
+
+.content-wrapper {
+    flex-shrink: 1.6;
+    flex-grow: 1;
+    min-width: 0;
+    align-self: center;
+}
+
+.title-wrapper {
+    flex-shrink: 1;
+    flex-grow: 0;
+    min-width: 0;
+}
+
+.actions-wrapper {
+    flex-shrink: 1.6;
+    min-width: 3rem;
+    flex-grow: 1;
+    display: flex;
+}
\ No newline at end of file
diff --git a/packages/main/test/specs/Toolbar.spec.js b/packages/main/test/specs/Toolbar.spec.js
new file mode 100644
index 000000000000..13cd1a01022f
--- /dev/null
+++ b/packages/main/test/specs/Toolbar.spec.js
@@ -0,0 +1,54 @@
+import { assert } from "chai";
+
+describe("Toolbar general interaction", () => {
+	before(async () => {
+		await browser.url(`test/pages/Toolbar.html`);
+	});
+
+	it("Should open popover when pressing overflow button", async () => {
+		await browser.setWindowSize(500, 1080);
+		const otb = await browser.$("#otb_a");
+		const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
+
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_a");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened on click on overflow button");
+		await browser.setWindowSize(1920, 1080);
+	});
+
+	it("Should move button with alwaysOverflow priority to overflow popover", async () => {
+
+		const otb = await browser.$("#otb_d");
+
+		const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
+
+		await overflowButton.click();
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened, because of 'always overflow' item is inside");
+
+		const employee_button = await popover.$(`[data-ui5-stable="tb-button-employee-d"]`);
+		assert.ok(await employee_button.hasClass("ui5-tb-popover-item"), "'Employee' button is moved in overflow popover since it has 'Always' priority");
+	});
+
+	it("Should not move button with neverOverflow priority to overflow popover", async () => {
+		const otb = await browser.$("#otb_c");
+
+		await browser.setWindowSize(100, 1080);
+
+		const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
+		assert.strictEqual(await overflowButton.isDisplayed(), false, "Overflow button is not rendered, because all elements has priority 'Never'");
+		await browser.setWindowSize(1920, 1080);
+	});
+
+	it("Should render ui5-button by toolbar template, when slotting ui5-toolbar-button elements", async () => {
+		const otb = await browser.$("#otb_c");
+		const declineButton = await otb.shadow$(`[data-ui5-stable="tb-button-decline"]`);
+
+		assert.strictEqual(await declineButton.getTagName(), "ui5-button", false, "Toolbar button is properly rendered");
+	});
+
+});
diff --git a/packages/main/test/specs/ToolbarButton.spec.js b/packages/main/test/specs/ToolbarButton.spec.js
new file mode 100644
index 000000000000..dce15dbf897a
--- /dev/null
+++ b/packages/main/test/specs/ToolbarButton.spec.js
@@ -0,0 +1,97 @@
+import { assert } from "chai";
+
+describe("Toolbar general interaction", () => {
+	before(async () => {
+		await browser.url(`test/pages/ToolbarButton.html`);
+	});
+
+	it("Should render the button with the correct text", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const button = await toolbar.shadow$("ui5-button")
+		const buttonText = await button.getText();
+		const buttonDesign = await button.getAttribute("design");
+		const buttonDisabled = await button.getAttribute("disabled");
+		const buttonIcon = await button.getAttribute("icon");
+		const buttonIconEnd = await button.getAttribute("icon-end");
+		const buttonTooltip = await button.getAttribute("tooltip");
+
+		assert.strictEqual(buttonText, "Back", "Button text is correct");
+		assert.strictEqual(buttonDesign, "Emphasized", "Button design is correct");
+		assert.strictEqual(buttonDisabled, "true", "Button is disabled");
+		assert.strictEqual(buttonIcon, "sap-icon://add", "Button icon is correct");
+		assert.strictEqual(buttonIconEnd, "", "Button icon-end is correct");
+		assert.strictEqual(buttonTooltip, "Add", "Button tooltip is correct");
+	});
+
+	it ("Should render the button with the correct accessible name", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const buttonAccName = await toolbar.shadow$("ui5-button[accessible-name]");
+		const buttonAccessibleName = await buttonAccName.getAttribute("accessible-name");
+		const buttonAccessibleNameRef = await buttonAccName.getAttribute("accessible-name-ref");
+
+		assert.strictEqual(buttonAccessibleName, "Add", "Button accessible name is correct");
+		assert.strictEqual(buttonAccessibleNameRef, "btn", "Button accessible name ref is correct");
+	});
+
+	it("Should render the button with the correct accessibilityAttributes", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const buttonAccAttributes = await toolbar.shadow$("ui5-button[accessible-name]").getProperty("accessibilityAttributes");
+
+		assert.strictEqual(buttonAccAttributes.expanded, "true", "Button accessibilityAttributes is correct");
+	});
+
+	it("Should render the button with the correct text inside the popover", async () => {
+		await browser.setWindowSize(100, 1080);
+
+		const toolbar = await browser.$("#otb_d");
+		const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		const buttonText = await popover.$("ui5-button").getText();
+		const buttonDesign = await popover.$("ui5-button").getAttribute("design");
+		const buttonDisabled = await popover.$("ui5-button").getAttribute("disabled");
+		const buttonIcon = await popover.$("ui5-button").getAttribute("icon");
+		const buttonIconEnd = await popover.$("ui5-button").getAttribute("icon-end");
+		const buttonTooltip = await popover.$("ui5-button").getAttribute("tooltip");
+
+		assert.strictEqual(buttonText, "Back", "Button's text is correct inside popover");
+		assert.strictEqual(buttonDesign, "Emphasized", "Button's design is correct inside popover");
+		assert.strictEqual(buttonDisabled, "true", "Button is disabled inside popover");
+		assert.strictEqual(buttonIcon, "sap-icon://add", "Button's icon is correct inside popover");
+		assert.strictEqual(buttonIconEnd, "", "Button's icon-end is correct inside popover");
+		assert.strictEqual(buttonTooltip, "Add", "Button's tooltip is correct inside popover");
+	});
+
+	it ("Should render the button with the correct accessible name inside the popover", async () => {
+		await browser.setWindowSize(100, 1080);
+
+		const toolbar = await browser.$("#otb_d");
+		const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		const buttonAccName = await popover.$("ui5-button[accessible-name]");
+		const buttonAccessibleName = await buttonAccName.getAttribute("accessible-name");
+		const buttonAccessibleNameRef = await buttonAccName.getAttribute("accessible-name-ref");
+
+		assert.strictEqual(buttonAccessibleName, "Add", "Button accessible name is correct inside popover");
+		assert.strictEqual(buttonAccessibleNameRef, "btn", "Button accessible name ref is correct inside popover");
+	});
+
+	it("Should render the button with the correct accessibilityAttributes inside the popover", async () => {
+		await browser.setWindowSize(100, 1080);
+
+		const toolbar = await browser.$("#otb_d");
+		const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		const buttonAccAttributes = await popover.$("ui5-button[accessible-name]").getProperty("accessibilityAttributes");
+
+		assert.strictEqual(buttonAccAttributes.expanded, "true", "Button accessibilityAttributes is correct inside popover");
+	});
+});
diff --git a/packages/main/test/specs/ToolbarSelect.spec.js b/packages/main/test/specs/ToolbarSelect.spec.js
new file mode 100644
index 000000000000..d2c98a39fef4
--- /dev/null
+++ b/packages/main/test/specs/ToolbarSelect.spec.js
@@ -0,0 +1,77 @@
+import { assert } from "chai";
+
+describe("Toolbar general interaction", () => {
+	before(async () => {
+		await browser.url(`test/pages/ToolbarSelect.html`);
+	});
+
+	it("Should render the select with the correct attributes", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const select = await toolbar.shadow$("ui5-select");
+		const valueState = await select.getAttribute("value-state");
+
+		assert.strictEqual(valueState, "Warning", "Select value state is correct");
+	});
+
+	it("Should render the select with disabled property correctly", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const select = await toolbar.shadow$("ui5-select[disabled]");
+		const disabled = await select.getAttribute("disabled");
+
+		assert.strictEqual(disabled, "true", "Disabled select is rendered correctly");
+	});
+
+	it("Should render accessible name correctly", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const select = await toolbar.shadow$("ui5-select");
+
+		const accessibleName = await select.getAttribute("accessible-name");
+		const accessibleNameRef = await select.getAttribute("accessible-name-ref");
+
+		assert.strictEqual(accessibleName, "Add", "Select accessible name is correct");
+		assert.strictEqual(accessibleNameRef, "title", "Select accessible name ref is correct");
+	});
+
+	// // Events
+
+	// it.only("Should fire change event on selection change", async () => {
+	// 	const toolbar = await browser.$("ui5-toolbar");
+	// 	const select = await toolbar.shadow$("ui5-select");
+	// 	const selectResult = await browser.$("input[placeholder='Changed']");
+
+	// 	await select.click();
+	// 	await select.keys("ArrowDown");
+	// 	await select.keys("Enter");
+
+	// 	const selectResultText = await selectResult.getValue();
+
+	// 	assert.strictEqual(selectResultText, "1", "Select change event is fired correctly");
+	// });
+
+	// Popover
+
+	it("Should render the select with the correct attributes inside the popover", async () => {
+		await browser.setWindowSize(100, 1080);
+
+		const toolbar = await browser.$("ui5-toolbar");
+		const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("ui5-toolbar");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		const valueState = await popover.$("ui5-select").getAttribute("value-state");
+		const disabled = await popover.$("ui5-select[disabled]").getAttribute("disabled");
+
+		assert.strictEqual(valueState, "Warning", "Select value state is correct");
+		assert.strictEqual(disabled, "true", "Disabled select is rendered correctly");
+
+		// Accessibility
+
+		const accessibleNameSelect = await popover.$("ui5-select");
+		const accessibleName = await accessibleNameSelect.getAttribute("accessible-name");
+		const accessibleNameRef = await accessibleNameSelect.getAttribute("accessible-name-ref");
+
+		assert.strictEqual(accessibleName, "Add", "Select accessible name is correct");
+		assert.strictEqual(accessibleNameRef, "title", "Select accessible name ref is correct");
+	});
+});
diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
new file mode 100644
index 000000000000..2376a4de1513
--- /dev/null
+++ b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
@@ -0,0 +1,125 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import type { Meta } from "@storybook/web-components";
+
+import Toolbar from "@ui5/webcomponents/dist/Toolbar";
+
+import argTypes, { componentInfo } from "./argTypes.js";
+import type { StoryArgsSlots } from "./argTypes.js";
+import type { UI5StoryArgs } from "../../../types.js";
+
+import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js";
+
+import { DocsPage } from "../../../.storybook/docs";
+
+const component = "ui5-toolbar";
+
+export default {
+  title: "Main/Toolbar",
+  component,
+  subcomponents: { ToolbarItem: "ui5-toolbar-item" },
+  argTypes,
+  parameters: {
+    docs: {
+      page: DocsPage({ ...componentInfo, component })
+    },
+  },
+} as Meta<Toolbar>;
+
+const Template: UI5StoryArgs<Toolbar, StoryArgsSlots> = (args) => {
+	return html` <ui5-toolbar
+		align-content="${ifDefined(args.alignContent)}"
+	>
+		${unsafeHTML(args.default)}
+	</ui5-toolbar>`;
+};
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+
+	default: `
+  <ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+  <ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+  <ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+  <ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`,
+  };
+Basic.storyName = "Basic";
+
+export const WithSpacer: UI5StoryArgs<Toolbar, StoryArgsSlots> =  Template.bind({});
+
+WithSpacer.args = {
+	default: `
+	<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+	<ui5-toolbar-spacer></ui5-toolbar-spacer>
+	<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+	<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+	<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`
+}
+
+export const WithSeparator: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
+
+WithSeparator.args = {
+	default: `
+		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+		<ui5-toolbar-separator></ui5-toolbar-separator>
+		<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
+		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`
+}
+
+export const WithAlwaysOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
+
+WithAlwaysOverflowElements.storyName = "'AlwaysOverflow' elements";
+
+WithAlwaysOverflowElements.args = {
+	default: `
+		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Mid 2" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Right 4" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>`
+}
+
+export const WithNeverOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
+
+WithNeverOverflowElements.storyName = "'NeverOverflow' elements";
+
+WithNeverOverflowElements.args = {
+	default: `
+		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 2" ></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="decline" text="Mid 2" ></ui5-toolbar-button>
+		<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+		<ui5-toolbar-button icon="employee" text="Right 4" ></ui5-toolbar-button>
+		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="NeverOverflow"></ui5-toolbar-button>`
+}
+
+export const WithStartAlignedElements = Template.bind({});
+
+
+WithStartAlignedElements.storyName = "Toolbar with 'Start' aligned elements";
+
+WithStartAlignedElements.args = {
+  alignContent: ToolbarAlign.Start,
+  default: Basic.args.default
+};
+
diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json
index f5996f3c3fe6..735786a897bc 100644
--- a/packages/theming/css-vars-usage.json
+++ b/packages/theming/css-vars-usage.json
@@ -424,6 +424,7 @@
   "--sapTile_SeparatorColor",
   "--sapTile_TextColor",
   "--sapTile_TitleTextColor",
+  "--sapToolbar_Background",
   "--sapToolbar_SeparatorColor",
   "--sapWarningBackground",
   "--sapWarningBorderColor"

From 580137650ccbdae6eaf8a116e188d8b704ddaa27 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Fri, 25 Aug 2023 13:31:05 +0300
Subject: [PATCH 23/33] chore: document the newly added list item shadow parts
 (#7480)

---
 packages/main/src/CustomListItem.ts   | 14 ++++++++++++++
 packages/main/src/ListItem.hbs        |  2 +-
 packages/main/src/StandardListItem.ts |  6 ++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/CustomListItem.ts b/packages/main/src/CustomListItem.ts
index e82a30849fe4..7f4373de0206 100644
--- a/packages/main/src/CustomListItem.ts
+++ b/packages/main/src/CustomListItem.ts
@@ -16,6 +16,20 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
  *
  * The component accepts arbitrary HTML content to allow full customization.
  *
+ * <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-custom</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>native-li - Used to style the main li tag of the list item</li>
+ * <li>content - Used to style the content area of the list item</li>
+ * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+ * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+ * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+ * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.CustomListItem
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
index 51d9b7886018..a68cfa30000c 100644
--- a/packages/main/src/ListItem.hbs
+++ b/packages/main/src/ListItem.hbs
@@ -43,7 +43,7 @@
 		{{#if typeDetail}}
 			<div class="ui5-li-detailbtn">
 				<ui5-button
-					part="edit-button"
+					part="detail-button"
 					design="Transparent"
 					icon="edit"
 					@click="{{onDetailClick}}"
diff --git a/packages/main/src/StandardListItem.ts b/packages/main/src/StandardListItem.ts
index 50eec29de488..f4d6b33a531d 100644
--- a/packages/main/src/StandardListItem.ts
+++ b/packages/main/src/StandardListItem.ts
@@ -27,6 +27,12 @@ import StandardListItemTemplate from "./generated/templates/StandardListItemTemp
  * <li>description - Used to style the description of the list item</li>
  * <li>additional-text - Used to style the additionalText of the list item</li>
  * <li>icon - Used to style the icon of the list item</li>
+ * <li>native-li - Used to style the main li tag of the list item</li>
+ * <li>content - Used to style the content area of the list item</li>
+ * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+ * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+ * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+ * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
  * </ul>
  *
  * @constructor

From b21db20cdedacd97de5d4372add6171f16f00316 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Fri, 25 Aug 2023 13:48:05 +0300
Subject: [PATCH 24/33] feat: introduce SelectMenu(Option) components (#7447)

### Background
Recently we got requests for customising the Select (but also other dropdown components), especially when it comes to the  visual of the items in the drop-down, in this case the Select's options. The consumer would like to add additional icons, custom markup or different colouring.

### Change
The PR aims to allow full customisation of the Select web component  (the options and the presentation of the selected option within the Select's text field) by introducing SelectMenu (the popup) and SelectMenuOption (the option) components, and the SelectMenu can slot truly physical options that can by styled from outside as regular slots.
*_**the change is fully backward compatible**_

Fixes: https://github.com/SAP/ui5-webcomponents/issues/7478
---
 packages/base/src/connectToComponent.ts       |  74 +++++
 packages/main/bundle.common.js                |   2 +
 packages/main/src/Interfaces.ts               |  10 +
 packages/main/src/ListItem.ts                 |   1 +
 packages/main/src/Select.hbs                  |   6 +-
 packages/main/src/Select.ts                   | 282 +++++++++++++---
 packages/main/src/SelectMenu.hbs              |  57 ++++
 packages/main/src/SelectMenu.ts               | 301 ++++++++++++++++++
 packages/main/src/SelectMenuOption.ts         | 130 ++++++++
 packages/main/src/themes/SelectMenu.css       |  16 +
 packages/main/src/themes/SelectMenuOption.css |   0
 packages/main/test/pages/SelectMenu.html      | 243 ++++++++++++++
 .../main/test/pages/SelectMenuLifecycle.html  | 122 +++++++
 .../main/test/pages/styles/SelectMenu.css     |  42 +++
 packages/main/test/specs/SelectMenu.spec.js   | 147 +++++++++
 .../test/specs/SelectMenuConnector.spec.js    |  43 +++
 16 files changed, 1437 insertions(+), 39 deletions(-)
 create mode 100644 packages/base/src/connectToComponent.ts
 create mode 100644 packages/main/src/SelectMenu.hbs
 create mode 100644 packages/main/src/SelectMenu.ts
 create mode 100644 packages/main/src/SelectMenuOption.ts
 create mode 100644 packages/main/src/themes/SelectMenu.css
 create mode 100644 packages/main/src/themes/SelectMenuOption.css
 create mode 100644 packages/main/test/pages/SelectMenu.html
 create mode 100644 packages/main/test/pages/SelectMenuLifecycle.html
 create mode 100644 packages/main/test/pages/styles/SelectMenu.css
 create mode 100644 packages/main/test/specs/SelectMenu.spec.js
 create mode 100644 packages/main/test/specs/SelectMenuConnector.spec.js

diff --git a/packages/base/src/connectToComponent.ts b/packages/base/src/connectToComponent.ts
new file mode 100644
index 000000000000..757b2c0dc32b
--- /dev/null
+++ b/packages/base/src/connectToComponent.ts
@@ -0,0 +1,74 @@
+import type UI5Element from "./UI5Element.js";
+import { renderDeferred } from "./Render.js";
+import { Interval } from "./types.js";
+
+const MISSING_ELEMENT_POLL_TIMEOUT = 500; // how often to poll for not-yet-in-DOM friend elements
+const connections = new Map<string, HTMLElement>();
+const intervals = new Map<string, Interval>();
+
+type ConnectOptions = {
+	host: UI5Element;
+	propName: string;
+	onConnect?: (friend: HTMLElement) => void;
+	onDisconnect?: (friend: HTMLElement) => void;
+}
+
+const connectToComponent = (options: ConnectOptions): HTMLElement | undefined => {
+	const host = options.host;
+	const propName = options.propName;
+	const friend = host[propName as keyof typeof host] as HTMLElement | string | undefined;
+
+	let connectedTo: HTMLElement | undefined;
+	if (friend === undefined || friend === "") {
+		connectedTo = undefined; // do not return early even if a "menu" property is not set - it may have been set before and cleanup must run
+	} else if (friend instanceof HTMLElement) {
+		connectedTo = friend;
+	} else {
+		connectedTo = (host.getRootNode() as Document).getElementById(friend) || undefined;
+	}
+
+	const key = `${host._id}-${propName}`;
+	const prevConnectedTo = connections.get(key);
+
+	// Not connected - return undefined
+	if (!connectedTo) {
+		if (prevConnectedTo) { // but first disconnect, if needed
+			options.onDisconnect && options.onDisconnect(prevConnectedTo);
+			connections.delete(key);
+		}
+
+		// if friend element not in DOM yet, start polling
+		if (typeof friend === "string" && friend && !intervals.has(key)) {
+			const interval = setInterval(() => {
+				const found = (host.getRootNode() as Document).getElementById(friend);
+				if (found) {
+					clearInterval(intervals.get(key));
+					intervals.delete(key);
+					renderDeferred(host);
+				}
+			}, MISSING_ELEMENT_POLL_TIMEOUT);
+			intervals.set(key, interval);
+		}
+
+		return;
+	}
+
+	// If connected, but still polling, stop polling
+	if (intervals.has(key)) {
+		clearInterval(intervals.get(key));
+		intervals.delete(key);
+	}
+
+	// Connected - either for the first time, or to something else
+	if (prevConnectedTo !== connectedTo) {
+		if (prevConnectedTo) {
+			options.onDisconnect && options.onDisconnect(prevConnectedTo);
+		}
+		options.onConnect && options.onConnect(connectedTo);
+		connections.set(key, connectedTo);
+	}
+
+	return connections.get(key);
+};
+
+export default connectToComponent;
diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js
index 80f2b4e1b78b..daf14400b286 100644
--- a/packages/main/bundle.common.js
+++ b/packages/main/bundle.common.js
@@ -60,6 +60,8 @@ import ResponsivePopover from "./dist/ResponsivePopover.js";
 import SegmentedButton from "./dist/SegmentedButton.js";
 import SegmentedButtonItem from "./dist/SegmentedButtonItem.js";
 import Select from "./dist/Select.js";
+import SelectMenu from "./dist/SelectMenu.js";
+import SelectMenuOption from "./dist/SelectMenuOption.js";
 import Slider from "./dist/Slider.js";
 import SplitButton from "./dist/SplitButton.js";
 import StepInput from "./dist/StepInput.js";
diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts
index 5cb6851aa478..6240ff43baaf 100644
--- a/packages/main/src/Interfaces.ts
+++ b/packages/main/src/Interfaces.ts
@@ -133,6 +133,15 @@ const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem";
  */
 const ISelectOption = "sap.ui.webc.main.ISelectOption";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-select-menu</code> as options
+ *
+ * @name sap.ui.webc.main.ISelectMenuOption
+ * @interface
+ * @public
+ */
+const ISelectMenuOption = "sap.ui.webc.main.ISelectMenuOption";
+
 /**
  * Interface for components that may be slotted inside <code>ui5-tabcontainer</code>
  *
@@ -221,6 +230,7 @@ export {
 	IMultiComboBoxItem,
 	ISegmentedButtonItem,
 	ISelectOption,
+	ISelectMenuOption,
 	ITab,
 	ITableCell,
 	ITableColumn,
diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
index 46ea0a0814e3..07ab3c52b523 100644
--- a/packages/main/src/ListItem.ts
+++ b/packages/main/src/ListItem.ts
@@ -536,4 +536,5 @@ export type {
 	IAccessibleListItem,
 	SelectionRequestEventDetail,
 	PressEventDetail,
+	AccessibilityAttributes,
 };
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
index 27f47fe7bdbf..8b378dd2848d 100644
--- a/packages/main/src/Select.hbs
+++ b/packages/main/src/Select.hbs
@@ -27,7 +27,11 @@
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 	>
-		{{_text}}
+		{{#if hasCustomLabel}}
+			<slot name="label"></slot>
+		{{else}}
+			{{_text}}
+		{{/if}}
 	</div>
 
 	<ui5-icon
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 8d9314976761..10a218a729ee 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.js";
 import {
 	isSpace,
 	isUp,
@@ -16,6 +17,7 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
@@ -68,21 +70,28 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
 import type FormSupport from "./features/InputElementsFormSupport.js";
 import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import type ListItemBase from "./ListItemBase.js";
+import type SelectMenu from "./SelectMenu.js";
+import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js";
 
 type SelectChangeEventDetail = {
-	selectedOption: Option,
+	selectedOption: IOption,
+}
+type SelectLiveChangeEventDetail = {
+	selectedOption: IOption,
 }
 
 interface IOption extends UI5Element {
+	id: string,
 	selected: boolean,
-	_focused: boolean,
+	_focused?: boolean,
+	focused?: boolean,
 	icon?: string | undefined,
 	value: string,
 	textContent: string | null,
 	title: string,
-	additionalText: string,
-	id: string,
-	stableDomRef: string,
+	additionalText?: string,
+	stableDomRef?: string,
+	displayText?: string,
 }
 
 /**
@@ -154,6 +163,20 @@ interface IOption extends UI5Element {
 		selectedOption: { type: HTMLElement },
 	},
 })
+/**
+ * Fired when the user navigates through the options, but the selection is not finalized,
+ * or when pressing the ESC key to revert the current selection.
+ *
+ * @event sap.ui.webc.main.Select#live-change
+ * @param {HTMLElement} selectedOption the selected option.
+ * @public
+ * @since 1.17.0
+ */
+@event("live-change", {
+	detail: {
+		option: { type: HTMLElement },
+	},
+})
 /**
  * Fired after the component's dropdown menu opens.
  *
@@ -171,6 +194,21 @@ interface IOption extends UI5Element {
 class Select extends UI5Element implements IFormElement {
 	static i18nBundle: I18nBundle;
 
+	/**
+	 * Defines a reference (ID or DOM element) of component's menu of options.
+	 * as alternative to define the select's dropdown.
+	 * <br><br>
+	 * <b>Note:</b> Usage of <code>ui5-select-menu</code> is recommended.
+	 *
+	 * @type {sap.ui.webc.base.types.DOMReference}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.Select.prototype.menu
+	 * @public
+	 * @since 1.17.0
+	 */
+	@property({ validator: DOMReference })
+	menu?: HTMLElement | string;
+
 	/**
 	 * Defines whether the component is in disabled state.
 	 * <br><br>
@@ -293,11 +331,17 @@ class Select extends UI5Element implements IFormElement {
 	@property({ type: Boolean })
 	focused!: boolean;
 
+	/**
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @private
+	 */
+	@property({ validator: Integer, defaultValue: -1, noAttribute: true })
+	_selectedIndex!: number;
+
 	_syncedOptions: Array<IOption>;
-	_selectedIndex: number;
 	_selectedIndexBeforeOpen: number;
 	_escapePressed: boolean;
-	_lastSelectedOption: Option | null;
+	_lastSelectedOption: IOption | null;
 	_typedChars: string;
 	_typingTimeoutID?: Timeout | number;
 	responsivePopover!: ResponsivePopover;
@@ -305,6 +349,8 @@ class Select extends UI5Element implements IFormElement {
 	valueStatePopover?: Popover;
 	value!: string;
 
+	selectMenu?: SelectMenu;
+
 	/**
 	 * Defines the component options.
 	 *
@@ -351,19 +397,62 @@ class Select extends UI5Element implements IFormElement {
 	@slot()
 	valueStateMessage!: Array<HTMLElement>;
 
+	/**
+	 * Defines the HTML element that will be displayed in the component input part,
+	 * representing the selected option.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> If not specified and <code>ui5-select-menu-option</code> is used,
+	 * either the option's <code>display-text</code> or its textContent will be displayed.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> If not specified and <code>ui5-opton</code> is used,
+	 * the option's textContent will be displayed.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.main.Select.prototype.label
+	 * @slot label
+	 * @public
+	 * @since 1.17.0
+	*/
+	@slot()
+	label!: Array<HTMLElement>;
+
+	_onMenuClick: (e: CustomEvent<SelectMenuOptionClick>) => void;
+	_onMenuClose: () => void;
+	_onMenuOpen: () => void;
+	_onMenuBeforeOpen: () => void;
+	_onMenuChange: (e: CustomEvent<SelectMenuChange>) => void;
+	_attachMenuListeners: (menu: HTMLElement) => void;
+	_detachMenuListeners: (menu: HTMLElement) => void;
+
 	constructor() {
 		super();
 
 		this._syncedOptions = [];
-		this._selectedIndex = -1;
 		this._selectedIndexBeforeOpen = -1;
 		this._escapePressed = false;
 		this._lastSelectedOption = null;
 		this._typedChars = "";
+
+		this._onMenuClick = this.onMenuClick.bind(this);
+		this._onMenuClose = this.onMenuClose.bind(this);
+		this._onMenuOpen = this.onMenuOpen.bind(this);
+		this._onMenuBeforeOpen = this.onMenuBeforeOpen.bind(this);
+		this._onMenuChange = this.onMenuChange.bind(this);
+		this._attachMenuListeners = this.attachMenuListeners.bind(this);
+		this._detachMenuListeners = this.detachMenuListeners.bind(this);
 	}
 
 	onBeforeRendering() {
-		this._syncSelection();
+		const menu = this._getSelectMenu();
+
+		if (menu) {
+			menu.value = this.value;
+		} else {
+			this._syncSelection();
+		}
+
 		this._enableFormSupport();
 
 		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
@@ -390,6 +479,12 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	get _isPickerOpen() {
+		const menu = this._getSelectMenu();
+
+		if (menu) {
+			return menu.open;
+		}
+
 		return !!this.responsivePopover && this.responsivePopover.opened;
 	}
 
@@ -402,20 +497,70 @@ class Select extends UI5Element implements IFormElement {
 	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
 	 * @type {sap.ui.webc.main.ISelectOption}
-     * @name sap.ui.webc.main.Select.prototype.selectedOption
+	 * @name sap.ui.webc.main.Select.prototype.selectedOption
 	 * @public
 	 */
 	get selectedOption() {
-		return this._filteredItems.find(option => option.selected);
+		return this.selectOptions.find(option => option.selected);
+	}
+
+	onMenuClick(e: CustomEvent<SelectMenuOptionClick>) {
+		const optionIndex: number = e.detail.optionIndex;
+		this._handleSelectionChange(optionIndex);
+	}
+
+	onMenuBeforeOpen() {
+		this._beforeOpen();
+	}
+
+	onMenuOpen() {
+		this._afterOpen();
+	}
+
+	onMenuClose() {
+		this._afterClose();
+	}
+
+	onMenuChange(e: CustomEvent<SelectMenuChange>) {
+		this._text = e.detail.text;
+		this._selectedIndex = e.detail.selectedIndex;
+	}
+
+	_toggleSelectMenu() {
+		const menu = this._getSelectMenu();
+
+		if (!menu) {
+			return;
+		}
+
+		if (menu.open) {
+			menu.close();
+		} else {
+			menu.showAt(this, this.offsetWidth);
+		}
+	}
+
+	onExitDOM(): void {
+		const menu = this._getSelectMenu();
+		if (menu) {
+			this._detachMenuListeners(menu);
+		}
 	}
 
 	async _toggleRespPopover() {
-		this._iconPressed = true;
-		this.responsivePopover = await this._respPopover();
 		if (this.disabled) {
 			return;
 		}
 
+		this._iconPressed = true;
+
+		const menu = this._getSelectMenu();
+		if (menu) {
+			this._toggleSelectMenu();
+			return;
+		}
+
+		this.responsivePopover = await this._respPopover();
 		if (this._isPickerOpen) {
 			this.responsivePopover.close();
 		} else {
@@ -483,6 +628,35 @@ class Select extends UI5Element implements IFormElement {
 		this._syncedOptions = syncOpts as Array<IOption>;
 	}
 
+	_getSelectMenu(): SelectMenu | undefined {
+		return connectToComponent({
+			host: this,
+			propName: "menu",
+			onConnect: this._attachMenuListeners,
+			onDisconnect: this._detachMenuListeners,
+		}) as SelectMenu;
+	}
+
+	attachMenuListeners(menu: HTMLElement) {
+		menu.addEventListener("ui5-after-close", this._onMenuClose);
+		menu.addEventListener("ui5-after-open", this._onMenuOpen);
+		menu.addEventListener("ui5-before-open", this._onMenuBeforeOpen);
+		// @ts-ignore
+		menu.addEventListener("ui5-option-click", this._onMenuClick);
+		// @ts-ignore
+		menu.addEventListener("ui5-menu-change", this._onMenuChange);
+	}
+
+	detachMenuListeners(menu: HTMLElement) {
+		menu.removeEventListener("ui5-after-close", this._onMenuClose);
+		menu.removeEventListener("ui5-after-open", this._onMenuOpen);
+		menu.removeEventListener("ui5-before-open", this._onMenuBeforeOpen);
+		// @ts-ignore
+		menu.removeEventListener("ui5-option-click", this._onMenuClick);
+		// @ts-ignore
+		menu.removeEventListener("ui5-menu-change", this._onMenuChange);
+	}
+
 	_enableFormSupport() {
 		const formSupport = getFeature<typeof FormSupport>("FormSupport");
 		if (formSupport) {
@@ -499,11 +673,14 @@ class Select extends UI5Element implements IFormElement {
 	_onkeydown(e: KeyboardEvent) {
 		const isTab = (isTabNext(e) || isTabPrevious(e));
 
-		if (isTab && this.responsivePopover && this.responsivePopover.opened) {
-			this.responsivePopover.close();
-		}
-
-		if (isShow(e)) {
+		if (isTab && this._isPickerOpen) {
+			const menu = this._getSelectMenu();
+			if (menu) {
+				menu.close(false, false, true /* preventFocusRestore */);
+			} else {
+				this.responsivePopover.close();
+			}
+		} else if (isShow(e)) {
 			e.preventDefault();
 			this._toggleRespPopover();
 		} else if (isSpace(e)) {
@@ -551,7 +728,7 @@ class Select extends UI5Element implements IFormElement {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._filteredItems.indexOf(itemToSelect);
+			const nextIndex = this.selectOptions.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -562,13 +739,13 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	_searchNextItemByText(text: string) {
-		let orderedOptions = this._filteredItems.slice(0);
+		let orderedOptions = this.selectOptions.slice(0);
 		const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
 		const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
 
 		orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected);
 
-		return orderedOptions.find(option => (option.textContent || "").toLowerCase().startsWith(text));
+		return orderedOptions.find(option => (option.displayText || option.textContent || "").toLowerCase().startsWith(text));
 	}
 
 	_handleHomeKey(e: KeyboardEvent) {
@@ -577,7 +754,7 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	_handleEndKey(e: KeyboardEvent) {
-		const lastIndex = this._filteredItems.length - 1;
+		const lastIndex = this.selectOptions.length - 1;
 
 		e.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, lastIndex);
@@ -594,13 +771,18 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	_getSelectedItemIndex(item: ListItemBase) {
-		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
+		return this.selectOptions.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index: number) {
-		this._filteredItems[this._selectedIndex].selected = false;
+		this.selectOptions[this._selectedIndex].selected = false;
+
+		if (this._selectedIndex !== index) {
+			this.fireEvent<SelectLiveChangeEventDetail>("live-change", { selectedOption: this.selectOptions[index] });
+		}
+
 		this._selectedIndex = index;
-		this._filteredItems[index].selected = true;
+		this.selectOptions[index].selected = true;
 	}
 
 	/**
@@ -657,23 +839,33 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	_changeSelectedItem(oldIndex: number, newIndex: number) {
-		const options = this._filteredItems;
+		const options: Array<IOption> = this.selectOptions;
 
-		options[oldIndex].selected = false;
-		options[oldIndex]._focused = false;
+		const previousOption = options[oldIndex];
+		previousOption.selected = false;
+		previousOption._focused = false;
+		previousOption.focused = false;
 
-		options[newIndex].selected = true;
-		options[newIndex]._focused = true;
+		const nextOption = options[newIndex];
+		nextOption.selected = true;
+		nextOption._focused = true;
+		nextOption.focused = true;
 
 		this._selectedIndex = newIndex;
 
+		this.fireEvent<SelectLiveChangeEventDetail>("live-change", { selectedOption: nextOption });
+
 		if (!this._isPickerOpen) {
 			// arrow pressed on closed picker - do selection change
-			this._fireChangeEvent(options[newIndex]);
+			this._fireChangeEvent(nextOption);
 		}
 	}
 
 	_getNextOptionIndex() {
+		const menu = this._getSelectMenu();
+		if (menu) {
+			return this._selectedIndex === (menu.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
+		}
 		return this._selectedIndex === (this.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
 	}
 
@@ -683,7 +875,7 @@ class Select extends UI5Element implements IFormElement {
 
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
-		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this._lastSelectedOption = this.selectOptions[this._selectedIndex];
 	}
 
 	_afterOpen() {
@@ -700,19 +892,32 @@ class Select extends UI5Element implements IFormElement {
 		if (this._escapePressed) {
 			this._select(this._selectedIndexBeforeOpen);
 			this._escapePressed = false;
-		} else if (this._lastSelectedOption !== this._filteredItems[this._selectedIndex]) {
-			this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
-			this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		} else if (this._lastSelectedOption !== this.selectOptions[this._selectedIndex]) {
+			this._fireChangeEvent(this.selectOptions[this._selectedIndex]);
+			this._lastSelectedOption = this.selectOptions[this._selectedIndex];
 		}
 		this.fireEvent<CustomEvent>("close");
 	}
 
-	_fireChangeEvent(selectedOption: Option) {
+	get selectOptions(): Array<IOption> {
+		const menu = this._getSelectMenu();
+		if (menu) {
+			return menu.options;
+		}
+		return this._filteredItems;
+	}
+
+	get hasCustomLabel() {
+		return !!this.label.length;
+	}
+
+	_fireChangeEvent(selectedOption: IOption) {
 		const changePrevented = !this.fireEvent<SelectChangeEventDetail>("change", { selectedOption }, true);
 
 		//  Angular two way data binding
 		this.selectedItem = selectedOption.textContent;
 		this.fireEvent("selected-item-changed");
+
 		if (changePrevented) {
 			this.selectedItem = this._lastSelectedOption!.textContent;
 			this._select(this._selectedIndexBeforeOpen);
@@ -774,7 +979,7 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	get _currentlySelectedOption() {
-		return this._filteredItems[this._selectedIndex];
+		return this.selectOptions[this._selectedIndex];
 	}
 
 	get _effectiveTabIndex() {
@@ -866,7 +1071,7 @@ class Select extends UI5Element implements IFormElement {
 
 	itemSelectionAnnounce() {
 		let text;
-		const optionsCount = this._filteredItems.length;
+		const optionsCount = this.selectOptions.length;
 		const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
 
 		if (this.focused && this._currentlySelectedOption) {
@@ -914,5 +1119,6 @@ Select.define();
 export default Select;
 export type {
 	SelectChangeEventDetail,
+	SelectLiveChangeEventDetail,
 	IOption,
 };
diff --git a/packages/main/src/SelectMenu.hbs b/packages/main/src/SelectMenu.hbs
new file mode 100644
index 000000000000..bc08ff919a67
--- /dev/null
+++ b/packages/main/src/SelectMenu.hbs
@@ -0,0 +1,57 @@
+<ui5-responsive-popover
+	class="ui5-select-menu"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	@ui5-after-open="{{_onAfterOpen}}"
+	@ui5-after-close="{{_onAfterClose}}"
+	@ui5-before-open="{{_onBeforeOpen}}"
+	hide-arrow
+	_disable-initial-focus
+	style={{styles.responsivePopover}}
+	>
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_onCloseBtnClick}}"
+					>
+					</ui5-button>
+				</div>
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+			</div>
+		{{/if}}
+		{{#unless _isPhone}}
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+						<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+		{{/unless}}
+
+		<ui5-list 
+			mode="SingleSelect"
+			separators="None"
+			@ui5-item-click="{{_onOptionClick}}">
+					<slot></slot>
+		</ui5-list>
+</ui5-responsive-popover>
+
+
+{{#*inline "valueStateMessage"}}
+	{{#if hasValueStateSlot}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{else}}
+		{{ valueStateText }}
+	{{/if}}
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts
new file mode 100644
index 000000000000..b8205ecd014f
--- /dev/null
+++ b/packages/main/src/SelectMenu.ts
@@ -0,0 +1,301 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+
+// Template
+import SelectMenuTemplate from "./generated/templates/SelectMenuTemplate.lit.js";
+
+// Styles
+import SelectMenuCss from "./generated/themes/SelectMenu.css.js";
+import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+
+// Deps
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import Button from "./Button.js";
+
+// Types
+import type Select from "./Select.js";
+import type SelectMenuOption from "./SelectMenuOption.js";
+
+type SelectMenuOptionClick = {
+	option: SelectMenuOption,
+	optionIndex: number,
+};
+
+type SelectMenuChange = {
+	text: string,
+	selectedIndex: number,
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative
+ * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.
+ * <br></br>
+ * The component gives the possibilty to the user to customize the <code>ui5-select</code>'s dropdown
+ * by slotting custom options and adding custom styles.
+ *
+ * <h3>Usage</h3>
+ *
+ * To use <code>ui5-select</code> with a <code>ui5-select-menu</code>,
+ * you need to set the <code>ui5-select</code> <code>menu</code> property to reference <code>ui5-select-menu</code> either by ID or DOM reference.
+ * <br></br>
+ *
+ * For the <code>ui5-select-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenu.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenu
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-select-menu
+ * @public
+ * @since 1.17.0
+ */
+@customElement({
+	tag: "ui5-select-menu",
+	renderer: litRender,
+	styles: [SelectMenuCss, ValueStateMessageCss, ResponsivePopoverCommonCss],
+	template: SelectMenuTemplate,
+	dependencies: [
+		ResponsivePopover,
+		List,
+		Button,
+	],
+})
+@event("option-click", {
+	detail: {
+		option: { type: HTMLElement },
+		optionIndex: { type: Integer },
+	},
+})
+@event("before-open")
+@event("after-open")
+@event("after-close")
+@event("menu-change", {
+	detail: {
+		text: { type: String },
+		selectedIndex: { type: Integer },
+	},
+})
+class SelectMenu extends UI5Element {
+	constructor() {
+		super();
+
+		this.valueStateMessageText = [];
+	}
+
+	/**
+	 * Defines the options of the component.
+	 *
+	 * @type {sap.ui.webc.main.ISelectMenuOption[]}
+	 * @name sap.ui.webc.main.SelectMenu.prototype.default
+	 * @slot
+	 * @public
+	 */
+	@slot({
+		"default": true,
+		type: HTMLElement,
+		invalidateOnChildChange: true,
+	})
+	options!: Array<SelectMenuOption>;
+
+	/**
+	 * Defines the width of the component.
+	 *
+	 * @type { number }
+	 * @name sap.ui.webc.main.SelectMenu.prototype.selectWidth
+	 * @private
+	 */
+	@property({ validator: Integer })
+	selectWidth?: number;
+
+	@property({ type: Boolean })
+	hasValueState!: boolean;
+
+	@property({ type: Boolean })
+	hasValueStateSlot!: boolean;
+
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	valueState!: `${ValueState}`;
+
+	@property()
+	valueStateText!: string;
+
+	@property()
+	value!: string;
+
+	valueStateMessageText: Array<Node>;
+
+	_headerTitleText?: string;
+
+	select?: Select;
+
+	/**
+	 * Shows the dropdown at the given element.
+	 */
+	showAt(opener: Select, openerWidth: number) {
+		this.selectWidth = openerWidth;
+		this.respPopover.open = true;
+		this.respPopover.opener = opener;
+		this.hasValueState = !!opener.hasValueState;
+		this.hasValueStateSlot = opener.valueStateMessageText.length > 0;
+		this.valueStateText = opener.valueStateText;
+		this.valueStateMessageText = opener.valueStateMessageText;
+		this.valueState = opener.valueState;
+
+		this._headerTitleText = opener._headerTitleText;
+	}
+
+	/**
+	 * Closes the dropdown.
+	 */
+	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+		this.respPopover.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+	}
+
+	onBeforeRendering() {
+		this._syncSelection();
+	}
+
+	_syncSelection() {
+		let lastSelectedOptionIndex = -1,
+			firstEnabledOptionIndex = -1,
+			text,
+			selectedIndex;
+		const options = this.options;
+		options.forEach((opt, index) => {
+			if (opt.selected || opt.textContent === this.value) {
+				// The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
+				lastSelectedOptionIndex = index;
+			}
+			if (firstEnabledOptionIndex === -1) {
+				firstEnabledOptionIndex = index;
+			}
+
+			opt.selected = false;
+			opt.focused = false;
+			return opt;
+		});
+
+		if (lastSelectedOptionIndex > -1) {
+			const lastSelectedOption = options[lastSelectedOptionIndex];
+			lastSelectedOption.selected = true;
+			lastSelectedOption.focused = true;
+			text = lastSelectedOption.displayText || String(lastSelectedOption.textContent);
+			selectedIndex = lastSelectedOptionIndex;
+		} else {
+			text = "";
+			selectedIndex = -1;
+			const firstSelectedOption = options[firstEnabledOptionIndex];
+			if (firstSelectedOption) {
+				firstSelectedOption.selected = true;
+				firstSelectedOption.focused = true;
+				selectedIndex = firstEnabledOptionIndex;
+				text = firstSelectedOption.displayText || String(firstSelectedOption.textContent);
+			}
+		}
+
+		this.fireEvent<SelectMenuChange>("menu-change", {
+			text,
+			selectedIndex,
+		});
+	}
+
+	_onOptionClick(e: CustomEvent) {
+		const option = e.detail.item;
+		const optionIndex = this.options.findIndex(_option => option.__id === _option.__id);
+
+		this.fireEvent<SelectMenuOptionClick>("option-click", {
+			option,
+			optionIndex,
+		});
+	}
+
+	_onBeforeOpen() {
+		this.fireEvent<CustomEvent>("before-open");
+	}
+
+	_onAfterOpen() {
+		this.fireEvent<CustomEvent>("after-open");
+	}
+
+	_onAfterClose() {
+		this.fireEvent<CustomEvent>("after-close");
+	}
+
+	_onCloseBtnClick() {
+		this.close();
+	}
+
+	get open() {
+		return !!this.respPopover?.open;
+	}
+
+	get respPopover() {
+		return this.shadowRoot!.querySelector<ResponsivePopover>(".ui5-select-menu")!;
+	}
+
+	get classes() {
+		return {
+			popoverValueState: {
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			},
+			popover: {
+				"ui5-select-popover-valuestate": this.hasValueState,
+			},
+		};
+	}
+
+	get styles() {
+		return {
+			responsivePopoverHeader: {
+				"display": this.options.length && this.respPopover?.offsetWidth === 0 ? "none" : "inline-block",
+				"width": `${this.options.length ? this.respPopover?.offsetWidth : this.selectWidth || "auto"}px`,
+			},
+			responsivePopover: {
+				"min-width": `${this.selectWidth!}px`,
+			},
+		};
+	}
+
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
+	get _isPhone() {
+		return isPhone();
+	}
+}
+
+SelectMenu.define();
+
+export default SelectMenu;
+export type {
+	SelectMenuOptionClick,
+	SelectMenuChange,
+};
diff --git a/packages/main/src/SelectMenuOption.ts b/packages/main/src/SelectMenuOption.ts
new file mode 100644
index 000000000000..ef3c3a7539fa
--- /dev/null
+++ b/packages/main/src/SelectMenuOption.ts
@@ -0,0 +1,130 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import type { IOption } from "./Select.js";
+
+// Template
+import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+
+// Styles
+import CustomListItem from "./CustomListItem.js";
+import ListItemType from "./types/ListItemType.js";
+import type { AccessibilityAttributes } from "./ListItem.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The code>ui5-select-menu-option</code> component represents an option in the <code>ui5-select-menu</code>.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-select-menu-option</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenuOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @implements sap.ui.webc.main.ISelectMenuOption
+ * @tagname ui5-select-menu-option
+ * @public
+ * @since 1.17.0
+ */
+@customElement({
+	tag: "ui5-select-menu-option",
+	renderer: litRender,
+	styles: CustomListItem.styles,
+	template: CustomListItemTemplate,
+	dependencies: [],
+})
+class SelectMenuOption extends CustomListItem implements IOption {
+	/**
+	 * Defines the text, displayed inside the <code>ui5-select</code> input filed
+	 * when the option gets selected.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.displayText
+	 * @public
+	 */
+	@property()
+	displayText!: string;
+
+	/**
+	 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
+	 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.value
+	 * @public
+	 */
+	@property()
+	value!: string;
+
+	/**
+	 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+	 *
+	 * @type {sap.ui.webc.main.types.ListItemType}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.type
+	 * @defaultvalue "Active"
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: ListItemType, defaultValue: ListItemType.Active })
+	type!: `${ListItemType}`;
+
+	/**
+	 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+	 *
+	 * @type {object}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.accessibilityAttributes
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Object })
+	accessibilityAttributes!: AccessibilityAttributes;
+
+	/**
+	 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+	 *
+	 * @public
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.navigated
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	navigated!: boolean;
+
+	/**
+	 * Defines the content of the component.
+	 * <br><br>
+	 *
+	 * @type {Node[]}
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	/**
+	 * <b>Note:</b> The slot is inherited and not supported. If set, it won't take any effect.
+	 *
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton
+	 * @slot
+	 * @public
+	 * @deprecated
+	 */
+
+	get _accInfo() {
+		const accInfoSettings = {
+			ariaSelected: this.selected,
+		};
+		return { ...super._accInfo, ...accInfoSettings };
+	}
+}
+
+SelectMenuOption.define();
+
+export default SelectMenuOption;
diff --git a/packages/main/src/themes/SelectMenu.css b/packages/main/src/themes/SelectMenu.css
new file mode 100644
index 000000000000..5aa992cc0d79
--- /dev/null
+++ b/packages/main/src/themes/SelectMenu.css
@@ -0,0 +1,16 @@
+.ui5-select-menu::part(content),
+.ui5-select-menu::part(header) {
+	padding: 0;
+}
+
+.ui5-select-menu [ui5-li-custom] {
+	height: var(--_ui5_list_item_dropdown_base_height);
+}
+
+.ui5-select-menu [ui5-li-custom]::part(native-li) {
+	padding: 0;
+}
+
+.ui5-select-menu [ui5-icon] {
+	color: var(--sapList_TextColor);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/SelectMenuOption.css b/packages/main/src/themes/SelectMenuOption.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html
new file mode 100644
index 000000000000..18a1f2140060
--- /dev/null
+++ b/packages/main/test/pages/SelectMenu.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>ui5-select-menu</title>
+
+	<script src="../../bundle.esm.js" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/SelectMenu.css">
+</head>
+
+<body class="selectMenu-bg">
+	<div class="selectMenu-app">
+
+		<label id="lblOpt"></label><br>
+		<label id="lbl"></label><br>
+		<label id="lblLive"></label><br>
+		<label id="lblOpen"></label><br>
+		<label id="lblClose"></label><br>
+
+		<div class="app-inner">
+			<section>
+				<ui5-title>Select + SelectMenu + SelectMenuOption</ui5-title><br>
+
+				<ui5-select id="sel" menu="selectOptions">
+					<div class="selectLabel" slot="label">
+						<span id="mainText">Skirt [3]</span>
+						<ui5-avatar id="avatar" size="XS" initials="S"></ui5-avatar>
+					</div>
+				</ui5-select>
+	
+				<ui5-select menu="selectOptions2" value-state="Error">
+					<div slot="valueStateMessage">Information message. This is a <a href="#test1">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+				</ui5-select>
+	
+				<ui5-select menu="selectOptions3" value-state="Information"></ui5-select>
+			</section>
+			
+			<section>
+				<ui5-title>Select+ SelectMenu Test setup</ui5-title><br>
+		
+				<ui5-input id="testChange" placeholder="change fired 0"></ui5-input><br>
+				<ui5-input id="testPreview" placeholder="live-change fired 0"></ui5-input><br>
+				<ui5-input id="testOpen" placeholder="open fired 0"></ui5-input><br>
+				<ui5-input id="testClose" placeholder="close fired 0"></ui5-input><br>
+		
+				<ui5-select id="selTest" menu="selectOptionsTest"></ui5-select>
+				
+		
+				<ui5-button id="clearCounter">Reset counters</ui5-button>
+				<ui5-button id="btnFocusOut">Focus out</ui5-button>
+			</section>
+
+			<section>
+				<ui5-title>Select + Option</ui5-title><br>
+
+				<ui5-select id="selectPrevent">
+					<ui5-option>Cozy</ui5-option>
+					<ui5-option>Compact</ui5-option>
+					<ui5-option selected>Condensed</ui5-option>
+				</ui5-select>
+			
+				<ui5-select id="errorSelect" value-state="Error">
+					<ui5-option selected>Cozy</ui5-option>
+					<ui5-option selected>Compact</ui5-option>
+					<ui5-option selected>Condensed</ui5-option>
+				</ui5-select>
+			</section>
+		</div>
+	</div>
+
+	<ui5-select-menu id="selectOptions">
+
+		<ui5-select-menu-option data-display-text="T-shirt [1]" data-additional-text="S" accessible-name="T-shirt size S">
+			<div class="selectMenuOption">
+				T-shirt [1]
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option data-display-text="Dress [2]" data-additional-text="M" accessible-name="Dress size M" style="background-color: red">
+			<div class="selectMenuOption selectMenuOption--warning">
+				Dress [2]
+				<div>
+					<ui5-icon name="accept" class="selectMenuOptionIcon--warning"></ui5-icon>
+					<ui5-icon name="employee" class="selectMenuOptionIcon--warning"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option data-display-text="Skirt [3]" data-additional-text="L" accessible-name="Skirt size L" selected>
+			<div  class="selectMenuOption">
+				Skirt [3]
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+	</ui5-select-menu>
+
+	<ui5-select-menu id="selectOptions2">
+
+		<ui5-select-menu-option display-text="Phone">
+			<div class="selectMenuOption">
+				Phone
+				<div>
+					<ui5-icon name="phone"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="Tablet">
+			<div class="selectMenuOption">
+				Tablet
+				<div>
+					<ui5-icon name="ipad-2"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="Desktop">
+			<div class="selectMenuOption">
+				Desktop
+				<div>
+					<ui5-icon name="laptop"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+	</ui5-select-menu>
+
+	<ui5-select-menu id="selectOptions3">
+
+		<ui5-select-menu-option display-text="item text [1]" selected>
+			<div class="selectMenuOption">
+				Item 1 Text
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="item text [2]" selected>
+			<div class="selectMenuOption">
+				Item 2 Text
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="item text [3]" selected>
+			<div class="selectMenuOption">
+				Item 3 Text
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+	</ui5-select-menu>
+
+	<ui5-select-menu id="selectOptionsTest">
+		<ui5-select-menu-option id="selOption1" display-text="item1">
+			<div>Item 1</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option id="selOption2" display-text="item2">
+			<div>Item 2</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option id="selOption3" display-text="item3">
+			<div>Item 3</div>
+		</ui5-select-menu-option>
+	</ui5-select-menu>
+
+	<script>
+		let counter = 0;
+		let liveCounter = 0;
+		let closeCounter = 0;
+		let openCounter = 0;
+
+		sel.addEventListener("ui5-change", function(e) {
+			lbl.innerHTML = "CHANGE EVENT :: " + e.detail.selectedOption.localName + " :: <" + e.detail.selectedOption.textContent + "> :: event counter :: <" + (++counter) + ">";
+		});
+
+		sel.addEventListener("ui5-live-change", function(e) {
+			lblLive.innerHTML = "PREVIEW CHANGE EVENT :: " + e.detail.selectedOption.localName + " :: <" + e.detail.selectedOption.textContent + "> :: event counter :: <" + (++liveCounter) + ">";
+			mainText.innerHTML = e.detail.selectedOption.getAttribute("data-display-text")
+			avatar.initials = e.detail.selectedOption.getAttribute("data-additional-text");
+		});
+
+		sel.addEventListener("ui5-close", function(e) {
+			lblClose.innerHTML = "CLOSE EVENT :: counter :: <" + (++closeCounter) + ">";
+		});
+
+		sel.addEventListener("ui5-open", function(e) {
+			lblOpen.innerHTML = "OPEN EVENT :: counter :: <"+ (++openCounter) + ">";
+		});
+
+		// Tests
+		let testChangeCounter = 0;
+		let testPreviewCounter = 0;
+		let testOpenCounter = 0;
+		let testCloseCounter = 0;
+		
+		selTest.addEventListener("ui5-change", function(e) {
+			testChange.value = ++testChangeCounter;
+		});
+		selTest.addEventListener("ui5-live-change", function(e) {
+			testPreview.value = ++testPreviewCounter;
+		});
+		selTest.addEventListener("ui5-open", function(e) {
+			testOpen.value = ++testOpenCounter;
+		});
+		selTest.addEventListener("ui5-close", function(e) {
+			testClose.value = ++testCloseCounter;
+		});
+
+		clearCounter.addEventListener("click", function(e) {
+			testChangeCounter = 0;
+			testPreviewCounter = 0;
+			testOpenCounter = 0;
+			testCloseCounter = 0;
+
+			testChange.value = testChangeCounter;
+			testPreview.value = testPreviewCounter;
+			testOpen.value = testOpenCounter;
+			testClose.value = testCloseCounter;
+		});
+	</script>
+</html>
diff --git a/packages/main/test/pages/SelectMenuLifecycle.html b/packages/main/test/pages/SelectMenuLifecycle.html
new file mode 100644
index 000000000000..0f7d9275a209
--- /dev/null
+++ b/packages/main/test/pages/SelectMenuLifecycle.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>ui5-select-menu</title>
+
+	<script src="../../bundle.esm.js" type="module"></script>
+
+	<style>
+		:not(:defined) {
+			visibility: hidden;
+		}
+
+		ui5-select-menu-option[active] div,
+		ui5-select-menu-option[active] ui5-icon {
+			color: var(--sapList_Active_TextColor);
+		}
+
+		.selectLabel {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-inline-end: 0.25rem;
+			font-size: 1rem;
+		}
+
+		.customOption {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width:100%;
+		}
+		.customOption--warning {
+			color: yellow;
+		}
+		.customOptionIcon {
+			color: yellow;
+		}
+	</style>
+
+</head>
+
+<body>
+	<ui5-select id="sel1" menu="NO_MENU_WITH_THIS_ID"></ui5-select>
+
+	<ui5-select id="sel2" menu="menu2">
+		<ui5-option>Regular option 1</ui5-option>
+		<ui5-option selected>Regular option 2</ui5-option>
+		<ui5-option>Regular option 3</ui5-option>
+	</ui5-select>
+
+
+	<ui5-select-menu id="menu1">
+
+		<ui5-select-menu-option data-display-text="T-shirt [1]" data-additional-text="S" accessible-name="T-shirt size S">
+			<div class="customOption">
+				T-shirt [1]
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option data-display-text="Dress [2]" data-additional-text="M" accessible-name="Dress size M" style="background-color: red">
+			<div class="customOption customOption--warning">
+				Dress [2]
+				<div>
+					<ui5-icon name="accept" class="customOptionIcon"></ui5-icon>
+					<ui5-icon name="employee" class="customOptionIcon"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option data-display-text="Skirt [3]" data-additional-text="L" accessible-name="Skirt size L" selected>
+			<div  class="customOption">
+				Skirt [3]
+				<div>
+					<ui5-icon name="accept"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+	</ui5-select-menu>
+
+	<ui5-select-menu id="menu2">
+
+		<ui5-select-menu-option display-text="Phone">
+			<div class="customOption">
+				Phone
+				<div>
+					<ui5-icon name="phone"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="Tablet">
+			<div class="customOption">
+				Tablet
+				<div>
+					<ui5-icon name="ipad-2"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+		<ui5-select-menu-option display-text="Desktop">
+			<div class="customOption">
+				Desktop
+				<div>
+					<ui5-icon name="laptop"></ui5-icon>
+					<ui5-icon name="employee"></ui5-icon>
+				</div>
+			</div>
+		</ui5-select-menu-option>
+
+	</ui5-select-menu>
+</body>
+</html>
diff --git a/packages/main/test/pages/styles/SelectMenu.css b/packages/main/test/pages/styles/SelectMenu.css
new file mode 100644
index 000000000000..0f7eb59a5d5b
--- /dev/null
+++ b/packages/main/test/pages/styles/SelectMenu.css
@@ -0,0 +1,42 @@
+
+:not(:defined) {
+    visibility: hidden;
+}
+
+section {
+    margin-bottom: 2rem;
+}
+
+.selectMenu-bg {
+    background-color: var(--sapBackgroundColor);
+}
+
+.selectMenu-app {
+    transform: translate(100px, 100px);
+}
+
+.selectMenuOption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+}
+.selectMenuOption--warning {
+    color: yellow;
+}
+.selectMenuOptionIcon--warning {
+    color: yellow;
+}
+
+.selectLabel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-end: 0.25rem;
+    font-size: 1rem;
+}
+
+ui5-select-menu-option[active] div,
+ui5-select-menu-option[active] ui5-icon {
+    color: var(--sapList_Active_TextColor);
+}
\ No newline at end of file
diff --git a/packages/main/test/specs/SelectMenu.spec.js b/packages/main/test/specs/SelectMenu.spec.js
new file mode 100644
index 000000000000..9e79a38b9392
--- /dev/null
+++ b/packages/main/test/specs/SelectMenu.spec.js
@@ -0,0 +1,147 @@
+import { assert } from "chai";
+
+describe("Select Menu general interaction", () => {
+	before(async () => {
+		await browser.url(`test/pages/SelectMenu.html`);
+	});
+
+	it("first option is selected by default", async () => {
+		const select = await browser.$("#selTest");
+		const selectText = select.shadow$(".ui5-select-label-root");
+		const EXPECTED_SELECTION_TEXT = "item1";
+
+		const selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct.");
+	});
+
+	it("fires 'open' and 'close' events", async () => {
+		const select = await browser.$("#selTest");
+		const inpTestOpen = await browser.$("#testOpen");
+		const inpTestClose = await browser.$("#testClose");
+
+		await select.click();
+		assert.strictEqual(await inpTestOpen.getProperty("value"), "1", "Fired 'open' event once.");
+
+		await select.click();
+		assert.strictEqual(await inpTestClose.getProperty("value"), "1", "Fired 'close' event once.");
+	});
+
+	it("changes selection with Arrow Up/Down when menu is closed", async () => {
+		const select = await browser.$("#selTest");
+		const selectText = select.shadow$(".ui5-select-label-root");
+		const inpTestChange = await browser.$("#testChange");
+		
+		const EXPECTED_SELECTION_TEXT1 = "item2";
+		const EXPECTED_SELECTION_TEXT2 = "item1";
+
+		// make sure focus is on closed select
+		await select.click();
+		await select.keys("Escape");
+
+		await select.keys("ArrowDown");
+		let selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Arrow Up should change selected item");
+
+		await select.keys("ArrowUp");
+		selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Arrow Down should change selected item");
+
+		assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Change event should have fired twice");
+	});
+
+	it("fires 'change' and 'live-change' on click", async () => {
+		const btnRest = await browser.$("#clearCounter");
+		await btnRest.click();
+
+		const select = await browser.$("#selTest");
+		const selectText = select.shadow$(".ui5-select-label-root");
+		const secondItem = await browser.$("#selOption2");
+		const EXPECTED_SELECTION_TEXT = "item2";
+		const inpTestChange = await browser.$("#testChange");
+		const inpTestPreviewChange = await browser.$("#testPreview");
+
+		await select.click();
+		await secondItem.click();
+
+		assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired 'live-change' event once.");
+		assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Fired 'change' event once.");
+
+		const selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct.");
+	});
+
+	it("fires 'change' and 'live-change' on Arrow Down, Arrow Up", async () => {
+		const btnRest = await browser.$("#clearCounter");
+		await btnRest.click();
+
+		const select = await browser.$("#selTest");
+		const selectText = select.shadow$(".ui5-select-label-root");
+
+		const inpTestChange = await browser.$("#testChange");
+		const inpTestPreviewChange = await browser.$("#testPreview");
+
+		const EXPECTED_SELECTION_TEXT1 = "item3";
+		const EXPECTED_SELECTION_TEXT2 = "item2";
+
+		await select.click();
+		await select.keys("ArrowDown");
+		await select.keys("Enter");
+
+		assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired 'live-change' event once.");
+		assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Fired 'change' event once.");
+		let selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Select label is correct.");
+
+		await select.click();
+		await select.keys("ArrowUp");
+		await select.keys("Space");
+
+		assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "2", "Fired 'live-change' once more.");
+		assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Fired 'change' event once more.");
+		selectTextHtml = await selectText.getHTML(false);
+		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Select label is correct.");
+	});
+
+	it("reverts value on ESC key", async () => {
+		const btnRest = await browser.$("#clearCounter");
+		await btnRest.click();
+
+		const inpTestChange = await browser.$("#testChange");
+		const inpTestPreviewChange = await browser.$("#testPreview");
+
+		const select = await browser.$("#selTest");
+		const selectText = select.shadow$(".ui5-select-label-root");
+		const selectTextHtml = await selectText.getHTML(false);
+		const selectedOption = await browser.$("#selectOptionsTest ui5-select-menu-option[selected]");
+
+		await select.click();
+		await select.keys("ArrowDown");
+		await select.keys("Escape");
+
+		const selectTextAfterEscape = await select.shadow$(".ui5-select-label-root").getHTML(false);
+
+		assert.ok(await selectedOption.getProperty("selected"), "Initially selected item should remain selected");
+		assert.strictEqual(await inpTestChange.getProperty("value"), "0", "Change event is not fired");
+		assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "2", "Fired 'live-change' twice - ArrDown and ESC.");
+		assert.strictEqual(selectTextAfterEscape, selectTextHtml, "Select label is correct.");
+	});
+
+	it("fires 'change' event after preview selection + focusout", async () => {
+		const btnRest = await browser.$("#clearCounter");
+		await btnRest.click();
+
+		const select = await browser.$("#selTest");
+		const btn = await browser.$("#btnFocusOut");
+		const inpTestChange = await browser.$("#testChange");
+		const inpTestPreviewChange = await browser.$("#testPreview");
+
+		await select.click();
+		await select.keys("ArrowUp");
+		assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired live-change event once.");
+
+		// focus out select
+		await btn.click();
+
+		assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Change event should be fired after focus out");
+	});
+});
diff --git a/packages/main/test/specs/SelectMenuConnector.spec.js b/packages/main/test/specs/SelectMenuConnector.spec.js
new file mode 100644
index 000000000000..4a15ed4527fe
--- /dev/null
+++ b/packages/main/test/specs/SelectMenuConnector.spec.js
@@ -0,0 +1,43 @@
+import { assert } from "chai";
+
+describe("Select Menu Connector integration", () => {
+	beforeEach(async () => {
+		await browser.url(`test/pages/SelectMenuLifecycle.html`);
+	});
+
+	it("Changing the menu property connects and disconnects", async () => {
+		const select = await browser.$("#sel1");
+		const selectLabel = select.shadow$(".ui5-select-label-root");
+
+		let selectText = await selectLabel.getText();
+		assert.strictEqual(selectText, "", "Select with no options and no menu is empty.");
+
+		// Connect the select to a menu
+		await select.setAttribute("menu", "menu1");
+
+		selectText = await selectLabel.getText();
+		assert.include(selectText, "Skirt [3]", "When connected to a menu, the select should update its label");
+
+		// Connect the select to another menu
+		await select.setAttribute("menu", "menu2");
+
+		selectText = await selectLabel.getText();
+		assert.include(selectText, "Phone", "When connected to another menu, the select should update its label");
+	});
+
+	it("Waiting for a menu to be rendered works", async () => {
+		const select = await browser.$("#sel1");
+		const menu = await browser.$("#menu1");
+		const selectLabel = select.shadow$(".ui5-select-label-root");
+
+		let selectText = await selectLabel.getText();
+		assert.strictEqual(selectText, "", "Select with no options and no menu is empty.");
+
+		// A menu on the page now matches the "menu" property of the select
+		await menu.setAttribute("id", "NO_MENU_WITH_THIS_ID");
+		await browser.pause(1000); // wait for the polling to take effect
+
+		selectText = await selectLabel.getText();
+		assert.include(selectText, "Skirt [3]", "When connected to a menu, the select should update its label");
+	});
+});

From aaa7a8fee3fff9e2505e7c49ccebf14b17b8adc3 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 25 Aug 2023 12:50:03 +0200
Subject: [PATCH 25/33] docs(ui5-shellbar-item): adjust `text` description &
 remove `native` annotation from `click` event (#7457)

---
 packages/fiori/src/ShellBarItem.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/ShellBarItem.ts b/packages/fiori/src/ShellBarItem.ts
index cd8fb9bbb0f2..62ada4889dcf 100644
--- a/packages/fiori/src/ShellBarItem.ts
+++ b/packages/fiori/src/ShellBarItem.ts
@@ -32,7 +32,6 @@ type ShellBarItemClickEventDetail = {
  * @allowPreventDefault
  * @param {HTMLElement} targetRef DOM ref of the clicked element
  * @public
- * @native
  */
 @event("click", {
 	detail: {
@@ -53,6 +52,8 @@ class ShellBarItem extends UI5Element {
 
 	/**
 	 * Defines the item text.
+     * <br><br>
+     * <b>Note:</b> The text is only displayed inside the overflow popover list view.
 	 * @type {string}
 	 * @defaultvalue ""
 	 * @name sap.ui.webc.fiori.ShellBarItem.prototype.text

From ad36491d6620a666e834812cc78580f4fabda404 Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Fri, 25 Aug 2023 17:25:47 +0300
Subject: [PATCH 26/33] fix(ui5-tabcontainer): thicken selection border in
 Horizon HCB/HCW (#7477)

Co-authored-by: Vladislav Tasev <vladislav.tasev@sap.com>
---
 .../main/src/themes/sap_horizon_hcb/TabContainer-parameters.css | 2 +-
 .../src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css  | 2 +-
 .../main/src/themes/sap_horizon_hcw/TabContainer-parameters.css | 2 +-
 .../src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
index 425980b7f817..d21ab594a4d6 100644
--- a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
@@ -4,7 +4,7 @@
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapPageHeader_BorderColor);
 
 	/* Header Item */
-	--_ui5_tc_headerItemContent_border_bottom: 0.25rem solid var(--sapPageHeader_BorderColor);
+	--_ui5_tc_headerItemContent_border_bottom: 0.3125rem solid var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css
index 425980b7f817..d21ab594a4d6 100644
--- a/packages/main/src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css
@@ -4,7 +4,7 @@
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapPageHeader_BorderColor);
 
 	/* Header Item */
-	--_ui5_tc_headerItemContent_border_bottom: 0.25rem solid var(--sapPageHeader_BorderColor);
+	--_ui5_tc_headerItemContent_border_bottom: 0.3125rem solid var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
index 425980b7f817..d21ab594a4d6 100644
--- a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
@@ -4,7 +4,7 @@
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapPageHeader_BorderColor);
 
 	/* Header Item */
-	--_ui5_tc_headerItemContent_border_bottom: 0.25rem solid var(--sapPageHeader_BorderColor);
+	--_ui5_tc_headerItemContent_border_bottom: 0.3125rem solid var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css
index 425980b7f817..d21ab594a4d6 100644
--- a/packages/main/src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css
@@ -4,7 +4,7 @@
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapPageHeader_BorderColor);
 
 	/* Header Item */
-	--_ui5_tc_headerItemContent_border_bottom: 0.25rem solid var(--sapPageHeader_BorderColor);
+	--_ui5_tc_headerItemContent_border_bottom: 0.3125rem solid var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);

From c3cc795f7c92d8e5dba2c8809ff7123e937d4ead Mon Sep 17 00:00:00 2001
From: SAP LX Lab Service Account <tmsatsls+github.com_service-tip-git@sap.com>
Date: Sat, 26 Aug 2023 07:21:26 -0700
Subject: [PATCH 27/33] Translation Delivery (#7494)

chore: translation delivery

Change-Id: Ied49a1bf24dab74904be5c45a7e3f23c3327fd54
---
 packages/main/src/i18n/messagebundle_en_US_saprigi.properties | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
index 5f1416ac037a..025fc4d88cd2 100644
--- a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
+++ b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
@@ -299,3 +299,5 @@ DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=‍‍‌‌‍​‌‍‌​
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=‌​​‍‍​‍‍‍‌‌​‍‍​​‍‌‍‌​‍‍‍‌‍‍‌‍‌‌‌‌‍‌‌​‍‍​‍Use Arrow keys to move, Shift+Arrow keys to resize
 LABEL_COLON=‌‌​‌​‌​‌‌‍‌‍​‍‍‍​​‍‍​​​​‌​​​​​​‍‍​​‌​‌‍‍​:
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=‌​‌‌‍‍‍‍​‌‍‍‌‌‍‌‌​‍‍‍​‌‌‍‌​​‌‍‌‍‌​‌‍‌‍‍​Additional Options

From b0b542a33e4685267731536114ff5d5f12c13210 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Mon, 28 Aug 2023 10:36:53 +0300
Subject: [PATCH 28/33] fix: fix import in base/index.js (#7496)

Fix typo in import statement slideup.js => slideUp.js

Fixes: #7493
---
 packages/base/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base/index.js b/packages/base/index.js
index 1c3c405bd293..3eb60551aa4a 100644
--- a/packages/base/index.js
+++ b/packages/base/index.js
@@ -1,7 +1,7 @@
 // animations/
 import scroll from "./dist/animations/scroll.js";
 import slideDown from "./dist/animations/slideDown.js";
-import slideUp from "./dist/animations/slideup.js";
+import slideUp from "./dist/animations/slideUp.js";
 
 // config/
 import { getAnimationMode, setAnimationMode } from "./dist/config/AnimationMode.js";

From 97c4a1259005225c54457dd269754d1eae2277c4 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Tue, 29 Aug 2023 10:50:08 +0300
Subject: [PATCH 29/33] chore: fix storybook build, Toolbar story and some
 Toolbar TS constructions (#7499)

Since the Toolbar PR has been merged the "nightly" storybook stopped deploying due to errors when building the story of the Toolbar, see https://github.com/SAP/ui5-webcomponents/actions/runs/5974432275/job/16208568004#step:4:3210 tracked down to wrong jsdoc.

- fixed wrong namespaces, make use of appendocs

- fixed some TS construction has been fixed

In ToolbarItem.js
```js
export type { ToolbarItem };
export default ToolbarItem;
```

changed to
```js
export default ToolbarItem;
```

In Toolbar.js
```js
import type { ToolbarItem } from "./ToolbarItem.js";
```

changed to
```js
 import type ToolbarItem from "./ToolbarItem.js";
 ```

- showcase ui5-toolbar-select and ui5-toolbar-select-option in the storybook
---
 packages/main/src/Toolbar.ts                  |  17 +--
 packages/main/src/ToolbarButton.ts            |  14 ++-
 packages/main/src/ToolbarItem.ts              |  17 +--
 packages/main/src/ToolbarSelect.ts            |  12 +-
 .../_stories/main/Toolbar/Toolbar.stories.ts  | 105 ++++++++++++------
 5 files changed, 102 insertions(+), 63 deletions(-)

diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 2d5cf5703123..de760c8f36e0 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -28,7 +28,7 @@ import ToolbarAlign from "./types/ToolbarAlign.js";
 import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 import HasPopup from "./types/HasPopup.js";
 
-import type { ToolbarItem } from "./ToolbarItem.js";
+import type ToolbarItem from "./ToolbarItem.js";
 import {
 	getRegisteredToolbarItem,
 	getRegisteredStyles,
@@ -71,6 +71,7 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
  * @alias sap.ui.webc.main.Toolbar
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-toolbar
+ * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect
  * @public
  * @since 1.17.0
  */
@@ -81,7 +82,6 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
 	template: ToolbarTemplate,
 	staticAreaTemplate: ToolbarPopoverTemplate,
 })
-
 class Toolbar extends UI5Element {
 	static i18nBundle: I18nBundle;
 
@@ -151,12 +151,13 @@ class Toolbar extends UI5Element {
 	accessibleNameRef!: string;
 
 	/**
-	* Slotted Toolbar items
-	* @type {sap.ui.webc.main.IToolbarItem[]}
-	* @name sap.ui.webc.main.Toolbar.prototype.items
-	* @slot items
-	* @public
-	*/
+	 * Defines the items of the component.
+	 *
+	 * @type {sap.ui.webc.main.IToolbarItem[]}
+	 * @name sap.ui.webc.main.Toolbar.prototype.default
+	 * @slot items
+	 * @public
+	 */
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 	items!: Array<ToolbarItem>
 
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 54d7f1f5634e..752737456379 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -4,7 +4,8 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 
-import ToolbarItem, { IEventOptions } from "./ToolbarItem.js";
+import ToolbarItem from "./ToolbarItem.js";
+import type { IEventOptions } from "./ToolbarItem.js";
 import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
 import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
 
@@ -14,17 +15,22 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
 
 /**
  * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
  * The <code>ui5-toolbar-button</code> represents an abstract action,
  * used in the <code>ui5-toolbar</code>.
  *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/ToolbarButton";</code>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.ToolbarButton
  * @extends sap.ui.webc.main.ToolbarItem
- * @since 1.17.0
+ * @tagname ui5-toolbar-button
  * @public
+ * @since 1.17.0
  */
-
 @customElement({
 	tag: "ui5-toolbar-button",
 	dependencies: [Button],
@@ -39,10 +45,8 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  *
  * @event sap.ui.webc.main.ToolbarButton#click
  * @public
- * @native
  */
 @event("click")
-
 class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines if the action is disabled.
diff --git a/packages/main/src/ToolbarItem.ts b/packages/main/src/ToolbarItem.ts
index 0ef12927c4e2..6d476b924745 100644
--- a/packages/main/src/ToolbarItem.ts
+++ b/packages/main/src/ToolbarItem.ts
@@ -5,11 +5,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 
 import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 
-export type IEventOptions = {
+type IEventOptions = {
 	preventClosing: boolean;
 }
 
-export interface IToolbarItem {
+interface IToolbarItem {
 	overflowPriority: `${ToolbarItemOverflowBehavior}`;
 	preventOverflowClosing: boolean;
 	ignoreSpace?: boolean;
@@ -18,10 +18,9 @@ export interface IToolbarItem {
 	stableDomRef: string;
 }
 
-@customElement("ui5-tb-item")
-
 /**
  * @class
+ *
  * The <code>ui5-tb-item</code> represents an abstract class for items,
  * used in the <code>ui5-toolbar</code>.
  *
@@ -29,10 +28,11 @@ export interface IToolbarItem {
  * @author SAP SE
  * @alias sap.ui.webc.main.ToolbarItem
  * @extends sap.ui.webc.base.UI5Element
- * @since 1.17.0
  * @abstract
  * @public
+ * @since 1.17.0
  */
+@customElement("ui5-tb-item")
 class ToolbarItem extends UI5Element implements IToolbarItem {
 	/**
 	 * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
@@ -57,7 +57,7 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
 	 * @type {Boolean}
 	 * @defaultvalue false
 	 * @public
-	 * @name sap.ui.webc.main.Toolbar.prototype.preventOverflowClosing
+	 * @name sap.ui.webc.main.ToolbarItem.prototype.preventOverflowClosing
 	 */
 	@property({ type: Boolean })
 	preventOverflowClosing!: boolean;
@@ -136,5 +136,8 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
 
 ToolbarItem.define();
 
-export type { ToolbarItem };
+export type {
+	IToolbarItem,
+	IEventOptions,
+};
 export default ToolbarItem;
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 6043da142d86..5781aba850bc 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -21,18 +21,18 @@ import type { SelectChangeEventDetail } from "./Select.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  * The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
- * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-option</code> component.
+ * The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
  *
  * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/Select";</code>
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
  * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-toolbar-select</code>)
+ * <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.ToolbarSelect
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-toolbar-select
- * @appenddocs sap.ui.webc.main.Option
+ * @appenddocs sap.ui.webc.main.ToolbarSelectOption
  * @public
  * @since 1.17.0
  */
@@ -58,14 +58,14 @@ import type { SelectChangeEventDetail } from "./Select.js";
 /**
  * Fired after the component's dropdown menu opens.
  *
- * @event sap.ui.webc.ToolbarSelect#open
+ * @event sap.ui.webc.main.ToolbarSelect#open
  * @public
  */
 @event("open")
 /**
  * Fired after the component's dropdown menu closes.
  *
- * @event sap.ui.webc.ToolbarSelect#close
+ * @event sap.ui.webc.main.ToolbarSelect#close
  * @public
  */
 @event("close")
diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
index 2376a4de1513..de40fe306806 100644
--- a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
+++ b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
@@ -3,49 +3,64 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta } from "@storybook/web-components";
 
-import Toolbar from "@ui5/webcomponents/dist/Toolbar";
+import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js";
 
 import argTypes, { componentInfo } from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
 
-import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js";
-
 import { DocsPage } from "../../../.storybook/docs";
 
 const component = "ui5-toolbar";
 
 export default {
-  title: "Main/Toolbar",
-  component,
-  subcomponents: { ToolbarItem: "ui5-toolbar-item" },
-  argTypes,
-  parameters: {
-    docs: {
-      page: DocsPage({ ...componentInfo, component })
-    },
-  },
+	title: "Main/Toolbar",
+	component: "Toolbar",
+	subcomponents: {
+		ToolbarButton: "ToolbarButton",
+		ToolbarSelect: "ToolbarSelect",
+		ToolbarSelectOption: "ToolbarSelectOption",
+	},
+	argTypes,
+	parameters: {
+		docs: {
+			page: DocsPage({ ...componentInfo, component })
+		},
+	},
 } as Meta<Toolbar>;
 
 const Template: UI5StoryArgs<Toolbar, StoryArgsSlots> = (args) => {
-	return html` <ui5-toolbar
+	return html`<ui5-toolbar
 		align-content="${ifDefined(args.alignContent)}"
 	>
 		${unsafeHTML(args.default)}
-	</ui5-toolbar>`;
+</ui5-toolbar>`;
 };
 
 export const Basic = Template.bind({});
-
+Basic.storyName = "Basic";
 Basic.args = {
-
 	default: `
-  <ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
-  <ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
-  <ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
-  <ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`,
-  };
-Basic.storyName = "Basic";
+	<ui5-toolbar-button 
+	icon="decline"
+	text="Mid 2">
+	</ui5-toolbar-button>
+	<ui5-toolbar-button
+  		icon="add"
+  		text="Right 1">
+	</ui5-toolbar-button>
+	<ui5-toolbar-button
+  		icon="employee"
+		text="Right 4">
+	</ui5-toolbar-button>
+	<ui5-toolbar-button
+		id="myOverflowBtn"
+		icon="employee"
+		text="Call me later">
+	</ui5-toolbar-button>`,
+};
+
 
 export const WithSpacer: UI5StoryArgs<Toolbar, StoryArgsSlots> =  Template.bind({});
 
@@ -54,7 +69,11 @@ WithSpacer.args = {
 	<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
 	<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
 	<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
-	<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+	<ui5-toolbar-select>
+			<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+		</ui5-toolbar-select>
 	<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
 	<ui5-toolbar-spacer></ui5-toolbar-spacer>
 	<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
@@ -70,7 +89,11 @@ WithSeparator.args = {
 		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
-		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-select>
+			<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+		</ui5-toolbar-select>
 		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
 		<ui5-toolbar-separator></ui5-toolbar-separator>
 		<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
@@ -79,16 +102,20 @@ WithSeparator.args = {
 		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`
 }
 
-export const WithAlwaysOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
+export const WithAlwaysOverflowItems: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
 
-WithAlwaysOverflowElements.storyName = "'AlwaysOverflow' elements";
+WithAlwaysOverflowItems.storyName = "With 'AlwaysOverflow' items";
 
-WithAlwaysOverflowElements.args = {
+WithAlwaysOverflowItems.args = {
 	default: `
 		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
-		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-select>
+			<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+		</ui5-toolbar-select>
 		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="decline" text="Mid 2" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
@@ -96,16 +123,20 @@ WithAlwaysOverflowElements.args = {
 		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>`
 }
 
-export const WithNeverOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
+export const WithNeverOverflowItems: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
 
-WithNeverOverflowElements.storyName = "'NeverOverflow' elements";
+WithNeverOverflowItems.storyName = "With 'NeverOverflow' items";
 
-WithNeverOverflowElements.args = {
+WithNeverOverflowItems.args = {
 	default: `
 		<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="decline" text="Left 2" ></ui5-toolbar-button>
 		<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
-		<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+		<ui5-toolbar-select>
+			<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+			<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+		</ui5-toolbar-select>
 		<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
 		<ui5-toolbar-button icon="decline" text="Mid 2" ></ui5-toolbar-button>
 		<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="NeverOverflow"></ui5-toolbar-button>
@@ -113,13 +144,13 @@ WithNeverOverflowElements.args = {
 		<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="NeverOverflow"></ui5-toolbar-button>`
 }
 
-export const WithStartAlignedElements = Template.bind({});
+export const WithStartAlignedItems = Template.bind({});
 
 
-WithStartAlignedElements.storyName = "Toolbar with 'Start' aligned elements";
+WithStartAlignedItems.storyName = "With 'Start' aligned items";
 
-WithStartAlignedElements.args = {
-  alignContent: ToolbarAlign.Start,
-  default: Basic.args.default
+WithStartAlignedItems.args = {
+	alignContent: ToolbarAlign.Start,
+	default: Basic.args.default
 };
 

From c34056bd5948044fd382c3e5efd8d3bf6880d92b Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:08:59 +0300
Subject: [PATCH 30/33] chore: stop failing menu test from executing (#7487)

---
 packages/main/test/specs/Menu.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js
index 8fd63d292c9b..3dcd37530564 100644
--- a/packages/main/test/specs/Menu.spec.js
+++ b/packages/main/test/specs/Menu.spec.js
@@ -132,6 +132,7 @@ describe("Menu interaction", () => {
 		assert.notEqual(eventLoggerValue.indexOf("after-close"), -1, "'after-close' event is fired");
 	});
 
+	/*
 	it("Menu and Menu items busy indication", async () => {
 			await browser.url(`test/pages/Menu.html`);
 			const openButton = await browser.$("#btnOpen");
@@ -160,6 +161,7 @@ describe("Menu interaction", () => {
 			assert.strictEqual(await busyIndicator.getProperty("size"), "Medium", "Size attribute is properly set.");
 			assert.strictEqual(await busyIndicator.getProperty("delay"), 100, "Delay attribute is properly set.");
 		});
+	 */
 
 		it("Prevent menu closing on item press", async () => {
 			await browser.url(`test/pages/Menu.html`);

From b3e0a6166e92b292ef598a2d3f178b33d885895e Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Tue, 29 Aug 2023 16:21:55 +0300
Subject: [PATCH 31/33] docs: add SelectMenu, SelectMenuOption story (#7502)

* docs: add select menu story

* chore: fix js error

* chore: add Storybook check

* chore: rename job name
---
 .github/workflows/test-storybook.yaml         | 23 +++++++++
 packages/base/src/connectToComponent.ts       |  7 ++-
 packages/main/src/Select.ts                   |  4 +-
 .../_stories/main/Select/Select.stories.ts    | 47 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 .github/workflows/test-storybook.yaml

diff --git a/.github/workflows/test-storybook.yaml b/.github/workflows/test-storybook.yaml
new file mode 100644
index 000000000000..5e89465cf177
--- /dev/null
+++ b/.github/workflows/test-storybook.yaml
@@ -0,0 +1,23 @@
+name: CI - Storybook
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'main'
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
+
+    - name: Install and Build
+      run: |
+        export NODE_OPTIONS="--max_old_space_size=4096"
+        yarn install
+        yarn build:playground
diff --git a/packages/base/src/connectToComponent.ts b/packages/base/src/connectToComponent.ts
index 757b2c0dc32b..b374ff467903 100644
--- a/packages/base/src/connectToComponent.ts
+++ b/packages/base/src/connectToComponent.ts
@@ -24,7 +24,8 @@ const connectToComponent = (options: ConnectOptions): HTMLElement | undefined =>
 	} else if (friend instanceof HTMLElement) {
 		connectedTo = friend;
 	} else {
-		connectedTo = (host.getRootNode() as Document).getElementById(friend) || undefined;
+		const rootNode = host.getRootNode() as Document;
+		connectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;
 	}
 
 	const key = `${host._id}-${propName}`;
@@ -40,7 +41,9 @@ const connectToComponent = (options: ConnectOptions): HTMLElement | undefined =>
 		// if friend element not in DOM yet, start polling
 		if (typeof friend === "string" && friend && !intervals.has(key)) {
 			const interval = setInterval(() => {
-				const found = (host.getRootNode() as Document).getElementById(friend);
+				const rootNode = host.getRootNode() as Document;
+				const found = (rootNode.getElementById && rootNode.getElementById(friend));
+
 				if (found) {
 					clearInterval(intervals.get(key));
 					intervals.delete(key);
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 10a218a729ee..529bd80f6402 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -123,7 +123,7 @@ interface IOption extends UI5Element {
  * @alias sap.ui.webc.main.Select
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-select
- * @appenddocs sap.ui.webc.main.Option
+ * @appenddocs sap.ui.webc.main.Option sap.ui.webc.main.SelectMenu sap.ui.webc.main.SelectMenuOption
  * @public
  * @since 0.8.0
  */
@@ -195,7 +195,7 @@ class Select extends UI5Element implements IFormElement {
 	static i18nBundle: I18nBundle;
 
 	/**
-	 * Defines a reference (ID or DOM element) of component's menu of options.
+	 * Defines a reference (ID or DOM element) of component's menu of options
 	 * as alternative to define the select's dropdown.
 	 * <br><br>
 	 * <b>Note:</b> Usage of <code>ui5-select-menu</code> is recommended.
diff --git a/packages/playground/_stories/main/Select/Select.stories.ts b/packages/playground/_stories/main/Select/Select.stories.ts
index 10092ecf3c01..b07298e7aba7 100644
--- a/packages/playground/_stories/main/Select/Select.stories.ts
+++ b/packages/playground/_stories/main/Select/Select.stories.ts
@@ -16,7 +16,11 @@ const component = "ui5-select";
 export default {
   title: "Main/Select",
   component: "Select",
-  subcomponents: { Option: "Option" },
+  subcomponents: {
+    Option: "Option",
+    SelectMenu: "SelectMenu",
+    SelectMenuOption: "SelectMenuOption",
+  },
   argTypes,
   parameters: {
     docs: {
@@ -111,3 +115,44 @@ export const TwoColumnLayout: StoryFn = () =>
     <ui5-option additional-text="CA">Canada</ui5-option>
   </ui5-select>`;
 TwoColumnLayout.storyName = "Two-column layout";
+
+export const CustomOptions: StoryFn = () =>
+  html`<ui5-select menu="selectMenu"></ui5-select>
+
+
+<ui5-select-menu id="selectMenu">
+    <ui5-select-menu-option display-text="AR">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Argentina
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+
+    <ui5-select-menu-option display-text="BE">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Belgium
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+
+    <ui5-select-menu-option display-text="BR">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Brazil
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+</ui5-select-menu>
+
+<style>
+  .optionContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+  }
+</style>`;
+
+CustomOptions.storyName = "Custom Options";
\ No newline at end of file

From 31a3608562ae457f66bb51f7310566664a76a39c Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Tue, 29 Aug 2023 17:20:47 +0300
Subject: [PATCH 32/33] fix(ui5-textarea): prevent console error on focus out
 (#7504)

* fix(ui5-textarea): prevent console error on focus out

* fix(ui5-textarea): apply review comments
---
 packages/main/src/TextArea.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index 1a98abad7d5c..3a9225934e66 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -460,7 +460,7 @@ class TextArea extends UI5Element implements IFormElement {
 
 	_onfocusout(e: FocusEvent) {
 		const eTarget = e.relatedTarget as HTMLElement;
-		const focusedOutToValueStateMessage = eTarget?.shadowRoot!.querySelector(".ui5-valuestatemessage-root");
+		const focusedOutToValueStateMessage = eTarget?.shadowRoot?.querySelector(".ui5-valuestatemessage-root");
 
 		this.focused = false;
 

From d512116994e48998c2970d62180e22bbc249515d Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Tue, 29 Aug 2023 21:33:45 +0200
Subject: [PATCH 33/33] docs(ui5-select & ui5-toolbar): fix JSDoc comments
 (#7507)

docs(Select & Toolbar): fix JSDoc comments
---
 packages/main/src/Select.ts        | 2 +-
 packages/main/src/SelectMenu.ts    | 2 +-
 packages/main/src/ToolbarSelect.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 529bd80f6402..65130f807525 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -201,7 +201,7 @@ class Select extends UI5Element implements IFormElement {
 	 * <b>Note:</b> Usage of <code>ui5-select-menu</code> is recommended.
 	 *
 	 * @type {sap.ui.webc.base.types.DOMReference}
-	 * @defaultvalue false
+	 * @defaultvalue undefined
 	 * @name sap.ui.webc.main.Select.prototype.menu
 	 * @public
 	 * @since 1.17.0
diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts
index b8205ecd014f..ed16f35794f0 100644
--- a/packages/main/src/SelectMenu.ts
+++ b/packages/main/src/SelectMenu.ts
@@ -43,7 +43,7 @@ type SelectMenuChange = {
  * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative
  * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.
  * <br></br>
- * The component gives the possibilty to the user to customize the <code>ui5-select</code>'s dropdown
+ * The component gives the possibility to the user to customize the <code>ui5-select</code>'s dropdown
  * by slotting custom options and adding custom styles.
  *
  * <h3>Usage</h3>
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 5781aba850bc..63924d3f801b 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -82,7 +82,7 @@ class ToolbarSelect extends ToolbarItem {
 	 * If more than one option is defined as selected, the last one would be considered as the selected one.
 	 *
 	 * <br><br>
-	 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
+	 * <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.
 	 * @type {sap.ui.webc.main.ISelectOption[]}
 	 * @slot options
 	 * @name sap.ui.webc.main.ToolbarSelect.prototype.default