From 92920440fcc8ee446a42c0b58d8bb2a3403f952c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Wed, 27 Aug 2025 16:47:02 +0100
Subject: [PATCH 1/4] - define padding space for ionic tab-button; - guarantee
 hover and focus occupies the height; - when has a status-badge the top
 position should be always the same; - add example with tab-buttons without
 label;

---
 .../src/components/badge/test/hint/index.html | 32 +++++++++++++++++++
 .../tab-button/tab-button.ionic.scss          | 10 +++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
index fba0d6e73ff..0a2ce00d089 100644
--- a/core/src/components/badge/test/hint/index.html
+++ b/core/src/components/badge/test/hint/index.html
@@ -366,6 +366,38 @@
           </div>
         </ion-list>
 
+        <ion-list id="tab-button-icon-bottom">
+          <ion-list-header>
+            <ion-label> Inside Tab Button - Only Icon </ion-label>
+          </ion-list-header>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="label-hide">
+                <ion-icon name="home"></ion-icon>
+                <ion-badge size="small" vertical="top" color="danger"></ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="label-hide">
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="small" vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="label-hide">
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="small" vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="label-hide">
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="top" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+        </ion-list>
+
         <ion-list id="button-top">
           <ion-list-header>
             <ion-label> Inside Button - Top Placement </ion-label>
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index d3751e58625..e04b75d9c16 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -7,6 +7,11 @@
 :host {
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
+  --padding-top: #{globals.$ion-space-100};
+  --padding-end: #{globals.$ion-space-400};
+  --padding-bottom: #{globals.$ion-space-100};
+  --padding-start: #{globals.$ion-space-400};
+
 
   @include globals.typography(globals.$ion-body-action-xs);
 
@@ -48,6 +53,7 @@
 
 .button-native {
   min-width: globals.$ion-scale-1200;
+  min-height: globals.$ion-scale-1200;
 
   overflow: visible;
 
@@ -108,10 +114,6 @@
   @include globals.position(-2px);
 }
 
-:host ::slotted(ion-badge.badge-vertical-top:empty) {
-  @include globals.position(calc(globals.$ion-scale-100 * -1));
-}
-
 :host ::slotted(ion-badge.badge-vertical-bottom) {
   @include globals.position(calc(50% - globals.$ion-scale-200));
 }

From 17e26d3312a5b207743308c4700d2e51ed43b165 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Wed, 27 Aug 2025 17:03:48 +0100
Subject: [PATCH 2/4] - lint.fix

---
 core/src/components/tab-button/tab-button.ionic.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index e04b75d9c16..5e7914c2127 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -12,7 +12,6 @@
   --padding-bottom: #{globals.$ion-space-100};
   --padding-start: #{globals.$ion-space-400};
 
-
   @include globals.typography(globals.$ion-body-action-xs);
 
   position: relative;

From 291beb32bb4e993fb996c8a3324033ed039663c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Thu, 28 Aug 2025 12:46:54 +0100
Subject: [PATCH 3/4] - update badge position;

---
 .../tab-button/tab-button.ionic.scss          | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index 5e7914c2127..2738832291c 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -107,18 +107,23 @@
 
 :host ::slotted(ion-badge) {
   @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300));
+  @include globals.transform(translate(-50%, -50%));
 }
 
 :host ::slotted(ion-badge.badge-vertical-top) {
-  @include globals.position(-2px);
+  @include globals.position(globals.$ion-scale-150);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:empty) {
+  @include globals.position(globals.$ion-scale-050, null, null, calc(50% + globals.$ion-scale-250));
 }
 
 :host ::slotted(ion-badge.badge-vertical-bottom) {
-  @include globals.position(calc(50% - globals.$ion-scale-200));
+  @include globals.position(calc(50% - (globals.$ion-scale-050)));
 }
 
 :host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  @include globals.position(calc(50% - globals.$ion-scale-100));
+  @include globals.position(50%, null, null, calc(50% + globals.$ion-scale-250));
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
@@ -131,13 +136,17 @@
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
-  @include globals.position(calc(50% - globals.$ion-scale-100));
+  @include globals.position(calc(50% + globals.$ion-scale-100));
+}
+
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top:empty) {
+  @include globals.position(50%);
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
-  @include globals.position(calc(50% + globals.$ion-scale-100));
+  @include globals.position(calc(100% - globals.$ion-scale-100));
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  @include globals.position(calc(50% + 14px));
+  @include globals.position(calc(100% - globals.$ion-scale-050), null, null, calc(50% + globals.$ion-scale-250));
 }

From a72f4f7a905f07838919fca673b09cf2f1429c3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Thu, 28 Aug 2025 15:24:33 +0100
Subject: [PATCH 4/4] - add only-icon, badge-vertical-bottom usecase;

---
 .../src/components/badge/test/hint/index.html | 25 +++++++++++++++++++
 .../tab-button/tab-button.ionic.scss          | 10 +++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
index 0a2ce00d089..2840eccee0a 100644
--- a/core/src/components/badge/test/hint/index.html
+++ b/core/src/components/badge/test/hint/index.html
@@ -396,6 +396,31 @@
               </ion-tab-button>
             </ion-tab-bar>
           </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="label-hide">
+                <ion-icon name="home"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="danger"></ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="label-hide">
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="label-hide">
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="label-hide">
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="bottom" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
         </ion-list>
 
         <ion-list id="button-top">
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index 2738832291c..b628f4a51ef 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -118,11 +118,11 @@
   @include globals.position(globals.$ion-scale-050, null, null, calc(50% + globals.$ion-scale-250));
 }
 
-:host ::slotted(ion-badge.badge-vertical-bottom) {
+:host(.tab-layout-icon-top) ::slotted(ion-badge.badge-vertical-bottom) {
   @include globals.position(calc(50% - (globals.$ion-scale-050)));
 }
 
-:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
+:host(.tab-layout-icon-top) ::slotted(ion-badge.badge-vertical-bottom:empty) {
   @include globals.position(50%, null, null, calc(50% + globals.$ion-scale-250));
 }
 
@@ -143,10 +143,12 @@
   @include globals.position(50%);
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom),
+:host(.tab-layout-label-hide) ::slotted(ion-badge.badge-vertical-bottom) {
   @include globals.position(calc(100% - globals.$ion-scale-100));
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty),
+:host(.tab-layout-label-hide) ::slotted(ion-badge.badge-vertical-bottom:empty) {
   @include globals.position(calc(100% - globals.$ion-scale-050), null, null, calc(50% + globals.$ion-scale-250));
 }