From 3ca56d5a7be199e1f6067be6be1b66df9c87db45 Mon Sep 17 00:00:00 2001
From: Jianrong Yu <jianrong.yu@sap.com>
Date: Mon, 14 Jul 2025 13:43:44 -0700
Subject: [PATCH 1/2] fix(ui5-toolbar-button): add css for ui5-toolbar-button
 for left alignment (#11913)

---
 packages/main/src/ToolbarButton.ts                | 3 +++
 packages/main/src/themes/ToolbarButton.css        | 4 ++++
 packages/main/src/themes/ToolbarButtonPopover.css | 3 ---
 packages/main/test/pages/Toolbar.html             | 2 ++
 4 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 packages/main/src/themes/ToolbarButton.css
 delete mode 100644 packages/main/src/themes/ToolbarButtonPopover.css

diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 6eb4c7ca6180..32237d01e6a6 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -8,6 +8,8 @@ import type ButtonDesign from "./types/ButtonDesign.js";
 import ToolbarItem from "./ToolbarItem.js";
 import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
 
+import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
+
 type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 
 /**
@@ -29,6 +31,7 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 	tag: "ui5-toolbar-button",
 	template: ToolbarButtonTemplate,
 	renderer: jsxRenderer,
+	styles: [ToolbarButtonCss],
 })
 
 /**
diff --git a/packages/main/src/themes/ToolbarButton.css b/packages/main/src/themes/ToolbarButton.css
new file mode 100644
index 000000000000..9d49793ca024
--- /dev/null
+++ b/packages/main/src/themes/ToolbarButton.css
@@ -0,0 +1,4 @@
+
+.ui5-tb-popover-item.ui5-tb-button::part(button) {
+	justify-content: start;
+}
diff --git a/packages/main/src/themes/ToolbarButtonPopover.css b/packages/main/src/themes/ToolbarButtonPopover.css
deleted file mode 100644
index 200ca218d690..000000000000
--- a/packages/main/src/themes/ToolbarButtonPopover.css
+++ /dev/null
@@ -1,3 +0,0 @@
-:not([icon-only]).ui5-tb-popover-button::part(button) {
-	justify-content: start;
-}
\ No newline at end of file
diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
index e63b8cdd9eda..de6b72c48bcf 100644
--- a/packages/main/test/pages/Toolbar.html
+++ b/packages/main/test/pages/Toolbar.html
@@ -152,6 +152,8 @@
 				<ui5-toolbar-separator></ui5-toolbar-separator>
 				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-d"
 					overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Longer for alignment check"
+					stable-dom-ref="tb-button-employee-d" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>
 

From f89a220c53c21d064324a44c391a141c6dbe3af0 Mon Sep 17 00:00:00 2001
From: Jianrong Yu <jianrong.yu@sap.com>
Date: Fri, 18 Jul 2025 09:25:06 -0700
Subject: [PATCH 2/2] fix(ui5-toolbar-button): add padding for icon-only button
 in popover

---
 packages/main/src/themes/ToolbarButton.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/themes/ToolbarButton.css b/packages/main/src/themes/ToolbarButton.css
index 9d49793ca024..7852276848aa 100644
--- a/packages/main/src/themes/ToolbarButton.css
+++ b/packages/main/src/themes/ToolbarButton.css
@@ -1,4 +1,7 @@
-
 .ui5-tb-popover-item.ui5-tb-button::part(button) {
 	justify-content: start;
 }
+
+.ui5-tb-popover-item.ui5-tb-button[icon-only]::part(button) {
+	padding: 0 var(--_ui5_button_base_padding);
+}