feat(ui5-shellbar): add 8px gap between startButton elements (#13537)

When multiple buttons are slotted into startButton, there was no spacing between them. Added gap: 0.5rem to the .ui5-shellbar-start-button flex container to match the VD spec which requires 0.5rem (8px) spacing between ShellBar elements.

JIRA: BGSOFUIPIRIN-7064

Author: NakataCode

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");
+	});
 });

packages/fiori/src/themes/ShellBar.css

@@ -126,6 +126,7 @@
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
+	gap: 0.5rem;
 }
 
 .ui5-shellbar-branding-area {