From 79a3fd00dea5ffd56b885a05861d34341437bba4 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:44:44 -0700
Subject: [PATCH] feat(spinner): add size for ionic theme (#29699)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 core/api.txt                                  |   5 +-
 core/src/components.d.ts                      |   8 ++
 .../{spinner.scss => spinner.common.scss}     |   4 +-
 .../src/components/spinner/spinner.ionic.scss |  38 +++++++++
 core/src/components/spinner/spinner.tsx       |  36 ++++++++-
 .../components/spinner/test/size/index.html   |  55 +++++++++++++
 .../spinner/test/size/spinner.e2e.ts          |  74 ++++++++++++++++++
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 940 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 820 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 996 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 794 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 700 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 830 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 682 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 530 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 667 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 1115 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 906 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 1210 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 490 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 449 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 471 bytes
 packages/angular/src/directives/proxies.ts    |   4 +-
 .../standalone/src/directives/proxies.ts      |   4 +-
 packages/vue/src/proxies.ts                   |   3 +-
 25 files changed, 223 insertions(+), 8 deletions(-)
 rename core/src/components/spinner/{spinner.scss => spinner.common.scss} (97%)
 create mode 100644 core/src/components/spinner/spinner.ionic.scss
 create mode 100644 core/src/components/spinner/test/size/index.html
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png

diff --git a/core/api.txt b/core/api.txt
index caccbf316f..f956418247 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2118,8 +2118,11 @@ ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
+ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
 ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color
+ion-spinner,css-prop,--color,ionic
+ion-spinner,css-prop,--color,ios
+ion-spinner,css-prop,--color,md
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 1ab52a238e..057be08e40 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3346,6 +3346,10 @@ export namespace Components {
           * If `true`, the spinner's animation will be paused.
          */
         "paused": boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8689,6 +8693,10 @@ declare namespace LocalJSX {
           * If `true`, the spinner's animation will be paused.
          */
         "paused"?: boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.common.scss
similarity index 97%
rename from core/src/components/spinner/spinner.scss
rename to core/src/components/spinner/spinner.common.scss
index 2a8d61bce2..9a8dd1dc8b 100644
--- a/core/src/components/spinner/spinner.scss
+++ b/core/src/components/spinner/spinner.common.scss
@@ -1,4 +1,6 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.string";
+@import "../../themes/functions.color";
+@import "../../themes/mixins";
 
 // Spinners
 // --------------------------------------------------
diff --git a/core/src/components/spinner/spinner.ionic.scss b/core/src/components/spinner/spinner.ionic.scss
new file mode 100644
index 0000000000..ec673b4bc5
--- /dev/null
+++ b/core/src/components/spinner/spinner.ionic.scss
@@ -0,0 +1,38 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./spinner.common";
+
+// Ionic Spinner
+// --------------------------------------------------
+
+// Sizes
+// --------------------------------------------------
+
+/* Extra Small */
+:host(.spinner-xsmall) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+}
+
+/* Small */
+:host(.spinner-small) {
+  width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
+}
+
+/* Medium */
+:host(.spinner-medium) {
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+}
+
+/* Large */
+:host(.spinner-large) {
+  width: globals.$ionic-scale-1200;
+  height: globals.$ionic-scale-1200;
+}
+
+/* Extra Large */
+:host(.spinner-xlarge) {
+  width: globals.$ionic-scale-1400;
+  height: globals.$ionic-scale-1400;
+}
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 37c94dbe05..98023babf9 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -16,7 +16,11 @@ import type { SpinnerConfig } from './spinner-interface';
  */
 @Component({
   tag: 'ion-spinner',
-  styleUrl: 'spinner.scss',
+  styleUrls: {
+    ios: 'spinner.common.scss',
+    md: 'spinner.common.scss',
+    ionic: 'spinner.ionic.scss',
+  },
   shadow: true,
 })
 export class Spinner implements ComponentInterface {
@@ -43,6 +47,18 @@ export class Spinner implements ComponentInterface {
    */
   @Prop() paused = false;
 
+  /**
+   * Set to `"xsmall"` for the smallest size.
+   * Set to `"small"` for a smaller size.
+   * Set to `"medium"` for a medium size.
+   * Set to `"large"` for a large size.
+   * Set to `"xlarge"` for the largest size.
+   *
+   * Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+  // TODO(ROU-10920): Switch `theme` to `mode`.
   private getName(): SpinnerTypes {
     const spinnerName = this.name || config.get('spinner');
     const theme = getIonTheme(this);
@@ -52,10 +68,27 @@ export class Spinner implements ComponentInterface {
     return theme === 'ios' ? 'lines' : 'circular';
   }
 
+  private getSize(): string | undefined {
+    const theme = getIonTheme(this);
+    const { size } = this;
+
+    // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (size === undefined) {
+      return 'xsmall';
+    }
+
+    return size;
+  }
+
   render() {
     const self = this;
     const theme = getIonTheme(self);
     const spinnerName = self.getName();
+    const size = this.getSize();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
     const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
     const svgs: SVGElement[] = [];
@@ -76,6 +109,7 @@ export class Spinner implements ComponentInterface {
           [theme]: true,
           [`spinner-${spinnerName}`]: true,
           'spinner-paused': self.paused || config.getBoolean('_testing'),
+          [`spinner-${size}`]: size !== undefined,
         })}
         role="progressbar"
         style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
diff --git a/core/src/components/spinner/test/size/index.html b/core/src/components/spinner/test/size/index.html
new file mode 100644
index 0000000000..f045932d4c
--- /dev/null
+++ b/core/src/components/spinner/test/size/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spinner - 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>Spinner - Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>
+            <ion-spinner slot="start"></ion-spinner>
+            <p>Default</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="xsmall"></ion-spinner>
+            <p>xsmall</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="small"></ion-spinner>
+            <p>small</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="medium"></ion-spinner>
+            <p>medium</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="large"></ion-spinner>
+            <p>large</p>
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" size="xlarge"></ion-spinner>
+            <p>xlarge</p>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts b/core/src/components/spinner/test/size/spinner.e2e.ts
new file mode 100644
index 0000000000..bb62285cba
--- /dev/null
+++ b/core/src/components/spinner/test/size/spinner.e2e.ts
@@ -0,0 +1,74 @@
+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('spinner: size'), () => {
+    test('should render xsmall spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="xsmall"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-xsmall`));
+    });
+
+    test('should render small spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="small"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-small`));
+    });
+
+    test('should render medium spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="medium"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-medium`));
+    });
+
+    test('should render large spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="large"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-large`));
+    });
+
+    test('should render xlarge spinner', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-spinner size="xlarge"></ion-spinner>
+      `,
+        config
+      );
+
+      const spinner = page.locator('ion-spinner');
+
+      await expect(spinner).toHaveScreenshot(screenshot(`spinner-size-xlarge`));
+    });
+  });
+});
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..e72e1059e2c2386b03baf56edaaaec0edea8574a
GIT binary patch
literal 940
zcmV;d15^BoP)<h;3K|Lk000e1NJLTq001xm001xu0ssI2*kEqZ00001b5ch_0Itp)
z=>Px&W=TXrR9J=W+0RQlK@<S+x9hg*!kQUWRMPMI3k(T@E}gm*Srm1Nf)3q+ppfuV
zhprtu3z?YIKhQO(Xi=z3x02EjCFzHD$ffxn)^BdJvuf7vcIX{vX5ahx)ERfB5JK>q
zf;Jj}#~-L%{DI0vDbVKTrjC;Tfk+{W;@H?204y&r6BlR~1W-Pomo!ow9v&JA%IEVV
zBO~$_avXPcb!8aH=kqDw*52M;V?fu}*9^m88k(j9fq*ffp`jsTHJ?CxdwYg!K7qQs
zyD`wx(vr@aBIxq+64UTJpUGtO2NibeP$-0fd_G@YU7h-ds#!=br_(7PWLft0^;Q4&
z6gngb!rk4S95g&UY_(c-Zw?d=*YoppY;<&V)DTSpluD(r(f<B^gFGrA>?5UT&;XE5
zr{zOdtJRqA*9QpeP+MD@QJMmXq9{XZ_x1HrvXD+v8UPv_8|CYg$)r9YtWZ-^6B+dQ
z`1tnrrnN>C#pmbeia-ExadDwFNDu^UqzGzgXu#%<j*hejDN9Iwp#i|<a{UHSVK<hJ
zwD$IP`5ePA*=$z36EvI6Vqfi^o}S|23IG!m6Y^<M6nA!Zv}z8(_VzaR7^n!4TxVxz
z*fl)Qr&1{`+H-$@&v6`9E)t1Iv&EmV0|NutqPe*_EkLugvsfXw+x;<H1VthdWp57-
z4t`dnyp;feXf#RyA%rF;C$Xhwvsn;?pVFM1oYd6RU?pZ|X5?$|8$~6*zP|qS^z=tG
z4u?aTKOT>(f)GNxySvJ3Se6Zk!{5;a0s)p~m6?@k2~R&ZHa3)30)WTkiN#`HrNm+}
z`Lh&xY;A2R*OQ+Q&CkyhQ&=pP_4V~!E>{U9m&>iKt(nbcVk)(}P%`NK{oU*J5)%PH
zZEfxJ^mI5JChq1hFE9K1`%_a>Hk(Z?gV*a-dl_Vq6v1FnE#pVn?e?y&F1Oq5a=AJ?
zJMDIR*-J`)97}-^LeXec`CFjsXl`znZ#mU~5JH(uW@Tl?VzGRO!g1W{>gv<eQ`vIm
zK~f|ViG_s)lgac|3d1mqi;Kx*vcf`@f}}{N(|*5ye0-ee`O*%X&F1lV{C@w#!^4+K
zP*wjMbbNe#b90kOByMkS<MB8}QLU}5PN%b_rKO{zV{mY=y0q1UG>U)DDyhkqS7WvS
O0000<MNUMnLSTYUN5K~W

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d111f358818f86195ce5c8f91aa367040d0d32fe
GIT binary patch
literal 820
zcmV-41Izr0P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0008}Nkl<ZXhZE;
zi;)3A5S@(x84v*?Km>>Y5g-CYfCvx)B0vO)fD919-My)rt=*mO*^j%M*}Cg0#huUg
z>-XkOPp|j!6(Yys{R6Pf-aiAD2@rpSf#dNgn$4!|Vw2a8WneHEh}~`{4u^xN)oRXx
zFakjG>-AbDT`U&G?RJyTE(Hr9n7m3D41fujK#%|yi-j1E$7G@V{k~YOR?d*10eC*2
zqEe{{JX3+>0m7Bg0Cc-uxoGo{JaP;HfL*p)t=uH90jSsO;&QoY0NU*~%ZhC&`3&6e
zcd7ko6bc0is$4GH&egn;an3WJ&&6moax(dlggE&;9uKE{KUzsCAx=InYhMA80AQQ2
z&uF;j`IL?&fa!E9X0w_0{`q`%vVjXGY6Osn^S%Vo>2$<?zt<SZ4FDWgPN!1{K($&W
zH#OJ%R5CyTK<kV(;6hLq-)J-hS|1hw5_d&Hp66+G3<2O=$YlVN$wVM;qYL2(X}bsF
zHrWsWoO^MEjD`z+5Z9xrP1gBVg0py~4!@m->s+r_jRl*{9FDc6Qc24xXz@M(ZXqkJ
z*|5_jIr#u^Xo25SVPi3Kix>F?d$iD*nA*_r1?X_Q-To>G+;Bnpf2f^Sf0$VKO-C}#
zrJ^0OHdevRXS3Om)dmY-<0peVo8X$gUe6zOk__OV&>kG=^?GS}Vx$QF{V5Pg9{UkB
zRO5yV<Y>`U1)u`O!{P8-iC8X|#^C|SK0Dks=};|ftc!PB4KR*5EH@3rwM^^JI9@lc
z2UUJ}HP}cyv4%`gb$s6xl<tF{kG;W>1cYJ)HjGII#|o;AlOOtcQ^i$+amnLzu>h3j
zxpBLxdg_i2HLi?XKuK*o5dd5a6$2ZTJH;iF=6$#gy5poyml%MuSZJ2pC(<NJeHN0z
z@24?_Q~=aPAqmV&ql18~0MH)5^|IVV%mg3^1k%ETYQ;@}&=Nx?cw|Xj{q|b`f(gQ5
y;4XMZ;B_$6eP+l5uhYoHRETc_kX1hKe(w|BXFreUyCO;e0000<MNUMnLSTa3y>rF@

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddd9ffde0104b8185e0b75765cb38bc6a953165d
GIT binary patch
literal 996
zcmV<A0~`E_P)<h;3K|Lk000e1NJLTq001xm001xu0ssI2*kEqZ00006VoOIv0RI60
z0RN!9r;`8x1DQ!gK~z|U?U~I=>p&F8&$Ou#P3)rJqJnPxAk`-j#9coKBGzCwK7gWh
zA>HZ=xKNaWf-42ZS12M#MfbYshpRSe1wj|;B280s7gK7SiMPGIrn!sz-}TH)&aY?Y
z%$Z4$X`1ja$>TNvssBK&^dG2|z6Gk+>zbx@69vm2s9LQ`k|fKrVHjNo0+W(q7?LF6
z*5&2pkB<+!k8`pCT3K1K5+{>MH-S!0PUt9ZZ*RK;R4SEto+oH{p1-`jbO$INj}tV#
zy}jL}`2v*5Wa!B{Iy&km%@?3(G)mA&lGJ6IPoP{bhY%u`j;gBN2Wo7L$H&L!*MrgO
z>gv$YknPsxtT5O3__)=`Fig2z?tXYoJY|Za5R|c4%oQ3FPZ^zGb8~Z!PRnoP0f1~a
zOIT-TXWf7Sz(9pU!D{mPd}Cu{F7bc|0G^+pt)^fw==1qp;sFl;yuZI&O>{YPNab?*
z<>f`!brQ%eMIw<vAi%OLLI@!=Jw4q3;yBLQ@9piaJ3z0muhyS<W;_582n4JRl}e>n
zt2s@h>-yv4qt${jJODuCRIOGc^3Dn6ayjC_jxjs{5DJBe-d9&wP6N>{8W^^vBN~l5
zT_VEaFyRze&qi^bn3%A(IbB>;RrPwkR*!-p;HE~}H}5@IhGFdP?shmCZD?m_r(UmH
zEuR3GE1%C32Q-f36h(0&JjG(MudmPQ3n5e}6maY35jGZ!5&t6|k2?W0KR-`65=F7u
z`U!M>eND&q@bK_wX;P^a?dA6N)&|HlO=2Yh0L!u$7Z*Q8lTN35dU^;KvMgKsd;wAv
zWnf@{7{K%Vk1(avX`)5}fZy*Y(wV$UpPru5A!S+i;NakIXi}*Z9UA~RKR+jW+PrL7
zTU(<?0>Hw;La9{xQ<P${NUvh7L?S`=w|^Z&->I?s`}>p0WSe`Ys;V0s8$^aTwYa!w
z7)Dz_rfF)L_8k)dc)i|8B(lH1e}8|k>$-JdwOYNqyW88_3x~tRUQEzvnr7?T9tg*2
zeSQ7ACpN_}%*e>d)YR1E<mB-1FvBn{ha?gS+t{=K!a6%Uqw}s~`Tc%+75^EKX_~64
zE-fwnJ&i2O?JU05Kv*|7H=-yK^{yQughWxa?!`X?gq6?dH#av0L1+g>5QMF*t!CA1
zQ^@S-Yfz<9$z(FwZ1&;d;pyoKU!*vW8yp-Q9UTpYLNhZn!C<h1CwB<soPGgP${GlF
S06IGW0000<MNUMnLSTZvP0|Yh

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..14b3c9113e802ef0756055724ed513bc2b664bdf
GIT binary patch
literal 794
zcmV+#1LgdQP)<h;3K|Lk000e1NJLTq001Ze001Zm0ssI21Dr2900001b5ch_0Itp)
z=>Px%)Ja4^R9J=WmpyALK@^5{HwIh~6^m#Ra23JEE`bygt0-a{tb%{QB9(}RR%x`b
zNE%5<{()ejB4QK-k>FRcDGVqWNMu)|*qA^BnOm$^$8pUyH@n*8tz^#G_nC8Mm>I<Y
z0MRCdZG`#@-aI%SkJoB7VaZ@Yi9|vok?ij7_WS+CC|^Rsi9}*+Ym1$e#bOzc$Ljz$
z8jbDkZMYv^uU8;22KW5z>})g|!C-^IAov<zU0oreo0}Vf%AK|P`T1EYmBLiF+btY*
z20lMOhpAevb~qfa1FTl7VQ`^P5R^IrS1J{lYBrmNrcQQsEEa>oPN$Q<y}Mih0K44|
zk1!0gri$O*-lo*Oy}g~Coi!AUf{|S&ESRS0&4A(aS)eDF!{HGBl}sj^fZ;{$cDq7=
z8HSnuW}Av3?d^0r>jT3TzrMcqdOd!rG)=?XNTbnAzy}8h(@_8ba-RHLh~WeW0C;?S
zgaZzTgWt2lYPG`tPft&?OG2m9O#?WN*Xwn@s1!ws#p0<sNs{dN1RM^B;Yl4IAM*u1
zJUoP*FE20Wz@ML=$k7oBg?>)GxVV5l_xJZlqtP4~0C0VM4JTn3me1#ZLd|3{aFazM
z(cRtMG&=Xn)a&(do<gC><#PW=&1SQ5xg2&g8jWzm9JpLABQGx;$HU?9cd5Z(5XW)Y
zM=F(8tJS4o06;VvMf$_O>|3qYD#&KDX|Y(4&oK;3CX+}e$6uI8BqHLH&*yu1cvyxk
z7K<K_hx5bR+uOx_G3RxZPNz>#Pv76)7egwQ%49MjgA_##27|?9nM@XqMr}45$8?re
zP_NfXlH{ylMHvi+Mx(LJe<>IMFdPp3em}C^RuMrEfk5En<KqkSufVKcUS3=-7eNp!
zB3&+5yWRe$E%zF8>i+&dl}eRLrGCFZ7!24eR;^Yml}eRLb#!!Ox7$xnPF8gL2AE&{
Y0d|JSO<N~;m;e9(07*qoM6N<$f<fSCO#lD@

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ced01a6ecac0ac1dc873aeb45a8cf0e73c62fc0
GIT binary patch
literal 700
zcmV;t0z>_YP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T70007mNkl<ZSV!%c
z;jzI$6h=1{paN8Y3Qz$hPys4H1$00ORDcRl0V+TR@4d5cHj~}#CLtt#*qO|jkz`N4
z@7~>e*ZcV!;)93x1x)GASHYA5ibw?yhl6~7y<Sf{&(qI40fB3`+oDpbh|OjripAp7
zlcagj3aH?2x0`%-tJRW_d5jRC38$b2gMpaO=b1Bx02_^lP_Y-JSu7T!*X!jAh(e>$
zC<Kug93Z}e=kr;ho{Bp~Ih)PIa5&6dIW?gVXj89Nt6A;NlGX>b#om6u&vgy-Eymtz
zwW<m83F`TPHhc4qJuL>i-L6=#*P4RY>ovFCBM2g6key<;+i8HGQpZX_GeMforr2(`
zSthG<E(z#)o_50*(4v<s%%p;pRF})ee=H9LO+dBGS(Aj?k1Wn|lu9LSn^ht?v-os6
z$znB&VcRG=osL+oR{zC9-V1fq{1VXi1zA?nv=-*FrX2K(1v62wmNFmEcMiY+432WS
zED+7#i}^8`OvH3L)o#o}MVor#@mTU`fE22zc)#B@$l%SdR?;R)p-_<OsV-9MNtVl{
z==b{}j(3#&N#_bRO*HAp<57d;Ybd{7)ieP|?_;(Xwi+}9h`d0WR;xJ0@-%}uSMe2m
z57yF6nrpAKai_wu4H5^)N3)x31<q9^x!Mco(T6KW6f}Sox~%xF9S1ikgxL|I%D1Q(
zk3BpB#AbI;U1HQcV8Sjl#!N@B74WFTso3*DR6r>+ani&g&yo-*8@J!b0xA$Jr-6@C
zGY%Zp*n5+%2#Eoi7|VD$u)+E<4vPQTzJTH*A34f<2rvkO^(y!Q=Tc#SeL!%jWQw!W
i^^s2lCQ<Db_xu9ZF!Gob7LOeO0000<MNUMnLSTZqA4UoQ

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8038adcb6aebcab586adb52bf290c2baf9af285
GIT binary patch
literal 830
zcmV-E1Ht@>P)<h;3K|Lk000e1NJLTq001Ze001Zm0ssI21Dr2900006VoOIv0RI60
z0RN!9r;`8x0`o~kK~z|U?U=t$>QEHN54ABEr9qesI)Q+}L2HOoRtE?F01_AdTZlvg
zHEg=d;HW5x8-~OfnFxWzfV$YAaUo#QshIPIlIx|^Cq7$P-gn}jd+zyg&;4~$3nIcO
z#EgXcA3S=nBuOIx9~~Xd&(EKnoR~|-UY(wvj*X20fYoZfyu3uy)C0b~y`7w#B>#!y
zxMHzr68JOKilRg!k@xp^+Vb-9VtT3*i3DwDSvH%^nlxP`seXNZwcG79cyDjdJnAPn
z9*@)1)z#IHkB?!1eLf!zzP`RTmD&Xti$$6m4u{RAqPnYdxf~7N-rhE1*M1`g01AZy
zZQ9t_7!tTvtC6<L<(i$H9TNEI>4~)6ZubzVUGUr68)<7!vr%d^8qH=CsWNLw@A1yg
zj>F+#7{+3;jE|3Z!BbOH#G}<}nE`G#o8&jgab2*><s#OHhX*sjbXXO~0D#}`C)VfZ
z=X$+vELD;u`ju003;?XHt<ioL7Z=8YH337R5C8xomP#eMLl6XGZ%56<DwPV7M}p2a
z09;*N8AZ+K^K|4uAfVd2U`-Ve3<eE(7CW8J%E}5ISro+{uq?|ChlBQr#bUn)N25_X
zrqk(cx7$5nL=;7lc4Arf{QUek)J!I$7OX_6REqR|f)zzsT3Vw0CMG8SnVrdGtX3->
zjpunqQFOqFSgls+TTGqz?(Xi7*1OZ`M59s7Tx~Yn-Q6ASrY-2t&dyktg<b`N!2$Pq
zKA-1#UNc;`VAX;VF`Z8LvjIR5gu}x_Ns{`9JU%`i92{uQE1{;->HZ-W)cYck&1Sc@
zw%YA>e-{AE%*=Q^p6TgnL~ONM_xJZ-)%`Y`?fCe3b8}Ot@2jL$tJUS@W!-QCisyOF
zx_*;tB1KX5_xCmDdk{ID&QvNz@8O?;RmrlPOePl=76w5E0s&DJ$u030>94V_%H?t{
zm%F*Ssnu%rdR>-f0N^-oZf?%&^$LQpzP`S=xHw?6AApV3AJ!2ByIeO>5&!@I07*qo
IM6N<$f(R~;y#N3J

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4dfd2a063686214a64b1a14ace4f43bc38d336a
GIT binary patch
literal 682
zcmV;b0#*HqP)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{00001b5ch_0Itp)
z=>Px%WJyFpR7i>4mQRa$Q5eUcLv$CntgdEZMoA%>ou-s#F=fMw#D<lfg|d>e5lZ9@
z%yM3WS1?P31>K}95W@98vB8<e^*b)}r<rkP^ZTyOea<=G&pFR?&gmkIG5n=uf9n2U
z0_O91E|;T8z!J@7Gqc$Y0Qr0#Q_=}Q+yMX~R4f*$08S|ig+e^fi*1HsR4NtC6urK_
zk_gMPrBaE?@=qypI2;5}C=_V99|8S-A0Z^V8w`fsZbuOy1Av#87xG}l<8irMPAB`M
z21cV%Y%3Is)oMj?`50qZE|&y$e}7Nc9b+t8EEWWCcXvlKIRF4~2DrVwr4LXlmE?m;
zdBfo_`ln{IDO0P}q;E7DT@M%zhopUTa|0M-=_R<nsv3<(bW<o4$BSmQS_!k$>0IO9
zYPE=!&1O4ZG?&XoqR-FI*W^b!{b-9Zu2!og%Cf8=2)|qYWHMnGhFI0>_0wZ#x7$fa
zAQ1Q+z~}Q3lgGzLF?a-2Di!HYv)SxV-BYO)nT`<RdHxK5F^<Jz(h=!&`upz5WRe_3
z07xVfr0WFO@ApqnPttw({r=Ht^tJV1Fz|Z4(pe6N<8U~90Kgber&FCyCmqc&Of(u5
z%XOhjr4ormqz?fA==J)=Vj&%dE`A-y<FV7}ESJj{=g(rXm`o<ER=eBndc7Xc^NmL1
zV$8$CL$O%oIPNU^ercP{#_#vT4;2gsx7+P|w+{fKs@1C7?Ut7ALm`Ab9#5@S`^@K4
zfT(u6ol2!lCewRsv)P=<WV+q%*AAC8_)P2dS`Y+55CDMVIF933mi^AeH=p5IUJwI`
Q&j0`b07*qoM6N<$g2KEz+5i9m

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb0a82f44f4495c1878a975d7386826471f7b6b2
GIT binary patch
literal 530
zcmV+t0`2{YP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80005mNkl<ZSV!%b
z-LU~d5QTd)kO3k<1c*QiL|{dL2oM1&$bbkC0U>M#_@-*QX2)#p-YPTqKHPrUmz_DM
z|4#R0&$r1hTJ}%iPe!093OO7OlIMB!>iDPuz{lgUT(4Kz@AopDPNR}25pcmR>g95g
ze!m}$M2P?)-|coKu-H*h0;ki-gx<B-;9x0%(P$*+^I7rd^SNxd+i0P;7aIbP$3wc^
zu7b7OZBvA;Rx1qwJY6gn3bxs7lC+?vfGWS;Zc5;Oze}gniSE4;$g)hqdcB?re=0LI
z;1U=PheAiBvg|E1&%t1zc+2HdR;yJid`U_G$JXn$I)}<8O@Xg9>_Q&|=m?m_Fu&WB
zK#Df>#m;t{iGVLeF=jxO*ck%!z1s;$Fk<vADQ3(g^?dy?pJW*MW8T#oCE!N^rr$^f
ztKDoiE7i2S<V0OaLg4<G|JVurj(|ELL?N5j1i40V{Cy%cXM#&9g5gd_NC1wKO(v7d
zNlB|6k4N*LTX38QoEhUg5queOI7GrGk|=Qz|6p9qnW`yT1+L?`O7%iZ>Q5E2Zndj@
z8{!p2+<mbL30jRBs9Wi430N?Q5NayhuMhhVq2?h&YU+UPnZ^V{UfY~E1q<Er0)Z}m
UAjy>rc>n+a07*qoM6N<$g5ay}dH?_b

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..60932bf8b8a567b7f01c264ac6b3fcde1d60f33c
GIT binary patch
literal 667
zcmV;M0%ZM(P)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{00006VoOIv0RI60
z0RN!9r;`8x0#HdrK~zYI-ImR+=};8M_okglg(f6YMm{U?2BaQ9#K0>EBE-N05M#!~
z6Brnnc>yy+A4xwL5ov=6iRftGL1o*VbI&=Kp2_`>+WqnWt-aRjP9Z`F{H83w>i%B>
zG)<dKCT0>4AyrlVe!t7*TCG;dB;5hm>op#a8`M}Vb~>F*29!!Ad@P!#N28IMfa!E<
zwOTQt*Xx<$eg~vdDePV>7R_?M0VGMn?kvk54hItf768C-IK+Tjt;Vvf$!&_82LPZb
ziizPPBSkiw&2W!KqvpCJge=G7@p8EsfN(f$W^w=k09dx$Eq?KMJnuVdnx?Ai9q_*6
zlj`-l$K!zzLI_1sv~V1U=g8B%tj%VFpE-_uC^FCU?^iVvi5PAS!yu!J5{U$6%Ch{9
zyC{m-N)QBOd}x_W29Ngp{de+1Zok<ggk)L9qb$qr_xsnv-|cn|hr{rJ5E|d??XpX!
z)0j~x6kY@5ayc@5WAFx;&1P?2*PTuWZ>K0~u~<9+5JKg08Lyyey4&sk+`ZfF(lm{?
zSF2S#bqDCWPPP*OAfL~FTaVptM`i{9AP9o4>z@D+LaM3;0s(Th)9GwBo024bv=&9N
z(P-eR8VUx3nx>J<AbR|D)HE%d&5p<8r~c!4J`@Uhy<PyoX0wqbiEMcs`(Q9|yWJ0?
zA4Ai1y;7-=HUCx=MOCX+GBcm2h}3*OCwupAf)Hjh8Qe4f05GH|N~_fp1c6}~(wAYF
zWHQ-qx0lQ1*ACA$_(JFNdA(i(0DL~5-ERNku0NMot$JjUO7#E$002ovPDHLkV1i5&
BF_!=U

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb4b59c5bae7409681ffed63c2e53daa8207269c
GIT binary patch
literal 1115
zcmV-h1f=_kP)<h;3K|Lk000e1NJLTq001}u001}$0ssI2C*-V200001b5ch_0Itp)
z=>Px(6-h)vRA_<i*-uFFU>pbVXEw{aBvCrWLW<H;BqT!7g6dF|c#5Dy9lCam=w{GG
z=n_N_9qQB}ArJk5h)&WUmk?2O=@KN`iXyFGYi4^7^L@=d&z7(0Rxj`OxINGF`)t#n
zbHjL^2R|ViwE?;2KeW*K4=r^573j;$%lY}aQW)9r(s_P<cDY<8lj-j6PG*=gk%S6L
z;b5FjC(E+R!o)#CKPrU`4h|}A%L)PtD~0%cJ~f2tAfO{7BT^q|6+f(E=;7fZl8EE@
z*4CCvNL~z0CX+Us?Hek^P@m8DJ(XF|NF-8TUJgTNW@c0srjvnAPENwg+S*#xJE)Kh
zw63lWhHh?ds>;hG4Lv(MgOzr>U2R?_>6?;3AOJ(h#>SAXN}UMa=H_P6b_~P5!@bC#
z0HJ-t2hh{gqqZ$88UVoc^)(D7NwR2HF`sAv0MTd^-eI*`)$mA00|1D{V(^ad2>mf<
z6o%qBZn0QYBB7%ZI+S>;MuTCPDxlKRQY<?Y6BB7DK@g(R9LL4uapjc{4-as!6nGi{
zfYE4#=iJ`jD#go$rfGQN4}`*(9sqE1a-xXs^P*`U&+{zHmX(!>c6W7kDgQg!(a|Ad
zR8&;FzP@H|^Ll%GMI%Z|O5*XjlFCFP0k;~r+b!%(-{$r8^@&ELQmLJtoqVoezS-E=
zfE#57CU`F|FX5SOZEZ@PQHR3;8=}#uus8Epq@ke!9_RP_l~Jy)uENzn{>8{ZXJ=>O
zp;oJv<G5lgS(Y`M&2aU(xj6)sVHjke8Xq4oHgt4!6s~KrSU#SktOpQFOH1$s0KoF{
za`BXli;KvjD=RA>hh;(E-rnl#>)|<Ct@h~Xs2EC$qO@8qT+wE;rBW$LD9`h2Yir2k
zGZ+lvaJaC_<KyF+ni^!eKp-F*jCkxgJUon?tkdZV*aZB3zfPw^78)8Fg2yAE9LIHb
zb|RMm0C>ILFB0G1->0Ugq}C@%64__akH!;;L}O#4)LN~rt)WmTKjr@ZeoIS>)XH|d
zJ&{NtCrZ9-xVpMRcB?;eyWJE;<xZq1%I$W`ENC{HBaw*IbWG+ocq|s{@9#f7J(XF#
zs;a8HyL(_@psA@zuh;AKdV(MrhKc{q#l^+m-rnx+?&IU5%sLK-V|#nsWHL#PkUtF!
z!+1O%nF0lg$KzobMqcs>REXE>EfNvKu<7aPTnsrud7cl2LdbVIUx~}*%Dp$|3Kg=x
zzAn=Za*xesgIjtbp~9oT`T2RNUzAT{Fc=mV7Lv*2-`17;*2^TBOoqeZU@#aA1`iGn
zo}Qj$23J;Awzs#FBuSE_)9J)<JdcWbLPfd1zo%)Mrs<oT8=9su3?m4_WHK3zMuH%!
htE<0WqA*Ye@(aHxRnnlI2H^kz002ovPDHLkV1kTC7Ht3k

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4fbb0aae59732cf74d9e58d9b7bf78338b6601a
GIT binary patch
literal 906
zcmV;519kj~P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp0009~Nkl<ZXhZFq
z@sTM(5XMIYhyW2F0z`la5CI}U1c(3;AOb{y2oM1xc<+5vHCwxTGd*MNvF(|v`{S<M
zZ2$J_?&+SE`txsz4_>J+AaixU3NjZ^d=>m}6ujMTk~Ndbuwr&{QNYz|HBl;+#B4VE
zEI<W!I2<I{U@#EF;gAg^sbCmRQ9;FayUha92xx*+ak$xRq{}9K83CctVzDsVpUdUM
z`Fu_~pZ*-&ZnrY2PzwrHt5u$Wg+hT;hjk1hLykrxqcWV}01=2m#8kOl7V1zBQ+B&u
zF_}yf@0NZ81As8T-|uSykW_FMvaV#Ho;uLOl*{E(G#U+7>IGaB?uq20Ta`*hAhU8@
zo{LiM$t|&HV~}#s>-EYm_7tS2U@Dc;dSJa?7pv8ZqjyT1B_I+D6x1!w?&$$ir5Tr!
z%;aKHLAYSE+0=gKBLJ!LjQhp6RPYO!;2dho{_1Lly@F1F^Z8tKIvuS}`~5z#R})nB
zSI3)Fkn1twVz(7=JRXZ)ub0Rur0QpNyh%VbxY=x$T_=G%q1|q$wOiHCUM=eK;UvlE
zDhk_niAs$Au<`(@f;*qji___pBmre}Zn~F+t*|-J(c>5V@p8E&zN?_r3tvbFE}f{7
zElDa;>V=0x0YC&UK<@XuRz+Orzk7U!f&>ccRyv)QZtK7K`!SoK<j1D(Y=EQKrX9Xe
zu?Wa_^oX{3iD?+51*95a0Kx@uPx`9i3*gX@n{M1;lj+_z^7!mk?rL*O*g=gH$O$i1
z-KZe{&BQ|`6!m=Dt)F#-4anp1NFMTtSsXE~Rx6fb0E1WTXB)5<i$!_kPR&cK-?Bi3
z14z@+;U`j{c&m>NX%JuQ_1Xyx&%}`cINKQA3W&`B30Jf!>4(Kj!LUXdfcb`hsV)F}
zBdI+y`+#zYO&i>gQjPL2ykQt@YENSEO@~e39e{K75GMuw&qeb)olYH0iT@)}2CxqU
z!fdz{Kuv{t+-Nw&(Y;5RPeuY%0B{w6x+I_|&`2Zzd*(|=PXWSc#3qaYY+Q;$F+kzv
zxyG951wIYv-xwJY*$^)LXfi^Ug$v?GHLFon5C2cBfd0*)teW@Zzz!eUfKVVv_s=Tz
g5(VRU<8klt7mypUcL3=a*Z=?k07*qoM6N<$f=}h88~^|S

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..41e37be72e6fceb55fa6bc9ae2098d8ead608ae0
GIT binary patch
literal 1210
zcmV;r1V#IaP)<h;3K|Lk000e1NJLTq001}u001}$0ssI2C*-V200006VoOIv0RI60
z0RN!9r;`8x1aC=1K~!jg?V3$XDqS4FkM?9LT3LokDMn$Iq@{}}Xp<NPt@;i@k<ph3
zEL=oMeFHHJauF0Ht)w961)&#nQH%t&(J03mN$os~>8i~+<5kP?J`eY|iu3mWopa{A
z%$NW|2>uHQYb{VJe?@<qzoI|Q|3&oU<AWcM-%?EU_V(6fGF@I?@@7*E$idasRcmW2
z06?u)-{0SJ72^%OC_xaNot?SP^z`&RKR@$q#sVWsQIyGKVhy~-VtIXi<=-y{Ms#*|
z7W<G)PfzpjmxC?3x3`D2R45cDCnq&gWcVUVQB+q~7iuY$N^5HgS)$9!%c!M5AlTjA
zt(9MnyeLVM%zngTX=$m3emU}@Yinz$rB0_yCX+Sv%aIo~8jYyv&dyE^<qG)}Jv%!?
zE&KcXv)OEI{c?Ps^?tt}`*aG0f6VoY@f{f%VWo@3;+L0~+Kyr&076KTWPN=-OLS^#
zs@85_5CQ<g;cz;gW{HlEk5_LRD?kVUxVyVUGb|Ph?=r;@0sshtKr?!KdwG{Bh7bVo
z_V$Kmw70kOE>nzu001OOvQni|X<c1iEquVk!-GU3k;!B-nXEAVkJ%=FVKf@mYPDQ0
z7yM#zaS<@0EO!6^MN!#omVe81I!)6wD^V_&14gv5u@SBF^z_7oSt&uAnwkJ3s?+Jv
z>_{Y1Wh)HWpp2dnaO_0q=jT<n!hj9>sRtoUCX?t9IypJX|2b*5+gTbSk%*!wn7ihU
zj*hZQh{fV~JkF<OEEW@qL@bT5u`wq1b9+Kh_Eak6^ZCk{wr{h&z5V|F&Pue|Y@dHI
zz84o4XwAO9KHe_QnM?+|R6?N;Qy~8;GB7ZJ?Ik~=9*+l&ZZ?~91@fZn>+5JytyW8t
zWVJ05iA3S2t{iT+8zV}RWLsMsTH4`oR9kdzZVrvBQmL5r&K89bI-O3m0;ux4sMqVo
z26eeyg~h&z(lp)O-Hq0fN~Oog$JMY527?lb1dXWI>r<%|rznJQe}5m_KZQc^<F3JA
zu(`Pz8}9J%kX0D-*%AB1Fyrd;`F_gM>-A#C5^$^vj3`ahgM)+ECIA2n3k%=e2NH<{
z*H{1mtX3;)(m6#TgwbeJqtS4+rO{}-UT+0wK{lK9csv~)9b7GIwc5wWM{Hfr9~-W(
zua!zASBn4ugTb)1wH1rSN>Pl(Vw;<r#a|eeO6ASX4Oa`CqKs>iab;*|XqcFoSY2HW
z1Ofy>WHK41ZYGl<2qF*&IGs+r-HzTi(6KCH`5RFPVKf>Y8X77dgM~yQ;aVkJSglsB
z881~7LP*o}{QP`bfy=_-a9~$Y*`f>w2M5@*;5+E`dUU`1t|)|%rs<WH73_VWTvRHR
z%jGI%AS)4NNG6jT8yna=VJVo+X1Cj2c-tru0j%_&UqYdf-|s&<IyyZ)MLz}>A`*#)
zhlg!8+sw>N#XYQCGzU%7;cz$-iA1B(cs!m+Bme+%xxA&NMXS~7^?HNBQ0_iZ6;Xcp
Y7fHA2IY<c)^8f$<07*qoM6N<$f@M1@p#T5?

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..db035b89570869ff96036ad8f574ae901a1d0298
GIT binary patch
literal 490
zcmV<G0Tup<P)<h;3K|Lk000e1NJLTq000;O000;W0ssI2ZxyPq00001b5ch_0Itp)
z=>Px$q)9|UR5*>b)xC<sKo9`n-8_W9Nw8B0xQ&RFRUW}-urP&r1rfCoQlzsMYy?3B
z!G{nLg@9#j?369sKwvB;7juetCg*LnnVtEH-PsKV0P=|;eMI>;XgD0YuA5MTuVI=d
zA*56)T`m`hKLThx9-~VsU9DCLA<lU^oknOh8YNHy$g(U{8jVIWC4efG3PQ)@F*ziJ
zK&4)<CsqJJ+VA%W)oQhb2TuqgL^>P}ILl-*e}a79#~J55ZgHp6p_EceCzFX39{gsr
zi3_dQYn)`WS#mm^@S{*D#NA+7ma&J==Q9BS#u!?$dU~-~U{$qR4f@EoZ4Bk}dCvJe
z3g<kPN?{dV1_A({=c%fSQNu9aftt-G<|~Tg`~LmX&gb)R3k|~%LcAib*K4cQ3X_-1
zCC2a1NVnS!mo-gu9Oqft?RJ``g=vGqAY3BRyk4&tJzZ5*bzL`2v)yj%x~?cnbhY2_
zM{B=905F|Se{JzxE;pOa9ts~J01!f0mQ^m7p9#j8ZQGvbJy+2men*buY`0t2bt$E?
gEHlQ6#p0{v8&|DA?17RY`2YX_07*qoM6N<$f=B4ke*gdg

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4259badfa6ece207df82bd63b67c74d6a63a745
GIT binary patch
literal 449
zcmV;y0Y3hTP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004qNkl<ZNK4&T
z;n71t6nrY61gSuDAQhm4s3258I*1BL1*kv?q=F<JP=VMtbLJvrJ|p-2_`aPn#tggn
z_V(VR4I}6mq5VIBFbpY45;6=!iE(ch9gj!4Uaz#@@2Re9B_fkRS(fDc{<LZcIF9pm
z6)ezo9qo2I!X3!6j8KgVu)yVVp(u)&&vjiwHLAb@rfJgi`DD)f{Z4pR1+8hC!M1JY
zvn-3+wpGQ=JleRK!{Kn?hd7QoqAH;kMKOr<{0RX#a6X^egmLlj7O6;(=Xq3B6${`j
zX=7>zoB;soL5jY?Jdqqzw1(U5#=K*yxK(Tc5;#vJ3&_5K93opFFH{6(Y85E0@B7Vh
zl^3b&Iz1i_ZkCJ94j*6@Yao-0^kB33pve;rvmi~=i4!HG@h$BMJP(54?ew2cCqi!%
z_!yaU5s@y42q6&Tf(<g}<R2A?m(fkpuEn1GWD`8k^PGe&^81TJAF~0aLQF(>E`;U?
rQdGS(VpsiDzzSSqAb||2ThrEGjSm#KMJWeq00000NkvXXu0mjf=U~Cu

literal 0
HcmV?d00001

diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bc3f22bdb3854a340d47e2df7bd70633bbb8c5a
GIT binary patch
literal 471
zcmV;|0Vw{7P)<h;3K|Lk000e1NJLTq000;O000;W0ssI2ZxyPq00006VoOIv0RI60
z0RN!9r;`8x0gOpRK~y-6wUo_{0YMPQt7gs~z%*AkA7Sp?2=Cz$gg85(C$2nzM0g2r
zV8V&3G43*bl1%NPXd5e*Ui&|Fs?xu%uP!7a_=K#FQ2qxL$MJYPKA+EqB)Y2AY5_pA
z*(4)fK(pD5xwdWlzHbPMqR4R^28~7|^N0q60aF@{h8g7oDi(_jTCdmUpdbhk5daE>
zf-!}NtnGG7L;z5!R16yr007qUc;u6=_v<>HPEizHK!1s1GMOY22}GPur&cnVWb5H@
zco!4|0UsR4xfMH~&%ayXY&Hu3h!}>UdHYwZ72k4Qmw1kb!y%jM_4@0eYPHI@q?8ws
zQcAbX^SoCm`fVYEQi>ja+Fw~xO53)%I*Y}EjrVJWRjbt=?f~ESbw&Wt>2$OU>AJJy
zIPP}4{eE9ta=Bc&Tu!Ic0I=Whm&@g5vtbt^w%hGqug4t+__o+s^Z8r|@qB!Q5IQ5R
zdk_&RrKFUlQt9^EH44{tJ<sFn-szUwPlaK)+wFLKQ>j!YlX>zVzW}X0LwDE;t}p-q
N002ovPDHLkV1iK7(>VYD

literal 0
HcmV?d00001

diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index bc9b1f2cdd..716420d6a8 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2105,14 +2105,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
 })
 export class IonSpinner {
   protected el: HTMLElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 78255ae950..7084b56195 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1892,14 +1892,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSpinner,
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
   standalone: true
 })
 export class IonSpinner {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 6cee863eb1..301eaa8d26 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -811,7 +811,8 @@ export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spi
   'color',
   'duration',
   'name',
-  'paused'
+  'paused',
+  'size'
 ]);