feat(progresscircle): adding border for determinate version

Author: aramos-adobe

components/progresscircle/index.css

@@ -37,13 +37,29 @@ governing permissions and limitations under the License.
 	--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
 }
 
+.spectrum-Circle {
+	fill: none;
+}
+
 /* windows high contrast mode */
 @media (forced-colors: active) {
 	.spectrum-ProgressCircle {
 		/* fill is bright color */
 		--highcontrast-progress-circle-fill-border-color: Highlight;
 		--highcontrast-progressbar-track-color: Canvas;
 	}
+
+	.spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
+		.spectrum-Circle {
+			stroke: CanvasText;
+		}
+
+		.spectrum-outerCircle {
+			border: 1px solid;
+			border-color: CanvasText;
+			border-radius: 50%;
+		}
+	}
 }
 
 .spectrum-ProgressCircle {

components/progresscircle/stories/template.js

@@ -25,6 +25,8 @@ export const Template = ({
 	// SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
 	let radius = `calc(50% - ${strokeWidth / 2}px)`;
 
+	let insideRadius = `calc(50% - ${strokeWidth / 1}px)`;
+
 	return html`
 		<div
 			class=${classMap({
@@ -38,7 +40,8 @@ export const Template = ({
 			style=${styleMap(customStyles)}
 			data-testid=${ifDefined(testId)}
 		>
-			<svg fill="none" width="100%" height="100%">
+			<svg fill="none" width="100%" height="100%" class="spectrum-outerCircle">
+				<circle class="spectrum-Circle" cx="50%" cy="50%" r=${insideRadius} stroke-width="2" />
 				<circle
 					cx="50%"
 					cy="50%"