From af06f6f9c62653c29c9dd9cf0bebaf2c64ad4d0b Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:43:15 -0700
Subject: [PATCH 1/5] Foundation: Update Progress templates

---
 .../fast-foundation/docs/api-report.md        | 11 +++-
 .../src/progress-ring/index.ts                |  5 +-
 .../progress-ring/progress-ring.options.ts    |  1 +
 .../progress-ring/progress-ring.pw.spec.ts    | 59 ++++++++++++++++++-
 .../progress-ring/progress-ring.template.ts   | 49 +++++++--------
 .../src/progress-ring/progress-ring.ts        |  7 +--
 .../stories/progress-ring.register.ts         | 35 ++++-------
 .../fast-foundation/src/progress/README.md    | 16 ++---
 .../fast-foundation/src/progress/index.ts     |  2 +-
 .../src/progress/progress.options.ts          |  4 +-
 .../src/progress/progress.pw.spec.ts          | 14 ++---
 .../src/progress/progress.template.ts         | 32 ++++++----
 .../fast-foundation/src/progress/progress.ts  |  4 +-
 .../src/progress/stories/progress.register.ts | 59 +++----------------
 14 files changed, 155 insertions(+), 143 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 77b70a95936..4d37e0029ae 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2550,14 +2550,21 @@ export type PickerOptions = {
 // @public
 export function pickerTemplate<T extends FASTPicker>(options: PickerOptions): ElementViewTemplate<T>;
 
+// @public (undocumented)
+export const progressIndicatorTemplate: ViewTemplate<any, any>;
+
 // @public
 export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<FASTProgress>;
-    indeterminateIndicator2?: StaticallyComposableHTML<FASTProgress>;
+    determinateIndicator?: StaticallyComposableHTML<FASTProgress>;
+    indeterminateIndicator?: StaticallyComposableHTML<FASTProgress>;
 };
 
+// @public (undocumented)
+export const progressRingIndicatorTemplate: ViewTemplate<any, any>;
+
 // @public
 export type ProgressRingOptions = {
+    determinateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
     indeterminateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
 };
 
diff --git a/packages/web-components/fast-foundation/src/progress-ring/index.ts b/packages/web-components/fast-foundation/src/progress-ring/index.ts
index 5118a937e32..99f78764358 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/index.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/index.ts
@@ -1,3 +1,6 @@
 export { FASTProgressRing } from "./progress-ring.js";
 export { ProgressRingOptions } from "./progress-ring.options.js";
-export { progressRingTemplate } from "./progress-ring.template.js";
+export {
+    progressRingIndicatorTemplate,
+    progressRingTemplate,
+} from "./progress-ring.template.js";
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts
index 8b6169ec1e4..a155cdb83d1 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts
@@ -6,5 +6,6 @@ import type { FASTProgressRing } from "./progress-ring.js";
  * @public
  */
 export type ProgressRingOptions = {
+    determinateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
     indeterminateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
 };
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts
index 11822e01975..291adb73ad9 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import type { Locator, Page } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
+import type { FASTProgressRing } from "./progress-ring.js";
 
 test.describe("Progress ring", () => {
     let page: Page;
@@ -61,15 +62,67 @@ test.describe("Progress ring", () => {
         await expect(element).toHaveAttribute("aria-valuemax", "75");
     });
 
-    test("should render an element with a `determinate` slot when a value is provided", async () => {
+    test("should render an element with a `determinate` class when a value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress-ring value="50"></fast-progress-ring>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".determinate");
 
-        await expect(progress).toHaveAttribute("slot", "determinate");
+        await expect(progress).toHaveCount(1);
+    });
+
+    test("should render an element with an `indeterminate` class when no value is provided", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-progress-ring></fast-progress-ring>
+            `;
+        });
+
+        const progress = element.locator(".indeterminate");
+
+        await expect(progress).toHaveCount(1);
+    });
+
+    test("should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset", async () => {
+        await page.setContent(/* html */ `
+            <fast-progress-ring value="50"></fast-progress-ring>
+        `);
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+    });
+
+    test("should set the `percentComplete` property to match the current `value` in the range of `min` and `max`", async () => {
+        await page.setContent(/* html */ `
+            <fast-progress-ring value="0"></fast-progress-ring>
+        `);
+
+        await expect(element).toHaveJSProperty("percentComplete", 0);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.value = 50;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.value = 100;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 100);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.max = 200;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.min = 100;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 0);
     });
 });
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
index 05ef4592a35..84d27baa1b2 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
@@ -4,7 +4,15 @@ import { staticallyCompose } from "../utilities/template-helpers.js";
 import type { FASTProgressRing } from "./progress-ring.js";
 import type { ProgressRingOptions } from "./progress-ring.options.js";
 
-const progressSegments: number = 44;
+/**
+ * @public
+ */
+export const progressRingIndicatorTemplate = html`
+    <svg viewBox="0 0 16 16" class="progress">
+        <circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle>
+        <circle class="indicator" part="indicator" cx="8px" cy="8px" r="7px"></circle>
+    </svg>
+`;
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
@@ -23,35 +31,22 @@ export function progressRingTemplate<T extends FASTProgressRing>(
             ${when(
                 x => typeof x.value === "number",
                 html<T>`
-                    <svg
-                        class="progress"
-                        part="progress"
-                        viewBox="0 0 16 16"
-                        slot="determinate"
+                    <span
+                        class="determinate"
+                        part="determinate"
+                        style="--percent-complete: ${x => x.percentComplete}"
                     >
-                        <circle
-                            class="background"
-                            part="background"
-                            cx="8px"
-                            cy="8px"
-                            r="7px"
-                        ></circle>
-                        <circle
-                            class="determinate"
-                            part="determinate"
-                            style="stroke-dasharray: ${x =>
-                                (progressSegments * x.percentComplete) /
-                                100}px ${progressSegments}px"
-                            cx="8px"
-                            cy="8px"
-                            r="7px"
-                        ></circle>
-                    </svg>
+                        <slot name="determinate">
+                            ${staticallyCompose(options.determinateIndicator)}
+                        </slot>
+                    </span>
                 `,
                 html<T>`
-                    <slot name="indeterminate">
-                        ${staticallyCompose(options.indeterminateIndicator)}
-                    </slot>
+                    <span class="indeterminate" part="indeterminate">
+                        <slot name="indeterminate">
+                            ${staticallyCompose(options.indeterminateIndicator)}
+                        </slot>
+                    </span>
                 `
             )}
         </template>
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
index f3736588496..5966563b583 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
@@ -4,11 +4,10 @@ import { FASTBaseProgress } from "../progress/base-progress.js";
  * An circular Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
+ * @slot determinate - The slot for the determinate indicator
+ * @slot indeterminate - The slot for the indeterminate indicator
  * @csspart determinate - The determinate indicator
- * @csspart background - The background
+ * @csspart indeterminate - The indeterminate indicator
  *
  * @public
  */
diff --git a/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts b/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts
index b7a3cd31f8b..69bfe9183d1 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts
@@ -1,7 +1,9 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
 import { FASTProgressRing } from "../progress-ring.js";
-import { progressRingTemplate } from "../progress-ring.template.js";
+import {
+    progressRingIndicatorTemplate,
+    progressRingTemplate,
+} from "../progress-ring.template.js";
 
 const styles = css`
     :host {
@@ -24,9 +26,14 @@ const styles = css`
         stroke-width: 2px;
     }
 
-    .determinate {
+    .determinate .indicator {
+        --progress-segments: 44;
         stroke: var(--accent-foreground-rest);
         fill: none;
+        stroke-dasharray: calc(
+                ((var(--progress-segments) * var(--percent-complete)) / 100) * 1px
+            )
+            calc(var(--progress-segments) * 1px);
         stroke-width: 2px;
         stroke-linecap: round;
         transform-origin: 50% 50%;
@@ -34,7 +41,7 @@ const styles = css`
         transition: all 0.2s ease-in-out;
     }
 
-    .indeterminate-indicator-1 {
+    .indeterminate .indicator {
         stroke: var(--accent-foreground-rest);
         fill: none;
         stroke-width: 2px;
@@ -64,24 +71,8 @@ const styles = css`
 FASTProgressRing.define({
     name: "fast-progress-ring",
     template: progressRingTemplate({
-        indeterminateIndicator: /* html */ html`
-            <svg class="progress" part="progress" viewBox="0 0 16 16">
-                <circle
-                    class="background"
-                    part="background"
-                    cx="8px"
-                    cy="8px"
-                    r="7px"
-                ></circle>
-                <circle
-                    class="indeterminate-indicator-1"
-                    part="indeterminate-indicator-1"
-                    cx="8px"
-                    cy="8px"
-                    r="7px"
-                ></circle>
-            </svg>
-        `,
+        determinateIndicator: progressRingIndicatorTemplate,
+        indeterminateIndicator: progressRingIndicatorTemplate,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
index f34be4523a2..d5567a37843 100644
--- a/packages/web-components/fast-foundation/src/progress/README.md
+++ b/packages/web-components/fast-foundation/src/progress/README.md
@@ -174,17 +174,17 @@ export const myProgressRing = ProgressRing.compose<ProgressRingOptions>({
 
 #### CSS Parts
 
-| Name            | Description                     |
-| --------------- | ------------------------------- |
-| `progress`      | Represents the progress element |
-| `determinate`   | The determinate indicator       |
-| `indeterminate` | The indeterminate indicator     |
+| Name            | Description                 |
+| --------------- | --------------------------- |
+| `determinate`   | The determinate indicator   |
+| `indeterminate` | The indeterminate indicator |
 
 #### Slots
 
-| Name            | Description                                   |
-| --------------- | --------------------------------------------- |
-| `indeterminate` | The slot for a custom indeterminate indicator |
+| Name            | Description                              |
+| --------------- | ---------------------------------------- |
+| `determinate`   | The slot for the determinate indicator   |
+| `indeterminate` | The slot for the indeterminate indicator |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/progress/index.ts b/packages/web-components/fast-foundation/src/progress/index.ts
index 37bedac77c6..4c8a3c5629d 100644
--- a/packages/web-components/fast-foundation/src/progress/index.ts
+++ b/packages/web-components/fast-foundation/src/progress/index.ts
@@ -1,4 +1,4 @@
 export { FASTBaseProgress } from "./base-progress.js";
 export { FASTProgress } from "./progress.js";
 export { ProgressOptions } from "./progress.options.js";
-export { progressTemplate } from "./progress.template.js";
+export { progressIndicatorTemplate, progressTemplate } from "./progress.template.js";
diff --git a/packages/web-components/fast-foundation/src/progress/progress.options.ts b/packages/web-components/fast-foundation/src/progress/progress.options.ts
index 6abd26ba064..9c8af4a838b 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.options.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.options.ts
@@ -6,6 +6,6 @@ import type { FASTProgress } from "./progress.js";
  * @public
  */
 export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<FASTProgress>;
-    indeterminateIndicator2?: StaticallyComposableHTML<FASTProgress>;
+    determinateIndicator?: StaticallyComposableHTML<FASTProgress>;
+    indeterminateIndicator?: StaticallyComposableHTML<FASTProgress>;
 };
diff --git a/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts b/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts
index 6e18d38ac55..47be8e1a97a 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
 import type { FASTProgress } from "./progress.js";
 
-test.describe("Progress ring", () => {
+test.describe("Progress", () => {
     let page: Page;
     let element: Locator;
     let root: Locator;
@@ -56,28 +56,28 @@ test.describe("Progress ring", () => {
         await expect(element).toHaveAttribute("aria-valuemax", "50");
     });
 
-    test("should render an element with a `determinate` slot when a value is provided", async () => {
+    test("should render an element with a `determinate` class when a value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress value="50"></fast-progress>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".determinate");
 
-        await expect(progress).toHaveAttribute("slot", "determinate");
+        await expect(progress).toHaveCount(1);
     });
 
-    test("should render an element with an `indeterminate` slot when no value is provided", async () => {
+    test("should render an element with an `indeterminate` class when no value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress></fast-progress>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".indeterminate");
 
-        await expect(progress).toHaveAttribute("slot", "indeterminate");
+        await expect(progress).toHaveCount(1);
     });
 
     test("should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset", async () => {
diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
index 281df7e195d..967f7c70709 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -4,6 +4,13 @@ import { staticallyCompose } from "../utilities/template-helpers.js";
 import type { FASTProgress } from "./progress.js";
 import type { ProgressOptions } from "./progress.options.js";
 
+/**
+ * @public
+ */
+export const progressIndicatorTemplate = html`
+    <div class="indicator" part="indicator"></div>
+`;
+
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.
  * @public
@@ -11,7 +18,7 @@ import type { ProgressOptions } from "./progress.options.js";
 export function progressTemplate<T extends FASTProgress>(
     options: ProgressOptions = {}
 ): ElementViewTemplate<T> {
-    return html`
+    return html<T>`
         <template
             role="progressbar"
             aria-valuenow="${x => x.value}"
@@ -21,21 +28,22 @@ export function progressTemplate<T extends FASTProgress>(
             ${when(
                 x => typeof x.value === "number",
                 html<T>`
-                    <div class="progress" part="progress" slot="determinate">
-                        <div
-                            class="determinate"
-                            part="determinate"
-                            style="width: ${x => x.percentComplete}%"
-                        ></div>
-                    </div>
+                    <span
+                        class="determinate"
+                        part="determinate"
+                        style="--percent-complete: ${x => x.percentComplete}"
+                    >
+                        <slot name="determinate">
+                            ${staticallyCompose(options.determinateIndicator)}
+                        </slot>
+                    </span>
                 `,
                 html<T>`
-                    <div class="progress" part="progress" slot="indeterminate">
+                    <span class="indeterminate" part="indeterminate">
                         <slot name="indeterminate">
-                            ${staticallyCompose(options.indeterminateIndicator1)}
-                            ${staticallyCompose(options.indeterminateIndicator2)}
+                            ${staticallyCompose(options.indeterminateIndicator)}
                         </slot>
-                    </div>
+                    </span>
                 `
             )}
         </template>
diff --git a/packages/web-components/fast-foundation/src/progress/progress.ts b/packages/web-components/fast-foundation/src/progress/progress.ts
index 661b67cb366..7fc40b10ca8 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.ts
@@ -4,8 +4,8 @@ import { FASTBaseProgress } from "./base-progress.js";
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @csspart progress - Represents the progress element
+ * @slot determinate - The slot for the determinate indicator
+ * @slot indeterminate - The slot for the indeterminate indicator
  * @csspart determinate - The determinate indicator
  * @csspart indeterminate - The indeterminate indicator
  *
diff --git a/packages/web-components/fast-foundation/src/progress/stories/progress.register.ts b/packages/web-components/fast-foundation/src/progress/stories/progress.register.ts
index 78e4c909bb9..ee77a4e29e3 100644
--- a/packages/web-components/fast-foundation/src/progress/stories/progress.register.ts
+++ b/packages/web-components/fast-foundation/src/progress/stories/progress.register.ts
@@ -1,7 +1,6 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
 import { FASTProgress } from "../progress.js";
-import { progressTemplate } from "../progress.template.js";
+import { progressIndicatorTemplate, progressTemplate } from "../progress.template.js";
 
 const styles = css`
     :host {
@@ -11,15 +10,8 @@ const styles = css`
         outline: none;
         height: calc(var(--design-unit) * 1px);
         margin: calc(var(--design-unit) * 1px) 0;
-    }
-
-    .progress {
         background-color: var(--neutral-fill-rest);
         border-radius: calc(var(--design-unit) * 1px);
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
         position: relative;
     }
 
@@ -29,6 +21,7 @@ const styles = css`
         height: 100%;
         transition: all 0.2s ease-in-out;
         display: flex;
+        width: calc(var(--percent-complete) * 1%);
     }
 
     .indeterminate {
@@ -40,8 +33,8 @@ const styles = css`
         width: 100%;
     }
 
-    .indeterminate-indicator-1 {
-        animation: indeterminate-1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    .indeterminate .indicator {
+        animation: indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         background-color: var(--accent-foreground-rest);
         border-radius: calc(var(--design-unit) * 1px);
         height: 100%;
@@ -50,17 +43,7 @@ const styles = css`
         width: 40%;
     }
 
-    .indeterminate-indicator-2 {
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        background-color: var(--accent-foreground-rest);
-        border-radius: calc(var(--design-unit) * 1px);
-        width: 60%;
-        animation: indeterminate-2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    }
-
-    @keyframes indeterminate-1 {
+    @keyframes indeterminate {
         0% {
             opacity: 1;
             transform: translateX(-100%);
@@ -77,41 +60,13 @@ const styles = css`
             transform: translateX(300%);
         }
     }
-
-    @keyframes indeterminate-2 {
-        0% {
-            opacity: 0;
-            transform: translateX(-150%);
-        }
-        29.99% {
-            opacity: 0;
-        }
-        30% {
-            opacity: 1;
-            transform: translateX(-150%);
-        }
-        100% {
-            transform: translateX(166.66%);
-            opacity: 1;
-        }
-    }
 `;
 
 FASTProgress.define({
     name: "fast-progress",
     template: progressTemplate({
-        indeterminateIndicator1: /* html */ html`
-            <span
-                class="indeterminate-indicator-1"
-                part="indeterminate-indicator-1"
-            ></span>
-        `,
-        indeterminateIndicator2: /* html */ html`
-            <span
-                class="indeterminate-indicator-2"
-                part="indeterminate-indicator-2"
-            ></span>
-        `,
+        determinateIndicator: progressIndicatorTemplate,
+        indeterminateIndicator: progressIndicatorTemplate,
     }),
     styles,
 });

From 352dbd2245e02f63c54d93d0b0d8eafe2f41f255 Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:43:32 -0700
Subject: [PATCH 2/5] Change files

---
 ...st-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json

diff --git a/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json b/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json
new file mode 100644
index 00000000000..b872c780718
--- /dev/null
+++ b/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Update Progress templates",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}

From 375b9431fb194fb472a668a7d489c2dc16894051 Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Tue, 12 Dec 2023 20:19:43 -0800
Subject: [PATCH 3/5] Doc updates

---
 .../web-components/fast-foundation/docs/api-report.md     | 4 ++--
 .../src/progress-ring/progress-ring.template.ts           | 1 +
 .../fast-foundation/src/progress-ring/progress-ring.ts    | 2 +-
 .../web-components/fast-foundation/src/progress/README.md | 8 +++-----
 .../fast-foundation/src/progress/progress.template.ts     | 1 +
 .../fast-foundation/src/progress/progress.ts              | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 4d37e0029ae..2b4f0ba1175 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2550,7 +2550,7 @@ export type PickerOptions = {
 // @public
 export function pickerTemplate<T extends FASTPicker>(options: PickerOptions): ElementViewTemplate<T>;
 
-// @public (undocumented)
+// @public
 export const progressIndicatorTemplate: ViewTemplate<any, any>;
 
 // @public
@@ -2559,7 +2559,7 @@ export type ProgressOptions = {
     indeterminateIndicator?: StaticallyComposableHTML<FASTProgress>;
 };
 
-// @public (undocumented)
+// @public
 export const progressRingIndicatorTemplate: ViewTemplate<any, any>;
 
 // @public
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
index 84d27baa1b2..d4d20789e26 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
@@ -5,6 +5,7 @@ import type { FASTProgressRing } from "./progress-ring.js";
 import type { ProgressRingOptions } from "./progress-ring.options.js";
 
 /**
+ * The default template for the indicator element of the {@link @microsoft/fast-foundation#FASTProgressRing} component.
  * @public
  */
 export const progressRingIndicatorTemplate = html`
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
index 5966563b583..c88bde8d64b 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
@@ -1,7 +1,7 @@
 import { FASTBaseProgress } from "../progress/base-progress.js";
 
 /**
- * An circular Progress HTML Element.
+ * A circular Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
  * @slot determinate - The slot for the determinate indicator
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
index d5567a37843..4de218209c2 100644
--- a/packages/web-components/fast-foundation/src/progress/README.md
+++ b/packages/web-components/fast-foundation/src/progress/README.md
@@ -3,7 +3,7 @@ id: progress
 title: fast-progress
 sidebar_label: progress
 custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/progress/README.md
-description: fast-progress is a web component used to display the length of time a process will take or to visualize percentage value.
+description: fast-progress is used to display the length of time a process will take or to visualize percentage value or to represent an unspecified wait time.
 ---
 
 *Progress* and *progress ring* are used to display the length of time a process will take or to visualize percentage value (referred to as a **determinate** state) and to represent an unspecified wait time (referred to as an **indeterminate** state). *Progress* components are typically visually represented by a circular or linear animation. When the `value` attribute is passed the state is **determinate**, otherwise it is **indeterminate**. 
@@ -40,8 +40,7 @@ import {
 provideFASTDesignSystem()
     .register(
         fastProgress({
-            indeterminateIndicator1: `...your indeterminate indicator...`,
-            indeterminateIndicator2: `...your indeterminate indicator...`
+            indeterminateIndicator: `...your indeterminate indicator...`
         }),
         fastProgressRing({
             indeterminateIndicator: `...your indeterminate indicator...`
@@ -79,8 +78,7 @@ export const myProgress = Progress.compose<ProgressOptions>({
     baseName: "progress",
     template,
     styles,
-    indeterminateIndicator1: `...default indeterminate indicator...`,
-    indeterminateIndicator2: `...default indeterminate indicator...`,
+    indeterminateIndicator: `...default indeterminate indicator...`,
 });
 ```
 
diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
index 967f7c70709..3446e06c398 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -5,6 +5,7 @@ import type { FASTProgress } from "./progress.js";
 import type { ProgressOptions } from "./progress.options.js";
 
 /**
+ * The default template for the indicator element of the {@link @microsoft/fast-foundation#FASTProgressRing} component.
  * @public
  */
 export const progressIndicatorTemplate = html`
diff --git a/packages/web-components/fast-foundation/src/progress/progress.ts b/packages/web-components/fast-foundation/src/progress/progress.ts
index 7fc40b10ca8..4f68e8efac6 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.ts
@@ -1,7 +1,7 @@
 import { FASTBaseProgress } from "./base-progress.js";
 
 /**
- * An Progress HTML Element.
+ * A Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
  * @slot determinate - The slot for the determinate indicator

From e0e142e1ff05470ea21e7eb207a90c8404cb941a Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Tue, 12 Dec 2023 20:28:16 -0800
Subject: [PATCH 4/5] Update change message

---
 ...ft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json b/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json
index b872c780718..dc2caa570e4 100644
--- a/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json
+++ b/change/@microsoft-fast-foundation-28a53924-05c6-4a69-afa5-bbb8efebe05c.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "Foundation: Update Progress templates",
+  "comment": "Foundation: Update Progress templates (see https://github.com/microsoft/fast/pull/6799)",
   "packageName": "@microsoft/fast-foundation",
   "email": "47367562+bheston@users.noreply.github.com",
   "dependentChangeType": "prerelease"

From e2ee5458f61becf181f6ab7120e0c3fc1625d6eb Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:36:35 -0800
Subject: [PATCH 5/5] Fix doc component name

---
 .../fast-foundation/src/progress/progress.template.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
index 3446e06c398..50be818559c 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -5,7 +5,7 @@ import type { FASTProgress } from "./progress.js";
 import type { ProgressOptions } from "./progress.options.js";
 
 /**
- * The default template for the indicator element of the {@link @microsoft/fast-foundation#FASTProgressRing} component.
+ * The default template for the indicator element of the {@link @microsoft/fast-foundation#FASTProgress} component.
  * @public
  */
 export const progressIndicatorTemplate = html`