diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index a8289a9fd7e2..a6479b1173ba 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -5,13 +5,17 @@ import activities from "@ui5/webcomponents-icons/dist/activities.js";
 import navBack from "@ui5/webcomponents-icons/dist/nav-back.js";
 import sysHelp from "@ui5/webcomponents-icons/dist/sys-help.js";
 import da from "@ui5/webcomponents-icons/dist/da.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/disconnected.js";
+import "@ui5/webcomponents-icons/dist/incoming-call.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import Switch from "@ui5/webcomponents/dist/Switch.js";
-import ShellBarBranding from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"
+import ShellBarBranding from "../../src/ShellBarBranding.js";
 import ShellBarSearch from "../../src/ShellBarSearch.js";
 
 const RESIZE_THROTTLE_RATE = 300; // ms
@@ -26,8 +30,7 @@ describe("Responsiveness", () => {
 			showNotifications={true}
 			showProductSwitch={true}
 		>
-			{/* <ToggleButton id="assistant" icon={da} slot="assistant" text="Button3"></ToggleButton> */}
-			<ToggleButton id="assistant" icon={da} slot="assistant">Button3</ToggleButton>
+			<ToggleButton id="assistant" icon={da} slot="assistant"></ToggleButton>
 
 			<Avatar slot="profile">
 				<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
@@ -114,7 +117,6 @@ describe("Responsiveness", () => {
 		cy.get("@shellbar").should("have.prop", "breakpointSize", "XL");
 
 		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
 		cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-title").as("primaryTitle");
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").as("secondaryTitle");
@@ -124,7 +126,8 @@ describe("Responsiveness", () => {
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");
 
 		cy.get("@assistant").should("be.visible");
-		cy.get("@overflowButton").should("not.be.visible");
+		// V2: Overflow button uses conditional rendering - not rendered when nothing overflows
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").should("not.exist");
 		cy.get("@backButton").should("be.visible");
 		cy.get("@primaryTitle").should("be.visible");
 		cy.get("@secondaryTitle").should("be.visible");
@@ -134,14 +137,26 @@ describe("Responsiveness", () => {
 		cy.get("@productSwitchIcon").should("be.visible");
 	});
 
-	it("tests M Breakpoint and overflow 500px", () => {
+	it("tests S Breakpoint and overflow 500px", () => {
 		cy.viewport(500, 1680);
 
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
+		cy.get("@shellbar").should("have.prop", "breakpointSize", "S");
 
-		cy.get("@searchIcon").should("be.visible");
-		cy.get("@overflowButton").should("be.visible");
+		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
+		cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-custom-item").as("customActionIcon1");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");
+
+		cy.get("@assistant").should("be.visible");
+		// V2: Overflow button uses conditional rendering - not rendered when nothing overflows
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").should("not.exist");
+		cy.get("@backButton").should("be.visible");
+		cy.get("@customActionIcon1").should("be.visible");
+		cy.get("@notificationsIcon").should("be.visible");
+		cy.get("@profileIcon").should("be.visible");
+		cy.get("@productSwitchIcon").should("be.visible");
 	});
 
 	it("tests XL Breakpoint 1820px", () => {
@@ -156,7 +171,6 @@ describe("Responsiveness", () => {
 		cy.get("@shellbar").should("have.prop", "breakpointSize", "L");
 
 		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
 		cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-title").as("primaryTitle");
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").as("secondaryTitle");
@@ -167,7 +181,8 @@ describe("Responsiveness", () => {
 		cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");
 
 		cy.get("@assistant").should("be.visible");
-		cy.get("@overflowButton").should("not.be.visible");
+		// V2: Overflow button uses conditional rendering - not rendered when nothing overflows
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").should("not.exist");
 		cy.get("@backButton").should("be.visible");
 		cy.get("@primaryTitle").should("be.visible");
 		cy.get("@secondaryTitle").should("be.visible");
@@ -200,33 +215,6 @@ describe("Responsiveness", () => {
 		cy.get("@productSwitchIcon").should("be.visible");
 	});
 
-	it("tests S Breakpoint and overflow 510px", () => {
-		cy.viewport(510, 1680);
-
-		cy.get("@shellbar").should("have.prop", "breakpointSize", "S");
-
-		cy.get("@shellbar").find("[slot='assistant']").as("assistant");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
-		cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-popover").as("overflowPopover");
-
-		cy.get("@assistant").should("be.visible");
-		cy.get("@overflowButton").should("be.visible");
-		cy.get("@backButton").should("be.visible");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-title").should("not.exist");
-		cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").should("not.exist");
-		cy.get("@searchIcon").should("be.visible");
-		cy.get("@notificationsIcon").should("be.visible");
-		cy.get("@profileIcon").should("be.visible");
-		cy.get("@productSwitchIcon").should("be.visible");
-
-		cy.get("@overflowPopover").find("ui5-li").should("have.length", 2);
-	});
-
 	it("tests S Breakpoint 320px", () => {
 		cy.get("html").viewport("iphone-x");
 		cy.get("@shellbar")
@@ -277,6 +265,10 @@ describe("Responsiveness", () => {
 	it("tests Primary title when menuItems are presented", () => {
 		cy.mount(templateWithMenuItems()).as("html1");
 
+		// V2: Menu button only renders at S breakpoint when menuItems exist
+		// This is by design - menu button is mobile-only feature
+		cy.viewport(510, 1680);
+
 		cy.get("@shellbar")
 			.shadow()
 			.find(".ui5-shellbar-menu-button")
@@ -296,27 +288,32 @@ describe("Responsiveness", () => {
 		cy.mount(templateWithOnlyOneAction()).as("html1");
 
 		cy.get("html").viewport("iphone-6");
+		// V2: Overflow button uses conditional rendering - not rendered when nothing overflows
+		// This is more efficient than V1 which rendered but hid with CSS
 		cy.get("@shellbar")
 			.shadow()
 			.find(".ui5-shellbar-overflow-button")
-			.should("be.hidden");
+			.should("not.exist");
 	});
 
 	it("Test accessibility attributes on custom action buttons", () => {
 		cy.mount(basicTemplate()).as("html");
 
+		// V2: ShellBarItem properly supports accessibilityAttributes property
+		// which are passed through to the ui5-button in its shadow root
 		cy.get("@shellbar")
-			.shadow()
-			.find<Button>(`[data-ui5-stable="call"]`)
-			.as("call-button")
+			.find(`[stable-dom-ref="call"]`)
+			.as("call-item")
 			.then($el => {
-				$el.get(0).accessibilityAttributes = { "hasPopup": "dialog", "expanded": "true" };
+				($el.get(0) as any).accessibilityAttributes = { "hasPopup": "dialog", "expanded": "true" };
 			});
-		cy.get("@call-button")
+		cy.get("@call-item")
+			.shadow()
+			.find("ui5-button")
 			.shadow()
 			.find("button")
 			.should("have.attr", "aria-expanded", "true")
-			.should("have.attr", "aria-hasPopup", "dialog");
+			.should("have.attr", "aria-haspopup", "dialog");
 	});
 });
 
@@ -563,6 +560,136 @@ describe("Slots", () => {
 			// check shellbar's showSearchField property is also updated
 			cy.get("@shellbar").invoke("prop", "showSearchField").should("equal", true);
 		});
+
+		it("Test search toggle in overflow expands search when clicked", () => {
+			cy.mount(
+				<ShellBar
+					id="shellbar"
+					primaryTitle="Product Title With Long Name"
+					showNotifications={true}
+					showProductSwitch={true}
+					showSearchField={false}
+				>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button slot="content">Button 1</Button>
+					<Button slot="content">Button 2</Button>
+					<Button slot="content">Button 3</Button>
+					<Button slot="content">Button 4</Button>
+					<Button slot="content">Button 5</Button>
+					<Button slot="content">Button 6</Button>
+					<Button slot="content">Button 7</Button>
+					<Button slot="content">Button 8</Button>
+					<ShellBarSearch slot="searchField" placeholder="Search"></ShellBarSearch>
+					<ShellBarItem icon={activities} text="Action 1"></ShellBarItem>
+					<ShellBarItem icon={activities} text="Action 2"></ShellBarItem>
+					<ShellBarItem icon={activities} text="Action 3"></ShellBarItem>
+					<ShellBarItem icon={activities} text="Action 4"></ShellBarItem>
+					<ShellBarItem icon={activities} text="Action 5"></ShellBarItem>
+					<Avatar slot="profile">
+						<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+					</Avatar>
+				</ShellBar>
+			);
+
+			// Use narrow viewport to force search into overflow
+			// 280px is needed because search button only overflows after all other items
+			cy.viewport(280, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			cy.get("#shellbar").as("shellbar");
+
+			// Verify overflow button exists (search should be in overflow when closed)
+			cy.get("@shellbar").should("have.prop", "breakpointSize", "S");
+
+			// Verify search is collapsed and in overflow
+			cy.get("@shellbar").should("have.prop", "showSearchField", false);
+			cy.get("@shellbar").then(($shellbar) => {
+				const shellbar = $shellbar[0] as any;
+				expect(shellbar.hiddenItemsIds, "search should be hidden").to.include("search");
+			});
+
+			// Open overflow popover
+			cy.get("@shellbar").invoke("prop", "overflowPopoverOpen", true);
+
+			// verify popover is open
+			cy.get("@shellbar")
+				.shadow()
+				.find(".ui5-shellbar-overflow-popover")
+				.should("exist")
+				.and("have.attr", "open");
+
+			// Click search toggle in overflow popover
+			cy.get("@shellbar")
+				.shadow()
+				.find(".ui5-shellbar-overflow-popover [data-action-id='search']")
+				.should("exist")
+				.click();
+
+			// Verify search is expanded
+			cy.get("@shellbar")
+				.should("have.prop", "showSearchField", true);
+
+			// Verify search field is visible
+			cy.get("@shellbar")
+				.find("[slot='searchField']")
+				.should("be.visible");
+		});
+
+		it("Test search button hide/show priority", () => {
+			cy.mount(
+				<ShellBar 
+					id="shellbar" 
+					primaryTitle="Product Title"
+					showNotifications={true}
+					showProductSwitch={true}
+					showSearchField={false}
+				>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button id="content1" slot="content">Content 1</Button>
+					<Button id="content2" slot="content">Content 2</Button>
+					<ShellBarSearch slot="searchField"></ShellBarSearch>
+					<ShellBarItem icon={activities} id="action1" text="Action 1"></ShellBarItem>
+					<ShellBarItem icon={activities} id="action2" text="Action 2"></ShellBarItem>
+					<ShellBarItem icon={activities} id="action3" text="Action 3"></ShellBarItem>
+					<Avatar slot="profile">
+						<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+					</Avatar>
+				</ShellBar>
+			);
+
+			cy.get("#shellbar").as("shellbar");
+
+			// wide viewport - search, content, actions all visible
+			cy.viewport(1200, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert all elements are visible
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("be.visible");
+			cy.get("#content1").should("be.visible");
+			cy.get("#content2").should("be.visible");
+
+			cy.get("#action1").should("be.visible");
+			cy.get("#action2").should("be.visible");
+			cy.get("#action3").should("be.visible");
+
+
+			// Act - reduce viewport to hide action buttons
+			cy.get("@shellbar").invoke("prop", "showSearchField", false);
+			cy.viewport(350, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert action buttons are hidden and search are hidden, before the last content item
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("not.be.visible");
+			cy.get("#content1").should("be.visible");
+
+			// Act - increase viewport
+			cy.viewport(400, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert search is visible again before with highest priority
+			cy.get("#content1").should("be.visible");
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("be.visible");
+		});
 	});
 });
 
@@ -573,7 +700,7 @@ describe("Events", () => {
 				<Input slot="searchField"></Input>
 			</ShellBar>
 		);
-		cy.get("[ui5-shellbar")
+		cy.get("[ui5-shellbar]")
 			.as("shellbar");
 
 		cy.get("@shellbar")
@@ -662,12 +789,10 @@ describe("Events", () => {
 		// Trigger full width search mode by reducing viewport
 		cy.viewport(400, 800);
 
-		// Manually call the cancel button handler
-		cy.get<ShellBar>("@shellbar").then(shellbar => {
-			const shellbarInstance = shellbar.get(0);
-			// Call the private method directly to simulate cancel button press
-			shellbarInstance._handleCancelButtonPress();
-		});
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-cancel-button")
+			.click();
 
 		// Verify the event was fired
 		cy.get("@searchFieldClear")
@@ -704,12 +829,10 @@ describe("Events", () => {
 		// Trigger full width search mode by reducing viewport
 		cy.viewport(400, 800);
 
-		// Manually call the cancel button handler
-		cy.get<ShellBar>("@shellbar").then(shellbar => {
-			const shellbarInstance = shellbar.get(0);
-			// Call the private method directly to simulate cancel button press
-			shellbarInstance._handleCancelButtonPress();
-		});
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-cancel-button")
+			.click();
 
 		// Verify the event was fired
 		cy.get("@searchFieldClear")
@@ -794,7 +917,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-    			.click({ force: true });
+				.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");
@@ -1016,7 +1139,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-   				.click({ force: true });
+				.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");
@@ -1047,6 +1170,7 @@ describe("Events", () => {
 		});
 
 		it("tests preventDefault of click on a button with default behavior prevented", () => {
+			cy.viewport(320, 800);
 			cy.mount(
 				<ShellBar
 					primaryTitle="Product Title"
@@ -1054,7 +1178,6 @@ describe("Events", () => {
 					notificationsCount="99+"
 					showNotifications
 					showProductSwitch
-					showSearchField={false}
 				>
 					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
 					<Button slot="content">Button 1</Button>
@@ -1081,17 +1204,20 @@ describe("Events", () => {
 			cy.get("[ui5-shellbar]")
 				.shadow()
 				.find(".ui5-shellbar-overflow-popover")
-				.should("be.visible");
+				.should("to.exist")
+				.invoke("prop", "open", true);
 
 			cy.get("[ui5-shellbar]")
 				.shadow()
-				.find(".ui5-shellbar-overflow-popover [ui5-list] [ui5-li]:nth-child(3)")
+				.find(".ui5-shellbar-overflow-popover [ui5-list] [ui5-shellbar-item]:nth-child(1)")
 				.realClick();
 
 			cy.get("[ui5-shellbar]")
 				.shadow()
 				.find(".ui5-shellbar-overflow-popover")
-				.should("be.visible");
+				.should("to.exist")
+				.invoke("prop", "open", true);
+
 		});
 	});
 });
@@ -1104,9 +1230,10 @@ describe("ButtonBadge in ShellBar", () => {
 			</ShellBar>
 		);
 
-		cy.get("#shellbarwithitems")
+		// V2: Badge is inside ShellBarItem's shadow DOM, not directly in ShellBar's shadow
+		cy.get("#test-item")
 			.shadow()
-			.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
+			.find("ui5-button-badge[slot='badge']")
 			.should("exist")
 			.should("have.attr", "text", "42");
 	});
@@ -1120,9 +1247,10 @@ describe("ButtonBadge in ShellBar", () => {
 
 		cy.get("#test-invalidation-item").invoke("attr", "count", "3");
 
-		cy.get("#test-invalidation")
+		// V2: Badge is inside ShellBarItem's shadow DOM
+		cy.get("#test-invalidation-item")
 			.shadow()
-			.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
+			.find("ui5-button-badge[slot='badge']")
 			.should("have.attr", "text", "3");
 	});
 
@@ -1149,11 +1277,15 @@ describe("ButtonBadge in ShellBar", () => {
 
 		cy.viewport(320, 800);
 
+		// Wait for overflow calculation to complete
+		cy.wait(RESIZE_THROTTLE_RATE);
+
 		cy.get("#shellbar-with-overflow")
 			.shadow()
 			.find(".ui5-shellbar-overflow-button")
 			.should("be.visible");
 
+		// V2: Overflow button badge - check if it's rendered
 		cy.get("#shellbar-with-overflow")
 			.shadow()
 			.find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
@@ -1178,11 +1310,15 @@ describe("ButtonBadge in ShellBar", () => {
 
 		cy.viewport(320, 800);
 
+		// Wait for overflow calculation to complete
+		cy.wait(RESIZE_THROTTLE_RATE);
+
 		cy.get("#shellbar-with-single-overflow")
 			.shadow()
 			.find(".ui5-shellbar-overflow-button")
 			.should("be.visible");
 
+		// V2: Overflow button badge - check if it's rendered
 		cy.get("#shellbar-with-single-overflow")
 			.shadow()
 			.find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
@@ -1191,6 +1327,101 @@ describe("ButtonBadge in ShellBar", () => {
 	});
 });
 
+describe("Search Controllers", () => {
+	it("Test search doesn't collapse in full-screen mode during resize", () => {
+		cy.mount(
+			<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
+				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+				<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
+				<ShellBarItem icon={activities} text="Action"></ShellBarItem>
+				<Button slot="content">Button</Button>
+			</ShellBar>
+		);
+
+		// search not focused
+		cy.get("#search").should("not.be.focused");
+		// search field is empty
+		cy.get("#search").should("have.value", "");
+
+		cy.viewport(400, 800);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+
+		cy.viewport(360, 800);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+	});
+
+	it("Test legacy search doesn't collapse in full-screen mode during resize", () => {
+		cy.mount(
+			<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
+				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+				<Input id="search" slot="searchField"></Input>
+				<ShellBarItem icon={activities} text="Action"></ShellBarItem>
+				<Button slot="content">Button</Button>
+			</ShellBar>
+		);
+
+		// search not focused
+		cy.get("#search").should("not.be.focused");
+		// search field is empty
+		cy.get("#search").should("have.value", "");
+
+		cy.viewport(400, 800);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+
+		cy.viewport(360, 800);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+	});
+});
+
+describe("Overflow", () => {
+	it("Test hidden actions stay hidden when search expands", () => {
+		cy.mount(
+			<ShellBar id="shellbar" showNotifications={true}>
+				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+				<Button slot="content">Content 1</Button>
+				<Button slot="content">Content 2</Button>
+				<Button slot="content">Content 3</Button>
+				<Button slot="content">Content 4</Button>
+				<Button slot="content">Content 5</Button>
+				<Button slot="content">Content 6</Button>
+				<Button slot="content">Content 7</Button>
+				<Button slot="content">Content 8</Button>
+				<ShellBarSearch slot="searchField"></ShellBarSearch>
+				<ShellBarItem id="item1" icon={activities} text="Action 1"></ShellBarItem>
+				<ShellBarItem id="item2" icon={activities} text="Action 2"></ShellBarItem>
+				<ShellBarItem id="item3" icon={sysHelp} text="Action 3"></ShellBarItem>
+				<ShellBarItem id="item4" icon={sysHelp} text="Action 4"></ShellBarItem>
+				<ShellBarItem id="item5" icon={activities} text="Action 5"></ShellBarItem>
+				<ShellBarItem id="item6" icon={activities} text="Action 6"></ShellBarItem>
+				<ShellBarItem id="item7" icon={sysHelp} text="Action 7"></ShellBarItem>
+				<ShellBarItem id="item8" icon={sysHelp} text="Action 8"></ShellBarItem>
+			</ShellBar>
+		);
+
+		cy.viewport(1000, 800);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		// Verify actions are hidden in overflow
+		cy.get("#shellbar").shadow().find(".ui5-shellbar-overflow-button").should("exist");
+		cy.get("#item1").should("not.be.visible");
+
+		// Expand search
+		cy.get("#shellbar").invoke("prop", "showSearchField", true);
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		// Hidden actions should stay hidden (no flicker)
+		cy.get("#item1").should("not.be.visible");
+	});
+});
+
 describe("Keyboard Navigation", () => {
 	it("Test logo area elements are not rendered when no logo and primaryTitle are provided", () => {
 		cy.mount(<ShellBar></ShellBar>);
@@ -1258,10 +1489,8 @@ describe("Keyboard Navigation", () => {
 		// Press right arrow - should move focus away from input since cursor is at end
 		cy.get("@nativeInput").type("{rightArrow}");
 		// Verify focus is now on the ShellBarItem
-		cy.get("[ui5-shellbar]")
-			.shadow()
-			.find(".ui5-shellbar-custom-item")
-			.should("be.focused");
+		cy.get("[ui5-shellbar-item]")
+			.should("have.focus");
 
 		placeInMiddleOfInput();
 		// Press left arrow - should stay focused on input since cursor is in the middle
@@ -1325,45 +1554,34 @@ describe("Branding slot", () => {
 
 describe("Component Behavior", () => {
 	describe("Accessibility", () => {
-		it("tests accessibilityTexts property", () => {
-			const PROFILE_BTN_CUSTOM_TOOLTIP = "John Dow";
-			const LOGO_CUSTOM_TOOLTIP = "Custom logo title";
 
-			cy.mount(
-				<ShellBar>
-					<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
-					<Avatar slot="profile" icon="customer" />
-				</ShellBar>
-			);
-
-			cy.get<ShellBar>("[ui5-shellbar]").then(($shellbar) => {
-				$shellbar[0].accessibilityAttributes = {
-					profile: {
-						name: PROFILE_BTN_CUSTOM_TOOLTIP,
-					},
-					logo: {
-						name: LOGO_CUSTOM_TOOLTIP
-					},
-				};
-			});
+	it("tests accessibilityTexts property", () => {
+		const PROFILE_BTN_CUSTOM_TOOLTIP = "John Dow";
+		const LOGO_CUSTOM_TOOLTIP = "Custom logo title";
 
-			cy.get("[ui5-shellbar]").should("have.prop", "_profileText", PROFILE_BTN_CUSTOM_TOOLTIP);
+		cy.mount(
+			<ShellBar>
+				<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
+				<Avatar slot="profile" icon="customer" />
+			</ShellBar>
+		);
 
-			cy.get("[ui5-shellbar]").should("have.prop", "_logoText", LOGO_CUSTOM_TOOLTIP);
+		cy.get<ShellBar>("[ui5-shellbar]").then(($shellbar) => {
+			$shellbar[0].accessibilityAttributes = {
+				profile: {
+					name: PROFILE_BTN_CUSTOM_TOOLTIP,
+				},
+				logo: {
+					name: LOGO_CUSTOM_TOOLTIP
+				},
+			};
 		});
 
-		it("tests acc default roles", () => {
-			cy.mount(
-				<ShellBar>
-					<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo" />
-				</ShellBar>
-			);
-
-			cy.get("[ui5-shellbar]")
-				.shadow()
-				.find(".ui5-shellbar-logo-area")
-				.should("have.attr", "role", "link");
+		cy.get<ShellBar>("[ui5-shellbar]").then(($shellbar) => {
+			expect($shellbar[0].actionsAccessibilityInfo.profile.title).to.equal(PROFILE_BTN_CUSTOM_TOOLTIP);
+			expect($shellbar[0].legacyAdaptor.logoAriaLabel).to.equal(LOGO_CUSTOM_TOOLTIP);
 		});
+	});
 
 		it("tests accessibilityAttributes property", () => {
 			const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "dialog";
@@ -1396,38 +1614,6 @@ describe("Component Behavior", () => {
 				.find("button")
 				.should("have.attr", "aria-haspopup", NOTIFICATIONS_BTN_ARIA_HASPOPUP);
 		});
-
-		it("tests imageBtnText logical OR fallback - uses default i18n text when no custom text provided", () => {
-			cy.mount(
-				<ShellBar>
-					<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="profile" />
-				</ShellBar>
-			);
-
-			// When no aria-label is provided, imageBtnText should fallback to SHELLBAR_IMAGE_BTN i18n text
-			cy.get("[ui5-shellbar]").should("have.prop", "imageBtnText", "User Menu");
-		});
-
-		it("tests SHELLBAR_IMAGE_BTN i18n key is properly used as fallback", () => {
-			cy.mount(
-				<ShellBar>
-					<Avatar slot="profile" icon="customer" />
-				</ShellBar>
-			);
-
-			// Verify that the exact i18n text from SHELLBAR_IMAGE_BTN is used
-			cy.get("[ui5-shellbar]").then(($shellbar) => {
-				const imageBtnText = $shellbar.prop("imageBtnText");
-				// This should be exactly "User Menu" from messagebundle.properties SHELLBAR_IMAGE_BTN
-				expect(imageBtnText).to.equal("User Menu");
-			});
-
-			// Verify the profile button actually uses this text in its aria-label
-			cy.get("[ui5-shellbar]")
-				.shadow()
-				.find(".ui5-shellbar-image-button")
-				.should("have.attr", "aria-label", "User Menu");
-		});
 	});
 
 	describe("ui5-shellbar menu", () => {
@@ -1546,17 +1732,13 @@ describe("Component Behavior", () => {
 				item.addEventListener("click", cy.stub().as(stubAlias));
 			});
 
-			cy.get("[ui5-shellbar]")
-				.shadow()
-				.find(`.ui5-shellbar-custom-item[icon="accept"]`)
+			cy.get("[ui5-shellbar-item][icon='accept']")
 				.click();
 
 			cy.get("@acceptClick")
 				.should("have.been.calledOnce");
 
-			cy.get("[ui5-shellbar]")
-				.shadow()
-				.find(`.ui5-shellbar-custom-item[icon="alert"]`)
+			cy.get("[ui5-shellbar-item][icon='alert']")
 				.click();
 
 			cy.get("@alertClick")
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index c621c301e620..c0c3bc33ede3 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1,95 +1,117 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import {
-	isSpace,
-	isEnter,
-	isLeft,
-	isRight,
-	isHome,
-	isEnd,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
+
+import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
-import Menu from "@ui5/webcomponents/dist/Menu.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import type { IButton } from "@ui5/webcomponents/dist/Button.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { isDesktop, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import search from "@ui5/webcomponents-icons/dist/search.js";
-import da from "@ui5/webcomponents-icons/dist/da.js";
-import bell from "@ui5/webcomponents-icons/dist/bell.js";
-import overflow from "@ui5/webcomponents-icons/dist/overflow.js";
-import grid from "@ui5/webcomponents-icons/dist/grid.js";
-import type {
-	ClassMap,
-	AccessibilityAttributes,
-	AriaRole,
-	UI5CustomEvent,
-} from "@ui5/webcomponents-base";
-import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
-import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
-import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
-import type ShellBarItem from "./ShellBarItem.js";
-import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js";
-import type ShellBarBranding from "./ShellBarBranding.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import bellIcon from "@ui5/webcomponents-icons/dist/bell.js";
+import gridIcon from "@ui5/webcomponents-icons/dist/grid.js";
+import daIcon from "@ui5/webcomponents-icons/dist/da.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
 
-// Templates
 import ShellBarTemplate from "./ShellBarTemplate.js";
-
-// Styles
 import shellBarStyles from "./generated/themes/ShellBar.css.js";
 import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
+import shellBarLegacyStyles from "./generated/themes/ShellBarLegacy.css.js";
+
+import type { IShellBarSearchController } from "./shellbar/IShellBarSearchController.js";
+
+import ShellBarLegacy from "./shellbar/ShellBarLegacy.js";
+import ShellBarSearch from "./shellbar/ShellBarSearch.js";
+import ShellBarSearchLegacy from "./shellbar/ShellBarSearchLegacy.js";
+import ShellBarOverflow from "./shellbar/ShellBarOverflow.js";
+import ShellBarAccessibility from "./shellbar/ShellBarAccessibility.js";
+import ShellBarItemNavigation from "./shellbar/ShellBarItemNavigation.js";
+
+import ShellBarItem from "./ShellBarItem.js";
+import ShellBarSpacer from "./ShellBarSpacer.js";
+import type ShellBarBranding from "./ShellBarBranding.js";
+import type { ShellBarOverflowResult } from "./shellbar/ShellBarOverflow.js";
+
+import type {
+	ShellBarAccessibilityInfo,
+	ShellBarAccessibilityAttributes,
+	ShellBarAreaAccessibilityAttributes,
+	ShellBarLogoAccessibilityAttributes,
+	ShellBarProfileAccessibilityAttributes,
+} from "./shellbar/ShellBarAccessibility.js";
 
 import {
 	SHELLBAR_LABEL,
-	SHELLBAR_LOGO,
 	SHELLBAR_NOTIFICATIONS,
 	SHELLBAR_NOTIFICATIONS_NO_COUNT,
-	SHELLBAR_CANCEL,
 	SHELLBAR_PROFILE,
 	SHELLBAR_PRODUCTS,
 	SHELLBAR_SEARCH,
-	SHELLBAR_SEARCH_FIELD,
+	SHELLBAR_ASSISTANT,
 	SHELLBAR_OVERFLOW,
-	SHELLBAR_LOGO_AREA,
 	SHELLBAR_ADDITIONAL_CONTEXT,
-	SHELLBAR_SEARCHFIELD_DESCRIPTION,
-	SHELLBAR_SEARCH_BTN_OPEN,
-	SHELLBAR_PRODUCT_SWITCH_BTN,
-	SHELLBAR_IMAGE_BTN,
 } from "./generated/i18n/i18n-defaults.js";
+import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 
-type ShellBarLogoAccessibilityAttributes = {
-	role?: Extract<AriaRole, "button" | "link">,
-	name?: string,
-}
-type ShellBarProfileAccessibilityAttributes = Pick<AccessibilityAttributes, "name" | "expanded" | "hasPopup">;
-type ShellBarAreaAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded">;
-type ShellBarBrandingAccessibilityAttributes = Pick<AccessibilityAttributes, "name">;
-type ShellBarAccessibilityAttributes = {
-	logo?: ShellBarLogoAccessibilityAttributes
-	notifications?: ShellBarAreaAccessibilityAttributes
-	profile?: ShellBarProfileAccessibilityAttributes,
-	product?: ShellBarAreaAccessibilityAttributes
-	search?: ShellBarAreaAccessibilityAttributes
-	overflow?: ShellBarAreaAccessibilityAttributes
-	branding?: ShellBarBrandingAccessibilityAttributes
+type ShellBarBreakpoint = "S" | "M" | "L" | "XL" | "XXL";
+
+// actions always visible in lean mode, order is important
+const PREDEFINED_PLACE_ITEMS = ["feedback", "sys-help"];
+
+const ShellBarActions = {
+	Search: "search",
+	Profile: "profile",
+	Overflow: "overflow",
+	Assistant: "assistant",
+	ProductSwitch: "products",
+	Notifications: "notifications",
+};
+
+const ShellBarActionsSelectors = {
+	Search: ".ui5-shellbar-search-toggle",
+	Profile: ".ui5-shellbar-image-button",
+	Overflow: ".ui5-shellbar-overflow-button",
+	Assistant: ".ui5-shellbar-assistant-button",
+	ProductSwitch: ".ui5-shellbar-button-product-switch",
+	Notifications: ".ui5-shellbar-bell-button",
+};
+
+type ShellBarActionId = typeof ShellBarActions[keyof typeof ShellBarActions];
+
+type ShellBarActionItem = {
+	id: ShellBarActionId;
+	icon?: string;
+	count?: string;
+	enabled: boolean; 		// Whether the action is enabled and should be displayed
+	selector: string; 		// The selector by which we can target the action
+	isProtected: boolean 	// Whether the action can go into the overflow
+	stableDomRef?: string;
 };
 
+interface IShellBarSearchField extends HTMLElement {
+	focused: boolean;
+	value: string;
+	collapsed?: boolean;
+	open?: boolean;
+}
+
+// Event Types
+
 type ShellBarNotificationsClickEventDetail = {
 	targetRef: HTMLElement;
 };
@@ -127,44 +149,6 @@ type ShellBarSearchFieldClearEventDetail = {
 	targetRef: HTMLElement;
 };
 
-interface IShellBarSearchField extends HTMLElement {
-	focused: boolean;
-	value: string;
-	collapsed?: boolean;
-	open?: boolean;
-}
-
-interface IShellBarHidableItem {
-	classes: string,
-	id: string,
-	show: boolean,
-}
-
-interface IShelBarItemInfo extends IShellBarHidableItem {
-	icon?: string,
-	text?: string,
-	count?: string,
-	custom?: boolean,
-	title?: string,
-	stableDomRef?: string,
-	refItemid?: string,
-	press: (e: UI5CustomEvent<Button, "click">) => void,
-	order?: number,
-	profile?: boolean,
-	tooltip?: string,
-	accessibilityAttributes?: ShellBarItemAccessibilityAttributes,
-	accessibleName?: string,
-}
-
-interface IShellBarContentItem extends IShellBarHidableItem {
-	hideOrder: number,
-}
-
-const RESIZE_THROTTLE_RATE = 200; // ms
-
-// actions always visible in lean mode, order is important
-const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"];
-
 /**
  * @class
  * ### Overview
@@ -200,19 +184,22 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"];
 
 @customElement({
 	tag: "ui5-shellbar",
-	fastNavigation: true,
-	languageAware: true,
+	styles: [shellBarStyles, shellBarLegacyStyles, ShellBarPopoverCss],
 	renderer: jsxRenderer,
 	template: ShellBarTemplate,
-	styles: [shellBarStyles, ShellBarPopoverCss],
+	fastNavigation: true,
+	languageAware: true,
 	dependencies: [
-		Button,
 		Icon,
 		List,
+		Button,
+		ButtonBadge,
 		Popover,
+		ShellBarSpacer,
+		ShellBarItem,
 		ListItemStandard,
+		// legacy dependencies
 		Menu,
-		ButtonBadge,
 	],
 })
 /**
@@ -334,44 +321,78 @@ class ShellBar extends UI5Element {
 	}
 
 	/**
-	 * Defines the visibility state of the search button.
+	 * Defines a `ui5-button` in the bar that will be placed in the beginning.
+	 * We encourage this slot to be used for a menu button.
+	 * It gets overstyled to match ShellBar's styling.
+	 * @public
+	 */
+	@slot()
+	startButton!: Array<IButton>;
+
+	/**
+	 * Defines the branding slot.
+	 * The `ui5-shellbar-branding` component is intended to be placed inside this slot.
+	 * Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot.
 	 *
-	 * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
-	 * @default false
+	 * **Note:** The `branding` slot is in an experimental state and is a subject to change.
+	 *
+	 * @since 2.12.0
 	 * @public
 	 */
-	@property({ type: Boolean })
-	hideSearchButton = false;
+	@slot()
+	branding!: Array<ShellBarBranding>;
 
 	/**
-	 * Disables the automatic search field expansion/collapse when the available space is not enough.
+	 * Define the items displayed in the content area.
+	 *
+	 * Use the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.
+	 * Lower values will be hidden first.
+	 *
+	 * **Note:** The `content` slot is in an experimental state and is a subject to change.
 	 *
-	 * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
-	 * @default false
 	 * @public
+	 * @since 2.7.0
 	 */
-	@property({ type: Boolean })
-	disableSearchCollapse = false;
+	@slot({ type: HTMLElement, individualSlots: true })
+	content!: Array<HTMLElement>;
 
 	/**
-	 * Defines the `primaryTitle`.
+	 * Defines the `ui5-input`, that will be used as a search field.
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	searchField!: Array<IShellBarSearchField>;
+
+	/**
+	 * Defines the assistant slot.
 	 *
-	 * **Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).
-	 * @default undefined
+	 * @since 2.0.0
 	 * @public
 	 */
-	@property()
-	primaryTitle?: string;
+	@slot()
+	assistant!: Array<IButton>;
 
 	/**
-	 * Defines the `secondaryTitle`.
+	 * Defines the `ui5-shellbar` additional items.
 	 *
-	 * **Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).
-	 * @default undefined
+	 * **Note:**
+	 * You can use the `<ui5-shellbar-item></ui5-shellbar-item>`.
 	 * @public
 	 */
-	@property()
-	secondaryTitle?: string;
+	@slot({ type: HTMLElement, "default": true, individualSlots: true })
+	items!: Array<ShellBarItem>;
+
+	/**
+	 * You can pass `ui5-avatar` to set the profile image/icon.
+	 * If no profile slot is set - profile will be excluded from actions.
+	 *
+	 * **Note:** We recommend not using the `size` attribute of `ui5-avatar` because
+	 * it should have specific size by design in the context of `ui5-shellbar` profile.
+	 * @since 1.0.0-rc.6
+	 * @public
+	 */
+	@slot()
+	profile!: Array<HTMLElement>;
 
 	/**
 	 * Defines the `notificationsCount`,
@@ -452,71 +473,131 @@ class ShellBar extends UI5Element {
 	breakpointSize = "S";
 
 	/**
+	 * Actions computed from controllers.
+	 * @private
+	 */
+	@property({ type: Object })
+	actions: ShellBarActionItem[] = [];
+
+	/**
+	 * Show overflow button when items are hidden.
 	 * @private
 	 */
 	@property({ type: Boolean })
-	withLogo = false;
+	showOverflowButton = false;
 
-	@property({ type: Object })
-	_itemsInfo: Array<IShelBarItemInfo> = [];
+	/**
+	 * Open state of the overflow popover.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	overflowPopoverOpen = false;
 
+	/**
+	 * IDs of items currently hidden due to overflow.
+	 * Used to trigger rerender for conditional rendering.
+	 * @private
+	 */
 	@property({ type: Object })
-	_contentInfo: Array<IShellBarContentItem> = [];
+	hiddenItemsIds: string[] = [];
+
+	/**
+	 * Show full-screen search overlay.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	showFullWidthSearch = false;
+
+	/**
+	 * Spacer element.
+	 * @private
+	 */
+	@query(".ui5-shellbar-spacer")
+	spacer?: HTMLElement;
 
-	@property({ type: Boolean, noAttribute: true })
-	_menuPopoverExpanded = false;
+	/**
+	 * Outer container of the overflow container.
+	 * @private
+	 */
+	@query(".ui5-shellbar-overflow-container")
+	overflowOuter?: HTMLElement;
 
-	@property({ type: Boolean, noAttribute: true })
-	_overflowPopoverExpanded = false;
+	/**
+	 * Inner container of the overflow container.
+	 * @private
+	 */
+	@query(".ui5-shellbar-overflow-container-inner")
+	overflowInner?: HTMLElement;
 
-	@property({ type: Boolean, noAttribute: true })
-	showFullWidthSearch = false;
+	@i18n("@ui5/webcomponents-fiori")
+	static i18nBundle: I18nBundle;
 
-	_cachedHiddenContent: Array<HTMLElement> = [];
+	private readonly RESIZE_THROTTLE_RATE = 100; // ms
+	private handleResizeBound: ResizeObserverCallback = throttle(this.handleResize.bind(this), this.RESIZE_THROTTLE_RATE);
+
+	private readonly breakpoints = [599, 1023, 1439, 1919, 10000];
+	private readonly breakpointMap: Record<number, ShellBarBreakpoint> = {
+		599: "S",
+		1023: "M",
+		1439: "L",
+		1919: "XL",
+		10000: "XXL",
+	};
+
+	itemNavigation = new ShellBarItemNavigation({
+		getDomRef: () => this.getDomRef() || null,
+	});
+
+	overflow = new ShellBarOverflow();
+	accessibility: ShellBarAccessibility = new ShellBarAccessibility();
+
+	private _searchAdaptor = new ShellBarSearch(this.getSearchDeps());
+	private _searchAdaptorLegacy = new ShellBarSearchLegacy({
+		...this.getSearchDeps(),
+		getDisableSearchCollapse: () => this.disableSearchCollapse,
+	});
+
+	/* =================== Legacy Members =================== */
 
 	/**
-	 * Defines the assistant slot.
+	 * Defines the visibility state of the search button.
 	 *
-	 * @since 2.0.0
+	 * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
+	 * @default false
 	 * @public
 	 */
-	@slot()
-	assistant!: Array<IButton>;
+	@property({ type: Boolean })
+	hideSearchButton = false;
 
 	/**
-	 * Defines the branding slot.
-	 * The `ui5-shellbar-branding` component is intended to be placed inside this slot.
-	 * Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot.
-	 *
-	 * **Note:** The `branding` slot is in an experimental state and is a subject to change.
+	 * Disables the automatic search field expansion/collapse when the available space is not enough.
 	 *
-	 * @since 2.12.0
+	 * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
+	 * @default false
 	 * @public
 	 */
-	@slot()
-	branding!: Array<ShellBarBranding>;
+	@property({ type: Boolean })
+	disableSearchCollapse = false;
 
 	/**
-	 * Defines the `ui5-shellbar` additional items.
+	 * Defines the `primaryTitle`.
 	 *
-	 * **Note:**
-	 * You can use the `<ui5-shellbar-item></ui5-shellbar-item>`.
+	 * **Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).
+	 * @default undefined
 	 * @public
 	 */
-	@slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
-	items!: Array<ShellBarItem>;
+	@property()
+	primaryTitle?: string;
 
 	/**
-	 * You can pass `ui5-avatar` to set the profile image/icon.
-	 * If no profile slot is set - profile will be excluded from actions.
+	 * Defines the `secondaryTitle`.
 	 *
-	 * **Note:** We recommend not using the `size` attribute of `ui5-avatar` because
-	 * it should have specific size by design in the context of `ui5-shellbar` profile.
-	 * @since 1.0.0-rc.6
+	 * **Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).
+	 * @default undefined
 	 * @public
 	 */
-	@slot()
-	profile!: Array<HTMLElement>;
+	@property()
+	secondaryTitle?: string;
 
 	/**
 	 * Defines the logo of the `ui5-shellbar`.
@@ -538,23 +619,11 @@ class ShellBar extends UI5Element {
 	menuItems!: Array<ListItemBase>;
 
 	/**
-	 * Defines the `ui5-input`, that will be used as a search field.
-	 * @public
-	 */
-	@slot({
-		type: HTMLElement,
-		invalidateOnChildChange: true,
-	})
-	searchField!: Array<IShellBarSearchField>;
-
-	/**
-	 * Defines a `ui5-button` in the bar that will be placed in the beginning.
-	 * We encourage this slot to be used for a menu button.
-	 * It gets overstyled to match ShellBar's styling.
-	 * @public
+	 * Open state of the menu popover (legacy).
+	 * @private
 	 */
-	@slot()
-	startButton!: Array<IButton>;
+	@property({ type: Boolean })
+	menuPopoverOpen = false;
 
 	/**
 	 * The container is positioned in the center of the `ui5-shellbar` and occupies one-third of the total length of the `ui5-shellbar`.
@@ -565,340 +634,314 @@ class ShellBar extends UI5Element {
 	@slot()
 	midContent!: Array<HTMLElement>;
 
-	/**
-	 * Define the items displayed in the content area.
-	 *
-	 * Use the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.
-	 * Lower values will be hidden first.
-	 *
-	 * **Note:** The `content` slot is in an experimental state and is a subject to change.
-	 *
-	 * @public
-	 * @since 2.7.0
-	 */
-	@slot({ type: HTMLElement, individualSlots: true })
-	content!: Array<HTMLElement>;
+	legacyAdaptor?: ShellBarLegacy;
 
-	@i18n("@ui5/webcomponents-fiori")
-	static i18nBundle: I18nBundle;
-	overflowPopover?: Popover | null;
-	menuPopover?: Popover | null;
-	_isInitialRendering: boolean;
-	_defaultItemPressPrevented: boolean;
-	contentItemsObserver: MutationObserver;
-	_hiddenIcons: Array<IShelBarItemInfo>;
-	_handleResize: ResizeObserverCallback;
-	_overflowNotifications: string | null;
-	_lastOffsetWidth = 0;
-	_observableContent: Array<HTMLElement> = [];
-	_autoRestoreSearchField = false;
-
-	_onSearchOpenBound = this._onSearchOpen.bind(this);
-	_onSearchCloseBound = this._onSearchClose.bind(this);
-	_onSearchBound = this._onSearch.bind(this);
-
-	_headerPress: () => void;
-
-	static get FIORI_3_BREAKPOINTS() {
-		return [
-			599,
-			1023,
-			1439,
-			1919,
-			10000,
-		];
+	/* =================== Lifecycle Methods =================== */
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this.handleResizeBound);
+		this.searchAdaptor?.subscribe();
 	}
 
-	static get FIORI_3_BREAKPOINTS_MAP(): Record<string, string> {
-		return {
-			"599": "S",
-			"1023": "M",
-			"1439": "L",
-			"1919": "XL",
-			"10000": "XXL",
-		};
+	onExitDOM() {
+		ResizeHandler.deregister(this, this.handleResizeBound);
+		this.searchAdaptor?.unsubscribe();
 	}
 
-	constructor() {
-		super();
+	onBeforeRendering() {
+		if (!this.legacyAdaptor) {
+			this.initLegacyController();
+		}
+		// Sync branding breakpoint state
+		this.branding.forEach(brandingEl => {
+			brandingEl._isSBreakPoint = this.isSBreakPoint;
+		});
 
-		this._hiddenIcons = [];
-		this._isInitialRendering = true;
-		this._overflowNotifications = null;
+		this.buildActions();
 
-		// marks if preventDefault() is called in item's press handler
-		this._defaultItemPressPrevented = false;
+		this.searchAdaptor?.syncShowSearchFieldState();
+		// subscribe to search adaptor for cases when search is added dynamically
+		this.searchAdaptor?.unsubscribe();
+		this.searchAdaptor?.subscribe();
+	}
 
-		this.contentItemsObserver = new MutationObserver(() => {
-			this._handleActionsOverflow();
-		});
+	onAfterRendering() {
+		this.updateBreakpoint();
+		this.updateOverflow();
+	}
 
-		this._headerPress = () => {
-			if (this.hasMenuItems) {
-				const menuPopover = this._getMenuPopover();
-				menuPopover.opener = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-menu-button")!;
-				menuPopover.open = true;
-			}
-		};
+	/* =================== Actions Management =================== */
 
-		this._handleResize = throttle(() => {
-			this.menuPopover = this._getMenuPopover();
-			this.overflowPopover = this._getOverflowPopover();
-			this.overflowPopover.open = false;
-			if (this._lastOffsetWidth !== this.offsetWidth) {
-				this._overflowActions();
-				if (this.autoSearchField) {
-					this._updateSearchFieldState();
-				}
-			}
-		}, RESIZE_THROTTLE_RATE);
+	private buildActions() {
+		this.actions = [
+			{
+				id: ShellBarActions.Search,
+				icon: searchIcon,
+				enabled: this.enabledFeatures.search,
+				selector: ShellBarActionsSelectors.Search,
+				isProtected: false,
+				stableDomRef: "toggle-search",
+			},
+			{
+				id: ShellBarActions.Assistant,
+				icon: daIcon,
+				enabled: this.enabledFeatures.assistant,
+				selector: ShellBarActionsSelectors.Assistant,
+				isProtected: false,
+			},
+			{
+				id: ShellBarActions.Notifications,
+				icon: bellIcon,
+				count: this.notificationsCount,
+				enabled: this.enabledFeatures.notifications,
+				selector: ShellBarActionsSelectors.Notifications,
+				isProtected: false,
+				stableDomRef: "notifications",
+			},
+			{
+				id: ShellBarActions.Overflow,
+				icon: overflowIcon,
+				enabled: this.enabledFeatures.overflow,
+				selector: ShellBarActionsSelectors.Overflow,
+				isProtected: true,
+				stableDomRef: "overflow",
+			},
+			{
+				id: ShellBarActions.Profile,
+				enabled: this.enabledFeatures.profile,
+				selector: ShellBarActionsSelectors.Profile,
+				isProtected: true,
+				stableDomRef: "profile",
+			},
+			{
+				id: ShellBarActions.ProductSwitch,
+				icon: gridIcon,
+				enabled: this.enabledFeatures.productSwitch,
+				selector: ShellBarActionsSelectors.ProductSwitch,
+				isProtected: true,
+				stableDomRef: "product-switch",
+			},
+		].filter(action => action.enabled);
 	}
 
-	_onSearchOpen(e: Event) {
-		if (e.target !== this.search) {
-			this._detachSearchFieldListeners(e.target as HTMLElement);
-			return;
-		}
-		if (isPhone()) {
-			this.setSearchState(true);
-		}
+	getAction(actionId: ShellBarActionId) {
+		return this.actions.find(action => action.id === actionId);
 	}
 
-	_onSearchClose(e: Event) {
-		if (e.target !== this.search) {
-			this._detachSearchFieldListeners(e.target as HTMLElement);
-			return;
-		}
-		if (isPhone()) {
-			this.setSearchState(false);
-		}
+	getActionOverflowText(actionId: ShellBarActionId): string {
+		const texts: Record<string, string> = {
+			[ShellBarActions.Search]: this.texts.search,
+			[ShellBarActions.Profile]: this.texts.profile,
+			[ShellBarActions.Overflow]: this.texts.overflow,
+			[ShellBarActions.Assistant]: this.texts.assistant,
+			[ShellBarActions.ProductSwitch]: this.texts.products,
+			[ShellBarActions.Notifications]: this.texts.notificationsNoCount,
+		};
+		return texts[actionId] || actionId;
 	}
 
-	_onSearch(e: Event) {
-		if (e.target !== this.search) {
-			this._detachSearchFieldListeners(e.target as HTMLElement);
-			return;
-		}
+	/* =================== Breakpoint Management =================== */
 
-		// Decide when to toggle the search field:
-		// - On mobile, the search opens on its own (we don’t interfere).
-		// - If there’s already a value, onSearch is responsible for triggering the search (we don’t interfere)
-		// - If the field is closed, we must open it regardless.
-		if (isPhone() || (this.search?.value && this.showSearchField)) {
-			return;
-		}
-
-		this.setSearchState(!this.showSearchField);
+	get isSBreakPoint() {
+		return this.breakpointSize === "S";
 	}
 
-	_updateSearchFieldState() {
-		const spacerWidth = this.shadowRoot!.querySelector(".ui5-shellbar-spacer") ? this.shadowRoot!.querySelector(".ui5-shellbar-spacer")!.getBoundingClientRect().width : 0;
-		const searchFieldWidth = this.domCalculatedValues("--_ui5_shellbar_search_field_width");
-		if (this.showFullWidthSearch) {
-			this.setSearchState(true);
-			return;
-		}
-		if ((spacerWidth <= searchFieldWidth && this.contentItemsHidden.length !== 0) && this.showSearchField) {
-			this.setSearchState(false);
-			this._autoRestoreSearchField = true;
-		} else if (spacerWidth > searchFieldWidth && this._autoRestoreSearchField) {
-			this.setSearchState(true);
-			this._autoRestoreSearchField = false;
+	private updateBreakpoint() {
+		const width = this.getBoundingClientRect().width;
+		const bp = this.breakpoints.find(b => width <= b) || 10000;
+		const breakpoint = this.breakpointMap[bp];
+
+		if (this.breakpointSize !== breakpoint) {
+			this.breakpointSize = breakpoint;
 		}
 	}
 
-	_onKeyDown(e: KeyboardEvent) {
-		if (!isLeft(e) && !isRight(e) && !isHome(e) && !isEnd(e)) {
-			return;
-		}
+	/* =================== Overflow Management =================== */
 
-		const domRef = this.getDomRef();
-		if (!domRef) {
-			// If the component is not rendered yet, we should not handle the keydown event
+	private updateOverflow() {
+		if (!this.overflow) {
 			return;
 		}
 
-		const activeElement = getActiveElement();
-		if (!activeElement) {
-			return;
-		}
+		const result = this.overflow.updateOverflow({
+			actions: this.actions,
+			content: this.sortContent(this.content),
+			customItems: this.sortItems(this.items),
+			hiddenItemsIds: this.hiddenItemsIds,
+			showSearchField: this.enabledFeatures.search && this.showSearchField,
+			overflowOuter: this.overflowOuter!,
+			overflowInner: this.overflowInner!,
+			setVisible: (selector: string, visible: boolean) => {
+				const element = this.shadowRoot!.querySelector(selector);
+				if (element) {
+					element.classList[visible ? "remove" : "add"]("ui5-shellbar-hidden");
+				}
+			},
+		});
 
-		// Check if the active elements should "steal" the navigation
-		if (this._allowChildNavigation(activeElement as HTMLElement, e)) {
-			return;
-		}
+		this.handleUpdateOverflowResult(result);
 
-		const items = getTabbableElements(domRef).filter(el => this._isVisible(el));
-		const currentIndex = items.findIndex(el => el === activeElement);
-
-		// Only handle arrow navigation if the focus is on a ShellBar item
-		if (currentIndex !== -1) {
-			e.preventDefault();
-
-			// Focus navigation based on the key pressed
-			if (isLeft(e)) {
-				this._focusPreviousItem(items, currentIndex);
-			} else if (isRight(e)) {
-				this._focusNextItem(items, currentIndex);
-			} else if (isHome(e)) {
-				// Move focus to the first ShellBar item
-				items[0]?.focus();
-			} else if (isEnd(e)) {
-				// Move focus to the last ShellBar item
-				items[items.length - 1]?.focus();
-			}
-		}
+		return result.hiddenItemsIds;
 	}
 
-	private _allowChildNavigation(activeElement: HTMLElement, e: KeyboardEvent): boolean {
-		if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
-			return this._allowInputNavigation(activeElement as HTMLInputElement | HTMLTextAreaElement, e);
-		}
-
-		return false; // Default to false for other elements
-	}
+	private handleUpdateOverflowResult(result: ShellBarOverflowResult) {
+		const { hiddenItemsIds, showOverflowButton } = result;
 
-	private _allowInputNavigation(inputElement: HTMLInputElement | HTMLTextAreaElement, e: KeyboardEvent): boolean {
-		const cursorPosition = inputElement.selectionStart || 0;
-		const textLength = inputElement.value.length;
+		// Update items overflow state
+		this.items.forEach(item => {
+			item.inOverflow = hiddenItemsIds.includes(item._id);
+			if (item.inOverflow) {
+				// clear the hidden class to ensure the item is visible in the overflow popover
+				item.classList.remove("ui5-shellbar-hidden");
+			}
+		});
 
-		// Allow internal navigation if cursor is not at the boundaries
-		if ((isLeft(e) && cursorPosition > 0)
-		|| (isRight(e) && cursorPosition < textLength)) {
-			return true;
+		if (!arraysAreEqual(this.hiddenItemsIds, hiddenItemsIds)) {
+			this.handleContentVisibilityChanged(this.hiddenItemsIds, hiddenItemsIds);
+			this.hiddenItemsIds = hiddenItemsIds;
+			this.showOverflowButton = showOverflowButton;
 		}
-
-		// Let ShellBar handle navigation if at boundaries
-		return false;
+		this.showFullWidthSearch = this.searchAdaptor?.shouldShowFullScreen() || false;
 	}
 
-	_focusNextItem(items: HTMLElement[], currentIndex: number) {
-		if (currentIndex < items.length - 1) {
-			(items[currentIndex + 1]).focus(); // Focus the next element
-		}
-	}
+	private handleContentVisibilityChanged(oldHiddenItemsIds: string[], newHiddenItemsIds: string[]) {
+		const filterContentIds = (ids: string[]) => ids.filter(id => this.content.some(item => (item as any)._individualSlot as string === id));
+		const oldHiddenContentIds = filterContentIds(oldHiddenItemsIds);
+		const newHiddenContentIds = filterContentIds(newHiddenItemsIds);
 
-	_focusPreviousItem(items: HTMLElement[], currentIndex: number) {
-		if (currentIndex > 0) {
-			(items[currentIndex - 1]).focus(); // Focus the previous element
+		if (!arraysAreEqual(oldHiddenContentIds, newHiddenContentIds)) {
+			this.fireDecoratorEvent("content-item-visibility-change", {
+				items: newHiddenContentIds.map(id => this.content.find(item => (item as any)._individualSlot as string === id)!),
+			});
 		}
 	}
 
-	_isVisible(element: HTMLElement): boolean {
-		const style = getComputedStyle(element);
-
-		return style.display !== "none" && style.visibility !== "hidden" && element.offsetWidth > 0 && element.offsetHeight > 0;
+	private handleResize() {
+		this.overflowPopoverOpen = false;
+		this.updateBreakpoint();
+		const hiddenItemsIds = this.updateOverflow() ?? [];
+		const spacerWidth = this.spacer?.getBoundingClientRect().width || 0;
+		this.searchAdaptor?.autoManageSearchState(hiddenItemsIds.length, spacerWidth);
 	}
 
-	_getRightChildItems() {
-		return [
-			...this.searchField,
-			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-search-item-for-arrow-nav"),
-			...this.assistant,
-			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-items-for-arrow-nav"),
-		] as HTMLElement[];
+	isHidden(itemId: string) {
+		return this.hiddenItemsIds.includes(itemId);
 	}
 
-	_menuItemPress(e: CustomEvent<ListItemClickEventDetail>) {
-		const shouldContinue = this.fireDecoratorEvent("menu-item-click", {
-			item: e.detail.item,
-		});
-		if (shouldContinue) {
-			this.menuPopover!.open = false;
-		}
+	handleOverflowClick() {
+		this.overflowPopoverOpen = !this.overflowPopoverOpen;
 	}
 
-	_logoPress() {
-		this.fireDecoratorEvent("logo-click", {
-			targetRef: this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-logo")!,
-		});
+	onPopoverClose() {
+		this.overflowPopoverOpen = false;
 	}
 
-	_menuPopoverBeforeOpen() {
-		this._menuPopoverExpanded = true;
-		if (this.menuPopover!.content && this.menuPopover!.content.length) {
-			(<List> this.menuPopover!.content[0]).focusFirstItem();
-		}
+	/**
+	 * Closes the overflow popover.
+	 * @public
+	 */
+	closeOverflow(): void {
+		this.overflowPopoverOpen = false;
 	}
 
-	_menuPopoverAfterClose() {
-		this._menuPopoverExpanded = false;
-	}
+	handleOverflowItemClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		const actionId = target.getAttribute("data-action-id");
+
+		let prevented = e.defaultPrevented; // for custom actions
 
-	_overflowPopoverBeforeOpen() {
-		this._overflowPopoverExpanded = true;
-		if (this.overflowPopover!.content && this.overflowPopover!.content.length) {
-			(<List> this.overflowPopover!.content[0]).focusFirstItem();
+		if (actionId === ShellBarActions.Notifications) {
+			prevented = this.handleNotificationsClick();
+		} else if (actionId === ShellBarActions.Search) {
+			prevented = this.handleSearchButtonClick();
 		}
-	}
 
-	_overflowPopoverAfterClose() {
-		this._overflowPopoverExpanded = false;
+		if (!prevented) {
+			this.overflowPopoverOpen = false;
+		}
 	}
 
-	_logoKeyup(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			this._logoPress();
-		}
+	get overflowItems() {
+		return this.overflow.getOverflowItems({
+			actions: this.actions,
+			customItems: this.sortItems(this.items),
+			hiddenItemsIds: this.hiddenItemsIds,
+		});
 	}
 
-	_logoKeydown(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-			return;
+	/**
+	 * Returns badge text for overflow button.
+	 * Shows count if only one item with count is overflowed, otherwise shows attention dot.
+	 */
+	get overflowBadge(): string | undefined {
+		const itemsWithCount = this.overflowItems.filter(item => item.data.count);
+		if (itemsWithCount.length === 1) {
+			return itemsWithCount[0].data.count;
 		}
-
-		if (isEnter(e)) {
-			this._logoPress();
+		if (itemsWithCount.length > 1) {
+			return " "; // Attention dot
 		}
+		return undefined;
 	}
 
-	_calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {
-		return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
+	/* =================== Search Management =================== */
+
+	get search() {
+		return this.searchField.length ? this.searchField[0] : null;
 	}
 
-	domCalculatedValues(cssVar: string): number {
-		const shellbarComputerStyle = getComputedStyle(this.getDomRef()!);
-		return this._calculateCSSREMValue(shellbarComputerStyle, cssVar); // px
+	get isSelfCollapsibleSearch(): boolean {
+		const searchField = this.search;
+		if (searchField) {
+			return "collapsed" in searchField && "open" in searchField;
+		}
+		return false;
 	}
 
-	onBeforeRendering() {
-		this.withLogo = this.hasLogo;
+	private getSearchDeps() {
+		return {
+			getSearchField: () => this.search,
+			getSearchState: () => this.enabledFeatures.search && this.showSearchField,
+			getCSSVariable: (cssVar: string) => this.getCSSVariable(cssVar),
+			setSearchState: (expanded: boolean) => this.setSearchState(expanded),
+			getOverflowed: () => this.overflow.isOverflowing(this.overflowOuter!, this.overflowInner!),
+		};
+	}
 
-		this._hiddenIcons = this._itemsInfo.filter(info => {
-			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
-			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
-			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
-			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
-			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
+	get searchAdaptor(): IShellBarSearchController {
+		if (this.isSelfCollapsibleSearch) {
+			return this._searchAdaptor;
+		}
+		return this._searchAdaptorLegacy;
+	}
 
-			return isHidden && isSet && !shouldStayOnScreen;
+	handleSearchButtonClick() {
+		const searchButton = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-search-button");
+		const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
+			targetRef: searchButton!,
+			searchFieldVisible: this.showSearchField,
 		});
 
-		this._observeContentItems();
-
-		// search field shouldn't be expanded initially in full width mode
-		if (this.showFullWidthSearch && this._isInitialRendering) {
-			this.setSearchState(false);
-			this._autoRestoreSearchField = true;
+		if (defaultPrevented) {
+			return defaultPrevented;
 		}
 
-		if (isSelfCollapsibleSearch(this.search)) {
-			if (isPhone()) {
-				this.search.open = this.showSearchField;
-			} else {
-				this.search.collapsed = !this.showSearchField;
-			}
+		this.setSearchState(!this.showSearchField);
+
+		if (!this.showSearchField) {
+			return defaultPrevented;
+		}
 
-			this._detachSearchFieldListeners(this.search);
-			this._attachSearchFieldListeners(this.search);
+		const input = this.searchField[0];
+		if (input) {
+			input.focused = true;
+			setTimeout(() => {
+				input.focus();
+			}, 100);
 		}
+		return defaultPrevented;
 	}
 
-	/**
-	 * Use this method to change the state of the search filed according to internal logic.
-	 * An event is fired to notify the change.
-	 */
 	async setSearchState(expanded: boolean) {
 		if (expanded === this.showSearchField) {
 			return;
@@ -908,253 +951,167 @@ class ShellBar extends UI5Element {
 		this.fireDecoratorEvent("search-field-toggle", { expanded });
 	}
 
-	onAfterRendering() {
-		this._lastOffsetWidth = this.offsetWidth;
-		this._overflowActions();
-		this.onInitialRendering();
-	}
-
-	async onInitialRendering() {
-		if (this._isInitialRendering) {
-			await renderFinished();
-			if (this.autoSearchField) {
-				this._updateSearchFieldState();
-			}
-		}
-		this._isInitialRendering = false;
-	}
-
-	/**
-	 * Closes the overflow area.
-	 * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
-	 * @public
-	 */
-	closeOverflow(): void {
-		if (this.overflowPopover) {
-			this.overflowPopover.open = false;
-		}
-	}
-
-	_handleBarBreakpoints() {
-		const width = this.getBoundingClientRect().width;
-		const breakpoints = ShellBar.FIORI_3_BREAKPOINTS;
-
-		const size = breakpoints.find(bp1 => width <= bp1) || ShellBar.FIORI_3_BREAKPOINTS[ShellBar.FIORI_3_BREAKPOINTS.length - 1];
-		const mappedSize = ShellBar.FIORI_3_BREAKPOINTS_MAP[size];
-
-		if (this.breakpointSize !== mappedSize) {
-			this.breakpointSize = mappedSize;
+	handleCancelButtonClick() {
+		const cancelBtn = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-cancel-button");
+		if (!cancelBtn) {
+			return;
 		}
 
-		this.branding.forEach(brandingEl => {
-			brandingEl._isSBreakPoint = this.isSBreakPoint;
+		const clearDefaultPrevented = !this.fireDecoratorEvent("search-field-clear", {
+			targetRef: cancelBtn,
 		});
-	}
 
-	_hideItems(items: IShellBarHidableItem[]) {
-		items.forEach(item => {
-			if (item.classes.indexOf("ui5-shellbar-no-overflow-button") === -1) {
-				item.classes = `${item.classes} ui5-shellbar-hidden-button`;
-			}
-		});
-		return items;
-	}
+		this.showFullWidthSearch = false;
+		this.setSearchState(false);
 
-	_resetItemsVisibility(items: Array<HTMLElement>) {
-		items.forEach(item => {
-			item.classList.remove("ui5-shellbar-hidden-button");
-		});
+		if (!clearDefaultPrevented && this.search) {
+			this.search.value = "";
+		}
 	}
 
-	_handleActionsOverflow() {
-		const inner = this.overflowInner;
-		const wrapper = this.overflowWrapper;
-		const hidableDomElements = this.hidableDomElements;
-		const hiddenItems: string[] = [];
-		let lastHiddenIndex = 0;
-
-		this._resetItemsVisibility(hidableDomElements);
-
-		for (let i = 0; i < hidableDomElements.length; i++) {
-			if (inner?.offsetWidth === wrapper?.offsetWidth) {
-				lastHiddenIndex = i;
-				break;
-			}
+	/* =================== Legacy Features Management =================== */
 
-			const item = hidableDomElements[i];
-			hiddenItems.push(item.id);
-			item.classList.add("ui5-shellbar-hidden-button");
-		}
-
-		if (hiddenItems.length === 1 && !this.showSearchField) {
-			const nextItemToHide = hidableDomElements[++lastHiddenIndex];
-			if (nextItemToHide) {
-				hiddenItems.push(nextItemToHide.id);
-			}
+	private initLegacyController() {
+		if (this.hasLegacyFeatures) {
+			this.legacyAdaptor = new ShellBarLegacy({
+				component: this,
+				getShadowRoot: () => this.shadowRoot,
+			});
 		}
+	}
 
-		const itemsInfo = this._getItemsInfo().filter(item => item.show && item.classes.indexOf("ui5-shellbar-no-overflow-button") === -1);
-		const contentInfo = this._getContentInfo().sort((a, b) => a.hideOrder - b.hideOrder);
-		const itemsToHide = [...itemsInfo, ...contentInfo].filter(item => hiddenItems.includes(item.id));
+	get hasLegacyFeatures(): boolean {
+		return this.logo.length > 0
+			|| !!this.primaryTitle
+			|| !!this.secondaryTitle
+			|| this.menuItems.length > 0;
+	}
 
-		this._hideItems(itemsToHide);
+	/* =================== Keyboard Navigation =================== */
 
-		return { itemsInfo, contentInfo };
+	_onKeyDown(e: KeyboardEvent) {
+		this.itemNavigation.handleKeyDown(e);
 	}
 
-	_overflowActions() {
-		this._handleBarBreakpoints();
+	/* =================== Content Management =================== */
 
-		const { itemsInfo, contentInfo } = this._handleActionsOverflow();
-		this._updateItemsInfo(itemsInfo);
-		this._updateContentInfo(contentInfo);
-		this._updateOverflowNotifications();
-		this.showFullWidthSearch = this.overflowed && this.showSearchField;
+	get startContent(): HTMLElement[] {
+		return this.splitContent(this.content).start;
 	}
 
-	_toggleActionPopover() {
-		const overflowButton = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-overflow-button")!;
-		const overflowPopover = this._getOverflowPopover();
-		overflowPopover.opener = overflowButton;
-		overflowPopover.open = true;
+	get endContent(): HTMLElement[] {
+		return this.splitContent(this.content).end;
 	}
 
-	onEnterDOM() {
-		ResizeHandler.register(this, this._handleResize);
+	get separatorConfig() {
+		const { start, end } = this.splitContent(this.content);
 
-		if (isDesktop()) {
-			this.setAttribute("desktop", "");
-		}
-		this._attachSearchFieldListeners(this.search);
+		return {
+			showStartSeparator: start.some(item => !this.hiddenItemsIds.includes((item as any)._individualSlot as string)),
+			showEndSeparator: end.some(item => !this.hiddenItemsIds.includes((item as any)._individualSlot as string)),
+		};
 	}
 
-	onExitDOM() {
-		this.contentItemsObserver.disconnect();
-		this._observableContent = [];
-		ResizeHandler.deregister(this, this._handleResize);
-		this._detachSearchFieldListeners(this.search);
-	}
+	splitContent(content: readonly HTMLElement[]) {
+		const spacerIndex = content.findIndex(
+			child => child.hasAttribute("ui5-shellbar-spacer"),
+		);
 
-	_attachSearchFieldListeners(searchField: HTMLElement | null) {
-		if (!searchField) {
-			return;
+		if (spacerIndex === -1) {
+			return { start: [...content], end: [] };
 		}
-		searchField.addEventListener("ui5-open", this._onSearchOpenBound);
-		searchField.addEventListener("ui5-close", this._onSearchCloseBound);
-		searchField.addEventListener("ui5-search", this._onSearchBound);
-	}
 
-	_detachSearchFieldListeners(searchField: HTMLElement | null) {
-		if (!searchField) {
-			return;
-		}
-		searchField.removeEventListener("ui5-open", this._onSearchOpenBound);
-		searchField.removeEventListener("ui5-close", this._onSearchCloseBound);
-		searchField.removeEventListener("ui5-search", this._onSearchBound);
+		return {
+			start: content.slice(0, spacerIndex),
+			end: content.slice(spacerIndex + 1),
+		};
 	}
 
-	_handleSearchIconPress() {
-		const searchButtonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-search-button")!;
-		const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
-			targetRef: searchButtonRef,
-			searchFieldVisible: this.showSearchField,
+	sortContent(content: readonly HTMLElement[]) {
+		// reverse so items on the right are hidden first
+		// then sort by hide order to apply custom preferences
+		return content.toReversed().toSorted((a, b) => {
+			const aOrder = parseInt(a.getAttribute("data-hide-order") || "0");
+			const bOrder = parseInt(b.getAttribute("data-hide-order") || "0");
+			return aOrder - bOrder;
 		});
-		if (defaultPrevented) {
-			return;
-		}
-		this.setSearchState(!this.showSearchField);
-
-		if (!this.showSearchField) {
-			return;
-		}
-
-		const input = this.searchField[0];
-
-		// update the state immediately
-		if (input) {
-			input.focused = true;
-		}
-
-		// move the focus later
-		setTimeout(() => {
-			if (input) {
-				input.focus();
-			}
-		}, 100);
 	}
 
-	async _handleActionListClick() {
-		if (!this._defaultItemPressPrevented) {
-			this.closeOverflow();
-			// wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
-			// there will be no visual indication that this has happened
-			await renderFinished();
-		}
+	/*
+	 * Determines whether a separator should be packed with an item.
+	 * Separators are packed with the last item that is hidden to account for
+	 * the space they occupy when next overflow calculation occurs.
+	 */
+	getPackedSeparatorInfo(item: HTMLElement, isStartGroup: boolean) {
+		const group = isStartGroup ? this.startContent : this.endContent;
+		const sorted = this.sortContent(group);
+		const isHidden = this.hiddenItemsIds.includes((item as any)._individualSlot as string);
+		const isLastItem = sorted.at(-1) === item;
 
-		this._defaultItemPressPrevented = false;
+		return { shouldPack: isHidden && isLastItem };
 	}
 
-	_handleCustomActionPress(e: UI5CustomEvent<Button, "click">) {
-		const target = e.target as HTMLElement;
-		const refItemId = target.getAttribute("data-ui5-external-action-item-id");
-
-		if (refItemId) {
-			const shellbarItem = this.items.find(item => {
-				return item._id === refItemId;
-			});
+	/* =================== Items Management =================== */
 
-			const prevented = shellbarItem!.fireClickEvent(e);
-
-			this._defaultItemPressPrevented = prevented;
-		}
-	}
-
-	_handleOverflowPress() {
-		this._toggleActionPopover();
+	sortItems(items: readonly ShellBarItem[]) {
+		return items.toSorted((a, b) => {
+			const aIndex = PREDEFINED_PLACE_ITEMS.indexOf(a.icon || "");
+			const bIndex = PREDEFINED_PLACE_ITEMS.indexOf(b.icon || "");
+			return aIndex - bIndex;
+		});
 	}
 
-	_handleNotificationsPress(e: UI5CustomEvent<Button, "click">) {
-		const notificationIconRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-bell-button")!,
-			target = e.target as HTMLElement;
+	/* =================== Accessibility =================== */
 
-		this._defaultItemPressPrevented = !this.fireDecoratorEvent("notifications-click", {
-			targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? target : notificationIconRef,
+	get actionsAccessibilityInfo(): ShellBarAccessibilityInfo {
+		return this.accessibility.getActionsAccessibilityAttributes(this.texts, {
+			overflowPopoverOpen: this.overflowPopoverOpen,
+			accessibilityAttributes: this.accessibilityAttributes,
 		});
 	}
 
-	_handleProfilePress() {
-		this.fireDecoratorEvent("profile-click", {
-			targetRef: this.shadowRoot!.querySelector<Button>(".ui5-shellbar-image-button")!,
-		});
+	get actionsRole(): "toolbar" | undefined {
+		const visibleCount = this.actions.filter(a => !this.hiddenItemsIds.includes(a.id)).length;
+		return this.accessibility.getActionsRole(visibleCount);
 	}
 
-	_handleCancelButtonPress() {
-		const cancelButtonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-cancel-button")!;
-		const clearDefaultPrevented = !this.fireDecoratorEvent("search-field-clear", {
-			targetRef: cancelButtonRef,
-		});
+	get contentRole(): "group" | undefined {
+		const visibleItemsCount = this.content.filter(item => !this.hiddenItemsIds.includes((item as any)._individualSlot as string)).length;
+		return this.accessibility.getContentRole(visibleItemsCount);
+	}
 
-		this.showFullWidthSearch = false;
-		this.setSearchState(false);
+	/* =================== Common Members =================== */
 
-		if (!clearDefaultPrevented) {
-			this._clearSearchFieldValue();
-		}
+	get enabledFeatures() {
+		return {
+			search: this.searchField.length > 0,
+			profile: this.profile.length > 0,
+			content: this.content.length > 0,
+			branding: this.branding.length > 0,
+			overflow: this.showOverflowButton,
+			assistant: this.assistant.length > 0,
+			startButton: this.startButton.length > 0,
+			notifications: this.showNotifications,
+			productSwitch: this.showProductSwitch,
+		};
 	}
 
-	_handleProductSwitchPress(e: UI5CustomEvent<Button, "click">) {
-		const buttonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-button-product-switch")!,
-			target = e.target as HTMLElement;
-
-		this._defaultItemPressPrevented = !this.fireDecoratorEvent("product-switch-click", {
-			targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? target : buttonRef,
-		});
+	get texts() {
+		return {
+			search: ShellBar.i18nBundle.getText(SHELLBAR_SEARCH),
+			profile: ShellBar.i18nBundle.getText(SHELLBAR_PROFILE),
+			shellbar: ShellBar.i18nBundle.getText(SHELLBAR_LABEL),
+			products: ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS),
+			overflow: ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW),
+			assistant: ShellBar.i18nBundle.getText(SHELLBAR_ASSISTANT),
+			notifications: ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0),
+			notificationsNoCount: ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS_NO_COUNT),
+			contentItems: this.content.length > 1 ? ShellBar.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined,
+		};
 	}
 
-	_clearSearchFieldValue() {
-		if (this.search) {
-			this.search.value = "";
-		}
+	get popoverHorizontalAlign(): "Start" | "End" {
+		return this.effectiveDir === "rtl" ? "Start" : "End";
 	}
 
 	/**
@@ -1208,608 +1165,63 @@ class ShellBar extends UI5Element {
 	}
 
 	/**
-	 * Returns the `search` icon DOM ref.
-	 * @returns The search icon DOM ref
+	 * Returns the search button DOM reference.
 	 * @public
-	 * @since 2.10.0
 	 */
 	async getSearchButtonDomRef(): Promise<HTMLElement | null> {
 		await renderFinished();
 		return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="toggle-search"]`);
 	}
 
-	_getContentInfo(): Array<IShellBarContentItem> {
-		return [
-			...this.contentItemsSorted.map(item => {
-				return {
-					hideOrder: parseInt(item.getAttribute("data-hide-order") || "0"),
-					id: item.slot,
-					classes: "ui5-shellbar-content-item",
-					show: false,
-				};
-			}),
-		];
-	}
-
-	/**
-	 * Returns all items that will be placed in the right of the bar as icons / dom elements.
-	 */
-	_getItemsInfo(): Array<IShelBarItemInfo> {
-		const items: Array<IShelBarItemInfo> = [
-			{
-				icon: search,
-				text: this._searchText,
-				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
-				id: `${this._id}-item-${1}`,
-				press: this._handleSearchIconPress.bind(this),
-				show: !!this.searchField.length,
-				tooltip: this._searchText,
-			},
-			{
-				icon: da,
-				text: "Assistant",
-				classes: `${this.assistant.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-assistant-button`,
-				id: `${this._id}-assistant`,
-				show: !!this.assistant.length,
-				press: () => { },
-				tooltip: this.assistant.length ? (this.assistant[0].getAttribute("text") || this.assistant[0].getAttribute("title") || undefined) : undefined,
-			},
-			{
-				icon: bell,
-				title: this._notificationsText,
-				text: ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS_NO_COUNT),
-				count: this.notificationsCount,
-				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
-				id: `${this._id}-item-${2}`,
-				show: this.showNotifications,
-				press: this._handleNotificationsPress.bind(this),
-				tooltip: this._notificationsText,
-			},
-			// sort feedback and help to always be last
-			...this.items.sort((a, b) => {
-				const aIndex = PREDEFINED_PLACE_ACTIONS.indexOf(a.icon || "");
-				const bIndex = PREDEFINED_PLACE_ACTIONS.indexOf(b.icon || "");
-				return aIndex - bIndex;
-			}).map((item: ShellBarItem) => {
-				item._getRealDomRef = () => this.shadowRoot!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
-				// check if included for lean mode
-				const show = !!item.icon || false;
-				return {
-					icon: item.icon,
-					id: item._id,
-					count: item.count || undefined,
-					refItemid: item._id,
-					text: item.text,
-					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
-					show,
-					press: this._handleCustomActionPress.bind(this),
-					custom: true,
-					title: item.title,
-					stableDomRef: item.stableDomRef,
-					tooltip: item.title || item.text,
-					accessibilityAttributes: item.accessibilityAttributes,
-				};
-			}),
-			{
-				icon: overflow,
-				text: "Overflow",
-				classes: "ui5-shellbar-hidden-button ui5-shellbar-no-overflow-button ui5-shellbar-overflow-button ui5-shellbar-button",
-				id: `${this.id}-item-${5}`,
-				press: this._handleOverflowPress.bind(this),
-				show: true,
-				tooltip: this._overflowText,
-			},
-			{
-				text: "Person",
-				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-no-overflow-button ui5-shellbar-image-button ui5-shellbar-button`,
-				profile: true,
-				id: `${this._id}-item-${3}`,
-				show: this.hasProfile,
-				press: this._handleProfilePress.bind(this),
-				tooltip: this._profileText,
-			},
-			{
-				icon: grid,
-				text: this._productsText,
-				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-button-product-switch`,
-				id: `${this._id}-item-${4}`,
-				show: this.showProductSwitch,
-				press: this._handleProductSwitchPress.bind(this),
-				tooltip: this._productsText,
-			},
-		];
-
-		return items;
-	}
-
-	_updateItemsInfo(newItemsInfo: Array<IShelBarItemInfo>) {
-		const isDifferent = JSON.stringify(this._itemsInfo) !== JSON.stringify(newItemsInfo);
-		if (isDifferent) {
-			this._itemsInfo = newItemsInfo;
-		}
-	}
-
-	_updateContentInfo(newContentInfo: Array<IShellBarContentItem>) {
-		const isDifferent = JSON.stringify(this._contentInfo) !== JSON.stringify(newContentInfo);
-		if (isDifferent) {
-			this._contentInfo = newContentInfo;
-			this._fireContentItemVisibilityChangeEvent();
-		}
-	}
-
-	_fireContentItemVisibilityChangeEvent() {
-		const hiddenByClass = this._contentInfo
-			.filter(item => item.classes.indexOf("ui5-shellbar-hidden-button") !== -1)
-			.map(item => item.id);
-
-		this.fireDecoratorEvent("content-item-visibility-change", {
-			items: this.contentItems.filter(item => hiddenByClass.includes(item.slot)),
-		});
-	}
-
-	_updateOverflowNotifications() {
-		const notificationsArr: Array<string> = [];
-		let overflowNotifications = null;
-
-		this._itemsInfo.forEach(item => {
-			if (item.count && item.classes.includes("ui5-shellbar-hidden-button")) {
-				notificationsArr.push(item.count);
-			}
-		});
-
-		if (notificationsArr.length === 1) {
-			overflowNotifications = notificationsArr[0];
-		} else if (notificationsArr.length > 1) {
-			overflowNotifications = " ";
-		}
-
-		this._overflowNotifications = overflowNotifications;
-	}
-
-	_observeContentItems() {
-		if (this.hasMatchingContent) {
-			return;
-		}
-
-		this.contentItems.forEach(item => {
-			if (!this._observableContent.includes(item)) {
-				this.contentItemsObserver.observe(item, {
-					characterData: false,
-					childList: false,
-					subtree: false,
-					attributes: true,
-					attributeFilter: ["data-hide-order"],
-				});
-			}
-		});
-		this._observableContent = this.contentItems;
-	}
-
-	_getOverflowPopover() {
-		return this.shadowRoot!.querySelector<Popover>(".ui5-shellbar-overflow-popover")!;
-	}
-
-	_getMenuPopover() {
-		return this.shadowRoot!.querySelector<Popover>(".ui5-shellbar-menu-popover")!;
-	}
-
-	isIconHidden(name: string) {
-		const itemInfo = this._itemsInfo.find(item => item.icon === name);
-
-		if (!itemInfo) {
-			return false;
-		}
-
-		return itemInfo.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
-	}
-
-	get hasMatchingContent() {
-		if (this._observableContent.length !== this.contentItems.length) {
-			return false;
-		}
-
-		const observableContentSet = new WeakSet(this._observableContent);
-		return this.contentItems.every(item => observableContentSet.has(item));
-	}
-
-	get contentItemsSorted() {
-		return this.contentItems.toReversed().sort((a, b) => {
-			return parseInt(a.getAttribute("data-hide-order") || "0") - parseInt(b.getAttribute("data-hide-order") || "0");
-		});
-	}
-
-	get contentItemsWrappersSorted() {
-		return this.contentItemsSorted.map(item => this.shadowRoot!.querySelector<HTMLElement>(`#${item.slot}`)).filter(item => item !== null);
-	}
-
-	get autoSearchField() {
-		const onFocus = document.activeElement === this.searchField[0];
-		const hasValue = this.searchField[0]?.value?.length > 0;
-		const disableSearchCollapse = this.disableSearchCollapse || onFocus || hasValue;
-		if (disableSearchCollapse) {
-			return false;
-		}
-		return this.showSearchField || this._autoRestoreSearchField;
-	}
-
-	get startContentInfoSorted() {
-		return this._contentInfo
-			.filter(item => this.startContent.find(contentItem => contentItem.slot === item.id))
-			.sort((a, b) => a.hideOrder - b.hideOrder);
-	}
-
-	get endContentInfoSorted() {
-		return this._contentInfo
-			.filter(item => this.endContent.find(contentItem => contentItem.slot === item.id))
-			.sort((a, b) => a.hideOrder - b.hideOrder);
-	}
-
-	get showStartSeparator(): boolean {
-		return this.startContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
-	}
-
-	get showEndSeparator(): boolean {
-		return this.endContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
-	}
-
-	shouldIncludeSeparator(itemInfo: IShellBarContentItem | undefined, contentInfo: IShellBarContentItem[]) {
-		// once the last item from the start/end content was hidden, the
-		// separator is "packed" with it in order to account for any next measurements
-		if (!itemInfo) {
-			return false;
-		}
-		const lastVisibleItem = contentInfo.at(-1);
-		return lastVisibleItem?.id === itemInfo.id && itemInfo.classes.indexOf("ui5-shellbar-hidden-button") > -1;
-	}
-
-	get classes(): ClassMap {
-		return {
-			wrapper: {
-				"ui5-shellbar-root": true,
-				"ui5-shellbar-with-searchfield": this.hasSearchField,
-			},
-			button: {
-				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
-			},
-			notification: {
-				"ui5-shellbar-hidden-button": this.isIconHidden("bell"),
-			},
-			search: {
-				"ui5-shellbar-hidden-button": this.isIconHidden("search"),
-				"ui5-shellbar-search-toggle": true,
-			},
-			overflow: {
-				"ui5-shellbar-hidden-button": this._hiddenIcons.length === 0,
-			},
-			assistant: {
-				"ui5-shellbar-hidden-button": this.isIconHidden("assistant"),
-				"ui5-shellbar-assistant-button": true,
-			},
-			searchField: {
-				"ui5-shellbar-search-field": this.showSearchField,
-				"ui5-shellbar-search-toggle": isSelfCollapsibleSearch(this.search),
-				"ui5-shellbar-hidden-button": !this.showSearchField,
-			},
-		};
-	}
-
-	get styles() {
-		const styles = {
-			"display": this.showSearchField ? "flex" : "none",
-		};
-		return {
-			searchField: isSelfCollapsibleSearch(this.search) ? {} : styles,
-		};
-	}
-
-	get customItemsInfo() {
-		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
-	}
-
-	get hasLogo() {
-		return !!this.logo.length;
-	}
-
-	get showLogoInMenuButton() {
-		return this.hasLogo && (this.breakpointSize === "S");
-	}
-
-	get showTitleInMenuButton() {
-		return this.primaryTitle && !(this.showLogoInMenuButton);
-	}
-
-	get showMenuButton() {
-		return this.primaryTitle || this.showLogoInMenuButton;
-	}
-
-	get hasAssistant() {
-		return !!this.assistant.length;
-	}
-
-	get hasBranding() {
-		return !!this.branding.length;
-	}
-
-	get hasSearchField() {
-		return !!this.searchField.length;
-	}
-
-	get hasMidContent() {
-		return !!this.midContent.length;
+	private _fireClickEvent(eventName: string, domRef: HTMLElement | null): boolean {
+		return domRef ? !this.fireDecoratorEvent(eventName as any, { targetRef: domRef }) : false;
 	}
 
-	get hasProfile() {
-		return !!this.profile.length;
+	handleNotificationsClick() {
+		return this._fireClickEvent("notifications-click", this.notificationsDomRef);
 	}
 
-	get hasMenuItems() {
-		return this.menuItems.length > 0;
+	handleProfileClick() {
+		return this._fireClickEvent("profile-click", this.profileDomRef);
 	}
 
-	get imageBtnText() {
-		return getEffectiveAriaLabelText(this) || ShellBar.i18nBundle.getText(SHELLBAR_IMAGE_BTN);
+	handleProductSwitchClick() {
+		return this._fireClickEvent("product-switch-click", this.productSwitchDomRef);
 	}
 
-	get _shellbarText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
-	}
-
-	get _logoText() {
-		return this.accessibilityAttributes.logo?.name || ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
-	}
-
-	get _notificationsText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount || 0);
-	}
-
-	get _cancelBtnText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
-	}
-
-	get _logoAreaText() {
-		const primaryTitle = this.primaryTitle ?? "";
-		const secondaryTitle = this.secondaryTitle ?? "";
-
-		return ShellBar.i18nBundle.getText(SHELLBAR_LOGO_AREA, primaryTitle, secondaryTitle);
-	}
-
-	get _contentItemsText() {
-		return this._enableContentAreaAccessibility ? ShellBar.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined;
-	}
-
-	get _searchFieldDescription() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCHFIELD_DESCRIPTION);
-	}
-
-	get _contentItemsRole() {
-		if (this._enableContentAreaAccessibility) {
-			return "group";
-		}
-	}
-
-	get _enableContentAreaAccessibility() {
-		return this.contentItems.length > 1;
-	}
-
-	get contentItems() {
-		return [...this.startContent, ...this.endContent];
-	}
-
-	get startContent() {
-		// all items before the first spacer
-		const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
-		if (spacerIndex === -1) {
-			return this.content;
-		}
-		return this.content.slice(0, spacerIndex);
-	}
-
-	get endContent() {
-		// all items after the first spacer
-		const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
-		if (spacerIndex === -1) {
-			return [];
-		}
-		return this.content.slice(spacerIndex + 1);
-	}
-
-	get _rightChildRole() {
-		const items = this._getRightChildItems();
-		const visibleItems = items.filter(item => {
-			return this._isVisible(item);
-		});
-
-		if (visibleItems.length === 1) {
-			return;
-		}
-
-		return "toolbar";
-	}
-
-	get _searchFieldText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH_FIELD);
-	}
-
-	get _searchBtnOpen() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH_BTN_OPEN);
-	}
-
-	get _productSwitchBtnText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCT_SWITCH_BTN);
-	}
-
-	get _profileText() {
-		return this.accessibilityAttributes.profile?.name as string || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
-	}
-
-	get _productsText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS);
-	}
-
-	get _searchText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH);
-	}
-
-	get _overflowText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
-	}
-
-	get _brandingText() {
-		return this.accessibilityAttributes.branding?.name || this.primaryTitle;
-	}
-
-	get hasContentItems() {
-		return this.contentItems.length > 0;
-	}
-
-	get hidableDomElements(): HTMLElement[] {
-		const items = Array.from(this.shadowRoot!.querySelectorAll<HTMLElement>(".ui5-shellbar-button:not(.ui5-shellbar-search-button):not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-cancel-button):not(.ui5-shellbar-no-overflow-button)"));
-		const assistant = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-assistant-button");
-		const searchToggle = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-search-toggle");
-		const contentItems = this.contentItemsWrappersSorted;
-		const firstContentItem = contentItems.pop();
-		const prioritizeContent = this.showSearchField && this.hasSearchField;
-
-		// order here is important for the responsive behavior, the items will be
-		// measured and hidden in the order they are returned until no overlap is detected
-		let itemsToHide = [];
-
-		if (prioritizeContent) {
-			// search field was toggled, the content items should make space for it
-			const overflowItems = [...items, assistant];
-			const visibleItems = overflowItems.filter(item => item && !item.classList.contains("ui5-shellbar-hidden-button"));
-			const hiddenItems = overflowItems.filter(item => item && item.classList.contains("ui5-shellbar-hidden-button"));
-			itemsToHide = [
-				...hiddenItems,
-				...contentItems,
-				firstContentItem,
-				...visibleItems,
-			];
-		} else {
-			// search field is close, actions should go to the overflow first
-			itemsToHide = [
-				...items.toReversed(),
-				assistant,
-				...contentItems,
-				searchToggle,
-				firstContentItem,
-			];
-		}
-		return itemsToHide.filter(Boolean) as HTMLElement[];
-	}
-
-	get contentItemsHidden() {
-		return this.contentItemsWrappersSorted.filter(item => item.classList.contains("ui5-shellbar-hidden-button"));
-	}
-
-	get overflowWrapper(): HTMLElement | null {
-		return this.shadowRoot!.querySelector(".ui5-shellbar-overflow-container-right");
-	}
-
-	get overflowInner(): HTMLElement | null {
-		return this.shadowRoot!.querySelector(".ui5-shellbar-overflow-container-right-inner");
-	}
-
-	get overflowed() {
-		const wrapper = this.overflowWrapper;
-		const inner = this.overflowInner;
-		if (!wrapper || !inner) {
-			return false;
-		}
-		return inner.offsetWidth > wrapper.offsetWidth;
-	}
-
-	get accInfo() {
-		const overflowExpanded = this.accessibilityAttributes.overflow?.expanded;
-
-		return {
-			notifications: {
-				"title": this._notificationsText,
-				"accessibilityAttributes": {
-					expanded: this.accessibilityAttributes.notifications?.expanded,
-					hasPopup: this.accessibilityAttributes.notifications?.hasPopup,
-				},
-			},
-			profile: {
-				"title": this._profileText,
-				"accessibilityAttributes": {
-					hasPopup: this.accessibilityAttributes.profile?.hasPopup,
-					expanded: this.accessibilityAttributes.profile?.expanded,
-				},
-			},
-			products: {
-				"title": this._productsText,
-				"accessibilityAttributes": {
-					hasPopup: this.accessibilityAttributes.product?.hasPopup,
-					expanded: this.accessibilityAttributes.product?.expanded,
-				},
-			},
-			search: {
-				"title": this._searchText,
-				"accessibilityAttributes": {
-					hasPopup: this.accessibilityAttributes.search?.hasPopup,
-				},
-			},
-			overflow: {
-				"title": this._overflowText,
-				"accessibilityAttributes": {
-					hasPopup: this.accessibilityAttributes.overflow?.hasPopup || "menu" as const,
-					expanded: overflowExpanded === undefined ? this._overflowPopoverExpanded : overflowExpanded,
-				},
-			},
-			branding: {
-				"title": this._brandingText,
-				"accessibilityAttributes": {
-					name: this.accessibilityAttributes.branding?.name,
-				},
-			},
-		};
-	}
-
-	get accLogoRole() {
-		return this.accessibilityAttributes.logo?.role || "link";
-	}
-
-	get isSBreakPoint() {
-		return this.breakpointSize === "S";
-	}
-
-	get hasSelfCollapsibleSearch() {
-		return isSelfCollapsibleSearch(this.search);
-	}
-
-	get search() {
-		return this.searchField.length ? this.searchField[0] : null;
+	getCSSVariable(cssVar: string): string {
+		const styleSet = getComputedStyle(this.getDomRef()!);
+		return styleSet.getPropertyValue(getScopedVarName(cssVar));
 	}
 }
 
-interface IShellBarSelfCollapsibleSearch extends UI5Element {
-	collapsed: boolean;
-	open: boolean;
-}
-
-const isSelfCollapsibleSearch = (searchField: any): searchField is IShellBarSelfCollapsibleSearch => {
-	if (searchField) {
-		return "collapsed" in searchField && "open" in searchField;
-	}
-	return false;
-};
-
 ShellBar.define();
 
 export default ShellBar;
-
+export {
+	ShellBarActions,
+	ShellBarActionsSelectors,
+};
 export type {
-	ShellBarContentItemVisibilityChangeEventDetail,
-	ShellBarNotificationsClickEventDetail,
+	/* Event Types */
 	ShellBarProfileClickEventDetail,
+	ShellBarSearchFieldClearEventDetail,
+	ShellBarSearchFieldToggleEventDetail,
 	ShellBarProductSwitchClickEventDetail,
+	ShellBarNotificationsClickEventDetail,
+	ShellBarContentItemVisibilityChangeEventDetail,
+	/* Common Types */
+	ShellBarActionId,
+	ShellBarActionItem,
+	IShellBarSearchField,
+	ShellBarBreakpoint,
+	/* Accessibility Types */
+	ShellBarAccessibilityInfo,
+	ShellBarAccessibilityAttributes,
+	ShellBarAreaAccessibilityAttributes,
+	ShellBarProfileAccessibilityAttributes,
+	/* Legacy Types (DELETE WHEN REMOVING LEGACY) */
 	ShellBarLogoClickEventDetail,
 	ShellBarMenuItemClickEventDetail,
-	ShellBarAccessibilityAttributes,
-	ShellBarSearchButtonEventDetail,
-	ShellBarSearchFieldToggleEventDetail,
-	ShellBarSearchFieldClearEventDetail,
-	IShellBarSelfCollapsibleSearch,
-	IShellBarSearchField,
+	ShellBarLogoAccessibilityAttributes,
 };
diff --git a/packages/fiori/src/ShellBarItem.ts b/packages/fiori/src/ShellBarItem.ts
index 991df20370a1..57b526431714 100644
--- a/packages/fiori/src/ShellBarItem.ts
+++ b/packages/fiori/src/ShellBarItem.ts
@@ -2,8 +2,13 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { AccessibilityAttributes, UI5CustomEvent } from "@ui5/webcomponents-base";
-import type Button from "@ui5/webcomponents/dist/Button.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import ShellBarItemTemplate from "./ShellBarItemTemplate.js";
+import shellBarV2ItemStyles from "./generated/themes/ShellBarItem.css.js";
 
 type ShellBarItemClickEventDetail = {
 	targetRef: HTMLElement,
@@ -11,26 +16,26 @@ type ShellBarItemClickEventDetail = {
 
 type ShellBarItemAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "hasPopup" | "controls">;
 
-/**
- * Interface for components that may be slotted inside `ui5-shellbar` as items
- * @public
- */
-
 /**
  * @class
- * The `ui5-shellbar-item` represents a custom item, that
- * might be added to the `ui5-shellbar`.
+ * The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";`
  * @constructor
  * @extends UI5Element
- * @abstract
  * @public
+ * @experimental
  */
-@customElement("ui5-shellbar-item")
+@customElement({
+	tag: "ui5-shellbar-item",
+	renderer: jsxRenderer,
+	template: ShellBarItemTemplate,
+	styles: shellBarV2ItemStyles,
+	dependencies: [Button, ButtonBadge, ListItemStandard],
+})
 /**
- * Fired, when the item is pressed.
+ * Fired when the item is clicked.
  * @param {HTMLElement} targetRef DOM ref of the clicked element
  * @public
  */
@@ -38,13 +43,13 @@ type ShellBarItemAccessibilityAttributes = Pick<AccessibilityAttributes, "expand
 	bubbles: true,
 	cancelable: true,
 })
-
 class ShellBarItem extends UI5Element {
 	eventDetails!: {
 		click: ShellBarItemClickEventDetail,
 	}
+
 	/**
-	 * Defines the name of the item's icon.
+	 * Defines the item's icon.
 	 * @default undefined
 	 * @public
 	 */
@@ -53,8 +58,6 @@ class ShellBarItem extends UI5Element {
 
 	/**
 	 * Defines the item text.
-	 *
-	 * **Note:** The text is only displayed inside the overflow popover list view.
 	 * @default undefined
 	 * @public
 	 */
@@ -62,42 +65,45 @@ class ShellBarItem extends UI5Element {
 	text?: string;
 
 	/**
-	 * Defines the count displayed in the top-right corner.
+	 * Defines the count displayed in badge.
 	 * @default undefined
-	 * @since 1.0.0-rc.6
 	 * @public
 	 */
 	@property()
 	count?: string;
 
 	/**
-	 * Defines additional accessibility attributes on Shellbar Items.
-	 *
-	 * The accessibility attributes support the following values:
-	 *
-	 * - **expanded**: Indicates whether the button, or another grouping element it controls,
-	 * is currently expanded or collapsed.
-	 * Accepts the following string values: `true` or `false`.
-	 *
-	 * - **hasPopup**: Indicates the availability and type of interactive popup element,
-	 * such as menu or dialog, that can be triggered by the button.
-	 *
-	 * - **controls**: Identifies the element (or elements) whose contents
-	 * or presence are controlled by the component.
-	 * Accepts a lowercase string value, referencing the ID of the element it controls.
-	 *
+	 * Defines accessibility attributes.
 	 * @default {}
 	 * @public
-	 * @since 2.9.0
 	 */
-
 	@property({ type: Object })
 	accessibilityAttributes: ShellBarItemAccessibilityAttributes = {};
 
+	/**
+	 * Indicates if item is in overflow popover.
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	inOverflow = false;
+
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
+	hasListItems() {
+		return this.inOverflow;
+	}
+
+	get listItems() {
+		const domRef = this.getDomRef();
+		if (!domRef || !this.inOverflow) {
+			return [];
+		}
+		return [domRef];
+	}
+
 	fireClickEvent(e: UI5CustomEvent<Button, "click">) {
 		return this.fireDecoratorEvent("click", {
 			targetRef: (e.target as HTMLElement),
@@ -108,6 +114,4 @@ class ShellBarItem extends UI5Element {
 ShellBarItem.define();
 
 export default ShellBarItem;
-
-export type { ShellBarItemClickEventDetail };
-export type { ShellBarItemAccessibilityAttributes };
+export type { ShellBarItemClickEventDetail, ShellBarItemAccessibilityAttributes };
diff --git a/packages/fiori/src/ShellBarItemTemplate.tsx b/packages/fiori/src/ShellBarItemTemplate.tsx
new file mode 100644
index 000000000000..2838e6b87432
--- /dev/null
+++ b/packages/fiori/src/ShellBarItemTemplate.tsx
@@ -0,0 +1,34 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import type ShellBarItem from "./ShellBarItem.js";
+
+export default function ShellBarItemTemplate(this: ShellBarItem) {
+	if (this.inOverflow) {
+		return (
+			<ListItemStandard
+				icon={this.icon ? `sap-icon://${this.icon}` : ""}
+				type="Active"
+				data-count={this.count}
+				accessibilityAttributes={this.accessibilityAttributes}
+			>
+				{this.text}
+			</ListItemStandard>
+		);
+	}
+
+	return (
+		<Button
+			class="ui5-shellbar-action-button"
+			icon={this.icon}
+			design="Transparent"
+			accessibleName={this.text}
+			accessibilityAttributes={this.accessibilityAttributes}
+			onClick={this.fireClickEvent}
+		>
+			{this.count && (
+				<ButtonBadge slot="badge" design="OverlayText" text={this.count} />
+			)}
+		</Button>
+	);
+}
diff --git a/packages/fiori/src/ShellBarPopoverTemplate.tsx b/packages/fiori/src/ShellBarPopoverTemplate.tsx
deleted file mode 100644
index f523ef439460..000000000000
--- a/packages/fiori/src/ShellBarPopoverTemplate.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Popover from "@ui5/webcomponents/dist/Popover.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
-import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
-import type ShellBar from "./ShellBar.js";
-
-export default function PopoversTemplate(this: ShellBar) {
-	return (
-		<>
-			<Popover class="ui5-shellbar-menu-popover"
-				hideArrow={true}
-				placement="Bottom"
-				preventInitialFocus={true}
-				onBeforeOpen={this._menuPopoverBeforeOpen}
-				onClose={this._menuPopoverAfterClose}
-			>
-				<List separators="None" selectionMode="Single" onItemClick={this._menuItemPress}>
-					<slot name="menuItems"></slot>
-				</List>
-			</Popover>
-
-			<Popover class="ui5-shellbar-overflow-popover"
-				placement="Bottom"
-				preventInitialFocus={true}
-				horizontalAlign={PopoverHorizontalAlign.End}
-				hideArrow={true}
-				onBeforeOpen={this._overflowPopoverBeforeOpen}
-				onClose={this._overflowPopoverAfterClose}
-			>
-				<List separators="None" onItemClick={this._handleActionListClick}>
-					{this._hiddenIcons.map((icon, index) => (
-						<ListItemStandard
-							key={index}
-							data-count={icon.count}
-							data-ui5-external-action-item-id={icon.refItemid}
-							data-ui5-stable={icon.stableDomRef}
-							icon={icon.icon ? icon.icon : ""}
-							type="Active"
-							onui5-_press={icon.press}
-							tooltip={icon.tooltip}
-							accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
-						>
-							{icon.text}
-						</ListItemStandard>
-					))}
-				</List>
-			</Popover>
-		</>
-	);
-}
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index a70676e1d85f..885e03aae131 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/packages/fiori/src/ShellBarTemplate.tsx
@@ -1,337 +1,259 @@
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import type ShellBar from "./ShellBar.js";
-import ShellBarPopoverTemplate from "./ShellBarPopoverTemplate.js";
-import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import type ShellBar from "./ShellBar.js";
+import ShellBarItem from "./ShellBarItem.js";
+
+import {
+	ShellBarSearchField,
+	ShellBarSearchFieldFullWidth
+} from "./shellbar/templates/ShellBarSearchTemplate.js";
+
+import {
+	ShellBarSearchField as ShellBarSearchFieldLegacy,
+	ShellBarSearchButton as ShellBarSearchButtonLegacy,
+	ShellBarSearchFieldFullWidth as ShellBarSearchFieldFullWidthLegacy,
+} from "./shellbar/templates/ShellBarSearchLegacyTemplate.js";
+
+import {
+	ShellBarLegacyBrandingArea,
+} from "./shellbar/templates/ShellBarLegacyTemplate.js";
 
 export default function ShellBarTemplate(this: ShellBar) {
+	const isLegacySearch = !this.isSelfCollapsibleSearch;
+
+	const SearchInBarTemplate = isLegacySearch ? ShellBarSearchFieldLegacy : ShellBarSearchField;
+	const SearchFullWidthTemplate = isLegacySearch ? ShellBarSearchFieldFullWidthLegacy : ShellBarSearchFieldFullWidth;
+
+	const profileAction = this.getAction("profile");
+	const overflowAction = this.getAction("overflow");
+	const assistantAction = this.getAction("assistant");
+	const notificationsAction = this.getAction("notifications");
+	const productSwitchAction = this.getAction("products");
+
+	const actionsAccInfo = this.actionsAccessibilityInfo;
+
 	return (
 		<>
-			<header
-				class={this.classes.wrapper}
-				aria-label={this._shellbarText}
-				onKeyDown={this._onKeyDown}
-				part="root">
-				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
-					{this.startButton.length > 0 && <slot name="startButton"></slot>}
+			<header class="ui5-shellbar-root" part="root" onKeyDown={this._onKeyDown} aria-label={this.texts.shellbar}>
+				{/* Full-width search overlay */}
+				{this.showFullWidthSearch && SearchFullWidthTemplate.call(this)}
 
-					{this.hasBranding && (
+				{this.enabledFeatures.startButton && (
+					<div class="ui5-shellbar-start-button ui5-shellbar-gap-end">
+						<slot name="startButton"></slot>
+					</div>
+				)}
+
+				{this.enabledFeatures.branding && (
+					<div class="ui5-shellbar-branding-area">
 						<slot name="branding"></slot>
-					)}
+					</div>
+				)}
 
-					{this.hasMenuItems && !this.hasBranding && (
-						<>
-							{!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this)}
-							{this.showTitleInMenuButton && <h1 class="ui5-hidden-text">{this.primaryTitle}</h1>}
-							{this.showMenuButton && (
-								<>
-									<button
-										class={{
-											"ui5-shellbar-menu-button": true,
-											...this.classes.button,
-										}}
-										onClick={this._headerPress}
-										aria-haspopup="menu"
-										aria-expanded={this._menuPopoverExpanded}
-										aria-label={this._brandingText}
-										data-ui5-stable="menu"
-										tabIndex={0}>
-										{this.showLogoInMenuButton && (
-											<span class="ui5-shellbar-logo" aria-label={this._logoText} title={this._logoText}>
-												<slot name="logo"></slot>
-											</span>
-										)}
-										{this.showTitleInMenuButton && (
-											<div class="ui5-shellbar-menu-button-title">{this.primaryTitle}</div>
-										)}
-										<Icon class="ui5-shellbar-menu-button-arrow" name={slimArrowDown} />
-									</button>
-								</>
-							)}
-						</>
-					)}
+				{/* Legacy branding (logo + primaryTitle) when no menu items */}
+				{!this.enabledFeatures.branding && ShellBarLegacyBrandingArea.call(this)}
 
-					{this.hasMenuItems && (
-						// The secondary title remains visible when both menu items and the branding slot are present,
-						// as the branding slot has higher priority and takes precedence in visibility.
-						<>
-							{this.secondaryTitle && !this.isSBreakPoint && (
-								<div style={{ display: "block" }} class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
-									{this.secondaryTitle}
-								</div>
-							)}
-						</>
-					)}
+				<div class="ui5-shellbar-overflow-container">
+					<div class="ui5-shellbar-overflow-container-inner">
 
-					{!this.hasMenuItems && (
-						<>
-							{this.isSBreakPoint && this.hasLogo && !this.hasBranding && singleLogo.call(this)}
-							{!this.isSBreakPoint && (this.hasLogo || this.primaryTitle) && (
-								<>
-									{!this.hasBranding && combinedLogo.call(this)}
-									{this.secondaryTitle && (this.primaryTitle || this.hasBranding) && (
-										<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
-											{this.secondaryTitle}
-										</h2>
-									)}
-								</>
-							)}
-						</>
-					)}
-				</div>
-				{this.hasMidContent && (
-					<div class="ui5-shellbar-overflow-container ui5-shellbar-mid-content">
-						<slot name="midContent"></slot>
-					</div>
-				)}
-				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-					<div class="ui5-shellbar-overflow-container-right-inner">
-						{this.hasContentItems && (
+						{this.enabledFeatures.content && (
 							<div
-								class="ui5-shellbar-content-items"
-								role={this._contentItemsRole}
-								aria-label={this._contentItemsText}
+								class="ui5-shellbar-content-area ui5-shellbar-content-items"
+								role={this.contentRole}
+								aria-label={this.texts.contentItems}
 							>
-								{this.showStartSeparator && (
-									<div class={{
-										"ui5-shellbar-separator": true,
-										"ui5-shellbar-separator-start": true,
-									}}></div>
+								{/* Start separator */}
+								{this.separatorConfig.showStartSeparator && (
+									<div class="ui5-shellbar-separator ui5-shellbar-separator-start"></div>
 								)}
+
+								{/* Start content items */}
 								{this.startContent.map(item => {
-									const itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);
+									const itemId = (item as any)._individualSlot as string;
+									const packedSep = this.getPackedSeparatorInfo(item, true);
 									return (
-										<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>
-											{this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
-												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
-												<div class={{
-													"ui5-shellbar-separator": true,
-													"ui5-shellbar-separator-start": true,
-												}}></div>
+										<div
+											key={itemId}
+											id={itemId}
+											class={{
+												"ui5-shellbar-content-item ui5-shellbar-gap-start": true,
+												"ui5-shellbar-hidden": this.isHidden(itemId),
+											}}
+										>
+											{packedSep.shouldPack && (
+												<div class="ui5-shellbar-separator ui5-shellbar-separator-start"></div>
 											)}
 											<slot name={(item as any)._individualSlot}></slot>
 										</div>
 									);
 								})}
+
+								{/* Spacer: Grows to fill available space, used to measure if space is tight, should be in DOM always */}
 								<div class="ui5-shellbar-spacer"></div>
+
+								{/* End content items */}
 								{this.endContent.map(item => {
-									const itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);
+									const itemId = (item as any)._individualSlot as string;
+									const packedSep = this.getPackedSeparatorInfo(item, false);
 									return (
-										<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>
-											<slot name={(item as any)._individualSlot}></slot>
-											{this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
-												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
-												<div class={{
-													"ui5-shellbar-separator": true,
-													"ui5-shellbar-separator-end": true,
-												}}></div>
+										<div
+											key={itemId}
+											id={itemId}
+											class={{
+												"ui5-shellbar-content-item ui5-shellbar-gap-start": true,
+												"ui5-shellbar-hidden": this.isHidden(itemId),
+											}}
+										>
+											<slot name={itemId}></slot>
+											{packedSep.shouldPack && (
+												<div class="ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start"></div>
 											)}
 										</div>
 									);
 								})}
-								{this.showEndSeparator && (
-									<div class={{
-										"ui5-shellbar-separator": true,
-										"ui5-shellbar-separator-end": true,
-									}}></div>
+
+								{/* End separator */}
+								{this.separatorConfig.showEndSeparator && (
+									<div class="ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start"></div>
 								)}
 							</div>
 						)}
-						{!this.hasContentItems && <div class="ui5-shellbar-spacer"></div>}
-						<div class="ui5-shellbar-overflow-container-right-child" role={this._rightChildRole}>
-							{this.hasSearchField && (
-								<>
-									{this.showFullWidthSearch && (
-										<div class="ui5-shellbar-search-full-width-wrapper" style={this.styles.searchField}>
-											<div class="ui5-shellbar-search-full-field">
-												<slot name="searchField"></slot>
-											</div>
-											<Button
-												onClick={this._handleCancelButtonPress}
-												class="ui5-shellbar-button ui5-shellbar-cancel-button"
-												data-ui5-stable="cancel-search">
-												{this._cancelBtnText}
-											</Button>
-										</div>
-									)}
-									<div id={this.hasSelfCollapsibleSearch ? `${this._id}-item-1` : undefined} class={this.classes.searchField} style={this.styles.searchField}>
-										<slot name="searchField"></slot>
-									</div>
-									{!(this.hasSelfCollapsibleSearch || this.hideSearchButton) && (
-										<Button
-											id={`${this._id}-item-1`}
-											class={{
-												"ui5-shellbar-button": true,
-												"ui5-shellbar-search-button": true,
-												"ui5-shellbar-search-item-for-arrow-nav": true,
-												...this.classes.search,
-											}}
-											icon="sap-icon://search"
-											data-ui5-text="Search"
-											data-ui5-notifications-count={this.notificationsCount}
-											data-ui5-stable="toggle-search"
-											onClick={this._handleSearchIconPress}
-											tooltip={this._searchBtnOpen}
-											aria-label={this._searchBtnOpen}
-											aria-expanded={this.showSearchField}
-											accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
-										/>
-									)}
-								</>
-							)}
-							{this.hasAssistant && (
-								<div id={`${this._id}-assistant`} class={this.classes.assistant}>
-									<slot name="assistant"></slot>
-								</div>
-							)}
-							{this.showNotifications && (
-								<Button
-									id={`${this._id}-item-2`}
-									class={{
-										"ui5-shellbar-button": true,
-										"ui5-shellbar-bell-button": true,
-										"ui5-shellbar-items-for-arrow-nav": true,
-										...this.classes.notification,
-									}}
-									icon="sap-icon://bell"
-									data-ui5-text="Notifications"
-									onClick={this._handleNotificationsPress}
-									tooltip={this._notificationsText}
-									accessibilityAttributes={this.accInfo.notifications.accessibilityAttributes}
-									data-ui5-stable="notifications"
-								>
-									{this.notificationsCount && (
-										<ButtonBadge slot="badge" design="OverlayText" text={this.notificationsCount} />
-									)}
-								</Button>
-							)}
-							{this.customItemsInfo.map(item => (
-								<Button
-									key={item.id}
-									id={item.id}
-									class={`${item.classes} ui5-shellbar-items-for-arrow-nav`}
-									icon={item.icon}
-									tooltip={item.tooltip}
-									data-ui5-notifications-count={this.notificationsCount}
-									data-ui5-external-action-item-id={item.refItemid}
-									data-ui5-stable={item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined}
-									onClick={item.press}
-									accessibilityAttributes={item.accessibilityAttributes}
-								>
-									{item.count && (
-										<ButtonBadge slot="badge" design="OverlayText" text={item.count} />
-									)}
-								</Button>
-							))}
-						</div>
-					</div>
-				</div>
-				<Button
-					id={`${this._id}-item-5`}
-					class={{
-						"ui5-shellbar-button": true,
-						"ui5-shellbar-overflow-button": true,
-						"ui5-shellbar-items-for-arrow-nav": true,
-						...this.classes.overflow,
-					}}
-					icon="sap-icon://overflow"
-					onClick={this._handleOverflowPress}
-					tooltip={this._overflowText}
-					accessibilityAttributes={this.accInfo.overflow.accessibilityAttributes}
-					data-ui5-stable="overflow"
-				>
-					{this._overflowNotifications && (
-						<ButtonBadge
-							slot="badge"
-							design={this._overflowNotifications === " " ? "AttentionDot" : "OverlayText"}
-							text={this._overflowNotifications === " " ? "" : this._overflowNotifications}
-						/>
-					)}
-				</Button>
 
-				{this.hasProfile && profileButton.call(this)}
-				{this.showProductSwitch && (
-					<Button
-						id={`${this._id}-item-4`}
-						class="ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav"
-						icon="sap-icon://grid"
-						data-ui5-text="Product Switch"
-						onClick={this._handleProductSwitchPress}
-						tooltip={this._productsText}
-						aria-label={this._productSwitchBtnText}
-						aria-haspopup="dialog"
-						aria-expanded={this.accInfo.products.accessibilityAttributes.expanded}
-						accessibilityAttributes={this.accInfo.products.accessibilityAttributes}
-						data-ui5-stable="product-switch"
-					/>
-				)}
-			</header>
-			{ShellBarPopoverTemplate.call(this)}
-		</>
-	);
-}
+						{this.enabledFeatures.search && SearchInBarTemplate.call(this)}
+						{this.enabledFeatures.search && isLegacySearch && ShellBarSearchButtonLegacy.call(this)}
 
-function profileButton(this: ShellBar) {
-	return (
-		<Button
-			data-profile-btn
-			id={`${this._id}-item-3`}
-			onClick={this._handleProfilePress}
-			tooltip={this._profileText}
-			class="ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-no-overflow-button ui5-shellbar-items-for-arrow-nav"
-			aria-label={this.imageBtnText}
-			aria-haspopup="dialog"
-			accessibilityAttributes={this.accInfo.profile.accessibilityAttributes}
-			data-ui5-stable="profile"
-		>
-			<slot name="profile"></slot>
-		</Button>
-	);
-}
+						{assistantAction && (
+							<div class={{
+								"ui5-shellbar-assistant-button ui5-shellbar-gap-start": true,
+								"ui5-shellbar-hidden": this.isHidden("assistant")
+							}}>
+								<slot name="assistant"></slot>
+							</div>
+						)}
 
-function singleLogo(this: ShellBar) {
-	return (
-		<span
-			role={this.accLogoRole}
-			class="ui5-shellbar-logo"
-			aria-label={this._logoText}
-			title={this._logoText}
-			onClick={this._logoPress}
-			onKeyDown={this._logoKeydown}
-			onKeyUp={this._logoKeyup}
-			tabIndex={0}
-			data-ui5-stable="logo">
-			<slot name="logo"></slot>
-		</span>
-	);
-}
+						{notificationsAction && (
+							<Button
+								data-ui5-stable={notificationsAction.stableDomRef}
+								class={{
+									"ui5-shellbar-bell-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+									"ui5-shellbar-hidden": this.isHidden("notifications")
+								}}
+								icon={notificationsAction.icon}
+								design="Transparent"
+								onClick={this.handleNotificationsClick}
+								tooltip={actionsAccInfo.notifications.title}
+								accessibilityAttributes={actionsAccInfo.notifications.accessibilityAttributes}
+							>
+								{notificationsAction?.count && (
+									<ButtonBadge slot="badge" design="OverlayText" text={notificationsAction?.count} />
+								)}
+							</Button>
+						)}
 
-function combinedLogo(this: ShellBar) {
-	return (
-		<div
-			role={this.accLogoRole}
-			class="ui5-shellbar-logo-area"
-			onClick={this._logoPress}
-			tabIndex={0}
-			onKeyDown={this._logoKeydown}
-			onKeyUp={this._logoKeyup}
-			aria-label={this.accessibilityAttributes.branding?.name || this._logoAreaText}>
-			{this.hasLogo && (
-				<span
-					class="ui5-shellbar-logo"
-					title={this._logoText}
-					data-ui5-stable="logo">
-					<slot name="logo"></slot>
-				</span>
-			)}
-			<div class="ui5-shellbar-headings">
-				{this.primaryTitle && (
-					<h1 class="ui5-shellbar-title">
-						<bdi>{this.primaryTitle}</bdi>
-					</h1>
-				)}
-			</div>
-		</div>
+						{/* Custom Items */}
+						{this.sortItems(this.items).map(item => (
+							<div
+								key={item._id}
+								class={{
+									"ui5-shellbar-custom-item ui5-shellbar-gap-start": true,
+									"ui5-shellbar-hidden": this.isHidden(item._id),
+								}}
+								data-ui5-stable={item.stableDomRef}
+							>
+								{!item.inOverflow ? <slot name={(item as any)._individualSlot}></slot> : null}
+							</div>
+						))}
+
+						{overflowAction && (
+							<Button
+								data-ui5-stable={overflowAction.stableDomRef}
+								id="ui5-shellbar-overflow-button"
+								class={{
+									"ui5-shellbar-overflow-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+									"ui5-shellbar-hidden": this.isHidden("overflow")
+								}}
+								icon={overflowAction.icon}
+								design="Transparent"
+								onClick={this.handleOverflowClick}
+								tooltip={actionsAccInfo.overflow.title}
+								accessibilityAttributes={actionsAccInfo.overflow.accessibilityAttributes}
+							>
+								{this.overflowBadge && (
+									<ButtonBadge
+										slot="badge"
+										design={this.overflowBadge === " " ? "AttentionDot" : "OverlayText"}
+										text={this.overflowBadge === " " ? "" : this.overflowBadge}
+									/>
+								)}
+							</Button>
+						)}
+
+						{profileAction && (
+							<Button
+								data-profile-btn
+								data-ui5-stable={profileAction.stableDomRef}
+								class={{
+									"ui5-shellbar-image-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+									"ui5-shellbar-hidden": this.isHidden("profile")
+								}}
+								design="Transparent"
+								onClick={this.handleProfileClick}
+								tooltip={actionsAccInfo.profile.title}
+								accessibilityAttributes={actionsAccInfo.profile.accessibilityAttributes}
+							>
+								<slot name="profile"></slot>
+							</Button>
+						)}
+
+						{productSwitchAction && (
+							<Button
+								data-ui5-stable={productSwitchAction.stableDomRef}
+								class={{
+									"ui5-shellbar-button-product-switch ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+									"ui5-shellbar-hidden": this.isHidden("products")
+								}}
+								icon={productSwitchAction.icon}
+								design="Transparent"
+								onClick={this.handleProductSwitchClick}
+								tooltip={actionsAccInfo.products.title}
+								accessibilityAttributes={actionsAccInfo.products.accessibilityAttributes}
+							></Button>
+						)}
+					</div>
+				</div>
+			</header>
+
+			{/* Overflow Popover */}
+			<Popover
+				class="ui5-shellbar-overflow-popover"
+				open={this.overflowPopoverOpen}
+				onClose={this.onPopoverClose}
+				opener="ui5-shellbar-overflow-button"
+				placement="Bottom"
+				hideArrow={true}
+				horizontalAlign={this.popoverHorizontalAlign} // TODO: add test
+			>
+				<List separators="None" onClick={this.handleOverflowItemClick}>
+					{this.overflowItems.map(item => {
+						if (item.type === "action") {
+							const actionData = item.data;
+							return (
+								<ShellBarItem
+									key={item.id}
+									icon={actionData.icon ? `sap-icon://${actionData.icon}` : ""}
+									data-action-id={item.id}
+									count={actionData.count}
+									inOverflow={true}
+									text={this.getActionOverflowText(item.id)}
+								/>
+							);
+						}
+						return <slot key={item.id} name={item.data._individualSlot}></slot>;
+					})}
+				</List>
+			</Popover>
+		</>
 	);
 }
diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
index 5b9e472cbcc3..f0310102f786 100644
--- a/packages/fiori/src/i18n/messagebundle.properties
+++ b/packages/fiori/src/i18n/messagebundle.properties
@@ -206,6 +206,9 @@ SEARCH_ITEM_DELETE_BUTTON_TOOLTIP=Remove Suggestion
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More
 
+#XACT: ARIA announcement for the assistant button
+SHELLBAR_ASSISTANT=Assistant
+
 #XACT: ARIA announcement for the cancel button
 SHELLBAR_CANCEL = Cancel
 
diff --git a/packages/fiori/src/shellbar/IShellBarSearchController.ts b/packages/fiori/src/shellbar/IShellBarSearchController.ts
new file mode 100644
index 000000000000..5658177a29bb
--- /dev/null
+++ b/packages/fiori/src/shellbar/IShellBarSearchController.ts
@@ -0,0 +1,32 @@
+/**
+ * Interface for ShellBar search controllers.
+ */
+export interface IShellBarSearchController {
+	/**
+	 * Subscribe to search field events.
+	 */
+	subscribe(): void;
+
+	/**
+	 * Unsubscribe from search field events.
+	 */
+	unsubscribe(): void;
+
+	/**
+	 * Auto-collapse or expand search based on available space.
+	 * @param hiddenItems Number of items currently hidden due to overflow
+	 * @param availableSpace Available space in pixels (spacer width)
+	 */
+	autoManageSearchState(hiddenItems: number, availableSpace: number): void;
+
+	/**
+	 * Sync component state (showSearchField) to search field.
+	 */
+	syncShowSearchFieldState(): void;
+
+	/**
+	 * Check if full-screen search should be shown.
+	 * Returns true when shellbar is overflowing AND search is visible.
+	 */
+	shouldShowFullScreen(): boolean;
+}
diff --git a/packages/fiori/src/shellbar/ShellBarAccessibility.ts b/packages/fiori/src/shellbar/ShellBarAccessibility.ts
new file mode 100644
index 000000000000..4c042ff80634
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarAccessibility.ts
@@ -0,0 +1,107 @@
+import type { AccessibilityAttributes, AriaRole } from "@ui5/webcomponents-base";
+
+// Legacy Type logo accessibility attributes
+type ShellBarLogoAccessibilityAttributes = {
+	role?: Extract<AriaRole, "button" | "link">;
+	name?: string;
+};
+
+type ShellBarProfileAccessibilityAttributes = Pick<AccessibilityAttributes, "name" | "expanded" | "hasPopup">;
+type ShellBarAreaAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded">;
+type ShellBarBrandingAccessibilityAttributes = Pick<AccessibilityAttributes, "name">;
+
+type ShellBarAccessibilityAttributes = {
+	logo?: ShellBarLogoAccessibilityAttributes;
+	notifications?: ShellBarAreaAccessibilityAttributes;
+	profile?: ShellBarProfileAccessibilityAttributes;
+	product?: ShellBarAreaAccessibilityAttributes;
+	search?: ShellBarAreaAccessibilityAttributes;
+	overflow?: ShellBarAreaAccessibilityAttributes;
+	branding?: ShellBarBrandingAccessibilityAttributes;
+};
+
+interface ShellBarAreaAccessibilityInfo {
+	title: string | undefined;
+	accessibilityAttributes: {
+		name?: string;
+		hasPopup?: AccessibilityAttributes["hasPopup"];
+		expanded?: AccessibilityAttributes["expanded"];
+	};
+}
+
+type ShellBarAccessibilityInfo = {
+	notifications: ShellBarAreaAccessibilityInfo;
+	profile: ShellBarAreaAccessibilityInfo;
+	products: ShellBarAreaAccessibilityInfo;
+	overflow: ShellBarAreaAccessibilityInfo;
+	search: ShellBarAreaAccessibilityInfo;
+};
+
+class ShellBarAccessibility {
+	getActionsAccessibilityAttributes(
+		defaultTexts: Record<string, string | undefined>,
+		params: {
+			accessibilityAttributes: ShellBarAccessibilityAttributes;
+			overflowPopoverOpen: boolean;
+		},
+	): ShellBarAccessibilityInfo {
+		const { overflowPopoverOpen, accessibilityAttributes } = params;
+		const overflowExpanded = accessibilityAttributes.overflow?.expanded;
+
+		return {
+			notifications: {
+				title: defaultTexts.notifications,
+				accessibilityAttributes: {
+					expanded: accessibilityAttributes.notifications?.expanded,
+					hasPopup: accessibilityAttributes.notifications?.hasPopup,
+				},
+			},
+			profile: {
+				title: accessibilityAttributes.profile?.name || defaultTexts.profile,
+				accessibilityAttributes: {
+					hasPopup: accessibilityAttributes.profile?.hasPopup,
+					expanded: accessibilityAttributes.profile?.expanded,
+				},
+			},
+			products: {
+				title: defaultTexts.products,
+				accessibilityAttributes: {
+					hasPopup: accessibilityAttributes.product?.hasPopup,
+					expanded: accessibilityAttributes.product?.expanded,
+				},
+			},
+			search: {
+				title: defaultTexts.search,
+				accessibilityAttributes: {
+					hasPopup: accessibilityAttributes.search?.hasPopup,
+				},
+			},
+			overflow: {
+				title: defaultTexts.overflow,
+				accessibilityAttributes: {
+					hasPopup: accessibilityAttributes.overflow?.hasPopup || "menu" as const,
+					expanded: overflowExpanded === undefined ? overflowPopoverOpen : overflowExpanded,
+				},
+			},
+		};
+	}
+
+	getActionsRole(visibleItemsCount: number): "toolbar" | undefined {
+		return visibleItemsCount > 1 ? "toolbar" : undefined;
+	}
+
+	getContentRole(visibleItemsCount: number): "group" | undefined {
+		return visibleItemsCount > 1 ? "group" : undefined;
+	}
+}
+
+export default ShellBarAccessibility;
+
+export type {
+	ShellBarAccessibilityInfo,
+	ShellBarAreaAccessibilityInfo,
+	ShellBarAccessibilityAttributes,
+	ShellBarLogoAccessibilityAttributes,
+	ShellBarAreaAccessibilityAttributes,
+	ShellBarProfileAccessibilityAttributes,
+};
diff --git a/packages/fiori/src/shellbar/ShellBarItemNavigation.ts b/packages/fiori/src/shellbar/ShellBarItemNavigation.ts
new file mode 100644
index 000000000000..ab7faa016907
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarItemNavigation.ts
@@ -0,0 +1,115 @@
+import {
+	isEnd,
+	isHome,
+	isLeft,
+	isRight,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+
+interface ShellBarItemNavigationConstructorParams {
+	getDomRef: () => HTMLElement | null;
+}
+
+class ShellBarItemNavigation {
+	private params: ShellBarItemNavigationConstructorParams;
+
+	constructor(params: ShellBarItemNavigationConstructorParams) {
+		this.params = params;
+	}
+
+	handleKeyDown(e: KeyboardEvent): void {
+		if (!this.shouldHandle(e)) {
+			return;
+		}
+
+		const domRef = this.params.getDomRef();
+		if (!domRef) {
+			return;
+		}
+
+		const activeElement = getActiveElement();
+		if (!activeElement) {
+			return;
+		}
+
+		if (this.shouldChildHandleNavigation(activeElement as HTMLElement, e)) {
+			return;
+		}
+
+		const items = this.getTabbableItems(domRef);
+		const currentIndex = items.findIndex(el => el === activeElement);
+
+		if (currentIndex !== -1) {
+			e.preventDefault();
+			this.navigateToItem(items, currentIndex, e);
+		}
+	}
+
+	private shouldHandle(e: KeyboardEvent): boolean {
+		return isLeft(e) || isRight(e) || isHome(e) || isEnd(e);
+	}
+
+	private shouldChildHandleNavigation(element: HTMLElement, e: KeyboardEvent): boolean {
+		if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
+			return this.shouldInputHandleNavigation(element as HTMLInputElement | HTMLTextAreaElement, e);
+		}
+		return false;
+	}
+
+	private shouldInputHandleNavigation(input: HTMLInputElement | HTMLTextAreaElement, e: KeyboardEvent): boolean {
+		const cursorPos = input.selectionStart || 0;
+		const textLength = input.value.length;
+
+		if (isLeft(e) && cursorPos > 0) {
+			return true;
+		}
+
+		if (isRight(e) && cursorPos < textLength) {
+			return true;
+		}
+
+		return false;
+	}
+
+	private getTabbableItems(domRef: HTMLElement): HTMLElement[] {
+		return getTabbableElements(domRef).filter(el => this.isVisible(el));
+	}
+
+	private isVisible(element: HTMLElement): boolean {
+		const style = getComputedStyle(element);
+		return style.display !== "none"
+			&& style.visibility !== "hidden"
+			&& element.offsetWidth > 0
+			&& element.offsetHeight > 0;
+	}
+
+	private navigateToItem(items: HTMLElement[], currentIndex: number, e: KeyboardEvent): void {
+		if (isLeft(e)) {
+			this.focusPrevious(items, currentIndex);
+		} else if (isRight(e)) {
+			this.focusNext(items, currentIndex);
+		} else if (isHome(e)) {
+			items[0]?.focus();
+		} else if (isEnd(e)) {
+			items[items.length - 1]?.focus();
+		}
+	}
+
+	private focusPrevious(items: HTMLElement[], currentIndex: number): void {
+		if (currentIndex > 0) {
+			items[currentIndex - 1].focus();
+		}
+	}
+
+	private focusNext(items: HTMLElement[], currentIndex: number): void {
+		if (currentIndex < items.length - 1) {
+			items[currentIndex + 1].focus();
+		}
+	}
+}
+
+export default ShellBarItemNavigation;
+export type {
+	ShellBarItemNavigationConstructorParams,
+};
diff --git a/packages/fiori/src/shellbar/ShellBarLegacy.ts b/packages/fiori/src/shellbar/ShellBarLegacy.ts
new file mode 100644
index 000000000000..c4e5635b331b
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarLegacy.ts
@@ -0,0 +1,187 @@
+import {
+	isSpace,
+	isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
+import type ShellBar from "../ShellBar.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+
+type ShellBarLegacyDeps = {
+	component: ShellBar;
+	getShadowRoot: () => ShadowRoot | null;
+};
+
+/**
+ * Controller for legacy ShellBar features that will be removed in future versions.
+ * Handles: logo slot, primaryTitle/secondaryTitle properties, menuItems slot.
+ */
+class ShellBarLegacy {
+	private component: ShellBar;
+	private getShadowRoot: () => ShadowRoot | null;
+
+	// Bound handlers for event listeners
+	handleLogoClickBound = this.handleLogoClick.bind(this);
+	handleLogoKeyupBound = this.handleLogoKeyup.bind(this);
+	handleLogoKeydownBound = this.handleLogoKeydown.bind(this);
+	handleMenuItemClickBound = this.handleMenuItemClick.bind(this);
+	handleMenuButtonClickBound = this.handleMenuButtonClick.bind(this);
+	handleMenuPopoverBeforeOpenBound = this.handleMenuPopoverBeforeOpen.bind(this);
+	handleMenuPopoverAfterCloseBound = this.handleMenuPopoverAfterClose.bind(this);
+
+	constructor(deps: ShellBarLegacyDeps) {
+		this.component = deps.component;
+		this.getShadowRoot = deps.getShadowRoot;
+	}
+
+	/* ------------- Menu Management -------------- */
+
+	handleMenuButtonClick() {
+		const shadowRoot = this.getShadowRoot();
+		if (!shadowRoot) {
+			return;
+		}
+
+		const menuButton = shadowRoot.querySelector(".ui5-shellbar-menu-button");
+		const menuPopover = this.getMenuPopover();
+
+		if (menuPopover && menuButton) {
+			menuPopover.opener = menuButton as HTMLElement;
+			menuPopover.open = true;
+		}
+	}
+
+	handleMenuItemClick(e: CustomEvent<ListItemClickEventDetail>) {
+		const shouldContinue = this.component.fireDecoratorEvent("menu-item-click", {
+			item: e.detail.item,
+		});
+
+		if (shouldContinue) {
+			const menuPopover = this.getMenuPopover();
+			if (menuPopover) {
+				menuPopover.open = false;
+			}
+		}
+	}
+
+	handleMenuPopoverBeforeOpen() {
+		this.component.menuPopoverOpen = true;
+		const menuPopover = this.getMenuPopover();
+		if (menuPopover?.content && menuPopover.content.length) {
+			const list = menuPopover.content[0];
+			if (list instanceof List) {
+				list.focusFirstItem();
+			}
+		}
+	}
+
+	handleMenuPopoverAfterClose() {
+		this.component.menuPopoverOpen = false;
+	}
+
+	private getMenuPopover() {
+		const shadowRoot = this.getShadowRoot();
+		return shadowRoot?.querySelector<Popover>(".ui5-shellbar-menu-popover");
+	}
+
+	get hasMenuItems(): boolean {
+		return this.component.menuItems.length > 0;
+	}
+
+	get menuPopoverExpanded(): boolean {
+		return this.component.menuPopoverOpen;
+	}
+
+	/* ------------- Logo Management -------------- */
+
+	handleLogoClick() {
+		const shadowRoot = this.getShadowRoot();
+		if (!shadowRoot) {
+			return;
+		}
+
+		const logoElement = shadowRoot.querySelector(".ui5-shellbar-logo");
+		if (logoElement) {
+			this.component.fireDecoratorEvent("logo-click", {
+				targetRef: logoElement as HTMLElement,
+			});
+		}
+	}
+
+	handleLogoKeydown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+			return;
+		}
+
+		if (isEnter(e)) {
+			this.handleLogoClick();
+		}
+	}
+
+	handleLogoKeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this.handleLogoClick();
+		}
+	}
+
+	get hasLogo(): boolean {
+		return this.component.logo.length > 0;
+	}
+
+	get logoRole(): "button" | "link" {
+		return this.component.accessibilityAttributes.logo?.role || "link";
+	}
+
+	get logoAriaLabel(): string {
+		return this.component.accessibilityAttributes.logo?.name || "Logo";
+	}
+
+	get brandingText(): string {
+		return this.component.accessibilityAttributes.branding?.name || this.primaryTitle;
+	}
+
+	/* ------------- Title Management -------------- */
+
+	get hasPrimaryTitle(): boolean {
+		return !!this.component.primaryTitle;
+	}
+
+	get hasSecondaryTitle(): boolean {
+		return !!this.component.secondaryTitle;
+	}
+
+	get showSecondaryTitle(): boolean {
+		return this.hasSecondaryTitle && !this.component.isSBreakPoint;
+	}
+
+	get primaryTitle(): string {
+		return this.component.primaryTitle || "";
+	}
+
+	get secondaryTitle(): string {
+		return this.component.secondaryTitle || "";
+	}
+
+	/* ------------- Menu Button -------------- */
+
+	get showMenuButton(): boolean {
+		return this.hasPrimaryTitle || this.showLogoInMenuButton;
+	}
+
+	get showLogoInMenuButton(): boolean {
+		return this.hasLogo && this.isSBreakPoint;
+	}
+
+	get showTitleInMenuButton(): boolean {
+		return this.hasPrimaryTitle && !this.showLogoInMenuButton;
+	}
+
+	/* ------------- Common -------------- */
+
+	get isSBreakPoint(): boolean {
+		return this.component.isSBreakPoint;
+	}
+}
+
+export default ShellBarLegacy;
diff --git a/packages/fiori/src/shellbar/ShellBarOverflow.ts b/packages/fiori/src/shellbar/ShellBarOverflow.ts
new file mode 100644
index 000000000000..aa232fcf5c22
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarOverflow.ts
@@ -0,0 +1,243 @@
+import type ShellBarItem from "../ShellBarItem.js";
+import { ShellBarActions, ShellBarActionsSelectors } from "../ShellBar.js";
+import type { ShellBarActionId, ShellBarActionItem } from "../ShellBar.js";
+
+interface ShellBarHidableItem {
+	id: string;
+	selector: string; 			// CSS selector to find the element
+	hideOrder: number;			// Priority for hiding - later adjusted based on search field state
+	keepHidden: boolean; 		// Keep item hidden to prevent flickering when searchfield expands/collapses
+	showInOverflow?: boolean; 	// If true, hiding this item triggers overflow button
+}
+
+interface ShellBarOverflowParams {
+	actions: readonly ShellBarActionItem[];
+	content: readonly HTMLElement[];
+	customItems: readonly ShellBarItem[];
+	overflowOuter: HTMLElement;
+	overflowInner: HTMLElement;
+	hiddenItemsIds: readonly string[];
+	showSearchField: boolean;
+	setVisible: (selector: string, visible: boolean) => void;
+}
+
+interface ShellBarOverflowResult {
+	hiddenItemsIds: string[];
+	showOverflowButton: boolean;
+}
+
+type ShellBarOverflowItem = {
+	type: "action";
+	id: ShellBarActionId;
+	data: ShellBarActionItem
+	order: number;
+} | {
+	type: "item";
+	id: string;
+	data: ShellBarItem;
+	order: number;
+}
+
+class ShellBarOverflow {
+	private readonly CLOSED_SEARCH_STRATEGY = {
+		ACTIONS: 0,			// All actions hide first
+		CONTENT: 1000,		// Then content (except last)
+		SEARCH: 2000,		// Then search button
+		LAST_CONTENT: 3000,	// Last content item hides last
+	};
+
+	private readonly OPEN_SEARCH_STRATEGY = {
+		CONTENT: 0, 		// All content hide first
+		ACTIONS: 1000,		// All actions next
+		SEARCH: 2000,		// Then search button
+		LAST_CONTENT: 0,	// Last content same as other content
+	};
+
+	updateOverflow(params: ShellBarOverflowParams): ShellBarOverflowResult {
+		const {
+			overflowOuter, overflowInner, setVisible,
+		} = params;
+
+		if (!overflowOuter || !overflowInner) {
+			return { hiddenItemsIds: [], showOverflowButton: false };
+		}
+
+		const sortedItems = this.buildHidableItems(params);
+
+		// set initial state, to account for isOverflowing calculation
+		setVisible(ShellBarActionsSelectors.Overflow, false);
+		sortedItems.forEach(item => {
+			// show all items to account for isOverflowing calculation
+			setVisible(item.selector, true);
+		});
+
+		let nextItemToHide = null;
+		let showOverflowButton = false;
+		const hiddenItemsIds: string[] = [];
+
+		// Iteratively hide items until no overflow
+		for (let indexToHide = 0; indexToHide < sortedItems.length; indexToHide++) {
+			nextItemToHide = sortedItems[indexToHide];
+
+			if (!this.isOverflowing(overflowOuter, overflowInner)) {
+				break; // No more overflow, stop hiding
+			}
+
+			setVisible(nextItemToHide.selector, false);
+			hiddenItemsIds.push(nextItemToHide.id);
+
+			if (nextItemToHide.showInOverflow) {
+				// show overflow button to account in isOverflowing calculation
+				setVisible(ShellBarActionsSelectors.Overflow, true);
+				showOverflowButton = true;
+			}
+		}
+
+		return {
+			hiddenItemsIds,
+			showOverflowButton,
+		};
+	}
+
+	isOverflowing(overflowOuter: HTMLElement, overflowInner: HTMLElement): boolean {
+		return overflowInner.offsetWidth > overflowOuter.offsetWidth;
+	}
+
+	private getOverflowStrategy(showSearchField: boolean) {
+		return showSearchField ? this.OPEN_SEARCH_STRATEGY : this.CLOSED_SEARCH_STRATEGY;
+	}
+
+	private buildHidableItems(params: ShellBarOverflowParams): ShellBarHidableItem[] {
+		const items: ShellBarHidableItem[] = [
+			...this.buildContent(params),
+			...this.buildActions(params),
+		];
+
+		// sort by hideOrder first then by keepHidden keepHidden items are at the start
+		return items.sort((a, b) => {
+			if (a.keepHidden && !b.keepHidden) {
+				return -1;
+			}
+			if (!a.keepHidden && b.keepHidden) {
+				return 1;
+			}
+			return a.hideOrder - b.hideOrder;
+		});
+	}
+
+	private buildContent(params: ShellBarOverflowParams): readonly ShellBarHidableItem[] {
+		const {
+			content, showSearchField,
+		} = params;
+
+		const items: ShellBarHidableItem[] = [];
+		const overflowStrategy = this.getOverflowStrategy(showSearchField);
+
+		// Build content items
+		content.forEach((item, index) => {
+			const slotName = (item as any)._individualSlot as string;
+			const dataHideOrder = parseInt(item.getAttribute("data-hide-order") || String(index));
+			const isLast = index === content.length - 1;
+
+			const priority = isLast ? overflowStrategy.LAST_CONTENT : overflowStrategy.CONTENT;
+
+			items.push({
+				id: slotName,
+				selector: `#${slotName}`,
+				hideOrder: priority + dataHideOrder,
+				keepHidden: false, // Content items don't cause flickering
+				showInOverflow: false,
+			});
+		});
+
+		return items;
+	}
+
+	private buildActions(params: ShellBarOverflowParams): readonly ShellBarHidableItem[] {
+		const {
+			customItems, actions, showSearchField, hiddenItemsIds,
+		} = params;
+
+		const items: ShellBarHidableItem[] = [];
+		const overflowStrategy = this.getOverflowStrategy(showSearchField);
+		let actionIndex = 0;
+
+		customItems.forEach(item => {
+			items.push({
+				id: item._id,
+				selector: `[data-ui5-stable="${item.stableDomRef}"]`,
+				hideOrder: overflowStrategy.ACTIONS + actionIndex++,
+				keepHidden: hiddenItemsIds.includes(item._id),
+				showInOverflow: true,
+			});
+		});
+
+		actions
+			// skip protected actions and search (handled separately)
+			.filter(a => !a.isProtected && a.id !== ShellBarActions.Search)
+			.forEach(config => {
+				items.push({
+					id: config.id,
+					selector: config.selector,
+					hideOrder: overflowStrategy.ACTIONS + actionIndex++,
+					keepHidden: hiddenItemsIds.includes(config.id),
+					showInOverflow: true,
+				});
+			});
+
+		if (!showSearchField) {
+			// Only move search to overflow if it's closed
+			items.push({
+				id: ShellBarActions.Search,
+				selector: ShellBarActionsSelectors.Search,
+				hideOrder: overflowStrategy.SEARCH + actionIndex++,
+				keepHidden: false, // Search button can be shown/hidden freely
+				showInOverflow: true,
+			});
+		}
+		return items;
+	}
+
+	getOverflowItems(params: {
+		actions: readonly ShellBarActionItem[];
+		customItems: readonly ShellBarItem[];
+		hiddenItemsIds: readonly string[];
+	}): ReadonlyArray<ShellBarOverflowItem> {
+		const { actions, customItems, hiddenItemsIds } = params;
+		const result: ShellBarOverflowItem[] = [];
+
+		// Add hidden custom items
+		const hiddenCustomItems = customItems.filter((item: ShellBarItem) => hiddenItemsIds.includes(item._id));
+		hiddenCustomItems.forEach((item: ShellBarItem, index: number) => {
+			result.push({
+				type: "item", id: item._id, data: item, order: 3 + index,
+			});
+		});
+
+		const actionOrder: Record<string, number> = {
+			[ShellBarActions.Search]: 0,
+			[ShellBarActions.Notifications]: 1,
+			[ShellBarActions.Assistant]: 2,
+		};
+
+		const hiddenActions = actions.filter(action => hiddenItemsIds.includes(action.id));
+		hiddenActions.forEach(action => {
+			result.push({
+				type: "action",
+				id: action.id,
+				data: action,
+				order: actionOrder[action.id] ?? 0,
+			});
+		});
+
+		return result.sort((a, b) => a.order - b.order);
+	}
+}
+
+export default ShellBarOverflow;
+export type {
+	ShellBarHidableItem,
+	ShellBarOverflowParams,
+	ShellBarOverflowResult,
+	ShellBarOverflowItem,
+};
diff --git a/packages/fiori/src/shellbar/ShellBarSearch.ts b/packages/fiori/src/shellbar/ShellBarSearch.ts
new file mode 100644
index 000000000000..58b0d8f6aa6f
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarSearch.ts
@@ -0,0 +1,184 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import type { IShellBarSearchField } from "../ShellBar.js";
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+
+interface ShellBarSearchConstructorParams {
+	getOverflowed: () => boolean;
+	getSearchState: () => boolean;
+	setSearchState: (expanded: boolean) => void;
+	getSearchField: () => IShellBarSearchField | null;
+	getCSSVariable: (variable: string) => string;
+}
+
+/**
+ * Search controller for self-collapsible search (ui5-shellbar-search).
+ * Handles search fields with collapsed/open properties and ui5-open/close/search events.
+ */
+class ShellBarSearch implements IShellBarSearchController {
+	static CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+	static FALLBACK_WIDTH = 400;
+
+	private onSearchBound = this.onSearch.bind(this);
+	private onSearchOpenBound = this.onSearchOpen.bind(this);
+	private onSearchCloseBound = this.onSearchClose.bind(this);
+
+	private getOverflowed: () => boolean;
+	private getSearchField: () => IShellBarSearchField | null;
+	private getSearchState: () => boolean;
+	private setSearchState: (expanded: boolean) => void;
+	private getCSSVariable: (variable: string) => string;
+	private initialRender = true;
+
+	constructor({
+		getOverflowed,
+		setSearchState,
+		getSearchField,
+		getSearchState,
+		getCSSVariable,
+	}: ShellBarSearchConstructorParams) {
+		this.getOverflowed = getOverflowed;
+		this.getCSSVariable = getCSSVariable;
+		this.getSearchField = getSearchField;
+		this.getSearchState = getSearchState;
+		this.setSearchState = setSearchState;
+	}
+
+	subscribe(searchField: HTMLElement | null = this.getSearchField()) {
+		if (!searchField) {
+			return;
+		}
+		searchField.addEventListener("ui5-open", this.onSearchOpenBound);
+		searchField.addEventListener("ui5-close", this.onSearchCloseBound);
+		searchField.addEventListener("ui5-search", this.onSearchBound);
+	}
+
+	unsubscribe(searchField: HTMLElement | null = this.getSearchField()) {
+		if (!searchField) {
+			return;
+		}
+		searchField.removeEventListener("ui5-open", this.onSearchOpenBound);
+		searchField.removeEventListener("ui5-close", this.onSearchCloseBound);
+		searchField.removeEventListener("ui5-search", this.onSearchBound);
+	}
+
+	/**
+	 * Auto-collapse/restore search field based on available space.
+	 * Delegates decision logic to SearchController.
+	 */
+	autoManageSearchState(hiddenItems: number, availableSpace: number) {
+		if (!this.hasSearchField) {
+			return;
+		}
+
+		// Get search field min width from CSS variable
+		const searchFieldWidth = this.getSearchFieldWidth();
+
+		const searchHasFocus = document.activeElement === this.getSearchField();
+		const searchHasValue = !!this.getSearchField()?.value;
+
+		// On initial load, allow search to collapse even if it would trigger full-screen mode.
+		// This prevents search from showing in full-screen when page loads on small screens.
+		// After initial render, prevent collapse in full-screen mode during resize.
+		const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+		const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+
+		if (hiddenItems > 0 && !preventCollapse) {
+			this.setSearchState(false);
+		} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+			this.setSearchState(true);
+		}
+
+		this.initialRender = false;
+	}
+
+	/**
+	 * Applies the show-search-field state to the search field.
+	 */
+	syncShowSearchFieldState() {
+		const search = this.getSearchField();
+		if (!search) {
+			return;
+		}
+		if (isPhone()) {
+			search.open = this.getSearchState();
+		} else {
+			search.collapsed = !this.getSearchState();
+		}
+	}
+
+	/**
+	 * Determines if full-screen search should be shown.
+	 * Full-screen search activates when overflow happens AND search is visible.
+	 */
+	shouldShowFullScreen(): boolean {
+		return this.getOverflowed() && this.getSearchState();
+	}
+
+	private onSearchOpen(e: Event) {
+		if (e.target !== this.getSearchField()) {
+			this.unsubscribe(e.target as HTMLElement);
+			return;
+		}
+		if (isPhone()) {
+			this.setSearchState(true);
+		}
+	}
+
+	private onSearchClose(e: Event) {
+		if (e.target !== this.getSearchField()) {
+			this.unsubscribe(e.target as HTMLElement);
+			return;
+		}
+		if (isPhone()) {
+			this.setSearchState(false);
+		}
+	}
+
+	private onSearch(e: Event) {
+		if (e.target !== this.getSearchField()) {
+			this.unsubscribe(e.target as HTMLElement);
+			return;
+		}
+
+		// On mobile or if has value, don't toggle
+		if (isPhone() || (this.getSearchField()?.value && this.getSearchState())) {
+			return;
+		}
+
+		this.setSearchState(!this.getSearchState());
+	}
+
+	/**
+	 * Gets the minimum width needed for search field from CSS variable.
+	 */
+	private getSearchFieldWidth(): number {
+		const width = this.getCSSVariable(ShellBarSearch.CSS_VARIABLE);
+		if (!width) {
+			return ShellBarSearch.FALLBACK_WIDTH;
+		}
+		// Convert rem to px
+		if (width.endsWith("rem")) {
+			const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			return parseFloat(width) * fontSize;
+		}
+		return parseFloat(width);
+	}
+
+	get hasSearchField() {
+		return !!this.getSearchField();
+	}
+
+	/**
+	 * Gets the size of the search button.
+	 * If the search field is visible, the size is 0.
+	 * Otherwise, it is the width of the search field (just a button in collapsed state).
+	 */
+	private getSearchButtonSize(): number {
+		return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+	}
+}
+
+export default ShellBarSearch;
+export type {
+	ShellBarSearchConstructorParams,
+};
diff --git a/packages/fiori/src/shellbar/ShellBarSearchLegacy.ts b/packages/fiori/src/shellbar/ShellBarSearchLegacy.ts
new file mode 100644
index 000000000000..622015f25850
--- /dev/null
+++ b/packages/fiori/src/shellbar/ShellBarSearchLegacy.ts
@@ -0,0 +1,163 @@
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+
+interface ShellBarSearchLegacyConstructorParams {
+	getOverflowed: () => boolean;
+	getSearchState: () => boolean;
+	setSearchState: (expanded: boolean) => void;
+	getSearchField: () => HTMLElement | null;
+	getCSSVariable: (variable: string) => string;
+	getDisableSearchCollapse: () => boolean;
+}
+
+/**
+ * Search controller for legacy search fields (ui5-input, custom div).
+ * Handles search fields that don't have collapsed/open properties.
+ * Supports disableSearchCollapse for preventing auto-collapse.
+ */
+class ShellBarSearchLegacy implements IShellBarSearchController {
+	static CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+	static FALLBACK_WIDTH = 400;
+
+	private getOverflowed: () => boolean;
+	private getSearchField: () => HTMLElement | null;
+	private getSearchState: () => boolean;
+	private setSearchState: (expanded: boolean) => void;
+	private getCSSVariable: (variable: string) => string;
+	private getDisableSearchCollapse: () => boolean;
+	private initialRender = true;
+
+	constructor({
+		getOverflowed,
+		setSearchState,
+		getSearchField,
+		getSearchState,
+		getCSSVariable,
+		getDisableSearchCollapse,
+	}: ShellBarSearchLegacyConstructorParams) {
+		this.getOverflowed = getOverflowed;
+		this.getCSSVariable = getCSSVariable;
+		this.getSearchField = getSearchField;
+		this.getSearchState = getSearchState;
+		this.setSearchState = setSearchState;
+		this.getDisableSearchCollapse = getDisableSearchCollapse;
+	}
+
+	/**
+	 * No-op for legacy search - legacy fields don't emit ui5-open/close/search events.
+	 */
+	subscribe(): void {
+		// No events to subscribe to for legacy search fields
+	}
+
+	/**
+	 * No-op for legacy search - no event listeners to clean up.
+	 */
+	unsubscribe(): void {
+		// No events to unsubscribe from
+	}
+
+	/**
+	 * Auto-collapse/restore search field based on available space.
+	 * Respects disableSearchCollapse flag, focus state, and field value.
+	 */
+	autoManageSearchState(hiddenItems: number, availableSpace: number): void {
+		if (!this.hasSearchField) {
+			return;
+		}
+
+		// Check if auto-collapse is disabled
+		if (this.getDisableSearchCollapse()) {
+			return;
+		}
+
+		const searchFieldWidth = this.getSearchFieldWidth();
+
+		// Check focus and value to prevent collapse
+		const searchField = this.getSearchField();
+		const searchHasFocus = searchField?.contains(document.activeElement) || false;
+		const searchHasValue = this.hasValue(searchField);
+
+		// On initial load, allow search to collapse even if it would trigger full-screen mode.
+		// This prevents search from showing in full-screen when page loads on small screens.
+		// After initial render, prevent collapse in full-screen mode during resize.
+		const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+		const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+
+		if (hiddenItems > 0 && !preventCollapse) {
+			this.setSearchState(false);
+		} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+			this.setSearchState(true);
+		}
+
+		this.initialRender = false;
+	}
+
+	/**
+	 * No-op for legacy search - legacy fields don't have collapsed/open properties.
+	 */
+	syncShowSearchFieldState(): void {
+		// Legacy search fields don't have collapsed/open properties to sync
+	}
+
+	/**
+	 * Determines if full-screen search should be shown.
+	 * Full-screen search activates when overflow happens AND search is visible.
+	 */
+	shouldShowFullScreen(): boolean {
+		return this.getOverflowed() && this.getSearchState();
+	}
+
+	/**
+	 * Get value from various field types.
+	 * Supports ui5-input (value property) and custom div (nested input element).
+	 */
+	private hasValue(searchField: HTMLElement | null): boolean {
+		if (!searchField) {
+			return false;
+		}
+
+		// ui5-input or similar components with value property
+		if ("value" in searchField) {
+			return !!(searchField as any).value;
+		}
+
+		// Custom div - find input inside
+		const input = searchField.querySelector("input");
+		return input ? !!input.value : false;
+	}
+
+	/**
+	 * Get minimum width needed for search field from CSS variable.
+	 */
+	private getSearchFieldWidth(): number {
+		const width = this.getCSSVariable(ShellBarSearchLegacy.CSS_VARIABLE);
+		if (!width) {
+			return ShellBarSearchLegacy.FALLBACK_WIDTH;
+		}
+
+		// Convert rem to px
+		if (width.endsWith("rem")) {
+			const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			return parseFloat(width) * fontSize;
+		}
+
+		return parseFloat(width);
+	}
+
+	private get hasSearchField(): boolean {
+		return !!this.getSearchField();
+	}
+
+	/**
+	 * Get search button size for overflow calculation.
+	 * Returns 0 if search is expanded, otherwise returns button width.
+	 */
+	private getSearchButtonSize(): number {
+		return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+	}
+}
+
+export default ShellBarSearchLegacy;
+export type {
+	ShellBarSearchLegacyConstructorParams,
+};
diff --git a/packages/fiori/src/shellbar/templates/ShellBarLegacyTemplate.tsx b/packages/fiori/src/shellbar/templates/ShellBarLegacyTemplate.tsx
new file mode 100644
index 000000000000..a5a48de23638
--- /dev/null
+++ b/packages/fiori/src/shellbar/templates/ShellBarLegacyTemplate.tsx
@@ -0,0 +1,190 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import type ShellBar from "../../ShellBar.js";
+
+function ShellBarLegacyBrandingArea(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy) {
+		return null;
+	}
+
+	return (
+		<>
+			{legacy.hasMenuItems && ShellBarInteractiveMenuButton.call(this)}
+			{legacy.hasMenuItems && ShellBarLegacySecondaryTitle.call(this)}
+			{!legacy.hasMenuItems && ShellBarLegacyTitleArea.call(this)}
+
+			{/* Menu Popover (legacy) */}
+			{ShellBarMenuPopover.call(this)}
+		</>
+	);
+}
+
+function ShellBarLegacyTitleArea(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy) {
+		return null;
+	}
+
+	return (
+		<>
+			{!!(legacy.isSBreakPoint && legacy.hasLogo) && ShellBarSingleLogo.call(this)}
+			{!legacy.isSBreakPoint && (legacy.hasLogo || legacy.primaryTitle) && (
+				<>
+					{ShellBarCombinedLogo.call(this)}
+					{legacy.hasSecondaryTitle && legacy.hasPrimaryTitle && ShellBarLegacySecondaryTitle.call(this)}
+				</>
+			)}
+		</>
+	);
+}
+
+/**
+ * Renders interactive menu button for non-S breakpoints.
+ * Shows primaryTitle with arrow, opens menu popover.
+ */
+function ShellBarInteractiveMenuButton(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy) {
+		return null;
+	}
+
+	return (
+		<>
+			{!legacy.showLogoInMenuButton && legacy.hasLogo && ShellBarSingleLogo.call(this)}
+			{legacy.showTitleInMenuButton && <h1 class="ui5-hidden-text">{legacy.primaryTitle}</h1>}
+			{legacy.showMenuButton && (
+				<button
+					class={{
+						"ui5-shellbar-menu-button": true,
+						"ui5-shellbar-menu-button--interactive": legacy.hasMenuItems,
+					}}
+					onClick={legacy.handleMenuButtonClickBound}
+					aria-haspopup="menu"
+					aria-expanded={legacy.menuPopoverExpanded}
+					aria-label={legacy.brandingText}
+					data-ui5-stable="menu"
+					tabIndex={0}>
+					{legacy.showLogoInMenuButton && (
+						<span class="ui5-shellbar-logo" aria-label={legacy.logoAriaLabel} title={legacy.logoAriaLabel}>
+							<slot name="logo"></slot>
+						</span>
+					)}
+					{legacy.showTitleInMenuButton && (
+						<div class="ui5-shellbar-menu-button-title">{legacy.primaryTitle}</div>
+					)}
+					<Icon class="ui5-shellbar-menu-button-arrow" name={slimArrowDown} />
+				</button>
+			)}
+		</>
+	);
+}
+
+/**
+ * Renders single logo on S breakpoint when no menu items.
+ * Used on S breakpoint when no menu items and no branding slot.
+ */
+function ShellBarSingleLogo(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy) {
+		return null;
+	}
+
+	return (
+		<span
+			role={legacy.logoRole}
+			class="ui5-shellbar-logo ui5-shellbar-gap-end"
+			aria-label={legacy.logoAriaLabel}
+			title={legacy.logoAriaLabel}
+			onClick={legacy.handleLogoClickBound}
+			onKeyDown={legacy.handleLogoKeydownBound}
+			onKeyUp={legacy.handleLogoKeyupBound}
+			tabIndex={0}
+			data-ui5-stable="logo">
+			<slot name="logo"></slot>
+		</span>
+	);
+}
+
+function ShellBarCombinedLogo(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy) {
+		return null;
+	}
+
+	return (
+		<div
+			role={legacy.logoRole}
+			class="ui5-shellbar-logo-area"
+			onClick={legacy.handleLogoClickBound}
+			tabIndex={0}
+			onKeyDown={legacy.handleLogoKeydownBound}
+			onKeyUp={legacy.handleLogoKeyupBound}
+			aria-label={legacy.logoAriaLabel}>
+			{legacy.hasLogo && (
+				<span
+					class="ui5-shellbar-logo"
+					title={legacy.logoAriaLabel}
+					data-ui5-stable="logo">
+					<slot name="logo"></slot>
+				</span>
+			)}
+			<div class="ui5-shellbar-headings">
+				{legacy.primaryTitle && (
+					<h1 class="ui5-shellbar-title">
+						<bdi>{legacy.primaryTitle}</bdi>
+					</h1>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function ShellBarLegacySecondaryTitle(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy || !legacy.showSecondaryTitle) {
+		return null;
+	}
+
+	return (
+		<div style={{ display: "block" }} class="ui5-shellbar-secondary-title ui5-shellbar-gap-start ui5-shellbar-gap-end" data-ui5-stable="secondary-title">
+			{this.secondaryTitle}
+		</div>
+	);
+}
+
+/**
+ * Renders the menu popover.
+ * Contains the list of menu items.
+ */
+function ShellBarMenuPopover(this: ShellBar) {
+	const legacy = this.legacyAdaptor;
+	if (!legacy || !legacy.hasMenuItems) {
+		return null;
+	}
+
+	return (
+		<Popover class="ui5-shellbar-menu-popover"
+			hideArrow={true}
+			placement="Bottom"
+			preventInitialFocus={true}
+			onBeforeOpen={legacy.handleMenuPopoverBeforeOpenBound}
+			onClose={legacy.handleMenuPopoverAfterCloseBound}
+		>
+			<List separators="None" selectionMode="Single" onItemClick={legacy.handleMenuItemClickBound}>
+				<slot name="menuItems"></slot>
+			</List>
+		</Popover>
+	);
+}
+
+export {
+	ShellBarSingleLogo,
+	ShellBarMenuPopover,
+	ShellBarLegacyTitleArea,
+	ShellBarLegacyBrandingArea,
+	ShellBarLegacySecondaryTitle,
+	ShellBarInteractiveMenuButton,
+};
diff --git a/packages/fiori/src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx b/packages/fiori/src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx
new file mode 100644
index 000000000000..ab27a656ec6c
--- /dev/null
+++ b/packages/fiori/src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx
@@ -0,0 +1,61 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type ShellBar from "../../ShellBar.js";
+
+function ShellBarSearchField(this: ShellBar) {
+	return (
+		// .ui5-shellbar-search-field-area is used to measure the width of
+		// the search field. It must be present even if the search is in full-width mode.
+		<div class="ui5-shellbar-search-field-area">
+			{this.showSearchField && !this.showFullWidthSearch && (
+				<div class="ui5-shellbar-search-field ui5-shellbar-gap-start">
+					<slot name="searchField"></slot>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function ShellBarSearchFieldFullWidth(this: ShellBar) {
+	return (
+		<div class="ui5-shellbar-search-full-width-wrapper">
+			<div class="ui5-shellbar-search-full-field">
+				<slot name="searchField"></slot>
+			</div>
+			<Button
+				class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
+				design={ButtonDesign.Transparent}
+				onClick={this.handleCancelButtonClick}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}
+
+function ShellBarSearchButton(this: ShellBar) {
+	const searchAction = this.getAction("search");
+	return (
+		<>
+			{!this.hideSearchButton && (
+				<Button
+					data-ui5-stable={searchAction?.stableDomRef}
+					class="ui5-shellbar-search-button ui5-shellbar-action-button ui5-shellbar-gap-start ui5-shellbar-search-toggle"
+					icon={searchAction?.icon}
+					design="Transparent"
+					onClick={this.handleSearchButtonClick}
+					tooltip={this.actionsAccessibilityInfo.search.title}
+					aria-expanded={this.showSearchField}
+					accessibilityAttributes={this.actionsAccessibilityInfo.search.accessibilityAttributes}
+				/>
+			)}
+		</>
+
+	);
+}
+
+export {
+	ShellBarSearchField,
+	ShellBarSearchButton,
+	ShellBarSearchFieldFullWidth,
+};
diff --git a/packages/fiori/src/shellbar/templates/ShellBarSearchTemplate.tsx b/packages/fiori/src/shellbar/templates/ShellBarSearchTemplate.tsx
new file mode 100644
index 000000000000..20018c142800
--- /dev/null
+++ b/packages/fiori/src/shellbar/templates/ShellBarSearchTemplate.tsx
@@ -0,0 +1,40 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type ShellBar from "../../ShellBar.js";
+
+function ShellBarSearchField(this: ShellBar) {
+	return (
+		// .ui5-shellbar-search-field-area is used to measure the width of
+		// the search field. It must be present even if the search is in full-width mode.
+		<div class={{
+			"ui5-shellbar-search-field-area ui5-shellbar-gap-start ui5-shellbar-search-toggle": true,
+			"ui5-shellbar-hidden": this.isHidden("search")
+		}}>
+			{!this.showFullWidthSearch && (
+				<slot name="searchField"></slot>
+			)}
+		</div>
+	);
+}
+
+function ShellBarSearchFieldFullWidth(this: ShellBar) {
+	return (
+		<div class="ui5-shellbar-search-full-width-wrapper">
+			<div class="ui5-shellbar-search-full-field">
+				<slot name="searchField"></slot>
+			</div>
+			<Button
+				class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
+				design={ButtonDesign.Transparent}
+				onClick={this.handleCancelButtonClick}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}
+
+export {
+	ShellBarSearchField,
+	ShellBarSearchFieldFullWidth,
+};
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index e5895ca3e25e..9641cef6fb39 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -86,6 +86,7 @@
 	transform: translateX(100%);
 }
 
+:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]),
 :host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
 	padding-inline: 0.875rem 1rem;
 }
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index dfbc68b745da..31b1e5e8324e 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -1,4 +1,9 @@
 @import "./InvisibleTextStyles.css";
+@import "./ShellBarSearchLegacy.css";
+
+/* ============================================================================
+   HOST & CSS VARIABLES
+   ============================================================================ */
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -6,376 +11,181 @@
 	max-width: 100%;
 	background: var(--sapShellColor);
 	box-sizing: border-box;
-}
 
-:host {
-	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
-}
-
-::slotted([ui5-input]) {
-	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
-	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
-	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
-	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
-	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
-	--_ui5_input_margin_top_bottom: 0;
-}
-
-::slotted([ui5-button]),
-[ui5-button],
-::slotted([ui5-toggle-button]),
-[ui5-toggle-button] {
-	/* Overwrite the default button styles to fulfill no "compact" mode of ui5-shellbar */
-	--_ui5_button_base_min_width: 2.25rem;
-	--_ui5_button_base_padding: 0.5625rem;
+	/* CSS variable overrides for ui5-button */
 	--_ui5_button_base_height: var(--sapElement_Height);
+	--_ui5_button_base_padding: 0.5625rem;
+	--_ui5_button_base_min_width: 2.25rem;
 	--_ui5-button-badge-diameter: 0.75rem;
+
+	/* ShellBar-specific variables */
+	--_ui5-shellbar_separator-color: var(--sapGroup_ContentBorderColor);
+	--_ui5-shellbar-separator-height: 2rem;
+	--_ui5_shellbar_search_field_width: 25rem;
+
+	--ui5_shellbar_gap: 0.5rem;
 }
 
+/* ============================================================================
+   ROOT CONTAINER
+   ============================================================================ */
+
 .ui5-shellbar-root {
-	position: relative;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
 	height: var(--_ui5_shellbar_root_height);
-	font-family: var(--sapFontFamily);
+	box-shadow: inset 0 -0.0625rem var(--sapShell_BorderColor);
+	position: relative;
 	font-size: var(--sapFontSize);
 	font-weight: normal;
-	box-sizing: border-box;
 }
 
-.ui5-shellbar-menu-button,
-.ui5-shellbar-button,
-.ui5-shellbar-image-button,
-::slotted([ui5-toggle-button]:not([slot^="content"])),
-::slotted([ui5-button]:not([slot^="content"])) {
+/* ============================================================================
+   SLOTTED BUTTONS (General Styles) Assistant and Start Button slots
+   ============================================================================ */
+
+::slotted([ui5-button]:not([slot^="content"])),
+::slotted([ui5-toggle-button]:not([slot^="content"])) {
 	height: 2.25rem;
+	width: 2.25rem;
 	padding: 0;
-	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
 	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
 	background: var(--sapButton_Lite_Background);
-	outline-color: var(--_ui5_shellbar_logo_outline_color);
 	color: var(--sapShell_TextColor);
 	box-sizing: border-box;
 	cursor: pointer;
 	border-radius: var(--_ui5_shellbar_button_border_radius);
-	position: relative;
 	font-weight: bold;
-	white-space: initial;
-	overflow: initial;
-	text-overflow: initial;
-	line-height: inherit;
-	letter-spacing: inherit;
-	word-spacing: inherit;
-}
-
-::slotted([ui5-toggle-button][slot="assistant"]) {
-	margin-inline-start: 0;
-}
-
-.ui5-shellbar-assistant-button {
-	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
 }
 
-::slotted([ui5-button][slot="startButton"]) {
-	margin-inline-start: 0;
-}
-
-::slotted([ui5-toggle-button]:hover),
-::slotted([ui5-button]:hover),
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
-.ui5-shellbar-button:hover,
-.ui5-shellbar-image-button:hover,
-::slotted([ui5-button][slot="midContent"]:hover) {
+/* Button States - Hover */
+::slotted([ui5-button]:not([slot^="content"]):hover),
+::slotted([ui5-toggle-button]:not([slot^="content"]):hover) {
 	background: var(--sapShell_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
 	color: var(--sapShell_TextColor);
 }
 
-::slotted([ui5-toggle-button][slot="assistant"][pressed]),
-::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
-	color: var(--sapShell_Assistant_ForegroundColor);
-}
-
-::slotted([ui5-toggle-button][active]),
-::slotted([ui5-button][active]),
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
-.ui5-shellbar-button[active],
-.ui5-shellbar-image-button:active {
+/* Button States - Active */
+::slotted([ui5-button]:not([slot^="content"])[active]),
+::slotted([ui5-toggle-button]:not([slot^="content"])[active]) {
 	background: var(--sapShell_Active_Background);
 	border-color: var(--sapButton_Lite_Active_BorderColor);
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
-:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
-	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_outline_offset);
+/* Button States - Focus */
+::slotted([ui5-button]:not([slot^="content"])),
+::slotted([ui5-toggle-button]:not([slot^="content"])) {
+	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
 }
 
-slot[name="profile"] {
-	min-width: 0;
-}
+/* ============================================================================
+   ACTION BUTTONS (Items & Internal Actions)
+   ============================================================================ */
 
-::slotted([ui5-avatar][slot="profile"]) {
-	display: block;
-	width: 2rem;
-	height: 2rem;
-	min-width: 0;
-	min-height: 2rem;
-	font-size: var(--_ui5_avatar_fontsize_XS);
-	font-weight: normal;
+.ui5-shellbar-action-button {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
-	border: none;
+.ui5-shellbar-action-button:hover {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-menu-button-arrow,
-.ui5-shellbar-menu-button-title,
-.ui5-shellbar-title {
-	display: inline-block;
-	font-family: var(--sapFontSemiboldDuplexFamily);
-	margin: 0;
-	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: var(--sapShell_SubBrand_TextColor);
+.ui5-shellbar-action-button[active] {
+	color: var(--_ui5_shellbar_button_active_color);
 }
 
-:host(:not([primary-title])) .ui5-shellbar-menu-button {
-	min-width: 2.25rem;
-	justify-content: center;
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	color: var(--sapShell_TextColor);
 }
 
-.ui5-shellbar-secondary-title {
-	display: inline-block;
-	font-size: var(--sapFontSmallSize);
+::slotted([ui5-toggle-button][slot="assistant"]:hover) {
 	color: var(--sapShell_TextColor);
-	font-weight: normal;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	margin: 0;
-	text-align: start;
 }
 
-.ui5-shellbar-headings {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 100%;
-	overflow: hidden;
-	margin-inline-start: 0.25rem;
+::slotted([ui5-toggle-button][slot="assistant"][active]) {
+	color: var(--_ui5_shellbar_button_active_color);
 }
 
-.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	margin-inline-start: 0.375rem;
-}
+/* ============================================================================
+   START AREA (Start Button, Branding)
+   ============================================================================ */
 
-.ui5-shellbar-overflow-container {
+.ui5-shellbar-start-button {
+	flex-shrink: 0;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	height: 100%;
-	overflow: hidden;
 }
 
-.ui5-shellbar-overflow-container-middle {
-	align-self: flex-start;
-	height: var(--_ui5_shellbar_overflow_container_middle_height);
-	width: 0;
+.ui5-shellbar-branding-area {
 	flex-shrink: 0;
-}
-
-.ui5-shellbar-mid-content {
-	height: var(--_ui5_shellbar_overflow_container_middle_height);
-}
-
-
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
-	margin-inline-start: 0;
-}
-
-:host([breakpoint-size="S"]) {
-	padding: 0 1rem;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0 1rem;
-}
-
-:host([breakpoint-size="M"]) {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="L"]) {
-	padding: 0 2rem;
-}
-
-:host([breakpoint-size="XL"]) {
-	padding: 0 3rem;
-}
-
-:host([breakpoint-size="XXL"]) {
-	padding: 0 3rem;
-}
-
-.ui5-shellbar-logo {
-	overflow: hidden;
-	cursor: pointer;
-}
-
-.ui5-shellbar-logo-area {
-	overflow: hidden;
 	display: flex;
 	align-items: center;
-	padding: .25rem .5rem .25rem .25rem;
-	box-sizing: border-box;
-	cursor: pointer;
-	background: var(--sapButton_Lite_Background);
-	border: 1px solid var(--sapButton_Lite_BorderColor);
-	color: var(--sapShell_TextColor);
-	/* fix cutting of the focus outline */
-	margin-inline-start: 0.125rem;
-}
-
-.ui5-shellbar-logo:focus,
-.ui5-shellbar-logo-area:focus {
-	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-	border-radius: var(--_ui5_shellbar_logo_border_radius);
-}
-
-.ui5-shellbar-overflow-container>.ui5-shellbar-logo:hover,
-.ui5-shellbar-logo-area:hover {
-	box-shadow: var(--_ui5_shellbar_button_box_shadow);
-	border-radius: var(--_ui5_shellbar_logo_border_radius);
-}
-
-.ui5-shellbar-logo-area:active:focus {
-	background: var(--sapShell_Active_Background);
-	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
-	color: var(--sapShell_Active_TextColor);
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
-	box-shadow: var(--_ui5_shellbar_button_box_shadow);
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
-	box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
 }
 
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
-	color: var(--sapShell_Active_TextColor);
-}
-
-.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
-	box-shadow: none;
-}
-
-.ui5-shellbar-button {
-	width: 2.5rem;
-	box-sizing: border-box;
-}
-
-.ui5-shellbar-button,
-::slotted([ui5-button][slot="startButton"]) {
-	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
-}
+/* ============================================================================
+   OVERFLOW CONTAINER
+   ============================================================================ */
 
-.ui5-shellbar-cancel-button {
-	color: var(--_ui5-shellbar_cancel-button-color);
-}
-
-.ui5-shellbar-cancel-button:hover {
-	color: var(--_ui5-shellbar_cancel-button-color);
-}
-
-.ui5-shellbar-image-button {
+.ui5-shellbar-overflow-container {
+	/* makes the container grow on the left side thus preventing search from flickering */
+	flex-direction: row-reverse;
+	height: 100%;
+	flex: 1;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	min-width: auto;
-	height: 2.5rem;
-	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
-	border-radius: var(--_ui5_shellbar_image_button_border_radius);
+	min-width: 0;
+	overflow: hidden;
+	position: relative;
 }
 
-.ui5-shellbar-overflow-container-left {
-	padding: 0;
-	justify-content: flex-start;
-	max-width: 75%;
+.ui5-shellbar-overflow-container-inner {
+	display: flex;
+	align-items: center;
+	justify-content: end;
 	flex-shrink: 0;
+	min-width: 100%;
 }
 
-.ui5-shellbar-overflow-container-left> :nth-child(n) {
-	margin-inline-end: 0.5rem;
-}
-
-/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
-	flex-basis: 50%;
-	max-width: calc(50% - 18.25rem);
-} */
+/* ============================================================================
+   SEARCH AREA
+   ============================================================================ */
 
-.ui5-shellbar-menu-button {
-	white-space: nowrap;
-	overflow: hidden;
+.ui5-shellbar-search-field-area {
+	flex: 0 1 auto;
+	min-width: 0;
 	display: flex;
 	align-items: center;
-	padding: 0.25rem 0.5rem;
-	cursor: text;
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	user-select: text;
-}
-
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	cursor: pointer;
-	background: var(--sapButton_Lite_Background);
-	border: var(--_ui5_shellbar_button_border);
-	color: var(--sapShell_TextColor);
+	margin-left: auto;
+	/* goes to the most right when no content is present */
+}
+
+/* this width is only applied when not in full screen mode as 
+in full screen the search fills the available space */
+:host([show-search-field]:not([show-full-width-search])) ::slotted([slot="searchField"]),
+/* Search field displays in full mode if there's not enough space in bar.
+Once in full screen mode the search field is rendered in another DOM. 
+To account for correct measurements in overflow, we should keep the min width 
+of the search field container in the bar even when the search is in full mode. */
+:host([show-full-width-search]) .ui5-shellbar-search-field-area {
+	min-width: var(--_ui5_shellbar_search_field_width);
 }
 
-:host(:not([with-logo])) .ui5-shellbar-menu-button {
-	margin-inline-start: 0;
-}
+/* ============================================================================
+   CONTENT AREA (Items, Spacer, Separator)
+   ============================================================================ */
 
-.ui5-shellbar-overflow-container-right {
+.ui5-shellbar-content-area {
 	flex-grow: 1;
-	justify-content: flex-end;
-}
-
-.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
-	justify-content: flex-end;
-	height: inherit;
 	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-right-inner {
-	display: flex;
-	flex-grow: 1;
-}
-
-.ui5-shellbar-content-items {
+.ui5-shellbar-content-item {
+	flex-shrink: 0;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	flex-grow: 1;
-	/* max-content prevents the container from overflowing
-	which is needed for the responsive logic */
-	min-width: max-content;
 }
 
 .ui5-shellbar-spacer {
@@ -393,55 +203,82 @@ slot[name="profile"] {
 	background-color: var(--_ui5-shellbar_separator-color);
 }
 
-.ui5-shellbar-separator-end {
-	margin-inline-start: 0.5rem;
+/* ============================================================================
+   CUSTOM ITEMS
+   ============================================================================ */
+
+.ui5-shellbar-custom-item {
+	/* having width here is important to ensure item can be measured even when it is in overflow */
+	width: 2.25rem;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 0;
+.ui5-shellbar-custom-item.ui5-shellbar-hidden {
+	display: none;
 }
 
-::slotted([hidden]) {
-	visibility: hidden;
-	order: -1;
-	position: absolute;
+
+/* ============================================================================
+   ACTION BUTTONS (Notifications, Assistant, Profile)
+   ============================================================================ */
+
+.ui5-shellbar-action-button {
+	white-space: initial;
+	overflow: initial;
+	text-overflow: initial;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	width: 2.25rem;
+	height: 2.25rem;
+	box-sizing: border-box;
 }
 
-.ui5-shellbar-content-item {
+.ui5-shellbar-image-button {
 	display: flex;
+	justify-content: center;
 	align-items: center;
-	flex-shrink: 0;
-	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
+	width: 2.25rem;
+	height: 2.25rem;
+	min-width: auto;
+	box-sizing: border-box;
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
+	border-radius: var(--_ui5_shellbar_image_button_border_radius);
 }
 
-.ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] {
-	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+.ui5-shellbar-assistant-button {
+	display: flex;
+	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] {
-	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	margin-inline-start: 0;
 }
 
-.ui5-shellbar-menu-button {
-	margin-inline-start: 0.5rem;
+::slotted([ui5-toggle-button][slot="assistant"][pressed]),
+::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
+	color: var(--sapShell_Assistant_ForegroundColor);
 }
 
-.ui5-shellbar-search-field {
-	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
-	min-width: var(--_ui5_shellbar_search_field_width);
-	align-items: center;
-	flex-grow: 1;
-	margin-inline-start: 0.5rem;
+slot[name="profile"] {
+	min-width: 0;
 }
 
-.ui5-shellbar-overflow-container-right-child> :first-child {
-	margin-inline-start: 0;
+::slotted([ui5-avatar][slot="profile"]) {
+	display: block;
+	width: 2rem;
+	height: 2rem;
+	min-width: 0;
+	min-height: 2rem;
+	font-size: var(--_ui5_avatar_fontsize_XS);
+	font-weight: normal;
 }
 
-.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
-	height: 2.25rem;
-	width: 100%;
-}
+/* ============================================================================
+   FULL-SCREEN SEARCH OVERLAY
+   ============================================================================ */
 
 .ui5-shellbar-search-full-width-wrapper {
 	position: absolute;
@@ -454,85 +291,66 @@ slot[name="profile"] {
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
+	padding: 0 1rem;
 }
 
-.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
-	width: auto;
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
+	height: 2.25rem;
+	width: 100%;
+	flex: 1;
 }
 
 .ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
 	max-width: unset;
-}
-
-::slotted([ui5-input]) {
-	background: var(--_ui5_shellbar_search_field_background);
-	border: var(--_ui5_shellbar_search_field_border);
-	box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
-	color: var(--_ui5_shellbar_search_field_color);
-	height: 2.25rem;
 	width: 100%;
-	min-width: var(--_ui5_shellbar_search_field_width);
 }
 
-:host([breakpoint-size="M"]) ::slotted([ui5-input]),
-:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
-	min-width: 1rem;
-}
+/* ============================================================================
+   BREAKPOINTS
+   ============================================================================ */
 
-:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
-	flex-grow: 1;
+/* Responsive padding per breakpoint */
+:host([breakpoint-size="S"]) {
+	padding: 0 1rem;
 }
 
-::slotted([ui5-input]:hover) {
-	background: var(--_ui5_shellbar_search_field_background_hover);
-	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+:host([breakpoint-size="M"]) {
+	padding: 0 2rem;
 }
 
-::slotted([ui5-input][focused]) {
-	outline: var(--_ui5_shellbar_search_field_outline_focused);
+:host([breakpoint-size="L"]) {
+	padding: 0 2rem;
 }
 
-::slotted([slot="logo"]) {
-	max-height: 2rem;
-	vertical-align: middle;
+:host([breakpoint-size="XL"]) {
+	padding: 0 3rem;
 }
 
-::slotted([slot="logo"]):active {
-	pointer-events: none;
+:host([breakpoint-size="XXL"]) {
+	padding: 0 3rem;
 }
 
-.ui5-shellbar-co-pilot-placeholder {
-	width: 2.75rem;
-	height: 2.75rem;
+/* Search overlay padding per breakpoint */
+:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0 1rem;
 }
 
-.ui5-shellbar-coPilot-pressed,
-.ui5-shellbar-coPilot-pressed:hover {
-	color: var(--sapShell_Assistant_ForegroundColor);
+:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0 2rem;
 }
 
-::slotted([ui5-button][slot="startButton"]) {
-	margin-inline: 0 0.5rem;
-	justify-content: center;
-	align-items: center;
+/* ============================================================================
+   Utilities (Keep these at the end of the file to avoid specificity issues)
+   ============================================================================ */
+
+.ui5-shellbar-gap-start {
+	margin-inline-start: var(--ui5_shellbar_gap);
 }
 
-::slotted([ui5-button][data-profile-btn]) {
-	width: auto;
+.ui5-shellbar-gap-end {
+	margin-inline-end: var(--ui5_shellbar_gap);
 }
 
-/* if class contains ui5-shellbar-hidden-button */
-::slotted(.ui5-shellbar-hidden-button),
-.ui5-shellbar-hidden-button,
-.ui5-shellbar-invisible-button {
-	visibility: hidden;
-	order: -1;
-	opacity: 0;
-	min-width: 0;
-	width: 0;
-	margin: 0;
-	padding: 0;
-	padding-inline-start: 0;
-	border: 0;
-	margin-inline-start: 0;
+.ui5-shellbar-hidden {
+	display: none !important;
 }
\ No newline at end of file
diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css
new file mode 100644
index 000000000000..7d76bf88c0d9
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarItem.css
@@ -0,0 +1,43 @@
+/* ============================================================================
+   ACTION BUTTON STYLING
+   ============================================================================ */
+
+.ui5-shellbar-action-button {
+	width: 2.25rem;
+	height: 2.25rem;
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button:hover {
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button[active] {
+	color: var(--_ui5_shellbar_button_active_color);
+}
+
+[ui5-li]:after {
+	position: relative;
+	width: fit-content;
+	height: 1rem;
+	min-width: 1rem;
+	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
+	color: var(--sapContent_BadgeTextColor);
+	bottom: calc(100% + 0.0625rem);
+	left: 1.25rem;
+	padding: 0 0.3125rem;
+	border-radius: 0.5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontSmallSize);
+	font-family: var(--sapFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+[ui5-li][data-count]:after {
+	content: attr(data-count);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/ShellBarLegacy.css b/packages/fiori/src/themes/ShellBarLegacy.css
new file mode 100644
index 000000000000..5445e9003e76
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarLegacy.css
@@ -0,0 +1,174 @@
+/* Legacy Features CSS - Logo, Titles, Menu */
+
+/* Logo */
+.ui5-shellbar-logo {
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.ui5-shellbar-logo-area,
+.ui5-shellbar-legacy-branding {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: .25rem .5rem .25rem .25rem;
+	box-sizing: border-box;
+	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
+	border: 1px solid var(--sapButton_Lite_BorderColor);
+	color: var(--sapShell_TextColor);
+	margin-inline-start: 0.125rem;
+}
+
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
+.ui5-shellbar-logo-area:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-logo-area:active:focus {
+	background: var(--sapShell_Active_Background);
+	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
+	color: var(--sapShell_Active_TextColor);
+}
+
+::slotted([slot="logo"]) {
+	max-height: 2rem;
+}
+
+::slotted([slot="logo"]):active {
+	pointer-events: none;
+}
+
+/* Title Area */
+.ui5-shellbar-headings {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	overflow: hidden;
+	margin-inline-start: 0.25rem;
+}
+
+.ui5-shellbar-primary-title,
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
+	display: inline-block;
+	font-family: var(--sapFontSemiboldDuplexFamily);
+	margin: 0;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-secondary-title {
+	display: inline-block;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapShell_TextColor);
+	font-weight: normal;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-align: start;
+}
+
+/* Menu Button */
+.ui5-shellbar-menu-button {
+	white-space: nowrap;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 0.25rem 0.5rem;
+	cursor: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+	margin-inline-start: 0.5rem;
+	height: 2.25rem;
+	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+	background: var(--sapButton_Lite_Background);
+	outline-color: var(--_ui5_shellbar_logo_outline_color);
+	color: var(--sapShell_TextColor);
+	box-sizing: border-box;
+	border-radius: var(--_ui5_shellbar_button_border_radius);
+	position: relative;
+	font-weight: bold;
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
+	border: var(--_ui5_shellbar_button_border);
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_TextColor);
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
+	background: var(--sapShell_Active_Background);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
+	color: var(--_ui5_shellbar_button_active_color);
+	box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
+	color: var(--sapShell_Active_TextColor);
+}
+
+:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: var(--_ui5_shellbar_outline_offset);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
+	border: none;
+}
+
+.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
+	box-shadow: none;
+}
+
+.ui5-shellbar-menu-button-arrow {
+	display: inline-block;
+	font-family: var(--sapFontSemiboldDuplexFamily);
+	margin: 0;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+	color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
+	margin-inline-start: 0.375rem;
+}
+
+:host(:not([primary-title])) .ui5-shellbar-menu-button {
+	min-width: 2.25rem;
+	justify-content: center;
+}
+
+:host(:not([with-logo])) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
+}
+
diff --git a/packages/fiori/src/themes/ShellBarSearchLegacy.css b/packages/fiori/src/themes/ShellBarSearchLegacy.css
new file mode 100644
index 000000000000..8504c97adc90
--- /dev/null
+++ b/packages/fiori/src/themes/ShellBarSearchLegacy.css
@@ -0,0 +1,44 @@
+/* Legacy Search Styles - ONLY for ui5-input and custom div search fields */
+
+/* CSS variable overrides for ui5-input component */
+::slotted([ui5-input]) {
+	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
+	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
+	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
+	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
+	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
+	--_ui5_input_margin_top_bottom: 0;
+}
+
+/* ui5-input specific styles */
+::slotted([ui5-input]) {
+	background: var(--_ui5_shellbar_search_field_background);
+	border: var(--_ui5_shellbar_search_field_border);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
+	color: var(--_ui5_shellbar_search_field_color);
+	height: 2.25rem;
+	width: 100%;
+	min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+/* ui5-input breakpoint adjustments */
+:host([breakpoint-size="M"]) ::slotted([ui5-input]),
+:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
+	min-width: 1rem;
+}
+
+:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
+	flex-grow: 1;
+}
+
+/* ui5-input hover */
+::slotted([ui5-input]:hover) {
+	background: var(--_ui5_shellbar_search_field_background_hover);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
+/* ui5-input focus */
+::slotted([ui5-input][focused]) {
+	outline: var(--_ui5_shellbar_search_field_outline_focused);
+}
+
diff --git a/packages/fiori/test/pages/ShellBar_Features.html b/packages/fiori/test/pages/ShellBar_Features.html
new file mode 100644
index 000000000000..61e5a4d952e8
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBar_Features.html
@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>ShellBar Feature Toggle</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<style>
+		body {
+			font-family: "72", "72full", Arial, Helvetica, sans-serif;
+			margin: 0;
+			padding: 0;
+			background: var(--sapBackgroundColor);
+		}
+
+		.controls {
+			position: sticky;
+			top: 0;
+			z-index: 1000;
+			padding: 1rem;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1rem;
+			align-items: center;
+		}
+
+		.control-group {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+		}
+
+		.control-section {
+			width: 100%;
+			padding: 0.5rem;
+			border-top: 2px solid #e0e0e0;
+		}
+
+		.control-section h3 {
+			margin: 0.5rem 0;
+			font-size: 0.9rem;
+			color: #354a5f;
+			text-transform: uppercase;
+		}
+
+		.shellbar-container {
+			margin: 2rem 0;
+			background: white;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		}
+
+		h1 {
+			text-align: center;
+			padding: 2rem;
+			margin: 0;
+			background: #354a5f;
+			color: white;
+		}
+
+		.info {
+			padding: 1rem;
+			background: #fef7e4;
+			border-left: 4px solid #e9730c;
+			margin: 1rem;
+		}
+
+		.spacer {
+			height: 2rem;
+		}
+	</style>
+</head>
+<body>
+	<h1>ShellBar Feature Toggle</h1>
+
+	<div class="controls">
+		<!-- Theme Selection -->
+		<div class="control-group">
+			<ui5-label>Theme:</ui5-label>
+			<ui5-select id="themeSelect" style="width: 250px;">
+				<ui5-option value="sap_horizon" selected>Horizon (Morning)</ui5-option>
+				<ui5-option value="sap_horizon_dark">Horizon Dark (Evening)</ui5-option>
+				<ui5-option value="sap_horizon_hcb">Horizon High Contrast Black</ui5-option>
+				<ui5-option value="sap_horizon_hcw">Horizon High Contrast White</ui5-option>
+				<ui5-option value="sap_fiori_3">Fiori 3 (Quartz Light)</ui5-option>
+				<ui5-option value="sap_fiori_3_dark">Fiori 3 Dark (Quartz Dark)</ui5-option>
+				<ui5-option value="sap_fiori_3_hcb">Fiori 3 High Contrast Black</ui5-option>
+				<ui5-option value="sap_fiori_3_hcw">Fiori 3 High Contrast White</ui5-option>
+			</ui5-select>
+		</div>
+
+		<!-- Basic Features -->
+		<div class="control-group">
+			<ui5-label>Notifications:</ui5-label>
+			<ui5-switch id="toggleNotifications"></ui5-switch>
+		</div>
+
+		<div class="control-group">
+			<ui5-label>Product Switch:</ui5-label>
+			<ui5-switch id="toggleProductSwitch"></ui5-switch>
+		</div>
+
+		<div class="control-group">
+			<ui5-label>Profile:</ui5-label>
+			<ui5-switch id="toggleProfile" checked></ui5-switch>
+		</div>
+
+		<div class="control-group">
+			<ui5-label>Assistant:</ui5-label>
+			<ui5-switch id="toggleAssistant"></ui5-switch>
+		</div>
+
+		<div class="control-group">
+			<ui5-label>Start Button:</ui5-label>
+			<ui5-switch id="toggleStartButton"></ui5-switch>
+		</div>
+
+		<div class="control-group">
+			<ui5-label>Notifications Count:</ui5-label>
+			<ui5-input id="notificationsCount" value="" placeholder="e.g. 5, 99+"></ui5-input>
+		</div>
+
+		<!-- Search Features -->
+		<div class="control-section">
+			<ui5-title>Search</ui5-title>
+			<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+				<div class="control-group">
+					<ui5-label>Search Field:</ui5-label>
+					<ui5-switch id="toggleSearchField"></ui5-switch>
+				</div>
+				<div class="control-group">
+					<ui5-label>Search Type:</ui5-label>
+					<ui5-select id="searchType" style="width: 200px;">
+						<ui5-option value="input" selected>ui5-input</ui5-option>
+						<ui5-option value="shellbar-search">ui5-shellbar-search</ui5-option>
+					</ui5-select>
+				</div>
+			</div>
+		</div>
+
+		<!-- Content Features -->
+		<div class="control-section">
+			<ui5-title>Content Items (Overflow Test)</ui5-title>
+			<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+				<div class="control-group">
+					<ui5-label>Content Items:</ui5-label>
+					<ui5-switch id="toggleContent" checked></ui5-switch>
+				</div>
+				<div class="control-group">
+					<ui5-label>Show Spacer:</ui5-label>
+					<ui5-switch id="toggleSpacer"></ui5-switch>
+				</div>
+			</div>
+		</div>
+
+		<!-- Custom Items Features -->
+		<div class="control-section">
+			<ui5-title>Custom Items</ui5-title>
+			<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+				<div class="control-group">
+					<ui5-label>Custom Items:</ui5-label>
+					<ui5-switch id="toggleItems" checked></ui5-switch>
+				</div>
+				<div class="control-group">
+					<ui5-label>More Items:</ui5-label>
+					<ui5-switch id="toggleMoreItems"></ui5-switch>
+				</div>
+			</div>
+		</div>
+
+		<!-- Branding Mode -->
+		<div class="control-section">
+			<ui5-title>Branding</ui5-title>
+			<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+				<div class="control-group">
+					<ui5-label>Branding Mode:</ui5-label>
+					<ui5-select id="brandingMode" style="width: 250px;">
+						<ui5-option value="branding" selected>Branding Slot (New)</ui5-option>
+						<ui5-option value="legacy">Logo + Primary Title (Legacy)</ui5-option>
+					</ui5-select>
+				</div>
+				<div class="control-group">
+					<ui5-label>Show Secondary Title:</ui5-label>
+					<ui5-switch id="toggleSecondaryTitle" checked></ui5-switch>
+				</div>
+				<div class="control-group">
+					<ui5-label>Menu Items:</ui5-label>
+					<ui5-switch id="toggleMenuItems" disabled></ui5-switch>
+					<span style="font-size: 0.8rem; color: #666;">(requires Legacy mode)</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="info">
+		<strong>How to use:</strong> Toggle switches to enable/disable features.
+		<br><strong>Tip:</strong> Resize window to test overflow behavior with content items. Check console for event logs.
+		<br><strong>Themes:</strong> Switch between all 8 available themes (Horizon and Fiori 3 families, including dark and high contrast variants).
+		<br><strong>Branding Mode:</strong> Switch between new Branding Slot and legacy Logo + Primary Title modes. Menu items only available in legacy mode.
+	</div>
+
+	<!-- ShellBar -->
+	<div class="shellbar-container">
+		<ui5-shellbar
+			id="shellbar"
+			secondary-title="Secondary Title"
+		>
+			<ui5-shellbar-branding slot="branding">
+				Product Title
+				<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+			</ui5-shellbar-branding>
+
+			<!-- Content Items -->
+			<ui5-button slot="content" id="content-1">Action 1</ui5-button>
+			<ui5-tag slot="content" color-scheme="7" id="content-2">Tag</ui5-tag>
+			<ui5-button slot="content" id="content-3">Action 3</ui5-button>
+			<ui5-button slot="content" id="content-4">End 1</ui5-button>
+			<ui5-button slot="content" id="content-5">End 2</ui5-button>
+
+			<ui5-avatar slot="profile" id="profile">
+				<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+			</ui5-avatar>
+
+			<!-- Custom Items -->
+			<ui5-shellbar-item icon="activities" text="Tasks" id="item-1"></ui5-shellbar-item>
+			<ui5-shellbar-item icon="sys-help" text="Help" id="item-2"></ui5-shellbar-item>
+		</ui5-shellbar>
+	</div>
+
+	<div class="spacer"></div>
+
+	<script>
+		const shellbar = document.getElementById('shellbar');
+
+		const themeSelect = document.getElementById('themeSelect');
+		const toggleNotifications = document.getElementById('toggleNotifications');
+		const toggleProductSwitch = document.getElementById('toggleProductSwitch');
+		const toggleSearchField = document.getElementById('toggleSearchField');
+		const toggleProfile = document.getElementById('toggleProfile');
+		const toggleAssistant = document.getElementById('toggleAssistant');
+		const toggleItems = document.getElementById('toggleItems');
+		const toggleMoreItems = document.getElementById('toggleMoreItems');
+		const toggleStartButton = document.getElementById('toggleStartButton');
+		const toggleContent = document.getElementById('toggleContent');
+		const toggleSpacer = document.getElementById('toggleSpacer');
+		const toggleSecondaryTitle = document.getElementById('toggleSecondaryTitle');
+		const toggleMenuItems = document.getElementById('toggleMenuItems');
+		const searchType = document.getElementById('searchType');
+		const notificationsCount = document.getElementById('notificationsCount');
+		const brandingMode = document.getElementById('brandingMode');
+
+		// Theme selector
+		themeSelect.addEventListener('ui5-change', (e) => {
+			const theme = e.detail.selectedOption.value;
+			console.log('Theme changed to:', theme);
+			const Conf = window["sap-ui-webcomponents-bundle"].configuration;
+			Conf.setTheme(theme);
+		});
+
+		// Element templates for dynamic creation
+		const elementTemplates = {
+			startButton: () => {
+				const el = document.createElement('ui5-button');
+				el.id = 'startButton';
+				el.icon = 'nav-back';
+				el.slot = 'startButton';
+				return el;
+			},
+			assistant: () => {
+				const el = document.createElement('ui5-toggle-button');
+				el.id = 'assistant';
+				el.icon = 'sap-icon://da';
+				el.slot = 'assistant';
+				return el;
+			},
+			searchField: () => {
+				const el = document.createElement('ui5-input');
+				el.id = 'searchField';
+				el.placeholder = 'Search';
+				el.slot = 'searchField';
+				return el;
+			},
+			spacer: () => {
+				const el = document.createElement('ui5-shellbar-spacer');
+				el.id = 'spacer';
+				el.slot = 'content';
+				return el;
+			},
+			item3: () => {
+				const el = document.createElement('ui5-shellbar-item');
+				el.id = 'item-3';
+				el.icon = 'action-settings';
+				el.text = 'Settings';
+				el.count = '3';
+				return el;
+			},
+			item4: () => {
+				const el = document.createElement('ui5-shellbar-item');
+				el.id = 'item-4';
+				el.icon = 'feedback';
+				el.text = 'Feedback';
+				return el;
+			},
+			menuItem1: () => {
+				const el = document.createElement('ui5-li');
+				el.id = 'menuItem-1';
+				el.slot = 'menuItems';
+				el.textContent = 'Dashboard';
+				return el;
+			},
+			menuItem2: () => {
+				const el = document.createElement('ui5-li');
+				el.id = 'menuItem-2';
+				el.slot = 'menuItems';
+				el.textContent = 'Reports';
+				return el;
+			},
+			menuItem3: () => {
+				const el = document.createElement('ui5-li');
+				el.id = 'menuItem-3';
+				el.slot = 'menuItems';
+				el.textContent = 'Settings';
+				return el;
+			},
+			logo: () => {
+				const el = document.createElement('img');
+				el.id = 'logo';
+				el.src = 'https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg';
+				el.slot = 'logo';
+				return el;
+			}
+		};
+
+		// Helper to toggle element in/out of DOM
+		const elementCache = new Map();
+
+		function toggleElement(id, show) {
+			let el = document.getElementById(id);
+
+			if (show) {
+				if (!el) {
+					// Check if we have a cached element first
+					if (elementCache.has(id)) {
+						const cache = elementCache.get(id);
+						const { parent, nextSibling, element } = cache;
+						if (nextSibling && nextSibling.parentNode === parent) {
+							parent.insertBefore(element, nextSibling);
+						} else {
+							parent.appendChild(element);
+						}
+					} else {
+						// Create element from template
+						const templateKey = id.replace(/-/g, '');
+						if (elementTemplates[templateKey]) {
+							el = elementTemplates[templateKey]();
+
+							// Special handling for spacer: insert after content-3 to split start/end groups
+							if (id === 'spacer') {
+								const insertAfter = document.getElementById('content-3');
+								if (insertAfter && insertAfter.nextSibling) {
+									shellbar.insertBefore(el, insertAfter.nextSibling);
+								} else {
+									shellbar.appendChild(el);
+								}
+							} else {
+								shellbar.appendChild(el);
+							}
+						}
+					}
+				}
+			} else {
+				if (el) {
+					elementCache.set(id, {
+						parent: el.parentNode,
+						nextSibling: el.nextSibling,
+						element: el
+					});
+					el.remove();
+				}
+			}
+		}
+
+		// Notifications toggle
+		toggleNotifications.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			shellbar.showNotifications = checked;
+			console.log('Notifications:', checked);
+		});
+
+		// Product Switch toggle
+		toggleProductSwitch.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			shellbar.showProductSwitch = checked;
+			console.log('Product Switch:', checked);
+		});
+
+		// Search Field toggle
+		toggleSearchField.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			shellbar.showSearchField = checked;
+			toggleElement('searchField', checked);
+			console.log('Search Field:', checked);
+		});
+
+		// Profile toggle
+		toggleProfile.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('profile', checked);
+			console.log('Profile:', checked);
+		});
+
+		// Assistant toggle
+		toggleAssistant.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('assistant', checked);
+			console.log('Assistant:', checked);
+		});
+
+		// Custom Items toggle
+		toggleItems.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('item-1', checked);
+			toggleElement('item-2', checked);
+			console.log('Custom Items:', checked);
+		});
+
+		// More Items toggle
+		toggleMoreItems.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('item-3', checked);
+			toggleElement('item-4', checked);
+			console.log('More Items:', checked);
+		});
+
+		// Start Button toggle
+		toggleStartButton.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('startButton', checked);
+			console.log('Start Button:', checked);
+		});
+
+		// Content Items toggle
+		toggleContent.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			for (let i = 1; i <= 5; i++) {
+				toggleElement(`content-${i}`, checked);
+			}
+			console.log('Content Items:', checked);
+		});
+
+		// Spacer toggle
+		toggleSpacer.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			toggleElement('spacer', checked);
+			console.log('Spacer:', checked);
+		});
+
+		// Secondary Title toggle
+		toggleSecondaryTitle.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			shellbar.secondaryTitle = checked ? 'Secondary Title' : '';
+			console.log('Secondary Title:', checked);
+		});
+
+		// Menu Items toggle
+		toggleMenuItems.addEventListener('ui5-change', (e) => {
+			const checked = e.target.checked;
+			for (let i = 1; i <= 3; i++) {
+				toggleElement(`menuItem-${i}`, checked);
+			}
+			console.log('Menu Items:', checked);
+		});
+
+		// Search Type selector
+		searchType.addEventListener('ui5-change', (e) => {
+			const value = e.detail.selectedOption.value;
+			const searchVisible = toggleSearchField.checked;
+			console.log('Search Type changed to:', value);
+
+			// Helper to replace search field
+			function replaceSearchField(oldId, newElement) {
+				const oldEl = document.getElementById(oldId);
+				const cache = elementCache.get(oldId);
+
+				if (oldEl) {
+					// Element is in DOM
+					oldEl.replaceWith(newElement);
+					if (!searchVisible) {
+						toggleElement(oldId, false);
+					}
+				} else if (cache) {
+					// Element is cached (not visible)
+					cache.element = newElement;
+					elementCache.set(oldId, cache);
+				} else {
+					// Element doesn't exist, add it
+					shellbar.appendChild(newElement);
+					if (!searchVisible) {
+						toggleElement(oldId, false);
+					}
+				}
+			}
+
+			if (value === 'shellbar-search') {
+				// Create ui5-shellbar-search element
+				const newEl = document.createElement('ui5-shellbar-search');
+				newEl.id = 'searchField';
+				newEl.setAttribute('slot', 'searchField');
+				newEl.setAttribute('placeholder', 'Search...');
+				newEl.setAttribute('collapsed', '');
+
+				replaceSearchField('searchField', newEl);
+			} else {
+				// Create ui5-input element
+				const newEl = document.createElement('ui5-input');
+				newEl.id = 'searchField';
+				newEl.setAttribute('slot', 'searchField');
+				newEl.setAttribute('placeholder', 'Search');
+
+				replaceSearchField('searchField', newEl);
+			}
+		});
+
+		// Notifications count input
+		notificationsCount.addEventListener('ui5-input', (e) => {
+			const value = e.target.value;
+			shellbar.notificationsCount = value || undefined;
+			console.log('Notifications Count:', value);
+		});
+
+		// Cache for branding element
+		let cachedBranding = null;
+
+		// Branding mode selector
+		brandingMode.addEventListener('ui5-change', (e) => {
+			const value = e.detail.selectedOption.value;
+			console.log('Branding Mode changed to:', value);
+
+			const isLegacy = value === 'legacy';
+
+			// Enable/disable menu items toggle
+			toggleMenuItems.disabled = !isLegacy;
+
+			// If switching to branding mode, clear menu items
+			if (!isLegacy && toggleMenuItems.checked) {
+				toggleMenuItems.checked = false;
+				for (let i = 1; i <= 3; i++) {
+					toggleElement(`menuItem-${i}`, false);
+				}
+			}
+
+			if (isLegacy) {
+				// Switch to logo + primaryTitle mode
+				// Cache and remove branding slot
+				const branding = shellbar.querySelector('[slot="branding"]');
+
+				console.log('Switching to legacy mode - branding:', branding);
+
+				if (branding) {
+					cachedBranding = branding;
+					branding.remove();
+				}
+
+				// Add logo
+				toggleElement('logo', true);
+
+				// Ensure primaryTitle is set
+				shellbar.primaryTitle = 'Product Title';
+
+				console.log('Legacy mode set - logo:', shellbar.logo);
+				console.log('Legacy mode set - title:', shellbar.primaryTitle);
+			} else {
+				// Switch to branding slot mode
+				toggleElement('logo', false);
+
+				// Restore cached branding or create new one
+				if (cachedBranding) {
+					shellbar.insertBefore(cachedBranding, shellbar.firstChild);
+				} else {
+					const newBranding = document.createElement('ui5-shellbar-branding');
+					newBranding.slot = 'branding';
+					newBranding.textContent = 'Product Title';
+					const logoImg = document.createElement('img');
+					logoImg.src = 'https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg';
+					logoImg.slot = 'logo';
+					newBranding.appendChild(logoImg);
+					shellbar.insertBefore(newBranding, shellbar.firstChild);
+					cachedBranding = newBranding;
+				}
+
+				// Clear primaryTitle
+				shellbar.primaryTitle = '';
+			}
+		});
+
+		// Event listeners
+		shellbar.addEventListener('ui5-notifications-click', (e) => {
+			e.preventDefault();
+			console.log('Notifications clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-profile-click', (e) => {
+			console.log('Profile clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-product-switch-click', (e) => {
+			console.log('Product Switch clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-search-button-click', (e) => {
+			console.log('Search button clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-logo-click', (e) => {
+			console.log('Logo clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-menu-item-click', (e) => {
+			console.log('Menu item clicked', e.detail);
+		});
+
+		shellbar.addEventListener('ui5-content-item-visibility-change', (e) => {
+			console.log('Content visibility changed:', e.detail.items.length, 'items hidden');
+		});
+
+		shellbar.addEventListener('ui5-search-field-toggle', (e) => {
+			console.log('Search field toggled:', e.detail.expanded);
+		});
+
+		// Toggle assistant icon on click
+		document.querySelectorAll('ui5-toggle-button').forEach(el => {
+			el.addEventListener('click', (event) => {
+				const toggleButton = event.target;
+				toggleButton.icon = toggleButton.pressed ? 'sap-icon://da-2' : 'sap-icon://da';
+			});
+		});
+
+		// Item click listeners
+		const item1 = document.getElementById('item-1');
+		const item2 = document.getElementById('item-2');
+		if (item1) item1.addEventListener('click', (e) => console.log('Item 1 clicked', e.detail));
+		if (item2) item2.addEventListener('click', (e) => console.log('Item 2 clicked', e.detail));
+
+		// Attach listeners to dynamic items when they are added
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				mutation.addedNodes.forEach((node) => {
+					if (node.id === 'item-3') node.addEventListener('click', (e) => console.log('Item 3 clicked', e.detail));
+					if (node.id === 'item-4') node.addEventListener('click', (e) => console.log('Item 4 clicked', e.detail));
+				});
+			});
+		});
+
+		observer.observe(shellbar, { childList: true });
+
+		console.log('ShellBar Feature Toggle Page loaded');
+		console.log('Open browser console to see event logs');
+		console.log('Resize window to test overflow behavior!');
+	</script>
+</body>
+</html>
diff --git a/packages/fiori/test/pages/ShellBar_SearchTypes.html b/packages/fiori/test/pages/ShellBar_SearchTypes.html
new file mode 100644
index 000000000000..39796a7ae8fd
--- /dev/null
+++ b/packages/fiori/test/pages/ShellBar_SearchTypes.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>ShellBar - Search Types Demo</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/ShellBar.css">
+	<style>
+		body {
+			background-color: var(--sapBackgroundColor);
+			padding: 1rem;
+			font-family: var(--sapFontFamily);
+		}
+		h1, h2, p {
+			color: var(--sapTextColor);
+		}
+		.shellbar-section {
+			margin-bottom: 3rem;
+			border: 1px solid var(--sapGroup_ContentBorderColor);
+			padding: 1rem;
+			border-radius: 0.5rem;
+		}
+		.description {
+			background: var(--sapInfobar_Background);
+			padding: 0.75rem;
+			border-radius: 0.25rem;
+			margin: 0.5rem 0 1rem 0;
+		}
+		.custom-search-wrapper {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+		}
+		.custom-search-input {
+			flex: 1;
+			padding: 0.25rem 0.5rem;
+			border: 1px solid var(--sapField_BorderColor);
+			border-radius: 0.25rem;
+			background: var(--sapField_Background);
+			color: var(--sapField_TextColor);
+		}
+		.custom-search-button {
+			padding: 0.25rem 0.5rem;
+			border: none;
+			background: var(--sapButton_Background);
+			color: var(--sapButton_TextColor);
+			border-radius: 0.25rem;
+			cursor: pointer;
+		}
+		.custom-search-button:hover {
+			background: var(--sapButton_Hover_Background);
+		}
+		#log {
+			margin-top: 2rem;
+			padding: 1rem;
+			border: 1px solid var(--sapGroup_ContentBorderColor);
+			border-radius: 0.5rem;
+			background: var(--sapGroup_ContentBackground);
+		}
+		#log-content {
+			max-height: 200px;
+			overflow-y: auto;
+			font-family: monospace;
+			font-size: 0.875rem;
+		}
+	</style>
+</head>
+
+<body>
+	<h1>ShellBar - Search Types Demonstration</h1>
+	<p>This page demonstrates all 3 supported search field types and legacy properties.</p>
+
+	<!-- Type 1: Self-Collapsible Search (ui5-shellbar-search) -->
+	<div class="shellbar-section">
+		<h2>1. Self-Collapsible Search (ui5-shellbar-search) ✅</h2>
+		<div class="description">
+			<strong>Type:</strong> ui5-shellbar-search<br>
+			<strong>Features:</strong> Auto-expands/collapses, search suggestions, scopes<br>
+			<strong>Properties:</strong> collapsed, open (managed by component)<br>
+			<strong>Controller:</strong> ShellBarSearch
+		</div>
+		<ui5-shellbar id="shellbar-self-collapsible" show-search-field>
+			<ui5-shellbar-branding slot="branding">
+				Self-Collapsible Search
+			</ui5-shellbar-branding>
+			<ui5-shellbar-search slot="searchField" placeholder="Search with suggestions...">
+				<ui5-search-item text="MacBook Pro" icon="laptop"></ui5-search-item>
+				<ui5-search-item text="iPhone 15" icon="iphone"></ui5-search-item>
+				<ui5-search-item text="iPad Air" icon="ipad"></ui5-search-item>
+			</ui5-shellbar-search>
+			<ui5-button slot="content">Reports</ui5-button>
+			<ui5-button slot="content">Analytics</ui5-button>
+			<ui5-avatar slot="profile" icon="employee" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Click the search icon to toggle. Supports auto-collapse when space is tight (except when focused or has value).</em></p>
+	</div>
+
+	<!-- Type 2: ui5-input (Legacy) -->
+	<div class="shellbar-section">
+		<h2>2. ui5-input (Legacy) ✅</h2>
+		<div class="description">
+			<strong>Type:</strong> ui5-input<br>
+			<strong>Features:</strong> Basic input field, shows search button<br>
+			<strong>Properties:</strong> hideSearchButton, disableSearchCollapse supported<br>
+			<strong>Controller:</strong> ShellBarSearchLegacy
+		</div>
+		<ui5-shellbar id="shellbar-ui5-input" show-search-field>
+			<ui5-shellbar-branding slot="branding">
+				ui5-input Search
+			</ui5-shellbar-branding>
+			<ui5-input slot="searchField" placeholder="Type to search..." value-state="Information">
+				<div slot="valueStateMessage">Search for products, customers, or orders</div>
+			</ui5-input>
+			<ui5-button slot="content">Products</ui5-button>
+			<ui5-button slot="content">Customers</ui5-button>
+			<ui5-button slot="content">Orders</ui5-button>
+			<ui5-avatar slot="profile" initials="AB" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Separate search button appears. Auto-collapse works based on focus and value.</em></p>
+	</div>
+
+	<!-- Type 3: Custom DIV (Legacy) -->
+	<div class="shellbar-section">
+		<h2>3. Custom DIV with Input (Legacy) ✅</h2>
+		<div class="description">
+			<strong>Type:</strong> Custom HTML (div with input)<br>
+			<strong>Features:</strong> Full control over markup, shows search button<br>
+			<strong>Properties:</strong> hideSearchButton, disableSearchCollapse supported<br>
+			<strong>Controller:</strong> ShellBarSearchLegacy
+		</div>
+		<ui5-shellbar id="shellbar-custom-div" show-search-field>
+			<ui5-shellbar-branding slot="branding">
+				Custom Search
+			</ui5-shellbar-branding>
+			<div class="custom-search-wrapper" slot="searchField" id="customSearch">
+				<input 
+					id="customSearchInput" 
+					class="custom-search-input"
+					type="text" 
+					placeholder="Custom search input">
+				<button id="customSearchClose" class="custom-search-button">✕</button>
+			</div>
+			<ui5-button slot="content">Dashboard</ui5-button>
+			<ui5-button slot="content">Settings</ui5-button>
+			<ui5-avatar slot="profile" icon="customer" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Custom HTML allows full control. Search button provided by ShellBar. Custom close button included.</em></p>
+	</div>
+
+	<!-- Type 2 with disableSearchCollapse -->
+	<div class="shellbar-section">
+		<h2>4. ui5-input with disableSearchCollapse</h2>
+		<div class="description">
+			<strong>Type:</strong> ui5-input<br>
+			<strong>Properties:</strong> disableSearchCollapse=true<br>
+			<strong>Behavior:</strong> Search field always stays expanded, never auto-collapses
+		</div>
+		<ui5-shellbar id="shellbar-no-collapse" show-search-field disable-search-collapse>
+			<ui5-shellbar-branding slot="branding">
+				Always Expanded
+			</ui5-shellbar-branding>
+			<ui5-input slot="searchField" placeholder="Always visible..."></ui5-input>
+			<ui5-button slot="content" data-hide-order="1">Action 1</ui5-button>
+			<ui5-button slot="content" data-hide-order="2">Action 2</ui5-button>
+			<ui5-button slot="content" data-hide-order="3">Action 3</ui5-button>
+			<ui5-button slot="content" data-hide-order="4">Action 4</ui5-button>
+			<ui5-button slot="content" data-hide-order="5">Action 5</ui5-button>
+			<ui5-avatar slot="profile" initials="CD" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Resize window - search stays expanded even when items overflow.</em></p>
+	</div>
+
+	<!-- Type 3 with hideSearchButton -->
+	<div class="shellbar-section">
+		<h2>5. Custom DIV with hideSearchButton</h2>
+		<div class="description">
+			<strong>Type:</strong> Custom div<br>
+			<strong>Properties:</strong> hideSearchButton=true<br>
+			<strong>Behavior:</strong> No search button shown, field always visible
+		</div>
+		<ui5-shellbar id="shellbar-hide-button" show-search-field hide-search-button>
+			<ui5-shellbar-branding slot="branding">
+				No Search Button
+			</ui5-shellbar-branding>
+			<div class="custom-search-wrapper" slot="searchField">
+				<input class="custom-search-input" type="text" placeholder="Search (no toggle button)">
+			</div>
+			<ui5-button slot="content">Home</ui5-button>
+			<ui5-button slot="content">About</ui5-button>
+			<ui5-avatar slot="profile" initials="EF" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Search button hidden. Field is always visible (useful when managing state externally).</em></p>
+	</div>
+
+	<!-- Combined demo with overflow -->
+	<div class="shellbar-section">
+		<h2>6. With Overflow + Auto-Collapse</h2>
+		<div class="description">
+			<strong>Type:</strong> ui5-input<br>
+			<strong>Behavior:</strong> Search auto-collapses when content overflows (unless focused/has value)
+		</div>
+		<ui5-shellbar id="shellbar-overflow" show-search-field show-notifications notifications-count="12">
+			<ui5-shellbar-branding slot="branding">
+				Overflow Demo
+			</ui5-shellbar-branding>
+			<ui5-input slot="searchField" placeholder="Auto-collapse demo..." id="overflowSearchInput"></ui5-input>
+			<ui5-button slot="content" data-hide-order="1">Reports</ui5-button>
+			<ui5-button slot="content" data-hide-order="2">Analytics</ui5-button>
+			<ui5-button slot="content" data-hide-order="3">Dashboard</ui5-button>
+			<ui5-button slot="content" data-hide-order="4">Settings</ui5-button>
+			<ui5-button slot="content" data-hide-order="5">Help</ui5-button>
+			<ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
+			<ui5-button slot="content" data-hide-order="6">Export</ui5-button>
+			<ui5-button slot="content" data-hide-order="7">Import</ui5-button>
+			<ui5-button slot="content" data-hide-order="8">Print</ui5-button>
+			<ui5-avatar slot="profile" icon="manager" size="XS"></ui5-avatar>
+		</ui5-shellbar>
+		<p><em>Resize window to see auto-collapse. Type something or focus the field to prevent collapse.</em></p>
+	</div>
+
+	<!-- Event log -->
+	<div id="log">
+		<h3>Event Log</h3>
+		<div id="log-content"></div>
+	</div>
+
+	<script>
+		const logContent = document.getElementById('log-content');
+		
+		function log(message) {
+			const entry = document.createElement('div');
+			entry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+			entry.style.padding = '0.25rem 0';
+			entry.style.color = 'var(--sapTextColor)';
+			logContent.insertBefore(entry, logContent.firstChild);
+			// Keep only last 20 entries
+			while (logContent.children.length > 20) {
+				logContent.removeChild(logContent.lastChild);
+			}
+		}
+
+		// Setup event listeners for all shellbars
+		document.querySelectorAll('ui5-shellbar').forEach(shellbar => {
+			const id = shellbar.id;
+
+			shellbar.addEventListener('search-button-click', (e) => {
+				log(`[${id}] Search button clicked (visible: ${e.detail.searchFieldVisible})`);
+			});
+
+			shellbar.addEventListener('search-field-toggle', (e) => {
+				log(`[${id}] Search field ${e.detail.expanded ? 'expanded' : 'collapsed'}`);
+			});
+
+			shellbar.addEventListener('search-field-clear', (e) => {
+				log(`[${id}] Search field cleared (cancel clicked)`);
+			});
+
+			shellbar.addEventListener('notifications-click', () => {
+				log(`[${id}] Notifications clicked`);
+			});
+
+			shellbar.addEventListener('profile-click', () => {
+				log(`[${id}] Profile clicked`);
+			});
+		});
+
+		// Custom search close button handler
+		const customSearchClose = document.getElementById('customSearchClose');
+		const customSearchInput = document.getElementById('customSearchInput');
+		const shellbarCustomDiv = document.getElementById('shellbar-custom-div');
+
+		if (customSearchClose) {
+			customSearchClose.addEventListener('click', () => {
+				customSearchInput.value = '';
+				log('[shellbar-custom-div] Custom close button clicked');
+			});
+		}
+
+		// Manage disableSearchCollapse for custom search (based on V0 pattern)
+		if (customSearchInput && shellbarCustomDiv) {
+			['focus', 'blur', 'input'].forEach((event) => {
+				customSearchInput.addEventListener(event, () => {
+					shellbarCustomDiv.disableSearchCollapse =
+						customSearchInput.value || customSearchInput === document.activeElement;
+					log(`[shellbar-custom-div] disableSearchCollapse = ${shellbarCustomDiv.disableSearchCollapse}`);
+				});
+			});
+		}
+
+		// Test getSearchButtonDomRef() API
+		async function testSearchButtonAPI() {
+			const shellbar = document.getElementById('shellbar-ui5-input');
+			const searchBtn = await shellbar.getSearchButtonDomRef();
+			if (searchBtn) {
+				log('[API Test] getSearchButtonDomRef() returned search button ✓');
+			} else {
+				log('[API Test] getSearchButtonDomRef() returned null');
+			}
+		}
+
+		// Run API test after a delay
+		setTimeout(testSearchButtonAPI, 2000);
+
+		// Log initial state
+		log('Page loaded - All 3 search types demonstrated');
+		log('Type 1: ui5-shellbar-search (self-collapsible)');
+		log('Type 2: ui5-input (legacy with search button)');
+		log('Type 3: Custom div (legacy with search button)');
+	</script>
+</body>
+</html>
+
diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html
deleted file mode 100644
index 74b31f09c158..000000000000
--- a/packages/fiori/test/pages/ShellBar_evolution.html
+++ /dev/null
@@ -1,325 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<title>Shell Bar</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-	<script data-ui5-config type="application/json">
-		{
-			"rtl": false
-		}
-	</script>
-
-
-	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
-
-
-	<link rel="stylesheet" type="text/css" href="./styles/ShellBar.css">
-</head>
-
-<body class="shellbar1auto">
-
-<ui5-navigation-layout mode="Collapsed">
-
-	<ui5-menu id="menuSubsDynamic" opener="btnOpenBasicDynamic">
-		<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
-		<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
-		<ui5-menu-item text="Open" icon="open-folder" starts-section>
-			<ui5-menu-item text="Open Locally" icon="open-folder">
-				<ui5-menu-item text="Open from C"></ui5-menu-item>
-				<ui5-menu-item text="Open from D"></ui5-menu-item>
-				<ui5-menu-item text="Open from E"></ui5-menu-item>
-			</ui5-menu-item>
-			<ui5-menu-item text="Open from Cloud"></ui5-menu-item>
-		</ui5-menu-item>
-		<ui5-menu-item text="Save" icon="save">
-			<ui5-menu-item text="Save Locally" icon="save">
-				<ui5-menu-item text="Save on C" icon="save"></ui5-menu-item>
-				<ui5-menu-item text="Save on D" icon="save"></ui5-menu-item>
-				<ui5-menu-item text="Save on E" icon="save"></ui5-menu-item>
-			</ui5-menu-item>
-			<ui5-menu-item text="Save on Cloud" icon="upload-to-cloud"></ui5-menu-item>
-		</ui5-menu-item>
-		<ui5-menu-item text="Close"></ui5-menu-item>
-		<ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
-		<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
-	</ui5-menu>
-
-	<ui5-shellbar
-		id="shellbarDynamicContent"
-		slot="header"
-		show-notifications
-		>
-		<ui5-shellbar-branding slot="branding">
-			S/4HANA Cloud
-			<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
-		</ui5-shellbar-branding>
-
-		<ui5-button icon="menu2" slot="startButton"></ui5-button>
-		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
-
-		<ui5-tag design="Set2" color-scheme="10" slot="content">EMEA</ui5-tag>
-		<ui5-button id="btnOpenBasicDynamic" end-icon="slim-arrow-down" slot="content" data-hide-order="9">Deliveries overdue for billing neeed more text because of a bug</ui5-button>
-
-		<ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
-
-		<div slot="content" style="display: flex; align-items: center;">
-			<ui5-label>New Version</ui5-label>
-			<ui5-switch checked></ui5-switch>
-		</div>
-
-		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
-			<div slot="valueStateMessage">Instructions</div>
-		</ui5-input>
-
-		<ui5-toggle-button id="assistantDynamic" icon="sap-icon://da" slot="assistant" text="Assitant" title="Assitant"></ui5-toggle-button>
-		<ui5-avatar slot="profile" initials="JM"></ui5-avatar>
-		</ui5-avatar>
-	</ui5-shellbar>
-
-	<ui5-menu id="menuSubs" opener="btnOpenBasic" data-hide-order="10">
-		<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
-		<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
-		<ui5-menu-item text="Open" icon="open-folder" starts-section>
-			<ui5-menu-item text="Open Locally" icon="open-folder">
-				<ui5-menu-item text="Open from C"></ui5-menu-item>
-				<ui5-menu-item text="Open from D"></ui5-menu-item>
-				<ui5-menu-item text="Open from E"></ui5-menu-item>
-			</ui5-menu-item>
-			<ui5-menu-item text="Open from Cloud"></ui5-menu-item>
-		</ui5-menu-item>
-		<ui5-menu-item text="Save" icon="save">
-			<ui5-menu-item text="Save Locally" icon="save">
-				<ui5-menu-item text="Save on C" icon="save"></ui5-menu-item>
-				<ui5-menu-item text="Save on D" icon="save"></ui5-menu-item>
-				<ui5-menu-item text="Save on E" icon="save"></ui5-menu-item>
-			</ui5-menu-item>
-			<ui5-menu-item text="Save on Cloud" icon="upload-to-cloud"></ui5-menu-item>
-		</ui5-menu-item>
-		<ui5-menu-item text="Close"></ui5-menu-item>
-		<ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
-		<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
-	</ui5-menu>
-
-	<ui5-shellbar
-		id="shellbar"
-		class="shellbar-example"
-		data-ui5-static-stable="shellbarWithLogoClickStatic"
-		show-notifications
-		notifications-count="777"
-		show-product-switch
-		show-search-field
-		slot="header"
-	>
-		<ui5-shellbar-branding slot="branding">
-			SAP Labs Bulgaria
-			<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
-		</ui5-shellbar-branding>
-
-		<ui5-button icon="menu2" slot="startButton" id="btnOpenStart"></ui5-button>
-		<ui5-button id="btnOpenBasic" end-icon="slim-arrow-down" slot="content" data-hide-order="10">PR10</ui5-button>
-
-		<ui5-tag color-scheme="7" slot="content" data-hide-order="4">PR 4</ui5-tag>
-		<ui5-text slot="content" data-hide-order="3">PR3</ui5-text>
-
-		<ui5-switch design="Textual" text-on="PR0" text-off="PR0" slot="content"></ui5-switch>
-
-		<ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
-
-		<ui5-toggle-button  slot="content" text="PR2" data-hide-order="2">PR2</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR1" data-hide-order="1">PR1</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR6" data-hide-order="6">PR6</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR7" data-hide-order="7">PR7</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR8" data-hide-order="8">PR8</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR9" data-hide-order="9">PR9</ui5-toggle-button>
-
-		<ui5-shellbar-search slot="searchField" scope-value="apps">
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
-
-			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
-		</ui5-shellbar-search>
-
-		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
-		<ui5-shellbar-item icon="activities" text="Button4"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="feedback" text="Button5"></ui5-shellbar-item>
-		<ui5-shellbar-item count="12" icon="action-settings" text="Button8"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="sys-help" text="Button9"></ui5-shellbar-item>
-		<ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant" text="Assitant" title="Assitant"></ui5-toggle-button>
-
-	</ui5-shellbar>
-	<ui5-shellbar
-		id="shellbar_hide_search"
-		class="shellbar-example"
-		data-ui5-static-stable="shellbarWithLogoClickStatic"
-		show-notifications
-		notifications-count="777"
-		show-product-switch
-		slot="header"
-	>
-		<ui5-shellbar-branding slot="branding">
-			SAP Labs Bulgaria
-			<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
-		</ui5-shellbar-branding>
-
-		<ui5-button icon="menu2" slot="startButton" id="btnOpenStart"></ui5-button>
-		<ui5-button id="btnOpenBasic" end-icon="slim-arrow-down" slot="content" data-hide-order="10">PR10</ui5-button>
-
-		<ui5-tag color-scheme="7" slot="content" data-hide-order="4">PR 4</ui5-tag>
-		<ui5-text slot="content" data-hide-order="3">PR3</ui5-text>
-
-		<ui5-switch design="Textual" text-on="PR0" text-off="PR0" slot="content"></ui5-switch>
-
-		<ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
-
-		<ui5-toggle-button  slot="content" text="PR2" data-hide-order="2">PR2</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR1" data-hide-order="1">PR1</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR6" data-hide-order="6">PR6</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR7" data-hide-order="7">PR7</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR8" data-hide-order="8">PR8</ui5-toggle-button>
-
-		<ui5-toggle-button  slot="content" text="PR9" data-hide-order="9">PR9</ui5-toggle-button>
-
-		<div style="width: 100%; display: flex;" slot="searchField" id="customSearch">
-			<input id="customSearchInput" style="width: 100%" type="text">
-			<button id="customSearchClose">x</button>
-		</div>
-
-		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
-		<ui5-shellbar-item icon="activities" text="Button4"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="feedback" text="Button5" id="feedbackBtn"></ui5-shellbar-item>
-		<ui5-shellbar-item count="12" icon="action-settings" text="Button8"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="sys-help" text="Button9"></ui5-shellbar-item>
-		<ui5-toggle-button id="assistant_no_search" icon="sap-icon://da" slot="assistant" text="Assitant" title="Assitant"></ui5-toggle-button>
-
-	</ui5-shellbar>
-	<ui5-side-navigation slot="sideContent">
-		<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
-		<ui5-side-navigation-item text="People" expanded icon="group">
-			<ui5-side-navigation-sub-item text="From My Team"></ui5-side-navigation-sub-item>
-			<ui5-side-navigation-sub-item text="From Other Team"></ui5-side-navigation-sub-item>
-		</ui5-side-navigation-item>
-		<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
-		<ui5-side-navigation-item text="Events" icon="calendar">
-			<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
-			<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
-			<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank">
-			</ui5-side-navigation-sub-item>
-		</ui5-side-navigation-item>
-		<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link">
-			<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank">
-			</ui5-side-navigation-sub-item>
-		</ui5-side-navigation-item>
-		<ui5-side-navigation-item slot="fixedItems" text="History" icon="history">
-		</ui5-side-navigation-item>
-	</ui5-side-navigation>
-</ui5-navigation-layout>
-
-	<div class="content"></div>
-	<script>
-		const btnOpenBasic = document.getElementById("btnOpenBasic");
-		const btnOpenStart = document.getElementById("btnOpenStart");
-
-		const menuBasic = document.getElementById("menuSubs");
-		const sidenav = document.querySelector("ui5-side-navigation");
-
-		const feedbackBtn = document.getElementById("feedbackBtn");
-
-		const feedbackButtonAcc = {
-			hasPopup: "dialog",
-			expanded: true
-		}
-		feedbackBtn.accessibilityAttributes = feedbackButtonAcc;
-
-		btnOpenBasic.addEventListener("click", function(event) {
-			menuBasic.open = !menuBasic.open;
-		});
-		btnOpenStart.addEventListener("click", () => {
-			sidenav.toggleAttribute("collapsed");
-		});
-
-		assistant.addEventListener("click", event => {
-			const toggleButton = event.target;
-			toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
-		});
-
-		shellbar.addEventListener("content-item-visibility-change", (e) => {
-			console.log(e.detail.items);
-		})
-
-		const menuSubsDynamic = document.getElementById("menuSubsDynamic");
-		const btnOpenBasicDynamic = document.getElementById("btnOpenBasicDynamic");
-
-		btnOpenBasicDynamic.addEventListener("click", () => {
-			menuSubsDynamic.open = true;
-		});
-
-		const shellbarDynamicContent = document.getElementById("shellbarDynamicContent");
-		const arrowButtonOnly = document.createElement("ui5-button");
-		arrowButtonOnly.id = "arrowButtonOnly";
-		arrowButtonOnly.endIcon = "slim-arrow-down";
-		arrowButtonOnly.slot = "content";
-		arrowButtonOnly.setAttribute("data-hide-order", "10");
-		arrowButtonOnly.addEventListener("click", () => {
-			menuSubsDynamic.open = true;
-		});
-
-		function displayMenuOpener(compact) {
-			if (compact) {
-				menuSubsDynamic.setAttribute("opener", "arrowButtonOnly");
-				shellbarDynamicContent.insertBefore(arrowButtonOnly, shellbarDynamicContent.querySelector("ui5-tag"));
-			} else {
-				menuSubsDynamic.setAttribute("opener", "btnOpenBasicDynamic");
-				arrowButtonOnly.remove();
-			}
-		}
-
-		shellbarDynamicContent.addEventListener("content-item-visibility-change", (event) => {
-			const hiddenItems = event.detail.items;
-			displayMenuOpener(hiddenItems.indexOf(btnOpenBasicDynamic) > -1);
-		});
-
-		["focus", "blur", "input"].forEach((event) => {
-			customSearchInput.addEventListener(event, () => {
-				shellbar_hide_search.disableSearchCollapse =
-					customSearchInput.value || customSearchInput === document.activeElement;
-			});
-		});
-
-		shellbar_hide_search.addEventListener('ui5-search-field-toggle', async (e) => {
-			shellbar_hide_search.hideSearchButton = e.detail.expanded;
-		});
-
-		shellbar_hide_search.addEventListener('ui5-search-button-click', async (e) => {
-			shellbar_hide_search.addEventListener('ui5-search-field-toggle', async (e) => {
-				customSearchInput.focus();
-			}, { once: true });
-		});
-
-		customSearchClose.addEventListener('click', async () => {
-			shellbar_hide_search.showSearchField = false;
-			shellbar_hide_search.hideSearchButton = false;
-			const searchButton = await shellbar_hide_search.getSearchButtonDomRef()
-			searchButton.focus();
-		});
-	</script>
-
-</body>
-</html>
diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
index 887d557cd9a2..b504a8b58b6d 100644
--- a/packages/main/src/List.ts
+++ b/packages/main/src/List.ts
@@ -959,6 +959,8 @@ class List extends UI5Element {
 				groupCount++;
 				// subtract group itself for proper group header item count
 				groupItemCount += groupItems.length - 1;
+			} else if (hasListItems(item)) {
+				item.assignedSlot && items.push(...item.listItems);
 			} else {
 				item.assignedSlot && items.push(item);
 			}
@@ -1559,6 +1561,15 @@ class List extends UI5Element {
 
 List.define();
 
+type ListItemWrapper = {
+	hasListItems: boolean;
+	listItems: Array<ListItemBase>;
+}
+
+const hasListItems = (item: object): item is ListItemWrapper => {
+	return "hasListItems" in item && (item as ListItemWrapper).hasListItems;
+};
+
 export default List;
 export type {
 	ListItemClickEventDetail,