chore(progress, progress-ring): decouple from FAST Foundation (VIV-2251)

libs/components/src/lib/progress-ring/progress-ring.spec.ts

@@ -48,8 +48,15 @@ describe('vwc-progress-ring', () => {
 			await elementUpdated(element);
 			const percentWithSmallRange = element.percentComplete;
 
+			element.min = 0;
+			element.max = 0;
+			element.value = 0;
+			await elementUpdated(element);
+			const percentWithEmptyRange = element.percentComplete;
+
 			expect(percentWithBigRange).toEqual(25);
 			expect(percentWithSmallRange).toEqual(50);
+			expect(percentWithEmptyRange).toEqual(0);
 		});
 
 		it('should set the determinate div width to percentComplete', async function () {

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

@@ -1,6 +1,6 @@
-import { BaseProgress } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import type { Connotation } from '../enums';
+import { BaseProgress } from '../../shared/foundation/progress/base-progress';
 
 export type ProgressRingConnotation =
 	| Connotation.Accent

libs/components/src/lib/progress/progress.spec.ts

@@ -116,8 +116,15 @@ describe('vwc-progress', () => {
 			await elementUpdated(element);
 			const percentWithSmallRange = element.percentComplete;
 
+			element.min = 0;
+			element.max = 0;
+			element.value = 0;
+			await elementUpdated(element);
+			const percentWithEmptyRange = element.percentComplete;
+
 			expect(percentWithBigRange).toEqual(25);
 			expect(percentWithSmallRange).toEqual(50);
+			expect(percentWithEmptyRange).toEqual(0);
 		});
 
 		it('should set the determinate div width to percentComplete', async function () {

libs/components/src/lib/progress/progress.ts

@@ -1,6 +1,6 @@
-import { BaseProgress } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import type { Connotation, ConnotationDecorative, Shape } from '../enums';
+import { BaseProgress } from '../../shared/foundation/progress/base-progress';
 
 export type ProgressConnotation =
 	| Connotation.Accent

libs/components/src/shared/foundation/progress/base-progress.ts

@@ -0,0 +1,103 @@
+import {
+	attr,
+	nullableNumberConverter,
+	observable,
+} from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
+export class BaseProgress extends FoundationElement {
+	/**
+	 * The value of the progress
+	 * @public
+	 * @remarks
+	 * HTML Attribute: value
+	 */
+	@attr({ converter: nullableNumberConverter })
+	// @ts-expect-error Type is incorrectly non-optional
+	value: number | null;
+	/**
+	 * @internal
+	 */
+	valueChanged() {
+		if (this.$fastController.isConnected) {
+			this.updatePercentComplete();
+		}
+	}
+
+	/**
+	 * The minimum value
+	 * @public
+	 * @remarks
+	 * HTML Attribute: min
+	 */
+	@attr({ converter: nullableNumberConverter })
+	// @ts-expect-error Type is incorrectly non-optional
+	min: number;
+	/**
+	 * @internal
+	 */
+	minChanged() {
+		if (this.$fastController.isConnected) {
+			this.updatePercentComplete();
+		}
+	}
+
+	/**
+	 * The maximum value
+	 * @public
+	 * @remarks
+	 * HTML Attribute: max
+	 */
+	@attr({ converter: nullableNumberConverter })
+	// @ts-expect-error Type is incorrectly non-optional
+	max: number;
+	/**
+	 * @private
+	 */
+	maxChanged() {
+		if (this.$fastController.isConnected) {
+			this.updatePercentComplete();
+		}
+	}
+
+	/**
+	 * Indicates the progress is paused
+	 * @public
+	 * @remarks
+	 * HTML Attribute: paused
+	 */
+	@attr({ mode: 'boolean' })
+	// @ts-expect-error Type is incorrectly non-optional
+	paused: boolean;
+
+	/**
+	 * Indicates progress in %
+	 * @internal
+	 */
+	@observable
+	percentComplete = 0;
+
+	/**
+	 * @internal
+	 */
+	override connectedCallback() {
+		super.connectedCallback();
+		this.updatePercentComplete();
+	}
+
+	private updatePercentComplete() {
+		const min = typeof this.min === 'number' ? this.min : 0;
+		const max = typeof this.max === 'number' ? this.max : 100;
+		const value = typeof this.value === 'number' ? this.value : 0;
+		const range = max - min;
+
+		this.percentComplete =
+			range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+	}
+}