update progress ring to use CSS

docs/components/progress-ring.md

@@ -18,9 +18,9 @@ Use the `size` attribute to set the diameter of the progress ring.
 <sl-progress-ring percentage="50" size="200"></sl-progress-ring>
 ```
 
-### Stroke Width
+### Track Width
 
-Use the `stroke-width` attribute to set the width of the progress ring's indicator.
+Use the `track-width` attribute to set the width of the progress ring's track.
 
 ```html preview
 <sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
@@ -34,8 +34,8 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 <sl-progress-ring 
   percentage="50" 
   style="
-    --track-color: rgb(var(--sl-color-cyan-100)); 
-    --indicator-color: rgb(var(--sl-color-cyan-600));
+    --track-color: pink; 
+    --indicator-color: deeppink;
   "
 ></sl-progress-ring>
 ```

docs/resources/changelog.md

@@ -8,9 +8,12 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- 🚨 BREAKING: removed `--stroke-width` from `<sl-spinner>` (use `--track-width` instead)
-- Added `--speed` CSS custom property to `<sl-spinner>`
+- 🚨 BREAKING: removed `--stroke-width` from `<sl-spinner>` (use the `--track-width` custom property instead)
+- 🚨 BREAKING: removed `size` and `stroke-width` attributes from `<sl-progress-ring>` (use the `--size` and `--track-width` custom properties instead)
+- Added the `--speed` custom property to `<sl-spinner>`
+- Added the `--size` and `--track-width` custom properties to `<sl-progress-ring>`
 - Fixed a bug where `<sl-tab>` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
+- Updated `<sl-progress-ring>` to use only CSS for styling
 - Updated `<sl-spinner>` to use an SVG and improved the indicator animation
 
 ## 2.0.0-beta.51

src/components/progress-ring/progress-ring.styles.ts

@@ -5,6 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
+    --size: 128px;
+    --track-width: 4px;
     --track-color: rgb(var(--sl-color-neutral-500) / 20%);
     --indicator-color: rgb(var(--sl-color-primary-600));
 
@@ -19,17 +21,34 @@ export default css`
   }
 
   .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
   }
 
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(var(--size) / 2 - var(--track-width) * 2);
+    --circumference: calc(var(--radius) * 2 * var(--pi));
+
+    fill: none;
+    stroke-width: var(--track-width);
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
   .progress-ring__track {
     stroke: var(--track-color);
   }
 
   .progress-ring__indicator {
     stroke: var(--indicator-color);
+    stroke-linecap: round;
     transition: 0.35s stroke-dashoffset, 0.35s stroke;
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - (var(--percentage) / 100) * var(--circumference));
   }
 
   .progress-ring__label {

src/components/progress-ring/progress-ring.ts

@@ -1,6 +1,5 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { watch } from '../../internal/watch';
 import styles from './progress-ring.styles';
 
 /**
@@ -12,7 +11,9 @@ import styles from './progress-ring.styles';
  * @csspart base - The component's base wrapper.
  * @csspart label - The progress ring label.
  *
- * @cssproperty --track-color - The track color.
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-color - The indicator color.
  */
 @customElement('sl-progress-ring')
@@ -21,29 +22,9 @@ export default class SlProgressRing extends LitElement {
 
   @query('.progress-ring__indicator') indicator: SVGCircleElement;
 
-  /** The size of the progress ring in pixels. */
-  @property({ type: Number }) size = 128;
-
-  /** The stroke width of the progress ring in pixels. */
-  @property({ attribute: 'stroke-width', type: Number }) strokeWidth = 4;
-
   /** The current progress percentage, 0 - 100. */
   @property({ type: Number, reflect: true }) percentage: number;
 
-  firstUpdated() {
-    this.updateProgress();
-  }
-
-  @watch('percentage', { waitUntilFirstUpdate: true })
-  updateProgress() {
-    const radius = this.indicator.r.baseVal.value;
-    const circumference = radius * 2 * Math.PI;
-    const offset = circumference - (this.percentage / 100) * circumference;
-
-    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
-    this.indicator.style.strokeDashoffset = `${offset}`;
-  }
-
   render() {
     return html`
       <div
@@ -54,26 +35,9 @@ export default class SlProgressRing extends LitElement {
         aria-valuemax="100"
         aria-valuenow="${this.percentage}"
       >
-        <svg class="progress-ring__image" width=${this.size} height=${this.size}>
-          <circle
-            class="progress-ring__track"
-            stroke-width="${this.strokeWidth}"
-            stroke-linecap="round"
-            fill="transparent"
-            r=${this.size / 2 - this.strokeWidth * 2}
-            cx=${this.size / 2}
-            cy=${this.size / 2}
-          ></circle>
-
-          <circle
-            class="progress-ring__indicator"
-            stroke-width="${this.strokeWidth}"
-            stroke-linecap="round"
-            fill="transparent"
-            r=${this.size / 2 - this.strokeWidth * 2}
-            cx=${this.size / 2}
-            cy=${this.size / 2}
-          ></circle>
+        <svg class="progress-ring__image" style="--percentage: ${this.percentage}; --pi: ${Math.PI.toFixed(10)}">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator"></circle>
         </svg>
 
         <span part="label" class="progress-ring__label">

src/components/spinner/spinner.ts

@@ -8,9 +8,9 @@ import styles from './spinner.styles';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --track-width - The width of the indicator.
- * @cssproperty --track-color - The color of the spinner's track.
- * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
  * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
  */
 @customElement('sl-spinner')