From 92fb2114668078fb693355d2ff7a36741c956bfd Mon Sep 17 00:00:00 2001
From: Sara <slhinyc@gmail.com>
Date: Wed, 21 Feb 2024 10:02:57 -0500
Subject: [PATCH 1/3] Fix Spinner component bug in Safari

---
 src/components/spinner/spinner.component.ts | 18 +++++--
 src/components/spinner/spinner.styles.ts    | 59 +++++++++++----------
 2 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
index 7c02e081f8..363a89d66d 100644
--- a/src/components/spinner/spinner.component.ts
+++ b/src/components/spinner/spinner.component.ts
@@ -54,9 +54,21 @@ export default class SlSpinner extends ShoelaceElement {
         <mask id="mask">
           <circle class="spinner__indicator"></circle>
         </mask>
-        <foreignObject x="0" y="0" width="100%" height="100%" mask="url(#mask)">
-          <div class="indicator__gradient"></div>
-        </foreignObject>
+        <linearGradient id="linearColors" class="linear__gradient" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="5%"></stop>
+          <stop offset="25%"></stop>
+          <stop offset="40%"></stop>
+          <stop offset="60%"></stop>
+          <stop offset="80%"></stop>
+          <stop offset="100%"></stop>
+        </linearGradient>
+        <circle
+          stroke-width="8"
+          fill="none"
+          class="indicator__gradient"
+          stroke="url(#linearColors)"
+          mask="url(#mask)"
+        ></circle>
       </svg>
     `;
   }
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index addca14a70..4b56d0d797 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -15,18 +15,16 @@ export default css`
 
   .spinner {
     flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
   }
 
   .spinner__track,
-  .spinner__indicator {
+  .spinner__indicator,
+  .indicator__gradient {
     fill: none;
     stroke-width: var(--track-width);
     r: calc(0.5em - var(--track-width) / 2);
     cx: 0.5em;
     cy: 0.5em;
-    transform-origin: 50% 50%;
   }
 
   .spinner__track {
@@ -37,20 +35,41 @@ export default css`
   .spinner__indicator {
     stroke: white;
     stroke-linecap: round;
+    transform-origin: 50% 50%;
+    stroke-dasharray: 150% 75%;
     animation: spin var(--speed) linear infinite;
   }
 
   .indicator__gradient {
-    background: conic-gradient(
-      from 270deg,
-      var(--indicator-color) 5%,
-      var(--track-color) 35% 60%,
-      var(--indicator-color) 95%
-    );
-    width: 100%;
-    height: 100%;
     transform-origin: 50% 50%;
-    animation: spin-gradient var(--speed) linear infinite;
+  }
+
+  .linear__gradient stop:nth-child(1) {
+    stop-color: var(--sl-color-neutral-0);
+  }
+
+  .linear__gradient stop:nth-child(2) {
+    stop-color: var(--track-color);
+    stop-opacity: 25%;
+  }
+
+  .linear__gradient stop:nth-child(3) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 40%;
+  }
+
+  .linear__gradient stop:nth-child(4) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 60%;
+  }
+
+  .linear__gradient stop:nth-child(5) {
+    stop-color: var(--indicator-color);
+    stop-opacity: 90%;
+  }
+
+  .linear__gradient stop:nth-child(6) {
+    stop-color: var(--indicator-color);
   }
 
   @keyframes spin {
@@ -69,18 +88,4 @@ export default css`
       stroke-dasharray: 1.375em, 1.375em;
     }
   }
-
-  @keyframes spin-gradient {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    50% {
-      transform: rotate(180deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
 `;

From 4abd6f98578b4119a6a5a9f5c8eb016651dc1ce4 Mon Sep 17 00:00:00 2001
From: Sara <slhinyc@gmail.com>
Date: Wed, 21 Feb 2024 11:21:14 -0500
Subject: [PATCH 2/3] Delete redundant `fill` and `stroke-width` on `<circle>`

---
 src/components/spinner/spinner.component.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
index 363a89d66d..2dc7ac1aa5 100644
--- a/src/components/spinner/spinner.component.ts
+++ b/src/components/spinner/spinner.component.ts
@@ -62,13 +62,7 @@ export default class SlSpinner extends ShoelaceElement {
           <stop offset="80%"></stop>
           <stop offset="100%"></stop>
         </linearGradient>
-        <circle
-          stroke-width="8"
-          fill="none"
-          class="indicator__gradient"
-          stroke="url(#linearColors)"
-          mask="url(#mask)"
-        ></circle>
+        <circle class="indicator__gradient" stroke="url(#linearColors)" mask="url(#mask)"></circle>
       </svg>
     `;
   }

From 711c84ba591144daf38d06a797c1e79ce7051cdc Mon Sep 17 00:00:00 2001
From: Sara <slhinyc@gmail.com>
Date: Wed, 21 Feb 2024 13:59:18 -0500
Subject: [PATCH 3/3] Version bump and changelog

---
 docs/pages/teamshares/changelog.md | 4 ++++
 package.json                       | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/pages/teamshares/changelog.md b/docs/pages/teamshares/changelog.md
index 6342993ecc..22fce1ecf2 100644
--- a/docs/pages/teamshares/changelog.md
+++ b/docs/pages/teamshares/changelog.md
@@ -2,6 +2,10 @@
 
 ## 2.0.1
 
+- Fix: `sl-spinner` not rendering correctly in Safari
+
+## 2.0.1
+
 - Fix: Support for clickable links and buttons in the `summary` slot of `sl-details`.
 - Improved design for `sl-spinner`
 - Added CODEOWNERS to automatically tag reviewers
diff --git a/package.json b/package.json
index 41028d7117..46aad9978f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamshares/shoelace",
   "description": "The Teamshares flavor of a forward-thinking library of web components.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "upstreamVersion": "2.11.2",
   "homepage": "https://github.com/teamshares/shoelace",
   "author": "Cory LaViska",