From 338e6855e2240b084dfe3a695b89400a0348d306 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 4 Aug 2020 15:28:47 -0700
Subject: [PATCH] update the names for controls to fluent

---
 .../.storybook/preview-head.html              |   2 +-
 packages/web-components/README.md             |  18 +-
 .../src/accordion/accordion-item/index.ts     |   8 +-
 .../src/accordion/accordion.stories.ts        |  12 +-
 .../src/accordion/fixtures/base.html          |  54 ++---
 .../web-components/src/accordion/index.ts     |   8 +-
 .../src/anchor/anchor.stories.ts              |   8 +-
 .../src/anchor/fixtures/anchor.html           |  38 ++--
 packages/web-components/src/anchor/index.ts   |   8 +-
 .../web-components/src/badge/badge.spec.ts    |  12 +-
 .../web-components/src/badge/badge.stories.ts |   8 +-
 .../src/badge/fixtures/badge.html             |  30 +--
 packages/web-components/src/badge/index.ts    |   8 +-
 .../src/button/button.stories.ts              |   8 +-
 .../src/button/fixtures/button.html           |  44 ++--
 packages/web-components/src/button/index.ts   |   8 +-
 .../web-components/src/card/card.stories.ts   |   8 +-
 .../src/card/fixtures/card.html               |  14 +-
 packages/web-components/src/card/index.ts     |   8 +-
 .../src/checkbox/checkbox.stories.ts          |  10 +-
 .../src/checkbox/fixtures/checkbox.html       |  50 ++---
 packages/web-components/src/checkbox/index.ts |   8 +-
 .../src/design-system-provider/index.ts       |  10 +-
 .../src/dialog/dialog.stories.ts              |   8 +-
 .../src/dialog/fixtures/dialog.html           |  14 +-
 packages/web-components/src/dialog/index.ts   |   8 +-
 .../src/divider/divider.stories.ts            |   8 +-
 .../src/divider/fixtures/divider.html         |   8 +-
 packages/web-components/src/divider/index.ts  |   8 +-
 .../src/flipper/fixtures/flipper.html         |  22 +-
 .../src/flipper/flipper.stories.ts            |   8 +-
 packages/web-components/src/flipper/index.ts  |   8 +-
 .../src/menu-item/fixtures/menu-item.html     |  32 +--
 .../web-components/src/menu-item/index.ts     |   8 +-
 .../src/menu-item/menu-item.stories.ts        |   8 +-
 .../src/menu/fixtures/menu.html               |  32 +--
 packages/web-components/src/menu/index.ts     |   8 +-
 .../web-components/src/menu/menu.stories.ts   |  12 +-
 .../progress-ring/fixtures/circular.html      |  32 +--
 .../src/progress/progress-ring/index.ts       |   8 +-
 .../progress-ring/progress-ring.stories.ts    |   8 +-
 .../progress/progress/fixtures/linear.html    |  32 +--
 .../src/progress/progress/index.ts            |   8 +-
 .../src/progress/progress/progress.stories.ts |   8 +-
 .../src/radio-group/fixtures/radio-group.html |  78 +++----
 .../web-components/src/radio-group/index.ts   |   8 +-
 .../src/radio-group/radio-group.stories.ts    |   8 +-
 .../src/radio/fixtures/radio.html             |  24 +--
 packages/web-components/src/radio/index.ts    |   8 +-
 .../web-components/src/radio/radio.stories.ts |   8 +-
 .../slider-label/fixtures/slider-label.html   |  28 +--
 .../web-components/src/slider-label/index.ts  |   8 +-
 .../src/slider-label/slider-label.stories.ts  |   8 +-
 .../src/slider/fixtures/slider.html           | 194 +++++++++---------
 packages/web-components/src/slider/index.ts   |   8 +-
 .../src/slider/slider.stories.ts              |   8 +-
 .../web-components/src/styles/behaviors.ts    | 128 ++++++------
 .../src/switch/fixtures/switch.html           |  40 ++--
 packages/web-components/src/switch/index.ts   |   8 +-
 .../src/switch/switch.stories.ts              |   8 +-
 .../src/tabs/fixtures/tabs.html               | 136 ++++++------
 packages/web-components/src/tabs/index.ts     |   8 +-
 .../src/tabs/tab-panel/index.ts               |   8 +-
 packages/web-components/src/tabs/tab/index.ts |   8 +-
 .../web-components/src/tabs/tabs.stories.ts   |  16 +-
 .../src/text-area/fixtures/text-area.html     |  70 +++----
 .../web-components/src/text-area/index.ts     |   8 +-
 .../src/text-area/text-area.stories.ts        |   8 +-
 .../src/text-field/fixtures/text-field.html   |  60 +++---
 .../web-components/src/text-field/index.ts    |   8 +-
 .../src/text-field/text-field.stories.ts      |   8 +-
 .../src/tree-item/fixtures/tree-item.html     |  34 +--
 .../web-components/src/tree-item/index.ts     |   8 +-
 .../src/tree-item/tree-item.stories.ts        |   8 +-
 .../src/tree-item/tree-item.styles.ts         |  10 +-
 .../src/tree-view/fixtures/tree-view.html     | 150 +++++++-------
 .../web-components/src/tree-view/index.ts     |   8 +-
 .../src/tree-view/tree-view.stories.ts        |   8 +-
 78 files changed, 903 insertions(+), 903 deletions(-)

diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html
index ebb478f4b3c970..ce1a6451771911 100644
--- a/packages/web-components/.storybook/preview-head.html
+++ b/packages/web-components/.storybook/preview-head.html
@@ -8,7 +8,7 @@
     height: 100%;
   }
 
-  fast-design-system-provider {
+  fluent-design-system-provider {
     flex-grow: 1;
     overflow: auto;
     padding: calc(var(--design-unit) * 2px);
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
index cb62dfa6b506f2..c363fc749d6513 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -1,28 +1,28 @@
-# FAST Components MSFT
+# Fluent UI Web Components
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Fweb-components.svg)](https://badge.fury.io/js/%40microsoft%2Fweb-components)
 
-`fast-components-msft` is a library of Web Components that _composes_ `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets that support Microsoft's Fluent design language.
+`@fluentui/web-components` is a library of Web Components that _composes_ `@microsoft/fast-foundation` and supports Microsoft's Fluent design language.
 
 ## Installation
 
 ### From NPM
 
-To install the `fast-components-msft` library, use either `npm` or `yarn` as follows:
+To install the `web-components` library, use either `npm` or `yarn` as follows:
 
 ```shell
-npm install --save @microsoft/fast-components-msft
+npm install --save @fluentui/web-components
 ```
 
 ```shell
-yarn add @microsoft/fast-components-msft
+yarn add @fluentui/web-components
 ```
 
 Within your JavaScript or TypeScript code, you can then import library APIs like this:
 
 ```ts
-import { FASTAnchor } from '@microsoft/fast-components-msft';
+import { FASTAnchor } from '@fluentui/web-components';
 ```
 
 Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](http://fast.design/docs/integrations/introduction).
@@ -35,13 +35,13 @@ A pre-bundled script that contains all APIs needed to use FAST Foundation is ava
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="module" src="https://unpkg.com/@microsoft/fast-components-msft"></script>
+    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
   </head>
   <!-- ... -->
 </html>
 ```
 
-The above CDN location points to the latest release of `fast-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
+The above CDN location points to the latest release of `@fluentui/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
 
 For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
 
diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts
index dcdad3fec6c8a2..93f9def29b3d72 100644
--- a/packages/web-components/src/accordion/accordion-item/index.ts
+++ b/packages/web-components/src/accordion/accordion-item/index.ts
@@ -3,20 +3,20 @@ import { AccordionItem, AccordionItemTemplate as template } from '@microsoft/fas
 import { AccordionItemStyles as styles } from './accordion-item.styles';
 
 /**
- * The FAST Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
+ * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
  * {@link @microsoft/fast-foundation#AccordionItemTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-accordion-item\>
+ * HTML Element: \<fluent-accordion-item\>
  */
 @customElement({
-  name: 'fast-accordion-item',
+  name: 'fluent-accordion-item',
   template,
   styles,
 })
-export class FASTAccordionItem extends AccordionItem {}
+export class FluentAccordionItem extends AccordionItem {}
 
 /**
  * Styles for AccordionItem
diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts
index 103ef93473c54c..8427ad67e76968 100644
--- a/packages/web-components/src/accordion/accordion.stories.ts
+++ b/packages/web-components/src/accordion/accordion.stories.ts
@@ -1,12 +1,12 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/base.html';
-import { FASTAccordionItem } from './accordion-item';
-import { FASTAccordion } from '.';
+import { FluentAccordionItem } from './accordion-item';
+import { FluentAccordion } from '.';
 
 // Prevent tree-shaking
-FASTAccordion;
-FASTAccordionItem;
-FASTDesignSystemProvider;
+FluentAccordion;
+FluentAccordionItem;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Accordion',
diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
index 0e8e29c2b0a52a..96083912d72070 100644
--- a/packages/web-components/src/accordion/fixtures/base.html
+++ b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,17 +1,17 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <style>
     .icon {
       stroke: var(--accent-fill-rest);
     }
 
-    fast-accordion-item.disabled::part(button) {
+    fluent-accordion-item.disabled::part(button) {
       pointer-events: none;
     }
   </style>
   <h1>Accordion</h1>
   <h4>Default</h4>
-  <fast-accordion>
-    <fast-accordion-item expanded>
+  <fluent-accordion>
+    <fluent-accordion-item expanded>
       <div slot="start">
         <button>1</button>
       </div>
@@ -53,8 +53,8 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item>
+    </fluent-accordion-item>
+    <fluent-accordion-item>
       <span slot="heading">Panel two</span>
       <svg
         slot="expanded-icon"
@@ -90,8 +90,8 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel two content
-    </fast-accordion-item>
-    <fast-accordion-item expanded>
+    </fluent-accordion-item>
+    <fluent-accordion-item expanded>
       <span slot="heading">Panel three</span>
       <svg
         slot="expanded-icon"
@@ -127,11 +127,11 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
+    </fluent-accordion-item>
+  </fluent-accordion>
   <h4>Single expand</h4>
-  <fast-accordion expand-mode="single">
-    <fast-accordion-item>
+  <fluent-accordion expand-mode="single">
+    <fluent-accordion-item>
       <div slot="start">
         <button>1</button>
       </div>
@@ -173,8 +173,8 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item class="disabled">
+    </fluent-accordion-item>
+    <fluent-accordion-item class="disabled">
       <span slot="heading">Panel Two</span>
       <svg
         slot="expanded-icon"
@@ -210,8 +210,8 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel two content
-    </fast-accordion-item>
-    <fast-accordion-item>
+    </fluent-accordion-item>
+    <fluent-accordion-item>
       <span slot="heading">Panel three</span>
       <svg
         slot="expanded-icon"
@@ -247,11 +247,11 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
+    </fluent-accordion-item>
+  </fluent-accordion>
   <h4>With disabled item</h4>
-  <fast-accordion>
-    <fast-accordion-item>
+  <fluent-accordion>
+    <fluent-accordion-item>
       <div slot="start">
         <button>1</button>
       </div>
@@ -293,8 +293,8 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item class="disabled">
+    </fluent-accordion-item>
+    <fluent-accordion-item class="disabled">
       <div slot="start">
         <button>1</button>
       </div>
@@ -336,8 +336,8 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Disabled content
-    </fast-accordion-item>
-    <fast-accordion-item expanded>
+    </fluent-accordion-item>
+    <fluent-accordion-item expanded>
       <div slot="start">
         <button>1</button>
       </div>
@@ -379,6 +379,6 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
-</fast-design-system-provider>
+    </fluent-accordion-item>
+  </fluent-accordion>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts
index f4dd8cd597eab6..acbc945f5118f1 100644
--- a/packages/web-components/src/accordion/index.ts
+++ b/packages/web-components/src/accordion/index.ts
@@ -5,20 +5,20 @@ import { AccordionStyles as styles } from './accordion.styles';
 export * from './accordion-item/index';
 
 /**
- * The FAST Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
+ * The FluentUI Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
  * {@link @microsoft/fast-foundation#AccordionTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-accordion\>
+ * HTML Element: \<fluent-accordion\>
  */
 @customElement({
-  name: 'fast-accordion',
+  name: 'fluent-accordion',
   template,
   styles,
 })
-export class FASTAccordion extends Accordion {}
+export class FluentAccordion extends Accordion {}
 
 /**
  * Styles for Accordion
diff --git a/packages/web-components/src/anchor/anchor.stories.ts b/packages/web-components/src/anchor/anchor.stories.ts
index eac76823d3f167..bb6c975a16279f 100644
--- a/packages/web-components/src/anchor/anchor.stories.ts
+++ b/packages/web-components/src/anchor/anchor.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import AnchorTemplate from './fixtures/anchor.html';
-import { FASTAnchor } from './';
+import { FluentAnchor } from './';
 
 // Prevent tree-shaking
-FASTAnchor;
-FASTDesignSystemProvider;
+FluentAnchor;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Anchor',
diff --git a/packages/web-components/src/anchor/fixtures/anchor.html b/packages/web-components/src/anchor/fixtures/anchor.html
index 13ea064a06a3a7..d172893194f53c 100644
--- a/packages/web-components/src/anchor/fixtures/anchor.html
+++ b/packages/web-components/src/anchor/fixtures/anchor.html
@@ -1,67 +1,67 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Anchor</h1>
 
   <h4>Default</h4>
-  <fast-anchor href="#">Anchor</fast-anchor>
+  <fluent-anchor href="#">Anchor</fluent-anchor>
 
   <h5>With target</h5>
-  <fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>
+  <fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor>
 
   <h4>Neutral</h4>
-  <fast-anchor href="#" appearance="neutral">Button</fast-anchor>
+  <fluent-anchor href="#" appearance="neutral">Button</fluent-anchor>
 
   <h4>Accent</h4>
-  <fast-anchor href="#" appearance="accent">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor>
 
   <h4>Hypertext</h4>
-  <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor>
   <br />
-  <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
+  <fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor>
   <p>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
     corrupti
-    <fast-anchor appearance="hypertext" href="#">doloremque totam</fast-anchor>
+    <fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor>
     dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.
   </p>
 
   <h4>Lightweight</h4>
-  <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor>
 
   <h4>Outline</h4>
-  <fast-anchor href="#" appearance="outline">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor>
 
   <h4>Stealth</h4>
-  <fast-anchor href="#" appearance="stealth">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor>
 
   <h4>With start</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     Anchor
     <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"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>With end</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     Anchor
     <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"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>Icon in default slot</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     <svg 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"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>With aria-label</h4>
-  <fast-anchor href="#" aria-label="Anchor with aria-label"></fast-anchor>
-</fast-design-system-provider>
+  <fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts
index 1e391f68fdf927..dfedfa9995eda3 100644
--- a/packages/web-components/src/anchor/index.ts
+++ b/packages/web-components/src/anchor/index.ts
@@ -10,25 +10,25 @@ import { AnchorStyles as styles } from './anchor.styles';
 export type AnchorAppearance = ButtonAppearance | 'hypertext';
 
 /**
- * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
+ * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
  * {@link @microsoft/fast-foundation#AnchorTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-anchor\>
+ * HTML Element: \<fluent-anchor\>
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
 @customElement({
-  name: 'fast-anchor',
+  name: 'fluent-anchor',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
 })
-export class FASTAnchor extends Anchor {
+export class FluentAnchor extends Anchor {
   /**
    * The appearance the anchor should have.
    *
diff --git a/packages/web-components/src/badge/badge.spec.ts b/packages/web-components/src/badge/badge.spec.ts
index fca1fa117113b1..4f55b433755323 100644
--- a/packages/web-components/src/badge/badge.spec.ts
+++ b/packages/web-components/src/badge/badge.spec.ts
@@ -1,8 +1,8 @@
-import { FASTBadge } from ".";
+import { FluentBadge } from ".";
 
-describe("The fast-badge component", () => {
-    it("adds its appearance as a host class", () => {
-        const badge = new FASTBadge();
-        badge.classList.contains("lightweight");
-    });
+describe("The fluent-badge component", () => {
+  it("adds its appearance as a host class", () => {
+    const badge = new FluentBadge();
+    badge.classList.contains("lightweight");
+  });
 });
diff --git a/packages/web-components/src/badge/badge.stories.ts b/packages/web-components/src/badge/badge.stories.ts
index cbe80368420e83..8761ce23071eee 100644
--- a/packages/web-components/src/badge/badge.stories.ts
+++ b/packages/web-components/src/badge/badge.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import BadgeTemplate from './fixtures/badge.html';
-import { FASTBadge } from './';
+import { FluentBadge } from './';
 
 // Prevent tree-shaking
-FASTBadge;
-FASTDesignSystemProvider;
+FluentBadge;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Badge',
diff --git a/packages/web-components/src/badge/fixtures/badge.html b/packages/web-components/src/badge/fixtures/badge.html
index c332bee21ccdaa..5422f0dab3b967 100644
--- a/packages/web-components/src/badge/fixtures/badge.html
+++ b/packages/web-components/src/badge/fixtures/badge.html
@@ -1,6 +1,6 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <style>
-    fast-badge {
+    fluent-badge {
       --badge-fill-highlight: #ffd800;
       --badge-fill-lowlight: #333;
       --badge-color-highlight: #000;
@@ -9,26 +9,26 @@
   </style>
   <h1>Badge</h1>
   <h4>Default</h4>
-  <fast-badge>
+  <fluent-badge>
     Badge
-  </fast-badge>
+  </fluent-badge>
   <h4>Lightweight</h4>
-  <fast-badge appearance="lightweight">
+  <fluent-badge appearance="lightweight">
     Badge
-  </fast-badge>
+  </fluent-badge>
   <h4>Accent</h4>
-  <fast-badge appearance="accent">
+  <fluent-badge appearance="accent">
     Badge
-  </fast-badge>
+  </fluent-badge>
   <h4>Neutral</h4>
-  <fast-badge appearance="neutral">
+  <fluent-badge appearance="neutral">
     Badge
-  </fast-badge>
+  </fluent-badge>
   <h4>With map</h4>
-  <fast-badge fill="highlight" color="highlight">
+  <fluent-badge fill="highlight" color="highlight">
     Badge
-  </fast-badge>
-  <fast-badge fill="lowlight" color="lowlight">
+  </fluent-badge>
+  <fluent-badge fill="lowlight" color="lowlight">
     Badge
-  </fast-badge>
-</fast-design-system-provider>
+  </fluent-badge>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts
index 5622281de07e8a..61829b68f1f221 100644
--- a/packages/web-components/src/badge/index.ts
+++ b/packages/web-components/src/badge/index.ts
@@ -9,20 +9,20 @@ import { BadgeStyles as styles } from './badge.styles';
 export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;
 
 /**
- * The FAST Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
+ * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
  * {@link @microsoft/fast-foundation#BadgeTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-badge\>
+ * HTML Element: \<fluent-badge\>
  */
 @customElement({
-  name: 'fast-badge',
+  name: 'fluent-badge',
   template,
   styles,
 })
-export class FASTBadge extends Badge {
+export class FluentBadge extends Badge {
   @attr({ mode: 'fromView' })
   public appearance: BadgeAppearance = 'lightweight';
   private appearanceChanged(oldValue: BadgeAppearance, newValue: BadgeAppearance): void {
diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
index 531d416a9ea0bf..e68b3b2ec9159f 100644
--- a/packages/web-components/src/button/button.stories.ts
+++ b/packages/web-components/src/button/button.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import ButtonTemplate from './fixtures/button.html';
-import { FASTButton } from './';
+import { FluentButton } from './';
 
 // Prevent tree-shaking
-FASTButton;
-FASTDesignSystemProvider;
+FluentButton;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Button',
diff --git a/packages/web-components/src/button/fixtures/button.html b/packages/web-components/src/button/fixtures/button.html
index aeb39036aafb22..af5c00ca97f6c9 100644
--- a/packages/web-components/src/button/fixtures/button.html
+++ b/packages/web-components/src/button/fixtures/button.html
@@ -1,67 +1,67 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Button</h1>
 
   <h4>Default</h4>
-  <fast-button>Button</fast-button>
+  <fluent-button>Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button disabled>Button</fast-button>
+  <fluent-button disabled>Button</fluent-button>
   <h5>autofocus</h5>
-  <fast-button autofocus>Button</fast-button>
+  <fluent-button autofocus>Button</fluent-button>
 
   <h4>Neutral</h4>
-  <fast-button appearance="neutral">Button</fast-button>
+  <fluent-button appearance="neutral">Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button appearance="neutral" disabled>Button</fast-button>
+  <fluent-button appearance="neutral" disabled>Button</fluent-button>
 
   <h4>Accent</h4>
-  <fast-button appearance="accent">Button</fast-button>
+  <fluent-button appearance="accent">Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button appearance="accent" disabled>Button</fast-button>
+  <fluent-button appearance="accent" disabled>Button</fluent-button>
 
   <h4>Lightweight</h4>
-  <fast-button appearance="lightweight">Button</fast-button>
+  <fluent-button appearance="lightweight">Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button appearance="lightweight" disabled>Button</fast-button>
+  <fluent-button appearance="lightweight" disabled>Button</fluent-button>
 
   <h4>Outline</h4>
-  <fast-button appearance="outline">Button</fast-button>
+  <fluent-button appearance="outline">Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button appearance="outline" disabled>Button</fast-button>
+  <fluent-button appearance="outline" disabled>Button</fluent-button>
 
   <h4>Stealth</h4>
-  <fast-button appearance="stealth">Button</fast-button>
+  <fluent-button appearance="stealth">Button</fluent-button>
   <h5>disabled</h5>
-  <fast-button appearance="stealth" disabled>Button</fast-button>
+  <fluent-button appearance="stealth" disabled>Button</fluent-button>
 
   <h4>With start</h4>
-  <fast-button>
+  <fluent-button>
     Button
     <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"
       />
     </svg>
-  </fast-button>
+  </fluent-button>
 
   <h4>With end</h4>
-  <fast-button>
+  <fluent-button>
     Button
     <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"
       />
     </svg>
-  </fast-button>
+  </fluent-button>
 
   <h4>Icon in default slot</h4>
-  <fast-button>
+  <fluent-button>
     <svg 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"
       />
     </svg>
-  </fast-button>
+  </fluent-button>
 
   <h4>With aria-label</h4>
-  <fast-button aria-label="Button with aria-label">Button</fast-button>
-</fast-design-system-provider>
+  <fluent-button aria-label="Button with aria-label">Button</fluent-button>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
index 0c92ae2f97bd18..f39e82d6cd8ccc 100644
--- a/packages/web-components/src/button/index.ts
+++ b/packages/web-components/src/button/index.ts
@@ -9,25 +9,25 @@ import { ButtonStyles as styles } from './button.styles';
 export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';
 
 /**
- * The FAST Button Element. Implements {@link @microsoft/fast-foundation#Button},
+ * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button},
  * {@link @microsoft/fast-foundation#ButtonTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-button\>
+ * HTML Element: \<fluent-button\>
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
 @customElement({
-  name: 'fast-button',
+  name: 'fluent-button',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
 })
-export class FASTButton extends Button {
+export class FluentButton extends Button {
   /**
    * The appearance the button should have.
    *
diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts
index 2bd6ac167789b4..ccfb4727bf02b2 100644
--- a/packages/web-components/src/card/card.stories.ts
+++ b/packages/web-components/src/card/card.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import CardTemplate from './fixtures/card.html';
-import { FASTCard } from './';
+import { FluentCard } from './';
 
 // Prevent tree-shaking
-FASTCard;
-FASTDesignSystemProvider;
+FluentCard;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Card',
diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html
index 2f8f4466f7bc3d..226e0175a242e9 100644
--- a/packages/web-components/src/card/fixtures/card.html
+++ b/packages/web-components/src/card/fixtures/card.html
@@ -1,4 +1,4 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <style>
     .class-override {
       height: 163px;
@@ -10,14 +10,14 @@
     }
   </style>
   <div>
-    <fast-card style="--card-height: 400px; --card-width: 500px;">
+    <fluent-card style="--card-height: 400px; --card-width: 500px;">
       Card with text
-    </fast-card>
+    </fluent-card>
     <br />
-    <fast-card class="class-override" style="--elevation: 12;">
+    <fluent-card class="class-override" style="--elevation: 12;">
       Custom depth with class-based height/width
-    </fast-card>
+    </fluent-card>
     <br />
-    <fast-card class="state-override">Custom depth on hover using CSS</fast-card>
+    <fluent-card class="state-override">Custom depth on hover using CSS</fluent-card>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
index 68adbd19885c7b..81daae674d3d41 100644
--- a/packages/web-components/src/card/index.ts
+++ b/packages/web-components/src/card/index.ts
@@ -3,20 +3,20 @@ import { Card, CardTemplate as template } from '@microsoft/fast-foundation';
 import { CardStyles as styles } from './card.styles';
 
 /**
- * The FAST Card Element. Implements {@link @microsoft/fast-foundation#Card},
+ * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
  * {@link @microsoft/fast-foundation#CardTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-card\>
+ * HTML Element: \<fluent-card\>
  */
 @customElement({
-  name: 'fast-card',
+  name: 'fluent-card',
   template,
   styles,
 })
-export class FASTCard extends Card {}
+export class FluentCard extends Card {}
 
 /**
  * Styles for Card
diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts
index 93325ed9b3f8ac..0af0181ed66aea 100644
--- a/packages/web-components/src/checkbox/checkbox.stories.ts
+++ b/packages/web-components/src/checkbox/checkbox.stories.ts
@@ -1,12 +1,12 @@
 import { STORY_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/checkbox.html';
-import { FASTCheckbox } from './';
+import { FluentCheckbox } from './';
 
 // Prevent tree-shaking
-FASTCheckbox;
-FASTDesignSystemProvider;
+FluentCheckbox;
+FluentDesignSystemProvider;
 
 addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
   if (name.toLowerCase().startsWith('checkbox')) {
@@ -16,7 +16,7 @@ addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
 
 function setIndeterminate(): void {
   document.querySelectorAll('.flag-indeterminate').forEach(el => {
-    if (el instanceof FASTCheckbox) {
+    if (el instanceof FluentCheckbox) {
       el.indeterminate = true;
     }
   });
diff --git a/packages/web-components/src/checkbox/fixtures/checkbox.html b/packages/web-components/src/checkbox/fixtures/checkbox.html
index d4ef7925123f37..b3169b3ed53c71 100644
--- a/packages/web-components/src/checkbox/fixtures/checkbox.html
+++ b/packages/web-components/src/checkbox/fixtures/checkbox.html
@@ -1,50 +1,50 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Checkbox</h1>
   <h4>Default</h4>
-  <fast-checkbox></fast-checkbox>
-  <fast-checkbox>label</fast-checkbox>
+  <fluent-checkbox></fluent-checkbox>
+  <fluent-checkbox>label</fluent-checkbox>
 
   <h4>Checked</h4>
-  <fast-checkbox checked></fast-checkbox>
+  <fluent-checkbox checked></fluent-checkbox>
 
   <!-- Required -->
   <h4>Required</h4>
-  <fast-checkbox required></fast-checkbox>
+  <fluent-checkbox required></fluent-checkbox>
 
   <h4>Indeterminate</h4>
-  <fast-checkbox class="flag-indeterminate">Unchecked</fast-checkbox>
-  <fast-checkbox checked class="flag-indeterminate">Checked</fast-checkbox>
+  <fluent-checkbox class="flag-indeterminate">Unchecked</fluent-checkbox>
+  <fluent-checkbox checked class="flag-indeterminate">Checked</fluent-checkbox>
 
   <!-- Disabled -->
   <h4>Disabled</h4>
-  <fast-checkbox disabled></fast-checkbox>
-  <fast-checkbox disabled>label</fast-checkbox>
-  <fast-checkbox disabled checked>checked</fast-checkbox>
-  <fast-checkbox disabled checked class="flag-indeterminate">
+  <fluent-checkbox disabled></fluent-checkbox>
+  <fluent-checkbox disabled>label</fluent-checkbox>
+  <fluent-checkbox disabled checked>checked</fluent-checkbox>
+  <fluent-checkbox disabled checked class="flag-indeterminate">
     Indeterminate checked
-  </fast-checkbox>
-  <fast-checkbox disabled class="flag-indeterminate">
+  </fluent-checkbox>
+  <fluent-checkbox disabled class="flag-indeterminate">
     Indeterminate unchecked
-  </fast-checkbox>
+  </fluent-checkbox>
 
   <h4>Inline</h4>
-  <fast-checkbox checked>Apples</fast-checkbox>
-  <fast-checkbox checked>Bananas</fast-checkbox>
-  <fast-checkbox>Honeydew</fast-checkbox>
-  <fast-checkbox checked>Oranges</fast-checkbox>
+  <fluent-checkbox checked>Apples</fluent-checkbox>
+  <fluent-checkbox checked>Bananas</fluent-checkbox>
+  <fluent-checkbox>Honeydew</fluent-checkbox>
+  <fluent-checkbox checked>Oranges</fluent-checkbox>
 
   <h4>Vertical</h4>
   <fieldset style="display: flex; flex-direction: column; align-items: start;">
     <legend>Fruit</legend>
-    <fast-checkbox checked>Apples</fast-checkbox>
-    <fast-checkbox checked>Bananas</fast-checkbox>
-    <fast-checkbox>Honeydew</fast-checkbox>
-    <fast-checkbox checked>Oranges</fast-checkbox>
+    <fluent-checkbox checked>Apples</fluent-checkbox>
+    <fluent-checkbox checked>Bananas</fluent-checkbox>
+    <fluent-checkbox>Honeydew</fluent-checkbox>
+    <fluent-checkbox checked>Oranges</fluent-checkbox>
   </fieldset>
 
   <h4>Visual vs audio label</h4>
-  <fast-checkbox>
+  <fluent-checkbox>
     <span aria-label="Audio label">Visible label</span>
-  </fast-checkbox>
+  </fluent-checkbox>
   <!-- With label -->
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts
index 66a7ed1abb1e10..f28032f04df77d 100644
--- a/packages/web-components/src/checkbox/index.ts
+++ b/packages/web-components/src/checkbox/index.ts
@@ -3,20 +3,20 @@ import { Checkbox, CheckboxTemplate as template } from '@microsoft/fast-foundati
 import { CheckboxStyles as styles } from './checkbox.styles';
 
 /**
- * The FAST Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
+ * The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
  * {@link @microsoft/fast-foundation#CheckboxTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-checkbox\>
+ * HTML Element: \<fluent-checkbox\>
  */
 @customElement({
-  name: 'fast-checkbox',
+  name: 'fluent-checkbox',
   template,
   styles,
 })
-export class FASTCheckbox extends Checkbox {}
+export class FluentCheckbox extends Checkbox {}
 
 /**
  * Styles for Checkbox
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index 480cf1388c50f9..a5636f5cc95319 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -18,7 +18,7 @@ import { DesignSystemProviderStyles as styles } from './design-system-provider.s
 const color = new CSSCustomPropertyBehavior(
   'neutral-foreground-rest',
   neutralForegroundRest,
-  (el: FASTDesignSystemProvider) => el,
+  (el: FluentDesignSystemProvider) => el,
 );
 
 const backgroundStyles = css`
@@ -29,20 +29,20 @@ const backgroundStyles = css`
 `.withBehaviors(color);
 
 /**
- * The FAST DesignSystemProvider Element. Implements {@link @microsoft/fast-foundation#DesignSystemProvider},
+ * The Fluent DesignSystemProvider Element. Implements {@link @microsoft/fast-foundation#DesignSystemProvider},
  * {@link @microsoft/fast-foundation#DesignSystemProviderTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-design-system-provider\>
+ * HTML Element: \<fluent-design-system-provider\>
  */
 @designSystemProvider({
-  name: 'fast-design-system-provider',
+  name: 'fluent-design-system-provider',
   template,
   styles,
 })
-export class FASTDesignSystemProvider extends DesignSystemProvider
+export class FluentDesignSystemProvider extends DesignSystemProvider
   implements
     Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'> {
   /**
diff --git a/packages/web-components/src/dialog/dialog.stories.ts b/packages/web-components/src/dialog/dialog.stories.ts
index 670cf035ed6ea5..a49d0138a8b083 100644
--- a/packages/web-components/src/dialog/dialog.stories.ts
+++ b/packages/web-components/src/dialog/dialog.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import DialogTemplate from './fixtures/dialog.html';
-import { FASTDialog } from './';
+import { FluentDialog } from './';
 
 // Prevent tree-shaking
-FASTDialog;
-FASTDesignSystemProvider;
+FluentDialog;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Dialog',
diff --git a/packages/web-components/src/dialog/fixtures/dialog.html b/packages/web-components/src/dialog/fixtures/dialog.html
index c598a1d7fe735a..61e05875b3b050 100644
--- a/packages/web-components/src/dialog/fixtures/dialog.html
+++ b/packages/web-components/src/dialog/fixtures/dialog.html
@@ -1,12 +1,12 @@
-<fast-design-system-provider use-defaults>
-  <!-- <fast-dialog hidden>Hidden dialog with text</fast-dialog> -->
-  <!-- <fast-dialog id="foo" aria-labelledby="heading" modal="true">
+<fluent-design-system-provider use-defaults>
+  <!-- <fluent-dialog hidden>Hidden dialog with text</fluent-dialog> -->
+  <!-- <fluent-dialog id="foo" aria-labelledby="heading" modal="true">
         <h2 id="heading">Dialog with aria-labelledby support</h2>
         <button>Button (should autofocus)</button>
-    </fast-dialog> -->
-  <fast-dialog id="foo" aria-label="Simple dialog" modal="true">
+    </fluent-dialog> -->
+  <fluent-dialog id="foo" aria-label="Simple dialog" modal="true">
     <h2>Dialog with text and button. The button should recieve focus</h2>
     <button>Button A</button>
     <button id="element" autofocus>Should autofocus</button>
-  </fast-dialog>
-</fast-design-system-provider>
+  </fluent-dialog>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts
index 1ec9b4f8f97417..8e40d9f35d98dc 100644
--- a/packages/web-components/src/dialog/index.ts
+++ b/packages/web-components/src/dialog/index.ts
@@ -3,20 +3,20 @@ import { Dialog, DialogTemplate as template } from '@microsoft/fast-foundation';
 import { DialogStyles as styles } from './dialog.styles';
 
 /**
- * The FAST Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog},
+ * The Fluent Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog},
  * {@link @microsoft/fast-foundation#DialogTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-dialog\>
+ * HTML Element: \<fluent-dialog\>
  */
 @customElement({
-  name: 'fast-dialog',
+  name: 'fluent-dialog',
   template,
   styles,
 })
-export class FASTDialog extends Dialog {}
+export class FluentDialog extends Dialog {}
 
 /**
  * Styles for Dialog
diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts
index a0b7b8c11ad707..effff417607cdf 100644
--- a/packages/web-components/src/divider/divider.stories.ts
+++ b/packages/web-components/src/divider/divider.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import DividerTemplate from './fixtures/divider.html';
-import { FASTDivider } from './';
+import { FluentDivider } from './';
 
 // Prevent tree-shaking
-FASTDivider;
-FASTDesignSystemProvider;
+FluentDivider;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Divider',
diff --git a/packages/web-components/src/divider/fixtures/divider.html b/packages/web-components/src/divider/fixtures/divider.html
index 35721937a5c0d6..1691a05e69d7f8 100644
--- a/packages/web-components/src/divider/fixtures/divider.html
+++ b/packages/web-components/src/divider/fixtures/divider.html
@@ -1,8 +1,8 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Divider</h1>
   <h4>Default</h4>
-  <fast-divider></fast-divider>
+  <fluent-divider></fluent-divider>
 
   <h4>Presentation</h4>
-  <fast-divider role="presentation"></fast-divider>
-</fast-design-system-provider>
+  <fluent-divider role="presentation"></fluent-divider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts
index f1eb5b58c6cbb9..c3dff67fc6707b 100644
--- a/packages/web-components/src/divider/index.ts
+++ b/packages/web-components/src/divider/index.ts
@@ -3,20 +3,20 @@ import { Divider, DividerTemplate as template } from '@microsoft/fast-foundation
 import { DividerStyles as styles } from './divider.styles';
 
 /**
- * The FAST Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
+ * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
  * {@link @microsoft/fast-foundation#DividerTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-divider\>
+ * HTML Element: \<fluent-divider\>
  */
 @customElement({
-  name: 'fast-divider',
+  name: 'fluent-divider',
   template,
   styles,
 })
-export class FASTDivider extends Divider {}
+export class FluentDivider extends Divider {}
 
 /**
  * Styles for Divider
diff --git a/packages/web-components/src/flipper/fixtures/flipper.html b/packages/web-components/src/flipper/fixtures/flipper.html
index e32b2736a11cb7..d9149fedb6c845 100644
--- a/packages/web-components/src/flipper/fixtures/flipper.html
+++ b/packages/web-components/src/flipper/fixtures/flipper.html
@@ -1,35 +1,35 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Flipper</h1>
   <h4>Default</h4>
-  <fast-flipper></fast-flipper>
+  <fluent-flipper></fluent-flipper>
 
   <h4>Previous</h4>
-  <fast-flipper direction="previous"></fast-flipper>
+  <fluent-flipper direction="previous"></fluent-flipper>
 
   <h4>Previous with slotted content</h4>
-  <fast-flipper direction="previous">
+  <fluent-flipper direction="previous">
     <svg slot="previous" 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"
       />
     </svg>
-  </fast-flipper>
+  </fluent-flipper>
 
   <h4>Next</h4>
-  <fast-flipper direction="next"></fast-flipper>
+  <fluent-flipper direction="next"></fluent-flipper>
 
   <h4>Next with slotted content</h4>
-  <fast-flipper direction="next">
+  <fluent-flipper direction="next">
     <svg slot="next" 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"
       />
     </svg>
-  </fast-flipper>
+  </fluent-flipper>
 
   <h4>With aria-hidden</h4>
-  <fast-flipper aria-hidden="false"></fast-flipper>
+  <fluent-flipper aria-hidden="false"></fluent-flipper>
 
   <h4>Disabled</h4>
-  <fast-flipper disabled></fast-flipper>
-</fast-design-system-provider>
+  <fluent-flipper disabled></fluent-flipper>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/flipper/flipper.stories.ts b/packages/web-components/src/flipper/flipper.stories.ts
index 9e2b0087e55804..3bcde2cf7d4a88 100644
--- a/packages/web-components/src/flipper/flipper.stories.ts
+++ b/packages/web-components/src/flipper/flipper.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import FlipperTemplate from './fixtures/flipper.html';
-import { FASTFlipper } from './';
+import { FluentFlipper } from './';
 
 // Prevent tree-shaking
-FASTFlipper;
-FASTDesignSystemProvider;
+FluentFlipper;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Flipper',
diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts
index b3badca7d36fd4..b8f43daad76a86 100644
--- a/packages/web-components/src/flipper/index.ts
+++ b/packages/web-components/src/flipper/index.ts
@@ -3,20 +3,20 @@ import { Flipper, FlipperTemplate as template } from '@microsoft/fast-foundation
 import { FlipperStyles as styles } from './flipper.styles';
 
 /**
- * The FAST Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
+ * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
  * {@link @microsoft/fast-foundation#FlipperTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-flipper\>
+ * HTML Element: \<fluent-flipper\>
  */
 @customElement({
-  name: 'fast-flipper',
+  name: 'fluent-flipper',
   template,
   styles,
 })
-export class FASTFlipper extends Flipper {}
+export class FluentFlipper extends Flipper {}
 
 /**
  * Styles for Flipper
diff --git a/packages/web-components/src/menu-item/fixtures/menu-item.html b/packages/web-components/src/menu-item/fixtures/menu-item.html
index 015302360e0c6a..a8327cd16fdf57 100644
--- a/packages/web-components/src/menu-item/fixtures/menu-item.html
+++ b/packages/web-components/src/menu-item/fixtures/menu-item.html
@@ -1,14 +1,14 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Menu Item</h1>
 
   <h4>Default (menuitem)</h4>
-  <fast-menu-item>Menu item 1</fast-menu-item>
+  <fluent-menu-item>Menu item 1</fluent-menu-item>
 
   <h4>Disabled</h4>
-  <fast-menu-item disabled>Menu item 1</fast-menu-item>
+  <fluent-menu-item disabled>Menu item 1</fluent-menu-item>
 
   <h4>Disabled Start End</h4>
-  <fast-menu-item disabled>
+  <fluent-menu-item disabled>
     <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"
@@ -20,42 +20,42 @@ <h4>Disabled Start End</h4>
         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"
       />
     </svg>
-  </fast-menu-item>
+  </fluent-menu-item>
 
   <h4>menuitemcheckbox</h4>
-  <fast-menu-item role="menuitemcheckbox">Menu item 1</fast-menu-item>
+  <fluent-menu-item role="menuitemcheckbox">Menu item 1</fluent-menu-item>
 
   <h5>checked</h5>
-  <fast-menu-item checked="true" role="menuitemcheckbox">Menu item 1</fast-menu-item>
+  <fluent-menu-item checked="true" role="menuitemcheckbox">Menu item 1</fluent-menu-item>
 
   <h4>menuitemradio</h4>
-  <fast-menu-item role="menuitemradio">Menu item 1</fast-menu-item>
+  <fluent-menu-item role="menuitemradio">Menu item 1</fluent-menu-item>
 
   <h5>checked</h5>
-  <fast-menu-item checked="true" role="menuitemradio">Menu item 1</fast-menu-item>
+  <fluent-menu-item checked="true" role="menuitemradio">Menu item 1</fluent-menu-item>
 
   <h4>Start</h4>
-  <fast-menu-item>
+  <fluent-menu-item>
     <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"
       />
     </svg>
     Menu item 1
-  </fast-menu-item>
+  </fluent-menu-item>
 
   <h4>End</h4>
-  <fast-menu-item>
+  <fluent-menu-item>
     Menu item 1
     <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"
       />
     </svg>
-  </fast-menu-item>
+  </fluent-menu-item>
 
   <h4>Complex content layout</h4>
-  <fast-menu-item>
+  <fluent-menu-item>
     <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"
@@ -67,5 +67,5 @@ <h4>Complex content layout</h4>
         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"
       />
     </svg>
-  </fast-menu-item>
-</fast-design-system-provider>
+  </fluent-menu-item>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
index 678ea9d198772c..bce366f8be308b 100644
--- a/packages/web-components/src/menu-item/index.ts
+++ b/packages/web-components/src/menu-item/index.ts
@@ -3,20 +3,20 @@ import { MenuItem, MenuItemTemplate as template } from '@microsoft/fast-foundati
 import { MenuItemStyles as styles } from './menu-item.styles';
 
 /**
- * The FAST Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem},
+ * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem},
  * {@link @microsoft/fast-foundation#MenuItemTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-menu-item\>
+ * HTML Element: \<fluent-menu-item\>
  */
 @customElement({
-  name: 'fast-menu-item',
+  name: 'fluent-menu-item',
   template,
   styles,
 })
-export class FASTMenuItem extends MenuItem {}
+export class FluentMenuItem extends MenuItem {}
 
 /**
  * Styles for MenuItem
diff --git a/packages/web-components/src/menu-item/menu-item.stories.ts b/packages/web-components/src/menu-item/menu-item.stories.ts
index 167898b5c9b487..407186adda2f5f 100644
--- a/packages/web-components/src/menu-item/menu-item.stories.ts
+++ b/packages/web-components/src/menu-item/menu-item.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import MenuItemTemplate from './fixtures/menu-item.html';
-import { FASTMenuItem } from '.';
+import { FluentMenuItem } from '.';
 
 // Prevent tree-shaking
-FASTMenuItem;
-FASTDesignSystemProvider;
+FluentMenuItem;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Menu item',
diff --git a/packages/web-components/src/menu/fixtures/menu.html b/packages/web-components/src/menu/fixtures/menu.html
index c41bbd701bef77..b2e7afc5d344c2 100644
--- a/packages/web-components/src/menu/fixtures/menu.html
+++ b/packages/web-components/src/menu/fixtures/menu.html
@@ -1,19 +1,19 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Menu</h1>
   <h4>Default</h4>
-  <fast-menu>
-    <fast-menu-item>Menu item 1</fast-menu-item>
-    <fast-menu-item>Menu item 2</fast-menu-item>
-    <fast-menu-item>Menu item 3</fast-menu-item>
-  </fast-menu>
+  <fluent-menu>
+    <fluent-menu-item>Menu item 1</fluent-menu-item>
+    <fluent-menu-item>Menu item 2</fluent-menu-item>
+    <fluent-menu-item>Menu item 3</fluent-menu-item>
+  </fluent-menu>
 
   <h4>With seperator</h4>
-  <fast-menu>
-    <fast-menu-item role="menuitem">Menu item 1</fast-menu-item>
-    <fast-menu-item role="menuitem">Menu item 2</fast-menu-item>
+  <fluent-menu>
+    <fluent-menu-item role="menuitem">Menu item 1</fluent-menu-item>
+    <fluent-menu-item role="menuitem">Menu item 2</fluent-menu-item>
     <hr />
-    <fast-menu-item role="menuitem">Menu item 3</fast-menu-item>
-    <fast-menu-item>
+    <fluent-menu-item role="menuitem">Menu item 3</fluent-menu-item>
+    <fluent-menu-item>
       <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"
@@ -25,13 +25,13 @@ <h4>With seperator</h4>
           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"
         />
       </svg>
-    </fast-menu-item>
-  </fast-menu>
+    </fluent-menu-item>
+  </fluent-menu>
 
   <h4>With standard elements</h4>
-  <fast-menu>
+  <fluent-menu>
     <div role="menuitem">Menu item 1</div>
     <div role="menuitem">Menu item 2</div>
     <div role="menuitem">Menu item 3</div>
-  </fast-menu>
-</fast-design-system-provider>
+  </fluent-menu>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts
index 6ff89c85af5625..f69e7e8c04685e 100644
--- a/packages/web-components/src/menu/index.ts
+++ b/packages/web-components/src/menu/index.ts
@@ -3,20 +3,20 @@ import { Menu, MenuTemplate as template } from '@microsoft/fast-foundation';
 import { MenuStyles as styles } from './menu.styles';
 
 /**
- * The FAST Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
+ * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
  * {@link @microsoft/fast-foundation#MenuTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-menu\>
+ * HTML Element: \<fluent-menu\>
  */
 @customElement({
-  name: 'fast-menu',
+  name: 'fluent-menu',
   template,
   styles,
 })
-export class FASTMenu extends Menu {}
+export class FluentMenu extends Menu {}
 
 /**
  * Styles for Menu
diff --git a/packages/web-components/src/menu/menu.stories.ts b/packages/web-components/src/menu/menu.stories.ts
index ec959350ea4de6..f8964e228cd5c1 100644
--- a/packages/web-components/src/menu/menu.stories.ts
+++ b/packages/web-components/src/menu/menu.stories.ts
@@ -1,12 +1,12 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
-import { FASTMenuItem } from '../menu-item';
+import { FluentDesignSystemProvider } from '../design-system-provider';
+import { FluentMenuItem } from '../menu-item';
 import MenuTemplate from './fixtures/menu.html';
-import { FASTMenu } from '.';
+import { FluentMenu } from '.';
 
 // Prevent tree-shaking
-FASTMenu;
-FASTMenuItem;
-FASTDesignSystemProvider;
+FluentMenu;
+FluentMenuItem;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Menu',
diff --git a/packages/web-components/src/progress/progress-ring/fixtures/circular.html b/packages/web-components/src/progress/progress-ring/fixtures/circular.html
index eced783556aca8..29058725197034 100644
--- a/packages/web-components/src/progress/progress-ring/fixtures/circular.html
+++ b/packages/web-components/src/progress/progress-ring/fixtures/circular.html
@@ -1,24 +1,24 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Progress ring</h1>
   <h4>Default</h4>
-  <fast-progress-ring min="0" max="100" value="75"></fast-progress-ring>
-  <fast-progress-ring></fast-progress-ring>
+  <fluent-progress-ring min="0" max="100" value="75"></fluent-progress-ring>
+  <fluent-progress-ring></fluent-progress-ring>
   <h4>Paused</h4>
-  <fast-progress-ring paused="true" min="0" max="100" value="75"></fast-progress-ring>
-  <fast-progress-ring paused="true"></fast-progress-ring>
+  <fluent-progress-ring paused="true" min="0" max="100" value="75"></fluent-progress-ring>
+  <fluent-progress-ring paused="true"></fluent-progress-ring>
   <h4>Custom Sizes</h4>
   <div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
-    <fast-progress-ring min="0" max="100" value="20"></fast-progress-ring>
-    <fast-progress-ring min="0" max="100" value="40" style="width: 42px; height: 42px;"></fast-progress-ring>
-    <fast-progress-ring min="0" max="100" value="60" style="width: 62px; height: 62px;"></fast-progress-ring>
-    <fast-progress-ring min="0" max="100" value="80" style="width: 82px; height: 82px;"></fast-progress-ring>
-    <fast-progress-ring min="0" max="100" value="100" style="width: 102px; height: 102px;"></fast-progress-ring>
+    <fluent-progress-ring min="0" max="100" value="20"></fluent-progress-ring>
+    <fluent-progress-ring min="0" max="100" value="40" style="width: 42px; height: 42px;"></fluent-progress-ring>
+    <fluent-progress-ring min="0" max="100" value="60" style="width: 62px; height: 62px;"></fluent-progress-ring>
+    <fluent-progress-ring min="0" max="100" value="80" style="width: 82px; height: 82px;"></fluent-progress-ring>
+    <fluent-progress-ring min="0" max="100" value="100" style="width: 102px; height: 102px;"></fluent-progress-ring>
   </div>
   <div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
-    <fast-progress-ring></fast-progress-ring>
-    <fast-progress-ring style="width: 42px; height: 42px;"></fast-progress-ring>
-    <fast-progress-ring style="width: 62px; height: 62px;"></fast-progress-ring>
-    <fast-progress-ring style="width: 82px; height: 82px;"></fast-progress-ring>
-    <fast-progress-ring style="width: 102px; height: 102px;"></fast-progress-ring>
+    <fluent-progress-ring></fluent-progress-ring>
+    <fluent-progress-ring style="width: 42px; height: 42px;"></fluent-progress-ring>
+    <fluent-progress-ring style="width: 62px; height: 62px;"></fluent-progress-ring>
+    <fluent-progress-ring style="width: 82px; height: 82px;"></fluent-progress-ring>
+    <fluent-progress-ring style="width: 102px; height: 102px;"></fluent-progress-ring>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts
index e6ce9ae0b5addc..b19118a9365777 100644
--- a/packages/web-components/src/progress/progress-ring/index.ts
+++ b/packages/web-components/src/progress/progress-ring/index.ts
@@ -3,20 +3,20 @@ import { BaseProgress, ProgressRingTemplate as template } from '@microsoft/fast-
 import { ProgressRingStyles as styles } from './progress-ring.styles';
 
 /**
- * The FAST Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
+ * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
  * {@link @microsoft/fast-foundation#ProgressRingTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-progress-ring\>
+ * HTML Element: \<fluent-progress-ring\>
  */
 @customElement({
-  name: 'fast-progress-ring',
+  name: 'fluent-progress-ring',
   template,
   styles,
 })
-export class FASTProgressRing extends BaseProgress {}
+export class FluentProgressRing extends BaseProgress {}
 
 /**
  * Styles for ProgressRing
diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
index 938746600b649b..f37be0094c1a6e 100644
--- a/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
+++ b/packages/web-components/src/progress/progress-ring/progress-ring.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../../design-system-provider';
+import { FluentDesignSystemProvider } from '../../design-system-provider';
 import Examples from './fixtures/circular.html';
-import { FASTProgressRing } from './';
+import { FluentProgressRing } from './';
 
 // Prevent tree-shaking
-FASTProgressRing;
-FASTDesignSystemProvider;
+FluentProgressRing;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Progress Ring',
diff --git a/packages/web-components/src/progress/progress/fixtures/linear.html b/packages/web-components/src/progress/progress/fixtures/linear.html
index aeac7173c83f24..b4b21d0795f5ae 100644
--- a/packages/web-components/src/progress/progress/fixtures/linear.html
+++ b/packages/web-components/src/progress/progress/fixtures/linear.html
@@ -1,26 +1,26 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Progress</h1>
   <h4>Default</h4>
   <div style="width: 300px;">
-    <fast-progress min="0" max="100" value="75"></fast-progress>
-    <fast-progress></fast-progress>
+    <fluent-progress min="0" max="100" value="75"></fluent-progress>
+    <fluent-progress></fluent-progress>
   </div>
   <h4>Paused</h4>
   <div style="width: 300px;">
-    <fast-progress paused="true" min="0" max="100" value="75"></fast-progress>
-    <fast-progress paused="true"></fast-progress>
+    <fluent-progress paused="true" min="0" max="100" value="75"></fluent-progress>
+    <fluent-progress paused="true"></fluent-progress>
   </div>
   <h4>Custom Sizes</h4>
   <div style="width: 300px;">
-    <fast-progress min="0" max="100" value="20"></fast-progress>
-    <fast-progress min="0" max="100" value="40" style="height: 8px;"></fast-progress>
-    <fast-progress min="0" max="100" value="60" style="height: 12px;"></fast-progress>
-    <fast-progress min="0" max="100" value="80" style="height: 16px;"></fast-progress>
-    <fast-progress min="0" max="100" value="100" style="height: 20px;"></fast-progress>
-    <fast-progress></fast-progress>
-    <fast-progress style="height: 8px;"></fast-progress>
-    <fast-progress style="height: 12px;"></fast-progress>
-    <fast-progress style="height: 16px;"></fast-progress>
-    <fast-progress style="height: 20px;"></fast-progress>
+    <fluent-progress min="0" max="100" value="20"></fluent-progress>
+    <fluent-progress min="0" max="100" value="40" style="height: 8px;"></fluent-progress>
+    <fluent-progress min="0" max="100" value="60" style="height: 12px;"></fluent-progress>
+    <fluent-progress min="0" max="100" value="80" style="height: 16px;"></fluent-progress>
+    <fluent-progress min="0" max="100" value="100" style="height: 20px;"></fluent-progress>
+    <fluent-progress></fluent-progress>
+    <fluent-progress style="height: 8px;"></fluent-progress>
+    <fluent-progress style="height: 12px;"></fluent-progress>
+    <fluent-progress style="height: 16px;"></fluent-progress>
+    <fluent-progress style="height: 20px;"></fluent-progress>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts
index 8eaa5d30189a01..feac425966c499 100644
--- a/packages/web-components/src/progress/progress/index.ts
+++ b/packages/web-components/src/progress/progress/index.ts
@@ -3,20 +3,20 @@ import { BaseProgress, ProgressTemplate as template } from '@microsoft/fast-foun
 import { ProgressStyles as styles } from './progress.styles';
 
 /**
- * The FAST Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
+ * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
  * {@link @microsoft/fast-foundation#ProgressTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-progress\>
+ * HTML Element: \<fluent-progress\>
  */
 @customElement({
-  name: 'fast-progress',
+  name: 'fluent-progress',
   template,
   styles,
 })
-export class FASTProgress extends BaseProgress {}
+export class FluentProgress extends BaseProgress {}
 
 /**
  * Styles for Progress
diff --git a/packages/web-components/src/progress/progress/progress.stories.ts b/packages/web-components/src/progress/progress/progress.stories.ts
index 8f8f9b04d85793..df5d36b4a4f41e 100644
--- a/packages/web-components/src/progress/progress/progress.stories.ts
+++ b/packages/web-components/src/progress/progress/progress.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../../design-system-provider';
+import { FluentDesignSystemProvider } from '../../design-system-provider';
 import Examples from './fixtures/linear.html';
-import { FASTProgress } from './';
+import { FluentProgress } from './';
 
 // Prevent tree-shaking
-FASTProgress;
-FASTDesignSystemProvider;
+FluentProgress;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Progress',
diff --git a/packages/web-components/src/radio-group/fixtures/radio-group.html b/packages/web-components/src/radio-group/fixtures/radio-group.html
index c5fe764d5445fd..23bf22dc301ffb 100644
--- a/packages/web-components/src/radio-group/fixtures/radio-group.html
+++ b/packages/web-components/src/radio-group/fixtures/radio-group.html
@@ -1,52 +1,52 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Radio Group</h1>
 
   <h4>Defaults</h4>
   <div>
-    <fast-radio-group name="numbers">
+    <fluent-radio-group name="numbers">
       <label style="color: --var(neutral-foreground-rest);" slot="label">
         Numbers
       </label>
-      <fast-radio value="one">One</fast-radio>
-      <fast-radio value="two">Two</fast-radio>
-    </fast-radio-group>
+      <fluent-radio value="one">One</fluent-radio>
+      <fluent-radio value="two">Two</fluent-radio>
+    </fluent-radio-group>
   </div>
 
   <h4>Single radio</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
-    <fast-radio-group name="players">
+    <fluent-radio-group name="players">
       <label style="color: --var(neutral-foreground-rest);" slot="label">
         Best basketball players
       </label>
-      <fast-radio value="airjordan">Michael Jordan</fast-radio>
-    </fast-radio-group>
+      <fluent-radio value="airjordan">Michael Jordan</fluent-radio>
+    </fluent-radio-group>
   </div>
 
   <h4>With label outside group</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label1">Outside label</label>
-    <fast-radio-group required="true" aria-labelledby="label1" name="fruits">
-      <fast-radio value="apples">Apples</fast-radio>
-      <fast-radio value="oranges">Oranges</fast-radio>
-      <fast-radio value="bananas">Bananas</fast-radio>
-      <fast-radio value="kiwi">Kiwi</fast-radio>
-      <fast-radio value="grapefruit">Grapefruit</fast-radio>
-      <fast-radio value="mango">Mango</fast-radio>
-      <fast-radio value="blueberries">Blueberries</fast-radio>
-      <fast-radio value="strawberries">Strawberries</fast-radio>
-      <fast-radio value="pineapple">Pineapple</fast-radio>
-    </fast-radio-group>
+    <fluent-radio-group required="true" aria-labelledby="label1" name="fruits">
+      <fluent-radio value="apples">Apples</fluent-radio>
+      <fluent-radio value="oranges">Oranges</fluent-radio>
+      <fluent-radio value="bananas">Bananas</fluent-radio>
+      <fluent-radio value="kiwi">Kiwi</fluent-radio>
+      <fluent-radio value="grapefruit">Grapefruit</fluent-radio>
+      <fluent-radio value="mango">Mango</fluent-radio>
+      <fluent-radio value="blueberries">Blueberries</fluent-radio>
+      <fluent-radio value="strawberries">Strawberries</fluent-radio>
+      <fluent-radio value="pineapple">Pineapple</fluent-radio>
+    </fluent-radio-group>
   </div>
 
   <h4>Within toolbar</h4>
   <div role="toolbar" style="display: flex; flex-direction: column; margin-top: 12px;">
     <div style="display: flex; flex-direction: row; align-items: stretch; width: 100%;">
       <button style="width: 40px; margin-right: 4px;">go</button>
-      <fast-radio-group required="true" name="navigation">
-        <fast-radio value="back">back</fast-radio>
-        <fast-radio value="forward">forward</fast-radio>
-        <fast-radio value="refresh">refresh</fast-radio>
-      </fast-radio-group>
+      <fluent-radio-group required="true" name="navigation">
+        <fluent-radio value="back">back</fluent-radio>
+        <fluent-radio value="forward">forward</fluent-radio>
+        <fluent-radio value="refresh">refresh</fluent-radio>
+      </fluent-radio-group>
       <button style="width: 40px; margin-left: 4px;">stop</button>
     </div>
   </div>
@@ -54,29 +54,29 @@ <h4>Within toolbar</h4>
   <h4>Disabled</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label2">Disabled radio group</label>
-    <fast-radio-group disabled aria-labelledby="label2" name="cars">
-      <fast-radio value="lambo">Lamborghini</fast-radio>
-      <fast-radio value="ferari">Ferari</fast-radio>
-    </fast-radio-group>
+    <fluent-radio-group disabled aria-labelledby="label2" name="cars">
+      <fluent-radio value="lambo">Lamborghini</fluent-radio>
+      <fluent-radio value="ferari">Ferari</fluent-radio>
+    </fluent-radio-group>
   </div>
 
   <h4>Readonly</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label3">readonly radio group</label>
-    <fast-radio-group readonly aria-labelledby="label3" name="office">
-      <fast-radio value="word">Word</fast-radio>
-      <fast-radio value="excel">Excel</fast-radio>
-    </fast-radio-group>
+    <fluent-radio-group readonly aria-labelledby="label3" name="office">
+      <fluent-radio value="word">Word</fluent-radio>
+      <fluent-radio value="excel">Excel</fluent-radio>
+    </fluent-radio-group>
   </div>
 
   <h4>Preset value</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label4">Preset selected-value</label>
-    <fast-radio-group value="maverick" aria-labelledby="label4" name="best-pilot">
-      <fast-radio value="ice-man">Ice Man</fast-radio>
-      <fast-radio value="maverick">Maverick</fast-radio>
-      <fast-radio value="viper">Viper</fast-radio>
-      <fast-radio value="jester">Jester</fast-radio>
-    </fast-radio-group>
+    <fluent-radio-group value="maverick" aria-labelledby="label4" name="best-pilot">
+      <fluent-radio value="ice-man">Ice Man</fluent-radio>
+      <fluent-radio value="maverick">Maverick</fluent-radio>
+      <fluent-radio value="viper">Viper</fluent-radio>
+      <fluent-radio value="jester">Jester</fluent-radio>
+    </fluent-radio-group>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 07e20ad8b2fef0..8037da367cb2f3 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -3,20 +3,20 @@ import { RadioGroup, RadioGroupTemplate as template } from '@microsoft/fast-foun
 import { RadioGroupStyles as styles } from './radio-group.styles';
 
 /**
- * The FAST Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
+ * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
  * {@link @microsoft/fast-foundation#RadioGroupTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-radio-group\>
+ * HTML Element: \<fluent-radio-group\>
  */
 @customElement({
-  name: 'fast-radio-group',
+  name: 'fluent-radio-group',
   template,
   styles,
 })
-export class FASTRadioGroup extends RadioGroup {}
+export class FluentRadioGroup extends RadioGroup {}
 
 /**
  * Styles for RadioGroup
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index b23e405ba0d58a..0f87c941624239 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/radio-group.html';
-import { FASTRadioGroup } from './';
+import { FluentRadioGroup } from './';
 
 // Prevent tree-shaking
-FASTRadioGroup;
-FASTDesignSystemProvider;
+FluentRadioGroup;
+FluentDesignSystemProvider;
 
 export default {
   title: 'RadioGroup',
diff --git a/packages/web-components/src/radio/fixtures/radio.html b/packages/web-components/src/radio/fixtures/radio.html
index 6acfd6a11a089f..4817b0269e6d7e 100644
--- a/packages/web-components/src/radio/fixtures/radio.html
+++ b/packages/web-components/src/radio/fixtures/radio.html
@@ -1,32 +1,32 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Radio</h1>
 
   <h4>Defaults</h4>
-  <fast-radio></fast-radio>
+  <fluent-radio></fluent-radio>
   <div>
-    <fast-radio>label</fast-radio>
+    <fluent-radio>label</fluent-radio>
   </div>
 
   <h4>Checked</h4>
-  <fast-radio value="checked" checked></fast-radio>
+  <fluent-radio value="checked" checked></fluent-radio>
 
   <!-- Required -->
   <h4>Required</h4>
-  <fast-radio value="required" required></fast-radio>
+  <fluent-radio value="required" required></fluent-radio>
 
   <!-- Disabled -->
   <h4>Disabled</h4>
-  <fast-radio disabled></fast-radio>
-  <fast-radio disabled>label</fast-radio>
-  <fast-radio disabled checked>checked</fast-radio>
+  <fluent-radio disabled></fluent-radio>
+  <fluent-radio disabled>label</fluent-radio>
+  <fluent-radio disabled checked>checked</fluent-radio>
 
   <h4>Visual vs audio label</h4>
-  <fast-radio>
+  <fluent-radio>
     <span aria-label="Audio label">Visible label</span>
-  </fast-radio>
+  </fluent-radio>
 
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label1">Outside label</label>
-    <fast-radio aria-labelledby="label1"></fast-radio>
+    <fluent-radio aria-labelledby="label1"></fluent-radio>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index 9bb3a1c491d6c7..82fbed221fdc38 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -3,20 +3,20 @@ import { Radio, RadioTemplate as template } from '@microsoft/fast-foundation';
 import { RadioStyles as styles } from './radio.styles';
 
 /**
- * The FAST Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
+ * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
  * {@link @microsoft/fast-foundation#RadioTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-radio\>
+ * HTML Element: \<fluent-radio\>
  */
 @customElement({
-  name: 'fast-radio',
+  name: 'fluent-radio',
   template,
   styles,
 })
-export class FASTRadio extends Radio {}
+export class FluentRadio extends Radio {}
 
 /**
  * Styles for Radio
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 2f039ea409d051..7873f2f27daabb 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/radio.html';
-import { FASTRadio } from './';
+import { FluentRadio } from './';
 
 // Prevent tree-shaking
-FASTRadio;
-FASTDesignSystemProvider;
+FluentRadio;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Radio',
diff --git a/packages/web-components/src/slider-label/fixtures/slider-label.html b/packages/web-components/src/slider-label/fixtures/slider-label.html
index 3adc7da09129bd..c35f204825f517 100644
--- a/packages/web-components/src/slider-label/fixtures/slider-label.html
+++ b/packages/web-components/src/slider-label/fixtures/slider-label.html
@@ -1,36 +1,36 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <div style="display: grid;">
     <h1>Default</h1>
     <div style="margin: 20px; position: relative;">
-      <fast-slider-label>
+      <fluent-slider-label>
         basic
-      </fast-slider-label>
+      </fluent-slider-label>
     </div>
     <h4>Disabled</h4>
     <div style="margin: 20px; position: relative;">
-      <fast-slider-label disabled>
+      <fluent-slider-label disabled>
         disabled
-      </fast-slider-label>
+      </fluent-slider-label>
     </div>
     <h4>Hide mark</h4>
     <div style="margin: 20px; position: relative;">
-      <fast-slider-label hide-mark="true">
+      <fluent-slider-label hide-mark="true">
         hide-mark
-      </fast-slider-label>
+      </fluent-slider-label>
     </div>
     <h4>With position</h4>
     <div style="margin: 20px; position: relative;">
-      <fast-slider-label position="10">
+      <fluent-slider-label position="10">
         pos:10
-      </fast-slider-label>
+      </fluent-slider-label>
     </div>
     <h4>Vertical</h4>
     <div style="margin: 20px; position: relative;">
-      <fast-slider min="0" max="10" orientation="vertical">
-        <fast-slider-label position="5">
+      <fluent-slider min="0" max="10" orientation="vertical">
+        <fluent-slider-label position="5">
           vert
-        </fast-slider-label>
-      </fast-slider>
+        </fluent-slider-label>
+      </fluent-slider>
     </div>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts
index 7267b0dfdcb194..824a527a6ab939 100644
--- a/packages/web-components/src/slider-label/index.ts
+++ b/packages/web-components/src/slider-label/index.ts
@@ -3,20 +3,20 @@ import { SliderLabel, SliderLabelTemplate as template } from '@microsoft/fast-fo
 import { SliderLabelStyles as styles } from './slider-label.styles';
 
 /**
- * The FAST Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel},
+ * The Fluent Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel},
  * {@link @microsoft/fast-foundation#SliderLabelTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-slider-label\>
+ * HTML Element: \<fluent-slider-label\>
  */
 @customElement({
-  name: 'fast-slider-label',
+  name: 'fluent-slider-label',
   template,
   styles,
 })
-export class FASTSliderLabel extends SliderLabel {}
+export class FluentSliderLabel extends SliderLabel {}
 
 /**
  * Styles for SliderLabel
diff --git a/packages/web-components/src/slider-label/slider-label.stories.ts b/packages/web-components/src/slider-label/slider-label.stories.ts
index 9d58eed12a944c..137d0f1dd372ed 100644
--- a/packages/web-components/src/slider-label/slider-label.stories.ts
+++ b/packages/web-components/src/slider-label/slider-label.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/slider-label.html';
-import { FASTSliderLabel } from './';
+import { FluentSliderLabel } from './';
 
 // Prevent tree-shaking
-FASTSliderLabel;
-FASTDesignSystemProvider;
+FluentSliderLabel;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Slider label',
diff --git a/packages/web-components/src/slider/fixtures/slider.html b/packages/web-components/src/slider/fixtures/slider.html
index ad5ba7bd4da6e8..17adfdced8f57c 100644
--- a/packages/web-components/src/slider/fixtures/slider.html
+++ b/packages/web-components/src/slider/fixtures/slider.html
@@ -1,4 +1,4 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <div style="display: flex; flex-direction: column; justify-content: space-evenly; width: 500px;">
     <h4>Toggle orientation</h4>
     <div style="margin-bottom: 60px;">
@@ -8,54 +8,54 @@ <h4>Toggle orientation</h4>
       >
         Toggle orientation
       </button>
-      <fast-slider id="switcher" orientation="vertical" min="0" max="100" step="10" value="70">
-        <fast-slider-label position="0">
+      <fluent-slider id="switcher" orientation="vertical" min="0" max="100" step="10" value="70">
+        <fluent-slider-label position="0">
           0&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="10">
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
           10&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="90">
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
           90&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="100">
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
           100&#8451;
-        </fast-slider-label>
-      </fast-slider>
+        </fluent-slider-label>
+      </fluent-slider>
     </div>
     <h4>Vertical</h4>
     <div style="display: flex; flex-direction: column; justify-content: space-evenly; width: 500px;">
-      <fast-slider orientation="vertical" min="0" max="100" step="10" value="50" style="height: 300px; width: 50px;">
-        <fast-slider-label position="0">
+      <fluent-slider orientation="vertical" min="0" max="100" step="10" value="50" style="height: 300px; width: 50px;">
+        <fluent-slider-label position="0">
           0&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="10">
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
           10&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="90">
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
           90&#8451;
-        </fast-slider-label>
-        <fast-slider-label position="100">
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
           100&#8451;
-        </fast-slider-label>
-      </fast-slider>
+        </fluent-slider-label>
+      </fluent-slider>
 
       <!-- No max or min -->
       <h4>Defaults</h4>
-      <fast-slider></fast-slider>
+      <fluent-slider></fluent-slider>
 
       <!-- Text Labels -->
       <h4>Text labels</h4>
       <div style="display: flex; flex-direction: column; height: min-content;">
         <label for="slider1" style="margin-left: 8px;">Temperature:</label>
-        <fast-slider id="slider1" min="0" max="100" step="10">
-          <fast-slider-label position="10">
+        <fluent-slider id="slider1" min="0" max="100" step="10">
+          <fluent-slider-label position="10">
             10&#8451;
-          </fast-slider-label>
-          <fast-slider-label position="90">
+          </fluent-slider-label>
+          <fluent-slider-label position="90">
             90&#8451;
-          </fast-slider-label>
-        </fast-slider>
+          </fluent-slider-label>
+        </fluent-slider>
       </div>
 
       <!-- Custom labels (rtl) -->
@@ -63,136 +63,136 @@ <h4 style="margin-top: 60px;">Custom labels and rtl support</h4>
       <div style="display: flex; flex-direction: column; align-items: flex-start; height: min-content;">
         <label for="rtl-slider" style="margin-left: 8px;">rtl support</label>
         <div dir="rtl" style="width: 100%;">
-          <fast-slider id="rtl-slider" min="0" max="100" step="10" value="80">
-            <fast-slider-label position="10">
+          <fluent-slider id="rtl-slider" min="0" max="100" step="10" value="80">
+            <fluent-slider-label position="10">
               10
-            </fast-slider-label>
-            <fast-slider-label position="20">
+            </fluent-slider-label>
+            <fluent-slider-label position="20">
               20
-            </fast-slider-label>
-            <fast-slider-label position="40">
+            </fluent-slider-label>
+            <fluent-slider-label position="40">
               40
-            </fast-slider-label>
-            <fast-slider-label position="60">
+            </fluent-slider-label>
+            <fluent-slider-label position="60">
               60
-            </fast-slider-label>
-            <fast-slider-label position="80">
+            </fluent-slider-label>
+            <fluent-slider-label position="80">
               80
-            </fast-slider-label>
-          </fast-slider>
+            </fluent-slider-label>
+          </fluent-slider>
         </div>
       </div>
 
       <!-- Using slot for custom thumb -->
       <h4 style="margin-top: 60px;">Custom thumb</h4>
-      <fast-slider min="0" max="100" step="10">
-        <fast-slider-label position="0">
+      <fluent-slider min="0" max="100" step="10">
+        <fluent-slider-label position="0">
           0
-        </fast-slider-label>
-        <fast-slider-label position="10">
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
           10
-        </fast-slider-label>
-        <fast-slider-label position="20">
+        </fluent-slider-label>
+        <fluent-slider-label position="20">
           20
-        </fast-slider-label>
-        <fast-slider-label position="30">
+        </fluent-slider-label>
+        <fluent-slider-label position="30">
           30
-        </fast-slider-label>
-        <fast-slider-label position="40">
+        </fluent-slider-label>
+        <fluent-slider-label position="40">
           40
-        </fast-slider-label>
-        <fast-slider-label position="50">
+        </fluent-slider-label>
+        <fluent-slider-label position="50">
           50
-        </fast-slider-label>
-        <fast-slider-label position="60">
+        </fluent-slider-label>
+        <fluent-slider-label position="60">
           60
-        </fast-slider-label>
-        <fast-slider-label position="70">
+        </fluent-slider-label>
+        <fluent-slider-label position="70">
           70
-        </fast-slider-label>
-        <fast-slider-label position="80">
+        </fluent-slider-label>
+        <fluent-slider-label position="80">
           80
-        </fast-slider-label>
-        <fast-slider-label position="90">
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
           90
-        </fast-slider-label>
-        <fast-slider-label position="100">
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
           100
-        </fast-slider-label>
+        </fluent-slider-label>
         <svg slot="thumb" xmlns="http://www.w3.org/2000/svg" height="13" width="16" viewBox="0 0 16 13">
           <path
             d="M0 0H16V13H0V0ZM15 12V1H1V12H15ZM12 3V4H4V3H12ZM5 7V10H2V7H5ZM4 9V8H3V9H4ZM6.5 10V7H9.5V10H6.5ZM7.5 8V9H8.5V8H7.5ZM11 10V7H14V10H11ZM12 8V9H13V8H12Z"
           />
         </svg>
-      </fast-slider>
+      </fluent-slider>
 
       <!-- Custom labels and thumb hide marks on labels -->
       <h4 style="margin-top: 60px;">
         Custom labels and thumb and hidden marks on labels
       </h4>
-      <fast-slider min="0" max="100" step="10">
-        <fast-slider-label position="0" hide-mark="true">
+      <fluent-slider min="0" max="100" step="10">
+        <fluent-slider-label position="0" hide-mark="true">
           <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16">
             <path
               d="M11.0625 9.79688L13 16L8 12.1562L3 16L4.9375 9.79688L0 6H6.125L8 0L9.875 6H16L11.0625 9.79688ZM11.1016 13.2812C10.9036 12.6354 10.7057 11.9948 10.5078 11.3594C10.3099 10.7188 10.1068 10.0755 9.89844 9.42969C10.4349 9.02865 10.9635 8.625 11.4844 8.21875C12.0052 7.8125 12.5312 7.40625 13.0625 7H9.14062L8 3.35156L6.85938 7H2.9375C3.46875 7.40625 3.99479 7.8125 4.51562 8.21875C5.03646 8.625 5.5651 9.02865 6.10156 9.42969C5.89323 10.0755 5.6901 10.7188 5.49219 11.3594C5.29427 11.9948 5.09635 12.6354 4.89844 13.2812L8 10.8906L11.1016 13.2812Z"
             />
           </svg>
-        </fast-slider-label>
-        <fast-slider-label position="50" hide-mark="true">
+        </fluent-slider-label>
+        <fluent-slider-label position="50" hide-mark="true">
           50
-        </fast-slider-label>
-        <fast-slider-label position="100" hide-mark="true">
+        </fluent-slider-label>
+        <fluent-slider-label position="100" hide-mark="true">
           <svg width="14px" height="14px" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
             <title>Clock Icon</title>
             <path
               d="M7 14C6.35417 14 5.73177 13.9167 5.13281 13.75C4.53906 13.5833 3.98177 13.349 3.46094 13.0469C2.94531 12.7396 2.47396 12.375 2.04688 11.9531C1.625 11.526 1.26042 11.0547 0.953125 10.5391C0.651042 10.0182 0.416667 9.46094 0.25 8.86719C0.0833333 8.26823 0 7.64583 0 7C0 6.35417 0.0833333 5.73438 0.25 5.14062C0.416667 4.54167 0.651042 3.98438 0.953125 3.46875C1.26042 2.94792 1.625 2.47656 2.04688 2.05469C2.47396 1.6276 2.94531 1.26302 3.46094 0.960938C3.98177 0.653646 4.53906 0.416667 5.13281 0.25C5.73177 0.0833333 6.35417 0 7 0C7.64583 0 8.26562 0.0833333 8.85938 0.25C9.45833 0.416667 10.0156 0.653646 10.5312 0.960938C11.0521 1.26302 11.5234 1.6276 11.9453 2.05469C12.3724 2.47656 12.737 2.94792 13.0391 3.46875C13.3464 3.98438 13.5833 4.54167 13.75 5.14062C13.9167 5.73438 14 6.35417 14 7C14 7.64583 13.9167 8.26823 13.75 8.86719C13.5833 9.46094 13.3464 10.0182 13.0391 10.5391C12.737 11.0547 12.3724 11.526 11.9453 11.9531C11.5234 12.375 11.0521 12.7396 10.5312 13.0469C10.0156 13.349 9.45833 13.5833 8.85938 13.75C8.26562 13.9167 7.64583 14 7 14ZM7 1C6.17188 1 5.39323 1.15885 4.66406 1.47656C3.9401 1.78906 3.30469 2.21875 2.75781 2.76562C2.21615 3.30729 1.78646 3.94271 1.46875 4.67188C1.15625 5.39583 1 6.17188 1 7C1 7.82812 1.15625 8.60677 1.46875 9.33594C1.78646 10.0599 2.21615 10.6953 2.75781 11.2422C3.30469 11.7839 3.9401 12.2135 4.66406 12.5312C5.39323 12.8438 6.17188 13 7 13C7.82812 13 8.60417 12.8438 9.32812 12.5312C10.0573 12.2135 10.6927 11.7839 11.2344 11.2422C11.7812 10.6953 12.2109 10.0599 12.5234 9.33594C12.8411 8.60677 13 7.82812 13 7C13 6.17188 12.8411 5.39583 12.5234 4.67188C12.2109 3.94271 11.7812 3.30729 11.2344 2.76562C10.6927 2.21875 10.0573 1.78906 9.32812 1.47656C8.60417 1.15885 7.82812 1 7 1ZM7 7V3H6V8H10V7H7Z"
             />
           </svg>
-        </fast-slider-label>
+        </fluent-slider-label>
         <svg slot="thumb" width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M15.4922 9.5H5.26562C5.26562 9.88542 5.32552 10.2344 5.44531 10.5469C5.5651 10.8594 5.72917 11.138 5.9375 11.3828C6.14583 11.6224 6.39062 11.8307 6.67188 12.0078C6.95312 12.1797 7.2526 12.3229 7.57031 12.4375C7.88802 12.5521 8.21615 12.638 8.55469 12.6953C8.89844 12.7474 9.23698 12.7734 9.57031 12.7734C9.99219 12.7734 10.3906 12.7396 10.7656 12.6719C11.1406 12.6042 11.5052 12.513 11.8594 12.3984C12.2188 12.2786 12.5729 12.138 12.9219 11.9766C13.2708 11.8151 13.6276 11.638 13.9922 11.4453V14.8359C13.5859 15.0339 13.1823 15.2057 12.7812 15.3516C12.3854 15.4922 11.9844 15.612 11.5781 15.7109C11.1719 15.8099 10.7578 15.8828 10.3359 15.9297C9.91406 15.9766 9.47656 16 9.02344 16C8.42448 16 7.84635 15.9323 7.28906 15.7969C6.73177 15.6562 6.20833 15.4583 5.71875 15.2031C5.22917 14.9427 4.78125 14.6276 4.375 14.2578C3.96875 13.888 3.61979 13.4714 3.32812 13.0078C3.03646 12.5443 2.8099 12.0391 2.64844 11.4922C2.48698 10.9453 2.40625 10.3646 2.40625 9.75C2.40625 9.09375 2.49479 8.46875 2.67188 7.875C2.85417 7.27604 3.11458 6.72656 3.45312 6.22656C3.79167 5.72656 4.20312 5.28385 4.6875 4.89844C5.17708 4.50781 5.72656 4.1901 6.33594 3.94531C6.0026 4.27865 5.74219 4.67448 5.55469 5.13281C5.3724 5.58594 5.25521 6.04167 5.20312 6.5H10.8984C10.8984 5.92708 10.8385 5.42708 10.7188 5C10.6042 4.56771 10.4167 4.21094 10.1562 3.92969C9.89583 3.64323 9.5599 3.42969 9.14844 3.28906C8.73698 3.14323 8.23958 3.07031 7.65625 3.07031C6.96875 3.07031 6.28125 3.17448 5.59375 3.38281C4.90625 3.58594 4.2526 3.86979 3.63281 4.23438C3.01302 4.59896 2.44271 5.03125 1.92188 5.53125C1.40104 6.02604 0.963542 6.5651 0.609375 7.14844C0.6875 6.47135 0.830729 5.82552 1.03906 5.21094C1.2526 4.59115 1.52344 4.01823 1.85156 3.49219C2.1849 2.96094 2.57292 2.48177 3.01562 2.05469C3.45833 1.6224 3.94792 1.25521 4.48438 0.953125C5.02604 0.645833 5.60938 0.411458 6.23438 0.25C6.85938 0.0833333 7.52344 0 8.22656 0C8.63281 0 9.03906 0.0364583 9.44531 0.109375C9.85677 0.182292 10.2552 0.283854 10.6406 0.414062C11.4115 0.679688 12.099 1.04948 12.7031 1.52344C13.3073 1.99219 13.8151 2.53646 14.2266 3.15625C14.638 3.77083 14.9505 4.45052 15.1641 5.19531C15.3828 5.9349 15.4922 6.70573 15.4922 7.50781V9.5Z"
           />
         </svg>
-      </fast-slider>
+      </fluent-slider>
 
       <!-- Disabled -->
       <h4 style="margin-top: 60px;">Disabled</h4>
-      <fast-slider min="0" max="100" step="5" disabled>
-        <fast-slider-label position="0">
+      <fluent-slider min="0" max="100" step="5" disabled>
+        <fluent-slider-label position="0">
           0
-        </fast-slider-label>
-        <fast-slider-label position="10">
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
           10
-        </fast-slider-label>
-        <fast-slider-label position="20">
+        </fluent-slider-label>
+        <fluent-slider-label position="20">
           20
-        </fast-slider-label>
-        <fast-slider-label position="30">
+        </fluent-slider-label>
+        <fluent-slider-label position="30">
           30
-        </fast-slider-label>
-        <fast-slider-label position="40">
+        </fluent-slider-label>
+        <fluent-slider-label position="40">
           40
-        </fast-slider-label>
-        <fast-slider-label position="50">
+        </fluent-slider-label>
+        <fluent-slider-label position="50">
           50
-        </fast-slider-label>
-        <fast-slider-label position="60">
+        </fluent-slider-label>
+        <fluent-slider-label position="60">
           60
-        </fast-slider-label>
-        <fast-slider-label position="70">
+        </fluent-slider-label>
+        <fluent-slider-label position="70">
           70
-        </fast-slider-label>
-        <fast-slider-label position="80">
+        </fluent-slider-label>
+        <fluent-slider-label position="80">
           80
-        </fast-slider-label>
-        <fast-slider-label position="90">
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
           90
-        </fast-slider-label>
-        <fast-slider-label position="100">
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
           100
-        </fast-slider-label>
-      </fast-slider>
+        </fluent-slider-label>
+      </fluent-slider>
     </div>
   </div>
-</fast-design-system-provider>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
index 3952bc4891e61d..6a6a1aa2a05e85 100644
--- a/packages/web-components/src/slider/index.ts
+++ b/packages/web-components/src/slider/index.ts
@@ -3,20 +3,20 @@ import { Slider, SliderTemplate as template } from '@microsoft/fast-foundation';
 import { SliderStyles as styles } from './slider.styles';
 
 /**
- * The FAST Slider Custom Element. Implements {@link @microsoft/fast-foundation#Slider},
+ * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#Slider},
  * {@link @microsoft/fast-foundation#SliderTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-slider\>
+ * HTML Element: \<fluent-slider\>
  */
 @customElement({
-  name: 'fast-slider',
+  name: 'fluent-slider',
   template,
   styles,
 })
-export class FASTSlider extends Slider {}
+export class FluentSlider extends Slider {}
 
 /**
  * Styles for Slider
diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts
index f0ae7cf743a283..39152ddc5b404b 100644
--- a/packages/web-components/src/slider/slider.stories.ts
+++ b/packages/web-components/src/slider/slider.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/slider.html';
-import { FASTSlider } from './';
+import { FluentSlider } from './';
 
 // Prevent tree-shaking
-FASTSlider;
-FASTDesignSystemProvider;
+FluentSlider;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Slider',
diff --git a/packages/web-components/src/styles/behaviors.ts b/packages/web-components/src/styles/behaviors.ts
index 43dde5a52dcc33..f48359b193224d 100644
--- a/packages/web-components/src/styles/behaviors.ts
+++ b/packages/web-components/src/styles/behaviors.ts
@@ -32,7 +32,7 @@ import {
   neutralOutline,
 } from '@microsoft/fast-components-styles-msft';
 import { Direction } from '@microsoft/fast-web-utilities';
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 
 /**
  * Behavior to resolve and make available the neutral-foreground-rest CSS custom property.
@@ -41,7 +41,7 @@ import { FASTDesignSystemProvider } from '../design-system-provider';
 export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-rest',
   x => neutralForeground(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-hover CSS custom property.
@@ -50,7 +50,7 @@ export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior = cssCusto
 export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-hover',
   x => neutralForeground(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-active CSS custom property.
@@ -59,7 +59,7 @@ export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-active',
   x => neutralForeground(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-focus CSS custom property.
@@ -68,7 +68,7 @@ export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-focus',
   x => neutralForeground(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-toggle CSS custom property.
@@ -77,7 +77,7 @@ export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-toggle',
   neutralForegroundToggle,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-toggle-large CSS custom property.
@@ -86,7 +86,7 @@ export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-toggle-large',
   neutralForegroundToggleLarge,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-hint CSS custom property.
@@ -95,7 +95,7 @@ export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior = c
 export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-hint',
   neutralForegroundHint,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-foreground-hint-large CSS custom property.
@@ -104,7 +104,7 @@ export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior = cssCusto
 export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-foreground-hint-large',
   neutralForegroundHintLarge,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-rest CSS custom property.
@@ -113,7 +113,7 @@ export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior = css
 export const accentForegroundRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-rest',
   x => accentForeground(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-hover CSS custom property.
@@ -122,7 +122,7 @@ export const accentForegroundRestBehavior: CSSCustomPropertyBehavior = cssCustom
 export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-hover',
   x => accentForeground(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-active CSS custom property.
@@ -131,7 +131,7 @@ export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior = cssCusto
 export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-active',
   x => accentForeground(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-focus CSS custom property.
@@ -140,7 +140,7 @@ export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior = cssCust
 export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-focus',
   x => accentForeground(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-cut-rest CSS custom property.
@@ -149,7 +149,7 @@ export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior = cssCusto
 export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-cut-rest',
   x => accentForegroundCut(x),
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-large-rest CSS custom property.
@@ -158,7 +158,7 @@ export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior = cssCus
 export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-large-rest',
   x => accentForegroundLarge(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-large-hover CSS custom property.
@@ -167,7 +167,7 @@ export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior = cssC
 export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-large-hover',
   x => accentForegroundLarge(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-large-active CSS custom property.
@@ -176,7 +176,7 @@ export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior = css
 export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-large-active',
   x => accentForegroundLarge(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-foreground-large-focus CSS custom property.
@@ -185,7 +185,7 @@ export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior = cs
 export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-foreground-large-focus',
   x => accentForegroundLarge(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-rest CSS custom property.
@@ -194,7 +194,7 @@ export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior = css
 export const neutralFillRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-rest',
   x => neutralFill(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-hover CSS custom property.
@@ -203,7 +203,7 @@ export const neutralFillRestBehavior: CSSCustomPropertyBehavior = cssCustomPrope
 export const neutralFillHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-hover',
   x => neutralFill(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-active CSS custom property.
@@ -212,7 +212,7 @@ export const neutralFillHoverBehavior: CSSCustomPropertyBehavior = cssCustomProp
 export const neutralFillActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-active',
   x => neutralFill(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-focus CSS custom property.
@@ -221,7 +221,7 @@ export const neutralFillActiveBehavior: CSSCustomPropertyBehavior = cssCustomPro
 export const neutralFillFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-focus',
   x => neutralFill(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-selected CSS custom property.
@@ -230,7 +230,7 @@ export const neutralFillFocusBehavior: CSSCustomPropertyBehavior = cssCustomProp
 export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-selected',
   x => neutralFill(x).selected,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-stealth-rest CSS custom property.
@@ -239,7 +239,7 @@ export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior = cssCustomP
 export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-stealth-rest',
   x => neutralFillStealth(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-stealth-hover CSS custom property.
@@ -248,7 +248,7 @@ export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-stealth-hover',
   x => neutralFillStealth(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-stealth-active CSS custom property.
@@ -257,7 +257,7 @@ export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-stealth-active',
   x => neutralFillStealth(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-stealth-focus CSS custom property.
@@ -266,7 +266,7 @@ export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior = cssCu
 export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-stealth-focus',
   x => neutralFillStealth(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-stealth-selected CSS custom property.
@@ -275,7 +275,7 @@ export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-stealth-selected',
   x => neutralFillStealth(x).selected,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-toggle-rest CSS custom property.
@@ -284,7 +284,7 @@ export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior = css
 export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-toggle-rest',
   x => neutralFillToggle(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-toggle-hover CSS custom property.
@@ -293,7 +293,7 @@ export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior = cssCusto
 export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-toggle-hover',
   x => neutralFillToggle(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-toggle-active CSS custom property.
@@ -302,7 +302,7 @@ export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-toggle-active',
   x => neutralFillToggle(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-toggle-focus CSS custom property.
@@ -311,7 +311,7 @@ export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-toggle-focus',
   x => neutralFillToggle(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-input-rest CSS custom property.
@@ -320,7 +320,7 @@ export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-input-rest',
   x => neutralFillInput(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-input-hover CSS custom property.
@@ -329,7 +329,7 @@ export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior = cssCustom
 export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-input-hover',
   x => neutralFillInput(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-input-active CSS custom property.
@@ -338,7 +338,7 @@ export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior = cssCusto
 export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-input-active',
   x => neutralFillInput(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-input-focus CSS custom property.
@@ -347,7 +347,7 @@ export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior = cssCust
 export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-input-focus',
   x => neutralFillInput(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-rest CSS custom property.
@@ -356,7 +356,7 @@ export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior = cssCusto
 export const accentFillRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-rest',
   x => accentFill(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-hover CSS custom property.
@@ -365,7 +365,7 @@ export const accentFillRestBehavior: CSSCustomPropertyBehavior = cssCustomProper
 export const accentFillHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-hover',
   x => accentFill(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-active CSS custom property.
@@ -374,7 +374,7 @@ export const accentFillHoverBehavior: CSSCustomPropertyBehavior = cssCustomPrope
 export const accentFillActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-active',
   x => accentFill(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-focus CSS custom property.
@@ -383,7 +383,7 @@ export const accentFillActiveBehavior: CSSCustomPropertyBehavior = cssCustomProp
 export const accentFillFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-focus',
   x => accentFill(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-selected CSS custom property.
@@ -392,7 +392,7 @@ export const accentFillFocusBehavior: CSSCustomPropertyBehavior = cssCustomPrope
 export const accentFillSelectedBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-selected',
   x => accentFill(x).selected,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-large-rest CSS custom property.
@@ -401,7 +401,7 @@ export const accentFillSelectedBehavior: CSSCustomPropertyBehavior = cssCustomPr
 export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-large-rest',
   x => accentFillLarge(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-large-hover CSS custom property.
@@ -410,7 +410,7 @@ export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior = cssCustomP
 export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-large-hover',
   x => accentFillLarge(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-large-active CSS custom property.
@@ -419,7 +419,7 @@ export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior = cssCustom
 export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-large-active',
   x => accentFillLarge(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-large-focus CSS custom property.
@@ -428,7 +428,7 @@ export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior = cssCusto
 export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-large-focus',
   x => accentFillLarge(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the accent-fill-large-selected CSS custom property.
@@ -437,7 +437,7 @@ export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior = cssCustom
 export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'accent-fill-large-selected',
   x => accentFillLarge(x).selected,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-fill-card-rest CSS custom property.
@@ -446,7 +446,7 @@ export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior = cssCus
 export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-fill-card-rest',
   x => neutralFillCard(x),
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-outline-rest CSS custom property.
@@ -455,7 +455,7 @@ export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior = cssCustomP
 export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-outline-rest',
   x => neutralOutline(x).rest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-outline-hover CSS custom property.
@@ -464,7 +464,7 @@ export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior = cssCustomPr
 export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-outline-hover',
   x => neutralOutline(x).hover,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-outline-active CSS custom property.
@@ -473,7 +473,7 @@ export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior = cssCustomP
 export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-outline-active',
   x => neutralOutline(x).active,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-outline-focus CSS custom property.
@@ -482,7 +482,7 @@ export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior = cssCustom
 export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-outline-focus',
   x => neutralOutline(x).focus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-divider-rest CSS custom property.
@@ -491,7 +491,7 @@ export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior = cssCustomP
 export const neutralDividerRestBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-divider-rest',
   neutralDividerRest,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-floating CSS custom property.
@@ -500,7 +500,7 @@ export const neutralDividerRestBehavior: CSSCustomPropertyBehavior = cssCustomPr
 export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-floating',
   neutralLayerFloating,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-card CSS custom property.
@@ -509,7 +509,7 @@ export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior = cssCustom
 export const neutralLayerCardBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-card',
   neutralLayerCard,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-card-container CSS custom property.
@@ -518,7 +518,7 @@ export const neutralLayerCardBehavior: CSSCustomPropertyBehavior = cssCustomProp
 export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-card-container',
   neutralLayerCardContainer,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-l1 CSS custom property.
@@ -527,7 +527,7 @@ export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior = cssC
 export const neutralLayerL1Behavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-l1',
   neutralLayerL1,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-l1-alt CSS custom property.
@@ -536,7 +536,7 @@ export const neutralLayerL1Behavior: CSSCustomPropertyBehavior = cssCustomProper
 export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-l1-alt',
   neutralLayerL1Alt,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-l2 CSS custom property.
@@ -545,7 +545,7 @@ export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior = cssCustomPro
 export const neutralLayerL2Behavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-l2',
   neutralLayerL2,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-l3 CSS custom property.
@@ -554,7 +554,7 @@ export const neutralLayerL2Behavior: CSSCustomPropertyBehavior = cssCustomProper
 export const neutralLayerL3Behavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-l3',
   neutralLayerL3,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-layer-l4 CSS custom property.
@@ -563,7 +563,7 @@ export const neutralLayerL3Behavior: CSSCustomPropertyBehavior = cssCustomProper
 export const neutralLayerL4Behavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-layer-l4',
   neutralLayerL4,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-focus CSS custom property.
@@ -572,7 +572,7 @@ export const neutralLayerL4Behavior: CSSCustomPropertyBehavior = cssCustomProper
 export const neutralFocusBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-focus',
   neutralFocus,
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 /**
  * Behavior to resolve and make available the neutral-focus-inner-accent CSS custom property.
@@ -581,7 +581,7 @@ export const neutralFocusBehavior: CSSCustomPropertyBehavior = cssCustomProperty
 export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'neutral-focus-inner-accent',
   neutralFocusInnerAccent(accentBaseColor),
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 
 /**
@@ -607,7 +607,7 @@ export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior = cssCus
 export const inlineStartBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'inline-start',
   (designSystem: DesignSystem) => (direction(designSystem) === Direction.ltr ? 'left' : 'right'),
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
 
 /**
@@ -633,5 +633,5 @@ export const inlineStartBehavior: CSSCustomPropertyBehavior = cssCustomPropertyB
 export const inlineEndBehavior: CSSCustomPropertyBehavior = cssCustomPropertyBehaviorFactory(
   'inline-end',
   (designSystem: DesignSystem) => (direction(designSystem) === Direction.ltr ? 'right' : 'left'),
-  FASTDesignSystemProvider.findProvider,
+  FluentDesignSystemProvider.findProvider,
 );
diff --git a/packages/web-components/src/switch/fixtures/switch.html b/packages/web-components/src/switch/fixtures/switch.html
index 2b2e5509fae5d7..8509adc73dc87d 100644
--- a/packages/web-components/src/switch/fixtures/switch.html
+++ b/packages/web-components/src/switch/fixtures/switch.html
@@ -1,46 +1,46 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Switch</h1>
   <h4>Default</h4>
   <div style="display: flex; flex-direction: column;">
-    <fast-switch></fast-switch>
-    <fast-switch>
+    <fluent-switch></fluent-switch>
+    <fluent-switch>
       Dark Mode
-    </fast-switch>
-    <fast-switch checked>
+    </fluent-switch>
+    <fluent-switch checked>
       New Feature
       <span slot="checked-message">On</span>
       <span slot="unchecked-message">Off</span>
-    </fast-switch>
-    <fast-switch>
+    </fluent-switch>
+    <fluent-switch>
       Theme
       <span slot="checked-message">Dark</span>
       <span slot="unchecked-message">Light</span>
-    </fast-switch>
+    </fluent-switch>
   </div>
 
   <h4>Checked</h4>
-  <fast-switch checked></fast-switch>
+  <fluent-switch checked></fluent-switch>
 
   <!-- Required -->
   <h4>Required</h4>
-  <fast-switch required></fast-switch>
+  <fluent-switch required></fluent-switch>
 
   <!-- Disabled -->
   <h4>Disabled</h4>
   <div style="display: flex; flex-direction: column;">
-    <fast-switch disabled></fast-switch>
-    <fast-switch disabled>label</fast-switch>
-    <fast-switch disabled checked>checked</fast-switch>
-    <fast-switch disabled checked>
+    <fluent-switch disabled></fluent-switch>
+    <fluent-switch disabled>label</fluent-switch>
+    <fluent-switch disabled checked>checked</fluent-switch>
+    <fluent-switch disabled checked>
       checked
       <span slot="checked-message">On</span>
       <span slot="unchecked-message">Off</span>
-    </fast-switch>
+    </fluent-switch>
   </div>
 
   <h4>Inline</h4>
-  <fast-switch style="margin-right: 12px;">Light Speed</fast-switch>
-  <fast-switch style="margin-right: 12px;">Ridiculous Speed</fast-switch>
-  <fast-switch style="margin-right: 12px;">Ludicrous Speed</fast-switch>
-  <fast-switch checked>Plaid Speed</fast-switch>
-</fast-design-system-provider>
+  <fluent-switch style="margin-right: 12px;">Light Speed</fluent-switch>
+  <fluent-switch style="margin-right: 12px;">Ridiculous Speed</fluent-switch>
+  <fluent-switch style="margin-right: 12px;">Ludicrous Speed</fluent-switch>
+  <fluent-switch checked>Plaid Speed</fluent-switch>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts
index 6c8d6b112c621c..48d08fb570b142 100644
--- a/packages/web-components/src/switch/index.ts
+++ b/packages/web-components/src/switch/index.ts
@@ -3,20 +3,20 @@ import { Switch, SwitchTemplate as template } from '@microsoft/fast-foundation';
 import { SwitchStyles as styles } from './switch.styles';
 
 /**
- * The FAST Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
+ * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
  * {@link @microsoft/fast-foundation#SwitchTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-switch\>
+ * HTML Element: \<fluent-switch\>
  */
 @customElement({
-  name: 'fast-switch',
+  name: 'fluent-switch',
   template,
   styles,
 })
-export class FASTSwitch extends Switch {}
+export class FluentSwitch extends Switch {}
 
 /**
  * Styles for Switch
diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts
index 4026a1fc9b859e..cd5b46832e392a 100644
--- a/packages/web-components/src/switch/switch.stories.ts
+++ b/packages/web-components/src/switch/switch.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/switch.html';
-import { FASTSwitch } from './';
+import { FluentSwitch } from './';
 
 // Prevent tree-shaking
-FASTSwitch;
-FASTDesignSystemProvider;
+FluentSwitch;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Switch',
diff --git a/packages/web-components/src/tabs/fixtures/tabs.html b/packages/web-components/src/tabs/fixtures/tabs.html
index 03283c26ee0cd3..149162e5661952 100644
--- a/packages/web-components/src/tabs/fixtures/tabs.html
+++ b/packages/web-components/src/tabs/fixtures/tabs.html
@@ -1,38 +1,38 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Tabs</h1>
   <h4>Default</h4>
-  <fast-tabs id="myTab" activeId="TabTwo">
-    <fast-tab id="TabOne">Tab one</fast-tab>
-    <fast-tab id="TabTwo">Tab two</fast-tab>
-    <fast-tab id="TabThree">Tab three</fast-tab>
-    <fast-tab-panel id="TabPanelOne">
+  <fluent-tabs id="myTab" activeId="TabTwo">
+    <fluent-tab id="TabOne">Tab one</fluent-tab>
+    <fluent-tab id="TabTwo">Tab two</fluent-tab>
+    <fluent-tab id="TabThree">Tab three</fluent-tab>
+    <fluent-tab-panel id="TabPanelOne">
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel id="TabPanelTwo">
+    </fluent-tab-panel>
+    <fluent-tab-panel id="TabPanelTwo">
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel id="TabPanelThree">
+    </fluent-tab-panel>
+    <fluent-tab-panel id="TabPanelThree">
       Tab three content. This is for testing.
-    </fast-tab-panel>
+    </fluent-tab-panel>
     <div>Testing</div>
-  </fast-tabs>
+  </fluent-tabs>
   <h4>Vertical</h4>
-  <fast-tabs orientation="vertical">
-    <fast-tab>Tab one</fast-tab>
-    <fast-tab>Tab two</fast-tab>
-    <fast-tab>Tab three</fast-tab>
-    <fast-tab-panel>
+  <fluent-tabs orientation="vertical">
+    <fluent-tab>Tab one</fluent-tab>
+    <fluent-tab>Tab two</fluent-tab>
+    <fluent-tab>Tab three</fluent-tab>
+    <fluent-tab-panel>
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab three content. This is for testing.
-    </fast-tab-panel>
-  </fast-tabs>
+    </fluent-tab-panel>
+  </fluent-tabs>
   <h4>Supplemental content</h4>
-  <fast-tabs>
+  <fluent-tabs>
     <div slot="start">
       <button>1</button>
       <button>2</button>
@@ -43,21 +43,21 @@ <h4>Supplemental content</h4>
       <button>2</button>
       <button>3</button>
     </div>
-    <fast-tab>Tab one</fast-tab>
-    <fast-tab>Tab two</fast-tab>
-    <fast-tab>Tab three</fast-tab>
-    <fast-tab-panel>
+    <fluent-tab>Tab one</fluent-tab>
+    <fluent-tab>Tab two</fluent-tab>
+    <fluent-tab>Tab three</fluent-tab>
+    <fluent-tab-panel>
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab three content. This is for testing.
-    </fast-tab-panel>
-  </fast-tabs>
+    </fluent-tab-panel>
+  </fluent-tabs>
   <h4>Supplemental content - Vertical</h4>
-  <fast-tabs orientation="vertical">
+  <fluent-tabs orientation="vertical">
     <div slot="start">
       <button>1</button>
       <button>2</button>
@@ -68,47 +68,47 @@ <h4>Supplemental content - Vertical</h4>
       <button>2</button>
       <button>3</button>
     </div>
-    <fast-tab>Tab one</fast-tab>
-    <fast-tab>Tab two</fast-tab>
-    <fast-tab>Tab three</fast-tab>
-    <fast-tab-panel>
+    <fluent-tab>Tab one</fluent-tab>
+    <fluent-tab>Tab two</fluent-tab>
+    <fluent-tab>Tab three</fluent-tab>
+    <fluent-tab-panel>
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab three content. This is for testing.
-    </fast-tab-panel>
-  </fast-tabs>
+    </fluent-tab-panel>
+  </fluent-tabs>
   <h4>No active indicator</h4>
-  <fast-tabs activeIndicator="false" activeId="TabTwo">
-    <fast-tab id="TabOne">Tab one</fast-tab>
-    <fast-tab id="TabTwo">Tab two</fast-tab>
-    <fast-tab id="TabThree">Tab three</fast-tab>
-    <fast-tab-panel id="TabPanelOne">
+  <fluent-tabs activeIndicator="false" activeId="TabTwo">
+    <fluent-tab id="TabOne">Tab one</fluent-tab>
+    <fluent-tab id="TabTwo">Tab two</fluent-tab>
+    <fluent-tab id="TabThree">Tab three</fluent-tab>
+    <fluent-tab-panel id="TabPanelOne">
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel id="TabPanelTwo">
+    </fluent-tab-panel>
+    <fluent-tab-panel id="TabPanelTwo">
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel id="TabPanelThree">
+    </fluent-tab-panel>
+    <fluent-tab-panel id="TabPanelThree">
       Tab three content. This is for testing.
-    </fast-tab-panel>
-  </fast-tabs>
+    </fluent-tab-panel>
+  </fluent-tabs>
   <h4>No active indicator - Vertical</h4>
-  <fast-tabs activeIndicator="false" orientation="vertical" activeIndicator>
-    <fast-tab>Tab one</fast-tab>
-    <fast-tab>Tab two</fast-tab>
-    <fast-tab>Tab three</fast-tab>
-    <fast-tab-panel>
+  <fluent-tabs activeIndicator="false" orientation="vertical" activeIndicator>
+    <fluent-tab>Tab one</fluent-tab>
+    <fluent-tab>Tab two</fluent-tab>
+    <fluent-tab>Tab three</fluent-tab>
+    <fluent-tab-panel>
       Tab one content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab two content. This is for testing.
-    </fast-tab-panel>
-    <fast-tab-panel>
+    </fluent-tab-panel>
+    <fluent-tab-panel>
       Tab three content. This is for testing.
-    </fast-tab-panel>
-  </fast-tabs>
-</fast-design-system-provider>
+    </fluent-tab-panel>
+  </fluent-tabs>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts
index 531d5272add002..25ed93ead0abf9 100644
--- a/packages/web-components/src/tabs/index.ts
+++ b/packages/web-components/src/tabs/index.ts
@@ -3,20 +3,20 @@ import { Tabs, TabsTemplate as template } from '@microsoft/fast-foundation';
 import { TabsStyles as styles } from './tabs.styles';
 
 /**
- * The FAST Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs},
+ * The Fluent Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs},
  * {@link @microsoft/fast-foundation#TabsTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-tabs\>
+ * HTML Element: \<fluent-tabs\>
  */
 @customElement({
-  name: 'fast-tabs',
+  name: 'fluent-tabs',
   template,
   styles,
 })
-export class FASTTabs extends Tabs {}
+export class FluentTabs extends Tabs {}
 export * from './tab/';
 export * from './tab-panel/';
 
diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts
index af71d20ecede88..c4c56c2f56143f 100644
--- a/packages/web-components/src/tabs/tab-panel/index.ts
+++ b/packages/web-components/src/tabs/tab-panel/index.ts
@@ -3,20 +3,20 @@ import { TabPanel, TabPanelTemplate as template } from '@microsoft/fast-foundati
 import { TabPanelStyles as styles } from './tab-panel.styles';
 
 /**
- * The FAST Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
+ * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
  * {@link @microsoft/fast-foundation#TabPanelTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-tab-panel\>
+ * HTML Element: \<fluent-tab-panel\>
  */
 @customElement({
-  name: 'fast-tab-panel',
+  name: 'fluent-tab-panel',
   template,
   styles,
 })
-export class FASTTabPanel extends TabPanel {}
+export class FluentTabPanel extends TabPanel {}
 
 /**
  * Styles for TabPanel
diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts
index d610d63037fd6d..2952168555ac55 100644
--- a/packages/web-components/src/tabs/tab/index.ts
+++ b/packages/web-components/src/tabs/tab/index.ts
@@ -3,20 +3,20 @@ import { Tab, TabTemplate as template } from '@microsoft/fast-foundation';
 import { TabStyles as styles } from './tab.styles';
 
 /**
- * The FAST Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
+ * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
  * {@link @microsoft/fast-foundation#TabTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-tab\>
+ * HTML Element: \<fluent-tab\>
  */
 @customElement({
-  name: 'fast-tab',
+  name: 'fluent-tab',
   template,
   styles,
 })
-export class FASTTab extends Tab {}
+export class FluentTab extends Tab {}
 
 /**
  * Styles for Tab
diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts
index f6b4d75ee4f858..bd2d12d2e5c6cc 100644
--- a/packages/web-components/src/tabs/tabs.stories.ts
+++ b/packages/web-components/src/tabs/tabs.stories.ts
@@ -1,14 +1,14 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/tabs.html';
-import { FASTTab } from './tab';
-import { FASTTabPanel } from './tab-panel';
-import { FASTTabs } from './';
+import { FluentTab } from './tab';
+import { FluentTabPanel } from './tab-panel';
+import { FluentTabs } from './';
 
 // Prevent tree-shaking
-FASTTab;
-FASTTabPanel;
-FASTTabs;
-FASTDesignSystemProvider;
+FluentTab;
+FluentTabPanel;
+FluentTabs;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Tabs',
diff --git a/packages/web-components/src/text-area/fixtures/text-area.html b/packages/web-components/src/text-area/fixtures/text-area.html
index 316f996f80fd0b..e3ff35b69535c7 100644
--- a/packages/web-components/src/text-area/fixtures/text-area.html
+++ b/packages/web-components/src/text-area/fixtures/text-area.html
@@ -1,90 +1,90 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Text area</h1>
   <h4>Default</h4>
-  <fast-text-area></fast-text-area>
-  <fast-text-area>
+  <fluent-text-area></fluent-text-area>
+  <fluent-text-area>
     <span>label</span>
-  </fast-text-area>
+  </fluent-text-area>
 
   <h4>Placeholder</h4>
-  <fast-text-area placeholder="Placeholder"></fast-text-area>
+  <fluent-text-area placeholder="Placeholder"></fluent-text-area>
 
   <!-- Required -->
   <h4>Required</h4>
-  <fast-text-area required></fast-text-area>
+  <fluent-text-area required></fluent-text-area>
 
   <!-- Disabled -->
   <h4>Disabled</h4>
-  <fast-text-area disabled></fast-text-area>
-  <fast-text-area disabled>
+  <fluent-text-area disabled></fluent-text-area>
+  <fluent-text-area disabled>
     <span>label</span>
-  </fast-text-area>
-  <fast-text-area disabled placeholder="placeholder"></fast-text-area>
+  </fluent-text-area>
+  <fluent-text-area disabled placeholder="placeholder"></fluent-text-area>
 
   <!-- Read only -->
   <h4>Read only</h4>
-  <fast-text-area readonly value="Readonly text area"></fast-text-area>
-  <fast-text-area readonly value="Readonly text area">label</fast-text-area>
+  <fluent-text-area readonly value="Readonly text area"></fluent-text-area>
+  <fluent-text-area readonly value="Readonly text area">label</fluent-text-area>
 
   <!-- Read only -->
   <h4>Autofocus</h4>
-  <fast-text-area autofocus>autofocus</fast-text-area>
+  <fluent-text-area autofocus>autofocus</fluent-text-area>
 
   <!-- Resize -->
   <h4>Resize</h4>
   <h5>Both</h5>
-  <fast-text-area resize="both">resize both</fast-text-area>
+  <fluent-text-area resize="both">resize both</fluent-text-area>
 
   <h5>Horizontal</h5>
-  <fast-text-area resize="horizontal">resize horizontal</fast-text-area>
+  <fluent-text-area resize="horizontal">resize horizontal</fluent-text-area>
 
   <h5>Vertical</h5>
-  <fast-text-area resize="vertical">resize vertical</fast-text-area>
+  <fluent-text-area resize="vertical">resize vertical</fluent-text-area>
 
   <h4>Filled</h4>
   <h5>Default</h5>
-  <fast-text-area appearance="filled"></fast-text-area>
-  <fast-text-area appearance="filled">
+  <fluent-text-area appearance="filled"></fluent-text-area>
+  <fluent-text-area appearance="filled">
     <span>label</span>
-  </fast-text-area>
+  </fluent-text-area>
 
   <h5>Placeholder</h5>
-  <fast-text-area appearance="filled" placeholder="Placeholder"></fast-text-area>
+  <fluent-text-area appearance="filled" placeholder="Placeholder"></fluent-text-area>
 
   <!-- Required -->
   <h5>Required</h5>
-  <fast-text-area appearance="filled" required></fast-text-area>
+  <fluent-text-area appearance="filled" required></fluent-text-area>
 
   <!-- Disabled -->
   <h5>Disabled</h5>
-  <fast-text-area appearance="filled" disabled></fast-text-area>
-  <fast-text-area appearance="filled" disabled>
+  <fluent-text-area appearance="filled" disabled></fluent-text-area>
+  <fluent-text-area appearance="filled" disabled>
     <span>label</span>
-  </fast-text-area>
-  <fast-text-area appearance="filled" disabled placeholder="placeholder"></fast-text-area>
+  </fluent-text-area>
+  <fluent-text-area appearance="filled" disabled placeholder="placeholder"></fluent-text-area>
 
   <!-- Read only -->
   <h5>Read only</h5>
-  <fast-text-area appearance="filled" value="Readonly text area" readonly>
+  <fluent-text-area appearance="filled" value="Readonly text area" readonly>
     label
-  </fast-text-area>
-  <fast-text-area appearance="filled" value="Readonly text area" readonly>
+  </fluent-text-area>
+  <fluent-text-area appearance="filled" value="Readonly text area" readonly>
     label
-  </fast-text-area>
+  </fluent-text-area>
 
   <!-- With label -->
   <h4>Visual vs audio label</h4>
-  <fast-text-area>
+  <fluent-text-area>
     <span aria-label="Audio label">Visible label</span>
-  </fast-text-area>
+  </fluent-text-area>
 
   <!-- With hidden label -->
   <h4>Audio label only</h4>
-  <fast-text-area>
+  <fluent-text-area>
     <span aria-label="Audio label only"></span>
-  </fast-text-area>
+  </fluent-text-area>
 
   <!-- With aria label -->
   <h4>With aria-label</h4>
-  <fast-text-area aria-label="Text area with aria-label"></fast-text-area>
-</fast-design-system-provider>
+  <fluent-text-area aria-label="Text area with aria-label"></fluent-text-area>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts
index 471ae23e59e453..4fb01d4f595616 100644
--- a/packages/web-components/src/text-area/index.ts
+++ b/packages/web-components/src/text-area/index.ts
@@ -9,22 +9,22 @@ import { TextAreaStyles as styles } from './text-area.styles';
 export type TextAreaAppearance = 'filled' | 'outline';
 
 /**
- * The FAST Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea},
+ * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea},
  * {@link @microsoft/fast-foundation#TextAreaTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-text-area\>
+ * HTML Element: \<fluent-text-area\>
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
 @customElement({
-  name: 'fast-text-area',
+  name: 'fluent-text-area',
   template,
   styles,
 })
-export class FASTTextArea extends TextArea {
+export class FluentTextArea extends TextArea {
   /**
    * The appearance of the element.
    *
diff --git a/packages/web-components/src/text-area/text-area.stories.ts b/packages/web-components/src/text-area/text-area.stories.ts
index 6aa4e113e6b6e2..94f05a22966b9f 100644
--- a/packages/web-components/src/text-area/text-area.stories.ts
+++ b/packages/web-components/src/text-area/text-area.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/text-area.html';
-import { FASTTextArea } from './';
+import { FluentTextArea } from './';
 
 // Prevent tree-shaking
-FASTTextArea;
-FASTDesignSystemProvider;
+FluentTextArea;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Text area',
diff --git a/packages/web-components/src/text-field/fixtures/text-field.html b/packages/web-components/src/text-field/fixtures/text-field.html
index 76b01fc3a23be3..5466d1c5bf5393 100644
--- a/packages/web-components/src/text-field/fixtures/text-field.html
+++ b/packages/web-components/src/text-field/fixtures/text-field.html
@@ -1,87 +1,87 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Text field</h1>
   <h4>Default</h4>
-  <fast-text-field></fast-text-field>
-  <fast-text-field>Label</fast-text-field>
+  <fluent-text-field></fluent-text-field>
+  <fluent-text-field>Label</fluent-text-field>
 
   <h4>Placeholder</h4>
-  <fast-text-field placeholder="Placeholder"></fast-text-field>
+  <fluent-text-field placeholder="Placeholder"></fluent-text-field>
 
   <!-- Required -->
   <h4>Required</h4>
-  <fast-text-field required></fast-text-field>
+  <fluent-text-field required></fluent-text-field>
 
   <!-- Disabled -->
   <h4>Disabled</h4>
-  <fast-text-field disabled></fast-text-field>
-  <fast-text-field disabled>label</fast-text-field>
-  <fast-text-field disabled placeholder="placeholder"></fast-text-field>
+  <fluent-text-field disabled></fluent-text-field>
+  <fluent-text-field disabled>label</fluent-text-field>
+  <fluent-text-field disabled placeholder="placeholder"></fluent-text-field>
 
   <!-- Read only -->
   <h4>Read only</h4>
-  <fast-text-field readonly value="Readonly"></fast-text-field>
-  <fast-text-field readonly value="Readonly">label</fast-text-field>
+  <fluent-text-field readonly value="Readonly"></fluent-text-field>
+  <fluent-text-field readonly value="Readonly">label</fluent-text-field>
 
   <!-- Read only -->
   <h4>Autofocus</h4>
-  <fast-text-field autofocus>autofocus</fast-text-field>
+  <fluent-text-field autofocus>autofocus</fluent-text-field>
 
   <!-- Start -->
   <h4>With start</h4>
-  <fast-text-field>
+  <fluent-text-field>
     <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"
       />
     </svg>
-  </fast-text-field>
+  </fluent-text-field>
 
   <!-- End -->
   <h4>With end</h4>
-  <fast-text-field>
+  <fluent-text-field>
     <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"
       />
     </svg>
-  </fast-text-field>
+  </fluent-text-field>
 
   <h4>Filled</h4>
   <h5>Default</h5>
-  <fast-text-field appearance="filled"></fast-text-field>
-  <fast-text-field appearance="filled">label</fast-text-field>
+  <fluent-text-field appearance="filled"></fluent-text-field>
+  <fluent-text-field appearance="filled">label</fluent-text-field>
 
   <h5>Placeholder</h5>
-  <fast-text-field appearance="filled" placeholder="Placeholder"></fast-text-field>
+  <fluent-text-field appearance="filled" placeholder="Placeholder"></fluent-text-field>
 
   <!-- Required -->
   <h5>Required</h5>
-  <fast-text-field appearance="filled" required></fast-text-field>
+  <fluent-text-field appearance="filled" required></fluent-text-field>
 
   <!-- Disabled -->
   <h5>Disabled</h5>
-  <fast-text-field appearance="filled" disabled></fast-text-field>
-  <fast-text-field appearance="filled" disabled>label</fast-text-field>
-  <fast-text-field appearance="filled" disabled placeholder="placeholder"></fast-text-field>
+  <fluent-text-field appearance="filled" disabled></fluent-text-field>
+  <fluent-text-field appearance="filled" disabled>label</fluent-text-field>
+  <fluent-text-field appearance="filled" disabled placeholder="placeholder"></fluent-text-field>
 
   <!-- Read only -->
   <h5>Read only</h5>
-  <fast-text-field appearance="filled" readonly value="Readonly"></fast-text-field>
-  <fast-text-field appearance="filled" readonly value="Readonly">label</fast-text-field>
+  <fluent-text-field appearance="filled" readonly value="Readonly"></fluent-text-field>
+  <fluent-text-field appearance="filled" readonly value="Readonly">label</fluent-text-field>
 
   <!-- With label -->
   <h4>Visual vs audio label</h4>
-  <fast-text-field>
+  <fluent-text-field>
     <span aria-label="Audio label">Visible label</span>
-  </fast-text-field>
+  </fluent-text-field>
 
   <!-- With hidden label -->
   <h4>Audio label only</h4>
-  <fast-text-field>
+  <fluent-text-field>
     <span aria-label="Audio label only"></span>
-  </fast-text-field>
+  </fluent-text-field>
 
   <!-- With aria-label -->
   <h4>With aria-label</h4>
-  <fast-text-field aria-label="Text field with aria-label"></fast-text-field>
-</fast-design-system-provider>
+  <fluent-text-field aria-label="Text field with aria-label"></fluent-text-field>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts
index 27b54e8ef15e74..50ebc51cf7c0c6 100644
--- a/packages/web-components/src/text-field/index.ts
+++ b/packages/web-components/src/text-field/index.ts
@@ -9,25 +9,25 @@ import { TextFieldStyles as styles } from './text-field.styles';
 export type TextFieldAppearance = 'filled' | 'outline';
 
 /**
- * The FAST Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
+ * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
  * {@link @microsoft/fast-foundation#TextFieldTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-text-field\>
+ * HTML Element: \<fluent-text-field\>
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
 @customElement({
-  name: 'fast-text-field',
+  name: 'fluent-text-field',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
 })
-export class FASTTextField extends TextField {
+export class FluentTextField extends TextField {
   /**
    * The appearance of the element.
    *
diff --git a/packages/web-components/src/text-field/text-field.stories.ts b/packages/web-components/src/text-field/text-field.stories.ts
index b31a810219da61..57d88c317892cb 100644
--- a/packages/web-components/src/text-field/text-field.stories.ts
+++ b/packages/web-components/src/text-field/text-field.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/text-field.html';
-import { FASTTextField } from './';
+import { FluentTextField } from './';
 
 // Prevent tree-shaking
-FASTTextField;
-FASTDesignSystemProvider;
+FluentTextField;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Text field',
diff --git a/packages/web-components/src/tree-item/fixtures/tree-item.html b/packages/web-components/src/tree-item/fixtures/tree-item.html
index 5095a5a85b744a..d8230f6338b035 100644
--- a/packages/web-components/src/tree-item/fixtures/tree-item.html
+++ b/packages/web-components/src/tree-item/fixtures/tree-item.html
@@ -1,57 +1,57 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Tree item</h1>
   <h4>Default</h4>
-  <fast-tree-item>Tree item</fast-tree-item>
+  <fluent-tree-item>Tree item</fluent-tree-item>
 
   <h4>Nested</h4>
-  <fast-tree-item>
+  <fluent-tree-item>
     Tree item
-    <fast-tree-item>Nested tree item</fast-tree-item>
-  </fast-tree-item>
+    <fluent-tree-item>Nested tree item</fluent-tree-item>
+  </fluent-tree-item>
 
   <h4>Selected</h4>
-  <fast-tree-item selected>Tree item</fast-tree-item>
+  <fluent-tree-item selected>Tree item</fluent-tree-item>
 
   <h4>Before content</h4>
-  <fast-tree-item>
+  <fluent-tree-item>
     <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"
       />
     </svg>
     Tree item
-  </fast-tree-item>
+  </fluent-tree-item>
   <br />
-  <fast-tree-item selected>
+  <fluent-tree-item selected>
     <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"
       />
     </svg>
     Tree item
-  </fast-tree-item>
+  </fluent-tree-item>
 
   <h4>After content</h4>
-  <fast-tree-item>
+  <fluent-tree-item>
     <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"
       />
     </svg>
     Tree item
-  </fast-tree-item>
+  </fluent-tree-item>
   <br />
-  <fast-tree-item selected>
+  <fluent-tree-item selected>
     <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"
       />
     </svg>
     Tree item
-  </fast-tree-item>
+  </fluent-tree-item>
 
   <h4>Disabled</h4>
-  <fast-tree-item disabled>
+  <fluent-tree-item disabled>
     <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"
@@ -63,5 +63,5 @@ <h4>Disabled</h4>
         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"
       />
     </svg>
-  </fast-tree-item>
-</fast-design-system-provider>
+  </fluent-tree-item>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts
index a6a179c8b13484..a2bb1b8277cfa4 100644
--- a/packages/web-components/src/tree-item/index.ts
+++ b/packages/web-components/src/tree-item/index.ts
@@ -3,20 +3,20 @@ import { TreeItemTemplate as template, TreeItem } from '@microsoft/fast-foundati
 import { TreeItemStyles as styles } from './tree-item.styles';
 
 /**
- * The FAST Tree Item Custom Element. Implements {@link @microsoft/fast-foundation#TreeItem},
+ * The Fluent Tree Item Custom Element. Implements {@link @microsoft/fast-foundation#TreeItem},
  * {@link @microsoft/fast-foundation#TreeItem}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-tree-item\>
+ * HTML Element: \<fluent-tree-item\>
  */
 @customElement({
-  name: 'fast-tree-item',
+  name: 'fluent-tree-item',
   template,
   styles,
 })
-export class FASTTreeItem extends TreeItem {}
+export class FluentTreeItem extends TreeItem {}
 
 /**
  * Styles for TreeItem
diff --git a/packages/web-components/src/tree-item/tree-item.stories.ts b/packages/web-components/src/tree-item/tree-item.stories.ts
index 95be4842da9996..80d54023eca556 100644
--- a/packages/web-components/src/tree-item/tree-item.stories.ts
+++ b/packages/web-components/src/tree-item/tree-item.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import TreeItemTemplate from './fixtures/tree-item.html';
-import { FASTTreeItem } from './';
+import { FluentTreeItem } from './';
 
 // Prevent tree-shaking
-FASTTreeItem;
-FASTDesignSystemProvider;
+FluentTreeItem;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Tree item',
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 4164affa5b424c..77f564fe8fdd64 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -79,7 +79,7 @@ export const TreeItemStyles = css`
     .items {
         display: none;
         ${
-          /* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) - 
+          /* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
             update when density story is figured out */ ''
         } font-size: calc(1em + (var(--design-unit) + 16) * 1px);
     }
@@ -89,7 +89,7 @@ export const TreeItemStyles = css`
         border: none;
         outline: none;
         ${
-          /* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) - 
+          /* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
             update when density story is figured out */ ''
         } width: var(--expand-collapse-button-size);
         height: var(--expand-collapse-button-size);
@@ -101,7 +101,7 @@ export const TreeItemStyles = css`
     }
 
     .expand-collapse-glyph {
-        ${/* Glyph size is temporary - 
+        ${/* Glyph size is temporary -
             replace when glyph-size var is added */ ''} width: 16px;
         height: 16px;
         transition: transform 0.1s linear;
@@ -111,7 +111,7 @@ export const TreeItemStyles = css`
     }
     .start,
     .end {
-        ${/* Glyph size is temporary - 
+        ${/* Glyph size is temporary -
             replace when glyph-size var is added */ ''} width: 16px;
         height: 16px;
         fill: ${neutralForegroundRestBehavior.var};
@@ -172,7 +172,7 @@ export const TreeItemStyles = css`
         left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
     }
 
-    ::slotted(fast-tree-item) {
+    ::slotted(fluent-tree-item) {
         --tree-item-nested-width: 1em;
         --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
     }
diff --git a/packages/web-components/src/tree-view/fixtures/tree-view.html b/packages/web-components/src/tree-view/fixtures/tree-view.html
index deae0540be14b1..4b032b9ded6762 100644
--- a/packages/web-components/src/tree-view/fixtures/tree-view.html
+++ b/packages/web-components/src/tree-view/fixtures/tree-view.html
@@ -1,131 +1,131 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h4>With items (don't render collapsed nodes)</h4>
-  <fast-tree-view render-collapsed-nodes="false">
-    <fast-tree-item>
+  <fluent-tree-view render-collapsed-nodes="false">
+    <fluent-tree-item>
       Root item 1
-      <fast-tree-item>
+      <fluent-tree-item>
         Flowers
-        <fast-tree-item disabled>Daisy</fast-tree-item>
-        <fast-tree-item>Sunflower</fast-tree-item>
-        <fast-tree-item>Rose</fast-tree-item>
-      </fast-tree-item>
-      <fast-tree-item>Nested item 2</fast-tree-item>
-      <fast-tree-item>Nested item 3</fast-tree-item>
-    </fast-tree-item>
-    <fast-tree-item>
+        <fluent-tree-item disabled>Daisy</fluent-tree-item>
+        <fluent-tree-item>Sunflower</fluent-tree-item>
+        <fluent-tree-item>Rose</fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>Nested item 2</fluent-tree-item>
+      <fluent-tree-item>Nested item 3</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>
       Root item 2
-      <fast-divider></fast-divider>
-      <fast-tree-item>
+      <fluent-divider></fluent-divider>
+      <fluent-tree-item>
         Flowers
-        <fast-tree-item disabled>Daisy</fast-tree-item>
-        <fast-tree-item>Sunflower</fast-tree-item>
-        <fast-tree-item>Rose</fast-tree-item>
-      </fast-tree-item>
-      <fast-tree-item>Nested item 2</fast-tree-item>
-      <fast-tree-item>Nested item 3</fast-tree-item>
-    </fast-tree-item>
-    <fast-tree-item>
+        <fluent-tree-item disabled>Daisy</fluent-tree-item>
+        <fluent-tree-item>Sunflower</fluent-tree-item>
+        <fluent-tree-item>Rose</fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>Nested item 2</fluent-tree-item>
+      <fluent-tree-item>Nested item 3</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>
       Root item 3 - Leaf Erikson
-    </fast-tree-item>
-  </fast-tree-view>
+    </fluent-tree-item>
+  </fluent-tree-view>
 
   <h4>Flat tree</h4>
-  <fast-tree-view>
-    <fast-tree-item selected>Daisy</fast-tree-item>
-    <fast-tree-item>Sunflower</fast-tree-item>
-    <fast-tree-item>Rose</fast-tree-item>
-    <fast-divider></fast-divider>
-    <fast-tree-item>Petunia</fast-tree-item>
-    <fast-tree-item>Tulip</fast-tree-item>
-  </fast-tree-view>
+  <fluent-tree-view>
+    <fluent-tree-item selected>Daisy</fluent-tree-item>
+    <fluent-tree-item>Sunflower</fluent-tree-item>
+    <fluent-tree-item>Rose</fluent-tree-item>
+    <fluent-divider></fluent-divider>
+    <fluent-tree-item>Petunia</fluent-tree-item>
+    <fluent-tree-item>Tulip</fluent-tree-item>
+  </fluent-tree-view>
 
   <h4>Some expanded</h4>
-  <fast-tree-view>
-    <fast-tree-item expanded>
+  <fluent-tree-view>
+    <fluent-tree-item expanded>
       Root item
-      <fast-tree-item expanded>
+      <fluent-tree-item expanded>
         Flowers
-        <fast-tree-item>Daisy</fast-tree-item>
-        <fast-tree-item>Sunflower</fast-tree-item>
-        <fast-tree-item>Rose</fast-tree-item>
-      </fast-tree-item>
-      <fast-tree-item>
+        <fluent-tree-item>Daisy</fluent-tree-item>
+        <fluent-tree-item>Sunflower</fluent-tree-item>
+        <fluent-tree-item>Rose</fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>
         Planes
-        <fast-tree-item>Tomcat</fast-tree-item>
-        <fast-tree-item>Hawker Harrier</fast-tree-item>
-        <fast-tree-item>Cesna</fast-tree-item>
-      </fast-tree-item>
-    </fast-tree-item>
-  </fast-tree-view>
+        <fluent-tree-item>Tomcat</fluent-tree-item>
+        <fluent-tree-item>Hawker Harrier</fluent-tree-item>
+        <fluent-tree-item>Cesna</fluent-tree-item>
+      </fluent-tree-item>
+    </fluent-tree-item>
+  </fluent-tree-view>
 
   <h4>Pre-selected tree item</h4>
-  <fast-tree-view>
-    <fast-tree-item expanded>
+  <fluent-tree-view>
+    <fluent-tree-item expanded>
       Root item
-      <fast-tree-item>
+      <fluent-tree-item>
         Flowers
-        <fast-tree-item>Daisy</fast-tree-item>
-        <fast-tree-item>Sunflower</fast-tree-item>
-        <fast-tree-item>Rose</fast-tree-item>
-      </fast-tree-item>
-      <fast-tree-item expanded>
+        <fluent-tree-item>Daisy</fluent-tree-item>
+        <fluent-tree-item>Sunflower</fluent-tree-item>
+        <fluent-tree-item>Rose</fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item expanded>
         Planes
-        <fast-tree-item selected>Tomcat</fast-tree-item>
-        <fast-tree-item>Hawker Harrier</fast-tree-item>
-        <fast-tree-item>Cesna</fast-tree-item>
-      </fast-tree-item>
-    </fast-tree-item>
-  </fast-tree-view>
+        <fluent-tree-item selected>Tomcat</fluent-tree-item>
+        <fluent-tree-item>Hawker Harrier</fluent-tree-item>
+        <fluent-tree-item>Cesna</fluent-tree-item>
+      </fluent-tree-item>
+    </fluent-tree-item>
+  </fluent-tree-view>
 
   <h4>With several nested items (expanded)</h4>
-  <fast-tree-view>
-    <fast-tree-item expanded>
+  <fluent-tree-view>
+    <fluent-tree-item expanded>
       Root item
       <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"
         />
       </svg>
-      <fast-tree-item expanded>
+      <fluent-tree-item expanded>
         Nested Root item 1
         <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"
           />
         </svg>
-        <fast-tree-item>
+        <fluent-tree-item>
           <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"
             />
           </svg>
           Nested item 4
-        </fast-tree-item>
-        <fast-tree-item>
+        </fluent-tree-item>
+        <fluent-tree-item>
           <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"
             />
           </svg>
           Nested item 5
-        </fast-tree-item>
-      </fast-tree-item>
-      <fast-tree-item>
+        </fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>
         Nested item 2
         <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"
           />
         </svg>
-      </fast-tree-item>
-      <fast-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>
         Nested item 3
         <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"
           />
         </svg>
-      </fast-tree-item>
-    </fast-tree-item>
-  </fast-tree-view>
-</fast-design-system-provider>
+      </fluent-tree-item>
+    </fluent-tree-item>
+  </fluent-tree-view>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts
index 361aa0f5795b5a..7ada2edec82eb0 100644
--- a/packages/web-components/src/tree-view/index.ts
+++ b/packages/web-components/src/tree-view/index.ts
@@ -3,20 +3,20 @@ import { TreeViewTemplate as template, TreeView } from '@microsoft/fast-foundati
 import { TreeViewStyles as styles } from './tree-view.styles';
 
 /**
- * The FAST Tree View Custom Element. Implements {@link @microsoft/fast-foundation#TreeView},
+ * The Fluent Tree View Custom Element. Implements {@link @microsoft/fast-foundation#TreeView},
  * {@link @microsoft/fast-foundation#TreeView}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-tree-view\>
+ * HTML Element: \<fluent-tree-view\>
  */
 @customElement({
-  name: 'fast-tree-view',
+  name: 'fluent-tree-view',
   template,
   styles,
 })
-export class FASTTreeView extends TreeView {}
+export class FluentTreeView extends TreeView {}
 
 /**
  * Styles for TreeView
diff --git a/packages/web-components/src/tree-view/tree-view.stories.ts b/packages/web-components/src/tree-view/tree-view.stories.ts
index a483cd701df236..46001e08d3e0e8 100644
--- a/packages/web-components/src/tree-view/tree-view.stories.ts
+++ b/packages/web-components/src/tree-view/tree-view.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import TreeViewTemplate from './fixtures/tree-view.html';
-import { FASTTreeView } from './';
+import { FluentTreeView } from './';
 
 // Prevent tree-shaking
-FASTTreeView;
-FASTDesignSystemProvider;
+FluentTreeView;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Tree View',