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 Experimental 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 `` +- Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633) +- Improved `` track color when used on various backgrounds + ## 2.0.0-beta.63 - 🚨 BREAKING: changed the `type` attribute to `variant` in ``, ``, ``, and `` 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` - +