From 04fa78580a1847ae497c99a2db712ef0e2e0c3f5 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Tue, 22 Jul 2025 12:34:37 +0300
Subject: [PATCH 1/7] chore(ui5-toolbar-select): value and label added

---
 packages/main/cypress/specs/Toolbar.cy.tsx  | 57 +++++++++++++++++++++
 packages/main/src/ToolbarSelect.ts          | 39 ++++++++++++++
 packages/main/src/ToolbarSelectTemplate.tsx |  8 +++
 3 files changed, 104 insertions(+)

diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx
index b1b0fc53af68..6fdc5738bce7 100644
--- a/packages/main/cypress/specs/Toolbar.cy.tsx
+++ b/packages/main/cypress/specs/Toolbar.cy.tsx
@@ -458,4 +458,61 @@ describe("Toolbar Select", () => {
 			});
 		});
 	});
+
+	it("Should handle toolbar-select with width larger than the toolbar", async () => {
+		cy.mount(
+			<Toolbar id="otb_d">
+				<ToolbarSelect style="width: 201px;" id="toolbar-select">
+						<ToolbarSelectOption>1</ToolbarSelectOption>
+						<ToolbarSelectOption selected>2</ToolbarSelectOption>
+						<ToolbarSelectOption>3</ToolbarSelectOption>
+					</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.viewport(220, 1080); // Set a small viewport width to trigger overflow
+
+		// Add a toolbar-select element with a large width
+		cy.get("#otb_d").shadow().within(() => {
+			cy.wait(2000);
+			// Click the overflow button
+			cy.get(".ui5-tb-overflow-btn").click();
+		});
+
+		// Verify the toolbar-select is rendered inside the popover
+		cy.get("ui5-toolbar-select").should("be.visible");
+	});
+
+	it("Should correctly handle the 'value' property and 'label' slot of ToolbarSelect", () => {
+		// Mount the Toolbar with a ToolbarSelect component
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect value="Option 2">
+					<span slot="label">Select an Option:</span>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+
+		// Verify the initial value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.should("have.attr", "value", "Option 2");
+
+		// Verify the label slot content
+		cy.get("ui5-select", { includeShadowDom: true })
+			.find("span[slot='label']")
+			.should("contain.text", "Select an Option:");
+
+		// Change the value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.click()
+			.find("ui5-option")
+			.contains("Option 3")
+			.click();
+
+		// Verify the updated value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.should("have.attr", "value", "Option 3");
+	});
 });
\ No newline at end of file
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 79faa0f938eb..8536f3c7ee2d 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -90,6 +90,21 @@ class ToolbarSelect extends ToolbarItem {
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 	options!: Array<ToolbarSelectOption>;
 
+	/**
+	 * Defines the HTML element that will be displayed in the component input part,
+	 * representing the selected option.
+	 *
+	 * **Note:** If not specified and `ui5-option-custom` is used,
+	 * either the option's `display-text` or its textContent will be displayed.
+	 *
+	 * **Note:** If not specified and `ui5-option` is used,
+	 * the option's textContent will be displayed.
+	 * @public
+	 * @since 1.17.0
+	*/
+	@slot()
+	label!: Array<HTMLElement>;
+
 	/**
 	 * Defines the value state of the component.
 	 * @default "None"
@@ -124,6 +139,26 @@ class ToolbarSelect extends ToolbarItem {
 	@property()
 	accessibleNameRef?: string;
 
+	/**
+	 * Defines the value of the component:
+	 *
+	 * - when get - returns the value of the component or the value/text content of the selected option.
+	 * - when set - selects the option with matching `value` property or text content.
+	 *
+	 * **Note:** Use either the Select's value or the Options' selected property.
+	 * Mixed usage could result in unexpected behavior.
+	 *
+	 * **Note:** If the given value does not match any existing option,
+	 * no option will be selected and the Select component will be displayed as empty.
+	 * @public
+	 * @default ""
+	 * @since
+	 * @formProperty
+	 * @formEvents change liveChange
+	 */
+	@property()
+	value?: string;
+
 	onClick(e: Event): void {
 		e.stopImmediatePropagation();
 		const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement });
@@ -174,6 +209,10 @@ class ToolbarSelect extends ToolbarItem {
 			width: this.width,
 		};
 	}
+
+	get hasCustomLabel() {
+		return !!this.label.length;
+	}
 }
 
 ToolbarSelect.define();
diff --git a/packages/main/src/ToolbarSelectTemplate.tsx b/packages/main/src/ToolbarSelectTemplate.tsx
index 0ff8b3fa347a..4bad01396dfa 100644
--- a/packages/main/src/ToolbarSelectTemplate.tsx
+++ b/packages/main/src/ToolbarSelectTemplate.tsx
@@ -3,10 +3,12 @@ import Select from "./Select.js";
 import Option from "./Option.js";
 
 export default function ToolbarSelectTemplate(this: ToolbarSelect) {
+	const HTMLElementForLabel = this.hasCustomLabel ? this.label[0]?.tagName?.toLowerCase() : "span";
 	return (
 		<Select
 			class={this.classes.root}
 			style={this.styles}
+			value={this.value}
 			data-ui5-external-action-item-id={this._id}
 			valueState={this.valueState}
 			disabled={this.disabled}
@@ -16,7 +18,13 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			onClose={(...args) => this.onClose(...args)}
 			onOpen={(...args) => this.onOpen(...args)}
 			onChange={(...args) => this.onChange(...args)}
+			label={this.label}
 		>
+			{this.hasCustomLabel &&
+				<HTMLElementForLabel slot="label">
+					{this.label[0].innerHTML}
+				</HTMLElementForLabel>
+			}
 			{this.options.map((option, index) => (
 				<Option
 					selected={option.selected}

From bed50754f19b1253c10525a07fd63c96f816369a Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Mon, 4 Aug 2025 12:00:08 +0300
Subject: [PATCH 2/7] chore(ui5-toolbar): add select APIs to
 ToolbarSelectTemplate

---
 packages/main/cypress/specs/Toolbar.cy.tsx  | 6 +++---
 packages/main/src/ToolbarSelectTemplate.tsx | 5 +----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx
index eb7a8838160b..c8ee5c1d2a81 100644
--- a/packages/main/cypress/specs/Toolbar.cy.tsx
+++ b/packages/main/cypress/specs/Toolbar.cy.tsx
@@ -511,16 +511,16 @@ describe("Toolbar Select", () => {
 			.should("have.attr", "value", "Option 2");
 
 		// Verify the label slot content
-		cy.get("ui5-select", { includeShadowDom: true })
+		cy.get("ui5-toolbar-select")
 			.find("span[slot='label']")
 			.should("contain.text", "Select an Option:");
 
 		// Change the value of the ToolbarSelect
 		cy.get("ui5-select", { includeShadowDom: true })
-			.click()
+			.realClick()
 			.find("ui5-option")
 			.contains("Option 3")
-			.click();
+			.realClick();
 
 		// Verify the updated value of the ToolbarSelect
 		cy.get("ui5-select", { includeShadowDom: true })
diff --git a/packages/main/src/ToolbarSelectTemplate.tsx b/packages/main/src/ToolbarSelectTemplate.tsx
index 4bad01396dfa..dda3922cebb1 100644
--- a/packages/main/src/ToolbarSelectTemplate.tsx
+++ b/packages/main/src/ToolbarSelectTemplate.tsx
@@ -3,7 +3,6 @@ import Select from "./Select.js";
 import Option from "./Option.js";
 
 export default function ToolbarSelectTemplate(this: ToolbarSelect) {
-	const HTMLElementForLabel = this.hasCustomLabel ? this.label[0]?.tagName?.toLowerCase() : "span";
 	return (
 		<Select
 			class={this.classes.root}
@@ -21,9 +20,7 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			label={this.label}
 		>
 			{this.hasCustomLabel &&
-				<HTMLElementForLabel slot="label">
-					{this.label[0].innerHTML}
-				</HTMLElementForLabel>
+				(<slot name="label" slot="label"></slot>)
 			}
 			{this.options.map((option, index) => (
 				<Option

From e7c64c1290a5adf9146459e74dacb5a2bbfc0dd8 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Mon, 4 Aug 2025 12:49:14 +0300
Subject: [PATCH 3/7] chore(ui5-toolbar): add select APIs

---
 packages/main/src/ToolbarSelect.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 8536f3c7ee2d..723b5e3e45e2 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -100,7 +100,7 @@ class ToolbarSelect extends ToolbarItem {
 	 * **Note:** If not specified and `ui5-option` is used,
 	 * the option's textContent will be displayed.
 	 * @public
-	 * @since 1.17.0
+	 * @since 2.13.0
 	*/
 	@slot()
 	label!: Array<HTMLElement>;
@@ -152,7 +152,7 @@ class ToolbarSelect extends ToolbarItem {
 	 * no option will be selected and the Select component will be displayed as empty.
 	 * @public
 	 * @default ""
-	 * @since
+	 * @since 2.13.0
 	 * @formProperty
 	 * @formEvents change liveChange
 	 */

From a5565dfa816671b5e71114155813c64bd60c6eb6 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Mon, 4 Aug 2025 13:19:04 +0300
Subject: [PATCH 4/7] chore(ui5-toolbar): add select APIs to ToolbarSelect

---
 packages/main/src/ToolbarSelect.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 723b5e3e45e2..eee678bcb0aa 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -93,12 +93,6 @@ class ToolbarSelect extends ToolbarItem {
 	/**
 	 * Defines the HTML element that will be displayed in the component input part,
 	 * representing the selected option.
-	 *
-	 * **Note:** If not specified and `ui5-option-custom` is used,
-	 * either the option's `display-text` or its textContent will be displayed.
-	 *
-	 * **Note:** If not specified and `ui5-option` is used,
-	 * the option's textContent will be displayed.
 	 * @public
 	 * @since 2.13.0
 	*/
@@ -142,19 +136,9 @@ class ToolbarSelect extends ToolbarItem {
 	/**
 	 * Defines the value of the component:
 	 *
-	 * - when get - returns the value of the component or the value/text content of the selected option.
-	 * - when set - selects the option with matching `value` property or text content.
-	 *
-	 * **Note:** Use either the Select's value or the Options' selected property.
-	 * Mixed usage could result in unexpected behavior.
-	 *
-	 * **Note:** If the given value does not match any existing option,
-	 * no option will be selected and the Select component will be displayed as empty.
 	 * @public
 	 * @default ""
 	 * @since 2.13.0
-	 * @formProperty
-	 * @formEvents change liveChange
 	 */
 	@property()
 	value?: string;

From cf5b455732d67853f63cd2a12361b38ebc943715 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Mon, 4 Aug 2025 15:17:30 +0300
Subject: [PATCH 5/7] chore(ui5-toolbar): add select APIs to ToolbarSelect

---
 packages/main/src/ToolbarSelect.ts          | 12 +++++++++---
 packages/main/src/ToolbarSelectTemplate.tsx |  9 ++++-----
 packages/main/test/pages/Toolbar.html       |  4 ++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index eee678bcb0aa..dbf6a4178753 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -11,6 +11,7 @@ import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
 import ToolbarItem from "./ToolbarItem.js";
 import type { ToolbarItemEventDetail } from "./ToolbarItem.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
+import type OptionCustom from "./OptionCustom.js";
 import type { SelectChangeEventDetail } from "./Select.js";
 
 type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
@@ -87,8 +88,13 @@ class ToolbarSelect extends ToolbarItem {
 	 * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.
 	 * @public
 	 */
-	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
-	options!: Array<ToolbarSelectOption>;
+	@slot({
+		"default": true,
+		type: HTMLElement,
+		invalidateOnChildChange: true,
+		individualSlots: true,
+	})
+	options!: Array<ToolbarSelectOption | OptionCustom>;
 
 	/**
 	 * Defines the HTML element that will be displayed in the component input part,
@@ -179,7 +185,7 @@ class ToolbarSelect extends ToolbarItem {
 
 	_syncOptions(selectedOption: HTMLElement): void {
 		const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
-		this.options.forEach((option: ToolbarSelectOption, index: number) => {
+		this.options.forEach((option: ToolbarSelectOption | OptionCustom, index: number) => {
 			if (index === selectedOptionIndex) {
 				option.setAttribute("selected", "");
 			} else {
diff --git a/packages/main/src/ToolbarSelectTemplate.tsx b/packages/main/src/ToolbarSelectTemplate.tsx
index dda3922cebb1..0771c15fabe6 100644
--- a/packages/main/src/ToolbarSelectTemplate.tsx
+++ b/packages/main/src/ToolbarSelectTemplate.tsx
@@ -17,10 +17,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			onClose={(...args) => this.onClose(...args)}
 			onOpen={(...args) => this.onOpen(...args)}
 			onChange={(...args) => this.onChange(...args)}
-			label={this.label}
 		>
 			{this.hasCustomLabel &&
-				(<slot name="label" slot="label"></slot>)
+				<slot name="label" slot="label">
+				</slot>
 			}
 			{this.options.map((option, index) => (
 				<Option
@@ -30,6 +30,5 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 					{option.textContent}
 				</Option>
 			))}
-		</Select>
-	);
-}
+		</Select>)
+};
diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
index de6b72c48bcf..594f1cb69fc0 100644
--- a/packages/main/test/pages/Toolbar.html
+++ b/packages/main/test/pages/Toolbar.html
@@ -71,6 +71,10 @@
 				<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">
+					<div class="selectLabel" slot="label">
+						<span id="mainText">Skirt [3]</span>
+						<ui5-avatar id="avatar" size="XS" initials="S"></ui5-avatar>
+					</div>
 					<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>

From 967dbc0546165a1a674c57b1ea2a0cfd6e240d3d Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Mon, 4 Aug 2025 15:48:11 +0300
Subject: [PATCH 6/7] chore(ui5-toolbar): add select APIs to ToolbarSelect

---
 packages/main/src/ToolbarSelect.ts          | 5 ++---
 packages/main/src/ToolbarSelectTemplate.tsx | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index dbf6a4178753..290085434e92 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -11,7 +11,6 @@ import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
 import ToolbarItem from "./ToolbarItem.js";
 import type { ToolbarItemEventDetail } from "./ToolbarItem.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
-import type OptionCustom from "./OptionCustom.js";
 import type { SelectChangeEventDetail } from "./Select.js";
 
 type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
@@ -94,7 +93,7 @@ class ToolbarSelect extends ToolbarItem {
 		invalidateOnChildChange: true,
 		individualSlots: true,
 	})
-	options!: Array<ToolbarSelectOption | OptionCustom>;
+	options!: Array<ToolbarSelectOption>;
 
 	/**
 	 * Defines the HTML element that will be displayed in the component input part,
@@ -185,7 +184,7 @@ class ToolbarSelect extends ToolbarItem {
 
 	_syncOptions(selectedOption: HTMLElement): void {
 		const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
-		this.options.forEach((option: ToolbarSelectOption | OptionCustom, index: number) => {
+		this.options.forEach((option: ToolbarSelectOption, index: number) => {
 			if (index === selectedOptionIndex) {
 				option.setAttribute("selected", "");
 			} else {
diff --git a/packages/main/src/ToolbarSelectTemplate.tsx b/packages/main/src/ToolbarSelectTemplate.tsx
index 0771c15fabe6..28e1f2c1dc3e 100644
--- a/packages/main/src/ToolbarSelectTemplate.tsx
+++ b/packages/main/src/ToolbarSelectTemplate.tsx
@@ -30,5 +30,5 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 					{option.textContent}
 				</Option>
 			))}
-		</Select>)
-};
+		</Select>);
+}

From f2b41a09823f0e747c575660ca53d15c6aaf720e Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Thu, 7 Aug 2025 11:39:46 +0300
Subject: [PATCH 7/7] chore(ui5-toolbar): add select APIs to ToolbarSelect

---
 packages/main/src/ToolbarSelect.ts          | 22 +++++++++++++++++++--
 packages/main/test/pages/ToolbarSelect.html | 14 ++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 290085434e92..2279f95c8956 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -5,6 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ToolbarSelectCss from "./generated/themes/ToolbarSelect.css.js";
+import type Select from "./Select.js";
 
 // Templates
 import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
@@ -91,7 +92,6 @@ class ToolbarSelect extends ToolbarItem {
 		"default": true,
 		type: HTMLElement,
 		invalidateOnChildChange: true,
-		individualSlots: true,
 	})
 	options!: Array<ToolbarSelectOption>;
 
@@ -146,7 +146,25 @@ class ToolbarSelect extends ToolbarItem {
 	 * @since 2.13.0
 	 */
 	@property()
-	value?: string;
+	set value(newValue: string) {
+		if (this.select && this.select.value !== newValue) {
+			const selectedOption = this.select.options.find(option => option.textContent === newValue);
+			this.select.value = newValue;
+			selectedOption && this.fireDecoratorEvent("change", { targetRef: this.select, selectedOption });
+		}
+		this._value = newValue;
+	}
+
+	get value(): string | undefined {
+		return this.select ? this.select.value : this._value;
+	}
+
+	get select(): Select | null {
+		return this.shadowRoot!.querySelector<Select>("[ui5-select]");
+	}
+
+	// Internal value storage, in case the composite select is not rendered on the the assignment happens
+	_value: string = "";
 
 	onClick(e: Event): void {
 		e.stopImmediatePropagation();
diff --git a/packages/main/test/pages/ToolbarSelect.html b/packages/main/test/pages/ToolbarSelect.html
index 2df0e8fae12e..86131e192e6c 100644
--- a/packages/main/test/pages/ToolbarSelect.html
+++ b/packages/main/test/pages/ToolbarSelect.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
 
-        <title>ToolbarButton</title>
+        <title>ToolbarSelect</title>
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -34,6 +34,15 @@
                 <ui5-option selected>2</ui5-option>
                 <ui5-option>3</ui5-option>
             </ui5-toolbar-select>
+
+            <!-- with label -->
+
+            <ui5-toolbar-select id="labeledSelect" value="15pt">
+                <span slot="label" id="labeledSelectLabel">18pt</span>
+                <ui5-option>12pt</ui5-option>
+                <ui5-option>15pt</ui5-option>
+                <ui5-option>21pt</ui5-option>
+            </ui5-toolbar-select>
         </ui5-toolbar>
 
         <script>
@@ -59,6 +68,9 @@
             select.addEventListener("ui5-click", (event) => {
                 clicked.value++;
             });
+            labeledSelect.addEventListener("ui5-change", (event) => {
+                labeledSelectLabel.textContent = event.detail.selectedOption.textContent
+            })
         </script>
     </body>
 </html>