From 707bfb9c7867ffda3a6972a3383e5a4d82fc3687 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 27 Dec 2021 12:40:30 -0500
Subject: [PATCH] fixes #633

---
 docs/resources/changelog.md              | 6 ++++++
 src/components/spinner/spinner.styles.ts | 7 ++-----
 src/components/spinner/spinner.ts        | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 8f2b0a983..997fe312b 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,12 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## 2.0.0-beta.64
+
+- Added `role="status"` to `<sl-spinner>`
+- Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
+- Improved `<sl-spinner>` track color when used on various backgrounds
+
 ## 2.0.0-beta.63
 
 - 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index b33611282..7b56082ae 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -34,16 +34,13 @@ export default css`
   .spinner__track {
     stroke: var(--track-color);
     transform-origin: 0% 0%;
+    mix-blend-mode: multiply;
   }
 
   .spinner__indicator {
     stroke: var(--indicator-color);
     stroke-linecap: round;
-    /* stroke-dasharray: (2πr x p), (2πr) where p is the percentage to display */
-    stroke-dasharray: calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2) * 0.75),
-      calc(2 * 3.141592 * calc(0.5em - var(--track-width) / 2));
-    transform-origin: 50% 50%;
-    transform: rotate(90deg);
+    stroke-dasharray: 150% 75%;
     animation: spin var(--speed) linear infinite;
   }
 
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index cf3fdf1a8..0d40a1c19 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -19,7 +19,7 @@ export default class SlSpinner extends LitElement {
 
   render() {
     return html`
-      <svg part="base" class="spinner" aria-busy="true" aria-live="polite">
+      <svg part="base" class="spinner" role="status">
         <circle class="spinner__track"></circle>
         <circle class="spinner__indicator"></circle>
       </svg>