Merge branch 'main' into main

EdrilanBerisha · web-flow · commit 3841ba2fa960 · 2026-05-19T12:27:35.000+02:00
diff --git a/README.md b/README.md
@@ -96,16 +96,23 @@ Since version `1.11.0`, we have been providing TypeScript definitions under an e
 No, you are expected to import only the components (or other public APIs) that you are going to use and bundle them along with the rest
 of your application.
 
-## Browser Support
+## Browser and Platform Support
 
-UI5 Web Components are supported by all major modern browsers.
+UI5 Web Components are supported by all major modern browsers on the desktop and mobile platforms listed below.
 
-Browser | Supported versions
---------|--------
-Chrome | Latest two stable releases
-Firefox | Latest two stable releases
-Safari | Latest two stable releases
-Edge | Latest two stable releases
+### Desktop
+
+|                                | Google Chrome   | Microsoft Edge  | Mozilla Firefox | Mozilla Firefox ESR | Apple Safari    |
+| ------------------------------ | --------------- | --------------- | --------------- | ------------------- | --------------- |
+| **Windows** (versions 10 & 11) | Latest 2 Stable | Latest 2 Stable | Latest 2 Stable | Latest              | n/a             |
+| **macOS** (Latest 2 versions)  | Latest 2 Stable | Latest 2 Stable | Latest 2 Stable | Latest              | Latest 2 Stable |
+
+### Mobile
+
+|                                   | Google Chrome   | Apple Safari    |
+| --------------------------------- | --------------- | --------------- |
+| **Android** (Latest 3 versions)   | Latest 2 Stable | n/a             |
+| **iOS & iPadOS** (Latest version) | -               | Latest 2 Stable |
 
 ## Project Structure, Development and Build
 
diff --git a/docs/11-Browser-and-Platform-Support.md b/docs/11-Browser-and-Platform-Support.md
@@ -0,0 +1,22 @@
+---
+sidebar_label: Browser and Platform Support
+title: Browser and Platform Support
+---
+
+# Browser and Platform Support
+
+UI5 Web Components are supported by all major modern browsers on the desktop and mobile platforms listed below.
+
+## Desktop
+
+|                                | Google Chrome   | Microsoft Edge  | Mozilla Firefox | Mozilla Firefox ESR | Apple Safari    |
+| ------------------------------ | --------------- | --------------- | --------------- | ------------------- | --------------- |
+| **Windows** (versions 10 & 11) | Latest 2 Stable | Latest 2 Stable | Latest 2 Stable | Latest              | n/a             |
+| **macOS** (Latest 2 versions)  | Latest 2 Stable | Latest 2 Stable | Latest 2 Stable | Latest              | Latest 2 Stable |
+
+## Mobile
+
+|                                   | Google Chrome   | Apple Safari    |
+| --------------------------------- | --------------- | --------------- |
+| **Android** (Latest 3 versions)   | Latest 2 Stable | n/a             |
+| **iOS & iPadOS** (Latest version) | -               | Latest 2 Stable |
diff --git a/docs/12-FAQ.md b/docs/12-FAQ.md
diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -1846,4 +1846,17 @@ describe("Component Behavior", () => {
 			expect(cursor).to.equal("pointer");
 		});
 	});
+});
+
+describe("Start button spacing", () => {
+	it("8px gap between multiple startButton elements", () => {
+		cy.mount(
+			<ShellBar>
+				<Button id="hamburger-btn" icon="menu2" slot="startButton"></Button>
+				<Button id="nav-back-btn" icon={navBack} slot="startButton"></Button>
+			</ShellBar>
+		);
+
+		cy.get("[ui5-shellbar]").shadow().find(".ui5-shellbar-start-button").should("have.css", "gap", "8px");
+	});
 });
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -99,7 +99,9 @@
 }
 
 .ui5-shellbar-action-button:hover {
-	color: var(--sapShell_TextColor);
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_InteractiveTextColor);
 }
 
 .ui5-shellbar-action-button[active] {
@@ -126,6 +128,7 @@
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
+	gap: 0.5rem;
 }
 
 .ui5-shellbar-branding-area {
diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css
@@ -9,7 +9,9 @@
 }
 
 .ui5-shellbar-action-button:hover {
-	color: var(--sapShell_TextColor);
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_InteractiveTextColor);
 }
 
 .ui5-shellbar-action-button[active] {

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,9 @@`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`.ui5-shellbar-action-button:hover {`
`102`		`- color: var(--sapShell_TextColor);`
	`102`	`+ background: var(--sapShell_Hover_Background);`
	`103`	`+ border-color: var(--sapButton_Lite_Hover_BorderColor);`
	`104`	`+ color: var(--sapShell_InteractiveTextColor);`
`103`	`105`	`}`
`104`	`106`
`105`	`107`	`.ui5-shellbar-action-button[active] {`
`@@ -126,6 +128,7 @@`
`126`	`128`	`flex-shrink: 0;`
`127`	`129`	`display: flex;`
`128`	`130`	`align-items: center;`
	`131`	`+ gap: 0.5rem;`
`129`	`132`	`}`
`130`	`133`
`131`	`134`	`.ui5-shellbar-branding-area {`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,9 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.ui5-shellbar-action-button:hover {`
`12`		`- color: var(--sapShell_TextColor);`
	`12`	`+ background: var(--sapShell_Hover_Background);`
	`13`	`+ border-color: var(--sapButton_Lite_Hover_BorderColor);`
	`14`	`+ color: var(--sapShell_InteractiveTextColor);`
`13`	`15`	`}`
`14`	`16`
`15`	`17`	`.ui5-shellbar-action-button[active] {`