diff --git a/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json b/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json
new file mode 100644
index 0000000000000..bc155300dd105
--- /dev/null
+++ b/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "add directional stylesheet, css partials, and default slotted content for vNext components",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 7368498d9d1a4..17caa376ca06e 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -10,6 +10,7 @@ import { Anchor as Anchor_2 } from '@microsoft/fast-foundation';
 import { AnchoredRegion } from '@microsoft/fast-foundation';
 import { Badge as Badge_2 } from '@microsoft/fast-foundation';
 import { BaseProgress } from '@microsoft/fast-foundation';
+import { Behavior } from '@microsoft/fast-element';
 import { Breadcrumb } from '@microsoft/fast-foundation';
 import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { Button as Button_2 } from '@microsoft/fast-foundation';
@@ -17,6 +18,7 @@ import { Checkbox } from '@microsoft/fast-foundation';
 import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
 import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
+import { CSSDirective } from '@microsoft/fast-element';
 import { DataGrid } from '@microsoft/fast-foundation';
 import { DataGridCell } from '@microsoft/fast-foundation';
 import { DataGridRow } from '@microsoft/fast-foundation';
@@ -25,6 +27,7 @@ import { Dialog } from '@microsoft/fast-foundation';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { Divider } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
 import { Flipper } from '@microsoft/fast-foundation';
 import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
 import { Listbox } from '@microsoft/fast-foundation';
@@ -463,6 +466,15 @@ export const dialogStyles: (context: any, definition: any) => import("@microsoft
 // @internal (undocumented)
 export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";
 
+// @public
+export class DirectionalStyleSheetBehavior implements Behavior {
+    constructor(ltr: ElementStyles | null, rtl: ElementStyles | null);
+    // @internal (undocumented)
+    bind(source: FASTElement & HTMLElement): void;
+    // @internal (undocumented)
+    unbind(source: FASTElement & HTMLElement): void;
+}
+
 // @public
 export const dividerStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 
@@ -489,15 +501,7 @@ export const fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foun
 }, typeof Accordion>;
 
 // @public
-export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<AccordionItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<AccordionItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof AccordionItem>;
+export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof AccordionItem>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal
 //
@@ -554,21 +558,7 @@ export const fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-fou
 }, typeof Breadcrumb>;
 
 // @public
-export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<BreadcrumbItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<BreadcrumbItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}, typeof BreadcrumbItem>;
+export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof BreadcrumbItem>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal
 //
@@ -599,28 +589,12 @@ export class FluentCard extends FluentDesignSystemProvider {
 }
 
 // @public
-export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Checkbox, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Checkbox, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Checkbox>;
+export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Checkbox>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentCombobox" is marked as @public, but its signature references "Combobox" which is marked as @internal
 //
 // @public
-export const fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Combobox_2, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Combobox_2, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Combobox>;
+export const fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Combobox>;
 
 // @public
 export const fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -837,15 +811,7 @@ export const fluentDivider: (overrideDefinition?: import("@microsoft/fast-founda
 }, typeof Divider>;
 
 // @public
-export const fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Flipper, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Flipper, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Flipper>;
+export const fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Flipper>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentHorizontalScroll" is marked as @public, but its signature references "HorizontalScroll" which is marked as @internal
 //
@@ -883,34 +849,12 @@ export const fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundatio
 }, typeof Menu>;
 
 // @public
-export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<MenuItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<MenuItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof MenuItem>;
+export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof MenuItem>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "fluentNumberField" is marked as @public, but its signature references "NumberField" which is marked as @internal
 //
 // @public
-export const fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<NumberField_2, any>;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<NumberField_2, any>;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}, typeof NumberField>;
+export const fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof NumberField>;
 
 // @public
 export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -924,15 +868,7 @@ export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundat
 }, typeof ListboxOption>;
 
 // @public
-export const fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, defintion: any) => import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, defintion: any) => import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof BaseProgress>;
+export const fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof BaseProgress>;
 
 // @public
 export const fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -946,15 +882,7 @@ export const fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-f
 }, typeof BaseProgress>;
 
 // @public
-export const fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Radio, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Radio, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Radio>;
+export const fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Radio>;
 
 // @public
 export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -970,15 +898,7 @@ export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-fou
 // Warning: (ae-incompatible-release-tags) The symbol "fluentSelect" is marked as @public, but its signature references "Select" which is marked as @internal
 //
 // @public
-export const fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Select_2, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Select_2, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Select>;
+export const fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Select>;
 
 // @public
 export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -992,15 +912,7 @@ export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-found
 }, typeof Skeleton>;
 
 // @public
-export const fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Slider, any>;
-    styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Slider, any>;
-    styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Slider>;
+export const fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Slider>;
 
 // @public
 export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -1014,15 +926,7 @@ export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-fo
 }, typeof SliderLabel>;
 
 // @public
-export const fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Switch, any>;
-    styles: (context: any, defintiion: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<Switch, any>;
-    styles: (context: any, defintiion: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof Switch>;
+export const fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Switch>;
 
 // @public
 export const fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -1109,15 +1013,7 @@ export const fluentTooltip: (overrideDefinition?: import("@microsoft/fast-founda
 }, typeof Tooltip>;
 
 // @public
-export const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-}, typeof TreeItem>;
+export const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeItem>;
 
 // @public
 export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
@@ -1130,8 +1026,10 @@ export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-found
     styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
 }, typeof TreeView>;
 
-// @public
-export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)";
+// Warning: (ae-forgotten-export) The symbol "HeightNumber" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const heightNumber: HeightNumber;
 
 // Warning: (ae-internal-missing-underscore) The name "HorizontalScroll" should be prefixed with an underscore because the declaration is marked as @internal
 //
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index cc343009601cd..c2aebdab89815 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -98,8 +98,8 @@
   },
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
-    "@microsoft/fast-element": "^1.0.0",
-    "@microsoft/fast-foundation": "2.0.0-beta.0",
+    "@microsoft/fast-element": "^1.4.0",
+    "@microsoft/fast-foundation": "2.0.0-1",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }
diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts
index bb5603f55778c..59a8bf8251155 100644
--- a/packages/web-components/src/accordion/accordion-item/index.ts
+++ b/packages/web-components/src/accordion/accordion-item/index.ts
@@ -1,4 +1,4 @@
-import { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation';
+import { AccordionItem, AccordionItemOptions, accordionItemTemplate as template } from '@microsoft/fast-foundation';
 import { accordionItemStyles as styles } from './accordion-item.styles';
 
 /**
@@ -10,10 +10,38 @@ import { accordionItemStyles as styles } from './accordion-item.styles';
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-export const fluentAccordionItem = AccordionItem.compose({
+export const fluentAccordionItem = AccordionItem.compose<AccordionItemOptions>({
   baseName: 'accordion-item',
   template,
   styles,
+  collapsedIcon: `
+    <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M16.22 3H3.78a.78.78 0 00-.78.78v12.44c0 .43.35.78.78.78h12.44c.43 0 .78-.35.78-.78V3.78a.78.78 0 00-.78-.78zM3.78 2h12.44C17.2 2 18 2.8 18 3.78v12.44c0 .98-.8 1.78-1.78 1.78H3.78C2.8 18 2 17.2 2 16.22V3.78C2 2.8 2.8 2 3.78 2zM11 9h3v2h-3v3H9v-3H6V9h3V6h2v3z"
+        />
+    </svg>
+  `,
+  expandedIcon: `
+    <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.78 3h12.44c.43 0 .78.35.78.78v12.44c0 .43-.35.78-.78.78H3.78a.78.78 0 01-.78-.78V3.78c0-.43.35-.78.78-.78zm12.44-1H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.78-.8 1.78-1.78V3.78C18 2.8 17.2 2 16.22 2zM14 9H6v2h8V9z"
+        />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html b/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html
index a9b88458b0f97..c35b9d782ccb3 100644
--- a/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html
+++ b/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html
@@ -8,21 +8,11 @@ <h4>Default</h4>
 <h4>Default with custom separator</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </svg>
 </fluent-breadcrumb-item>
 
 <h4>With start</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </svg>
   <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
@@ -33,11 +23,6 @@ <h4>With start</h4>
 <h4>With end</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </svg>
   <svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
diff --git a/packages/web-components/src/breadcrumb-item/index.ts b/packages/web-components/src/breadcrumb-item/index.ts
index 0b4bac492086d..422576629a3a5 100644
--- a/packages/web-components/src/breadcrumb-item/index.ts
+++ b/packages/web-components/src/breadcrumb-item/index.ts
@@ -1,4 +1,4 @@
-import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
+import { BreadcrumbItem, BreadcrumbItemOptions, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
 import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
 
 /**
@@ -10,13 +10,20 @@ import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
  * @remarks
  * HTML Element: \<fluent-breadcrumb-item\>
  */
-export const fluentBreadcrumbItem = BreadcrumbItem.compose({
+export const fluentBreadcrumbItem = BreadcrumbItem.compose<BreadcrumbItemOptions>({
   baseName: 'breadcrumb-item',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
+  separator: `
+    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
+      <path
+        d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
+      />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
index e854aa6a594fa..58c267f879385 100644
--- a/packages/web-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -18,6 +18,7 @@ import {
   neutralOutlineActive,
   neutralFocus,
   disabledOpacity,
+  fillColor,
 } from '../design-tokens';
 
 export const checkboxStyles = (context, definition) =>
@@ -73,7 +74,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     .indeterminate-indicator {
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc((${cornerRadius} / 2) * 1px);
         background: ${neutralForegroundRest};
         position: absolute;
         top: 50%;
@@ -95,7 +96,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
         border-color: ${neutralFocus};
     }
 
diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts
index f27391c11186c..d59a3ffb38076 100644
--- a/packages/web-components/src/checkbox/index.ts
+++ b/packages/web-components/src/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
+import { Checkbox, CheckboxOptions, checkboxTemplate as template } from '@microsoft/fast-foundation';
 import { checkboxStyles as styles } from './checkbox.styles';
 
 /**
@@ -10,10 +10,28 @@ import { checkboxStyles as styles } from './checkbox.styles';
  * @remarks
  * HTML Element: \<fluent-checkbox\>
  */
-export const fluentCheckbox = Checkbox.compose({
+export const fluentCheckbox = Checkbox.compose<CheckboxOptions>({
   baseName: 'checkbox',
   template,
   styles,
+  checkedIndicator: `
+    <svg
+        aria-hidden="true"
+        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: `
+    <div part="indeterminate-indicator" class="indeterminate-indicator"></div>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts
index 5f7a49d23680b..a7e31f59fe661 100644
--- a/packages/web-components/src/combobox/index.ts
+++ b/packages/web-components/src/combobox/index.ts
@@ -1,5 +1,9 @@
 import { attr } from '@microsoft/fast-element';
-import { Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation';
+import {
+  ComboboxOptions,
+  Combobox as FoundationCombobox,
+  comboboxTemplate as template,
+} from '@microsoft/fast-foundation';
 import { SelectAppearance } from '../select';
 import { comboboxStyles as styles } from './combobox.styles';
 
@@ -55,10 +59,22 @@ export class Combobox extends FoundationCombobox {
  * HTML Element: \<fluent-combobox\>
  *
  */
-export const fluentCombobox = Combobox.compose({
+export const fluentCombobox = Combobox.compose<ComboboxOptions>({
   baseName: 'combobox',
   template,
   styles,
+  indicator: `
+    <svg
+        class="select-indicator"
+        part="select-indicator"
+        viewBox="0 0 12 7"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
+        />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
index 465f19cc9b0a5..40fb2b7b78f77 100644
--- a/packages/web-components/src/design-tokens.ts
+++ b/packages/web-components/src/design-tokens.ts
@@ -409,7 +409,7 @@ export const neutralFillSelected = create<SwatchRGB>('neutral-fill-selected').wi
 // Neutral Focus
 export const NeutralFocus = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-focus', builder =>
   builder.instance((element: HTMLElement) =>
-    neutralFocusAlgorithm(accentPalette.getValueFor(element), fillColor.getValueFor(element)),
+    neutralFocusAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
   ),
 );
 export const neutralFocus = create<SwatchRGB>('neutral-focus').withDefault((element: HTMLElement) =>
diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
index ac2e513684913..36a3b18c5f38c 100644
--- a/packages/web-components/src/dialog/dialog.styles.ts
+++ b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { elevation } from '../styles';
-import { elevatedCornerRadius, outlineWidth } from '../design-tokens';
+import { elevatedCornerRadius, fillColor, outlineWidth } from '../design-tokens';
 
 export const dialogStyles = (context, definition) => css`
   :host([hidden]) {
@@ -42,7 +42,7 @@ export const dialogStyles = (context, definition) => css`
     border-radius: calc(${elevatedCornerRadius} * 1px);
     width: var(--dialog-width);
     height: var(--dialog-height);
-    background: var(--background-color);
+    background: ${fillColor};
     z-index: 1;
     border: calc(${outlineWidth} * 1px) solid transparent;
   }
diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts
index 34cbaff019b56..6dadf9645d78d 100644
--- a/packages/web-components/src/flipper/index.ts
+++ b/packages/web-components/src/flipper/index.ts
@@ -1,4 +1,4 @@
-import { Flipper, flipperTemplate as template } from '@microsoft/fast-foundation';
+import { Flipper, FlipperOptions, flipperTemplate as template } from '@microsoft/fast-foundation';
 import { flipperStyles as styles } from './flipper.styles';
 
 /**
@@ -10,10 +10,24 @@ import { flipperStyles as styles } from './flipper.styles';
  * @remarks
  * HTML Element: \<fluent-flipper\>
  */
-export const fluentFlipper = Flipper.compose({
+export const fluentFlipper = Flipper.compose<FlipperOptions>({
   baseName: 'flipper',
   template,
   styles,
+  next: `
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"
+        />
+    </svg>
+  `,
+  previous: `
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M11.273 15.977L3.29 8 11.273.023l.704.704L4.71 8l7.266 7.273-.704.704z"
+        />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
index 82976ea6cfd02..e7aeea2644605 100644
--- a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
+++ b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { DirectionalStyleSheetBehavior, display } from '@microsoft/fast-foundation';
+import { display } from '@microsoft/fast-foundation';
+import { DirectionalStyleSheetBehavior } from '../styles';
 
 const ltrActionsStyles = css`
   .scroll-prev {
diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
index cdc45329345cd..cfe82822f35cf 100644
--- a/packages/web-components/src/menu-item/index.ts
+++ b/packages/web-components/src/menu-item/index.ts
@@ -1,4 +1,4 @@
-import { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
+import { MenuItem, MenuItemOptions, menuItemTemplate as template } from '@microsoft/fast-foundation';
 import { menuItemStyles as styles } from './menu-item.styles';
 
 /**
@@ -10,10 +10,52 @@ import { menuItemStyles as styles } from './menu-item.styles';
  * @remarks
  * HTML Element: \<fluent-menu-item\>
  */
-export const fluentMenuItem = MenuItem.compose({
+export const fluentMenuItem = MenuItem.compose<MenuItemOptions>({
   baseName: 'menu-item',
   template,
   styles,
+  checkboxIndicator: `
+    <svg
+        aria-hidden="true"
+        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.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
+        />
+    </svg>
+  `,
+  expandCollapseGlyph: `
+    <svg
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+        class="expand-collapse-glyph"
+        part="expand-collapse-glyph"
+    >
+        <path
+            d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"
+        />
+    </svg>
+  `,
+  radioIndicator: `
+    <svg
+      aria-hidden="true"
+      part="radio-indicator"
+      class="radio-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>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 05562dc7d6a8f..506fdc59ab3ff 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -15,6 +15,7 @@ import {
   neutralFillStealthHover,
   neutralFillStealthActive,
   disabledOpacity,
+  focusOutlineWidth,
 } from '../design-tokens';
 
 export const menuItemStyles = (context, definition) =>
@@ -77,7 +78,7 @@ export const menuItemStyles = (context, definition) =>
 
     :host(:${focusVisible}) {
         border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
-        box-shadow: 0 0 0 calc((${outlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
+        box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
     }
 
     :host(:hover) {
@@ -184,11 +185,6 @@ export const menuItemStyles = (context, definition) =>
         margin-inline-start: 10px;
     }
 
-    :host .checkbox,
-    :host .radio {
-        border: calc(${outlineWidth} * 1px) solid ${neutralForegroundRest};
-    }
-
     :host .checkbox {
         border-radius: calc(${cornerRadius} * 1px);
     }
@@ -219,14 +215,7 @@ export const menuItemStyles = (context, definition) =>
     }
 
     :host([aria-checked="true"]) .radio-indicator {
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        right: 4px;
-        bottom: 4px;
-        border-radius: 999px;
         display: block;
-        background: ${neutralForegroundRest};
         pointer-events: none;
     }
 
diff --git a/packages/web-components/src/number-field/index.ts b/packages/web-components/src/number-field/index.ts
index b1c0e18170152..291feb384b471 100644
--- a/packages/web-components/src/number-field/index.ts
+++ b/packages/web-components/src/number-field/index.ts
@@ -1,5 +1,9 @@
 import { attr } from '@microsoft/fast-element';
-import { NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
+import {
+  NumberField as FoundationNumberField,
+  NumberFieldOptions,
+  numberFieldTemplate as template,
+} from '@microsoft/fast-foundation';
 import { numberFieldStyles as styles } from './number-field.styles';
 
 /**
@@ -52,11 +56,17 @@ export const numberFieldStyles = styles;
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export const fluentNumberField = NumberField.compose({
+export const fluentNumberField = NumberField.compose<NumberFieldOptions>({
   baseName: 'number-field',
   styles,
   template,
   shadowOptions: {
     delegatesFocus: true,
   },
+  stepDownGlyph: `
+    <span class="step-down-glyph" part="step-down-glyph"></span>
+  `,
+  stepUpGlyph: `
+    <span class="step-up-glyph" part="step-up-glyph"></span>
+  `,
 });
diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts
index 35becc9b71211..ceaf92cb3bd20 100644
--- a/packages/web-components/src/progress/progress-ring/index.ts
+++ b/packages/web-components/src/progress/progress-ring/index.ts
@@ -1,4 +1,8 @@
-import { BaseProgress as Progress, progressRingTemplate as template } from '@microsoft/fast-foundation';
+import {
+  BaseProgress as Progress,
+  ProgressRingOptions,
+  progressRingTemplate as template,
+} from '@microsoft/fast-foundation';
 import { progressRingStyles as styles } from './progress-ring.styles';
 
 /**
@@ -10,10 +14,28 @@ import { progressRingStyles as styles } from './progress-ring.styles';
  * @remarks
  * HTML Element: \<fluent-progress-ring\>
  */
-export const fluentProgressRing = Progress.compose({
+export const fluentProgressRing = Progress.compose<ProgressRingOptions>({
   baseName: 'progress-ring',
   template,
   styles,
+  indeterminateIndicator: `
+    <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>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts
index 01dd6c148b412..bfc1daa70a1a3 100644
--- a/packages/web-components/src/progress/progress/index.ts
+++ b/packages/web-components/src/progress/progress/index.ts
@@ -1,4 +1,4 @@
-import { BaseProgress as Progress, progressTemplate as template } from '@microsoft/fast-foundation';
+import { BaseProgress as Progress, ProgressOptions, progressTemplate as template } from '@microsoft/fast-foundation';
 import { progressStyles as styles } from './progress.styles';
 
 /**
@@ -10,10 +10,16 @@ import { progressStyles as styles } from './progress.styles';
  * @remarks
  * HTML Element: \<fluent-progress\>
  */
-export const fluentProgress = Progress.compose({
+export const fluentProgress = Progress.compose<ProgressOptions>({
   baseName: 'progress',
   template,
   styles,
+  indeterminateIndicator1: `
+    <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
+  `,
+  indeterminateIndicator2: `
+    <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index 75a8b6a03b4a3..1ec7604faf98c 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -1,4 +1,4 @@
-import { Radio, radioTemplate as template } from '@microsoft/fast-foundation';
+import { Radio, RadioOptions, radioTemplate as template } from '@microsoft/fast-foundation';
 import { radioStyles as styles } from './radio.styles';
 
 /**
@@ -10,10 +10,13 @@ import { radioStyles as styles } from './radio.styles';
  * @remarks
  * HTML Element: \<fluent-radio\>
  */
-export const fluentRadio = Radio.compose({
+export const fluentRadio = Radio.compose<RadioOptions>({
   baseName: 'radio',
   template,
   styles,
+  checkedIndicator: `
+    <div part="checked-indicator" class="checked-indicator"></div>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 137307023dd2f..b943f018e10cc 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -14,6 +14,7 @@ import {
   neutralOutlineActive,
   neutralFocus,
   disabledOpacity,
+  fillColor,
 } from '../design-tokens';
 
 export const radioStyles = (context, definition) =>
@@ -92,7 +93,7 @@ export const radioStyles = (context, definition) =>
     }
 
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
         border-color: ${neutralFocus};
     }
 
diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts
index 67fd866628104..ac12b76cb3a48 100644
--- a/packages/web-components/src/select/index.ts
+++ b/packages/web-components/src/select/index.ts
@@ -1,5 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import { Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
+import { Select as FoundationSelect, SelectOptions, selectTemplate as template } from '@microsoft/fast-foundation';
 import { selectStyles as styles } from './select.styles';
 
 /**
@@ -55,10 +55,22 @@ export class Select extends FoundationSelect {
  * HTML Element: \<fluent-select\>
  *
  */
-export const fluentSelect = Select.compose({
+export const fluentSelect = Select.compose<SelectOptions>({
   baseName: 'select',
   template,
   styles,
+  indicator: `
+    <svg
+        class="select-indicator"
+        part="select-indicator"
+        viewBox="0 0 12 7"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
+        />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
index deec74fdcedf2..82900e186370d 100644
--- a/packages/web-components/src/slider/index.ts
+++ b/packages/web-components/src/slider/index.ts
@@ -1,4 +1,4 @@
-import { Slider, sliderTemplate as template } from '@microsoft/fast-foundation';
+import { Slider, SliderOptions, sliderTemplate as template } from '@microsoft/fast-foundation';
 import { sliderStyles as styles } from './slider.styles';
 
 /**
@@ -10,10 +10,13 @@ import { sliderStyles as styles } from './slider.styles';
  * @remarks
  * HTML Element: \<fluent-slider\>
  */
-export const fluentSlider = Slider.compose({
+export const fluentSlider = Slider.compose<SliderOptions>({
   baseName: 'slider',
   template,
   styles,
+  thumb: `
+    <div class="thumb-cursor"></div>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 71c7bd2c438b4..80a1b5e9b24d2 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -12,6 +12,7 @@ import {
   density,
   neutralOutlineRest,
   disabledOpacity,
+  fillColor,
 } from '../design-tokens';
 
 export const sliderStyles = (context, defintion) =>
@@ -44,7 +45,7 @@ export const sliderStyles = (context, defintion) =>
         grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
     }
     :host(:${focusVisible}) .thumb-cursor {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
     }
     .thumb-container {
         position: absolute;
diff --git a/packages/web-components/src/styles/direction.ts b/packages/web-components/src/styles/direction.ts
new file mode 100644
index 0000000000000..6bf1d381990fe
--- /dev/null
+++ b/packages/web-components/src/styles/direction.ts
@@ -0,0 +1,90 @@
+import { Behavior, ElementStyles, FASTElement, Subscriber } from '@microsoft/fast-element';
+import { DesignTokenChangeRecord } from '@microsoft/fast-foundation';
+import { Direction } from '@microsoft/fast-web-utilities';
+import { direction as directionDesignToken } from '../design-tokens';
+/**
+ * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
+ * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
+ *
+ * @public
+ * @example
+ * ```ts
+ * import { css } from "@microsoft/fast-element";
+ * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
+ *
+ * css`
+ *  // ...
+ * `.withBehaviors(new DirectionalStyleSheetBehavior(
+ *   css`:host { content: "ltr"}`),
+ *   css`:host { content: "rtl"}`),
+ * )
+ * ```
+ */
+export class DirectionalStyleSheetBehavior implements Behavior {
+  private ltr: ElementStyles | null;
+  private rtl: ElementStyles | null;
+  private cache: WeakMap<HTMLElement, DirectionalStyleSheetBehaviorSubscription> = new WeakMap();
+
+  constructor(ltr: ElementStyles | null, rtl: ElementStyles | null) {
+    this.ltr = ltr;
+    this.rtl = rtl;
+  }
+
+  /**
+   * @internal
+   */
+  public bind(source: FASTElement & HTMLElement) {
+    this.attach(source);
+  }
+
+  /**
+   * @internal
+   */
+  public unbind(source: FASTElement & HTMLElement) {
+    const cache = this.cache.get(source);
+
+    if (cache) {
+      directionDesignToken.unsubscribe(cache);
+    }
+  }
+
+  private attach(source: FASTElement & HTMLElement) {
+    const subscriber =
+      this.cache.get(source) || new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source);
+
+    const value = directionDesignToken.getValueFor(source);
+    directionDesignToken.subscribe(subscriber);
+    subscriber.attach(value);
+
+    this.cache.set(source, subscriber);
+  }
+}
+
+/**
+ * Subscription for {@link DirectionalStyleSheetBehavior}
+ */
+class DirectionalStyleSheetBehaviorSubscription implements Subscriber {
+  private attached: ElementStyles | null = null;
+
+  constructor(
+    private ltr: ElementStyles | null,
+    private rtl: ElementStyles | null,
+    private source: HTMLElement & FASTElement,
+  ) {}
+
+  public handleChange({ target, token }: DesignTokenChangeRecord<typeof directionDesignToken>) {
+    this.attach(token.getValueFor(target));
+  }
+
+  public attach(direction: Direction) {
+    if (this.attached !== this[direction]) {
+      if (this.attached !== null) {
+        this.source.$fastController.removeStyles(this.attached);
+      }
+      this.attached = this[direction];
+      if (this.attached !== null) {
+        this.source.$fastController.addStyles(this.attached);
+      }
+    }
+  }
+}
diff --git a/packages/web-components/src/styles/index.ts b/packages/web-components/src/styles/index.ts
index 1fe8b614db7d1..f5fa45bbf6c12 100644
--- a/packages/web-components/src/styles/index.ts
+++ b/packages/web-components/src/styles/index.ts
@@ -1,4 +1,5 @@
 export * from './behaviors';
+export * from './direction';
 export * from './elevation';
 export * from './patterns/';
 export * from './size';
diff --git a/packages/web-components/src/styles/size.ts b/packages/web-components/src/styles/size.ts
index a7f4ffc67b338..f1ff0f15516b0 100644
--- a/packages/web-components/src/styles/size.ts
+++ b/packages/web-components/src/styles/size.ts
@@ -1,5 +1,9 @@
+import { cssPartial } from '@microsoft/fast-element';
+import { baseHeightMultiplier, density, designUnit } from '../design-tokens';
+
 /**
- * The height of height of a standard control (expressed as a number) to be used in CSS.
- * @public
+ * A formula to retrieve the control height.
+ * Use this as the value of any CSS property that
+ * accepts a pixel size.
  */
-export const heightNumber = '(var(--base-height-multiplier) + var(--density)) * var(--design-unit)';
+export const heightNumber = cssPartial`(${baseHeightMultiplier} + ${density}) * ${designUnit}`;
diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts
index df7f9c7a47e06..a665ac2a783eb 100644
--- a/packages/web-components/src/switch/index.ts
+++ b/packages/web-components/src/switch/index.ts
@@ -1,4 +1,4 @@
-import { Switch, switchTemplate as template } from '@microsoft/fast-foundation';
+import { Switch, SwitchOptions, switchTemplate as template } from '@microsoft/fast-foundation';
 import { switchStyles as styles } from './switch.styles';
 
 /**
@@ -10,10 +10,13 @@ import { switchStyles as styles } from './switch.styles';
  * @remarks
  * HTML Element: \<fluent-switch\>
  */
-export const fluentSwitch = Switch.compose({
+export const fluentSwitch = Switch.compose<SwitchOptions>({
   baseName: 'switch',
   template,
   styles,
+  switch: `
+    <span class="checked-indicator" part="checked-indicator"></span>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 7d685097a5c23..313e490638934 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -1,13 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import {
-  DirectionalStyleSheetBehavior,
-  disabledCursor,
-  display,
-  focusVisible,
-  forcedColorsStylesheetBehavior,
-} from '@microsoft/fast-foundation';
-import { heightNumber } from '../styles';
+import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
 import {
   bodyFont,
   designUnit,
@@ -27,6 +21,7 @@ import {
   accentFillActive,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
+  fillColor,
 } from '../design-tokens';
 
 export const switchStyles = (context, defintiion) =>
@@ -82,7 +77,7 @@ export const switchStyles = (context, defintiion) =>
     }
 
     :host(:${focusVisible}) .switch {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
         border-color: ${neutralFocus};
     }
 
@@ -139,7 +134,7 @@ export const switchStyles = (context, defintiion) =>
     }
 
     :host([aria-checked="true"]:${focusVisible}:enabled) .switch {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
         border-color: transparent;
     }
 
diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts
index 4e0a0e2d24704..171e396fcc78e 100644
--- a/packages/web-components/src/tooltip/tooltip.styles.ts
+++ b/packages/web-components/src/tooltip/tooltip.styles.ts
@@ -4,11 +4,11 @@ import { elevation } from '../styles/index';
 import {
   cornerRadius,
   outlineWidth,
-  neutralContrastFillRest,
   neutralForegroundRest,
   bodyFont,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
+  fillColor,
 } from '../design-tokens';
 
 export const tooltipStyles = (context, definition) =>
@@ -27,7 +27,7 @@ export const tooltipStyles = (context, definition) =>
       box-sizing: border-box;
       border-radius: calc(${cornerRadius} * 1px);
       border: calc(${outlineWidth} * 1px) solid transparent;
-      background: ${neutralContrastFillRest};
+      background: ${fillColor};
       color: ${neutralForegroundRest};
       padding: 4px 12px;
       height: fit-content;
@@ -59,7 +59,7 @@ export const tooltipStyles = (context, definition) =>
       content: '';
       width: 12px;
       height: 12px;
-      background: ${neutralForegroundRest};
+      background: ${fillColor};
       border-radius: calc(${cornerRadius} * 1px);
       position: absolute;
     }
diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts
index a3a10ca3c7cfb..3882297a6825d 100644
--- a/packages/web-components/src/tree-item/index.ts
+++ b/packages/web-components/src/tree-item/index.ts
@@ -1,4 +1,4 @@
-import { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation';
+import { treeItemTemplate as template, TreeItem, TreeItemOptions } from '@microsoft/fast-foundation';
 import { treeItemStyles as styles } from './tree-item.styles';
 
 /**
@@ -11,10 +11,21 @@ import { treeItemStyles as styles } from './tree-item.styles';
  * HTML Element: \<fluent-tree-item\>
  *
  */
-export const fluentTreeItem = TreeItem.compose({
+export const fluentTreeItem = TreeItem.compose<TreeItemOptions>({
   baseName: 'tree-item',
   template,
   styles,
+  expandCollapseGlyph: `
+    <svg
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+        class="expand-collapse-glyph"
+    >
+        <path
+            d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"
+        />
+    </svg>
+  `,
 });
 
 /**
diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
index 7f44f0db51b7d..53ac435685f08 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -1,21 +1,14 @@
-import { css } from '@microsoft/fast-element';
+import { css, cssPartial } from '@microsoft/fast-element';
 import {
-  cssCustomPropertyBehaviorFactory,
-  DirectionalStyleSheetBehavior,
+  DesignToken,
+  DI,
   disabledCursor,
   display,
   focusVisible,
   forcedColorsStylesheetBehavior,
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import {
-  neutralFillStealthHover as neutralFillStealthHoverOld,
-  neutralFillStealthActive as neutralFillStealthActiveOld,
-  neutralFillStealthSelected as neutralFillStealthSelectedOld,
-} from '../color';
-import { heightNumber } from '../styles/index';
-
-import { FluentDesignSystemProvider } from '../design-system-provider/index';
+import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
 import {
   focusOutlineWidth,
   baseHeightMultiplier,
@@ -34,54 +27,56 @@ import {
   neutralFillStealthHover,
   neutralFillStealthActive,
   neutralFillStealthSelected,
+  NeutralFillStealth,
 } from '../design-tokens';
+import { SwatchRGB } from '../color-vNext/swatch';
 
 const ltr = css`
   .expand-collapse-glyph {
-    transform: rotate(-45deg);
+    transform: rotate(0deg);
   }
   :host(.nested) .expand-collapse-button {
     left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    left: calc(${focusOutlineWidth} * 1px);
+    left: calc(var(--focus-outline-width) * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(0deg);
+    transform: rotate(45deg);
   }
 `;
 
 const rtl = css`
   .expand-collapse-glyph {
-    transform: rotate(135deg);
+    transform: rotate(180deg);
   }
   :host(.nested) .expand-collapse-button {
     right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    right: calc(${focusOutlineWidth} * 1px);
+    right: calc(var(--focus-outline-width) * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(90deg);
+    transform: rotate(135deg);
   }
 `;
 
-// TODO: Update to be CSS Partial
-export const expandCollapseButtonSize = css`((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
+export const expandCollapseButtonSize = cssPartial`((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
 
-// TODO: Update for DI
-const expandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory(
-  'neutral-stealth-hover-over-hover',
-  x => neutralFillStealthHoverOld(neutralFillStealthHoverOld)(x),
-  FluentDesignSystemProvider.findProvider,
-);
-// TODO: Update for DI
-const selectedExpandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory(
-  'neutral-stealth-hover-over-selected',
-  x => neutralFillStealthHoverOld(neutralFillStealthSelectedOld)(x),
-  FluentDesignSystemProvider.findProvider,
+const expandCollapseHoverBehavior = DesignToken.create<SwatchRGB>('tree-item-expand-collapse-hover').withDefault(
+  (target: HTMLElement) => {
+    const recipe = DI.findResponsibleContainer(target).get(NeutralFillStealth);
+    return recipe(target, recipe(target).hover).hover;
+  },
 );
 
+const selectedExpandCollapseHoverBehavior = DesignToken.create<SwatchRGB>(
+  'tree-item-expand-collapse-selected-hover',
+).withDefault((target: HTMLElement) => {
+  const recipe = DI.findResponsibleContainer(target).get(NeutralFillStealth);
+  return recipe(target, recipe(target).hover).selected;
+});
+
 export const treeItemStyles = (context, definition) =>
   css`
     ${display('block')} :host {
@@ -104,20 +99,20 @@ export const treeItemStyles = (context, definition) =>
         outline: none;
     }
 
+    .positioning-region {
+      display: flex;
+      position: relative;
+      box-sizing: border-box;
+      border: calc(${outlineWidth} * 1px) solid transparent;
+      height: calc((${heightNumber} + 1) * 1px);
+    }
+
     :host(:${focusVisible}) .positioning-region {
-        border: ${neutralFocus} calc(${outlineWidth} * 1px) solid;
+        border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
         border-radius: calc(${cornerRadius} * 1px);
         color: ${neutralForegroundRest};
     }
 
-    .positioning-region {
-        display: flex;
-        position: relative;
-        box-sizing: border-box;
-        border: transparent calc(${outlineWidth} * 1px) solid;
-        height: calc((${heightNumber} + 1) * 1px);
-    }
-
     .positioning-region::before {
         content: "";
         display: block;
@@ -171,11 +166,10 @@ export const treeItemStyles = (context, definition) =>
     }
 
     .expand-collapse-glyph {
-        ${/* Glyph size is temporary -
-            replace when glyph-size var is added */ ''} width: 16px;
+        width: 16px;
         height: 16px;
         transition: transform 0.1s linear;
-        ${/* transform needs to be localized */ ''} transform: rotate(-45deg);
+        transform: rotate(-45deg);
         pointer-events: none;
         fill: ${neutralForegroundRest};
     }
@@ -226,7 +220,7 @@ export const treeItemStyles = (context, definition) =>
     }
 
     :host(.nested) .expand-collapse-button:hover {
-        background: ${expandCollapseHoverBehavior.var};
+        background: ${expandCollapseHoverBehavior};
     }
 
     :host([selected]) .positioning-region {
@@ -234,7 +228,7 @@ export const treeItemStyles = (context, definition) =>
     }
 
     :host([selected]) .expand-collapse-button:hover {
-      background: ${selectedExpandCollapseHoverBehavior.var};
+      background: ${selectedExpandCollapseHoverBehavior};
     }
 
     :host([selected])::after {
@@ -256,8 +250,6 @@ export const treeItemStyles = (context, definition) =>
         --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
     }
 `.withBehaviors(
-    expandCollapseHoverBehavior,
-    selectedExpandCollapseHoverBehavior,
     new DirectionalStyleSheetBehavior(ltr, rtl),
     forcedColorsStylesheetBehavior(
       css`
diff --git a/yarn.lock b/yarn.lock
index d4c7fd46da4e5..366f9fa0d717d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2698,23 +2698,23 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
   integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==
 
-"@microsoft/fast-element@^1.0.0", "@microsoft/fast-element@^1.1.0":
+"@microsoft/fast-element@^1.3.0", "@microsoft/fast-element@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.4.0.tgz#761b5ebdde1a271c5f96f7c15fab9f5a2a10657f"
   integrity sha512-7BC/juFc7S4HMGt/tNCP9bjwtUslheGiPM2jtIibe1bj+PO34woUfH5TxaklOT6sRStig/0fODX4R5oqY4DYLA==
 
-"@microsoft/fast-foundation@2.0.0-beta.0":
-  version "2.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0-beta.0.tgz#54ae03191c7e8cc0a88bca5e278cab775b8cbdb9"
-  integrity sha512-V2r87Oj0jIgGl3YiGPBzyBNAx9AKYsk2kYTfazyg4HlaPH7YM0vekL/yJTZW89aW5aEM4anBLrUssmbw5dMwfw==
+"@microsoft/fast-foundation@2.0.0-1":
+  version "2.0.0-1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.0.0-1.tgz#a294ef0df7343420dc327ffbccd724d9d9d8a5ed"
+  integrity sha512-CHWxUoYAv/r5NWTQkpnyKRAf5BNtRPfcTIvADSucLODliyniYnJ9kGk+4IdUMt1VuducgI77vtB1a0IA/9W0Dw==
   dependencies:
-    "@microsoft/fast-element" "^1.1.0"
-    "@microsoft/fast-web-utilities" "^4.7.3"
+    "@microsoft/fast-element" "^1.3.0"
+    "@microsoft/fast-web-utilities" "^4.8.0"
     "@microsoft/tsdoc-config" "^0.13.4"
-    tabbable "^4.0.0"
+    tabbable "^5.2.0"
     tslib "^1.13.0"
 
-"@microsoft/fast-web-utilities@^4.7.3":
+"@microsoft/fast-web-utilities@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.0.tgz#a27f755669027071d8886fbe89ceaae4e69e203a"
   integrity sha512-+MroMIP5yGD8mqbegqSZoIbQVjvmsQRQtn87Gc8TJk00KIfRu2x9sFAq8q5m8H61sjCRHreJ0Bq5telz09h55g==
@@ -24957,10 +24957,10 @@ syncpack@^5.6.10:
     read-yaml-file "2.0.0"
     semver "7.3.4"
 
-tabbable@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
-  integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
+tabbable@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.0.tgz#4fba60991d8bb89d06e5d9455c92b453acf88fb2"
+  integrity sha512-0uyt8wbP0P3T4rrsfYg/5Rg3cIJ8Shl1RJ54QMqYxm1TLdWqJD1u6+RQjr2Lor3wmfT7JRHkirIwy99ydBsyPg==
 
 table@^6.0.4, table@^6.0.9:
   version "6.7.1"