From d8648e705d33f76318de63899e06250567cd60ce Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 20 May 2024 17:07:00 -0700
Subject: [PATCH 01/14] feat(badge): add small/default size for ionic theme

---
 core/api.txt                                  |  1 +
 core/src/components.d.ts                      |  8 ++++++
 core/src/components/badge/badge.ionic.scss    | 18 +++++++++++++
 core/src/components/badge/badge.tsx           | 26 ++++++++++++++++++-
 packages/angular/src/directives/proxies.ts    |  4 +--
 .../standalone/src/directives/proxies.ts      |  4 +--
 packages/vue/src/proxies.ts                   |  3 ++-
 7 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 core/src/components/badge/badge.ionic.scss

diff --git a/core/api.txt b/core/api.txt
index 0b514e6580d..d86d9002b1e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -310,6 +310,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
+ion-badge,prop,size,"small" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index d9802a3b7c5..517586ff279 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -409,6 +409,10 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'small';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5637,6 +5641,10 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'small';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
new file mode 100644
index 00000000000..11e8f946681
--- /dev/null
+++ b/core/src/components/badge/badge.ionic.scss
@@ -0,0 +1,18 @@
+@import "./badge";
+
+// Ionic Badge
+// --------------------------------------------------
+
+:host {
+  display: inline-flex;
+
+  align-items: center;
+  justify-content: center;
+}
+
+// Button Sizes
+// --------------------------------------------------
+:host(.badge-small) {
+  min-width: 32px;
+  height: 32px;
+}
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 46dbd5a165a..59da1fbd133 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'badge.ios.scss',
     md: 'badge.md.scss',
-    ionic: 'badge.md.scss',
+    ionic: 'badge.ionic.scss',
   },
   shadow: true,
 })
@@ -26,12 +26,36 @@ export class Badge implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Set to `"small"` for less height and width.
+   * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() size?: 'small';
+
+  private getSize(): string | undefined {
+    const theme = getIonTheme(this);
+    const { size } = this;
+
+    // TODO(ROU-10747): Remove theme check when sizes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (size === undefined) {
+      return 'small';
+    }
+
+    return size;
+  }
+
   render() {
+    const size = this.getSize();
     const theme = getIonTheme(this);
     return (
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
+          [`badge-${size}`]: size !== undefined,
         })}
       >
         <slot></slot>
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 552e9cecbef..3cfff5d14d0 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -260,14 +260,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'size', 'theme']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'size', 'theme'],
 })
 export class IonBadge {
   protected el: HTMLElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 76ae26028a0..2cd74d64fef 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -344,14 +344,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonBadge,
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'size', 'theme']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'size', 'theme'],
   standalone: true
 })
 export class IonBadge {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index b114af9f1ae..391bc1ad115 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -114,7 +114,8 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-b
 
 
 export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', defineIonBadge, [
-  'color'
+  'color',
+  'size'
 ]);
 
 

From 12659fbf09d6db8bf83d2df0fc1d33e47de468ab Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 20 May 2024 17:11:45 -0700
Subject: [PATCH 02/14] test(badge): add small size

---
 .../components/badge/test/size/badge.e2e.ts   |  22 ++++++++++
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 418 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 559 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 349 bytes
 .../src/components/badge/test/size/index.html |  39 ++++++++++++++++++
 5 files changed, 61 insertions(+)
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/badge/test/size/index.html

diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts
new file mode 100644
index 00000000000..c9c8aeb6ac1
--- /dev/null
+++ b/core/src/components/badge/test/size/badge.e2e.ts
@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('badge: size'), () => {
+    test('should render small badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="small">00</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
+    });
+  });
+});
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d6e7e145beeca9c452ae7ef88e69e1d798ad18f
GIT binary patch
literal 418
zcmV;T0bTxyP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$TuDShR9J=Wmb))QQ2>X(`zYFYG-V)77itl)5TnE+;SVqx#3*7j*hs7<qu3<O
zVl*OQvj`!P>O_ks)tCD++)51Y>1lG48qO~{xx@EM?w6DE(pY@)XkqkL{#*$t0VSXW
z{)K?qOgY_eFg|FK&AVJbTG*}}3q@dcKFZ!o7kYip&hIQ1c0MT8#H>*aMmDw@mEtjt
z)6F>9H<#J%0{NoL(o_e9lE-b<4rG`2Rzm@)H83$0p*yB=d{N~lW3ziw24H5iO~_;-
zC6G+`wf9f|<}Q>y92Zi3hLD9O5D8c*rXgmb2~@uPuTgJn^--#NLKd1pCg%W<>h<f%
zgpRJmbKVg$nMiHJs|Slr&SiNz%G0aE+*msRN9R=`lZht#CY(&09Ip2;JYZluuzyxz
z?VyP3iCJg@KS^|I)GY7MLq^1c($rDRukF?>3rfo`BPE~&lz<ZW2IyS3c<81X5&!@I
M07*qoM6N<$f?(XVkpKVy

literal 0
HcmV?d00001

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cc576c098b2750acad889e21c1336fc491d1515
GIT binary patch
literal 559
zcmV+~0?_@5P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80005@Nkl<ZSVv=I
z2zmLRVE_T+r~^hrU^E0qLtr!nhC~Q3F)}bz1aL8=x^OWF@-Q+SzxkUXbM_~O2e1Eu
zYY`18W`?OLybPu)tPHO{{$rT5?Hj|S?ca&2VTh^=5*#=f=4bOU9J%qE;oQAH3>j{m
z4A-9gVK6Fv$H2_Qz;Jz{FoU!ZGsBEs-x#bl*ci-ISQvu3KQgR8^^>3@h;qQ5Ispb}
zT{Z@h#McaOzx-#IpT)<J;K;#XQ1Xs}my?m<aI+x86rhiD=Y3|77hz&}FkOUU1JLq7
zpd$zYq8xC0vM_@f9}@$A{A;jz^`YDh4Po32fn6UNxH%XZmgMm<6fO9|(7*K?12DE2
z{;U*Zxcul3g8?vv2mzuT@MNY40}s$50jL9Ng1H%*Be)qNCwv5p&(7duC<HoS0?+{<
z0CK>c7k?Qv^4}7&ALw8r8YFi>A;8bXz!wJzfw~ZGhQ@Gih5%p)@B$sM7#IS@3%@Y*
zZ9#;<C13~`QY!?|)4&2?f{X_yOyo2$8JGt0fN4NMl!@W~G%BY7<Xmv}E-(wab1~d_
z3XEf5B1F#xR_d$_=Blg=!95=t)}5qME<i2^gn;G1$=jfE;4{PBmwz$Jf!Ck@F-+a@
x9UL9R0HV?WF$R&VX4C<rAut*OqaiRF0su@w^`TG5PNM(-002ovPDHLkV1nQT<lz7S

literal 0
HcmV?d00001

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fd90ecbedb13399b39874262d9123dc44b92934
GIT binary patch
literal 349
zcmV-j0iyniP)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{00006VoOIv0RI60
z0RN!9r;`8x0TM|>K~zYI?bR<xLqQzC@$bERZ+i>EKsN-#Q}7=Kiy&$-*aU+hMnNze
z1i@x83xZJvHJgkw2PU)CA;aW`mMQMBdG8F?^Mr#X?-wq7fAIUn6Rb7p<pe#w?g0;Y
z;C}#<L$b18Y+aOU$Nk&O1xs`RLdo@Baeh2HskGnTv!l(v)!Do;Is$WJ(deK&y-jz{
zKh_Uhz{X;1jE+E3lE70#0ne{0(~Oj*F**W;oB*`u=hd1xCydb%NV^&c1b`3-LA#@k
z(GjRO6);?uKr$c$LA|Mr(Q+iT?Cu}CwHLLu6n`nbFcATlcd0R2j!33<f7@l6n}^PH
v60XeTfrG2hvubLL7C`t<-vb`-z~A!?kQj|etnN^y00000NkvXXu0mjfy6Kdw

literal 0
HcmV?d00001

diff --git a/core/src/components/badge/test/size/index.html b/core/src/components/badge/test/size/index.html
new file mode 100644
index 00000000000..addbff82e40
--- /dev/null
+++ b/core/src/components/badge/test/size/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Badge - Size</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Button - Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content" no-bounce>
+        <ion-list>
+          <ion-item>
+            <ion-label>Default Badge</ion-label>
+            <ion-badge slot="end">00</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Small Badge</ion-label>
+            <ion-badge slot="end" size="small">00</ion-badge>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

From 41f42103be4a59cbb50150ebebbd2c38b876f7d7 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 12:43:31 -0700
Subject: [PATCH 03/14] docs(badge): update comment

---
 core/src/components/badge/badge.ionic.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 11e8f946681..8b04a1d62c4 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -10,7 +10,7 @@
   justify-content: center;
 }
 
-// Button Sizes
+// Badge Sizes
 // --------------------------------------------------
 :host(.badge-small) {
   min-width: 32px;

From bf2657269b85da96449aa1d93ee641abfd743460 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 13:24:45 -0700
Subject: [PATCH 04/14] refactor(badge): add missing styles

---
 core/src/components/badge/badge.ionic.scss      |  12 ++++++++++++
 ...l-ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 418 -> 459 bytes
 ...-ionic-md-ltr-light-Mobile-Firefox-linux.png | Bin 559 -> 536 bytes
 ...l-ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 349 -> 440 bytes
 4 files changed, 12 insertions(+)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 8b04a1d62c4..9d786ced9a6 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -1,13 +1,25 @@
+@use "../../foundations/ionic.vars.scss" as tokens;
 @import "./badge";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
+  --padding-start: 4px;
+  --padding-end: 4px;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
   display: inline-flex;
 
   align-items: center;
   justify-content: center;
+
+  font-size: tokens.$ionic-font-size-l;
+
+  font-weight: tokens.$ionic-font-weight-medium;
+
+  line-height: tokens.$ionic-font-line-height-m;
 }
 
 // Badge Sizes
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3d6e7e145beeca9c452ae7ef88e69e1d798ad18f..9fe9cd84a5d3906717faf10897be097ad401eef4 100644
GIT binary patch
delta 420
zcmV;V0bBl}1Iq)DF@J?gL_t(oh3%EGO9D|G$G@-ht`s%XObe%q3ZcEmAZRUUY7{r;
z2wDoFK?;J3XliY>_L`!9z#3|ZRH#g`lGHBGdkvR?f$yFNBEtJFKkj}X-uv)=@E*Z(
zmZF2{>Ez}@KnMtd?h%MB*m1w_gL*oI$D={4FF8OgFqQ-&bANp}jJhC81Sgjjd{rs7
zSDaW|bhN}Y3o*NjZ})td8j&y>%OjQ7;dK&Zj{PX96v1c?I^|<5oq*d;5DrPW$!JLB
zbpSx&lj8dB8-6#zcu?YESYZkTJx2TWLvQ$B{|@x`a50tz6q`|NjccP?Git9)xERX<
zX5o3q%^0SDT7NaF{BMjlsotkt3@bKPGh3gdr*ZY+-?=}(>Btq$8CIAlP^?fS(;C7d
z31b0c1Fw@{c2dF1yN-u!jf=4?008ks8H4~A8v{6qxNx=Qg<S!5&&z-F<zbpdLU?tP
z1tilNo(ei<CS=S{D^N8co+x4GtlSdQET%VMyVD)7p&bwq0zyCtv@<_iE6Kqx7Jr`r
O0000<MNUMnLSTZQVZ0Ck

delta 378
zcmV-=0fqj{1EK?vF@Ic1L_t(oh3%HRFGEoPhrjzM+ITc&AWau)5wQ@X#3SJkFdD=t
zVl&uCtR|z_B+OzoB4M)#A(84tizd~V`!d{04DRV^a+4a)FFCox_e<`Vlk?J8eDP>u
z^j7{{2`B+2palMffZ0qr-ES~HXp+slTt8aat{e+RV0Avq-hWCLdVS8$?<^K}J}A}1
ztWgX`Hntj-;xUcW%{bXNm)Y$C`J&6xR0oBU$8FXQWS93=LjkEZFfkONJEn1bQROCM
zvwKnoU}m&U$YdfVkWBcs_fP-kE|fhS7gBwOkcB1?30NtnA!eZoRKEPLQEzMYQL1`E
z7MegN=KzrE^>gdVgpRJmbKVg$nMiHJs|Slr&SiNz%G0aE+*msRN9R=`lZht#CY(&0
z9Ip2;JYZluuzyxz?VyP3iCJg@KS^|I)GY7MLq^1c($rDRukF?>3rfo`BPE~&lz<ZW
Y2IyS3c<81X5&!@I07*qoM6N<$f^<Kw-v9sr

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5cc576c098b2750acad889e21c1336fc491d1515..030afe81e51fc487d083d92d5cb02e3b7925f522 100644
GIT binary patch
delta 510
zcmV<a0RjH61egSnB!AyYL_t(oN9~r&D@0)!#-DM}jKy&o<5n&UmvQ|I%tT|NWM`$M
z6v|*|7B((LW1&zilqiX;C`%bO`~fn##)61x95dvg;T*nmrWqDEr&E*E`PR?(e!rgg
zeV=nQsQ0|%506F#P#sVmP#yRe4%n)7u-C>R+d$#k$76Q$8Gp_d7GEP&j^?|-l}y6s
zN-gHvY4Ks#UI3=TSmdNcp>LUmbCnfq%F+Ck_L2bm6M7gkC=}QkoZfIS&>Eai8^FH2
zBdx^?jtAsu6ammW4el2Va9_Nk%yAd4;TlMQr8E`=T?}sgyrkyjn)~r{_p1Z>=@gD9
z^`iCGVSl*DQhyhX29p-%ejhydyrgFP=v5g&NhSsNxE|}f0n|7@0p@Kqnkuxg4*7`#
zoTSF(4nzi^iU4>d00hmZQh>ZP3MW%~Y>@&MQYdsnEief!ATuDP*-_ep&=4M6awzU$
z!T?)?iKr}zL2d^F??Z41f76_K6b_;A;@(&iO0%L-)OXF`@QOofd=y#3WcXPg8LhYA
zNgBz~C|X0|QlnXmg-%+udV_33xiJ_-y^D_+U3(Ji%F!qW5H7Y^b#T<hAxDT}0y4Al
zj1iK8U!z!#Mo|<;`iEIEid6vB0o4K3fk->>0q~G#u(G;q)Bpeg07*qoM6N<$f}p<Y
A!vFvP

delta 534
zcmV+x0_pvj1g`{;B!BivL_t(oM`L6NdHJ7V00HBu14ct&Gz3ONU^E1VL<lf3GB8vG
za51F1a4`t-Ffts!`I{kg_9uo1um6E-5e+G3hN&sM45liq46i=^W0<t<8^fgS--)VW
zh^h+`95@)}XY(-}x$&Ff+`T^x8E%{m*Pi@gFe-h=z|6$JaDRQGFoU!ZGsBEs-x#bl
z*ci-ISQvu3KQgR8^^>3@h;qQ5Ispb}T{Z@h#McaOzx-#IpT)<J;K;#XQ1Xs}my?m<
zaI+x86rhiD=Y3|77hz&}FkOUU1JLq7pd$zYq8xC0vM_@f9}@$A{A;jz^`YDh4Po32
zfn6UNxH%XZmVe~&F%&KM!qC6<8v`)582+pjW4Qe24}$?Pga`qm9PnhO2m=q$A_1ra
zYJ#~Lnj^RwA}4$Vi_gyBV<-eVU;@wqAOLc}ofm%@H1gjPvLEPRA{r!jKq0`-#K0E^
z34yv0ZidEiZiWD02=D?OuoxHu#S6bM^ld?ez$IV^7=KbL1klsK0$_rS2PRD9G%y*M
z2J(PuKtYs=;r=u#rvc<#aP}@R3%YYL+;|F%V_+gg&jnWMtPJL=tPH_D9~su2q*5+G
zE(e5w<-p0?pmN|d!`+vEG0K70pZ+mS-SHh99mD{l(f~0Ak*j9Z0iz)>8UmvsFd6~?
YOhNUbPY=jWqW}N^07*qoM6N<$f*@t%XaE2J

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6fd90ecbedb13399b39874262d9123dc44b92934..94ffc598e3fda824bdab2e361ee2f5696a90afed 100644
GIT binary patch
delta 396
zcmV;70dxM{0=NT^Hh*nNL_t(YiDP64dC5Raz(iBiM=cn&VCY+r?ZJ6#lJL*vq7SAC
z*93DjG7=?)2ACPNO0h~LIdRNP<NNi8Ve{Eva-z&Z=Ip=!FdV-A8^07LV8m5aT<sUq
zkY-WOdwb`_Ur|1$htq|>{`@bI^5*Y9d{USIdl2z)GHS`NTz`H1=gy123=9mfKm9v)
z^S1~uld?E79x1FwVYfg+fQf;D;pGQ}lU{!O$H2fKF2ICGiUbSTSQ!}@7?8dE`ws&H
z0|PrNBOWOdEWic+|0h`ry9Gag|7T!eU}ZswK-fQj|HmVR)hHIMqL3h#Knhk#0VW0p
zhUf49z5aw#ihl$jeER<X@}oamGAx?XEDQ_`;`~fj>Z~t6{=5I`FCHlpEMQ<@=-&8^
zfq`Lvqrl=^z7y?&?5vD^o4@`0Pe2M2;LORF9{zdp;h(V*tBoex*B}48H-7Kj_>G_x
qCcv4KsRf32aXo6ms0Aa%0sxkW)SI)=7#;us002ovP6b4+LSTaSSG_?1

delta 304
zcmV-00nh%p1Kk3UHh&UHL_t(YiS5-dNJBv!!13?BdvALS!az3!!&C4d28$qSG1vry
zAVxtj8w9~-F$;oG1vQ(DG6yEJ)gi;=hL$Prv3c(d*7JmeCGQt5e1Gu!#1pJF=;Z`G
zz3u@Ic;J5klS8tyUu<2JYRCQC%LPkx0Yb_3UU7arI;phZ-hZ>B&A!#yyfHcgb7Rry
zpgg@zcg{c74_m;-Vr-0#KvI&xQ$qpIuPW1wl%+8`0)?CawC3m4nm8wn(Gf_y8VCe{
z5C}oLqm9uKs5ccbT$VsGAOk_Ysf^KbB(&`AAG@^|wY3y~DZMZe0hf2FF<OpDrgneZ
zWty9Z&U6y4%qir7gR9T8YHExYK=@DJ10L|e-}4QS7>!4)?og!w0000<MNUMnLSTZ7
Csf&~V


From ab027b89aff306df6ae167626dc10554de06f1a6 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 13:35:43 -0700
Subject: [PATCH 05/14] feat(badge): add medium size

---
 core/src/components.d.ts                         |  4 ++--
 core/src/components/badge/badge.ionic.scss       | 10 +++++++++-
 core/src/components/badge/badge.tsx              |  2 +-
 core/src/components/badge/test/size/badge.e2e.ts | 13 +++++++++++++
 core/src/components/badge/test/size/index.html   |  4 ++++
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 517586ff279..45bb5caccb6 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -410,7 +410,7 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
         "size"?: 'small';
         /**
@@ -5642,7 +5642,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"small"` for less height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
         "size"?: 'small';
         /**
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 9d786ced9a6..9fc7292deff 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -16,7 +16,6 @@
   justify-content: center;
 
   font-size: tokens.$ionic-font-size-l;
-
   font-weight: tokens.$ionic-font-weight-medium;
 
   line-height: tokens.$ionic-font-line-height-m;
@@ -28,3 +27,12 @@
   min-width: 32px;
   height: 32px;
 }
+
+:host(.badge-medium) {
+  min-width: 40px;
+  height: 40px;
+
+  font-size: tokens.$ionic-font-size-h6;
+
+  line-height: tokens.$ionic-font-line-height-l;
+}
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 59da1fbd133..e8bff6495a8 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -27,7 +27,7 @@ export class Badge implements ComponentInterface {
   @Prop({ reflect: true }) color?: Color;
 
   /**
-   * Set to `"small"` for less height and width.
+   * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions.
    * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
    */
   @Prop() size?: 'small';
diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts
index c9c8aeb6ac1..3d277a4e959 100644
--- a/core/src/components/badge/test/size/badge.e2e.ts
+++ b/core/src/components/badge/test/size/badge.e2e.ts
@@ -18,5 +18,18 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
 
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
     });
+
+    test('should render medium badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-badge size="medium">00</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`));
+    });
   });
 });
diff --git a/core/src/components/badge/test/size/index.html b/core/src/components/badge/test/size/index.html
index addbff82e40..793531d4e93 100644
--- a/core/src/components/badge/test/size/index.html
+++ b/core/src/components/badge/test/size/index.html
@@ -32,6 +32,10 @@
             <ion-label>Small Badge</ion-label>
             <ion-badge slot="end" size="small">00</ion-badge>
           </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="end" size="medium">00</ion-badge>
+          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>

From ec161bf7651f4a307cde67b38904d1ce1ac54605 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 13:37:53 -0700
Subject: [PATCH 06/14] test(badge): add medium snapshots

---
 core/src/components/badge/test/size/badge.e2e.ts  |   2 +-
 ...ium-ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 501 bytes
 ...um-ionic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 924 bytes
 ...ium-ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 473 bytes
 4 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png

diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts
index 3d277a4e959..2f2c426e12e 100644
--- a/core/src/components/badge/test/size/badge.e2e.ts
+++ b/core/src/components/badge/test/size/badge.e2e.ts
@@ -19,7 +19,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
     });
 
-    test('should render medium badges', async ({ page }) => {
+    test.only('should render medium badges', async ({ page }) => {
       await page.setContent(
         `
         <ion-badge size="medium">00</ion-badge>
diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c1265c54f4acbd191950f5cc2b243f9420f8dc6
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px$uSrBfR9J=WmcK6pVH}5_x4lEF?LdM^<7Y%H#9)ya8H`x)2bhc^u_M7K@eha*
zV`H@uiGfL28u7bQZPS)s&v0#nM7-y{(BXZiyUXY9ect!`zW2U@sXLo0#`oU>KcNLx
z(SoXIK~=P%Dq2vLsuwiezA)Hfurd>3xYxuq1n2PrE4vx?j`F|C{e*CHn(1lrbF$Vz
zI3T#ZwMgY`2HKrIPHrSCjmzd_a8=@^iF(2T!Omfhp7|#R7ZNOPrx5~{r$erDo(ql*
z)Bvy<%TgZpt%EFY1?Y?Vi8lCL<vbOvHK4Wh;j25V@;sfhd3Y%T(ADgh&Ur3aUneTp
znf&Kzo60%&;ee3Nc`oRa_@)r@Iq7y~gSNz4FBau<vPcV-%L5SkQle0)tf{Omo%3Aq
zwE*!)r|aDxCV8+1nj)n|ac@cIJQoCrojO0*`SBp-v6&kUVj6HBx42FeUFBqOwUcx<
z`8Zu~BoY){+*mwkY=*j>9b#fV$^LQPRnBukfc`dv)!7gueI}+~aQ4j}E1UCN@UN-*
r<CYdwMGLB;1y#|4s%Sw~w4f^Q_L0~kw<krQ00000NkvXXu0mjf(_ZTK

literal 0
HcmV?d00001

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf273fdf7537e63ed4a5e5729021c5a9106090ba
GIT binary patch
literal 924
zcmV;N17rM&P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T7000AHNkl<ZSV!%a
zSx8h-7{~v279AUx(V0Xoqr|KPvnZ%2TOe9!Ar~^Ss2)rxv_dOOlLFJq2&_c1P@$}c
zvdB{NEfOJ0D@bt(i_~1k8OOn88l7=E_ug!<2hY8X4?W!PWtjQqp7T4u^PTTp266ok
z{KvsafG+NiWY9%{kPJ!&T{Yn9^HL2;23<Aa>hq#&@W6U^oY|{J_<RMdHV5ikCy-G-
zf-jx6X)LQk6u6S$iFIL0C>0EvyKKmPHj3x(t)iGk0VYPN@G#Yzo1neN4vm_DzmE*&
zF$W^kjQC-g<Z?@b<Y>6&2Tv7)UehE-tqz0+$l)OGO|du3q98>9elOHvp}!2LN{3NU
zZGl1tR9(<uTcjI`YArZ^f0zR-JK>GPn^mZIXT|=TW=s;W>^L<p$E(rOZAbWNqhO1I
z0mB02XuGAw7}+7;BYKSg+0mUV-B3*+JNoPhP2nf*Db^v-SB4E)Ce*i0aKCwbFff+R
zg+dMlCmYZ`$lIocV8HFf((5b@+Q`-}J?S(s1wKjUQ^f1xt^_QP{JD7plMLt^a)L~O
zZ^|~|Z3_=h3&DUfYur(h?t{i}Hmp83_;=g@jSRi_bli8(gDfC#iVd$r0~q<`d|_`b
z&~o*;J8uY8AIE8ITwX9>+*)@$Nt+pv1yT`%10^#9?zuXISB<j_7)uO3r5IEv>fzzW
zz(6s$D|ZOhpJo}5J*l;%2EX>&5tiz#!NsI~wBOdkPD)KlYEY>FtdIE`oOjHC9@1u}
z;^$o*g8XFIc+rG9(m#cS;4KdEm!qRl3kzAe_NbowWMjt)H`HWK2k$J>Ay_BFmP;nQ
zY34!Lo@grLPw~ItGl2>QWCv*@MIJ_q{Op4f<X4VyeXue^1Gd%Nsj(oXgztmJ$zDj>
z>VcOHRz&BUIlGxLYUCuS(L`>Xh&1ORqgfOM$kriyP#6Z>R(p}&#-3u+2)Rkpjp#D+
z+qsA|^UwKOc+X+bPudK7)36I;Z<2l2&8Q^cLPHcFJ1E<3&PS^ev4Gsg6AsjoewI-_
zjHWL8v^kfPd|sj_qLz`nSk92V4LKE~c=16voTxS<bj7p%KhXwf8-O;R1V}SP%S#4n
yhG==oAk7dhFBzm6qU9xnG()t!WRPZvmj4aVtBRNyE=z9!0000<MNUMnLSTZIlB~r5

literal 0
HcmV?d00001

diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe1e303c8481244bae5e4be4f14126fdfe9db955
GIT binary patch
literal 473
zcmV;~0Ve*5P)<h;3K|Lk000e1NJLTq001Ze001Zm0ssI21Dr2900006VoOIv0RI60
z0RN!9r;`8x0gg#TK~z|U?Ulhw0znwZ|FfgD>MCSmYC<HY)TKkGUZ6vCDC$x#&><oS
zI&|t}Pzdz^y+DTw0;5NWkn&K+AQCDmvDH>n+?@`Jot)iT!b9^v4fC6Ce#|h;N3fVj
zHzIY#D#Su8#6m2@KZ(Q2qRFTuxui@boKA|noW66SonF-}(oP|!-6;{KnO(mkljowL
z)mSV@8N)(KZSKyeoS0wr*1SiN$?;_^vhp^%R@gq$2tjh$V};rhPfzp!*iTms1^@@?
zN<+ukkR#GBnbO~jWhV*sNdWF&^yW;d%3ezbfaoCQQ(IzpFKG@wK3RLRRAm6XGT~EO
zVySaEA%stDiCJf4Fvh30#N}$M-sk#0f!9Tvh)->a>kXDG=m6s3)>os*B;ad3C_c3%
z25@mx2e2{gq7neC&$t~Fw~vjdqG3uoG5@(n0yLZQ`&=Zi8ft~bLzFSh?Wt#(nknUk
zVtkXo;$36s*Y)868VgdtLb4C~>S4LPFQ3{v@gL>?^<yCxVj&h{A-0?^v?k`2eyn~4
P00000NkvXXu0mjfZoSg`

literal 0
HcmV?d00001


From 2d77790849d09c2e11b33afd42dcec7385253a30 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 13:42:20 -0700
Subject: [PATCH 07/14] test(badge): remove only

---
 core/src/components/badge/test/size/badge.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts
index 2f2c426e12e..3d277a4e959 100644
--- a/core/src/components/badge/test/size/badge.e2e.ts
+++ b/core/src/components/badge/test/size/badge.e2e.ts
@@ -19,7 +19,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
       await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`));
     });
 
-    test.only('should render medium badges', async ({ page }) => {
+    test('should render medium badges', async ({ page }) => {
       await page.setContent(
         `
         <ion-badge size="medium">00</ion-badge>

From 7553d17fa49a51ba7c5f077e4d7a197308091e51 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 13:52:11 -0700
Subject: [PATCH 08/14] refactor(badge): use tokens

---
 core/src/components/badge/badge.ionic.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 9d786ced9a6..aaacf2b5f26 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -5,10 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --padding-start: 4px;
-  --padding-end: 4px;
-  --padding-top: 0;
-  --padding-bottom: 0;
+  --padding-start: tokens.$ionic-space-xxxs;
+  --padding-end: tokens.$ionic-space-xxxs;
+  --padding-top: tokens.$ionic-space-none;
+  --padding-bottom: tokens.$ionic-space-none;
 
   display: inline-flex;
 
@@ -16,7 +16,6 @@
   justify-content: center;
 
   font-size: tokens.$ionic-font-size-l;
-
   font-weight: tokens.$ionic-font-weight-medium;
 
   line-height: tokens.$ionic-font-line-height-m;

From 01254668a5f82054bd7e231413247f7d4e99afc0 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 16:04:10 -0700
Subject: [PATCH 09/14] refactor(badge): use the globals import

---
 core/src/components/badge/badge.ionic.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index aaacf2b5f26..0c91e21255b 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -1,24 +1,24 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./badge";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
-  --padding-start: tokens.$ionic-space-xxxs;
-  --padding-end: tokens.$ionic-space-xxxs;
-  --padding-top: tokens.$ionic-space-none;
-  --padding-bottom: tokens.$ionic-space-none;
+  --padding-start: globals.$ionic-space-xxxs;
+  --padding-end: globals.$ionic-space-xxxs;
+  --padding-top: globals.$ionic-space-none;
+  --padding-bottom: globals.$ionic-space-none;
 
   display: inline-flex;
 
   align-items: center;
   justify-content: center;
 
-  font-size: tokens.$ionic-font-size-l;
-  font-weight: tokens.$ionic-font-weight-medium;
+  font-size: globals.$ionic-font-size-l;
+  font-weight: globals.$ionic-font-weight-medium;
 
-  line-height: tokens.$ionic-font-line-height-m;
+  line-height: globals.$ionic-font-line-height-m;
 }
 
 // Badge Sizes

From 460b6c137af0ef512fd8e7e7441a2fa59a391a85 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 16:06:35 -0700
Subject: [PATCH 10/14] refactor(badge): use globals variable

---
 core/src/components/badge/badge.ionic.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index c1ab65040f1..21e6149baee 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -32,7 +32,7 @@
   min-width: 40px;
   height: 40px;
 
-  font-size: tokens.$ionic-font-size-h6;
+  font-size: globals.$ionic-font-size-h6;
 
-  line-height: tokens.$ionic-font-line-height-l;
+  line-height: globals.$ionic-font-line-height-l;
 }

From 0a7bb81d4befa9bc1ba1ad5288ae5daa51646613 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 16:11:20 -0700
Subject: [PATCH 11/14] refactor(badge): use proper var structure

---
 core/src/components/badge/badge.ionic.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 0c91e21255b..c233d4bd767 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -5,10 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --padding-start: globals.$ionic-space-xxxs;
-  --padding-end: globals.$ionic-space-xxxs;
-  --padding-top: globals.$ionic-space-none;
-  --padding-bottom: globals.$ionic-space-none;
+  --padding-start: #{globals.$ionic-space-xxxs};
+  --padding-end: #{globals.$ionic-space-xxxs};
+  --padding-top: #{globals.$ionic-space-none};
+  --padding-bottom: #{globals.$ionic-space-none};
 
   display: inline-flex;
 

From 1f782c0c0f2232edf301ad8159970617266850cc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 21 May 2024 16:49:09 -0700
Subject: [PATCH 12/14] refactor(badge): add prop value

---
 core/api.txt                        | 2 +-
 core/src/components.d.ts            | 4 ++--
 core/src/components/badge/badge.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index d86d9002b1e..7b71e2ad13e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -310,7 +310,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,size,"small" | undefined,undefined,false,false
+ion-badge,prop,size,"medium" | "small" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 45bb5caccb6..2d0dc800f56 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -412,7 +412,7 @@ export namespace Components {
         /**
           * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5644,7 +5644,7 @@ declare namespace LocalJSX {
         /**
           * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index e8bff6495a8..c2c2f95c54e 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -30,7 +30,7 @@ export class Badge implements ComponentInterface {
    * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions.
    * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: 'small';
+  @Prop() size?: 'small' | 'medium';
 
   private getSize(): string | undefined {
     const theme = getIonTheme(this);

From 647b21740b05e3e56e2d9d2c1859148ce19b8e4d Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 22 May 2024 10:40:44 -0700
Subject: [PATCH 13/14] refactor(badge): use new tokens

---
 core/src/components/badge/badge.ionic.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index c233d4bd767..54b81649db8 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -5,25 +5,25 @@
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ionic-space-xxxs};
-  --padding-end: #{globals.$ionic-space-xxxs};
-  --padding-top: #{globals.$ionic-space-none};
-  --padding-bottom: #{globals.$ionic-space-none};
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+  --padding-top: #{globals.$ionic-space-0};
+  --padding-bottom: #{globals.$ionic-space-0};
 
   display: inline-flex;
 
   align-items: center;
   justify-content: center;
 
-  font-size: globals.$ionic-font-size-l;
+  font-size: globals.$ionic-font-size-400;
   font-weight: globals.$ionic-font-weight-medium;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 // Badge Sizes
 // --------------------------------------------------
 :host(.badge-small) {
-  min-width: 32px;
-  height: 32px;
+  min-width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
 }

From ecd6359fb4983d38075ce35ff72bd4ec67faeb8a Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 22 May 2024 10:46:19 -0700
Subject: [PATCH 14/14] refactor(badge): use new tokens

---
 core/src/components/badge/badge.ionic.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 6d5a27c6757..f3015c7cdef 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -29,10 +29,10 @@
 }
 
 :host(.badge-medium) {
-  min-width: 40px;
-  height: 40px;
+  min-width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
 
-  font-size: globals.$ionic-font-size-h6;
+  font-size: globals.$ionic-font-size-450;
 
-  line-height: globals.$ionic-font-line-height-l;
+  line-height: globals.$ionic-line-height-700;
 }