feat(tab-button): Adding styling to the badge.

Author: joselrio

core/src/components/tab-button/tab-button.common.scss

@@ -1,3 +1,6 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "../../themes/mixins";
+
 :host {
   /**
    * @prop --background: Background of the tab button
@@ -152,6 +155,41 @@
   z-index: 1;
 }
 
+:host ::slotted(ion-badge[vertical]:empty) {
+  @include padding(0, 0);
+
+  height: globals.$ion-scale-200;
+  width: globals.$ion-scale-200;
+}
+
+:host ::slotted(ion-badge[vertical]) {
+  left: 50%;
+  transform: translateX(globals.$ion-scale-300);
+}
+
+:host ::slotted(ion-badge[vertical="top"]) {
+  top: globals.$ion-scale-0;
+}
+
+:host ::slotted(ion-badge[vertical="bottom"]) {
+  top: 50%;
+  transform: translate(globals.$ion-scale-300, calc(globals.$ion-scale-200 * -1));
+}
+
+:host ::slotted(ion-badge[vertical="bottom"]:empty) {
+  transform: translate(globals.$ion-scale-300, calc(globals.$ion-scale-100 * -1));
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include padding(2px, 4px, 4px, 4px);
+
+  font-size: globals.$ion-font-size-300;
+  line-height: 1;
+
+  height: globals.$ion-scale-400;
+  min-width: globals.$ion-scale-400;
+}
+
 // Tab Button: Layout
 // --------------------------------------------------
 

core/src/components/tab-button/tab-button.ionic.scss

@@ -1,5 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./tab-button.common";
+@import "../../themes/mixins";
 
 // Ionic Tab Button
 // --------------------------------------------------------------
@@ -27,6 +28,8 @@
   @include globals.margin(0);
   @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include globals.text-inherit();
+
+  overflow: visible;
 }
 
 .button-native::after {
@@ -86,3 +89,14 @@
 :host(.tab-button-shape-rectangular) {
   @include globals.border-radius(globals.$ion-border-radius-0);
 }
+
+// Tab Button: Badge
+// --------------------------------------------------
+
+:host ::slotted(ion-badge[vertical="top"]) {
+  top: calc(globals.$ion-scale-200 * -1);
+}
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include padding(3px, 4px, 4px, 4px);
+}