diff --git a/change/@microsoft-fast-foundation-82e8ecae-0e02-4f0d-aa40-59763c8c59d9.json b/change/@microsoft-fast-foundation-82e8ecae-0e02-4f0d-aa40-59763c8c59d9.json
new file mode 100644
index 00000000000..488e077f136
--- /dev/null
+++ b/change/@microsoft-fast-foundation-82e8ecae-0e02-4f0d-aa40-59763c8c59d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Update standard template naming (https://github.com/microsoft/fast/pull/6922)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
index 5373ba3a734..2bf77817fd7 100644
--- a/packages/web-components/fast-foundation/src/dialog/README.md
+++ b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -99,11 +99,10 @@ export const myDialog = Dialog.compose({
 
 #### CSS Parts
 
-| Name                 | Description                                                                 |
-| -------------------- | --------------------------------------------------------------------------- |
-| `positioning-region` | A wrapping element used to center the dialog and position the modal overlay |
-| `overlay`            | The modal dialog overlay                                                    |
-| `control`            | The dialog element                                                          |
+| Name      | Description              |
+| --------- | ------------------------ |
+| `overlay` | The modal dialog overlay |
+| `control` | The dialog element       |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.md b/packages/web-components/fast-foundation/src/dialog/dialog.spec.md
index 08ebc6f9db1..806e855c3e1 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.md
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.md
@@ -64,22 +64,20 @@ Web components complicate the dialog focus queue implementation as the typical m
 ### Anatomy and Appearance
 **Structure:**
 ```
-<div class="root">
-    <div class="positioning-region">
-        <div class="overlay">
-        <div
-            role="dialog"
-            aria-modal="true"
-            tabindex="-1"
-            class="content-region"
-            aria-describedby="foo"
-            aria-labelledby="bar"
-            aria-label="baz"
-        >
-            <slot></slot>
-        </div>
+<template>
+    <div class="overlay">
+    <div
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        class="content-region"
+        aria-describedby="foo"
+        aria-labelledby="bar"
+        aria-label="baz"
+    >
+        <slot></slot>
     </div>
-</div>
+</template>
 ```
 
 **Appearance:**
@@ -89,10 +87,9 @@ Web components complicate the dialog focus queue implementation as the typical m
 | dark mode | ![](./images/dialog-dark.png) |
 
 Parts:
-- root - the root of the dialog
-- positioning-region - ensuring the dialog is centered correctly requires a certain structure. Centering with absolute positioning can cause blurry content within the dialog itself. After investigating several implementations, the best and most common way of ensuring the dialog can be centered is to include a div to position the actual dialog itself using something like flexbox or css-grid. This ensures that the blurry content issue does not happen and the dialog centers easily within the screen.
-- modal-overlay - the modal overlay
-- content-region - the region where content is actually rendered. This part is where the `role="dialog"` will actually exist
+- root - ensuring the dialog is centered correctly requires a certain structure. Centering with absolute positioning can cause blurry content within the dialog itself. After investigating several implementations, the best and most common way of ensuring the dialog can be centered is to include a div to position the actual dialog itself using something like flexbox or css-grid. This ensures that the blurry content issue does not happen and the dialog centers easily within the screen.
+- overlay - the modal overlay
+- dialog - the region where content is actually rendered. This part is where the `role="dialog"` will actually exist
 
 Animation:
 The current working model (assumption) is that animation will be taken up as part of the adaptive ui story in the design system at some point. This will provide configurability to users. From a dialog standpoint, I think we'll have a default animation baked in, though this would be configurable through the design system.
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
index 3d89580ae42..e8058d96937 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
@@ -7,31 +7,29 @@ import type { FASTDialog } from "./dialog.js";
  */
 export function dialogTemplate<T extends FASTDialog>(): ElementViewTemplate<T> {
     return html<T>`
-        <div class="positioning-region" part="positioning-region">
-            ${when(
-                x => x.modal,
-                html<T>`
-                    <div
-                        class="overlay"
-                        part="overlay"
-                        role="presentation"
-                        @click="${x => x.dismiss()}"
-                    ></div>
-                `
-            )}
-            <div
-                role="dialog"
-                tabindex="-1"
-                class="control"
-                part="control"
-                aria-modal="${x => (x.modal ? x.modal : void 0)}"
-                aria-describedby="${x => x.ariaDescribedby}"
-                aria-labelledby="${x => x.ariaLabelledby}"
-                aria-label="${x => x.ariaLabel}"
-                ${ref("dialog")}
-            >
-                <slot></slot>
-            </div>
+        ${when(
+            x => x.modal,
+            html<T>`
+                <div
+                    class="overlay"
+                    part="overlay"
+                    role="presentation"
+                    @click="${x => x.dismiss()}"
+                ></div>
+            `
+        )}
+        <div
+            role="dialog"
+            tabindex="-1"
+            class="control"
+            part="control"
+            aria-modal="${x => (x.modal ? x.modal : void 0)}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-labelledby="${x => x.ariaLabelledby}"
+            aria-label="${x => x.ariaLabel}"
+            ${ref("dialog")}
+        >
+            <slot></slot>
         </div>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index ab27d31fe67..9923c5da9a2 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -14,7 +14,6 @@ import { getRootActiveElement } from "../utilities/index.js";
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
  *
  * @slot - The default slot for the dialog content
- * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
  * @csspart overlay - The modal dialog overlay
  * @csspart control - The dialog element
  * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
diff --git a/packages/web-components/fast-foundation/src/dialog/stories/dialog.register.ts b/packages/web-components/fast-foundation/src/dialog/stories/dialog.register.ts
index 0d036e37e66..6722ab85ec2 100644
--- a/packages/web-components/fast-foundation/src/dialog/stories/dialog.register.ts
+++ b/packages/web-components/fast-foundation/src/dialog/stories/dialog.register.ts
@@ -11,28 +11,24 @@ const styles = css`
         --elevation: 14;
         --dialog-height: 480px;
         --dialog-width: 640px;
-        display: block;
-    }
-
-    .overlay {
+        display: flex;
+        justify-content: center;
         position: fixed;
         top: 0;
+        bottom: 0;
         left: 0;
         right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.3);
-        touch-action: none;
+        overflow: auto;
     }
 
-    .positioning-region {
-        display: flex;
-        justify-content: center;
+    .overlay {
         position: fixed;
         top: 0;
-        bottom: 0;
         left: 0;
         right: 0;
-        overflow: auto;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+        touch-action: none;
     }
 
     .control {
diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md
index 738a3c0a992..f190a84385d 100644
--- a/packages/web-components/fast-foundation/src/radio-group/README.md
+++ b/packages/web-components/fast-foundation/src/radio-group/README.md
@@ -111,9 +111,9 @@ export const myRadioGroup = RadioGroup.compose({
 
 #### CSS Parts
 
-| Name                 | Description                                      |
-| -------------------- | ------------------------------------------------ |
-| `positioning-region` | The positioning region for laying out the radios |
+| Name      | Description                             |
+| --------- | --------------------------------------- |
+| `control` | The container for laying out the radios |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.pw.spec.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.pw.spec.ts
index af7362a79a7..a4fd5414cee 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.pw.spec.ts
@@ -50,31 +50,6 @@ test.describe("Radio Group", () => {
         );
     });
 
-    test("should set a matching class on the `positioning-region` when an orientation is provided", async () => {
-        await root.evaluate(node => {
-            node.innerHTML = /* html */ `
-                <fast-radio-group></fast-radio-group>
-            `;
-        });
-
-        const positioningRegion = element.locator(".positioning-region");
-
-        // Horizontal by default
-        await expect(positioningRegion).toHaveClass(/horizontal/);
-
-        await element.evaluate((node: FASTRadioGroup, RadioGroupOrientation) => {
-            node.orientation = RadioGroupOrientation.vertical;
-        }, RadioGroupOrientation);
-
-        await expect(positioningRegion).toHaveClass(/vertical/);
-
-        await element.evaluate((node: FASTRadioGroup, RadioGroupOrientation) => {
-            node.orientation = RadioGroupOrientation.horizontal;
-        }, RadioGroupOrientation);
-
-        await expect(positioningRegion).toHaveClass(/horizontal/);
-    });
-
     test("should set the `aria-orientation` attribute equal to the `orientation` value", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
index 353175b5385..7ef8e8ee886 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts
@@ -1,6 +1,5 @@
 import { elements, ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
 import type { FASTRadioGroup } from "./radio-group.js";
-import { RadioGroupOrientation } from "./radio-group.options.js";
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.
@@ -20,13 +19,7 @@ export function radioGroupTemplate<T extends FASTRadioGroup>(): ElementViewTempl
             @focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
         >
             <slot name="label"></slot>
-            <div
-                class="positioning-region ${x =>
-                    x.orientation === RadioGroupOrientation.horizontal
-                        ? "horizontal"
-                        : "vertical"}"
-                part="positioning-region"
-            >
+            <div class="control" part="control">
                 <slot
                     ${slotted({
                         property: "slottedRadioButtons",
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
index 12122fcf1e7..01bd2ce6b29 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
@@ -18,7 +18,7 @@ import { RadioGroupOrientation } from "./radio-group.options.js";
  *
  * @slot label - The slot for the label
  * @slot - The default slot for radio buttons
- * @csspart positioning-region - The positioning region for laying out the radios
+ * @csspart control - The container for laying out the radios
  * @fires change - Fires a custom 'change' event when the value changes
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/radio-group/stories/radio-group.register.ts b/packages/web-components/fast-foundation/src/radio-group/stories/radio-group.register.ts
index c7baedb719f..7b0c4d09e3c 100644
--- a/packages/web-components/fast-foundation/src/radio-group/stories/radio-group.register.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/stories/radio-group.register.ts
@@ -6,20 +6,24 @@ const styles = css`
     :host([hidden]) {
         display: none;
     }
+
     :host {
         align-items: flex-start;
         display: flex;
         flex-direction: column;
         margin: calc(var(--design-unit) * 1px) 0;
     }
-    .positioning-region {
+
+    .control {
         display: flex;
         flex-wrap: wrap;
     }
-    :host([orientation="vertical"]) .positioning-region {
+
+    :host([orientation="vertical"]) .control {
         flex-direction: column;
     }
-    :host([orientation="horizontal"]) .positioning-region {
+
+    :host([orientation="horizontal"]) .control {
         flex-direction: row;
     }
 
diff --git a/packages/web-components/fast-foundation/src/radio/stories/radio.register.ts b/packages/web-components/fast-foundation/src/radio/stories/radio.register.ts
index 24cffbc4ab2..2fcc77e89de 100644
--- a/packages/web-components/fast-foundation/src/radio/stories/radio.register.ts
+++ b/packages/web-components/fast-foundation/src/radio/stories/radio.register.ts
@@ -1,5 +1,5 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import circleIcon from "../../../statics/svg/circle_16_filled.svg";
 import { FASTRadio } from "../radio.js";
 import { radioTemplate } from "../radio.template.js";
 
@@ -7,6 +7,7 @@ const styles = css`
     :host([hidden]) {
         display: none;
     }
+
     :host {
         --input-size: calc(
             ((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) +
@@ -16,8 +17,6 @@ const styles = css`
         display: inline-flex;
         flex-direction: row;
         margin: calc(var(--design-unit) * 1px) 0;
-        /* Chromium likes to select label text or the default slot when
-            the radio is clicked. Maybe there is a better solution here? */
         outline: none;
         position: relative;
         user-select: none;
@@ -37,8 +36,12 @@ const styles = css`
         border-radius: 100%;
         border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
         background: var(--neutral-fill-input-rest);
+        color: var(--neutral-foreground-rest);
         outline: none;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     .label {
@@ -56,31 +59,19 @@ const styles = css`
         visibility: hidden;
     }
 
-    .control,
-    .checked-indicator {
-        flex-shrink: 0;
-    }
-
-    .checked-indicator {
+    slot[name="checked-indicator"] * {
         position: absolute;
-        top: 5px;
-        left: 5px;
-        right: 5px;
-        bottom: 5px;
-        border-radius: 100%;
-        display: inline-block;
-        background: var(--foreground-on-accent-rest);
-        fill: var(--foreground-on-accent-rest);
+        fill: currentcolor;
         opacity: 0;
         pointer-events: none;
     }
 
-    :host(:not([disabled])) .control:hover {
+    :host(:not([disabled]):hover) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--neutral-stroke-hover);
     }
 
-    :host(:not([disabled])) .control:active {
+    :host(:not([disabled]):active) .control {
         background: var(--neutral-fill-input-active);
         border-color: var(--neutral-stroke-active);
     }
@@ -92,26 +83,19 @@ const styles = css`
     :host([aria-checked="true"]) .control {
         background: var(--accent-fill-rest);
         border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+        color: var(--foreground-on-accent-rest);
     }
 
-    :host([aria-checked="true"]:not([disabled])) .control:hover {
+    :host([aria-checked="true"]:not([disabled]):hover) .control {
         background: var(--accent-fill-hover);
         border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-hover);
+        color: var(--foreground-on-accent-hover);
     }
 
-    :host([aria-checked="true"]:not([disabled])) .control:hover .checked-indicator {
-        background: var(--foreground-on-accent-hover);
-        fill: var(--foreground-on-accent-hover);
-    }
-
-    :host([aria-checked="true"]:not([disabled])) .control:active {
+    :host([aria-checked="true"]:not([disabled]):active) .control {
         background: var(--accent-fill-active);
         border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-active);
-    }
-
-    :host([aria-checked="true"]:not([disabled])) .control:active .checked-indicator {
-        background: var(--foreground-on-accent-active);
-        fill: var(--foreground-on-accent-active);
+        color: var(--foreground-on-accent-active);
     }
 
     :host([aria-checked="true"]:focus-visible:not([disabled])) .control {
@@ -123,7 +107,7 @@ const styles = css`
         cursor: not-allowed;
     }
 
-    :host([aria-checked="true"]) .checked-indicator {
+    :host([aria-checked="true"]) slot[name="checked-indicator"] * {
         opacity: 1;
     }
 
@@ -135,9 +119,7 @@ const styles = css`
 FASTRadio.define({
     name: "fast-radio",
     template: radioTemplate({
-        checkedIndicator: /* html */ html`
-            <div part="checked-indicator" class="checked-indicator"></div>
-        `,
+        checkedIndicator: circleIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/tab/tab.template.ts b/packages/web-components/fast-foundation/src/tab/tab.template.ts
index 9a657d83c94..8179cdb077c 100644
--- a/packages/web-components/fast-foundation/src/tab/tab.template.ts
+++ b/packages/web-components/fast-foundation/src/tab/tab.template.ts
@@ -12,7 +12,9 @@ export function tabTemplate<T extends FASTTab>(
     return html<T>`
         <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
             ${startSlotTemplate(options)}
-            <slot></slot>
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
             ${endSlotTemplate(options)}
         </template>
     `;
diff --git a/packages/web-components/fast-foundation/src/tab/tab.ts b/packages/web-components/fast-foundation/src/tab/tab.ts
index 66d45bfe5d3..98feb8841d0 100644
--- a/packages/web-components/fast-foundation/src/tab/tab.ts
+++ b/packages/web-components/fast-foundation/src/tab/tab.ts
@@ -15,6 +15,7 @@ export type TabOptions = StartEndOptions<FASTTab>;
  * @slot start - Content which can be provided before the tab content
  * @slot end - Content which can be provided after the tab content
  * @slot - The default slot for the tab content
+ * @csspart content - The container for the default slot content
  *
  * @public
  */
diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
index 88757a44664..0fdb22b048b 100644
--- a/packages/web-components/fast-foundation/src/tabs/README.md
+++ b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -154,9 +154,10 @@ export const myTabs = Tabs.compose({
 
 #### CSS Parts
 
-| Name      | Description                       |
-| --------- | --------------------------------- |
-| `tablist` | The element wrapping for the tabs |
+| Name       | Description                        |
+| ---------- | ---------------------------------- |
+| `tablist`  | The element wrapping the tabs      |
+| `tabpanel` | The element wrapping the tabpanels |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/tabs/stories/tabs.register.ts b/packages/web-components/fast-foundation/src/tabs/stories/tabs.register.ts
index 73ecab5614a..4fb4b3c6d3a 100644
--- a/packages/web-components/fast-foundation/src/tabs/stories/tabs.register.ts
+++ b/packages/web-components/fast-foundation/src/tabs/stories/tabs.register.ts
@@ -23,7 +23,7 @@ const styles = css`
         position: relative;
         width: max-content;
         align-self: end;
-        padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 4px) 0;
+        padding: calc(var(--design-unit) * 4px) 0;
         box-sizing: border-box;
     }
     ::slotted([slot="start"]),
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
index d308dd5e84a..24e810a4207 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.pw.spec.ts
@@ -333,6 +333,8 @@ test.describe("Tabs", () => {
 
         await secondTab.evaluate((node: FASTTab) => {
             node.disabled = true;
+
+            return new Promise(requestAnimationFrame);
         });
 
         await (await element.elementHandle())?.waitForElementState("stable");
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index b7e88c71d9e..842f1c5d9e0 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -21,7 +21,8 @@ import { TabsOrientation } from "./tabs.options.js";
  * @slot end - Content which can be provided after the tablist element
  * @slot tab - The slot for tabs
  * @slot tabpanel - The slot for tabpanels
- * @csspart tablist - The element wrapping for the tabs
+ * @csspart tablist - The element wrapping the tabs
+ * @csspart tabpanel - The element wrapping the tabpanels
  * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/toolbar/README.md b/packages/web-components/fast-foundation/src/toolbar/README.md
index 658b7588182..545120a7e8b 100644
--- a/packages/web-components/fast-foundation/src/toolbar/README.md
+++ b/packages/web-components/fast-foundation/src/toolbar/README.md
@@ -124,9 +124,9 @@ export const myToolbar = Toolbar.compose({
 
 #### CSS Parts
 
-| Name                 | Description                                           |
-| -------------------- | ----------------------------------------------------- |
-| `positioning-region` | The element containing the items, start and end slots |
+| Name      | Description                                           |
+| --------- | ----------------------------------------------------- |
+| `control` | The element containing the items, start and end slots |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.register.ts b/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.register.ts
index 881690c379e..40096ac5db1 100644
--- a/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.register.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/stories/toolbar.register.ts
@@ -15,22 +15,27 @@ const styles = css`
         fill: currentcolor;
         padding: var(--toolbar-item-gap);
     }
+
     :host(var(--focus-visible)) {
         outline: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-focus);
     }
-    .positioning-region {
+
+    .control {
         align-items: flex-start;
         display: inline-flex;
         flex-flow: row wrap;
         justify-content: flex-start;
     }
-    :host([orientation="vertical"]) .positioning-region {
+
+    :host([orientation="vertical"]) .control {
         flex-direction: column;
     }
+
     ::slotted(:not([slot])) {
         flex: 0 0 auto;
         margin: 0 var(--toolbar-item-gap);
     }
+
     :host([orientation="vertical"]) ::slotted(:not([slot])) {
         margin: var(--toolbar-item-gap) 0;
     }
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
index 29766c2884f..c60b43dfcd8 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
@@ -35,7 +35,7 @@ export function toolbarTemplate<T extends FASTToolbar>(
             })}
         >
             <slot name="label"></slot>
-            <div class="positioning-region" part="positioning-region">
+            <div class="control" part="control">
                 ${startSlotTemplate(options)}
                 <slot
                     ${slotted({
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
index df230a91063..91eaaba5bad 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
@@ -41,7 +41,7 @@ const ToolbarArrowKeyMap = Object.freeze({
  * @slot end - Content which can be provided after the slotted items
  * @slot - The default slot for slotted items
  * @slot label - The toolbar label
- * @csspart positioning-region - The element containing the items, start and end slots
+ * @csspart control - The element containing the items, start and end slots
  *
  * @public
  */
diff --git a/packages/web-components/fast-foundation/statics/svg/circle_16_filled.svg b/packages/web-components/fast-foundation/statics/svg/circle_16_filled.svg
new file mode 100644
index 00000000000..4693180980d
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/circle_16_filled.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z"/></svg>
\ No newline at end of file