chore: remove progress-circle into separate PR

Author: castastrophe

second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts

@@ -34,11 +34,10 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
 
     /**
      * Static color variant for use on different backgrounds.
-     * When set to 'white', the component uses white styling for images with a dark tinted background.
-     * When set to 'black', the component uses black styling for images with a light tinted background.
+     * When set to 'white', the component uses white styling for dark backgrounds.
      */
     @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white' | 'black';
+    public staticColor?: 'white';
 
     /**
      * Progress value from 0 to 100.
@@ -47,24 +46,6 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
     @property({ type: Number })
     public progress = 0;
 
-    /**
-     * Stroke width for the progress circle.
-     */
-    @property({ type: Number, reflect: false })
-    public get strokeWidth(): number {
-        return this._strokeWidth;
-    }
-
-    public set strokeWidth(customWidth: unknown) {
-        if (customWidth && customWidth instanceof Number) {
-            this._strokeWidth = customWidth as number;
-        }
-
-        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
-    }
-
-    private _strokeWidth: number = 2;
-
     @query('slot')
     private slotEl!: HTMLSlotElement;
 

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts

@@ -11,18 +11,12 @@
  */
 
 import { CSSResultArray, html, TemplateResult } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { ProgressCircleBase } from '@swc/core/components/progress-circle';
 
 import progressCircleStyles from './progress-circle.css';
 
-function capitalize(str?: string): string {
-    if (typeof str !== 'string') {
-        return '';
-    }
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
 /**
  * A progress circle component that visually represents the completion progress of a task.
  * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.
@@ -31,7 +25,12 @@ function capitalize(str?: string): string {
  * @since 2.0.0
  * @status stable
  * @github https://github.com/adobe/spectrum-web-components/tree/main/second-gen/packages/swc/components/progress-circle
- * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=13061-181
+ * @figma https://spectrum.figma.com/file/progress-circle
+ *
+ * @slot - Optional content to display inside the progress circle (e.g., percentage text)
+ *
+ * @csspart track - The background track of the progress circle
+ * @csspart fill - The filled portion of the progress circle
  *
  * @fires progress-change - Dispatched when the progress value changes
  *
@@ -47,51 +46,29 @@ export class ProgressCircle extends ProgressCircleBase {
     }
 
     protected override render(): TemplateResult {
-        // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
-        const radius = `calc(50% - ${this.strokeWidth / 2}px)`;
-
+        const styles = [
+            this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
+            this.makeRotation(
+                -180 + (180 / 50) * Math.max(this.progress - 50, 0)
+            ),
+        ];
+        const masks = ['Mask1', 'Mask2'];
         return html`
-            <div
-                class=${classMap({
-                    ['spectrum-ProgressCircle']: true,
-                    [`spectrum-ProgressCircle--indeterminate`]:
-                        this.indeterminate,
-                    [`spectrum-ProgressCircle--static${capitalize(this.staticColor)}`]:
-                        typeof this.staticColor !== 'undefined',
-                    [`spectrum-ProgressCircle--size${this.size?.toUpperCase()}`]:
-                        typeof this.size !== 'undefined',
-                })}
-            >
-                <svg
-                    fill="none"
-                    width="100%"
-                    height="100%"
-                    class="spectrum-outerCircle"
-                >
-                    <circle
-                        class="spectrum-innerCircle"
-                        cx="50%"
-                        cy="50%"
-                        r=${`calc(50% - ${this.strokeWidth / 1}px)`}
-                        stroke-width=${this.strokeWidth}
-                    />
-                    <circle
-                        cx="50%"
-                        cy="50%"
-                        class="spectrum-ProgressCircle-track"
-                        r=${radius}
-                    />
-                    <circle
-                        cx="50%"
-                        cy="50%"
-                        r=${radius}
-                        class="spectrum-ProgressCircle-fill"
-                        pathLength="100"
-                        stroke-dasharray="100 200"
-                        stroke-dashoffset=${100 - this.progress}
-                        stroke-linecap="round"
-                    />
-                </svg>
+            <slot @slotchange=${this.handleSlotchange}></slot>
+            <div class="track"></div>
+            <div class="fills">
+                ${masks.map(
+                    (mask, index) => html`
+                        <div class="fill${mask}">
+                            <div
+                                class="fillSub${mask}"
+                                style=${ifDefined(styles[index])}
+                            >
+                                <div class="fill"></div>
+                            </div>
+                        </div>
+                    `
+                )}
             </div>
         `;
     }