diff --git a/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json b/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json
new file mode 100644
index 00000000000..8ba743eac02
--- /dev/null
+++ b/change/@microsoft-fast-foundation-a6d78d55-521f-4741-a7b4-60f4e5b14a37.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "STYLE BREAKING: Updated templates for structure and consistency (see https://github.com/microsoft/fast/pull/6286)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json b/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json
new file mode 100644
index 00000000000..dda30d283a4
--- /dev/null
+++ b/change/@microsoft-fast-ssr-b504d376-3c29-4415-8124-f4fd4f05c078.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix tests for related foundation template changes",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/.storybook/preview-body.html b/packages/web-components/fast-foundation/.storybook/preview-body.html
index cb2a12730d2..ffbe1cb8ec4 100644
--- a/packages/web-components/fast-foundation/.storybook/preview-body.html
+++ b/packages/web-components/fast-foundation/.storybook/preview-body.html
@@ -21,4 +21,26 @@
             d="M8.26 4.6a5.21 5.21 0 0 1 9.03 5.22l-.2.34a.5.5 0 0 1-.67.19l-3.47-2-1.93 3.38c1.34.4 2.5 1.33 3.31 2.52h-.09c-.34 0-.66.11-.92.31A4.9 4.9 0 0 0 9.5 12.5a4.9 4.9 0 0 0-3.82 2.06 1.5 1.5 0 0 0-1.01-.3 5.94 5.94 0 0 1 5.31-2.74l2.1-3.68-3.83-2.2a.5.5 0 0 1-.18-.7l.2-.33Zm.92.42 1.7.98.02-.02a8.08 8.08 0 0 1 3.27-2.74 4.22 4.22 0 0 0-4.99 1.78ZM14 7.8c.47-.82.7-1.46.77-2.09a5.8 5.8 0 0 0-.06-1.62 6.96 6.96 0 0 0-2.95 2.41L14 7.8Zm.87.5 1.61.93a4.22 4.22 0 0 0-.74-5.02c.07.56.09 1.1.02 1.63-.1.79-.38 1.56-.89 2.46Zm-9.63 7.3a.5.5 0 0 0-.96.03c-.17.7-.5 1.08-.86 1.3-.38.23-.87.32-1.42.32a.5.5 0 0 0 0 1c.64 0 1.33-.1 1.94-.47.34-.2.64-.5.88-.87a2.96 2.96 0 0 0 4.68-.01 2.96 2.96 0 0 0 4.74-.06c.64.9 1.7 1.41 2.76 1.41a.5.5 0 1 0 0-1c-.98 0-1.96-.64-2.29-1.65a.5.5 0 0 0-.95 0 1.98 1.98 0 0 1-3.79.07.5.5 0 0 0-.94 0 1.98 1.98 0 0 1-3.8-.08Z"
         />
     </symbol>
+    <symbol
+        id="chevron-left-icon"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M7.35 2.15c.2.2.2.5 0 .7L4.21 6l3.14 3.15a.5.5 0 1 1-.7.7l-3.5-3.5a.5.5 0 0 1 0-.7l3.5-3.5c.2-.2.5-.2.7 0Z"
+        />
+    </symbol>
+    <symbol
+        id="chevron-right-icon"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+        />
+    </symbol>
 </svg>
diff --git a/packages/web-components/fast-foundation/.storybook/preview-head.html b/packages/web-components/fast-foundation/.storybook/preview-head.html
index 8aa4d735223..1e0bc4603f4 100644
--- a/packages/web-components/fast-foundation/.storybook/preview-head.html
+++ b/packages/web-components/fast-foundation/.storybook/preview-head.html
@@ -1,19 +1,19 @@
 <style>
     :root {
         --accent-color: #da1a5f;
-        --accent-fill-active: #df3c77;
-        --accent-fill-focus: #dc2969;
-        --accent-fill-hover: #da1a5f;
-        --accent-fill-rest: #dc2969;
-        --accent-foreground-active: #dc2969;
-        --accent-foreground-focus: #da1a5f;
-        --accent-foreground-hover: #b3154e;
-        --accent-foreground-rest: #da1a5f;
+        --accent-fill-active: #e63d79;
+        --accent-fill-focus: #cf1c54;
+        --accent-fill-hover: #e01e5e;
+        --accent-fill-rest: #cf1c54;
+        --accent-foreground-active: #c71b4f;
+        --accent-foreground-focus: #880f28;
+        --accent-foreground-hover: #720919;
+        --accent-foreground-rest: #880f28;
         --ambient-shadow-alpha: calc(0.11 * (2 - var(--background-luminance, 1)));
         --ambient-shadow-color: rgba(0, 0, 0, var(--ambient-shadow-alpha));
         --ambient-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px)
             var(--ambient-shadow-color);
-        --base-height-multiplier: 10;
+        --base-height-multiplier: 8;
         --base-horizontal-spacing-multiplier: 3;
         --base-layer-luminance: 1;
         --body-font: Arial, Helvetica, sans-serif;
@@ -27,6 +27,7 @@
             calc((var(--elevation) * 0.9px)) var(--directional-shadow-color);
         --directional-shadow-alpha: calc(0.13 * (2 - var(--background-luminance, 1)));
         --directional-shadow-color: rgba(0, 0, 0, var(--directional-shadow-alpha));
+        --disabled-cursor: not-allowed;
         --disabled-opacity: 0.3;
         --elevation: 14;
         --elevation-shadow: var(--ambient-shadow), var(--directional-shadow);
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 1b30ff3053d..ad3f1424dd9 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -31,8 +31,7 @@ export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 
 // @public
 export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
-    expandedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
-    collapsedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTAccordionItem>;
 };
 
 // @public
@@ -155,7 +154,10 @@ export const AxisScalingMode: {
 export type AxisScalingMode = ValuesOf<typeof AxisScalingMode>;
 
 // @public
-export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T>;
+export type BadgeOptions = StartEndOptions;
+
+// @public
+export function badgeTemplate<T extends FASTBadge>(options?: BadgeOptions): ElementViewTemplate<T>;
 
 // @public
 export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
@@ -166,7 +168,10 @@ export type BreadcrumbItemOptions = StartEndOptions<FASTBreadcrumbItem> & {
 export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(options?: BreadcrumbItemOptions): ElementViewTemplate<T>;
 
 // @public
-export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T>;
+export type BreadcrumbOptions = StartEndOptions;
+
+// @public
+export function breadcrumbTemplate<T extends FASTBreadcrumb>(options?: BreadcrumbOptions): ElementViewTemplate<T>;
 
 // @public
 export type ButtonOptions = StartEndOptions<FASTButton>;
@@ -292,7 +297,7 @@ export type ComboboxAutocomplete = ValuesOf<typeof ComboboxAutocomplete>;
 
 // @public
 export type ComboboxOptions = StartEndOptions<FASTCombobox> & {
-    indicator?: StaticallyComposableHTML<FASTCombobox>;
+    openCloseIcon?: StaticallyComposableHTML<FASTCombobox>;
 };
 
 // @public
@@ -786,10 +791,17 @@ export class FASTAnchoredRegion extends FASTElement {
 export class FASTAvatar extends FASTElement {
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBadge" because one of its declarations is marked as @internal
+//
 // @public
 export class FASTBadge extends FASTElement {
 }
 
+// @internal
+export interface FASTBadge extends StartEnd {
+}
+
 // @public
 export class FASTBaseProgress extends FASTElement {
     // @internal (undocumented)
@@ -807,6 +819,9 @@ export class FASTBaseProgress extends FASTElement {
     protected valueChanged(): void;
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumb" because one of its declarations is marked as @internal
+//
 // @public
 export class FASTBreadcrumb extends FASTElement {
     // @internal (undocumented)
@@ -815,6 +830,10 @@ export class FASTBreadcrumb extends FASTElement {
     protected slottedBreadcrumbItemsChanged(): void;
 }
 
+// @internal
+export interface FASTBreadcrumb extends StartEnd {
+}
+
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "FASTBreadcrumbItem" because one of its declarations is marked as @internal
 //
@@ -940,11 +959,11 @@ export class FASTCombobox extends FormAssociatedCombobox {
     // (undocumented)
     connectedCallback(): void;
     // @internal
-    control: HTMLInputElement;
-    // @internal
     disabledChanged(prev: boolean, next: boolean): void;
     // (undocumented)
     disconnectedCallback(): void;
+    // @internal
+    field: HTMLInputElement;
     filteredOptions: FASTListboxOption[];
     filterOptions(): void;
     // @internal
@@ -1462,10 +1481,10 @@ export class FASTNumberField extends FormAssociatedNumberField {
     // @internal
     connectedCallback(): void;
     // @internal
-    control: HTMLInputElement;
-    // @internal
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleBlur(): void;
     // @internal
     handleChange(): void;
@@ -1719,11 +1738,11 @@ export class FASTSearch extends FormAssociatedSearch {
     protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
-    // @internal
-    control: HTMLInputElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleChange(): void;
     handleClearInput(): void;
     // @internal
@@ -1746,8 +1765,6 @@ export class FASTSearch extends FormAssociatedSearch {
     readOnly: boolean;
     // (undocumented)
     protected readOnlyChanged(): void;
-    // @internal
-    root: HTMLDivElement;
     size: number;
     // (undocumented)
     protected sizeChanged(): void;
@@ -1767,6 +1784,8 @@ export interface FASTSearch extends StartEnd, DelegatesARIASearch {
 //
 // @public
 export class FASTSelect extends FormAssociatedSelect {
+    // @internal
+    button: HTMLElement;
     cleanup: () => void;
     // @internal
     clickHandler(e: MouseEvent): boolean | void;
@@ -1775,8 +1794,6 @@ export class FASTSelect extends FormAssociatedSelect {
     // (undocumented)
     connectedCallback(): void;
     // @internal
-    control: HTMLElement;
-    // @internal
     disabledChanged(prev: boolean, next: boolean): void;
     // (undocumented)
     disconnectedCallback(): void;
@@ -1867,7 +1884,7 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
     // @internal (undocumented)
     stepMultiplier: number;
     // @internal (undocumented)
-    thumb: HTMLDivElement;
+    thumbContainer: HTMLDivElement;
     // @internal (undocumented)
     track: HTMLDivElement;
     // @internal (undocumented)
@@ -1891,6 +1908,8 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
 export class FASTSliderLabel extends FASTElement {
     // @internal (undocumented)
     connectedCallback(): void;
+    // @internal (undocumented)
+    container: HTMLDivElement;
     disabled: boolean;
     // @internal (undocumented)
     disconnectedCallback(): void;
@@ -1907,8 +1926,6 @@ export class FASTSliderLabel extends FASTElement {
     // @internal (undocumented)
     positionStyle: string;
     // @internal (undocumented)
-    root: HTMLDivElement;
-    // @internal (undocumented)
     sliderDirection: Direction;
     // @internal (undocumented)
     sliderMaxPosition: number;
@@ -1991,10 +2008,10 @@ export class FASTTextArea extends FormAssociatedTextArea {
     // (undocumented)
     protected autofocusChanged(): void;
     cols: number;
-    // @internal
-    control: HTMLTextAreaElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
+    // @internal
+    field: HTMLTextAreaElement;
     formId: string;
     // @internal
     handleChange(): void;
@@ -2024,7 +2041,7 @@ export class FASTTextArea extends FormAssociatedTextArea {
 }
 
 // @internal
-export interface FASTTextArea extends DelegatesARIATextbox {
+export interface FASTTextArea extends StartEnd, DelegatesARIATextbox {
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
@@ -2038,11 +2055,11 @@ export class FASTTextField extends FormAssociatedTextField {
     protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
-    // @internal
-    control: HTMLInputElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleChange(): void;
     // @internal
     handleTextInput(): void;
@@ -2364,10 +2381,11 @@ export type HorizontalPosition = ValuesOf<typeof HorizontalPosition>;
 export type HorizontalScrollOptions = StartEndOptions<FASTHorizontalScroll> & {
     nextFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
     previousFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
+    flipper: TemplateElementDependency;
 };
 
 // @public (undocumented)
-export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(options?: HorizontalScrollOptions): ElementViewTemplate<T>;
+export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(options: HorizontalScrollOptions): ElementViewTemplate<T>;
 
 // @public
 export const HorizontalScrollView: {
@@ -2427,7 +2445,7 @@ export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListE
 // @public
 export type MenuItemOptions = StartEndOptions<FASTMenuItem> & {
     checkboxIndicator?: StaticallyComposableHTML<FASTMenuItem>;
-    expandCollapseGlyph?: StaticallyComposableHTML<FASTMenuItem>;
+    submenuIcon?: StaticallyComposableHTML<FASTMenuItem>;
     radioIndicator?: StaticallyComposableHTML<FASTMenuItem>;
 };
 
@@ -2487,8 +2505,8 @@ export function noninteractiveCalendarTemplate<T extends FASTCalendar>(options:
 
 // @public
 export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
-    stepDownGlyph?: StaticallyComposableHTML<FASTNumberField>;
-    stepUpGlyph?: StaticallyComposableHTML<FASTNumberField>;
+    stepDownIcon?: StaticallyComposableHTML<FASTNumberField>;
+    stepUpIcon?: StaticallyComposableHTML<FASTNumberField>;
 };
 
 // @public
@@ -2529,14 +2547,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>;
 };
 
@@ -2611,14 +2636,16 @@ export const ScrollEasing: {
 export type ScrollEasing = ValuesOf<typeof ScrollEasing>;
 
 // @public
-export type SearchOptions = StartEndOptions<FASTSearch>;
+export type SearchOptions = StartEndOptions<FASTSearch> & {
+    clearIcon?: StaticallyComposableHTML<FASTSearch>;
+};
 
 // @public
 export function searchTemplate<T extends FASTSearch>(options?: SearchOptions): ElementViewTemplate<T>;
 
 // @public
 export type SelectOptions = StartEndOptions<FASTSelect> & {
-    indicator?: StaticallyComposableHTML<FASTSelect>;
+    openCloseIcon?: StaticallyComposableHTML<FASTSelect>;
 };
 
 // @public
@@ -2711,7 +2738,7 @@ export const supportsElementInternals: boolean;
 
 // @public
 export type SwitchOptions = {
-    switch?: StaticallyComposableHTML<FASTSwitch>;
+    thumb?: StaticallyComposableHTML<FASTSwitch>;
 };
 
 // @public
@@ -2747,6 +2774,9 @@ export function tagFor(dependency: TemplateElementDependency): string;
 // @beta
 export type TemplateElementDependency = string | FASTElementDefinition | Constructable<FASTElement>;
 
+// @public
+export type TextAreaOptions = StartEndOptions;
+
 // @public
 export const TextAreaResize: {
     readonly none: "none";
@@ -2759,7 +2789,7 @@ export const TextAreaResize: {
 export type TextAreaResize = ValuesOf<typeof TextAreaResize>;
 
 // @public
-export function textAreaTemplate<T extends FASTTextArea>(): ElementViewTemplate<T>;
+export function textAreaTemplate<T extends FASTTextArea>(options?: TextAreaOptions): ElementViewTemplate<T>;
 
 // @public
 export type TextFieldOptions = StartEndOptions<FASTTextField>;
@@ -2818,7 +2848,7 @@ export function tooltipTemplate<T extends FASTTooltip>(): ElementViewTemplate<T>
 
 // @public
 export type TreeItemOptions = StartEndOptions<FASTTreeItem> & {
-    expandCollapseGlyph?: StaticallyComposableHTML<FASTTreeItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTTreeItem>;
 };
 
 // @public
@@ -2876,6 +2906,7 @@ export type YearFormat = ValuesOf<typeof YearFormat>;
 // dist/dts/calendar/calendar.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "dataGrid" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid-row.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridCell" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridRow" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
+// dist/dts/horizontal-scroll/horizontal-scroll.options.d.ts:39:5 - (ae-incompatible-release-tags) The symbol "flipper" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "anchoredRegion" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:10:5 - (ae-incompatible-release-tags) The symbol "pickerMenu" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:11:5 - (ae-incompatible-release-tags) The symbol "pickerMenuOption" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
index 77ecfe7fa3f..75948e36220 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
@@ -17,6 +17,7 @@ export function accordionItemTemplate<T extends FASTAccordionItem>(
             role="heading"
             aria-level="${x => x.headinglevel}"
         >
+            ${startSlotTemplate(options)}
             <button
                 class="button"
                 part="button"
@@ -31,20 +32,16 @@ export function accordionItemTemplate<T extends FASTAccordionItem>(
                     <slot name="heading"></slot>
                 </span>
             </button>
-            ${startSlotTemplate(options)}
             ${endSlotTemplate(options)}
-            <span class="icon" part="icon" aria-hidden="true">
-                <slot name="expanded-icon">
-                    ${staticallyCompose(options.expandedIcon)}
-                </slot>
-                <slot name="collapsed-icon">
-                    ${staticallyCompose(options.collapsedIcon)}
+            <span class="expand-collapse-icon" part="expand-collapse-icon" aria-hidden="true">
+                <slot name="expand-collapse-icon">
+                    ${staticallyCompose(options.expandCollapseIcon)}
                 </slot>
             <span>
         </div>
         <div
-            class="region"
-            part="region"
+            class="panel"
+            part="panel"
             id="${x => x.id}-panel"
             role="region"
             aria-labelledby="${x => x.id}"
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
index 06869412ef6..fc47fde155c 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
@@ -10,8 +10,7 @@ import { applyMixins } from "../utilities/apply-mixins.js";
  * @public
  */
 export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
-    expandedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
-    collapsedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTAccordionItem>;
 };
 
 /**
@@ -21,14 +20,13 @@ export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
  * @slot end - Content which can be provided between the start slot and icon
  * @slot heading - Content which serves as the accordion item heading and text of the expand button
  * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
+ * @slot expand-collapse-icon - The expanded / collapsed icon
  * @fires change - Fires a custom 'change' event when the button is invoked
  * @csspart heading - Wraps the button
  * @csspart button - The button which serves to invoke the item
  * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * @csspart expand-collapse-icon - The icon container
+ * @csspart panel - The wrapper for the accordion item content
  *
  * @public
  */
diff --git a/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts b/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts
index d5912863b09..38b158990f8 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts
@@ -1,5 +1,4 @@
 import { css } from "@microsoft/fast-element";
-import chevronDownIcon from "../../../statics/svg/chevron_down_12_regular.svg";
 import chevronUpIcon from "../../../statics/svg/chevron_up_12_regular.svg";
 import { FASTAccordionItem } from "../accordion-item.js";
 import { accordionItemTemplate } from "../accordion-item.template.js";
@@ -10,8 +9,8 @@ const styles = css`
         box-sizing: border-box;
         font-family: var(--body-font);
         flex-direction: column;
-        font-size: var(--type-ramp-minus-1-font-size);
-        line-height: var(--type-ramp-minus-1-line-height);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
         border-bottom: calc(var(--stroke-width) * 1px) solid
             var(--neutral-stroke-divider-rest);
     }
@@ -20,23 +19,28 @@ const styles = css`
         opacity: var(--disabled-opacity);
     }
 
-    .region {
+    .panel {
         display: none;
         padding: calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
     }
 
     .heading {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .button {
         display: grid;
+        align-items: center;
         position: relative;
         grid-template-columns: auto 1fr auto calc(
                 (var(--base-height-multiplier) + var(--density)) * var(--design-unit) *
                     1px
             );
-    }
-
-    .button {
         appearance: none;
         border: none;
+        border-radius: calc(var(--control-corner-radius) * 1px);
         background: none;
         grid-column: 2;
         grid-row: 1;
@@ -59,27 +63,15 @@ const styles = css`
         color: var(--neutral-foreground-rest);
     }
 
-    .button::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        cursor: pointer;
-    }
-
-    .button:focus-visible::before {
-        outline: none;
-        border: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
-        border-radius: calc(var(--control-corner-radius) * 1px);
+    .button:focus-visible {
+        outline: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
     }
 
-    :host([expanded]) .region {
+    :host([expanded]) .panel {
         display: block;
     }
 
-    .icon {
+    .expand-collapse-icon {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -88,25 +80,14 @@ const styles = css`
         position: relative;
     }
 
-    slot[name="expanded-icon"],
-    slot[name="collapsed-icon"] {
-        fill: var(--accent-fill-rest);
+    slot[name="expand-collapse-icon"] * {
+        transition: transform 0.1s linear;
+        transform: rotate(0deg);
+        transform-origin: center;
     }
 
-    slot[name="collapsed-icon"] {
-        display: flex;
-    }
-
-    :host([expanded]) slot[name="collapsed-icon"] {
-        display: none;
-    }
-
-    slot[name="expanded-icon"] {
-        display: none;
-    }
-
-    :host([expanded]) slot[name="expanded-icon"] {
-        display: flex;
+    :host([expanded]) slot[name="expand-collapse-icon"] * {
+        transform: rotate(90deg);
     }
 
     ::slotted([slot="start"]) {
@@ -131,8 +112,7 @@ const styles = css`
 FASTAccordionItem.define({
     name: "fast-accordion-item",
     template: accordionItemTemplate({
-        collapsedIcon: chevronDownIcon,
-        expandedIcon: chevronUpIcon,
+        expandCollapseIcon: chevronUpIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
index bae792f26db..7a7b0ef7651 100644
--- a/packages/web-components/fast-foundation/src/accordion/README.md
+++ b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -147,11 +147,11 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 | ------------- | ---------- | -------------- |
 | `expand-mode` | expandmode |                |
 
-#### CSS Parts
+#### Slots
 
-| Name   | Description                      |
-| ------ | -------------------------------- |
-| `item` | The slot for the accordion items |
+| Name | Description                      |
+| ---- | -------------------------------- |
+|      | The slot for the accordion items |
 
 <hr/>
 
@@ -191,24 +191,23 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 
 #### CSS Parts
 
-| Name              | Description                                              |
-| ----------------- | -------------------------------------------------------- |
-| `heading`         | Wraps the button                                         |
-| `button`          | The button which serves to invoke the item               |
-| `heading-content` | Wraps the slot for the heading content within the button |
-| `icon`            | The icon container                                       |
-| `region`          | The wrapper for the accordion item content               |
+| Name                   | Description                                              |
+| ---------------------- | -------------------------------------------------------- |
+| `heading`              | Wraps the button                                         |
+| `button`               | The button which serves to invoke the item               |
+| `heading-content`      | Wraps the slot for the heading content within the button |
+| `expand-collapse-icon` | The icon container                                       |
+| `panel`                | The wrapper for the accordion item content               |
 
 #### Slots
 
-| Name             | Description                                                                      |
-| ---------------- | -------------------------------------------------------------------------------- |
-| `start`          | Content which can be provided between the heading and the icon                   |
-| `end`            | Content which can be provided between the start slot and icon                    |
-| `heading`        | Content which serves as the accordion item heading and text of the expand button |
-|                  | The default slot for accordion item content                                      |
-| `expanded-icon`  | The expanded icon                                                                |
-| `collapsed-icon` | The collapsed icon                                                               |
+| Name                   | Description                                                                      |
+| ---------------------- | -------------------------------------------------------------------------------- |
+| `start`                | Content which can be provided between the heading and the icon                   |
+| `end`                  | Content which can be provided between the start slot and icon                    |
+| `heading`              | Content which serves as the accordion item heading and text of the expand button |
+|                        | The default slot for accordion item content                                      |
+| `expand-collapse-icon` | The expanded / collapsed icon                                                    |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts
index cb514767a8e..911c1c48fbe 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts
@@ -2,7 +2,6 @@ import type { Locator, Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
 import { AccordionExpandMode } from "./accordion.options.js";
-import type { FASTAccordion } from "./accordion.js";
 
 test.describe("Accordion", () => {
     let page: Page;
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
index 4a2bbcd10b0..64eab48601d 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
@@ -7,10 +7,8 @@ import type { FASTAccordion } from "./accordion.js";
  */
 export function accordionTemplate<T extends FASTAccordion>(): ElementViewTemplate<T> {
     return html<T>`
-        <template>
-            <slot
-                ${slotted({ property: "slottedAccordionItems", filter: elements() })}
-            ></slot>
-        </template>
+        <slot
+            ${slotted({ property: "slottedAccordionItems", filter: elements() })}
+        ></slot>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts
index 2453915a53e..4aa810bb8cc 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts
@@ -14,8 +14,8 @@ import { AccordionExpandMode } from "./accordion.options.js";
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @slot - The slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
  * @public
  *
  * @remarks
diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts
index d3fd43b7ceb..55cfd564d2b 100644
--- a/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts
+++ b/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts
@@ -4,11 +4,8 @@ import { accordionTemplate } from "../accordion.template.js";
 
 const styles = css`
     :host {
-        box-sizing: border-box;
+        display: flex;
         flex-direction: column;
-        font: var(--type-ramp-minus1-font-size) / var(--type-ramp-minus1-line-height)
-            var(--body-font);
-        color: var(--neutral-foreground-rest);
         border-top: calc(var(--stroke-width) * 1px) solid
             var(--neutral-stroke-divider-rest);
     }
diff --git a/packages/web-components/fast-foundation/src/anchor/stories/anchor.register.ts b/packages/web-components/fast-foundation/src/anchor/stories/anchor.register.ts
index 7cbfe7cd06a..75d6e3f70f3 100644
--- a/packages/web-components/fast-foundation/src/anchor/stories/anchor.register.ts
+++ b/packages/web-components/fast-foundation/src/anchor/stories/anchor.register.ts
@@ -21,6 +21,16 @@ const styles = css`
         outline: none;
     }
 
+    :host(:hover) {
+        background-color: var(--accent-fill-hover);
+        color: var(--foreground-on-accent-hover);
+    }
+
+    :host(:active) {
+        background-color: var(--accent-fill-active);
+        color: var(--foreground-on-accent-active);
+    }
+
     .control {
         all: inherit;
         background: transparent;
@@ -36,14 +46,6 @@ const styles = css`
         border: calc(var(--stroke-width) * 1px) solid transparent;
     }
 
-    :host(:hover) {
-        background-color: var(--neutral-fill-hover);
-    }
-
-    :host(:active) {
-        background-color: var(--neutral-fill-active);
-    }
-
     .control:focus-visible {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 var(--shadow-spread) var(--focus-stroke-outer) inset;
@@ -72,16 +74,6 @@ const styles = css`
     ::slotted([slot="end"]) {
         margin-inline-start: 11px;
     }
-
-    :host(:hover) {
-        background: var(--accent-fill-hover);
-        color: var(--foreground-on-accent-hover);
-    }
-
-    :host(:active) .control:active {
-        background: var(--accent-fill-active);
-        color: var(--foreground-on-accent-active);
-    }
 `;
 
 FASTAnchor.define({
diff --git a/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts b/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts
index d4c2a5a1331..46275a3224b 100644
--- a/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts
+++ b/packages/web-components/fast-foundation/src/anchor/stories/anchor.stories.ts
@@ -80,9 +80,7 @@ Anchor.args = {
     storyContent: "Anchor",
 };
 
-export const AnchorWithSlottedStartEnd: Story<FASTAnchor> = renderComponent(
-    storyTemplate
-).bind({});
+export const AnchorWithSlottedStartEnd: Story<FASTAnchor> = Anchor.bind({});
 AnchorWithSlottedStartEnd.args = {
     href: "https://www.fast.design/",
     storyContent: html`
diff --git a/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts b/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts
index e6e655c8a87..75fab7557f2 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/stories/anchored-region.stories.ts
@@ -42,7 +42,10 @@ export default {
     title: "Anchored Region",
     args: {
         storyContent: html`
-            <div id="content" style="background: var(--neutral-fill-rest); padding: 10px">
+            <div
+                id="content"
+                style="background: var(--neutral-fill-rest); padding: 10px; border: solid 1px var(--neutral-stroke-rest);"
+            >
                 anchored region
             </div>
         `,
diff --git a/packages/web-components/fast-foundation/src/avatar/README.md b/packages/web-components/fast-foundation/src/avatar/README.md
index 0f8ce7769a1..4885f929456 100644
--- a/packages/web-components/fast-foundation/src/avatar/README.md
+++ b/packages/web-components/fast-foundation/src/avatar/README.md
@@ -107,10 +107,9 @@ This component is built with the expectation that focus is delegated to the anch
 
 #### CSS Parts
 
-| Name        | Description                           |
-| ----------- | ------------------------------------- |
-| `backplate` | The wrapping container for the avatar |
-| `content`   | The default slot                      |
+| Name      | Description                                    |
+| --------- | ---------------------------------------------- |
+| `content` | The wrapping container for the default content |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.spec.md b/packages/web-components/fast-foundation/src/avatar/avatar.spec.md
index 3f29dbd494b..044e6c0c28d 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.spec.md
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.spec.md
@@ -49,7 +49,7 @@ None
     <slot name="media" part="media">${definition.media || ""}</slot>
     <slot class="content" part="content"></slot>
 </div>
-<slot name="badge" part="badge"></slot>
+<slot name="badge"></slot>
 ```
 
 ---
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
index 4d0758d1c64..121afff2709 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
@@ -10,10 +10,10 @@ export function avatarTemplate<T extends FASTAvatar>(
     options: AvatarOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-        <div class="backplate" part="backplate">
-            <slot name="media">${staticallyCompose(options.media)}</slot>
+        <slot name="media">${staticallyCompose(options.media)}</slot>
+        <span class="content" part="content">
             <slot></slot>
-        </div>
+        </span>
         <slot name="badge"></slot>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.ts b/packages/web-components/fast-foundation/src/avatar/avatar.ts
index fbc0afd3063..7eae0e099a1 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.ts
@@ -15,8 +15,7 @@ export type AvatarOptions = {
  * @slot media - Used for media such as an image
  * @slot - The default slot for avatar text, commonly a name or initials
  * @slot badge - Used to provide a badge, such as a status badge
- * @csspart backplate - The wrapping container for the avatar
- * @csspart content - The default slot
+ * @csspart content - The wrapping container for the default content
  *
  * @public
  */
diff --git a/packages/web-components/fast-foundation/src/avatar/stories/avatar.register.ts b/packages/web-components/fast-foundation/src/avatar/stories/avatar.register.ts
index 678d5068f34..c952d572da6 100644
--- a/packages/web-components/fast-foundation/src/avatar/stories/avatar.register.ts
+++ b/packages/web-components/fast-foundation/src/avatar/stories/avatar.register.ts
@@ -11,44 +11,41 @@ const styles = css`
         height: var(--avatar-size, var(--avatar-size-default));
         max-width: var(--avatar-size, var(--avatar-size-default));
         position: relative;
+        text-decoration: none;
+        border-radius: 100%;
+        background-color: var(--accent-fill-rest);
         color: var(--foreground-on-accent-rest);
+        outline: solid 2px green;
+        outline-offset: 2px;
     }
 
     :host([hidden]) {
         display: none;
     }
 
-    .backplate {
-        display: flex;
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        border-radius: 100%;
-        min-width: 100%;
-        overflow: hidden;
-        background-color: var(--accent-fill-rest);
-    }
-
-    .media,
     ::slotted(img) {
         display: block;
         max-width: 100%;
         position: absolute;
+        border-radius: 100%;
     }
 
     .content {
-        --avatar-size: var(--avatar-size, var(--avatar-size-default));
-        display: block;
+        position: absolute;
+        inset: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         font-size: calc(
             (var(--avatar-text-size) + var(--avatar-size)) / var(--avatar-text-ratio)
         );
-        line-height: var(--avatar-size);
-        min-height: var(--avatar-size);
     }
 
     ::slotted(fast-badge) {
         display: block;
         position: absolute;
+        bottom: -2px;
+        right: -2px;
     }
 `;
 
diff --git a/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts b/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
index 5c72aca1ce3..9e4953df94c 100644
--- a/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
+++ b/packages/web-components/fast-foundation/src/avatar/stories/avatar.stories.ts
@@ -1,4 +1,4 @@
-import { css, html, Updates } from "@microsoft/fast-element";
+import { html } from "@microsoft/fast-element";
 import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
 import { renderComponent } from "../../__test__/helpers.js";
 import type { FASTAvatar } from "../avatar.js";
@@ -14,31 +14,6 @@ export default {
     argTypes: {
         storyContent: { table: { disable: true } },
     },
-    decorators: [
-        Story => {
-            const renderedStory = Story() as FASTAvatar;
-
-            Updates.enqueue(() => {
-                renderedStory.$fastController.addStyles(css`
-                    ::slotted(fast-badge) {
-                        bottom: 0;
-                        right: 0;
-                    }
-
-                    .control {
-                        height: 8px;
-                        min-width: 8px;
-                    }
-
-                    ::slotted(.container) {
-                        padding: 1em;
-                    }
-                `);
-            });
-
-            return renderedStory;
-        },
-    ],
 } as Meta<FASTAvatar>;
 
 export const Avatar: Story<FASTAvatar> = renderComponent(storyTemplate).bind({});
@@ -53,7 +28,28 @@ Avatar.args = {
     `,
 };
 
-export const AvatarCircleWithTextContent: Story<FASTAvatar> = Avatar.bind({});
-AvatarCircleWithTextContent.args = {
+export const AvatarWithTextContent: Story<FASTAvatar> = Avatar.bind({});
+AvatarWithTextContent.args = {
     storyContent: "CR",
 };
+
+export const AvatarWithTextAndMediaContent: Story<FASTAvatar> = Avatar.bind({});
+AvatarWithTextAndMediaContent.args = {
+    storyContent: html`
+        <img
+            class="image"
+            slot="media"
+            src="https://via.placeholder.com/32x32"
+            alt="Annie's profile image"
+        />
+        CR
+    `,
+};
+
+export const AvatarWithBadge: Story<FASTAvatar> = Avatar.bind({});
+AvatarWithBadge.args = {
+    storyContent: html`
+        <fast-badge slot="badge">1</fast-badge>
+        CR
+    `,
+};
diff --git a/packages/web-components/fast-foundation/src/badge/README.md b/packages/web-components/fast-foundation/src/badge/README.md
index c481b3906ac..4f24f3daea9 100644
--- a/packages/web-components/fast-foundation/src/badge/README.md
+++ b/packages/web-components/fast-foundation/src/badge/README.md
@@ -57,13 +57,15 @@ export const myBadge = Badge.compose({
 
 | Name      | Description                                                      |
 | --------- | ---------------------------------------------------------------- |
-| `control` | The element representing the badge, which wraps the default slot |
+| `content` | The element representing the badge, which wraps the default slot |
 
 #### Slots
 
-| Name | Description                    |
-| ---- | ------------------------------ |
-|      | The default slot for the badge |
+| Name    | Description                                           |
+| ------- | ----------------------------------------------------- |
+| `start` | Content which can be provided before the default slot |
+| `end`   | Content which can be provided after the default slot  |
+|         | The default slot for the badge                        |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/badge/badge.template.ts b/packages/web-components/fast-foundation/src/badge/badge.template.ts
index 7a00369c3eb..9aa579e98ce 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.template.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.template.ts
@@ -1,14 +1,19 @@
 import { ElementViewTemplate, html } from "@microsoft/fast-element";
-import type { FASTBadge } from "./badge.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
+import type { BadgeOptions, FASTBadge } from "./badge.js";
 
 /**
- * The template for the {@link @microsoft/fast-foundation#FASTBadge} component.
+ * The template for the {@link @microsoft/fast-foundation#(FASTBadge:class)} component.
  * @public
  */
-export function badgeTemplate<T extends FASTBadge>(): ElementViewTemplate<T> {
+export function badgeTemplate<T extends FASTBadge>(
+    options: BadgeOptions = {}
+): ElementViewTemplate<T> {
     return html<T>`
-        <div class="control" part="control">
+        ${startSlotTemplate(options)}
+        <span class="content" part="content">
             <slot></slot>
-        </div>
+        </span>
+        ${endSlotTemplate(options)}
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/badge/badge.ts b/packages/web-components/fast-foundation/src/badge/badge.ts
index 95c7a3b320f..8f25171d30e 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.ts
@@ -1,10 +1,30 @@
 import { FASTElement } from "@microsoft/fast-element";
+import { StartEnd } from "../patterns/start-end.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+
+/**
+ * Badge configuration options
+ * @public
+ */
+export type BadgeOptions = StartEndOptions;
 
 /**
  * A Badge Custom HTML Element.
+ * @slot start - Content which can be provided before the default slot
+ * @slot end - Content which can be provided after the default slot
  * @slot - The default slot for the badge
- * @csspart control - The element representing the badge, which wraps the default slot
+ * @csspart content - The element representing the badge, which wraps the default slot
  *
  * @public
  */
 export class FASTBadge extends FASTElement {}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface FASTBadge extends StartEnd {}
+applyMixins(FASTBadge, StartEnd);
diff --git a/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts b/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts
index ccfc0b5aa7b..c9830f0bc0e 100644
--- a/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts
+++ b/packages/web-components/fast-foundation/src/badge/stories/badge.register.ts
@@ -5,18 +5,27 @@ import { badgeTemplate } from "../badge.template.js";
 const styles = css`
     :host {
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         font: var(--type-ramp-minus-1-font-size) / var(--type-ramp-minus-1-line-height)
             var(--body-font);
-    }
-
-    .control {
         background: var(--accent-fill-rest);
         border: calc(var(--stroke-width) * 1px) solid transparent;
         border-radius: calc(var(--control-corner-radius) * 1px);
         color: var(--foreground-on-accent-rest);
+        fill: currentcolor;
         padding: 1px 3px;
     }
+
+    ::slotted([slot="start"]) {
+        display: flex;
+        margin-inline-end: 4px;
+    }
+
+    ::slotted([slot="end"]) {
+        display: flex;
+        margin-inline-start: 4px;
+    }
 `;
 
 FASTBadge.define({
diff --git a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
index dc1acb44b75..fe07f016aa7 100644
--- a/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
+++ b/packages/web-components/fast-foundation/src/badge/stories/badge.stories.ts
@@ -18,3 +18,12 @@ export default {
 } as Meta<FASTBadge>;
 
 export const Badge: Story<FASTBadge> = renderComponent(storyTemplate).bind({});
+
+export const BadgeWithSlottedStartEnd: Story<FASTBadge> = Badge.bind({});
+BadgeWithSlottedStartEnd.args = {
+    storyContent: html`
+        <svg slot="start" width="12" height="12"><use href="#chevron-left-icon" /></svg>
+        Badge
+        <svg slot="end" width="12" height="12"><use href="#chevron-right-icon" /></svg>
+    `,
+};
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts
index fb69c1fff29..0cabe575da0 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts
@@ -33,7 +33,7 @@ test.describe("Breadcrumb item", () => {
             `;
         });
 
-        await expect(element.locator("> div")).toHaveAttribute("role", "listitem");
+        await expect(element).toHaveAttribute("role", "listitem");
     });
 
     test("should render an internal anchor when the `href` attribute is not provided", async () => {
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts
index cd0cbb43e01..17369c59c2b 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts
@@ -11,7 +11,7 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
     options: BreadcrumbItemOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-        <div role="listitem" class="listitem" part="listitem">
+        <template role="listitem">
             ${anchorTemplate(options).inline()}
             ${when(
                 x => x.separator,
@@ -23,6 +23,6 @@ export function breadcrumbItemTemplate<T extends FASTBreadcrumbItem>(
                     </span>
                 `
             )}
-        </div>
+        </template>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts
index 315afd16ff4..34fca2d78ca 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/stories/breadcrumb-item.register.ts
@@ -1,4 +1,5 @@
 import { css } from "@microsoft/fast-element";
+import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
 import { FASTBreadcrumbItem } from "../breadcrumb-item.js";
 import { breadcrumbItemTemplate } from "../breadcrumb-item.template.js";
 
@@ -14,9 +15,6 @@ const styles = css`
         min-width: calc(var(--height-number) * 1px);
         outline: none;
         color: var(--neutral-foreground-rest);
-    }
-
-    .listitem {
         display: flex;
         align-items: center;
         width: max-content;
@@ -106,6 +104,8 @@ const styles = css`
 
 FASTBreadcrumbItem.define({
     name: "fast-breadcrumb-item",
-    template: breadcrumbItemTemplate(),
+    template: breadcrumbItemTemplate({
+        separator: chevronRightIcon,
+    }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md
index ceecee4cccd..454c046f8bc 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/README.md
+++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md
@@ -122,9 +122,11 @@ This component is built with the expectation that focus is delegated to the anch
 
 #### Slots
 
-| Name | Description                               |
-| ---- | ----------------------------------------- |
-|      | The default slot for the breadcrumb items |
+| Name    | Description                                          |
+| ------- | ---------------------------------------------------- |
+| `start` | Content which can be provided before the breadcrumbs |
+| `end`   | Content which can be provided after the breadcrumbs  |
+|         | The default slot for the breadcrumb items            |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts
index 608108d6efc..fbc379e6eb7 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.template.ts
@@ -1,18 +1,23 @@
 import { elements, ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
-import type { FASTBreadcrumb } from "./breadcrumb.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
+import type { BreadcrumbOptions, FASTBreadcrumb } from "./breadcrumb.js";
 
 /**
- * The template for the {@link @microsoft/fast-foundation#FASTBreadcrumb} component.
+ * The template for the {@link @microsoft/fast-foundation#(FASTBreadcrumb:class)} component.
  * @public
  */
-export function breadcrumbTemplate<T extends FASTBreadcrumb>(): ElementViewTemplate<T> {
+export function breadcrumbTemplate<T extends FASTBreadcrumb>(
+    options: BreadcrumbOptions = {}
+): ElementViewTemplate<T> {
     return html<T>`
         <template role="navigation">
+            ${startSlotTemplate(options)}
             <div role="list" class="list" part="list">
                 <slot
                     ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
                 ></slot>
             </div>
+            ${endSlotTemplate(options)}
         </template>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
index a34dcd44e2f..fb0bb33bee3 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
@@ -1,8 +1,20 @@
 import { FASTElement, observable } from "@microsoft/fast-element";
 import { FASTBreadcrumbItem } from "../breadcrumb-item/breadcrumb-item.js";
+import { StartEnd } from "../patterns/start-end.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+
+/**
+ * Breadcrumb configuration options
+ * @public
+ */
+export type BreadcrumbOptions = StartEndOptions;
 
 /**
  * A Breadcrumb Custom HTML Element.
+ *
+ * @slot start - Content which can be provided before the breadcrumbs
+ * @slot end - Content which can be provided after the breadcrumbs
  * @slot - The default slot for the breadcrumb items
  * @csspart list - The element wrapping the slotted items
  *
@@ -68,3 +80,12 @@ export class FASTBreadcrumb extends FASTElement {
         }
     }
 }
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface FASTBreadcrumb extends StartEnd {}
+applyMixins(FASTBreadcrumb, StartEnd);
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts
index 1109077d84c..e9022a36fa5 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.register.ts
@@ -5,7 +5,8 @@ import { breadcrumbTemplate } from "../breadcrumb.template.js";
 const styles = css`
     :host {
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        gap: 12px;
         font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height)
             var(--body-font);
     }
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
index c6cdd60f0d3..abfef043d3b 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/stories/breadcrumb.stories.ts
@@ -19,7 +19,7 @@ Breadcrumb.args = {
     storyContent: html`
         <fast-breadcrumb-item href="#">Breadcrumb Item 1</fast-breadcrumb-item>
         <fast-breadcrumb-item href="#">Breadcrumb Item 2</fast-breadcrumb-item>
-        <fast-breadcrumb-item href="#">Breadcrumb Item 3</fast-breadcrumb-item>
+        <fast-breadcrumb-item>Breadcrumb Item 3</fast-breadcrumb-item>
     `,
 };
 
@@ -41,6 +41,17 @@ BreadcrumbWithSlottedSeparator.args = {
     `,
 };
 
+export const BreadcrumbWithSlottedStartEnd: Story<FASTBreadcrumb> = Breadcrumb.bind({});
+BreadcrumbWithSlottedStartEnd.args = {
+    storyContent: html`
+        <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+        <fast-breadcrumb-item href="#">Breadcrumb Item 1</fast-breadcrumb-item>
+        <fast-breadcrumb-item href="#">Breadcrumb Item 2</fast-breadcrumb-item>
+        <fast-breadcrumb-item>Breadcrumb Item 3</fast-breadcrumb-item>
+        <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+    `,
+};
+
 export const BreadcrumbWithAnchors: Story<FASTBreadcrumb> = Breadcrumb.bind({});
 BreadcrumbWithAnchors.args = {
     storyContent: html`
diff --git a/packages/web-components/fast-foundation/src/card/card.template.ts b/packages/web-components/fast-foundation/src/card/card.template.ts
index 25c20761a9c..ae89a8f4a41 100644
--- a/packages/web-components/fast-foundation/src/card/card.template.ts
+++ b/packages/web-components/fast-foundation/src/card/card.template.ts
@@ -6,7 +6,7 @@ import type { FASTCard } from "./card.js";
  * @public
  */
 export function cardTemplate<T extends FASTCard>(): ElementViewTemplate<T> {
-    return html`
+    return html<T>`
         <slot></slot>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
index 0c55390aabd..0e9359f5182 100644
--- a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
@@ -1,5 +1,6 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import checkmarkIcon from "../../../statics/svg/checkmark_16_regular.svg";
+import subtractIcon from "../../../statics/svg/subtract_16_regular.svg";
 import { FASTCheckbox } from "../checkbox.js";
 import { checkboxTemplate } from "../checkbox.template.js";
 
@@ -7,7 +8,6 @@ const styles = css`
     :host {
         align-items: center;
         display: inline-flex;
-        margin: calc(var(--design-unit) * 1px) 0;
         outline: none;
         user-select: none;
         vertical-align: middle;
@@ -22,15 +22,18 @@ const styles = css`
         border-radius: calc(var(--control-corner-radius) * 1px);
         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 {
         font-family: var(--body-font);
         color: var(--neutral-foreground-rest);
         padding-inline-start: calc(var(--design-unit) * 2px + 2px);
-        margin-inline-end: calc(var(--design-unit) * 2px + 2px);
         cursor: pointer;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -41,33 +44,20 @@ const styles = css`
         visibility: hidden;
     }
 
-    .checked-indicator {
-        width: 100%;
-        height: 100%;
-        display: block;
-        fill: var(--foreground-on-accent-rest);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .indeterminate-indicator {
-        border-radius: calc(var(--control-corner-radius) * 1px);
-        background: var(--foreground-on-accent-rest);
+    slot[name="checked-indicator"] *,
+    slot[name="indeterminate-indicator"] * {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 50%;
-        height: 50%;
-        transform: translate(-50%, -50%);
+        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);
     }
@@ -79,34 +69,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 {
-        fill: var(--foreground-on-accent-hover);
-    }
-
-    :host([aria-checked="true"]:not([disabled])) .control:hover .indeterminate-indicator {
-        background: 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 {
-        fill: var(--foreground-on-accent-active);
-    }
-
-    :host([aria-checked="true"]:not([disabled]))
-        .control:active
-        .indeterminate-indicator {
-        background: var(--foreground-on-accent-active);
+        color: var(--foreground-on-accent-active);
     }
 
     :host([aria-checked="true"]:focus-visible:not([disabled])) .control {
@@ -120,8 +95,8 @@ const styles = css`
         cursor: var(--disabled-cursor);
     }
 
-    :host([aria-checked="true"]) .checked-indicator,
-    :host([aria-checked="mixed"]) .indeterminate-indicator {
+    :host([aria-checked="true"]) slot[name="checked-indicator"] *,
+    :host([aria-checked="mixed"]) slot[name="indeterminate-indicator"] * {
         opacity: 1;
     }
 
@@ -133,23 +108,8 @@ const styles = css`
 FASTCheckbox.define({
     name: "fast-checkbox",
     template: checkboxTemplate({
-        checkedIndicator: /* html */ html`
-            <svg
-                part="checked-indicator"
-                class="checked-indicator"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
-                />
-            </svg>
-        `,
-        indeterminateIndicator: /* html */ html`
-            <div part="indeterminate-indicator" class="indeterminate-indicator"></div>
-        `,
+        checkedIndicator: checkmarkIcon,
+        indeterminateIndicator: subtractIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/combobox/README.md b/packages/web-components/fast-foundation/src/combobox/README.md
index 67cd6dd6628..9367c554cb1 100644
--- a/packages/web-components/fast-foundation/src/combobox/README.md
+++ b/packages/web-components/fast-foundation/src/combobox/README.md
@@ -206,22 +206,22 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 #### CSS Parts
 
-| Name             | Description                                                            |
-| ---------------- | ---------------------------------------------------------------------- |
-| `control`        | The wrapper element containing the input area, including start and end |
-| `selected-value` | The input element representing the selected value                      |
-| `indicator`      | The element wrapping the indicator slot                                |
-| `listbox`        | The wrapper for the listbox slotted options                            |
+| Name              | Description                                                            |
+| ----------------- | ---------------------------------------------------------------------- |
+| `control`         | The wrapper element containing the input area, including start and end |
+| `field`           | The input element representing the selected value                      |
+| `open-close-icon` | The element wrapping the indicator slot                                |
+| `listbox`         | The wrapper for the listbox slotted options                            |
 
 #### Slots
 
-| Name        | Description                                                 |
-| ----------- | ----------------------------------------------------------- |
-| `start`     | Content which can be provided before the input              |
-| `end`       | Content which can be provided after the input               |
-| `control`   | Used to replace the input element representing the combobox |
-| `indicator` | The visual indicator representing the expanded state        |
-|             | The default slot for the options                            |
+| Name              | Description                                                 |
+| ----------------- | ----------------------------------------------------------- |
+| `start`           | Content which can be provided before the input              |
+| `end`             | Content which can be provided after the input               |
+| `field`           | Used to replace the input element representing the combobox |
+| `open-close-icon` | The visual indicator representing the expanded state        |
+|                   | The default slot for the options                            |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.template.ts b/packages/web-components/fast-foundation/src/combobox/combobox.template.ts
index 3ec1691a350..419441ea159 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.template.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.template.ts
@@ -23,7 +23,7 @@ export function comboboxTemplate<T extends FASTCombobox>(
         >
             <div class="control" part="control">
                 ${startSlotTemplate(options)}
-                <slot name="control">
+                <slot name="field">
                     <input
                         aria-activedescendant="${x =>
                             x.open ? x.ariaActiveDescendant : null}"
@@ -32,8 +32,8 @@ export function comboboxTemplate<T extends FASTCombobox>(
                         aria-disabled="${x => x.ariaDisabled}"
                         aria-expanded="${x => x.ariaExpanded}"
                         aria-haspopup="listbox"
-                        class="selected-value"
-                        part="selected-value"
+                        class="field"
+                        part="field"
                         placeholder="${x => x.placeholder}"
                         role="combobox"
                         type="text"
@@ -41,33 +41,35 @@ export function comboboxTemplate<T extends FASTCombobox>(
                         :value="${x => x.value}"
                         @input="${(x, c) => x.inputHandler(c.event as InputEvent)}"
                         @keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}"
-                        ${ref("control")}
+                        ${ref("field")}
                     />
-                    <div class="indicator" part="indicator" aria-hidden="true">
-                        <slot name="indicator">
-                            ${staticallyCompose(options.indicator)}
-                        </slot>
-                    </div>
                 </slot>
                 ${endSlotTemplate(options)}
+                <span class="open-close-icon" part="open-close-icon" aria-hidden="true">
+                    <slot name="open-close-icon">
+                        ${staticallyCompose(options.openCloseIcon)}
+                    </slot>
+                </span>
             </div>
-            <div
-                class="listbox"
-                id="${x => x.listboxId}"
-                part="listbox"
-                role="listbox"
-                ?disabled="${x => x.disabled}"
-                ?hidden="${x => !x.open}"
-                ${ref("listbox")}
-            >
-                <slot
-                    ${slotted({
-                        filter: FASTListbox.slottedOptionFilter,
-                        flatten: true,
-                        property: "slottedOptions",
-                    })}
-                ></slot>
-            </div>
+            <slot name="listbox-container">
+                <div
+                    id="${x => x.listboxId}"
+                    class="listbox"
+                    part="listbox"
+                    role="listbox"
+                    ?disabled="${x => x.disabled}"
+                    ?hidden="${x => !x.open}"
+                    ${ref("listbox")}
+                >
+                    <slot
+                        ${slotted({
+                            filter: FASTListbox.slottedOptionFilter,
+                            flatten: true,
+                            property: "slottedOptions",
+                        })}
+                    ></slot>
+                </div>
+            </slot>
         </template>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts
index 68a978eafda..2925e1c9c72 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.ts
@@ -15,7 +15,7 @@ import { ComboboxAutocomplete } from "./combobox.options.js";
  * @public
  */
 export type ComboboxOptions = StartEndOptions<FASTCombobox> & {
-    indicator?: StaticallyComposableHTML<FASTCombobox>;
+    openCloseIcon?: StaticallyComposableHTML<FASTCombobox>;
 };
 
 /**
@@ -24,12 +24,12 @@ export type ComboboxOptions = StartEndOptions<FASTCombobox> & {
  *
  * @slot start - Content which can be provided before the input
  * @slot end - Content which can be provided after the input
- * @slot control - Used to replace the input element representing the combobox
- * @slot indicator - The visual indicator representing the expanded state
+ * @slot field - Used to replace the input element representing the combobox
+ * @slot open-close-icon - The visual indicator representing the expanded state
  * @slot - The default slot for the options
  * @csspart control - The wrapper element containing the input area, including start and end
- * @csspart selected-value - The input element representing the selected value
- * @csspart indicator - The element wrapping the indicator slot
+ * @csspart field - The input element representing the selected value
+ * @csspart open-close-icon - The element wrapping the indicator slot
  * @csspart listbox - The wrapper for the listbox slotted options
  * @fires change - Fires a custom 'change' event when the value updates
  *
@@ -58,7 +58,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
      *
      * @internal
      */
-    public control: HTMLInputElement;
+    public field: HTMLInputElement;
 
     /**
      * Reference to the internal listbox element.
@@ -100,7 +100,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 
     private get isAutocompleteInline(): boolean {
@@ -261,7 +261,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
             }
 
             this.selectedOptions = [captured];
-            this.control.value = captured.text;
+            this.field.value = captured.text;
             this.clearSelectionRange();
             this.updateValue(true);
         }
@@ -269,7 +269,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
         this.open = !this.open;
 
         if (this.open) {
-            this.control.focus();
+            this.field.focus();
         }
 
         return true;
@@ -338,7 +338,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
      */
     protected focusAndScrollOptionIntoView(): void {
         if (this.contains(document.activeElement)) {
-            this.control.focus();
+            this.field.focus();
             if (this.firstSelectedOption) {
                 requestAnimationFrame(() => {
                     this.firstSelectedOption?.scrollIntoView({ block: "nearest" });
@@ -378,7 +378,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
      * @internal
      */
     public inputHandler(e: InputEvent): boolean | void {
-        this.filter = this.control.value;
+        this.filter = this.field.value;
         this.filterOptions();
 
         if (e.inputType === "deleteContentBackward" || !this.filter.length) {
@@ -434,7 +434,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
                 }
 
                 this.value = "";
-                this.control.value = "";
+                this.field.value = "";
                 this.filter = "";
                 this.filterOptions();
                 break;
@@ -495,7 +495,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
             case "Delete":
             case "Home":
             case "End": {
-                this.filter = this.control.value;
+                this.filter = this.field.value;
                 this.selectedIndex = -1;
                 this.filterOptions();
                 break;
@@ -569,11 +569,11 @@ export class FASTCombobox extends FormAssociatedCombobox {
      */
     private setInlineSelection(): void {
         if (this.firstSelectedOption) {
-            this.control.value = this.firstSelectedOption.text;
-            this.control.focus();
-            this.control.setSelectionRange(
+            this.field.value = this.firstSelectedOption.text;
+            this.field.focus();
+            this.field.setSelectionRange(
                 this.filter.length,
-                this.control.value.length,
+                this.field.value.length,
                 "backward"
             );
         }
@@ -667,7 +667,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
      */
     private updateValue(shouldEmit?: boolean) {
         if (this.$fastController.isConnected) {
-            this.value = this.firstSelectedOption?.text || this.control.value;
+            this.value = this.firstSelectedOption?.text || this.field.value;
         }
 
         if (shouldEmit) {
@@ -679,8 +679,8 @@ export class FASTCombobox extends FormAssociatedCombobox {
      * @internal
      */
     private clearSelectionRange() {
-        const controlValueLength = this.control.value.length;
-        this.control.setSelectionRange(controlValueLength, controlValueLength);
+        const controlValueLength = this.field.value.length;
+        this.field.setSelectionRange(controlValueLength, controlValueLength);
     }
 }
 
diff --git a/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts b/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts
index c303ab578e0..77abb1e1eed 100644
--- a/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts
+++ b/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts
@@ -5,12 +5,9 @@ import { comboboxTemplate } from "../combobox.template.js";
 
 const styles = css`
     :host {
-        --elevation: 14;
-        background: var(--neutral-fill-input-rest);
-        border-radius: calc(var(--control-corner-radius) * 1px);
-        border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
         box-sizing: border-box;
         color: var(--neutral-foreground-rest);
+        fill: currentcolor;
         display: inline-flex;
         font-family: var(--body-font);
         height: calc(
@@ -24,6 +21,7 @@ const styles = css`
     }
 
     .listbox {
+        --elevation: 14;
         box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px)
                 rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))),
             0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px))
@@ -47,6 +45,9 @@ const styles = css`
     }
 
     .control {
+        background: var(--neutral-fill-input-rest);
+        border-radius: calc(var(--control-corner-radius) * 1px);
+        border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
         align-items: center;
         box-sizing: border-box;
         cursor: pointer;
@@ -56,15 +57,20 @@ const styles = css`
         line-height: var(--type-ramp-base-line-height);
         min-height: 100%;
         padding: 0 calc(var(--design-unit) * 2.25px);
-        width: 100%;
     }
 
-    :host(:not([disabled]):hover) {
+    :host(:not([disabled]):hover) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-hover);
     }
 
-    :host(:focus-visible) {
+    :host(:not([disabled]):active) .control {
+        background: var(--neutral-fill-input-active);
+        border-color: var(--accent-fill-active);
+        border-radius: calc(var(--control-corner-radius) * 1px);
+    }
+
+    :host(:focus-visible) .control {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) var(--focus-stroke-outer);
     }
@@ -88,18 +94,6 @@ const styles = css`
         user-select: none;
     }
 
-    :host([disabled]:hover) {
-        background: var(--neutral-fill-stealth-rest);
-        color: var(--neutral-foreground-rest);
-        fill: currentcolor;
-    }
-
-    :host(:not([disabled])) .control:active {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--accent-fill-active);
-        border-radius: calc(var(--control-corner-radius) * 1px);
-    }
-
     :host([open][position="above"]) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -124,7 +118,7 @@ const styles = css`
         );
     }
 
-    .selected-value {
+    .field {
         flex: 1 1 auto;
         font-family: inherit;
         text-align: start;
@@ -133,7 +127,7 @@ const styles = css`
         overflow: hidden;
     }
 
-    .indicator {
+    .open-close-icon {
         flex: 0 0 auto;
         margin-inline-start: 1em;
     }
@@ -180,7 +174,7 @@ const styles = css`
         user-select: none;
     }
 
-    .selected-value {
+    .field {
         appearance: none;
         background: transparent;
         border: none;
@@ -191,10 +185,10 @@ const styles = css`
         margin: auto 0;
     }
 
-    .selected-value:hover,
-    .selected-value:focus-visible,
-    .selected-value:disabled,
-    .selected-value:active {
+    .field:hover,
+    .field:focus-visible,
+    .field:disabled,
+    .field:active {
         outline: none;
     }
 `;
@@ -202,7 +196,7 @@ const styles = css`
 FASTCombobox.define({
     name: "fast-combobox",
     template: comboboxTemplate({
-        indicator: chevronIcon,
+        openCloseIcon: chevronIcon,
     }),
     styles,
     shadowOptions: {
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 26bc77c1b3b..82c1406bee6 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -13,7 +13,6 @@ import { isTabbable } from "tabbable";
  * 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/disclosure/README.md b/packages/web-components/fast-foundation/src/disclosure/README.md
index 3d39f15a62c..4c81a18667d 100644
--- a/packages/web-components/fast-foundation/src/disclosure/README.md
+++ b/packages/web-components/fast-foundation/src/disclosure/README.md
@@ -93,14 +93,23 @@ export const myDisclosure = Disclosure.compose({
 |           | expanded |                |
 | `summary` | summary  |                |
 
+#### CSS Parts
+
+| Name              | Description                                    |
+| ----------------- | ---------------------------------------------- |
+| `details`         | The outer container element                    |
+| `summary`         | The outer \`summary\` container                |
+| `summary-content` | The container for the \`summary\` slot content |
+| `content`         | The container for the default slot content     |
+
 #### Slots
 
-| Name    | Description                                              |
-| ------- | -------------------------------------------------------- |
-| `start` | Content which can be provided before the summary content |
-| `end`   | Content which can be provided after the summary content  |
-| `title` | The summary content                                      |
-|         | The default slot for the disclosure content              |
+| Name      | Description                                              |
+| --------- | -------------------------------------------------------- |
+| `start`   | Content which can be provided before the summary content |
+| `end`     | Content which can be provided after the summary content  |
+| `summary` | The summary content                                      |
+|           | The default slot for the disclosure content              |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.pw.spec.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.pw.spec.ts
index edae614e2a9..c634aeb0e44 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.pw.spec.ts
@@ -24,7 +24,7 @@ test.describe("Disclosure", () => {
         });
 
         test("should set the `aria-controls` attribute on the internal summary element", async () => {
-            await expect(summary).toHaveAttribute("aria-controls", "disclosure-content");
+            await expect(summary).toHaveAttribute("aria-controls", "content");
         });
 
         test("should toggle the `expanded` attribute based on the value of the `expanded` property", async () => {
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.md b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.md
index 4f079987540..31d6fdb44cf 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.md
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.md
@@ -57,7 +57,7 @@ The disclosure component can easily be extended for customization, for example a
     <details>
         <summary>
             <slot name="start"></slot>
-            <slot name="title"></slot>
+            <slot name="summary"></slot>
             <slot name="end"></slot>
         </summary>
         <div>
@@ -69,7 +69,7 @@ The disclosure component can easily be extended for customization, for example a
 
 -   _Slot Names_
     -   start: add glyph for toggle state
-    -   title: invoker title (could look like as a button or hyperlink)
+    -   summary: invoker title (could look like as a button or hyperlink)
     -   end: add glyph for toggle state
     -   default: extra content to be placed
 
@@ -79,7 +79,7 @@ The disclosure component can easily be extended for customization, for example a
 
 ```html
 <fast-disclosure>
-    <span slot="title">More about Green Arrow</span>
+    <span slot="summary">More about Green Arrow</span>
     <div>
         Green Arrow is a fictional superhero who appears in comic books published by DC
         Comics. Created by Mort Weisinger and designed by George Papp, he first appeared
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
index 2a91f84837a..3ca97781023 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
@@ -10,18 +10,23 @@ export function disclosureTemplate<T extends FASTDisclosure>(
     options: DisclosureOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-        <details class="disclosure" ${ref("details")}>
+        <details class="details" part="details" ${ref("details")}>
             <summary
-                class="invoker"
+                class="summary"
                 role="button"
-                aria-controls="disclosure-content"
+                part="summary"
+                aria-controls="content"
                 aria-expanded="${x => x.expanded}"
             >
                 ${startSlotTemplate(options)}
-                <slot name="summary">${x => x.summary}</slot>
+                <span class="summary-content" part="summary-content">
+                    <slot name="summary">${x => x.summary}</slot>
+                </span>
                 ${endSlotTemplate(options)}
             </summary>
-            <div id="disclosure-content"><slot></slot></div>
+            <div id="content" class="content" part="content">
+                <slot></slot>
+            </div>
         </details>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
index 1b2a41d1496..6019467628e 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
@@ -15,8 +15,12 @@ export type DisclosureOptions = StartEndOptions<FASTDisclosure>;
  *
  * @slot start - Content which can be provided before the summary content
  * @slot end - Content which can be provided after the summary content
- * @slot title - The summary content
+ * @slot summary - The summary content
  * @slot - The default slot for the disclosure content
+ * @csspart details - The outer container element
+ * @csspart summary - The outer `summary` container
+ * @csspart summary-content - The container for the `summary` slot content
+ * @csspart content - The container for the default slot content
  * @fires toggle - fires a toggle event when the summary is toggled
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/disclosure/stories/disclosure.register.ts b/packages/web-components/fast-foundation/src/disclosure/stories/disclosure.register.ts
index b8e884ec2f1..a522753fdc3 100644
--- a/packages/web-components/fast-foundation/src/disclosure/stories/disclosure.register.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/stories/disclosure.register.ts
@@ -3,13 +3,13 @@ import { FASTDisclosure } from "../disclosure.js";
 import { disclosureTemplate } from "../disclosure.template.js";
 
 const styles = css`
-    .disclosure {
+    .details {
         transition: height 0.35s;
     }
-    .invoker::-webkit-details-marker {
+    .summary::-webkit-details-marker {
         display: none;
     }
-    .invoker {
+    .summary {
         list-style-type: none;
         background: var(--accent-fill-rest);
         color: var(--foreground-accent-rest);
@@ -23,16 +23,16 @@ const styles = css`
         padding: 12px;
         max-width: max-content;
     }
-    .invoker:focus-visible,
-    .invoker:active {
+    .summary:focus-visible,
+    .summary:active {
         background: var(--accent-fill-active);
         color: var(--foreground-accent-active);
     }
-    .invoker:hover {
+    .summary:hover {
         background: var(--accent-fill-hover);
         color: var(--foreground-on-accent-hover);
     }
-    .invoker {
+    .summary {
         display: flex;
         align-items: center;
         background: transparent;
@@ -55,7 +55,7 @@ const styles = css`
         margin-inline-start: 11px;
     }
 
-    .disclosure[open] .invoker ~ * {
+    .details[open] .summary ~ * {
         animation: fadeIn 0.5s ease-in-out;
     }
 
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
index da8cfa48d0b..bc6354cb389 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.template.ts
@@ -19,7 +19,7 @@ export function flipperTemplate<T extends FASTFlipper>(
         let existing = templateCache[direction];
 
         if (!existing) {
-            templateCache[direction] = existing = html`
+            templateCache[direction] = existing = html<T>`
                 <span part="${direction}" class="${direction}">
                     <slot name="${direction}">
                         ${staticallyCompose(options[direction])}
@@ -31,7 +31,7 @@ export function flipperTemplate<T extends FASTFlipper>(
         return existing;
     }
 
-    return html`
+    return html<T>`
         <template
             role="button"
             aria-disabled="${x => (x.disabled ? true : void 0)}"
diff --git a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
index a66789a40f8..f28f1b1a65f 100644
--- a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
+++ b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts
@@ -21,6 +21,7 @@ const styles = css`
         position: relative;
         width: var(--size);
     }
+
     :host::before {
         background: var(--accent-fill-rest);
         border-radius: 50%;
@@ -37,9 +38,7 @@ const styles = css`
     .next,
     .previous {
         display: grid;
-        height: 16px;
         position: relative;
-        width: 16px;
     }
 
     :host([disabled]) {
@@ -49,29 +48,36 @@ const styles = css`
         color: var(--neutral-foreground-rest);
         pointer-events: none;
     }
+
     :host([disabled])::before,
     :host([disabled]:hover)::before,
     :host([disabled]:active)::before {
         background: var(--neutral-fill-stealth-rest);
         border-color: var(--neutral-stroke-rest);
     }
+
     :host(:hover) {
         color: var(--foreground-on-accent-hover);
     }
+
     :host(:hover)::before {
         background: var(--accent-fill-hover);
         border-color: var(--accent-fill-hover);
     }
+
     :host(:active) {
         color: var(--foreground-on-accent-active);
     }
+
     :host(:active)::before {
         background: var(--accent-fill-active);
         border-color: var(--accent-fill-active);
     }
+
     :host(:focus-visible) {
         outline: none;
     }
+
     :host(:focus-visible)::before {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 calc((var(--focus-stroke-width) - var(--stroke-width)) * 1px)
@@ -79,6 +85,7 @@ const styles = css`
             0 0 0 calc((var(--focus-stroke-width) + var(--stroke-width)) * 1px)
                 var(--focus-stroke-inner) inset;
     }
+
     :host::-moz-focus-inner {
         border: 0;
     }
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/README.md b/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
index 435ae8f6366..00eb9d87e0c 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/README.md
@@ -195,22 +195,25 @@ export const myHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptio
 
 #### CSS Parts
 
-| Name                     | Description                               |
-| ------------------------ | ----------------------------------------- |
-| `scroll-area`            | Wraps the entire scrollable region        |
-| `scroll-view`            | The visible scroll area                   |
-| `content-container`      | The container for the content             |
-| `scroll-prev`            | The previous flipper container            |
-| `scroll-action-previous` | The element wrapping the previous flipper |
-| `scroll-next`            | The next flipper container                |
-| `scroll-action-next`     | The element wrapping the next flipper     |
+| Name               | Description                        |
+| ------------------ | ---------------------------------- |
+| `scroll-area`      | Wraps the entire scrollable region |
+| `scroll-view`      | The visible scroll area            |
+| `content`          | The container for the content      |
+| `scroll-previous`  | The previous flipper container     |
+| `previous-flipper` | The previous flipper               |
+| `scroll-next`      | The next flipper container         |
+| `next-flipper`     | The next flipper                   |
 
 #### Slots
 
-| Name    | Description                                          |
-| ------- | ---------------------------------------------------- |
-| `start` | Content which can be provided before the scroll area |
-| `end`   | Content which can be provided after the scroll area  |
+| Name               | Description                                          |
+| ------------------ | ---------------------------------------------------- |
+| `start`            | Content which can be provided before the scroll area |
+| `end`              | Content which can be provided after the scroll area  |
+|                    | Content in the scroll area                           |
+| `previous-flipper` | The component for scrolling previous                 |
+| `next-flipper`     | The component for scrolling next                     |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
index 805c648d98a..59e3c7b725b 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.options.ts
@@ -1,5 +1,5 @@
+import type { StartEndOptions, TemplateElementDependency } from "../patterns/index.js";
 import type { StaticallyComposableHTML, ValuesOf } from "../utilities/index.js";
-import type { StartEndOptions } from "../patterns/index.js";
 import type { FASTHorizontalScroll } from "./horizontal-scroll.js";
 
 /**
@@ -41,4 +41,5 @@ export type ScrollEasing = ValuesOf<typeof ScrollEasing>;
 export type HorizontalScrollOptions = StartEndOptions<FASTHorizontalScroll> & {
     nextFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
     previousFlipper?: StaticallyComposableHTML<FASTHorizontalScroll>;
+    flipper: TemplateElementDependency;
 };
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
index 8f9f174c809..c6af944e3ee 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
@@ -24,7 +24,7 @@ test.describe("HorizontalScroll", () => {
 
         scrollNext = element.locator(".scroll-next");
 
-        scrollPrevious = element.locator(".scroll-prev");
+        scrollPrevious = element.locator(".scroll-previous");
 
         scrollView = element.locator(".scroll-view");
 
@@ -59,7 +59,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollToNext();
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 379);
         });
 
         test("should not scroll past the beginning", async () => {
@@ -165,7 +165,7 @@ test.describe("HorizontalScroll", () => {
 
             await nextFlipper.click();
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 379);
 
             await previousFlipper.click();
 
@@ -175,7 +175,7 @@ test.describe("HorizontalScroll", () => {
 
             await nextFlipper.click();
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 250);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 254);
         });
 
         test("should scroll to previous when only 2 items wide", async ({ page }) => {
@@ -193,7 +193,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollToNext();
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 129);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollToPrevious();
@@ -221,7 +221,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(card as HTMLElement, 0);
             }, await lastCard.elementHandle());
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1383);
 
             await expect(lastCard).toHaveJSProperty("offsetLeft", 1875);
 
@@ -249,7 +249,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(cardsCount - 1, 0);
             }, await cards.count());
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1375);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1383);
 
             await expect(lastCard).toHaveJSProperty("offsetLeft", 1875);
 
@@ -277,7 +277,7 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(12, 0);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1129);
 
             await expect(thirdLastCard).toHaveJSProperty("offsetLeft", 1500);
 
@@ -289,19 +289,19 @@ test.describe("HorizontalScroll", () => {
                 node.scrollInView(12, 80);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1129);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollInView(12, 0, 200);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 1250);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 1254);
 
             await element.evaluate((node: FASTHorizontalScroll) => {
                 node.scrollInView(2, 20);
             });
 
-            await expect(scrollView).toHaveJSProperty("scrollLeft", 125);
+            await expect(scrollView).toHaveJSProperty("scrollLeft", 129);
         });
 
         test("Should not scroll with `scrollInView()` when the item is in view", async ({
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
index 3db66d5d0a9..d47f7be6fce 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
@@ -1,7 +1,7 @@
 import type { ElementViewTemplate } from "@microsoft/fast-element";
 import { elements, html, ref, slotted, when } from "@microsoft/fast-element";
+import { endSlotTemplate, startSlotTemplate, tagFor } from "../patterns/index.js";
 import { staticallyCompose } from "../utilities/template-helpers.js";
-import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
 import type { FASTHorizontalScroll } from "./horizontal-scroll.js";
 import type { HorizontalScrollOptions } from "./horizontal-scroll.options.js";
 
@@ -9,8 +9,9 @@ import type { HorizontalScrollOptions } from "./horizontal-scroll.options.js";
  * @public
  */
 export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
-    options: HorizontalScrollOptions = {}
+    options: HorizontalScrollOptions
 ): ElementViewTemplate<T> {
+    const flipperTag = html.partial(tagFor(options.flipper));
     return html<T>`
         <template @keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}">
             ${startSlotTemplate(options)}
@@ -21,11 +22,7 @@ export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
                     @scroll="${x => x.scrolled()}"
                     ${ref("scrollContainer")}
                 >
-                    <div
-                        class="content-container"
-                        part="content-container"
-                        ${ref("content")}
-                    >
+                    <div class="content" part="content" ${ref("content")}>
                         <slot
                             ${slotted({
                                 property: "scrollItems",
@@ -38,26 +35,43 @@ export function horizontalScrollTemplate<T extends FASTHorizontalScroll>(
                     x => x.view !== "mobile",
                     html<T>`
                         <div
-                            class="scroll scroll-prev"
-                            part="scroll-prev"
+                            class="scroll-previous"
+                            part="scroll-previous"
                             ${ref("previousFlipperContainer")}
                         >
-                            <div class="scroll-action" part="scroll-action-previous">
-                                <slot name="previous-flipper">
-                                    ${staticallyCompose(options.previousFlipper)}
-                                </slot>
-                            </div>
+                            <slot name="previous-flipper">
+                                ${staticallyCompose(
+                                    options.previousFlipper ??
+                                        html<T>`
+                                            <${flipperTag}
+                                                part="previous-flipper"
+                                                @click="${x => x.scrollToPrevious()}"
+                                                direction="previous"
+                                                aria-hidden="${x =>
+                                                    x.flippersHiddenFromAT}"
+                                            ></${flipperTag}>
+                                        `
+                                )}
+                            </slot>
                         </div>
                         <div
-                            class="scroll scroll-next"
+                            class="scroll-next"
                             part="scroll-next"
                             ${ref("nextFlipperContainer")}
                         >
-                            <div class="scroll-action" part="scroll-action-next">
-                                <slot name="next-flipper">
-                                    ${staticallyCompose(options.nextFlipper)}
-                                </slot>
-                            </div>
+                            <slot name="next-flipper">
+                                ${staticallyCompose(
+                                    options.nextFlipper ??
+                                        html<T>`
+                                            <${flipperTag}
+                                                part="next-flipper"
+                                                @click="${x => x.scrollToNext()}"
+                                                aria-hidden="${x =>
+                                                    x.flippersHiddenFromAT}"
+                                            ></${flipperTag}>
+                                        `
+                                )}
+                            </slot>
                         </div>
                     `
                 )}
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
index d7fc3a8509a..0806048d9ad 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
@@ -17,13 +17,16 @@ import { ScrollEasing } from "./horizontal-scroll.options.js";
  *
  * @slot start - Content which can be provided before the scroll area
  * @slot end - Content which can be provided after the scroll area
+ * @slot - Content in the scroll area
+ * @slot previous-flipper - The component for scrolling previous
+ * @slot next-flipper - The component for scrolling next
  * @csspart scroll-area - Wraps the entire scrollable region
  * @csspart scroll-view - The visible scroll area
- * @csspart content-container - The container for the content
- * @csspart scroll-prev - The previous flipper container
- * @csspart scroll-action-previous - The element wrapping the previous flipper
+ * @csspart content - The container for the content
+ * @csspart scroll-previous - The previous flipper container
+ * @csspart previous-flipper - The previous flipper
  * @csspart scroll-next - The next flipper container
- * @csspart scroll-action-next - The element wrapping the next flipper
+ * @csspart next-flipper - The next flipper
  * @fires scrollstart - Fires a custom 'scrollstart' event when scrolling
  * @fires scrollend - Fires a custom 'scrollend' event when scrolling stops
  *
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
index 57c5a747424..d4198703cdd 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/stories/horizontal-scroll.register.ts
@@ -1,65 +1,72 @@
-import { css, html } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element";
 import { FASTHorizontalScroll } from "../horizontal-scroll.js";
 import { horizontalScrollTemplate } from "../horizontal-scroll.template.js";
 
 const ActionsStyles = css`
+    :host {
+        --scroll-fade-next: var(--fill-color);
+        --scroll-fade-previous: var(--fill-color);
+    }
+
     .scroll-area {
         position: relative;
     }
 
-    div.scroll-view {
-        overflow-x: hidden;
+    .scroll-view {
+        overflow-x: hidden !important;
     }
 
-    .scroll {
-        bottom: 0;
-        pointer-events: none;
+    .scroll-next,
+    .scroll-previous {
         position: absolute;
-        right: 0;
         top: 0;
+        bottom: 0;
         user-select: none;
         width: 100px;
+        display: flex;
+        align-items: center;
     }
 
-    .scroll.disabled {
+    .scroll-next.disabled,
+    .scroll-previous.disabled {
         display: none;
     }
 
-    .scroll::before,
-    .scroll-action {
-        left: 0;
-        position: absolute;
-    }
-
-    .scroll::before {
-        background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
+    .scroll-next::before,
+    .scroll-previous::before {
         content: "";
         display: block;
+        position: absolute;
         height: 100%;
         width: 100%;
+        pointer-events: none;
     }
 
-    .scroll-action {
-        pointer-events: auto;
-        right: auto;
-        top: 50%;
-        transform: translate(-50%, -50%);
+    .scroll-next {
+        right: 0;
+        justify-content: flex-end;
     }
 
-    .scroll-prev {
-        right: auto;
-        left: 0;
+    .scroll-next::before {
+        background: linear-gradient(to right, transparent, var(--scroll-fade-next));
     }
-    .scroll.scroll-next::before,
-    .scroll-next .scroll-action {
-        left: auto;
-        right: 0;
+
+    .scroll-previous {
+        justify-content: flex-start;
     }
-    .scroll.scroll-next::before {
-        background: linear-gradient(to right, transparent, var(--scroll-fade-next));
+
+    .scroll-previous::before {
+        background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
     }
-    .scroll-next .scroll-action {
-        transform: translate(50%, -50%);
+
+    slot[name="previous-flipper"] *,
+    ::slotted([slot="previous-flipper"]) {
+        transform: translateX(-50%);
+    }
+
+    slot[name="next-flipper"] *,
+    ::slotted([slot="next-flipper"]) {
+        transform: translateX(50%);
     }
 `;
 
@@ -75,24 +82,25 @@ const styles = css`
     .scroll-view {
         overflow-x: auto;
         scrollbar-width: none;
+        padding: 4px;
     }
 
     ::-webkit-scrollbar {
         display: none;
     }
 
-    .content-container {
+    .content {
         align-items: var(--scroll-align);
         display: inline-flex;
         flex-wrap: nowrap;
         position: relative;
     }
 
-    .content-container ::slotted(*) {
+    .content ::slotted(*) {
         margin-right: var(--scroll-item-spacing);
     }
 
-    .content-container ::slotted(*:last-child) {
+    .content ::slotted(*:last-child) {
         margin-right: 0;
     }
 `;
@@ -113,19 +121,7 @@ class HorizontalScroll extends FASTHorizontalScroll {
 HorizontalScroll.define({
     name: "fast-horizontal-scroll",
     template: horizontalScrollTemplate({
-        nextFlipper: html`
-            <fast-flipper
-                @click="${x => x.scrollToNext()}"
-                aria-hidden="${x => x.flippersHiddenFromAT}"
-            ></fast-flipper>
-        `,
-        previousFlipper: html`
-            <fast-flipper
-                @click="${x => x.scrollToPrevious()}"
-                direction="previous"
-                aria-hidden="${x => x.flippersHiddenFromAT}"
-            ></fast-flipper>
-        `,
+        flipper: "fast-flipper",
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/listbox-option/stories/listbox-option.register.ts b/packages/web-components/fast-foundation/src/listbox-option/stories/listbox-option.register.ts
index c96be529cd5..965d2355555 100644
--- a/packages/web-components/fast-foundation/src/listbox-option/stories/listbox-option.register.ts
+++ b/packages/web-components/fast-foundation/src/listbox-option/stories/listbox-option.register.ts
@@ -69,8 +69,7 @@ const styles = css`
         background-color: inherit;
     }
 
-    .content {
-        grid-column-start: 2;
+    ::slotted(*) {
         justify-self: start;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
index e6794376700..aad27d40112 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -20,73 +20,72 @@ import { MenuItemRole } from "./menu-item.options.js";
 export function menuItemTemplate<T extends FASTMenuItem>(
     options: MenuItemOptions = {}
 ): ElementViewTemplate<T> {
+    const templateCache = {};
+
+    function setTemplateByRole(role: MenuItemRole, options: MenuItemOptions) {
+        let existing = templateCache[role];
+
+        if (!existing) {
+            const key = role.replace("menuitem", "");
+            const optionsKey = key + "Indicator";
+            templateCache[role] = existing = html<T>`
+                <span part="${key}-indicator" class="${key}-indicator">
+                    <slot name="${key}-indicator">
+                        ${staticallyCompose(options[optionsKey])}
+                    </slot>
+                </span>
+            `;
+        }
+
+        return existing;
+    }
+
     return html<T>`
-    <template
-        aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
-        aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
-        aria-disabled="${x => x.disabled}"
-        aria-expanded="${x => x.expanded}"
-        @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
-        @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
-        @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
-        @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
-    >
+        <template
+            aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
+            aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
+            aria-disabled="${x => x.disabled}"
+            aria-expanded="${x => x.expanded}"
+            @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
+            @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
+            @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
+            @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
+        >
             ${when(
-                x => x.role === MenuItemRole.menuitemcheckbox,
-                html<FASTMenuItem>`
-                    <div part="input-container" class="input-container">
-                        <span part="checkbox" class="checkbox">
-                            <slot name="checkbox-indicator">
-                                ${staticallyCompose(options.checkboxIndicator)}
-                            </slot>
-                        </span>
-                    </div>
+                x => x.role !== MenuItemRole.menuitem,
+                html<T>`
+                    ${x => setTemplateByRole(x.role, options)}
                 `
             )}
+            ${startSlotTemplate(options)}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endSlotTemplate(options)}
             ${when(
-                x => x.role === MenuItemRole.menuitemradio,
-                html<FASTMenuItem>`
-                    <div part="input-container" class="input-container">
-                        <span part="radio" class="radio">
-                            <slot name="radio-indicator">
-                                ${staticallyCompose(options.radioIndicator)}
-                            </slot>
-                        </span>
-                    </div>
-                `
-            )}
-        </div>
-        ${startSlotTemplate(options)}
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        ${endSlotTemplate(options)}
-        ${when(
-            x => x.hasSubmenu,
-            html<T>`
-                <div
-                    part="expand-collapse-glyph-container"
-                    class="expand-collapse-glyph-container"
-                >
-                    <span part="expand-collapse" class="expand-collapse">
-                        <slot name="expand-collapse-indicator">
-                            ${staticallyCompose(options.expandCollapseGlyph)}
+                x => x.hasSubmenu,
+                html<T>`
+                    <span part="submenu-icon" class="submenu-icon">
+                        <slot name="submenu-icon">
+                            ${staticallyCompose(options.submenuIcon)}
                         </slot>
                     </span>
-                </div>
-            `
-        )}
-        <span
-            ?hidden="${x => !x.expanded}"
-            class="submenu-container"
-            part="submenu-container"
-            ${ref("submenuContainer")}
-        >
-            <slot name="submenu" ${slotted({
-                property: "slottedSubmenu",
-                filter: elements("[role='menu']"),
-            })}></slot>
-        </span>
-    </template>
+                `
+            )}
+            <span
+                ?hidden="${x => !x.expanded}"
+                class="submenu-container"
+                part="submenu-container"
+                ${ref("submenuContainer")}
+            >
+                <slot
+                    name="submenu"
+                    ${slotted({
+                        property: "slottedSubmenu",
+                        filter: elements("[role='menu']"),
+                    })}
+                ></slot>
+            </span>
+        </template>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
index 9073941b374..f677741a07d 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
@@ -9,8 +9,8 @@ import {
     keySpace,
 } from "@microsoft/fast-web-utilities";
 import type { StaticallyComposableHTML } from "../utilities/template-helpers.js";
+import { StartEnd } from "../patterns/index.js";
 import type { StartEndOptions } from "../patterns/start-end.js";
-import { StartEnd } from "../patterns/start-end.js";
 import { applyMixins } from "../utilities/apply-mixins.js";
 import { MenuItemRole, roleForMenuItem } from "./menu-item.options.js";
 
@@ -22,7 +22,7 @@ export { MenuItemRole, roleForMenuItem };
  */
 export type MenuItemOptions = StartEndOptions<FASTMenuItem> & {
     checkboxIndicator?: StaticallyComposableHTML<FASTMenuItem>;
-    expandCollapseGlyph?: StaticallyComposableHTML<FASTMenuItem>;
+    submenuIcon?: StaticallyComposableHTML<FASTMenuItem>;
     radioIndicator?: StaticallyComposableHTML<FASTMenuItem>;
 };
 
@@ -30,20 +30,18 @@ export type MenuItemOptions = StartEndOptions<FASTMenuItem> & {
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
  *
- * @slot checked-indicator - The checked indicator
+ * @slot checkbox-indicator - The checked indicator
  * @slot radio-indicator - The radio indicator
  * @slot start - Content which can be provided before the menu item content
  * @slot end - Content which can be provided after the menu item content
  * @slot - The default slot for menu item content
- * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu-icon - The submenu indicator
  * @slot submenu - Used to nest menu's within menu items
- * @csspart input-container - The element representing the visual checked or radio indicator
- * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
- * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart checkbox-indicator - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio-indicator - The element wrapping the `menuitemradio` indicator
  * @csspart content - The element wrapping the menu item content
- * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
- * @csspart expand-collapse - The expand/collapse element
- * @csspart submenu-region - The container for the submenu, used for positioning
+ * @csspart submenu-icon - The expand/collapse element
+ * @csspart submenu-container - The container for the submenu, used for positioning
  * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
  * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
diff --git a/packages/web-components/fast-foundation/src/menu-item/stories/menu-item.register.ts b/packages/web-components/fast-foundation/src/menu-item/stories/menu-item.register.ts
index 5130e1fa901..873bcabcf25 100644
--- a/packages/web-components/fast-foundation/src/menu-item/stories/menu-item.register.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/stories/menu-item.register.ts
@@ -1,5 +1,7 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import checkmarkIcon from "../../../statics/svg/checkmark_16_regular.svg";
+import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
+import circleIcon from "../../../statics/svg/circle_16_filled.svg";
 import { FASTMenuItem } from "../menu-item.js";
 import { menuItemTemplate } from "../menu-item.template.js";
 
@@ -9,7 +11,6 @@ export const styles = css`
     }
 
     :host {
-        --icon-col: minmax(42px, auto);
         align-items: center;
         background: var(--neutral-fill-stealth-rest);
         border-radius: calc(var(--control-corner-radius) * 1px);
@@ -22,66 +23,39 @@ export const styles = css`
         font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height)
             var(--body-font);
         height: calc(var(--height-number) * 1px);
-        justify-items: start;
         margin: 0 calc(var(--design-unit) * 1px);
         outline: none;
         overflow: visible;
-        padding: 0;
+        padding: 0 10px;
         white-space: nowrap;
     }
 
-    :host(:hover) {
+    :host(:not([disabled]):hover) {
         background: var(--neutral-fill-stealth-hover);
         color: var(--neutral-foreground-rest);
+        position: relative;
+        z-index: 1;
     }
 
-    :host(:active) {
+    :host(:not([disabled]):active) {
         background: var(--neutral-fill-stealth-active);
     }
 
     :host(:focus-visible) {
         border-color: var(--focus-stroke-outer);
         background: var(--neutral-fill-stealth-focus);
-        color: var(--neutral-foreground-rest);
-    }
-
-    :host([role="menuitem"]) .content {
-        padding: 0 10px;
     }
 
     .content {
-        justify-self: start;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
-    :host([aria-checked="true"]),
-    :host(.expanded) {
-        background: var(--neutral-fill-rest);
-        color: var(--neutral-foreground-rest);
-    }
     :host([disabled]) {
         cursor: var(--disabled-cursor);
         opacity: var(--disabled-opacity);
     }
 
-    :host([disabled]:hover) {
-        color: var(--neutral-foreground-rest);
-        fill: currentcolor;
-        background: var(--neutral-fill-stealth-rest);
-    }
-
-    :host([disabled]:hover) ::slotted([slot="start"]),
-    :host([disabled]:hover) ::slotted([slot="end"]),
-    :host([disabled]:hover)::slotted(svg) {
-        fill: var(--neutral-foreground-rest);
-    }
-
-    .expand-collapse-glyph {
-        width: 16px;
-        height: 16px;
-    }
-
     ::slotted([slot="start"]),
     ::slotted([slot="end"]) {
         display: flex;
@@ -95,102 +69,33 @@ export const styles = css`
         margin-inline-end: 10px;
     }
 
-    :host(:hover) ::slotted([slot="start"]),
-    :host(:hover) ::slotted([slot="end"]),
-    :host(:hover)::slotted(svg),
-    :host(:active) ::slotted([slot="start"]),
-    :host(:active) ::slotted([slot="end"]),
-    :host(:active)::slotted(svg) {
-        fill: var(--neutral-foreground-rest);
-    }
-
-    .input-container,
-    .expand-collapse-glyph-container {
-        display: none;
-    }
-
-    .expand-collapse-glyph-container {
-        margin-inline-start: auto;
-    }
-
-    :host([aria-haspopup="menu"]) .expand-collapse-glyph-container,
-    :host([role="menuitemcheckbox"]) .input-container,
-    :host([role="menuitemradio"]) .input-container {
-        display: grid;
-        margin-inline-end: 10px;
+    ::slotted([slot="start"]) {
+        margin-inline-end: 6px;
     }
 
-    .expand-collapse,
-    .checkbox,
-    .radio {
+    .checkbox-indicator,
+    .radio-indicator,
+    .submenu-icon {
         display: flex;
+        flex-basis: content;
         align-items: center;
         justify-content: center;
-        position: relative;
-        width: 20px;
-        height: 20px;
-        box-sizing: border-box;
-        outline: none;
-        margin-inline-start: 10px;
-    }
-
-    .checkbox,
-    .radio {
-        border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-rest);
-    }
-
-    :host([aria-checked="true"]) .checkbox,
-    :host([aria-checked="true"]) .radio {
-        background: var(--accent-fill-rest);
-        border-color: var(--accent-fill-rest);
-    }
-
-    .checkbox {
-        border-radius: calc(var(--control-corner-radius) * 1px);
+        margin-inline-end: 6px;
+        pointer-events: none;
     }
 
-    .radio {
-        border-radius: 999px;
-    }
-
-    .checkbox-indicator,
-    .radio-indicator,
-    .expand-collapse-indicator,
-    ::slotted([slot="checkbox-indicator"]),
-    ::slotted([slot="radio-indicator"]),
-    ::slotted([slot="expand-collapse-indicator"]) {
-        display: none;
+    .submenu-icon {
+        margin-inline-start: 6px;
+        margin-inline-end: 0;
     }
 
     ::slotted([slot="end"]:not(svg)) {
         color: var(--neutral-foreground-hint);
-        margin-inline-end: 10px;
     }
 
-    :host([aria-checked="true"]) .checkbox-indicator,
-    :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]) {
-        display: block;
-        fill: var(--foreground-on-accent-rest);
-        height: 100%;
-        pointer-events: none;
-        width: 100%;
-    }
-
-    :host([aria-checked="true"]) .radio-indicator {
-        background: var(--foreground-on-accent-rest);
-        border-radius: 999px;
-        bottom: 4px;
-        display: block;
-        left: 4px;
-        pointer-events: none;
-        position: absolute;
-        right: 4px;
-        top: 4px;
-    }
-
-    :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
-        display: block;
-        pointer-events: none;
+    :host(:not([aria-checked="true"])) .checkbox-indicator,
+    :host(:not([aria-checked="true"])) .radio-indicator {
+        visibility: hidden;
     }
 
     .submenu-container {
@@ -204,35 +109,9 @@ export const styles = css`
 FASTMenuItem.define({
     name: "fast-menu-item",
     template: menuItemTemplate({
-        checkboxIndicator: /* html */ html`
-            <svg
-                part="checkbox-indicator"
-                class="checkbox-indicator"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="m8.1 12.7 7.1-8.2 1.6 1.4-8.6 9.9-4.4-4.5 1.5-1.5L8 12.7Z"
-                />
-            </svg>
-        `,
-        expandCollapseGlyph: /* html */ html`
-            <svg
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-                class="expand-collapse-glyph"
-                part="expand-collapse-glyph"
-            >
-                <path
-                    d="M5 12.3a1 1 0 0 0 1.6.8L11 8.8a1.5 1.5 0 0 0 0-2.3L6.6 2.2A1 1 0 0 0 5 3v9.3Z"
-                />
-            </svg>
-        `,
-        radioIndicator: /* html */ html`
-            <span part="radio-indicator" class="radio-indicator"></span>
-        `,
+        checkboxIndicator: checkmarkIcon,
+        radioIndicator: circleIcon,
+        submenuIcon: chevronRightIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md
index 249e903fdb4..5c018b21f97 100644
--- a/packages/web-components/fast-foundation/src/menu/README.md
+++ b/packages/web-components/fast-foundation/src/menu/README.md
@@ -228,27 +228,25 @@ export const myMenuItem = MenuItem.compose<MenuItemOptions>({
 
 #### CSS Parts
 
-| Name                              | Description                                                    |
-| --------------------------------- | -------------------------------------------------------------- |
-| `input-container`                 | The element representing the visual checked or radio indicator |
-| `checkbox`                        | The element wrapping the \`menuitemcheckbox\` indicator        |
-| `radio`                           | The element wrapping the \`menuitemradio\` indicator           |
-| `content`                         | The element wrapping the menu item content                     |
-| `expand-collapse-glyph-container` | The element wrapping the expand collapse element               |
-| `expand-collapse`                 | The expand/collapse element                                    |
-| `submenu-region`                  | The container for the submenu, used for positioning            |
+| Name                 | Description                                             |
+| -------------------- | ------------------------------------------------------- |
+| `checkbox-indicator` | The element wrapping the \`menuitemcheckbox\` indicator |
+| `radio-indicator`    | The element wrapping the \`menuitemradio\` indicator    |
+| `content`            | The element wrapping the menu item content              |
+| `submenu-icon`       | The expand/collapse element                             |
+| `submenu-container`  | The container for the submenu, used for positioning     |
 
 #### Slots
 
-| Name                        | Description                                                |
-| --------------------------- | ---------------------------------------------------------- |
-| `checked-indicator`         | The checked indicator                                      |
-| `radio-indicator`           | The radio indicator                                        |
-| `start`                     | Content which can be provided before the menu item content |
-| `end`                       | Content which can be provided after the menu item content  |
-|                             | The default slot for menu item content                     |
-| `expand-collapse-indicator` | The expand/collapse indicator                              |
-| `submenu`                   | Used to nest menu's within menu items                      |
+| Name                 | Description                                                |
+| -------------------- | ---------------------------------------------------------- |
+| `checkbox-indicator` | The checked indicator                                      |
+| `radio-indicator`    | The radio indicator                                        |
+| `start`              | Content which can be provided before the menu item content |
+| `end`                | Content which can be provided after the menu item content  |
+|                      | The default slot for menu item content                     |
+| `submenu-icon`       | The submenu indicator                                      |
+| `submenu`            | Used to nest menu's within menu items                      |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/menu/stories/menu.register.ts b/packages/web-components/fast-foundation/src/menu/stories/menu.register.ts
index 2efbb6fb529..772a384754f 100644
--- a/packages/web-components/fast-foundation/src/menu/stories/menu.register.ts
+++ b/packages/web-components/fast-foundation/src/menu/stories/menu.register.ts
@@ -1,7 +1,11 @@
-import { html } from "@microsoft/fast-element";
 import { attr } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import checkmarkIcon from "../../../statics/svg/checkmark_16_regular.svg";
+import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
+import circleIcon from "../../../statics/svg/circle_16_filled.svg";
 import { FASTMenuItem, MenuItemRole, menuItemTemplate } from "../../menu-item/index.js";
+// eslint-disable-next-line no-restricted-imports
+import { styles as menuItemStyles } from "../../menu-item/stories/menu-item.register.js";
 import { FASTMenu } from "../menu.js";
 import { menuTemplate } from "../menu.template.js";
 
@@ -30,15 +34,6 @@ const styles = css`
         margin: 0 calc(var(--design-unit) * 1px);
         width: max-content;
     }
-
-    ::slotted(fast-divider) {
-        border: none;
-        border-top: calc(var(--stroke-width) * 1px) solid
-            var(--neutral-stroke-divider-rest);
-        box-sizing: content-box;
-        height: 0;
-        margin: 0;
-    }
 `;
 
 FASTMenu.define({
@@ -47,6 +42,14 @@ FASTMenu.define({
     template: menuTemplate(),
 });
 
+/**
+ * The intent of this example is that a menu item may have a checkbox or radio role, and it may or may not have
+ * `start` slot content (typically an icon). If _any_ combination of items in the entire menu have both, there
+ * will be two columns at the front of the menu, separate columns for the state indicator and the `start` icons.
+ * A menu item should not need to be _both_ a selectable role _and_ have `start` content to apply two column layout.
+ *
+ * @internal
+ */
 export class FancyMenu extends FASTMenu {
     public connectedCallback(): void {
         super.connectedCallback();
@@ -55,41 +58,50 @@ export class FancyMenu extends FASTMenu {
     protected setItems(): void {
         super.setItems();
 
-        this.menuItems
-            ?.filter(this.isMenuItemElement)
-            .forEach((item: HTMLElement, index: number) => {
-                const indent: FancyMenuItemColumnCount = this.menuItems!.reduce(
-                    (accum, current) => {
-                        const elementValue = FancyMenu.elementIndent(
-                            current as HTMLElement
-                        );
-
-                        return Math.max(
-                            accum,
-                            elementValue as number
-                        ) as FancyMenuItemColumnCount;
-                    },
-                    0
-                );
-
-                if (item instanceof FancyMenuItem) {
-                    item.startColumnCount = indent;
+        this.menuItems?.filter(this.isMenuItemElement).forEach((item: HTMLElement) => {
+            const indentInfo: FancyMenuIndentInfo = this.menuItems!.reduce(
+                (accum: FancyMenuIndentInfo, current: HTMLElement) => {
+                    const elementValue = FancyMenu.elementIndent(current as HTMLElement);
+                    return {
+                        hasControl: accum.hasControl || elementValue.hasControl,
+                        hasStart: accum.hasStart || elementValue.hasStart,
+                    };
+                },
+                {
+                    hasControl: false,
+                    hasStart: false,
                 }
-            });
+            );
+            const indent: FancyMenuItemColumnCount =
+                indentInfo.hasControl && indentInfo.hasStart
+                    ? 2
+                    : indentInfo.hasControl || indentInfo.hasStart
+                    ? 1
+                    : 0;
+
+            if (item instanceof FancyMenuItem) {
+                item.startColumnCount = indent;
+            }
+        });
     }
 
-    private static elementIndent(el: HTMLElement): FancyMenuItemColumnCount {
+    private static elementIndent(el: HTMLElement): FancyMenuIndentInfo {
         const role = el.getAttribute("role");
         const startSlot = el.querySelector("[slot=start]");
 
-        if (role && role !== MenuItemRole.menuitem) {
-            return !startSlot ? 1 : 2;
-        }
-
-        return !startSlot ? 0 : 1;
+        return {
+            hasControl: role !== MenuItemRole.menuitem,
+            hasStart: startSlot !== null,
+        };
     }
 }
 
+/**
+ * Type for menu item column count info.
+ * @internal
+ */
+type FancyMenuIndentInfo = { hasControl: boolean; hasStart: boolean };
+
 /**
  * Types of menu item column count.
  * @internal
@@ -102,7 +114,6 @@ type FancyMenuItemColumnCount = 0 | 1 | 2;
 export class FancyMenuItem extends FASTMenuItem {
     /**
      * @public
-     * @deprecated - will be removed in a coming ALPHA version
      */
     @attr({ attribute: "start-column-count" })
     public startColumnCount: FancyMenuItemColumnCount;
@@ -125,81 +136,20 @@ FancyMenu.define({
 FancyMenuItem.define({
     name: "fancy-menu-item",
     template: menuItemTemplate({
-        checkboxIndicator: /* html */ html`
-            <svg
-                part="checkbox-indicator"
-                class="checkbox-indicator"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="m8.1 12.7 7.1-8.2 1.6 1.4-8.6 9.9-4.4-4.5 1.5-1.5L8 12.7Z"
-                />
-            </svg>
-        `,
-        expandCollapseGlyph: /* html */ html`
-            <svg
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-                class="expand-collapse-glyph"
-                part="expand-collapse-glyph"
-            >
-                <path
-                    d="M5 12.3a1 1 0 0 0 1.6.8L11 8.8a1.5 1.5 0 0 0 0-2.3L6.6 2.2A1 1 0 0 0 5 3v9.3Z"
-                />
-            </svg>
-        `,
-        radioIndicator: /* html */ html`
-            <span part="radio-indicator" class="radio-indicator"></span>
-        `,
+        checkboxIndicator: checkmarkIcon,
+        radioIndicator: circleIcon,
+        submenuIcon: chevronRightIcon,
     }),
     styles: css`
-        :host([hidden]) {
-            display: none !important;
-        }
-
-        :host {
-            --icon-col: minmax(42px, auto);
-            align-items: center;
-            background: var(--neutral-fill-stealth-rest);
-            border-radius: calc(var(--control-corner-radius) * 1px);
-            border: calc(var(--focus-stroke-width) * 1px) solid transparent;
-            box-sizing: border-box;
-            color: var(--neutral-foreground-rest);
-            contain: layout;
-            cursor: pointer;
+        ${menuItemStyles} :host {
+            --icon-col: minmax(24px, auto);
             display: grid;
-            fill: currentcolor;
-            font: var(--type-ramp-base-font-size) / var(--type-ramp-base-line-height)
-                var(--body-font);
             grid-template-columns: var(--icon-col) 1fr var(--icon-col);
             grid-template-rows: auto;
-            height: calc(var(--height-number) * 1px);
-            justify-items: center;
-            margin: 0 calc(var(--design-unit) * 1px);
-            outline: none;
-            overflow: visible;
-            padding: 0;
-            white-space: nowrap;
         }
 
-        :host(:hover) {
-            background: var(--neutral-fill-stealth-hover);
-            color: var(--neutral-foreground-rest);
-            position: relative;
-            z-index: 1;
-        }
-
-        :host(:active) {
-            background: var(--neutral-fill-stealth-active);
-        }
-
-        :host(:focus-visible) {
-            border-color: var(--focus-stroke-outer);
-            background: var(--neutral-fill-stealth-focus);
-            color: var(--neutral-foreground-rest);
+        ::slotted([slot="start"]) {
+            margin-inline-end: 0;
         }
 
         .content {
@@ -216,10 +166,9 @@ FancyMenuItem.define({
         :host([start-column-count="0"]) .content {
             grid-column: 1;
             grid-row: 1;
-            margin-inline-start: 10px;
         }
 
-        :host([start-column-count="0"]) .expand-collapse-glyph-container {
+        :host([start-column-count="0"]) .submenu-icon {
             grid-column: 5;
             grid-row: 1;
         }
@@ -236,83 +185,32 @@ FancyMenuItem.define({
             margin-inline-start: 10px;
         }
 
-        :host([start-column-count="2"]) .expand-collapse-glyph-container {
+        :host([start-column-count="2"]) .submenu-icon {
             grid-column: 5;
             grid-row: 1;
         }
 
-        :host([start-column-count="2"]) ::slotted([slot="start"]) {
+        :host([start-column-count="2"]) slot[name="start"] {
             grid-column: 2;
         }
 
-        :host([start-column-count="2"]) ::slotted([slot="end"]) {
+        :host([start-column-count="2"]) slot[name="end"] {
             grid-column: 4;
         }
 
-        :host([aria-checked="true"]),
-        :host(.expanded) {
-            background: var(--neutral-fill-rest);
-            color: var(--neutral-foreground-rest);
-        }
-
-        :host([disabled]) {
-            cursor: var(--disabled-cursor);
-            opacity: var(--disabled-opacity);
-        }
-
-        :host([disabled]:hover) {
-            color: var(--neutral-foreground-rest);
-            fill: currentcolor;
-            background: var(--neutral-fill-stealth-rest);
-        }
-
-        .expand-collapse-glyph {
-            width: 16px;
-            height: 16px;
-        }
-
-        ::slotted([slot="start"]),
-        ::slotted([slot="end"]) {
-            display: flex;
-        }
-
-        ::slotted([slot="start"]) {
-            margin-inline-start: 10px;
-        }
-
-        ::slotted([slot="end"]) {
-            margin-inline-end: 10px;
-        }
-
         :host([start-column-count="0"][aria-haspopup="menu"]),
         :host([start-column-count="1"][aria-haspopup="menu"]),
         :host([start-column-count="1"][role="menuitemcheckbox"]),
         :host([start-column-count="1"][role="menuitemradio"]) {
-            align-items: center;
-            display: grid;
             grid-template-columns: var(--icon-col) auto 1fr var(--icon-col) var(
                     --icon-col
                 );
-            min-height: 32px;
         }
 
-        :host([start-column-count="2"]:not([aria-haspopup="menu"]))
-            ::slotted([slot="end"]) {
+        :host([start-column-count="2"]:not([aria-haspopup="menu"])) slot[name="end"] {
             grid-column: 5;
         }
 
-        .input-container,
-        .expand-collapse-glyph-container {
-            display: none;
-        }
-
-        :host([aria-haspopup="menu"]) .expand-collapse-glyph-container,
-        :host([role="menuitemcheckbox"]) .input-container,
-        :host([role="menuitemradio"]) .input-container {
-            display: grid;
-            margin-inline-end: 10px;
-        }
-
         :host([aria-haspopup="menu"]) .content,
         :host([role="menuitemcheckbox"]) .content,
         :host([role="menuitemradio"]) .content {
@@ -323,83 +221,10 @@ FancyMenuItem.define({
             grid-column-start: 1;
         }
 
-        :host([aria-haspopup="menu"]) ::slotted([slot="end"]),
-        :host([role="menuitemcheckbox"]) ::slotted([slot="end"]),
-        :host([role="menuitemradio"]) ::slotted([slot="end"]) {
+        :host([aria-haspopup="menu"]) slot[name="end"],
+        :host([role="menuitemcheckbox"]) slot[name="end"],
+        :host([role="menuitemradio"]) slot[name="end"] {
             grid-column-start: 4;
         }
-
-        .expand-collapse,
-        .checkbox,
-        .radio {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            width: 20px;
-            height: 20px;
-            box-sizing: border-box;
-            outline: none;
-            margin-inline-start: 10px;
-        }
-
-        .checkbox,
-        .radio {
-            border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-rest);
-        }
-
-        :host([aria-checked="true"]) .checkbox,
-        :host([aria-checked="true"]) .radio {
-            background: var(--accent-fill-rest);
-            border-color: var(--accent-fill-rest);
-        }
-
-        .checkbox {
-            border-radius: calc(var(--control-corner-radius) * 1px);
-        }
-
-        .radio {
-            border-radius: 999px;
-        }
-
-        .checkbox-indicator,
-        .radio-indicator,
-        .expand-collapse-indicator,
-        ::slotted([slot="checkbox-indicator"]),
-        ::slotted([slot="radio-indicator"]),
-        ::slotted([slot="expand-collapse-indicator"]) {
-            display: none;
-        }
-
-        ::slotted([slot="end"]:not(svg)) {
-            color: var(--neutral-foreground-hint);
-            margin-inline-end: 10px;
-        }
-
-        :host([aria-checked="true"]) .checkbox-indicator,
-        :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]) {
-            display: block;
-            fill: var(--foreground-on-accent-rest);
-            height: 100%;
-            pointer-events: none;
-            width: 100%;
-        }
-
-        :host([aria-checked="true"]) .radio-indicator {
-            background: var(--foreground-on-accent-rest);
-            border-radius: 999px;
-            bottom: 4px;
-            display: block;
-            left: 4px;
-            pointer-events: none;
-            position: absolute;
-            right: 4px;
-            top: 4px;
-        }
-
-        :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
-            display: block;
-            pointer-events: none;
-        }
     `,
 });
diff --git a/packages/web-components/fast-foundation/src/menu/stories/menu.stories.ts b/packages/web-components/fast-foundation/src/menu/stories/menu.stories.ts
index 64cb2e27a75..8e98e65be04 100644
--- a/packages/web-components/fast-foundation/src/menu/stories/menu.stories.ts
+++ b/packages/web-components/fast-foundation/src/menu/stories/menu.stories.ts
@@ -173,6 +173,53 @@ MenuWithNestedItems.args = {
     ],
 };
 
+export const MenuWithEverything = Menu.bind({});
+MenuWithEverything.args = {
+    storyItems: [
+        {
+            storyContent: html`
+                <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+                Menu Item 1
+                <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+            `,
+        },
+        {
+            storyContent: html`
+                <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+                Menu Item 2 ${repeat(x => x.storyItems, storyTemplate)}
+                <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+            `,
+            storyItems: [
+                {
+                    slot: "submenu",
+                    storyContent: storyContentTemplate,
+                    storyItems: [
+                        { storyContent: "Menu Item 2.1" },
+                        { storyContent: "Menu Item 2.2" },
+                        { storyContent: "Menu Item 2.3" },
+                    ],
+                },
+            ],
+        },
+        { template: dividerStoryTemplate },
+        {
+            storyContent: html`
+                <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+                Checkbox 1
+                <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+            `,
+            role: "menuitemcheckbox",
+        },
+        { storyContent: "Checkbox 2", role: "menuitemcheckbox" },
+        { template: dividerStoryTemplate },
+        { storyContent: "Radio 1.1", role: "menuitemradio" },
+        { storyContent: "Radio 1.2", role: "menuitemradio" },
+        { template: dividerStoryTemplate },
+        { storyContent: "Radio 2.1", role: "menuitemradio" },
+        { storyContent: "Radio 2.2", role: "menuitemradio" },
+    ],
+};
+
 export const FancyMenu: Story<MyFancyMenu> = renderComponent(fancyStoryTemplate).bind({});
 FancyMenu.args = {
     storyContent: html`
@@ -190,8 +237,8 @@ FancyMenu.args = {
     ],
 };
 
-export const FancyMenuWithItemsWithIcons: Story<MyFancyMenu> = FancyMenu.bind({});
-FancyMenuWithItemsWithIcons.args = {
+export const FancyMenuWithSlottedStartEnd: Story<MyFancyMenu> = FancyMenu.bind({});
+FancyMenuWithSlottedStartEnd.args = {
     storyContent: html`
         ${repeat(
             x => x.storyItems,
@@ -247,3 +294,51 @@ FancyMenuWithFormControls.args = {
         { storyContent: "Fancy Radio 2.2", role: "menuitemradio" },
     ],
 };
+
+export const FancyMenuWithEverything: Story<MyFancyMenu> = FancyMenu.bind({});
+FancyMenuWithEverything.args = {
+    storyContent: html`
+        ${repeat(
+            x => x.storyItems,
+            html<StoryArgs<FASTMenuItem>>`
+                ${x => x.template ?? fancyMenuItemStoryTemplate}
+            `
+        )}
+    `,
+    storyItems: [
+        {
+            storyContent: html`
+                <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+                Fancy Menu Item 1
+                <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+            `,
+        },
+        {
+            storyContent: html`
+                <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+                Fancy Menu Item 2 ${repeat(x => x.storyItems, storyTemplate)}
+                <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+            `,
+            storyItems: [
+                {
+                    slot: "submenu",
+                    storyContent: storyContentTemplate,
+                    storyItems: [
+                        { storyContent: "Menu Item 2.1" },
+                        { storyContent: "Menu Item 2.2" },
+                        { storyContent: "Menu Item 2.3" },
+                    ],
+                },
+            ],
+        },
+        { template: dividerStoryTemplate },
+        { storyContent: "Fancy Checkbox 1", role: "menuitemcheckbox" },
+        { storyContent: "Fancy Checkbox 2", role: "menuitemcheckbox" },
+        { template: dividerStoryTemplate },
+        { storyContent: "Fancy Radio 1.1", role: "menuitemradio" },
+        { storyContent: "Fancy Radio 1.2", role: "menuitemradio" },
+        { template: dividerStoryTemplate },
+        { storyContent: "Fancy Radio 2.1", role: "menuitemradio" },
+        { storyContent: "Fancy Radio 2.2", role: "menuitemradio" },
+    ],
+};
diff --git a/packages/web-components/fast-foundation/src/number-field/README.md b/packages/web-components/fast-foundation/src/number-field/README.md
index 313010ef670..16fe9a42bf4 100644
--- a/packages/web-components/fast-foundation/src/number-field/README.md
+++ b/packages/web-components/fast-foundation/src/number-field/README.md
@@ -161,24 +161,24 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### CSS Parts
 
-| Name        | Description                                                     |
-| ----------- | --------------------------------------------------------------- |
-| `label`     | The label                                                       |
-| `root`      | The element wrapping the control, including start and end slots |
-| `control`   | The element representing the input                              |
-| `controls`  | The step up and step down controls                              |
-| `step-up`   | The step up control                                             |
-| `step-down` | The step down control                                           |
+| Name           | Description                                                                              |
+| -------------- | ---------------------------------------------------------------------------------------- |
+| `label`        | The label                                                                                |
+| `control`      | The logical control, the element wrapping the input field, including start and end slots |
+| `field`        | The element representing the input field                                                 |
+| `step-buttons` | The step up and step down controls                                                       |
+| `step-up`      | The step up control                                                                      |
+| `step-down`    | The step down control                                                                    |
 
 #### Slots
 
-| Name              | Description                                                 |
-| ----------------- | ----------------------------------------------------------- |
-| `start`           | Content which can be provided before the number field input |
-| `end`             | Content which can be provided after the number field input  |
-|                   | The default slot for the label                              |
-| `step-up-glyph`   | The glyph for the step up control                           |
-| `step-down-glyph` | The glyph for the step down control                         |
+| Name             | Description                                                 |
+| ---------------- | ----------------------------------------------------------- |
+| `start`          | Content which can be provided before the number field input |
+| `end`            | Content which can be provided after the number field input  |
+|                  | The default slot for the label                              |
+| `step-up-icon`   | The icon for the step up control                            |
+| `step-down-icon` | The icon for the step down control                          |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.pw.spec.ts b/packages/web-components/fast-foundation/src/number-field/number-field.pw.spec.ts
index c374e4d0f4d..9848dde4ae3 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.pw.spec.ts
@@ -17,7 +17,7 @@ test.describe("NumberField", () => {
 
         root = page.locator("#root");
 
-        control = element.locator(".control");
+        control = element.locator(".field");
 
         await page.goto(fixtureURL("number-field--number-field"));
     });
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.spec.md b/packages/web-components/fast-foundation/src/number-field/number-field.spec.md
index c8c9a2cd918..d201a07df75 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.spec.md
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.spec.md
@@ -52,9 +52,10 @@ Extends FAST Element
 <!-- shadow root -->
 <label part="label"><slot></slot></label>
 <div part="root">
-  <slot name="before-content" part="before-content"></slot>
+  <slot name="start" part="start"></slot>
   <input part="control" />
-  <slot name="after-content" part="after-content"></slot>
+  <div part="step-buttons"></div>
+  <slot name="end" part="end"></slot>
 </div>
 <!-- end shadow root -->
 ```
@@ -67,8 +68,8 @@ Extends FAST Element
 
 *Slot Names*
 - default - the label content
-- before-content - often times a glyph, icon, or button precedes input
-- after-content - often times a glyph, icon, or button follows the input
+- start - often times a glyph, icon, or button precedes input
+- end - often times a glyph, icon, or button follows the input
 
 *Host Classes*
 - disabled
@@ -78,9 +79,10 @@ Extends FAST Element
 *CSS Parts*
 - label
 - root
-- before-content
-- after-content
+- start
+- end
 - control
+- step-buttons
 
 ---
 
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.template.ts b/packages/web-components/fast-foundation/src/number-field/number-field.template.ts
index fa01d9b54f7..4bc9b5afe8d 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.template.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.template.ts
@@ -13,7 +13,7 @@ export function numberFieldTemplate<T extends FASTNumberField>(
     return html<T>`
         <label
             part="label"
-            for="control"
+            for="field"
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
@@ -21,12 +21,12 @@ export function numberFieldTemplate<T extends FASTNumberField>(
         >
             <slot ${slotted("defaultSlottedNodes")}></slot>
         </label>
-        <div class="root" part="root">
+        <div class="control" part="control">
             ${startSlotTemplate(options)}
             <input
-                class="control"
-                part="control"
-                id="control"
+                class="field"
+                part="field"
+                id="field"
                 @input="${x => x.handleTextInput()}"
                 @change="${x => x.handleChange()}"
                 @keydown="${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}"
@@ -64,15 +64,15 @@ export function numberFieldTemplate<T extends FASTNumberField>(
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
+                ${ref("field")}
             />
             ${when(
                 x => !x.hideStep && !x.readOnly && !x.disabled,
                 html<T>`
-                    <div class="controls" part="controls">
+                    <div class="step-buttons" part="step-buttons">
                         <div class="step-up" part="step-up" @click="${x => x.stepUp()}">
-                            <slot name="step-up-glyph">
-                                ${staticallyCompose(options.stepUpGlyph)}
+                            <slot name="step-up-icon">
+                                ${staticallyCompose(options.stepUpIcon)}
                             </slot>
                         </div>
                         <div
@@ -80,8 +80,8 @@ export function numberFieldTemplate<T extends FASTNumberField>(
                             part="step-down"
                             @click="${x => x.stepDown()}"
                         >
-                            <slot name="step-down-glyph">
-                                ${staticallyCompose(options.stepDownGlyph)}
+                            <slot name="step-down-icon">
+                                ${staticallyCompose(options.stepDownIcon)}
                             </slot>
                         </div>
                     </div>
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.ts b/packages/web-components/fast-foundation/src/number-field/number-field.ts
index 0e7e21b7d94..a7ec8764aeb 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.ts
@@ -17,8 +17,8 @@ import { FormAssociatedNumberField } from "./number-field.form-associated.js";
  * @public
  */
 export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
-    stepDownGlyph?: StaticallyComposableHTML<FASTNumberField>;
-    stepUpGlyph?: StaticallyComposableHTML<FASTNumberField>;
+    stepDownIcon?: StaticallyComposableHTML<FASTNumberField>;
+    stepUpIcon?: StaticallyComposableHTML<FASTNumberField>;
 };
 
 /**
@@ -28,12 +28,12 @@ export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
  * @slot start - Content which can be provided before the number field input
  * @slot end - Content which can be provided after the number field input
  * @slot - The default slot for the label
- * @slot step-up-glyph - The glyph for the step up control
- * @slot step-down-glyph - The glyph for the step down control
+ * @slot step-up-icon - The icon for the step up control
+ * @slot step-down-icon - The icon for the step down control
  * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The element representing the input
- * @csspart controls - The step up and step down controls
+ * @csspart control - The logical control, the element wrapping the input field, including start and end slots
+ * @csspart field - The element representing the input field
+ * @csspart step-buttons - The step up and step down controls
  * @csspart step-up - The step up control
  * @csspart step-down - The step down control
  * @fires input - Fires a custom 'input' event when the value has changed
@@ -184,10 +184,10 @@ export class FASTNumberField extends FormAssociatedNumberField {
     public defaultSlottedNodes: Node[];
 
     /**
-     * A reference to the internal input element
+     * A reference to the internal field element
      * @internal
      */
-    public control: HTMLInputElement;
+    public field: HTMLInputElement;
 
     /**
      * Flag to indicate that the value change is from the user input
@@ -212,7 +212,6 @@ export class FASTNumberField extends FormAssociatedNumberField {
      * Validates that the value is a number between the min and max
      * @param previous - previous stored value
      * @param next - value being updated
-     * @param updateControl - should the text field be updated with value, defaults to true
      * @internal
      */
     public valueChanged(previous: string, next: string): void {
@@ -223,8 +222,8 @@ export class FASTNumberField extends FormAssociatedNumberField {
             return;
         }
 
-        if (this.$fastController.isConnected && this.control?.value !== value) {
-            this.control.value = this.value;
+        if (this.$fastController.isConnected && this.field?.value !== value) {
+            this.field.value = this.value;
         }
 
         super.valueChanged(previous, this.value);
@@ -239,7 +238,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 
     /**
@@ -309,7 +308,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
         this.proxy.setAttribute("type", "number");
         this.validate();
-        this.control.value = this.value;
+        this.field.value = this.value;
 
         if (this.autofocus) {
             Updates.enqueue(() => {
@@ -324,7 +323,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
      * @public
      */
     public select(): void {
-        this.control.select();
+        this.field.select();
 
         /**
          * The select event does not permeate the shadow DOM boundary.
@@ -336,13 +335,13 @@ export class FASTNumberField extends FormAssociatedNumberField {
     }
 
     /**
-     * Handles the internal control's `input` event
+     * Handles the internal input field's `input` event
      * @internal
      */
     public handleTextInput(): void {
-        this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
+        this.field.value = this.field.value.replace(/[^0-9\-+e.]/g, "");
         this.isUserInput = true;
-        this.value = this.control.value;
+        this.value = this.field.value;
     }
 
     /**
@@ -380,11 +379,11 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
     /**
      * Handles populating the input field with a validated value when
-     *  leaving the input field.
+     * leaving the input field.
      * @internal
      */
     public handleBlur(): void {
-        this.control.value = this.value;
+        this.field.value = this.value;
     }
 }
 
diff --git a/packages/web-components/fast-foundation/src/number-field/stories/number-field.register.ts b/packages/web-components/fast-foundation/src/number-field/stories/number-field.register.ts
index f4b460e8e74..f3429edaeb1 100644
--- a/packages/web-components/fast-foundation/src/number-field/stories/number-field.register.ts
+++ b/packages/web-components/fast-foundation/src/number-field/stories/number-field.register.ts
@@ -1,5 +1,6 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import chevronDownIcon from "../../../statics/svg/chevron_down_12_regular.svg";
+import chevronUpIcon from "../../../statics/svg/chevron_up_12_regular.svg";
 import { FASTNumberField } from "../number-field.js";
 import { numberFieldTemplate } from "../number-field.template.js";
 
@@ -16,7 +17,7 @@ const styles = css`
         display: none;
     }
 
-    .root {
+    .control {
         align-items: center;
         background: var(--neutral-fill-input-rest);
         border-radius: calc(var(--control-corner-radius) * 1px);
@@ -32,7 +33,7 @@ const styles = css`
         position: relative;
     }
 
-    .control {
+    .field {
         appearance: none;
         background: transparent;
         border: 0;
@@ -45,14 +46,14 @@ const styles = css`
         padding: 0 calc(var(--design-unit) * 2px + 1px);
     }
 
-    .control:hover,
-    .control:focus-visible,
-    .control:disabled,
-    .control:active {
+    .field:hover,
+    .field:focus-visible,
+    .field:disabled,
+    .field:active {
         outline: none;
     }
 
-    .controls {
+    .step-buttons {
         opacity: 0;
     }
 
@@ -69,67 +70,64 @@ const styles = css`
         visibility: hidden;
     }
 
+    ::slotted([slot="start"]),
+    ::slotted([slot="end"]),
+    .field,
+    .step-buttons {
+        align-self: center;
+    }
+
     ::slotted([slot="start"]),
     ::slotted([slot="end"]) {
         display: flex;
         margin-inline: 11px;
     }
 
-    .step-up-glyph,
-    .step-down-glyph {
-        cursor: pointer;
-        display: block;
-        padding: 4px 10px;
-    }
-
-    .step-up-glyph:before,
-    .step-down-glyph:before {
-        border: solid transparent 6px;
-        content: "";
-        display: block;
+    .field.icon-only {
+        line-height: 0;
+        padding: 0;
     }
 
-    .step-up-glyph:before {
-        border-bottom-color: var(--neutral-foreground-rest);
-    }
-
-    .step-down-glyph:before {
-        border-top-color: var(--neutral-foreground-rest);
+    .step-up,
+    .step-down {
+        cursor: pointer;
+        display: flex;
+        padding: 4px;
     }
 
-    :host(:hover:not([disabled])) .root {
+    :host(:hover:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-hover);
     }
 
-    :host(:active:not([disabled])) .root {
+    :host(:active:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-active);
     }
 
-    :host(:focus-within:not([disabled])) .root {
+    :host(:focus-within:not([disabled])) .control {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) var(--focus-stroke-outer)
             inset;
     }
 
-    :host(:hover:not([disabled])) .controls,
-    :host(:focus-within:not([disabled])) .controls {
+    :host(:hover:not([disabled])) .step-buttons,
+    :host(:focus-within:not([disabled])) .step-buttons {
         opacity: 1;
     }
 
-    :host([appearance="filled"]) .root {
+    :host([appearance="filled"]) .control {
         background: var(--neutral-fill-rest);
     }
 
-    :host([appearance="filled"]:hover:not([disabled])) .root {
+    :host([appearance="filled"]:hover:not([disabled])) .control {
         background: var(--neutral-fill-hover);
     }
 
     :host([disabled]) .label,
     :host([readonly]) .label,
-    :host([readonly]) .control,
-    :host([disabled]) .control {
+    :host([readonly]) .field,
+    :host([disabled]) .field {
         cursor: not-allowed;
     }
 
@@ -137,7 +135,7 @@ const styles = css`
         opacity: var(--disabled-opacity);
     }
 
-    :host([disabled]) .control {
+    :host([disabled]) .field {
         border-color: var(--neutral-stroke-rest);
     }
 `;
@@ -146,12 +144,8 @@ FASTNumberField.define({
     name: "fast-number-field",
     styles,
     template: numberFieldTemplate({
-        stepDownGlyph: /* html */ html`
-            <span class="step-down-glyph" part="step-down-glyph"></span>
-        `,
-        stepUpGlyph: /* html */ html`
-            <span class="step-up-glyph" part="step-up-glyph"></span>
-        `,
+        stepDownIcon: chevronDownIcon,
+        stepUpIcon: chevronUpIcon,
     }),
     shadowOptions: {
         delegatesFocus: true,
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 c6eb91da9eb..91b5eec9276 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,4 @@
+export * from "../progress/base-progress.js";
 export * from "./progress-ring.js";
 export * from "./progress-ring.options.js";
 export * 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/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,
 });
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 4a1cbe83ff4..e7b94da19d3 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/search/README.md b/packages/web-components/fast-foundation/src/search/README.md
index f2652eb0b05..0367b64f0d7 100644
--- a/packages/web-components/fast-foundation/src/search/README.md
+++ b/packages/web-components/fast-foundation/src/search/README.md
@@ -120,7 +120,7 @@ This component is built with the expectation that focus is delegated to the inpu
 | `sizeChanged`        | protected |                                                   |            | `void` |                |
 | `spellcheckChanged`  | protected |                                                   |            | `void` |                |
 | `validate`           | public    | {@inheritDoc (FormAssociated:interface).validate} |            | `void` |                |
-| `handleClearInput`   | public    | Handles the control's clear value event           |            | `void` |                |
+| `handleClearInput`   | public    | Clears the value                                  |            | `void` |                |
 
 #### Attributes
 
@@ -138,12 +138,12 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### CSS Parts
 
-| Name           | Description                                                     |
-| -------------- | --------------------------------------------------------------- |
-| `label`        | The label                                                       |
-| `root`         | The element wrapping the control, including start and end slots |
-| `control`      | The element representing the input                              |
-| `clear-button` | The button to clear the input                                   |
+| Name           | Description                                                                              |
+| -------------- | ---------------------------------------------------------------------------------------- |
+| `label`        | The label                                                                                |
+| `control`      | The logical control, the element wrapping the input field, including start and end slots |
+| `field`        | The element representing the input field                                                 |
+| `clear-button` | The button to clear the input                                                            |
 
 #### Slots
 
@@ -153,7 +153,7 @@ This component is built with the expectation that focus is delegated to the inpu
 | `end`          | Content which can be provided after the search clear button |
 |                | The default slot for the label                              |
 | `clear-button` | The clear button                                            |
-| `clear-glyph`  | The clear glyph                                             |
+| `clear-icon`   | The clear icon                                              |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/search/search.pw.spec.ts b/packages/web-components/fast-foundation/src/search/search.pw.spec.ts
index fb53413e004..0f6effa4a36 100644
--- a/packages/web-components/fast-foundation/src/search/search.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/search/search.pw.spec.ts
@@ -17,7 +17,7 @@ test.describe("Search", () => {
 
         root = page.locator("#root");
 
-        control = element.locator(".control");
+        control = element.locator(".field");
 
         await page.goto(fixtureURL("search--search"));
     });
@@ -231,9 +231,7 @@ test.describe("Search", () => {
                         node.addEventListener("change", () => resolve(true));
                     })
             ),
-            control.evaluate(node => {
-                node.dispatchEvent(new KeyboardEvent("change"));
-            }),
+            element.type("foo").then(() => control.press("Enter")),
         ]);
 
         expect(wasChanged).toBeTruthy();
diff --git a/packages/web-components/fast-foundation/src/search/search.template.ts b/packages/web-components/fast-foundation/src/search/search.template.ts
index cfe6ae3f517..ef6ad7bf796 100644
--- a/packages/web-components/fast-foundation/src/search/search.template.ts
+++ b/packages/web-components/fast-foundation/src/search/search.template.ts
@@ -1,4 +1,5 @@
 import { ElementViewTemplate, html, ref, slotted } from "@microsoft/fast-element";
+import { staticallyCompose } from "../utilities/template-helpers.js";
 import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
 import { whitespaceFilter } from "../utilities/whitespace-filter.js";
 import type { FASTSearch, SearchOptions } from "./search.js";
@@ -13,7 +14,7 @@ export function searchTemplate<T extends FASTSearch>(
     return html<T>`
         <label
             part="label"
-            for="control"
+            for="field"
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
@@ -26,72 +27,60 @@ export function searchTemplate<T extends FASTSearch>(
                 })}
             ></slot>
         </label>
-        <div class="root" part="root" ${ref("root")}>
+        <div class="control" part="control">
             ${startSlotTemplate(options)}
-            <div class="input-wrapper" part="input-wrapper">
-                <input
-                    class="control"
-                    part="control"
-                    id="control"
-                    @input="${x => x.handleTextInput()}"
-                    @change="${x => x.handleChange()}"
-                    ?autofocus="${x => x.autofocus}"
-                    ?disabled="${x => x.disabled}"
-                    list="${x => x.list}"
-                    maxlength="${x => x.maxlength}"
-                    minlength="${x => x.minlength}"
-                    pattern="${x => x.pattern}"
-                    placeholder="${x => x.placeholder}"
-                    ?readonly="${x => x.readOnly}"
-                    ?required="${x => x.required}"
-                    size="${x => x.size}"
-                    ?spellcheck="${x => x.spellcheck}"
-                    :value="${x => x.value}"
-                    type="search"
-                    aria-atomic="${x => x.ariaAtomic}"
-                    aria-busy="${x => x.ariaBusy}"
-                    aria-controls="${x => x.ariaControls}"
-                    aria-current="${x => x.ariaCurrent}"
-                    aria-describedby="${x => x.ariaDescribedby}"
-                    aria-details="${x => x.ariaDetails}"
-                    aria-disabled="${x => x.ariaDisabled}"
-                    aria-errormessage="${x => x.ariaErrormessage}"
-                    aria-flowto="${x => x.ariaFlowto}"
-                    aria-haspopup="${x => x.ariaHaspopup}"
-                    aria-hidden="${x => x.ariaHidden}"
-                    aria-invalid="${x => x.ariaInvalid}"
-                    aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-                    aria-label="${x => x.ariaLabel}"
-                    aria-labelledby="${x => x.ariaLabelledby}"
-                    aria-live="${x => x.ariaLive}"
-                    aria-owns="${x => x.ariaOwns}"
-                    aria-relevant="${x => x.ariaRelevant}"
-                    aria-roledescription="${x => x.ariaRoledescription}"
-                    ${ref("control")}
-                />
-                <slot name="clear-button">
-                    <button
-                        class="clear-button ${x =>
-                            x.value ? "" : "clear-button__hidden"}"
-                        part="clear-button"
-                        tabindex="-1"
-                        @click=${x => x.handleClearInput()}
-                    >
-                        <slot name="clear-glyph">
-                            <svg
-                                width="9"
-                                height="9"
-                                viewBox="0 0 9 9"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M0.146447 0.146447C0.338683 -0.0478972 0.645911 -0.0270359 0.853553 0.146447L4.5 3.793L8.14645 0.146447C8.34171 -0.0488155 8.65829 -0.0488155 8.85355 0.146447C9.04882 0.341709 9.04882 0.658291 8.85355 0.853553L5.207 4.5L8.85355 8.14645C9.05934 8.35223 9.03129 8.67582 8.85355 8.85355C8.67582 9.03129 8.35409 9.02703 8.14645 8.85355L4.5 5.207L0.853553 8.85355C0.658291 9.04882 0.341709 9.04882 0.146447 8.85355C-0.0488155 8.65829 -0.0488155 8.34171 0.146447 8.14645L3.793 4.5L0.146447 0.853553C-0.0268697 0.680237 -0.0457894 0.34079 0.146447 0.146447Z"
-                                />
-                            </svg>
-                        </slot>
-                    </button>
-                </slot>
-            </div>
+            <input
+                class="field"
+                part="field"
+                id="field"
+                @input="${x => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                pattern="${x => x.pattern}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                ?spellcheck="${x => x.spellcheck}"
+                :value="${x => x.value}"
+                type="search"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref("field")}
+            />
+            <slot name="clear-button">
+                <button
+                    class="clear-button ${x => (x.value ? "" : "clear-button__hidden")}"
+                    part="clear-button"
+                    tabindex="-1"
+                    @click=${x => x.handleClearInput()}
+                >
+                    <slot name="clear-icon">
+                        ${staticallyCompose(options.clearIcon)}
+                    </slot>
+                </button>
+            </slot>
             ${endSlotTemplate(options)}
         </div>
     `;
diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts
index f509c5aa7f7..994b15d58ad 100644
--- a/packages/web-components/fast-foundation/src/search/search.ts
+++ b/packages/web-components/fast-foundation/src/search/search.ts
@@ -7,12 +7,16 @@ import {
 import { ARIAGlobalStatesAndProperties, StartEnd } from "../patterns/index.js";
 import type { StartEndOptions } from "../patterns/start-end.js";
 import { applyMixins } from "../utilities/apply-mixins.js";
+import type { StaticallyComposableHTML } from "../utilities/template-helpers.js";
 import { FormAssociatedSearch } from "./search.form-associated.js";
+
 /**
  * Search configuration options
  * @public
  */
-export type SearchOptions = StartEndOptions<FASTSearch>;
+export type SearchOptions = StartEndOptions<FASTSearch> & {
+    clearIcon?: StaticallyComposableHTML<FASTSearch>;
+};
 
 /**
  * A Search Custom HTML Element.
@@ -22,10 +26,10 @@ export type SearchOptions = StartEndOptions<FASTSearch>;
  * @slot end - Content which can be provided after the search clear button
  * @slot - The default slot for the label
  * @slot clear-button - The clear button
- * @slot clear-glyph - The clear glyph
+ * @slot clear-icon - The clear icon
  * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The element representing the input
+ * @csspart control - The logical control, the element wrapping the input field, including start and end slots
+ * @csspart field - The element representing the input field
  * @csspart clear-button - The button to clear the input
  *
  * @public
@@ -171,16 +175,10 @@ export class FASTSearch extends FormAssociatedSearch {
     public defaultSlottedNodes: Node[];
 
     /**
-     * A reference to the internal close button element
-     * @internal
-     */
-    public root: HTMLDivElement;
-
-    /**
-     * A reference to the internal input element
+     * A reference to the internal field element
      * @internal
      */
-    public control: HTMLInputElement;
+    public field: HTMLInputElement;
 
     /**
      * @internal
@@ -199,24 +197,24 @@ export class FASTSearch extends FormAssociatedSearch {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 
     /**
-     * Handles the internal control's `input` event
+     * Handles the internal input field's `input` event
      * @internal
      */
     public handleTextInput(): void {
-        this.value = this.control.value;
+        this.value = this.field.value;
     }
 
     /**
-     * Handles the control's clear value event
+     * Clears the value
      * @public
      */
     public handleClearInput(): void {
         this.value = "";
-        this.control.focus();
+        this.field.focus();
         this.handleChange();
     }
 
diff --git a/packages/web-components/fast-foundation/src/search/stories/search.register.ts b/packages/web-components/fast-foundation/src/search/stories/search.register.ts
index 69457b68bf1..f729274add8 100644
--- a/packages/web-components/fast-foundation/src/search/stories/search.register.ts
+++ b/packages/web-components/fast-foundation/src/search/stories/search.register.ts
@@ -1,4 +1,5 @@
 import { css } from "@microsoft/fast-element";
+import dismissIcon from "../../../statics/svg/dismiss_12_regular.svg";
 import { FASTSearch } from "../search.js";
 import { searchTemplate } from "../search.template.js";
 
@@ -6,16 +7,15 @@ const styles = css`
     :host([hidden]) {
         display: none;
     }
-    :host {
-        display: inline-block;
-    }
 
     :host {
+        display: inline-block;
         font-family: var(--body-font);
         outline: none;
         user-select: none;
     }
-    .root {
+
+    .control {
         box-sizing: border-box;
         position: relative;
         display: flex;
@@ -27,14 +27,14 @@ const styles = css`
         height: calc(var(--height-number) * 1px);
         align-items: center;
     }
-    .control {
+
+    .field {
         -webkit-appearance: none;
         font: inherit;
         background: transparent;
         border: 0;
         color: inherit;
         height: calc(100% - 4px);
-        width: 100%;
         margin-top: auto;
         margin-bottom: auto;
         border: none;
@@ -42,15 +42,18 @@ const styles = css`
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
     }
-    .control::-webkit-search-cancel-button {
+
+    .field::-webkit-search-cancel-button {
         -webkit-appearance: none;
     }
-    .control:hover,
-    .control:focus-visible,
-    .control:disabled,
-    .control:active {
+
+    .field:hover,
+    .field:focus-visible,
+    .field:disabled,
+    .field:active {
         outline: none;
     }
+
     .clear-button {
         height: calc(100% - 2px);
         opacity: 0;
@@ -67,23 +70,22 @@ const styles = css`
         font-family: var(--body-font);
         padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
     }
+
     .clear-button:hover {
         background: var(--neutral-fill-stealth-hover);
     }
+
     .clear-button:active {
         background: var(--neutral-fill-stealth-active);
     }
+
     :host([appearance="filled"]) .clear-button:hover {
         background: var(--clear-button-hover);
     }
+
     :host([appearance="filled"]) .clear-button:active {
         background: var(--clear-button-active);
     }
-    .input-wrapper {
-        display: flex;
-        position: relative;
-        height: 100%;
-    }
     .label {
         display: block;
         color: var(--neutral-foreground-rest);
@@ -92,63 +94,84 @@ const styles = css`
         line-height: var(--type-ramp-base-line-height);
         margin-bottom: 4px;
     }
+
     .label__hidden {
         display: none;
         visibility: hidden;
     }
+
+    ::slotted([slot="start"]),
+    ::slotted([slot="end"]),
+    .field {
+        align-self: center;
+    }
+
     ::slotted([slot="start"]),
     ::slotted([slot="end"]) {
         display: flex;
         margin-inline: 11px;
     }
-    :host(:hover:not([disabled])) .root {
+
+    :host(:hover:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-hover);
     }
-    :host(:active:not([disabled])) .root {
+
+    :host(:active:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-active);
     }
-    :host(:focus-within:not([disabled])) .root {
+
+    :host(:focus-within:not([disabled])) .control {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 1px var(--focus-stroke-outer) inset;
     }
+
     .clear-button__hidden {
         opacity: 0;
     }
+
     :host(:hover:not([disabled], [readonly])) .clear-button,
     :host(:active:not([disabled], [readonly])) .clear-button,
     :host(:focus-within:not([disabled], [readonly])) .clear-button {
         opacity: 1;
     }
+
     :host(:hover:not([disabled], [readonly])) .clear-button__hidden,
     :host(:active:not([disabled], [readonly])) .clear-button__hidden,
     :host(:focus-within:not([disabled], [readonly])) .clear-button__hidden {
         opacity: 0;
     }
-    :host([appearance="filled"]) .root {
+
+    :host([appearance="filled"]) .control {
         background: var(--fill-color);
     }
-    :host([appearance="filled"]:hover:not([disabled])) .root {
+
+    :host([appearance="filled"]:hover:not([disabled])) .control {
         background: var(--neutral-fill-hover);
     }
+
     :host([disabled]) .label,
     :host([readonly]) .label,
-    :host([readonly]) .control,
-    :host([disabled]) .control {
+    :host([readonly]) .field,
+    :host([disabled]) .field {
         cursor: var(--disabled-cursor);
     }
+
     :host([disabled]) {
         opacity: var(--disabled-opacity);
     }
-    :host([disabled]) .control {
+
+    :host([disabled]) .field {
         border-color: var(--neutral-stroke-rest);
     }
 `;
 
 FASTSearch.define({
     name: "fast-search",
-    template: searchTemplate(),
+    template: searchTemplate({
+        clearIcon: dismissIcon,
+    }),
     shadowOptions: {
         delegatesFocus: true,
     },
diff --git a/packages/web-components/fast-foundation/src/select/README.md b/packages/web-components/fast-foundation/src/select/README.md
index af3efeb7061..99551c4e5ef 100644
--- a/packages/web-components/fast-foundation/src/select/README.md
+++ b/packages/web-components/fast-foundation/src/select/README.md
@@ -186,23 +186,24 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 #### CSS Parts
 
-| Name             | Description                                          |
-| ---------------- | ---------------------------------------------------- |
-| `control`        | The element representing the select invoking element |
-| `selected-value` | The element wrapping the selected value              |
-| `indicator`      | The element wrapping the visual indicator            |
-| `listbox`        | The listbox element                                  |
+| Name              | Description                                          |
+| ----------------- | ---------------------------------------------------- |
+| `button`          | The element representing the select invoking element |
+| `selected-value`  | The element wrapping the selected value              |
+| `open-close-icon` | The element wrapping the visual indicator            |
+| `listbox`         | The listbox element                                  |
 
 #### Slots
 
-| Name               | Description                                                      |
-| ------------------ | ---------------------------------------------------------------- |
-| `start`            | Content which can be provided before the button content          |
-| `end`              | Content which can be provided after the button content           |
-| `button-container` | The element representing the select button                       |
-| `selected-value`   | The selected value                                               |
-| `indicator`        | The visual indicator for the expand/collapse state of the button |
-|                    | The default slot for slotted options                             |
+| Name                | Description                                                      |
+| ------------------- | ---------------------------------------------------------------- |
+| `start`             | Content which can be provided before the button content          |
+| `end`               | Content which can be provided after the button content           |
+| `button-container`  | The container for the button element                             |
+| `selected-value`    | The selected value                                               |
+| `open-close-icon`   | The visual indicator for the expand/collapse state of the button |
+| `listbox-container` | The container for the listbox element                            |
+|                     | The default slot for slotted options                             |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/select/select.template.ts b/packages/web-components/fast-foundation/src/select/select.template.ts
index 0b703b2e22d..5766fea456e 100644
--- a/packages/web-components/fast-foundation/src/select/select.template.ts
+++ b/packages/web-components/fast-foundation/src/select/select.template.ts
@@ -31,44 +31,50 @@ export function selectTemplate<T extends FASTSelect>(
             ${when(
                 x => x.collapsible,
                 html<T>`
-                    <div
-                        class="control"
-                        part="control"
-                        ?disabled="${x => x.disabled}"
-                        ${ref("control")}
-                    >
-                        ${startSlotTemplate(options)}
-                        <slot name="button-container">
+                    <slot name="button-container">
+                        <div
+                            class="button"
+                            part="button"
+                            ?disabled="${x => x.disabled}"
+                            ${ref("button")}
+                        >
+                            ${startSlotTemplate(options)}
                             <div class="selected-value" part="selected-value">
                                 <slot name="selected-value">${x => x.displayValue}</slot>
                             </div>
-                            <div aria-hidden="true" class="indicator" part="indicator">
-                                <slot name="indicator">
-                                    ${staticallyCompose(options.indicator)}
+                            ${endSlotTemplate(options)}
+                            <div
+                                class="open-close-icon"
+                                part="open-close-icon"
+                                aria-hidden="true"
+                            >
+                                <slot name="open-close-icon">
+                                    ${staticallyCompose(options.openCloseIcon)}
                                 </slot>
                             </div>
-                        </slot>
-                        ${endSlotTemplate(options)}
-                    </div>
+                        </div>
+                    </slot>
                 `
             )}
-            <div
-                class="listbox"
-                id="${x => x.listboxId}"
-                part="listbox"
-                role="listbox"
-                ?disabled="${x => x.disabled}"
-                ?hidden="${x => (x.collapsible ? !x.open : false)}"
-                ${ref("listbox")}
-            >
-                <slot
-                    ${slotted({
-                        filter: FASTListbox.slottedOptionFilter,
-                        flatten: true,
-                        property: "slottedOptions",
-                    })}
-                ></slot>
-            </div>
+            <slot name="listbox-container">
+                <div
+                    id="${x => x.listboxId}"
+                    class="listbox"
+                    part="listbox"
+                    role="listbox"
+                    ?disabled="${x => x.disabled}"
+                    ?hidden="${x => (x.collapsible ? !x.open : false)}"
+                    ${ref("listbox")}
+                >
+                    <slot
+                        ${slotted({
+                            filter: FASTListbox.slottedOptionFilter,
+                            flatten: true,
+                            property: "slottedOptions",
+                        })}
+                    ></slot>
+                </div>
+            </slot>
         </template>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/select/select.ts b/packages/web-components/fast-foundation/src/select/select.ts
index f03240c6efd..b30ac331a60 100644
--- a/packages/web-components/fast-foundation/src/select/select.ts
+++ b/packages/web-components/fast-foundation/src/select/select.ts
@@ -24,7 +24,7 @@ import { FormAssociatedSelect } from "./select.form-associated.js";
  * @public
  */
 export type SelectOptions = StartEndOptions<FASTSelect> & {
-    indicator?: StaticallyComposableHTML<FASTSelect>;
+    openCloseIcon?: StaticallyComposableHTML<FASTSelect>;
 };
 
 /**
@@ -33,13 +33,14 @@ export type SelectOptions = StartEndOptions<FASTSelect> & {
  *
  * @slot start - Content which can be provided before the button content
  * @slot end - Content which can be provided after the button content
- * @slot button-container - The element representing the select button
+ * @slot button-container - The container for the button element
  * @slot selected-value - The selected value
- * @slot indicator - The visual indicator for the expand/collapse state of the button
+ * @slot open-close-icon - The visual indicator for the expand/collapse state of the button
+ * @slot listbox-container - The container for the listbox element
  * @slot - The default slot for slotted options
- * @csspart control - The element representing the select invoking element
+ * @csspart button - The element representing the select invoking element
  * @csspart selected-value - The element wrapping the selected value
- * @csspart indicator - The element wrapping the visual indicator
+ * @csspart open-close-icon - The element wrapping the visual indicator
  * @csspart listbox - The listbox element
  * @fires input - Fires a custom 'input' event when the value updates
  * @fires change - Fires a custom 'change' event when the value updates
@@ -115,12 +116,12 @@ export class FASTSelect extends FormAssociatedSelect {
     }
 
     /**
-     * The ref to the internal `.control` element.
+     * The ref to the internal `.button` element.
      *
      * @internal
      */
     @observable
-    public control: HTMLElement;
+    public button: HTMLElement;
 
     /**
      * The value property.
@@ -220,7 +221,7 @@ export class FASTSelect extends FormAssociatedSelect {
         if (this.$fastController.isConnected) {
             this.cleanup = autoUpdate(this, this.listbox, async () => {
                 const { middlewareData, x, y } = await computePosition(
-                    this.control,
+                    this.button,
                     this.listbox,
                     {
                         placement: "bottom",
diff --git a/packages/web-components/fast-foundation/src/select/stories/select.register.ts b/packages/web-components/fast-foundation/src/select/stories/select.register.ts
index 9056d41958e..70c626ce28d 100644
--- a/packages/web-components/fast-foundation/src/select/stories/select.register.ts
+++ b/packages/web-components/fast-foundation/src/select/stories/select.register.ts
@@ -6,14 +6,9 @@ import { selectTemplate } from "../select.template.js";
 const styles = css`
     :host {
         display: inline-flex;
-        --elevation: 14;
-        background: var(--neutral-fill-input-rest);
-        border-radius: calc(var(--control-corner-radius) * 1px);
-        border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
         box-sizing: border-box;
         color: var(--neutral-foreground-rest);
         font-family: var(--body-font);
-        height: calc(var(--height-number) * 1px);
         position: relative;
         user-select: none;
         min-width: 250px;
@@ -21,7 +16,7 @@ const styles = css`
         vertical-align: top;
     }
 
-    :host(:not([aria-haspopup])) {
+    :host(:not([aria-haspopup])) .listbox {
         --elevation: 0;
         border: 0;
         height: auto;
@@ -29,6 +24,7 @@ const styles = css`
     }
 
     .listbox {
+        --elevation: 14;
         background: var(--fill-color);
         border: none;
         border-radius: calc(var(--control-corner-radius) * 1px);
@@ -54,21 +50,28 @@ const styles = css`
         max-height: none;
     }
 
-    .control + .listbox {
+    .button + .listbox {
         --stroke-size: calc(var(--design-unit) * var(--stroke-width) * 2);
         max-height: calc(
             (var(--listbox-max-height) * var(--height-number) + var(--stroke-size)) * 1px
         );
     }
+
     :host(:not([aria-haspopup])) .listbox {
         left: auto;
         position: static;
         z-index: auto;
     }
+
     .listbox[hidden] {
         display: none;
     }
-    .control {
+
+    .button {
+        height: calc(var(--height-number) * 1px);
+        background: var(--neutral-fill-input-rest);
+        border-radius: calc(var(--control-corner-radius) * 1px);
+        border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
         align-items: center;
         box-sizing: border-box;
         cursor: pointer;
@@ -80,18 +83,27 @@ const styles = css`
         padding: 0 calc(var(--design-unit) * 2.25px);
         width: 100%;
     }
-    :host(:not([disabled]):hover) {
+
+    :host(:not([disabled]):hover) .button {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-hover);
     }
+
+    :host(:not([disabled]):active) .button {
+        background: var(--neutral-fill-input-active);
+        border-color: var(--accent-fill-active);
+    }
+
     :host(:focus-visible) {
         border-color: var(--focus-stroke-outer);
     }
+
     :host(:not([size]):not([multiple]):not([open]):focus-visible),
     :host([multiple]:focus-visible),
     :host([size]:focus-visible) {
         box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) var(--focus-stroke-outer);
     }
+
     :host(:not([multiple]):not([size]):focus-visible)
         ::slotted(fast-option[aria-selected="true"]:not([disabled])) {
         box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) inset
@@ -100,36 +112,37 @@ const styles = css`
         background: var(--accent-fill-focus);
         color: var(--foreground-on-accent-focus);
     }
+
     :host([disabled]) {
         cursor: var(--disabled-cursor);
         opacity: var(--disabled-opacity);
     }
-    :host([disabled]) .control {
+
+    :host([disabled]) .button {
         cursor: var(--disabled-cursor);
         user-select: none;
     }
+
     :host([disabled]:hover) {
         background: var(--neutral-fill-stealth-rest);
         color: var(--neutral-foreground-rest);
         fill: currentcolor;
     }
-    :host(:not([disabled])) .control:active {
-        background: var(--neutral-fill-input-active);
-        border-color: var(--accent-fill-active);
-        border-radius: calc(var(--control-corner-radius) * 1px);
-    }
+
     :host([open][position="above"]) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         border-bottom: 0;
         bottom: calc(var(--height-number) * 1px);
     }
+
     :host([open][position="below"]) .listbox {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         border-top: 0;
         top: calc(var(--height-number) * 1px);
     }
+
     .selected-value {
         flex: 1 1 auto;
         font-family: inherit;
@@ -139,14 +152,17 @@ const styles = css`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-    .indicator {
+
+    .open-close-icon {
         flex: 0 0 auto;
         margin-inline-start: 1em;
     }
+
     slot[name="listbox"] {
         display: none;
         width: 100%;
     }
+
     :host([open]) slot[name="listbox"] {
         display: flex;
         position: absolute;
@@ -206,7 +222,7 @@ export class Select extends FASTSelect {
 Select.define({
     name: "fast-select",
     template: selectTemplate({
-        indicator: chevronIcon,
+        openCloseIcon: chevronIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
index facfa9b84c5..bf030caecdb 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
@@ -8,18 +8,21 @@ import type { FASTSliderLabel } from "./slider-label.js";
 export function sliderLabelTemplate<T extends FASTSliderLabel>(): ElementViewTemplate<T> {
     return html<T>`
         <template aria-disabled="${x => x.disabled}">
-            <div ${ref("root")} part="root" class="root" style="${x => x.positionStyle}">
-                <div class="container">
-                    ${when(
-                        x => !x.hideMark,
-                        html`
-                            <div class="mark"></div>
-                        `
-                    )}
-                    <div class="label">
-                        <slot></slot>
-                    </div>
-                </div>
+            <div
+                ${ref("container")}
+                part="container"
+                class="container"
+                style="${x => x.positionStyle}"
+            >
+                ${when(
+                    x => !x.hideMark,
+                    html`
+                        <div class="mark" part="mark"></div>
+                    `
+                )}
+                <span class="content" part="content">
+                    <slot></slot>
+                </span>
             </div>
         </template>
     `;
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
index bc559c03efd..448169c577e 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
@@ -21,7 +21,9 @@ const defaultConfig: SliderConfiguration = {
  * A label element intended to be used with the {@link @microsoft/fast-foundation#(FASTSlider:class)} component.
  *
  * @slot - The default slot for the label content
- * @csspart root - The element wrapping the label mark and text
+ * @csspart container - The element wrapping the label mark and text
+ * @csspart mark - The element wrapping the mark
+ * @csspart content - The element wrapping the label text
  *
  * @public
  */
@@ -35,7 +37,7 @@ export class FASTSliderLabel extends FASTElement {
     /**
      * @internal
      */
-    public root: HTMLDivElement;
+    public container: HTMLDivElement;
 
     /**
      * The position of the label relative to the min and max value of the parent {@link @microsoft/fast-foundation#(FASTSlider:class)}.
diff --git a/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts b/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts
index a598a1c428d..99ddee2d8b9 100644
--- a/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts
@@ -9,26 +9,27 @@ const styles = css`
         color: var(--neutral-foreground-rest);
         fill: currentcolor;
     }
-    .root {
-        position: absolute;
-        display: grid;
-    }
+
     .container {
+        position: absolute;
         display: grid;
         justify-self: center;
     }
-    .label {
+
+    .content {
         justify-self: center;
         align-self: center;
         white-space: nowrap;
         max-width: 30px;
     }
+
     .mark {
         width: calc((var(--design-unit) / 4) * 1px);
         height: calc(var(--height-number) * 0.25 * 1px);
         background: var(--neutral-stroke-rest);
         justify-self: center;
     }
+
     :host([aria-disabled="true"]) {
         opacity: var(--disabled-opacity);
     }
@@ -42,11 +43,13 @@ const horizontalSliderLabelStyles = css`
         height: calc((var(--height-number) / 2 + var(--design-unit)) * 1px);
         width: auto;
     }
+
     .container {
         grid-template-rows: auto auto;
         grid-template-columns: 0;
     }
-    .label {
+
+    .content {
         margin: 2px 0;
     }
 `;
@@ -59,17 +62,20 @@ const verticalSliderLabelStyles = css`
         height: auto;
         width: calc((var(--height-number) / 2 + var(--design-unit)) * 1px);
     }
+
     .container {
         grid-template-columns: auto auto;
         grid-template-rows: 0;
         min-width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
     }
+
     .mark {
         transform: rotate(90deg);
         align-self: center;
     }
-    .label {
+
+    .content {
         margin-left: calc((var(--design-unit) / 2) * 3px);
         align-self: center;
     }
diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
index c59c21a3263..9aead54b424 100644
--- a/packages/web-components/fast-foundation/src/slider/README.md
+++ b/packages/web-components/fast-foundation/src/slider/README.md
@@ -211,12 +211,13 @@ export const mySliderLabel = SliderLabel.compose({
 
 #### CSS Parts
 
-| Name                 | Description                                                     |
-| -------------------- | --------------------------------------------------------------- |
-| `positioning-region` | The region used to position the elements of the slider          |
-| `track-container`    | The region containing the track elements                        |
-| `track-start`        | The element wrapping the track start slot                       |
-| `thumb-container`    | The thumb container element which is programatically positioned |
+| Name                 | Description                                                      |
+| -------------------- | ---------------------------------------------------------------- |
+| `positioning-region` | The region used to position the elements of the slider           |
+| `track`              | The region containing the track elements                         |
+| `track-start`        | The element wrapping the track start slot                        |
+| `thumb-container`    | The thumb container element which is programmatically positioned |
+| `thumb`              | The default thumb element                                        |
 
 #### Slots
 
@@ -265,9 +266,11 @@ export const mySliderLabel = SliderLabel.compose({
 
 #### CSS Parts
 
-| Name   | Description                                  |
-| ------ | -------------------------------------------- |
-| `root` | The element wrapping the label mark and text |
+| Name        | Description                                  |
+| ----------- | -------------------------------------------- |
+| `container` | The element wrapping the label mark and text |
+| `mark`      | The element wrapping the mark                |
+| `content`   | The element wrapping the label text          |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/slider/slider.template.ts b/packages/web-components/fast-foundation/src/slider/slider.template.ts
index ae7654ff7ee..a899167780e 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.template.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.template.ts
@@ -21,10 +21,9 @@ export function sliderTemplate<T extends FASTSlider>(
             aria-disabled="${x => (x.disabled ? true : void 0)}"
             aria-readonly="${x => (x.readOnly ? true : void 0)}"
             aria-orientation="${x => x.orientation}"
-            class="${x => x.orientation}"
         >
             <div part="positioning-region" class="positioning-region">
-                <div ${ref("track")} part="track-container" class="track">
+                <div ${ref("track")} part="track" class="track">
                     <slot name="track"></slot>
                     <div
                         part="track-start"
@@ -36,12 +35,16 @@ export function sliderTemplate<T extends FASTSlider>(
                 </div>
                 <slot></slot>
                 <div
-                    ${ref("thumb")}
+                    ${ref("thumbContainer")}
                     part="thumb-container"
                     class="thumb-container"
                     style="${x => x.position}"
                 >
-                    <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
+                    <slot name="thumb">
+                        ${staticallyCompose(
+                            options.thumb ?? `<div class="thumb" part="thumb"></div>`
+                        )}
+                    </slot>
                 </div>
             </div>
         </template>
diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
index 1bc0b1250a9..67d0a16edbd 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -24,9 +24,10 @@ import { SliderConfiguration, SliderMode } from "./slider.options.js";
  * @slot thumb - The slider thumb
  * @slot - The default slot for labels
  * @csspart positioning-region - The region used to position the elements of the slider
- * @csspart track-container - The region containing the track elements
+ * @csspart track - The region containing the track elements
  * @csspart track-start - The element wrapping the track start slot
- * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @csspart thumb-container - The thumb container element which is programmatically positioned
+ * @csspart thumb - The default thumb element
  * @fires change - Fires a custom 'change' event when the slider value changes
  *
  * @public
@@ -55,7 +56,7 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
     /**
      * @internal
      */
-    public thumb: HTMLDivElement;
+    public thumbContainer: HTMLDivElement;
 
     /**
      * @internal
@@ -381,10 +382,10 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
         const eventAction = `${remove ? "remove" : "add"}EventListener`;
         this[eventAction]("keydown", this.keypressHandler);
         this[eventAction]("mousedown", this.handleMouseDown);
-        this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
+        this.thumbContainer[eventAction]("mousedown", this.handleThumbMouseDown, {
             passive: true,
         });
-        this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
+        this.thumbContainer[eventAction]("touchstart", this.handleThumbMouseDown, {
             passive: true,
         });
         // removes handlers attached by mousedown handlers
diff --git a/packages/web-components/fast-foundation/src/slider/stories/slider.register.ts b/packages/web-components/fast-foundation/src/slider/stories/slider.register.ts
index fa8c85c998f..ecc4cf3e8f6 100644
--- a/packages/web-components/fast-foundation/src/slider/stories/slider.register.ts
+++ b/packages/web-components/fast-foundation/src/slider/stories/slider.register.ts
@@ -1,4 +1,3 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
 import { FASTSlider } from "../slider.js";
 import { sliderTemplate } from "../slider.template.js";
@@ -39,7 +38,7 @@ const styles = css`
         grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
     }
 
-    :host(:focus) .thumb-cursor {
+    :host(:focus-visible) .thumb {
         box-shadow: 0 0 0 2px var(--fill-color), 0 0 0 4px var(--focus-stroke-outer);
     }
 
@@ -51,20 +50,24 @@ const styles = css`
         color: var(--neutral-foreground-rest);
         fill: currentcolor;
     }
-    .thumb-cursor {
+
+    .thumb {
         border: none;
         width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
         background: var(--neutral-foreground-rest);
         border-radius: calc(var(--control-corner-radius) * 1px);
     }
-    .thumb-cursor:hover {
+
+    .thumb:hover {
         background: var(--neutral-foreground-rest);
         border-color: var(--neutral-stroke-hover);
     }
-    .thumb-cursor:active {
+
+    .thumb:active {
         background: var(--neutral-foreground-rest);
     }
+
     .track-start {
         background: var(--accent-foreground-rest);
         position: absolute;
@@ -72,53 +75,64 @@ const styles = css`
         left: 0;
         border-radius: calc(var(--control-corner-radius) * 1px);
     }
+
     .track-start {
         left: 0;
     }
+
     :host([orientation="horizontal"]) .thumb-container {
         transform: translateX(calc(var(--thumb-size) * 0.5px))
             translateY(calc(var(--thumb-translate) * 1px));
     }
+
     :host([orientation="vertical"]) .thumb-container {
         transform: translateX(calc(var(--thumb-translate) * 1px))
             translateY(calc(var(--thumb-size) * -0.5px));
     }
+
     :host([orientation="horizontal"]) {
         touch-action: pan-y;
         min-width: calc(var(--thumb-size) * 1px);
         width: 100%;
     }
+
     :host([orientation="horizontal"]) .track {
         right: calc(var(--track-overhang) * 1px);
         left: calc(var(--track-overhang) * 1px);
         align-self: start;
         height: calc(var(--track-width) * 1px);
     }
+
     :host([orientation="vertical"]) .track {
         top: calc(var(--track-overhang) * 1px);
         bottom: calc(var(--track-overhang) * 1px);
         width: calc(var(--track-width) * 1px);
         height: 100%;
     }
+
     .track {
         background: var(--neutral-stroke-rest);
         position: absolute;
         border-radius: calc(var(--control-corner-radius) * 1px);
     }
+
     :host([orientation="vertical"]) {
         height: calc(var(--fast-slider-height) * 1px);
         min-height: calc(var(--thumb-size) * 1px);
         touch-action: pan-x;
     }
+
     :host([orientation="vertical"]) .track-start {
         height: auto;
         width: 100%;
         bottom: 0;
     }
+
     :host([disabled]),
     :host([readonly]) {
         cursor: var(--disabled-cursor);
     }
+
     :host([disabled]) {
         opacity: var(--disabled-opacity);
     }
@@ -126,10 +140,6 @@ const styles = css`
 
 FASTSlider.define({
     name: "fast-slider",
-    template: sliderTemplate({
-        thumb: /* html */ html`
-            <div class="thumb-cursor"></div>
-        `,
-    }),
+    template: sliderTemplate(),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md
index 209a373c9fa..3dc93f98f9b 100644
--- a/packages/web-components/fast-foundation/src/switch/README.md
+++ b/packages/web-components/fast-foundation/src/switch/README.md
@@ -131,21 +131,18 @@ export const mySwitch = Switch.compose<SwitchOptions>({
 
 #### CSS Parts
 
-| Name                | Description                                                    |
-| ------------------- | -------------------------------------------------------------- |
-| `label`             | The label                                                      |
-| `switch`            | The element representing the switch, which wraps the indicator |
-| `status-message`    | The wrapper for the status messages                            |
-| `checked-message`   | The checked message                                            |
-| `unchecked-message` | The unchecked message                                          |
+| Name      | Description                                                    |
+| --------- | -------------------------------------------------------------- |
+| `label`   | The label                                                      |
+| `control` | The element representing the switch, which wraps the indicator |
+| `thumb`   | The default thumb element                                      |
 
 #### Slots
 
-| Name                | Description                            |
-| ------------------- | -------------------------------------- |
-|                     | The deafult slot for the label         |
-| `checked-message`   | The message when in a checked state    |
-| `unchecked-message` | The message when in an unchecked state |
+| Name    | Description                    |
+| ------- | ------------------------------ |
+|         | The default slot for the label |
+| `thumb` | The thumb inside the control   |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/switch/stories/switch.register.ts b/packages/web-components/fast-foundation/src/switch/stories/switch.register.ts
index fd52ebb7ba8..42e823a2a1c 100644
--- a/packages/web-components/fast-foundation/src/switch/stories/switch.register.ts
+++ b/packages/web-components/fast-foundation/src/switch/stories/switch.register.ts
@@ -1,4 +1,3 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
 import { FASTSwitch } from "../switch.js";
 import { switchTemplate } from "../switch.template.js";
@@ -7,6 +6,7 @@ const styles = css`
     :host([hidden]) {
         display: none;
     }
+
     :host {
         display: inline-flex;
         align-items: center;
@@ -15,16 +15,19 @@ const styles = css`
         margin: calc(var(--design-unit) * 1px) 0;
         user-select: none;
     }
+
     :host([disabled]) {
         opacity: var(--disabled-opacity);
     }
+
     :host([disabled]) .label,
     :host([readonly]) .label,
-    :host([readonly]) .switch,
-    :host([disabled]) .switch {
+    :host([readonly]) .control,
+    :host([disabled]) .control {
         cursor: var(--disabled-cursor);
     }
-    .switch {
+
+    .control {
         position: relative;
         outline: none;
         box-sizing: border-box;
@@ -34,25 +37,24 @@ const styles = css`
         border-radius: calc(var(--control-corner-radius) * 1px);
         border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
     }
-    .switch:hover {
-        background: var(--neutral-fill-input-hover);
-        border-color: var(--neutralStrokeHover);
-        cursor: pointer;
-    }
-    host([disabled]) .switch:hover,
-    host([readonly]) .switch:hover {
+
+    :host(:not([disabled]):hover) .control,
+    :host(:not([readonly]):hover) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--neutral-stroke-hover);
-        cursor: var(--disabled-cursor);
+        cursor: pointer;
     }
-    :host(:not([disabled])) .switch:active {
+
+    :host(:not([disabled]):active) .control {
         background: var(--neutral-fill-input-active);
         border-color: var(--neutral-stroke-active);
     }
-    :host(:focus-visible) .switch {
+
+    :host(:focus-visible) .control {
         box-shadow: 0 0 0 2px var(--fill-color), 0 0 0 4px var(--focusStrokeOuter);
     }
-    .checked-indicator {
+
+    .thumb {
         position: absolute;
         top: 5px;
         bottom: 5px;
@@ -60,6 +62,14 @@ const styles = css`
         border-radius: calc(var(--control-corner-radius) * 1px);
         transition: all 0.2s ease-in-out;
     }
+
+    :host([disabled]) .control,
+    :host([readonly]) .control,
+    :host([disabled]) .status-message,
+    :host([readonly]) .status-message {
+        cursor: var(--disabled-cursor);
+    }
+
     .label {
         color: var(--neutral-foreground-rest);
         margin-inline-end: calc(var(--design-unit) * 2px + 2px);
@@ -67,39 +77,49 @@ const styles = css`
         line-height: var(--type-ramp-base-line-height);
         cursor: pointer;
     }
+
     .label__hidden {
         display: none;
         visibility: hidden;
     }
-    :host([aria-checked="true"]) .checked-indicator {
+
+    :host([aria-checked="true"]) .thumb {
         background: var(--foreground-on-accent-rest);
     }
-    :host([aria-checked="true"]) .switch {
+
+    :host([aria-checked="true"]) .control {
         background: var(--accent-fill-rest);
         border-color: var(--accent-fill-rest);
     }
-    :host([aria-checked="true"]:not([disabled])) .switch:hover {
+
+    :host([aria-checked="true"]:not([disabled]):hover) .control {
         background: var(--accent-fill-hover);
         border-color: var(--accent-fill-hover);
     }
-    :host([aria-checked="true"]:not([disabled])) .switch:hover .checked-indicator {
+
+    :host([aria-checked="true"]:not([disabled]):hover) .control .thumb {
         background: var(--foreground-on-accent-hover);
     }
-    :host([aria-checked="true"]:not([disabled])) .switch:active {
+
+    :host([aria-checked="true"]:not([disabled]):active) .control {
         background: var(--accent-fill-active);
         border-color: var(--accentt-fill-active);
     }
-    :host([aria-checked="true"]:not([disabled])) .switch:active .checked-indicator {
+
+    :host([aria-checked="true"]:not([disabled]):active) .control .thumb {
         background: var(--foreground-on-accent-active);
     }
-    :host([aria-checked="true"]:focus-visible:not([disabled])) .switch {
+
+    :host([aria-checked="true"]:focus-visible:not([disabled])) .control {
         box-shadow: 0 0 0 2px var(--fill-color), 0 0 0 4px var(--focus-stroke-outer);
     }
-    .checked-indicator {
+
+    .thumb {
         left: 5px;
         right: calc(((var(--height-number) / 2) + 1) * 1px);
     }
-    :host([aria-checked="true"]) .checked-indicator {
+
+    :host([aria-checked="true"]) .thumb {
         left: calc(((var(--height-number) / 2) + 1) * 1px);
         right: 5px;
     }
@@ -107,10 +127,6 @@ const styles = css`
 
 FASTSwitch.define({
     name: "fast-switch",
-    template: switchTemplate({
-        switch: /* html */ html`
-            <span class="checked-indicator" part="checked-indicator"></span>
-        `,
-    }),
+    template: switchTemplate(),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/switch/switch.template.ts b/packages/web-components/fast-foundation/src/switch/switch.template.ts
index 1ee39d71f09..24c299b8a27 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.template.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.template.ts
@@ -28,8 +28,12 @@ export function switchTemplate<T extends FASTSwitch>(
             >
                 <slot ${slotted("defaultSlottedNodes")}></slot>
             </label>
-            <div part="switch" class="switch">
-                <slot name="switch">${staticallyCompose(options.switch)}</slot>
+            <div part="control" class="control">
+                <slot name="thumb">
+                    ${staticallyCompose(
+                        options.thumb ?? `<div class="thumb" part="thumb"></div>`
+                    )}
+                </slot>
             </div>
         </template>
     `;
diff --git a/packages/web-components/fast-foundation/src/switch/switch.ts b/packages/web-components/fast-foundation/src/switch/switch.ts
index 565a857cb08..fa971aed6fb 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.ts
@@ -8,21 +8,18 @@ import { FormAssociatedSwitch } from "./switch.form-associated.js";
  * @public
  */
 export type SwitchOptions = {
-    switch?: StaticallyComposableHTML<FASTSwitch>;
+    thumb?: StaticallyComposableHTML<FASTSwitch>;
 };
 
 /**
  * A Switch Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
  *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
+ * @slot - The default slot for the label
+ * @slot thumb - The thumb inside the control
  * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
+ * @csspart control - The element representing the switch, which wraps the indicator
+ * @csspart thumb - The default thumb element
  * @fires change - Emits a custom change event when the checked state changes
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/tab/stories/tab.stories.ts b/packages/web-components/fast-foundation/src/tab/stories/tab.stories.ts
index 6b7ce8d9d1e..96907478992 100644
--- a/packages/web-components/fast-foundation/src/tab/stories/tab.stories.ts
+++ b/packages/web-components/fast-foundation/src/tab/stories/tab.stories.ts
@@ -4,7 +4,9 @@ import { renderComponent } from "../../__test__/helpers.js";
 import type { FASTTab } from "../tab.js";
 
 export const storyTemplate = html<StoryArgs<FASTTab>>`
-    <fast-tab ?disabled="${x => x.disabled}">${x => x.storyContent}</fast-tab>
+    <fast-tab ?disabled="${x => x.disabled}">
+        ${x => x.storyContent}
+    </fast-tab>
 `;
 
 export default {
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 a968d37d1e9..eb565ef3de1 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 4ca4e857224..ba185e1e630 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 a4cbfe16640..2a015338526 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/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md
index 8315ecfa47d..5f4bde21f10 100644
--- a/packages/web-components/fast-foundation/src/text-area/README.md
+++ b/packages/web-components/fast-foundation/src/text-area/README.md
@@ -153,17 +153,19 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### CSS Parts
 
-| Name      | Description                      |
-| --------- | -------------------------------- |
-| `label`   | The label                        |
-| `root`    | The element wrapping the control |
-| `control` | The textarea element             |
+| Name      | Description                                                                              |
+| --------- | ---------------------------------------------------------------------------------------- |
+| `label`   | The label                                                                                |
+| `control` | The logical control, the element wrapping the input field, including start and end slots |
+| `field`   | The textarea element                                                                     |
 
 #### Slots
 
-| Name | Description                    |
-| ---- | ------------------------------ |
-|      | The default slot for the label |
+| Name    | Description                                              |
+| ------- | -------------------------------------------------------- |
+| `start` | Content which can be provided before the text area input |
+| `end`   | Content which can be provided after the text area input  |
+|         | The default slot for the label                           |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/text-area/stories/text-area.register.ts b/packages/web-components/fast-foundation/src/text-area/stories/text-area.register.ts
index 0c8a836a93d..c79bfc6a43f 100644
--- a/packages/web-components/fast-foundation/src/text-area/stories/text-area.register.ts
+++ b/packages/web-components/fast-foundation/src/text-area/stories/text-area.register.ts
@@ -3,6 +3,10 @@ import { FASTTextArea } from "../text-area.js";
 import { textAreaTemplate } from "../text-area.template.js";
 
 const styles = css`
+    :host([hidden]) {
+        display: none;
+    }
+
     :host {
         display: inline-block;
         font-family: var(--body-font);
@@ -13,11 +17,11 @@ const styles = css`
     .control {
         box-sizing: border-box;
         position: relative;
+        display: flex;
         color: var(--neutral-foreground-rest);
         background: var(--neutral-fill-input-rest);
         border-radius: calc(var(--control-corner-radius) * 1px);
         border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
-        height: calc(var(--height-number) * 2px);
         font: inherit;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
@@ -36,10 +40,25 @@ const styles = css`
         border-color: var(--accent-fill-active);
     }
 
-    .control:hover,
-    .control:focus-visible,
-    .control:disabled,
-    .control:active {
+    .field {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        border: 0;
+        color: inherit;
+        height: calc(100% - 4px);
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+        padding: 0 calc(var(--design-unit) * 2px + 1px);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+    }
+
+    .field:hover,
+    .field:focus-visible,
+    .field:disabled,
+    .field:active {
         outline: none;
     }
 
@@ -56,15 +75,15 @@ const styles = css`
         background: var(--neutral-fill-hover);
     }
 
-    :host([resize="both"]) .control {
+    :host([resize="both"]) .field {
         resize: both;
     }
 
-    :host([resize="horizontal"]) .control {
+    :host([resize="horizontal"]) .field {
         resize: horizontal;
     }
 
-    :host([resize="vertical"]) .control {
+    :host([resize="vertical"]) .field {
         resize: vertical;
     }
 
@@ -99,7 +118,7 @@ const styles = css`
         width: initial;
     }
 
-    :host([rows]) .control {
+    :host([rows]) .field {
         height: initial;
     }
 `;
diff --git a/packages/web-components/fast-foundation/src/text-area/stories/text-area.stories.ts b/packages/web-components/fast-foundation/src/text-area/stories/text-area.stories.ts
index 04a5366ef52..58b9c46b161 100644
--- a/packages/web-components/fast-foundation/src/text-area/stories/text-area.stories.ts
+++ b/packages/web-components/fast-foundation/src/text-area/stories/text-area.stories.ts
@@ -98,6 +98,15 @@ export default {
 
 export const TextArea: Story<FASTTextArea> = renderComponent(storyTemplate).bind({});
 
+export const TextAreaWithSlottedStartEnd: Story<FASTTextArea> = TextArea.bind({});
+TextAreaWithSlottedStartEnd.args = {
+    storyContent: html`
+        <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+        Text Area
+        <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
+    `,
+};
+
 export const TextAreaInForm: Story<FASTTextArea> = renderComponent(html`
     <form @submit="${() => false}">
         ${storyTemplate}
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.pw.spec.ts b/packages/web-components/fast-foundation/src/text-area/text-area.pw.spec.ts
index 228f0641f80..7c17cd126a1 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.pw.spec.ts
@@ -17,7 +17,7 @@ test.describe("TextArea", () => {
 
         root = page.locator("#root");
 
-        control = element.locator(".control");
+        control = element.locator(".field");
 
         await page.goto(fixtureURL("text-area--text-area"));
     });
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.template.ts b/packages/web-components/fast-foundation/src/text-area/text-area.template.ts
index 7daed26a765..d4dcaee46eb 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.template.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.template.ts
@@ -1,15 +1,18 @@
 import { ElementViewTemplate, html, ref, slotted } from "@microsoft/fast-element";
-import type { FASTTextArea } from "./text-area.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
+import type { FASTTextArea, TextAreaOptions } from "./text-area.js";
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(FASTTextArea:class)} component.
  * @public
  */
-export function textAreaTemplate<T extends FASTTextArea>(): ElementViewTemplate<T> {
+export function textAreaTemplate<T extends FASTTextArea>(
+    options: TextAreaOptions = {}
+): ElementViewTemplate<T> {
     return html<T>`
         <label
             part="label"
-            for="control"
+            for="field"
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
@@ -17,46 +20,50 @@ export function textAreaTemplate<T extends FASTTextArea>(): ElementViewTemplate<
         >
             <slot ${slotted("defaultSlottedNodes")}></slot>
         </label>
-        <textarea
-            part="control"
-            class="control"
-            id="control"
-            ?autofocus="${x => x.autofocus}"
-            cols="${x => x.cols}"
-            ?disabled="${x => x.disabled}"
-            form="${x => x.form}"
-            list="${x => x.list}"
-            maxlength="${x => x.maxlength}"
-            minlength="${x => x.minlength}"
-            name="${x => x.name}"
-            placeholder="${x => x.placeholder}"
-            ?readonly="${x => x.readOnly}"
-            ?required="${x => x.required}"
-            rows="${x => x.rows}"
-            ?spellcheck="${x => x.spellcheck}"
-            :value="${x => x.value}"
-            aria-atomic="${x => x.ariaAtomic}"
-            aria-busy="${x => x.ariaBusy}"
-            aria-controls="${x => x.ariaControls}"
-            aria-current="${x => x.ariaCurrent}"
-            aria-describedby="${x => x.ariaDescribedby}"
-            aria-details="${x => x.ariaDetails}"
-            aria-disabled="${x => x.ariaDisabled}"
-            aria-errormessage="${x => x.ariaErrormessage}"
-            aria-flowto="${x => x.ariaFlowto}"
-            aria-haspopup="${x => x.ariaHaspopup}"
-            aria-hidden="${x => x.ariaHidden}"
-            aria-invalid="${x => x.ariaInvalid}"
-            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-            aria-label="${x => x.ariaLabel}"
-            aria-labelledby="${x => x.ariaLabelledby}"
-            aria-live="${x => x.ariaLive}"
-            aria-owns="${x => x.ariaOwns}"
-            aria-relevant="${x => x.ariaRelevant}"
-            aria-roledescription="${x => x.ariaRoledescription}"
-            @input="${(x, c) => x.handleTextInput()}"
-            @change="${x => x.handleChange()}"
-            ${ref("control")}
-        ></textarea>
+        <div class="control" part="control">
+            ${startSlotTemplate(options)}
+            <textarea
+                part="field"
+                class="field"
+                id="field"
+                ?autofocus="${x => x.autofocus}"
+                cols="${x => x.cols}"
+                ?disabled="${x => x.disabled}"
+                form="${x => x.form}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                name="${x => x.name}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                rows="${x => x.rows}"
+                ?spellcheck="${x => x.spellcheck}"
+                :value="${x => x.value}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                @input="${(x, c) => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                ${ref("field")}
+            ></textarea>
+            ${endSlotTemplate(options)}
+        </div>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts
index e48f5163966..db2fb23e3f7 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.ts
@@ -1,19 +1,29 @@
 import { attr, nullableNumberConverter, observable } from "@microsoft/fast-element";
 import { DelegatesARIATextbox } from "../text-field/text-field.js";
+import { StartEnd } from "../patterns/start-end.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
 import { applyMixins } from "../utilities/apply-mixins.js";
 import { FormAssociatedTextArea } from "./text-area.form-associated.js";
 import { TextAreaResize } from "./text-area.options.js";
 
 export { TextAreaResize };
 
+/**
+ * Text area configuration options
+ * @public
+ */
+export type TextAreaOptions = StartEndOptions;
+
 /**
  * A Text Area Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
  *
+ * @slot start - Content which can be provided before the text area input
+ * @slot end - Content which can be provided after the text area input
  * @slot - The default slot for the label
  * @csspart label - The label
- * @csspart root - The element wrapping the control
- * @csspart control - The textarea element
+ * @csspart control - The logical control, the element wrapping the input field, including start and end slots
+ * @csspart field - The textarea element
  * @fires change - Emits a custom 'change' event when the textarea emits a change event
  *
  * @public
@@ -46,7 +56,7 @@ export class FASTTextArea extends FormAssociatedTextArea {
      * A reference to the internal textarea element
      * @internal
      */
-    public control: HTMLTextAreaElement;
+    public field: HTMLTextAreaElement;
 
     /**
      * Indicates that this element should get focus after the page finishes loading.
@@ -177,13 +187,13 @@ export class FASTTextArea extends FormAssociatedTextArea {
      * @public
      */
     public select(): void {
-        this.control.select();
+        this.field.select();
 
         /**
          * The select event does not permeate the shadow DOM boundary.
          * This fn effectively proxies the select event,
          * emitting a `select` event whenever the internal
-         * control emits a `select` event
+         * input emits a `select` event
          */
         this.$emit("select");
     }
@@ -192,16 +202,16 @@ export class FASTTextArea extends FormAssociatedTextArea {
      * @internal
      */
     public handleTextInput = (): void => {
-        this.value = this.control.value;
+        this.value = this.field.value;
     };
 
     /**
-     * Change event handler for inner control.
+     * Change event handler for inner input.
      * @remarks
      * "Change" events are not `composable` so they will not
      * permeate the shadow DOM boundary. This fn effectively proxies
      * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
+     * input emits a `change` event
      * @internal
      */
     public handleChange(): void {
@@ -210,7 +220,7 @@ export class FASTTextArea extends FormAssociatedTextArea {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 }
 
@@ -220,5 +230,5 @@ export class FASTTextArea extends FormAssociatedTextArea {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
-export interface FASTTextArea extends DelegatesARIATextbox {}
-applyMixins(FASTTextArea, DelegatesARIATextbox);
+export interface FASTTextArea extends StartEnd, DelegatesARIATextbox {}
+applyMixins(FASTTextArea, StartEnd, DelegatesARIATextbox);
diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md
index 93219fecfe8..863fed8f02b 100644
--- a/packages/web-components/fast-foundation/src/text-field/README.md
+++ b/packages/web-components/fast-foundation/src/text-field/README.md
@@ -106,7 +106,7 @@ This component is built with the expectation that focus is delegated to the inpu
 
 | Name          | Privacy | Type            | Default | Description                                                                                                                                                                                                                 | Inherited From          |
 | ------------- | ------- | --------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
-| `readOnly`    | public  | `boolean`       |         | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.                                 |                         |
+| `readOnly`    | public  | `boolean`       |         | When true, the input will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.                                   |                         |
 | `autofocus`   | public  | `boolean`       |         | Indicates that this element should get focus after the page finishes loading. See [autofocus HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) for more information. |                         |
 | `placeholder` | public  | `string`        |         | Sets the placeholder value of the element, generally used to provide a hint to the user.                                                                                                                                    |                         |
 | `type`        | public  | `TextFieldType` |         | Allows setting a type or mode of text.                                                                                                                                                                                      |                         |
@@ -157,19 +157,19 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### CSS Parts
 
-| Name      | Description                                                     |
-| --------- | --------------------------------------------------------------- |
-| `label`   | The label                                                       |
-| `root`    | The element wrapping the control, including start and end slots |
-| `control` | The text field element                                          |
+| Name      | Description                                                                              |
+| --------- | ---------------------------------------------------------------------------------------- |
+| `label`   | The label                                                                                |
+| `control` | The logical control, the element wrapping the input field, including start and end slots |
+| `field`   | The text field element                                                                   |
 
 #### Slots
 
-| Name    | Description                                                 |
-| ------- | ----------------------------------------------------------- |
-| `start` | Content which can be provided before the number field input |
-| `end`   | Content which can be provided after the number field input  |
-|         | The default slot for the label                              |
+| Name    | Description                                          |
+| ------- | ---------------------------------------------------- |
+| `start` | Content which can be provided before the input field |
+| `end`   | Content which can be provided after the input field  |
+|         | The default slot for the label                       |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/text-field/stories/text-field.register.ts b/packages/web-components/fast-foundation/src/text-field/stories/text-field.register.ts
index 2ca5b3a516e..f9f5c227ea3 100644
--- a/packages/web-components/fast-foundation/src/text-field/stories/text-field.register.ts
+++ b/packages/web-components/fast-foundation/src/text-field/stories/text-field.register.ts
@@ -14,7 +14,7 @@ const styles = css`
         user-select: none;
     }
 
-    .root {
+    .control {
         box-sizing: border-box;
         position: relative;
         display: flex;
@@ -29,7 +29,7 @@ const styles = css`
         align-items: center;
     }
 
-    .control {
+    .field {
         -webkit-appearance: none;
         font: inherit;
         background: transparent;
@@ -44,10 +44,10 @@ const styles = css`
         line-height: var(--type-ramp-base-line-height);
     }
 
-    .control:hover,
-    .control:focus-visible,
-    .control:disabled,
-    .control:active {
+    .field:hover,
+    .field:focus-visible,
+    .field:disabled,
+    .field:active {
         outline: none;
     }
 
@@ -71,27 +71,27 @@ const styles = css`
         margin-inline: 11px;
     }
 
-    :host(:hover:not([disabled])) .root {
+    :host(:hover:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-hover);
     }
 
-    :host(:active:not([disabled])) .root {
+    :host(:active:not([disabled])) .control {
         background: var(--neutral-fill-input-hover);
         border-color: var(--accent-fill-active);
     }
 
-    :host(:focus-within:not([disabled])) .root {
+    :host(:focus-within:not([disabled])) .control {
         border-color: var(--focus-stroke-outer);
         box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) var(--focus-stroke-outer)
             inset;
     }
 
-    :host([appearance="filled"]) .root {
+    :host([appearance="filled"]) .control {
         background: var(--neutral-fill-rest);
     }
 
-    :host([appearance="filled"]:hover:not([disabled])) .root {
+    :host([appearance="filled"]:hover:not([disabled])) .control {
         background: var(--neutral-fill-hover);
     }
 
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.pw.spec.ts b/packages/web-components/fast-foundation/src/text-field/text-field.pw.spec.ts
index 58cc9a0ad4a..e3243c622aa 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.pw.spec.ts
@@ -18,7 +18,7 @@ test.describe("TextField", () => {
 
         root = page.locator("#root");
 
-        control = element.locator(".control");
+        control = element.locator(".field");
 
         label = element.locator(".label");
 
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.template.ts b/packages/web-components/fast-foundation/src/text-field/text-field.template.ts
index 1a0e1742ca5..79ef6833b4d 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.template.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.template.ts
@@ -13,7 +13,7 @@ export function textFieldTemplate<T extends FASTTextField>(
     return html<T>`
         <label
             part="label"
-            for="control"
+            for="field"
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
@@ -26,12 +26,12 @@ export function textFieldTemplate<T extends FASTTextField>(
                 })}
             ></slot>
         </label>
-        <div class="root" part="root">
+        <div class="control" part="control">
             ${startSlotTemplate(options)}
             <input
-                class="control"
-                part="control"
-                id="control"
+                class="field"
+                part="field"
+                id="field"
                 @input="${x => x.handleTextInput()}"
                 @change="${x => x.handleChange()}"
                 ?autofocus="${x => x.autofocus}"
@@ -67,7 +67,7 @@ export function textFieldTemplate<T extends FASTTextField>(
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
+                ${ref("field")}
             />
             ${endSlotTemplate(options)}
         </div>
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts
index ee58b66f882..cfc0ab5d32d 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts
@@ -22,19 +22,19 @@ export type TextFieldOptions = StartEndOptions<FASTTextField>;
  * A Text Field Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
  *
- * @slot start - Content which can be provided before the number field input
- * @slot end - Content which can be provided after the number field input
+ * @slot start - Content which can be provided before the input field
+ * @slot end - Content which can be provided after the input field
  * @slot - The default slot for the label
  * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The text field element
+ * @csspart control - The logical control, the element wrapping the input field, including start and end slots
+ * @csspart field - The text field element
  * @fires change - Fires a custom 'change' event when the value has changed
  *
  * @public
  */
 export class FASTTextField extends FormAssociatedTextField {
     /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * When true, the input will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
      * @public
      * @remarks
      * HTML Attribute: readonly
@@ -188,10 +188,10 @@ export class FASTTextField extends FormAssociatedTextField {
     public defaultSlottedNodes: Node[];
 
     /**
-     * A reference to the internal input element
+     * A reference to the internal input field element
      * @internal
      */
-    public control: HTMLInputElement;
+    public field: HTMLInputElement;
 
     /**
      * @internal
@@ -215,32 +215,32 @@ export class FASTTextField extends FormAssociatedTextField {
      * @public
      */
     public select(): void {
-        this.control.select();
+        this.field.select();
 
         /**
          * The select event does not permeate the shadow DOM boundary.
          * This fn effectively proxies the select event,
          * emitting a `select` event whenever the internal
-         * control emits a `select` event
+         * input emits a `select` event
          */
         this.$emit("select");
     }
 
     /**
-     * Handles the internal control's `input` event
+     * Handles the internal input field's `input` event
      * @internal
      */
     public handleTextInput(): void {
-        this.value = this.control.value;
+        this.value = this.field.value;
     }
 
     /**
-     * Change event handler for inner control.
+     * Change event handler for inner input.
      * @remarks
      * "Change" events are not `composable` so they will not
      * permeate the shadow DOM boundary. This fn effectively proxies
      * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
+     * input emits a `change` event
      * @internal
      */
     public handleChange(): void {
@@ -249,7 +249,7 @@ export class FASTTextField extends FormAssociatedTextField {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 }
 
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..2795a3e48cb 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"]) .toolbar {
         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 bb391f43864..579c9b9cc8a 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 dfc4654b61b..8ca804e0056 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/src/tooltip/stories/tooltip.register.ts b/packages/web-components/fast-foundation/src/tooltip/stories/tooltip.register.ts
index 7e63cb8d3b4..7cfe5f32e7a 100644
--- a/packages/web-components/fast-foundation/src/tooltip/stories/tooltip.register.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/stories/tooltip.register.ts
@@ -7,8 +7,8 @@ const styles = css`
         box-sizing: border-box;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
         border-radius: calc(var(--control-corner-radius) * 1px);
-        border: calc(var(--stroke-width) * 1px) solid var(--focus-stroke-outer);
-        background: var(--fill-color);
+        border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-outer);
+        background: var(--neutral-fill-rest);
         color: var(--neutral-foreground-rest);
         padding: 4px 12px;
         height: fit-content;
diff --git a/packages/web-components/fast-foundation/src/tree-item/README.md b/packages/web-components/fast-foundation/src/tree-item/README.md
index de01b815fd2..1df56b98fb3 100644
--- a/packages/web-components/fast-foundation/src/tree-item/README.md
+++ b/packages/web-components/fast-foundation/src/tree-item/README.md
@@ -84,20 +84,20 @@ export class FASTTreeItem extends TreeItem {}
 
 | Name                     | Description                                                                          |
 | ------------------------ | ------------------------------------------------------------------------------------ |
-| `positioning-region`     | The element used to position the tree item content with exception of any child nodes |
-| `content-region`         | The element containing the expand/collapse, start, and end slots                     |
+| `control`                | The element used to position the tree item content with exception of any child nodes |
+| `content`                | The element containing the expand/collapse, start, and end slots                     |
 | `items`                  | The element wrapping any child items                                                 |
 | `expand-collapse-button` | The expand/collapse button                                                           |
 
 #### Slots
 
-| Name                     | Description                                                                 |
-| ------------------------ | --------------------------------------------------------------------------- |
-| `start`                  | Content which can be provided before the tree item content                  |
-| `end`                    | Content which can be provided after the tree item content                   |
-|                          | The default slot for tree item text content                                 |
-| `item`                   | The slot for tree items (fast tree items manage this assignment themselves) |
-| `expand-collapse-button` | The expand/collapse button                                                  |
+| Name                   | Description                                                                 |
+| ---------------------- | --------------------------------------------------------------------------- |
+| `start`                | Content which can be provided before the tree item content                  |
+| `end`                  | Content which can be provided after the tree item content                   |
+|                        | The default slot for tree item text content                                 |
+| `item`                 | The slot for tree items (fast tree items manage this assignment themselves) |
+| `expand-collapse-icon` | The expand/collapse button icon                                             |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.register.ts b/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.register.ts
index 6338db73e16..e6b1c437431 100644
--- a/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.register.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.register.ts
@@ -1,5 +1,5 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
+import chevronRightIcon from "../../../statics/svg/chevron_right_12_regular.svg";
 import { FASTTreeItem } from "../tree-item.js";
 import { treeItemTemplate } from "../tree-item.template.js";
 
@@ -7,80 +7,72 @@ const styles = css`
     :host([hidden]) {
         display: none;
     }
+
     :host {
         display: block;
-    }
-    :host {
         contain: content;
         position: relative;
         outline: none;
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-stealth-rest);
         cursor: pointer;
         font-family: var(--body-font);
         --expand-collapse-button-size: calc(
             (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
         );
-        --tree-item-nested-width: 0;
     }
 
-    :host(:focus) > .positioning-region {
+    :host(:focus) .control {
         outline: none;
     }
 
-    :host(:focus) .content-region {
-        outline: none;
-    }
-
-    :host(:focus-visible) .positioning-region {
+    :host(:focus-visible) .control {
         border: var(--focus-stroke-outer) calc(var(--stroke-width) * 1px) solid;
-        border-radius: calc(var(--control-corner-radius) * 1px);
         color: var(--neutral-foreground-rest);
     }
 
-    .positioning-region {
+    .control {
         display: flex;
         position: relative;
+        align-items: center;
+        white-space: nowrap;
         box-sizing: border-box;
+        color: var(--neutral-foreground-rest);
+        background: var(--neutral-fill-stealth-rest);
+        border-radius: calc(var(--control-corner-radius) * 1px);
         border: transparent calc(var(--stroke-width) * 1px) solid;
         height: calc(
             ((var(--base-height-multiplier) + var(--density)) * var(--design-unit) + 1) *
                 1px
         );
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        font-weight: 400;
     }
 
-    .positioning-region::before {
-        content: "";
-        display: block;
-        width: var(--tree-item-nested-width);
-        flex-shrink: 0;
-    }
-
-    .positioning-region:hover {
+    .control:hover {
         background: var(--neutral-fill-stealth-hover);
     }
 
-    .positioning-region:active {
+    .control:active {
         background: var(--neutral-fill-stealth-active);
     }
 
-    .content-region {
-        display: inline-flex;
-        align-items: center;
-        white-space: nowrap;
-        width: 100%;
-        height: calc(
-            (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
+    .control {
+        padding-inline-start: 10px;
+    }
+
+    :host([nested]) .control {
+        padding-inline-start: calc(
+            10px + var(--expand-collapse-button-size) + var(--tree-item-nested-width, 0px)
         );
-        margin-inline-start: calc(var(--design-unit) * 2px + 8px);
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
-        font-weight: 400;
     }
 
     .items {
         display: none;
-        font-size: calc(1em + (var(--design-unit) + 16) * 1px);
+        --tree-item-nested-width-slotted: calc(16px + var(--tree-item-nested-width, 0px));
+    }
+
+    ::slotted(fast-tree-item) {
+        --tree-item-nested-width: var(--tree-item-nested-width-slotted, 0px);
     }
 
     .expand-collapse-button {
@@ -106,15 +98,16 @@ const styles = css`
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        margin-left: 6px;
-        margin-right: 6px;
+        margin-inline-end: 6px;
+        position: absolute;
+        transform: translateX(calc(-100% - 6px));
     }
 
-    .expand-collapse-glyph {
-        width: 16px;
-        height: 16px;
+    slot[name="expand-collapse-icon"] *,
+    ::slotted([slot="expand-collapse-icon"]) {
         transition: transform 0.1s linear;
-
+        transform-origin: center;
+        transform: rotate(0deg);
         pointer-events: none;
         fill: currentcolor;
     }
@@ -136,26 +129,16 @@ const styles = css`
         display: block;
     }
 
-    :host([disabled]) .content-region {
+    :host([disabled]) .control {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
     }
 
-    :host([nested]) .content-region {
-        position: relative;
-        margin-inline-start: var(--expand-collapse-button-size);
-    }
-
-    :host([nested]) .expand-collapse-button {
-        position: absolute;
-        right: 100%;
-    }
-
     :host([nested]) .expand-collapse-button:hover {
         background: var(--tree-item-expand-collapse-hover);
     }
 
-    :host([selected]) .positioning-region {
+    :host([selected]) .control {
         background: var(--neutral-fill-rest);
     }
 
@@ -174,23 +157,12 @@ const styles = css`
         height: calc(((var(--base-height-multiplier)) * var(--design-unit) / 2) * 1px);
     }
 
-    ::slotted(fast-tree-item) {
-        --tree-item-nested-width: 1em;
-        --expand-collapse-button-nested-width: calc(
-            (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * -1px
-        );
-    }
-
-    .expand-collapse-glyph {
-        transform: rotate(0deg);
-    }
-    :host([nested]) .expand-collapse-button {
-        right: 100%;
-    }
     :host([selected])::after {
         left: calc(var(--focus-stroke-width) * 1px);
     }
-    :host([aria-expanded="true"]) > .positioning-region .expand-collapse-glyph {
+
+    :host([expanded]) slot[name="expand-collapse-icon"] *,
+    :host([expanded]) ::slotted([slot="expand-collapse-icon"]) {
         transform: rotate(45deg);
     }
 `;
@@ -199,16 +171,6 @@ FASTTreeItem.define({
     name: "fast-tree-item",
     styles,
     template: treeItemTemplate({
-        expandCollapseGlyph: /* html */ html`
-            <svg
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-                class="expand-collapse-glyph"
-            >
-                <path
-                    d="M5 12.3a1 1 0 0 0 1.6.8L11 8.8a1.5 1.5 0 0 0 0-2.3L6.6 2.2A1 1 0 0 0 5 3v9.3Z"
-                />
-            </svg>
-        `,
+        expandCollapseIcon: chevronRightIcon,
     }),
 });
diff --git a/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.stories.ts b/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.stories.ts
index 8b1b53018d9..079c6b3fb93 100644
--- a/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.stories.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/stories/tree-item.stories.ts
@@ -1,4 +1,4 @@
-import { html, repeat } from "@microsoft/fast-element";
+import { html } from "@microsoft/fast-element";
 import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
 import { renderComponent } from "../../__test__/helpers.js";
 import type { FASTTreeItem } from "../tree-item.js";
@@ -48,10 +48,8 @@ TreeItemWithSlottedStartEnd.args = {
 export const TreeItemWithNestedItems: Story<FASTTreeItem> = TreeItem.bind({});
 TreeItemWithNestedItems.args = {
     storyContent: html`
-        Tree Item ${repeat(x => x.storyItems, storyTemplate)}
+        <svg slot="start" width="20" height="20"><use href="#test-icon" /></svg>
+        Tree Item
+        <svg slot="end" width="20" height="20"><use href="#test-icon-2" /></svg>
     `,
-    storyItems: [
-        { storyContent: "Nested Tree Item" },
-        { storyContent: "Nested Tree Item" },
-    ],
 };
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.pw.spec.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.pw.spec.ts
index 2ef0c2c4030..8c7595fa1d6 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.pw.spec.ts
@@ -230,6 +230,8 @@ test.describe("TreeItem", () => {
                     <fast-tree-item>tree item</fast-tree-item>
                 </fast-tree-item>
             `;
+
+            return new Promise(requestAnimationFrame);
         });
 
         await expect(element.first().locator(".items")).toHaveAttribute("role", "group");
@@ -252,6 +254,7 @@ test.describe("TreeItem", () => {
             await root.evaluate(node => {
                 node.innerHTML = /* html */ `
                     <fast-tree-item>
+                        tree item
                         <fast-tree-item>tree item</fast-tree-item>
                         <fast-tree-item>tree item</fast-tree-item>
                     </fast-tree-item>
@@ -260,7 +263,7 @@ test.describe("TreeItem", () => {
 
             const firstElement = element.first();
 
-            const expandCollapseButton = firstElement.locator(".expand-collapse-button");
+            // const expandCollapseButton = firstElement.locator(".expand-collapse-button");
 
             const [wasClicked] = await Promise.all([
                 firstElement.evaluate(node => {
@@ -270,11 +273,15 @@ test.describe("TreeItem", () => {
                         });
                     });
                 }),
-                firstElement.elementHandle().then(handle =>
-                    handle?.waitForElementState("stable").then(() => {
-                        expandCollapseButton.first().click();
-                    })
-                ),
+                firstElement.evaluate((node: FASTTreeItem) => {
+                    node.expanded = true;
+                }),
+                // FIXME: Playwright isn't triggering the click event, possibly because the button is 0 x 0 size.
+                // firstElement.elementHandle().then(handle =>
+                //     handle?.waitForElementState("stable").then(() => {
+                //         expandCollapseButton.first().click();
+                //     })
+                // ),
             ]);
 
             expect(wasClicked).toBe(true);
@@ -285,6 +292,8 @@ test.describe("TreeItem", () => {
                 node.innerHTML = /* html */ `
                     <fast-tree-item>tree item</fast-tree-item>
                 `;
+
+                return new Promise(requestAnimationFrame);
             });
 
             const [wasChanged] = await Promise.all([
@@ -295,8 +304,9 @@ test.describe("TreeItem", () => {
                         });
                     });
                 }),
-                element.evaluate<void, FASTTreeItem>(node => {
+                element.evaluate((node: FASTTreeItem) => {
                     node.selected = true;
+                    return new Promise(requestAnimationFrame);
                 }),
             ]);
 
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.template.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.template.ts
index 0de2605ddb1..d0e49b33eb6 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.template.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.template.ts
@@ -27,31 +27,29 @@ export function treeItemTemplate<T extends FASTTreeItem>(
                 filter: elements(),
             })}
         >
-            <div class="positioning-region" part="positioning-region">
-                <div class="content-region" part="content-region">
-                    ${when(
-                        x => x.childItems && x.childItemLength > 0,
-                        html<T>`
-                            <div
-                                aria-hidden="true"
-                                class="expand-collapse-button"
-                                part="expand-collapse-button"
-                                @click="${(x, c) =>
-                                    x.handleExpandCollapseButtonClick(
-                                        c.event as MouseEvent
-                                    )}"
-                                ${ref("expandCollapseButton")}
-                            >
-                                <slot name="expand-collapse-glyph">
-                                    ${staticallyCompose(options.expandCollapseGlyph)}
-                                </slot>
-                            </div>
-                        `
-                    )}
-                    ${startSlotTemplate(options)}
+            <div class="control" part="control">
+                ${when(
+                    x => x.childItems && x.childItemLength > 0,
+                    html<T>`
+                        <div
+                            aria-hidden="true"
+                            class="expand-collapse-button"
+                            part="expand-collapse-button"
+                            @click="${(x, c) =>
+                                x.handleExpandCollapseButtonClick(c.event as MouseEvent)}"
+                            ${ref("expandCollapseButton")}
+                        >
+                            <slot name="expand-collapse-icon">
+                                ${staticallyCompose(options.expandCollapseIcon)}
+                            </slot>
+                        </div>
+                    `
+                )}
+                ${startSlotTemplate(options)}
+                <span class="content" part="content">
                     <slot></slot>
-                    ${endSlotTemplate(options)}
-                </div>
+                </span>
+                ${endSlotTemplate(options)}
             </div>
             ${when(
                 x => x.childItems && x.childItemLength > 0 && x.expanded,
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
index d198a6de8aa..61a453d0d49 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
@@ -20,7 +20,7 @@ export function isTreeItemElement(el: Element): el is HTMLElement {
  * @public
  */
 export type TreeItemOptions = StartEndOptions<FASTTreeItem> & {
-    expandCollapseGlyph?: StaticallyComposableHTML<FASTTreeItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTTreeItem>;
 };
 
 /**
@@ -30,9 +30,9 @@ export type TreeItemOptions = StartEndOptions<FASTTreeItem> & {
  * @slot end - Content which can be provided after the tree item content
  * @slot - The default slot for tree item text content
  * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
- * @slot expand-collapse-button - The expand/collapse button
- * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
- * @csspart content-region - The element containing the expand/collapse, start, and end slots
+ * @slot expand-collapse-icon - The expand/collapse button icon
+ * @csspart control - The element used to position the tree item content with exception of any child nodes
+ * @csspart content - The element containing the expand/collapse, start, and end slots
  * @csspart items - The element wrapping any child items
  * @csspart expand-collapse-button - The expand/collapse button
  * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
diff --git a/packages/web-components/fast-foundation/statics/svg/checkmark_16_regular.svg b/packages/web-components/fast-foundation/statics/svg/checkmark_16_regular.svg
new file mode 100644
index 00000000000..9e1b2e329a1
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/checkmark_16_regular.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.6.6 0 0 1-.84-.02L2.4 9.1a.5.5 0 0 1 .72-.7l2.4 2.44 7.65-7.2a.5.5 0 0 1 .7.02Z"/></svg>
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_left_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_left_12_regular.svg
new file mode 100644
index 00000000000..08317f48da8
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/chevron_left_12_regular.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M7.35 2.15c.2.2.2.5 0 .7L4.21 6l3.14 3.15a.5.5 0 1 1-.7.7l-3.5-3.5a.5.5 0 0 1 0-.7l3.5-3.5c.2-.2.5-.2.7 0Z"/></svg>
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg
new file mode 100644
index 00000000000..abc255fcb0a
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/chevron_right_12_regular.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"/></svg>
\ No newline at end of file
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
diff --git a/packages/web-components/fast-foundation/statics/svg/dismiss_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/dismiss_12_regular.svg
new file mode 100644
index 00000000000..dfd7864ab7c
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/dismiss_12_regular.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"/></svg>
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/statics/svg/subtract_16_regular.svg b/packages/web-components/fast-foundation/statics/svg/subtract_16_regular.svg
new file mode 100644
index 00000000000..a73bc22ffe6
--- /dev/null
+++ b/packages/web-components/fast-foundation/statics/svg/subtract_16_regular.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="7.5" width="10" height="1" rx=".5"/></svg>
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/src/dom-shim.spec.ts b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
index f5c00f1507f..719d888a3a6 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.spec.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
@@ -42,6 +42,7 @@ const pickerListItem = deriveName(Foundation.FASTPickerListItem);
 const pickerMenu = deriveName(Foundation.FASTPickerMenu);
 const pickerMenuOption = deriveName(Foundation.FASTPickerMenuOption);
 const progressRing = deriveName(Foundation.FASTProgressRing);
+const flipper = deriveName(Foundation.FASTFlipper);
 
 const componentsAndTemplates: [typeof FASTElement, ElementViewTemplate][] = [
     [Foundation.FASTAccordion, Foundation.accordionTemplate()],
@@ -72,7 +73,9 @@ const componentsAndTemplates: [typeof FASTElement, ElementViewTemplate][] = [
     [Foundation.FASTDisclosure, Foundation.disclosureTemplate()],
     [Foundation.FASTDivider, Foundation.dividerTemplate()],
     [Foundation.FASTFlipper, Foundation.flipperTemplate()],
-    [Foundation.FASTHorizontalScroll, Foundation.horizontalScrollTemplate()],
+    [Foundation.FASTHorizontalScroll, Foundation.horizontalScrollTemplate({
+        flipper
+    })],
     [Foundation.FASTListbox as any as typeof FASTElement, Foundation.listboxTemplate()],
     [Foundation.FASTListboxOption, Foundation.listboxOptionTemplate()],
     [Foundation.FASTMenu, Foundation.menuTemplate()],