From ab754e9409f9121e91c3f6429471159bdfe676fa Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 28 Oct 2022 09:57:41 -0400
Subject: [PATCH] add transition duration custom prop

---
 docs/resources/changelog.md                          | 1 +
 src/components/progress-ring/progress-ring.styles.ts | 4 +++-
 src/components/progress-ring/progress-ring.ts        | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index ff1d8f1e2..36a651540 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 - Added tests for `<sl-menu-item>` and `<sl-menu-label>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
+- Added `--indicator-transition-duration` custom property to `<sl-progress-ring>` [#986](https://github.com/shoelace-style/shoelace/issues/986)
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
 - Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index 51b655460..38ee1a4f0 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -10,6 +10,7 @@ export default css`
     --track-color: var(--sl-color-neutral-200);
     --indicator-width: var(--track-width);
     --indicator-color: var(--sl-color-primary-600);
+    --indicator-transition-duration: 0.35s;
 
     display: inline-flex;
   }
@@ -48,7 +49,8 @@ export default css`
     stroke: var(--indicator-color);
     stroke-width: var(--indicator-width);
     stroke-linecap: round;
-    transition: 0.35s stroke-dashoffset;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
     stroke-dasharray: var(--circumference) var(--circumference);
     stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
   }
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 30231ae4e..192fc53c0 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -21,6 +21,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
  * @cssproperty --indicator-color - The indicator color.
+ * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
  */
 @customElement('sl-progress-ring')
 export default class SlProgressRing extends ShoelaceElement {